/**
  *
  *   Author: Andrey Melnichenko @dev_arm923i
  *   Author URI: https://t.me/dev_arm923i
  * 
**/
@keyframes scale {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scaleX {
  0% {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(0.7);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes widthTo100VW {
  0% {
    width: 0;
  }
  50% {
    width: 70vw;
  }
  100% {
    width: 100vw;
  }
}
.animation--widthTo100 {
  width: 0;
}

.animate.animation--widthTo100 {
  animation-name: widthTo100;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes widthTo100 {
  0% {
    width: 0;
  }
  50% {
    width: 70%;
  }
  100% {
    width: 100%;
  }
}
.animation--fade {
  opacity: 0;
}

.animate.animation--fade {
  animation-name: fade;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
.animation--fadeLeft {
  opacity: 0;
  transform: translateX(-50px);
}

.animate.animation--fadeLeft {
  animation-name: fadeLeft;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes fadeLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  50% {
    opacity: 0.7;
    transform: translateX(-35px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.animation--fadeRight {
  opacity: 0;
  transform: translateX(50px);
}

.animate.animation--fadeRight {
  animation-name: fadeRight;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  50% {
    opacity: 0.7;
    transform: translateX(35px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.animation--fadeTop {
  opacity: 0;
  transform: translateY(-50px);
}

.animate.animation--fadeTop {
  animation-name: fadeTop;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes fadeTop {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-35px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animation--fadeTopLeft {
  opacity: 0;
  transform: translate(-50px, -50px);
}

.animate.animation--fadeTopLeft {
  animation-name: fadeTopLeft;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes fadeTopLeft {
  0% {
    opacity: 0;
    transform: translate(-50px, -50px);
  }
  50% {
    opacity: 0.7;
    transform: translate(-35px, -35px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.animation--fadeTopRight {
  opacity: 0;
  transform: translate(50px, -50px);
}

.animate.animation--fadeTopRight {
  animation-name: fadeTopRight;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes fadeTopRight {
  0% {
    opacity: 0;
    transform: translate(50px, -50px);
  }
  50% {
    opacity: 0.7;
    transform: translate(35px, -35px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.animation--fadeBottom {
  opacity: 0;
  transform: translateY(50px);
}

.animate.animation--fadeBottom {
  animation-name: fadeBottom;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes fadeBottom {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  50% {
    opacity: 0.7;
    transform: translateY(35px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animation--fadeBottomLeft {
  opacity: 0;
  transform: translate(-50px, 50px);
}

.animate.animation--fadeBottomLeft {
  animation-name: fadeBottomLeft;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes fadeBottomLeft {
  0% {
    opacity: 0;
    transform: translate(-50px, 50px);
  }
  50% {
    opacity: 0.7;
    transform: translate(-35px, 35px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.animation--fadeBottomRight {
  opacity: 0;
  transform: translate(50px, 50px);
}

.animate.animation--fadeBottomRight {
  animation-name: fadeBottomRight;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes fadeBottomRight {
  0% {
    opacity: 0;
    transform: translate(50px, 50px);
  }
  50% {
    opacity: 0.7;
    transform: translate(35px, 35px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.animation--delay-1 {
  animation-delay: 0.1s;
}

.animation--delay-2 {
  animation-delay: 0.2s;
}

.animation--delay-3 {
  animation-delay: 0.3s;
}

.animation--delay-4 {
  animation-delay: 0.4s;
}

.animation--delay-5 {
  animation-delay: 0.5s;
}

.animation--delay-6 {
  animation-delay: 0.6s;
}

.animation--delay-7 {
  animation-delay: 0.7s;
}

.animation--delay-8 {
  animation-delay: 0.8s;
}

.animation--delay-9 {
  animation-delay: 0.9s;
}

.animation--delay-10 {
  animation-delay: 1s;
}

.animation--delay-11 {
  animation-delay: 1.1s;
}

.animation--delay-12 {
  animation-delay: 1.2s;
}

.animation--delay-13 {
  animation-delay: 1.3s;
}

.animation--delay-14 {
  animation-delay: 1.4s;
}

.animation--delay-15 {
  animation-delay: 1.5s;
}

.animation--delay-16 {
  animation-delay: 1.6s;
}

.animation--delay-17 {
  animation-delay: 1.7s;
}

.animation--delay-18 {
  animation-delay: 1.8s;
}

.animation--delay-19 {
  animation-delay: 1.9s;
}

.animation--delay-20 {
  animation-delay: 2s;
}