/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/*MAIN*/
body { 
	font-size: 1em;
	line-height: 1em;
	font-family: Helvetica Neue, Helvetica, Arial;
	background: #ddf;
	color: hsl(0,0%,100%);
}

a { color: #4C9CF1; text-decoration:none; font-weight:bold; }
a:hover { color:#444; }

img { width:100%; height:auto; border-radius: 10px;}

header {
	background: #fff;
	width:100%;
	max-width: 780px;
	height: 40px;
	position: fixed;
	top: 0px;
	left: 0px;
	border-bottom: 4px solid #4C9CF1;
	z-index: 100;
	margin: 0px auto 0px;
	padding:5px;
}

.current {color: #2262AD;}

section {
	margin: 0px auto 0px;
	max-width: 780px;
	position: relative;
	padding: 0px;
	background: hsl(198,100%,40%);
	border:5px solid hsl(198,100%,40%);
}
footer { background: hsl(198,100%,20%); max-width: 780px;height: 0 auto; color: white; padding:0px; text-align: center; border:5px solid hsl(198,100%,40%);}

h1 {	font-size:1.0em; color: #2262AD; line-height:1em; padding:0px;	margin:0 5px 0px 0; }
h2 {	font-size:1.2em; color: #FFE; line-height:1em; padding:0px;	padding-top:60px; margin: 0 0 20px 0; text-align:center; border:0px}
h3 {	font-size:1.2em; color: #FFE; line-height:1em; padding:0px;	margin:30px 0 10px 0; text-align:center;}
h4 {	font-size:1.2em; color: #FFE; line-height:1em; padding:0px;	padding:0px; margin: 0 0 20px 0; text-align:center; border:0px}

p {background: #F0f0ff; color:black; line-height: 1.2em;	margin: 0px; padding:10px; border:0px; border-radius: 5px;}

#such input[type="text"], input[type="search"], input[type="email"], input[type="comment"] { padding:0; margin:0; width:60%; height:23px; border:3px solid #EFB957; }	
#such input[type="submit"] { margin: 0; }	

#email label span { display:none}
#email input[type="text"], input[type="email"], input[type="url"], textarea { width:99%; font:1em/120% sans-serif; }	
#email fieldset { padding:1%; border:2px solid #EFB957; border-radius:8px; margin-bottom:1ex; background: #F0E6CF; margin:1em}
#email label { cursor:pointer; display:block; width:90%; font-size:1.2em; padding:4px; border-radius:8px; padding:1em; margin-bottom: 4px;}
#email {background:#F0C85E; color:white; padding:1ex; text-align:left; border-radius:8px;}
#email { background: #F0f0ff; color:black; padding: 5px; text-align: center; font-weight: bold; cursor: pointer }
#email label span { display:block; width:100%;padding-bottom:10px;}
#email input[type="text"], input[type="email"], input[type="url"], textarea { width:95%}

nav { float:right; padding:0; margin:0; }

#menu-icon {	display:inline-block; width:40px; height:40px; background:#4C8FEC url(../gfx/menu-icon.png) center; padding:0; margin:0; position: absolute; right:15px; top: 5px; }
#info { width: 48px; height:48px; border:0;}
#infoli { width: 48px; float: left; border:0; }
#infore { width: 48px; float: right; border:0; }
#danke { width: 300px; align:center;}
#fuss { height: 100%; max-height: 80px; }
#fusstext {width:80%; border:0; margin:10px; float:left; }
#imgglas {width:50%; border:0; margin-right:10px; float:left; }



nav ul, nav:active ul { 
		display: none;
		position: absolute;
		padding: 0px;
		margin: 0px;
		background: #fff;
		border: 2px solid #444;
		right: 15px;
		top: 45px;
		width: 32%;
		
	}

nav li { text-align:center; width:80%; padding:0px; margin:10px; }

nav:hover ul {display: block;	}

a:hover#menu-icon {	background-color:#444; border-radius: 4px 4px 0 0;}

.reframe { max-width: 96%; margin: 0px auto 0px;}

/*MEDIA QUERY*/
@media only screen and (min-width : 780px) {
	.reframe { max-width: 780px; }
	
	#content{ width: 100% }
	#content {
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-webkit-justify-content: space-between;
		-ms-flex-pack:justify;
		justify-content: space-between;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	#content article {width: 46%;}

header, footer {position: relative; margin: 0px auto 0px;}
	
	#menu-icon {	display: none;}

nav ul, nav:active ul { 
		display: inline;
		position: absolute;
		padding: 0;
		background: #fff;
		border:0;
		right: 15px;
		top: 5px;		
		text-align:right;	}
li { display:inline; }
h2,h3,h4 {	font-size:2.0em;}
h2 {padding-top:10px;}

#email label span { display:inline-block; width:30%}
#email input[type="text"], input[type="email"], input[type="url"], textarea { width:65%; }
}