.hero--scale-proportionally {
    min-height: initial !important;
}

.hero--aspect-ratio-2-1 { aspect-ratio: 2 / 1; }
.hero--aspect-ratio-4-1 { aspect-ratio: 4 / 1; }
.hero--aspect-ratio-4-3 { aspect-ratio: 4 / 3; }
.hero--aspect-ratio-8-5 { aspect-ratio: 8 / 5; }
.hero--aspect-ratio-16-5 { aspect-ratio: 16 / 5; }
.hero--aspect-ratio-16-15 { aspect-ratio: 16 / 15; }
.hero--aspect-ratio-32-5 { aspect-ratio: 32 / 5; }
.hero--aspect-ratio-32-15 { aspect-ratio: 32 / 15; }

.hero-loader {
    border: 3px solid rgba(255,255,255,.3);
    border-top-color: #000;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    animation: spin 1s linear infinite;
    -webkit-animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to { -webkit-transform: rotate(360deg); }
  }
  @-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
  }

/* --- TEXT EFFECTS --- */
/* --- FADE --- */
.fade-in {
  display: flex;
  animation-duration: 2.5s;
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 2.5s;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* --- SWIPE --- */
.swipe-in-right {
  display: flex;
  animation-duration: 1.5s;
  animation-name: swipeInRight;
}

@keyframes swipeInRight {
  0% {
    transform: translateX(50%);
  }

  100% {
    transform: translateX(0);
  }
}

.swipe-in-left {
  display: flex;
  animation-duration: 1.5s;
  animation-name: swipeInLeft;
}

@keyframes swipeInLeft {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.swipe-in-top {
  display: flex;
  animation-duration: 1.5s;
  animation-name: swipeInTop;
}

@keyframes swipeInTop {
  0% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(0);
  }
}

.swipe-in-bottom {
  display: flex;
  animation-duration: 1.5s;
  animation-name: swipeInBottom;
}

@keyframes swipeInBottom {
  0% {
    transform: translateY(50%);
  }

  100% {
    transform: translateY(0);
  }
}

/* --- BOUNCE --- */
.bounce-in-right {
  display: flex;
  animation-duration: 2s;
  animation-name: bounceInRight;
}

@keyframes bounceInRight {
  50%,
  80% {
    transform: translateX(0);
  }

  0%,
  20%,
  40% {
    transform: translateX(-40px);
    opacity: 0;
  }

  60% {
    transform: translateX(-20px);
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.bounce-in-left {
  display: flex;
  animation-duration: 2s;
  animation-name: bounceInLeft;
}

@keyframes bounceInLeft {
  50%,
  80% {
    transform: translateX(0);
  }

  0%,
  20%,
  40% {
    transform: translateX(40px);
    opacity: 0;
  }

  60% {
    transform: translateX(20px);
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.bounce-in-top {
  display: flex;
  animation-duration: 2s;
  animation-name: bounceInTop;
}

@keyframes bounceInTop {
  50%,
  80% {
    transform: translateY(0);
  }

  0%,
  20%,
  40% {
    transform: translateY(-40px);
    opacity: 0;
  }

  60% {
    transform: translateY(-20px);
  }

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

.bounce-in-bottom {
  display: flex;
  animation-duration: 2s;
  animation-name: bounceInBottom;
}

@keyframes bounceInBottom {
  50%,
  80% {
    transform: translateY(0);
  }

  0%,
  20%,
  40% {
    transform: translateY(40px);
    opacity: 0;
  }

  60% {
    transform: translateY(20px);
  }

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