/* erstellt: 27.07.2017 */

html, body { 
	margin:0; 
	padding:0; 
	height:100%; 
	position:relative; 
	background: #222 url('../images/background-dark.jpg');
	font:1em/1.75 Verdana, Arial, Helvetica, sans-serif 
	}
body { 
	overflow-x:hidden; 
	-webkit-animation:androidbugfix infinite 1s 
	} /* http://timpietrusky.com/advanced-checkbox-hack */
@-webkit-keyframes androidbugfix { from {padding:0} to {padding:0} } /* http://timpietrusky.com/advanced-checkbox-hack */
#header { 
	position:relative; 
	top:0; left:0; 
	right:0; 
	height:3.925em; 
	background: #222 url('../images/background.jpg');
	border-top: 5px solid #7d282b;
	border-bottom: 2px solid #7d282b;
	}
#header span { 
	position:absolute; top:1.175em; left:10em; 
	color:#fff; 
	font-size:1em;
	}
	
@media ( max-width:37em ) {
	#header { 
		height:6em; 
		}
	#header span { 
		position:absolute; top:4em; left:1.2em; 
		}
	}
	
#header label { 
	padding:0 0.125em; 
	font:2.875em/1.4375em Arial;
	}
#menu { 
	border-top: 5px solid #7d282b;
	}
#menu label { padding:0 0.25em; font:3.125em/1.375em Arial }
#menu .sub-nav .toggle { padding:0 0.3125em; font:2em/2em Arial; top:0; -webkit-transform:scale(-1,1); -ms-transform:scale(-1,1); transform:scale(-1,1) }
#header label:hover, #menu label:hover { color:#ccc }
#main-nav-check, #menu .sub-nav-check { position:absolute; top:-9999px; left:-9999px }
.toggle { position:absolute; right:0.15em; cursor:pointer; color:#fff }
.container02 { background:#fff; min-height:100%; padding:0; margin:0; border: 2px solid #7d282b }
#menu, #menu .sub-nav { position:absolute; top:0; bottom:0; width:13.75em; background: #222 url('../images/background-dark.jpg'); z-index:9998; left:-13.75em }
.container02, #menu, #menu .sub-nav {   
	-webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0);
	-webkit-transition:-webkit-transform .25s ease; transition:transform .25s ease
	}
#menu ul { background: #222 url('../images/background-dark.jpg'); line-height:2.75em; text-decoration:none; padding:0; list-style:none; margin-top:4.0625em; border-top:1px solid #7d282b }
#menu li { border-bottom:1px solid #7d282b }
#menu li a { background: #222 url('../images/background-dark.jpg'); display:block; font-size:0.875em; padding-left:1.5em; color:#fff; text-decoration:none }
#menu li a:hover, #menu .toggle-sub:hover { background:#444 }
#menu .sub-nav { margin-top:-1px }
#menu .sub-heading { margin-top:4.0625em; padding-left:1.3125em; color:coral; border-top:1px solid #7d282b }
#menu .sub-heading2 { margin-top:0; padding-left:1.3125em; color:coral }
#menu .sub-heading:before { content:""; display:block; height:0px; width:13.75em; margin-left:-1.3125em; background:#7d282b }
#menu .sub-heading2:before { content:""; display:block; height:0px; width:13.75em; margin-left:-1.3125em; background:#7d282b }

#menu .toggle-sub { 
	font:bold 1em/2.75em Arial; 
	color:#fff; 
	background: #222 url('../images/background-dark.jpg'); 
	float:right; 
	margin-top:-2.75em; 
	width:2.25em; 
	border-left:1px solid #7d282b; 
	cursor:pointer; 
	text-align:center 
	}
.container02, #menu, #menu .sub-nav, #close-nav { -webkit-transform:translate3d(0,0,0) } /* http://davidwalsh.name/translate3d */

/* #### - corrects 'unfixing' bug in Safari - uncomment if you have position:fixed elements inside .container02 - #### */
/* @media screen and (-webkit-min-device-pixel-ratio:0) { .container02 { -webkit-transform:none !important } } */

/* #### - extra css for js enhancement - #### */
#close-nav, #dt-close-nav { display:none }
.js #close-nav { display:inline }
.js #menu .toggle { top:0; z-index:9998 }
.js #menu .sub-nav .toggle { left:0.15em; width:1em }

/* #### - define ids of animated container, menu and sub-menus here - #### */
#main-nav-check:checked ~ .container02,
#main-nav-check:checked ~ #menu,
#menu .sub-nav-check:checked ~ [id$="-sub"] /* matches all elements with id ending "-sub" */ { 
	-webkit-transform:translate(13.75em,0); -ms-transform:translate(13.75em,0); transform:translate(13.75em,0)
	}

@media ( min-width:60em ) { /* #### - switch to desktop on-canvas menu at 960px (960/16=60 - 16px being default browser font-size) - #### */

	/* #### - extra css for js enhancement - #### */
	.js #close-nav, .js #dt-close-nav { display:none }
	.js #dt-close-nav { position:absolute; z-index:9998; top:0; left:3.15em; cursor:pointer; color:#fff; padding:0 0.25em; font:3.125em/1.375em Arial }
	.js #dt-close-nav:hover { color:#ccc }

	.wrapper { margin:auto }
	.container02 { background:#222; padding-left:13.75em }
	.wrapper, #main-nav-check:checked ~ .container02, #main-nav-check:checked ~ #menu { -webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0) }
	#menu { left:0; border-right: 2px solid #7d282b; overflow:hidden }
	#menu label, #header label { display:none }
	#menu ul label { display:inline-block }
	#menu ul a:hover, #menu ul label:hover { background:#444; -webkit-transition:background-color .25s ease; transition:background-color .25s ease } /* fade effect for modern browsers */
	#menu .sub-heading label:hover { background:transparent }
	#menu .sub-heading2 label:hover { background:transparent }
}


.page-content { background:#FFFFFA; padding:0 }

#logo1 {
	position:absolute;
	top:0.1em;
	left:1em;
}