@import url('https://fonts.googleapis.com/css?family=Istok+Web');

/* CSS reset */
body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;}

*, *:before, *:after {
	 -webkit-box-sizing: border-box;
	 box-sizing: border-box; }

html{
	width:100%;
	font-weight:lighter;
	font-size: 100%;}

/* CSS page */	
body,html{
 margin:0;padding:0;
 color:#333;
 font-family:Istok Web, sans-serif;
 font-size:1rem;}

body{
 overflow-x:hidden;}

strong{
 font-weight:600;}
a{ color:#579783;}

#kopf,#content,#footer{
 clear:both;
 display:block;
 width:100%;}

#top{
 margin-top:30px;
 width:inherit;
 min-height:130px;}
 
#navigation{
 line-height:45px;
 margin-top:5px;
 margin-bottom:5px;
 padding-left:150px;
 width:inherit;
 display:block;
 color:#fff;
 height:45px;
 background-color:#878686;}

#top,#innerfooter{
 padding-left:170px;
 width:100%;}

#slides{
	background-image:url(media/slides_bg.png);
	background-size:cover;
	background-repeat:repeat-y;
	margin:0;padding:0;
	width:100%;
	overflow:hidden;
	max-height:370px;}

.slide {
	font-size:3rem;
  color:#e0e0e0;
	z-index:1000;
	font-weight:300;
	text-shadow:3px 3px 10px #579783;
  white-space: nowrap;
/*  transition:color 3s ease-out, font-size 3s ease-out;*/}

/*,
.slide:hover */
.animation{
	z-index:1001;
	font-size:15rem !important;
  color: #305246;
	font-weight:500;
	opacity:0.0;
	margin-left:-250px;
	margin-top:-100px;
	text-shadow:0px 0px 60px #305246;
  transition:margin 4s ease-out, opacity 4s ease-out, text-shadow 2s ease-in-out, color 2s ease-out, font-size 5s ease-out;}

.nav{
 padding:5px 20px; 
 color:#fff;
 text-decoration:none;}

.nav:hover{
 background-color:#579783;}

.noline::before { content: ""; }

.left{
 display:inline;float:left;
 width:49%;
 margin-right:1%;}

.right{
 display:inline;float:left;
 margin-left:1%;
 width:49%;}

.xleft,.xright{
 margin-bottom:1em;}

#content{
	display:block;}

#innercontent{
 color:#333;
	margin-top:20px;
	padding-left:160px;
	padding-right:50px;
	min-height:350px;
	display:block;
	width:100%;}

.col{
	margin-left:30px;
	column-count: 2;
	column-gap:20px;
	column-rule:1px solid #f0f0f0;}

.col section,.col p{
 page-break-inside: avoid;
 display:table;}

.col3{
	margin-left:30px;
	column-count: 3;
	column-gap:60px;
	column-rule:1px solid #f0f0f0;}

.col3 section,.col3 p{
 page-break-inside: avoid;
 display:table;}

.h1,
.h1a,
h1{
	color:#878686;
	text-align:left;
	font-weight:300;
	line-height:125%;
	display:block;
	margin-bottom:1rem !important;
	font-size:1.8rem;}

.h1,
h1{
	margin-bottom:1rem !important;}

.h1a{
	margin-bottom:.2rem !important;}

p{
	color:#333;
	margin-bottom:1.5rem;}

.slogan{
	display:inline-block;
	font-size:2.2rem;}

.eindrittel,.drittel{
 text-align:center;
 display:inline;float:left;
 width:32%;margin-right:1%;}
 
.eindrittel{ padding:0 0px 0 10px;
 text-align:left;}

.zweidrittel{
 text-align:left;
 display:inline;float:left;
 width:65%;margin-right:1%;}

.dreidrittel{
 display:inline;
clear:both;
 width:100%;}

.videofeld{
 margin:20px auto;
 height:267px;
 max-width:440px;}

.videotitel{
	padding:0;
	margin:0;
	background-color:black;
	opacity:.7;
	display:block;
	width:inherit;
	color:#fff;
	font-size:1rem;
	height:1.8rem;
	text-align:center;	
	line-height:1.8rem;}

.video{
	max-width:440px;
	margin-top:-1.8rem}

.bildfeld{
 margin:30px auto;
 max-width:98%;
 max-height:300px;}

.bildfeld img{
	max-height:300px;
	max-width:100%;}

/*#slides .bildfeld img,*/
.img{
	box-shadow:1px 1px 2px #333;}

.subtitle{
	clear:left;
	color:#579783;}

#footer{
	display:block;
	margin-top:2em;
	padding-top:5px;
	min-height:65px;
	background-color:#579783;
	background-image:url(media/slides_bg.png);
	background-size:cover;}
 
#innerfooter{
	display:inline-block;clear:both;
	text-align:left;	
	min-height:70px;
	height:inherit;
	width:100%;}

#innerfooter ul li{
 margin:0 0 1rem 0;
 padding:0 0px 0 10px;
 display:inline-block;}

#innerfooter ul li:first-child{
 padding:0 0px 0 0px;}
 
ul li .fnav{
	display:inline-block;
	color:#000000;
	font-size:1em;
	text-decoration:none;}

#innerfooter ul li a{
 margin-right:10px;}

#innerfooter ul li:after{
	text-align:center;
	margin:0px 0px 0 0 ; 
	color:#ffffff;
	content:"|";}
#innerfooter ul li:last-child:after{
	content:"";}

.fleft a{
 color:#000000;}

.fright{
	clear:after;
	text-align:right;}

.fright a,.fright span{
	color:#ffffff;
	margin-right:10px;
	padding:5px 0 20px 0;}

#wave{
 position:absolute;top:0;left;0;
 background-image:url(media/gelb1.png);
 background-size:130px 100%;
 background-repeat:no-repeat;
 background-position:0px 0;
 width:150px;
 height:100%;
 overflow:hidden;}

input[type="submit"],input[type="text"],input[type="email"],textarea{
	padding:2px;
	margin-bottom:1rem;
	font-family:Istok Web;
	font-size:1rem;
	color:#333;
	border-radius:3px;
	border:1px solid #579783;
	box-shadow:2px 2px 4px #999;
	max-width:98%;}

input[type="text"],input[type="email"],textarea{
	width:350px;}

textarea{
	overflow:auto;
	height:100px;}

input[type="submit"]{
	padding:5px 10px;
	color:#fff;
	background-color:#579783;	
	cursor:pointer;}

#smallmenu{
	display:block;
	margin:0 0 10px 30px;}

.slogan2{
	display:none;}

@media only screen and (max-width: 1600px) {
	#innercontent{
		clear:right;margin-bottom:50px}
	.zweidrittel,.eindrittel{
		width:49%;margin-right:1%;display:inline-block;}

	.videofeld{
	 margin:20px auto;
	 height:260px;	 width:380px;max-width:380px;}
	.videotitel{
		display:inline-block;width:100%;}
	video,.video{
	 height:260px; width:380px;max-width:380px;}
}


@media only screen and (max-width: 1399px) {
	.videofeld{
	 margin:20px auto;
	 height:225px;	 width:330px;}
	video,.video{
	 height:225px; width:330px;max-width:330px;}
}

@media only screen and (max-width: 1249px) {
	#innercontent .drittel{
		max-width:49%;margin-right:1%;display:inline-block;}
}

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

	.nosmall{
		width:100%;display:block;}
	.seindrittel.nosmall{
		display:none;}

	.col{
		margin-left:30px;
		column-count: 1;
		column-gap:20px;
		column-rule:1px solid #f0f0f0;}

	.col section,.col p{
		page-break-inside: avoid;
		display:table;}
}

@media only screen and (max-width: 1024px) {
	#innercontent{padding-right:1%;}

	#slides .drittel{width:49%;}
	.videofeld{
	 margin:20px auto;
	 height:200px;	 width:300px;}
	video,.video{
	 height:200px; width:300px;max-width:300px;}

	#slides .drittel:last-child{display:none;}

	#innernavi .left{width:98%;}
	#innernavi .right{display:none;}

	.slogan{
	 font-size:1.6rem}
	 #logo{height:3.6rem;width:auto;}
}


@media only screen and (max-width: 800px) {
	.videofeld{
	 margin:20px auto;
	 height:225px;	 width:330px;}
	video,.video{
	 height:225px; width:330px;max-width:330px;}
	
	

	.zweidrittel, .eindrittel{
		width:100%;display:block;}
	.fright span{display:block;
		width:100%;}
	#smallmenu a{
		display:block;
		margin:0 0 10px 0px;}
	.middot{display:none;}

	#innercontent .drittel{
		width:100%;display:block;
		min-height:170px;}
}

@media only screen and (max-width: 620px) {
	#top,#innercontent,#navigation,#slidecontainer{
		padding-left:70px !important;}

	#innerfooter{
		padding-left:100px;}

	#slidecontainer .bildfeld{ text-align:left;}

	#wave{ width:100px;margin-left:-30px;}
	#top .left,#top .right{
		width:100%;}

	#top .left{display:none;
		float:right;text-align:left;}

	.spacer{ width:0;display:none;}
	
	#innernavi .nav{font-size:.85rem;padding:5px 5px;}
	
	.slogan2{
		font-size:1.6rem;
		color:#878686;
		text-align:left;
		font-weight:300;
		line-height:125%;
		display:block;text-align:center;}

	#logo{width:90%;height:auto;}
	#slides{max-height:250px;}
	#slides .drittel:last-child{display:none;}
	#slidecontainer{padding-left:30px !important;}
}

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


@media only screen and (max-width: 479px) {
	#wave{ display:none;}
	#innercontent{padding-left:30px !important;}
	#navigation{padding-left:30px !important;}
	#slidecontainer{padding-left:30px !important;}

	.videofeld{
	 margin:20px auto;
	 height:225px;	 width:330px;}
	video,.video{
	 height:225px; width:330px;max-width:330px;}
}

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