/*  ANIMATIONS FOR YEAR */

@keyframes spinOnY {
  17%  {transform: rotateY(30deg);}
  34%  {transform: rotateY(60deg);}
  51%  {transform: rotateY(90deg);}
  68%  {transform: rotateY(120deg);}
  85%  {transform: rotateY(150deg);}
  100% {transform: rotateY(180deg);}  
}


@keyframes spinOnX {
  17%  {transform: rotateX(30deg);}
  34%  {transform: rotateX(60deg);}
  51%  {transform: rotateX(90deg);}
  68%  {transform: rotateX(120deg);}
  85%  {transform: rotateX(150deg);}
  100% {transform: rotateX(180deg);}  
}


.spinX{
  position: relative;
  animation-name: spinOnX;
  animation-duration: .10s;
  animation-timing-function: ease-out;
  animation-iteration-count: 18;
  animation-delay: .25s;
}

.spinY{
  position: relative;
  animation-name: spinOnY;
  animation-duration: .1s;
  animation-timing-function: ease-out;
  animation-iteration-count: 19;
  animation-delay: .25s;
}

.spinYslower{
  position: relative;
  animation-name: spinOnY;
  animation-duration: .1s;
  animation-timing-function: ease-out;
  animation-iteration-count: 25;
  animation-delay: .2s;
}