.slideshow {
  position: relative;
  margin: 5% auto;
  width: 800px;
  height: 600px;
}

.slideshow > * {
  animation: 20s autoplay infinite linear; /*2 seconds per slide */
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.0;
}

.slide {
  width: 100%;
  height: auto;
}

.slideshow .slide img {
  width: 100%;
  height: auto;
}


.slideshow > *:nth-child(1) {animation-delay: 0s}
.slideshow > *:nth-child(2) {animation-delay: 2s}
.slideshow > *:nth-child(3) {animation-delay: 4s}
.slideshow > *:nth-child(4) {animation-delay: 6s}
.slideshow > *:nth-child(5) {animation-delay: 8s}
.slideshow > *:nth-child(6) {animation-delay: 10s}
.slideshow > *:nth-child(7) {animation-delay: 12s}
.slideshow > *:nth-child(8) {animation-delay: 14s}
.slideshow > *:nth-child(9) {animation-delay: 16s}
.slideshow > *:nth-child(10) {animation-delay: 18s}



@keyframes autoplay {
  /* begining of the animation */
  0% {opacity: 0.0}

  /* transition opacity speed */
  2% {opacity: 1.0}

  /* 11.11% (1/9) of 18 seconds is 2 seconds for each slide in total of 9 slides, percentage will change according to number of slides */
  /* eg: 
  3 slides: 3 slides of 18 seconds is 33.33% (1/3)
  10 slides: 10 slides of 20 seconds is 10% (1/10)
  9 slides: 9 slides of 18 second is 11.11% (1/9)
  11 slides: 11 slides of 18 seconds is 9% (1/11)
  */
  10% {opacity: 1.0}

  /* 11.11% + 4 = 15.11% */
  14% {opacity: 0.0}

  /* end of the animation*/
  100% {opacity: 0.0}
}


/* On small screens, decrease text size */
@media screen and (max-width: 768px) {


}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 480px) {

.slideshow {
  position: relative;
  width: 100%;
  max-width: 355px;
  height: 240px;
}

}