/* ============================================================================
Hoja de estilos para el carrusel de imagenes de cabecera.
Rafael Agüera
info@ra-studio.es
Creado el : 20/07/2016
Última modificación: 04/08/2016 - Ampliado el carrusel a 10 fotos.
=============================================================================*/

@import url(http://fonts.googleapis.com/css?family=Istok+Web);
@keyframes slidy {
  /* imagen 01 */
  0% {
    left: 0%;
  }
  5% {
    left: 0%;
  }
  /* imagen 02 */
  10% {
    left: -100%;
  }
  15% {
    left: -100%;
  }
  /* imagen 03 */
  20% {
    left: -200%;
  }
  25% {
    left: -200%;
  }
  /* imagen 04 */
  30% {
    left: -300%;
  }
  35% {
    left: -300%;
  }
  /* imagen 05 */
  40% {
    left: -400%;
  }
  45% {
    left: -400%;
  }
  /* imagen 06 */
  50% {
    left: -500%;
  }
  55% {
    left: -500%;
  }
  /* imagen 07 */
  60% {
    left: -600%;
  }
  65% {
    left: -600%;
  }
  /* imagen 08 */
  70% {
    left: -700%;
  }
  75% {
    left: -700%;
  }
  /* imagen 09 */
  80% {
    left: -800%;
  }
  85% {
    left: -800%;
  }
  /* imagen 10 */
  90% {
    left: -900%;
  }
  100% {
    left: -900%;
  }
}
body, figure {
  margin: 0;
  background: #101010;
  font-family: Istok Web, sans-serif;
  font-weight: 100;
}
div#captioned-gallery {
  width: 100%;
  overflow: hidden;
}
figure.slider {
  position: relative;
  width: 1000%; /* tamaño total de todas las fotos */
  font-size: 0;
  animation: 60s slidy infinite; /* tiempo de pase y espera entre fotos */
}
/* 1000%/10%=100% (espacio para 10 fotos que ocupan el 100% de la pantalla)*/
figure.slider figure {
  width: 10%; /* porcion de espacio que ocupa una sola foto */
  height: auto;
  display: inline-block;
  position: inherit;
}
figure.slider img {
  width: 100%;
  height: auto;
}
figure.slider figure figcaption {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  width: 100%;
  font-size: 2rem;
  padding: .6rem;
}