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

.fadeOutAfter5 {
  animation: 5s fadeIn .5s 1 forwards reverse; }

.fadeOutAfter2 {
  animation: 2s fadeIn .5s 1 forwards reverse; }

.fadeIn-250 {
  animation: fadeIn 2.5s; }

.fadeIn-50 {
  animation: fadeIn .5s; }

.fadeIn-40 {
  animation: fadeIn .4s; }

.fadeIn-30 {
  animation: fadeIn .3s; }

.fadeIn-25 {
  animation: fadeIn .25s; }

@keyframes slideIn {
  from {
    margin-left: -20vw;
    /*transform: translateX(-100%);*/ }
  to {
    margin-left: 0;
    /*transform: translateX(0);*/ } }

@keyframes slideOut {
  from {
    margin-left: 0;
    /*transform: translateX(-100%);*/ }
  to {
    margin-left: -180px;
    /*transform: translateX(0);*/ } }

@keyframes slideOutWide {
  from {
    margin-left: 0;
    /*transform: translateX(-100%);*/ }
  to {
    margin-left: -360px;
    /*transform: translateX(0);*/ } }

.slideIn-50 {
  animation: slideIn .5s; }

.slideIn-40 {
  animation: slideIn .4s; }

.slideIn-30 {
  animation: slideIn .3s; }

.slideIn-25 {
  animation: slideIn .25s; }

.slideOut-50 {
  animation: slideOut .5s ease-out; }

.slideOut-40 {
  animation: slideOut .4s ease-out; }

.slideOut-30 {
  animation: slideOut .3s; }

.slideOut-25 {
  animation: slideOut .25s; }

.slideOut-50-wide {
  animation: slideOutWide .5s ease-out; }

.slideOut-40-wide {
  animation: slideOutWide .4s ease-out; }

.slideOut-30-wide {
  animation: slideOutWide .3s; }

.slideOut-25-wide {
  animation: slideOutWide .25s; }

@keyframes ripple {
  from {
    opacity: 1;
    transform: scale(0); }
  to {
    opacity: 0;
    transform: scale(10); } }

.ripple-100 {
  animation: ripple 1s; }

.ripple-80 {
  animation: ripple .8s; }

.ripple-50 {
  animation: ripple .5s; }

@keyframes grow {
  from {
    transform: scale(0, 1); }
  to {
    transform: scale(1, 1); } }

.growRight-50 {
  animation: grow .5s;
  transform-origin: center left; }

@keyframes shrink {
  from {
    transform: scale(1, 1); }
  to {
    transform: scale(0, 1); } }

.shrinkLeft-50 {
  animation: shrink .5s forwards;
  transform-origin: center left; }

@keyframes growY {
  from {
    max-height: 0;
    opacity: 0; }
  to {
    max-height: 100px;
    opacity: 1; } }

.growUp-50 {
  animation: growY .5s ease-in;
  transform-origin: bottom center;
  transition: padding-bottom .5s ease; }

@keyframes shrinkY {
  from {
    max-height: 100px;
    padding-bottom: .5em;
    opacity: 1; }
  to {
    max-height: 0;
    opacity: 0;
    padding-bottom: 0; } }

.shrinkDown-50 {
  animation: shrinkY .5s forwards;
  transform-origin: bottom center;
  overflow: hidden;
  transition: padding-bottom .5s ease;
  padding-bottom: 0; }

.dot-pulse-grey {
  --pulse-color: var(--dark-grey-hsl); }

.dot-pulse-small {
  --pulse-size: 6px; }

.dot-pulse-large {
  --pulse-size: 16px; }

/**
 * three-dots.css v0.1.0
 *
 * https://nzbin.github.io/three-dots/
 *
 * Copyright (c) 2018 nzbin
 *
 * Released under the MIT license
 *
 * ==============================================
 * Dot Pulse
 * ==============================================
 */
.dot-pulse {
  position: relative;
  margin-left: calc( var(--pulse-size) * 1.5);
  left: -9999px;
  width: var(--pulse-size);
  height: var(--pulse-size);
  border-radius: calc( var(--pulse-size) / 2);
  background-color: var(--pulse-color);
  color: var(--pulse-color);
  box-shadow: 9999px 0 0 calc(0px - var(--pulse-size) / 2) var(--pulse-color);
  animation: dotPulse 1.5s infinite linear;
  animation-delay: .25s; }

.dot-pulse::before, .dot-pulse::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  width: var(--pulse-size);
  height: var(--pulse-size);
  border-radius: calc( var(--pulse-size) / 2);
  background-color: var(--pulse-color);
  color: var(--pulse-color); }

.dot-pulse::before {
  box-shadow: calc(9999px - calc(var(--pulse-size) / 2)) 0 0 calc(0px - var(--pulse-size) / 2) var(--pulse-color);
  animation: dotPulseBefore 1.5s infinite linear;
  animation-delay: 0s; }

.dot-pulse::after {
  box-shadow: calc(9999px + calc(var(--pulse-size) / 2)) 0 0 calc(0px - var(--pulse-size) / 2) var(--pulse-color);
  animation: dotPulseAfter 1.5s infinite linear;
  animation-delay: .5s; }

@keyframes dotPulseBefore {
  0% {
    box-shadow: calc(9999px - calc(var(--pulse-size) * 1.5)) 0 0 calc(0px - var(--pulse-size) / 2) var(--pulse-color); }
  30% {
    box-shadow: calc(9999px - calc(var(--pulse-size) * 1.5)) 0 0 calc( var(--pulse-size) / 5) var(--pulse-color); }
  60%,
  100% {
    box-shadow: calc(9999px - calc(var(--pulse-size) * 1.5)) 0 0 calc(0px - var(--pulse-size) / 2) var(--pulse-color); } }

@keyframes dotPulse {
  0% {
    box-shadow: 9999px 0 0 calc(0px - var(--pulse-size) / 2) var(--pulse-color); }
  30% {
    box-shadow: 9999px 0 0 calc( var(--pulse-size) / 5) var(--pulse-color); }
  60%,
  100% {
    box-shadow: 9999px 0 0 calc(0px - var(--pulse-size) / 2) var(--pulse-color); } }

@keyframes dotPulseAfter {
  0% {
    box-shadow: calc(9999px + calc(var(--pulse-size) * 1.5)) 0 0 calc(0px - var(--pulse-size) / 2) var(--pulse-color); }
  30% {
    box-shadow: calc(9999px + calc(var(--pulse-size) * 1.5)) 0 0 calc( var(--pulse-size) / 5) var(--pulse-color); }
  60%,
  100% {
    box-shadow: calc(9999px + calc(var(--pulse-size) * 1.5)) 0 0 calc(0px - var(--pulse-size) / 2) var(--pulse-color); } }

.swing {
  animation: swing .5s ease-in-out both;
  transform-origin: 50% 0; }

@keyframes swing {
  0% {
    transform: rotate(0deg); }
  10% {
    transform: rotate(-10deg); }
  20% {
    transform: rotate(0deg); }
  30% {
    transform: rotate(10deg); }
  40% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(-10deg); }
  60% {
    transform: rotate(0deg); }
  70% {
    transform: rotate(10deg); }
  80% {
    transform: rotate(0deg); }
  90% {
    transform: rotate(-10deg); }
  100% {
    transform: rotate(0deg); } }

.pulsate {
  animation: pulsate .5s ease-out;
  animation-iteration-count: 1; }

@keyframes pulsate {
  0% {
    transform: scale(1, 1); }
  50% {
    transform: scale(1.5, 1.5); }
  100% {
    transform: scale(1, 1); } }