/*-- filename = slideshow_mini_2592.css  30Jul2018 --*/
/*-----------------------------------------------------------*/
/*-- http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/ --*/
/*-- Google for:  css animation slideshow  --*/
/*-- http://www.w3schools.com/w3css/w3css_slideshow.asp --*/
/*-- https://stackoverflow.com/questions/35276132/crossfade-keyframe-percentages-algorithm  Explains percentages.  --*/
/*-----------------------------------------------------------*/

.slideshow,
.slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}

/*--  SLIDESHOW CONTINUOUSLY LOOPS. --*/
/*--  Style slide images  --*/

.slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;

/*--  Total time for one iteration.  --*/
    -webkit-animation: imageAnimation 51s linear infinite 0s;
    -moz-animation: imageAnimation    51s linear infinite 0s;
    -o-animation: imageAnimation      51s linear infinite 0s;
    -ms-animation: imageAnimation     51s linear infinite 0s;
    animation: imageAnimation         51s linear infinite 0s;
    	/*-- Number of slides multiplied by duration of each slide = total seconds for the loop from beginning to end.  Add one more interval for the loop from last to first again. --*/
	/*-- (16slides) X (3seconds per slide) = 48 seconds for the loop. Plus 3 = 51 seconds  --*/
	/*-- SPAN is used for IMAGE DEFINITIONS embedded in <SPAN> in each <LI> in primary.html  --*/
}

/*--  01  210 JSH No Helmet  --*/
.slideshow li:nth-child(01) span { 
    background-image: url(../images/A_210B_JSH_NO_Helmet__2592X1944.jpg)
}       	/* No timing statements for first image.  They make loop skip first image on first iteration.  */

/*--  02  145 Reed Boat  --*/
.slideshow li:nth-child(02) span { 
    background-image: url(../images/L_145_Boat__2592X1944.jpg);
		/*--  .slideshow li:nth-child(02) span { 
		    background-image: url(../images/B_211A_JSH_Helmet__2592X1944.jpg);  --*/
    	-webkit-animation-delay: 3s;
    	-moz-animation-delay: 3s;
    	-o-animation-delay: 3s;
    	-ms-animation-delay: 3s;
    	animation-delay: 3s;
}

/*--  03  212 40mm  --*/
.slideshow li:nth-child(03) span { 
    background-image: url(../images/C_212_40mm__2592X1944.jpg);
		/*--  .slideshow li:nth-child(03) span { 
		    background-image: url(../images/C_212_40mm__2592X1944.jpg);  ==*/
    	-webkit-animation-delay: 6s;
    	-moz-animation-delay: 6s;
    	-o-animation-delay: 6s;
    	-ms-animation-delay: 6s;
    	animation-delay: 6s; 
}

/*--  04  141 Man Water Buffalo  --*/
.slideshow li:nth-child(04) span { 
    background-image: url(../images/M_141_Man_Water_Buffalo__2592X1944.jpg);
		/*--  .slideshow li:nth-child(04) span { 
		    background-image: url(../images/D_213_M60_M2__2592X1944.jpg);  --*/
    	-webkit-animation-delay: 9s;
    	-moz-animation-delay: 9s;
    	-o-animation-delay: 9s;
    	-ms-animation-delay: 9s;
    	animation-delay: 9s; 
}

/*--  05  213 M60 M2  --*/
.slideshow li:nth-child(05) span { 
    background-image: url(../images/D_213_M60_M2__2592X1944.jpg);
		/*--  .slideshow li:nth-child(05) span { 
		    background-image: url(../images/E_214_M60_M2_high_flare__2592X1944.jpg);  --*/
    	-webkit-animation-delay: 12s;
    	-moz-animation-delay: 12s;
    	-o-animation-delay: 12s;
    	-ms-animation-delay: 12s;
    	animation-delay: 12s; 
}

/*--  06  130 Man on Dike  --*/
.slideshow li:nth-child(06) span { 
    background-image: url(../images/O_130_Man_on_Dike__2592X1944.jpg);
		/*--  .slideshow li:nth-child(06) span { 
		    background-image: url(../images/F_215_M60_high_flare__2592X1944.jpg);  --*/
    	-webkit-animation-delay: 15s;
    	-moz-animation-delay: 15s;
    	-o-animation-delay: 15s;
    	-ms-animation-delay: 15s;
    	animation-delay: 15s; 
}

/*--  07  214 M60 M2 high flare  --*/
.slideshow li:nth-child(07) span { 
    background-image: url(../images/E_214_M60_M2_high_flare__2592X1944.jpg);
		/*--  .slideshow li:nth-child(07) span { 
		    background-image: url(../images/G_216_40mm__2592X1944.jpg);  --*/
    	-webkit-animation-delay: 18s;
    	-moz-animation-delay: 18s;
    	-o-animation-delay: 18s;
    	-ms-animation-delay: 18s;
    	animation-delay: 18s; 
}

/*--  08  132 Man Plow  --*/
.slideshow li:nth-child(08) span { 
    background-image: url(../images/N_132_Man_Plow__2592X1944.jpg);
		/*--  .slideshow li:nth-child(08) span { 
		    background-image: url(../images/H_218__2592X1944.jpg);  --*/
    	-webkit-animation-delay: 21s;
    	-moz-animation-delay: 21s;
    	-o-animation-delay: 21s;
    	-ms-animation-delay: 21s;
    	animation-delay: 21s; 
}

/*--  09  215 M60  --*/
.slideshow li:nth-child(09) span { 
    background-image: url(../images/F_215_M60_high_flare__2592X1944.jpg);
		/*--  .slideshow li:nth-child(09) span { 
		    background-image: url(../images/I_219__2592X1944.jpg);  --*/
    	-webkit-animation-delay: 24s;
    	-moz-animation-delay: 24s;
    	-o-animation-delay: 24s;
    	-ms-animation-delay: 24s;
    	animation-delay: 24s; 
}

/*--  10  112 Cowboy  --*/
.slideshow li:nth-child(10) span { 
    background-image: url(../images/S_112__Village_Street_Cowboy_2592X1944_.jpg);
		/*--  .slideshow li:nth-child(10) span { 
		    background-image: url(../images/J_220__2592X1944.jpg);  --*/
    	-webkit-animation-delay: 27s;
    	-moz-animation-delay: 27s;
    	-o-animation-delay: 27s;
    	-ms-animation-delay: 27s;
    	animation-delay: 27s; 
}

/*--  11  T_015__Junk_Yard_Helicopters_2592X1695_.jpg  --*/
.slideshow li:nth-child(11) span { 
    background-image: url(../images/T_015__Junk_Yard_Helicopters_2592X1695_.jpg);
		/*--  .slideshow li:nth-child(11) span { 
		    background-image: url(../images/K_221__2592X1944.jpg);  --*/
    	-webkit-animation-delay: 30s;
    	-moz-animation-delay: 30s;
    	-o-animation-delay: 30s;
    	-ms-animation-delay: 30s;
    	animation-delay: 30s; 
}

/*--  12  R_133_Man_Water_Buffalo_Harrow__2592X1944_  --*/
.slideshow li:nth-child(12) span { background-image: url(../images/R_133_Man_Water_Buffalo_Harrow__2592X1944_.jpg);
		/*--  .slideshow li:nth-child(12) span { 	
		    background-image: url(../images/L_145_Boat__2592X1944.jpg);  --*/
    	-webkit-animation-delay: 33s;
    	-moz-animation-delay: 33s;
    	-o-animation-delay: 33s;
    	-ms-animation-delay: 33s;
    	animation-delay: 33s; 
}

/*--  13  U_009__Cemetary_2592X1688.jpg   --*/
.slideshow li:nth-child(13) span { 
    background-image: url(../images/U_009__Cemetary_2592X1688.jpg);
		/*--  .slideshow li:nth-child(13) span { 
		    background-image: url(../images/M_141_Man_Water_Buffalo__2592X1944.jpg);  --*/
    	-webkit-animation-delay: 36s;
    	-moz-animation-delay: 36s;
    	-o-animation-delay: 36s;
    	-ms-animation-delay: 36s;
    	animation-delay: 36s; 
}

/*--  14  V_012__River_2592X1360.jpg  --*/
.slideshow li:nth-child(14) span { 
    background-image: url(../images/V_012__River_2592X1360.jpg);

		/*--  .slideshow li:nth-child(14) span { 
		    background-image: url(../images/N_132_Man_Plow__2592X1944.jpg);  --*/
    	-webkit-animation-delay: 39s;
    	-moz-animation-delay: 39s;
    	-o-animation-delay: 39s;
    	-ms-animation-delay: 39s;
    	animation-delay: 39s; 
}

/*--  15  W_046__Montagnard_Woman_Weaving_4_2592X2871.jpg  --*/
.slideshow li:nth-child(15) span { 
    background-image: url(../images/W_046__Montagnard_Woman_Weaving_4_2592X2871.jpg);

		/*--  .slideshow li:nth-child(15) span { 
		    background-image: url(../images/O_130_Man_on_Dike__2592X1944.jpg);  --*/
    	-webkit-animation-delay: 42s;
    	-moz-animation-delay: 42s;
    	-o-animation-delay: 42s;
    	-ms-animation-delay: 42s;
    	animation-delay: 42s; 
}

/*--  16  J_220__BEST_gunfire_.jpg  --*/
.slideshow li:nth-child(16) span { 
    background-image: url(../images/J_220__BEST_gunfire_.jpg);
    
		/*--  .slideshow li:nth-child(16) span { 
		    background-image: url(../images/P_169_JSH_Portrait__2592X1944.jpg);  --*/
    	-webkit-animation-delay: 45s;
    	-moz-animation-delay: 45s;
    	-o-animation-delay: 45s;
    	-ms-animation-delay: 45s;
    	animation-delay: 45s;
}

/*--  ---------------------------------------  --*/
/*--  Repeat image list less image #1  (WHY?)  --*/

.slideshow li:nth-child(01) span {
       	-webkit-animation-delay: 3s;
    	-moz-animation-delay: 3s;
    	-o-animation-delay: 3s;
    	-ms-animation-delay: 3s;
    	animation-delay: 3s;
}
.slideshow li:nth-child(02) span { 
       	-webkit-animation-delay: 6s;
    	-moz-animation-delay: 6s;
    	-o-animation-delay: 6s;
    	-ms-animation-delay: 6s;
    	animation-delay: 6s; 
}
.slideshow li:nth-child(03) span { 
       	-webkit-animation-delay: 9s;
    	-moz-animation-delay: 9s;
    	-o-animation-delay: 9s;
    	-ms-animation-delay: 9s;
    	animation-delay: 9s; 
}
.slideshow li:nth-child(04) span { 
    	-webkit-animation-delay: 12s;
    	-moz-animation-delay: 12s;
    	-o-animation-delay: 12s;
    	-ms-animation-delay: 12s;
    	animation-delay: 12s; 
}
.slideshow li:nth-child(05) span { 
       	-webkit-animation-delay: 15s;
    	-moz-animation-delay: 15s;
    	-o-animation-delay: 15s;
    	-ms-animation-delay: 15s;
    	animation-delay: 15s; 
}
.slideshow li:nth-child(06) span { 
        -webkit-animation-delay: 18s;
    	-moz-animation-delay: 18s;
    	-o-animation-delay: 18s;
    	-ms-animation-delay: 18s;
    	animation-delay: 18s; 
}

.slideshow li:nth-child(07) span { 
       	-webkit-animation-delay: 21s;
    	-moz-animation-delay: 21s;
    	-o-animation-delay: 21s;
    	-ms-animation-delay: 21s;
    	animation-delay: 21s; 
}

.slideshow li:nth-child(08) span { 
       	-webkit-animation-delay: 24s;
    	-moz-animation-delay: 24s;
    	-o-animation-delay: 24s;
    	-ms-animation-delay: 24s;
    	animation-delay: 24s; 
}

.slideshow li:nth-child(09) span { 
       	-webkit-animation-delay: 27s;
    	-moz-animation-delay: 27s;
    	-o-animation-delay: 27s;
    	-ms-animation-delay: 27s;
    	animation-delay: 27s; 
}
.slideshow li:nth-child(10) span { 
       	-webkit-animation-delay: 30s;
    	-moz-animation-delay: 30s;
    	-o-animation-delay: 30s;
    	-ms-animation-delay: 30s;
    	animation-delay: 30s; 
}
.slideshow li:nth-child(11) span { 
       	-webkit-animation-delay: 33s;
    	-moz-animation-delay: 33s;
    	-o-animation-delay: 33s;
    	-ms-animation-delay: 33s;
    	animation-delay: 33s; 
}
.slideshow li:nth-child(12) span { 
       	-webkit-animation-delay: 36s;
    	-moz-animation-delay: 36s;
    	-o-animation-delay: 36s;
    	-ms-animation-delay: 36s;
    	animation-delay: 36s; 
}
.slideshow li:nth-child(13) span { 
       	-webkit-animation-delay: 39s;
    	-moz-animation-delay: 39s;
    	-o-animation-delay: 39s;
    	-ms-animation-delay: 39s;
    	animation-delay: 39s; 
}
.slideshow li:nth-child(14) span { 
       	-webkit-animation-delay: 42s;
    	-moz-animation-delay: 42s;
    	-o-animation-delay: 42s;
    	-ms-animation-delay: 42s;
    	animation-delay: 42s; 
}
.slideshow li:nth-child(15) span { 
       	-webkit-animation-delay: 45s;
    	-moz-animation-delay: 45s;
    	-o-animation-delay: 45s;
    	-ms-animation-delay: 45s;
    	animation-delay: 45s; 
}
.slideshow li:nth-child(16) span { 
       	-webkit-animation-delay: 48s;
    	-moz-animation-delay: 48s;
    	-o-animation-delay: 48s;
    	-ms-animation-delay: 48s;
    	animation-delay: 48s; 
}

/*  LOOP TO FIRST SLIDE (17)  */
.slideshow li:nth-child(17) span { 
       	-webkit-animation-delay: 51s;
    	-moz-animation-delay: 51s;
    	-o-animation-delay: 51s;
    	-ms-animation-delay: 51s;
    	animation-delay: 51s;
}

/*---------------------------------------------------------
(Original instructions based on a 6s setting for each of 6 images.)

We want each image to be visible for 6 seconds and we know that at the end of a cycle, we want the first image to show again. We have 6 images, so we will need 36 seconds for a whole cycle to finish.

FADE IN/OUT = OPACITY (This is an independent effect that is animated.  It is disassociated with the image file changes.  EXCEPT! If you turn it off for experimenting, no images are visible because of default opacity = 1):
	No opacity   = 0  (transparent)
	Full opacity = 1

Each span will have an animation time of 36 seconds.

In those 36 seconds we will change the opacity from 0 to 1 when the animation reaches 8%. And then this opacity gets kept until 17% are reached. So, from 8% of the time cycle to 17% of the time cycle, the image is fully visible.

When reaching 25% the opacity should already be faded to 0 again and stay like that until the end (of what? The 6 seconds or the 36 seconds?)

To “time” the opacity values accordingly:

Knowing that our second image will start animating at 6 seconds, we need to know at what percentile of the animation this will require the first image to fade out.

Dividing 6 by 36 gives us 0.166… which would be 16% for our keyframe step. Now, because we don’t want our image to just fade all the time, we’ll define an in-between step, which we’ll set at half of what we calculated, i.e. 8%. That’s the point that
we want to show the image completely and we only want to start fading it out at 17% (16.6% rounded up), making it disappear completely at 25%  (WHY?).

@keyframes imageAnimation 
    0%   Start at opacity = 0
    Animation-timing-function: ease-in
    8%   Opacity = 1
         Steady full visibility
    17%  Opacity = 1
    Animation-timing-function: ease-out
    25%  Opacity = 0 invisible
    100% Opacity = 0

---------------------------------------------------------*/

/*-- Comment from another user:

In short, since the example has 6 images set on 6 second delays,
it’s easy to confuse the numbers when calculating the keyframe percentages.

Be sure to use the individual time interval divided by the total of all the time intervals then continue the splitting, etc. as instructed. In this way the percentages for keyframe change %’s will vary depending on your slide count (as the other way it does not) & the overlapping transition effects work perfectly whether you have 3 slides or 30!
---------------------------------------------------------*/

/* Animation of opacity for the slideshow images using different browser plug-ins. */
/*-- Full opacity = 1 --*/
/*-- No opacity (transparent) = 0 --*/

/* Chrome, Safari, Opera, etc. */
@-webkit-keyframes imageAnimation { 
    0%   { opacity: 0;
         -webkit-animation-timing-function: ease-in; }
    3.125%   { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    6.25%  { opacity: 1 }
    25%  { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0%   { opacity: 0;
         -moz-animation-timing-function: ease-in; }
    3.125%   { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    6.25%  { opacity: 1 }
    25%  { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0%   { opacity: 0;
         -o-animation-timing-function: ease-in; }
    3.125%   { opacity: 1;
         -o-animation-timing-function: ease-out; }
    6.25%  { opacity: 1 }
    25%  { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0%   { opacity: 0;
         -ms-animation-timing-function: ease-in; }
    3.125%   { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    6.25%  { opacity: 1 }
    25%  { opacity: 0 }
    100% { opacity: 0 }
}

/*  *** Standard syntax (Firefox & ?) ***  */
@keyframes imageAnimation { 
    0%   { opacity: 0;
    	 animation-timing-function: ease-in; }
    3.125%   { opacity: 1;
         animation-timing-function: ease-out; }
    6.25%  { opacity: 1 }
    25%  { opacity: 0 }
    100% { opacity: 0 }
}

/*-- - - - - - - - - - - - - - - - - - - - - - - - - - - - -  --*/

/* Show last slide when animations are not supported */

.no-cssanimations .slideshow li span{
	opacity: 1;
}

/*--  ----------------------------------------------------  --*/
/*-- - - - - - - - - - - - -  AUDIO  - - - - - - - - - - -  --*/

audio {    /*--  Audio Slider built into HTML5.  Javascript is designed to minimize on mouseover.  --*/
display: block;
position: fixed;
    height: 80px; /*-- Edit to 31px to make room for NO text.  --*/
    width:180px;  /*--  Remove width for default  --*/
    bottom: 30px;
    right: 0px;
    content: PLAY AUDIO;  /*--  Doesn't work  --*/
border: 2px solid #6d0019;
background: white;  /*--  black is better  --*/
foreground: black;
-webkit-border-radius: 7px 7px 7px 7px ;
border-radius: 7px 7px 7px 7px ;
z-index: 99999;
}

<!--
.is-mouseout {
   height: 0;
}

<script>
// this handler will be executed every time the cursor is moved off a different list-item
  test.addEventListener("mouseout", function( event ) {   
    // highlight the mouseout target
    event.target.style.color = "orange";

    // reset the color after a short delay
    setTimeout(function() {
      event.target.style.color = "";
    }, 500);
  }, false);
</script>

-->