/* 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(01) {-webkit-animation:autoplay 60s linear infinite 0s; animation:autoplay 60s linear infinite 0s;} 
.slide img:nth-of-type(02) {-webkit-animation:autoplay 60s linear infinite 2s; animation:autoplay 60s linear infinite 2s;}
.slide img:nth-of-type(03) {-webkit-animation:autoplay 60s linear infinite 4s; animation:autoplay 60s linear infinite 4s;}
.slide img:nth-of-type(04) {-webkit-animation:autoplay 60s linear infinite 6s; animation:autoplay 60s linear infinite 6s;}
.slide img:nth-of-type(05) {-webkit-animation:autoplay 60s linear infinite 8s; animation:autoplay 60s linear infinite 8s;}
.slide img:nth-of-type(06) {-webkit-animation:autoplay 60s linear infinite 10s; animation:autoplay 60s linear infinite 10s;}
.slide img:nth-of-type(07) {-webkit-animation:autoplay 60s linear infinite 12s; animation:autoplay 60s linear infinite 12s;}
.slide img:nth-of-type(08) {-webkit-animation:autoplay 60s linear infinite 14s; animation:autoplay 60s linear infinite 14s;}
.slide img:nth-of-type(09) {-webkit-animation:autoplay 60s linear infinite 16s; animation:autoplay 60s linear infinite 16s;}
.slide img:nth-of-type(10) {-webkit-animation:autoplay 60s linear infinite 18s; animation:autoplay 60s linear infinite 18s;}
.slide img:nth-of-type(11) {-webkit-animation:autoplay 60s linear infinite 20s; animation:autoplay 60s linear infinite 20s;} 
.slide img:nth-of-type(12) {-webkit-animation:autoplay 60s linear infinite 22s; animation:autoplay 60s linear infinite 22s;}
.slide img:nth-of-type(13) {-webkit-animation:autoplay 60s linear infinite 24s; animation:autoplay 60s linear infinite 24s;}
.slide img:nth-of-type(14) {-webkit-animation:autoplay 60s linear infinite 26s; animation:autoplay 60s linear infinite 26s;}
.slide img:nth-of-type(15) {-webkit-animation:autoplay 60s linear infinite 28s; animation:autoplay 60s linear infinite 28s;}
.slide img:nth-of-type(16) {-webkit-animation:autoplay 60s linear infinite 30s; animation:autoplay 60s linear infinite 30s;}
.slide img:nth-of-type(17) {-webkit-animation:autoplay 60s linear infinite 32s; animation:autoplay 60s linear infinite 32s;}
.slide img:nth-of-type(18) {-webkit-animation:autoplay 60s linear infinite 34s; animation:autoplay 60s linear infinite 34s;}
.slide img:nth-of-type(19) {-webkit-animation:autoplay 60s linear infinite 36s; animation:autoplay 60s linear infinite 36s;}
.slide img:nth-of-type(20) {-webkit-animation:autoplay 60s linear infinite 38s; animation:autoplay 60s linear infinite 38s;}
.slide img:nth-of-type(21) {-webkit-animation:autoplay 60s linear infinite 40s; animation:autoplay 60s linear infinite 40s;}
.slide img:nth-of-type(22) {-webkit-animation:autoplay 60s linear infinite 42s; animation:autoplay 60s linear infinite 42s;}
.slide img:nth-of-type(23) {-webkit-animation:autoplay 60s linear infinite 44s; animation:autoplay 60s linear infinite 44s;}
.slide img:nth-of-type(24) {-webkit-animation:autoplay 60s linear infinite 46s; animation:autoplay 60s linear infinite 46s;}
.slide img:nth-of-type(25) {-webkit-animation:autoplay 60s linear infinite 48s; animation:autoplay 60s linear infinite 48s;}
.slide img:nth-of-type(26) {-webkit-animation:autoplay 60s linear infinite 50s; animation:autoplay 60s linear infinite 50s;}
.slide img:nth-of-type(27) {-webkit-animation:autoplay 60s linear infinite 52s; animation:autoplay 60s linear infinite 52s;}
.slide img:nth-of-type(28) {-webkit-animation:autoplay 60s linear infinite 54s; animation:autoplay 60s linear infinite 54s;}
.slide img:nth-of-type(29) {-webkit-animation:autoplay 60s linear infinite 56s; animation:autoplay 60s linear infinite 56s;}
.slide img:nth-of-type(30) {-webkit-animation:autoplay 60s linear infinite 58s; animation:autoplay 60s linear infinite 58s;}

/* 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%, 10% {right:0;}
11%, 100% {right:100%;}
}
@-webkit-keyframes autoplay {
0% {right:-100%;}
1%, 10% {right:0;}
11%, 100% {right:100%;}
}