:root {
  --anim-duration: 300ms;
  --anim-delay: 0s;
  --anim-repeat: 1;
  --anim-ease: ease-in-out;
  --anim-fill-mode: forwards;
}

/* Disable animation */
body[data-animation="false"] {
  --anim-duration: 0s;
}
/* Pulse */
.pulse,
/* Fading entrance */
.fadeIn,
.fadeInLeft,
.fadeInRight,
.fadeInUp,
.fadeInUpLong,
.fadeInDown,
.fadeInDownLong,
/* Fading exits  */
.fadeOut,
.fadeOutLeft,
.fadeOutRight,
.fadeOutUp,
.fadeOutUpLong,
.fadeOutDown,
.fadeOutDownLong,
/* Zooming entrances */
.zoomIn,
.zoomInUp,
.zoomInDownTopLeft,

/* Zooming exits*/
.zoomOut,
.zoomOutDown,
.zoomOutUpLeft,

/* Sliding entrances */
.slideInUp,
.slideInRight,

/* Sliding exits */
.slideOutDown,
.slideOutLeft,

/* Blur entrances */
.blurIn,
.blurInGrayscale,
/* Blur exits*/
.blurOut,
.blurOutGrayscale {
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--anim-ease);
  animation-delay: var(--anim-delay);
  animation-iteration-count: var(--anim-repeat);
  animation-fill-mode: var(--anim-fill-mode);
}

/* Pulse */
.pulse {
  animation-duration: 2s;
  animation-fill-mode: unset;
  animation-name: pulse;
  animation-iteration-count: infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1;   }
}

/* Fading entrances  */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeft {
  animation-name: fadeInLeft;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRight {
  animation-name: fadeInRight;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInUpLong {
  from {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUpLong {
  animation-name: fadeInUpLong;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDown {
  animation-name: fadeInDown;
}

@keyframes fadeInDownLong {
  from {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDownLong {
  animation-name: fadeInDownLong;
}

/* Fading exits  */

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}
.fadeOutLeft {
  animation-name: fadeOutLeft;
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}
.fadeOutRight {
  animation-name: fadeOutRight;
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, -20%, 0);
  }
}
.fadeOutUp {
  animation-name: fadeOutUp;
}

@keyframes fadeOutUpLong {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }
}
.fadeOutUpLong {
  animation-name: fadeOutUpLong;
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
}
.fadeOutDown {
  animation-name: fadeOutDown;
}

@keyframes fadeOutDownLong {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }
}
.fadeOutDownLong {
  animation-name: fadeOutDownLong;
}

/* Zooming entrances */

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

  to {
    opacity: 1;
  }
}
.zoomIn {
  animation-name: zoomIn;
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(0.8, 0.8, 0.8);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
.zoomInUp {
  transform-origin: bottom left;
  animation-name: zoomInUp;
}

@keyframes zoomInDownTopLeft {
  from {
    opacity: 0;
    transform: translate(-12px, -12px) scale3d(0.85, 0.85, 0.85);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale3d(1, 1, 1);
  }
}

.zoomInDownTopLeft {
  transform-origin: top left;
  animation-name: zoomInDownTopLeft;
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .zoomInDownTopLeft { animation: none; opacity: 1; transform: none; }
}


/* Zooming exits */

@keyframes zoomOut {
	from { opacity: 1; }
	50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
	to { opacity: 0; }
}

.zoomOut {
  animation-name: zoomOut;
}

@keyframes zoomOutDown {
  from {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  to {
    opacity: 0;
    transform: scale3d(0.8, 0.8, 0.8);
  }
}

.zoomOutDown {
  transform-origin: bottom left;
  animation-name: zoomOutDown;
}

@keyframes zoomOutUpLeft {
  from {
    opacity: 1;
    transform: translate(0, 0) scale3d(1, 1, 1);
  }
  to {
    opacity: 0;
    transform: translate(-8px, -8px) scale3d(0.8, 0.8, 0.8);
  }
}

.zoomOutUpLeft {
  transform-origin: top left;
  animation-name: zoomOutUpLeft;
}

/* Sliding entrances */
.slideInUp {
  opacity: 1!important;
  animation-name: slideInUp;
}

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    _visibility: visible;
  }

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

.slideInRight {
  transform: translate3d(0, 0, 0);
  animation-name: slideInRight;
}

@keyframes slideInRight {
  from { transform: translate3d(-100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* Sliding exists */
.slideOutDown {
  animation-name: slideOutDown;
}

@keyframes slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutLeft {
  transform: translate3d(-100%, 0, 0);
  animation-name: slideOutLeft;
}

@keyframes slideOutLeft {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}

/* Blur entrances */

@keyframes blurIn {
	from { filter: blur(0px); }
	to { filter: blur(4px); }
}
.blurIn {
  animation-name: blurIn;
}

@keyframes blurInGrayscale {
	from { filter: grayscale(0%) blur(0px); }
	to { filter: grayscale(100%) blur(4px); }
}
.blurInGrayscale {
  animation-name: blurInGrayscale;
}

/* Blur exits */

@keyframes blurOut {
	from { filter: blur(4px); }
	to { filter: blur(0px); }
}
.blurOut {
  animation-name: blurOut;
}

@keyframes blurOutGrayscale {
	from { filter: grayscale(100%) blur(4px); }
	to { filter: grayscale(0%) blur(0px); }
}
.blurOutGrayscale {
  animation-name: blurOutGrayscale;
}