@import url('normalize.min.css');
@import url('font-awesome.min.css');
@import url('jquery-ui.min.css');
@import url('magnific-popup.css');
@import url('shop.css');

/* Layout */
body { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; padding:10px;flex-flow: row wrap; max-width:1000px;font-size:1.0em; line-height:130%; font-family:'Trebuchet MS', sans-serif;  background: url(/assets/Styles/img/bg.png) repeat-x; background-color: #7b002d; color:#000; margin: 0 auto;}
footer, header, main, aside { background:#f5f5f5;}
footer, header { text-align:center; }

footer a{ color:#fff!important; }

aside{/*-webkit-flex: 1 1 0%; flex: 1 1 0%;*/ padding-top: 1.5em; margin: 0 auto; width: auto;background: transparent url(/assets/Styles/img/bg_content.jpg) repeat left top scroll;}
header {min-height: 285px; padding-bottom: 0px; display: flex; flex-flow: row wrap; justify-content: space-around; flex: 100%; background-size: cover; background: transparent url(/assets/Styles/img/header.jpg) repeat left top scroll;}
main{-webkit-flex: 2 1 0%; flex: 2 1 0%; padding-top: 0; padding-left: 1em; padding-right: 1em;}
footer{width: 100% !important; background-color: #7b002d; color: #fff; }
section#bottom{width: 100% !important; height:60px;background-color: #7b002d; background: transparent url(/assets/Styles/img/bg_content.jpg) repeat left top scroll; margin:0px; padding:0px; padding-top:1em }
section#top{width: 100% !important; height:40px;margin:0px; padding:0px; }
section.sidebar{background:transparent url(/assets/Styles/img/board_middle.png)repeat-y}
.leftNav{width:280px;}
#cart-summary{width:250px;}
nav{background: transparent url(/assets/Styles/img/board_middle.png)repeat-y}
nav#nav-meta {background: none;}
#rightcol table tr td img{width:100%; max-width:300px; height:auto;margin-top:10px}
.fa >.fa-shopping-cart> .badge{color:#000!important;}
figure { margin:0.66em 1.33em; background-color:#ddd;}
figcaption { padding:.1em .33em; font-size:small; }

shoptile{width:600px!important; }

/* Tags */
h1			{ font-size:1.286em; font-family:'Trebuchet MS', sans-serif; color:#7b002d; }
h2			{ font-size:125%; }
h3			{ font-size:100%; }
a:link,		
a:visited	{ color:#000; font-weight: bold; text-decoration:none!important; }
a img		{ border:none; text-decoration:none; }
th 			{ text-align:left; }
textarea,
input,
select		{ font-family:'Trebuchet MS', sans-serif; font-size:100%; }
form 		{ display:inline; }

/* Background */
main{
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent url(/assets/Styles/img/bg_content.jpg) repeat left top scroll;
}

.txtbtn {
  background: #95ab74;
  background-image: -webkit-linear-gradient(top, #95ab74, #87a061);
  background-image: -moz-linear-gradient(top, #95ab74, #87a061);
  background-image: -ms-linear-gradient(top, #95ab74, #87a061);
  background-image: -o-linear-gradient(top, #95ab74, #87a061);
  background-image: linear-gradient(to bottom, #95ab74, #87a061);
  color: #ffffff;
  font-size: 1.2em;
  padding: 10px 20px 10px 16px;
  text-decoration: none;
	border:none;
}

.txtbtn:hover {
  background: #7b002d;
  background-image: -webkit-linear-gradient(top, #6c1939, #7b002d);
  background-image: -moz-linear-gradient(top, #6c1939, #7b002d);
  background-image: -ms-linear-gradient(top, #6c1939, #7b002d);
  background-image: -o-linear-gradient(top, #6c1939, #7b002d);
  background-image: linear-gradient(to bottom, #6c1939, #7b002d);
  text-decoration: none;
}

/* Bottom Corners */
#rightcol {padding: 0.5em; margin: 0.2em; border: 0.1 em;}
#corner_left{align-self:flex-end; }
#corner_right{float: right;}

img{vertical-align: bottom;}/*entfernt spalt zwischen Grafiken*/

/* Navigation ------------------------------------------------------------------ */
nav ul { list-style-type:none; display:block;}
#nav-main { z-index:1000;}
#nav-main > a { display:none; text-decoration:none; color:#000; }
#nav-main li { position:relative;}
/* first level */
#nav-main > ul { display:inline-block; padding-left: 1em;}
#nav-main > ul > li { height:100%;text-align:left; z-index:1000; }
/* second level */
#nav-main li ul {display:none; position:absolute; top:0; left:100%; background-color:cyan; min-width:100%;}
#nav-main li a {display:block; padding:0.33em 0.66em; background:transparent url(/assets/Styles/img/bg_nav.png) no-repeat left top scroll; }
#nav-main li a.selectedvisible{  display:block; padding:0.33em 0.66em; background:transparent url(/assets/Styles/img/bg_nav_active.png) no-repeat left top scroll; }
#nav-main li:hover {z-index:100000;  }
#nav-main li:hover>ul {display:block;}
#nav-main > ul > li > ul {top:100%; left:0;}

.fa-navicon::after {
    content: 'Navigation';
    font-family: 'Trebuchet MS', sans-serif;
    margin-left: 10px;
    font-size: 0.8em;
    font-weight: bold;
	color:#fff;
}
.fa{
	color:#000;
}
section#top nav ul li a{color:#000;background-color:rgba(255, 255, 255, 0.6); padding:0.5rem;}
@media only screen and (max-width:1040px) {
header {width:calc(100vw-20px); height:27.6vw;background-size:contain;min-height: 0px;background-repeat:no-repeat}
}
@media only screen and (max-width:900px) {
	body{display:block}
	.leftNav{width:100%;display:flex;justify-content:space-between;}
	.leftNav img{display:none}
	nav { text-align:left;background:none;order:1;}
	aside{padding-top:0px;background:none;background-color:#7b002e}
	section.sidebar{background:none;order:2;}
	.fa{
	color:#fff;
}

header {width:calc(100vw-20px); height:28.7vw;background-size:contain;min-height: 0px;}
	#cart-summary a{color:#fff}
	#rightcol{margin-bottom:0;}
	#nav-main { position:relative; min-height: auto; padding: 0.3em; width:100%;}
	#nav-main ul { margin:0; padding:0;}
	#nav-main > a { color: #000;}
	#nav-main:not( :target ) > a:first-of-type,
	#nav-main:target > a:last-of-type { display: block; font-size: 1.5em;}
	/* first level */
	#nav-main > ul { height:auto; display:none; position:absolute; left:0; right:0; background-color:#fff; padding-left:0; }
	#nav-main:target > ul { display:block;}
	#nav-main > ul > li {float:none;}
	#nav-main > ul > li:first-child {}
	/* second level */
	#nav-main li ul { position: static; }
	#nav-main li a {margin: 0 0 0 0  ;background-repeat:repeat-x;}	
	#nav-main li a.selectedvisible{background-repeat:repeat-x;}	
}

section#top #nav-meta ul { display:block; width:auto; text-align:right; margin-bottom:0.99em;margin-right:0.5em}
#nav-meta ul { display:block; width:auto; text-align:center; margin-bottom:0.99em;}
#nav-meta ul li { display:inline-block;}
#nav-meta ul li:after { content:"|" }
#nav-meta ul li:last-child:after { content:"" }
#nav-meta li a { padding:0 0.66em; font-size:0.8em; color: #fff; text-decoration:none!important;}
#nav-meta li a.navlevel2 {text-decoration:none!important;}

/* Navigation ends ------------------------------------------------------------- */

/* Common classes */
/* formatting for sliders */
div.slider { display:none }
div.unslider { position: relative; width:100%; overflow:show; padding-bottom:20px;margin-bottom:1.33em }
div.unslider ul { list-style: none; padding: 0; margin: 0 }
div.unslider ul > li { float:left; position:relative; padding: 0; margin:0; width:100%; height:282px; background-size: cover; text-align:center; display:block }
div.unslider ul > li > a > div, div.unslider ul > li > div { position:absolute; bottom:0; left:0; top:0; right:0 }
div.unslider ul > li > a > div > div, div.unslider ul > li > div > div { position:absolute; bottom:0; padding:0.5em 0; width:100%; background-color:rgba(255, 255, 255, 0.7); color:#000 !important; font-size:150% }
div.unslider a { text-decoration:none }

div.unslider .dots { position: absolute; left: 0; right: 0; bottom: 0px; padding: 0; margin: 0; text-align:center; }
div.unslider .dots li { display: inline-block; width: 8px; height: 8px; margin: 0 4px; text-indent: -999em; border: 2px solid #fff; border-radius: 6px; cursor: pointer; opacity: .4; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s; }
div.unslider .dots li.active { background: #fff; opacity: 1; }

/* form error classes used by µCMS and shop */
div.error-formfield, p.error-formfield { color:#d13d1b; font-weight:bold; display:none; }
span.error-formfield, label.error-formfield, td.error-formfield, input.error-formfield, textarea.error-formfield, select.error-formfield { background-color:#fddfdf; }
.error-message { color:#f00;font-weight:bold; }

/* square boxes 
.tiles-list { float:left; width:25%; }

.square { position:relative; width: 100%; }
.square:before { content: ""; display:block; padding-top:100%; }
.square > div { position:absolute; top:5px; left:5px; right:5px; bottom:5px; overflow:hidden }
.square > div > div { position:absolute; top:5px; left:5px; right:5px; bottom:5px; overflow:hidden; background-color:#fff; }
.square > div > div a { color:#000; }*/
.tiles-list {
width: 320px;
display: inline-flex;
flex-flow:row;
align-items:flex-start;
}



.square { position:relative; width: 100%; }
.square:before { content: ""; display:block; padding-top:100%; }
.square > div { position:absolute; top:5px; left:5px; right:5px; bottom:5px; overflow:hidden }
.square > div > div { position:absolute; top:5px; left:5px; right:5px; bottom:5px; overflow:hidden; background-color:#fff; border: 5px;
    border-style: solid;
    border-color: #fff;}
.square > div > div a { color:#000; }

/* gallery tiles */
a.gallery-link { display:block; position:absolute; width:100%; height:100%; border:1px solid #333; box-sizing:border-box; }
div.gallery-img { position:absolute; top:10px; bottom:10px; left:10px; right:10px; background:transparent none no-repeat center center; background-size: contain; }

/* badges (feeded from data-badge attribute) */
.badge { position:relative !important; }
.badge[data-badge]:after { content:attr(data-badge); position:absolute; top:-12px; left:100%; background:#000; color:#fff; width:auto; min-width:13px; height:18px; padding:0 3px; text-align:center; line-height:18px; font-size:70%; font-weight:bold; border-radius:9px; box-shadow:0 0 1px #333; }
.badge[data-badge=""]:after { content: none; }

/* clearfix */
.clearfix			{ clear:both; font-size:0.001; line-height:0; height:0 }

/* bot trap input field used by forms (hide these fields) */
input.bcheck		{ position:absolute; left:-20000px }

/* language navigation */
a.langavail00, a.langavail01, a.langavail10 { display:none }
a.langavail00 img, a.langavail01 img, a.langavail10 img { display:none }

/* breakpoints: phone  */
@media only screen and (max-width:900px) {
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { display: block; }
	thead { position: absolute; top: -9999px; left: -9999px; }
	tbody td { text-align: left !important; width: 100% !important; }
	tr { margin-bottom: 0.66em; clear:both; }

	/* scale content images if necessary */
	#content img { max-width: 100%; height:auto !important }

	body { padding:0; }
	header .slogan { float:right }
}


@media only screen and (max-width:650px) {
.sum{display:none}
#cart-summary{width:auto}
}