esl-animate {
  display: inline-block;
}
esl-animate:empty {
  display: none;
}
@media screen {
  .esl-animate-fade {
    opacity: 0;
  }
  .esl-animate-fade.in {
    opacity: 1;
    transition: opacity 1.5s;
  }
  .esl-animate-slide {
    --esl-animation-offset-x: 0;
    --esl-animation-offset-y: 0;
    opacity: 0;
    transform: translate3d(var(--esl-animation-offset-x), var(--esl-animation-offset-y), 0);
  }
  .esl-animate-slide.in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: transform 1s,
        opacity 1s;
  }
  .esl-animate-slide:not(.in) {
    position: relative;
    top: calc(-1 * var(--esl-animation-offset-y));
    left: calc(-1 * var(--esl-animation-offset-x));
  }
  .esl-animate-slide.up {
    --esl-animation-offset-y: 30px;
  }
  .esl-animate-slide.down {
    --esl-animation-offset-y: -30px;
  }
  .esl-animate-slide.left {
    --esl-animation-offset-x: 30px;
  }
  .esl-animate-slide.right {
    --esl-animation-offset-x: -30px;
  }
}