@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

/*-------------------------------------------------------------------------------------------------*/
/*-------------------------------------- CUSTOMERFORMATTING ---------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

html, button, select, textarea, body, img, h1, h2, h3, h4, h5, h6 	{ font-family: 'Roboto', Arial, Helvetica, sans-serif;}

::-moz-selection 				{ background: #AAD222; color:#fff; }
::selection 					{ background: #AAD222; color:#fff; }

h1, h2, h3, h4, h5, h6  		{ margin-bottom: 15px;}

h1 								{ font-size:2.0em; }
h2 								{ font-size:1.8em; }
h3 								{ font-size:1.6em; }
h4 								{ font-size:1.4em; }
h5 								{ font-size:1.2em; }
h6 								{ font-size:1.0em; }

section  									{/* PLACEHOLDER */}
	section, section p 						{ font-size:16px; color:#646464; line-height: 150%;}
	section p 								{ margin-bottom: 15px;}

	section ul 					 			{ margin-bottom: 15px;}
	section ul li 				 			{ list-style: none; font-size:inherit; color:inherit; list-style-position: outside; margin-left:16px; padding: 5px 0; line-height: 150%;}
	section ul li:before 		 			{ content:"\f054"; font-family: fontAwesome; color:#AAD222; margin: 0px 0px 0px -16px; padding-right:5px; }
	section ul li:nth-child(odd) 			{/* PLACEHOLDER */}

	section ul.check 			 			{/* PLACEHOLDER */}
	section ul.check li:before 		 		{ content:"\f046"; font-family: fontAwesome; color:#AAD222; margin: 0px 0px 0px -16px; padding-right:5px; }

	section ol 					 			{ margin-bottom: 15px;}
	section ol li 				 			{ margin-left:16px;list-style-type: decimal; font-size:inherit; color:inherit; padding: 5px 0; line-height: 150%;}
	section ol li:nth-child(odd) 			{/* PLACEHOLDER */}

	section table 							{ width: auto; margin-bottom: 15px;}
	section table tr td 					{ padding:15px; border-bottom: 1px solid #eee;}
	section table thead 					{ border-bottom: 1px solid #999 ;}
	section table th 						{ text-align: center;}
	section table tbody tr:nth-child(odd) 	{ background:#eee;}	

/*-------------------------------------------------------------------------------------------------*/
/*-------------------------------------------- CONTAINER ------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

.demo {text-align: center; padding:15px; background:#f00; color:#fff; font-weight:bold;}

header 							{ background:#ffffff;}
nav 							{ background:#ffffff;}
section 						{/* PLACEHOLDER */}
	section#shortdesc 			{/* PLACEHOLDER */}
	section#tab 				{/* PLACEHOLDER */}
footer 							{ }

/*-------------------------------------------------------------------------------------------------*/
/*--------------------------------------------- HEADER --------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

.header-inner 						{ padding: 15px 0;}

#logo 								{ float:left; max-width: 100%; display: inline-block; transition: opacity 200ms; }
#logo:hover 						{ opacity: 0.50; transition: opacity 200ms; }

header ul 							{ float:right; display:inline-block; font-size:0; padding: 15px 0; }
header ul li 						{ position: relative; display:inline; padding:0 15px; font-size:16px; color:#222;} 
.shop_link 							{ float:right; padding: 15px; color: #646464 !important; font-size: 20px; font-weight: 600; }
.shop_link .fa-shopping-cart 		{ color: #76B729; padding-right: 5px;}

/*-------------------------------------------------------------------------------------------------*/
/*------------------------------------------- NAVIGATION ------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

.nav-inner 				{ }

/* Erste Ebene */
nav .nav-inner > ul 						{ position:relative; font-size:0;}
nav .nav-inner > ul > li 					{ display:inline-block; font-size: 16px; color: #646464; border-bottom:1px solid transparent; transition: all 300ms;}
/* Padding 1 & 2 */
nav .nav-inner a 									{ display: inline-block; padding:20px 15px 5px 15px;}
nav .nav-inner > ul > li > div > div > ul > li > a 	{ padding:0;}

/* Zweite Ebene */
nav .nav-inner ul > li  > div > div > ul 		{ position: relative; display:none; }
nav .nav-inner ul li:hover > div > div > ul 	{ display:block; margin-bottom: 15px; } 

nav .nav-inner ul > li > div > div > ul > li 	{ display:block; font-weight: bold; font-size: 14px; color: #fff; line-height: 140%; text-transform: none;}

nav .nav-inner ul > li > div  					{ display:none; box-sizing: padding-box;  background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 12px rgba(0,0,0,0.1);}
											
nav .nav-inner ul li:hover > div 				{ display: block; position:absolute; width:100%; background:#111; z-index: 1; padding:25px; left:0; min-height:300px; top:100%;}
nav .nav-inner ul > li > div > div 				{ display: inline-block; width:32%; vertical-align: top;}

nav .nav-inner .nav-title 						{ display:inline-block; line-height: 16px; font-weight: bold;  font-size: 14px; color: #999 ; text-transform: uppercase; padding-bottom: 15px;}
nav .nav-inner p 								{ margin:0 0px; font-weight:normal; line-height: 160%;}
nav .nav-inner .color 							{ color:#364059 !important;}

nav .nav-inner img 								{ max-width:100%;}

.underline 					{ display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);position: relative;overflow: hidden;}
.underline:before 			{ content: "";position: absolute;z-index: -1;left: 50%;right: 50%;bottom: 0; background: #364059; height: 3px;-webkit-transition-property: left, right;
											transition-property:left,right;-webkit-transition-duration: 0.2s;transition-duration: 0.2s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}
.underline:hover:before, 
.underline:focus:before, 
.underline:active:before 	{ left: 0;right: 0;background: #A9EA03;}


/*
	nav .nav-inner > ul:first-of-type > li:first-child > a 		{ padding-left:0;}
	nav .nav-inner > ul:first-of-type > li:last-child > a 		{ padding-right:0;}
*/

/*-------------------------------------------------------------------------------------------------*/
/*---------------------------------------------- GALLERY ------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

.gallery img 									{ width: 100%; }
.gallery-images, .gallery-images .gallery_swap 	{ font-size: 0; line-height: 0; }
.gallery-images 								{ display: inline-block; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding:0;}

.gallery_swap 								{ width: 100%; position: relative; height: auto; display: block; padding-top: 100%;}
.gallery_swap > img 						{ position: absolute; left: 0; top: 0; transition: all ease 0.3s; }

.gallery_swap label 						{ float: left; cursor: pointer; transition: all ease 0.3s; opacity: 0.6; width: 15.65%; margin: 6px 1.22% 0 0; display: inline-block;}
.gallery_swap label img 					{ display: block; }
		
.gallery_swap input[name='img_swap'] 					{ display: none; }
.gallery_swap input[name='img_swap']:checked+label 		{ opacity: 1; }
.gallery_swap input[name='img_swap'] ~ img 				{ opacity: 0; }
.gallery_swap input[name='img_swap']:checked+label+img 	{ opacity: 1; }

.gallery_swap label[for="id6"] 							{ margin-right:0;}

/*-------------------------------------------------------------------------------------------------*/
/*-------------------------------------------- SHORTDESC ------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

section#shortdesc .item-title 			{font-size:28px; margin-bottom: 5px; line-height: 120%; font-weight: bold; }
section#shortdesc .art-nr 				{font-size:12px; margin-bottom: 30px; color:#999;}
section#shortdesc .shortdesc 			{font-size:16px; margin-bottom: 30px; }

section#shortdesc .shortdesc ul 		{/* PLACEHOLDER */}
section#shortdesc .shortdesc ul li 		{/* PLACEHOLDER */}
section#shortdesc .shortdesc ol 		{/* PLACEHOLDER */}
section#shortdesc .shortdesc ol li 		{/* PLACEHOLDER */}

/*-------------------------------------------------------------------------------------------------*/
/*------------------------------------------- TABSYSTEM -------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

section#tab section 				{ display: none; padding: 15px;  overflow: hidden;}								
section#tab section > div 			{ animation-name: input; animation-duration: 1s }
								  	  @keyframes input {from {opacity:0; transform: translateX(-5%)}
							   			   		          to {opacity:1;}}
section#tab input 					{ display: none; }
section#tab label 					{ color: #999; background:#fff; font-size: 16px; padding: 15px 10px; margin: 0px 0px 0px 0px; float:left; display: inline-block; text-transform: uppercase; transition: all 200ms;  }
section#tab label:hover 			{ color: #fff; cursor: pointer; background:#364059;}
section#tab input:checked + label 	{ color: #fff; background: #76B729; padding: 15px 15px; transition: all 500ms; }
#tab1:checked ~ #desc-1, 
#tab2:checked ~ #desc-2,  
#tab3:checked ~ #desc-3 			{ display: block; }
.zahlungsarten 						{ padding:0px 20px;}
#desc-3 > div, #desc-3 > div 		{ text-align: center;}

hr.border 							{ border-color:#76B729; border-width: 5px; margin:0;}
hr.border 							{ clear:both;} 
hr.border:before, hr.border:after 	{ content:""; display:table;}
hr.border:after 					{ clear:both;}
hr.border 							{ zoom:1;}

/*-------------------------------------------------------------------------------------------------*/
/*--------------------------------------------- FOOTER --------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

footer .footer-inner > ul > li 				{ display:inline-block; font-size: 16px; color: #ffffff; border-bottom:1px solid transparent; transition: all 300ms; padding-left:20px; text-transform: uppercase;
											padding-bottom: 10px; padding-top: 10px;}
footer .container-inner 					{background:#364059; }
footer .berge 								{margin-top: 30px;}
											
.footer-title 					{ font-size:16px; font-weight:bold; text-transform: uppercase; margin-bottom: 15px; }

footer ul li 					{ line-height: 150%;}
footer img 						{ }

.footer-after 					{ font-size:14px; color:#999; padding:15px 0;}

/*-------------------------------------------------------------------------------------------------*/
/*------------------------------------------- BAUKASTEN -------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

.box 				{ padding-bottom: 4px; overflow-x: hidden; text-align: center;}
.white-space 		{ padding:15px;}
.cd p 				{ font-size:16px; color:#333; line-height: 150%; margin-bottom: 15px;}	
.cd h3 				{ color:#333;}
/*------------------------------------------- STANDARD --------------------------------------------*/
/*------------------------------------- MEDIA MOBILE 1140px ---------------------------------------*/
/*------------------------------------- ******************* ---------------------------------------*/

@media screen and (max-width: 1200px) {
	.header-inner { padding:15px; transition: padding 300ms;}
	.footer-inner { padding:15px;transition: padding 300ms; }
	.footer-after { padding:15px; transition: padding 300ms;}
	.table		  { -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; overflow-x: scroll; overflow-y: hidden; }
}

/*-------------------------------------------- CUSTOM ---------------------------------------------*/
/*-------------------------------------- MEDIA MOBILE 800px ---------------------------------------*/
/*------------------------------------- ******************* ---------------------------------------*/


@media screen and (max-width: 800px) {
nav .nav-inner > ul > li 					{ font-size:14px;}
}

/*------------------------------------------- STANDARD --------------------------------------------*/
/*-------------------------------------- MEDIA MOBILE 680px ---------------------------------------*/
/*------------------------------------- ******************* ---------------------------------------*/

@media screen and (max-width:680px) 
{
	
#logo 											{ display: block; margin:0 auto; float:none; }
#logo:hover 									{/* PLACEHOLDER */}
	
header ul 										{ display: none; float:none; text-align: center;}
header ul li 									{ display:block; padding:5px 0;}
.shop_link 										{ display: none;}

	nav 										 {display:none;}
nav .nav-inner > ul > li 						{ display:block; text-align: center;}
nav .nav-inner > ul > li:after 					{ position: absolute; right:0; padding:15px;}
nav .nav-inner ul li:hover > div 				{ position:relative; min-height: auto; }
nav .nav-inner ul > li > div > div 				{ width:48%;}
nav .nav-inner ul > li > div > div:last-child 	{ display:none;}

nav .nav-inner a 								{ display:block;}	
nav .nav-inner ul li > div 						{ display:none !important;}
	
.tp-product-image 					{ padding:0;}
	
section#shortdesc 					{ padding:15px 30px;}
	
section#tab section 				{/* PLACEHOLDER */}
section#tab input 					{ display: none; }
section#tab label 					{ float:none; display: block; padding: 15px 10px; margin: 0 0 0 0; text-align: left; border-bottom: 1px solid #eee;}									 
section#tab label:hover 			{/* PLACEHOLDER */}
section#tab input:checked + label 	{/* PLACEHOLDER */}
.zahlungsarten 						{margin-bottom: 10px;}
	.row 								{}	
	
.footer-inner > div { margin-bottom: 15px;}
footer .berge 											{ display:none;}
footer .footer-inner > ul > li 							{ display:block; text-align: center; padding:5px;}
footer .footer-inner > ul > li:after 					{ position: absolute; right:0;  padding:15px;}
footer .footer-inner ul li:hover > div 					{ position:relative; min-height: auto; }
footer .footer-inner ul > li > div > div 				{ width:48%;}
footer .footer-inner ul > li > div > div:last-child 	{ display:none;}

	
}