@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500;1,600&display=swap');

* {

    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none !important;
    /*tira a linha do A*/
    list-style: none;
    /*tira as bolinha do li*/
    /* font-family: 'Roboto', sans-serif; */
    font-family: 'Open Sans';
}

:root {
    --azul-claro: #1F3F7C;
    --azul-escuro: #14387F;
    --branco: #FFFFFF;
    --azul-clarinho: rgba(74, 153, 211, 0.1);
    --azul-pisina: #4A99D3 10%;
    --cinza-claro: #D7D7D7;
    --preto-claro: #57585A;
    --preto-escuro: #0F001A;
    --sobram: 0px 1.69683px 4.69683px rgb(4 29 255 / 43%);
}

/*!xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
.box-banner-baresrestaurantes{
    width: 100%;
    overflow: hidden;
}
.banner-baresrestaurantes img {
    width: 100%;
    background-repeat: no-repeat;/*para nao repetir*/
    background-position: center center;/*o primeiro paramentro posso passar letf,top etc para direcionar a imagem*/
    border: none;
    margin-top: -5px;
}


/*!xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
.box-bares {

    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    /* border: 1px solid red; */

}

.box-bares-tamanho {
    width: 96%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    /* border: 2px solid yellow; */

}

.box-bares-pesquisa {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0px 0px 0px;

    /* border: 2px solid red; */

}

.box-bares-conteudo {
    width: 1201px;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    padding: 60px 0;
    position: relative;
    /* border: 2px solid red; */
}

.box-bares-card {
    width: 280px;
    height: 440px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 10px 10px;
    box-shadow: var(--sobram);
    border-radius: 10px;
    /* border: 2px solid red; */

}

.box-bares-card-img {
width: 100%;
height: 220px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
/* border: 1px solid green; */
}

.box-bares-card-img img {

    height: 200px;
    padding: 10px;
    max-width: 280px;
    object-fit: contain;
    /* border: 1px solid yellow; */
}

.box-bares-card-titulo {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px 0px 10px 0px;
    /* border: 1px solid yellow */
}

.box-bares-card-titulo h1 {

    font-family: 'Open Sans';
    font-weight: 800;
    font-style: 18px;
    color: var(--azul-escuro);
}

.box-bares-card-p {
    width: 100%;
    height: 110px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* border: 1px solid yellow */
}

.box-bares-card-p p {
    font-family: 'Open Sans';
    font-weight: 400;
    font-style: 15px;
    color: var(--preto-claro);
}


.container-mae-select{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contaner-select-pesquisa-categoria{
    width: 1221px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.contaner-select-pesquisa-categoria button{
    border: none;
    padding: 5px 33px 5px 33px;
    background-color:#14387F;
    color: white;
    font-family: 'Open Sans';
    font-weight: bold;
    border-radius: 3px;
    margin: 10px;
}

.select-categoria{
    width: 26%;
    height: 35px;
    border: 1px solid #E3E3E3;
    border-radius: 3px;
    margin: 10px;
    color: #14387f;
    padding-left: 20px;
}

@media (max-width: 1200px) {
    .box-bares-conteudo {
        width: 90%;
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;
        padding: 60px 0;
        position: relative;
        /* border: 2px solid red; */
    }

    .contaner-select-pesquisa-categoria {
        width: 91%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }
}
