<!--
Copyright (c) 2014 by Lionel T (http://codepen.io/elrumordelaluz/pen/pHKcC)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->

.shake {
  display: inline-block;
  transform-origin: center center;
}
.shake:hover {
  animation-name: shake-base;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez {
  animation-name: shake-base;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-play-state: paused;
}
.shake.freez.shake-hard {
  animation-name: shake-hard;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez.shake-slow {
  animation-name: shake-slow;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez.shake-little {
  animation-name: shake-little;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez.shake-horizontal {
  animation-name: shake-horizontal;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez.shake-vertical {
  animation-name: shake-vertical;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez.shake-rotate {
  animation-name: shake-rotate;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez.shake-opacity {
  animation-name: shake-opacity;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez.shake-crazy {
  animation-name: shake-crazy;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez:hover {
  animation-play-state: running;
}
.shake.shake-hard:hover {
  animation-name: shake-hard;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-slow:hover {
  animation-name: shake-slow;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-little:hover {
  animation-name: shake-little;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-horizontal:hover {
  animation-name: shake-horizontal;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-vertical:hover {
  animation-name: shake-vertical;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-rotate:hover {
  animation-name: shake-rotate;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-opacity:hover {
  animation-name: shake-opacity;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-crazy:hover {
  animation-name: shake-crazy;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant {
  animation-name: shake-base;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.shake-hard {
  animation-name: shake-hard;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.shake-slow {
  animation-name: shake-slow;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.shake-little {
  animation-name: shake-little;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.shake-horizontal {
  animation-name: shake-horizontal;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.shake-vertical {
  animation-name: shake-vertical;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.shake-rotate {
  animation-name: shake-rotate;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.shake-opacity {
  animation-name: shake-opacity;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.shake-crazy {
  animation-name: shake-crazy;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.hover-stop:hover {
  animation-play-state: paused;
}
.shake.shake-delay {
  animation-name: shake-base;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 4s;
}

@keyframes shake-base {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  2% {
    transform: translate(-2.5px, -0.5px) rotate(-1.5deg);
  }

  4% {
    transform: translate(0.5px, 1.5px) rotate(-0.5deg);
  }

  6% {
    transform: translate(-2.5px, 1.5px) rotate(-0.5deg);
  }

  8% {
    transform: translate(-0.5px, 1.5px) rotate(0.5deg);
  }

  10% {
    transform: translate(0.5px, 1.5px) rotate(-1.5deg);
  }

  12% {
    transform: translate(1.5px, 1.5px) rotate(-0.5deg);
  }

  14% {
    transform: translate(0.5px, -1.5px) rotate(0.5deg);
  }

  16% {
    transform: translate(0.5px, -2.5px) rotate(0.5deg);
  }

  18% {
    transform: translate(1.5px, -0.5px) rotate(-1.5deg);
  }

  20% {
    transform: translate(0.5px, -2.5px) rotate(-0.5deg);
  }

  22% {
    transform: translate(-2.5px, -1.5px) rotate(-0.5deg);
  }

  24% {
    transform: translate(1.5px, -2.5px) rotate(-0.5deg);
  }

  26% {
    transform: translate(0.5px, -0.5px) rotate(-0.5deg);
  }

  28% {
    transform: translate(-2.5px, 1.5px) rotate(-0.5deg);
  }

  30% {
    transform: translate(-2.5px, 1.5px) rotate(0.5deg);
  }

  32% {
    transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
  }

  34% {
    transform: translate(-0.5px, -2.5px) rotate(-1.5deg);
  }

  36% {
    transform: translate(1.5px, -0.5px) rotate(-1.5deg);
  }

  38% {
    transform: translate(-1.5px, -0.5px) rotate(-1.5deg);
  }

  40% {
    transform: translate(-0.5px, 0.5px) rotate(-1.5deg);
  }

  42% {
    transform: translate(1.5px, -2.5px) rotate(-1.5deg);
  }

  44% {
    transform: translate(-0.5px, -0.5px) rotate(0.5deg);
  }

  46% {
    transform: translate(1.5px, -1.5px) rotate(0.5deg);
  }

  48% {
    transform: translate(-1.5px, 0.5px) rotate(0.5deg);
  }

  50% {
    transform: translate(-0.5px, -0.5px) rotate(0.5deg);
  }

  52% {
    transform: translate(-1.5px, -1.5px) rotate(-0.5deg);
  }

  54% {
    transform: translate(-1.5px, -2.5px) rotate(-0.5deg);
  }

  56% {
    transform: translate(-1.5px, -2.5px) rotate(-0.5deg);
  }

  58% {
    transform: translate(0.5px, -0.5px) rotate(0.5deg);
  }

  60% {
    transform: translate(-0.5px, -1.5px) rotate(0.5deg);
  }

  62% {
    transform: translate(-2.5px, -2.5px) rotate(0.5deg);
  }

  64% {
    transform: translate(-2.5px, -1.5px) rotate(0.5deg);
  }

  66% {
    transform: translate(1.5px, -0.5px) rotate(-1.5deg);
  }

  68% {
    transform: translate(0.5px, 1.5px) rotate(0.5deg);
  }

  70% {
    transform: translate(1.5px, 1.5px) rotate(-0.5deg);
  }

  72% {
    transform: translate(0.5px, 0.5px) rotate(-1.5deg);
  }

  74% {
    transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
  }

  76% {
    transform: translate(0.5px, -2.5px) rotate(-1.5deg);
  }

  78% {
    transform: translate(0.5px, 1.5px) rotate(-1.5deg);
  }

  80% {
    transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
  }

  82% {
    transform: translate(1.5px, -1.5px) rotate(-1.5deg);
  }

  84% {
    transform: translate(-2.5px, -1.5px) rotate(-1.5deg);
  }

  86% {
    transform: translate(1.5px, -1.5px) rotate(0.5deg);
  }

  88% {
    transform: translate(-0.5px, 0.5px) rotate(-0.5deg);
  }

  90% {
    transform: translate(-2.5px, -0.5px) rotate(0.5deg);
  }

  92% {
    transform: translate(1.5px, 1.5px) rotate(0.5deg);
  }

  94% {
    transform: translate(-0.5px, 0.5px) rotate(0.5deg);
  }

  96% {
    transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
  }

  98% {
    transform: translate(-2.5px, 1.5px) rotate(-0.5deg);
  }
}
@keyframes shake-little {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  2% {
    transform: translate(0px, -1px) rotate(-0.5deg);
  }

  4% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  6% {
    transform: translate(-1px, 0px) rotate(-0.5deg);
  }

  8% {
    transform: translate(0px, -1px) rotate(-0.5deg);
  }

  10% {
    transform: translate(-1px, 0px) rotate(-0.5deg);
  }

  12% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  14% {
    transform: translate(-1px, -1px) rotate(-0.5deg);
  }

  16% {
    transform: translate(0px, -1px) rotate(-0.5deg);
  }

  18% {
    transform: translate(-1px, 0px) rotate(-0.5deg);
  }

  20% {
    transform: translate(-1px, -1px) rotate(-0.5deg);
  }

  22% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  24% {
    transform: translate(0px, -1px) rotate(-0.5deg);
  }

  26% {
    transform: translate(-1px, 0px) rotate(-0.5deg);
  }

  28% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  30% {
    transform: translate(-1px, -1px) rotate(-0.5deg);
  }

  32% {
    transform: translate(-1px, 0px) rotate(-0.5deg);
  }

  34% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  36% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  38% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  40% {
    transform: translate(-1px, -1px) rotate(-0.5deg);
  }

  42% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  44% {
    transform: translate(0px, -1px) rotate(-0.5deg);
  }

  46% {
    transform: translate(-1px, -1px) rotate(-0.5deg);
  }

  48% {
    transform: translate(-1px, 0px) rotate(-0.5deg);
  }

  50% {
    transform: translate(-1px, 0px) rotate(-0.5deg);
  }

  52% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  54% {
    transform: translate(-1px, -1px) rotate(-0.5deg);
  }

  56% {
    transform: translate(-1px, 0px) rotate(-0.5deg);
  }

  58% {
    transform: translate(-1px, -1px) rotate(-0.5deg);
  }

  60% {
    transform: translate(0px, -1px) rotate(-0.5deg);
  }

  62% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  64% {
    transform: translate(-1px, -1px) rotate(-0.5deg);
  }

  66% {
    transform: translate(-1px, -1px) rotate(-0.5deg);
  }

  68% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  70% {
    transform: translate(-1px, 0px) rotate(-0.5deg);
  }

  72% {
    transform: translate(0px, -1px) rotate(-0.5deg);
  }

  74% {
    transform: translate(-1px, 0px) rotate(-0.5deg);
  }

  76% {
    transform: translate(-1px, 0px) rotate(-0.5deg);
  }

  78% {
    transform: translate(0px, -1px) rotate(-0.5deg);
  }

  80% {
    transform: translate(-1px, -1px) rotate(-0.5deg);
  }

  82% {
    transform: translate(-1px, -1px) rotate(-0.5deg);
  }

  84% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  86% {
    transform: translate(-1px, 0px) rotate(-0.5deg);
  }

  88% {
    transform: translate(0px, -1px) rotate(-0.5deg);
  }

  90% {
    transform: translate(-1px, -1px) rotate(-0.5deg);
  }

  92% {
    transform: translate(-1px, 0px) rotate(-0.5deg);
  }

  94% {
    transform: translate(-1px, -1px) rotate(-0.5deg);
  }

  96% {
    transform: translate(-1px, 0px) rotate(-0.5deg);
  }

  98% {
    transform: translate(0px, -1px) rotate(-0.5deg);
  }
}
@keyframes shake-slow {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  2% {
    transform: translate(-8px, -10px) rotate(1.5deg);
  }

  4% {
    transform: translate(9px, 1px) rotate(0.5deg);
  }

  6% {
    transform: translate(-9px, 9px) rotate(1.5deg);
  }

  8% {
    transform: translate(8px, -6px) rotate(0.5deg);
  }

  10% {
    transform: translate(1px, 4px) rotate(-0.5deg);
  }

  12% {
    transform: translate(-2px, -1px) rotate(1.5deg);
  }

  14% {
    transform: translate(-7px, -1px) rotate(0.5deg);
  }

  16% {
    transform: translate(-4px, 1px) rotate(-2.5deg);
  }

  18% {
    transform: translate(-1px, -10px) rotate(-0.5deg);
  }

  20% {
    transform: translate(-4px, 9px) rotate(2.5deg);
  }

  22% {
    transform: translate(-3px, 7px) rotate(2.5deg);
  }

  24% {
    transform: translate(-9px, -10px) rotate(1.5deg);
  }

  26% {
    transform: translate(2px, -2px) rotate(2.5deg);
  }

  28% {
    transform: translate(-1px, -9px) rotate(-1.5deg);
  }

  30% {
    transform: translate(8px, 9px) rotate(-3.5deg);
  }

  32% {
    transform: translate(1px, -5px) rotate(0.5deg);
  }

  34% {
    transform: translate(0px, -5px) rotate(-0.5deg);
  }

  36% {
    transform: translate(-6px, -9px) rotate(-0.5deg);
  }

  38% {
    transform: translate(-9px, 8px) rotate(-2.5deg);
  }

  40% {
    transform: translate(0px, -9px) rotate(2.5deg);
  }

  42% {
    transform: translate(-5px, -6px) rotate(-0.5deg);
  }

  44% {
    transform: translate(-2px, -8px) rotate(-2.5deg);
  }

  46% {
    transform: translate(-6px, -3px) rotate(-0.5deg);
  }

  48% {
    transform: translate(-5px, -5px) rotate(1.5deg);
  }

  50% {
    transform: translate(-7px, 8px) rotate(1.5deg);
  }

  52% {
    transform: translate(2px, 0px) rotate(1.5deg);
  }

  54% {
    transform: translate(1px, -9px) rotate(-0.5deg);
  }

  56% {
    transform: translate(-2px, 1px) rotate(-0.5deg);
  }

  58% {
    transform: translate(-1px, -5px) rotate(0.5deg);
  }

  60% {
    transform: translate(-3px, -5px) rotate(-3.5deg);
  }

  62% {
    transform: translate(0px, 9px) rotate(-0.5deg);
  }

  64% {
    transform: translate(5px, 8px) rotate(-2.5deg);
  }

  66% {
    transform: translate(1px, 9px) rotate(0.5deg);
  }

  68% {
    transform: translate(-2px, 8px) rotate(1.5deg);
  }

  70% {
    transform: translate(-5px, -5px) rotate(-0.5deg);
  }

  72% {
    transform: translate(3px, -6px) rotate(-0.5deg);
  }

  74% {
    transform: translate(9px, 3px) rotate(-3.5deg);
  }

  76% {
    transform: translate(-2px, -1px) rotate(2.5deg);
  }

  78% {
    transform: translate(-3px, -1px) rotate(-1.5deg);
  }

  80% {
    transform: translate(-9px, -4px) rotate(2.5deg);
  }

  82% {
    transform: translate(3px, 8px) rotate(-2.5deg);
  }

  84% {
    transform: translate(5px, -2px) rotate(-2.5deg);
  }

  86% {
    transform: translate(-5px, -7px) rotate(-2.5deg);
  }

  88% {
    transform: translate(0px, -9px) rotate(0.5deg);
  }

  90% {
    transform: translate(-5px, 8px) rotate(-1.5deg);
  }

  92% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  94% {
    transform: translate(-10px, -6px) rotate(2.5deg);
  }

  96% {
    transform: translate(-1px, -9px) rotate(-3.5deg);
  }

  98% {
    transform: translate(-4px, -2px) rotate(-3.5deg);
  }
}
@keyframes shake-hard {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  2% {
    transform: translate(-9px, 7px) rotate(-3.5deg);
  }

  4% {
    transform: translate(-8px, 4px) rotate(2.5deg);
  }

  6% {
    transform: translate(0px, 0px) rotate(-2.5deg);
  }

  8% {
    transform: translate(-5px, 9px) rotate(-0.5deg);
  }

  10% {
    transform: translate(-6px, -4px) rotate(-2.5deg);
  }

  12% {
    transform: translate(0px, -7px) rotate(-3.5deg);
  }

  14% {
    transform: translate(8px, -9px) rotate(1.5deg);
  }

  16% {
    transform: translate(8px, 8px) rotate(-1.5deg);
  }

  18% {
    transform: translate(-6px, 9px) rotate(-0.5deg);
  }

  20% {
    transform: translate(5px, 8px) rotate(-0.5deg);
  }

  22% {
    transform: translate(1px, -1px) rotate(-0.5deg);
  }

  24% {
    transform: translate(2px, -2px) rotate(0.5deg);
  }

  26% {
    transform: translate(2px, -1px) rotate(2.5deg);
  }

  28% {
    transform: translate(-9px, 1px) rotate(-0.5deg);
  }

  30% {
    transform: translate(-9px, 9px) rotate(-1.5deg);
  }

  32% {
    transform: translate(-1px, 6px) rotate(0.5deg);
  }

  34% {
    transform: translate(2px, 3px) rotate(-0.5deg);
  }

  36% {
    transform: translate(2px, 7px) rotate(2.5deg);
  }

  38% {
    transform: translate(2px, 0px) rotate(-0.5deg);
  }

  40% {
    transform: translate(-10px, 5px) rotate(2.5deg);
  }

  42% {
    transform: translate(9px, 3px) rotate(0.5deg);
  }

  44% {
    transform: translate(5px, 7px) rotate(-0.5deg);
  }

  46% {
    transform: translate(7px, 6px) rotate(-1.5deg);
  }

  48% {
    transform: translate(1px, 8px) rotate(1.5deg);
  }

  50% {
    transform: translate(-6px, 9px) rotate(0.5deg);
  }

  52% {
    transform: translate(5px, -10px) rotate(1.5deg);
  }

  54% {
    transform: translate(-10px, -3px) rotate(0.5deg);
  }

  56% {
    transform: translate(5px, 0px) rotate(-0.5deg);
  }

  58% {
    transform: translate(-2px, 2px) rotate(-1.5deg);
  }

  60% {
    transform: translate(-3px, 3px) rotate(-1.5deg);
  }

  62% {
    transform: translate(1px, 6px) rotate(-0.5deg);
  }

  64% {
    transform: translate(-8px, -9px) rotate(0.5deg);
  }

  66% {
    transform: translate(-7px, 4px) rotate(-3.5deg);
  }

  68% {
    transform: translate(7px, 6px) rotate(-2.5deg);
  }

  70% {
    transform: translate(3px, 0px) rotate(-1.5deg);
  }

  72% {
    transform: translate(6px, -1px) rotate(0.5deg);
  }

  74% {
    transform: translate(4px, -6px) rotate(-1.5deg);
  }

  76% {
    transform: translate(-4px, -8px) rotate(-2.5deg);
  }

  78% {
    transform: translate(1px, -8px) rotate(-0.5deg);
  }

  80% {
    transform: translate(-1px, -4px) rotate(-2.5deg);
  }

  82% {
    transform: translate(2px, 7px) rotate(2.5deg);
  }

  84% {
    transform: translate(-8px, -1px) rotate(0.5deg);
  }

  86% {
    transform: translate(3px, -8px) rotate(-0.5deg);
  }

  88% {
    transform: translate(-5px, 6px) rotate(1.5deg);
  }

  90% {
    transform: translate(-2px, -6px) rotate(0.5deg);
  }

  92% {
    transform: translate(-5px, -10px) rotate(-1.5deg);
  }

  94% {
    transform: translate(5px, -4px) rotate(-1.5deg);
  }

  96% {
    transform: translate(-8px, -7px) rotate(-0.5deg);
  }

  98% {
    transform: translate(3px, 4px) rotate(-3.5deg);
  }
}
@keyframes shake-horizontal {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  2% {
    transform: translate(5px, 0px) rotate(0deg);
  }

  4% {
    transform: translate(-5px, 0px) rotate(0deg);
  }

  6% {
    transform: translate(5px, 0px) rotate(0deg);
  }

  8% {
    transform: translate(-9px, 0px) rotate(0deg);
  }

  10% {
    transform: translate(6px, 0px) rotate(0deg);
  }

  12% {
    transform: translate(-5px, 0px) rotate(0deg);
  }

  14% {
    transform: translate(-3px, 0px) rotate(0deg);
  }

  16% {
    transform: translate(-8px, 0px) rotate(0deg);
  }

  18% {
    transform: translate(3px, 0px) rotate(0deg);
  }

  20% {
    transform: translate(-1px, 0px) rotate(0deg);
  }

  22% {
    transform: translate(-3px, 0px) rotate(0deg);
  }

  24% {
    transform: translate(-3px, 0px) rotate(0deg);
  }

  26% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  28% {
    transform: translate(2px, 0px) rotate(0deg);
  }

  30% {
    transform: translate(-5px, 0px) rotate(0deg);
  }

  32% {
    transform: translate(-6px, 0px) rotate(0deg);
  }

  34% {
    transform: translate(-4px, 0px) rotate(0deg);
  }

  36% {
    transform: translate(5px, 0px) rotate(0deg);
  }

  38% {
    transform: translate(-5px, 0px) rotate(0deg);
  }

  40% {
    transform: translate(7px, 0px) rotate(0deg);
  }

  42% {
    transform: translate(-10px, 0px) rotate(0deg);
  }

  44% {
    transform: translate(9px, 0px) rotate(0deg);
  }

  46% {
    transform: translate(-5px, 0px) rotate(0deg);
  }

  48% {
    transform: translate(-8px, 0px) rotate(0deg);
  }

  50% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  52% {
    transform: translate(9px, 0px) rotate(0deg);
  }

  54% {
    transform: translate(9px, 0px) rotate(0deg);
  }

  56% {
    transform: translate(-3px, 0px) rotate(0deg);
  }

  58% {
    transform: translate(6px, 0px) rotate(0deg);
  }

  60% {
    transform: translate(6px, 0px) rotate(0deg);
  }

  62% {
    transform: translate(-5px, 0px) rotate(0deg);
  }

  64% {
    transform: translate(-10px, 0px) rotate(0deg);
  }

  66% {
    transform: translate(-7px, 0px) rotate(0deg);
  }

  68% {
    transform: translate(-5px, 0px) rotate(0deg);
  }

  70% {
    transform: translate(-8px, 0px) rotate(0deg);
  }

  72% {
    transform: translate(8px, 0px) rotate(0deg);
  }

  74% {
    transform: translate(-2px, 0px) rotate(0deg);
  }

  76% {
    transform: translate(2px, 0px) rotate(0deg);
  }

  78% {
    transform: translate(-9px, 0px) rotate(0deg);
  }

  80% {
    transform: translate(1px, 0px) rotate(0deg);
  }

  82% {
    transform: translate(8px, 0px) rotate(0deg);
  }

  84% {
    transform: translate(4px, 0px) rotate(0deg);
  }

  86% {
    transform: translate(-7px, 0px) rotate(0deg);
  }

  88% {
    transform: translate(1px, 0px) rotate(0deg);
  }

  90% {
    transform: translate(-4px, 0px) rotate(0deg);
  }

  92% {
    transform: translate(-3px, 0px) rotate(0deg);
  }

  94% {
    transform: translate(4px, 0px) rotate(0deg);
  }

  96% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  98% {
    transform: translate(-6px, 0px) rotate(0deg);
  }
}
@keyframes shake-vertical {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  2% {
    transform: translate(0px, -8px) rotate(0deg);
  }

  4% {
    transform: translate(0px, 4px) rotate(0deg);
  }

  6% {
    transform: translate(0px, -2px) rotate(0deg);
  }

  8% {
    transform: translate(0px, -6px) rotate(0deg);
  }

  10% {
    transform: translate(0px, 2px) rotate(0deg);
  }

  12% {
    transform: translate(0px, -8px) rotate(0deg);
  }

  14% {
    transform: translate(0px, 1px) rotate(0deg);
  }

  16% {
    transform: translate(0px, -1px) rotate(0deg);
  }

  18% {
    transform: translate(0px, 8px) rotate(0deg);
  }

  20% {
    transform: translate(0px, -4px) rotate(0deg);
  }

  22% {
    transform: translate(0px, 3px) rotate(0deg);
  }

  24% {
    transform: translate(0px, -1px) rotate(0deg);
  }

  26% {
    transform: translate(0px, -9px) rotate(0deg);
  }

  28% {
    transform: translate(0px, 7px) rotate(0deg);
  }

  30% {
    transform: translate(0px, 6px) rotate(0deg);
  }

  32% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  34% {
    transform: translate(0px, -1px) rotate(0deg);
  }

  36% {
    transform: translate(0px, -4px) rotate(0deg);
  }

  38% {
    transform: translate(0px, 4px) rotate(0deg);
  }

  40% {
    transform: translate(0px, 6px) rotate(0deg);
  }

  42% {
    transform: translate(0px, 9px) rotate(0deg);
  }

  44% {
    transform: translate(0px, -3px) rotate(0deg);
  }

  46% {
    transform: translate(0px, -5px) rotate(0deg);
  }

  48% {
    transform: translate(0px, -8px) rotate(0deg);
  }

  50% {
    transform: translate(0px, 4px) rotate(0deg);
  }

  52% {
    transform: translate(0px, 1px) rotate(0deg);
  }

  54% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  56% {
    transform: translate(0px, -2px) rotate(0deg);
  }

  58% {
    transform: translate(0px, 5px) rotate(0deg);
  }

  60% {
    transform: translate(0px, -3px) rotate(0deg);
  }

  62% {
    transform: translate(0px, -8px) rotate(0deg);
  }

  64% {
    transform: translate(0px, 9px) rotate(0deg);
  }

  66% {
    transform: translate(0px, 9px) rotate(0deg);
  }

  68% {
    transform: translate(0px, 6px) rotate(0deg);
  }

  70% {
    transform: translate(0px, 9px) rotate(0deg);
  }

  72% {
    transform: translate(0px, -2px) rotate(0deg);
  }

  74% {
    transform: translate(0px, -8px) rotate(0deg);
  }

  76% {
    transform: translate(0px, -6px) rotate(0deg);
  }

  78% {
    transform: translate(0px, -4px) rotate(0deg);
  }

  80% {
    transform: translate(0px, -6px) rotate(0deg);
  }

  82% {
    transform: translate(0px, -7px) rotate(0deg);
  }

  84% {
    transform: translate(0px, -1px) rotate(0deg);
  }

  86% {
    transform: translate(0px, -6px) rotate(0deg);
  }

  88% {
    transform: translate(0px, -10px) rotate(0deg);
  }

  90% {
    transform: translate(0px, -2px) rotate(0deg);
  }

  92% {
    transform: translate(0px, -5px) rotate(0deg);
  }

  94% {
    transform: translate(0px, 6px) rotate(0deg);
  }

  96% {
    transform: translate(0px, 9px) rotate(0deg);
  }

  98% {
    transform: translate(0px, -6px) rotate(0deg);
  }
}
@keyframes shake-rotate {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  2% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  4% {
    transform: translate(0px, 0px) rotate(2.5deg);
  }

  6% {
    transform: translate(0px, 0px) rotate(-7.5deg);
  }

  8% {
    transform: translate(0px, 0px) rotate(-4.5deg);
  }

  10% {
    transform: translate(0px, 0px) rotate(2.5deg);
  }

  12% {
    transform: translate(0px, 0px) rotate(3.5deg);
  }

  14% {
    transform: translate(0px, 0px) rotate(-2.5deg);
  }

  16% {
    transform: translate(0px, 0px) rotate(1.5deg);
  }

  18% {
    transform: translate(0px, 0px) rotate(1.5deg);
  }

  20% {
    transform: translate(0px, 0px) rotate(5.5deg);
  }

  22% {
    transform: translate(0px, 0px) rotate(-4.5deg);
  }

  24% {
    transform: translate(0px, 0px) rotate(-6.5deg);
  }

  26% {
    transform: translate(0px, 0px) rotate(-5.5deg);
  }

  28% {
    transform: translate(0px, 0px) rotate(2.5deg);
  }

  30% {
    transform: translate(0px, 0px) rotate(-6.5deg);
  }

  32% {
    transform: translate(0px, 0px) rotate(4.5deg);
  }

  34% {
    transform: translate(0px, 0px) rotate(-4.5deg);
  }

  36% {
    transform: translate(0px, 0px) rotate(-1.5deg);
  }

  38% {
    transform: translate(0px, 0px) rotate(-5.5deg);
  }

  40% {
    transform: translate(0px, 0px) rotate(3.5deg);
  }

  42% {
    transform: translate(0px, 0px) rotate(-1.5deg);
  }

  44% {
    transform: translate(0px, 0px) rotate(-1.5deg);
  }

  46% {
    transform: translate(0px, 0px) rotate(-6.5deg);
  }

  48% {
    transform: translate(0px, 0px) rotate(-6.5deg);
  }

  50% {
    transform: translate(0px, 0px) rotate(-5.5deg);
  }

  52% {
    transform: translate(0px, 0px) rotate(-3.5deg);
  }

  54% {
    transform: translate(0px, 0px) rotate(-4.5deg);
  }

  56% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  58% {
    transform: translate(0px, 0px) rotate(-6.5deg);
  }

  60% {
    transform: translate(0px, 0px) rotate(3.5deg);
  }

  62% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  64% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  66% {
    transform: translate(0px, 0px) rotate(-5.5deg);
  }

  68% {
    transform: translate(0px, 0px) rotate(1.5deg);
  }

  70% {
    transform: translate(0px, 0px) rotate(4.5deg);
  }

  72% {
    transform: translate(0px, 0px) rotate(-5.5deg);
  }

  74% {
    transform: translate(0px, 0px) rotate(3.5deg);
  }

  76% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  78% {
    transform: translate(0px, 0px) rotate(-1.5deg);
  }

  80% {
    transform: translate(0px, 0px) rotate(-2.5deg);
  }

  82% {
    transform: translate(0px, 0px) rotate(6.5deg);
  }

  84% {
    transform: translate(0px, 0px) rotate(1.5deg);
  }

  86% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  88% {
    transform: translate(0px, 0px) rotate(2.5deg);
  }

  90% {
    transform: translate(0px, 0px) rotate(4.5deg);
  }

  92% {
    transform: translate(0px, 0px) rotate(3.5deg);
  }

  94% {
    transform: translate(0px, 0px) rotate(-6.5deg);
  }

  96% {
    transform: translate(0px, 0px) rotate(-1.5deg);
  }

  98% {
    transform: translate(0px, 0px) rotate(6.5deg);
  }
}
@keyframes shake-opacity {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
    opacity: 0.8;
  }

  10% {
    transform: translate(1px, 2px) rotate(0.5deg);
    opacity: 0.9;
  }

  20% {
    transform: translate(0px, -5px) rotate(-0.5deg);
    opacity: 0.7;
  }

  30% {
    transform: translate(3px, -3px) rotate(-2.5deg);
    opacity: 0;
  }

  40% {
    transform: translate(-4px, -1px) rotate(-0.5deg);
    opacity: 0.8;
  }

  50% {
    transform: translate(4px, -4px) rotate(0.5deg);
    opacity: 0.7;
  }

  60% {
    transform: translate(-5px, 3px) rotate(0.5deg);
    opacity: 0.9;
  }

  70% {
    transform: translate(3px, -1px) rotate(0.5deg);
    opacity: 0.5;
  }

  80% {
    transform: translate(3px, 4px) rotate(1.5deg);
    opacity: 0.8;
  }

  90% {
    transform: translate(2px, 2px) rotate(0.5deg);
    opacity: 0.5;
  }
}
@keyframes shake-crazy {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
    opacity: 0.8;
  }

  10% {
    transform: translate(-19px, -1px) rotate(9deg);
    opacity: 0.5;
  }

  20% {
    transform: translate(-15px, -14px) rotate(-8deg);
    opacity: 0.4;
  }

  30% {
    transform: translate(-16px, -4px) rotate(0deg);
    opacity: 0.3;
  }

  40% {
    transform: translate(-3px, -19px) rotate(-10deg);
    opacity: 0.3;
  }

  50% {
    transform: translate(11px, 13px) rotate(4deg);
    opacity: 0.1;
  }

  60% {
    transform: translate(-5px, -3px) rotate(-9deg);
    opacity: 0.7;
  }

  70% {
    transform: translate(18px, 14px) rotate(-3deg);
    opacity: 0.6;
  }

  80% {
    transform: translate(19px, -4px) rotate(1deg);
    opacity: 0.8;
  }

  90% {
    transform: translate(19px, 13px) rotate(-5deg);
    opacity: 0.4;
  }
}
/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@keyframes op {
  10%,90% {
    opacity: 1;
    visibility: visible;
  }
}