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

/* Normalisierung */
html 							{ height: 100%; }
html, button, select, textarea 	{ margin: 0px; vertical-align: baseline; vertical-align: middle; line-height: normal; -webkit-text-size-adjust: 100%; }
body 							{ padding: 0px; margin: 0px; min-height: 100%; font-size: 16px; }
body a, body a:link, a:visited 	{ text-decoration: none; outline: none; color: inherit; }
body a:active, body a:hover 	{ text-decoration: none; outline: none; color: inherit; }

h1, h2, h3, h4, h5, h6, p, img, form, input, li, ul, ol, select, fieldset { margin: 0px; padding: 0px; border: 0px; }
ul, ol 							{ list-style-type: none; }
img 							{ vertical-align: middle; font-family: 'Ubuntu', sans-serif;   }
table 							{ border-collapse: collapse; border-spacing: 0px;}
td, th 							{ vertical-align: top; text-align: left; }
hr 								{ height: 0; -moz-box-sizing: content-box; box-sizing: content-box; margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #e5e5e5; }

section, article, div {box-sizing:border-box;}

/* Schriftklassen */
html, button, select, textarea, body, img 	{ font-family: 'Ubuntu', Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6 						{ font-family: 'Ubuntu', Arial, Helvetica, sans-serif; margin-bottom: 10px;}
h1 											{ font-size:22px; }
h2 											{ font-size:20px; }
h3 											{ font-size:18px; }
h4 											{ font-size:16px; }
h5 											{ font-size:14px; }
h6 											{ font-size:12px; }

/* Font-Awesome */
.fa-shopping-cart, .fa-envelope, .fa-star 	{  color: #CC1E06; }
.fa-info-circle 							{  color: #fff; }

/* Sonderklassen */
a.thumbnail[title*="noimage.gif"] 	{ display:none;}
a.thumbnail[title*=""] 				{ display:none;}
div[typeof="Product"] 				{ font-size:8px; color:#fff;}
img.responsive 						{ max-width:100%; height:auto;}
.clear 								{ clear:both;}
.clear:before, .clear:after 		{ content:""; display:table;}
.clear:after 						{ clear:both;}
.clear 								{ zoom:1;}
.clear 								{ zoom:1;}

/* Container */
#wrapper 				{ width: 960px; margin: 0px auto; background: none; padding: 10px ;}
header 					{ position: relative; z-index:0;margin-bottom: 10px; margin-top:60px; padding:20px 20px 20px 0px; 
							background: #cfe3ea;
							background: -moz-linear-gradient(top, #cfe3ea 0%, #f6f6f6 47%, #ffffff 100%);
							background: -webkit-gradient(left top, left bottom, color-stop(0%, #cfe3ea), color-stop(47%, #f6f6f6), color-stop(100%, #ffffff));
							background: -webkit-linear-gradient(top, #cfe3ea 0%, #f6f6f6 47%, #ffffff 100%);
							background: -o-linear-gradient(top, #cfe3ea 0%, #f6f6f6 47%, #ffffff 100%);
							background: -ms-linear-gradient(top, #cfe3ea 0%, #f6f6f6 47%, #ffffff 100%);
							background: linear-gradient(to bottom, #cfe3ea 0%, #f6f6f6 47%, #ffffff 100%);
							filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe3ea', endColorstr='#ffffff', GradientType=0 );}
article 				{ margin-bottom: 10px; }
	#gallery 			{ width: 47%; background: #fff; float: left; }
	#description 		{ width: 52%; background: #fff; float: right; min-height:442px;box-sizing: border-box;padding: 20px;border:1px solid #CFE3EA; border-radius: 5px; ;}
main 					{ }
footer 					{ margin-top: 10px; background: #fff; padding: 10px; border-top:1px solid #CFE3EA; border-bottom: 1px solid #CFE3EA; padding:15px 0px;}

/* Header */
header img#logo 				{ width:100%; height:auto; left:0; right:0; margin-left:30%; max-width: 297px;  }
header img.panther 				{ position:absolute; z-index: 0; bottom: 0;border-radius: 5px;}
header div.wannsee-electronic   { float:right;}
header div.wannsee-electronic img {max-width:200px; height:auto;}
header div.wannsee-electronic div {font-size:13px; font-weight:600;color:#333; border-left:1px solid #CFE3EA; padding-left:10px; margin-top:15px; line-height:140%;}

/* Benefits */
.benefits 			{border:1px solid #CFE3EA; border-radius: 5px; padding: 15px 15px;margin:10px 0px;}
.benefits ul 		{display:flex; justify-content:space-between;}
.benefits ul li 				{ list-style: none; font-size: 14px; color: #333; padding-left: 25px; }
.benefits ul li:before 			{ font-family: fontAwesome; content: "\f058"; color: #00A4CC; margin: 0px 0px 0px -19px; width: 20px; font-size: inherit; padding-right: 5px; }
/* Hover-Effect */

/* Gallery */
#gallery img {width:100%; height:auto;}

/* Description */
#description img#logo 				{ float:left; max-width: 128px; height: auto; margin: 0px 0px 20px; margin-right:20px; }
#description img:nth-of-type(2) 	{ padding-top:10px; max-width: 276px; height:auto; width:100%; display: block; margin:0 auto;}

#description ul 					{ margin: 20px 0px 00px; }
#description ul li 					{ list-style: none; font-size: 14px; line-height: 160%; color: #333333; padding-left: 25px; }
#description ul li:nth-child(odd) 	{ }
#description ul li:before 			{ font-family: fontAwesome; content: "\f18e"; color: #CC1E06; margin: 0px 0px 0px -22px; width: 20px; font-size: inherit; padding-right: 10px; }

#description .hardfacts {margin:20px 10px; }
#description .hardbox img {width:30px; height:30px;margin-right:5px; margin-left:-10px;transition: all 0.5s;}
#description .hardbox {margin:5px 0px;background:#E0E8EB;transition: all 0.5s;}
#description .hardbox:nth-child(even) {background:#EEEEEE;}

#description .hardbox span.first {width: 100px; display: inline-block;}
#description .hardbox span.second {font-weight:bold;}


/* Tab-System */
main section 				{ animation-name: input; animation-duration: 1s; display: none; padding: 20px; background: #fff; border:1px solid #eee; border-top:3px solid #CC1E06;}
							@keyframes input {from {opacity:0;}
												to {opacity:1;}}
main input 					{ display: none; }
main label 					{ display: inline-block;background:#fff;  margin: 0 0px 0px 0px; padding:10px;font-weight:normal; font-size: 18px; 
									  text-align: center; color: #333; border:1px solid #CFE3EA; border-radius: 5px 5px 0px 0px;}
main label:hover 			{ color: #666; cursor: pointer; background:#fff;}
main input:checked + label 	{ color: #fff; border-bottom: 1px solid #fff; background: #CC1E06; border-radius:0px; border:1px solid #CC1E06;}
#tab1:checked ~ #desc-1, 
#tab2:checked ~ #desc-2, 
#tab3:checked ~ #desc-3, 
#tab4:checked ~ #desc-4,
#tab5:checked ~ #desc-5 { display: block; }

main p {line-height:160%; margin-bottom:10px;}
main ul {margin:10px 20px;}
main ul li {font-size:14px; line-height:160%; list-style: square; }

main div.left {float:left; margin-right:30px;}
main div.left p {font-weight:bold;}

main .service {margin-top:20px;}
main .service table tr td {padding:5px 0px;}
main .service table tr td:first-child {font-weight:bold; width:150px;}

/* Banner */
.banner {margin:10px 0px;}
/* Footer */
footer 						{ }
footer div:first-child {margin-left:20px;}
footer div {float:right; text-align: right; font-size:12px;}
	.two {max-width:250px !important;}




/* -------------------------------------------------- MEDIA QUERIES -------------------------------------------------- */
/* ----------------------------------------------------- Tablet ------------------------------------------------------ */

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

/* Container */
#wrapper 											{ width: 100%; box-sizing: border-box; }
header 												{ padding-bottom: 30px; margin-top:40px;}
footer 												{ }
#article 											{ width: 47%; }
#description 										{ width: 52%;  }

	
/* Header */
	header img#logo 				{  max-width:200px; padding-top:20px;   }
	header img.panther 				{ position:absolute; z-index: -1; bottom: 0;border-radius: 5px; max-width:150px;}
}


/* -------------------------------------------------- MEDIA QUERIES -------------------------------------------------- */
/* ----------------------------------------------------- Mobile ------------------------------------------------------ */

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

/* Container */
#wrapper 											{ width: 100%; box-sizing: border-box; padding:5px; }
header 												{ margin-top:0px; padding:20px 0px;}
footer 												{ }
#gallery 											{ width: auto; float:none; }
#description 										{ width: auto; float:none; margin-top:10px;}

/* Header */
	header img#logo { height:auto;margin: 0 auto; display: block; padding:0px; max-width: 297px;}
	header div.wannsee-electronic {display:none;}
	header div.wannsee-electronic div { border-left:none;}
	header img.panther 				{ display: none;}
	
	
/* Tab-System */
main section 				{ padding: 20px; border:1px solid #eee; }

main input 					{ display: none; }
main label 					{ display: block; padding: 15px 0;}
									 
main label:hover 			{ }
main input:checked + label 	{ border-bottom: 0px solid #fff; border-top:0px;  }
#tab1:checked ~ #desc-1, 
#tab2:checked ~ #desc-2, 
#tab3:checked ~ #desc-3, 
#tab4:checked ~ #desc-4 	{ display: block; }

main label {border-radius:0px;
	}
	
/* Footer */
	footer div {float:none; text-align: center; margin-top: 10px;}
}

/* -------------------------------------------------- MEDIA QUERIES -------------------------------------------------- */
/* --------------------------------------------------- Anpassungen --------------------------------------------------- */

@media screen and (max-width: 360px) {
	.hardfacts {margin-top:20px !important;}
	.hardbox {padding:5px 0px;transition: all 0.5s;}
	.hardbox img {margin-top:-25px;transition: all 0.5s;}
	.hardbox span {display:block;}
	.hardbox span.second {margin-left:25px;}
}

@media screen and (max-width: 500px) {
	.benefits ul { display: block;}
	.benefits ul li {margin:10px 0px;}
	
	.panther 				{ animation-name: panther; animation-duration: 0.5s; opacity: 0.5;}
							@keyframes panther {from {opacity:1;}
												to {opacity:0.5;}
	
	}
	
}