@charset "UTF-8";
/* CSS Document */

*,
*:before,
*:after	{
	margin: 0;
	padding: 0;
	box-sizing:border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	}
	
/*	.logo,
	.header-rechts,
	.content,
	.sp-links,
	.sp-rechts,
	.infobox
	#footer {
		border:1px solid blue;
		}
	*/
	
html, body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#3F3F3F;
	background-color:#fff;
	background-image:url(../images/bg.jpg);
	background-position:center top;
	background-repeat:repeat-x;
	background-size:cover;
	}
	
#wrap {
	margin: 0 auto;
	max-width: 980px;
	padding:15px 0% 25px 5%;
	background-color:rgba(255,255,255,0.7);
	min-height:700px;
	}

.logo {
	padding-top:15px;
	max-width:250px;
	float:left;
	}
	.logo img {
		width:100%;
		height:auto;
		}
		
.header-rechts {
	margin-left:45%;
	padding-top:40px;
	}

a.button {
	background-color:#9b0600;
	color:#fff;
	text-align:center;
	font-size:2em;
	padding:10px 5%;
	text-decoration:none;
	}
	a.button:hover {background-color:#bf0c04;}

.clear-left {clear:left;}

.content {
	width:100%;
	margin-top:35px;
	}
.sp-links {
	width:40%;
	float:left;
	}
.sp-rechts {
	width:52%;
	margin-left:45%;
	}
	.sp-rechts img {
		width:22%;
		height:auto;
		margin: 0 2% 2% 0;
		}

h1, h2, h3, h4, h5 {color:#9b0600;}

h1 {
	margin-bottom:15px;
	}

h2 {
	margin-bottom:5px;
	}

p {
	margin: 0 0 15px 0;
	}
	
.content ul {margin:0 0 20px 20px;}

.content a,
.content a:link,
.content a:active {
		color:#454545;
		text-decoration:underline;
		}
		.content a:visited {
			color:#A2A2A2;
			}
		.content a:hover {
			text-decoration:underline;
			color:#9b0600;
			}

.infobox {
	background-color:#fff;
	padding:15px;
	margin-top:20px;
	margin-bottom:35px;
	}

#footer {
	background-color: #9b0600;
	color:#fff;
	margin: 0 auto;
	max-width: 980px;
	padding:15px 5% 50px 5%;
	}
	#footer a,
	#footer a:link,
	#footer a:visited,
	#footer a:active {
		color:#fff;
		text-decoration:underline;
		}
		#footer a:hover {
			text-decoration:underline;
			color:#ff0000;
			}
	
#sub-footer {
	background-color: none;
	color:#fff;
	margin: 0 auto;
	max-width: 980px;
	padding:10px 0% 0 0%;
	font-size:0.85em;
	}
	#sub-footer a,
	#sub-footer a:link,
	#sub-footer a:visited,
	#sub-footer a:active {
		color:#454545;
		text-decoration:none;
		}
		#sub-footer a:hover {
			text-decoration:underline;
			color:#9b0600;
			}
			
/* ######################## RESPONSIVE STYLES ##########################*/


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

.sp-links {
	width:95%;
	float:none;
	margin-bottom:50px;
	}
.sp-rechts {
	width:95%;
	margin-left:0%;
	}
	.sp-rechts img {
		width:22%;
		height:auto;
		margin: 0 2% 2% 0;
		}

#sub-footer {
	padding:10px 0% 10px 5%;
	font-size:0.85em;
	}

}

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

.logo {
	padding-top:15px;
	width:95%;
	max-width:480px;
	float:none;
	}
	
.header-rechts {
	text-align:center;
	margin-left:0px;
	margin-right:0%;
	padding-top:40px;
	}

.sp-rechts img {
	width:30%;
	height:auto;
	margin: 0 2% 2% 0;
	}

#footer {
	font-size:1.25em;
	}

#sub-footer {
	padding:20px 0% 20px 0%;
	text-align:center;
	font-size:1.0em;
	}

}

@media screen and (max-width: 320px) {
	
.sp-rechts img {
	width:47%;
	height:auto;
	margin: 0 2% 2% 0;
	}
	
}

@media screen and (max-width: 240px) {
	
.sp-rechts img {
	width:95%;
	height:auto;
	margin: 0 0% 5% 0;
	}
	
}