/*Styling scrollable elements*/

.js-scroll {
  opacity: 0;
  transition: opacity 500ms;
}

.js-scroll.scrolled {
  opacity: 1;
}

.scrolled.fade-in {
  animation: fade-in 1s ease-in-out both;
}

.scrolled.fade-in-bottom {
  animation: fade-in-bottom 1s ease-in-out both;
}

.scrolled.slide-left {
  animation: slide-in-left 1s ease-in-out both;
}

.scrolled.slide-right {
  animation: slide-in-right 1s ease-in-out both;
}

.scrolled.rotateDownLeft {
    animation: rotateDownLeft 1s forwards;
}

.scrolled.rotateDownRight {
    animation: rotateDownRight 1s forwards;
}

.scrolled.slide-top {
    -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.scrolled.slide-bottom {
    -webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


.scrolled.popUp {
    --animation-duration: 0.8s;
    animation: popUp ease-in-out forwards;
    animation-delay: 120ms;
    animation-duration: var(--animation-duration);
}

@keyframes popUp {
     0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* ----------------------------------------------
 * Generated by Animista on 2021-2-11 23:32:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-top {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
}

100% {
    opacity: 1;
    transform: none;
}
}
@keyframes slide-top {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
}

100% {
    opacity: 1;
    transform: none;
}
}


/**
 * ----------------------------------------
 * animation slide-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-bottom {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
}

100% {
    opacity: 1;
    transform: none;
}
}
@keyframes slide-bottom {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
}

100% {
    opacity: 1;
    transform: none;
}
}


@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

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

@keyframes rotateDownLeft {
           0% {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
}
            100% {
    transform-origin: left bottom;
    transform: none;
    opacity: 1;
}
        }

@keyframes rotateDownRight {
           0% {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
}
            100% {
    transform-origin: right bottom;
    transform: none;
    opacity: 1;
}
        }

@keyframes slideUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes zoomIn {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
.slideUp {
    animation: slideUp 1s forwards;
}
.zoomIn {
    animation: zoomIn 1s forwards;
}