@import url("pgallery.css");

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Kleber berechnen */

#calcWrapper { position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.8); z-index:10; }
#gcalculator {  height: 75%;  width: 80%; margin: 2.5% auto 2.5% auto; padding: 2% 5% 5% 5%; overflow: hidden; background: #fff; 	color: #000;
						overflow-y: auto; position: relative; left: 0; top: 0; text-align: justify;
					  }

#gcalculator iframe { width:100%; height:100%; overflow:hidden }
div#closeWrapper { position:absolute; top:0; right:0; font-size:50px; color:#808080; background:#fff; cursor:pointer; padding:20px 0; margin:0px 20px 0}

button.calcButton { background:#f0f0f0; color:#000; border:none; padding:10px; border-radius:5px }
button.calcButton:hover { background:#96b3b4 }

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------*/





#product-wrapper		{ float:left; position:relative; margin:0 0 0 0; width:100%; padding:20px 0; }

#top-wrapper 			{ }
	h2.fn			{  
	font-family: 'Fira Sans Condensed', sans-serif;
	font-size: 1.5em;
	line-height:1.2em;
	font-weight:400;
	margin: 0 0 20px 0;
	clear:both;
	text-align:left;
	background:#96b3b4;
	color:#fef2d8;
	width:100%;
	padding:10px 30px;
	box-sizing:border-box;
	text-transform:none;
	font-weight:500;} 

.medproduct  { background:rgba(0,0,0,0.5);float:right;width:100%;margin:20px 0 100px 0; padding:25px; box-sizing:border-box}
#content-left  			{ float:left;   margin:0 0 0 0;}
#content-right 		{ float:right; margin: 0 0 0 0;  }

#hback		  		 { float:left; width:100%; height:80px; margin-top:10px }
#hback img         { margin-left:0px }
span.new	   		{ position:absolute; padding:10px 10px 10px 10px; top:0; left:0; text-align:center; background:#9E0072; color:#fff;z-index:1 }


/* -------- Inhalt teilen -----------------------------------------------------------------------------------*/

/*--- oberer Produktcontainer -----------------------------------------------------------------------*/

	#product-picture							{ float:left; width:100%; text-align:center; position:relative; background:none }
	#product-picture img 				{ cursor:pointer; }
	
	#main-picture 		 						{ float:left; width:100%; overflow:hidden; text-align:left;  position:relative; margin:0 0 5px 0; padding:0 30px 0 0 ; box-sizing:border-box;}
	#main-picture i		 								{ position:absolute; right:40px; bottom:10px; cursor:pointer; background:#96b3b4; padding:5px; color:#fff ;transition:all ease 0.3s;}
	#main-picture i:hover { background:#222;}

	#more-pics 		 				{ float:left; width:auto; margin:0px 0 0 10px;}
	#more-pics span		 		{ float:left; width:60px; height:60px; max-width:60px; max-height:60px; overflow:hidden; margin:0 5px 5px 0; padding:0; background:#e0e0e0}
	#more-pics Img 		 		{ margin: 0 auto 0 auto; max-height:64px; max-width:64px }




/* Artikeldarstellung */

		div#price-wrapper { 	
		 	background:none;	
		 	text-align:left;
		 	padding:0px;
		 	margin:120px 0 20px;
			background:none;}

			#price-wrapper span.strike { text-decoration: line-through;color: #c0c0c0;font-size: 0.8em;font-weight: 300;width: 100%;  }		
			#price-wrapper small  { /* display:none; */ float:left; margin-top:5px; font-size:0.7em;}
				
			#price-wrapper small a { font-weight:normal; }
			#price-wrapper small a:hover { text-decoration: underline }
				

			span.netto, span.pricetext { float:left; width:100% }
			span.pricetext, 	
			span.price_ad {	float:left; width:100%;  font-size:2em;font-weight:500;}
			span.smaller { float:left; display:block; width:60px; font-size:16px; text-align:left; text-indent:0px  } 
			span.pred { }
		
			div.zusatz {
				float:left;
				width:120px;
				height:50px;
				color:#f0f0f0;
				font-size:10px;
				position:relative;top:10px;
				font-style:italic}

			span.green { color: #94BF27}


/* ------- Bestellformular -------------------*/

   div.orderfrm-wrapper {padding:0; margin:3px 0; font-size:0.95em; line-height:1em;}
           
    .orderfrm-wrapper ul 		{  float:right; padding:0; margin:0; list-style:none; width:100%; }
    .orderfrm-wrapper ul li 	{  float:right; width:100%;  padding:0px; margin:3px 0; box-sizing:border-box}
	.orderfrm-wrapper ul li.dropdown { margin:0 0 20px 0}
	.orderfrm-wrapper ul li.dropdown .tdcap { display:none}
	
	.orderfrm-wrapper ul li ul { float:left; width:100%; box-sizing:border-box; padding:5% 10% 5% 0; }
	.orderfrm-wrapper ul li ul li.row1 { background:#FEF2D8; /* color:#96B3B4; */ margin:0; padding:2%; }
	.orderfrm-wrapper ul li ul li.row2 { background:#EDF0F0; /* color:#96B3B4 */  margin:0; padding:2%}
	.orderfrm-wrapper ul li ul li span.prop { display:inline-block; width:100px;  font-weight:700 }
	
	
	
    .tdcap 							{ float:left;  width:auto; text-transform:uppercase; margin:0 10px 0 0;  }
	.selattr 						{ float: left;position: relative;	}

	.selattr.noarrow 		{ background:none;  border:none  }
	.selattr img				{ position:relative; }
    .orderfrm-wrapper td img 	{ vertical-align:middle } 
    .orderfrm-wrapper select 	{ width:150px }
    
	
	div#alignright { float:right; width:100%; margin-top:20px; text-align:right; background:none }
	form#orderfrm {	float:right; width:100%;margin:0 auto 0 auto; padding:0;}
		
	span#qnt-wrapper {
		position:relative;
		width:100%; float:right;
		margin-top:10px;
		margin-right:0px;
		background:none;		
		text-align:left;
		display:block;}


	span#qnt-field	{ display:none;/* float:left;   margin-left:0px; width: 25%;padding:0 0;*/ }
	input#orderqnt {border:2px solid #ececec; background:#fff; color:#111;width:40px; height:30px; margin:0 0 0 15px; padding:5px; text-align:center;}

	#orderbtn { float:left; clear:both; position:relative; color:#fef2d8; margin:50px 0px 0 0; padding:10px 3%; font-weight:400; font-size:1.5em;background:#96b3b4; width:100%; text-align:center; text-transform:uppercase;  transition:all ease 0.3s; box-sizing:border-box;}
	#orderbtn:hover { background-color: #705d39; }
	#orderbtn i { margin:0 0 0 15px; }


.share { clear:both; padding:0 30px 0 0; float:left; color:#ccc; margin:-3px 0 0 0;}
.shariff { float:left;}
.shariff .orientation-horizontal li {min-width:45px!important; max-width:60px!important;}
.shariff .theme-white .shariff-button {	border: 1px solid #ececec!important;}
.shariff ul { clear:both;}
.shariff ul li {margin: 0 0 0 0;}





	div.selectorbg {position:relative; z-index:0; left:0; top:0;  width:100%; height:50px; line-height:50px; border: 1px solid #e0e0e0;
						border-radius: 5px;background:#fef2d8; cursor:pointer;width: 190px;padding: 0 15px;display: block; font-size:1.2em	}
	.selectorbg span   { position:absolute;  width:80%; left:10px; top:0; text-align:left; }
	.selectorbg::before {
	content: "\F078";
	font: normal normal normal 16px/1 FontAwesome;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: #705d39;
	color: #fef2d8;
	padding: 5px;
	border-radius: 50%;
	display: block;
	-moz-transition: 0.5s all ease;
	-o-transition: 0.5s all ease;
	-webkit-transition: 0.5s all ease;
	transition: 0.5s all ease;}	
	.selectorbg:hover::before {background: #96b3b4;}
	
	div.selectorbg select.styledrop { 
	position: absolute;
	background: none;
	cursor: pointer;
	z-index: 2;
	height: 50px;
	line-height: 50px;
	width: 100%;
	padding: 0 15px;
	top: 0;
	right: 0;
	opacity: 0;
	filter: alpha(opacity = 0);
	border: none;	}
	div.selectorbg select.styledrop option { background:#fff; cursor:pointer;padding: 0 15px;font-size: 0.9em; }




/* --- Reiter mit Beschreibung, Promoartikeln & Kontaktformular --- */	


	div#desc-wrap	{ float:left; clear:both; position:relative; background:none; padding:0 0 ; width:100%; margin:20px 0 100px 0 }
	div#bottom-hl	{ float:left; text-align:left;  width:100%;position:relative;}

/*------------ Tabs ----------------------------------------------------------------------------*/

	.tabs { float:left; width:100%; list-style-type:none; margin:0; padding:0}
	.tabs li { float:left; display:inline; margin:0; padding:0}
	
	.tabs li span { display:block; margin:0 10px 0 0; color: #96b3b4; background:#edf0f0; font-size:1.2em; line-height:40px; padding:5px 20px;  cursor:pointer ; text-transform:uppercase;transition:all ease 0.3s;}
	.tabs li:last-child span { margin:0 0 0 0;}
	.tabs li span:hover { background:#fef2d8;}
	.tabs li span.tab_active { background: #96b3b4;color:#fef2d8; position:relative}
	.tabs li span.tab_active:hover { color: #fff;}
	.tabs li span.tab_active::after {
			display: block;
			position: absolute;
			left: 50%;
			margin-left: -35px;
			content: "";
			width: 0;
			height: 0;
			border-left: 35px solid transparent;
			border-right: 35px solid transparent;
			border-top: 25px solid #96b3b4;
		}
	
	.tab { float:left; width:100%; background:#fff }
	
	
	h4  {
	margin: 0 0 30px;
	padding:60px 0 0 ;
	clear:both;
	position:relative;
	color: #bbb;
	font-size: 1.5em;
	font-weight: 400;
	
	line-height: 1.25;
	text-rendering: optimizeLegibility;}

/* initially all panes are hidden -------------------------------------------------------*/

#article { margin:50px 0 0; }
#article h6 {text-indent:1%}
/* .scrollable {float:right; width:70%; position:relative; z-index:2;background:#111;border-bottom:1px solid #e0e0e0;}

.scrollable::before {
	content: '.';
	text-indent: -5000px;
	border-left: 1px solid #e0e0e0;
	position: absolute;
	left: -1px;
	top: 0;
	z-index: 1;
	height: 100%;}
.panes .pane {float:left; width:100%;display:none;}


.scrollable h2{ margin:0 0 10px; font-size:1.2em; line-height:1.1em; text-align:left; color:#e0e0e0; font-family: 'Source Sans Pro', sans-serif;} */
/*----------------------------------------------------------------------------------------------*/

div.description, div.warranty, div#contact-us {
		float:left;
		width:100%;
		box-sizing:border-box;
		margin:0;
		padding:30px 0 0 0;
		color:#96b3b4;
		font-size:1.1em;
	}
		

/* ------- Kontaktformular --------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

	div#msg 								{ float:left; width:100%; margin:0; box-sizing:border-box; }
	div#contact-us 					{}
	
	#contact-us div					{ float:left; width:100%; margin-top:0px;background:none }
    #contact-us div.pdata	{ float:left; width:100%; margin:0 0 15px 0;  }
	
	#contact-us div label 	{ float:left; width:100%;}
	#contact-us div span 		{ float:left; }

	#contact-us input, 
	#contact-us textarea 		{ background:#fff; border:1px solid #dcdcdc; width:100%;font-family: 'Fira Sans Condensed', sans-serif; font-size:1em;  box-sizing:border-box; box-shadow:none !important; border-radius:0 !important;}

	#contact-us input[name="cagree"] { float:left; margin:0 10px 10px 0; width:auto; }
	#contact-us .hint label { float:none; }
	#contact-us .hint { line-height: 1.1em; font-size: 0.9em;  color:#555; }
	
	#contact-us textarea 		{ height:150px;}
	#contact-us div img 		{ float:right; margin:20px 10px 0 0; cursor:pointer }
	#contact-banner				{ float:left; margin:30px 0 0 40px }

	#subquest {
	background: #96b3b4;
	cursor: pointer;
	font-size: 1em;
	color: #fef2d8;
	text-align: center;
	padding: 10px 3%;
	margin: 25px 0 0 0;
	transition: ease-in-out 0.3s all;}
	#subquest:hover {background-color: #705d39 ; }
	
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Fehler & Erfolgsmeldungen */

#failure, #advice, 
#failurekon						{ float:left; border:1px solid red; background:#FFE8E8; padding:2.5%; margin:15px 0 ; color:red; width:100%; box-sizing:border-box;  }
#failure, #advice				{ float:right; }
#success,  #successkon	{ float:left; border:1px solid #00cc00; color:#00cc00; background:#EEFEEB; padding:2.5%;  margin:15px 0 ; width:100%; box-sizing:border-box;  }
#advice								{ width:245px; margin-top:10px; display:none}
#success, #failure 			{  }

 #failurekon, 
 #successkon 					{  }

#success a:hover				{ text-decoration:underline }
#failure span, 
#success span, 
#failurekon span, 
#successkon span 			{ float:left; width:100%; }


/*-----------------------------------------------------------------------------------------------------------------------------------------*/
/* Promo Artikel*/


#article-preview {
	float:left;
	width:100%;
	height:300x;

	position:relative;
	margin-top:20px; 
	padding-bottom:30px;	
	text-align:left;	
	margin-left:0;
	margin-right:0px;
		}


h3.promo { float:left; width:100%;  }


#art-start-wrapper {float:left;	width:100%; background:none;}


.promoscrollable {
	float:left;
	position:relative;
	overflow:hidden;
	width:100%;
	margin-left:0px; padding:0;
	height:450px; background:none;
	border:0px solid #f0f0f0;}


.promoscrollable .items {
	width:20000em;
	position:absolute;
}

div.group {	margin-right: -15px;margin-left: -15px; }

div.promoArt {	float:left; position:relative; 	margin:0 15px; text-align:center; box-sizing:border-box;}


/* .promoArt:HOVER { background: url('../../images/container_bestellung.jpg') center -50px repeat-x; border:1px solid #c0c0c0} */


.product-img {
	float: left;
	width: 100%;
	overflow: hidden;
	height: 280px;
	margin: 0 0 10px 0;
	box-sizing: border-box; 
	border:1px solid #ececec;}

.promoArt A { color: #818181;text-decoration: none;  line-height:1.5em; } 
.promoArt A  IMG { width: 100%; } 

.promoArt H3 {
	width: 100%; 
	overflow: hidden;
	font-size: 1.1em;
	font-weight: 300;
	padding: 0;
	margin:0 0 10px;}


.promoscrollable a.nav { z-index:3 }


/* right */
/* a.right { background: #e0e0e0; position: absolute; z-index:3; right: -75px;color: #fff;	transition: all ease .3s;}
a.right:hover  {background: #fecfe8;}
a.right::before {font: normal normal normal 25pt/1.7 FontAwesome;content: "\f054";} */

/* left */
/* a.left {background: #e0e0e0;position: absolute;	left: -75px;color: #fff;transition: all ease .3s;}
a.left:hover {background: #fecfe8;}
a.left::before {font: normal normal normal 25pt/1.7 FontAwesome;content: "\f053";} */

div.price_cont {
	float: left;
	 text-align:center;
	width: 100%;
	background: none;
	font-weight: 700;
	font-size: 1.1em;}
div.price_cont span.pricetext, 	
div.price_cont span.price_ad {	font-size:1.1em; text-align:center}

div.price_cont i {
	float: right;
	color: #fff;
	background: #fecfe8;
	text-align: center;
	border-radius: 50%;
	padding: 7px;
	margin: -10px 0 0;
	font-size: 1.1em;
	transition: all ease .3s;}
div.price_cont a:hover i {	background: #c0c0c0;}
span.strike {
	text-decoration: line-through;
	color: #c0c0c0;
	font-size: 0.8em;
	font-weight: 300;
	float:left;
	width:100%;}



div#price-info {
	width:100%;
	height:30px;
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
	font-size:10px;
	text-align:center;}

#price-info A {	font-weight:normal;	text-decoration:underline}


.promoArt A.view  { clear:both; position:relative; color:#eee; padding:5px 25px; font-weight:400; font-size:1em;background:#aaa; text-align:center;  border-radius:30px;transition:all ease 0.3s; margin:20px 0 0 0; line-height:70px;}
.promoArt A.view:hover { background-color: #96b3b4; }


	
@media screen and (max-width:568px) {
	.tabs { margin-top:10px; }
	.tabs li { width:50%; display:block}
	.tabs li span.a { font-size:0.8em; text-align:center }
}
@media screen and (max-width:450px) {
	.promoscrollable div.promoArt { width:320px }
	#gallerywrapper a.prev { left: 5px }
	#gallerywrapper a.next { right: 5px }
	#gallerywrapper a.nav { width:40px; height:40px; font-size:60px; line-height:25px}
	
	#breadcrumb strong, .shariff { display:none; }
	h2.fn { font-size:1.0em; }
	div.orderfrm-wrapper { width:100%; box-sizing:border-box; }
	div#price-wrapper { margin-top:40px; }
	.hint  p { font-size:0.8em; }
	
	
}
	
@media screen and (max-width:350px) {
	.tabs li span.a { font-size:0.7em; text-align:center }
}