/*@import 'jquery.scrollbar.css';
@import 'pgallery.css';
*/

	
div#wrapper,
div#main-wrapper  { width:100%; max-width:none;}




div#breadcrumb { display:none;}
#contentwrp 	{ width:100%;max-width:none;}
#content, #contentstart {
	width: 100%;
	padding:0 0;}

.sb { position:absolute; margin:4% 0 0 0; max-width:70%; z-index:9;
	left: 100%;
	transform:  translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-moz-transform:  translateX(-50%);}

.flexbox {
	display: flex;
	box-pack: justify;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	margin:0 0 2% 0;}

.item  { float:left; width:19.5%;
/*	flex-basis: calc(25% - 1rem);
 -webkit-flex-basis: calc(25% - 1rem);*/
 box-sizing:border-box;
 margin:0 .25%;
 padding:30px 25px;
 position:relative;
 border-right:1px solid #eee;
}
.item:last-child { border-right:none;}

#innercontentwrp{ margin:0 0 0 0;}
#start-description { text-align:center; max-width:1250px; margin:0 auto; }
#start-description h2 {font-family: 'Fira Sans Condensed', sans-serif;font-size:1.5em;line-height:1.2em;  text-align:center; font-weight:500;}

#background {
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
	overflow: hidden;
	padding-bottom: 60%;
	width: 100%;
	height:0;
	position: absolute;
	z-index: -1;
	background:#fff/* url('../images/HG.jpg') center top no-repeat*/;
	background-size: cover;}
	
h2.slogan { padding:0 5% }

.products { background:#fef2d8;  margin:0.5% auto 2% auto;  width:100%; clear:both;}
.products  .inner {max-width:1250px; width:90%; margin:0 auto; padding:1.5% 0; box-sizing:border-box;}

#ankauf { background:#fef2d8;  margin:0 auto;  width:100%; clear:both;}
#ankauf  .inner-ankauf {max-width:1100px; width:90%; margin:0 auto; padding:3% 5%; box-sizing:border-box;}
#ankauf h2 { float:left; line-height:180px; margin:0}
#ankauf img { float:right; max-width:250px;}

#buttons {font-size: 1.5em; text-transform:uppercase;line-height: 1.2em; width:90%;max-width:1250px;margin:20px auto 100px auto;}

#buttons ul {
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	box-pack: justify;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	align-items: stretch;
	margin: 0 0 0 0;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;}
#buttons ul li { float:left; width:19%;
	/*flex-basis: calc(20% - 0.5rem);
 -webkit-flex-basis: calc(20% - 0.5rem);*/
 background:#fef2d8;
 border-radius:10px;
 text-align: center;
 box-sizing:border-box;
 list-style:none;
 margin:0 .5%;
 padding:15px 0 22%;
 position:relative;
 /*max-height:330px;*/
}
#buttons ul li .img { position:absolute; top:0; left:0; margin:0 0 0 0; background:url(../images/shadow.png) bottom no-repeat; background-size:90%; width:100%; height:100%; padding:0 0 25%/* height:510px;*/}
#buttons ul li .img img { position:absolute; top:14%; left:5%; width:90%;}
/*#buttons ul li img { position:absolute; left:50%;
	transform:  translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-moz-transform:  translateX(-50%);
	}*/


/*#buttons ul li{ float:left; list-style:none;width: 28%; margin: 0 4%; padding:0;}
#buttons ul li:first-child{margin: 0 4% 0 0; }
#buttons ul li:last-child{margin: 0 0 0 4%; }
#buttons .btn {
	float:left;
	background:#fef2d8;
	border-radius:15px;
	padding: 23px 0;
	font-weight: 500;
	text-align: center;
	width:100%;	
	box-sizing:border-box;
	display: inline-block;
	transition: all ease 1s;
	line-height:1em;}
	#buttons .btn:hover {}*/




/* Promoartikel, bei uns im Kiosk  ------------------------------------------------------------ */
/*  Scroll- Elemente .hproduct  müssen absolute Breite haben und und nicht mobil angepasst werden !!! */

#article-preview {
	clear:both;	
	float:left;
	width:100%;
	max-width:1250px; height:400px;
	margin:0px; 
	text-align:left;	
	z-index:3;}
	
	#art-start-wrapper {
		float:left;
		width:100%;	
		position:relative;
		margin:0px auto 0 auto; 
		/* padding-bottom:30px; */	
		text-align:left;	
		background:none	
	}
	
	

			.scrollable {
				float:left;
				position:relative;
				overflow:hidden;
				width:100%;
				margin:0 0 0 0;
				padding:0;
				background:none;
				height:100%;
				min-height:400px;
			}

				.scrollable .items {
					/* je breiter, desto besser */
					width:2000em;
					height:auto;
					position:absolute;
				}



/* Produkte im Slider stylen */
		div.hproduct { 
			float:left; width:287.5px; height:400px;  	
			overflow:hidden;
			margin:0 5px;
		}
		
		.hproduct:HOVER {  }

			div.product-img {  
				text-align:center;
				float:left; width:100%;
				background:none;
			}


			.hproduct H3 {
				float:left;
				width:100%;
				font-weight:400;
				font-size:1em;
				line-height:1.2em;	
				height:40px;
				margin-top:5px;
				overflow:hidden;
			}

			.hproduct A {}
			.hproduct A:HOVER {	text-decoration:underline;}

			/* Preiszusatz, ab */
				.zusatz {margin-top:5px;font-size:10px}
			
			/*Streichpreis Format */
				.pred { margin-left:5px; color:#fff }
				
			div.price_cont { display:none;/*float:left; width:100%; margin-top:5px; background:none;*/ }
			.price_cont small {	font-style:italic; color:#f0f0f0}
			span.strike {text-decoration:line-through; color:#c0c0c0 }


/* Format Buttons für Slider- Navigation */
	a.browse {
		float:left;
		display:inline-block;
		width:45px;	
		cursor:pointer;
		position:absolute;
		z-index:999;
		padding-top:15%;
	}


	a.browse-lg {
		float:left;
		display:block;
		height:60px;	
		cursor:pointer;
		font-size:1px;	
	}



/* right */
a.right				{ position:absolute;	right:-25px; margin:0 -45px 0 0; text-align:right} 
a.right::before{content: "\f138";font: normal normal normal 34px/1 FontAwesome;}
a.right:hover  		{  }


/* left */
a.left			{  position:absolute;	left:-25px; margin:0 0 0 -45px;  }
a.left::before {content: "\f137";font: normal normal normal 34px/1 FontAwesome;}
a.left:hover  		{ } 




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






/* Slider ----------------------------------------------------------------------*/
/*div#slider { width:100%; height:330px; position:relative }
#slider div.close { display:none }
div#gallery  { height:100%; background:none }
#gallery div.items { background:#000; }

.items div {
	background-size: auto 100% !important;
	height: 100%!important;
}

 #slider  	{ overflow:hidden; }
 #slider a.nav {transition: all 0.3s ease; background: rgba(49, 49, 127, 0.8); }
  #slider a.next { right:-60px;  }
  #slider a.prev { left:-60px;  }
 #slider:hover  a.next { right:20px;  }
 #slider:hover a.prev { left:20px;  }

div.hdtext 	{ position:absolute; left:0;top:0px;  width:43%; padding:8% 2% 0.5% 55%;  background:none!important;font-family: 'Black Ops One', cursive;  }
.hdtext h3	{ color:#58585c!important; text-transform:uppercase;font-family: 'Black Ops One', cursive; font-size:3.5em;  line-height:0.7em; margin:0 0 15% 0;}
.hdtext h3 span { font-size:0.63em;}
.hdtext p { font-size:1.3em;}
*/
@media screen and (max-width:1865px ) {
	
}

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

}
@media screen and (max-width:1640px ) {
	
}
@media screen and (max-width:1440px ) {
a.right	{right:0px;} 
a.left	{left:0px;  }

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

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

}
@media screen and (max-width:1300px ) {
div#main-wrapper { width:100%!important;}
}
@media screen and (max-width:1280px ) {
	#buttons {margin: 20px auto 50px auto;}
}
#buttons ul li .img { padding:0 0 20%}
}
@media screen and (max-width:1120px ) {
#buttons ul li {padding: 15px 0 20%;}
#buttons ul li .img { padding:0 0 25%}
}
@media screen and (max-width:1024px ) {
#buttons ul li {padding: 10px 0 21%;}
#buttons ul li .btn { font-size:2vw}

#article-preview {height: 350px;}
.scrollable {min-height: 350px;}
.products .inner {padding: 2.5% 45px;}
div.hproduct {width: 200px;height: 350px;}

.item {	width: 32.3334%;margin: 0 .5%;padding: 30px 3%;}

}
@media screen and (max-width:950px ) {
#buttons ul li {padding: 5px 0 21%;}
}
@media screen and (max-width:920px ) {



}
@media screen and (max-width:850px ) {
#buttons ul li {width:32.333%;	margin: 0 .5% 9vw;	padding: 15px 0 35%;}
	#buttons ul li:first-child,
	#buttons ul li:nth-child(2) {width:49%;padding: 15px 0 57%;} 
#buttons ul li .btn {font-size: 3vw;}
#buttons ul li .img {padding: 0 0 35%;}
	#buttons ul li:first-child .img,
	#buttons ul li:nth-child(2) .img {padding: 0 0 25%;}
	
#buttons ul li:first-child .img img,
#buttons ul li:nth-child(2) .img img {top: 8%;}
}
@media screen and (max-width:800px ) {
	#buttons ul li {padding: 15px 0 32%;}
#buttons ul li:first-child,
	#buttons ul li:nth-child(2) {padding: 15px 0 55%;}
	
	#article-preview {height: 280px;}
.scrollable {min-height: 280px;}
div.hproduct {width:150px;height:280px;}

#start-description h2 {font-size: 1.2em;line-height: 1.1em;}
}
@media screen and (max-width:700px ) {
#buttons ul li:first-child .img img,
#buttons ul li:nth-child(2) .img img {top:10%;}

.item {	width: 49%;}
}
@media screen and (max-width:660px ) {
	#buttons ul li {padding: 10px 0 30%;}
#buttons ul li:first-child,
	#buttons ul li:nth-child(2) {padding: 10px 0 53%;}
}
@media screen and (max-width:540px ) {
#buttons ul li,
	#buttons ul li:first-child,
	#buttons ul li:nth-child(2) {width:49%;padding: 15px 0 53%;}
	#buttons ul li .btn {font-size: 4.5vw;}
	#buttons ul li .img img {top:14% !important;}
	#buttons ul li .img,
	#buttons ul li:first-child .img,
	#buttons ul li:nth-child(2) .img {padding: 0 0 25%;}
}

@media screen and (max-width:400px ) {
#buttons ul li,
	#buttons ul li:first-child,
	#buttons ul li:nth-child(2) {padding:7px 0 51%;}

.item {	width: 100%;margin: 0 0; padding:30px 5%;border-right:none;border-bottom: 1px solid #eee;}


}
@media screen and (max-width:330px ) {
#buttons ul li,
	#buttons ul li:first-child,
	#buttons ul li:nth-child(2) {padding:5px 0 50%;}
	#buttons ul li .btn {font-size: 5vw;}
}

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


}