/*--------------------------------------------------------------
# Module
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Hero Content
--------------------------------------------------------------*/
.no-hero { height: 200px; background-color: rgba(227,6,19,0.7);}


.hero-content              { position:relative; z-index: 1;}
.hero-content .item-box    { position:relative; z-index: 11; padding-bottom: 35%;}
.hero-image-wrapper        { max-height:580px; overflow:hidden; }
.hero-image-box            { position:relative; width:100%; height:0; padding-bottom: 46%; overflow: hidden;}
.hero-content-box          { position:relative; width:100%; z-index:2; padding: 7rem 0; }

@media (min-width:860px) {
  .hero-img-active .hero-content-box { position:absolute; }
}

@media (max-width:1280px) {
  .hero-content .item-box    { position:relative; z-index: 11; padding-bottom: 50%;}
}

.hero-header { position:relative; }
.hero-content .text-box .cl-white a { color:#fff; }

.hero-content .image-box   { position:absolute; z-index:1; top:0; bottom:0; left:0; width:100%; height: 100%; }

.hero-image                { background-color:transparent; }
.hero-image .content-box { width: 60%; min-width: 700px; padding: 3rem 3rem 3rem 3rem; position:relative; margin-right: 3rem;  min-height: 285px;}


/* simulating Object fit for ie or older Browsers...
You must set the width to moin 140% otherwise the image will become to small... adjust if you must */
@supports (transform: translate(0, 0)) {
  .hero-content .image-box  img {
    top: 50%;
    left: 50%;
    position: relative;
    transform: translate(-50%, -50%);
    height:auto;
    width:110%;
    max-width: inherit;
  }
}


/* Object Fit the IMage to its Container*/
@supports (object-fit: cover) {
  .hero-content .image-box img       { object-fit: cover; object-position:50% 50%;  height: 100%; width: 100%; transform:none; left:0; top:0; }
}




/* Home teaser */
.home-teaser-modul            { position: relative; z-index: 2;}
.home-teaser-modul .col-item { margin-top:2rem; }
.casting-cut,
.composition-brands  { display:none;}
.brands-image {
  position:absolute;
  background-image:url('../images/composition-brands.png');
  background-position:bottom left;
  background-repeat:no-repeat;
  background-size: contain;
  height: 200px;
  width: 200px;
  bottom:14%;
  left: -46px;
}
.cut-image {
  position:absolute;
  background-image:url('../images/filmklappe.png');filter: /*drop-shadow(0 0 2px #333);*/
  background-position:bottom left;
  background-repeat:no-repeat;
  background-size: contain;
  height: 300px;
  width: 200px;
  bottom: -25px;
  left: 19px;
}
#secondary-brands { position:absolute; bottom:0; left:30px; z-index:1; display:block;  }
#secondary-brands .brands-image { width:260px; bottom:-20px; }

@media (min-width:960px) {
#secondary-brands   { display:none;}
.casting-cut,
.composition-brands { width:150px; position: relative; height:100%; display:none; }

.fixed-nav #site-navigation .casting-cut,
.fixed-nav #site-navigation .composition-brands {  display:none; }
.composition-brands {
  margin:0 0 0 auto;
  opacity:0;
}

.ready-to-roll .composition-brands {
  display:block;
   -webkit-animation-delay: 0.8s; animation-delay: 0.8s;
  -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
.casting-cut { margin:0 auto 0 0; }
.ready-to-roll .casting-cut {
  display:block;
   -webkit-animation-delay: 1.2s; animation-delay: 1.2s;
  -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
#primary-menu { margin:0;margin:0 auto}
.fixed-nav #site-navigation #primary-menu { margin: 0 0 0 75px;margin:0 auto }
}

@media (min-width:1100px) {
  .brands-image { left:-70px; }
  .brands-image { width:329px; }
  .cut-image { width: 300px; height:300px }
  .casting-cut,
  .composition-brands { width:230px; }

}

@media (min-width:1400px) {
.cut-image {width: 400px; height:400px }
}


@media (min-width:960px) {
  .hero-header:before { left:-100px; top:16px; }
}
.form-box { width: 100%; border: 0; height: 880px; }
.sidebar, .main-item { padding-top:5rem; position:relative; z-index:11;}

.sidebar { min-width: 250px; }
.sidebar-item { border:1px solid #d0d1d1; background-color:#fff; margin: 0 0 3rem 0; width:100%;  }
.sidebar-item header { background-color:#f0f1f3; border-bottom:1px solid #d0d1d1;  padding:1rem 3rem; }
.sidebar-item header h5 { margin:0; }
.sidebar-item .image-box { width:100%; padding: 3rem;}
.sidebar-item .content-box { padding:3rem; }

.sidebar-item.team-box { background-color: transparent;
border-color: transparent; }
.sidebar-item.team-box .image-box { background-color:#f0f1f3; border:0;}
.sidebar-item .image-box img { border:1px solid #fff; }
.sidebar-item.team-box .content-box { background-color:#f0f1f3;}
.sidebar-item.team-box  header {
  position: relative;
  margin: 0;
  left: -1px;
  width: calc(100% + 2px);
  overflow: hidden;
  padding: 0;
  top: -1px;
  border-bottom: 0;
  background:transparent;
}

.sidebar-item.team-box header h5 { position:relative; color:#fff; font-size:2.2rem; padding:1.6rem 2rem 1.6rem 2rem; margin: 0; }
.sidebar-item.team-box header::before {
    content: '';
    width: 114%;
    height: 100%;
    position: absolute;
    top: 0  ;
    background-color: rgba(18,70,139,0.8);
    left: -30px;
}


@media (min-width:960px) {
  .sidebar-item.team-box { margin-top: -11.5rem; }
}

@media (max-width:790px) {
  .main-col-box { display:block; }
  .main-col-box.col-item { width:100%; margin:0 0 3rem 0;}
  .sidebar, .main-item { width:100%; }
}
/*.home-teaser-modul .col-item:nth-of-type(1) header:before {
-webkit-transform: rotate(-3deg);
transform: rotate(-2deg);
}*/
.inline-image { margin:-7.4rem -5.5rem 0 0;
  display:none;
}
.form-content .inline-image { margin:0 -5.5rem 0 0; }

.inline-image-box { max-width:40%; }
.inline-image-box img { max-width:100%; height:auto;}

.ready-to-roll .in-view .inline-image {
  -webkit-animation-name: tada;
  animation-name: tada;
  display:block;
   -webkit-animation-delay: 3s; animation-delay: 3s;
  -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
}



.inline-image img { max-width:200px; height:auto;}
@media (max-width:790px) {
.inline-image { margin:0; }
.home #section-4 .inline-image { float: right !important; margin:-7.4rem -4rem -6rem -4rem;; max-width: 130px; }
.home #section-4 .form-content .inline-image { margin:0 -5.5rem 0 0; }
.home #section-4 .inline-image img { width:100%;}
.wp-logo-select .active::before { top: 13px;
left: 66%; }
}

@media (max-width:660px) {
.inline-image { display: block !important;
margin: 0 auto 20px auto;
float: none !important;
width: 200px;
 }
}
@media (max-width:600px) {
.wp-logo-select .active::after { width:30px; height:30px; right: -10px; left:inherit;
}
.wp-logo-select .active::before { top: 8px;right: -3px; left:inherit; width: 15px; height: 11px; border-width: 3px 3px 0 0;}
}


.embed-container {
  position: relative;
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0;
  overflow: hidden;
  width: 100%;
  height: auto;
  margin: 5px 0 30px 0;
}
.embed-container iframe {

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.newsletter-wrapper { background-color:#fff; border:1px solid #c9c9c9; margin-top:30px; padding: 30px; height: calc(100% - 60px);}
.newsletter-wrapper.nostretch { height:auto;; }


.newsletter-wrapper h2,
.istok-header {
  font-family:'Istok Web', Helvetica, Arial, sans-serif;
font-size:3.4rem;
font-weight:400;}

@media (min-width:790px) { .istok-header {margin-top:6rem; }}

.newsletter-brands { width:100%; }
.flex-box.newsletter-brands > .flex-item { max-width: 33.33%; margin: 0 20px 0 0;}
.flex-box.newsletter-brands .flex-item img {
    max-width: 100%; border-radius:50%; border:2px solid #fff;
}
.flex-box.newsletter-brands .flex-item.active img {
    border-color:#e30613;
}


@media (max-width:790px) {
  .flex-box.newsletter-brands{display: -webkit-box; display: -ms-flexbox; display: flex;  -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-flex-wrap: wrap; }
  .newsletter-box .flex-box {display: -webkit-box; display: -ms-flexbox; display: flex;  -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-flex-wrap: wrap; }
  .flex-box.newsletter-brands > .flex-item { width: calc(25% - 20px); margin: 0 10px 0 10px; max-width:inherit;}
}


@media (max-width:400px) {
  .flex-box.newsletter-brands > .flex-item { width: calc(50% - 20px); }
}


.newsletter-container { padding:30px 0; }
.newsletter-content { display:none; }
.newsletter-content.active { display:block; }
.small-font-box { font-weight:400; font-size:1.3rem; }
.flex-box .small-font-box { max-width: 90%; }
/* Icons */
[class^="icon-"]         { display:inline-block; min-width:30px; min-height:30px; position:relative;}
[class^="icon-"]:before  {
  position:absolute;
  top: 0;
  left: 0;
  content:'';
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-size:25px auto;
  background-position:center center;
}

/* Footer */
footer .menu,
footer .menu li                   { display:inline-block; margin:0; padding:0; position:relative; }
footer .menu li                   { padding:0 55px 0 0; }
footer .menu li:after { content:'|'; position:absolute; right:21px; top:0;  height:100%; display:inline-block; }
/*footer .menu li:last-of-type      { padding:0; }*/

footer .menu li:last-of-type:after  { display:none; }
footer a { color:#fff; text-decoration:none; }
footer .menu a         {  text-decoration:none; color:#fff;  }
footer .menu a:hover,
footer a:hover { text-decoration:underline; }
footer p { margin:0; }
.copyright { max-width:280px; }
footer .item-box                   { padding:3rem 0 0 0; }
footer .social-links li a:hover   { opacity:0.6; }

.menu-footer-menu-container { margin:auto 0 auto auto; }
.logo-link  { margin:auto 0 auto 0; }
.brand-link  { margin: auto 10px auto 10px;}
.logo-link:hover,
.brand-link:hover { opacity:0.8; }
 @media (max-width:1200px) {
   footer { font-size: 1.6rem; }
   footer .flex-box         {  padding-bottom:2rem; }
   footer .menu li  { display:inline-block; width: auto;}
   .footer-box { text-align: left; }
}
 @media (max-width:790px) {
   .footer-box.flex-box,footer .menu, footer .menu li {display:block; margin-bottom:1rem;}
   footer .menu li:after { display:none; }
   .logo-link  { margin:auto 0 auto 0; }
   }



section { opacity:0;  -webkit-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s;}
section.in-view { opacity:1; }