@keyframes fade-in {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
    display: initial;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

@keyframes zoom-fade-out {
  0% {
    opacity: 1;
    height: initial;
  }
  100% {
    opacity: 0;
    height: 0px;
    display: none;
  }
}

@keyframes zoom-fade-in {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scale-h {
  0% {
    height: initial;
  }
  100% {
    height: 0px;
  }
}

@keyframes zoom-mini {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.01);
  }
}

@keyframes translate-up {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(20vh);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes bounce-loop {
  0% {
    transform: translateY(0em);
  }
  50% {
    transform: translateY(0.25em);
  }
  100% {
    transform: translateY(0em);
  }
}

@keyframes zoom-in {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.bounce-loop {
  animation: bounce-loop;
  animation-duration: 1000ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.bounce-loop:hover {
  animation: zoom-in;
  animation-duration: 500ms;
  animation-timing-function: ease-in-out;
}

.ani-fade-slow {
  animation: fade-in 1s;
}

.ani-fade-out {
  animation: fade-out 1s;
}

.ani-fade {
  animation: fade-in 300ms;
}

.ani-hover-zoom:hover {
  animation: zoom-mini;
  animation-play-state: paused;
  animation-duration: 500ms;
  animation-timing-function: ease-in-out;
}

.ani-slide-up {
  animation: slide-up 600ms;
}

.fx-x {
  opacity: 0.25;
  filter: saturate(0%);
}

.topnav-item {
  padding-right: 1rem!important;
}