html {
  min-height: 100%;
}

body {
  height: 100%;

}

.slideshow {
  list-style: none;
  z-index: 1;
}
.slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: imageAnimation 24s linear  ;
  -moz-animation: imageAnimation 24s linear  ;
  animation: imageAnimation 24s linear  ;
  animation-fill-mode: forwards;
}

@media only screen and (min-width: 768px) {
  .slideshow li h3 {
    bottom: 30px;
    font-size: 8.125em;
  }
}
@media only screen and (min-width: 1024px) {
  .slideshow li h3 {
    font-size: 10.9375em;
  }
}

.slideshow li:nth-child(1) span {
  background-image: url("http://carlsonmediacollective.com/images/page1.jpg"),url("http://carlsonmediacollective.com/images/copyright.png");
  background-blend-mode: lighten;
  background-size: auto, 50%;
  background-position: 0 0, bottom;
  background-repeat: no-repeat;
}

.slideshow li:nth-child(2) span {
  background-image: url("http://carlsonmediacollective.com/images/page1b.jpg"),url("http://carlsonmediacollective.com/images/copyright.png");
  background-blend-mode: lighten;
  background-size: auto, 50%;
  background-position: 0 0, bottom;
  background-repeat: no-repeat;  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  animation-delay: 6s;
}

.slideshow li:nth-child(3) span {
  background-image: url("http://carlsonmediacollective.com/images/page1b.jpg"),url("http://carlsonmediacollective.com/images/copyright.png");
  background-blend-mode: lighten;
  background-size: auto, 50%;
  background-position: 0 0, bottom;
  background-repeat: no-repeat;  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  animation-delay: 12s;
}

.slideshow li:nth-child(4) span {
  background-image: url("http://carlsonmediacollective.com/images/page1b.jpg");
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  animation-delay: 18s;
}

/*@-webkit-keyframes imageAnimation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
  }
  12.5% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
  }
  25% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}*/
/*@-moz-keyframes imageAnimation {
  0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
  }
  12.5% {
    opacity: 0;
    -moz-animation-timing-function: ease-out;
  }
  25% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}*/
@keyframes imageAnimation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  25% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.no-cssanimations .slideshow li span {
  opacity: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  opacity: 0;
  animation: fadeIn ease-in 1;
  animation-fill-mode: forwards;
  animation-duration: 1s;
}

.fade-in--one {
  animation-delay: 0.7s;
}

.fade-in--two {
  animation-delay: 1.2s;
}

.fade-in--three {
  animation-delay: 1.6s;
}