body {
    background-color: #000;
}

#landing-header {
    z-index: 1;
    position: relative;
    text-align: center;
    padding-top: 40vh;
}

/* #landing-header h1, h2 {
    color: #fff;
} */

.slideshow {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.slideshow li {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%; /* centers image */
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  animation: imageAnimation 200s linear infinite; /* keyframes below (imageAnimation) is animation Schema*/
}

.slideshow li:nth-child(1) {
  background-image: url(/assets/images/landing/02.jpg); /* replace with permanent images */
}
.slideshow li:nth-child(2) {
  background-image: url(/assets/images/landing/04.jpg); /* delay start of animation 10s (schema = keyframe) */
  animation-delay: 10s;
}
.slideshow li:nth-child(3) {
  background-image: url(/assets/images/landing/06.jpg);
  animation-delay: 20s;
}
.slideshow li:nth-child(4) {
  background-image: url(/assets/images/landing/08.jpg);
  animation-delay: 30s;
}
.slideshow li:nth-child(5) {
  background-image: url(/assets/images/landing/10.jpg);
  animation-delay: 40s;
}
.slideshow li:nth-child(6) {
  background-image: url(/assets/images/landing/01.jpg); /* replace with permanent images */
  animation-delay: 50s;
}
.slideshow li:nth-child(7) {
  background-image: url(/assets/images/landing/03.jpg); /* delay start of animation 10s (schema = keyframe) */
  animation-delay: 60s;
}
.slideshow li:nth-child(8) {
  background-image: url(/assets/images/landing/05.jpg);
  animation-delay: 70s;
}
.slideshow li:nth-child(9) {
  background-image: url(/assets/images/landing/07.jpg);
  animation-delay: 80s;
}
.slideshow li:nth-child(10) {
  background-image: url(/assets/images/landing/09.jpg);
  animation-delay: 90s;
}
.slideshow li:nth-child(11) {
  background-image: url(/assets/images/landing/12.jpg); /* replace with permanent images */
  animation-delay: 100s;
}
.slideshow li:nth-child(12) {
  background-image: url(/assets/images/landing/14.jpg); /* delay start of animation 10s (schema = keyframe) */
  animation-delay: 110s;
}
.slideshow li:nth-child(13) {
  background-image: url(/assets/images/landing/16.jpg);
  animation-delay: 120s;
}
.slideshow li:nth-child(14) {
  background-image: url(/assets/images/landing/18.jpg);
  animation-delay: 130s;
}
.slideshow li:nth-child(15) {
  background-image: url(/assets/images/landing/20.jpg);
  animation-delay: 140s;
}
.slideshow li:nth-child(16) {
  background-image: url(/assets/images/landing/11.jpg);
  animation-delay: 150s;
}
.slideshow li:nth-child(17) {
  background-image: url(/assets/images/landing/13.jpg); /* delay start of animation 10s (schema = keyframe) */
  animation-delay: 160s;
}
.slideshow li:nth-child(18) {
  background-image: url(/assets/images/landing/15.jpg);
  animation-delay: 170s;
}
.slideshow li:nth-child(19) {
  background-image: url(/assets/images/landing/17.jpg);
  animation-delay: 180s;
}
.slideshow li:nth-child(20) {
  background-image: url(/assets/images/landing/19.jpg);
  animation-delay: 190s;
}


/**
 * @keyframes is the animation Schema for each image.
 * Here, it is fade in (over 5s), display (for 5s), fade out (over 5s).
 *
 * The % of each keyframe identifies a waypoint where the styles are in full effect.
 * 10%, therefore, marks the 5s point (50s x 10% = 5s) of the animation sequence.
 *
 * The styles represent what slideshow li will look like at that juncture (waypoint) of
 * the animation sequence. For example, at 10% opacity is 100%, or full opacity (opacity:1),
 * having started at 0%, or full transparency (opacity: 0), at the beginning of the animation
 * sequence.
 *
 * From MDN: The @keyframes CSS at-rule controls the intermediate steps in a CSS animation
 * sequence by defining styles for keyframes (or waypoints) along the animation sequence.
 * This gives more control over the intermediate steps of the animation sequence than
 * transitions.
 *
 * Keyframes are the 'key' frames or points in an animation sequence.
 *
 * Each image has a 15s duration (30% x 50s = 15s); 5 images without overlap (fade-in, fade-out)
 * would take 75s, but duration is 50s because of overlap.
 *
 * Total time = 75s (5 images x 15s ea) - 25s (overlap time) = 50s
*/
@keyframes imageAnimation {
  0% {
    opacity: 0; /* image 100% transparent, which means only background behind image is visible */
    animation-timing-function: ease-in;
  }
  /**
   * defines styles of slideshow li at 10% point (waypoint) in animation sequence;
   * duration x 5% = time mark 2.5% x 200s = 5s) == fade in phase
  */
  2.5% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  /**
   * defines styles of slideshow li at 20% point (waypoint) in animation sequence;
   * duration x 10% = time mark (5% x 200s = 10s) == display phase
   */
   5% {
     opacity: 1;
     animation-timing-function: ease-out;
   }
  /**
   * defines styles of slideshow li at 20% point (waypoint) in animation sequence;
   * duration x 20% = time mark (7.5% x 200s = 15s) == fade out phase
   */
  7.5% { /* image 100% transparent, which means only background behind image is visible */
    opacity: 0
  }
}

/* Older browser support - .no-cssanimations class added by modernizr */
.no-cssanimations .slideshow li {
	opacity: 1;
}