html {
  /* for IE, delete and replace var(--picWidth) with actual width: */
  --picWidth: 600px;
}
body {
  background: #000;
  color: #999;
}
p { text-align: center; }
a { color: #aaa; }

.slideshow {
  /* set the positioning context for the images */
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  width: var(--picWidth);
  height: 448px;
  /* uncomment to check if colour shows below images - if so, reduce height: */
  /* background: red; */
}

.slideshow img {
  /* position all images on top of each other: */
  position: absolute;
  width: var(--picWidth);
  opacity: 0;
  /* set the duration to match nth-child(1): */
  animation: round 21s infinite;
}

@keyframes round {
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

img:nth-child(1) { animation-delay: 21s; }
img:nth-child(2) { animation-delay: 14s; }
img:nth-child(3) { animation-delay: 7s; }
img:nth-child(4) { animation-delay: 0s; }