/* animations */
.animation-box {
  opacity: 0 !important;
  transform: translate3d(0, 40px, 0);
  transition: transform 0.5s, opacity 0.9s;
  transition-delay: var(--delay);
}

.animation-box.slideFromLeft {
  transform: translate3d(-40px, 0, 0);
}

.animation-box.slideFromRight {
  transform: translate3d(40px, 0, 0);
}
.animation-box.slideFromBottom {
  transform: translate3d(0px, 40px, 0);
}
.animation-box.scale {
  transform: scale(0.5);
}

.animation-box.animated {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0);
}

.animation-box.scale.animated {
  transform: scale(1);
}

@media only screen and (min-width: 768.9px) {
  .animation-box.animation-div.slideFromRight {
    transform: translate3d(40px, -50%, 0);
  }
  .animation-box.animation-div.animated {
    opacity: 1 !important;
    transform: translateY(-50%);
  }
}

.btn-animate-10 {
  background: transparent;
  color: #000;
  border: 3px solid #000;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: 0.2s ease-in-out;
  letter-spacing: 2px;
  line-height: 1;
}
.btn-animate-10 span {
  animation: typing 8s steps(16) infinite;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-size: 18px;
  color: #000;
  font-weight: 700;
  transition: color 0.7s ease-out;
}
@keyframes typing {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  55%,
  65%,
  75% {
    opacity: 1;
  }
  60%,
  70% {
    opacity: 0;
  }
  80% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
.btn-animate-10:focus > span,
.btn-animate-10:hover > span {
  color: #e9ce66;
}