/*BASE
--------------------------------------------------------- */
*{
  box-sizing: border-box;
  -moz-box-sizing:border-box;
  *behavior: url(boxsizing.htc);
  color:#444651;
  font-family: 'Roboto Condensed', sans-serif;
  outline:none;
}
html{
  font-size:0.813em;/* 13px */
  line-height:	1.4em;
  font-weight: 300;
}
body{
  background-image:url('../images/muster/concrete_seamless.png');
}
.body-bg{
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: -2;
  background: -moz-linear-gradient(left, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
  background: -webkit-linear-gradient(left, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.6) 100%);
  background: linear-gradient(to right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.6) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#99000000',GradientType=1 );
}
p{margin:0 0 14px;}
a{text-decoration: none;color:#fb0690;}
ul{margin:0 0 14px;}
li{margin:0;padding:0 0 10px 0;color:#868585;}
p{margin:0 0 14px;}
strong{font-weight: 700;}
nav ul{margin:0;list-style: none;padding:0;}
img{
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.pagecontainer{
  width: 100%;
  margin: 0 auto;
  max-width: 1250px;
  background: #fff;
 }
.btn{
  padding: 10px 20px;
  margin:0 0 14px;
  cursor: pointer;
  display: inline-block;
  color:#fff;
  background: #fb0690;
  background: -moz-linear-gradient(top, #fb0690 0%, #c0006c 50%, #fb0690 100%);
  background: -webkit-linear-gradient(top, #fb0690 0%,#c0006c 50%,#fb0690 100%);
  background: linear-gradient(to bottom, #fb0690 0%,#c0006c 50%,#fb0690 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb0690', endColorstr='#fb0690',GradientType=0 );
}
p.btn a{color:#fff;}
.btn:hover{
  background: #a9005f;
  background: -moz-linear-gradient(top, #a9005f 0%, #ff29a2 50%, #a9005f 100%);
  background: -webkit-linear-gradient(top, #a9005f 0%,#ff29a2 50%,#a9005f 100%);
  background: linear-gradient(to bottom, #a9005f 0%,#ff29a2 50%,#a9005f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9005f', endColorstr='#a9005f',GradientType=0 );
}
.youtube-container{
  position: relative;
  padding-bottom: 56.25% !important;
  padding-top: 0px !important;
  height: 0;
  overflow: hidden;
}
.youtube-container iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

 /*FONTS
---------------------------------------------------------*/
#responsive-menu{
  font-size: 1.7em;
  display: block;
  padding: 6px;
}
h1, .h1{
  font-size:2.692em;
  line-height: 0.9em;
  margin: 0 0 10px 0;
  font-weight: 700;
}
h2, .h2{
  margin: 0 0 14px 0;
  font-size:1.154em;
  line-height: 1em;
  color:#fb0690;
  font-weight: 400;
}
#slider h2{
  font-size:2em;
  line-height: 0.9em;
  margin: 0 0 10px 0;
  font-weight: 700;
}
h2.subtitle{
  margin-top: -5px;
}
.btn{
  font-size:1.154em;
  line-height: 1em;
  font-weight: 400;
}
nav a{
  font-size:1.154em;
  line-height: 1em;
  font-weight: 400;
}
footer a, footer i{
  font-size:1.154em;
  line-height: 1em;
  font-weight: 400;
}
.imgSignature{
  font-size:0.769em;
  line-height: 0.9em;
  font-weight: 400;
}
.small-font{font-size: 70%;}
 /*LAYOUT
---------------------------------------------------------*/
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
  padding: 0 10px;
  float: left;
  width: 100%;
}

.clearfix:before,
.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

/*NAVIGATION
----------------------------------------------------------*/
#responsive-menu{cursor: pointer;position:relative;z-index:100;}
#responsive-menu i{color:#fff;}
.js-active-nav #responsive-menu{position: fixed;top:6px;left:6px;}
#main-nav{position: fixed;height: 100%;top:0;opacity:0;left:0;width: 100%;background: #000;z-index: -2;overflow-x: scroll;transition: all .4s ease-in-out;}
.js-active-nav #main-nav{
  z-index: 99;
  opacity: 1;
}
nav#main-nav ul{margin-top: 100px;padding-bottom:20px;}
nav#main-nav  li{text-align: center;}
nav#main-nav  a{
  padding: 10px 20px;
  display: inline-block;
  text-align: center;
  color: #fff;
  border: 2px solid transparent;
}

nav#main-nav a:hover,
nav#main-nav li a:active,
nav#main-nav li.current a,
nav#main-nav li.section a {
  border-top: 2px solid #fb0690;
  color: #fb0690;
}

/*HEADER
--------------------------------------------------------- */
header{background: #000;}

/*CONTENT
--------------------------------------------------------- */
#logo{
  position: absolute;
  top:0;
  left:50%;
  margin-left:-60px;
  display: inline-block;
  width: 120px;
  z-index: 100;
}
.js-active-nav #logo{position: fixed;}
#content{padding: 90px 10px 20px 10px;}
#tmpl-Homepage #content{padding: 0;}
.js-homepage-active #content{padding: initial !important;}
.returnLink{
  color:#fb0690;
  margin: 0 0 14px 0;
  display: inline-block;
}
.returnLink:before{
  content: "\f100";
  font-family: FontAwesome;
  padding-right: 6px;
}
.returnLink:hover{
  margin-left: -3px;
}
.headline-youtube-gallary{
  padding-top: 10px;
  margin-bottom: 10px;
}
#dvd, #digital{
  color:#868585;
  margin: 0 0 14px 0;
  display: block;
}
#dvd:before{
  content: "\f07a";
  padding-right: 6px;
  font-family: FontAwesome;
}
#digital:before{
  content: "\f019";
  padding-right: 6px;
  font-family: FontAwesome;
}
#pdf{color:#fb0690;}
#pdf:before{
  content: "\f1c1 ";
  padding-right: 6px;
  font-family: FontAwesome;
}
.pagePicture{
  position: fixed;
  z-index: 0;
  display: none;
  max-width: none;
  max-height: 600px;
  bottom: 0;

}
#pdf:hover{text-decoration:underline;}
.tradesman-col{
  width: initial;
  margin-bottom: 14px;
  display: inline-block;
  float: left;
  padding:0 10px;
}
.tradesman-col:nth-child(2n+1){clear:left;}
.tradesman-col img{max-width: 150px;}
#flex-container{
  display: flex;
  flex-wrap: wrap;
}
#flex-container > .col-4{
  display: flex;
}
/*FOOTER
----------------------------------------------------------*/
footer *{color:#444651;}
footer{
  position: fixed;
  bottom: 0;
  width: 100%;
}
footer .footer-background{background: #c7c7c7;}
 footer nav li{
  display: inline-block;
  padding: 0;
}
footer nav li a{padding: 15px 25px 15px 0px;display: block}
footer nav li a:nth-child(1){padding:15px;}
footer nav li a:hover,
footer nav li a:hover i,
footer nav li a:active,
footer nav li a:active i,
footer nav li.current a,
footer nav li.current i,
footer nav li.section a,
footer nav li.section i{
  color: #fb0690;
}

/*SLIDER
----------------------------------------------------------*/
#slider{
  min-height: 500px;
  position: fixed;
  top: 0;
  z-index: -1;
  width: 100%;
  left: 0;
}
.slick-slide{
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.slick-list {
  height: auto !important;
}
.slider-span-container{
  width: 350px;
  margin-top: 110px;
}
.slider-span-container .slider-span{
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color:#fff;
  padding: 10px 15px;
}
.slider-span-container .slider-span-subline{
  font-size: 1.2em;
  line-height: 3em;
}
.new-img{
  position: absolute;
  width: 70px;
  top: -55px;
}
.big-img{
  position: absolute;
  height: 90%;
  z-index: -1;
  right: -140px;
  max-width: none;
  max-height: 600px;
  bottom: 0;
}
.btn-slider{margin-top: 10px;}
.slick-arrow{
  position: fixed;
  bottom: 60px;
  background: transparent;
  border:2px solid #fb0690;
  cursor: pointer;
  color: transparent;
  width: 32px;
  height: 32px;
  z-index: 1;
}
.slick-arrow.slick-prev{right: 50px;}
.slick-arrow.slick-next{right: 10px;}
.slick-arrow.slick-prev:before{
  content: '\f104';
  font-family: FontAwesome;
  color: #fff;
}
.slick-arrow.slick-next:before{
  content: '\f105';
  font-family: FontAwesome;
  color: #fff;
}
.slick-arrow:before{
  position: absolute;
  top:50%;
  margin-top: -10px;
  left: 50%;
  margin-left: -3px;
}
.slick-dots{
  position: absolute;
  margin:0;
  bottom: 51px;
  right:100px;
 }
.slick-dots li{
  display: inline-block;
  margin-right: 5px;
}
.slick-dots li button{
  background: transparent;
  border:2px solid #fb0690;
  cursor: pointer;
  color: transparent;
  width: 14px;
  height: 14px;
  display: inline;
}
.slick-dots li.slick-active button{background: #fb0690;}

/* 	Texteditor Image Classes*/
img.left, img.right, img.center, img.leftAlone {
	height: auto;
	width: auto;
}

/*Extra Classes
---------------------------------------------------------*/
.no-padding{padding:0 !important;}
.no-margin{margin:0;}
.line-height-min{line-height:0.7em !important;}
.padding-top-medium{padding-top:10px;}
.margin-bottom-medium, .margin-bottom-big{margin-bottom: 10px;}
.background-transparent{background: transparent;}
.background-white{background: #fff;}
.position-relative{position: relative;}
.text-align-center{text-align: center;}
 /*FLEXBOX MOBILE
-------------------------------------------------------------*/
#flex-mobile{
  display: flex;
  flex-direction: column;
  width: 100%;
}
#flex-mobile .order-1{order: 1;}
#flex-mobile .order-2{order: 2;}
#flex-mobile .order-3{order: 3;}

/*footer-logo-container*/
.footer-logo-container img{width: 70px; margin-left:20px;}

.footer-logo-container{
  position: relative;
  margin-bottom: 60px;
}
.footer-logo-container.fixed-footer-logo-js{
  width:100%;
  position:fixed;
  bottom:0;
}
#tmpl-Homepage .footer-logo-container{
  position: absolute;
  top: -45px;
  margin-bottom: 0;
  width:auto;
}
.slider-span-container .slider-span-headline {
  line-height: 1.95em;
}

@media(min-width:500px) {
  /*SLIDER
  ------------------------------------------------------------*/
  .pagePicture{display: inline-block;}
  .col-8{width: 100%}
  .press-img, .col-9{width: 50%;}
  .slider-span-container .col-4{
    width: 100%;
    margin-top: 50px;
  }

  .slider-span-container{
  	width: 700px;
    margin-left: auto;
    margin-right: auto;
    top:50%;
    margin-top: 0;
    transform: translateY(-50%);
  }
  .new-img{
    top:0px;
  	width: 70px;
  }
}

@media only screen and (orientation : landscape){
  .big-img {
    right: 0;
  }
  .slider-span-container .col-4{width: 17%; margin-top: 35px;}
	.slider-span-container .col-8{
		width: 73%;
		margin-top: 45px;
	}
}
