.scroll,
.scroll-child {
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s;
  transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
}

.scroll.fade-in,
.scroll-child.fade-in {
  opacity: 0;
}
.scroll.fade-in.active,
.scroll-child.fade-in.active {
  opacity: 1;
}
.scroll.fade-left,
.scroll-child.fade-left {
  opacity: 0;
  -webkit-transform: translateX(-30px);
          transform: translateX(-30px);
}
.scroll.fade-left.active,
.scroll-child.fade-left.active {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.scroll.fade-up,
.scroll-child.fade-up {
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}
.scroll.fade-up.active,
.scroll-child.fade-up.active {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.scroll.slide-show,
.scroll-child.slide-show {
  z-index: 6;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.scroll.slide-show.active,
.scroll-child.slide-show.active {
  -webkit-animation: slideIn 1s ease forwards;
          animation: slideIn 1s ease forwards;
}
@-webkit-keyframes slideIn {
  0%, 5% {
    opacity: 1;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slideIn {
  0%, 5% {
    opacity: 1;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.scroll.slide-show .slide-show--child,
.scroll-child.slide-show .slide-show--child {
  position: relative;
  opacity: 0;
}
.scroll.slide-show.active .slide-show--child,
.scroll-child.slide-show.active .slide-show--child {
  -webkit-animation: slideInChild 1s ease forwards;
          animation: slideInChild 1s ease forwards;
}
@-webkit-keyframes slideInChild {
  0%, 5% {
    opacity: 1;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slideInChild {
  0%, 5% {
    opacity: 1;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.scroll.popup,
.scroll-child.popup {
  opacity: 0;
  -webkit-transform: translateY(40px) scale(0.8);
          transform: translateY(40px) scale(0.8);
}
.scroll.popup.active,
.scroll-child.popup.active {
  -webkit-animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
          animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
@-webkit-keyframes popup {
  0% {
    -webkit-transform: translateY(40px) scale(0.8);
            transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes popup {
  0% {
    -webkit-transform: translateY(40px) scale(0.8);
            transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
  80%, 100% {
    opacity: 1;
  }
}/*# sourceMappingURL=scroll_animation.css.map */