@charset "UTF-8";

/*
Theme Name: LifeSystems V1
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: absolute; 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; }

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: 8vw 6vw; }
section div { position: relative; }

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

#start section { width: 100%; }
#start section h1 {
  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; }

#head { text-align: left; }
#head #video { width: 100%; max-width: 1000px; object-fit: cover; }

#transform { position: relative; }
#transform #logo { position: absolute; top: 0; left: 0; z-index: 3000; }
#transform #logo video { width: 100%; }
#transform #inhalt { position: relative; height: 65vh; z-index: 2000; background: rgba(255,255,255, .85); }
#transform #inhalt h1 { font-size: 3.4vw; line-height: 1em; margin-bottom: 0; }

#highlight { overflow: visible !important; height: 55vw; }
#highlight #video { width: calc(100vw - 33.33% - 6vw); height: calc(55vw - 20vw) ; object-fit: cover; position: absolute; top: 10vw; left: 33.33%; right: 6vw; bottom: 10vw; z-index: 100; opacity: 1; border-radius: 15px; }
#highlight.bg-gray #video { left: 6vw; right: 33.33%; }
#highlight #inhalt { position: absolute; left: 6vw; bottom: 6vw; max-width: 40%; z-index: 200; padding: 2vw 2vw 2vw calc(2vw + 8px); margin-bottom: 9vw; border-radius: 10px; border-left: 8px solid #e63312; }
#highlight.bg-gray #inhalt { left: inherit; right: 6vw; padding: 2vw calc(2vw + 8px) 2vw 2vw; border-left: 0; border-right: 8px solid #e63312; }
#highlight h1 { font-size: 4vw; line-height: 1em; margin-bottom: .5em; }
#highlight .btn { position: absolute; right: 2vw; bottom: 2vw; }
#highlight .overlay.blue { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(54,169,255,0.35); z-index: -200; }
#highlight .overlay.red { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(230,51,18,0.35); z-index: -200; }
#highlight img.bg-right { position: absolute; right: 0; bottom: -10vw; width: 50vw !important; height: auto !important; z-index: 101; opacity: .15 }
#highlight .frontline:before { width: 3vw; margin-left: calc(-3vw - 1rem); margin-right: 1rem; transform: translate3d(0, -0.35em, 0); }

#knowhow .col_l_4 { border-radius: 10px 0 0 10px; }
#knowhow .col_l_8.content { border-radius: 0 10px 10px 0; border-right: 8px solid #e63312; }
#knowhow .butoggle { position: relative; color: #9d9d9c; padding: 2vw; background: #f2efef; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; border-bottom: 1px solid #4a4a49; }
#knowhow .butoggle:first-child { border-radius: 10px 0 0 0; }
#knowhow .butoggle:last-child { border-bottom: 0; border-radius: 0 0 0 10px;  }
#knowhow .butoggle:hover { cursor: pointer; background: #4a4a49; color: #ffffff; }
#knowhow .butoggle > i.icon-arrow-right { position: absolute; top: 2.15vw; right: 4vw; font-size: 1.7rem; margin: 0; color: #ffffff; opacity: 0; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; }
#knowhow .butoggle:hover > i.icon-arrow-right { right: 1.7vw; opacity: 1; }
#knowhow .butoggle.active i.icon-arrow-right { right: 0; opacity: 1; color: #e63312; }
#knowhow .butoggle.active { background: #ffffff; color: #e63312; border-left: 8px solid #e63312; }
#knowhow .toggleright { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; }
#knowhow .panel { margin-left: -100%; margin-right: 100%; font-size: 1.2rem; line-height: 1.5em; opacity: 0; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease; }
#knowhow .panel p { margin-bottom: 1.5em; }
#knowhow .panel.active { margin-left: 0; margin-right: 0; opacity: 1; }

#referenzen img.logo { max-height: 65px; width: auto; }

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

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

#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; }

#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; }