@import url(http://fonts.googleapis.com/css?family=Anaheim);

*{
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
    box-sizing: border-box;
}
*:before,
*:after{
  box-sizing: border-box;
}
html,
body{
  min-height: 100%;
}
/* body{
  background-image: radial-gradient(mintcream 0%, lightgray 100%);
} */
/* h1{
  display: table;
  margin: 5% auto 0;
  text-transform: uppercase;
  font-family: 'Anaheim', sans-serif;
  font-size: 4em;
  font-weight: 400;
  text-shadow: 0 1px white, 0 2px black;
} */
#container{
  margin: 4% auto;
  width: 210px;
  height: 140px;
  position: relative;
  perspective: 1000px;
  margin-bottom: 200px;
}
#carousel1{
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  animation: rotation 20s infinite linear;
}
#carousel1:hover{
  animation-play-state: paused;
}
#carousel1 figure{
  display: block;
  position: absolute;
  width: 90%;
  height: 50%px;
  left: 10px;
  top: 10px;
  background: black;
  overflow: hidden;
  border: solid 5px black;
}
#carousel1 figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
#carousel1 figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carousel1 figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carousel1 figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carousel1 figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carousel1 figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carousel1 figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carousel1 figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carousel1 figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}

img{
  -webkit-filter: grayscale(0);
  cursor: pointer;
  transition: all .5s ease;
}
img:hover{
  -webkit-filter: grayscale(0);
  transform: scale(1.0,1.3);
}

@keyframes rotation{
  from{
    transform: rotateY(0deg);
  }
  to{
    transform: rotateY(360deg);
  }
}