/*=================================================
Stylesheet fuer die mobile Browserausgabe
(for spreves.com)
(c) 2016 André Kelling by webraumfahrer.com
==================================================*/
@media only screen and (max-width: 940px) and (min-width: 655px) {
	
}
@media only screen and (max-width: 1180px) {
	#header {margin: 6px 6px 0;}
	#container {margin: 0 6px;}
	#footer {margin: 0 6px 75px 6px;}
}
@media only screen and (max-width: 946px) {
	.button {font-size: 18px; padding: 8px 12px 6px}
}

@media only screen and (max-width: 868px) {
	#mainmenu ul li {width: 29.444%; margin-left: 3%;}
	
	#footer .upper .item {width: 50%;}
}

@media only screen and (max-width: 770px) {

}

@media only screen and (max-width: 750px) {
	
}
@media (min-width:668px) { 
	#mainmenu ul {display: flex !important}
}

@media (max-width:667px) { 
	body {font-size: 16px;}
	h2 {font-size:18px; line-height: 1.0; }
	h3 {font-size:18px; margin: 22px 0 12px;}

	.span_1, .span_2 , .span_2-5 , .span_3 , .span_4 , .span_5 , .span_6 , .span_7 , .span_8 , .span_9 , .span_10 , .span_11 {width:100%;}
	
	#logo {background: none;}	
	
	.menutoggle {display: block}
	#mainmenu ul li a, .menutoggle {padding: 6px;}
	#mainmenu ul {display: none}
	#mainmenu ul li {width:100%; margin-left: 0%; text-align: center; display: block; border-top: 1px dashed #fff; padding: 4px 0;}
	
	.sidebar{
 		position: relative
	}
	.sidebar:before {
    	left: 0;
    	width:100%;
	}
	
	#footer .span_2 {width: 50%;}
	#footer .span_2.prelast {clear: both; }

}

@media only screen and (max-width: 608px) {
	#header #logo, 
	.controls {width: 100%; float: none;}
	#header #logo{margin: 0 auto;}
	
	
	.topnav li {width: 25%; text-align: center; display: block; float: left;}
	.topnav li:nth-child(2) {text-align: left;}
	.topnav li:nth-child(5) {text-align: right;}
	.topnav li.first {display: none;}
	.topnav li a {margin: 0; padding: 0;}
	
	.topnav li ul {display: none !important;}
	
}

@media only screen and (max-width: 480px) {
	#header.scrolled #logo {max-width: 68px;}
	
	#footer .upper .item {width: 100%;}
}
@media only screen and (max-width: 420px) {
	#EmailForm input.text,
	#EmailForm textarea {
		width: 100%;	
	}

}
@media only screen and (max-width: 390px) {
	.content-left, .content-right {width: 100%; float: none;}
}

@media only screen and (max-height: 360px) {
	#header.scrolled #mainnavi {margin: 0;}
}