@import '../includes/js/jquery-ui-1.11.4/jquery-ui.min.css';

div#prd-content		{ float:right; width:100%; max-width:1250px; position:relative; }
div#product-wrapper		{ float:right; width:100%; overflow-x:hidden; position:relative;margin:0;  padding:0; }

div#section-right {
		position:relative;
		display:flex;
		flex-wrap:wrap;
		float:right;
		width: calc(100% - 340px);
		margin: 0px 0 0 0;
		padding:20px 0;
		box-sizing:border-box;
}

	div#products {  float:left; width:100%; order:0; }

	#products UL LI h4 { background:#fff; margin:0 0 0 10px; padding:50px 20px; }

/*--------------------------------------------------------------------------------------------------------------*/
/* Artikel Listenformatierung */
/* Produktliste */


/* Button nach oben */

			.nav_btn {
		 		width: 27px; 
		 		height: 26px;
		 		border:0px none;
		 		vertical-align:middle}


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

OL.articles {
	list-style-type:none;
	padding:0 0 20px 0;
	position:relative;
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	box-pack: left;
	justify-content:flex-start;
	-webkit-justify-content: flex-start;
	-moz-justify-content: flex-start;
	align-items: top;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap; 
	}
	
/*-------------------------------------------------------------------------------------------------------------*/
/* -- Artikel Klasse darf nicht umbenannt werden, wegen Microformaten -- */
	LI.product {
		 float:left;
		 height:auto; overflow:hidden; position:relative;
		 margin:0 1% 2%;
		 box-sizing:border-box;
		 padding: 0 0;
		 text-align:left;
		 width:23%;
	}
	

	/* LI.product:HOVER div.art_desc_cont{ display:block;} */

	span.newproduct {position:absolute; top:0px; left:0px;  z-index:1; width:40px; height:28px; line-height:30px; background:#957460; color:#fff; text-align:center; font-size:0.8em; }

		div.article_img	{
			 float:left;
			 width:100%;
			 margin:0 0 0;
			 overflow:hidden;
			 height:auto;
			 border:1px solid #ececec;
			 background:#fff;}
			div.article_img .photo { box-sizing: border-box; height:auto!important;
			width:100%; /*height:0; padding-bottom:80%; background-repeat:no-repeat!important; background-position:center!important;*/}
			.article_img IMG {  position:relative; left:0px; border:0px none; margin:0;  width:100%;   }
	


/* Artikeldarstellung */


	div.art_desc_cont { width:100%;  float:left; clear:both; margin:0 0; padding:1em 0 0;}

		H3.product-name {
			width: 100%;
			overflow: hidden;
			font-size: 1.0em;
			line-height:1.2em;
			overflow:hidden;
			font-weight: 300;
			padding: 0;
			color: #232323;
			/* font-family: 'Source Sans Pro', sans-serif; */
			text-transform:none;
			text-align:left}
			
			.product-name A {color: #232323; font-weight:300;}
			a:hover span.fn {}		

			
		.articles div.price_cont { font-weight:500; color:#957460; font-size:1.1em; text-align:left;width:100%; display:block;}
		.articles div.price_cont a { width:100%; height:100%; position:absolute; display:block; top:0;  left:0}
		div.price_cont i { width: auto;text-align: right;margin: -30px 0 0; display:none;	float: right;color: #957460;font-size: 1.7em;transition: all ease .3s; }
	
			.price_cont span.strike { color: #999; text-decoration:line-through; font-size:.8em;font-weight: 300; }		
			.price_cont small  { font-size:13px; color:#555 }
				
			span.price, 	
			span.price_ad {
					clear:both;
					display:block;
					width:100%;
					font-weight:400;
					font-size: 1.1em;}

		
			span.pred {color:#957460; font-size:22px; font-weight:500}
			
			div.zusatz {
				float:left;
				width:120px;
				height:50px;
				color:#808080;
				font-size:10px;
				position:relative;top:10px;
				font-style:italic}

				
		span.stock { color:green; font-size:0.8em; }
		.stock:before { display:inline-block; content:" ";  background: linear-gradient(rgb(153, 204, 51), green); width:14px; height:14px;border-radius:50%; margin-right:5px; box-shadow:0 0 2px #555;  position:absolute; top:10px; right:10px; }
	
				
/*-----------------------------------------------------------------------------------------------------------------------------------------*/

	.page-items {
		 /* position:absolute; top:15px; left:0; width:300px; */
		 float:left;
		 text-align:left; 
		 overflow:hidden;
		 position:relative;
		 background:none;
		 line-height:50px;
		 margin:0;
		 top:-40px;
	}
	
	
	.page-items select, .product-sort select, .page-items option {	}


/* ------- Sortierung & Filter ------------*/

	#pitems { float:left; width:100%; padding:2%; position:relative; }

	.sortItems, .showFilter  {position:absolute; top:8px; right:0; width:100px; padding:5px 10px 5px 10px; background:none; cursor:pointer;  font-size:1em;  z-index:4;  margin-right:10px; box-shadow: 0px 0px 3px #ccc; }
	.showFilter { right:90px; width:80px; display:none; }
	.showFilter:before{ content:"filtern ";  font-size:0.7em; margin-right:5px; }
	.showFilter:after {  content: "\f0b0"; font-family:'FontAwesome'; }
	.showFilter.activeBtn { background:#957460; color:#fff; box-shadow: 1px 1px 5px #ccc;}
	
	.sortItems:hover, .showFilter:hover { /*background:#565353;*/ /* color:#fff; */ box-shadow: 1px 1px 5px #ccc;}
	.sortItems:before{ content:"sortieren ";  font-size:0.7em; margin-right:5px; }
	.sortItems:after {  content: "\f15d"; font-family:'FontAwesome'; }
	
	.sortItems #sortTitle {  display:none; line-height:100%; }
	.sortItems UL { list-style-type:none; margin:0; padding:0;  width:200px;  position:absolute; right:0; top:34px; display:none; border:0px solid #c0c0c0; border-radius:0 0 3px 3px; box-shadow: 1px 4px 5px #ccc; overflow:hidden; }
	.sortItems.active UL { display:block; }
	.sortItems UL LI { float:left; width:100%; color:#fff; background:#fff; color:#555; margin:0; padding:5px 5px 5px 10px; box-sizing:border-box; box-sizing:border-box; font-size:12px; }
	.sortItems UL LI[data-selected="1"], 
	.sortItems UL LI:hover { float:left; width:100%; color:#fff; background:#957460; color:#fff; }
	
	
	/* div#sortwrp { float:right;  position:relative; margin:10px 0 0 10px; }
	div#selpageitems { float:right; position:relative;  margin:10px 0 0 20px; }
	span#sortval { margin:0 200px 0 0; line-height:50px; } 
	span#bgselsort, span#bgselpitems {  border:1px solid #ececec; background:#fff; color:#818181; border-radius:5px;height:50px; line-height:50px;width:180px;  padding:0 15px; display:block;
	position:relative;
	top: 0;
	right: 0;
	float:right;}
	span#bgselsort{ position:absolute}
	
	select#selsort, select#selpitems { position:absolute; cursor:pointer;  z-index:2;height:50px; line-height:50px;width:210px;  padding:0 15px; top:0; right:0;
	opacity: 0;filter: alpha(opacity = 0); background:#fff; border:none; }
	#sortwrp::before,
	#selpageitems::before {content: "\F078";font: normal normal normal 16px/1 FontAwesome; position:absolute; right:10px; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); background:#ececec; color:#fff; 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; z-index:1}
	#sortwrp:hover::before,
	#selpageitems:hover::before {background:#957460; color:#fff}
	#selsort option, #selpitems option { padding:0 15px;font-size:0.9em; background:#fff;} */

	.totop	 {float:left; margin-top:15px; margin-left:10px}

	#content_hl {	float:left; margin:10px 0 20px;  width:100%; border-bottom:2px solid #ececec; padding:0 0 20px 0; font-size:0.9em;	}
	#content_hl_center { float:left;width:100%;	}

	#content_bl {float:left;width:100%;	}
	#content_bl_center {float:left;width:100%; text-align:center; padding-bottom:20px; }

	div.product-navigation { float:none; }


 /*-- Kategoriebeschreibung --*/


	#cat-image	{ float:right;  width:100%; text-align:right; overflow:hidden; margin:0 0 0 0;}
	#cat-image img	{ }

 	div#cat-l {
  			float:left;
  			width:230px;
  			background:; 
  			margin-bottom:20px }

	#cat-l IMG {
			margin-left:20px;
			margin-bottom:15px  }

	
	/*H2.cat-headline2	{ color:#818181; background:#ececec;font-size:1.4em; margin:0 0 0 0; padding:10px 30px;}*/
	.cat-headline2	{ width:100%; color:#957460; font-size:2.4em; margin:0 0 0 0; padding:10px 30px; text-align:center; font-weight:normal; }
	
	
	.cat-headline SPAN { font-weight:normal; }

	#cat-wrapper 	{ float:right; clear:both; position:relative; margin:15px 0 0 0; padding:0 0 0 0;}
	#cat-description H1 { font-size:2em; text-align:left; font-weight:500; line-height:1.1; }
	#cat-description H2 { font-size:1.6em; text-align:left;}
	#cat-description H3 { font-size:1.5em; text-align:left;}
	#cat-description p { margin:10px 0}

	#cat-description { 
		 clear:both; order:2;
		/*  max-width:970px;  */
		 padding: 20px 0;
		 margin:0 auto;}
		 
		 #cat-description LI.product{	width: 37.99%;  }
		 #cat-description div.product { width:23%;margin: -28% 1% 4rem; float:right; position:relative; z-index:99}
		 #cat-description div.article_img a{ display:block; position:relative }
		 
		 
	.code { width:90%; background:#f9f2f4; border:1px solid #ccc; color:#555; padding:1rem; margin:15px 0; overflow:hidden}
	code { color:#555;}
	
/*--------- Filter ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

#product-wrapper #outerFilterWrapper { float:left; position:relative; top:0; width:320px; }



#filters {  width:100%;padding:1em 1em; margin:0; float:left; }
#filter-wrapper {width:100%;  float:left; /* box-shadow:1px 1px 5px #ccc;  border-right:2px solid #ccc; */ }

#mobileFilter { position:fixed; top:0; left:0; z-index:2001; width:100%; height:100%; background:rgba(0,0,0, 0.5);  overflow-y:auto; text-align:center; padding:1em; box-sizing:border-box; display:none; }
#mobileFilter.active { display:block; }
/* #mobileFilter h2:after { content:"Trauringe filtern"; }
 */
/* #mobileFilter #filter-wrapper { display:block; }
#mobileFilter .filterButtons  { float:left; width:100%; margin:0;  padding:0 1em 1.2em 1em; }
#mobileFilter .filterButtons button  { margin:0;  padding:10px; box-sizing:border-box }
#mobileFilter .filterButtons button.setFilter  { float:right;  display:block; }
#mobileFilter .filterButtons button.setFilter:before  { content:"\f0b0"; font-family:'FontAwesome'; margin-right:3px; }
#mobileFilter .filterButtons button.resetFilter  { float:right; margin-right:2%; }
#mobileFilter #precountItems { float:left; display:none; } */

/* #filter-wrapper { display:block; } */
/* .filterButtons  { float:left; width:100%; margin:0;  padding:0 1em 1.2em 1em; } */
/* .filterButtons button  { margin:0;  padding:10px; box-sizing:border-box } */
.filterButtons button.setFilter  { float:left;   display:inline-block; }
.filterButtons button.setFilter:before  { content:"\f0b0"; font-family:'FontAwesome'; margin-right:3px; }
.filterButtons button.resetFilter  { float:right; margin-right:0; }
 #precountItems { float:left; display:none; }



#closeFilter { text-align:right; font-size:0.7em; color:#555; width:100%; float:right; }
#closeFilter:after {  float:right; display:block; width:40px; height:35px; background:#555; text-align:center; color:#fff; content: "\f00d"; font-family:'FontAwesome'; font-size:1.5em; padding:5px 0 0 0; cursor:pointer; }

.filterButtons 		{  float:left;width:100%; padding:5px 1em 1em 0; font-size:.8em; }
.filterButtons button { float:left; margin:0;  border:0; background:#957460; color:#fff;  height:40px; line-height:20px; padding:8px; border-radius:3px; font-size:1.0em; }

.setFilter { display:none; }

.resetFilter { background:#f0f0f0;}
.resetFilter:before  { content:"\f0e2"; font-family:'FontAwesome'; margin-right:5px; }





#filter-wrapper div.sidebarFilter { float:left; width:12%; min-width:100%; margin:5px .5% 5px 0; border-radius:4px; box-sizing:border-box; padding: 5px 15px 15px 15px; background:#fff; }
#filter-wrapper div.sidebarFilter strong { float:left; width:100%; text-align:left; margin:0; position:relative;padding:0px; font-weight:500; font-size:.9em; /* background:#fff */}
#filter-wrapper::after {content: "";clear: both;display: table;}

.checkboxFilter { float:left; width:100%; margin:1em 0 0}
.checkboxFilter li { list-style:none; margin:0;font-size:0.8em; font-weight:bold}

/* Multiselect- Filter */

UL.multiselectFilter { float:left; width:100%; margin:0; list-style-type:none; background:#fff; /*height:100px; overflow-y:auto; resize: vertical; */}
.multiselectFilter LI  { float:left; width:100%;  margin:0; text-align:left; box-sizing:border-box; }

/*.multiselectFilter LI :hover { float:left; width:100%;  margin:0px; text-align:left; box-sizing:border-box; background:red; }*/

#filter-wrapper div.sidebarFilter UL.multiselectFilter LI A { float:left; width:100%; padding:3px;  margin:0; text-align:left; font-size:0.7em; color:#555; background:none;  }
/* #filter-wrapper div.sidebarFilter UL.multiselectFilter LI A:hover {  background:gold; } */
#filter-wrapper div.sidebarFilter UL.multiselectFilter LI .checkbox {  border:1px solid #957460;  }
#filter-wrapper div.sidebarFilter UL.multiselectFilter LI .checkbox.checked {   background:#957460; }
#filter-wrapper div.sidebarFilter UL.multiselectFilter LI.nav-active A { float:left;  width:100%; text-align:left; font-weight:500;  /*color:#fff;  background:#957460; */ } 
#filter-wrapper div.sidebarFilter UL.multiselectFilter LI.nav-active A span.checkbox::before {   content: "\f00c"; font-family:'FontAwesome'; color:#fff; font-size:16px; position:relative; left:-1px; top:-7px; }


/* Image- Filter */

#filter-wrapper div.sidebarFilter UL.imageFilter { margin:0}
#filter-wrapper div.sidebarFilter UL.imageFilter LI  { float:left; clear:left; width:100%;  display:inline-block; margin:0; padding:0; }
#filter-wrapper div.sidebarFilter UL.imageFilter LI A { display:inline-block; width:100%; height:100%;  overflow:hidden;  padding:3px; float:left;font-size:.7em; line-height:1em;   box-sizing:border-box;}
#filter-wrapper div.sidebarFilter A:hover {background: #957460;color: #fff; }
#filter-wrapper div.sidebarFilter UL.imageFilter LI A IMG{ max-width:20px; max-height:100%; margin:3px 5px 0 0; float:left }
#filter-wrapper div.sidebarFilter UL.imageFilter LI A span.imgFilterCode { display:inline-block; width:20px; height:20px; float:left; box-sizing:border-box; margin:3px 5px 0 0 }
#filter-wrapper div.sidebarFilter UL.imageFilter LI.nav-active A { float:left;  padding:3px; background:#DDBA78; box-sizing:border-box;}

#filter-wrapper div.sidebarFilter UL.imageFilter LI A span.imgFilterTxt { margin:5px 0 0; display:inline-block}

/* Checkbox- Filter */

#filter-wrapper div.sidebarFilter UL.checkboxFilter { margin:0; margin-top:7px; }
#filter-wrapper div.sidebarFilter UL.checkboxFilter LI  { float:left; width:100%;  margin:0px; text-align:left }
#filter-wrapper div.sidebarFilter UL.checkboxFilter LI A { float:left;  width:100%; padding:3px; font-weight:normal;}
#filter-wrapper div.sidebarFilter UL.checkboxFilter LI.nav-active A { float:left;  width:100%;  color:#fff; background:#957460;}

#filter-wrapper span.checkbox { float:left; display:block-inline;width:19px; height:19px; border:1px solid #c0c0c0; padding:2px; margin:3px 5px 0 0; position:relative; box-sizing:border-box}
#filter-wrapper .checkbox IMG { max-width:12px; max-height:12px; position:relative; top:-5px; display:none}
#filter-wrapper LI.nav-active A {float: left;width: 100%;text-align: left;color: #fff; background: #957460;}
#filter-wrapper LI.nav-active A span.checkbox::before{   content: "\f00c"; font-family:'FontAwesome'; color:#fff; font-size:16px; position:relative; left:-1px; top:-9px; }
/* .offerFilter LI.nav-active A span.checkbox::before{   content: "\f295"; font-family:'FontAwesome'; color:#fff; font-size:16px; position:relative; left:-1px; top:-9px; }
#filter-wrapper div.sidebarFilter UL.checkboxFilter.newFilter LI.nav-active A {   background:green; } */


/* Availability Filter */

#filter-wrapper div.sidebarFilter UL.checkboxFilter.availabilityFilter { margin:0; margin-top:7px; }
#filter-wrapper div.sidebarFilter UL.checkboxFilter.availabilityFilter LI  { float:left; width:100%;  margin:0px; text-align:left }
#filter-wrapper div.sidebarFilter UL.checkboxFilter.availabilityFilter LI A { float:left;  width:100%; padding:3px; font-weight:normal; font-size:0.9em;}
#filter-wrapper div.sidebarFilter UL.checkboxFilter.availabilityFilter LI.nav-active A { float:left;  width:100%;  color:#957460; background:none; font-weight:500; /* background:#957460; */}



#filter-wrapper .availabilityFilter span.checkbox { float:left; display:block-inline;width:21px; height:21px; border:0px solid #c0c0c0; padding:2px; margin:3px 5px 0 0; position:relative; box-sizing:border-box; border-radius:50%; background:linear-gradient(rgb(153, 204, 51), green); }

#filter-wrapper .checkbox IMG { max-width:12px; max-height:12px; position:relative; top:-5px; display:none}
/* #filter-wrapper LI.nav-active A {float: left;width: 100%;text-align: left;color: #fff; background: #957460;} */
#filter-wrapper .availabilityFilter LI.nav-active A span.checkbox::before {   content: "\f00c"; font-family:'FontAwesome'; color:#fff; font-size:16px; position:relative; left:0px; top:-7px; }




/* Range Filter */

#filter-wrapper div.sidebarFilter.rangeFilter,
#filter-wrapper div.sidebarFilter.priceFilter { padding:5px 15px 15px 15px; background:#fff; }

#filter-wrapper div.sidebarFilter.rangeFilter strong,
#filter-wrapper div.sidebarFilter.priceFilter strong {  background:none;  padding:0;  margin:0; }
#filter-wrapper div.sidebarFilter.rangeFilter strong:after,
#filter-wrapper div.sidebarFilter.priceFilter strong:after {  display:none; }

.min-range, .max-range { display:inline-block; font-size:0.7em; max-width:50%; overflow:hidden;}
.min-range { }
.max-range { float:right; }

/* Schieberegler Range */
.ui-slider-horizontal { height: 0.5em; }
.ui-widget-header { background:#957460; }
.ui-slider .ui-slider-handle { width:0.8em; top:-9px; }


#resetButtons { float:left; width:100%; display:none; }
#resetButtons span { display:inline-block; padding:1px 6px 1px 6px; font-size:0.8em; margin-right:10px; }
#resetButtons span.resFilter { display:inline-block; padding:1px 6px 1px 6px; background:#f0f0f0; font-size:0.7em; margin-right:10px; }
#resetButtons span.resFilter:hover { background:#957460; color:#fff; cursor:pointer; }
#resetButtons span.resFilter:before {  content: "\f00d"; font-family:'FontAwesome'; margin-right:3px; }

form.filter { }

#loader { float:left; width:100%; height:100%;  background:rgba(255,255,255, 0.75); z-index:1000; }
	
	
	
	
/* Media Queries */
	
	@media screen and (max-width:1280px) {
	
		LI.product { width: 31.333%;}
	
	}
	@media screen and (max-width:1070px) {
		.showFilter { display:block; right:40px;  top:102px; right:42px;}
		.showFilter, .sortItems {  width:40px;}
		.showFilter:before, .sortItems:before { display:none;  }
		.setFilter { display:block;}
		
		#filter-wrapper, #outerFilterWrapper	{ float:left; width:100%; /* max-width:1375px; */ margin:0 auto 2em;  text-align:left; top:0;  }

		#product-wrapper #outerFilterWrapper { transition: transform .5s; transform: translateX(-350px); position:absolute; top:86px; }
		#product-wrapper #section-right { transition: transform .5s; width:100%; }
		
		/* #product-wrapper #outerFilterWrapper { top:86px; } */
		#product-wrapper.active #outerFilterWrapper { transform: translateX(0px);  top:115px; }
		#product-wrapper.active #section-right { transform:translateX(350px); }
		#outerFilterWrapper { position:absolute; left:0; top:0;}
		.page-items { top:-30px; }
		/* .sortItems, .showFilter { top:80px; } */
	}
	@media screen and (max-width:600px) {
		.cat-headline2 { font-size:1.5em;  padding:10px; }	
		.page-items { float:left; position:relative; width:100%; text-align:center; font-size:0.8em; top:0; line-height:25px; top:-50px; }
		.sortItems, .showFilter { top:0px; }
		.showFilter { right:unset; left:5px; top:75px; }
		#pitems { padding-bottom:50px; }
		div#section-right { margin:0; }
	}
	@media screen and (max-width:450px) {
		div#product-wrapper { margin-top:0; }
		#selpageitems, #sortwrp { display:none; }
		
	
	}