/*	--------------------
		- BODY -
	-------------------- */

	html {
		background:url(images/dark1.jpg) no-repeat fixed;
		background-size:cover;
		max-height:100%;
		margin-bottom: 1px;
		-moz-background-size:cover;
     	-webkit-background-size:cover;
		}
		
	body {
		max-height:100%;
		text-align: center;
		overflow-y: scroll;
		}
				
	#wrapper {
		font-family:Helvetica, sans-serif;
		max-height: 100%;
		max-width: 100%;
		margin: 0 auto;
		height: 550px;
		}
				
	.clear {
		clear:both;
		}
		
	@-webkit-keyframes slide-up { 0% { -webkit-transform: translateY(-50px); } 100% { -webkit-transform: translateY(0px); } }
	@-moz-keyframes slide-up { 0% { -moz-transform: translateY(-50px); } 100% { -moz-transform: translateY(0px); } }
	@keyframes slide-up { 0% { transform: translateY(-50px); } 100% { transform: translateY(0px); } }
	
	@-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; } }	
	
/*  --------------------
		- NAV -
	-------------------- */
	
	.banner {
		/*opacity:0.5;*/
	  	position: fixed;
		background-color:#333;
		-webkit-box-shadow: 0px 10px 30px 10px rgba(102,204,255,0.50);
		-moz-box-shadow: 0px 10px 30px 10px rgba(102,204,255,0.50);
		box-shadow: 0px 10px 30px 10px rgba(102,204,255,0.50);
		height:50px;
		width:100%;
		z-index:1;
		
		-webkit-animation: slide-up 0.6s ease-in;
		-moz-animation: slide-up 0.6s ease-in;
		animation: slide-up 0.6s ease-in;
		
		-webkit-box-shadow: 0px 10px 30px 10px rgba(102,204,255,0.50);
		-moz-box-shadow: 0px 10px 30px 10px rgba(102,204,255,0.50);
		box-shadow: 0px 10px 30px 10px rgba(102,204,255,0.50);
		}
					
	ul	{
		color:#999999;
		list-style:none;
		font-size:20px;
		font-weight:100;

		-webkit-animation-delay: 1s;
		-moz-animation-delay: 1s;
		animation-delay: 1s;
		
		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:0.6s;
		-moz-animation-duration:0.6s;
		animation-duration:0.6s;
		
		-webkit-animation-delay: 0.6s;
		-moz-animation-delay: 0.6s;
		animation-delay: 0.6s;
		}
		
	ul, li {
		margin: 0;
		padding: 0;
		}
	
	nav a , a:visited, a:link {
		color:#999999;
		text-decoration:none;
		}


	.main_nav, li {
		max-width: 330px;
		margin: 0 auto;
		-o-transition: all 300ms ease-in, all 300ms ease-out;
		-ms-transition: all 300ms ease-in, all 300ms ease-out;
		-moz-transition: all 300ms ease-in, all 300ms ease-out;
		-webkit-transition: all 300ms ease-in, all 300ms ease-out;
		transition: all 300ms ease-in, all 300ms ease-out;
		}
		
		
	.main_nav li:hover {
		opacity: 1;
		-webkit-opacity: 1;
		-moz-opacity: 1;
		-o-transition: all 300ms ease-in, all 300ms ease-out;
		-ms-transition: all 300ms ease-in, all 300ms ease-out;
		-moz-transition: all 300ms ease-in, all 300ms ease-out;
		-webkit-transition: all 300ms ease-in, all 300ms ease-out;
		transition: all 300ms ease-in, all 300ms ease-out;
		}
	
	.main_nav li a {
		margin-top: 15px;
		float: left;
		text-decoration:none;
		-o-transition: all 300ms ease-in, all 300ms ease-out;
		-ms-transition: all 300ms ease-in, all 300ms ease-out;
		-moz-transition: all 300ms ease-in, all 300ms ease-out;
		-webkit-transition: all 300ms ease-in, all 300ms ease-out;
		transition: all 300ms ease-in, all 300ms ease-out;
		}

	.work {
		margin-left: 40%;
		}
		
	.contact {
		margin-left: 82.5%;
		}
			
	.main_nav li a:hover {
		text-decoration:none;
		color:lightblue;
		text-shadow:0px 0px 10px #66ccff;
		-o-transition: all 300ms ease-in, all 300ms ease-out;
		-ms-transition: all 300ms ease-in, all 300ms ease-out;
		-moz-transition: all 300ms ease-in, all 300ms ease-out;
		-webkit-transition: all 300ms ease-in, all 300ms ease-out;
		transition: all 300ms ease-in, all 300ms ease-out;
		}
				
	.main_nav li a:hover:after {
		text-decoration:none;
		display: block;
		}
	
	.active a:hover, .active a {
		color: lightblue;
		}
				-
	.active a:after {
		display: block;
		}

	.facebook {
		margin-top: 40px;
		font-size: 32px;
		font-family: signpainter;
		}

/*  --------------------
		- SECTION -
	-------------------- */

	.developer {
		font-weight:bold;
		color:white;
		font-size:16px;
		}

	.homepage, .graphic, .sound {
		font-weight:bold;
		color:lightblue;
		font-size:15px;
		}

	.online {
		font-weight: ;
		color:lightblue;
		}

	.field, .content {
		text-shadow: 2px 2px 4px #000;
		margin-top: 60px;
		margin-bottom: 20px;
		color:white;
		font-size:15px;
		}

	.content a, a:visited, a:link {
		color:#b5b6b6;
		text-decoration:none;
		}

	.content li {
		transition: transform 1s; /*Scale*/
		-o-transition: all 400ms ease-in, all 400ms ease-out;
		-ms-transition: all 400ms ease-in, all 400ms ease-out;
		-moz-transition: all 400ms ease-in, all 400ms ease-out;
		-webkit-transition: all 400ms ease-in, all 400ms ease-out;
		transition: all 400ms ease-in, all 400ms ease-out;
		}
		
	.content li:hover{
		transform: scale(1.3); /*Scale*/
		opacity: 1;
		-webkit-opacity: 1;
		-moz-opacity: 1;
		-o-transition: all 400ms ease-in, all 400ms ease-out;
		-ms-transition: all 400ms ease-in, all 400ms ease-out;
		-moz-transition: all 400ms ease-in, all 400ms ease-out;
		-webkit-transition: all 400ms ease-in, all 400ms ease-out;
		transition: all 400ms ease-in, all 400ms ease-out;
		}
	
	.content li a {
		text-decoration:none;
		-o-transition: all 400ms ease-in, all 400ms ease-out;
		-ms-transition: all 400ms ease-in, all 400ms ease-out;
		-moz-transition: all 400ms ease-in, all 400ms ease-out;
		-webkit-transition: all 400ms ease-in, all 400ms ease-out;
		transition: all 400ms ease-in, all 400ms ease-out;
		}
			
	.content li a:hover {
		text-decoration:none;
		color:lightblue;
		text-shadow:0px 0px 10px #66ccff;
		-o-transition: all 400ms ease-in, all 400ms ease-out;
		-ms-transition: all 400ms ease-in, all 400ms ease-out;
		-moz-transition: all 400ms ease-in, all 400ms ease-out;
		-webkit-transition: all 400ms ease-in, all 400ms ease-out;
		transition: all 400ms ease-in, all 400ms ease-out;
		}
				
	.content li a:hover:after {
		text-decoration:none;
		}

	/*.border {
		border: lightblue 1px solid;
		display: inline-block;
		height: auto;
		padding: 20px;
		}*/

	/*  --------------------
		- FOOTER -
		-------------------- */

	.imprint {
		margin-top: 240px;
		width: 100%;
		bottom: 0;	
		}

	.line {
		margin: 0 auto;
		max-width: 350px;
		content:"";
  		height:2px;
		background:-moz-linear-gradient(left, #333 0%,#66ccff 50%,#333 100%); 
		background:-webkit-linear-gradient(left, #333 0%,#66ccff 50%,#333 100%); 
		background:linear-gradient(left, #333 0%,#66ccff 50%,#333 100%);
		width:100%;
		display:block;
		margin-bottom: 20px;

		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:0.6s;
		-moz-animation-duration:0.6s;
		animation-duration:0.6s;
		
		-webkit-animation-delay: 0.6s;
		-moz-animation-delay: 0.6s;
		animation-delay: 0.6s;
		}

	.impressum a {
		font-weight: bold;
		font-size: 12px;
		color:#66ccff;
		}

	.impressum :hover {
		color: white;
		text-decoration:none;
		-o-transition: all 400ms ease-in, all 400ms ease-out;
		-ms-transition: all 400ms ease-in, all 400ms ease-out;
		-moz-transition: all 400ms ease-in, all 400ms ease-out;
		-webkit-transition: all 400ms ease-in, all 400ms ease-out;
		}

	.copyright {
		font-weight: bold;
		font-size: 12px;
		color:white;
		}