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

  #landing-header h1 {
      color: white;
      text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
      font-size: 2.3em;
  }

  @media (min-width: 900px) {
    #landing-header h1 {
      font-size: 3.5em;
  }


  }

  .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%;
    background-repeat: no-repeat;
     opacity: 0; /* the lower more transparent */
    z-index: 0;
    animation: imageAnimation 30s linear infinite; 
  }

  .slideshow li:nth-child(1) { 
    background-image: url(https://images.unsplash.com/photo-1587896816473-11270b3b9f98?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);
    /* 3 detik masuk, 3 detik keluar = it takes 6s */ 
  }
  .slideshow li:nth-child(2) { 
    background-image: url(https://images.unsplash.com/photo-1610450107541-7d51654312ee?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1190&q=80);
    animation-delay: 6s; /* keluar setelah 6s */
  }
  .slideshow li:nth-child(3) { 
    background-image: url(https://images.unsplash.com/photo-1526615130707-b75efc81f4fe?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80);
    animation-delay: 12s; 
  }
  .slideshow li:nth-child(4) { 
    background-image: url(https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);
    animation-delay: 18s; 
  }
  .slideshow li:nth-child(5) { 
    background-image: url(  https://images.unsplash.com/photo-1555333145-4acf190da336?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80
    );
    animation-delay: 24s; 
  }

  @keyframes imageAnimation { 

    /* 100% divided by 5 is 20% so each image's fadein and visibility should last 20% of the cycle; 
    half of 20% is 10%, that is why our fade in is from 0% to 10%, 
    then we keep it visible until 20% is reached and begin the fadeout from 20% to 30%, 
    the 5 second fadeout overlaps the next image's 5 second fadein, 
    which is what creates the crossfade effect */


    0% { 
      opacity: 0; 
      animation-timing-function: ease-out; /* lambat di awal, cepat di akhur*/
    }
    10% {
      opacity: 1;
      animation-timing-function: ease-in; /* lambat di awal, cepat di akhur*/
    }
    20% {
      opacity: 1;
    }
    30% {
      opacity: 0;
    }
  }

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