move.gl/src/jinja/move.gl.css

Motion and Animation Library for Stylescape.

*,
a,
abbr,
acronym,
address,
applet,
area,
article,
aside,
audio,
b,
base,
basefont,
bb,
bdo,
big,
blockquote,
body,
br,
button,
canvas,
caption,
center,
cite,
code,
col,
colgroup,
command,
datalist,
dd,
del,
details,
dfn,
dialog,
dir,
div,
dl,
dt,
em,
embed,
eventsource,
fieldset,
figcaption,
figure,
font,
footer,
form,
frame,
frameset,
h1,
h2,
h3,
h4,
h5,
h6,
head,
header,
hgroup,
hr,
html,
i,
iframe,
img,
input,
ins,
isindex,
kbd,
keygen,
label,
legend,
li,
link,
map,
mark,
menu,
meta,
meter,
nav,
noframes,
noscript,
object,
ol,
optgroup,
option,
output,
p,
param,
pre,
progress,
q,
rp,
rt,
ruby,
s,
samp,
script,
section,
select,
small,
source,
span,
strike,
strong,
style,
sub,
sup,
table,
tbody,
td,
textarea,
tfoot,
th,
thead,
time,
title,
tr,
track,
tt,
u,
ul,
var,
video,
wbr {
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
  display: block;
}

.aspect_ratio--1x1 {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
.aspect_ratio--1x1 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.aspect_ratio--1x2 {
  position: relative;
  width: 100%;
  aspect-ratio: 0.5;
}
.aspect_ratio--1x2 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.aspect_ratio--2x1 {
  position: relative;
  width: 100%;
  aspect-ratio: 2;
}
.aspect_ratio--2x1 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.aspect_ratio--1x3 {
  position: relative;
  width: 100%;
  aspect-ratio: 0.3333333333;
}
.aspect_ratio--1x3 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.aspect_ratio--3x1 {
  position: relative;
  width: 100%;
  aspect-ratio: 3;
}
.aspect_ratio--3x1 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.aspect_ratio--1x4 {
  position: relative;
  width: 100%;
  aspect-ratio: 0.25;
}
.aspect_ratio--1x4 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.aspect_ratio--4x1 {
  position: relative;
  width: 100%;
  aspect-ratio: 4;
}
.aspect_ratio--4x1 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.aspect_ratio--3x2 {
  position: relative;
  width: 100%;
  aspect-ratio: 1.5;
}
.aspect_ratio--3x2 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.aspect_ratio--2x3 {
  position: relative;
  width: 100%;
  aspect-ratio: 0.6666666667;
}
.aspect_ratio--2x3 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.aspect_ratio--4x3 {
  position: relative;
  width: 100%;
  aspect-ratio: 1.3333333333;
}
.aspect_ratio--4x3 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.aspect_ratio--3x4 {
  position: relative;
  width: 100%;
  aspect-ratio: 0.75;
}
.aspect_ratio--3x4 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.aspect_ratio--16x9 {
  position: relative;
  width: 100%;
  aspect-ratio: 1.7777777778;
}
.aspect_ratio--16x9 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.aspect_ratio--16x10 {
  position: relative;
  width: 100%;
  aspect-ratio: 1.6;
}
.aspect_ratio--16x10 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.guide {
  z-index: 9999;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
  opacity: 1;
  min-height: 100vh;
  background-attachment: local;
}

.guide--layer {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  pointer-events: none;
  z-index: 9999;
}
.guide--layer.active {
  display: block !important;
}

.guide--graph {
  z-index: 9999;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
  opacity: 1;
  min-height: 100vh;
  background-attachment: local;
  background-repeat: repeat;
  background-size: 1.25rem 1.25rem;
  background-image: repeating-linear-gradient(to right, rgba(111, 124, 126, 0.483) 0, rgba(111, 124, 126, 0.483) 1px, transparent 1px, transparent 1.25rem), repeating-linear-gradient(to bottom, rgba(111, 124, 126, 0.483) 0, rgba(111, 124, 126, 0.483) 1px, transparent 1px, transparent 1.25rem);
}

.guide--graph_centered {
  z-index: 9999;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
  opacity: 1;
  min-height: 100vh;
  background-attachment: local;
  background-repeat: repeat;
  background-size: 1.25rem 1.25rem;
  background-position: calc(50% - 15rem / 2) 0;
  background-image: repeating-linear-gradient(to right, rgba(111, 124, 126, 0.483) 0, rgba(111, 124, 126, 0.483) 1px, transparent 1px, transparent 1.25rem), repeating-linear-gradient(to bottom, rgba(111, 124, 126, 0.483) 0, rgba(111, 124, 126, 0.483) 1px, transparent 1px, transparent 1.25rem);
}

.guide--baseline {
  z-index: 9999;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
  opacity: 1;
  min-height: 100vh;
  background-attachment: local;
  background-repeat: repeat;
  background-size: 100% 1.25rem;
  background-image: repeating-linear-gradient(to bottom, rgb(0, 200, 255) 0 1px, transparent 1px 100%);
}

html {
  font-size: 12px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(12px + 12 * (100vw - 320px) / 1120);
  }
}
@media screen and (min-width: 1440px) {
  html {
    font-size: 24px;
  }
}

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  word-break: normal;
  -moz-tab-size: 4;
  tab-size: 4;
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  position: absolute;
  height: 100vh;
  width: 100vw;
}

html,
body {
  height: 100%;
  margin: 0;
}

*,
::before,
::after {
  background-repeat: no-repeat;
  box-sizing: inherit;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

* {
  padding: 0;
  margin: 0;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-text {
  cursor: text;
}

.cursor-wait {
  cursor: wait;
}

.cursor-crosshair {
  cursor: crosshair;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-zoom-in {
  cursor: zoom-in;
}

.cursor-grab {
  cursor: grab;
}

.cursor-grabbing {
  cursor: grabbing;
}

.interactive-element {
  pointer-events: auto;
}

.non-interactive-element {
  pointer-events: none;
}

.custom-element {
  pointer-events: visiblePainted;
}

@keyframes hover-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}
.animate_glow_soft {
  animation-name: animate_glow_soft;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_glow_soft {
  0%, 100% {
    box-shadow: 0 0 10px 0 rgba(54, 150, 193, 0.5);
  }
  50% {
    box-shadow: 0 0 20px 5px rgba(54, 150, 193, 0.8);
  }
}

.animate_swing {
  animation-name: animate_swing;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_swing {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(15deg);
  }
}

.animate_swing_slow {
  animation-name: animate_swing_slow;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_swing_slow {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

.animate_swing_fast {
  animation-name: animate_swing_fast;
  animation-duration: 0.25s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_swing_fast {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(20deg);
  }
}

.animate_swing_fade {
  animation-name: animate_swing_fade;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_swing_fade {
  0%, 100% {
    transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: rotate(15deg);
    opacity: 0.5;
  }
}

@keyframes loader-dots-pulse {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes loader-dots-bounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-12px);
  }
}
@keyframes loader-dots-wave {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-10px);
    opacity: 1;
  }
}
@keyframes loader-dots-fade {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}
@keyframes loader-dots-grow {
  0%, 100% {
    transform: scale(0.6);
  }
  50% {
    transform: scale(1.2);
  }
}
@keyframes loader-typing {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-6px);
  }
}
@keyframes loader-ellipsis {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes loader-bars-wave {
  0%, 40%, 100% {
    height: 10px;
  }
  20% {
    height: 30px;
  }
}
@keyframes loader-wave-bar {
  0%, 100% {
    height: 10px;
  }
  50% {
    height: 30px;
  }
}
@keyframes loader-progress-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(350%);
  }
}
@keyframes loader-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loader-ripple {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes loader-pulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.8);
    opacity: 1;
  }
}
@keyframes loader-orbit-top {
  0%, 100% {
    top: 0;
  }
  50% {
    top: calc(100% - 12px);
  }
}
@keyframes loader-orbit-bottom {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: calc(100% - 12px);
  }
}
@keyframes loader-atom-orbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loader-heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}
@keyframes loader-morph {
  0%, 100% {
    border-radius: 0;
    transform: rotate(0deg);
  }
  25% {
    border-radius: 50% 0 50% 0;
    transform: rotate(90deg);
  }
  50% {
    border-radius: 50%;
    transform: rotate(180deg);
  }
  75% {
    border-radius: 0 50% 0 50%;
    transform: rotate(270deg);
  }
}
@keyframes loader-flip-card {
  0% {
    transform: rotateX(0) rotateY(0);
  }
  25% {
    transform: rotateX(180deg) rotateY(0);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(0) rotateY(180deg);
  }
  100% {
    transform: rotateX(0) rotateY(360deg);
  }
}
@keyframes loader-square-rotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loader-cube-flip {
  0% {
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
  50% {
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  100% {
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
}
@keyframes loader-folding {
  0%, 10% {
    transform: scale(1);
    opacity: 1;
  }
  20%, 100% {
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes loader-clock-minute {
  0% {
    transform: translate(-50%, -100%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -100%) rotate(360deg);
  }
}
@keyframes loader-clock-hour {
  0% {
    transform: translate(-50%, -100%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -100%) rotate(360deg);
  }
}
@keyframes loader-bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
  }
}
@keyframes loader-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loader-battery-charge {
  0% {
    width: 0%;
  }
  50% {
    width: calc(100% - 6px);
  }
  100% {
    width: 0%;
  }
}
@keyframes loader-pendulum-left {
  0% {
    transform: translateX(-15px) translateY(-10px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes loader-pendulum-right {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(15px) translateY(-10px);
  }
}
@keyframes loader-seesaw {
  0%, 100% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(15deg);
  }
}
@keyframes loader-wifi-pulse {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60%, 100% {
    opacity: 0;
  }
}
@keyframes loader-dna-top {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) scale(0.5);
    opacity: 0.5;
  }
}
@keyframes loader-dna-bottom {
  0%, 100% {
    transform: translateX(-50%) scale(0.5);
    opacity: 0.5;
  }
  50% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}
@keyframes loader-infinity-left {
  0%, 100% {
    transform: translateY(-50%) translateX(0);
  }
  50% {
    transform: translateY(-50%) translateX(20px);
  }
}
@keyframes loader-infinity-right {
  0%, 100% {
    transform: translateY(-50%) translateX(0);
  }
  50% {
    transform: translateY(-50%) translateX(-20px);
  }
}
.animate_beat {
  animation-name: animate_beat;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_beat {
  0%, 90% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.25);
  }
}

.animate_beat_fade {
  animation-name: animate_beat_fade;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_beat_fade {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.125);
  }
}

.animate_beat_double {
  animation-name: animate_beat_double;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_beat_double {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.5);
  }
  75% {
    transform: scale(0.8);
  }
}

.animate_blink {
  animation-name: animate_blink;
  animation-duration: 1s;
  animation-timing-function: step-end;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.animate_blink_rapid {
  animation-name: animate_blink_rapid;
  animation-duration: 0.25s;
  animation-timing-function: steps(2, end);
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_blink_rapid {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.animate_blink_soft {
  animation-name: animate_blink_soft;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_blink_soft {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.animate_blink_alternate {
  animation-name: animate_blink_alternate;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_blink_alternate {
  0%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

.animate_bounce {
  animation-name: animate_bounce;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(var(--animate-bounce-height, -20%));
  }
}

.animate_bounce_extended {
  animation-name: animate_bounce_extended;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_bounce_extended {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(1.1, 0.9) translateY(0);
  }
  30% {
    transform: scale(0.9, 1.1) translateY(-0.5em);
  }
  50% {
    transform: scale(1.05, 0.95) translateY(0);
  }
  57% {
    transform: scale(1, 1) translateY(-0.125em);
  }
  64% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}

.animate_bounce_rotate {
  animation-name: animate_bounce_rotate;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_bounce_rotate {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-20%) rotate(360deg);
  }
}

.animate_bounce_multi {
  animation-name: animate_bounce_multi;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_bounce_multi {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-10%, 0);
  }
  50% {
    transform: translate(0, -20%);
  }
  75% {
    transform: translate(-10%, 0);
  }
}

.animate_elastic {
  animation-name: animate_elastic;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_elastic {
  0%, 100% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.25);
  }
}

.animate_fade {
  animation-name: animate_fade;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_fade {
  0%, 100% {
    opacity: var(--animate-opacity-start, 1);
  }
  50% {
    opacity: var(--animate-opacity-fade, 0);
  }
}

.animate_fade_in {
  animation-name: animate_fade_in;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}
@keyframes animate_fade_in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate_fade_out {
  animation-name: animate_fade_out;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}
@keyframes animate_fade_out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.animate_fade_gradual {
  animation-name: animate_fade_gradual;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_fade_gradual {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate_flash {
  animation-name: animate_flash;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.animate_flash_fade {
  animation-name: animate_flash_fade;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_flash_fade {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.animate_flash_strobe {
  animation-name: animate_flash_strobe;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_flash_strobe {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.animate_flash_strobe {
  animation-duration: 0.1s;
}

.animate_flash_fade_slow {
  animation-name: animate_flash_fade_slow;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_flash_fade_slow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.animate_flip {
  animation-name: animate_flip;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_flip {
  0% {
    transform: rotate3d(0, 1, 0, 0);
  }
  100% {
    transform: rotate3d(0, 1, 0, 360deg);
  }
}

.animate_flip_horizontal {
  animation-name: animate_flip;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_flip {
  0% {
    transform: rotate3d(0, 1, 0, 0);
  }
  100% {
    transform: rotate3d(0, 1, 0, 360deg);
  }
}

.animate_flip_vertical {
  animation-name: animate_flip;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_flip {
  0% {
    transform: rotate3d(1, 0, 0, 0);
  }
  100% {
    transform: rotate3d(1, 0, 0, 360deg);
  }
}

.animate_flip_diagonal {
  animation-name: animate_flip;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_flip {
  0% {
    transform: rotate3d(1, 1, 0, 0);
  }
  100% {
    transform: rotate3d(1, 1, 0, 360deg);
  }
}

.animate_flip_180_horizontal {
  animation-name: animate_flip;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_flip {
  0% {
    transform: rotate3d(0, 1, 0, 0);
  }
  100% {
    transform: rotate3d(0, 1, 0, -180deg);
  }
}

.animate_flip_180_vertical {
  animation-name: animate_flip;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_flip {
  0% {
    transform: rotate3d(1, 0, 0, 0);
  }
  100% {
    transform: rotate3d(1, 0, 0, -180deg);
  }
}

.animate_flip_180_diagonal {
  animation-name: animate_flip;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_flip {
  0% {
    transform: rotate3d(1, 1, 0, 0);
  }
  100% {
    transform: rotate3d(1, 1, 0, -180deg);
  }
}

.animate_float {
  animation-name: animate_float;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

.animate_float_horizontal {
  animation-name: animate_float_horizontal;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_float_horizontal {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}

.animate_float_rotate {
  animation-name: animate_float_rotate;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_float_rotate {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-10px) rotate(15deg);
  }
}

.animate_glow {
  animation-name: animate_glow;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_glow {
  0%, 100% {
    box-shadow: 0 0 5px 0 #3696c1;
  }
  50% {
    box-shadow: 0 0 15px 5px #3696c1;
  }
}

.animate_glow_pulse {
  animation-name: animate_glow_pulse;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_glow_pulse {
  0%, 100% {
    box-shadow: 0 0 10px -5px #3696c1;
  }
  50% {
    box-shadow: 0 0 20px 0 #3696c1;
  }
}

.animate_glow_multicolor {
  animation-name: animate_glow_multicolor;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_glow_multicolor {
  0%, 33.3333333333% {
    box-shadow: 0 0 10px 5px #3696c1;
  }
  33.3333333333%, 66.6666666667% {
    box-shadow: 0 0 10px 5px #9582c2;
  }
  66.6666666667%, 100% {
    box-shadow: 0 0 10px 5px #c5728d;
  }
}

.animate_heartbeat {
  animation-name: animate_heartbeat;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
}

.animate_heartbeat_fast {
  animation-name: animate_heartbeat_fast;
  animation-duration: 0.25s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_heartbeat_fast {
  0%, 100% {
    transform: scale(1);
  }
  14%, 86% {
    transform: scale(0.85);
  }
  28%, 72% {
    transform: scale(1.15);
  }
  42%, 58% {
    transform: scale(0.85);
  }
}

.animate_heartbeat_slow {
  animation-name: animate_heartbeat_slow;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_heartbeat_slow {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.05);
  }
  75% {
    transform: scale(0.95);
  }
}

.animate_heartbeat_color {
  animation-name: animate_heartbeat_color;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_heartbeat_color {
  0%, 100% {
    transform: scale(1);
    color: #ffffff;
  }
  50% {
    transform: scale(1.1);
    color: #000000;
  }
}

.animate_jiggle {
  animation-name: animate_jiggle;
  animation-duration: 0.25s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_jiggle {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
}

.animate_jiggle_vertical {
  animation-name: animate_jiggle_vertical;
  animation-duration: 0.25s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_jiggle_vertical {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(5px);
  }
  75% {
    transform: translateY(-5px);
  }
}

.animate_jiggle_multi {
  animation-name: animate_jiggle_multi;
  animation-duration: 0.25s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_jiggle_multi {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-5px, 5px);
  }
  50% {
    transform: translate(5px, -5px);
  }
  75% {
    transform: translate(-5px, 5px);
  }
}

.animate_jiggle_slow {
  animation-name: animate_jiggle_slow;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_jiggle_slow {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
  }
  75% {
    transform: translateX(-3px);
  }
}

.animate_nod {
  animation-name: animate_nod;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_nod {
  0%, 100% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(10deg);
  }
}

.animate_nod_slow {
  animation-name: animate_nod_slow;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_nod_slow {
  0%, 100% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(10deg);
  }
}

.animate_nod_bounce {
  animation-name: animate_nod_bounce;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_nod_bounce {
  0%, 100% {
    transform: rotateX(0deg) translateY(0);
  }
  50% {
    transform: rotateX(10deg) translateY(-5px);
  }
}

.animate_nod_continuous {
  animation-name: animate_nod_continuous;
  animation-duration: 0.25s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_nod_continuous {
  0% {
    transform: rotateX(0deg);
  }
  25%, 75% {
    transform: rotateX(10deg);
  }
  50%, 100% {
    transform: rotateX(-10deg);
  }
}

.animate_pop {
  animation-name: animate_pop;
  animation-duration: 0.25s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_pop {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.animate_pop_fast {
  animation-name: animate_pop_fast;
  animation-duration: 0.25s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_pop_fast {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.animate_pop_slow {
  animation-name: animate_pop_slow;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_pop_slow {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.animate_pop_rotate {
  animation-name: animate_pop_rotate;
  animation-duration: 0.25s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_pop_rotate {
  0%, 100% {
    transform: scale(1) rotate(0);
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
}

.animate_pulse {
  animation-name: animate_pulse;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.animate_pulse_slow {
  animation-name: animate_pulse_slow;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_pulse_slow {
  0%, 100% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.05);
  }
}

.animate_pulse_fast {
  animation-name: animate_pulse_fast;
  animation-duration: 0.25s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_pulse_fast {
  0%, 100% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.2);
  }
}

.animate_pulse_color {
  animation-name: animate_pulse_color;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_pulse_color {
  0%, 100% {
    background-color: #ffffff;
  }
  50% {
    background-color: #000000;
  }
}

.animate_ripple {
  animation-name: animate_ripple;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.animate_ripple_slow {
  animation-name: animate_ripple_slow;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_ripple_slow {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.animate_ripple_multi {
  animation-name: animate_ripple_multi;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_ripple_multi {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.animate_ripple_color {
  animation-name: animate_ripple_color;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_ripple_color {
  0% {
    transform: scale(1);
    opacity: 1;
    background-color: #ffffff;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
    background-color: #000000;
  }
}

.animate_roll {
  animation-name: animate_roll;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_roll {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  100% {
    transform: translateX(100%) rotate(360deg);
  }
}

.animate_roll_reverse {
  animation-name: animate_roll_reverse;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_roll_reverse {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  100% {
    transform: translateX(-100%) rotate(-360deg);
  }
}

.animate_roll_slow {
  animation-name: animate_roll_slow;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_roll_slow {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  100% {
    transform: translateX(100%) rotate(360deg);
  }
}

.animate_roll_vertical {
  animation-name: animate_roll_vertical;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_roll_vertical {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(100%) rotate(360deg);
  }
}

.animate_scale_expand {
  animation-name: animate_scale_expand;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_scale_expand {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.animate_scale_shrink {
  animation-name: animate_scale_shrink;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_scale_shrink {
  0% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1.2);
  }
}

.animate_shake {
  animation-name: animate_shake;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_shake {
  0% {
    transform: rotate(-10deg);
  }
  4% {
    transform: rotate(10deg);
  }
  8%, 24% {
    transform: rotate(-12deg);
  }
  12%, 28% {
    transform: rotate(12deg);
  }
  16% {
    transform: rotate(-14deg);
  }
  20% {
    transform: rotate(14deg);
  }
  32% {
    transform: rotate(-8deg);
  }
  36% {
    transform: rotate(8deg);
  }
  40%, 100% {
    transform: rotate(0deg);
  }
}

.animate_shake_slow {
  animation-name: animate_shake_slow;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_shake_slow {
  0%, 100% {
    transform: rotate(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(-5deg);
  }
  20%, 40%, 60%, 80% {
    transform: rotate(5deg);
  }
}

.animate_shake_horizontal {
  animation-name: animate_shake_horizontal;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_shake_horizontal {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

.animate_slide_in_left {
  animation-name: animate_slide_in_left;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_slide_in_left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate_slide_in_right {
  animation-name: animate_slide_in_right;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_slide_in_right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate_slide_in_up {
  animation-name: animate_slide_in_up;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_slide_in_up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate_slide_in_down {
  animation-name: animate_slide_in_down;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_slide_in_down {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate_slide_out_left {
  animation-name: animate_slide_out_left;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}
@keyframes animate_slide_out_left {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.animate_slide_out_right {
  animation-name: animate_slide_out_right;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}
@keyframes animate_slide_out_right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.animate_slide_out_up {
  animation-name: animate_slide_out_up;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}
@keyframes animate_slide_out_up {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

.animate_slide_out_down {
  animation-name: animate_slide_out_down;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}
@keyframes animate_slide_out_down {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.animate_slide_fade_in_up {
  animation-name: animate_slide_fade_in_up;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_slide_fade_in_up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate_slide_fade_in_down {
  animation-name: animate_slide_fade_in_down;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_slide_fade_in_down {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate_slide_fade_in_left {
  animation-name: animate_slide_fade_in_left;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_slide_fade_in_left {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate_slide_fade_in_right {
  animation-name: animate_slide_fade_in_right;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_slide_fade_in_right {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate_spin {
  animation-name: animate_spin;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate_spin_reverse {
  animation-name: animate_spin_reverse;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}
@keyframes animate_spin_reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.animate_