/* generelles Layout für ALLE Seiten */

html, body{
	margin: 0;
	padding: 0;
	overflow-x: hidden;
} 
 
/*######################################
		NAVIGATION
######################################*/
.topnav {
	background-color: #4B9DD7;
	overflow: hidden;
	width: 100%;
	z-index: 1000;
	opacity: 0.9;
	font-family: 'Open Sans', sans-serif;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: flex-end;
	-ms-flex-pack: flex-end;
	justify-content: flex-end;
	position: fixed;
	/* KEINE HEIGHT ANGABE -> zersört responsive navi bar */
}
	.topnav a {
		color: #EAEDED;
		text-decoration: none;
		padding: 2em;
		display: block;
		font-size: 1em;
		background-image: -o-linear-gradient(left, #4B9DD7 50%, #EAEDED 50%);
		background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #4B9DD7), color-stop(50%, #EAEDED));
		background-image: linear-gradient(to right, #4B9DD7 50%, #EAEDED 50%);	/* beide vorhandenen Farben auf 50% gesetzt */
		background-size: 201% 100%; /* damit sind beide Farbgrößen verdoppelt */
		background-repeat: no-repeat;
		background-position: bottom left;
		-o-transition: all 0.6s ease-out;
		transition: all 0.6s ease-out;
		-webkit-transition: all 0.6s ease-out;
		-moz-transition: all 0.6s ease-out;
	}
		.topnav a:hover,
		.topnav a:focus{
			color: #96A6A9;
			-webkit-box-shadow: 3px 3px 9px #999 inset;
			        box-shadow: 3px 3px 9px #999 inset;
			-o-transition: all 0.5s ease-out;
			transition: all 0.5s ease-out;
			-webkit-transition: all 0.5s ease-out;
			-moz-transition: all 0.5s ease-out;
			background-position: bottom right;
		}
		.topnav .active {
		  color: #2f3637;
		  background-position: bottom right;
		  
		}
.topnav .icon {
  display: none;
} 
	.topnav .icon:active{
		-webkit-transition: all;
		-o-transition: all;
		transition: all;
		background-color: transparent;
		-webkit-transform: rotate(45deg);
		    -ms-transform: rotate(45deg);
		        transform: rotate(45deg);
		border-radius: 50%;
		-webkit-box-shadow: none;
		        box-shadow: none;
	}


/*###############################################
			MAIN BODY
###############################################*/
#main_wrapper{
	width: 100%;
	background: -webkit-gradient(linear,left top, left bottom,from(rgba(0, 0, 0, 0.4)),to(rgba(0, 0, 0, 0.4))), url(bilder/background.jpg) no-repeat center fixed;
	background: -o-linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url(bilder/background.jpg) no-repeat center fixed;
	background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url(bilder/background.jpg) no-repeat center fixed;
	background-size: cover;
	-webkit-background-size: cover; 
	-moz-background-size: cover; 
	-o-background-size: cover; 
	-ms-background-size: cover;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}
	.section_content_head{
		width: 80%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		margin-top: 2em;
	}
		.h1_content{
			font-family: 'Londrina Shadow';
			letter-spacing: 7px;
			font-variant: small-caps;
			font-size: 4em;
			font-weight: 900;
			color: #f1f1f1;
			text-shadow: 1px 0 1px #666, 0 1px 1px #222,
			2px 1px 1px #666, 1px 2px 1px #222,
			3px 2px 1px #666, 2px 3px 1px #222,
			4px 3px 1px #666, 3px 4px 1px #222,
			5px 4px 1px #666, 4px 5px 1px #222,
			6px 5px 1px #666, 5px 6px 1px #222,
			7px 6px 1px #666, 6px 7px 1px #222;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			position: absolute;
			margin-left: auto;
			margin-right: auto;
		}
		hr{
			height: 1px;
			background-color: #f1f1f1;
			border: 1px solid #f1f1f1;
			-webkit-box-shadow: -2px -1px 1px #fff, 2px 2px 3px #666666;
			        box-shadow: -2px -1px 1px #fff, 2px 2px 3px #666666;
			width: 60%;
			margin-top: 15em;
		}

.section_content{
	background-color: #222;
	opacity: .7;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	margin: 2em auto;
}
	.article_p{
		font-family: 'Open Sans', sans-serif;
		font-size: 1.5em;
		color: #fff;
		line-height: 1.8;
		padding: 3%;
		width: 60%;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}



/*######################################
			FOOTER
######################################*/
#footer{
	width: 100%;
	height: 13em;
	background-color: #A2B0B5;
	position: relative;
	color: #1A323B;
	display: block;
	opacity: 0.9;
	margin: auto auto 0 auto !important;
}	
	#content_footer{
		padding-top: 1em;
	}
		.p_foot{
			font-size: 0.9em;
			text-align: center;
			font-family: 'Oxygen', sans-serif !important;
			font-variant: small-caps;
			letter-spacing: 1px;
		}	
			.copyright{
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
					-ms-flex-pack: center;
						justify-content: center;
				margin: 2em auto auto auto;
				font-size: 0.8em !important;
			}	
			.h3_foot{
				margin: 3em auto auto auto;
			}
			.h3_foot_b{
				margin: 1em auto auto auto;
			}
				
			.a_foot{
				text-decoration: none;
				color: inherit;
			}	
				.a_foot:hover,
				focus{
					color: #666;
				}
	
	
/*#########################################
		MEDIA QUERIES
#########################################*/
@media screen and (max-width: 700px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 700px) {
	.topnav.responsive {
		display: block;
		float: none;
		text-align: left;
		opacity: 0.95;
	}
	.topnav.responsive a {
		display: block;
		text-align: left;
	}
	.topnav.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
		flexbox: none;
	}
}


@media screen and (min-width: 300px) {
	.h1_content{
		font-size: 3.5em;
		letter-spacing: 5px;
	}
	.h1_content_kontakt{
		font-size: 2.7em;
		letter-spacing: 1px;
	}
	.article_p{
		font-size: 1.2em;
		line-height: 1.4;
		width: 80%;
	}
}

@media screen and (min-width: 600px) {
	.h1_content{
		font-size: 4em;
		letter-spacing: 7px;
	}
	.h1_content_kontakt{
		font-size: 4em;
		letter-spacing: 7px;
	}
	.article_p{
		font-size: 1.5em;
		line-height: 1.8;
		width: 60%;
	}
}

/*
@media screen and (min-width: 860px) {
	.h1_content{
		font-size: 4em;
		letter-spacing: 7px;
	}
	.h1_content_kontakt{
		font-size: 4em;
		letter-spacing: 7px;
	}
	.article_p{
		font-family: 'Open Sans', sans-serif;
		font-size: 1.5em;
		color: #fff;
		line-height: 1.8;
		padding: 3%;
		width: 60%;
	}
}
*/