/* animation a l'apparition */
:root {
    /* --ease-big-out: cubic-bezier(0,.2,0,.99); */
    --ease-big-out: cubic-bezier(0, 0, 0.2, 1);
}
/*default state for all animations */
body.bricks-is-frontend .apr-top,
body.bricks-is-frontend .apr-bot,
body.bricks-is-frontend .apr-scale,
body.bricks-is-frontend .apr-left,
body.bricks-is-frontend .apr-fade {
    opacity: 0;
}

/* Appear in fade annimation =================================== */
body.bricks-is-frontend .apr-fade.start {
    animation: aprFade 0.8s var(--ease-big-out) forwards;
}
@keyframes aprFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Appear from left annimation =================================== */
body.bricks-is-frontend .apr-left.start {
    animation: aprLeft 0.8s var(--ease-big-out) forwards;
}
@keyframes aprLeft {
    from {
        opacity: 0;
        translate: 4rem 0px;
    }
    to {
        opacity: 1;
        translate: 0px;
    }
}

/* Appear from top annimation =================================== */
body.bricks-is-frontend .apr-top.start {
    animation: aprTop var(--ease-big-out) forwards 800ms;
}
@keyframes aprTop {
    from {
        opacity: 0;
        translate: 0rem -4rem;
    } 
    to {
        opacity: 1;
        translate: 0px;
    }
}

/* Appear from bottom annimation =================================== */
body.bricks-is-frontend .apr-bot.start {
    animation: aprBot var(--ease-big-out) forwards 800ms;
}
@keyframes aprBot {
    from {
        opacity: 0;
        translate: 0rem 4rem;
    } 
    to {
        opacity: 1;
        translate: 0px;
    }
}

/* Appear scale annimation =================================== */
body.bricks-is-frontend .apr-scale.start {
    animation: aprScale var(--ease-big-out) forwards 600ms;
}
@keyframes aprScale {
    from {
        opacity: 0;
        scale: 0.4;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}