.wobble {
  animation-name: wobble;
  animation-duration: 400ms;
}

/**
 * @author Nick Pettit - https://github.com/nickpettit/glide
 */
@keyframes wobble {
  from {
    transform: translate3d(0, 0, 0);
  }

  15% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    transform: translate3d(2%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    transform: translate3d(-3%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    transform: translate3d(2%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    transform: translate3d(-1%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  20% {
    transform: scale3d(1.03, 1.03, 1.03);
  }

  60% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes selectionBounce {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  50% {
    transform: scale3d(1.01, 1.01, 1.01);
  }

  70% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes buttonClicked {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    transform: scale3d(0.95, 0.95, 0.95);
  }

  60% {
    transform: scale3d(1.02, 1.02, 1.02);
  }

  80% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes panelShowing {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.9);
  }

  70% {
    opacity: 1;
    transform: translateY(2px);
  }

  to {

    transform: translateY(0);
  }
}

@keyframes panelShowingMobile {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }

  70% {
    opacity: 1;
    transform: translateY(-4px);
  }

  to {

    transform: translateY(0);
  }
}