/* Carousel Start  */
.carousel_wrapper {
    position: relative;
    width: 320px;
    height: 300px;
    margin: 100px auto 0 auto;
    padding: 5px;
    perspective: 1000px;
  }
   
  .carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(-360deg) translateZ(-412px); /* add reverse transformation from the slides */
    animation: swirl 80s steps(10000, end) infinite; /* run `swirl` animation (defined at end of CSS) infitely, with animation 
   lasting 40 seconds, and 10,000 steps between the FROM and TO values in the animation for a smooth rotation */
  }
   
  .slide {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 300px;
    height: 187px;
  }
   
  .slide img {
    width: 280px;
    height: 175px;
    border: 3px inset rgba(0, 255, 34, 0.9);
    box-shadow: 0 0 10px 1px rgba(0, 255, 34, 0.9);
  }
   
  .slide.one {
    transform: rotateY(0deg) translateZ(412px);
  }
  .slide.two {
    transform: rotateY(40deg) translateZ(412px);
  }
  .slide.three {
    transform: rotateY(80deg) translateZ(412px);
  }
  .slide.four {
    transform: rotateY(120deg) translateZ(412px);
  }
  .slide.five {
    transform: rotateY(160deg) translateZ(412px);
  }
  .slide.six {
    transform: rotateY(200deg) translateZ(412px);
  }
  .slide.seven {
    transform: rotateY(240deg) translateZ(412px);
  }
  .slide.eight {
    transform: rotateY(280deg) translateZ(412px);
  }
  .slide.nine {
    transform: rotateY(320deg) translateZ(412px);
  }
   
  /*
  CSS3 ANIMATION
  -------------------
  Simply rotates the carousel around the Y axis by using rotateY and starting at initial value, -360º, and going to final value 0º, 
  then resetting.
  */
   
  @keyframes swirl {   
    from {
      transform: rotateY(-360deg);
    }
    to {
      transform: rotateY(0deg);
    }
  } 
  /* Carousel Start */