/* ====================== */
/* ======= Variables ======= */
/* ====================== */

:root {
  --transform-distance: 40px;
}

/* ======================== */
/* ======= Animations ======= */
/* ======================== */

.brx-animated.brx-animate-slideInRight {
  animation-name: ja-slideInRight;
}

@keyframes ja-slideInRight {
  0% {
    opacity: 0;
    transform: translateX(var(--transform-distance));
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

.brx-animated.brx-animate-slideInLeft {
  animation-name: ja-slideInLeft;
}

@keyframes ja-slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(calc(-1 * var(--transform-distance)));
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

.brx-animated.brx-animate-slideInUp {
  animation-name: ja-slideInUp;
}

@keyframes ja-slideInUp {
  0% {
    opacity: 0;
    transform: translateY(var(--transform-distance));
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

.brx-animated.brx-animate-slideInDown {
  animation-name: ja-slideInDown;
}

@keyframes ja-slideInDown {
  0% {
    opacity: 0;
    transform: translateY(calc(-1 * var(--transform-distance)));
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

.brx-animated.brx-animate-slideInUp-50 {
  animation-name: slideInUp-50;
}

@keyframes slideInUp-50 {
  0% {
    opacity: 0;
    transform: translateY(-35%);
  }

  100% {
    transform: translateY(-50%);
    opacity: 1;
  }
}

@media (max-width: 380px) {
  @keyframes slideInUp-50 {
    0% {
      opacity: 0;
      transform: translateY(-35%);
    }

    100% {
      transform: translateY(-45%);
      opacity: 1;
    }
  }
}

@media (max-width: 350px) {
  @keyframes slideInUp-50 {
    0% {
      opacity: 0;
      transform: translateY(-35%);
    }

    100% {
      transform: translateY(-40%);
      opacity: 1;
    }
  }
}