/*  -------   animação  --------   */

@keyframes slideInLeft {
    from {
        transform: translateX(100px);
    }

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

@keyframes slideInRight {
    from {
        transform: translateX(-100px);
    }

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

@keyframes pisca {
    0%, 100% {
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
}

[data-anima] {
    opacity: 0;
    transition: 1.5s;
}

[data-anima="down"] {
    transform: translate3d(0, -100%, 0);
}

[data-anima="up"] {
    transform: translate3d(0, 100%, 0);
}

[data-anima="left"] {
    transform: translate3d(-100%, 0, 0);
}

[data-anima="right"] {
    transform: translate3d(50px, 0, 0);
}

[data-anima].animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}