html, body { height: 100%; }

body {
	border-top: 3px solid #33ff33; 
	/*
	background:url(../img/pool/skin_side_up.png) repeat;
	*/
}

/****************** Balli Seite ******************/

#content { position: relative; max-width:1400px; margin:30px auto; padding:10px 30px; }

#maincontent {
	z-index: 2;
	position: absolute;
	top: 0px;
	left: 50%;
	right: 50%;
	margin-left: -694px;
    width: 1388px;
	height: 1300px;
	}
		
#maincontent a { 
	display:block; 
	background-image:url(../img/pool/balli_zu.jpg);
	background-size: 100% auto;
    width: 100%;
	height: 100%; 
    }
#maincontent a:hover {
	background-image:url(../img/pool/balli_offen.jpg); 
	}

.text {
	z-index: 0;
	position:absolute;
	text-align: center; 
	top: 50%;
    left: 50%;
    margin-left: -200px;
	width:400px;
	height:500px;
	font-family: Helvetica, Arial; 
	font-size: 0.7em;
	line-height: 1.2em;
	color:#ffffff;
}


/****************** Brain Seite ******************/

/* Langsames Einblenden */

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* Erst unsichtbar, dann Name vergeben für keyframe und diesen nur einmal wiederholen */
	 
.fade {
	opacity:0;
	-webkit-animation:fadeIn ease-in 1;
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	 
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
	}
	
	
/* Seite und Objekte */

#braincontent {
	position: relative;
    min-height: 100%;
	height: auto !important;
	height: 100%;
	max-width: 1200px;
	margin: 0px auto -3em;
} 

#menue {
	z-index: 2;
	position: absolute;
	top: 50px;
	left: 50%;
	right: 50%;
	margin-left: -500px;
    width: 1000px;
	height: 560px;
	-webkit-filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
	-moz-filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
	-ms-filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
	-o-filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
	filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
	}
		
.brain {
	position: relative;
	top: 80px;
	left: 50%;
	right: 50%;
	margin-left: -500px;
	background:url(../img/pool/bg_brain.jpg) no-repeat center center;
	width:1000px;
	height:560px;
}

.link_news {
	z-index: 11;
	position:absolute;
	top: 340px;
	left: 14px;
	width:200px;
	height:80px;
}

.link_photography {
	z-index: 12;
	position:absolute;
	top: 20px;
	left: 700px;
	width:200px;
	height:80px;
}

.link_graphic {
	z-index: 12;
	position:absolute;
	top: 200px;
	left: 780px;
	width:200px;
	height:80px;
}

.link_illustration {
	z-index: 12;
	position:absolute;
	top: 20px;
	left: 72px;
	width:200px;
	height:80px;
}

.link_retrospective {
	z-index: 12;
	position:absolute;
	top: 200px;
	left: 0px;
	width:200px;
	height:80px;
}

.link_about {
	z-index: 13;
	position:absolute;
	top: 338px;
	left: 788px;
	width:200px;
	height:80px;
}

.link_clients {
	z-index: 14;
	position:absolute;
	top: 494px;
	left: 712px;
	width:200px;
	height:80px;
}

.link_contact {
	z-index: 15;
	position:absolute;
	top: 502px;
	left: 104px;
	width:200px;
	height:80px;
}

.abstand {
	z-index: 1;
    position: relative; 
   	float: left; 
    margin: 40px; 
}



/******  Footer *************************************/

.footer {
	z-index: 12;
	position: relative;
	height: 3em;
	bottom: 0px;
    width: 100%;
    clear: both;
    opacity: 0.6;
    background:url(../img/pool/debut_light.png) repeat;
	-webkit-box-shadow: 0 -1px 3px rgba(0,0,0,.1); 
	-moz-box-shadow: 0 -1px 3px rgba(0,0,0,.1); 
	-o-box-shadow: 0 -1px 3px rgba(0,0,0,.1); 
	box-shadow: 0 -1px 3px rgba(0,0,0,.1); 
}

.footer a {
    color:#666;
    text-decoration:none;
}

.footer a:hover {
    color:#000;
    opacity: 1.0;
}

.footer p {
	margin: 0 auto;
    max-width: 1188px;
    padding:16px 0;
	color:#666;
	text-align: center; 
	font-family: Arial; 
	font-size: 0.62em;
	letter-spacing:0.03em; 
}



/****************** Clear ******************/

.clearfix { 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
}
						
.details { 
	margin:15px 20px; 
}	

* {
	margin:0;
	padding:0;
	border:none;
	outline:none;
}


/****************** 1441 - 1920 Screen ******************/

@media only screen and (min-device-width: 1441px) and (max-device-width: 1920px) {
#content { max-width:1260px; margin:30px auto; padding:10px 30px; }
#maincontent {
	margin-left: -501px;
    width: 1002px;
	height: 938px;
	}
}

/****************** 1025 - 1440 Screen ******************/

@media only screen and (min-device-width: 1025px) and (max-device-width: 1440px) and (orientation: landscape) {
#content { max-width:1000px; margin:30px auto; padding:10px 30px; }
#maincontent {
	margin-left: -380px;
    width: 760px;
	height: 712px;
	}
}

/****************** 1024 Screen ******************/

@media only screen and (max-width: 1024px) {
#content { max-width:740px; margin:30px auto; padding:10px 30px; }
#maincontent {
	margin-left: -316px;
    width: 632px;
	height: 592px;
	}
#menue {
	z-index: 2;
	position: absolute;
	top: 0px;
	left: 50%;
	right: 50%;
	margin-left: -320px;
    width: 680px;
	height: 540px;
	}	
.brain {
	position: relative;
	top: 30px;
	left: 50%;
	right: 50%;
	margin-left: -300px;
	background:url(../img/pool/bg_brain-small.png) no-repeat center center;
	width:600px;
	height:470px;
}
.link_news {
	top: 320px;
	left: 0px;
}
.link_photography {
	top: 20px;
	left: 400px;
}
.link_graphic {
	top: 184px;
	left: 466px;
}
.link_illustration {
	top: 20px;
	left: 42px;
}
.link_retrospective {
	top: 182px;
	left: 0px;
}
.link_about {
	top: 300px;
	left: 478px;
}
.link_clients {
	top: 438px;
	left: 388px;
}
.link_contact {
	top: 448px;
	left: 70px;
}
}