/* setup the responsive size of the container */
/* set the max-width to the actual width of the images and the width to the size when the browser width is less than the max-width */
/* margin:0 auto; centers the slideshow */
.slide {width:95%; max-width:480px; margin:0 auto; position:relative; overflow:hidden; border:0px solid #000;}

/* position the images and make them 100% width, display:block is used to remove the bottom padding that some browsers add to the images */
.slide img {position:absolute; top:0; right:-100%; width:100%; display:block;}

/* make the first image position:relative; to set the responsive height of the slideshow */
.slide img:first-child {position:relative;} 

/* the animation for each slide */
/* each slide is shown for 6 seconds and the total time for the 8 slides is 48 seconds with each slide delayed 6 seconds after the previous slide */
/* we need two animations for each image, one for Chrome, Safari and Opera, and the other for Firefox and Internet Explorer */
.slide img:nth-of-type(1) {-webkit-animation:autoplay 15s linear infinite 0s; animation:autoplay 15s linear infinite 0s;} 
.slide img:nth-of-type(2) {-webkit-animation:autoplay 15s linear infinite 3s; animation:autoplay 15s linear infinite 3s;}
.slide img:nth-of-type(3) {-webkit-animation:autoplay 15s linear infinite 6s; animation:autoplay 15s linear infinite 6s;}
.slide img:nth-of-type(4) {-webkit-animation:autoplay 15s linear infinite 9s; animation:autoplay 15s linear infinite 9s;}
.slide img:nth-of-type(5) {-webkit-animation:autoplay 15s linear infinite 12s; animation:autoplay 15s linear infinite 12s;}

/* animation keyframes one for Firefox and Internet Explorer, the other for Chrome, Safari and Opera */
/* the show time for each slide is 100/8 = 12.5% of the total time */
/* the slide in time is 1% and the slide out time is 12.5% + 1% = 13.5% */
/* you can adjust the slide in and out time to make it faster or slower */

@keyframes autoplay {
0% {right:-100%;}
1%, 20% {right:0;}
21%, 100% {right:100%;}
}
@-webkit-keyframes autoplay {
0% {right:-100%;}
1%, 20% {right:0;}
21%, 100% {right:100%;}
}