.locales-header {
    position: sticky;
    top: 0;
    display: flex;

    background-color : #2d2f2e;
    justify-content: center;
    z-index: 999;
}

.locales-header .columna {
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.locales-header .boton {    
    font-size: medium;
    font-family: "Nexa";
    background-color: #2d2f2e;
    border-radius: 10%;
    color: #d8d8d8
}

.locales-header .boton:hover {
    transform: scale(1.2);
    transition: 200ms linear;
}

.agregar-negocio {
    width: 7vw;
}

.agregar-negocio:hover {
    transform: scale(1.2);
    transition: 200ms linear;
}

.locales-banner {
    display: flex;
    justify-content: left;
    align-items: center;
    height: 6vh;
    background-color : #0e7486;
    background-image : -webkit-linear-gradient(bottom right, #0e7486, #19b9be);
    background-image : -o-linear-gradient(bottom right, #0e7486, #19b9be);
    background-image : linear-gradient(to top left, #0e7486, #19b9be);
    z-index: 600;
}

.locales-banner h1 {
    font-size: 2.0vw;
    font-family:'Gotham-Black', Times, serif;
    font-weight: 500;    
    color: rgb(90, 90, 90);
    padding-left: 20%;
}

.locales-banner input {
    margin-left: 10px; 
    margin-bottom: 10px; 
    width: 40vw; 
    font-family: 'Nexa-Light';
}

.locales-body {
    position: sticky;
    display: block;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 73%;
    justify-content: space-around;
    height: 93%;
    overflow-y: auto;
}

.locales-foot {
    position: sticky;
    bottom: 0;
    display: flex;
    background-color: black;
    justify-content: space-around;
    height: 7vh;
    top: 0;
    padding: 2% 2% 2% 2%;

    background-color : #2d2f2e;
}

.locales-foot a {
    color: #ffffff;
}

.negocio-img {
    background-color: #ffffff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    font-size: medium;
    color: white;
    display: flex;
    justify-content: center;
    background-repeat: no-repeat;
    margin: 2%;
    padding: 2%;
    position: sticky;
}

.negocio-img a {
    border-radius: 2%;
    width: 100em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 75%;
}

.heading {
    position: sticky;
    background: linear-gradient(to top, rgb(31, 31, 31)33%, rgb(31, 31, 31, 0.8), rgb(31, 31, 31, 0));
    border-radius: 2%;
    height: 10vh;
    align-items: flex-end;
}

.heading h3 {
    color    : rgb(255, 255, 255);    
    font-weight: 600;
    font-family: 'Nexa-Light';
    padding-top: 5%;
    padding-left: 8%;
}

.heading p {
    color: #2a9b75;
    font-size: medium;
    font-weight: 400;
    padding-left: 8%;
    font-family: 'Nexa-Bold';
}

.center {
    border: solid 0px rgba(0,0,0,0);
    transition: border-width 0.3s;
}

.center:hover {
    border-width: 4px;
    border-color: #2a9b75;
    border-radius: 8px;
    transform: scale(1.1);
    transition: 100ms linear;
    z-index: 9999;
}

.logo-reserva {
    width: 10vw; 
    margin:5px
}

/*************************
VIEW FOR IPAD & TABLETS
*************************/
@media screen and (max-width: 1024px) {
      
    .agregar-negocio {
        width: 11vw;
    }

    .locales-banner {
        min-height: 15vh;
    }

    .locales-banner h1 {
        font-size: 4vw;
        font-family:'Gotham-Black', Times, serif;
        font-weight: 500;    
        color: rgb(90, 90, 90);
        padding-left: 5%;
        max-width: 35vw;        
    }

    .locales-banner input {
        margin-left: 10px; 
        margin-bottom: 10px; 
        width: 60vw;
    }

    .logo-reserva {
        width: 20vw; 
        margin:5px
    }

}


/*************************
VIEW FOR MOBILES
*************************/
@media screen and (max-width: 480px) {
    
    .locales-header .boton {    
        font-size: x-small;
        padding: 3px;
    }

    .agregar-negocio {
        width: 15vw;
    }

    .locales-banner {
        min-height: 9vh;
    }

    .locales-banner h1 {
        font-size: 4.5vw;
        font-family:'Gotham-Black', Times, serif;
        font-weight: 500;    
        color: rgb(90, 90, 90);
        padding-left: 5%;
        max-width: 35vw;
        max-height: 10vh;
    }

    .locales-banner input {
        margin-left: 10px; 
        margin-bottom: 10px; 
        width: 60vw;
    }

    .locales-body {
        background-image: none;
    }

    .negocio-img {
        font-size: medium;
        display: flex;
        justify-content: center;
        margin: 2%;
        padding: 2%;
        position: sticky;        
        width: 100vw;
        height: 100vw;
    }

    .heading {
        position: absolute;
        height: 25vw;
        bottom: 0%;
        width: 96%;
    }

    .heading h3 {
        color    : rgb(255, 255, 255);    
        font-weight: 600;
        font-family: 'Nexa-Light';
        padding-top: 5%;
        padding-left: 8%;
    }

    .heading p {
        color: #2a9b75;
        font-weight: 400;
        padding-left: 8%;
        font-family: 'Nexa-Bold';
    }


    
    .logo-reserva {
        width: 30vw; 
        margin:5px
    }

}