/* Animations SCSS */

.animated { animation-duration: 1s; animation-fill-mode: both; }

.animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { animation-duration: .75s; }

.infinite { animation-iteration-count: infinite; }

[data-animation]:not(.visible) { visibility: hidden; }

@media (prefers-reduced-motion: reduce) { [data-animation]:not(.visible) { visibility: visible; }
  *, *:before, *:after { animation: none !important; transition: none !important; } }

@keyframes bounce { from, 20%, 53%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translate3d(0, 0, 0); }
  40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -1.5rem, 0); }
  70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -0.5rem, 0); }
  90% { transform: translate3d(0, -4px, 0); } }

.animation\:bounce { animation-name: bounce; transform-origin: center bottom; }

@keyframes flash { from, 50%, to { opacity: 1; }
  25%, 75% { opacity: 0; } }

.animation\:flash { animation-name: flash; }

@keyframes headShake { 0% { transform: translateX(0); }
  6.5% { transform: translateX(-6px) rotateY(-9deg); }
  18.5% { transform: translateX(5px) rotateY(7deg); }
  31.5% { transform: translateX(-3px) rotateY(-5deg); }
  43.5% { transform: translateX(2px) rotateY(3deg); }
  50% { transform: translateX(0); } }

.animation\:head-shake { animation-timing-function: ease-in-out; animation-name: headShake; }

@keyframes jello { from, 11.1%, to { transform: none; }
  22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
  88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } }

.animation\:jello { animation-name: jello; transform-origin: center; }

@keyframes pulse { from { transform: scale3d(1, 1, 1); }
  50% { transform: scale3d(1.05, 1.05, 1.05); }
  to { transform: scale3d(1, 1, 1); } }

.animation\:pulse { animation-name: pulse; }

@keyframes rubberBand { from { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  to { transform: scale3d(1, 1, 1); } }

.animation\:rubber-band { animation-name: rubberBand; }

@keyframes shake { from, to { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); } }

.animation\:shake { animation-name: shake; }

@keyframes show { 0% { transform: translateZ(300px) translateY(200px) rotateX(-70deg);
  opacity: 0.1; }
  100% { transform: translateZ(0px) translateY(0px) rotateX(0deg);
    opacity: 1; } }

.animation\:show { -webkit-animation: show 0.8s 1 cubic-bezier(0.175, 0.885, 0.32, 1.075); animation: show 0.8s 1 cubic-bezier(0.175, 0.885, 0.32, 1.075); transform-origin: center bottom; }

@keyframes swing { 20% { transform: rotate3d(0, 0, 1, 15deg); }
  40% { transform: rotate3d(0, 0, 1, -10deg); }
  60% { transform: rotate3d(0, 0, 1, 5deg); }
  80% { transform: rotate3d(0, 0, 1, -5deg); }
  to { transform: rotate3d(0, 0, 1, 0deg); } }

.animation\:swing { transform-origin: top center; animation-name: swing; }

@keyframes tada { from { transform: scale3d(1, 1, 1); }
  10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to { transform: scale3d(1, 1, 1); } }

.animation\:tada { animation-name: tada; }

@keyframes wobble { from { transform: none; }
  15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to { transform: none; } }

.animation\:wobble { animation-name: wobble; }

@keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(0.97, 0.97, 0.97); }
  to { opacity: 1;
    transform: scale3d(1, 1, 1); } }

.animation\:bounce-in { animation-name: bounceIn; }

@keyframes bounceInDown { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0;
    transform: translate3d(0, -2rem, 0); }
  60% { opacity: 1;
    transform: translate3d(0, 25px, 0); }
  75% { transform: translate3d(0, -10px, 0); }
  90% { transform: translate3d(0, 5px, 0); }
  to { transform: none; } }

.animation\:bounce-in-down { animation-name: bounceInDown; }

@keyframes bounceInLeft { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0;
    transform: translate3d(-2rem, 0, 0); }
  60% { opacity: 1;
    transform: translate3d(25px, 0, 0); }
  75% { transform: translate3d(-10px, 0, 0); }
  90% { transform: translate3d(5px, 0, 0); }
  to { transform: none; } }

.animation\:bounce-in-left { animation-name: bounceInLeft; }

@keyframes bounceInRight { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from { opacity: 0;
    transform: translate3d(2rem, 0, 0); }
  60% { opacity: 1;
    transform: translate3d(-25px, 0, 0); }
  75% { transform: translate3d(10px, 0, 0); }
  90% { transform: translate3d(-5px, 0, 0); }
  to { transform: none; } }

.animation\:bounce-in-right { animation-name: bounceInRight; }

@keyframes bounceInUp { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from { opacity: 0;
    transform: translate3d(0, 2rem, 0); }
  60% { opacity: 1;
    transform: translate3d(0, -20px, 0); }
  75% { transform: translate3d(0, 10px, 0); }
  90% { transform: translate3d(0, -5px, 0); }
  to { transform: translate3d(0, 0, 0); } }

.animation\:bounce-in-up { animation-name: bounceInUp; }

@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }

.animation\:fade-in { animation-name: fadeIn; }

@keyframes fadeInDown { from { opacity: 0;
  transform: translate3d(0, -2rem, 0); }
  to { opacity: 1;
    transform: none; } }

.animation\:fade-in-down { animation-name: fadeInDown; }

@keyframes fadeInLeft { from { opacity: 0;
  transform: translate3d(-2rem, 0, 0); }
  to { opacity: 1;
    transform: none; } }

.animation\:fade-in-left { animation-name: fadeInLeft; }

@keyframes fadeInRight { from { opacity: 0;
  transform: translate3d(2rem, 0, 0); }
  to { opacity: 1;
    transform: none; } }

.animation\:fade-in-right { animation-name: fadeInRight; }

@keyframes fadeInUp { from { opacity: 0;
  transform: translate3d(0, 2rem, 0); }
  to { opacity: 1;
    transform: none; } }

.animation\:fade-in-up { animation-name: fadeInUp; }

@keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  animation-timing-function: ease-in;
  opacity: 0; }
  40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in; }
  60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to { transform: perspective(400px); } }

.animation\:flip-in-x { backface-visibility: visible !important; animation-name: flipInX; }

@keyframes flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  animation-timing-function: ease-in;
  opacity: 0; }
  40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in; }
  60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to { transform: perspective(400px); } }

.animation\:flip-in-y { backface-visibility: visible; animation-name: flipInY; }

@keyframes rotateInDownLeft { from { transform-origin: left bottom;
  transform: rotate3d(0, 0, 1, -15deg);
  opacity: 0; }
  to { transform-origin: left bottom;
    transform: none;
    opacity: 1; } }

.animation\:rotate-in-down-left { animation-name: rotateInDownLeft; }

@keyframes rotateInDownRight { from { transform-origin: right bottom;
  transform: rotate3d(0, 0, 1, 15deg);
  opacity: 0; }
  to { transform-origin: right bottom;
    transform: none;
    opacity: 1; } }

.animation\:rotate-in-down-right { animation-name: rotateInDownRight; }

@keyframes rotateInUpLeft { from { transform-origin: left bottom;
  transform: rotate3d(0, 0, 1, 15deg);
  opacity: 0; }
  to { transform-origin: left bottom;
    transform: none;
    opacity: 1; } }

.animation\:rotate-in-up-left { animation-name: rotateInUpLeft; }

@keyframes rotateInUpRight { from { transform-origin: right bottom;
  transform: rotate3d(0, 0, 1, -15deg);
  opacity: 0; }
  to { transform-origin: right bottom;
    transform: none;
    opacity: 1; } }

.animation\:rotate-in-up-right { animation-name: rotateInUpRight; }

@keyframes zoomIn { from { opacity: 0;
  transform: scale3d(0.8, 0.8, 0.8); }
  50% { opacity: 1; } }

.animation\:zoom-in { animation-name: zoomIn; }

@keyframes bob { 0% { transform: translateY(-8px); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(-8px); } }

@keyframes bob-float { 100% { transform: translateY(-8px); } }

.hover\:bob:hover, .hover\:bob:focus, .hover\:bob:active { animation-name: bob-float, bob; animation-duration: .3s, 1.5s; animation-delay: 0s, .3s; animation-timing-function: ease-out, ease-in-out; animation-iteration-count: 1, infinite; animation-fill-mode: forwards; animation-direction: normal, alternate; }

@keyframes hang { 0% { transform: translateY(8px); }
  50% { transform: translateY(4px); }
  100% { transform: translateY(8px); } }

@keyframes hangSink { 100% { transform: translateY(8px); } }

.hover\:hang:hover, .hover\:hang:focus, .hover\:hang:active { animation-name: hangSink, hang; animation-duration: .3s, 1.5s; animation-delay: 0s, .3s; animation-timing-function: ease-out, ease-in-out; animation-iteration-count: 1, infinite; animation-fill-mode: forwards; animation-direction: normal, alternate; }

@keyframes pulse { 25% { transform: scale(1.1); }
  75% { transform: scale(0.9); } }

.hover\:pulse:hover, .hover\:pulse:focus, .hover\:pulse:active { animation-name: pulse; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; }

@keyframes pulseGrow { to { transform: scale(1.1); } }

.hover\:pulse-grow:hover, .hover\:pulse-grow:focus, .hover\:pulse-grow:active { animation-name: pulseGrow; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; }

@keyframes pulseShrink { to { transform: scale(0.9); } }

.hover\:pulse-shrink:hover, .hover\:pulse-shrink:focus, .hover\:pulse-shrink:active { animation-name: pulseShrink; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; }

@keyframes push { 50% { transform: scale(0.9); }
  100% { transform: scale(1); } }

.hover\:push:hover, .hover\:push:focus, .hover\:push:active { animation-name: push; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: 1; }

@keyframes popping { 50% { transform: scale(1.1); } }

.hover\:pop:hover, .hover\:pop:focus, .hover\:pop:active { animation-name: pop; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: 1; }

@keyframes wobbleHorizontal { 16.65% { transform: translateX(8px); }
  33.3% { transform: translateX(-6px); }
  49.95% { transform: translateX(4px); }
  66.6% { transform: translateX(-2px); }
  83.25% { transform: translateX(1px); }
  100% { transform: translateX(0); } }

.hover\:wobble-horizontal:hover, .hover\:wobble-horizontal:focus, .hover\:wobble-horizontal:active { animation-name: wobbleHorizontal; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; }

@keyframes wobbleVertical { 16.65% { transform: translateY(8px); }
  33.3% { transform: translateY(-6px); }
  49.95% { transform: translateY(4px); }
  66.6% { transform: translateY(-2px); }
  83.25% { transform: translateY(1px); }
  100% { transform: translateY(0); } }

.hover\:wobble-vertical:hover, .hover\:wobble-vertical:focus, .hover\:wobble-vertical:active { animation-name: wobbleVertical; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; }

@keyframes wobbleToBottomRight { 16.65% { transform: translate(8px, 8px); }
  33.3% { transform: translate(-6px, -6px); }
  49.95% { transform: translate(4px, 4px); }
  66.6% { transform: translate(-2px, -2px); }
  83.25% { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); } }

.hover\:wobble-to-bottom-right:hover, .hover\:wobble-to-bottom-right:focus, .hover\:wobble-to-bottom-right:active { animation-name: wobbleToBottomRight; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; }

@keyframes wobbleToTopRight { 16.65% { transform: translate(8px, -8px); }
  33.3% { transform: translate(-6px, 6px); }
  49.95% { transform: translate(4px, -4px); }
  66.6% { transform: translate(-2px, 2px); }
  83.25% { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); } }

.hover\:wobble-to-top-right:hover, .hover\:wobble-to-top-right:focus, .hover\:wobble-to-top-right:active { animation-name: wobbleToTopRight; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; }

@keyframes wobbleTop { 16.65% { transform: skew(-12deg); }
  33.3% { transform: skew(10deg); }
  49.95% { transform: skew(-6deg); }
  66.6% { transform: skew(4deg); }
  83.25% { transform: skew(-2deg); }
  100% { transform: skew(0); } }

.hover\:wobble-top { transform-origin: 0 100%; }

.hover\:wobble-top:hover, .hover\:wobble-top:focus, .hover\:wobble-top:active { animation-name: wobbleTop; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; }

@keyframes wobbleBottom { 16.65% { transform: skew(-12deg); }
  33.3% { transform: skew(10deg); }
  49.95% { transform: skew(-6deg); }
  66.6% { transform: skew(4deg); }
  83.25% { transform: skew(-2deg); }
  100% { transform: skew(0deg); } }

.hover\:wobble-bottom { transform-origin: 100% 0; }

.hover\:wobble-bottom:hover, .hover\:wobble-bottom:focus, .hover\:wobble-bottom:active { animation-name: wobbleBottom; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; }

@keyframes wobbleSkew { 16.65% { transform: skew(-12deg); }
  33.3% { transform: skew(10deg); }
  49.95% { transform: skew(-6deg); }
  66.6% { transform: skew(4deg); }
  83.25% { transform: skew(-2deg); }
  100% { transform: skew(0deg); } }

.hover\:wobble-skew:hover, .hover\:wobble-skew:focus, .hover\:wobble-skew:active { animation-name: wobbleSkew; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; }

@keyframes buzz { 50% { transform: translateX(3px) rotate(2deg); }
  100% { transform: translateX(-3px) rotate(-2deg); } }

.hover\:buzz:hover, .hover\:buzz:focus, .hover\:buzz:active { animation-name: buzz; animation-duration: 0.15s; animation-timing-function: linear; animation-iteration-count: infinite; }

@keyframes buzzOut { 10% { transform: translateX(3px) rotate(2deg); }
  20% { transform: translateX(-3px) rotate(-2deg); }
  30% { transform: translateX(3px) rotate(2deg); }
  40% { transform: translateX(-3px) rotate(-2deg); }
  50% { transform: translateX(2px) rotate(1deg); }
  60% { transform: translateX(-2px) rotate(-1deg); }
  70% { transform: translateX(2px) rotate(1deg); }
  80% { transform: translateX(-2px) rotate(-1deg); }
  90% { transform: translateX(1px) rotate(0deg); }
  100% { transform: translateX(-1px) rotate(0deg); } }

.hover\:buzz-out:hover, .hover\:buzz-out:focus, .hover\:buzz-out:active { animation-name: buzzOut; animation-duration: 0.75s; animation-timing-function: linear; animation-iteration-count: 1; }