.hg {
	text-align: left;
	background-color: #0FF;
	width: 1024px;
	margin-right: auto;
	margin-left: auto;	
	height:100%;
}


.header {
	position:relative;
	background-color: gold;
	width: 100%;
	float: left;
	height:10px;
}
.footer {
	bottom:0px;
	z-index:200;
	background-color: #0F9;
	height:20px;
	width: 1024px;
	color:#737373;
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
}
.adress {
	font-size:14px;
	line-height:16px;
	position:relative;
	top:0px;
/*
	width: 768px;
	float: left;*/
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
}
.adress a {
	color:#737373;
}
.adress a:hover {
	color:#000;
}
.sp1{
	background-color: pink;
	margin-left:10%;
}

.sp2{
	width:45%;
	background-color: red;
	margin-left:5%;
	float:left;
}
.sp3{
	position:fixed;
	width:0px;
	background-color: red;

}
.sp3 img{
	position: relative;
	top:110px;
	left:685px;
	width:338px;

}

.menu {	
	position: absolute;
	z-index:2000;
	background-color: #FFF;
	background-image: url(../userfiles/images/meta/menu.svg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 30px auto;
	height: 30px;
	width: 30px;
	margin-top:5px;
	cursor:pointer;
}
#menu1 {top:15px;left:-40px;}
#menu2 { top:1%; right: 2%; }

.menubox { position: relative; width: auto; height: 100%; text-align:center; display:none;}
.logobox {width:40px;height:40px; float:left; background-color: red;}


.logo {
	
	width: 100%;
	height:auto;
	
}



body { background-color: red; font-size: 20px; line-height: 24px;}

.hg, #header2, .footer { width:1400px; }

@media only screen and (max-width: 1600px) {
	body { background-color: orange; font-size: 19px; line-height: 23px;}
	.hg { width:1280px; /**/  }
	.hg, #header2, .footer { width:1200px; }
	.sp2 { margin-left:10%; }
	.sp3 img { left: 810px; width: 390px; }
}

@media only screen and (max-width: 1279px) {
	body { background-color: grey; font-size: 18px; line-height: 22px;}
	.hg, #header2, .footer { width:1000px; }
	.sp1, .sp2{ margin-left:5%; }
	.nav {width: 25%;}
	.adress { /*width: 75%;*/ }

	.sp3 img { left:670px; width: 330px; }
	
}

@media only screen and (max-width: 1023px) {
	body { background-color: blue; font-size: 16px; line-height: 20px;	}
	.hg { width:768px; }
	.header { background-color: lime;}
	.hg { margin:  0px auto; text-align:left; width: 100%; padding-top:0px; background-color: #00F;}
	.sp1 {margin-left:0px;}
	.sp2 {margin-left: 2%; width: 260px;}
	.footer { /*padding-bottom:0px; height:50px;*/ }
	.sp1{ margin-left:2%; }
	.footer { text-align:left; }
	.break1a { width: 100%; display:block;}

}

@media only screen and (max-width: 767px) {
	body { background-color: red; font-size: 16px; line-height: 20px;	}
	.hg { background-color: #0CC; padding-top:45px; height:auto;}	
	.header { background-color: yellow; height:45px; position:fixed; top:0px; left:0px; z-index:500;}
	.menubox {}
	.menubox { display:block;  height:45px;/*background-color:#FcF;*/}
	.menu { display:block; z-index:320; top:1%;  right: 2%!important;}
	.sp1, .sp2 {margin-left:2%;margin-right:2%;}
	.sp2 .bildbox { display:block;}
	.sp3 img{ position:static; }

}

@media only screen and (max-width: 511px) {
	body { background-color: gold; }
	.footer { position:static; margin-top:10px; width:100%; text-align:left;}
	.adress {width:90%; margin-left:10%;}
	.break { width: 100%; display:block;}
	.trenner { display:none;}
	
}