/*
    Date: 5/13
    Name: Total CSS slideshow
    Linked to: improved slideshow
    Author: Kallemyn
 */

.css-slideshow{
    position: relative;
    width: 100%;/* This makes the slideshow 'responsive' to the page size */
    height: auto;
    
}
.css-slideshow figure{
    margin: 0;
    width: 100%;      /* This fits 100%, into the css-slidshow div, but since is relative to the div, it is responsive too */ 
    height: auto;
    background: #000;
    position: absolute;
    border: ;
}
.css-slideshow img{                           /* This also fits 100% relative to the div that contains it*/
    width: 100%;
    height:auto;
}

.css-slideshow figcaption{
    position: absolute;
    top: 0;
    color: yellow;
    background: rgba(0,0,0, .3);
    font-size: .8em;
    padding: 8px 12px;
    opacity: 0;
    transition: opacity .5s;
}


}
figure:nth-child(1) {
  animation: xfade 24s 21s infinite;
}
figure:nth-child(2) {
  animation: xfade 24s 18s infinite;
}
figure:nth-child(3) {
  animation: xfade 24s 15s infinite;
}
figure:nth-child(4) {
  animation: xfade 24s 12s infinite;
}
figure:nth-child(5) {
  animation: xfade 24s 9s infinite;
}
figure:nth-child(6) {
  animation: xfade 24s 6s infinite;
}
figure:nth-child(7) {
  animation: xfade 24s 3s infinite;
}
figure:nth-child(8) {
  animation: xfade 24s 0s infinite;
}

@keyframes xfade{
  0%{
    opacity: 1;
  }
  19% {
    opacity:1;
  }
  33%{
    opacity: 0;
  }
  98% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
  
  /*Responsive Elements*/
@media only screen and (min-width: 150px) and (max-width: 600px)    
{