@charset "utf-8";
/* CSS Document */

html, body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
background-color: #888;
}
#contentWrapper {
height: 420px;
width: 420px;
overflow: hidden;
margin: 150px auto;
padding: 0px;
background-color: #000;
}
#slideWrapper {
height: 400px;
width: 400px;
overflow: hidden;
margin: 10px;
padding: 0px;
background-color: #999;
}
#slideReel {
height: 400px;
width: 2400px;
margin: 0px;
padding: 0px;
background-color: #333;
-webkit-animation-play-state: running;
-webkit-animation-name: slideIt;
-webkit-animation-duration: 12000ms;
-webkit-transform-origin: 50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
/* Resume the slideshow 
#slideReel:hover{
	margin-left:-400px;
}
*/

.slide {
float: left;
height: 400px;
width: 400px;
margin: 0px;
padding: 0px;
background-color: #FFF;
}
#contentWrapper:hover #slideReel {
-webkit-animation-play-state: paused;
}
 @-webkit-keyframes slideIt {
 0% {
-webkit-transform: translate(0px);
}
 5% {
-webkit-transform: translate(0px);
}
 20% {
-webkit-transform: translate(-400px);
}
 40% {
-webkit-transform: translate(-800px);
}
 60% {
-webkit-transform: translate(-1200px);
}
 80% {
-webkit-transform: translate(-1600px);
}
 100% {
-webkit-transform: translate(-2000px);
}
}
#slide1 {
background-image: url(images/img1.jpg);
}
#slide2 {
background-image: url(images/img2.jpg);
}
#slide3 {
background-image: url(images/img3.jpg);
}
#slide4 {
background-image: url(images/img4.jpg);
}
#slide5 {
background-image: url(images/img5.jpg);
}