@media screen and (min-width: 800px) {

    .esquerda,
    .direita,
    .cima,
    .baixo {
        opacity: 0;
        transition: all .5s;
    }
}


/* animacoes */

@keyframes left {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes right {
    from {
        transform: translateX(50%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes up {
    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes down {
    from {
        transform: translateY(50%);
    }

    to {
        transform: translateY(0);
    }
}

.left {
    animation: ease-in-out left .5s;
    opacity: 1;
}

.right {
    animation: ease-in-out right .5s;
    opacity: 1;
}

.up {
    animation: ease-in-out up .5s;
    opacity: 1;
}

.down {
    animation: ease-in-out down .5s;
    opacity: 1;
}