@keyframes jumpfadeIn {
    0% {
        opacity: .2
    }

    100% {
        opacity: 1;
    }
}

@keyframes jumpfadeInRight {
    0% {
        transform: translateX(100px);
        opacity: 0
    }

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

@keyframes jumpfadeInLeft {
    0% {
        transform: translateX(-100px);
        opacity: 0
    }

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


/* -------------------- ARTICLE ----------------------- */

.article-right {
    transform: translateX(100px);
    opacity: 0
}

.article-right.inview {
    animation: jumpfadeInRight .8s ease-out forwards;
    animation-delay: .6s;
}

.article-left {
    transform: translateX(-100px);
    opacity: 0
}

.article-left.inview {
    animation: jumpfadeInLeft .8s ease-out forwards;
    animation-delay: .6s;
}



/* -------------------- IMAGES ----------------------- */

.img-right.checkInView {
    transform: translateX(100px);
    opacity: 0
}

.img-right.checkInView.inview {
    animation: jumpfadeInRight .6s ease-out forwards;
}

.img-left.checkInView {
    transform: translateX(-100px);
    opacity: 0
}

.img-left.checkInView.inview {
    animation: jumpfadeInLeft .6s ease-out forwards;
}


/* -------------------- UL ----------------------- */

ul.jumpin {
    width: fit-content;
    max-width: fit-content;
    overflow-x: hidden;
}


ul.jumpin>li {
    /*transform: translateX(100px);*/
    opacity: .2
}

ul.inview.jumpin>li,
.inview ul.jumpin>li {
    animation: jumpfadeIn .3s ease-out forwards;
}


/* -------------------- MEDIA BOX ----------------------- */
.mediaIn {
    height: fit-content;
    /*overflow: hidden;*/
}

.mediaIn .article-media-box {
    transform: translateY(80px);
    opacity: 0;
}

.mediaIn.inview .article-media-box {
    animation: mediafadeIn .2s ease-out forwards;
}

.mediaIn.inview>div:nth-child(1)>.article-media-box {
    animation-delay: 0s;
}

.mediaIn.inview>div:nth-child(2)>.article-media-box {
    animation-delay: 0.3s;
}

.mediaIn.inview>div:nth-child(3)>.article-media-box {
    animation-delay: 0.6s;
}

.mediaIn.inview>div:nth-child(4)>.article-media-box {
    animation-delay: 0.9s;
}

@keyframes mediafadeIn {
    0% {
        transform: translateY(80px);
        opacity: 0
    }

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