/* basic */
* {margin:0; padding:0; border:0;}
body{
	width:  100%;
	height: 100%;
	margin: 0 auto;	
	font:62.5%/1.8em "calibri", verdana, arial, sans-serif;	
}

p { text-align:center;font-size:1.8em;color:#41474c;line-height:1.8em; margin-top:30px; font-weight:600;}
a {color:#ffcfc2; text-decoration:none;}
a:hover {text-decoration:underline; color:#fff;}

.noBorder {	border:0!important;}
.noMargin {	margin:0!important;}


/* state masc */

.animate-it{
			width: 100%; height: 1000px;
			background-color:#f16c49;		
			
			-webkit-animation: colors 8s alternate ease-in-out;	
			-moz-animation: colors 9s alternate ease-in-out;	
			-ms-animation: colors 9s alternate ease-in-out;	
			-o-animation: colors 9s alternate ease-in-out;	
			animation: colors 9s;	
		}
		
		@-webkit-keyframes colors {
			0% {background-color:#fff;}
			15% {background-color:#089a08;} 		
			25% {background-color:#f1df49;} 		
			35% {background-color:#49a0f1;}	
			45%  {background-color:#b449f1;} 	
			55% {background-color:#f64949;}	
			65% {background-color:#f16c49;}
			100% {background-color:#f16c49;}
		}
/*rot #f64949*/	
/*lila #b449f1*/
/*lila-pink #f149ef*/
/*blau #4949f1*/
/*hellblau #49a0f1*/
/*türkis #49f1c0*/
/*grün #089a08*/
/*gelb #f1df49*/
		@-moz-keyframes colors {
			0% {background-color:#fff;}
			15% {background-color:#089a08;} 		
			25% {background-color:#f1df49;} 		
			35% {background-color:#49a0f1;}	
			45%  {background-color:#b449f1;} 	
			55% {background-color:#f64949;}	
			65% {background-color:#f16c49;}
			100% {background-color:#f16c49;}
		}
		@-o-keyframes colors {
			0% {background-color:#fff;}
			15% {background-color:#089a08;} 		
			25% {background-color:#f1df49;} 		
			35% {background-color:#49a0f1;}	
			45%  {background-color:#b449f1;} 	
			55% {background-color:#f64949;}	
			65% {background-color:#f16c49;}
			100% {background-color:#f16c49;}
		}
		@-ms-keyframes colors {
			0% {background-color:#fff;}
			15% {background-color:#089a08;} 		
			25% {background-color:#f1df49;} 		
			35% {background-color:#49a0f1;}	
			45%  {background-color:#b449f1;} 	
			55% {background-color:#f64949;}	
			65% {background-color:#f16c49;}
			100% {background-color:#f16c49;}
		}
		@keyframes colors {
			0% {background-color:#fff;}
			15% {background-color:#089a08;} 		
			25% {background-color:#f1df49;} 		
			35% {background-color:#49a0f1;}	
			45%  {background-color:#b449f1;} 	
			55% {background-color:#f64949;}	
			65% {background-color:#f16c49;}
			100% {background-color:#f16c49;}
		}

#stage{
	position:relative;
	width: 70em; height:40em;
	border:none;
	overflow:hidden;
	margin: 0 auto;	
}

/* position  */
#stage .position{
	position:absolute;
	top: 70px; left: 0;
}

/* background images */

#stage .logo {
	width: 243px; height:227px;
	margin: 45px 230px;
	background: url('../imgs/logo.png') no-repeat;
}


#stage .cast{
	width: 40px; height:40px;
	background-image: url('../imgs/cast.png');
	-webkit-transform: translate(325px, 76px);
	-moz-transform: translate(325px, 76px);
	-ms-transform: translate(325px, 76px);
	-o-transform: translate(325px, 76px);
	transform: translate(325px, 76px);
}


/* animations */

#stage .logo-ani{
	-webkit-animation:  infinite-image 25s ease-in-out 1;
	-moz-animation: infinite-image 25s linear 1;
	-ms-animation: infinite-image 25s linear 1;
	-o-animation: infinite-image 25s linear 1;
	animation: infinite-image 25s linear 1;
}

#stage .cast-ani {
	-webkit-animation: flyCast 8s ease-in-out 1;	
	-moz-animation: flyCast 8s ease-in-out 1;	
	-ms-animation: flyCast 8s ease-in-out 1;
	-o-animation: flyCast 8s ease-in-out 1;	
	animation: flyCast 8s ease-in-out 1;	
}

/* state helper */

.paused {
	-webkit-animation-play-state:paused;
	-o-animation-play-state:paused;
   	-moz-animation-play-state:paused;
  	animation-play-state: paused;
}

@-webkit-keyframes infinite-image {
	50% { center: 100%;}
	0% { -webkit-transform: scale(1.0);}
	100% { center: 100%;}
}
@-webkit-keyframes flyCast {
	0% {-webkit-transform: translate(392px, 194px)scale(0) rotate(0deg)}
	20% {-webkit-transform: translate(392px, 194px)scale(0) rotate(0deg)}
	30% {-webkit-transform: translate(392px, 194px)scale(0) rotate(0deg)}
	60% {-webkit-transform: translate(392px, 194px)scale(0) rotate(0deg)}
	80% {-webkit-transform: translate(392px, 197px)scale(0.68) rotate(0deg)}
	90% { -webkit-transform: translate(328px, 280px) scale(1.2) rotate(-35deg)}
	100% {-webkit-transform: translate(325px, 76px)scale(1) rotate(0deg)}
	/*60% {-webkit-transform: translate(600px, 50px)scale(0.6) rotate(35deg)}
	85% {-webkit-transform: translate(300px, 220px)scale(1) rotate(15deg)}
	100% {-webkit-transform: translate(100px, 200px) rotate(0deg)}*/
}
@-moz-keyframes infinite-image {
	50% { center: 100%;}
	0% { -moz-webkit-transform: scale(1.0);}
	100% { center: 100%;}
}
@-moz-keyframes flyCast {
	0% {-moz-webkit-transform: translate(392px, 194px)scale(0) rotate(0deg)}
	20% {-moz-webkit-transform: translate(392px, 194px)scale(0) rotate(0deg)}
	30% {-moz-webkit-transform: translate(392px, 194px)scale(0) rotate(0deg)}
	60% {-moz-webkit-transform: translate(392px, 194px)scale(0) rotate(0deg)}
	80% {-moz-webkit-transform: translate(392px, 197px)scale(0.68) rotate(0deg)}
	90% { -moz-webkit-transform: translate(328px, 280px) scale(1.2) rotate(-35deg)}
	100% {-moz-webkit-transform: translate(325px, 76px)scale(1) rotate(0deg)}
}
@-o-keyframes infinite-image {
	50% { center: 100%;}
	0% { -o-webkit-transform: scale(1.0);}
	100% { center: 100%;}
}
@-o-keyframes flyCast {
	0% {-o-webkit-transform: translate(392px, 194px)scale(0) rotate(0deg)}
	20% {-o-webkit-transform: translate(392px, 194px)scale(0) rotate(0deg)}
	30% {-o-webkit-transform: translate(392px, 194px)scale(0) rotate(0deg)}
	60% {-o-webkit-transform: translate(392px, 194px)scale(0) rotate(0deg)}
	80% {-o-webkit-transform: translate(392px, 197px)scale(0.68) rotate(0deg)}
	90% { -o-webkit-transform: translate(328px, 280px) scale(1.2) rotate(-35deg)}
	100% {-o-webkit-transform: translate(325px, 76px)scale(1) rotate(0deg)}
}
@keyframes infinite-image {
	50% { center: 100%;}
	0% {transform: scale(1.0);}
	100% { center: 100%;}
}
@keyframes flyCast {
	0% {transform: translate(392px, 194px)scale(0) rotate(0deg)}
	20% {transform: translate(392px, 194px)scale(0) rotate(0deg)}
	30% {transform: translate(392px, 194px)scale(0) rotate(0deg)}
	60% {transform: translate(392px, 194px)scale(0) rotate(0deg)}
	80% {transform: translate(392px, 197px)scale(0.68) rotate(0deg)}
	90% {transform: translate(328px, 280px) scale(1.2) rotate(-35deg)}
	100% {transform: translate(325px, 76px)scale(1) rotate(0deg)}
}