@charset "UTF-8";

/*
Theme Name: Werkstoffforum der Zukunft
Theme URI: https://www.werkstoffforumderzukunft.de/
Author: Ingo Stephan
Author URI: https://www.ingostephan.de
Description: Theme für das Werkstoffforum der zukunft
Version: 1.1
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, .show1440, .show1200, .show1024, .show1100, .show768, .show550, .show450 { display: none; }

body {
  font-family: 'PT Sans Narrow', 'Verdana', 'Geneva', sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0px;
  font-style: normal;
  position: relative;
  overflow-x: hidden;
  transition: background-color 1s ease;
}

header, article, footer { position: relative; width: 100%; }
section { position: relative; margin: 6vw; }

/* Index */

#video { position: fixed; width: 100%; height: calc(100vh - 60px - 4vw); object-fit: cover; top: 4vw; left: 0%; z-index: -1; }

#start { min-height: calc(100vh - 15px); }
#start section { padding: 0; margin: 0; }
#start section#animation { position: absolute; left: 0; bottom: 0; width: 100%; height: 12vh; overflow: hidden; height: 12vh; margin: 0 0 2vw 0; }
#start #logo { position: absolute; left: 4.3vw; top: calc(1vw + 60px); width: calc(40% - 4vw); min-width: 200px; max-width: 650px; z-index: 1000; }
#start #content { position: absolute; left: 10vw; bottom: 11vw; right: 11.5vw; z-index: 1000; }
#start h1 { font-size: 2.5vw; margin-bottom: 0; }
#start .text blockquote { font-size: 1.2em; line-height: 1.25em; margin-bottom: 0; font-weight: 300; color: #000000; }
#start .text blockquote p { margin-bottom: 1.1rem; }
#start .text blockquote cite { font-size: 1rem; line-height: 1.15em; font-style: normal; display:inline-block; }

#animation { position: relative; left: 0; bottom: 0; width: 100%; height: 12vh; overflow: hidden; }
#animation .bg {
  animation: slide 9s ease infinite alternate;
  bottom: 0;
  left: -40%;
  opacity: 1;
  position: absolute;
  right: -40%;
  top: 0;
  z-index: 1000;
  mix-blend-mode: multiply;
}
#animation .bg1 { background: transparent url('images/line_blue.svg') center center repeat-x; }
#animation .bg2 { background: transparent url('images/line_red.svg') center center repeat-x; animation-direction: alternate-reverse; animation-duration: 10s; }
#animation .bg3 { background: transparent url('images/line_orange.svg') center center repeat-x; animation-duration: 12s; }
#animation .bg4 { background: transparent url('images/line_green.svg') center center repeat-x; animation-direction: alternate-reverse; animation-duration: 11s; }
#animation .bg5 { background: transparent url('images/line_grass.svg') center center repeat-x; animation-duration: 13s; }
@keyframes slide {
  0% { transform:translateX(-10%); }
  100% { transform:translateX(10%); }
}

#slide { margin: 0; position: relative; }
#slide .shape_top_white { position: absolute; top: -3px; left: 0; width: 100%; height: 50px; z-index: 2000; }
#slide_content { position: relative; width: 100%; overflow: hidden; padding: 0; }
.slide .title { width: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 1; z-index: 1; background: rgba(49,56,59,0);}
.slide .title h1 { position: absolute; bottom: 2.5vw; left: 2vw; font-size: 3.8vw; line-height: 1em; display: block; margin: 0 !important; color: #ffffff; -webkit-transition:font-size .35s ease; -moz-transition:font-size .35s ease; -o-transition:font-size .35s ease; transition:font-size .35s ease; }
.slide .title h1 i { font-size: .9em; color: rgba(255,255,255,.5); }
.slide .title.inactive { opacity: 0; }
.content .slide .slide_content h1 { margin-bottom: .6em; }
.slide .slide_content h4 { font-size: 1.4rem; line-height: 1.4em; }
.slide .slide_content { position: absolute; left: 3vw; top: 5vw; right: calc(3vw - 15px); width: calc(100% - 6vw - 15px); opacity: 0; border-radius: 5px; }
.slide .slide_content.active { opacity: 1; top: 3vw; z-index: 1; }
.slide .slide_overlay { position: absolute; top: 0; left: 0; right: 100%; bottom: 0; opacity: 0; }
.slide .slide_overlay.active { right: 15px; opacity: 1; }
.slide:hover .slide_overlays { right: 0; }
.slide .title { -webkit-transition: all .25s ease; -ms-transition: all .25s ease; -moz-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; }
.slide .title.inactive { -webkit-transition:opacity .35s ease; -moz-transition:opacity .35s ease; -o-transition:opacity .35s ease; transition:opacity .35s ease; }
.slide .slide_content.active { -webkit-transition:opacity 0.8s .3s ease, top 0.8s .3s ease; z-index: 1; -moz-transition:opacity 0.8s .3s ease, top 0.8s .3s ease; z-index: 1; -o-transition:opacity 0.8s .3s ease, top 0.8s .3s ease; z-index: 1; transition:opacity 0.8s .3s ease, top 0.8s .3s ease; }
.slide .slide_overlay { -webkit-transition:right .35s ease; -moz-transition:right .35s ease; -o-transition:right .35s ease; transition:right .35s ease; }
#slide_content.active .slide a.overlay { display: none; }
#slide_content.active .slide.active a.overlay { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000; }

#slide_content .slide {
  position: relative; 
  min-height: 55vh;
  width: calc(1/3*100%);
  overflow: hidden; 
  -webkit-transition: width 0.3s ease; -ms-transition: width 0.3s ease; -moz-transition: width 0.3s ease; -o-transition: width 0.3s ease; transition: width 0.3s ease; 
}
#slide_content.active .slide.inactive .title h1 { font-size: 2.8vw; }

/* 3 Boxen */

#slide_content .slide { width: calc(1/3*100%); }
#slide_content.active .slide.active { width: calc(1/2*100%); }
#slide_content.active .slide.inactive { width: calc(1/4*100%); }

/* 2 Boxen */

#slide_content .slide { width: calc(1/2*100%); }
#slide_content.active .slide.active { width: calc(2/3*100%); }
#slide_content.active .slide.inactive { width: calc(1/3*100%); }

#news section { margin: 4vw 6vw; }
#news #news-block { width: 100%; }

#partner .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; -webkit-box-align: center;	-ms-flex-align: center; align-items: center; }
#partner .row .col_l_partner { width: calc(1/5*100% - (1 - 1/5)*6vw); padding: 10px 0; }
#partner .row .col_l_partner a img {
  -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: auto; max-height: 100px;
  object-fit: contain;
  position: relative;
  -ms-flex-item-align: center!important; align-self: center!important;
}

#foerderer .row .col_l_foerderer img {
  -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: auto; max-height: 200px;
  padding-right: 3vw;
  object-fit: contain;
  position: relative;
  -ms-flex-item-align: center!important; align-self: center!important;
}

/* Page */
header { background-color: transparent; background-size: 60% auto; background-position: right bottom -3px; background-repeat: no-repeat; }
header section { margin: 0; padding: calc(1vw + 60px) 6vw 3vw 3vw; }
header #logo { position: relative; width: 17vw; min-width: 200px; max-width: 400px; z-index: 1000; }

#page-team .content h4 { margin-bottom: .5rem; font-size: 2rem; }
#page-team .content h5 { margin-bottom: 0; }

#page-partner .toggletext { display: none; }
#page-partner .togglebutton { display: inline-block; }
#page-partner .togglebutton:hover { color: #647a84; cursor: pointer; }
#page-partner .togglebutton.font-red:hover { color: #e50051; cursor: pointer; }

#page-news h3.font-red a { color: #e50051; }
#page-news h3.font-orange a { color: #f39200; }
#page-news h3.font-green a { color: #66c1bf; }
#page-news h3.font-blue a { color: #009fe3; }
#page-news h3.font-grass a { color: #95c121; }
#page-news h3 a:hover { color: #647a84; }

#page-events .content h4 { margin-bottom: 1rem; }
#page-events .content .row.left h4 { line-height: 1.45em; }
#page-events a.btn { line-height: 1em; margin-top: 1.5rem; }
#page-events .col_l_12 h2 { margin-bottom: 1rem; }
#page-events .text.content .col_l_8 .font-grey a { color: #647a84; text-decoration: none; }
#page-events .text.content .col_l_8 .font-grey a:hover { color: #000000 !important; }
#page-events .text.content .col_l_8 h4 a { text-decoration: none; }
#page-events .text.content .col_l_8 a { text-decoration: underline; }

#page-network #members .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#page-network #members .row .col_l_member { width: calc(1/3*100% - (1 - 1/3)*50px);  margin-bottom: 30px; }
#page-network #members .row .col_l_member .memb_image { height: 9vw; }
#page-network #members .row .col_l_member .memb_image a { height: 100% !important; width: 100% !important; display: -ms-flexbox !important; display: flex!important; }
#page-network #members .row .col_l_member .memb_image a img {
  -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: auto; max-height: 150px;
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -ms-flex-item-align: center!important; align-self: center!important; border-radius: 10px; padding: 20px;
  border: 1px solid #edf0f2;
  background: #ffffff;
}
#page-network #members .row .col_l_member .memb_image a:hover img { border: 1px solid #009fe3; }
#page-network #members .row .col_l_member.leer { margin-bottom: 0; }

#page-network .toggletext { display: none; }
#page-network .togglebutton { display: block; position: relative; border-top: 1px dotted #647a84; padding-top: 8px; margin-top: 8px; }
#page-network .togglebutton:hover { color: #e50051; cursor: pointer; }
#page-network .togglebutton.font-red:hover { color: #e50051; cursor: pointer; }
#page-network .togglebutton i { position: absolute; right: 0; top: 11px; margin: 0; }
#page-network .togglebutton:hover i { color: #e50051; }

#page-mouseover ul { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; flex-flow: row wrap; margin: 0; font-size: 1.4rem; }
#page-mouseover ul > li { position: relative; width: calc(1/3*100% - (1 - 1/3)*30px); list-style: none; margin-bottom: 30px; padding: 15px; background: #fff; border: 1px solid #edf0f2; border-radius: 5px; -webkit-transition:color .2s linear; -moz-transition:color .2s linear; -o-transition:color .2s linear; transition:color .2s linear; }
#page-mouseover ul > li:hover { color: #e50051; cursor: crosshair; }
#page-mouseover ul > li:last-child, #page-mouseover ul.has-background > li:last-child { margin-bottom:0; padding: 0; background: transparent; border: 0; }

#page-mouseover ul > li > ul { display: block; opacity: 0; font-size: 1.05rem; line-height: 1.4em; margin-top: 15px; -webkit-transition:opacity .35s ease; -moz-transition:opacity .35s ease; -o-transition:opacity .35s ease; transition:opacity .35s ease; }
#page-mouseover ul > li:after { content: '...'; opacity: 1; position: absolute; left: 15px; bottom: 30px; color: #e50051; }
#page-mouseover ul > li:hover:after, #page-mouseover ul > li > ul > li:after, #page-mouseover ul > li:last-child:after { content: ''; }
#page-mouseover ul > li:hover > ul { opacity: 1; }
#page-mouseover ul > li:hover > ul > li { color: #000; }
#page-mouseover ul > li > ul > li, #page-mouseover ul.has-background > li > ul > li { width: 100%; list-style: none; margin-bottom: 0; padding: 0; background: transparent; border: 0; }

#page-mouseover ul.has-background { background-color: transparent; }
#page-mouseover ul.has-background > li { background-color: #FFFFFF; color: #ffffff; transition: background-color .2s linear; -webkit-transition: background-color .2s linear; -ms-transition: background-color .2s linear; -o-transition: background-color .2s linear; -ms-transition: background-color .2s linear; }
#page-mouseover ul.has-background > li:after { color: #FFFFFF; }
#page-mouseover ul.has-grey-background-color > li { background-color: #647a84; border: 1px solid #647a84; }
#page-mouseover ul.has-red-background-color > li { background-color: #e50051; border: 1px solid #e50051; }
#page-mouseover ul.has-orange-background-color > li { background-color: #f39200; border: 1px solid #f39200; }
#page-mouseover ul.has-green-background-color > li { background-color: #46bab8; border: 1px solid #46bab8; }
#page-mouseover ul.has-blue-background-color > li { background-color: #009fe3; border: 1px solid #009fe3; }
#page-mouseover ul.has-grass-background-color > li { background-color: #95c121; border: 1px solid #95c121; }

#page-mouseover ul.has-black-background-color > li, #page-mouseover ul.has-white-background-color > li, #page-mouseover ul.has-leightgrey-background-color > li { background-color: #FFFFFF; color: #000000; border: 1px solid #edf0f2; }
#page-mouseover ul.has-black-background-color, #page-mouseover ul.has-white-background-color { background-color: transparent !important; }
#page-mouseover ul.has-black-background-color > li:after, #page-mouseover ul.has-white-background-color > li:after, #page-mouseover ul.has-leightgrey-background-color > li:after { color: #e50051; }

#page-mouseover ul.has-background > li:hover { background-color: #ffffff; color: #e50051; border: 1px solid #edf0f2; cursor: crosshair; }
#page-mouseover ul.has-background > li:last-child:hover { background-color: transparent; border: 0; cursor: default; }

/* Sidebox */

#sidebox ul { margin: 0 0 1rem 1.2rem; padding: 0; }
#sidebox ul li { list-style: none; line-height: 1.2rem; padding: 0 0 1rem 0; }
#sidebox ul li:before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 1rem;
  content: "\f0da";
  color: #ffffff;
  margin-left: -1.2rem;
  margin-right: .35em;
}
#sidebox ul.projects li:before {
  color: #e50051;
}
#sidebox ul li a { font-size: 1rem; }
#sidebox h6 { margin-bottom: 0; }