@charset "UTF-8";

/*
Theme Name: LifeSystems 
Theme URI: https://www.life-systems.de/
Author: Ingo Stephan
Author URI: https://www.ingostephan.de
Description: Theme für LifeSystems
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; }

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; }
html, body { height:100%; }
body { line-height: 1; 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, .show1500, .show1200, .show1024, .show1100, .show768, .show550, .show450 { display: none; }

body {
  font-family: 'Poppins', 'Verdana', 'Geneva', sans-serif;
  font-weight: 300;
  font-size: 1.1rem;
  letter-spacing: 0px;
  font-style: normal;
  position: relative;
  overflow-x: hidden;
}
.gradient_start {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background-image: linear-gradient(-270deg, #e63312, #d7007f, #95569e, #36a9e1 ); 
  background-size: 600% 600%; 
  -webkit-animation: gradient 30s ease-in-out infinite;
  animation: gradient 30s ease-in-out infinite;
  z-index: -1000;
}
@-webkit-keyframes gradient {
  0% { -webkit-background-position: 0% 50%; }
  50% { -webkit-background-position: 100% 50%; }
  100% { -webkit-background-position: 0% 50%; }
}
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient_page {
  position: relative; top: 0; left: 0; right: 0; bottom: 0;
  background-image: linear-gradient(-270deg, #e63312, #d7007f, #95569e, #36a9e1 ); 
  background-size: 600% 600%; 
  -webkit-animation: gradient 30s ease-in-out infinite;
  animation: gradient 30s ease-in-out infinite;
  z-index: -1000;
}
@-webkit-keyframes gradient {
  0% { -webkit-background-position: 0% 50%; }
  50% { -webkit-background-position: 100% 50%; }
  100% { -webkit-background-position: 0% 50%; }
}
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

img.bg-right { position: absolute; right: 0; bottom: -10vw; width: 50vw !important; height: auto !important; z-index: 1000; }
img.bg-right.small { bottom: -6.5vw; right: -6vw; width: 33vw !important; }
.nopad img.bg-right.small { bottom: -6.5vw; right: 0; width: 33vw !important; }

img.bg-left { position: absolute; left: 0; bottom: -8.3vw; width: 42vw !important; height: auto !important; z-index: 1000; }
img.bg-left.small { bottom: -6vw; width: 30vw !important; }

header, article, footer { position: relative; width: 100%; }

header { position: absolute; top:0; left:0; right: 0; height: auto; width: 100%; z-index: 9000; }
header#page { position: relative; height: auto; width: 100%; z-index: 9000; }

header section { padding: 0; }
header#page .logo img { max-width: 300px; min-width: 150px; width: 13vw; height: auto; position: relative; top: 0; left: 0; margin: 2vw 0 0 6vw; }

section { padding: 6vw; }
section div { position: relative; }

#start { position:relative; width: 100%;	height: 75vh; overflow: hidden !important; }

#start .logo img { max-width: 300px; min-width: 150px; width: 13vw; height: auto; position: absolute; top: 3vw; left: 3vw; }

#start section { width: 100%; }
#start section h2 {
  transform: scale(0.8);
  animation: scale 2s 1s forwards cubic-bezier(0.5, 1, 0.89, 1), fade-in 1.5s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
  opacity: 0;
  filter: blur(10px);
}
@keyframes scale {
  100% {
    transform: scale(1);
  }
}
@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
#start #video { width: 100%; height: 100vh; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -500; opacity: .15; }
#start #bgvideo { position: relative; width: 100%; height: 100vh; z-index: -1000; }
#start .heartbeat { position: absolute; bottom: 3vw; left: 3vw; width: 100%; height: 40px; background: transparent url('images/logo_wave_white.svg') repeat-x left center; background-size: auto 100%; z-index: 8000; }
#start .bg_start_mobile { position: absolute; opacity: .15; z-index: -500; top: 0; left: 0; right: 0; bottom: 0; background: transparent url('images/bg_start_mobile.jpg') center center no-repeat; background-size: cover; }

#line { height: 10px; }
section#filter { height: calc(25vh - 10px); }

#video .youtube_wrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
#video .youtube_wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#team .content h6 { margin-bottom: 0; }

#karriere { position: relative; }
#karriere h5 { margin-bottom: .5em; }
#karriere h5 a { color: #e63312; text-decoration: none; }
#karriere .bottom { position: relative; padding-bottom: 1rem !important; }
#karriere .bottom a.btn { position: absolute; bottom: 1rem; left: auto; right: 1rem; }
#karriere .job_overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .85; }

#portraits #owl-portraits .owl-stage-outer { border-radius: 10px; }
#portraits.alt #owl-portraits .owl-stage-outer { border-radius: 0px; }
#portraits #owl-portraits .owl-item div.portrait_content { min-height: 650px; }
#portraits #owl-portraits .owl-item div.portrait_content .portrait_hero { line-height: 1.4em; margin-bottom: 1.35rem; }
#portraits #owl-portraits .owl-item div.portrait_content .portrait_hero i { font-size: 1.8rem; margin-right: 1rem; padding: 7px; background: #ffffff; color: #4a4a49; border-radius: 5px; }

#portraits.alt #owl-portraits .owl-stage-outer { border-radius: 0px; }
#portraits.alt #owl-portraits .owl-dots { background: #f2efef; }

#portraits > div > .col_l_6 { min-height: 600px; }
#portraits > div > .col_l_6 .portrait_hero { line-height: 1.4em; margin-bottom: 1.35rem; }
#portraits > div > .col_l_6 .portrait_hero i { font-size: 1.8rem; margin-right: 1rem; padding: 7px; color: #ffffff; border-radius: 5px; }

#contact .logo { max-width: 180px; min-width: 120px; width: 13vw; height:auto; margin-bottom: 2rem; }
#contact .col_xxs_12 h4 { margin-bottom: 0; }

iframe.map { width: 100%; height: 25vw; border-radius: 10px; border-left: 8px solid #e63312; }

#content .featuredimg { border-radius: 8px; border-left: 8px solid #e63312; }