body {
	margin: 0;
	padding: 0;
	background: #E3E3E3;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #8A8985;
}

h1, h2, h3 {
	margin: 0;
	margin-bottom: 0.5em;
	padding: 0;
	font-weight: normal;
	color: #7d7764;
	text-align: left;
}

h1 {
	font-size: 2.8em;
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.4em;
	text-indent: 1em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}

ul, ol {
}

a {
	text-decoration: none;
	color: #CA4C44;
}

a:hover {
}

.title a {
	border: none;
	/* text-transform: lowercase; */
	color: #7D7764;
}

#logo {
	width: 250px;
	height: 100px;
	background: url(images/Header_bild.png) no-repeat left bottom;
	margin-left: 4.0em;
	margin-right: auto;
	padding: 1px;
	border:1px solid #7D7764;
}

#programcode {
	position: absolute;
	margin-top: 0px;
	left: 300px;
	max-width: 100%;
	width: 800px;
	height: 750px;
	background:url(images/program_code.png) no-repeat left top;
	z-index: 1;
}

#header-area {
	background:url(images/welle.jpg) no-repeat left top;
	height:780px;
}

#header-area p {
	color: #7D7764;
	text-align: center-left;
	font-size: 9em;
	padding: 0.8em 0.4em 0 0;
	margin: 0 0.4em 0.4em 0.4em;
	line-height: 100%;
}

#header-area h1 {
	text-align: left;
	padding:0.4em 0.4em 0 0;
}

#menu {
	margin: 0 auto;
	padding: 0px 10px;
}

#menu ul {
	margin: 0;
	padding: 30px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu a {
	display: block;
	margin-right: 1px;
	padding: 10px 15px 15px 15px;
	background: url(images/list_bullet.png) no-repeat left 12px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #D3C525;
	border: none;
}

#menu a:hover, #menu .current_page_item a {
	text-decoration: none;
}

#menu .current_page_item a {
}

#footer-wrapper h2 {
	margin: 0px;
	padding: 0px 0px 20px 0px;
	letter-spacing: -1px;
/*	text-transform: lowercase; */
	font-size: 2.0em;
	color: #FFFFFF;
}

#footer-wrapper ul {
	margin: 0px;
	padding: 0px 0px 0px 20px;
}

#footer-wrapper a {
	color: #447ECF;
}

#column1 {
	padding-top: 20px;
	padding-left: 10px;
	width: 290px;
}

#column2 {
	padding-top: 20px;
	padding-left: 10px;
	width: 280px;
}

#column3 {
	padding-top: 20px;
	padding-left: 10px;
	width: 260px;
}

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

	.flex-container {
		margin: 0px auto;
		padding: 15px;
	}
	
	nav {
		background: linear-gradient( to right, #43695b, #24453c);
		display: -webkit-flex;
		display: flex;  
		-webkit-flex-wrap: nowrap;
		flex-wrap: nowrap;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	
	#header-area {
		background-size: cover;
	}
	
	#header-area p {
		font-size: 8em;
	}

	#menu li {
		float: left;
	}

	#wrapper {
		overflow: auto;
		background-color: #ffffff;
	}

	#content {
		float: left;
		margin: 0 auto;
		padding: 30px 20px 30px 55px;
		width: 670px;
		text-align: justify;
	}

	#sidebar {
		float: right;
		margin: 0px;
		padding: 30px 0px 0px 5px;
		width: 70px;
		color: #787878;
	}

	/* footer wrapper*/
	#footer-wrapper {
		display: -webkit-flex;
		display: flex;  
		-webkit-justify-content: center;
		justify-content: center;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		background-color: #202020;
		color: #BFBFBF;
	}
	
}

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

	.flex-container {
		width: 90%;
		margin: 0px auto;
		padding: 15px;
	}

	nav {
		background: linear-gradient( to right, #43695b, #24453c);
		display: -webkit-flex;
		display: flex;  
		-webkit-flex-direction: column;
		flex-direction: column;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	
	#logo {
		margin-left: 1em;
	}

	#programcode {
		left: 100px;
		width:380px;
		position: center;
	}

	#header-area {
		background-size: cover;
	}
	
	#header-area p {
		font-size: 5em;
		padding-top: 1.2em;
	}

	h1 {
		font-size: 2em;
	}

	h2 {
		font-size: 1.8em;
	}

	#sidebar h2 {
		font-size: 1.8em;
	}

	#sidebar h3 {
		font-size: 1.2em;
	}

	#menu a {
		padding: 10px 15px 5px 5px;
	}

	#menu li {
		float: left;
		text-align: left;
	}
	
	#wrapper {
		overflow: auto;
		display: -webkit-flex;
		display: flex;  
		-webkit-flex-direction: column;
		flex-direction: column;
		background-color: #ffffff;
	}
	
	#content {
		margin: 0 auto;
		padding: 30px 10px;
		text-align: justify;
	}

	#sidebar {
		margin: 0px;
		padding: 30px 10px;
		background-color: #d5d3d3;
		color: #787878;
	}

	/* footer wrapper*/
	#footer-wrapper {
		display: -webkit-flex;
		display: flex;  
		-webkit-flex-direction: column;
		flex-direction: column;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		background-color: #202020;
		color: #BFBFBF;
	}
	
	#footer-wrapper h2 {
		margin: 0px;
		padding: 0px 0px 20px 0px;
		letter-spacing: -1px;
		font-size: 1.4em;
		color: #FFFFFF;
	}
}

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

	#logo {
		margin-left: 1em;
		margin-top: 100px;
		width: 250px;
		height: 100px;

	}

	#programcode {
		top: 100px;
		left: 3em;
		width:350px;
		height: 600px;
	}

	#header-area p {
		font-size: 5em;
		text-align: center;

	}

	h1 {
		font-size: 1.8em;
	}

	h2 {
		font-size: 1.8em;
	}

	#sidebar h2 {
		font-size: 1.8em;
	}

	#sidebar h3 {
		font-size: 1.2em;
	}

	.flex-container {
		width: 90%;
		margin: 0px auto;
		padding: 15px;
	}

	nav {
		background: linear-gradient( to right, #43695b, #24453c);
		display: -webkit-flex;
		display: flex;  
		-webkit-flex-direction: column;
		flex-direction: column;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	
	#menu {
		margin: 0;
		padding: 0;
	}
	
	#menu li {
		text-align: left;
	}
	
	#wrapper {
		overflow: auto;
		display: -webkit-flex;
		display: flex;  
		-webkit-flex-direction: column;
		flex-direction: column;
		background-color: #ffffff;
	}
	
	#content {
		margin: 0 auto;
		padding: 30px 10px;
		text-align: justify;
	}

	#sidebar {
		margin: 0px;
		padding: 30px 10px;
		background-color: #d5d3d3;
		color: #787878;
	}

	/* footer wrapper*/
	#footer-wrapper {
		display: -webkit-flex;
		display: flex;  
		-webkit-flex-direction: column;
		flex-direction: column;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		background-color: #202020;
		color: #BFBFBF;
	}
	
	#footer-wrapper h2 {
		margin: 0px;
		padding: 0px 0px 20px 0px;
		letter-spacing: -1px;
	/*	text-transform: lowercase; */
		font-size: 1.4em;
		color: #FFFFFF;
	}
}

/* Copyright */
#copyright {
	height: 50px;
	margin: 0 auto;
	padding: 0px 0 15px 0;
	font-family: Arial, Helvetica, sans-serif;
}

#copyright p {
	margin: 0;
	padding-top: 10px;
	line-height: normal;
	font-size: 9px;
	text-transform: uppercase;
	text-align: center;
	color: #202020;
}

#copyright a {
	color: #202020;
}