.custom-animation.in-view {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fade In */
.custom-animation.fade_in {
    opacity: 0;
}

.custom-animation.fade_in.in-view {
    animation-name: fadeIn;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Fade Up */
.custom-animation.fade_up {
    opacity: 0;
    transform: translateY(30px);
}

.custom-animation.fade_up.in-view {
    animation-name: fadeUp;
    animation-fill-mode: both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade Right */
.custom-animation.fade_right {
    opacity: 0;
    transform: translateX(-30px);
}

.custom-animation.fade_right.in-view {
    animation-name: fadeRight;
    animation-fill-mode: both;
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade Down */
.custom-animation.fade_down {
    opacity: 0;
    transform: translateY(-30px);
}

.custom-animation.fade_down.in-view {
    animation-name: fadeDown;
    animation-fill-mode: both;
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade Left */
.custom-animation.fade_left {
    opacity: 0;
    transform: translateX(30px);
}

.custom-animation.fade_left.in-view {
    animation-name: fadeLeft;
    animation-fill-mode: both;
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Wipe Up */
.custom-animation.wipe_up {
    clip-path: inset(89% 0 0 0);
}

.custom-animation.wipe_up.in-view {
    animation-name: wipeUp;
    animation-fill-mode: both;
}

@keyframes wipeUp {
    from {
        clip-path: inset(89% 0 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

/* Wipe Right */
.custom-animation.wipe_right {
    clip-path: inset(0 89% 0 0);
}

.custom-animation.wipe_right.in-view {
    animation-name: wipeRight;
    animation-fill-mode: both;
}

@keyframes wipeRight {
    from {
        clip-path: inset(0 89% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

/* Wipe Down */
.custom-animation.wipe_down {
    clip-path: inset(0 0 89% 0);
}

.custom-animation.wipe_down.in-view {
    animation-name: wipeDown;
    animation-fill-mode: both;
}

@keyframes wipeDown {
    from {
        clip-path: inset(0 0 89% 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

/* Wipe Left */
.custom-animation.wipe_left {
    clip-path: inset(0 0 0 89%);
}

.custom-animation.wipe_left.in-view {
    animation-name: wipeLeft;
    animation-fill-mode: both;
}

@keyframes wipeLeft {
    from {
        clip-path: inset(0 0 0 89%);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}


/* Slide up */
.custom-animation.slide_up {
    overflow: hidden;
}

.custom-animation.slide_up > :first-child{
    transform: translateY(100%);
}


.custom-animation.slide_up.in-view > :first-child {
    animation-name: slideUp;
    animation-fill-mode: both;
    transition: inherit;
    animation-duration: inherit;
    animation-delay: inherit;
    animation-timing-function: inherit;
}


@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0%);
    }
}


/* Slide Right */
.custom-animation.slide_right {
    overflow: hidden;
}

.custom-animation.slide_right > :first-child {
    transform: translateX(-100%);
}

.custom-animation.slide_right.in-view > :first-child {
    animation-name: slideRight;
    animation-fill-mode: both;
    transition: inherit;
    animation-duration: inherit;
    animation-delay: inherit;
    animation-timing-function: inherit;
}


@keyframes slideRight {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0%);
    }
}

/* Slide down */
.custom-animation.slide_down {
    overflow: hidden;
}

.custom-animation.slide_down > :first-child {
    transform: translateY(-100%);
}

.custom-animation.slide_down.in-view > :first-child {
    animation-name: slideDown;
    animation-fill-mode: both;
    transition: inherit;
    animation-duration: inherit;
    animation-delay: inherit;
    animation-timing-function: inherit;
}


@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0%);
    }
}

/* Slide Left */
.custom-animation.slide_left {
    overflow: hidden;
}

.custom-animation.slide_left > :first-child {
    transform: translateX(100%);
}

.custom-animation.slide_left.in-view > :first-child {
    animation-name: slideLeft;
    animation-fill-mode: both;
    transition: inherit;
    animation-duration: inherit;
    animation-delay: inherit;
    animation-timing-function: inherit;
}


@keyframes slideLeft {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0%);
    }
}


/* Delay Classes */
.delay-01.in-view {
    animation-delay: 0.1s !important;
}

.delay-02.in-view {
    animation-delay: 0.2s !important;
}

.delay-03.in-view {
    animation-delay: 0.3s !important;
}

.delay-05.in-view {
    animation-delay: 0.5s !important;
}

.delay-07.in-view {
    animation-delay: 0.7s !important;
}

.delay-1.in-view {
    animation-delay: 1s !important;
}

.delay-15.in-view {
    animation-delay: 1.5s !important;
}

.delay-2.in-view {
    animation-delay: 2s !important;
}


/* Duration Classes */
.duration-01.in-view {
    animation-duration: 0.1s !important;
}

.duration-02.in-view {
    animation-duration: 0.2s !important;
}

.duration-03.in-view {
    animation-duration: 0.3s !important;
}

.duration-05.in-view {
    animation-duration: 0.5s !important;
}

.duration-07.in-view {
    animation-duration: 0.7s !important;
}

.duration-1.in-view {
    animation-duration: 1s !important;
}

.duration-15.in-view {
    animation-duration: 1.5s !important;
}

.duration-2.in-view {
    animation-duration: 2s !important;
}