@charset "utf-8";
/* CSS Document */

.dancing-script-head {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}	
.underline {text-decoration:underline;}

.bildbreite_akt {width:400px;}
.b40 {width:40px;}
.akt_nav {float:left;cursor:pointer;width:40px;height:40px;color:#ffffff;background:#003300; margin-left:10px; border-radius:10px;text-align:center;box-shadow: 3px 3px 3px #000000;}
.akt_nav:hover {cursor:pointer;width:40px;color:#ffffff;background:#009900;}

.akt_nav_nr {float:left;cursor:pointer;width:40px;color:#ffffff;background:#008800; margin-left:10px; box-shadow: 3px 3px 3px #000000;}
.akt_nav_nr:hover {cursor:pointer;width:40px;color:#ffffff;background:#00bb00;}


.subline24 {font-size:24px;}
.subline30 {font-size:30px;}
.inhalt_bild {max-width:500px; height:auto;}

img {
 max-width: 100%;
 max-height: 100%;
}


	body,#oben,#links,#rechts,#einfuehrung {
		margin:0 auto;
		box-sizing:border-box;
		min-height:500px;
		width:100%;
		font-family: sans-serif, cursive;
		background:#ffffff;
	}

#startsong {margin:0 auto;position:relative;width:250px;height:30px;z-index:20000; align:center;}

#akt_nav {float:left;cursor:pointer;width:40px; height:40px;color:#ffffff;background:#003300; margin-left:10px; border:10px;}


	#nr {position: fixed;
		left:50%;
		top:70px;
		width:50px;
		height:30px;
		text-align:left;
		z-index:1000;
		font-size:30px;
		color: #444444;
		padding-left:5px;
		display:none;
	}
	#nr_button {float:left;width:40px;color:#ffffff;margin-left:20px;}
	#home_button {position:absolute; top:5px;right:40px;}
	#info_button {margin: 0 auto; position:absolute; top:120px;right:40px; border-radius:18px;box-sizing: border-box; background:#ffffff;}
	#abstand {width:10px;height:10px; display:none;}

	#headline {
		margin:0 auto;
		box-sizing:border-box;
		width:100%;
		height:90px;
		font-size: 90px;
		line-height:90px;
		font-weight: 700;
		color: rgba(0,64,0,0.6);
		text-shadow: 0px 0px 0px #000000;
		text-align: center;
		margin-top:120px;
		font-family: "Dancing Script", cursive;
		
	}
	#subline {
		margin:0 auto;
		box-sizing:border-box;
		width:100%;
		height:100px;
		font-size: 40px;
		line-height:40px;
		font-weight: 400;
		color: rgba(0,0,0,0.6);
		text-shadow: 0px 0px 0px #000000;
		text-align: center;
		margin-top:200px;
		font-family: "Dancing Script", cursive;
	}
	
	#sub1 {
		
		width:100%;
		height:100px;
		font-size: 20px;
		line-height:20px;
		font-weight: 200;
		color: rgba(0,0,0,0.6);
		text-shadow: 0px 0px 0px #000000;
		text-align: center;
		margin-top:200px;	
		font-family: "Dancing Script", cursive;
	}
	
	#rechts {
		position:relative;
		float:right;	
		width: 50%;
		height: 100vh;
		background: #ffffff;
		z-index: 10;
		font-size: 18px;
	}
	#links {
		position:relative;
		position:fixed;
		float:left;	
		width: 50%;
		height: 100vh;
		background: #ffffff;
		z-index: 10;
		background-image:url("images/tiere-im-wald.png");
		background-size:cover;
		cursor:pointer;
		transition: opacity 2s linear;
	}

	#links:hover {
		 /*opacity: 0;*/		
	}


	#einfuehrung {
		margin: 0 auto;
		position:relative;
		width:100%;
		height: 100%;
		font-size: 18px;
		line-height:24px;
		font-weight: normal;
		font-family: sans-serif;
		
	}
	
	#fuss {
		position:absolute;
		position:fixed;
		top:0px;
		width:100%;
		height:40px;
		background:#7b8928;
		opacity:0.9;
		color:#003300;
		font-size:30px;
		padding:10px 10px 10px 10px;;
		text-align: left;
		z-index: 100;
	}


	a:link {color:#ffffff;}
	a:visited {color:#ffffff;}
	a:hover {color:#000000;}

@media only screen and (max-width: 600px)  {
.bildbreite_akt {width:200px;}
.subline24 {font-size:24px;}
.subline30 {font-size:20px;}
.b40 {width:50px;}
.akt_nav {cursor:pointer;width:40px;height:30px;color:#ffffff;background:#003300; font-weight:bold;}
.akt_nav:hover {cursor:pointer;width:40px;color:#ffffff;background:#009900;}

.akt_nav_nr {float:left;cursor:pointer;width:50px;color:#ffffff;background:#008800; margin-left:10px;}
.akt_nav_nr:hover {cursor:pointer;width:40px;color:#ffffff;background:#00bb00;}
.inhalt_bild {max-width:350px; height:auto;}
	
	#nr {position: fixed;
		left:1%;
		top:51vh;
		width:50px;
		height:30px;
		text-align:left;
		color:#000000;
		z-index:1000;
	}
	#nr_button {float:left;width:40px;color:#ffffff;margin-left:20px;}
	#home_button {position:absolute; top:5px;right:40px;}
	
	#abstand {float:left;width:100%;height:5px; display:block;}
	#startsong {
		margin:0 auto; position:absolute;bottom:0px;right:30px;width:350px;height:30px;z-index:10000;
	}
	
	#links {
		position:relative;
		float:left;	
		width: 100%;
		height: 50vh;
		background: #ffffff;
		z-index: 10;
		background-image:url("images/tiere-im-wald.png");
		background-repeat:no-repeat;
		background-size:cover;
		display: block;
		margin-top:40px;
	}	
	
	#rechts {
		margin:0 auto;
		float:left;	
		width: 100%;
		min-height: 500px;
		font-size: 20px;
	}
	
	#headline {
		width:100%;
		height:100px;
		font-size: 40px;
		line-height:40px;
		font-weight: 700;
		color: rgba(0,64,0,0.6);
		text-shadow: 0px 0px 0px #000000;
		text-align: center;
		margin-top:20px;
	}
	#subline {
		width:100%;
		height:100px;
		font-size: 27px;
		line-height:27px;
		font-weight: 400;
		color: rgba(0,0,0,0.6);
		text-shadow: 0px 0px 0px #000000;
		text-align: center;
		margin-top:20px;
		font-family: "Dancing Script", cursive;
	}
	
	#sub1 {
		
		width:100%;
		height:100px;
		font-size: 18px;
		line-height:20px;
		font-weight: 200;
		color: rgba(0,0,0,0.6);
		text-shadow: 0px 0px 0px #000000;
		text-align: center;
		margin-top:10px;	
		font-family: "Dancing Script", cursive;
	}

	#fuss {
		position:absolute;
		position:fixed;
		top:0px;
		width:100%;
		min-height:70px;
		background:#7b8928;
		color:#003300;
		font-size:18px;
		text-align: left;
		z-index: 100;
		padding-left:10px; line-height:20px;
	}
	#einfuehrung {
		position:relative;
		width:95%;
		height: 100%;
		font-size: 18px;
		line-height:24px;
		font-weight: normal;
		font-family: sans-serif;
		margin-top:70px;
		
	}
	
}