.carousel {
  width: 100%;
  height: 50vh;
  position: relative;
  overflow: hidden;
}
.carousel > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
}
.carousel > *.pink {
  background-color: #FF0066;
}
.carousel > *.blue {
  background-color: #0066FF;
}
.carousel > *.orange {
  background-color: #FF6600;
}
.carousel > *.green {
  background-color: #00FF66;
}
.carousel > *:nth-child(1) {
  animation: fade1 20s infinite;
}
@keyframes fade1 {
  0%, 100% {
    opacity: 1;
  }
  28.3333333333% {
    opacity: 1;
  }
  33.3333333333% {
    opacity: 0;
  }
  95% {
    opacity: 0;
  }
}
.carousel > *:nth-child(2) {
  animation: fade2 20s infinite;
}
@keyframes fade2 {
  0%, 100% {
    opacity: 0;
  }
  28.3333333333% {
    opacity: 0;
  }
  33.3333333333% {
    opacity: 1;
  }
  61.6666666667% {
    opacity: 1;
  }
  66.6666666667% {
    opacity: 0;
  }
}
.carousel > *:nth-child(3) {
  animation: fade3 20s infinite;
}
@keyframes fade3 {
  0%, 100% {
    opacity: 0;
  }
  61.6666666667% {
    opacity: 0;
  }
  66.6666666667% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*# sourceMappingURL=bdr-carousel.css.map */