@import "pure/base-min.css";
/*@import "pure/pure-min.css";*/
@import "fonts/roboto/font.css";
@import "fonts/ubuntu/font.css";
@import "fonts/fontawesome-free-6-6-0/css/all.min.css";



@import "header.css";
@import "ajax_cart.css";
@import "footer.css";
/* @import "sidebar_left.css"; */
/*@import "pure/base-min.css";*/
@import "pure/grids-min.css";
@import "pure/grids-responsive.css";

@import "cksbanner.css";
@import "infolayer.css";

/* global variables */

:root {
	--basic-font-family: 'Roboto', sans-serif;
	--basic-font-color:#222325;
	--headline-font-family: 'Roboto', sans-serif;
	--headline-font-color:#222325;
	--body-background-color: #fff;
	--layout-first-contrast-color: #222325;
	--layout-second-contrast-color:#FF0000;
	--layout-max-width:1400px;
	--section-bg-even:#fff;
	--section-bg-uneven:#F6F6F6;
	--max-video-width: 1000px;
}

*, ::after, ::before {
    box-sizing: border-box;
}

* {	
	hyphens: auto;
	overflow-wrap: break-word;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible { box-shadow:0 0 3px var(--layout-second-contrast-color) !important; outline:1; /*outline:1;  border-bottom:2px solid red !important; */}

/*********************************************************************************/
A:ACTIVE, A:LINK, A:VISITED {color:var(--basic-font-color);text-decoration:none; transition:all ease 0.3s;}
A:HOVER { text-decoration:none; }

a.dark:active, a.dark:link, a.dark:visited { color:var(--layout-first-contrast-color); }
a.uh:hover { text-decoration:underline;}

a.skip { position:fixed;left:-300px;top:0; z-index:14; background:#000; color:#fff; font-weight:bolder; }
a.skip::after {content:"\f103"; font-family:FontAwesome; margin-left:5px; }

a.skip:focus { left:0;}

/* *:focus { outline:2px solid red;} */


h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; font-weight:normal; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input, dl, dt, dd { margin:0; padding:0 }
img, a img,:link img,:visited img, fieldset { border:none }
img { margin:0; padding:0; vertical-align:bottom; }
address { font-style:normal }
table {	border:none; padding:0px; margin:0px; border-spacing:0px; font-size:1em;}
tr { border:none; padding:0px; margin:0px; }
td { border:none; padding:0px; margin:0px; vertical-align:top; border-spacing:0px; }
/* legend { display:none; } */
div, p, li, a {background-repeat:no-repeat; }

/* ### reset some basic style ################################################### */

ol			{list-style:decimal;}
ol li		{margin: 0 0 0 20px; padding:0 0 0 20px; }
ol li ol	{margin: 0 0 0 0;}
ol li ul	{margin: 0 0 0 0;}


ul li		{margin: 0 0 0 30px;}
ul li ul	{margin: 0 0 0 0;}
ul li ol	{margin: 0 0 0 0;}

a {transition: all ease .3s;}
a:hover { text-decoration:none; }

/* ### Headlines ###################################################################### */

h1, .h1 { font-size:26pt; text-align:left; margin:0 0 10px 0;font-family: var(--headline-font-family); color: var(--headline-font-color); font-weight:600; line-height:1.1; padding-left:0px; }
h2, .h2 { font-size:24pt; text-align:left; margin:20px 0 20px 0;font-family: var(--headline-font-family); font-weight:500; line-height:1.2em;}
h3, .h3 { font-size:23pt; text-align:left;margin:30px 0 30px 0;font-family: var(--headline-font-family); font-weight:400; line-height:1em;}
h4, .h4 {  font-size:20pt; text-align:left;margin:10px 0 10px 0;font-family: var(--headline-font-family); font-weight:400; }
h5, .h5 {	font-size:18pt; text-align:left; color: inherit; font-weight:300; margin:0 0 0 0;	}
h6, .h6 { font-size: 16pt; text-align:left; color: var(--layout-second-contrast-color); font-weight:300;  }



hr {
	border: none;
	border-top: 1px solid #f0f0f0;
	height: 1px;
	width:100%;
	clear:both;
}
blockquote { background:#fafafa; font-size:1em; padding:2rem; float:left; display:block; font-style:italic}

div#desc-wrap .description ul li,
#content ul li { list-style:none;  margin:0 0 0 0; padding:0 0 0 27px;}

/* div#desc-wrap .description ul li::before,
#content ul li::before {
	content: "\f105";
	font: normal normal normal 16px/1 FontAwesome;
	display: inline-block;
	margin: 0 21px 0 -27px; 	color:var(--layout-second-contrast-color); }
 */
#shareblog ul li { padding:0}
#shareblog ul li::before { display:none}


.clear { clear:both;}
div.clear { height:0;}
.flleft { float:left;}
.flright{ float:right;}


.tleft { text-align:left !important;}
.tcenter { text-align:center !important;}
.tright { text-align:right !important;}


img {max-width:100%; height:auto; }
.imgleft{ float:left;  margin:0 15px 8px 0; background:url(../images/slider.png) repeat;}
.imgright{ float:right; margin:0 0 8px 15px; background:url(../images/slider.png) repeat;}

.title {  color:var(--layout-second-contrast-color);}

.small {font-size: 0.8em;line-height: 1.2em; float:none}
ul.small li		{margin: 0 0 0 10px; font-size:0.9em;}


.accept {background: var(--layout-second-contrast-color) !important;}


/*--Body, Tabellen, Standard--*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/

HTML {
	overflow-x:hidden;
 	overflow-y:scroll; 
} 

BODY { 
 width:100%; height:100%;
 border:0px;
 color:var(--basic-font-color);
font-family: var(--basic-font-family);
 Font-Size: 12pt;
 line-height:1.5em;
 text-align:left; 
 background: #fff;
 /* background: linear-gradient(#fafafa, 50%, #C3C3C3); */
}


.hidden-flow { /* position:relative; */ overflow:hidden; -webkit-height:100%; }


Form 	{ border:0px; }
Input, Textarea { Font-Size: 1em;}

/*---------DIVS-------------------------------------------------------------------------------------------------------------------------------*/

div#wrapper 				{ width:100%; margin:0 auto 0 auto; /* padding-top:100px;  */ }
div#main-wrapper 	{   width:90%; max-width:var(--layout-max-width); margin:0 auto 0 auto  }
/*#background 			{ margin:0; padding:0; top:0; left:0; overflow:hidden; height:0; padding-bottom:50%; float:left; width:50%;  position:relative; z-index:1; background: #fff url('../images/HG.jpg') center top no-repeat; background-size:cover;  }*/



div.main {
	float:left;
	width:100%;
	margin:0px auto 0 auto;
	padding:0 ;
	position:relative;
}

/* .main a { text-decoration:underline;} */


#contentwrp 				{ width:100%; margin:0;  }	
#innercontentwrp 		{ float:left; width:100%;  padding:0px}
#content, #contentstart  { float:left; width:100%; background:none; padding:3% 0 3%; }
		



.flexbox {position:relative; width:100%; height:100%; 
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	box-pack: justify;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	align-items: stretch;
	margin: 0 0 0 0;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;}
.flexbox-item {
	/*flex-basis: calc(50%);-webkit-flex-basis:calc(50%);-moz-flex-basis:calc(50%);*/
	position:relative;
	width:50%; float:left; 
}
#video { display:none;}
#background  {
	width: 100%;
	height:100%;
	/*background-position: center 50% !important;
	background: #f6f6f6 url('../images/HG.jpg') center center no-repeat; 
	background-size:cover;*/
}


.tbl-copy { margin:2rem 0; width:100%; }
.tbl-copy th { background:#fafafa; border:1px solid #eee;padding:5px;}
.tbl-copy td {border:1px solid #eee; padding:5px;}

.code {
	width: 95%;
	background: #f9f2f4;
	border: 1px solid #ccc;
	color: #555;
	padding: 1rem;
	margin: 15px 0;
	overflow: hidden;
}
.code code {color: #555;}
	/*------------------------------------------------------------------------------------------------------------------------------------------------*/
				
div#breadcrumb { 
			/* float:left;  */
			width:100%;
			max-width:var(--layout-max-width);
			margin:15px auto 0 auto;
			padding:15px 0;		
			color:#555;
			font-size:0.8em;
			line-height:1em;
			overflow:hidden;
			z-index:0;
}
div.inner-crumb { 
			width:100%;
			padding-left:20px
}
		#breadcrumb strong { font-weight:normal }


		#breadcrumb A {
			color:#555;
			font-weight:normal;} 
	 
		#breadcrumb A:HOVER {
			color:var(--layout-second-contrast-color);
			text-decoration:underline}

		.bcspacer {
			position:relative;top:-1px;	
			color:#ccc;font-weight:bolder; 	
			margin:0 5px 0px 5px;}



		.infobox { background:#f4f4f4; padding:15px; float:right; margin:0 0 5% 20px; width:200px; clear:right}

		div#articleDetails		{ display:none; float:left; max-width:820px; width:100%; padding-right:0  }
		span.lastupdated		{  background:url('../images/erstellt-am.png') no-repeat;margin-left:53px }
		span.author					{  background:url('../images/erstellt-von.png') no-repeat }
		span.print						{  background:url('../images/drucken.png') no-repeat }
		span.pdf							{  background:url('../images/pdf-wandeln.png') no-repeat }
		
		#articleDetails SPAN	{  float:left; width:auto; height:22px; line-height:22px; display:block; text-indent:15px; padding:0 10px 0 10px; color:#C4C4C4; font-size:11px }
		
		#articleDetails SPAN A { color:#C4C4C4 }
		#articleDetails SPAN A:HOVER { color:#000 }
		
		
		/* ---  fixed Sidebar when scrolling ---- */
	/* 	#sidebar-left { position:fixed; top:100px } */
		/* div.header	{  position:fixed; top:0; left:0 } */
		
		/* ---------------------------------------------*/
		
		#sizes { background:#fff; position:fixed; left:0; top:0; z-index:40000}
		
		#cookieWarning { position:fixed; top:0; left:0; z-index:300; width:100%; background:#fff;}
		
		/* div#mobileNav 	  	{ position:fixed; top:0;right:10px; background:url(../images/mobileNav.png) no-repeat #4c738d; width:70px; height:30px; padding:40px 0 0 0; z-index:150; cursor:pointer; color:#fff; font-weight:bold; text-align:center; }
		div#mobileSearch 	{ position:fixed; top:0; right:10px; background:red; width:30px; height:30px; z-index:65; cursor:pointer } */
		div#renderFont 	 	{ position:relative ; float:left; margin:0 0 0 6px; z-index:10000; color:#000 }
		#renderFont SPAN 	{ display:inline-block; padding:0px; margin:19px 0 0 2px; font-size:24px; cursor:pointer ; }
		
		/* div#totop					{ position:fixed; bottom:3px; right:3px; z-index:30; padding:0; background:url(../images/top.png) no-repeat; width:35px; height:34px; cursor:pointer; display:none  } */
		
		div#jsrequired			{ float:left; width:100%; background:#fff; color:red; font-size:20px; text-align:center }
		
		
		#introPic img { width:100% }
		
	/*-- Paging -----------------------------------------*/

	div.navigation-wrapper		{ float:left; max-width:680px; width:100%; height:25px; line-height:25px; background:none;margin:0px }
	div#count-articles					{ float:left; width: 200px; text-align:left }

/*---------------------------------------------------------------------------------------------------------*/
/* --  Seitennavigation, falls mehrere Seiten, z.b. Blogs, Produktekategorien, News usw. --*/


.footprints {  float:left; list-style-type:none }
.footprints li a { background:#585c61; padding:3px 10px; margin:2px 0; display:block; width:100%; text-align:left;}
.footprints li a:hover { background:#fff;}


#sbCartWrapper { position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0, 0.3);  z-index:1101; display:none; }
#sidebarCart { width:100%; max-width:400px; height:100%; position:fixed; top:0; right:0; z-index:1202; background:#fff;  padding:15px; display:none; }
#sidebarCart h4 { 
	color: #555;
	padding: 10px;
	background: #fff;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 0;
}

#sidebarCart .close { position:absolute; right:0; top:0; background:#c0c0c0; color:#fff; padding:0 15px 5px 15px; font-size:40px; font-weight:300; display:none;}
#sidebarCart .cart {
    position: absolute;
    right: 10px;
    top: 10px;
    background: #fff;
    /*color: #fff;*/
    padding: 5px;
    border-radius: 3px;
	font-size:13px;
	border:2px solid #000;
}

#sidebarCart .cart:hover { background:#555; }

#sidebarCart #cartItemsScroll { max-height: 400px; overflow:auto;  margin-top:40px; }
#sidebarCart #fastCheckout { position:absolute; left:0; bottom:0; background:#f7f7f7; width:100%; padding:20px; text-align:center; }
#sidebarCart #fastCheckout #tostart {padding-bottom: 10px; display: block; }

.checkoutBtn { color: #fff !important; margin: 0px auto 0 auto; padding: 10px 3%; font-weight: 400; font-size: 1em; background: var(--layout-second-contrast-color); width: 50%; box-sizing: border-box; text-align: center;
						text-transform: uppercase; transition: all ease 0.3s;						
						border-radius: 5px;
						width: 250px !important;
						display: block;						
						height: 35px;	padding: 5px;						
					}


/* b2b, b2c switch modal */

#modalWrapper {
	position:fixed; left:0; top:0; z-index:2000; width:100%; height:100%; background:rgba(0,0,0,0.5); text-align:center;
}

#modalWrapper .modal { display:block; margin:2% auto 0 auto; width:100%; min-height:300px; max-width:600px; background:#f4f4f4; padding:2%; }

/*-- Sections ------------------------------------------------------------------------------------------------------------------------------------------------------*/

	.section { width:100%; padding:4rem 0 4rem 0; }
	.section:nth-child(n - 1) { background:#f6f6f6; }
	.section:nth-child(even) { background:#fff; }

	.section.dark { background-color:var(--layout-first-contrast-color); color:#fff; }
	.section.fresh { background-color:var(--layout-second-contrast-color); color:#fff; }
	.section.white {background:#fff !important;}

	.section.pd10 {padding:10px;}
	.section.pd20 {padding:20px;}
	
	

	.section .paragraph {
		display:flex; flex-wrap:wrap;
		width:100%;
		max-width: var(--layout-max-width);
		padding:0;
		margin:0 auto 0 auto;
		/* background:green; */
	}

	.section .paragraph .text { padding:2rem; line-height:1.8; width:100%;}
	.section .paragraph .text.pure-u-md-1-3 { padding:2rem; line-height:1.8; width:33.333%;}

	.section .paragraph.image-left .text { float:right; order:1; width:calc(100% - 600px);}
	.section .paragraph.image-left .image { float:left; max-width:600px; max-height:600px; order:0; }
	.section .paragraph.image-left .image img { float:left; }

	.section .paragraph.image-right .text { float:left; order:0; width:calc(100% - 600px);}
	.section .paragraph.image-right .image { float:right; max-width:600px; max-height:600px; order:1; }
	.section .paragraph.image-right .image img { float:right; }

	.section.image-left .paragraph .text { float:right; order:1; width:calc(100% - 600px);}
	.section.image-left .paragraph .image { float:left; max-width:600px; max-height:600px; order:0; }
	.section.image-left .paragraph .image img { float:left; }

	.section.image-right .paragraph .text { float:left; order:0; width:calc(100% - 600px);}
	.section.image-right .paragraph .image { float:right; max-width:600px; max-height:600px; order:1; }
	.section.image-right .paragraph .image img { float:right; }



	.section.tcenter .text, .section.tcenter .text h1, .section.tcenter .text h2 { text-align:center !important; }


	.section.faq { margin-top:2px; padding:0 !important;}
	.section.faq .paragraph { }
	.section.faq h3 { width:100%; position:relative; font-size:1.3em; color:var(--basic-font-color); font-weight:600; background:#f0f0f0; padding:20px 2rem 20px 2rem; margin:0; border-radius:5px }
	.section.faq h3::after { content:"\f078"; font-family:FontAwesome; position:absolute; right:20px;}
	.section.faq.active h3::after { content:"\f077"; font-family:FontAwesome;}
	
	.section.faq div[itemprop="text"], .section.faq div[itemprop="acceptedAnswer"] { width:100%; display:none; position:relative; }
	.section.faq.active div[itemprop="text"], .section.faq.active div[itemprop="acceptedAnswer"] { 
		width:100%; display:block; background:#fff; color:var(--basic-font-color);
		padding:10px 2rem 10px 2rem;
	}

	 .section.faq.active div[itemprop="acceptedAnswer"] div[itemprop="text"]::before { content:"\f054"; font-family:FontAwesome; position:absolute; left:0; }




	.section.product-test { position:relative; height:70vh; background-color:#222325 !important;box-shadow:none !important; text-shadow: 0 0 2px #000; }

	.section.product-test .h2 {display:flex;flex-wrap:wrap;}
	.section.product-test .left { float:left; width:290px;background:rgba(0,0,0, .5); padding:10px 0 20px 10px;}
	.section.product-test .right {width:auto;background:rgba(0,0,0, .5);padding:10px;}
	.section.product-test .t1 {background:; float:left; font-size:24pt;}
	.section.product-test .t2 {background:; float:left; font-size: 46pt;}
	.section.product-test .t3 {background:;  line-height:72pt; font-size:86pt;}

	.section.product-test .contact-us {
		width:300px;
		position: absolute;
		right: 0;
		top: 100px;
		padding: 10px;
		background: rgba(0,0,0, .5);
		padding: 20px;
		margin: 0;
		z-index: 1;
	}
	
	.section.product-test .contact-us  .h3 { display:block;margin:0; color:red;font-weight:500; }
	.section.product-test .contact-us a { font-size:20pt; color:#fff; text-shadow:none;font-size:17pt; font-weight:500;}
	.section.product-test .contact-us a:before {content:"\f095"; font-family:FontAwesome;  margin-right:5px;}
	
	
	.section.video  .video { width: 100%; text-align: center;position: relative; margin:0 auto 0 auto; }
	.section.video  .video.format43 { padding-bottom:75%;}
	.section.video  .video.portrait { padding-bottom:178%;}
	.section.video  .video .empty-video, 
	.section.video  .video .html5-video {
		position:relative;
		width:100% !important;
		max-width:var(--max-video-width);
		height:0px !important;
		max-height:calc(var(--max-video-width) / 16 * 9);
		padding-bottom: calc(var(--max-video-width) / 15 * 9);
		margin:0 auto 0 auto;/* background:#000; */
	}
	
	.section.video.portrait  .video .empty-video,
	.section.video.portrait  .video .html5-video {
		width:100% !important;
		max-width:500px;
		height:0px !important;
		max-height:calc(500px / 9 * 16);
		padding-bottom: calc(500px / 9 * 15 );
	}
	
	

	.section.video  .video iframe,
	.section.video  .video video { position:absolute; left:0;top:0;width:100%; height:100%;}
	
	.section.video .text { margin:0 auto 0 auto; width:100% !important; max-width:var(--max-video-width);padding:3rem 0 3rem 0;}
	
	
	
/*-- Pagination ----------------------------------------------------------------------------------------------------------------------------------------------------*/

	div.navigation-wrapper		{ float:left; max-width:680px; width:100%; height:25px; line-height:25px; background:none;margin:0px }
	div#count-articles				{ float:left; width: 200px; text-align:left }

	div.pagination			{ float:right; width:100%;  text-align:center; padding:2% 2% 5% 2%;  }
	
	.pagination .page-links, .pagination .pages-dropdown { display:inline; }
	
	div.pagination span {/* background:#f0f0f0; */ color:#222;padding:0 10px; height:40px; line-height:40px; display:inline-block;transition: all ease .3s;}
	div.pagination a			{ padding:0 10px; background:#ccc; color:#555; display: inline-block; height:40px; line-height:40px; margin:0px;}
	div.pagination a.nav-prev,
	div.pagination a.nav-next,
	div.pagination .nav_active {padding:0 12px; display: inline-block; height:40px; line-height:40px; margin:0; font-weight:400; }

	div.pagination .nav-prev, 
	div.pagination .nav-next { position:relative; top:0px; text-decoration:none !important; }

	div.pagination .nav-prev:before { font-family:'FontAwesome'; content:"\f053"; }
	div.pagination .nav-next:before { font-family:'FontAwesome'; content:"\f054";}
	
	div.pagination .nav-prev,
	div.pagination .nav-next { background:#fff; color:#bbb;display: inline-block; width:40px; height:40px; line-height:40px; margin:0 5px; border-radius:50%;padding:0 14px;box-shadow:0 0 2px #555;}
		
	div.pagination a.nav-prev,  .pagination a.nav-next { color:#555 !important;}
	div.pagination a.nav-prev:hover,  .pagination a.nav-next:hover { background:#222; color:#fff !important; border-radius:50%;padding:0 14px;}

		
	div.pagination .nav_active { color:#222; font-weight:700; border-bottom:3px solid var(--layout-second-contrast-color);  }
	div.pagination a.nav { background:#fff; color:#222 !important; text-decoration:none !important; border-bottom:3px solid #222; margin:0 3px 0 3px; }
	div.pagination a.nav:hover { background:#222; color:#fff !important; }
	
	

/* --  Seitennavigation, falls mehrere Seiten, z.b. Blogs, Produktekategorien, News usw. --*/

 div.product-navigation		{ float:right; width:100%; text-align:center; background:none;  line-height:1em; margin:0 0 0 0; padding:0 0 0 0;font-weight:400;}

div.product-navigation a,
div.product-navigation i,
div.product-navigation span {border:1px solid #fff; background:#ccc; padding:0 10px; height:40px; line-height:40px; display:inline-block;transition: all ease .3s;}
div.product-navigation span {background:#fafafa; color:#bbb}

div.product-navigation a i {border:none; padding:0;}
div.product-navigation a		 {color: #555; margin: 3px; }
.product-navigation a:hover {background: #222; color:#fff; } 
.product-navigation span.nav_active { background:#111;color:#fff;  }
div.product-navigation a:hover i,
div.product-navigation a:hover i::before { background:none; color:#fff; transition: all ease .3s;}	
	
div.product-navigation .nav-prev, div.product-navigation .nav-next { position:relative; top:0px; }
div.product-navigation .nav-prev:before { font-family:'FontAwesome'; content:"\f053"; }
div.product-navigation .nav-next:before { font-family:'FontAwesome'; content:"\f054"; }
	
.footprints {  float:left; list-style-type:none }
.footprints li a { background:#585c61; padding:3px 10px; margin:2px 0; display:block; width:100%; text-align:left;}
.footprints li a:hover { background:#fff;}


/*-----------------------------------------------------------------------------------------------------------*/
/* Animations */

.get-in-contact { position:fixed; right:-213px; top:40%; z-index:1000; width:273px; color:#fff; animation:box-out 1s; }
.get-in-contact:hover { animation:box-in 1s; right:0; }
	
@keyframes box-in { 
			0% { right: -213px; }
			100% { right:0; }
}
@keyframes box-out { 
			0% { right:0; }
			100% { right: -213px; }			
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* scroll to top */

#totop {
   position: fixed;
  bottom: 10px;
  right: 15px;
  z-index: 99;
  border: none;
 /*  outline: none; */
  background-color: var(--layout-second-contrast-color);  
  color: white;
  cursor: pointer;
  padding: 13px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 18px;
  width: 45px;
  height: 45px;
}

#totop:before { content:"\f077"; color:#fff;font-family: FontAwesome; }



/* Listenformatierung   */

	.checklist { list-style:none;}
	.checklist li { list-style-type:none; margin:5px 0 5px 0; font-size:20px;}
	.checklist li:before {  content:"\f00c"; font-family: FontAwesome; margin-right:8px; color:green; }
	
	
/* spezielle Listenformtierung ---------------------------------------------------------*/

	ul.small li		{margin: 0 0 0 10px; font-size:0.9em;}

	ul.check { width:auto; margin:0 auto; text-align:left; display:inline-block}
	ul.check li { list-style:none;  clear:left; margin:0 0 0 0; padding:3px 10px 3px 38px;}
	ul.check li::before {	
		content: "\f058";
		font: normal normal normal 1em/1 FontAwesome;
		display: inline-block;
		margin: 0 1em 0 -25px;
		color:#227d08 !important;
	}

	ul.pluslist { width:auto; margin:0 auto; text-align:left; display:inline-block}
	ul.pluslist li { list-style:none;  clear:left; margin:0 0 0 0; padding:3px 10px 3px 38px;}
	ul.pluslist li::before {	
		content: "\f055";
		font: normal normal normal 1em/1 FontAwesome;
		display: inline-block;
		margin: 0 1em 0 -25px;
		color:#227d08 !important;
	}


		
	ul.nocheck { width:auto; margin:0 auto; text-align:left; display:inline-block}
	ul.nocheck li { list-style:none;  clear:left; margin:0 0 0 0; padding:10px 10px 10px 38px;}
	ul.nocheck li::before {
		content: "\f056";
		font: normal normal normal 1em/1 FontAwesome;
		display: inline-block;
		margin: 0 1em 0 -25px; 	color:#777;}
		ul.nocheck li:nth-child(even) {background-color: #fafafa;}
		

	ul.arrows { width:auto; margin:0 auto; text-align:left; display:inline-block}
	ul.arrows li { list-style:none;  clear:left; margin:0 0 0 0; padding:10px 10px 10px 38px;}
	ul.arrows li::before {
		content: "\f054";
		font: normal normal normal 1em/1 FontAwesome;
		display: inline-block;
		margin: 0 1em 0 -33px; 	color:#777;}
		ul.nocheck li:nth-child(even) {background-color: #fafafa;}

	.section.dark ul.check li::before {color:#fff !important;}
	.section.dark ul.nocheck li::before {color:#fff !important;}
	.section.dark ul.arrows li::before {color:#fff !important;}
	.section.dark ul.pluslist li::before {color:#fff !important;}


	.datasheet ul { display:table; width:100%; /* max-width:800px; */border:1px solid #ddd;}
	.datasheet ul li { display:table-row;}
	.datasheet ul li:nth-child(2n) { background:#ffffff;}

	.datasheet ul li .prop, .datasheet ul li .propval { display:table-cell; width:50%;padding:15px;}
	.datasheet ul li .prop { font-weight:bolder;}
	/* .datasheet ul li:hover { background:#ddd; } */
	.datasheet ul li .propval .fa-check { color:green;}

/* Buttons -----------------------------------------------------------------------------------     */

	.action-btn:hover:after { animation: anibtn 2s; }
	.action-btn:after {content:"\f178"; font-family:FontAwesome; margin-left:5px; }

	@keyframes anibtn {
				0% { position:relative; left:0; }
				50% { position:relative; left:15px; }			
				100% { position:relative; left:0px; }
	}


	.btn-rounded {
	  display: inline-block;
	  width: 25%;
	  min-width: 270px;
	  font-size: 1.0em;
	  margin: 3rem auto 0;
	  background: #000;
	  color: #fff !important;
	  border: 2px solid #000;
	  line-height: 40px;
	  padding: 5px 20px 5px 20px;
	  line-height: 30px;
	/*   text-transform: uppercase; */
	  transition: all ease 0.3s;
	  border-radius:40px;
	  text-align:center;
	}
	
	.btn-rounded.outline {
		background: #f4f4f4;
		color: var(--basic-font-color) !important;
	}
	
	.btn-rounded:after {
		content:"\f178"; font-family:FontAwesome; margin-left:15px;		
	}	
	.btn-rounded:hover, .action-btn:focus { background:#000;color:#fff !important; border-color:#000;}
	
	.glow:hover { box-shadow:0 0 3px #ff0000;}
	
	.btn-fresh { display:inline-block; min-width:200px; line-height:40px; background:#000 !important; color:#fff !important; border-radius:5px; border:none; padding: 5px 20px 5px 20px; text-align:center; cursor:pointer; }
	.btn-fresh:hover { background:#555 !important; color:#fff !important; }
	
	.btn-dark, .btn-light { display:inline-block; min-width:200px; line-height:40px; background:#555 !important; color:#fff !important; border-radius:5px; border:none; padding: 5px 20px 5px 20px; text-align:center; cursor:pointer;}
	.btn-dark.outline, .btn-light.outline { border:2px solid #000; background:#fff !important;color:#000 !important;}
	.btn-dark:hover, .btn-light:hover { background:#000 !important;color:#fff !important; }
	.btn-dark:focus, .btn-light:focus { outline:2px red;}
	
	
	.btn-back:before { content:"\f30a"; font-family:FontAwesome; margin-right:5px; }
	
	.btn-big { font-size:2em !important;}

	.hide-desktop { display:none !important; }


/* -- Fehler und Erfolgsmeldungen --*/

	#failure,#advice, #failurekon		{
		float:left; width:100%; padding:10px 2.5% 10px 2.5%; border:1px solid #A30000; color:#fff; background:#D71A1A;	margin:20px 0; border-radius:3px
	}
	
	#failure SPAN, #advice SPAN, #failurekon SPAN	{float:left; width:100%; line-height:25px;}
	#ok, #success,  #successkon	{
		float:left; width:100%; padding:10px 2.5% 10px 2.5%; border:1px solid #00cc00;  background:#EEFEEB;
	}
	
	#ok .fa-check { font-size:20px; color:#00cc00;}


/* 	#failure, #advice, 
	#failurekon						{ float:left; border:1px solid red; background:#FFE8E8; padding:1% 2.5% 1% 2.5%; margin:15px 0 ; color:red; width:100%;  box-sizing:border-box;  font-size:0.9em; }
	#failure, #advice				{ float:right; }
	#success,  #successkon	{ float:left; border:1px solid #00cc00; color:#00cc00; background:#EEFEEB; padding:1% 2.5% 1% 2.5%;  margin:15px 0 ; width:100%;  box-sizing:border-box; }
	 */
	#advice								{ /* width:245px; */ margin-top:10px; display:none; }
	#success a:hover, #ok a:hover			{ text-decoration:underline; }


	/*
	#failure span, 
	#success span, 
	#failurekon span, 
	#successkon span 			{ float:left; width:100%; } */

/* Videos im Slider */

.video-tab .poster { width:100%; height:70vh; position:absolute; left:0; top:0; z-index:1; background-size:cover;}
.video-tab.play .poster {display:none; }
.video-tab { position:relative;}
.video-tab video { position:relative; z-index:0; }

.video-tab { position:relative; }
.video-tab video { width:100%; pointer-events: none !important; }
.video-tab .playbutton { position:absolute; left:0;top:0; width:100%;height:100%;background:rgba(0,0,0,0); }
.video-tab .playbutton.paused { display:block; background:rgba(0,0,0,0); }

.video-tab .playbutton.paused:after { content: "\f144";
  font-family: FontAwesome;
  position: absolute;
  z-index: 78;
  font-size: 40px;
  left: calc(50% - (40px / 2) );
  top: calc(50% - (40px / 2) );
  color: #000;
  background: #fff;
  border-radius: 50%;
  padding: 11px 3px;
}

	
/* MEDIA QUERIES  ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
	
@media screen and (max-width:1600px) {
	:root {		
		--layout-max-width:100% !important;
	}
	div#main-wrapper { width:96%;}
}
@media screen and (max-width:1199px) {
	
	.section.image-left .paragraph .text,
	.section.image-left .paragraph .image,
	.section.image-right .paragraph .text,
	.section.image-right .paragraph .image,	
	.section .paragraph.image-left .image, 
	.section .paragraph.image-right .image,
	.section .paragraph.image-right .text, 
	.section .paragraph.image-left .text { width:50%; }
}
@media screen and (max-width:1000px) {
	
	.section.video  .video .empty-video, .section.video  .video .html5-video {max-width:calc(100% - 0px); left:0; padding-bottom:calc(100vw / 16 * 9); }
		
	.section.video.portrait  .video .empty-video,
	.section.video.portrait  .video .html5-video {
		width:100% !important;
		max-width:500px;
		height:0px !important;
		max-height:calc(100% / 9 * 16);
		padding-bottom: calc(100% / 9 * 16 );
	}
	
	
	
	.flexbox-item {	/*flex-basis: calc(100%);*/width:100%;}
	div.main {overflow:hidden; }
	
	.section.offers .box { width:calc(50% - 20px);
	
	.section .paragraph .text { padding:0 2rem; }
	
	h1, .h1 { font-size:24pt; }
	h2, .h2 { font-size:22pt;}
	h3, .h3 { font-size:21pt;}
	h4, .h4 {  font-size:19pt; }
	h5, .h5 {	font-size:16pt;}
	h6, .h6 { font-size: 14pt; }

	.hide-desktop { display:block !important; }
	.hide-tablet { display:none !important; }		
	.show-tablet { visibility:visible !important; }
	
}
@media screen and (max-width:767px) {
	.table-responsive {
		width: 100%;
		margin:2rem 0;
		overflow-y: hidden;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		border: 1px solid #eee;
			min-height: .01%;
		overflow-x: auto;
	}
	.table {
		width: 100%;
		max-width: 100%;
	}
	.tbl-copy { margin:0rem 0;}
	div#main-wrapper { width:100% !important; }
	
	
	.pagination .page-links {float:left; width:100px; position:relative; display:none;}
	.pagination .page-links .pages-dropdown {position:absolute;left:0; top:20px; background:#c0c0c0; width:95%; display:none;}
	
	.pagination .page-links span, .pagination .page-links a {display:block; width:100%;}
	
	.pagination .nav-prev, .pagination .nav-next { width:100px !important; border-radius:20px !important; margin:0 10px 0 10px !important; background:#f0f0f0 !important;}
	.pagination .nav-prev:after { content:"zurück";margin-left:5px;}
	.pagination .nav-next:before { content:"weiter" !important;margin-right:5px; font-family:inherit !important;}
	.pagination .nav-next:after {font-family: 'FontAwesome';content: "\f054";}
	
	
	.section .paragraph .text.pure-u-md-1-3,
	.section.image-left .paragraph .text, .section.image-left .paragraph .image,
	.section.image-right .paragraph .text, .section.image-right .paragraph .image,
	.section .paragraph.image-left .image, .section .paragraph.image-right .image,
	.section .paragraph.image-right .text, .section .paragraph.image-left .text { width:100%; }
	
	.section.image-right .paragraph .text {order:1;}
	.section.image-right .paragraph .image {order:0;}
	
	.section.image-left, .section.image-right, .section.video { padding-top:0;}
	
	
	.section.offers { background:#fff !important;}
	.section.offers .box { width:100%;}
	.section.offers .box h2 { font-size:20px;}
	
	@media screen and (orientation:landscape) {
		.section.video.portrait  .video .empty-video,
		.section.video.portrait  .video .html5-video {
			width:100% !important;
			max-width:360px;
			height:0px !important;
			max-height:calc360px / 9 * 16);
			padding-bottom: calc(360px / 9 * 15 );
		}
	}
	@media screen and (orientation:portrait) {
		.section.video.portrait  .video .empty-video,
		.section.video.portrait  .video .html5-video {
			width:100% !important;
			max-width:100%;
			height:0px !important;
			max-height:calc(100% / 9 * 16);
			padding-bottom: calc(100% / 9 * 15 );
		}
	}
	
	
	
}

@media screen and (max-width:576px) {
	.section .paragraph .text { padding:1rem;}
	.section.video .paragraph .text { padding:2rem 1rem 0rem 1rem;}
	
	.hide-mobile, .hide-tablet { display:none !important; }
	.hide-desktop.hide-tablet { display:block !important; }
	.hide-desktop.hide-tablet.hide-mobile { display:none !important; }
	
	.show-mobile { visibility:visible !important; }
	
	h1, .h1 { font-size:20pt; }
	h2, .h2 { font-size:18pt;}
	h3, .h3 { font-size:17pt;}
	h4, .h4 {  font-size:16pt; }
	h5, .h5 {	font-size:15pt;}
	h6, .h6 { font-size: 14pt; }
	
	
	.section.product-test { position:relative; height:70vh; padding:1rem; }

	.section.product-test .h2 {display:flex;flex-wrap:wrap;margin-top:1rem;}
	
	.section.product-test .left { float:left; width:100%;background:rgba(0,0,0, .5); padding:10px 0 20px 10px;}
	.section.product-test .right {width:100%;background:rgba(0,0,0, .5);padding:10px;}
	
	.section.product-test .t1 {background:; float:left; font-size:20pt;padding-bottom:14px}
	.section.product-test .t2 {background:; float:left; font-size: 39pt;}
	.section.product-test .t3 {background:;  line-height:62pt; font-size:48pt;}

	.section.product-test .contact-us {
		width:300px;
		position: absolute;
		right: calc((100% - 300px) / 2);
		top: unset;
		bottom:80px;
		padding: 10px;
		background: rgba(0,0,0, .5);
		padding: 20px;
		margin: 0;
		z-index: 1;
	}
	

	
}
@media screen and (max-height:600px) {
	#sidebarCart #cartItemsScroll {
		max-height: 280px;
		overflow: auto;	
		margin-top:30px;
		box-sizing: :border-box;
	}

	
}
@media screen and (max-width:350px) {
	div#main-wrapper {  width:95%; }
}

/*
@media screen and (orientation:landscape) and (max-width:1000px) {
	.section.video  .video .empty-video, .section.video  .video .html5-video {max-width:calc(100% - 0px); left:0; padding-bottom:calc(100vw / 15 * 9); }
	
	.section.video.portrait  .video .empty-video,
	.section.video.portrait  .video .html5-video {
		width:100% !important;
		max-width:100%;
		height:0px !important;
		max-height:calc(100% / 9 * 16);
		padding-bottom: calc(100% / 9 * 15 );
	}
}
@media screen and (orientation:portrait) and (max-width:1000px) {
	.section.video.portrait  .video .empty-video,
	.section.video.portrait  .video .html5-video {
		width:100% !important;
		max-width:500px;
		height:0px !important;
		max-height:calc(100% / 9 * 16);
		padding-bottom: calc(100% / 9 * 15 );
	}
}
*/