@keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }

  .slideshow {
    height: 66vh;
    min-width: 66vw;
    width: 100%;
    margin: 20px;
  }

  .fading-slideshow {
    position: relative;
    margin: 1em auto;
    padding: 0;
    list-style-type: none;
    height: 100%;
    width: 100%;
  }
  .fading-slideshow > li {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #c4dea4;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* current slide */

  .fading-slideshow > li:first-of-type {
    animation-name: fader;
    animation-delay: 2s;
    animation-duration: 1s;
    z-index: 20;
  }

  /* next slide to display */

  .fading-slideshow > li:nth-of-type(2) {
    z-index: 10;
  }

  /* all other slides */

  .fading-slideshow > li:nth-of-type(n+3) {
    display: none;
  }

  .slideshow ul, li {
    margin: 0;
  }

  @media screen and (max-width: 500px) {

    .slideshow {
      height: 33vh;
    }

  }