/* General Style
Hier anschauen und weiter mit 21:20 min.
https://www.youtube.com/watch?annotation_id=annotation_156021851&feature=iv&src_vid=g2taIe7ZFUA&v=dVYdOSSJ_Tk


*/
body{
	background-image:url(HP-Background.png);
	font-size:100%;
	margin:0em;
	padding:0em;
}
h1{
	font-size:2.5em;
	line-height:3.8em;
	font-family:Helvetica;
	font-weight:100;
	color:black;
	margin:0em;
	}
h2{
	font-size:1.5em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	margin:0.75em 0.75em;
	text-align:left;
	}
h3{
	font-size:1.17em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	margin:0.83em 0.83em;
	text-align:left;
	}
h4{
	font-size:1.12em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	margin:1.12em 1.12em;
	text-align:left;
	}
h5{
	font-size:0.83em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	margin:1.5em 1.5em;
	
	text-align:left;
	}
h6{
	font-size:0.75em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	margin:1.67em 1.67em;
	text-align:left;
	}


p {	
	line-height:1.25em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	margin:0em;
	padding:1.25em;
	text-align:left;
	}
ul{
	margin:0px;
	padding:0px;
}	
li{
	list-style:square;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	line-height:1.25em;
	margin:0.313em 0em 0.313em 0em;
	padding:0em;
	text-align:justify;
}
img{
	width:90%;
	height:auto;
	max-width:100%;
}
a{
	text-decoration:none;
}
/* On Top Bar*/
#menubar{
	display:block;
	background:#dbdbdb;
}
#menubar ul{
	display:block;
	width:2em;
	padding:0.9em;
}
#menubar ul li{
	display:inline;
}
#menubar ul li a.menubutton{
	display:none;
}
header{
	display:block;
	
	text-align:center;
}
header img{
	width:100%;
}
/*Navigation*/
nav{
	display:block;
	height:2.5em;
	background:#dbdbdb;
	text-align:center;
}
nav ul{
	display:block;
}
nav ul li{
	display:inline;
	margin:0em 0.188em 0em 0.188em;
}
nav ul li a{
	color:#454040;
	font-size:1.125em;
	line-height:2.5em;
	padding:0.563em 0.938em 0.375em 0.983em;
	transition:background 0.2s;
	-webkit-transition:background 0.2s;
}
nav ul li a:hover{
	background:#d8d9d8;
	border-bottom:0.188em solid #e75908;
}
nav ul li a.active{
	border-bottom:0.188em solid #e75908;
}
/* Content Area */
#main{
	display:inline-block;
	width:96%;
	max-width:2000px;
	margin:2%;
	padding:0em;
}
#main article {
	display:inline-block;
	width:80%;
	background:#dbdbdb;
	vertical-align:top;
	text-align:center;
	padding-bottom:7%;
}
#kontakt_rechts{
	line-height:2em;
	font-size:1.12em;
	width:69%;
	float:right;
	text-align:left;
}
#kontakt_links{
	line-height:2em;
	font-size:1.12em;
	width:30%;
	float:left;
	text-align:right;
}
#main article img{
	margin:1.0em;
	width:23%;
	max-width:150px;
	box-shadow:3px 0px 10px 0px #4c4948;
	border-radius:5px;
}
#videorahmen{
	width:55%;
	height:auto;
	margin-left:22%;
	box-shadow: 0px 0px 5px 5px #000;
}
#main aside{
	background:#dbdbdb;
	display:inline-block;
	width:17%;
	vertical-align:top;
	margin-top:0%;
	margin-left:2%;
}
/*#main aside section{
	display:block;
	background:#FFFFFF;
	border-bottom:0.188em solid #e75908;
	vertical-align:top;
}*/
#main aside a img{
	width:50%;
	max-width:250px;
	margin:2% 25%;
}
#main aside h2{
	text-align:center;
}
#main article h2{
	padding:1em 1.8em 1em 1.8em;
}
#main aside section ul{
	padding:0em 1.875em 1.25em 2.5em;
}
#kontaktformular{
	width:auto;
	margin-left:10%;
	margin-right:10%;
	line-height:1.25em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
}
#textarea_kontakt{
	max-width:98%;
}
/* Footer */
footer{
	display:block;
	background:#2f2c2c;
	text-align:center;
}
footer ul{
	display:block;
	width:100%;
	max-width:980px;
	text-align:left;
	margin:0px auto;
}
footer ul li{
	display:inline;
	font-size:0.8em;
	line-height:2.8em;
	color:#e2dbdb;
	padding:0em 0.625em 0em 0.625em;
}
footer ul li a{
	color:#e2dbdb;
}
/* Mobile Style*/
@media (max-width:1100px) {
	body{
		font-size:95%;
		}
		#videorahmen{
		width:70%;
		height:auto;
		margin-left:14%;
		}
}
@media (max-width:1000px) {
	body{
		font-size:90%;
		}
}
@media (max-width:850px) {
	body{
		font-size:85%;
		}
	
}
@media (max-width:700px) {
	body{
		font-size:80%;
		}
	#videorahmen{
		width:90%;
		height:auto;
		margin-left:4%;
		}
}
@media (max-width:600px) {
	body{
		font-size:75%;
		}
}
@media (max-width:500px) {
	h1{
		font-size:1.5em;
		font-family:Helvetica;
		font-weight:100;
		color:black;
		margin:0em;
	}
	body{
		font-size:70%;
		}
}
@media (max-width:400px) {
	body{
		font-size:65%;
		}
}

@media (max-width:600px){
	
	#main aside,  #main article {
		width:100%;
		display:block;
		margin:0.625em 0em 0.625em 0em;
	}
}
@media (max-width:550px){
	
	

	body{
		font-size:50%;
	}
	#menubar ul li a.menubutton{
		display:block;
	}
	nav{
		display:none;
		height:auto;
	}
	nav ul li{
		display:block;
		margin:0.3em 0em 0.3em 0em;
	}
}
@media (min-width:550px){
	nav.nav{
		display:block !important;
	}
}