@import url("animation.css") screen;

/* CONTENT SLIDER */
#content-slider {	width:100%;	height:250px;	margin:10px auto 0;}

/* SLIDER */
#slider {	height:250px;	width:auto;	margin:10px auto 0;	overflow:visible;	position:relative;}
#mask {	overflow:hidden;	height:250px;}
#slider ul {	margin:0;	padding:0;	position:relative;}
#slider li {	width:autopx;	height:250px;	position:absolute;	top:-325px;	list-style:none;}
#slider li.firstanimation {	-moz-animation:cycle 25s linear infinite;		-webkit-animation:cycle 25s linear infinite;		}
#slider li.secondanimation {	-moz-animation:cycletwo 25s linear infinite;	-webkit-animation:cycletwo 25s linear infinite;		}
#slider li.thirdanimation {	-moz-animation:cyclethree 25s linear infinite;	-webkit-animation:cyclethree 25s linear infinite;		}
#slider li.fourthanimation {	-moz-animation:cyclefour 25s linear infinite;	-webkit-animation:cyclefour 25s linear infinite;		}
#slider li.fifthanimation {	-moz-animation:cyclefive 25s linear infinite;	-webkit-animation:cyclefive 25s linear infinite;		}
#slider .tooltip {	
background:rgba(0,0,0,0.7);	
width:300px;	height:60px;	
position:relative;	
bottom:75px;	
left:-320px;	
-moz-transition:all 0.3s ease-in-out;	
-webkit-transition:all 0.3s ease-in-out;  }
#slider .tooltip h1 {	
color:#fff;	
font-size:24px;	
font-weight:300;	
line-height:60px;	
padding:0 0 0 20px;}
#slider li#first:hover .tooltip, 
#slider li#second:hover .tooltip, 
#slider li#third:hover .tooltip, 
#slider li#fourth:hover .tooltip, 
#slider li#fifth:hover .tooltip {	left:0px;}
#slider:hover li, #slider:hover .progress-bar {	
-moz-animation-play-state:paused;	
-webkit-animation-play-state:paused;}

/* PROGRESS BAR */
.progress-bar { 	
position:relative;	
top:-5px; 	
height:5px;	
background:#090;	
-moz-animation:fullexpand 25s ease-out infinite;	
-webkit-animation:fullexpand 25s ease-out infinite;}