@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; display:flex; flex-wrap:wrap; }

div#section-right {
		position:relative;
		display:flex;
		flex-wrap:wrap;			 
		float:right;
		width: calc(100% - 300px);
		margin:0 0 0 0;
		padding:20px 0;
		box-sizing:border-box;
		order:2;
}

	#section-right .h1 { padding-left:30px; }

	div#products {  float:left; width:100%; }

	#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;
		 text-align:left;
		 width:23%;
		 border:0px solid #ccc;
		 border-radius:0px;
		 overflow:hidden;
	}
	

	LI.product:HOVER{ border:0px solid #96C11F;}

	span.newproduct {position:absolute; top:5px; left:0px;  z-index:1; width:50px; height:30px; line-height:30px; background:#96c11f; color:#fff; text-align:center}

		div.article_img	{
			 float:left;
			 width:100%;
			 margin:0 0 0;
			 overflow:hidden;
			 height:auto;
			 border:0px 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:10px 10px 20px 0px;}

		H3.product-name {
			width: 100%;
			overflow: hidden;
			font-size: 1.2em;
			line-height:1.2em;
			overflow:hidden;			
			padding: 0;
			color: #232323;			
			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; background:; color:#555; font-size:1.3em; text-align:left;width:auto; display:block;padding:8px;position:absolute; left:0; bottom:0;}
		.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: #96c11f;font-size: 1.7em;transition: all ease .3s; }
	
			.price_cont span.strike { color: #999; text-decoration:line-through; font-size:1em;font-weight: 300;/* display:block;width: 100%;*/ }		
			.price_cont small  { font-size:10px; color:#555 }
				
			span.price, 	
			span.price_ad {
					clear:both;
					display:block;
					width:100%;
					font-weight:400;
					font-size: 1.1em;}

		
			span.pred {color:#96c11f; font-size:1.3em; font-weight:700}
			
			div.zusatz {
				float:left;
				width:120px;
				height:50px;
				color:#808080;
				font-size:10px;
				position:relative;top:10px;
				font-style:italic}

/*-----------------------------------------------------------------------------------------------------------------------------------------*/

	.page-items {
		/*  position:absolute; top:15px; right:0; */ 
		width:auto;
		 text-align:left; 
		 overflow:hidden;
		 /* position:relative; */
		 background:none;
		 line-height:50px;
		 margin:0;
		 padding-left:30px;
	}
	
	
	.page-items select, .product-sort select, .page-items option {	}


/* ------- Sortierung & Filter ------------*/

	#pitems { width:100%; position:relative; order:0; padding-bottom:50px; padding-left:30px; }

	.sortItems, .showFilter  {position:absolute; top:8px; right:10px; width:95px; padding:5px 10px 5px 10px; background:none; cursor:pointer;  font-size:1em;  z-index:4;  margin-right:10px; box-shadow: 1px 1px 5px #ccc; border-radius:15px;}
	.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:#96c11f; 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 15px 15px; 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:#96c11f; color:#fff; }
	
	.sortItems.active {width:200px; border-radius:15px 15px 0 0; text-align:left;}
	
	
	
	/* 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:#96c11f; 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	{ color:#818181; 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 H2 { font-size:2.3em;line-height: 1em; text-align:left}
	#cat-description h3 {font-size:2em;line-height: 1em;} */
	#cat-description p { margin:10px 0}

	#cat-description {
		 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:300px; order:1; }



#filters {  width:calc(100%);padding:5em 2em 1em 0; 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:300px; 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:right;  display:inline-block; }
.filterButtons button.setFilter:before  { content:"\f0b0"; font-family:'FontAwesome'; margin-right:3px; }
.filterButtons button.resetFilter  { float:right; margin-right:2%; }
 #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:150px; height:100%; padding:1.33em 1.0em 1.33em 1.0em; font-size:1.0em; display:none; }
.filterButtons button { float:left; margin:0;  border:0; background:#96c11f; color:#fff;  height:40px; line-height:20px; padding:5px; border-radius:3px; font-size: .8em; }
.filterButtons button.setFilter { display:none; }

.setFilter { display:none; }

.resetFilter { background:#f0f0f0;}
.resetFilter:before  { content:"\f0e2"; font-family:'FontAwesome'; margin-right:5px; }





#filter-wrapper div.sidebarFilter { float:left; width:100%; /* height:160px; */ position:relative; /* resize:vertical; overflow:auto; */ margin:5px 1% 5px 1%; border-radius:4px; padding: 2px 15px 15px 15px; background:#fafafa; border:0px solid #ccc; }
/* #filter-wrapper div.sidebarFilter:first-child { margin: 5px 1% 5px 0; } */
/* #filter-wrapper div.sidebarFilter.selected { box-shadow:0 0 3px #96c11f; } */
#filter-wrapper div.sidebarFilter h5 { float:left; width:100%; text-align:left; margin:0; position:relative; left:0; top:0;  z-index:2; padding:0px; font-weight:500; text-indent:10px; font-size: 1.0em; line-height:2.5; color:#32414D; }
/* #filter-wrapper div.sidebarFilter h5:after { content:"\f0b0"; font-family:FontAwesome; position:absolute; right:5px; top:0px; color:#32414D; } */
#filter-wrapper div.sidebarFilter.selected h5:after { content:"\f0b0"; font-family:FontAwesome; position:absolute; right:5px; top:0px; color:#96c11f; }

#filter-wrapper::after {content: "";clear: both;display: table; }
#filter-wrapper div.sidebarFilter ul {/*position:relative;  left:0; top:39px; */ z-index:10; width:100%; /*box-shadow:0 0 5px #c0c0c0;  display:none; */ }
#filter-wrapper div.sidebarFilter:hover ul { display:block; }


.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:8px;  margin:0; text-align:left; font-size:0.8em; color:#555; background:none;  }
#filter-wrapper div.sidebarFilter UL.multiselectFilter LI A:hover {  background:#f0f0f0; }
#filter-wrapper div.sidebarFilter UL.multiselectFilter LI .checkbox {  border:1px solid var(--layout-first-contrast-color);  }
#filter-wrapper div.sidebarFilter UL.multiselectFilter LI .checkbox.checked, #filter-wrapper div.sidebarFilter UL.multiselectFilter LI A:hover  .checkbox {   background:var(--layout-first-contrast-color); }
#filter-wrapper div.sidebarFilter UL.multiselectFilter LI.nav-active A { float:left;  width:100%; text-align:left; font-weight:500;  /*color:#fff;  background:#96c11f; */ } 
#filter-wrapper div.sidebarFilter UL.multiselectFilter LI.nav-active A span.checkbox::before,
#filter-wrapper div.sidebarFilter UL.multiselectFilter LI A:hover  .checkbox::before {   content: "\f00c"; font-family:'FontAwesome'; color:#fff; font-size:16px; position:relative; left:-1px; top:-5px; }


/* Image- Filter */

#filter-wrapper div.sidebarFilter UL.imageFilter { margin:0; background:#fff; }
#filter-wrapper div.sidebarFilter UL.imageFilter LI  { float:left; width:100%;  display:inline-block; margin:0; padding:0; position:relative; }
#filter-wrapper div.sidebarFilter UL.imageFilter LI A { display:inline-block; width:100%; height:100%;  overflow:hidden;  padding:8px; float:left;/* font-size:.7em; */ line-height:1em;   box-sizing:border-box; color:#555; }
#filter-wrapper div.sidebarFilter A:hover {background: #f0f0f0; }
#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; background:#f0f0f0; }
#filter-wrapper div.sidebarFilter UL.imageFilter LI.nav-active:after { content: "\f00c"; font-family:'FontAwesome';  position:absolute; right:10px; top:5px; }

#filter-wrapper div.sidebarFilter UL.imageFilter LI A span.imgFilterTxt { margin:5px 0 0; display:inline-block}

#filter-wrapper #filter399 UL.imageFilter LI A span.imgFilterTxt { display:none; }
#filter-wrapper #filter399 UL.imageFilter LI  { width:45px; }


/* 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:#DDBA78}

#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: #DDBA78; */}
#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; } */


/* Range Filter */

#filter-wrapper div.sidebarFilter.rangeFilter,
#filter-wrapper div.sidebarFilter.priceFilter { padding:5px 15px 15px 15px; background:#fff; }

#filter-wrapper div.sidebarFilter.rangeFilter h5,
#filter-wrapper div.sidebarFilter.priceFilter h5 {  background:none;  padding:0;  margin:0; }
#filter-wrapper div.sidebarFilter.rangeFilter h5:after,
#filter-wrapper div.sidebarFilter.priceFilter h5: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:#96c11f; }
.ui-slider .ui-slider-handle { width:0.8em; top:-9px; }


#resetButtons { float:left; width:100%; /* display:none; */ }
#resetButtons span { display:inline-block; padding:1px 8px 1px 8px; font-size:0.8em; margin-right:10px; display:block; }
#resetButtons span.resFilter { display:inline-block; padding:3px 6px 3px 6px; background:#96c11f; color:#fff; font-size:0.9em; margin-right:10px; border-radius:3px; }
#resetButtons span.resFilter:hover { background:#D11315; 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:1400px) {
		LI.product { width:31%; }
	}
	
	
	@media screen and (max-width:1070px) {
		.showFilter { display:block; right:40px; }
		.showFilter, .sortItems {  width:100px; text-align:center; background:#fff; }
		.showFilter { right:125px; /* top:83px; */}
		.showFilter.activeBtn { right: calc(100% - 140px); transition: 1s;}
		
		/* .showFilter:before, .sortItems:before { display:none;  } */
		.setFilter { display:block; }
		/* #resetButtons { margin-top:60px;} */
		
		#filter-wrapper, #outerFilterWrapper	{ float:left; width:300px; /* 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:86px; }
		#product-wrapper.active #section-right { transform:translateX(350px); }
		#outerFilterWrapper { position:absolute; left:0; top:0;}
		
		#filter-wrapper div.sidebarFilter { padding: 15px;}
		
	}
	@media screen and (max-width:600px) {
		#cat-description { padding:20px;}
		#cat-description H1 {font-size:20pt;font-weight:500;}
		#cat-description H2 {font-size:20pt;font-weight:400;}
		#cat-description H3 {font-size:20pt;text-align:left; font-weight:300;}
		
		.cat-headline2 { font-size:1.5em;}
		.showFilter { right:unset; left: 20px;top:8px; }
		/* .showFilter.activeBtn { left:-30%; z-index:10;} */
		
		#pitems { padding-bottom:0;}
		
		.page-items { float:left; position:relative; width:100%; text-align:left; font-size:0.8em; top:0; line-height:25px;}
		LI.product { width:98%; margin-top:20px; }
		
		div#products {
			float: left;
			width: 100%;
			padding: 0 10px 0;
		}		
		#section-right .h1 { font-size:22pt;text-align:left; margin-top:50px;}
		
		
	/* 	.pagination { position:relative; }
		.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 .page-title, .pagination .page-links .count-pages { display:none;}*/
		
		
		
		
		
		
	}
	@media screen and (max-width:450px) {
		div#product-wrapper { margin-top:0; }
		#selpageitems, #sortwrp { display:none; }
		
	
	}
		 
