*{
    margin: 0;
    padding: 0;
}

.wp-block-media-text__media img{	
width:70%!important;
}

p.p-icon{
	margin-bottom:0px!important;
}
a{
	color:var(--main);
	
}
body{
    color: #fff;  
    font-family: 'Source Sans Pro', Arial;   
	font-weight:300;	
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.3;
    
}
.previewcontent{
 font-size: 0.95rem;
	line-height: 1;   
}


h2.datenschutz{
	font-size:1.2em!important;
	line-height: 1.6;
	padding-bottom:5px;
	padding-top:15px!important;
	font-weight:600!important;
}
h3.datenschutz{
	font-size:0.9em!important;
	line-height: 1.6;
	padding-bottom:5px;
	padding-top:15px!important;
	font-weight:300!important;
	}


h2{
	font-weight: 300;
	font-size:1.4em;
	text-transform:uppercase;
		line-height: 1.2;
}

h3{
	text-transform:uppercase;
	color:#00a77f;
	font-weight:900;
	font-size: 1rem;
	line-height: 1.2;
}



body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

:root{
    --main: #00a77f;
    --dark: #111110;
    --grey: #202020;
    --textcolor: #5e5e5e;
}


#logo{
    position: fixed;
    left: 24px;
    top: 24px;
    width: 336px;
    z-index: 300;
    transition: all 0.5s
}
#logo img{
    width: 100%;
    height: auto;
}
#headerlinks {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 302;
}
#headerlinks ul{
    list-style: none;
}
#headerlinks li,
#mobibilesub li{
float: left;
text-align: center;
display: block;
width: 20px;
height: 20px;    
}
#headerlinks li.pair, 
#mobibilesub li.pair{

width: 100px;

}
#headerlinks li a,
#mobibilesub li a{
    color: var(--main);
    font-size: 14px;
	font-weight:500;
    
}
#myMenu li{
    display: block;
    color: #fff;
    transition: 0.2s all;
    position: relative;
    margin-bottom: 15px;

}
#splash, 
#splashmedium{
width: 100%;
 height: 100vh;

position: relative;
top: 0%;
left: 0;
  right: 0;
  bottom: 0;
overflow: hidden;
display: block;

}
#splashmedium{
    height: 0;
    padding-bottom: 15%;
    background: url(asd) 50% 50% no-repeat;
    background-size: cover;
    
}

#startvideo{
   position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0; 
  width: 100%;
  z-index: 10;
  height: auto;
  height: 100%;
 filter: none;
}

#backgroundvideo,
.video{
   position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0; 
  width: 100%;
  z-index: 10;
  height: auto;
 filter: saturate(70%) brightness(0.6);
}
.video{

    height: 100vh;
    z-index: 99;
}
.backgroundvideo.rechts_ausrichten{
right: 40%;
}


video + div {
    z-index: 9!important;
}

video {
  object-fit: cover;
}

 .backgroundvideo{
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 99;
	 
}
.sidenav{
    margin-top: 40px;
    top: 50%;
    -webkit-transform: translateX(0%) translateY(-50%);
    -moz-transform: translateX(0%) translateY(-50%);
    -ms-transform: translateX(0%) translateY(-50%);
    transform: translateX(0%) translateY(-50%);
    position: fixed;
    left: 24px;
    z-index: 301;
    transition: left 0.7s ease-out;
}
.sidenav li{
    transition: all 0.2s
}
.sidenav ul{
    position: relative;
    list-style: none;
}
.sidenav li::after {
    content: " ";
    position: absolute;
    width: 1px;
    height: 19px;
    background-color: #fff;
    display: block;
    left: 12.5px;
    top: 30px;
    opacity: 0.2;
    transition: all 0.5s
}
.sidenav li ul li::after {
transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s ease; 
}
.sidenav li.blockactive ul li::after{
    opacity: 0.8;
    transform: scaleY(1);   
}
.sidenav li:last-child:after{
    display: none;
}

.sidenav.lefthidden,
#logo.lefthidden{
    left: -380px;
}

.left-60,
.right-15-625,
.right-40{
position: relative;
min-height: 1px;
box-sizing: border-box;
float: left;
width: 60%;
height: 100%;
z-index: 100;
}
.right-40{
    width: 40%;
    position: relative;
    float: right; 
    background-color: var(--grey);
}
.right-15-625{
    width: 15.625%;
     float: right;
}
.sidenav li a {
    display: block;
    padding: 0 0 0px 49px;
    color: #fff;
    font-size: 14px;
     height: 30px;
     line-height: 30px!important;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.5s ease;
    opacity: 0.7;
    line-height: 1.2;
}
.sidenav li:hover > a, .sidenav li.active a {
    color: #fff;
    opacity: 1;
    }
.sidenav li.blockactive span.box,
.sidenav li.active span.box{
    
    width: 28px;
    height: 28px; 
    opacity: 1;   
        top: 3px;
    left: -1px;
}
.sidenav li.active a::before, 
.sidenav li.blockactive a::before {
    content: " ";
    display: block;
    position: absolute;
    left: 6px;
    top: 10px;
    z-index: 1;
    transition: opacity 0.6s ease-in-out;
    width: 16px;
    height: 16px;
    border:none!important;
    background-color: #fff;
    border-radius:50% ;
    transition: opacity 0.6s ease-in-out;
       opacity: 1
}

.sidenav li.blockactive a {

opacity: 1;
}

.fp-slidesNav.fp-bottom{
    left: 59%!important;
   margin: 0!important;
    width: 10px;
}

.sidenav li span.box {
    position: absolute;
    top: 6px;
    left: 4px;
    opacity: 0.2;
    width: 18px;
    height: 18px;
    border: 1px solid #fff;
    border-radius: 50%;
    transition: all 0.5s;
}
.sidenav li.active span.box{    
    opacity: 1;

}
#myMenu li ul li{
    margin-bottom: 0;
      padding-left: 10px;
}
#myMenu li ul li a{
    color: rgba(256,256,256,0.6);
}
#myMenu li ul li.active a {
    font-weight: 500;
    color: rgba(256,256,256,1);
}
#myMenu li ul li:hover a{
      color: rgba(256,256,256,1);    
}

.sidenav li.blockactive::after{
    
height: calc(100% - 23px);
 top: 38px;
}
.sidenav ul li ul{
    height: 1px;
}

.sidenav ul li ul,
.sidenav ul li ul li{
    transform: scaleY(0);    
    transform-origin: top;
    transition: all 0.6s ease;
 
    
}
.sidenav ul li ul.toggleheight, 
.sidenav ul li ul.toggleheight li { 
    transform: scaleY(1);
}
#myMenu li ul li::after {
  display: none;
}
#myMenu li ul li a::before{
    display: none;
}
#myMenu li ul li.active a::before{
    content: " ";
display: block;
position: absolute;
left: 9px;
left: 8.5px;
top: 9px;
z-index: 1;
opacity: 1;
width: 10px;
height: 10px;
border: 1px solid #fff;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px;

}

.sidenav  li > h3 > a{
    font-size: 16px;

}
.sidenav  li > h3 > a:hover{
    opacity: 0.9
}
.sidenav  h3 {
    font-weight: 300!important;
    text-transform: uppercase;
}
.box{
    position: absolute;
top: -1px;
left: -3.55px;
opacity: 0;
width: 18px;
height: 18px;
border: 1px solid #fff;
border-radius: 18px;
transition: opacity 0.6s ease-in-out;
}


.fp-slidesNav ul li a span{
    background-color: rgba(256,256,256,0.2);
    border-radius: 0!important;
      height: 55px!important;
    width: 6px!important;
    top: 0!important;
    left: 0!important;
    margin: 0!important;
}
.fp-slidesNav ul li {
    height: 55px!important;
    width: 6px!important;
    margin: 0 0 10px!important;
    line-height: 55px!important;
    display: block;
    position: relative;
}

.fp-slidesNav ul li .navlabel{
    position: absolute;
    left: -190px;
    width: 180px;
    text-align: right;
    text-transform: uppercase;
    font-size: 10px ;
    cursor: pointer;
    color: rgba(256,256,256,0.5);
}
.fp-slidesNav ul li a.active .navlabel,
.fp-slidesNav ul li a:hover .navlabel{
    color: #fff;
}


#section1 .fp-slidesNav .tooltip,
#section2 .fp-slidesNav .tooltip{
    position: absolute;
    right: 15px;
    top: 0; 
    text-align: right;
    color: #fff;
    text-transform: uppercase;
    line-height: 60px!important;
    font-size: 10px!important;
    color: rgba(256,256,256,0.5);
}
#section1 .fp-slidesNav a.active + .tooltip,
#section2 .fp-slidesNav a.active + .tooltip{
color: rgba(256,256,256,0.9);
}
.fp-slidesNav ul li a.active span,
.fp-slidesNav ul li:hover a span{

     background-color: rgba(256,256,256,0.9);

}

.overlay{
    background-color: rgba(256,256,256,0.2);
}

.left-60.smart, 
.left-60.services{

    background: url(../img/black.jpg) 50% 50%;
    background-size: cover;

}
h2 img{
    margin-bottom: 15px;
}
#section3{
    overflow: hidden;
}
#slide1-1 .left-60.leistungen img,
.left-60.services img, 
.geschichtenbild .backgroundimage ,
.leistungen .backgroundimage ,
.leistungen .backgroundimage div,
.geschichtenbild .backgroundimage div{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 99;

}
.leistungen .backgroundimage div,
.geschichtenbild .backgroundimage div{
    z-index: 100;
    background: transparent 50% 50% no-repeat;
    background-size: cover;
}
.leistungen .backgroundimage div:first-child,
.geschichtenbild .backgroundimage div:first-child{
    z-index: 101;
}

.leistungen .backgroundimage div:nth-child(1n+3),
.geschichtenbild .backgroundimage div:nth-child(1n+3){
    z-index: 99;
}
.leistungen .backgroundimage,
.geschichtenbild .backgroundimage{
    width: 100%;
    height: 100%;
    background: url(../img/black.jpg) 50% 50% no-repeat;
    background-size: cover;
    
}

.left-60.imagevideo{
    background: url(../img/gebaeude_wp.jpg) 50% 50%;
    background-size: cover;
}

.left-60.leistungen {
    background-size: cover;
    background-repeat: no-repeat;
}
    
.left-60.karriere{
    background: url(../img/karriere.jpg) 50% 50%;
    background-size: cover;
}
.left-60.standort{
    background: url(../img/gebaeude_wp.jpg) 50% 50%;
    background-size: cover;
}
.left-60.black{
    background: #000;
}
.right-40.white{
    background: #fff;
}

h2 + iframe{
    margin: 20px 0 60px
}
.starthead{
    height: 30%;
    position: relative;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    text-align: left;
    z-index: 101;
    background-color: var(--grey) ;
    background-color: transparent;
    transition: all 0.7s ease-out;
    
}

.starthead .starttext{
    position: absolute; 
    left: 20%;
    top: 45%;   
}
.starttext h1{
    text-align: left;
    font-weight: 500;
    font-size: 32px;
    font-size: 2rem;
    line-height: 1.3;
}
.dark-overlay{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,.3);
    z-index: 100;
}
#section4 .dark-overlay{
    background-color: rgba(0,0,0,.6);
}

.content{
    padding: 20% 8% 0;
    
    height: 100%;

    box-sizing: border-box;
    position: relative;

}
.content + .spacetop{
    padding-top: 0; 
    padding: 0 10%;
    position: relative;
    top: 35%;
}
.align-to-bottom{

      position: absolute;
  bottom: 50px;
  left: 8%;   
  right: 8%;
  padding-right:0px!important;
}

.align-to-bottom.mod{
    bottom: 21%;
}

.align-to-bottom.modder {
    bottom: 36%;
    bottom: 34.5%;
}
p{
    margin-bottom: 24px;

}

.spacetop p{
    max-width: 470px;
}
.textbox h2,
.colorwhite p{
    color: #fff;
}
.textbox p,
.textbox li,
.textbox {
    color: var(--textcolor) ;
}

.textbox li{
    list-style: none;
    margin: 20px 0 50px;
    font-weight: 700;
    max-width: 300px;
}

.carousel,
.carouselMold{
    position: relative;
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    
}

.carousel li,
.carouselMold li,
.carouselbranchen li{
    position: absolute; 
    height: auto;  
    max-height: 500px;  
    list-style: none;
    color: rgba(256,256,256,0.5);
}
.carousel li{
    height: 70px;
}



.geschichte li .number{
    width: 250px;
    float: left;
    font-size: 60px;
    line-height: 60px;
    font-weight: 300 ;
    transition: all 0.5s;
}
.geschichte li  .text{
    display: block;
    text-align: center;
    float: right;
    width: calc(100% - 250px);
}
.carousel li .entry{
    width: auto;
    float: left;
    font-size: 20px;
    line-height: 20px;
    font-weight: 700 ;
    padding: 10px 0;

}
.carousel li.active{
    height: 100px;
    color: #fff;
}
.geschichte li.pos6 .number{
    font-weight: 700;
    color: #00a77f;
    font-size: 130px;
    font-size: 5rem;
    line-height: 60px;

    width: 215px;
    
}
.carousel li.active .entry{
    font-size: 25px;
    line-height: 25px;
    padding: 15px 0;
    margin-left: 60px;
    max-width: 540px;
}
.carousel li,
.carouselMold li,
.carouselbranchen li{

    transition:all 1s;

}
 .carousel li.visible,
 .carouselMold li.visible,
 .carouselbranchen li.visible {
    display: block;   
    z-index: 300;
}
.carouselMold li.ex-visible,
.carouselbranchen li.ex-visible{
    left: -35%!important;
    bottom: unset;    
    top: 0%;    
}
 .carousel li,
 .carouselMold li,
 .carouselbranchen li{
     left: -25.1%;
     left: -400%;
     bottom: -25%;

   
 }

/* geschichte */
.carousel li.pos1{left: 18.5%; top: 7.4%; color: rgba(256,256,256,0.1);}
.carousel li.pos2{left: 25.41%; top: 19.4%; color: rgba(256,256,256,0.2)}
.carousel li.pos3{left: 29.5%; top: 32.87%;  color: rgba(256,256,256,0.3)}
.carousel li.pos4{left: 32.4%; top: 45.83%;}
.carousel li.pos5{left: 29.5%; bottom: 32.87%; color: rgba(256,256,256,0.3)}
.carousel li.pos6{left: 25.41%; bottom: 19.4%;color: rgba(256,256,256,0.2)}
.carousel li.pos7{left: 18.5%; bottom: 7.4%;color: rgba(256,256,256,0.1)}


/* Moldtechnologies */
.carouselMold li.moldpos1{left: 2.3%; top: 8%;}
.carouselMold li.moldpos1{left: 2.3%;  width: 220px; height: 240px; opacity: 0.4}

.carouselMold li.moldpos2{left: 18.8%; top: 21.48%;}
.carouselMold li.moldpos2{left: 10%; top: 14%; width: 320px; height: 256px; opacity: 0.7}
.carouselMold li.moldpos3{left: 20.2%; top: 30.5%;}
.carouselMold li.moldpos4{left: 11.8%; top: 65%; width: 320px; height: 256px; opacity: 0.7}
.carouselMold li.moldpos5{left: 2.3%; top: 90%;  width: 300px; height: 240px; opacity: 0.4}


.carouselbranchen li.branchenpos1{left: 2.3%; top: 8%; width: 200px;}
.carouselbranchen li.branchenpos2{left: 11.8%; top: 21.48%; }
.carouselbranchen li.branchenpos3{left: 25.2%; top: 35.5%;}
.carouselbranchen li.branchenpos4{left: 11.8%; bottom: 21.48%;}
.carouselbranchen li.branchenpos5{left: 2.3%; bottom: 10.2%; width: 200px;}


.carouselbranchen li.branchenpos1{left: 2.3%; top: 8%; width: 200px; height: 240px; opacity: 0.4}
.carouselbranchen li.branchenpos2{left: 10%; top: 14%; width: 320px; height: 256px; opacity: 0.7}
.carouselbranchen li.branchenpos3{left: 20.2%; top: 30.5%;}
.carouselbranchen li.branchenpos4{left: 11.8%; top: 65%; width: 320px; height: 256px; opacity: 0.7}
.carouselbranchen li.branchenpos5{left: 2.3%; top: 90%;  width: 300px; height: 240px; opacity: 0.4}




.carouselbranchen li div{
    display: none;
}

.space{
 padding: 20% 10% 0;
}
.spacing{
    padding: 64px 0;
}
.spacing.vid{
    height: 340px;
    height: 31vh;
}
.spacing.tex{
    height: 300px;
    height: 27%;
    height: 27vh;
}
.spacing.form{
    height: 125px;
    height: 11.5%;
    height: 11.5vh;
}
h2.branchen{
    text-transform: uppercase;
    text-align: left;    
}
h3#bheadline, 
h3.maincolor{
    color: var(--main);
}
#bsameas,
.sameas{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    background-color: #3d3d3d;
}
.sameas.bigger{
    height: 33%;
}
.sameas h4{
    color: #646464;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 20px;
    margin: 20px 0;
    padding: 0;
}
.sameas.bigger h4{
    margin: 20px 0 15px;    
}
.sameas.showOnMobile h4{
    margin-bottom: 0;
}
.size50{
    float: left;
    width: 50%;
    height: 70%;
}
#bcontent{
    margin-top: 50px;
}

 .carouselMold li,
 .carouselbranchen li{
    width: 280px;
    height: 250px;
 }
 .carouselMold li.active,
 .carouselbranchen li.active{  
    width: 450px;  
    z-index: 310;     
 }
.carouselMold li img,
.carouselbranchen li img{
    width: 100%;
    height: auto;
}

.plus1{
    left:35.31%;
    top: 35.648%
}
.plus2{
left: 36.93%;
top: 40.926%;
}

ul.leistungen,
ul.geschichte{
    list-style: none;  
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
ul.geschichte li,
ul.leistungen li{
font-weight: 300;
left: 8%;
right: 10%;
position: absolute;
color: var(--textcolor);
    transition: all 0.7s;
}



ul.leistungen li.pos1{top: 7.3%;  }
ul.leistungen li.pos2{top: 12.2%;  }
ul.leistungen li.pos3{top: 21.4%;}
ul.leistungen li.pos4{top: 29.5%;}
ul.leistungen li.pos5{top: 38.6%;}
ul.leistungen li.pos6{top: 46.7%;  color: #fff; font-size: 20px;font-size: 1.25rem;}
ul.leistungen li.pos7{top: 57.8%}
ul.leistungen li.pos8{top: 65.9%;}
ul.leistungen li.pos9{top: 73%;}
ul.leistungen li.pos10{top: 80.1%;}
ul.leistungen li.pos11{top: 88.2%;}
ul.leistungen li.pos12{top: 96.3%;}

ul.leistungen li.pos1,
ul.leistungen li.pos2,
ul.leistungen li.pos3{
    display: none;
}



ul.geschichte li.pos1{top: 7.1%;  }
ul.geschichte li.pos2{top: 14.2%;  }
ul.geschichte li.pos3{top: 21.4%;}
ul.geschichte li.pos4{top: 28.5%;}
ul.geschichte li.pos5{top: 35.6%;}
ul.geschichte li.pos6{top: 42.7%; color: #fff; font-size: 20px;font-size: 1.25rem;}
ul.geschichte li.pos7{top: 49.8%;}
ul.geschichte li.pos8{top: 56.9%;}
ul.geschichte li.pos9{top: 64%;}
ul.geschichte li.pos10{top: 71.1%;}
ul.geschichte li.pos11{top: 78.2%;}
ul.geschichte li.pos12{top: 85.3%;}
ul.geschichte li.pos13{top: 91.4%;}
ul.geschichte li.pos14{top: 98%;}

ul.geschichte li.pos1,
ul.geschichte li.pos2,
ul.geschichte li.pos3{
    display: none;
}
ul.geschichte li {
height: 60px;
line-height: 60px;

}
ul.geschichte li .text{
    line-height: 1;
    display: inline-block;
     vertical-align: middle;  
     float: none; 
     width: 100%;
}
ul.geschichte .floatright{
    float: right;
       display: block;
    text-align: center;
    float: right;
    width: calc(100% - 250px);
}


ul.geschichte .ex-visible {
    top: -20%;
}

a.arrow {
    width: 4vmin;
    height: 4vmin;
    box-sizing: border-box;
    position: absolute;
    display: block;
    left: 50%;
    top: 93%;
    transform: rotate(135deg);
    z-index: 999;
}

a.arrow::before {
    content: '';
    width: 100%;
    height: 100%;
    border-width: .8vmin .8vmin 0 0;
    border-style: solid;
    border-color: #fff;
    border-color: rgba(256,256,256,0.6);
    transition: .5s ease;
    display: block;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    transform-origin: 100% 0;
}

a.arrow:hover:before{
     border-color: #fff;    
}
div.arrow{
border: solid black;
  border-width: 0 6px 6px 0;
  border-color: rgba(256,256,256,0.6);
  display: inline-block;
  padding: 24px;
  position: absolute;
  left: 12px;
  cursor: pointer;
}
div.arrow.up{  
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg); 
  top: -32px;
}
div.arrow.down{
 transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  bottom: -32px;
}
div.arrow:hover{
     border-color: rgba(256,256,256,0.9);    
}

 #posts-ajax,
.ul-wrap{
    /*  height: 500px; */
    height: 424px;
     position: relative;
}
#posts-ajax{
    padding: 24px 0;
}
.ul-wrap{
   overflow: hidden;
}
ul.publication-list{
    position: absolute;

    width: 100%;
}
.publication-list li {
padding: 0 0 24px;
height: 200px;
display: block;
position: relative;
list-style: none;
}


/* overlay box start */
.overlay,
.additionalpopuplayer{
    position: fixed ;
    z-index: 2000 ;
    top: 0px ;
    right: 0px ;
    bottom: 0px ;
    left: 0px ;
    overflow-y: auto ;
    display: none;
}
.additionalpopuplayer{
    display: block;
    z-index: 1998;
}
.blackedout{
     display: table ;
    height: 100vh ;
    width: 100% ;
    overflow: scroll;
    background-color: rgba(0, 0, 0, 0.75) ;

}
.tablecell {
    display: table-cell;
    vertical-align: middle;
}
.overlayinner{
    box-sizing: border-box;
    padding: 32px;
    border-radius: 2px;
    margin: auto;
    background-color: #00000073;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.102);
    width: 80%;
    height: auto;
	border: 2px solid #ffffff;
    position: relative;
}
@media all and (max-width: 980px) {
    .overlayinner{
        padding: 16px;
        width: 90%;
    }    
}
.overlayinner *{
 color: white;    
}
.overlayinner a{
    color: #00A77F;
}
.overlayinner a:hover{
    text-decoration: underline;
}
.overlayinner .postbox{
    cursor: default;
}
.overlayinner p{
 margin-bottom: 10px;
}
.close{
    display: block;
    height: 32px;
}
.closebutton{
    float: right;
    background: url(../img/close.png) 50% 50% no-repeat;
    height: 32px;
    background-size: 20px ;
    width: 32px;
    cursor: pointer;
    border-radius: 16px;
}
.closebutton:hover{
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
}

.overlay a.button{

font-size: 14px;
height: 35px;
line-height: 35px;
margin: 20px auto;
    width: 150px;
display: block;
text-align: center;   
}

.grid-box{
padding: 0;
margin-top: -20px;
display: grid;
grid-gap: 20px;
justify-content: center;
align-items: center;
 grid-template-columns: auto auto auto; 
grid-gap: 0px 15px;
height: calc(100% - 40px);
position: relative;
bottom: 0;
}
.grid-item {
  max-width: 210px;
  max-width: 150px;
  max-height: 130px;
  text-align: center;
}
.grid-item img{
    max-width: 150px;
    height: auto;
}

#section12{
    z-index: 301
}
.headlinebox{
    position: absolute;
    left: 8%;
    top: 20%;
}         

@media (max-width:1280px){
.carouselMold li,
 .carouselbranchen li{
    width: 250px;
    height: 245px;
 }
 .carouselMold li.active,
 .carouselbranchen li.active{
    width: 350px;

 }
}

@media (min-width:1620px){
p{
    margin-bottom: 24px;
}

.carouselMold li,
 .carouselbranchen li{
    width: 380px;
    height: 305px;
 }
 .carouselMold li.active,
 .carouselbranchen li.active{
    width: 536px;

 }
 .fp-slidesNav ul li a span{

      height: 60px!important;

}
.fp-slidesNav ul li {
    height: 60px!important;
    line-height: 60px!important;

}
}
#startvideo-mobile{
    display: none;
}
#startvideo{
    display: block;
}
#loading-mask{
    background-color: rgba(0,0,0,0.7);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.postbox{
padding: 0 0 0 8px ;
    height: 200px;  
    overflow: hidden;
    background-color: #fff;
    cursor: pointer;
    color: #202020;
}
.postbox p, 
.postbox h3{
color: #202020;
}
.postbox h3{
    margin: 4px 0;
}        
.postbox p{
    font-size: .9rem;
}
.postbox .datepublished{
    color: #00A77F;    
    font-size: 0.875rem;
    line-height: 1;
}
.postbox .fullcontent,
.postbox.selectedPost .previewcontent,
.postbox .closepost{
    display: none;
}
.postbox.selectedPost .fullcontent,
.postbox.selectedPost,
.postbox .closepost{
    display: block!important;
}
.postbox.selectedPost{
    height: auto;
    padding: 0 ;
}
.postbox.selectedPost,
.postbox.selectedPost h3,
.postbox.selectedPost p{
    background-color: transparent;
    color: #fff;
}

.image{
    position: relative;
    height: 0;
    width: 100%;
    padding-bottom: 100%;
}
.image div{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: 50% 50% no-repeat;
    background-size: cover ;
}
.overlaycontent .postbox{
    background-color: transparent;
    
}
.overlaycontent .previewcontent,
.overlaycontent .closepost{
    display: none!important;
}
.overlaycontent .fullcontent{
    display: block;
}
.overlaycontent .postbox{
    height: auto;
}
.overlaycontent .postbox p,
.overlaycontent .postbox h3{
    color: #fff;
}
.imagepadding{
    width: calc(100% - 32px);
   padding: 0 0 75%;
   background: transparent  50% 50% no-repeat;
   background-size: contain;
   margin: 0 16px;
   box-sizing: border-box;
}