:root{

    

}


#navbarHeader{
background-color: rgb(94, 4, 4) !important;



}

.navbar{

    color:  rgb(94, 4, 4) !important;
    background-color: rgb(94, 4, 4) !important;
}

.fondoBanner{
    
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    /* height: 550px; */
    position: relative;
  
 
}
h1{

    display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 15px;
        color: #FFF;

        background-color: rgba(0, 0, 0, .1);
}

.fondo{

    background-image: url("../img/banner2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

.hero{
    /* background-color: brown; */
   
    width: 100%;
    height: 300px;
    position: relative;
}

.container-hero{

    position: absolute;
    width: 100%;
    height:100%;
    background-color: rgba(0, 0, 0, .2);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

/* carrusel */

#carrusel{
    margin: 25px;
    padding: 15px;
}

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

.cards-wrapper{

    display: flex;
}

.card {
   
    margin: 0.5em;
    width: calc(100%/3);
    
 
}
.image-wrapper{
    /* height: 10vw ; */
    margin: 0 auto;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}
}
@media screen and (max-width: 567px){
    .card:not(:first-child){
        display: none;
    }
}



.image-wrapper img{

    max-width: 100%;
    max-height: 100%;
}
/* https://www.youtube.com/watch?v=kHPm_AlxP7U */