@import "pure/base-min.css";
@import "pure/pure-min.css";
@import "fonts/roboto/font.css";
@import "fonts/fontawesome-free-6-6-0/css/all.min.css";
/*@import "fonts/ionicons-2.0.1/css/ionicons.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";

/* global variables */

:root {
	--basic-font-family: 'Roboto', sans-serif;
	--basic-font-color:#555;
	--headline-font-family:'Maven Pro', sans-serif;
	--headline-font-family:#32414d;
	--body-background-color: #fff;
	--layout-first-contrast-color: #32414D;
	--layout-second-contrast-color: #96c11f;
	--layout-max-width:1600px;
}

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

/*********************************************************************************/
A:ACTIVE, A:LINK, A:VISITED {color:var(--layout-second-contrast-color);text-decoration:none; transition:all ease 0.3s;}
A:HOVER {Color: #555; text-decoration:underline; }

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


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:2.5em; margin:0 0 10px 0;font-family: var(--headline-font-family); color: var(--headline-font-family); font-weight:400; line-height:1.1; padding-left:0px; }
h2, .h2 { font-size:30pt; margin:0 0 20px 0;font-family: var(--headline-font-family); font-weight:300; line-height:1.2em; text-align:center}
h3, .h3 { font-size:25pt; margin:0 0 30px 0;font-family: var(--headline-font-family); font-weight:700; line-height:1em; text-align:center;}
h4, .h4 {  font-size:18pt; font-weight:500; margin:0 0 10px 0;font-family: var(--headline-font-family); font-weight:600; text-align:center; }
h5, .h5 {	color: inherit; font-weight:bold; margin:0 0 0 0;	}
h6, .h6 { font-weight:bold;color: var(--layout-second-contrast-color);  }
*/

h1, .h1 { font-size:26pt; text-align:left; margin:0 0 10px 0;font-family: var(--headline-font-family); color: var(--headline-font-family); font-weight:600; line-height:1.1; padding-left:0px; }
h2, .h2 { font-size:24pt; text-align:left; margin:0 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:0 0 30px 0;font-family: var(--headline-font-family); font-weight:400; line-height:1em;}
h4, .h4 {  font-size:20pt; text-align:left;margin:0 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;}

.tcenter { text-align:center; }


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;}



/* customizable snowflake styling */
/*.snowflake { font-family: "WWFlakes"; color:#fafafa;}*/
/*
.snowflake span { display:block; background:#fff; border-radius:50%; width:5px; height:5px;}
.snowflake .size2 { width:7px; height:7px;}
.snowflake .size3 { width:10px; height:10px;}
*/
/*
@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
*/


.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: #555;
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-family: 'Raleway', sans-serif;  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;}	

		#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%;
			margin:15px 0 0;
			padding:15px 0;		
			color:#555;
			font-size:0.8em;
			line-height:1em;
			overflow:hidden;
			z-index:0;}
div.inner-crumb { 
			max-width:1600px;
			width:90%;
			margin:0 auto;}
		#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. --*/

/*  div.product-navigation		{ float:left; 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}
.product-navigation a:hover {background: #222; color:#fff; } 
.product-navigation span.nav_active { background:var(--layout-second-contrast-color);color:#fff;  }
div.product-navigation a:hover i,
div.product-navigation a:hover i::before { background:none; color:#fff; transition: all ease .3s;}	
 */	
.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: #c0c0c0;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
	font-size:13px;
}

#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%; }

/*-- Sektions ------------------------------------------------------------------------------------------------------------------------------------------------------*/

	.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 .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.image-left .text { float:right; order:1; width:calc(100% - 600px); /* background:gold;  */}
	.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); /*  background:red; */ }
	.section .paragraph.image-right .image { float:right; max-width:600px; max-height:600px; order:1; }
	.section .paragraph.image-right .image img { float:right; }

	.section .paragraph .text { padding:2rem; line-height:1.8; }



	.section.offers { background:#fff;  padding:5rem 0 5rem 0; }
	
	.section.offers .bags, .section.offers .cups, .section.offers .caps, .section.offers .pens	{ background: #f0f0f0; padding:4%; border-radius:5px; }
	.section.offers .cups { margin-right:20px; width: calc(50% - 20px); text-align:left; }
	.section.offers .caps { margin-right:20px; width: calc(50% - 20px); text-align:left;}
	.section.offers .pens { margin-top:20px; margin-right:10px;  width: calc(100% - 20px); text-align:left; }
	

	.section.offers h2 { font-weight:700; text-align:left; }
	.section.offers .bags h2 {text-align:right; }
	
	
/*-- 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 { border-radius: 20px 0 0 20px; }
	div.pagination .nav-next { border-radius:0 20px 20px 0; } */
	
	
	
	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; }			
}


#contact-trigger { position:absolute; left:0; top:0; width:55px; height:142px; z-index:1;  background:rgba(0,0,0, 0);  cursor:pointer; }

.get-in-contact sup {  
		display:none;
		border-bottom:0px solid #fff; text-transform: uppercase;
		letter-spacing: 2px; font-size:16px; padding-left: 45px;
}
.get-in-contact.animate sup { display:inline; }

.get-in-contact .call { display:block; padding:15px; font-size:20px;
									background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(218,18,21,1) 0%, rgba(177,25,26,1) 100%);
								 }
.get-in-contact .call a { display:block; color:#fff; font-weight:600; font-size:23px; letter-spacing:1px; margin-top:5px; }
.get-in-contact .call a:before { 
	content: "\f095";
    font-family: FontAwesome;    
    background: #fff;
    border-radius: 50%;
    color: #D31316;
    padding: 4px 6px 4px 6px;
    margin-right: 22px;
    font-size: 15px;
    position: relative;
    top: -3px;
}
.get-in-contact .kontakt-sb { display:block; padding:15px; font-size:20px;margin-top:5px;
											 background: linear-gradient(35deg, rgba(2,0,36,1) 23%, rgba(122,114,114,1) 40%, rgba(0,0,0,1) 57%);
									       }
.get-in-contact .kontakt-sb a { color:#fff; letter-spacing:0;}
.get-in-contact .kontakt-sb a:before {
	content: "\f129";
    font-family: FontAwesome;    
    background: #fff;
    border-radius: 50%;
    color: #000;
    padding: 4px 9px 4px 9px;
    margin-right: 24px;
	margin-left:3px;
	
    font-size: 15px;
    position: relative;
    top: -2px;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* 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; }


/* 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: 300px;
	  font-size: 1.1em;
	  margin: 3rem auto 0;
	  background: #96c11f;
	  color: #fff !important;
	  border: none;
	  line-height: 40px;
	  padding: 10px 20px 10px 20px;
	  line-height: 30px;
	  text-transform: uppercase;
	  transition: all ease 0.3s;
	  border-radius:40px;
	  text-align:center;
	}
	.btn-rounded:after {
		content:"\f178"; font-family:FontAwesome; margin-left:15px;		
	}
	
	.btn-rounded:hover, .action-btn:focus { box-shadow:0 0 15px #ccc; }
	
	.btn-fresh { display:inline-block; min-width:200px; line-height:40px; background:var(--layout-second-contrast-color) !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-light { display:inline-block; min-width:200px; line-height:40px; background:#f4f4f4 !important; color:#222 !important; border-radius:5px; border:none; padding: 5px 20px 5px 20px; text-align:center; cursor:pointer;}
	.btn-light:hover { background:#555 !important;color:#fff !important; }
	
	.btn-back:before { content:"\f30a"; font-family:FontAwesome; margin-right:5px; }
	

	 .hide-desktop { display:none !important; }
		
/* 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 .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:990px) {
	.flexbox-item {	/*flex-basis: calc(100%);*/width:100%;}
	div.main {overflow:hidden; }
	
	/* .section .paragraph.image-left .text { float:right; order:1; width:100%;order:1;}
	.section .paragraph.image-left .image { float:left; max-width:600px; max-height:600px; order:0; }
	

	.section .paragraph.image-right .text { float:left; order:0; width:100%; order:1;}
	.section .paragraph.image-right .image { float:right; max-width:600px; max-height:600px; order:0; } */
	
	.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.image-left .image, .section .paragraph.image-right .image,
	.section .paragraph.image-right .text, .section .paragraph.image-left .text { width:100%; }
	
	
}

@media screen and (max-width:576px) {
	.section .paragraph .text { padding:1.0rem ;}
	
	.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; }
	
	
}
@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%; }
}