.in{
    /* opacity: 1; */
    animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
    animation-duration: 0.7s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
}

.inview[data-delay="0s"]{ animation-delay: 0s; }
.inview[data-delay="0.3s"]{ animation-delay: 0.3s; }
.inview[data-delay="0.4s"]{ animation-delay: 0.4s; }
.inview[data-delay="0.5s"]{ animation-delay: 0.5s; }
.inview[data-delay="0.6s"]{ animation-delay: 0.6s; }
.inview[data-delay="0.7s"]{ animation-delay: 0.7s; }
.inview[data-delay="0.8s"]{ animation-delay: 0.8s; }
.inview[data-delay="0.9s"]{ animation-delay: 0.9s; }
.inview[data-delay="1.0s"]{ animation-delay: 1.0s; }
.inview[data-delay="1.1s"]{ animation-delay: 1.1s; }
.inview[data-delay="1.2s"]{ animation-delay: 1.2s; }
.inview[data-delay="1.3s"]{ animation-delay: 1.3s; }
.inview[data-delay="1.4s"]{ animation-delay: 1.4s; }
.inview[data-delay="1.5s"]{ animation-delay: 1.5s; }
.inview[data-delay="1.6s"]{ animation-delay: 1.6s; }
.inview[data-delay="1.7s"]{ animation-delay: 1.7s; }
.inview[data-delay="1.8s"]{ animation-delay: 1.8s; }
.inview[data-delay="1.9s"]{ animation-delay: 1.9s; }
.inview[data-delay="2.0s"]{ animation-delay: 2.0s; }
.inview[data-delay="2.1s"]{ animation-delay: 2.1s; }
.inview[data-delay="2.2s"]{ animation-delay: 2.2s; }
.inview[data-delay="2.3s"]{ animation-delay: 2.3s; }
.inview[data-delay="2.4s"]{ animation-delay: 2.4s; }
.inview[data-delay="2.5s"]{ animation-delay: 2.5s; }
.inview[data-delay="2.6s"]{ animation-delay: 2.6s; }
.inview[data-delay="2.7s"]{ animation-delay: 2.7s; }
.inview[data-delay="2.8s"]{ animation-delay: 2.8s; }
.inview[data-delay="2.9s"]{ animation-delay: 2.9s; }
.inview[data-delay="3.0s"]{ animation-delay: 3.0s; }



@keyframes inFade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.inFade {
    opacity: 0;
}

.inFade.in {
    animation-name: inFade;
}


@keyframes inUp {
    0%{
        opacity: 0;
        transform: translateY(50px);
    }

    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
.inUp{
    opacity: 0;
    transform: translateY(50px);
}
.inUp.in {
    animation-name: inUp;
}


@keyframes inLeft {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.inLeft {
    opacity: 0;
    transform: translateX(50px);
}
.inLeft.in {
    animation-name: inLeft;
}


@keyframes inRight {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.inRight {
    opacity: 0;
    transform: translateX(-50px);
}

.inRight.in {
    animation-name: inRight;
}