@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }

@supports (font-variation-settings: normal) {
    html { font-family: 'Inter var', sans-serif; }
}

body {
    font-family: 'Inter var', sans-serif;
    font-size: 16px;
    background-color: lightskyblue;
    color: #9b8334;
}

@media only screen and (min-width:1400px) { 
    body {
        font-size: 16px;
        
    }
    h1 {
        font-size: -3%;
        
    }
    h5, .h5 {
        font-size: 1.3rem;
        }
    .texto {

        padding-left: 8rem;
        padding-top: 1.8rem;
        padding-right: 8rem;
        padding-bottom: 0rem;
        
    }
    
}

@media only screen and (min-width:1200px) and (max-width:1399px) { 
    body {
        font-size: 15px;
    }
    h5, .h5 {
        font-size: 1.25rem;
        }
    .texto {

        padding-left: 6rem;
        padding-top: 1.5rem;
        padding-right: 6rem;
        padding-bottom: 0rem;
        
    }
    
}

@media only screen and (min-width:992px) and (max-width:1199px) { 
    body {
        font-size: 14px;
    }
    h5, .h5 {
        font-size: 1.1rem;
        }
    .texto {

        padding-left: 4rem;
        padding-top: 1.2rem;
        padding-right: 4rem;
        padding-bottom: 0rem;
        
    }
    
}

@media only screen and (min-width:768px )and (max-width:991px) { 
    body {
        font-size: 13px;
    }

    h1 {
        font-size: large;
        
    }
    
    h5, .h5 {
        font-size: 0.9rem;
        }

    .texto {

        padding-left: 2rem;
        padding-top: 1rem;
        padding-right: 2rem;
        padding-bottom: 0rem;
        
    }
}

@media only screen and (min-width:576px) and (max-width:767px) { 
    body {
        font-size: 12px;
    }

    h1 {
        font-size: large;
        
    }

    h5, .h5 {
        font-size: 0.85rem;
    }   
    .texto {

        padding-left: 0.6rem;
        padding-top: 0.8rem;
        padding-right: 1rem;
        padding-bottom: 0rem;
        
    }
}

@media only screen and (max-width:575px) { 
    body {
        font-size: 10px;
    }

    h1 {
        font-size: large;
        
    }


    h5, .h5 {
        font-size: 0.7rem;
    }
    .texto {

        padding-left: 0.6rem;
        padding-top: 0rem;
        padding-right: 1rem;
        padding-bottom: 0.8rem;
        
    }
    .menu {
        font-size: x-small;
    }


    .menu {
        padding: 0%;
        margin: 0%;
        height: 10%;
        font-size: 14px;
    }
}

.contenedor {
    padding: 0;
    margin: 0;
    background-color: lightskyblue;
    color: #9b8334;
}

.main {
    height: 20%;
    box-sizing: border-box;
    
    
}

a {
    color: black;
}

li {
    list-style-type: none;
}

.spaces {
    padding: 2%;
    box-sizing: border-box;

}



.mapa-1{
    width: 610px;
    display: inline-block;
    margin: 4%;

}


.mapa{
    width: 550px;
    height: 400px;
    display:inline-block ;

}

@media only screen and  (max-width: 500px){
    .mapa {
        width: 57%;
        padding: 5px;
        
    }

}
    

.imagen {
    border: 5px solid #bba14f;
}

.nav-sand {
    color: #9b8334;;
    
}

.nav-link {
    color: #9b8334;
} 

.bg-menu {
    background-color: lightskyblue;
}

.nav-link:hover {
    color: #9b8334;;
    background-color: lightskyblue;
}

.contacto {
    padding: 2rem;
    width: 100%;
}

.galeria {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

.galeria:hover {
    border: 1px solid #777;
}

.galeria img {
    width: 100%;
    height: 150px;
}

.city {
    padding-left: 3%;
}