/* ------------------animations-------------------- */

.fade-up {
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp 0.7s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-down {
  opacity: 0;
  transform: translateY(-28px);
  animation: fadeUp 0.7s ease forwards;
}

@keyframes fadeDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-right {
  opacity: 0;
  transform: translateX(-28px);
  animation: fadeRight 0.7s ease forwards;
}

@keyframes fadeRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-left {
  opacity: 0;
  transform: translateX(28px);
  animation: fadeRight 0.7s ease forwards;
}

@keyframes fadeLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.d1 {
  animation-delay: 0.05s;
}
.d2 {
  animation-delay: 0.15s;
}
.d3 {
  animation-delay: 0.25s;
}
.d4 {
  animation-delay: 0.35s;
}
.d5 {
  animation-delay: 0.45s;
}
.d6 {
  animation-delay: 0.55s;
}