@charset "utf-8";
/* CSS Document */
#slideset6 {height: 20em; position: relative}
/*Each slide is positioned in the container and gets an 'opacity' of 0, i.e., it is fully transparent (invisible).*/

#slideset6 > * {animation: 12s autoplay6 infinite linear;
  position: absolute; top: 0; left: 0; opacity: 0.0}
/*For this animation I chose a linear progression, instead of the 'ease-in-out' I used in some other methods. For the fading effect I think it looks better.

The animation changes the opacity from 0 to 1 in half a second, and, 3½ seconds later, changes it back to 0, again in half a second (between 33.33% and 37.33%):*/

@keyframes autoplay6 {
  0% {opacity: 0.0}
  4% {opacity: 1.0}
  33.33% {opacity: 1.0}
  37.33% {opacity: 0.0}
  100% {opacity: 0.0}
}
/*As before, each slide starts its animation 4 seconds after the preceding slide. That means each slide starts fading in exactly as the previous slide starts fading out. (33.33% of 12 seconds is 4 seconds.)*/

#slideset6 > *:nth-child(1) {animation-delay: 0s}
#slideset6 > *:nth-child(2) {animation-delay: 4s}
#slideset6 > *:nth-child(3) {animation-delay: 8s}

#pause1:checked ~ #slideset6 > * {
  animation-play-state: paused}
#pause1 {display: none}
#pause1 ~ * [for=pause1] .paused {display: none}
#pause1 ~ * [for=pause1] .running {display: inline}
#pause1:checked ~ * [for=pause1] .running {display: none}
#pause1:checked ~ #slideset6 > * {animation-play-state: paused}