/* animações */
@keyframes up{
    from{
        opacity: 0;
        transform: translateY(16px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes right{
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0);
    }
}

.animate-up{
    animation-name: up;
    animation-duration: 300ms;
    animation-fill-mode: backwards;
}

@keyframes appear{
    from{
        
    }
    to{
        opacity: 1;
    }
}


.animate-right{
    animation-name:right;
    animation-duration: 300ms;
}

.animate-appear{
    animation-name: appear;
    animation-duration: 300ms;
    animation-fill-mode: backwards;
}