/* ====================== */
/* ======= 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(calc(-1 * 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(var(--transform-distance));   
  }
  
  100% {
      transform: none;
      opacity: 1;
  }
}

/* ===================== */
/* ======= Utilities ======= */
/* ===================== */

h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

.brxe-button {
  cursor: pointer;
}

::-moz-selection { /* Code for Firefox */
  color: #fff;
  background: var(--primary)  ;
}

::selection {
  color: #fff;
  background: var(--primary)  ;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
  }