/* scroll fedein with transform position */

@keyframes scrlupanim {
    0% {
        transform: translateY(4em);
    }

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

.scrlup,
.scrlstart {
    opacity: 0;
    will-change: transform;
    transform: translateY(2em);
    transition: transform .5s ease, opacity .5s ease;
}

.scrlstart.slideR {
    transform: translateX(-12%) translateY(0);
    transition: transform .75s ease, opacity .5s ease;
}

.scrlstart.slideL {
    transform: translateX(12%) translateY(0);
    transition: transform .75s ease, opacity .5s ease;
}

.scrlup.on,
.scrlstart.on {
    opacity: 1;
    transform: translateX(0) translateY(0) translateZ(0);
}

.scrlup05s {
    opacity: 0;
    transform: translateY(3rem);
    transition: transform .5s .5s ease, opacity .5s .5s ease;
}

.scrlup05s.on {
    opacity: 1;
    transform: translateY(0);
}

.scrlup5 {
    opacity: 0;
    transform: translateY(5rem);
    transition: transform .5s ease, opacity .5s ease;
}

.scrlup5.on {
    opacity: 1;
    transform: translateY(0);
}

.scrlup1 {
    opacity: 0;
    transform: translateY(100%);
    transition: transform 1s ease, opacity 1s ease;
}

.scrlup1.on {
    opacity: 1;
    transform: translateY(0);
}

.scinL {
    opacity: 0;
    transform: translateX(-25%);
    transition: transform .75s ease, opacity .5s ease;
}

.scinL.on {
    opacity: 1;
    transform: translateX(0);
    transition: transform .75s ease, opacity .5s ease;
}

.scinR {
    opacity: 0;
    transform: translateX(25%);
    transition: transform .75s ease, opacity .5s ease;
}

.scinR.on {
    opacity: 1;
    transform: translateX(0);
    transition: transform .75s ease, opacity .5s ease;
}

.sczoomstart {
    opacity: 0;
    transform: scale(1.1);
    transition: all .5s .1s ease;

}

.sczoom {
    opacity: 0;
    transform: scale(1.1);
    transition: all .5s ease;
}

.sczoomstart.on,
.sczoom.on {
    opacity: 1;
    will-change: transform;
    transform: scale(1);
    transition: all .5s ease;
}

.sczoom2 {
    opacity: 0;
    transform: scale(1.05);
    transition: all 1s .5s ease;
}

.sczoom2.on {
    opacity: 1;
    transform: scale(1);
    transition: all 1s .5s ease;
}

.sczoom3 {
    opacity: 0;
    transform: scale(1.05);
    transition: all 1s 1s ease;
}

.sczoom3.on {
    opacity: 1;
    transform: scale(1);
    transition: all 1s 1s ease;
}

.scfadestart,
.scrlfadein {
    opacity: 0;
    transition: all .5s ease;
}

.scfadestart.on,
.scrlfadein.on {
    opacity: 1;
    transition: all .5s ease;
}

.scrlfadeout {
    opacity: 1;
    transition: all .5s ease;
}

.scrlfadeout.on {
    opacity: 0;
    transition: all .5s ease;
}