*			{
			font-family:Arial, Geneva, sans-serif;  
			}

body			{background-color:#0f1d42; }


div.mitte			{
			border:1px hidden white; 
			max-width:1500px; 
			min-width:1500px;
			margin:0 auto;
			}

h1			{
			color:white; 
			font-size:75px; 
			font-weight:200;  
			margin-top:20px;  
			}



img.blauwal		{border:1px hidden red; 
			opacity:0; 
			margin-left:220px; 
			margin-top:-130px;  
			animation:wal 1s linear normal forwards 1s;  
			}

@keyframes wal		{
			0%{opacity:0;}
			20%{opacity:0.2;}
			40%{opacity:0.4;}
			60%{opacity:0.6;}
			80%{opacity:0.8;}
			100%{opacity:1;}
			}

.anzeigen1	{opacity:0; 
			border:1px hidden green;  
			position:absolute;
			margin-top:-490px; margin-left:20px; 	
			width:154px; height:154px; 
			background-image:url("bilder/blase_fortpflanzung.png"); 
			animation:blase1 2s linear normal forwards 2s;
			}

@keyframes blase1		{
						0%{opacity:0;}20%{opacity:0.2;}40%{opacity:0.4;}60%{opacity:0.6;}80%{opacity:0.8;}100%{opacity:1;}
						}


a:hover .anzeigen1		{
			border:1px hidden red;   
			position:absolute;
			margin-top:-490px; margin-left:20px; 
			width:154px; height:154px; 
			background-image:url("bilder/hovereffekt1.png"); 
			}



.anzeigen2	{opacity:0;
			border:1px hidden green; 
			position:absolute; 
			margin-top:-100px; margin-left:95px; 
			width:154px; height:154px;  
			background-image:url("bilder/blase_anatomie.png"); 
			animation:blase2 2s linear normal forwards 3s;
			}

@keyframes blase2		{
						0%{opacity:0;}20%{opacity:0.2;}40%{opacity:0.4;}60%{opacity:0.6;}80%{opacity:0.8;}100%{opacity:1;}
						}


a:hover .anzeigen2		{
			border:1px hidden red; 
			position:absolute; 
			margin-top:-100px; margin-left:95px; 
			width:154px; height:154px; 
			background-image:url("bilder/hovereffekt2.png");	
			}




.anzeigen3		{opacity:0;
			border:1px hidden green; 
			position:absolute; 
			margin-top:-550px; margin-left:750px; 
			width:154px; height:154px;  
			background-image:url("bilder/blase_groesse.png"); 
			animation:blase3 2s linear normal forwards 4s;
			}

@keyframes blase3		{
						0%{opacity:0;}20%{opacity:0.2;}40%{opacity:0.4;}60%{opacity:0.6;}80%{opacity:0.8;}100%{opacity:1;}
						}

a:hover .anzeigen3	{opacity:0;
			border:1px hidden red; 
			position:absolute; 
			margin-top:-550px; margin-left:750px; 
			width:154px; height:154px; 
			background-image:url("bilder/hovereffekt3.png"); 
			}




.anzeigen4		{opacity:0;
			border:1px hidden green; 
			position:absolute; 
			margin-left:1150px; margin-top:-130px; 
			width:157px; height:154px;  
			background-image:url("bilder/blase_lebensraum.png"); 
			animation:blase4 2s linear normal forwards 5s;
			}

@keyframes blase4		{
						0%{opacity:0;}20%{opacity:0.2;}40%{opacity:0.4;}60%{opacity:0.6;}80%{opacity:0.8;}100%{opacity:1;}
						}

a:hover .anzeigen4		{
			border:1px hidden red; 
			position:absolute; 
			margin-left:1153px; margin-top:-130px; 
			width:154px; height:154px; 
			background-image:url("bilder/hovereffekt4.png");  
			}





.anzeigen5		{opacity:0;
			border:1px hidden green; 
			position:absolute; 
			margin-left:1330px; margin-top:-450px; 
			width:154px; height:154px;  
			background-image:url("bilder/blase_ernaehrung.png");
			animation:blase5 2s linear normal forwards 6s;
			}

@keyframes blase5		{
						0%{opacity:0;}20%{opacity:0.2;}40%{opacity:0.4;}60%{opacity:0.6;}80%{opacity:0.8;}100%{opacity:1;}
						}

a:hover .anzeigen5		{
			border:1px hidden red; 
			position:absolute; 
			margin-left:1330px; margin-top:-450px; 
			width:154px; height:154px; 
			background-image:url("bilder/hovereffekt5.png"); 
			}









img.blauwal2		{ 
			opacity:0; 
			position:relative;
			margin-left:400px; top:-120px;
			animation:wal2 2s linear normal forwards 1s; 
			}

@keyframes wal2		{
			0%{opacity:0;}
			20%{opacity:0.2;}
			40%{opacity:0.4;}
			60%{opacity:0.6;}
			80%{opacity:0.8;}
			100%{opacity:1;}
			}

img.walhai		{border:1px hidden green; 
			opacity:0; 
			position:relative;
			margin-left:40px; top:110px;
			animation:walhai 2s linear normal forwards 3s; 
			}
@keyframes walhai		{
			0%{opacity:0;} 20%{opacity:0.2;} 40%{opacity:0.4;} 60%{opacity:0.6;} 80%{opacity:0.8;}100%{opacity:1;}
			}

img.hai			{
			opacity:0; 
			position:relative;
			margin-left:40px; top:60px;
			animation:hai 2s linear normal forwards 5s; 
			}
@keyframes hai		{
			0%{opacity:0;} 20%{opacity:0.2;} 40%{opacity:0.4;} 60%{opacity:0.6;} 80%{opacity:0.8;}100%{opacity:1;}
			}


img.delfin		{ 
			opacity:0; 
			position:relative;
			margin-left:-40px; top:30px;
			animation:delfin 2s linear normal forwards 7s; 
			}
@keyframes delfin		{
			0%{opacity:0;} 20%{opacity:0.2;} 40%{opacity:0.4;} 60%{opacity:0.6;} 80%{opacity:0.8;}100%{opacity:1;}
			}

img.mensch		{
			opacity:0; 
			position:relative;
			margin-left:-935px; top:-135px; 
			animation:mensch 2s linear normal forwards 9s; 
			}
@keyframes mensch	{
			0%{opacity:0;} 20%{opacity:0.2;} 40%{opacity:0.4;} 60%{opacity:0.6;} 80%{opacity:0.8;}100%{opacity:1;}
			}


div.eins	{
			border:1px hidden red;
			position:relative;
			margin-top:-500px;
			margin-left:5px;
			}

span.lang	{
			color:white;
			font-size:20px;
			font-weight:200;			
			}
span.gewi	{
		 
			color:white;
			font-size:20px;
			font-weight:200;			
			}
span.lebens	{
			
			color:white;
			font-size:20px;
			font-weight:200;			
			}



a.subline:link			{text-decoration:none; color:#ffffff;}
a.subline:visited  		{text-decoration:none; color:#ffffff;}
a.subline:hover 		{text-decoration:none; color:#395c8a;}
a.subline:active  		{text-decoration:none; color:#395c8a;}


img.button0		{
			position:absolute; 
			margin-left:290px; margin-top:80px; 
			}


img.button1		{
			position:absolute; 
			margin-left:290px; margin-top:100px; 
			}
img.button2		{
			position:absolute; 
			margin-left:290px; margin-top:80px; 
			}

p			{
			width:300px; 
			color:#0f1d42; 
			background-color:white; 
			font-size:14px; line-height:21px; font-weight:400; 
			padding:15px; 
			margin-top:15px;  
			}


a.inhalt:link		{text-decoration:none; color:white;}
a.inhalt:visited		{text-decoration:none; color:white;}
a.inhalt:hover		{text-decoration:none; color:white;}
a.inhalt:active		{text-decoration:none; color:white;}


div.zwei			{visibility:hidden;}
div.zwei:target		{visibility:visible;}


div.vier			{visibility:hidden;}
div.vier:target		{visibility:visible;}

div.sechs			{visibility:hidden;}
div.sechs:target		{visibility:visible;}







img.karte	{
			opacity:0;
			position:absolute;
			margin-left:350px; margin-top:-35px;
			animation:karte 3s linear normal forwards 1s;  
			}

@keyframes karte	{
			0%{opacity:0;}
			20%{opacity:0.2;}
			40%{opacity:0.4;}
			60%{opacity:0.6;}
			80%{opacity:0.8;}
			100%{opacity:1;}
			}

div.text2 	{
			border:1px hidden red;
			position:absolute;
			margin-left:5px;
			}

span.wissen	{
			color:white;
			font-size:20px;
			font-weight:200;			
			}



span.zuru2	{
			color:white;
			font-size:20px;
			font-weight:200;
			}			

p.leben			{
			width:300px; 
			color:#0f1d42; 
			background-color:white; 
			font-size:14px; line-height:21px; font-weight:400; 
			padding:15px; 
			margin-top:15px; 
			}

img.button3		{
			position:absolute; 
			margin-left:290px; margin-top:268px; 
			}

div.acht			{visibility:hidden;}
div.acht:target		{visibility:visible;}

div.zehn			{visibility:hidden;}
div.zehn:target		{visibility:visible;}


div.neun			{
					border:1px hidden red;
					position:absolute;
					margin-left:5px;
					margin-top:400px;
					}

div.som					{
					margin-top:-28px;
					border:1px hidden green;
					position:absolute;
					}

img.wal_polar				{
					border:1px hidden green;
					margin-left:700px;
					margin-top:80px;	
					position:absolute;
					}

div.zwölf					{visibility:hidden;}
div.zwölf:target				{visibility:visible;}

div.elf					{
					border:1px hidden red;
					position:absolute;
					margin-left:5px;
					margin-top:460px;
					}

div.wint					{
					border:1px hidden green;
					margin-top:-28px;	
					position:absolute;
					}

img.wal_pazifik				{
					border:1px hidden green;
					position:absolute;
					margin-left:370px;
					margin-top:-200px;
					}					
img.wal_atlantik				{
					border:1px hidden green;
					position:absolute;
					margin-left:590px;
					margin-top:-350px;
					}
img.wal_indi				{
					border:1px hidden green;
					position:absolute;
					margin-left:1045px;
					margin-top:-200px;
					}







p.fort					{
					width:300px; 
					color:#0f1d42; 
					background-color:white; 
					font-size:14px; line-height:21px; font-weight:400; 
					padding:15px; 
					margin-top:15px; 
					}

div.vierzehn				{visibility:hidden;}
div.vierzehn:target				{visibility:visible;}


img.button5				{
					position:absolute; 
					margin-left:290px; margin-top:290px; 
					}


div.fünfzehn				{
					border:1px hidden red;
					position:absolute;
					margin-left:5px;
					margin-top:400px;
					}
	
div.sechzehn				{visibility:hidden;}
div.sechzehn:target				{visibility:visible;}


div.weib					{
					position:absolute;
					margin-top:-28px;
					}


.anzeigen8				{
					border:1px hidden green; 
					position:absolute; 
					margin-left:380px; margin-top:-475px;  
					width:880px; height:484px;  
					background-image:url("bilder/wal2_button.png"); 
					}

 .anzeigen8:hover				{
					border:1px hidden red; 
					position:absolute; 
					margin-left:380px; margin-top:-475px; 
					width:880px; height:668px; 
					background-image:url("bilder/wal2_genitalien.png");  
					}	

		




div.siebzehn				{
					border:1px hidden red;
					position:absolute;
					margin-left:5px;
					margin-top:460px;
					}
div.achtzehn				{visibility:hidden;}
div.achtzehn:target				{visibility:visible;}

	
div.mann					{
					position:absolute;
					margin-top:-28px;
					}

img.blauwal4				{
					position:absolute;
					margin-left:400px; margin-top:-520px;
					}

.anzeigen6				{
					border:1px hidden green; 
					position:absolute; 
					margin-left:400px; margin-top:-475px;  
					width:764px; height:420px;  
					background-image:url("bilder/wal3_button.png"); 
					}

 .anzeigen6:hover				{
					border:1px hidden red; 
					position:absolute; 
					margin-left:400px; margin-top:-475px; 
					width:818px; height:647px; 
					background-image:url("bilder/wal3_genitalien.png");  
					}	






div.neunzehn				{
					border:1px hidden red;
					position:absolute;
					margin-left:5px;
					margin-top:520px;
					}

div.zwanzig				{visibility:hidden;}
div.zwanzig:target			{visibility:visible;}


div.kalb					{
					position:absolute;
					margin-top:-28px;
					}

img.blauwal5				{
					position:absolute;
					margin-left:400px; margin-top:-620px;
					}

.anzeigen7				{
					border:1px hidden green; 
					position:absolute; 
					margin-left:380px; margin-top:-620px;  
					width:880px; height:634px;  
					background-image:url("bilder/walkalb.png"); 
					}

 .anzeigen7:hover				{
					border:1px hidden red; 
					position:absolute; 
					margin-left:380px; margin-top:-620px;
					width:880px; height:681px; 
					background-image:url("bilder/walkalb_info.png");  
					}	







img.ske				{
					position:absolute;
 					margin-left:223px; 
					margin-top:-128px;
					}


img.wal_anatomie	{
					position:absolute; 
					margin-left:220px; 
					margin-top:-130px; 			
					animation:anatomie 3s linear normal forwards 1s;
					}

		
@keyframes anatomie	{
					0%{opacity:1;}
					20%{opacity:0.8;}
					60%{opacity:0.4;}
					100%{opacity:0;}
					}


p.neu 				{
					width:300px; 
					color:#0f1d42; 
					background-color:white; 
					font-size:14px; line-height:21px; font-weight:400; 
					padding:15px; 
					}





div.zahl1				{
					opacity:0;
					border:1px hidden red;
					position:absolute;
					margin-left:460px; margin-top:205px;
					animation:button 1s linear normal forwards 1s;
					}

@keyframes button	{
					0%{opacity:0;}
					100%{opacity:1;}	
					}					

div.klick1 				{visibility:hidden;}
div.klick1:target		{visibility:visible;}

div.button1 		{
					position:absolute;
					margin-top:8px;
					}

div.atemloch 		{ 
					color:#ffffff;  
					font-size:14px; font-weight:400; 
					margin-top:-240px;
					}






div.zahl2			{
					opacity:0;
					border:1px hidden red;
					position:absolute;
					margin-left:515px; margin-top:265px;
					animation:button 1s linear normal forwards 1s;
					}

@keyframes button	{
					0%{opacity:0;}
					100%{opacity:1;}	
					}					

div.klick2			{visibility:hidden;}
div.klick2:target		{visibility:visible;}

div.button2 		{
					position:absolute;
					margin-top:26px;
					}

div.auge	 		{ 
					color:#ffffff;  
					font-size:14px; font-weight:400; 
					margin-top:-300px;
					}




div.zahl3				{
					opacity:0;
					border:1px hidden red;
					position:absolute;
					margin-left:440px; margin-top:265px;
					animation:button 1s linear normal forwards 1s;
					}

@keyframes button	{
					0%{opacity:0;}
					100%{opacity:1;}	
					}					

div.klick3 				{visibility:hidden;}
div.klick3:target		{visibility:visible;}

div.button3 				{
					position:absolute;
					margin-top:-138px; 
					}

div.mund	 		{ 
					color:#ffffff;  
					font-size:14px; font-weight:400; 
					margin-top:-10px; margin-left:-280px;
					}






div.zahl4				{
					opacity:0;
					border:1px hidden red;
					position:absolute;
					margin-left:440px; margin-top:400px;
					animation:button 1s linear normal forwards 1s;
					}

@keyframes button	{
					0%{opacity:0;}
					100%{opacity:1;}	
					}					

div.klick4 				{visibility:hidden;}
div.klick4:target		{visibility:visible;}

div.button31 		{
					position:absolute;
					margin-top:-237px;
					}

div.bauch	 		{ 
					color:#ffffff;  
					font-size:14px; font-weight:400; 
					margin-top:20px; margin-left:-30px;
					}






div.zahl5			{
					opacity:0;
					border:1px hidden red;
					position:absolute;
					margin-left:650px; margin-top:300px;
					animation:button 1s linear normal forwards 1s;
					}

@keyframes button	{
					0%{opacity:0;}
					100%{opacity:1;}	
					}					

div.klick5 				{visibility:hidden;}
div.klick5:target		{visibility:visible;}

div.button5 		{
					position:absolute;
					margin-top:66px;
					}

div.schult	 		{ 
					color:#ffffff;  
					font-size:14px; font-weight:400; 
					margin-top:-235px; margin-left:-60px;
					}






div.zahl6			{
					opacity:0;
					border:1px hidden red;
					position:absolute;
					margin-left:820px; margin-top:455px;
					animation:button 1s linear normal forwards 1s;
					}

@keyframes button	{
					0%{opacity:0;}
					100%{opacity:1;}	
					}					

div.klick6 				{visibility:hidden;}
div.klick6:target		{visibility:visible;}

div.button6 		{
					position:absolute;
					margin-top:-216px;
					}

div.floss	 		{ 
					color:#ffffff;  
					font-size:14px; font-weight:400; 
					margin-top:20px; margin-left:-60px;
					}




div.zahl7			{
					opacity:0;
					border:1px hidden red;
					position:absolute;
					margin-left:795px; margin-top:320px;
					animation:button 1s linear normal forwards 1s;
					}

@keyframes button	{
					0%{opacity:0;}
					100%{opacity:1;}	
					}					

div.klick7 				{visibility:hidden;}
div.klick7:target		{visibility:visible;}

div.button7 		{
					position:absolute;
					margin-top:-190px;
					}

div.ripp	 		{ 
					color:#ffffff;  
					font-size:14px; font-weight:400; 
					margin-top:15px; margin-left:55px;
					}




div.zahl8			{
					opacity:0;
					border:1px hidden red;
					position:absolute;
					margin-left:850px; margin-top:250px;
					animation:button 1s linear normal forwards 1s;
					}

@keyframes button	{
					0%{opacity:0;}
					100%{opacity:1;}	
					}					

div.klick8 				{visibility:hidden;}
div.klick8:target		{visibility:visible;}

div.button8 		{
					position:absolute;
					margin-top:47px;
					}

div.wirbel	 		{ 
					color:#ffffff;  
					font-size:14px; font-weight:400; 
					margin-top:-300px; margin-left:-200px;
					}





div.zahl9			{
					opacity:0;
					border:1px hidden red;
					position:absolute;
					margin-left:1050px; margin-top:320px;
					animation:button 1s linear normal forwards 1s;
					}

@keyframes button	{
					0%{opacity:0;}
					100%{opacity:1;}	
					}					

div.klick9 				{visibility:hidden;}
div.klick9:target		{visibility:visible;}

div.button9 		{
					position:absolute;
					margin-top:-190px;
					}

div.beck	 		{ 
					color:#ffffff;  
					font-size:14px; font-weight:400; 
					margin-top:5px; margin-left:-25px;
					}




div.zahl10			{
					opacity:0;
					border:1px hidden red;
					position:absolute;
					margin-left:1050px; margin-top:185px;
					animation:button 1s linear normal forwards 1s;
					}

@keyframes button	{
					0%{opacity:0;}
					100%{opacity:1;}	
					}					

div.klick10 				{visibility:hidden;}
div.klick10:target		{visibility:visible;}

div.button10 		{
					position:absolute;
					margin-top:31px; 
					}

div.rück	 		{ 
					color:#ffffff;  
					font-size:14px; font-weight:400; 
					margin-top:-200px; margin-left:-270px;
					}







div.zahl11			{
					opacity:0;
					border:1px hidden red;
					position:absolute;
					margin-left:1285px; margin-top:-20px;
					animation:button 1s linear normal forwards 1s;
					}

@keyframes button	{
					0%{opacity:0;}
					100%{opacity:1;}	
					}					

div.klick11 				{visibility:hidden;}
div.klick11:target		{visibility:visible;}

div.button11 		{
					position:absolute;
					margin-top:-170px;
					}

div.schwanz	 		{ 
					color:#ffffff;  
					font-size:14px; font-weight:400; 
					margin-top:-20px; margin-left:50px;
					}







div.zweizwanzig				{visibility:hidden;}
div.zweizwanzig:target		{visibility:visible;}


img.button4			{
				position:absolute;
				margin-left:290px; margin-top:340px; 
				}



.anzeigen9			{opacity:0;
					border:1px hidden green; 
					position:absolute; 
					margin-left:620px;   
					width:880px; height:484px;  
					background-image:url("bilder/wal2.png"); 
					animation:wal_er 2s linear normal forwards 1s; 
					}

@keyframes wal_er	{
					0%{opacity:0;}
					20%{opacity:0.2;}
					40%{opacity:0.4;}
					60%{opacity:0.6;}
					80%{opacity:0.8;}
					100%{opacity:1;}
					}


 .anzeigen9:hover	{
					border:1px hidden red; 
					position:absolute; 
					margin-left:620px;
					width:879px; height:482px; 
					background-image:url("bilder/wal_ernaehrung.png");  
					}	





.anzeigen10			{opacity:0;
					border:1px hidden green; 
					position:absolute; 
					margin-left:400px; margin-top:200px;  
					width:173px; height:182px;  
					background-image:url("bilder/krill1.png"); 
					animation:krill 2s linear normal forwards 3s; 
					}

@keyframes krill	{
					0%{opacity:0;}
					20%{opacity:0.2;}
					40%{opacity:0.4;}
					60%{opacity:0.6;}
					80%{opacity:0.8;}
					100%{opacity:1;}
					}


.anzeigen10:hover	{
					border:1px hidden green; 
					position:absolute; 
					margin-left:400px; margin-top:200px;  
					width:264px; height:307px;  
					background-image:url("bilder/krill2.png"); 
					}




div.unten1	{
			border:1px hidden green; 
			position:absolute; 
			margin-top:54px; 
			}
			
			
div.unten2	{
			border:1px hidden green; 
			position:absolute; 
			margin-top:595px; 
			}



div.unten3	{
			border:1px hidden green; 
			position:absolute; 
			margin-top:595px; margin-left:1400px;
			}



div.unten4	{
			border:1px hidden green; 
			position:absolute; 
			margin-left:1400px; margin-top:54px;
			}




div.unten7	{
			border:1px hidden green; 
			position:absolute; 
			margin-top:89px; 
			}

div.unten6	{
			border:1px hidden green; 
			position:absolute; 
			margin-top:89px; margin-left:1400px;
			}