@import '../templates/slick/slick.css'; 
@import '../templates/slick/slick-theme.css'; 

*  {box-sizing:border-box;}

#wrapper, #main-wrapper, .main, main, #contentwrp, #innercontentwrp {height:auto!important; }

#mobileTrigger, #mobileSearch { color:#fff; }
#mobileTrigger i { display:block; background:none; border-top:3px solid #fff;  border-bottom:3px solid #fff; height:20px; position:relative; }
#mobileTrigger i:before { position:absolute; top:calc(50% - 1.5px); width:100%; height:3px; background:#fff; }
#mobileTrigger i:after { background: #404040; left: 0; bottom: -9px;  font-size:22px;}

div#suggSearch { margin-top:128px;}

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

div.header {position:absolute; background:rgba(16,16,16,.8); z-index:999}

.logo {	background: url(../images/footer-logo.png) no-repeat;background-size: contain;}

#menulist a {color: #fff;}
#menu-top .fa,  #search {color: #fff;}

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

section { clear:both;}

.search-wrp { position:absolute; top:50%; left:0; width:100%; transform:translateY(-45%); padding:1em;}
.search-wrp h2 { font-weight:700; color:#fff; margin:0}
.search-wrp h2 span { font-style:italic; font-weight:500; font-size:.6em; line-height:1em; display:block} 


	div#searchbar-2 { float:none; width:80%; max-width:900px; height:50px; background:#fff; border:1px solid #e0e0e0; margin:1em auto 0; box-sizing:border-box}
	.search-wrp .search_btn { float:right; height:50px; width:10%; font-size:1.7em;margin:0 0; color:#96c11f;}
	
	
	.search-wrp #psearch { width:90%; padding:0 0 0 1em; height:50px;color:#32414d;font-size:1.3em; float:left}
	
	
		#psearch:-ms-placeholder{color: #aaa; font-style:italic}
		#psearch:-moz-placeholder{color: #aaa; font-style:italic}
		#psearch::-webkit-input-placeholder{color: #aaa; font-style:italic}	
		#psearch::-moz-placeholder {color: #aaa; font-style:italic}
	

/* Slider Startseite */
	
#startslider { float:left; width:100%; height:50vw; background:#000; /* overflow:hidden; */ position:relative; z-index:0; }
#startslider img { width:100%; height:auto;}
#startslider .image-tab, #startslider .video-tab { position:relative;}


/* div#gallerywrapper { display:block; position:absolute; }
.shadow { content:''; display:block!important; position:absolute!important; width:100%!important; height:100%!important; background:rgba(0,0,0,0.4); z-index:1111} */

#section-slider { float:left; width:100%; height:30vh!important; overflow:hidden; position:relative; z-index:0; }
#section-slider .slide {height:50vh}
div#gallerywrapper { display:block; position:absolute; }

div.hdtext 	{background:none; margin:0% 0 0;  position:absolute; right:0;bottom:50%; transform:translateY(50%); -webkit-transform:translateY(50%);  width:45%; padding:1% 10% 1% 0; z-index:10; min-height:20px; color:#fefefe; box-sizing:border-box; text-align:center; }
.hdtext h2	{ font-size: 30pt; font-weight:300;text-transform: uppercase;color:#fefefe; font-family: 'Maven Pro', sans-serif;text-align:right;word-wrap: break-word;text-shadow:0 0 15px #111}
.hdtext h3 	{font-size:2vw;font-family: 'Maven Pro', sans-serif;text-align:center;color:#fefefe; margin:0 0 15px 0; font-weight:400;}
.hdtext p 	{ font-weight:300; font-size:18pt; line-height:1em; display:block}
.hdtext a 	{color: #fff; text-transform:none}

#startslider .imgLink { background:rgba(0,0,0,0.4);z-index:9999;}
#startslider .slick-prev { left:20px; }
#startslider .slick-next { right:20px; }
#startslider .slick-arrow { z-index:3; }
.slick-prev::before { content:"\f053"; font-family: FontAwesome; }
.slick-next::before { content:"\f054"; font-family: FontAwesome; }



.items div img {width: 100%;max-height: none;	max-width: none;	height: auto;	margin: 0 0 0 0;}
#startslider .thumbs {margin: 0 auto 0;position: absolute; bottom:10px; z-index:1110; width:100%; text-align:center;}
#startslider .thumb { width: 30px; display: inline-block; height: 10px; border-bottom: 5px solid #fff; margin: 0 3px; cursor: pointer; transition: all ease 0.5s; }

.thumb-selected { background:#fff }
#startslider div.close {display: none; }

#start-description { float:left; clear:both;font-size:1em; font-weight:300; position:relative; box-sizing:border-box; box-sizing:border-box; padding:0 0;width:100%;}

.about { background:#b19a8c; color:#fff}

#start-description .flexbox {
	display: flex;
	box-pack: justify;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	margin:0 auto;
	width:100%;
	text-align:center}

#start-description .flexbox-item { width:33%;  position:relative }
#start-description .flexbox-item:last-child { width:67%;border-left:5px solid #fff; }


.about { border-top:5px solid #fff; border-bottom:5px solid #fff}
.about img { width:100%}
.about p { font-style:italic; text-align:left; font-size:1vw; line-height:1.2em}
.about h3 { text-transform:uppercase; color:#2d1608; font-size:2.3vw; line-height:1em; letter-spacing:.4em; margin:0; text-align:right; }
.about h4 {text-transform:uppercase; color:#2d1608; font-size: 1em;line-height: 1.2vw; margin:0;letter-spacing:.23em; font-weight:300;text-align:right; margin:0 15px 0 0}
.about .txt-box { position:absolute; bottom:50%; right:50%; transform:translate(50%,50%); -webkit-transform:translate(50%,50%); }
.about a.pure-button { color:#2d1608;background: none;margin: 1em 0 0; padding:.5em 0;	text-transform: uppercase; font-style:normal; font-weight:900}

.accordion { display:inline-block; margin:1% 0 1% 0; line-height:40px; padding:5px 0 5px 30px;  cursor:pointer ; transition:all ease 0.3s; background:#f4f4f4; position:relative;
  width:25%;  border: none;
  text-align: left;
  outline: none;
 }

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 0;
  display: none;
  background-color: white;
  overflow: hidden;
}



section.products { position:relative}
section.products img{ width:100%}
section.products div { position:absolute; color:#fff; top:0; left:0; z-index:2; width:50%; font-weight:400; font-style:italic; font-size:1vw;line-height:1.2em; padding:5%;}
section.products .pure-button { background:none; margin:1em 0 0; text-transform:uppercase; color:#fff;font-style:normal; font-weight:900; padding:0}
section.products h1 {font-size: 1.5em; line-height:1em;color: #fff;}


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

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

	#article-preview .scrollable {
		float:left;
		display:flex;
		flex-wrap:wrap; align-items:stretch;
		position:relative;
		overflow:hidden;
		width:100% !important;
		margin:0px !important; padding:0;
		/* height:500px!important; */ background:none;
		border:0px solid #f0f0f0;
	}

	/* #article-preview .scrollable .more-pics-horizontal .items {
		width:20000em;
		position:absolute;
	} */

	#article-preview .scrollable a.nav { top: 25%; display:none; }
	#article-preview .scrollable:hover a.nav { display:block; }


	#article-preview { width:100%;max-width:1320px; padding:2vw 0 0; margin:0 auto 0 auto; text-align:center; }
	#art-start-wrapper { position:relative; float:left; width:100%;  margin:1em auto 2em auto; }
	/* #article-preview .items { background:none; border:0px solid #ccc; } */
	
	#article-preview .slick-arrow { 
		display:block; height:100%; max-height:40px; padding:20px;  background:rgba(255,255,255,0.8); box-shadow: 1px 1px 5px #c0c0c0; z-index:10; 
		position:absolute; top:50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		-ms-transform: translateY(-50%) translateX(-50%);
		-moz-transform: translateY(-50%) translateX(-50%);
	}
	
	#article-preview .slick-next { 
		transform: translateY(-50%) translateX(50%);
		-webkit-transform: translateY(-50%) translateX(50%);
		-ms-transform: translateY(-50%) translateX(50%);
		-moz-transform: translateY(-50%) translateX(50%);
	}
	
	#article-preview .slick-prev::before { content:"\f053"; font-family: FontAwesome; color:#555; }
	#article-preview .slick-next::before { content:"\f054"; font-family: FontAwesome; color:#555; }
	
	
	#article-preview .slick-arrow.pressed { box-shadow: 1px 1px 15px #c0c0c0; background:rgba(255,255,255,1.0); }
	#article-preview .slick-arrow:before {
		position:absolute; top:50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		-ms-transform: translateY(-50%) translateX(-50%);
		-moz-transform: translateY(-50%) translateX(-50%);
	}
	
	#article-preview .slick-prev	{ position:absolute; left:20px; z-index:10; }
	#article-preview .slick-next	{ position:absolute; right:20px; z-index:10; }
	
	.items div.price_cont{ height:100%!important}
	.hproduct small {font-size: 13px; display:block}
	.hproduct small br { display:none}

/* Formatierung der Promotion Artikel ----------------------------------------------------------------------------------------------------------*/
	
	
div.hproduct {	float:left; position:relative; width:100%; max-width:300px; margin:30px 15px 0; text-align:center; box-sizing:border-box; z-index:0; overflow:hidden; }

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

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

.hproduct A { color: #232323;text-decoration: none;  line-height:1.2em; } 
.hproduct A  IMG { width: 100%; height:auto; max-width:none; max-height:none; border:0px solid #ccc} 

.hproduct H3 {
	width: 100%; 
	overflow: hidden;
	font-size: 1em; 
	font-weight: 300;
	padding:1em 0 0 0;
	margin:0 0 10px;
	text-transform:none;
	letter-spacing:0;
	text-align:left;
}

.hproduct div { width:100%; text-align:left; display:block;}
.hproduct A.view  { display:none; 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;}
.hproduct A.view:hover { background-color: #96c11f; }
.hproduct .price_cont {font-weight:500; font-size:1.1em; }
.hproduct .price_cont span.strike { color: #999; text-decoration:line-through; font-size:.8em;font-weight: 300; }
.hproduct 	.price_cont small  { font-size:13px; color:#555 }

/* aktuelle Blogbeiträge */

#news {margin:0 auto;width:80%;max-width:1600px; padding:2%; }
#news h2 { margin:40px 0 60px 0; color:#2d1608; font-weight:500; font-size:2.3em; }

#news .scrollnews { width:100%;  height:105vh; display:block; position:relative; overflow:hidden; }
#news .items { background:none; }

#news h3 strong { font-weight:400;}
#news .slick-slide { height:unset;}
 #news .slick-track {
	display: flex !important; /*position:absolute; left:0; width:2000em;
	 height:100%;*/
	display: -webkit-flex;
	display: -moz-flex;
	box-pack: justify;	
	align-items: stretch;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	margin:40px auto 20px 0px;
	padding:0;
}
#news  .article { margin:0 .5rem 0 .5rem; padding:0;list-style:none; width:calc(33.333% - 0.5rem); position:relative; background:#fff; box-shadow: 0 0 5px #b19a8c; overflow:hidden; }
#news .news .article:hover {  }
#news h3 { margin:0; padding:30px 2rem; font-weight:500; text-align:left; font-size:20pt; }
#news h3 a { color:#2d1608;}
#news .introPic { position:relative;}
#news .article img { width:100%; }
#news .introPic a::before {
	content:' ';
	/* background:rgba(0,0,0,0.3); */
	width:100%;
	height:100%;
	display:block;
	position:absolute;	
	 transition:all ease 0.5s;
}

#news .introPic a:hover::before{background:rgba(0,0,0,0);}
#news p {  padding:20px 2rem; color:#2d1608;}
#news .more {background:#CB732B; color:#fff; font-size:16pt; height:50px; text-align:center; line-height:50px; position:absolute; right:0; bottom:0; padding:0 14px 0 14px; }
#news .more:hover { background:#555;}

#news .slick-arrow { 
		display:block; height:100%; max-height:80px; padding:20px;  background:rgba(255,255,255,0.8); box-shadow: 1px 1px 5px #c0c0c0; z-index:10;
		position:absolute; top:50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		-ms-transform: translateY(-50%) translateX(-50%);
		-moz-transform: translateY(-50%) translateX(-50%);
	}
	
	#news .slick-next { 
		transform: translateY(-50%) translateX(50%);
		-webkit-transform: translateY(-50%) translateX(50%);
		-ms-transform: translateY(-50%) translateX(50%);
		-moz-transform: translateY(-50%) translateX(50%);
	}
	
	
	#news .slick-arrow.pressed { box-shadow: 1px 1px 15px #c0c0c0; background:rgba(255,255,255,1.0); }
	#news .slick-arrow:before {
		position:absolute; top:50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		-ms-transform: translateY(-50%) translateX(-50%);
		-moz-transform: translateY(-50%) translateX(-50%);
		color:#555;
	}
	
	#news .slick-prev	{ position:absolute; left:20px; z-index:10; }
	#news .slick-next	{ position:absolute; right:20px; z-index:10; }







/* Media Queries */

@media screen and (max-width:1920px ) {
	.about p,  section.products div  {	font-size: 1em;	line-height: 1.2em;}
	.about h3 {	font-size: 2.3em;}
	.about h4 {	line-height: 1.2em;}
}
@media screen and (max-width:1600px ) {
	.element-5 h3 { font-size:2vw; letter-spacing:-.02em}
	#news { width:90%; }
		
}

@media screen and (max-width:1440px ) {
	div#suggSearch { margin-top:148px;}
	.marken div {padding: 0 1%;}		
}
@media screen and (max-width:1300px ) {
	.about .txt-box {width:70%}
	.about h3,.about h4 { text-align:left}
	.about p {text-align:left!important}
	
	h4 { font-size:1.1em;}
	#categorie h4{ padding: 20px 20px 15px;}	
	#news { width:96%; }
}
@media screen and (max-width:1279px ) {
	.printproducts h4 {font-size: 1.7em;}
	.thumbs { margin: 35% auto 0;}
	section.products div {	width: 60%;}
}
@media screen and (max-width:1200px ) {
	section.products div { padding:3%}
}
@media screen and (max-width:1180px ) {
	div#suggSearch { margin-top:90px;}
	section.products div {font-size: .9em; line-height:1.2em}
	/*#news ol.news li  { width:100%; flex-basis: calc(33.333% - 15px); -webkit-flex-basis: calc(33.333% - 15px); }*/
	/*@media screen and (orientation:landscape) {			*/
	#news .scrollnews { height:90vw; }
	#news .news .article { width:29.4vw; flex-basis:unset; -webkit-flex-basis: unset; /* margin:0 .5rem 40px 0; */ }
	#article-preview .scrollable {padding:2rem;}
	/*}*/
}
@media screen and (max-width:1024px ) {
	#background { background-attachment:scroll!important}
	#start-description .flexbox i.fa {font-size: 40pt;}
	#start-description .flexbox button i.fa {font-size: 25pt;}
	.hdtext h3{ text-shadow:0 0 10px #111}
	div.header {position:relative;	z-index: 999;}
	.hdtext h3 {font-size: 3vw;}
	.hdtext p {	font-size: 2vw;}
	#news .scrollnews { height:115vw; }
	#news .news .article { width:44.3vw; flex-basis:unset; -webkit-flex-basis: unset; margin:0 .5rem 40px 0.5rem; }	
	div.hproduct { max-width: calc(50% - 30px); margin: 30px 15px 0 15px;}
}
@media screen and (max-width:980px) {
	section.products h1 {font-size: 1.2em;line-height: 1em;}
	#news ol.news li  { width:100%; flex-basis: calc(50% - 15px); -webkit-flex-basis: calc(50% - 15px); margin-bottom:20px;  }
}

@media screen and (max-width:940px) {
	section.products div {width: 75%;padding: 3% 0 3% 3%;}
	.about .txt-box {width:90%}
	.about h3 {	font-size: 2em;}
	.about h4 { font-size:.9em;	line-height: .9em;letter-spacing: .20em;}

}
@media screen and (max-width:900px) {
	section.products div {background: #b19a8c; width:100%; padding:5%; margin:0 0 0; position:relative}
	section.products h1 {font-size: 1.4em;	line-height: 1em;}
}
@media screen and (max-width:860px ) {
	#categorie ol.news li { flex-basis: calc(50% - 1rem); -webkit-flex-basis: calc(50% - 1rem);}
	#categorie ol.news li:first-child { flex-basis: calc(100%);-webkit-flex-basis: calc(100%); margin:0 0 2rem;}
	.printproducts .more-print a i {font-size: 2em;}
	/*@media screen and (orientation:portrait) {			*/
			#news .scrollnews { height:110vw; }
			#news .news .article { width:44.3vw; flex-basis:unset; -webkit-flex-basis: unset; margin:0 .5rem 40px 0.5rem; }
	/*}*/
}
@media screen and (max-width:768px ) {	
	#start-description .flexbox-item {flex-basis: calc(100%); -webkit-flex-basis: calc(100%);margin:0 0 2rem;}
	#start-description .flexbox-item:last-child {border-left:none;}
	.about .txt-box {width:100%; padding: 0 5%;}
	.about .txt-box {
	position:relative;
	bottom: 0;
	right: 0;
	transform: translate(0%,0%);
	-webkit-transform: translate(0%,0%);}
	div.hdtext {width: 55%; padding: 1% 5% 1% 0;}
	.hdtext h3 {font-size: 4vw;}
	.hdtext p {	font-size: 3vw;}	
	#news .scrollnews { height:120vw; }
	#news .news .article { width:44.3vw; flex-basis:unset; -webkit-flex-basis: unset; margin:0 .5rem 40px 0.5rem; }
	
	@media (orientation:landscape) {
			#news .scrollnews { height:970px; }
			#news .news .article { width:46vw; flex-basis:unset; -webkit-flex-basis: unset; margin:0 .5rem 40px 0; }
	}
	
}

@media screen and (max-width:568px ) {
	#startslider {height:100vw; }
	#startslider .slick-prev, #startslider .slick-next { top:25%; }
	div.hdtext { top:52vw; width: 100%; padding: 1% 5% 1% 0; }

	.printproducts { overflow-x:hidden; }
	#categorie ol.news li { flex-basis: calc(100%);-webkit-flex-basis: calc(100%);margin:0 0 2rem;}

	.printproducts .flexbox .item {flex-basis: calc(100%); -webkit-flex-basis: calc(100%);margin:0 0 1rem;}
	.printproducts .more-print { position:relative;}

	#start-description .flexbox button {margin: 10px 0 0;}
	#start-description .flexbox button i.fa {font-size: 15pt;color:#e0e0e0;}
		
	.search-wrp h2 { font-size:2em !important;}
		
	.printproducts .flexbox .item {flex-basis: calc(100%);-webkit-flex-basis: calc(100%);margin: 0 0 1rem;}	
	.printproducts h4 {font-size: 2em;}
				
	#categorie ul li {flex-basis: calc(46%);	-webkit-flex-basis: calc(46%); margin:0 2% 1rem}

	#article-preview h2 { margin-top:20px; }
	#article-preview .scrollable { height:auto !important; width:100% !important; padding:20px;}
	#article-preview .scrollable .items { position:relative; left:0 !important; width:100%; display:block; padding:20px; }
	#article-preview .browse { display:none !important;}
	div.hproduct { margin:0; width:100%; max-width:100vw;}
	div.price_cont { padding-bottom:30px; }
	#news { width:100%; padding:1%; }
	#news .prev { left:8px; }
	#news .next { right:8px; }
	
	/*@media screen and (orientation:portrait) {			*/
	#news .scrollnews { height:175vw; }
	#news .news .article { width:95vw; max-width:unset; flex-basis:unset; -webkit-flex-basis: unset; margin:0 .5rem 40px .4rem; }
	/*}	*/
}
@media screen and (max-width:480px ) {
	.search-wrp #psearch {width: 80%;}
	.printproducts h4 {font-size: 1.5em;}

	#startslider .video-tab, #startslider .image-tab { height:100vw; }
	
   div.hdtext {width:100%;	padding: 1% 2% 1%; text-align:center; -webkit-transform:unset; }
	.hdtext h3 {font-size: 5vw;}
	.hdtext p {	font-size: 4vw;}
	.about h3 {font-size: 1.7em;}
	.about h4 {	letter-spacing: .09em;}
	.thumbs { display:none }
	#news .scrollnews { height:225vw; }
	#news .slick-track { margin: 40px auto; }
	#news .article { max-width:100vw;}
}

@media screen and (max-width:380px ) {
	.about h3 {font-size: 1.5em;}
	.about h4 {	letter-spacing: .07em; font-size:.8em}
	.search-wrp h2 { font-size:1.7em !important;}
	#categorie ul li {flex-basis: calc(100%);	-webkit-flex-basis: calc(100%); margin:0 0 1rem}
	.hotline h2 { font-size:30pt; }
	.hotline h3 { font-size:22pt; }
		#news .scrollnews { height:140vh; }
}
@media screen and (max-width:330px ) {
	.hotline h2 { font-size:28pt; }
	.hotline h3 { font-size:20pt; }
}