body {
	background: #ffffff url() 50% 0 no-repeat scroll;
	background-size: auto;
	/* You may want to copy the styles you choose to use and delete the rest */
}
body.background-variation-1 {
	/*background: url("../img/bg-abstract.jpg") 50% 0 no-repeat;*/
	/* Just to show how it looks without #nav-header, if you don't need it, you should remove it from the HTML markup */
	/* Make shadow transparent. It's usually full-color to prevent the tiny overlap in the edges. */
	background-color: #3AA6D0; 
	background-color: rgba(58, 166, 208, .4);
	background-image: url();
}
body.background-variation-1 #wrapper > header {
	/*background-color: transparent;*/
}
body.background-variation-1 #nav-header {
	display: none;
}
body.background-variation-1 #nav-main > ul > li.submenu:before {
	-webkit-box-shadow: 0 5px 0 -1px #ffffff, 0 3px 0 #dadada, 0 0 0 3px rgba(0, 0, 0, 0.075);
	-moz-box-shadow: 0 5px 0 -1px #ffffff, 0 3px 0 #dadada, 0 0 0 3px rgba(0, 0, 0, 0.075);
	box-shadow: 0 5px 0 -1px #ffffff, 0 3px 0 #dadada, 0 0 0 3px rgba(0, 0, 0, 0.075);
}
body.background-variation-2 {
	background-color: #E4EFB1;
	background-color: rgba(228, 239, 177, .6);
	background-image: url();
}
body.background-variation-3 {
	background-color: #A3DDD3;
	background-color: rgba(163,221,211,.6);
	background-image: url();
}
/*body.background-variation-3 #wrapper > header,
body.background-variation-3 #wrapper > footer {
	border: 1px solid #ececec;
	border-color: rgba(0, 0, 0, 0.13);
}*/
body.background-variation-4 {
	/*background: url("../img/bg-dark-grey.jpg");*/
	background-color: #FFE173;
	background-color: rgba(255,225,115,.6);
	background-image: url();
}
body.background-variation-4 #nav-footer-wrap {
	background: #2a2a2b;
}

/* ===========================================
 * Elements in order of appearance in HTML
 * ======================================== */
#wrapper > header {
	position: relative;
	z-index: 10;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: url(../img/Header/zweighaus_dach_fade_header.png) no-repeat transparent top left;
	margin-bottom: 18px;
	padding: 15px 4%;
}

body.background-variation-3 #wrapper > header {
	background: url(../img/Header/raeume_header_fade.png) no-repeat transparent top left;
}
body.background-variation-2 #wrapper > header {
	background: url(../img/Header/veranstaltungen_header_fade.png) no-repeat transparent top left;
}
body.background-variation-4 #wrapper > header {
	background: url(../img/Header/kontakt_header_fade.png) no-repeat transparent top left;
}

#nav-main {
	margin: 185px 8.69565% 0 0;
	padding-right: 2%;
	font-size: 14px;
	text-align: right;
	background-color: #FFF; 
}

#wrapper > footer .complete {
	width: 84%;
	margin-left: 8%;
	margin-right: 8%;
	background-color: #FFFFFF;
	display-block;
	height: 330px;
}

#wrapper > footer .footer-column-2 {
	width: 25%;
}

#footer-info {
    margin: 15px 0 15px 0;
    color: #333333;
    width: 100%;
    text-align: center;
	
}
.highlight-box, #content .highlight-box {
	width: 50%;
	margin: 20px auto;
	padding: 36px;
}
.highlight-box h2, #content .highlight-box h2 {
	margin: 0 0 20px 0;
	font-size: 20px;
	font-weight: bold;
}
.highlight-box h3, #content .highlight-box h3 {
	margin: 0;
	font-size: 16px;
	font-weight: normal;
	color: #464749;
	text-shadow: none;
}
.highlight-box .button, #content .highlight-box .button {
	position: relative;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 200px;
}