/* ---------------------------------------------------------------------------- 
            CSS SLIDESHOW SPECIFIC CODE 
            slideshow_5img50sec_625x347.css
----------------------------------------------------------------------------- */



/*  
    
    --- MODIFIED FOR 5 IMAGES.. RE-DO THE MATH FOR OTHER FIGURES
    --- updated for crossbrowser from here https://gist.github.com/leemark/11237860
    
    === Can have multiple slideshows with same settings by using class css-slideshow5 each time you 
        call it, be aware QTY of images, SIZE of images, TIMING and KEYFRAME are all in one class.
    
    ... Can have multiple slideshows with diff settings by copy of code with a 
        new classname modified to new settings and then call that class in the html.
    
    ... I think it's worth putting each set of settings in a different css and only callling
        the css you want (hence the crazy name of this file) but that may be use or user specific.
*/ 


.css-slideshow5 { position: relative; max-width: 625px; height: 347px; margin: 0px auto 0px auto; }
.css-slideshow5 figure { margin: 0; position: absolute; }
.css-slideshow5 figcaption { 
    position: absolute;
    top: 5px;
    color: #fff;
    background: rgba(0,0,0, .3);
    font-size: 12px;
    padding: 5px 5px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
    -ms-transition: opacity .5s;
    transition: opacity .5s;
}
.css-slideshow5:hover figure figcaption {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;           /*  I changed this to 1 so browsers that fail or are old, at least see first image as static */
    -webkit-transition: opacity 1.5s;
    -moz-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    -ms-transition: opacity 1.5s;
    transition: opacity 1.5s;
    }
    
.css-slideshow5 figure:nth-child(1),.css-slideshow5 figure:nth-child(2),.css-slideshow5 figure:nth-child(3),.css-slideshow5 figure:nth-child(4),.css-slideshow5 figure:nth-child(5) {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=0);
    opacity: 1;
}
.css-slideshow5 figure:nth-child(1) {
-webkit-animation: xfade 50s 40s 100;
-moz-animation:    xfade 50s 40s 100;
-ms-animation:     xfade 50s 40s infinite;
-o-animation:      xfade 50s 40s infinite;
animation:         xfade 50s 40s infinite;
}
.css-slideshow5 figure:nth-child(2) {
-webkit-animation: xfade 50s 30s 100;
-moz-animation:    xfade 50s 30s 100;
-ms-animation:     xfade 50s 30s infinite;
-o-animation:      xfade 50s 30s infinite;
animation:         xfade 50s 30s infinite;
}
.css-slideshow5 figure:nth-child(3) {
-webkit-animation: xfade 50s 20s 100;
-moz-animation:    xfade 50s 20s 100;
-ms-animation:     xfade 50s 20s infinite;
-o-animation:      xfade 50s 20s infinite;
animation:         xfade 50s 20s infinite;
}
.css-slideshow5 figure:nth-child(4) {
-webkit-animation: xfade 50s 10s 100;
-moz-animation:    xfade 50s 10s 100;
-ms-animation:     xfade 50s 10s infinite;
-o-animation:      xfade 50s 10s infinite;
animation:         xfade 50s 10s infinite;
}
.css-slideshow5 figure:nth-child(5) {
-webkit-animation: xfade 50s 00s 100;
-moz-animation:    xfade 50s 00s 100;
-ms-animation:     xfade 50s 00s infinite;
-o-animation:      xfade 50s 00s infinite;
animation:         xfade 50s 00s infinite;
}

           
@keyframes xfade {
   0%      { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
    }
   19%  { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
    }
   21%  { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity= 0);
    opacity: 0;
    }
   98%     { 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity= 0);
    opacity: 0;
    }
}

@-moz-keyframes xfade {
    0% {
       filter: alpha(opacity=100);
       opacity: 1;
    }
    19% {
        filter: alpha(opacity=100);
        opacity: 1;
    }
    21% {
        filter: alpha(opacity=0);
        opacity: 0;
    }
    98% {
        filter: alpha(opacity=0);
        opacity: 0;
    }
}
 @-webkit-keyframes "xfade"{
   0%      {
    filter: alpha(opacity=100);
    opacity: 1;  
    }
   19%  { 
    filter: alpha(opacity=100);
    opacity: 1;  
    }
   21%  { 
    filter: alpha(opacity=0);
    opacity: 0;  
    }
   98%     { 
    filter: alpha(opacity=0);
    opacity: 0;  
    }
}
  
@-ms-keyframes "xfade" {
   0%      { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
    }
   19%  { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
    }
   21%  { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity= 0);
    opacity: 0;
    }
   98%     { 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity= 0);
    opacity: 0;
    }
} 
  
  
 @-o-keyframes "xfade" {
   0%      {
    filter: alpha(opacity=100);
    opacity: 1;  
    }
   19%  { 
    filter: alpha(opacity=100);
    opacity: 1;  
    }
   21%  { 
    filter: alpha(opacity=0);
    opacity: 0;  
    }
   98%     { 
    filter: alpha(opacity=0);
    opacity: 0;  
    }
}