/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v18-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'),
       url('../fonts/roboto-condensed-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v18-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v18-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-300italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v18-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic'),
       url('../fonts/roboto-condensed-v18-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v18-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v18-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v18-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v18-latin-300italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
       url('../fonts/roboto-condensed-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v18-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v18-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'),
       url('../fonts/roboto-condensed-v18-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v18-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v18-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v18-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v18-latin-italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'),
       url('../fonts/roboto-condensed-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v18-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-700italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v18-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Bold Italic'), local('RobotoCondensed-BoldItalic'),
       url('../fonts/roboto-condensed-v18-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v18-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v18-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v18-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v18-latin-700italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}



html,button,input,select,textarea{font-family: 'Roboto Condensed', sans-serif;color: #000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}
body{font-size:1em;line-height:1.4;margin:0;background:#fff;overflow-x: hidden;}
::-moz-selection{background:#b3d4fc;text-shadow:none}
::selection{background:#b3d4fc;text-shadow:none}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc}
img{vertical-align:middle;width: 100%}
fieldset{border:0}
textarea{resize:vertical}
input[type=submit] {outline: none}
h1,h2,h3,h4,h5,h6{text-rendering:optimizelegibility}

a,a:link,a:visited{color:#000;text-decoration:none}
a:hover{color:#000}
p{font-size:17px;line-height:1.4}
button:focus{outline:0}

html,body{
	overflow-x: hidden;
}

/* ==========================================================================
   layout */

.inner{
	max-width: 1000px;
	padding: 0 20px;
	margin: 0 auto;
}

.space-a {
	margin-bottom: 80px;
}
.space-b,
.space-b-big{
	margin-bottom: 180px;
}


.space-b-small{
	margin-bottom: 50px;	
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
}

/* ==========================================================================
   HEADLINES */

h2{
	color: #c90b1c;
	font-size: 55px;
	font-weight: 700;
	text-transform: uppercase;
	font-style: italic;
	line-height: 58px;
	margin-bottom: 10px;
}

h3{
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 10px;
	text-transform: uppercase;
}

h4{
	font-size: 22px;
	font-weight: 400;
	margin-bottom: 10px;
	text-transform: uppercase;
}

h5{
	font-size: 25px;
	text-transform: uppercase;
	margin-bottom: 10px;
}

h6.subheadline {
	font-size: 40px;
	text-transform: uppercase;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.64px;
	line-height: 44px;
	margin-bottom: 5px;
}

/* ==========================================================================
   FLEXBOX */

.flex{
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
}

.flex_wrap{
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
}

.flex_item {
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	-webkit-flex: 0 1 auto;
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	-webkit-align-self: stretch;
	-ms-flex-item-align: stretch;
	align-self: stretch;
}

/* ==========================================================================
   HEADER */

body:before{
	content: '';
	display: block;
	width: 100%;
	height: 50px;
	background: #fff;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 49;

}
.site_header{
	/*padding-top: 70px;*/
	/*min-height: 270px;*/
	width: calc(100% + 80px);
	background-image: url('../images/header-bg-new.png');	
	background-position: right center;
	background-size: cover;
	-webkit-transform:  translate(-40px,-50px) rotate(-2deg);
	-moz-transform:     translate(-40px,-50px) rotate(-2deg);
	-ms-transform:      translate(-40px,-50px) rotate(-2deg);
	-o-transform:       translate(-40px,-50px) rotate(-2deg);
	transform:          translate(-40px,-50px) rotate(-2deg);
	padding-bottom: 66px;
	padding-top: 91px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
}

.site_header_inner{
	-webkit-transform:  rotate(2deg);
	-moz-transform:     rotate(2deg);
	-ms-transform:      rotate(2deg);
	-o-transform:       rotate(2deg);
	transform:          rotate(2deg);
}

.site_header a.logo{
	width: 180px;
	margin-right: 5	0px;
}

.site_header .logo_wrapper {
	float: right;
}

nav > ul {
    margin-right: 30px;
}

.site_header {
/*    padding-bottom: 35px;
    padding-top: 80px;*/
    min-height: unset;
}

.site_header a.logo{
	margin-bottom: 0;
}

a.logo{
	display: block;
	float: right;
	width: 300px;
	margin-right: 80px;
	margin-bottom: 30px;
	-webkit-transition: all .23s ease-out;
	-moz-transition: all .23s ease-out;
	-o-transition: all .23s ease-out;
	transition: all .23s ease-out;
}

nav > ul{
	float: right;
	margin-right: 30px;
	margin-top: 10px;
}

nav > ul > li{
	display: inline-block;
	list-style: none;
	float: left;
}

.main_nav{
	position: relative;
	-webkit-transition: all .23s ease-out;
	-moz-transition: all .23s ease-out;
	-o-transition: all .23s ease-out;
	transition: all .23s ease-out;
}

.subnav{
	position: absolute;
	background: #dce3e3;
	z-index: 3;
	min-width: 100%;
	
	-webkit-transition: all .23s ease-out;
	-moz-transition: all .23s ease-out;
	-o-transition: all .23s ease-out;
	transition: all .23s ease-out;
	transform: translateY(5px);
	opacity: 0;
	pointer-events: none;
}

.subnav a{
	display: block;
	padding: 5px 15px 5px 10px;
	border-bottom: 1px solid #000;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.subnav a:hover{
	background: #b6bcbc;
}

.subnav a:last-child{
	border: none;
}

.main_nav > a{
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 700;
	margin-left: 0;
	padding: 0 28px;
	position: relative;
}

.main_nav > a:after{
	content: '';
	display: inline-block;
	width: 2px;
	height: 25px;
	background: #000;

	position: absolute;
	right: 0;
	top: 0;
}

.main_nav:last-child > a:after{
	display: none;
}

.main_nav:last-child > a{
	padding-right: 23px;
}

.main_nav.has_subnav:hover{
	background: #dce3e3;
}

.main_nav:hover > a {
	color: #c90b1c;
}

.main_nav:hover .subnav{
	transform: translateY(0);
	opacity: 1;
	pointer-events: unset;
}

.sociallogo_container, .language_container {
	padding: 0 18px;
	margin-top: -2px;
	position: relative;
	display: flex;
}
.sociallogo_container:after {
	content: '';
	display: inline-block;
	width: 2px;
	height: 25px;
	background: #000;
	position: absolute;
	right: 0;
	top: 2px;
}
a.navi_sociallogo, a.lang {
	padding: 3px;
}
a.navi_sociallogo img {
	width: 25px;
	height: 20px;
}

.language_container{margin-top: 0;}
.lang_show .language_container {display: none;}
.lang_de:after, .lang_en:after {
	content: '';
	display: block;
	background-repeat: no-repeat;
	background-size: 30px;
	background-position: center;
	width: 20px;
	height: 20px;
	object-fit: cover;
	border: 1px solid;
	border-radius: 20px;
	border-color: #808080;
	opacity: 1;
}
.lang_de:after {
	background-image: url("Flag_of_Germany_inaktiv.svg");
}
.lang_en:after {
	background-image: url("Flag_of_the_United_Kingdom_inaktiv.svg");
}
a.lang.lang_active.lang_en:after {
	background-image: url("Flag_of_the_United_Kingdom.svg");
	border-color: white;
}
a.lang.lang_active.lang_de:after {
	background-image: url("Flag_of_Germany.svg");
	border-color: white;
}

.hamburger{
	display: none;
}
/*@media screen and (min-width: 1120px){
	.scrolled a.logo{
		width: 200px;
		margin-right:50px;
		margin-bottom: 30px;
	}

	.scrolled nav{
		float: right;
	}

	.scrolled .logo_wrapper{
		float: right;
	}

	.scrolled nav > ul {
	    margin-right: 20px;
	}

	.scrolled .site_header{
		background: #5ac3e5;
		padding-top: 30px;
	}

	.scrolled .site_header_inner{
		position: static;
	}

	.scrolled .site_header > img {
		display: none;
	}
}

@media screen and (max-width: 1260px){
	a.logo{
		width: 300px;
		margin-right:50px;
		margin-bottom: 30px;
	}

	.main_nav > a{
		font-size: 18px;
	}

	.main_nav > a::after {
	    height: 17px;
	    top: 2px;
	}

	nav > ul {
	    margin-right: 31px;
	}

	.subnav a {
	    padding: 5px 5px 5px 5px;
	    font-size: 12px;
	}
}
*/

/* ==========================================================================
   TGRIANGLE  */

.triangle_wrapper{
	display: block;
	height: 160px;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.triangle{
	/*background-color: #fff;
	width: 200vw;
	height: 160px;
	display: block;
	position: absolute;
	left: 50%;
	/*transform: translate(-50%,calc(100% - 20px)) rotate(-3deg);*/

	background-color: #fff;
	width: 150vw;
	height: 160px;
	display: block;
	position: absolute;
	left: -50px;
	bottom: 0;
	transform: translate(0,100%) rotate(-2deg);
	transform-origin: top left;
}



/* ==========================================================================
   TEASERBILD  */

.teaser_img{
	margin-top: 150px; 
}

/* ==========================================================================
   VIDEO  */

.video_section{
	max-width: 1000px;
	padding: 0 20px;
	margin-left: auto;
	margin-right: auto;
}

.video-js{
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}

.video-js .vjs-big-play-button {
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin: 0;
}

/* ==========================================================================
   IMAGE BREAKER  */

.image_breaker{
	height: 65vh;
	max-height: 720px;
	width: 100vw;
	position: relative;
}

.image_breaker:first-of-type {
	max-height: 580px;
}

/*.image_breaker.teaser{
	margin-top: -100px;
}
*/
.image_breaker_inner{
	width: 100%;
	height: 100%;
	background-attachment: fixed;
	background-size: cover;
	background-position: top;
}



.image_breaker .triangle_wrapper{
	position: absolute;
	left: 0;
	z-index: 1;
}

.image_breaker .triangle_wrapper.top{
	top: 0;
}

.image_breaker .triangle_wrapper.top .triangle{
	/*transform: translate(-50%,calc(-100% + 40px)) rotate(-3deg);*/
	/*background: lime;*/
	transform: translate(0,-100%) rotate(-2deg);
	top: 0;
	bottom: initial;
	transform-origin: bottom right;

}

.image_breaker .triangle_wrapper.bottom{
	bottom: 0;
}

/*.image_breaker .triangle_wrapper.bottom .triangle{
	transform: translate(-50%,calc(100% - 40px)) rotate(-3deg);
}*/


/* ==========================================================================
   REASONS  */

.reasons_wrapper .header{
	margin-bottom: 50px;
}

.reason{
	-webkit-flex: 0 1 33.33333%;
	-ms-flex: 0 1 33.33333%;
	flex: 0 1 33.33333%;
	width: 33.33333%;
}

.reason .header{
	margin-bottom: 50px;
}

.reason .icon{
	position: relative;
	height: 210px;
	padding-bottom: 0px;
	margin-bottom: 10px;
}

.icon_spacer {
	margin: 40px auto;
	flex-wrap: wrap;
}

.reason .icon img{
	object-fit: cover;
	width: 303px;
	height: 210px;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform:    translate(-50%,-50%);
	-ms-transform:     translate(-50%,-50%);
	-o-transform:      translate(-50%,-50%);
	transform:         translate(-50%,-50%);
}

.reason .icon img.small{
	max-width: 85px;
}

.reason  h3{
	text-align: center;
	font-size: 25px;
	margin-bottom: 20px;
	text-transform: uppercase;
	font-weight: 700;
	font-style: italic;
}

.reason .text{
	padding: 0 20px;
}

/* ==========================================================================
   Modul Text mit Bild */

	 .modul_text_img {
		display: flex;
		align-items: center;
	}
	.modul_text_img .img_box {
		width: 40%;
		height: 100%;
		min-height: 250px;
	}
	.modul_text_img .img_box img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.modul_text_img .text_box{
		padding-right: 50px;
		width: 60%;
	}

	.modul_text_img.change_direction {
		flex-direction: row-reverse;
	}
	.modul_text_img.change_direction .text_box {
		padding-left: 50px;
    padding-right: 0;
	}



/* ==========================================================================
   NEWS  */

.news_wrapper .header{
	margin-bottom: 50px;
}

.news_element{
	margin-bottom: 50px;
}

.news_text{
	-webkit-flex: 0 1 50%;
	-ms-flex: 0 1 50%;
	flex: 0 1 50%;
	width: 50%;
	padding-top: 30px;
}

.news_text.right{
	padding-left: 30px;
}

.news_text.left{
	padding-right: 30px;
}

.news_img{
	-webkit-flex: 0 1 50%;
	-ms-flex: 0 1 50%;
	flex: 0 1 50%;
	width: 50%;
}

.news_text span.date{
	font-size: 17px;
	display: block;
}


/* ==========================================================================
   FOOTER  */

footer{
	margin-top: -100px;
	position: relative;
	z-index: 1;

}

.footer_content a.footer_logo{
	width: 200px;
	margin: 0 auto 30px;
	display: block;
}

.footer_content{
	background: #5ac3e5;
	padding-bottom: 80px;
	padding-top: 60px;
	position: relative;
	z-index: 6;
}

.footer_links{
	text-align: center;
}

.footer_links a{
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.footer_links a:after{
	content: '';
	display: inline-block;
	height: 10px;
	width: 1px;
	background: #fff;
	margin: 0 6px -2px 6px;
}

.footer_links a:last-child:after{
	display: none;
}

footer .triangle_wrapper{
	overflow: visible;
	background: transparent;
}

footer .triangle_wrapper .triangle{
	height: 180px;
	transform: translate(0,50%) rotate(-2deg);
	background: #5ac3e5;
}

/* ==========================================================================
   PRODUKTFORMULAR */

.produktuebersicht legend{
	color: #c90b1c;
	font-size: 60px;
	font-weight: 400;
	text-transform: uppercase;
	font-style: italic;
	margin-bottom: 30px;

}

.produktuebersicht fieldset{
	margin-bottom: 50px;
}

.produkt{
	-webkit-flex: 0 1 calc(50% - 10px) ;
	-ms-flex: 0 1 calc(50% - 10px) ;
	flex: 0 1 calc(50% - 10px) ;
	width: calc(50% - 10px) ;
	margin-bottom: 40px;
	/*padding-bottom: 40px;*/
	position: relative;
}

.produkt:nth-child(even){
	margin-left: 10px;
}

.produkt:nth-child(odd){
	margin-right: 10px;
}

.produkt_info{
	margin-top: 20px;
	padding-right: 20px;
	position: relative;
}

.produkt_info p strong{
	color: #c90b1c;
	font-weight: 400;
}

a.produkt_info_button,
button.produkt_info_button{
	background: #c90b1c;
	color: #fff;
	text-transform: uppercase;
	font-style: italic;
	font-weight: 700;
	padding: 5px 15px;
	border: none;
	display: block;
	width: 100%;
	/*max-width: 180px;*/
	margin: 20px auto 0;
/*	position: absolute;
	right: 0;
	bottom: 0;*/
	text-align: center;

}

.produkt label.checked .produkt_img {
	position: relative;
}

.produkt label.checked .produkt_img:after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.38);
	position: absolute;
	left: 0;
	top: 0;
}

 /* Customize the label (the container) */

.checkbox_container.filter_wrapper{
	opacity: 0;
	max-height: 1px;
	margin: 0;
	overflow: hidden;
}
.produkt label,
.checkbox_container {
	display: block;
	position: relative;
	/* cursor: pointer; */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


/* Hide the browser's default checkbox */
.produkt label input,
.checkbox_container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.add_product_text{
	position: absolute;
	top: 21px;
	left: 60px;
	color: #000;
	display: block;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
}

/* Create a custom checkbox */
.checkmark{
	position: absolute;
	top: 15px;
	left: 15px;
	height: 30px;
	width: 30px;
	background-color: #fff;
	border: 2px solid #000;
	display: block;
	z-index: 5;
}

.checkbox_container .checkmark{
	position: relative;
	top: inherit;
	left: inherit;
	border: 2px solid #dcdcdc;
	height: 25px;
	width: 25px;
	margin: -3px auto 0;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

 /* Accordion  */

.accordion_trigger {
	width: 100%;
	background: #e6e6e6;
	border: none;
	font-size: 15px;
	color: #000;
	padding: 5px 0 5px 20px;
}
.accordion_trigger:hover {
	background: #ffffff;
	outline: 1px solid #e6e6e6;
}
.accordion_inner {
  display: none;
	margin-top: 10px;
}
.accordion_trigger:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: rgb(0, 0, 0);
  float: right;
  margin: -19px 20px 0 5px;
}
.accordion_active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}



/* Show the checkmark when checked */
.produkt label input:checked ~ .checkmark:after,
.checkbox_container input:checked ~ .checkmark:after,
.checkbox_container.checked .checkmark:after {
  	display: block;
}

/* Style the checkmark/indicator */
.produkt label .checkmark:after,
.checkbox_container .checkmark:after {
  	left: 2px;
	top: -3px;
	width: 33px;
	height: 30px;
	background-image: url('../images/checkmark.png');
	background-size: contain;
	background-repeat: no-repeat;
} 

.personal_data_block legend{
	font-size: 25px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.personal_data_block legend div.kurzbeschreibung {
	display: block;
	font-size: 15px;
	font-weight: 400;
	text-transform: none;
}


.form_data_row{
	width: calc(50% - 15px);
	float: left;
}

.form_data_row.full{
	width: 100%;
	float: none;
}

.form_data_row.left{
	margin-right: 15px;
}

.form_data_row.right{
	margin-left: 15px;	
}

.form_data_row label{
	display: none;
}

.form_data_element.error input{
	border: 1px solid #c90b1c;
}

.form_data_element{
	margin-bottom: 10px;
}

.form_data_element input{
	height: 35px;
}

.form_data_element textarea,
.anmerkung_wrapper textarea{
  height: 170px;
	padding-top: 15px;
}

.form_data_element input,
.form_data_element textarea,
.anmerkung_wrapper textarea{
	width: 100%;
	background: #e6e6e6;
	border: none;
	padding-left: 20px;
	font-size: 15px;
	color: #000;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #000;
  opacity: 1;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #000;
  opacity: 1;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #000;
  opacity: 1;
}
:-moz-placeholder { /* Firefox 18- */
  color: #000;
  opacity: 1;
}

.captcha_row{
	margin-top: 30px;
}

#captcha_error{
	display: none;
}

#captcha_error.error{
	display: block;
	color: red;
}

/* ==========================================================================
   Bestelldetails */

.form_bestelldetails{
}

.form_bestelldetails_category{
	margin-bottom: 50px;
}

.form_bestelldetails_inner{
	border: 2px solid #dcdcdc;
	padding: 30px;

}

.form_bestelldetails_category legend{
	color: #c90b1c;
	font-size: 25px;
	font-weight: 700;
	text-transform: uppercase;
	font-style: italic;
	margin-bottom: 20px;
}

.form_bestelldetails_colum{
	float: left;
	width: calc(50% - 15px);
}

.form_bestelldetails_colum.left{
	margin-right: 15px;
}

.form_bestelldetails_colum.right{
	margin-left: 15px;
}

.form_bestelldetails_category .header{
	border-bottom: 1px solid #000;
	overflow: hidden;
	padding-bottom: 5px;
}

.form_bestelldetails_category .row{
	padding: 10px 0;
	overflow: hidden;
	margin-top: 20px;
}

.form_bestelldetails_category .checkbox,
.form_bestelldetails_category .nummer,
.form_bestelldetails_category .bezeichnung,
.form_bestelldetails_category .preis,
.form_bestelldetails_category .menge{
	border: 1px solid transparent;
	font-size: 15px;

}

.form_bestelldetails_category .row .bezeichnung,
.form_bestelldetails_category .header > div{
	font-weight: 700;

}

.form_bestelldetails_category .checkbox{
	width: 16%;
	float: left;
}

.form_bestelldetails_category .nummer{
	width: 14%;
	float: left;
}

.form_bestelldetails_category .bezeichnung{
	width: 46%;
	float: left;
}

.form_bestelldetails_category .preis{
	width: 12%;
	float: left;
}

.form_bestelldetails_category .menge{
	width: 12%;
	float: left;
}

.anmerkung_wrapper label{
	display: none;
}


/* ==========================================================================
   AGB Checkbox */

label.agb_container{
	margin-top: 30px;
	display: block;
}

.agb_container .checkmark{
	float: left;
	margin-top: 6px;
}

.agb_container p{
	padding-left: 40px;
	font-size: 15px;
}

.bestellung_submit{
	width: calc(50% - 15px);
	background: #e6e6e6;
	color: #000;
	text-transform: uppercase;
	text-align: center;
	border: none;
	margin-top: 30px;
	padding: 5px 15px;
	font-weight: 700;
	cursor: pointer;
	font-size: 15px;
}

.agb_container.error p{
	 color: #c90b1c;
}


/* ==========================================================================
   Info Popup */

.info_popup{
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 100;
	background: #fff;
	transform: translateY(-10%);
	opacity: 0;
	pointer-events: none;
	-webkit-transition: all .23s ease-out;
	-moz-transition: all .23s ease-out;
	-o-transition: all .23s ease-out;
	transition: all .23s ease-out;
}

.info_popup.open{
	opacity: 1;
	pointer-events: unset;
	transform: translateY(0);
}

.info_popup_Scroll{
	max-height: 90vh;
	overflow-y: auto;
}

.info_popup_Scroll .slick-slider,
.popup_text {
    width: 80%;
    margin: 0 auto;
}

.info_popup_inner{
	max-width: 900px;
	max-height: 90vh;
	width: 90%;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform:    translate(-50%, -50%);
	-ms-transform:     translate(-50%, -50%);
	-o-transform:      translate(-50%, -50%);
	transform:         translate(-50%, -50%);
}

.popup_text{
	margin-top: 20px;
}

.popup_text h2{
	font-style: normal;
	font-size: 15px;
	text-transform: uppercase;
	color: #000;
	font-weight: 700;
}

.close_info{
	position: absolute;
	right: 0;
	top: -40px;
	color: #000;
	font-weight: 700;
	background: transparent;
	border: none;
	font-size: 35px;
}


/* ==========================================================================
   Springe zu Formular Button */

a.jump_to_button{
	background: #c90b1c;
	color: #fff;
	text-transform: uppercase;
	font-style: italic;
	font-weight: 700;
	padding: 8px 15px;
	border: none;
	display: block;
	text-align: center;
	max-width: 250px;
	margin: 50px auto 80px;
}

/* ==========================================================================
   Simple Slider */

.slider_section .header{
	margin-bottom: 50px;
}

.slider_inner{
	width: 80%;
	margin: 0 auto;
	max-height: 420px;
	
}

.slide_text{
	padding: 20px;
	background: #b5b5b5;
}

.bedienungsanleitung_slider .slide_element{
	background: #b5b5b5;

}

.bedienungsanleitung_slider .slick-track
{
    display: flex !important;
}

.bedienungsanleitung_slider .slick-slide
{
    height: inherit !important;
}


/* ==========================================================================
   SLIDER ARROWS */

.slick-arrow{
	width: 34px;
	height: 45px;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 1;
}

.slick-arrow.slick-next{
	background-image: url('../images/slick-next.svg');
	right: -30px;
	transform: translate(100%,-50%);
}

.slick-arrow.slick-prev{
	background-image: url('../images/slick-prev.svg');
	left: -30px;
	transform: translate(-100%,-50%);
}

.slick-arrow.slick-prev:before,
.slick-arrow.slick-next:before{
	display: none;
}


/* ==========================================================================
   ANWENDUNGEN */

.anwendungen_wrapper .header{
	margin-bottom: 50px;
}

.anwednungen_row{
	margin-bottom: 20px;
}

.marke{
	-webkit-flex: 0 1 calc(25% - 15px);
	-ms-flex: 0 1 calc(25% - 15px);
	flex: 0 1 calc(25% - 15px);
	width: calc(25% - 15px);
	border: 1px solid #b5b5b5;
	min-height: 150px;
	position: relative;
	margin-right: 20px;
	cursor: pointer;
	-webkit-transition: all .23s ease-out;
	-moz-transition: all .23s ease-out;
	-o-transition: all .23s ease-out;
	transition: all .23s ease-out;
}

.marke.open_marke:after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.38);
	position: absolute;
	left: 0;
	top: 0;
}

.marke:last-child{
	margin-right: 0;
}

.marke:hover:after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.38);
	position: absolute;
	left: 0;
	top: 0;
}
.marke img{
	width: auto;
	max-width: 80%;
	max-height: 80%;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform:    translate(-50%, -50%);
	-ms-transform:     translate(-50%, -50%);
	-o-transform:      translate(-50%, -50%);
	transform:         translate(-50%, -50%);
}

.typ_wrapper{
	display: none;
	margin-bottom: 50px
}

.typ{
	margin-top: 50px;
	cursor: pointer;
}

.typ_header{
	margin-bottom: 20px;
}

.typ_header h5{
	font-size: 22px;
	margin-bottom: 0;
	line-height: 1;
}

.typ_element{
	-webkit-flex: 0 1 calc(25% - 15px);
	-ms-flex: 0 1 calc(25% - 15px);
	flex: 0 1 calc(25% - 15px);
	width: calc(25% - 15px);
	margin-right: 20px;
	margin-bottom: 20px;
	
}

.typ_element:nth-child(4n){
	margin-right: 0;
}

.typ_popup{
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 100;
	background: #fff;
	transform: translateY(-10%);
	opacity: 0;
	pointer-events: none;
	-webkit-transition: all .23s ease-out;
	-moz-transition: all .23s ease-out;
	-o-transition: all .23s ease-out;
	transition: all .23s ease-out;
	
}

.typ_popup.open{
	opacity: 1;
	pointer-events: unset;
	transform: translateY(0);
}

.typ_popup_inner{
	max-width: 520px;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform:    translate(-50%, -50%);
	-ms-transform:     translate(-50%, -50%);
	-o-transform:      translate(-50%, -50%);
	transform:         translate(-50%, -50%);
}

.typ_popup_text{
	padding: 20px;
}


.typ_close_info{
	position: absolute;
	right: 0;
	top: -40px;
	color: #000;
	font-weight: 700;
	background: transparent;
	border: none;
	font-size: 35px;
}

/* ==========================================================================
   DOWNLOADS */

.downloads_wrapper h2 {
	margin-bottom: 20px;
	margin-left: 0;
}

.downloads a{
	display: block;
	font-weight: 700;
	margin-bottom: 20px;
	font-size: 22px;
}

/* ==========================================================================
   MAIN CONTACT DATA  */

.main_contact_element{
	-webkit-flex: 0 1 50%;
	-ms-flex: 0 1 50%;
	flex: 0 1 50%;
	width: 50%;
}
.main_contact_element ul {
	padding-left: 15px;
	padding-right: 50px;
}


.contact_form{
	margin-top: 50px;
}

.form_message.succeeded{
	margin-top: 50px;
	border: 1px solid #b5b5b5;
	text-align: center;
	padding: 20px;
	color: green;
	font-size: 20px;
}

/* ==========================================================================
   TEXTSEITE */

	 .textwrapper .text ul{
		margin: 20px 0;
	}
	
	.textwrapper .text li{
		list-style-position: inside;
		font-size: 15px;
	}
	
	.textwrapper div.show hr{
		height: 1px;
		width: 100%;
		background-color: #000;
		margin-top: 50px;
		border: none;
	}
	.textwrapper div.hide hr{
		display: none;
	}


/* ==========================================================================
   FANCYBOX */
	 
a[data-fancybox] img {
	cursor: zoom-in;
}

.fancybox__caption {
	text-align: center;
}



/* 	========================================================================== */
/* 	==========================================================================
   	RESPONSIVE   START
	========================================================================== */
/* 	========================================================================== */
@media screen and (max-width: 1250px) {
	.hamburger{
		display: block;
		position: absolute;
		top: 6px;
		right: 345px;
		background: transparent;
		border: none;
		z-index: 10;
	}

	.hamburger span{
		display: block;
		height: 3px;
		width: 35px;
		background: #000;
		margin-bottom: 6px;
		transition: all .3s ease-in-out;
	}

	.open_nav .hamburger span:nth-child(1) {
		transform: rotate(45deg);
		margin-top: 11px;
	}
	.open_nav .hamburger span:nth-child(2) {
		opacity: 0;
	}
	.open_nav .hamburger span:nth-child(3) {
		transform: rotate(-45deg);
		margin-top: -18px;
	}

	.sociallogo_container {margin-left: 7px;}
	.sociallogo_container:after {opacity: 0;}

	nav{
		position: fixed;
		left: 0;
		top: 0;
		width: 350px;
		height: 100vh;
		background: white;
		margin: 0;
		left: 40px;
    top: -40px;
		padding-top: 40px;
		transform: translateX(calc(-100% - 30px));
		-webkit-transition: all .23s linear;
		-moz-transition: all .23s linear;
		-o-transition: all .23s linear;
		transition: all .23s linear;
		-webkit-box-shadow: 2px -1px 5px 0px rgba(0,0,0,0.14);
		-moz-box-shadow: 2px -1px 5px 0px rgba(0,0,0,0.14);
		box-shadow: 2px -1px 5px 0px rgba(0,0,0,0.14);
	}

	.open_nav nav{
		transform: translateX(0);
	}

	.lang_show .language_container {
		display: flex;
		top: 3px;
		right: 390px;
	}

	nav > ul > li{
		float: none;
		margin-bottom: 20px;
		display: block;
	}

	.language_container {
		position: absolute;
		display: none;
	}

	.subnav{
		position: static;
		opacity: 1;
		pointer-events: unset;
		transform: none;
		background: #fff;
		padding-left: 40px;
	}

	.subnav a{
		border:  none;
	}
	nav > ul {
	    float: none;
	    margin-right: 0;
	}

	.main_nav > a::after{
		display: none;
	}

	a.logo{
		width: 150px;
		margin-bottom: 10px;
		margin-right: 80px;
	}

	img.header_image_big{
		display: none;

	}

	img.header_image_small{
		display: block;
	}

	.site_header_inner {
	    top: 25px;
	}

	.site_header{
		padding-bottom: 40px;
		padding-top: 50px;
		min-height: unset;
		transform: translate(-40px,-20px) rotate(-2deg);
	}
}


@media screen and (max-width: 1120px){

	/*body.open_nav{
		overflow: hidden;
	}*/

	.textwrapper.starttext{
		margin-top: 150px;
		margin-bottom: 60px;
	}
}


@media screen and (max-width: 985px) {
	.reason .icon img {
		max-width: 220px;
    height: 150px;
	}
	.reason .icon {
		height: 150px;
	}
}


@media screen and (max-width: 860px){

	.site_header{
		background: #5ac3e5;
		padding-top: 20px;
		transform: none;
		padding-bottom: 10px;
	}

	.site_header_inner{
		position: relative;
		top: 0;
		z-index: 6;
		transform: none;
		/*padding-top: 30px;*/
	}

	img.header_image_small{
		display: none;
	}

	.lang_show .language_container {
    display: flex;
    top: 2px;
    right: 100px;
	}

	.sociallogo_container:after {
		display: none;
	}

	nav {
    left: 0;
    top: 0;
	}	

	.modul_text_img {
		flex-wrap: wrap;
	}
	.modul_text_img.change_direction {
		flex-wrap: wrap-reverse;
	}
	.modul_text_img .text_box{
		width: 100%;
	}
	.modul_text_img .img_box {
		width: 80%;
		margin-top: 30px;
	}

/*	.hamburger {
	    top: 30px;
	}*/

	.scrolled .site_header .logo_wrapper,
	.site_header .logo_wrapper{
		float: none;
	}

	.site_header a.logo,
	.scrolled .site_header a.logo{
		float: none;
		margin-right: 0;
		width: 150px;
		margin-bottom: 10px;
		margin-left: 40px;
		margin-top: 6px;
	}

	.site_header{
		transform: none;
		width: 100%;
	}

	.site_header:after{
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background: #5ac3e5;
		position: absolute;
		bottom: 0;
		left: 0;
		transform-origin: bottom right;
		transform: rotate(-2deg);
	}


	.hamburger{
		right: 40px;
		top: 5px;
	}
}
@media screen and (max-width: 768px){

	.add_product_text {
		top: 15px;
		left: 45px;
	}
	.space-a {
		margin-bottom: 50px;
	}
	.space-b,
	.space-b-big{
		margin-bottom: 80px;
	}

	.space-b-small{
		margin-bottom: 30px;	
	}


	.image_breaker{
		height: 400px;
	}

	.image_breaker_inner{
		background-attachment: unset;
	}


	.reasons_wrapper > .flex{
		flex-wrap: wrap;
	}

	.reason {
	    -webkit-flex: 0 1 100%;
	    -ms-flex: 0 1 100%;
	    flex: 0 1 100%;
	    width: 100%;
	    margin-bottom: 30px;
	}

	.reason .text {
	    text-align: center;
	}

	h2,
	.produktuebersicht legend{
		font-size: 28px;
		width: 100%;
	}

	h6.subheadline {
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0;
    line-height: 28px;
	}

	.reason .icon {
		height: 180px;
	}

	.reason .icon img {
    max-width: 300px;
    height: 180px;
	}

	.reason  h3{
		font-size: 18px;
	}

	.news_element{
		flex-wrap: wrap;
	}

	.news_img {
	    -webkit-flex: 0 1 100%;
	    -ms-flex: 0 1 100%;
	    flex: 0 1 100%;
	    width: 100%;
	    order: 0;
	}

	.news_text.right{
		padding-left: 0;
	}

	.news_text {
	    -webkit-flex: 0 1 100%;
	    -ms-flex: 0 1 100%;
	    flex: 0 1 100%;
	    width: 100%;
	    padding-top: 30px;
	    order: 1;
	}

	.produkt label .checkmark::after, .checkbox_container .checkmark::after {
	    	width: 22px;
		height: 21px;
	}

	.checkmark {

	    height: 20px;
	    width: 20px;
	}

	.produkt {
	    -webkit-flex: 0 1 100%;
	    -ms-flex: 0 1 100%;
	    flex: 0 1 100%;
	    width: 100%;
	}

	.produkt:nth-child(even){
		margin-left: 0;
	}

	.produkt:nth-child(odd){
		margin-right: 0;
	}

	a.jump_to_button {
	    margin: 20px auto 20px;
	}

	.form_data_row {
	    width: 100%;
	    float: none;
	}

	.form_data_row.left {
	    margin-right: 0;
	}

	.form_data_row.right {
	    margin-left: 0;
	}

	.form_bestelldetails_colum {
	    float: none;
	    width: 100%;
	}

	.form_bestelldetails_colum.right {
	    margin-left: 0;
	}

	.form_bestelldetails_colum.left {
	    margin-right: 0;
	}

	.form_bestelldetails_colum.right .header{
		display: none;
	}

	.slick-arrow {
	    width: 21px;
	    height: 28px;
	}

	.slick-arrow.slick-prev{
		left: 0;
	}

	.slick-arrow.slick-next{
		right: 0;
	}

	.anwednungen_row > .flex{
		flex-wrap: wrap;
	}

	.marke {
	    -webkit-flex: 0 1 calc(50% - 20px);
	    -ms-flex: 0 1 calc(50% - 20px);
	    flex: 0 1 calc(50% - 20px);
	    width: calc(50% - 20px);
	    margin-bottom: 20px;
	}

	.marke:nth-child(2n) {
	    margin-right: 0;
	}

	.marke:last-child {
	    margin-right: 0;
	}

	.typ_element {
	    -webkit-flex: 0 1 calc(50% - 20px);
	    -ms-flex: 0 1 calc(50% - 20px);
	    flex: 0 1 calc(50% - 20px);
	    width: calc(50% - 20px);
	    margin-right: 20px;
	    margin-bottom: 20px;
	}

	.typ_popup_inner{
		width: 60%;
	}

	.anwendungen_wrapper .header {
	    margin-bottom: 30px;
	}

	.downloads a {
	    font-size: 15px;
	}

	.modul_text_img {
		flex-wrap: wrap;
	}
	.modul_text_img.change_direction {
		flex-wrap: wrap-reverse;
	}
	.modul_text_img .text_box{
		width: 100%;
	}
	.modul_text_img .img_box {
		width: 80%;
		margin-top: 30px;
	}
}



@media screen and (max-width: 500px){

	h5 {
	    font-size: 18px;
	}

	p{
		font-size: 14px;
		line-height: 1.2;
	}

	.hamburger {
    right: 20px;
    top: 5px;
	}

	.site_header a.logo, .scrolled .site_header a.logo {
    margin-left: 20px;
	}

	.lang_show .language_container {
    display: flex;
    top: 2px;
    right: 60px;
	}		

/*	.image_breaker{
		height: 300px;
	}*/

	.form_bestelldetails_category .checkbox,
	.form_bestelldetails_category .nummer,
	.form_bestelldetails_category .bezeichnung,
	.form_bestelldetails_category .preis,
	.form_bestelldetails_category .menge {
	    border: 1px solid 
	    transparent;
	    font-size: 12px;
	}

	.form_bestelldetails_inner {
	    border: none;
	    padding: 30px 0;
	}

	.main_contact_data{
		flex-wrap: wrap;
	}

	.main_contact_element {
	    -webkit-flex: 0 1 100%;
	    -ms-flex: 0 1 100%;
	    flex: 0 1 100%;
	    width: 100%;
	    margin-bottom: 20px;
	}

	.space-b, .space-b-big {
	    margin-bottom: 30px;
	}

}

/* ==========================================================================
   RESPONSIVE END  */

/* ========================================================================== */

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

/* ==========================================================================
   print styles */

@media print {
    *{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}
    a,a:visited{text-decoration:underline}
    a[href]:after{content:" (" attr(href) ")"}
    abbr[title]:after{content:" (" attr(title) ")"}
    a[href^="javascript:"]:after,a[href^="#"]:after {content:""}
    pre,blockquote{border:1px solid #999;page-break-inside:avoid}
    thead{display:table-header-group}
    tr,img{page-break-inside:avoid}
    img{max-width:100% !important}
    @page{margin:0.5cm}
    p,h2,h3{orphans:3;widows:3}
    h2,h3{page-break-after:avoid}
}