#home-banner{
    width: 100%;
    height: 40vw;

    background-size: 100%;

    animation: banner 60s infinite;
}

@keyframes banner{
    0%, 23%{
        background-image: url(../imagenes/Carrusel_banner_1.jpg);
        opacity: 1;
    }
    23%, 25%{
        opacity: 0.9;
    }
    25%, 48%{
        background-image: url(../imagenes/Carrusel_banner_2.png);
        opacity: 1;
    }
    48%, 50%{
        opacity: 0.9;
    }
    50%, 73%{
        background-image: url(../imagenes/Carrusel_banner_3.png);
        opacity: 1;
    }
    73%,75%{
        opacity: 0.9;
    }
    75%, 99%{
        background-image: url(../imagenes/Carrusel_banner_4.png);
        opacity: 1;
    }
    99%,100%{
        opacity: 0.9;
    }
}

@media(max-width:750px ) and (orientation:portrait){
    #home-banner{
        height: 77vh;
        background-size: cover;
    }
}