/* 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 */
.slideshow {width:95%; max-width:640px; margin:0 auto; position:relative; overflow:hidden; border:1px 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 */
.slideshow img {position:absolute; top:0; left:-100%; width:100%; display:block;}

/* make the first image position:relative; to set the responsive height of the slideshow */
.slideshow 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 */
.slideshow img:nth-of-type(1) {-webkit-animation:autoplay 60s linear infinite 0s; animation:autoplay 60s linear infinite 0s;} 
.slideshow img:nth-of-type(2) {-webkit-animation:autoplay 60s linear infinite 6s; animation:autoplay 60s linear infinite 6s;}
.slideshow img:nth-of-type(3) {-webkit-animation:autoplay 60s linear infinite 12s; animation:autoplay 60s linear infinite 12s;}
.slideshow img:nth-of-type(4) {-webkit-animation:autoplay 60s linear infinite 18s; animation:autoplay 60s linear infinite 18s;}
.slideshow img:nth-of-type(5) {-webkit-animation:autoplay 60s linear infinite 24s; animation:autoplay 60s linear infinite 24s;}
.slideshow img:nth-of-type(6) {-webkit-animation:autoplay 60s linear infinite 30s; animation:autoplay 60s linear infinite 30s;}
.slideshow img:nth-of-type(7) {-webkit-animation:autoplay 60s linear infinite 36s; animation:autoplay 60s linear infinite 36s;}
.slideshow img:nth-of-type(8) {-webkit-animation:autoplay 60s linear infinite 42s; animation:autoplay 60s linear infinite 42s;}
.slideshow img:nth-of-type(9) {-webkit-animation:autoplay 60s linear infinite 42s; animation:autoplay 60s linear infinite 48s;}
.slideshow img:nth-of-type(10) {-webkit-animation:autoplay 60s linear infinite 42s; animation:autoplay 60s linear infinite 54s;}

/* 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% {left:-100%;}
1%, 12.5% {left:0;}
13.5%, 100% {left:100%;}
}
@-webkit-keyframes autoplay {
0% {left:-100%;}
1%, 12.5% {left:0;}
13.5%, 100% {left:100%;}
}
/* http://www.cssplay.co.uk/menu/cssplay-tutorial-autorun-slideshow.html*/

*{
	box-sizing:border-box;
}
/*Main Styles*/
@media (min-width:600px){
	/****************/
	.OnlyforHandheld{
		display:none;
	}
	.OnlyforWeb{
		display:block;
	}
	/****************/
}

@media (max-width:600px){
	/****************/
	.OnlyforHandheld{
		display:block;
	}
	.OnlyforWeb{
		display:none;
	}
	/****************/
}