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

/************************************/
/* CSS slideshow Copyright of Ryan Saunders.  Free to use for personal use only. */
/************************************/

/* Must be absolute position so images stack on top of eachother.
Must use width and height of images given in html
z-index is so it was be at the bottom, in case you want to use it as a background, can be removed otherwise.
*/
.main-slideshow { 
	height: 400px; 
	width: 700px; 
	position: absolute; 
	z-index: -1; 
}
.main-slideshow img {
	border: none; 
	position: absolute;
}

/* HOW TO USE:
	0% { opacity:1;}, 98% { opacity:0;}, and 100% { opacity:1;} should always be the same.
	23% { opacity:1;} and 25% { opacity:0;} should be (x - 2)% { opacity:1;} and x% { opacity:0;}
	where x is 100 / n, where n is the total number of slides.
	
	For my example here, I have 4 slides, so n = 4, x = 100/4 = 25, (x - 2) = 23
*/
	@-webkit-keyframes fadeInOut {
		0% { opacity:1;}
		23% { opacity:1;}
		25% { opacity:0;}
		98% { opacity:0;}
		100% { opacity:1;}
	}

	@-moz-keyframes fadeInOut {
		0% { opacity:1;}
		23% { opacity:1;}
		25% { opacity:0;}
		98% { opacity:0;}
		100% { opacity:1;}
	}

	@-ms-keyframes fadeInOut {
		0% { opacity:1;}
		23% { opacity:1;}
		25% { opacity:0;}
		98% { opacity:0;}
		100% { opacity:1;}
	}

	@-o-keyframes fadeInOut {
		0% { opacity:1;}
		23% { opacity:1;}
		25% { opacity:0;}
		98% { opacity:0;}
		100% { opacity:1;}
	}

	@keyframes fadeInOut {
		0% { opacity:1;}
		23% { opacity:1;}
		25% { opacity:0;}
		98% { opacity:0;}
		100% { opacity:1;}
	}

.main-slideshow img {
	
	/* HOW TO USE:
		Individual slide time = i
		Total slide time = T
		Number of slides = n
		T = i*n
		-webkit-animation-duration: Ts; 
		
		For my example here, I have 4 slides, with 5 second slide time each, so T = 4*5 = 20
	*/
	
	-webkit-animation-name: fadeInOut;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 20s;

	-moz-animation-name: fadeInOut;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 20s;

	-ms-animation-name: fadeInOut;
	-ms-animation-timing-function: ease-in-out;
	-ms-animation-iteration-count: infinite;
	-ms-animation-duration: 20s;

	-o-animation-name: fadeInOut;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count: infinite;
	-o-animation-duration: 20s;

	animation-name: fadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 20s;
}

/* HOW TO USE: 
	You will need the same number of these selectors
	as slides you have, numbered from 1 to n, where n
	is the number of slides.
	nth-of-type(1) needs to have delay of T - i, where T
	is the total slideshow time, and i is the individual
	slide time.  Each nth-of-type(n) must be deducted by
	an additional i until you reach 0 seconds for the last
	nth-of-type(n)
	
	For my example here, I have 4 slides, a total time slideshow time of 20 seconds,
	and individual slide time of 5 seconds.
*/

.main-slideshow img:nth-of-type(1) {
	-webkit-animation-delay: 15s;
	-moz-animation-delay: 15s;
	-ms-animation-delay: 15s;
	-o-animation-delay: 15s;
	animation-delay: 15s;
}
.main-slideshow img:nth-of-type(2) {
	-webkit-animation-delay: 10s;
	-moz-animation-delay: 10s;
	-ms-animation-delay: 10s;
	-o-animation-delay: 10s;
	animation-delay: 10s;
}
.main-slideshow img:nth-of-type(3) {
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
	-ms-animation-delay: 5s;
	-o-animation-delay: 5s;
	animation-delay: 5s;
}
.main-slideshow img:nth-of-type(4) {
	-webkit-animation-delay: 0;
	-moz-animation-delay: 0;
	-ms-animation-delay: 0;
	-o-animation-delay: 0;
	animation-delay: 0;
}