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

@font-face {
    font-family: 'amatic';
    src: url('./font/amatic/amaticsc-regular-webfont.eot');
    src: url('./font/amatic/amaticsc-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('./font/amatic/amaticsc-regular-webfont.woff') format('woff'),
         url('./font/amatic/amaticsc-regular-webfont.ttf') format('truetype'),
         url('./font/amatic/amaticsc-regular-webfont.svg#amatic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'clarendon';
    src: url('./font/clarendon/clar45w-webfont.eot');
    src: url('./font/clarendon/clar45w-webfont.eot?#iefix') format('embedded-opentype'),
         url('./font/clarendon/clar45w-webfont.woff') format('woff'),
         url('./font/clarendon/clar45w-webfont.ttf') format('truetype'),
         url('./font/clarendon/clar45w-webfont.svg#clarendon') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::: RESET  :::::::::::::::::::::::::::::::::::::::::::::::::::::*/

    * {
      padding:0;
      margin:0;
    }
    
    html, body {
      height:100%;
      width:100%;
	  min-width:600px;
      display:flex;
      flex-direction:column;
	  font-size:100.1%;
	  background-image:url('../bg-footer-repeat.gif');background-size:cover;
	   background-repeat:repeat;
    }

    
    body > * {
      flex-shrink: 0;
    }
    
#main {position:relative;
  background-color: yellow;
	width:100%;
	background:url('../bg-images/leer.jpg') no-repeat top left;
	background-size:100%;
	background-position:bottom;
    }
    
			#header{
			z-index:2;
			width:100%;
			text-align:center;
			position:absolute; top:0;
			}
			
					h1{/*Alte Lieder - neue deutsche Weltmusik*/
						font-size:1.7em;
						font-family:'amatic', Arial Narrow, Helvetica, sans-serif;
							color:#FFFFFF;
						font-stretch:extra-expanded;
						text-shadow: 0px 0px 8px #000000; color:#F9F9F9;}
					
					h3{/* SAMMANT */
						font-family:'amatic', Arial, Helvetica, sans-serif;
						font-size:5.3em;font-weight:normal;
						color:#FFFFFF;
						margin-top:0.5em;
						text-shadow: 0px 0px 8px #000000; color:#F9F9F9;}
			
			#nav{z-index:4;position:absolute;width:8.5em;top:-0.2em;left:75%;
				background-image:url(../menu.gif);background-position:bottom;background-repeat:no-repeat;
				background-size:cover;
				text-align:center;
				transition: all 1s;
				-moz-transition: all 1s;
				-ms-transition: all 1s;
				-webkit-transition: all 1s;
				-o-transition: all 1s;
				box-shadow: -1px -10px 8px 3px rgba(0, 0, 0, 0.2)  ;
				  -moz-box-shadow: -1px -10px 8px 3px rgba(0, 0, 0, 0.2)  ;
				  -webkit-box-shadow: -1px -10px 8px 3px rgba(0, 0, 0, 0.2)  ;}
				  
				
			#nav:hover {
				transform:translate(0,15em);
				-moz-transform:translate(0,15em);
				-ms-transform:translate(0,15em);
				-webkit-transform:translate(0,15em);
				-o-transform:translate(0,15em);
				}
				
			#nav ul{padding-top:1.5em;}
				
			#nav ul li{margin:0.3em;
				font-family:'amatic', Arial Narrow, Arial, sans-serif;
				color:#FFFFFF;
				text-shadow: 0px 0px 8px #000000; color:#F9F9F9;
				font-size:1.5em; font-weight:normal;
				font-stretch:expanded;
				list-style:none;}
			

#footer {position:relative;
		z-index:3;
      background-image:url(../bg-footer.gif);background-repeat:no-repeat;background-size:cover;
      flex-grow: 1;
	  	
		height:100%;
		margin-top:-35%;
		padding:3em;
		text-align:center;
		
				transition: all 1s;
				-moz-transition: all 1s;
				-ms-transition: all 1s;
				-webkit-transition: all 1s;
				-o-transition: all 1s;
    }
	
#footwrap{
width:100%;
margin:0 auto;
padding:2em 0;
}
	
/*:::::::::::::::::::: STARTSEITEN-ANIMATION ::::::::::::::::::::::::::::::::::::::*/

/*____________________ Personen-Klickbereiche und deren Rahmen (bgs ber Script!)________________________*/

#bereiche{
z-index:1;
position:relative;top:0;left:0;
height:0;
width:100%;
margin:0;
padding-top:54%;
	background:url('../bg-images/bg.jpg') no-repeat top left;
	background-size:100%;
	background-position:bottom;
		opacity:0;
		-webkit-transition: opacity 0.4s ease-in-out;
		-moz-transition: opacity 0.4s ease-in-out;
		-o-transition: opacity 0.4s ease-in-out;
		-ms-transition: opacity 0.4s ease-in-out;    
		transition: opacity 0.4s ease-in-out;}

			#ringsrum{width:100%;height:100%;position:absolute; top:0;left:0;z-index:6;cursor:auto;}
			#nilslink{width:12%;height:32%;position: absolute; top:38%;left:6%;z-index:6;cursor:pointer;}
			#kaylink{width:11%;height:35%;position: absolute; top:25%;left:18%;z-index:6;cursor:pointer;}
			#monikalink{width:10%;height:35%;position: absolute; top:29%;left:38%;z-index:6;cursor:pointer;}
			#josephinelink{width:13%;height:30%;position: absolute; top:52%;left:48%;z-index:6;cursor:pointer;}
			#sebastianlink{width:13%;height:35%;position: absolute; top:46%;left:61%;z-index:6;cursor:pointer;}
			#burkhardlink{width:14%;height:33%;position: absolute; top:33%;left:70%;z-index:6;cursor:pointer;}
			#claudialink{width:12%;height:30%;position: absolute; top:53%;left:84%;z-index:6;cursor:pointer;}
			

/*________________________Beschreibungsfelder zu den Personen__________________________________*/

.followerb, .follower{width:7em;position:absolute;z-index:5;
font-family:'amatic', Arial Narrow, Helvetica, sans-serif;
text-shadow: 1px 1px 4px #000000; color:#F9F9F9;
font-size:2em;
text-align:center;
	}
	
#nilstext, #kaytext, #monikatext, #josephinetext, #sebastiantext, #burkhardtext, #claudiatext{
opacity:0;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;    
    transition: opacity 0.3s ease-in-out;
}
	
/*::::::::::::::::::::  FIXE BEREICHE  ::::::::::::::::::::::::::::::::::::::::*/
#neues{
z-index:7;
width:auto;
position:fixed;bottom:0;left:15%;
background-image:url(../menu.gif);background-position:top;background-repeat:no-repeat;background-size:cover;
text-align:center;
				box-shadow: -1px 20px 8px 3px rgba(0, 0, 0, 0.2)  ;
				  -moz-box-shadow: -1px 20px 8px 3px rgba(0, 0, 0, 0.2)  ;
				  -webkit-box-shadow: -1px 20px 8px 3px rgba(0, 0, 0, 0.2)  ;
}

/*::::::::::::::::::::  TYPO  ::::::::::::::::::::::::::::::::::::::::*/

body, #footer{font-familiy:'clarendon', Arial, sans-serif;
font-size:normal;}

a {text-decoration:none;}
a:hover{text-decoration:none;color:#000000;}
a:visited{text-decoration:none;color:#FFFFCC;}

			#neues a, #nav ul li a{color:#FFFFFF;}
			#neues a:hover, #nav ul li a:hover{color:#000000;}

			#footer a{text-decoration:none;
			color:#654E2E;}
			#footer a:hover{text-decoration:underline;}

h2{font-family:'amatic', Arial, Helvetica, sans-serif;
font-size:2em;
font-stretch:extra-expanded;}

/*:::::::::::::::::::::: EINZELSEITEN :::::::::::::::::::::::::::::::::::*/

.doku{
width: 22%; min-width:250px; height: 280px; float:left; margin:0.5em; padding:0.5em; padding-top:1.5em;  background:url(../papier.jpg); background-size:cover;
}
.dokudatum{font-size:small; color:#807053;}
.dokuinfo{margin:0.5em 1em;}
iframe{border:2px solid white;}