/* SLIDER */
#slider {
    height: auto;
    width: 100%; 
    margin: 0;
    overflow: visible;
    position: relative;
}
#mask {
	overflow:hidden;
	width: 100%;
	height:325px;
}
#slider ul {
	margin:0;
	padding:0;
	position:relative;
}
#slider li { /* holds each image and text overlays */
	width: 100%;
	height:325px;
	position:absolute;
	left: -100%;
	list-style:none;
}

#slider li.firstanimation {
	animation:cycle 40s linear infinite;/* img visible 10sec*/
	-moz-animation:cycle 40s linear infinite;	
	-webkit-animation:cycle 40s linear infinite;		
}
#slider li.secondanimation {
	animation:cycle 40s linear infinite;/**/
	-moz-animation:cycletwo 40s linear infinite;
	-webkit-animation:cycletwo 40s linear infinite;		
}
#slider li.thirdanimation {
	animation:cycle 40s linear infinite;/**/
	-moz-animation:cyclethree 40s linear infinite;
	-webkit-animation:cyclethree 40s linear infinite;		
}
#slider li.fourthanimation {
	animation:cycle 40s linear infinite;/**/
	-moz-animation:cyclefour 40s linear infinite;
	-webkit-animation:cyclefour 40s linear infinite;		
}
#slider .tooltip { /* base settings for text block overlay -- add one of 3 positioning classes */
	width: 300px;
	max-width: 330px;
	height: auto;
	position:relative;
}
.tip-top { /* position text overlay at top */ bottom: 90%; }
.tip-mid { /* position text overlay at a mid-point */ bottom: 65%; }
.tip-bot { /* position text overlay toward bottom */ bottom: 45%; }
#slider .tooltip h2 { background:rgba(0,0,0,0.7); color:#fff; line-height: 1.5em; font-size: 1.6em; padding: 3px 30px; }
#slider .tooltip h2 a:link, #slider .tooltip h2 a:visited, #slider .tooltip h2 a:hover, #slider .tooltip h2 a:active, #slider .tooltip h2 a:focus { color: #fff; }
#slider:hover li {
	animation-play-state: paused;/**/
	-moz-animation-play-state:paused;
	-webkit-animation-play-state:paused;
}
#slider .imgattrib { /*place any image attribution within this class */
    width: 180px;
	position:relative;
	bottom: 25px;
	left: 90%;
	overflow:visible;
}
#slider .imgattrib p { /*place any image attribution within this class */
	background:rgba(0,0,0,0.1);
	font-size: 8px;
	color:#FFF;
	line-height: .9em;
	padding: 3px 3px 5px;
}
#slider .imgattrib a:link, #slider .imgattrib a:visited, #slider .imgattrib a:hover, #slider .imgattrib a:active, #slider .imgattrib a:focus { 
	color: #FFF;
}

/* ANIMATION */

/*---with prefix for older Firefox */
@-moz-keyframes cycle { /* first image */
0% { left:0; } /* start position, first image visible */
25% { left:0; opacity: 1; z-index: 0; } /* visible */
26% { left:200%; opacity: 0; z-index: -1; } /* off-screen right, invisible, bottom stack*/
99% { left:-200%; opacity: 0; z-index: -1; } /* off-screen left, invisible, bottom stack*/
100% { left: 0; opacity: 1; } /* return to original position */
}
@-moz-keyframes cycletwo { /* second image */
0% { left:-200%; opacity: 0; z-index: -1; } /* off-screen left, invisible, bottom stack*/
25% { left:-200%; opacity: 0; z-index: -1; } /* still off */
26% { left:0; opacity: 1; z-index: 0; } /* visible */
48% { left:0; opacity: 1; z-index: 0; } /* still visible */
49% { left:200%; opacity: 0; z-index: -1; } /* off-screen right, invisible, bottom stack*/
100% { left:-200%; opacity: 0; z-index: -1; } /* return to original position */
}
@-moz-keyframes cyclethree { /* third image */
0% { left:-200%; opacity: 0; z-index: -1; } /* off-screen left, invisible, bottom stack*/
49% { left:-200%; opacity: 0; z-index: -1; } /* still off */
50% { left:0; opacity: 1; z-index: 0; } /* visible */
74% { left:0; opacity: 1; z-index: 0; } /* still visible */
75% { left:200%; opacity: 0; z-index: -1; } /* off-screen right, invisible, bottom stack*/
100% { left:-200%; opacity: 0; z-index: -1; } /* return to original position */
}
@-moz-keyframes cyclefour { /* fourth image */
0% { left:-200%; opacity: 0; z-index: -1; } /* off-screen left, invisible, bottom stack*/
74% { left:-200%; opacity: 0; z-index: -1; } /* still off */
75% { left:0; opacity: 1; z-index: 0; } /* visible */
99% { left:0; opacity: 1; z-index: 0; } /* still visible */
100% { left: 200%; opacity: 0; z-index: -1; } /* off-screen right, invisible, bottom stack */
}
/*---with prefix for Chrome, Opera, Safari */
@-webkit-keyframes cycle { /* first image */
0% { left:0; } /* start position, first image visible */
25% { left:0; opacity: 1; z-index: 0; } /* visible */
26% { left:200%; opacity: 0; z-index: -1; } /* off-screen right, invisible, bottom stack*/
99% { left:-200%; opacity: 0; z-index: -1; } /* off-screen left, invisible, bottom stack*/
100% { left: 0; opacity: 1; } /* return to original position */
}
@-webkit-keyframes cycletwo { /* second image */
0% { left:-200%; opacity: 0; z-index: -1; } /* off-screen left, invisible, bottom stack*/
25% { left:-200%; opacity: 0; z-index: -1; } /* still off */
26% { left:0; opacity: 1; z-index: 0; } /* visible */
48% { left:0; opacity: 1; z-index: 0; } /* still visible */
49% { left:200%; opacity: 0; z-index: -1; } /* off-screen right, invisible, bottom stack*/
100% { left:-200%; opacity: 0; z-index: -1; } /* return to original position */
}
@-webkit-keyframes cyclethree { /* third image */
0% { left:-200%; opacity: 0; z-index: -1; } /* off-screen left, invisible, bottom stack*/
49% { left:-200%; opacity: 0; z-index: -1; } /* still off */
50% { left:0; opacity: 1; z-index: 0; } /* visible */
74% { left:0; opacity: 1; z-index: 0; } /* still visible */
75% { left:200%; opacity: 0; z-index: -1; } /* off-screen right, invisible, bottom stack*/
100% { left:-200%; opacity: 0; z-index: -1; } /* return to original position */
}
@-webkit-keyframes cyclefour { /* fourth image */
0% { left:-200%; opacity: 0; z-index: -1; } /* off-screen left, invisible, bottom stack*/
74% { left:-200%; opacity: 0; z-index: -1; } /* still off */
75% { left:0; opacity: 1; z-index: 0; } /* visible */
99% { left:0; opacity: 1; z-index: 0; } /* still visible */
100% { left: 200%; opacity: 0; z-index: -1; } /* off-screen right, invisible, bottom stack */
}
/*---newest standard */
@keyframes cycle {	/* first image */
0% { left:0; } /* start position, first image visible */
25% { left:0; opacity: 1; z-index: 0; } /* visible */
26% { left:200%; opacity: 0; z-index: -1; } /* off-screen right, invisible, bottom stack*/
99% { left:-200%; opacity: 0; z-index: -1; } /* off-screen left, invisible, bottom stack*/
100% { left: 0; opacity: 1; } /* return to original position */
}
@keyframes cycletwo { /* second image */
0% { left:-200%; opacity: 0; z-index: -1; } /* off-screen left, invisible, bottom stack*/
25% { left:-200%; opacity: 0; z-index: -1; } /* still off */
26% { left:0; opacity: 1; z-index: 0; } /* visible */
48% { left:0; opacity: 1; z-index: 0; } /* still visible */
49% { left:200%; opacity: 0; z-index: -1; } /* off-screen right, invisible, bottom stack*/
100% { left:-200%; opacity: 0; z-index: -1; } /* return to original position */
}
@keyframes cyclethree { /* third image */
0% { left:-200%; opacity: 0; z-index: -1; } /* off-screen left, invisible, bottom stack*/
49% { left:-200%; opacity: 0; z-index: -1; } /* still off */
50% { left:0; opacity: 1; z-index: 0; } /* visible */
74% { left:0; opacity: 1; z-index: 0; } /* still visible */
75% { left:200%; opacity: 0; z-index: -1; } /* off-screen right, invisible, bottom stack*/
100% { left:-200%; opacity: 0; z-index: -1; } /* return to original position */
}
@keyframes cyclefour { /* fourth image */
0% { left:-200%; opacity: 0; z-index: -1; } /* off-screen left, invisible, bottom stack*/
74% { left:-200%; opacity: 0; z-index: -1; } /* still off */
75% { left:0; opacity: 1; z-index: 0; } /* visible */
99% { left:0; opacity: 1; z-index: 0; } /* still visible */
100% { left: 200%; opacity: 0; z-index: -1; } /* off-screen right, invisible, bottom stack */
}