body {
	vertical-align: baseline;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}
#main-container {
	position: absolute;
	width: 298px;
	height: 248px;
	background-color: #000;
	overflow: hidden;
	border: 1px solid black;
}
#exit {
	position: absolute;
	cursor: pointer;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: block;
}

#bg{
	background: url('sprite.png') no-repeat 0 0;
	width:298px;
	height:248px;
	top:0px;
	left:0px;
	position:absolute;
}

#logo{
	position: absolute;
    top: 250px;
    left: 10px;
	background: url('sprite.png') no-repeat -20px -957px;
	width: 137px;
	height: 28px;
	z-index:2;
		
	-webkit-animation-name: logo_in;
	-webkit-animation-timing-function:easeOutExpo;
	-webkit-animation-delay:0.25s;
	-webkit-animation-duration:.5s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-fill-mode:forwards;
	
	-moz-animation-name: logo_in;
	-moz-animation-timing-function:easeOutExpo;
	-moz-animation-delay:0.25s;
	-moz-animation-duration:.5s;
	-moz-animation-iteration-count:1;
	-moz-animation-fill-mode:forwards;
	
	animation-name: logo_in;
	animation-timing-function:easeOutExpo;
	animation-delay:0.25s;
	animation-duration:.5s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}

@-webkit-keyframes logo_in {0% {top:250px;}100% {top:213px;}}
@-moz-keyframes logo_in {0% {top:250px;}100% {top:213px;}}
@keyframes logo_in {0% {top:250px;}100% {top:213px;}}

#text1{
	position:absolute;
	top:10px;
	left:300px;
	background: url('sprite.png') no-repeat -13px -401px;
	width: 148px;
	height: 102px;
	opacity:1;
	z-index:2;
	
	-webkit-animation-name: text1_in,text1_FadeOut;
	-webkit-animation-timing-function:easeOutExpo;
	-webkit-animation-delay:1s,3s;
	-webkit-animation-duration:.5s,.5s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-fill-mode:forwards;
	
	-moz-animation-name: text1_in,text1_FadeOut;
	-moz-animation-timing-function:easeOutExpo;
	-moz-animation-delay:1s,3s;
	-moz-animation-duration:.5s,.5s;
	-moz-animation-iteration-count:1;
	-moz-animation-fill-mode:forwards;
	
	animation-name: text1_in,text1_FadeOut;
	animation-timing-function:easeOutExpo;
	animation-delay:1s,3s;
	animation-duration:.5s,.5s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}

@-webkit-keyframes text1_in {0% {left:300px}100% {left:12px}}
@-moz-keyframes text1_in {0% {left:300px}100% {left:12px}}
@keyframes text1_in {0%{left:300px}100% {left:12px}}
	
@-webkit-keyframes text1_FadeOut {0% {opacity:1}100% {opacity: 0;}}
@-moz-keyframes text1_FadeOut {0% {opacity:1}100% {opacity: 0;}}
@keyframes text1_FadeOut {0% {opacity:1}100% {opacity: 0;}}

#people{
	position:absolute;
	top:14px;
	left:300px;
	background: url('sprite.png') no-repeat -7px -1005px;
	width: 162px;
	height: 237px;
	opacity:1;
	z-index:2;
	
	-webkit-animation-name: text1_in1;
	-webkit-animation-timing-function:easeOutExpo;
	-webkit-animation-delay:3.2s;
	-webkit-animation-duration:.5s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-fill-mode:forwards;
	
	-moz-animation-name: text1_in1;
	-moz-animation-timing-function:easeOutExpo;
	-moz-animation-delay:3.2s;
	-moz-animation-duration:.5s;
	-moz-animation-iteration-count:1;
	-moz-animation-fill-mode:forwards;
	
	animation-name: text1_in1;
	animation-timing-function:easeOutExpo;
	animation-delay:3.2s;
	animation-duration:.5s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}

@-webkit-keyframes text1_in1 {0% {left:300px}100% {left:138px}}
@-moz-keyframes text1_in1 {0% {left:300px}100% {left:138px}}
@keyframes text1_in1 {0%{left:300px}100% {left:139px}}


#text2{
	position:absolute;
	background: url('sprite.png') no-repeat -13px -522px;
	width: 147px;
	height: 102px;
	top:10px;
	left:300px;
	opacity:0;
	z-index:2;
		
   -webkit-animation-name: text2_in,text2_FadeOut;
	-webkit-animation-timing-function:easeOutExpo;
	-webkit-animation-delay:4s,6s;
	-webkit-animation-duration:.5s,.5s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-fill-mode:forwards;
	
	-moz-animation-name: text2_in,text2_FadeOut;
	-moz-animation-timing-function:easeOutExpo;
	-moz-animation-delay:4s,6s;
	-moz-animation-duration:.5s,.5s;
	-moz-animation-iteration-count:1;
	-moz-animation-fill-mode:forwards;
	
	animation-name: text2_in,text2_FadeOut;
	animation-timing-function:easeOutExpo;
	animation-delay:4s,6s;
	animation-duration:.5s,.5s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}

@-webkit-keyframes text2_in {0% {left:300px;opacity:1;}100% {left:12px;opacity:1;}}
@-moz-keyframes text2_in {0% {left:300px;opacity:1;}100% {left:12px;opacity:1;}}
@keyframes text2_in {0% {left:300px;opacity:1;}100% {left:12px;opacity:1;}}

@-webkit-keyframes text2_FadeOut {0% {opacity:1}100% {opacity: 0;}}
@-moz-keyframes text2_FadeOut {0% {opacity:1}100% {opacity: 0;}}
@keyframes text2_FadeOut {0% {opacity:1}100% {opacity: 0;}}


#CTA{
    position: absolute;
	background: url('sprite.png') no-repeat -19px -898px;
	width: 122px;
	height: 27px;
    left: 12px;
    top: 169px;
    opacity: 0;
	z-index:2;
		
	-webkit-animation-name:CTA_in;
	-webkit-animation-timing-function:easeOutExpo;
	-webkit-animation-delay:4.5s;
	-webkit-animation-duration:.5s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-fill-mode:forwards;
	
	-moz-animation-name:CTA_in;
	-moz-animation-timing-function:easeOutExpo;
	-moz-animation-delay:4.5s;
	-moz-animation-duration:.5s;
	-moz-animation-iteration-count:1;
	-moz-animation-fill-mode:forwards;
	
	animation-name:CTA_in;
	animation-timing-function:easeOutExpo;
	animation-delay:4.5s;
	animation-duration:.5s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}

	@-webkit-keyframes CTA_in {0% {opacity:0;}100% {opacity:1;}}
	@-moz-keyframes CTA_in {0% {opacity:0;}100% {opacity:1;}}
	@keyframes CTA_in {0% {opacity:0;}100% {opacity:1;}}

#text3{
	
    position: absolute;
	background: url('sprite.png') no-repeat -14px -645px;
	width: 148px;
	height: 103px;
	left:300px;
	top:10px;
	opacity:0;
	z-index:2;
		
	-webkit-animation-name: text3_in;
	-webkit-animation-timing-function:easeOutExpo;
	-webkit-animation-delay:7s;
	-webkit-animation-duration:.5s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-fill-mode:forwards;
	
	-moz-animation-name: text3_in;
	-moz-animation-timing-function:easeOutExpo;
	-moz-animation-delay:7s;
	-moz-animation-duration:.5s;
	-moz-animation-iteration-count:1;
	-moz-animation-fill-mode:forwards;
	
	animation-name: text3_in;
	animation-timing-function:easeOutExpo;
	animation-delay:7s;
	animation-duration:.5s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}  

@-webkit-keyframes text3_in {0% {left:300px;opacity:1;}100% {left:10px;opacity:1;}}
@-moz-keyframes text3_in {0% {left:300px;opacity:1;}100% {left:10px;opacity:1;}}
@keyframes text3_in {0% {left:300px;opacity:1;}100% {left:10px;opacity:1;}}