@charset "UTF-8";

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body{
		background-image: url("../images/bg_body.png");
		font-family: 'Open Sans', sans-serif;
}

/* Raster */

	/* vertikale Zeilen */
	.row{
		width: 100%;
		float: left;
	}

	/* horizontale Spalten */
	.columns{
		float: left;
	}

	/* 2 spaltiges Raster im kleinsten Layout */
	.small-1 {width: 50%;}
	.small-2 {width: 100%;}

	/* 12 spaltiges Raster im groessten Layout */
	.large-1 {width: 8.333333%;}
	.large-2 {width: 16.666666%;}
	.large-3 {width: 25%;}
	.large-4 {width: 33.333333%;}
	.large-5 {width: 41.666666%;}
	.large-6 {width: 50%;}
	.large-7 {width: 58.333333%;}
	.large-8 {width: 66.666666%;}
	.large-9 {width: 75%;}
	.large-10 {width: 83.333333%;}
	.large-11 {width: 91.666666%;}
	.large-12 {width: 100%;}

/* ENDE Raster*/

/* Header */

header{
	position: absolute;
	top: 0;
	position: fixed;
	height: 2.5em;
	padding: 0.5em;
	background-color: #f29405;
	z-index:500;
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
}

div.logo{
	height: 20px;
	width: auto;
	margin-top: -5px;
	margin-left: -5px;
	float: left;
}

header h1{
	float: left;
	color: rgb(255,255,255);
	font-size: 1.1em;
	font-weight: 400;
	letter-spacing: 0.03em;
	padding: 0;
	margin-top: 0.05em;
	margin-left: 0.4em;
}

.site-nav{
	margin-top: -1em;
	width: 100%;
}

.site-nav ul {
	margin: 0;
	list-style: none;
	padding: 0;
	float: right;
	color:rgb(255,255,255);
}

nav li{
	float: left;
}

.site-nav a {
	padding: 1em;
	padding-top: 0;
	color: rgb(255,255,255);
	text-decoration: none;
	display: block;
}

.site-nav a:active,
.site-nav a:hover {
	outline: 0;
}

@media screen and (max-width: 630px){
	/* Nav-Slider */

		.site-nav ul {
			padding: 0;
			float: none;
		}

		.site-nav li{
			width: 100%;
			border-bottom: solid 1px #999;
			text-align: right;
			background-color: rgb(255,255,255);
		}

		.site-nav a{
			padding-top: 1em;
			color: #f29405;
		}

		a.nav-show, a.nav-hide{
			padding: 0;
			float: right;
			border: none;
			color:rgb(255,255,255);
		}
		a.nav-hide, .nav-slider{display: none;}

		#nav-open:target .nav-slider,
		#nav-open:target a.nav-hide {display: block;margin-bottom: 0; }

		#nav-open:target a.nav-show {display: none;}
	/* ENDE Nav-Slider */
}

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

	a.nav-show, a.nav-hide{display: none;}

	.site-nav li{
		float: left;
	}
}

/* ENDE Header */

/* Emotional Image und Slogan */
#head_pic{
	display: block;
	width: 100%;
	height: 25em;
	margin-top: -4em;
	background-image: url("../images/img_header.png");
	background-repeat: no-repeat;

	overflow: hidden;
}

#overlay{
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,255,0.15);
}

#overlay h2{
	color: #f29405;
	font-weight: bold;
	font-size: 2.3em;
	line-height: 1em;
	text-align:center;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
	padding-top: 4.2em;
	margin-bottom: 1.1em;
}

#overlay p{
	color: #f29405;
	font-style: italic;
	font-weight: bold;
	font-size: 1.4em;
	text-align:center;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
	margin-top: -1em;
}

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

	#overlay h2{
		padding-top: 4em;
		margin-bottom: 1.1em;
	}
}

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

	#overlay h2{
		font-size: 2.5em;
		margin-bottom: 1.4em;
	}

	#overlay p{
		font-size: 1.7em;
	}
}

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

	#head_pic{
		height: 24em;
		margin-top: -1em;
	}

	#overlay h2{
		font-size: 2.5em;
		margin-bottom: 1.4em;
	}

	#overlay p{
		font-size: 1.5em;
	}
}

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

	#head_pic{
		height: 24em;
		margin-top: 0em;
	}

	#overlay h2{
		padding-top: 2.5em;
	}

	#overlay p{
		font-size: 2em;
	}
}

@media screen and (min-width:1024px){
	#head_pic{
		height: 31em;
		background-position: center;
	}
	
	#overlay h2{
		font-size: 3em;
	}
	
	#overlay p{
		font-size: 2.5em;
	}
}

/* ENDE Emotional Image und Slogan */

/* Inhalte */

article{
	margin: 1.5em 1.5em;
	font-size: 0.8em;
}

article h2{
	margin-top: 0.3em;
}

article iframe{
	border: 1px black dashed;
	height: 340px;
	width: 100%
}

ol.lower-alpha {
	list-style-type: lower-alpha;
}

li{
	margin-bottom: 0.5em;
}

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

	article{
		font-size: 0.8em;
	}
}

@media screen and (min-width:480px){
	
	article{
		font-size: 1em;
	}

	article iframe{
		height: 250px;
	}
}

@media screen and (min-width:480px){
	
	article iframe{
		height: 200px;
	}
}

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

	article{
		font-size: 1.1em;
	}
}

@media screen and (min-width:800px){
	article{
		font-size: 1.2em;
	}
}

@media screen and (min-width:900px){
	article{
		margin-top: 1em;
		margin-bottom: 3em;
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
    	-moz-column-count: 2; /* Firefox */
    	column-count: 2;
	}
}

@media screen and (min-width:1024px){
	
	article iframe{
		height: 250px;
	}
}

@media screen and (min-width:1280px){
	
	article iframe{
		height: 200px;
	}
}

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

	article{
		-webkit-column-count: 3; /* Chrome, Safari, Opera */
    	-moz-column-count: 3; /* Firefox */
    	column-count: 3;
	}
}

/* ENDE Inhalte */