@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeOutAfter5 {
  animation: 5s fadeIn 0.5s 1 forwards reverse;
}

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

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

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

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

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

.fadeIn-25 {
  animation: fadeIn 0.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 0.5s;
}

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

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

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

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

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

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

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

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

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

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

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

@keyframes ripple {
  from {
    opacity: 1;
    transform: scale(0);
  }
  to {
    opacity: 0;
    transform: scale(10);
  }
}
.ripple-100 {
  animation: ripple 1s;
}

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

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

@keyframes grow {
  from {
    transform: scale(0, 1);
  }
  to {
    transform: scale(1, 1);
  }
}
.growRight-50 {
  animation: grow 0.5s;
  transform-origin: center left;
}

@keyframes shrink {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(0, 1);
  }
}
.shrinkLeft-50 {
  animation: shrink 0.5s forwards;
  transform-origin: center left;
}

@keyframes growY {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 100px;
    opacity: 1;
  }
}
.growUp-50 {
  animation: growY 0.5s ease-in;
  transform-origin: bottom center;
  transition: padding-bottom 0.5s ease;
}

@keyframes shrinkY {
  from {
    max-height: 100px;
    padding-bottom: 0.5em;
    opacity: 1;
  }
  to {
    max-height: 0;
    opacity: 0;
    padding-bottom: 0;
  }
}
.shrinkDown-50 {
  animation: shrinkY 0.5s forwards;
  transform-origin: bottom center;
  overflow: hidden;
  transition: padding-bottom 0.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: 0.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 - 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 + var(--pulse-size) / 2) 0 0 calc(0px - var(--pulse-size) / 2) var(--pulse-color);
  animation: dotPulseAfter 1.5s infinite linear;
  animation-delay: 0.5s;
}

@keyframes dotPulseBefore {
  0% {
    box-shadow: calc(9999px - var(--pulse-size) * 1.5) 0 0 calc(0px - var(--pulse-size) / 2) var(--pulse-color);
  }
  30% {
    box-shadow: calc(9999px - var(--pulse-size) * 1.5) 0 0 calc(var(--pulse-size) / 5) var(--pulse-color);
  }
  60%, 100% {
    box-shadow: calc(9999px - 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 + var(--pulse-size) * 1.5) 0 0 calc(0px - var(--pulse-size) / 2) var(--pulse-color);
  }
  30% {
    box-shadow: calc(9999px + var(--pulse-size) * 1.5) 0 0 calc(var(--pulse-size) / 5) var(--pulse-color);
  }
  60%, 100% {
    box-shadow: calc(9999px + var(--pulse-size) * 1.5) 0 0 calc(0px - var(--pulse-size) / 2) var(--pulse-color);
  }
}
.swing {
  animation: swing 0.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 0.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);
  }
}