@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 */
html	{ }

body { margin:auto; background:transparent url(/assets/Styles/img/schnee.jpg) repeat left top scroll;}
/*footer, header, main, aside, nav {-webkit-flex: 1 100%; flex: 1 100%;}*/

main {grid-area: content; padding: 1em;   -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto; }
aside{grid-area: menue; grid-template-rows: 100px 300px; 
grid-template-areas:"warenkorb"
               "hauptnavigation"
     }
#wk{grid-area: warenkorb;}
article { grid-area:actions; padding: 0.3em}
article h1.aktionen{text-align: center; padding-top: 40%; font-size:2em; display: block; height: 80px; background: transparent url(/assets/Styles/img/sign_aktionen.png) no-repeat left top scroll; background-size: contain; margin:0px }

#actions{background-color: #e9cd9b;padding: 1em;margin:1em;}

footer {
    grid-area: footer;
	text-align: center;
	display: grid;
	grid-template-rows:40px 1fr;
	grid-template-columns: 33.33333% 33.333333% 33.33333%;
	background:transparent url(/assets/Styles/img/schnee.jpg) repeat left top scroll;
}

#footer-spitze{background: transparent url(/assets/Styles/img/footer_spitze_winter.jpg) repeat-x left top scroll; grid-column:1 / 5;
    grid-row:1 / 2; height: 40px}

#footer-content{grid-column:1 / 5; grid-row:2 / 3; }

#footer-content table#footer_info tr td.center{text-align:center!important; margin-bottom: 1.5em}

header {grid-area:header;
		height:25vw;
		max-height:280px;
		background-image: url('/assets/Styles/img/header_winter.jpg');
		background-repeat: no-repeat;
		background-size: 100% auto;
}
header img {
	width: 100%}

.invisible_navi{display: none; text-align: right; float:right}

#wrap { margin:0 auto; max-width: 1200px; color:#000; font-family:Georgia, serif; line-height:125%; font-size: 0.9em; background:transparent url(/assets/Styles/img/leinen_kachel.jpg); display: grid; grid-template-rows: auto 1fr 100px; grid-template-columns: 20% 30% 30% 20%; grid-template-areas: 
            "header header header header"
            "menue content content actions"
            "footer footer footer footer"
        ;}

#head_wrapper{ display: grid; grid-template-rows:1fr; grid-template-columns: 50% 50%;border:1px dotted black}
#logo{text-align: center}

.headline{font-family: 'Courgette', cursive;font-size: 45px; text-align: center; color: #733300;margin-bottom: 1em }


/* Navigation ------------------------------------------------------------------ */
nav ul { list-style-type:none; margin:0; padding:0; box-sizing:border-box; }

#navigation{

text-align: left;
}

#navigation a{
	font-size: 2.2em;
	font-weight: bold;
	text-shadow: #000 0.1em 0.1em 0.2em;
	color: #fff;
	text-decoration: none;
	line-height: 1.2em;
}
#nav-main {grid-area:hauptnavigation; }
#nav-main > a { display:none; text-decoration:none; background-color:#733300; color:#fff; margin-left:1em; }
#nav-main li { position:relative; }
/* first level */
#nav-main > ul { display:inline-block; }
#nav-main > ul > li { width:auto; height:100%;text-align:left; z-index:10000; }
/* second (and deeper) level
#nav-main li ul { display:none; position:absolute; top:0; left:100%; background-color:#fff; min-width:100%; }
#nav-main li a {  display:block; padding:0.25em 0.75em; }
#nav-main li a.active { background: transparent url(/assets/Styles/img/topnav-active.png) repeat left top scroll; }
#nav-main > ul > li > ul { top:100%; left:0; } */
#nav-main ul				{ list-style:none; margin:0; padding:0 0 0 1em; }
#nav-main ul.navlevel1		{ padding:0; margin:0.66em; }
#nav-main li				{ display:block; margin:0; padding:0 }
#nav-main a					{ display:block; }
#nav-main a.navlevel1 		{ color: #733300; }
#nav-main a.selectedvisible	{ color:#8f2425; }

#nav-main ul li.navlevel1{	
	list-style: none;
	font-size: 1.15em;
	line-height: 1.25em;
	color: #733300;
	font-weight: bold;
	margin-bottom: 0.5em;
	margin-left: 0.5em;
	}

#nav-main .navlevel2{ 
	color: #000;
	font-weight: normal;
	}
#nav-main ul li.navlevel1 a{ text-decoration: none;margin-bottom: 0.3em;}


#nav-meta ul		{ list-style:none!important; margin:0; padding:0 1em; }
#nav-meta ul.navlevel2	{ padding:1em; margin:0.66em; margin-top:1.33em; border-top:1px solid #7c7c7c; border-bottom:1px solid #7c7c7c; }
#nav-meta li		{ display:block!important; margin:0; padding:0.25em; }
#nav-meta a			{ display:block; padding:0; font-weight:normal; text-decoration:none; color:#733300; }
#nav-meta a.selectedvisible		{ color:#8f2425; }
#nav-trigger,
.iconbutton		{ position:absolute; top:0; width:50px; height:50px; margin:10px 5px; line-height:50px; display:none!important; border:2px solid transparent; border-radius:3px; text-align:center; font-size:30px; color:#999; cursor:pointer; }
#nav-trigger i,
.iconbutton i	{ cursor:inherit !important; }
#cart-trigger 	{ display:none }
.badge { position:relative !important; }
.badge[data-badge]:after {
   content:attr(data-badge);
   position:absolute;
   top:-12px;
   left:100%;
   font-family:'Titillium Web',sans-serif;
   background:#fff;
   color:#000;
   width:auto;
   min-width:13px;
   height:18px;
   padding:0 3px 0 3px;
   text-align:center;
   line-height:16px;
   font-size:60%;
   font-weight:bold;
   border-radius:9px;
   box-shadow:0 0 1px #333;
}
.iconbutton.badge[data-badge]:after {
   top:-6px;
   left: calc(100% - 10px);
}
.badge[data-badge=""]:after { content: none; }
@media only screen and (max-width:640px) {
	#navigation { text-align: left; order:1;align-self:center;background:none;margin-top:1em}
	#navigation li a { border-bottom: 1px solid #fff; }
	#nav-main {text-align:left; height: 70px; }
	#nav-main ul { margin:0; padding:0; padding-left:0.5em; }
	#nav-main a.navlevel1 {color: #fff;}
    #nav-main li:hover > ul { display:block; }
    #nav-main li.active > ul { display:block; }
	#nav-main:not( :target ) > a:first-of-type,
	#nav-main:target > a:last-of-type { display: block; }
	#nav-main a.selectedvisible	{ color:#e4d236; }
	/* first level */
	#nav-main > ul { height:auto; display:none; position:absolute; left:0; right:0; background-color:#733300; padding-left:0;z-index: 1000000; }
	#nav-main:target > ul { display:block; }
	#nav-main > ul > li { float:none; padding:0; margin:1em; box-sizing:border-box; }
	/* second (and deeper) level */
	#nav-main li ul { position: static;background-color:transparent; }
	/* adapt layout */
	#nav-main, #nav-meta { display: block }
	#navi { position:absolute; top:75px; left:0px; width:91%; z-index:100; padding:20px; display:none; background-color: #733300; }
	#pagecontent { display:block; position:static; overflow:initial; height:auto; width:100%; float:none; padding:5px }
	#pageheader { display:none; }
	#nav-trigger	{ display:block!important; position:static; float:left }
	.tiles-list		{ width:50%; }
	.shop-categories.threecol > div { width:100%; height:33.33%; }
	.pageheader-txt { height:auto }

	#cart-trigger { display:block; position:static; float:left; }
	#cart-summary { text-align:left; background-color: rgba(128, 124, 124, 0.5) }
	#cart-summary .cart-contents { display:inline; }
	#cart-summary .badge:after { content: none; }
	#cart-summary .sum-label { display:inline;text-align:left; }
	
	#wrap {display:inline-block; grid-template-rows: 80px 300px 100px; grid-template-columns:100%; grid-template-areas: 
            "header"
		    "content"
            "footer";
	}
	
	.tiles-list {float:left; width:50%!important;}
	
	/*aside{display:grid; grid-template-rows: auto!important;grid-template-columns: 30% 70%!important; 
grid-template-areas:"hauptnavigation warenkorb";}*/
	.invisible{}
	.headline{font-size:30px}
	.invisible_text_navi{display:none!important;}
}
main{margin:0;}

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

/* Common classes */
h1			{ font-size:1.45em; line-height:150%; color:#733300; }
h2			{ font-size:1.25em; line-height:150%; color:#733300; }
h3			{ font-size:1em; line-height:150%; color:#733300; }
a:link		{ color:#8f2425 }
a:visited	{ color:#000; }
a:hover	{  }
a img		{ border:none; text-decoration:none; }


@media only screen and (max-width:905px) {
article{
	display: none;
}
	main {grid-column:2/ 5;
}
	
	/*#wrap {grid-template-columns: 25% 30% 30% 15%;}*/
}


#cart{
	height:30px;
}



.responsiveContainer {
  position: relative;
  padding-bottom: 56%;
  height: 0;
  overflow: hidden;
}

.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.responsiveSwf{
  width:100%;
  padding-top:59%;
  position:relative;
}

.responsiveSwf object{
  position:absolute;
  toP:0;
  left:0;
  bottom:0;
  right:0;
}


/* 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:30%; }
.square { position:relative; width: 100%; }
.square:before { content: ""; display:block; padding-top:0px; height:300px; }
.square > div { position:absolute; top:5px; left:5px; right:5px; bottom:5px;  }
.square > div {  left:5px; right:5px; bottom:5px; }
.square > 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 attrbute) */
.badge { position:relative !important; }
.badge[data-badge]:after { content:attr(data-badge); position:absolute; top:-12px; left:100%; background:#f48045; 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; }

/* 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:750px) {
	/* 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 }
	.checkout-link{display: none;}
}


@media only screen and (max-width:480px) {
.sum{display: none;}

}