s@charset "UTF-8";

@media screen and (max-width: 2100px) {
  .sofortkontakt {
    right: 490px;
  }
}
@media screen and (max-width: 1330px) {
	.twenty-img  { display: none !important; }
}

@media(max-width: 1640px) {
	main .three ul li:before { left: -6%; }
	main .three ul li:nth-child(2):before { left: 3%; }
	main .three ul li:nth-child(3):before { left: 9%; }
}

@media(max-width: 1150px) {
  	.sofortkontakt {
      display: none;
    }
	.einsatz li,
	.einsatz li:nth-child(3n+3),
	.einsatz li:nth-child(3n+2) {
		min-width: 50%;
		border-right: none;
		flex-grow: 1;
		height: 37vw;
	}
	
	.einsatz li:nth-child(odd) {
		border-right: 1px solid #ffffff;
	}
  
    .vd video {
		width: 80vw;
      	height: auto;
    }
}

@media(max-width: 750px) {
	.einsatz li,
	.einsatz li:nth-child(3n+3),
	.einsatz li:nth-child(3n+2) {
		min-width: 100%;
		border-right: none;
		flex-grow: 1;
		height: 65vw;
	}
	
	.einsatz li:nth-child(odd) {
		border-right: none;
	}
}

@media(max-width: 1070px) {
	header .cnt { width: auto; }
	header nav { height: 140px; z-index: 4; }
	header .asidenav ul { display: inline-block; }
	header .asidenav ul:first-child { display: none; }
	
	header .mainnav { left: 20px; border-bottom: none; }
	
	header .asidenav {
		left: auto;
		right: 20px;
		bottom: auto;
		top: 12px;
		width: auto;
	}
	
	header .asidenav li { float: right; height: 40px; }
	header .asidenav li, header .asidenav li a { line-height: 40px; }
	
	header .mainnav ul {
		display: block;
		position: fixed;
		right: auto;
		left: 0;
		top: 20px;
		width: 100%;
		height: auto;
		z-index: 98;
		opacity: 0;
		visibility: hidden;
		transition: opacity 250ms linear,
		visibility 250ms linear;
	}
	
	header .mainnav ul#copyNav {
		top: 276px;
	}
	
	header .mainnav li {
		display: block;
		float: none;
		height: 64px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.5);
		border-left: none !important;
		border-right: none !important;
	}
	
	header .mainnav li a {
		padding: 0 15px;
		line-height: 64px;
	}
	
	header .mainnav #copyNav li {
		height: 44px;
	}
	
	header .mainnav #copyNav li a {
		line-height: 44px;
		color: #ffffff;
	}
	
	header .mainnav li a img { height: 34px; }
	
	header .mainnav li a.product-speedwall img { width: 141px; }
	header .mainnav li a.product-speedfloor img { width: 157px; }
	header .mainnav li a.product-speedcomplete img { width: 222px; }
	
	header .mainnav ul.active {
		opacity: 1;
		visibility: visible;
	}
  
  	header .anfrage-menu {
      top: 140px;
    }
  	
  	.award img {
        height: 40px;
        left: 300px;
        top: 65px;
    }
	
	main .thirds.textright .two .cnt,
	main .thirds .two .cnt { width: auto; }
	
	#overlay {
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0;
		visibility: hidden;
		z-index: 97;
		transition: opacity 250ms linear,
		visibility 250ms linear;
	}
  
    a.flyer {
		right: 20px;
    }
	
	#overlay.active {
		opacity: 1;
		visibility: visible;
	}
	
	.hassub {
		display: none !important;
	}
	
	.issub {
		display: block !important;
	}
	
	.issub {
		display: none !important;
	}
	
	#slider,
	.claim { transition: opacity 250ms linear, visibility 250ms linear; }
	
	#slider.activenac,
	.claim.activenav { opacity: 0; visibility: hidden; }
	
	#trigger {
		display: block;
		position: fixed;
		right: 20px;
		top: 70px;
		background: #d7152e;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		z-index: 99;
	}
	
	#trigger span {
		display: block;
		position: absolute;
		left: 15px;
		width: 20px;
		height: 4px;
		background-color: #ffffff;
	}
	
	#trigger span:nth-child(1) { top: 16px; }
	#trigger span:nth-child(2) { top: 23px; }
	#trigger span:nth-child(3) { top: 30px; }
  
  #trigger.active span:nth-child(2) { opacity:0; }
  #trigger.active span:nth-child(1) { top: 23px; transform: rotate(45deg); }
  #trigger.active span:nth-child(3) { top: 23px; transform: rotate(-45deg); }
	
	header #slide-left { left: 20px; }
	header #slide-right { right: 20px; }
	
	.gallery .gal-left { left: 20px; }
	.gallery .gal-right { right: 20px; }
	
	
	header #startscreen a:hover span:first-child {
		background-color: rgba(0, 9, 15, 0);
	}
  	.bekanntaus {
      	left: 300px;
    }
  	#kontaktform .materialanfrage, #kontaktform .mietprodukte {
      display: block;
    }

    #kontaktform .materialanfrage div, #kontaktform .mietprodukte div {
      display: block;
      width: 100%;
    }
    #kontaktform .materialanfrage div:first-child, #kontaktform .mietprodukte div:first-child {
	  padding-right: 0;
    }
    #kontaktform .materialanfrage div:last-child, #kontaktform .mietprodukte div:last-child {
	  padding-left: 0;
		border-left: none;
    }
}

@media(max-width: 1180px) {
	.chessboard ul { display: block; min-height: 1px; }
	.chessboard li { display: block; width: 100% !important; vertical-align: top; height: auto; padding: 40px 15px; }
	.chessboard li, .chessboard li * { color: #ffffff; background-color: #000000; }
	
	.chessboard li:after,
	.chessboard li:before {
		content: '';
		display: block;
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 16px;
		height: 4px;
		background-color: #d7152e;
		transform: translate(-50%, 1px);
		z-index: 2;
	}
	
	.chessboard li:before {
		width: 4px;
		height: 16px;
		background-color: #d7152e;
		transform: translate(-50%, 7px);
		z-index: 1;
	}
	
	.chessboard ul:last-child li:last-child:after,
	.chessboard ul:last-child li:last-child:before { display: none; }
}

@media(max-width: 1020px) {
	h1, h2, h3, h4, h5, h6 {
		font-size: 24px;
		line-height: 28px;
	}
  
    #kontaktform h4 {
      font-size: 18px;
    }
	
	p, main li {
		font-size: 16px;
		line-height: 19px;
	}
	
	.btn {
		font-size: 16px;
		line-height: 19px;
	}

	small {
		font-size: 12px;
		line-height: 15px;
	}
	
	header { height: 70vh; }
	
	header .claim { height: 115px; }
	header .claim strong, header .anfrage-menu > strong:first-child { font-size: 20px; line-height: 28px; }
	header .claim strong:last-child, header .anfrage-menu > strong:nth-child(2) { font-size: 32px; line-height: 40px; }
	
	main .thirds .one,
	main .thirds .two {
		padding-top: 50px;
		padding-bottom: 50px;
		width: 50%;
	}
	
	main .three img { margin: 40px auto; }
	main .three a { margin-top: 40px; }
	
	.gallery { height: calc((100vw - 240px) / 3 + 110px); }
	.gallery .holder { height: calc((100vw - 240px) / 3); width: calc(100% - 180px); }
	.gallery li { width: calc((100vw - 240px) / 3 + 20px); height: calc((100vw - 240px) / 3); }
	.gallery li a { width: calc((100vw - 240px) / 3); height: calc((100vw - 240px) / 3); }
	
	footer .thirds.contact { min-height: 1px; }
	footer .contact .one { display: none; }
	footer .thirds .two {
		width: 100%;
		padding: 40px 20px;
		text-align: center;
	}
	
	footer .thirds.legal .one,
	footer .thirds.legal .two { width: 50%; }
	footer .thirds.legal .one,
	footer .thirds.legal .one * { text-align: left; }
	footer .thirds.legal .two,
	footer .thirds.legal .two * { text-align: right; }
	
	header .asidenav li, header .asidenav li a {
		font-size: 14px;
	}
	
	.walldescbg { display: none; }
	
	header #startscreen {
		display: block;
		width: 100%;
		height: auto;
		padding-top: 140px;
	}
	
	header #startscreen a {
		display: block;
		width: 100%;
		height: 50vw;
		max-height: 450px;
		min-height: 300px;
	}
	
	#bodystart .claim,
	#bodyfloor .claim {
		position: relative;
		left: auto;
		bottom: auto;
	}
	
	header #startscreen a span.border {
		border-left: none;
	}
	
	.mobborder {
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}
	
	#bodystart header,
	#bodyfloor header {
		height: auto;
	}
	
	header #startscreen a:hover span:last-child {
		background-color: rgba(0, 9, 15, 0.85);
	}
  	.bekanntaus {
        display: none;
    }
}

@media(max-width: 768px) {
	header .logo:hover img { transform: none; }
	header .slogan.active { transform: translate(0, -3px); opacity: 0.5; }
	header #slide-right:hover, header #slide-left:hover { transform: translate(0, -25%); }
	main .thirds.white a:hover, main .thirds.black a:hover, .whitebtn a:hover { background-color: rgba(0, 0, 0, 0); }
	main .thirds.white a:hover p { color: rgba(0, 0, 0, 1); }
	main .thirds a:hover img, main .thirds a:hover .btn, main .thirds a:hover h2, main .three a:hover .btn, .whitebtn a:hover .btn { transform: none; }
	main .three a:hover { background-color: rgba(0, 0, 0, 1); }
  	
	.gallery li a:hover { opacity: 1; }
	.gallery .gal-left:hover, .gallery .gal-right:hover { transform: translate(0, -50%); }
	.whiteright .one { min-height: 50vw !important;}
	
	.gallery .gal-left, .gallery .gal-right { width: 40px; height: 40px; }
	.gallery .gal-left { left: 15px; }
	.gallery .gal-right { right: 15px; }
	.gallery { height: calc((100vw - 70px) / 2 + 110px); }
	.gallery .holder { height: calc((100vw - 160px) / 2); width: calc(100% - 120px); }
	.gallery li { width: calc((100vw - 160px) / 2 + 20px); height: calc((100vw - 160px) / 2); }
	.gallery li a { width: calc((100vw - 160px) / 2); height: calc((100vw - 160px) / 2); }
}

@media(max-width: 680px) {
	h1, h2, h3, h4, h5, h6 {
		font-size: 20px;
		line-height: 24px;
	}
	
	p, main li {
		font-size: 14px;
		line-height: 17px;
	}
	
	.btn {
		font-size: 14px;
		line-height: 17px;
	}
	
	header #startscreen {
		padding-top: 90px;
	}
	
	header nav,
	header .mainnav { height: 90px; }
	header .mainnav { left: 0; }
  
    header .anfrage-menu {
      top: 90px;
    }
	
	header .logo,
	header .logo img { width: 165px; height: 90px; }
	header .logo { left: 15px; }
  
  	.award img {
        height: 40px;
        left: 200px;
        top: 10px;
     }
	
	header .slogan {
		left: 160px;
		top: auto;
		bottom: 28px;
		width: 80px;
		height: 20px;
	}
	
	header .asidenav { display: none; }
	
	header .claim strong, header .anfrage-menu > strong:first-child { font-size: 11px; line-height: 17px; }
	header .claim strong:last-child, header .anfrage-menu > strong:nth-child(2) { font-size: 20px; line-height: 28px; }
	
	header .claim { padding-top: 15px; height: 75px; }
	
	header #slide-left { left: 15px; }
	header #slide-right { right: 15px; }
	header #slide-left, header #slide-right { width: 40px; height: 40px; transform: translate(0, -25%) scale(1); }
	
	main .thirds { border-bottom: 1px solid rgba(0, 0, 0, 0.25); }
	
	main .thirds.white,
	main .thirds.textleft {
		display: block;
		padding: 250px 15px 15px 15px;
		min-height: 1px;
	}
	
	main .thirds.white .two,
	main .thirds.textleft .one {
		display: block;
		padding: 0;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 235px;
	}
	
	main .thirds.white .one,
	main .thirds.textleft .two {
		display: block;
		padding: 15px;
		width: 100%;
		background-color: rgba(255, 255, 255, 0);
	}
	
	main .thirds.textleft .two p { color: rgba(0, 0, 0, 1); }
	main .thirds .two .cnt { width: 100%; padding: 0; max-width: 100%; }
	main .thirds.textleft .two,
	main .thirds.textleft .two * { text-align: center; }
	
	main .thirds.white .one p { max-width: 100%; padding: 15px 0; }
	
	main .three ul { display: block; width: 100%; padding: 0 15px; }
	main .three ul * { text-align: center !important; }
	main .three ul li { display: block; padding: 0 !important; width: 100% !important; }
	main .three ul li:before { left: 50% !important; height: 44px; top: 0; transform: translate(-50%, 0); background-position: center center; }
	main .three a,
	.whitebtn a { padding: 35px 0; }
	
	main .thirds.textright { display: block; }
	main .thirds.textright .one,
	main .thirds.textright .two { padding: 15px; width: 100%; display: block; }
	main .thirds.textright p { max-width: 100%; }
	main .thirds.textright .cnt { max-width: 100% !important; padding: 0 !important; width: 100% !important; }
	main .thirds.textright * { text-align: center; }
	
	footer .thirds .two { padding: 30px 15px; }
	
	footer .thirds.legal { display: block; }
	footer .thirds.legal .one,
	footer .thirds.legal .two { display: block; width: 100%; text-align: center; }
	footer .thirds.legal .two { padding: 0 15px 30px 15px; }
	footer .thirds.legal .two,
	footer .thirds.legal .two * { text-align: center; }
	footer .contact small { display: block; }
	
	#trigger {
		right: 15px;
		top: 20px;
	}
  
  .stoerer {
    top: 90px;
    padding: 20px;
  }
  .stoerer h2 {
    font-size: 8vw;
    line-height: 8vw;
  }
  .stoerer p {
    font-size: 1rem;
    line-height: 1.8rem;
    color: rgba(0, 9, 15, 0.85);
  }
  .stoerer p strong {
    color: rgba(0, 9, 15, 0.85);
  }
  #closestoerer {
    top: 20px;
    right: 20px;
  }
  #closestoerer img {
    height: 20px;
    width: 20px;
  }
}

@media(max-width: 550px) {
	.gallery.videogallery li a span { display: none; }
	
	header #startscreen a span img {
		height: 40px;
	}
	
	header #startscreen a * {
		white-space: normal;
	}
	
	header #startscreen a span:last-child {
		width: 100%;
		padding-top: 20px;
		padding-bottom: 10px;
		transform: none;
		left: 0;
		top: auto;
		bottom: 0;
	}
	
	header #startscreen a span p strong {
		display: inline-block;
		padding-top: 10px;
	}
}

.langnav a { font-weight: 600 !important;color:#d7152e !important;}
header {z-index:9;}