@charset "UTF-8";

/*
Theme Name: EPE – Sanierung und Entsorgung – 3. Versuch
Theme URI: https://www.domain.de/
Author: Ingo Stephan
Author URI: https://www.ingostephan.de
Description: Theme für EPE – Sanierung und Entsorgung
Version: 1.0
Tags: SGP, Gute Botschaften, Agentur, Remscheid, Werbung, Marketing, Internet, Facebook
Text Domain: Gute Botschaften.sgp
*/

.otgs-development-site-front-end,
.grecaptcha-badge { display: none !important; }

body, html { height: 100%; margin: 0; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
body { margin:0; padding:0;  }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a, a:active, a:visited { text-decoration: none; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease; }
.clear { clear:both; }
.nobr { white-space:nowrap; }
*, *::before, *::after { margin: 0; padding: 0; border: none; box-sizing: border-box; list-style: none; }
::-moz-selection { background: #000000; color: #ffffff; }
::selection { background: #000000; color: #ffffff; }
b, strong { font-weight: 700; }
em { font-style: italic; }

.show2000, .show1600, .show1440, .show1200, .show1024, .show1100, .show768, .show550, .show450 { display: none; }

/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/poppins-v21-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/poppins-v21-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* poppins-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/poppins-v21-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/poppins-v21-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/poppins-v21-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/poppins-v21-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

body {
  font-family: 'Poppins', 'Verdana', 'Geneva', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0px;
  font-style: normal;
  position: relative;
}

#stroke img { width: 15vw; max-width: 300px; height: auto; }
.animation { display: inline; white-space: nowrap; position: relative; z-index: 1; font-style: normal; }
.animation .lottie { position: absolute; z-index: -1; width: 120%; height: 100%; top: 52%; left: 50%; transform: translate(-50%, -50%); }
.lottiered { width: 300px; height: 20px; margin: 0 auto; }

header#start { opacity: 0; position: relative; overflow: hidden; height: calc(100% - 8vw); margin: 4vw; border-radius: 1vw; }
header#start.visible { opacity: 1; -webkit-transition:opacity 1s 0.5s ease; -moz-transition:opacity 1s 0.5s ease; -o-transition:opacity 1s 0.5s ease; transition:opacity 1s 0.5s ease; }
header#start section { width: 100%; padding: 0; }
header#start section img.logo { opacity: 0; position: relative; margin-top: 4vw; max-width: 400px; min-width: 200px; width: 15vw; height: auto; z-index: 2000; }
header#start section img.logo.visible { opacity: 1; -webkit-transition:opacity 2s 1.5s ease; -moz-transition:opacity 2s 1.5s ease; -o-transition:opacity 2s 1.5s ease; transition:opacity 2s 1.5s ease; }
header#start .slogan { position: absolute; left: 4vw; bottom: 5vw; font-size: 6.5vw; line-height: 1em;  text-transform: uppercase; color: #ffffff; z-index: 1000; }
header#start .slogan.visible { bottom: 7.5vw; -webkit-transition: bottom 1s 5s ease; -moz-transition: bottom 1s 5s ease; -o-transition: bottom 1s 5s ease; transition: bottom 1s 5s ease;  }

#start #video-container, #start #video-container video { width: 100%; height: 100vh; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -500; opacity: 1; border-radius: 1vw; }
#start #bgvideo { position: relative; width: 100%; height: 100vh; z-index: -1000; }
#start #video-mobile { display: none; }

header .bg { background-image: linear-gradient(-75deg, #9d9d9c 33%, #706f6f 33%, #706f6f 66%, #2e2d2c 66%); }
header .bg {
  animation:slide 4s ease-in-out infinite alternate;
  bottom:0;
  left:-50%;
  opacity:.15;
  position:absolute;
  right:-50%;
  top:0;
  z-index: 1;
}
header .bg2 {
  animation-direction:alternate-reverse;
  animation-duration:6s;
}
header .bg3 {
  animation-duration:9s;
}
@keyframes slide {
  0% {
    transform:translateX(-10%);
  }
  100% {
    transform:translateX(10%);
  }
}

header#start a img.logos {
  position: absolute; top: 4vw; right: 4vw; max-width: 400px; min-width: 200px; width: 13vw; height: auto; z-index: 1000;
  transform: scale(2);
  animation: scale 1.2s 1.5s forwards cubic-bezier(0.5, 1, 0.89, 1), fade-in 1.2s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}
@keyframes scale {
  100% {
    transform: scale(1);
  }
}
@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

nav { height: 3vw; }

aside { border-left: 1px solid #ebeef0; }

article { overflow: hidden; }
section { padding: 8vw 12vw; }

#welcome #myLottie { position: absolute; left: 0vw; bottom: 0; width: 30vw; max-width: 500px; height: auto; }

#services .col_l_sp_6 h2 { margin: 0; }
#services lottie-player { max-height: 150px; }

#parallax.bg_para {
  position: relative; 
  height: 86vh;
  margin: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
#parallax section { max-width: 50%; padding: 0; margin: 0; }
#parallax h2 { display: inline-block; color: #ffffff; padding: 1vw 1vw 1vw 4vw; line-height: 1.3em; font-size: 3vw; border-radius: 0 15px 15px 0; }

#referenzen #owl h1.overlay { position: absolute; left: 3vw; bottom: 2vw; font-size: 3.5vw; letter-spacing: -0.2rem; line-height: 0.65em; }
#referenzen #owl a i {
  margin-right: 10px; padding: 0; position: absolute; right: 20px; bottom: 20px; font-size: 3.2vw; z-index: 1000; line-height: 1em; color: #fff; 
  -webkit-transition: margin-right .25s ease-out; -moz-transition: margin-right .25s ease-out; -o-transition: margin-right .25s ease-out; transition: margin-right .25s ease-out;
}
#referenzen #owl a:hover i { margin-right: 0; }
#referenzen .bottom.round { margin: 15px 0; }

#zertifikate .caption { font-size: 1.1rem; line-height: 1.35rem; text-align: center; }
#zertifikate .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -25px; margin-left: -25px; }
#zertifikate .row .col_l_zert { width: calc(100% / 5); }
#zertifikate .row .col_l_zert > div { padding: 25px; }
#zertifikate .row .col_l_zert .zert_image { height: 9vw; }
#zertifikate .row .col_l_zert .zert_image > div,
#zertifikate .row .col_l_zert .zert_image a { height: 100% !important; width: 100% !important; display: -ms-flexbox !important; display: flex!important; }
#zertifikate .row .col_l_zert .zert_image div img,
#zertifikate .row .col_l_zert .zert_image a img {
  -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: auto; max-height: 9vw;
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -ms-flex-item-align: center!important; align-self: center!important;
}


header#single { position: relative; overflow: hidden; height: calc(50% - 4vw); min-height: 300px; margin: 4vw 4vw 0; border-radius: 1vw; }
header#single .bg { background-image: linear-gradient(-75deg, #706f6f 33%, #575756 33%, #575756 66%, #2e2d2c 66%); opacity: .25; }
header#single section { width: 100%; padding: 0; }
header#single a img.logos { position: absolute; top: 3vw; right: 4vw; max-width: 250px; min-width: 180px; width: 11vw; height: auto; z-index: 1000; display: inline-block; }
header#single .slogan { position: absolute; left: 4vw; bottom: 3vw; color: #ffffff; z-index: 1000; }
header#single .slogan h1 { font-size: 3.3vw; line-height: 1.15em; text-transform: none; }
header#single .slogan h4 { font-size: 1.3vw; margin-bottom: 1.3rem; }

header#single.service { position: relative; overflow: hidden; height: calc(100% - 8vw); min-height: 300px; margin: 4vw; border-radius: 1vw; }
header#single.service .col_l_12 { z-index: 2; }
header#single.service img.icon { width: 10vw; max-width: 150px; margin-bottom: 2vw; }

header#page { position: relative; overflow: hidden; height: auto; margin: 4vw 4vw 0; padding: 2vw; border-radius: 1vw; }
header#page .bg { background-image: linear-gradient(-75deg, #000000 33%, #ac2522 33%, #ac2522 66%, #ededed 66%); opacity: .5; }
header#page section { width: 100%; padding: 0; }
header#page a img.logos { position: relative; max-width: 250px; min-width: 180px; width: 11vw; height: auto; z-index: 1000; display: inline-block; }
header#page .slogan { position: absolute; left: 4vw; bottom: 3vw; color: #ffffff; z-index: 1000; }
header#page .slogan h1 { font-size: 3.3vw; line-height: 1.15em; text-transform: none; }
header#page .slogan h4 { font-size: 1.3vw; margin-bottom: 1.3rem; }

#page h5.bg-leightgrey.font-red { margin: 0; padding: 1vw 1.1vw; font-size: 1.4rem; border-radius: 7px; }
#page .sidemenu { padding: 16px 0; margin: 0; border-bottom: 1px solid #dadada; color: #3c3c3b; line-height: 1em; position: relative; }
#page .sidemenu h5 a { color:#3c3c3b; }
#page .sidemenu h5 a:hover { color: #ac2522 !important; }
#page .sidemenu a.bu_referenzen { position: absolute; bottom: 1vw; right: .75vw; margin-right: .25vw; text-decoration: none; font-size: 1rem; line-height: 1em; color: #ffffff; }
#page .sidemenu a.bu_referenzen:hover { color: rgba(255,255,255,.5) !important; right: .75vw; margin-right: 0; margin-left: .25vw; }
#page .sidemenu a.bu_referenzen i { margin-right: 0; }
#page .col_gallery { width: calc(3/12*100% - (1 - 3/12)*16px); margin-top: 16px; line-height: 0; }
#page .col_gallery { border-radius: 5px; }
#page .zertifikat .wp-block-column:first-child { flex-basis: 25% !important; }
#page .zertifikat .wp-block-column:last-child { flex-basis: 75% !important; }

footer { position: relative; padding: 3vw 6vw; border-top: 10px solid #ac2522;}