/*! * * * * * * * * * * * * * * * * * * * *\
  CSShake :: shake-rotate
  v1.5.0
  CSS classes to move your DOM
  (c) 2015 @elrumordelaluz
  http://elrumordelaluz.github.io/csshake/
  Licensed under MIT
\* * * * * * * * * * * * * * * * * * * * */

@keyframes shake-rotate {
  2% {
    transform: translate(0, 0) rotate(-4.5deg);
  }

  4% {
    transform: translate(0, 0) rotate(-1.5deg);
  }

  6% {
    transform: translate(0, 0) rotate(-6.5deg);
  }

  8% {
    transform: translate(0, 0) rotate(2.5deg);
  }

  10% {
    transform: translate(0, 0) rotate(6.5deg);
  }

  12% {
    transform: translate(0, 0) rotate(-3.5deg);
  }

  14% {
    transform: translate(0, 0) rotate(7.5deg);
  }

  16% {
    transform: translate(0, 0) rotate(2.5deg);
  }

  18% {
    transform: translate(0, 0) rotate(7.5deg);
  }

  20% {
    transform: translate(0, 0) rotate(3.5deg);
  }

  22% {
    transform: translate(0, 0) rotate(1.5deg);
  }

  24% {
    transform: translate(0, 0) rotate(1.5deg);
  }

  26% {
    transform: translate(0, 0) rotate(0.5deg);
  }

  28% {
    transform: translate(0, 0) rotate(6.5deg);
  }

  30% {
    transform: translate(0, 0) rotate(-1.5deg);
  }

  32% {
    transform: translate(0, 0) rotate(-1.5deg);
  }

  34% {
    transform: translate(0, 0) rotate(2.5deg);
  }

  36% {
    transform: translate(0, 0) rotate(-2.5deg);
  }

  38% {
    transform: translate(0, 0) rotate(1.5deg);
  }

  40% {
    transform: translate(0, 0) rotate(7.5deg);
  }

  42% {
    transform: translate(0, 0) rotate(-2.5deg);
  }

  44% {
    transform: translate(0, 0) rotate(-0.5deg);
  }

  46% {
    transform: translate(0, 0) rotate(-6.5deg);
  }

  48% {
    transform: translate(0, 0) rotate(0.5deg);
  }

  50% {
    transform: translate(0, 0) rotate(1.5deg);
  }

  52% {
    transform: translate(0, 0) rotate(1.5deg);
  }

  54% {
    transform: translate(0, 0) rotate(4.5deg);
  }

  56% {
    transform: translate(0, 0) rotate(-4.5deg);
  }

  58% {
    transform: translate(0, 0) rotate(5.5deg);
  }

  60% {
    transform: translate(0, 0) rotate(-3.5deg);
  }

  62% {
    transform: translate(0, 0) rotate(-0.5deg);
  }

  64% {
    transform: translate(0, 0) rotate(7.5deg);
  }

  66% {
    transform: translate(0, 0) rotate(6.5deg);
  }

  68% {
    transform: translate(0, 0) rotate(-6.5deg);
  }

  70% {
    transform: translate(0, 0) rotate(-4.5deg);
  }

  72% {
    transform: translate(0, 0) rotate(3.5deg);
  }

  74% {
    transform: translate(0, 0) rotate(-2.5deg);
  }

  76% {
    transform: translate(0, 0) rotate(-4.5deg);
  }

  78% {
    transform: translate(0, 0) rotate(1.5deg);
  }

  80% {
    transform: translate(0, 0) rotate(1.5deg);
  }

  82% {
    transform: translate(0, 0) rotate(-2.5deg);
  }

  84% {
    transform: translate(0, 0) rotate(-3.5deg);
  }

  86% {
    transform: translate(0, 0) rotate(-6.5deg);
  }

  88% {
    transform: translate(0, 0) rotate(-0.5deg);
  }

  90% {
    transform: translate(0, 0) rotate(5.5deg);
  }

  92% {
    transform: translate(0, 0) rotate(4.5deg);
  }

  94% {
    transform: translate(0, 0) rotate(-1.5deg);
  }

  96% {
    transform: translate(0, 0) rotate(1.5deg);
  }

  98% {
    transform: translate(0, 0) rotate(-3.5deg);
  }

  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}

.mod_minilesson-shake {
  animation-name: shake-rotate;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
}


@keyframes shake-horizontal {
  2% {
    transform: translate(8px, 0) rotate(0)
  }

  4% {
    transform: translate(7px, 0) rotate(0)
  }

  6% {
    transform: translate(-3px, 0) rotate(0)
  }

  8% {
    transform: translate(-1px, 0) rotate(0)
  }

  10% {
    transform: translate(2px, 0) rotate(0)
  }

  12% {
    transform: translate(8px, 0) rotate(0)
  }

  14% {
    transform: translate(4px, 0) rotate(0)
  }

  16% {
    transform: translate(-8px, 0) rotate(0)
  }

  18% {
    transform: translate(-2px, 0) rotate(0)
  }

  20% {
    transform: translate(0px, 0) rotate(0)
  }

  22% {
    transform: translate(-9px, 0) rotate(0)
  }

  24% {
    transform: translate(-9px, 0) rotate(0)
  }

  26% {
    transform: translate(10px, 0) rotate(0)
  }

  28% {
    transform: translate(7px, 0) rotate(0)
  }

  30% {
    transform: translate(9px, 0) rotate(0)
  }

  32% {
    transform: translate(2px, 0) rotate(0)
  }

  34% {
    transform: translate(5px, 0) rotate(0)
  }

  36% {
    transform: translate(-2px, 0) rotate(0)
  }

  38% {
    transform: translate(5px, 0) rotate(0)
  }

  40% {
    transform: translate(-4px, 0) rotate(0)
  }

  42% {
    transform: translate(8px, 0) rotate(0)
  }

  44% {
    transform: translate(0px, 0) rotate(0)
  }

  46% {
    transform: translate(3px, 0) rotate(0)
  }

  48% {
    transform: translate(0px, 0) rotate(0)
  }

  50% {
    transform: translate(-2px, 0) rotate(0)
  }

  52% {
    transform: translate(-6px, 0) rotate(0)
  }

  54% {
    transform: translate(-6px, 0) rotate(0)
  }

  56% {
    transform: translate(3px, 0) rotate(0)
  }

  58% {
    transform: translate(-5px, 0) rotate(0)
  }

  60% {
    transform: translate(-8px, 0) rotate(0)
  }

  62% {
    transform: translate(-7px, 0) rotate(0)
  }

  64% {
    transform: translate(-1px, 0) rotate(0)
  }

  66% {
    transform: translate(-6px, 0) rotate(0)
  }

  68% {
    transform: translate(10px, 0) rotate(0)
  }

  70% {
    transform: translate(-6px, 0) rotate(0)
  }

  72% {
    transform: translate(8px, 0) rotate(0)
  }

  74% {
    transform: translate(2px, 0) rotate(0)
  }

  76% {
    transform: translate(8px, 0) rotate(0)
  }

  78% {
    transform: translate(-4px, 0) rotate(0)
  }

  80% {
    transform: translate(-6px, 0) rotate(0)
  }

  82% {
    transform: translate(0px, 0) rotate(0)
  }

  84% {
    transform: translate(10px, 0) rotate(0)
  }

  86% {
    transform: translate(0px, 0) rotate(0)
  }

  88% {
    transform: translate(-6px, 0) rotate(0)
  }

  90% {
    transform: translate(4px, 0) rotate(0)
  }

  92% {
    transform: translate(-6px, 0) rotate(0)
  }

  94% {
    transform: translate(-1px, 0) rotate(0)
  }

  96% {
    transform: translate(8px, 0) rotate(0)
  }

  98% {
    transform: translate(-8px, 0) rotate(0)
  }

  0%,
  100% {
    transform: translate(0, 0) rotate(0)
  }
}

@keyframes shake-well{
  0%, 100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(8px); }
  60%{ transform:translateX(-6px); }
  80%{ transform:translateX(6px); }
}

@keyframes matchFade {
  to {
    opacity:0;
    transform:scale(0);
    visibility:hidden;
  }
}