@charset "UTF-8";


/*
* === Slide Show ===
*/

.css-slideshow{
   position: relative;
   max-width: 95%;
   /* height: 200px; */
   height: 300px;
   width: 400px;
   margin: .1em auto .1em auto;
}
.css-slideshow figure{
   margin: 0;
   position: absolute;
}
.css-slideshow figcaption{
   position: absolute;
   top: 0;
   color: #fff;
   background: rgba(0,0,0, .3);
   font-size: .8em;
   padding: 8px 12px; 
   opacity: 0;
   transition: opacity .5s;
}
.css-slideshow:hover figure figcaption{
   transition: opacity .5s;
   opacity: 1;
}
.css-slideshow figure{
   opacity:0;
}

 .css-slideshow img{
   /* width: 250px; */
   width: 400px;
   height: *;
}

figure:nth-child( 1) { animation: xfade 60s  0s infinite; }
figure:nth-child( 2) { animation: xfade 60s  5s infinite; }
figure:nth-child( 3) { animation: xfade 60s 10s infinite; }
figure:nth-child( 4) { animation: xfade 60s 15s infinite; }
figure:nth-child( 5) { animation: xfade 60s 20s infinite; }
figure:nth-child( 6) { animation: xfade 60s 25s infinite; }
figure:nth-child( 7) { animation: xfade 60s 30s infinite; }
figure:nth-child( 8) { animation: xfade 60s 35s infinite; }
figure:nth-child( 9) { animation: xfade 60s 40s infinite; }
figure:nth-child(10) { animation: xfade 60s 45s infinite; }
figure:nth-child(11) { animation: xfade 60s 50s infinite; }
figure:nth-child(12) { animation: xfade 60s 55s infinite; }

@keyframes xfade{
   0%{
      opacity: 1;
   }
   7%{
      opacity: 1;
   }
   9%{
      opacity: 0;
   }
   98% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}