.mensajes{
    text-align: center; 
    color: white; 
    background-color: #74B150; 
    font-weight: bold;
    position: absolute; 
    width: 100%; 
    top: -90px;
    animation-duration: 10s;
    animation-name: mensaje;
    
}

.mensajes_error{
    text-align: center;  
    font-weight: bold;
    position: absolute; 
    width: 100%; 
    top: 0px;
    animation-duration: 10s;
    animation-name: mensaje_error;
    opacity: 0;
    
}

@keyframes mensaje{
    0%{
        top: -90px;
        opacity: 0;
    }

    20%{
        top: 0;
        opacity: 1
    }
    
    70%{
        top: 0;
        opacity: 1
    }

    100%{
        top: -90px;
        opacity: 0;
    }
}

@keyframes mensaje_error{
    0%{
        
        opacity: 1;
    }

    20%{
        top: 0;
        opacity: 1
    }
    
    70%{
        top: 0;
        opacity: 1
    }

    100%{
        top: -90px;
        opacity: 0;
    }
}