@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap');

html, body {
    scroll-behavior: smooth;
}

.tabela-carrinho th:first-child * {
    text-align: center;
}

.conteudo-topo.span9:nth-child(2) > div.superior.row-fluid.hidden-phone:nth-child(1) > div.span4:nth-child(2) > ul.acoes-conta.borda-alpha > li:nth-child(1) > a.cor-secundaria:nth-child(2){
    color: #fff;
}

.conteudo-topo.span9:nth-child(2) > div.superior.row-fluid.hidden-phone:nth-child(1) > div.span4:nth-child(2) > ul.acoes-conta.borda-alpha > li:nth-child(2) > a.cor-secundaria:nth-child(2){
    color: #fff;
}

.conteudo-topo.span9:nth-child(2) > div.inferior.row-fluid:nth-child(2) > div.span4.hidden-phone:nth-child(2) > div.carrinho.vazio > a:nth-child(1) > span.titulo.cor-secundaria.vazio-text:nth-child(4){
    color: #fff;
}

.busca input {
    width: 96%;
    border-radius: 10px !important;
}

#rodape .redes-sociais {
   padding: 0px !important;
}

#rodape .institucional .lista-redes {
    text-align: left;
}

#rodape .titulo {
    color: #fff !important;
}

.btn-whatsapp {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 67px;
    right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-decoration: none !important;
    background-color: #25d366 !important;
    color: #FFF !important;
    font-size:24px;
    z-index: 1000;
    box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15) !important;
}

.btn-instagram {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-decoration: none !important;
    color: #FFF !important;
    background: #D6249F;
    background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%,#D6249F 60%,#285AEB 90%);
    font-size:24px;
    z-index: 1000;
    box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15) !important;
}

.btn-volta-topo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 125px;
    right: 10px;
    width: 50px;
    height: 50px;
    background-color: #72c9c0;
    color: #FFF !important;
    border-radius: 50%;
    text-decoration: none;
    z-index: 1000;
    box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15) !important;
}
.btn-volta-topo::after {
    /*content: "↑";*/
    font-size: 32px;
    font-weight: bold;
    color: #FFF !important;
    transition: margin-top 250ms;
}

.btn-volta-topo:hover::after {
    margin-top:-8px;
}

.conteudo-topo.span9:nth-child(2) > div.superior.row-fluid.hidden-phone:nth-child(1) > div.span8:nth-child(1) > a.bem-vindo.cor-secundaria
{
    color: #fff;
}


.menu.superior{
        background-color: #72c9c0;
}

.menu.superior .nivel-um>li>a>strong{
        color: #fff;
}

.conteiner-principal .conteiner {
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 0%) !important;
}

.listagem.com-caixa .listagem-item {
    border: 1px solid rgba(0,0,0,0.035) !important;
}

.borda-principal, .atributos ul li a:hover, .atributos ul li.active a, .tema-scuro .nav-tabs li.active a, .elastislide-carousel ul li.active a {
    border-color: #FFF;
}

#rodape .institucional {
    background: #72c9c0;
    background-position: top center;
    background-repeat: repeat;
}

.pagamento-selos {
    background: url('');
    background: #72c9c0;
}

#rodape .redes-sociais {
    background: url('');
    background: #72c9c0;
}

#rodape .institucional {
    background-image: hidden!important;
}

.lista-redes .icon-twitter {
    background-color: #598dca;
    border-radius: 10px;
    margin-right: 2px;
}

.lista-redes .icon-instagram {
    border-radius: 10px;
    margin-right: 2px;
}

.lista-redes ul li {
    float: left;
    border-left: 1px hidden #ddd;
}

@media screen and (min-width:769px){
    
    body {
        font-size: 14px !important;
    }
    
    .barra-inicial > .conteiner > .row-fluid > .canais-contato {
        display: none;
    }
    
    /*.logo a {
        font-family: 'Anonymous Pro' !important;
        color: #fff !important;
        text-align: center;
        font-weight: lighter!important;
        text-decoration: none !important;
        height: inherit !important;
    }*/
    
    .logo a {
        height: 160px;
    }
    
    .conteudo-topo .superior .span8 a>span{
        color: #FFF;
    }
    
    .barra-inicial {
       background-color: #72c9c0 !important;
    }
    
    .barra-inicial .canais-contato span, .barra-inicial .canais-contato a, .barra-inicial .canais-contato i {
        color: #FFF;
    }
    
    #cabecalho .conteiner {
        background: #72c9c0!important;
        
    }
    
    #cabecalho > .conteiner {
        max-width: 100vw;
    }
    
    /*#cabecalho .conteiner .row-fluid .span3 h1 {
        margin-top: 10% !important;
        margin-left: 10px !important;
    }*/
    
    /*#cabecalho .conteiner .row-fluid .span3 h2 {
        margin-top: 10% !important;
        margin-left: 10px !important;
        font-size: 38.5px !important;
    }*/
    
    /*.conteiner {
        max-width: 100% !important;
    }*/
    
    #corpo > .conteiner {
        max-width: 100vw;
    }
    
    .conteiner-principal .conteiner {
        padding: 10px 0px !important;
    }
    
    .inferior.row-fluid .span4.hidden-phone {
        padding-right: 10px;
    }
    
    .icon-chevron-down {
        display: none!important;
    }
    
    .icon-chevron-right {
        display: none!important;
    }
    
    .menu.superior{
        position: relative;
    }
    
    .menu.superior .nivel-um{
        display: block;
        margin: 0 auto;
        max-width: 1140px;
        padding: 0 0px;
        font-size: 0;
        text-align: center;
        position: relative;
    }
    
    .menu.superior .nivel-um>li{
        float: none;
        border: none;
        position: static;
        font-size: 14px;
        display: inline-block;
        text-align: left;
    }
    
    .menu.superior .nivel-um>li>a{
        font-size: 0;
        line-height: 1;
        white-space: normal;
        display: inline-block;
        position: relative;
    }
    
    .menu.superior .nivel-dois {
        z-index: 2000 !important;
        top: 35px;
    }
    
    .menu.superior .nivel-dois a:hover {
        color: #fff;
    }
    
    #cabecalho{
        width:100%;
        position:relative;
        padding:0;
    }
    
    .busca {
        border-radius: 15px !important;
        background-color:rgba(255,255,255,0.4) !important;
    }
    
    .busca .botao-busca {
       right: 2px !important;
       top: 2px !important;
       bottom: 2px !important;
       height: initial !important;
       border: 0px solid rgba(0,0,0,0.1) !important;
       border-radius: 15px !important;
       background-color: #72c9c0;
    }
    
    #auto-complete {
       box-shadow: 0 0 0 0;
       border: 0 none;
       outline: 0;
       height: 22px; 
       background: rgba(0, 0, 0, 0);
       border-radius: 15px !important;
    }
    
    #barraTopo {
        height: 55px;
    }
    
    #barraTopo > .conteiner{
        height: 55px;
        padding-top: 12px;
    }
    
    #barraTopo > div > div > div:nth-child(1) > h4 {
        text-align: right;
        margin-top: 2.5px;
    }
    
    #barraTopo > div > div > div:nth-child(1) > h4 > a {
        font-family: 'Anonymous Pro' !important;
        color: #72c9c0 !important;
        font-size: 30px;
        font-weight: 500 !important;
        text-decoration: none !important;
    }
    
    #barraTopo > div > div > div:nth-child(2) {
        display:none;
    }

    #barraTopo > div > div{
        height: 55px;
    }
    
    #barraTopo > div > div > div.span6 > div > div.busca.borda-alpha.span6 > form > input {
        border-radius: 15px !important;
        min-height: 25px;
    }
    
    #barraTopo > div > div > div.span6 > div > div.busca.borda-alpha.span6 > form > button {
       margin: 1px 0px 1px 1px;
       background-color: #fff;
       color: #72c9c0;
       background-image: none;

    }
    
    #barraTopo > div > div > div.span6 {
        width: 70%;
    }
    
    #barraTopo > div > div > div.span6 > div > div.span6.hidden-phone > div > a > i{
        margin: 1px 0px 1px 1px;
       background-color: #fff;
       color: #72c9c0;
    }
    
    #barraTopo > div > div > div.span6 > div > div.span6.hidden-phone > div{
        min-height: 32px;
    }
    
    #barraTopo > div > div > div.span6 > div > div.span6.hidden-phone > div > a > strong{
        font-size: 14px;
        line-height: 30px;
    }
    
    #barraTopo > div > div > div.span6 > div > div.span6.hidden-phone > div > a > span:nth-child(3) {
        padding: 3px 0 0;
    }
    
    #barraTopo .carrinho> a span {
        line-height: 24px;
    }
    
    .carrinho {
        border-width: 1px;
        border-color: rgba(0,0,0,0.12);
        border-radius: 15px !important;
        position: relative;
    }
    
    .carrinho>a i {
        border-radius: 15px !important;
        right: 2px !important;
        top: 2px !important;
        bottom: 2px !important;
        height: initial !important;
    }
    
    .produto .acoes-produto .comprar .qtde-adicionar-carrinho {
        margin-left: 12px;
    }
    
    #listagemProdutos > ul > li > div > ul > li > div > div.info-produto > a {
        font-weight: bold;
    }
    
    #corpo {
        margin: auto;
        width: 99%;
        padding: 10px;
    }
    
    .secao-banners > .conteiner {
        max-width: 100vw;
    }
    
    .menu .nivel-dois, .menu .nivel-tres, .menu.lateral .nivel-um>li>a {
        background-color: #72c9c0 !important;
    }
    
    .listagem .titulo-categoria:hover {
        text-decoration: none;
        padding-left: 15px;
        font-size: 18px;
        background: rgba(0,0,0,0.0);
    }
    
    .selos{
        margin-left: 10px!important;
    }
    
    #corpo > div > div.secao-principal.row-fluid.sem-coluna > div.coluna.span3 > div:nth-child(1) > ul > li > a > strong {
        font-size: 13px !important;
    }
    #rodape > div.institucional.fundo-secundario > div > div > div > div {
        padding-left: 1.5%;
    }
    
    .produto .conteiner-imagem img {
        width: 100% !important;
    }
    
    #rodape > .institucional > .conteiner {
        max-width: 100vw;
    }
    
    #rodape > .pagamento-selos > .conteiner {
        max-width: 100vw;
        padding-left: 1.5%;
    }
    
    #rodape > .pagamento-selos {
        padding-left: 0.5%;
    }
}


@media screen and (max-width: 768px) {
    
    .busca {
        background-color: #fff;
    }
    
    #cabecalho .conteiner {
        background: #72c9c0!important;
    }
    
    /*.conteiner .logo {
        margin: 0 0 2px !important;
    }*/
    
    /*#cabecalho .conteiner .row-fluid .span3 h2 {
        margin-top: 3.5% !important;
        font-size: 38.5px !important;
    }
    
    #cabecalho .conteiner .row-fluid .span3 h1 {
        margin-top: 3% !important;
    }*/
    
    
    /*.logo a {
        font-family: 'Anonymous Pro' !important;
        color: #fff !important;
        text-align: center;
        font-weight: lighter!important;
        text-decoration: none !important;
        height: inherit !important;
    }*/
    
    .logo a img {
        object-fit: cover;
        object-position: center;
        width: 180px;
        height: 100px;
    }
    
    #auto-complete {
            box-shadow: 0 0 0 0;
            border: 0 none;
            outline: 0;
            background: rgba(0, 0, 0, 0);
    }
        
    .busca .botao-busca {
            /*position: absolute;*/
            right: 0px;
            top: 0px;
            border-radius: 15px !important;
            background-color: #72c9c0;
    }

    .busca-mobile .atalho-menu {
        border-radius: 15px !important;
    }
    
    #cabecalho > div.conteiner > div > div.conteudo-topo.span9 > div.inferior.row-fluid > div.span8.busca-mobile > a {
        width: 13px;
        height: 28px;
    }
    
    .busca{
        background: rgba(0, 0, 0, 0)  !important;
    }
    
    .busca .borda-alpha {
        background: rgba(0, 0, 0, 0)  !important;
    }
    
    .conteudo-topo .busca-mobile {
        overflow: hidden;
        padding: 10px;
        background-color: #fff;
        border-radius: 25px !important;
        background-color:rgba(255,255,255,0.4) !important;
    }
    
    .atalhos-mobile{
        background-color: #72c9c0!important;
    }
    
    .menu.superior {
        border-radius:5% !important;
    }
    
    .menu.superior .nivel-um.active, .menu.superior .nivel-dois, .menu.lateral .nivel-um.active, .menu.lateral .nivel-dois {
        border-radius:5%;        
    }
    
    .menu .nivel-dois a {
        color: #fff !important;
    }
    
    #listagemProdutos > ul > li > div > ul > li > div > div.info-produto > a {
        font-size: 14px !important;
    }
    
    #rodape > div.institucional.fundo-secundario > div > div > div > div > div.span12.visible-phone > ul > li {
        line-height: 30px !important;
        font-size: 16px !important;
    }
    
    #rodape > div.institucional.fundo-secundario > div > div > div > div > div.span4.sobre-loja-rodape > p {
        font-size: 16px !important;
        margin-bottom: 30px !important;
    }
    
    .ordenar-listagem label {
      padding: 9px;         
    }
    
    #listagemProdutos > ul > li > ul > li > div > div.acoes-produto-responsiva.visible-phone {
        top: 48.7%;
    }
    
    #corpo > div > div.secao-principal.row-fluid.sem-coluna > div.cadastro.span9 > form > div.abas-conteudo.borda-alpha > div > div > div > div {
        margin-left: 43vw;
    }
    
    #rodape .institucional, #rodape .pagamento-selos {
        padding-bottom: 0px;
    }
    
    .selos {
        padding-top:35px;
    }
}

@media screen and (max-width: 914px) and (min-width: 769px) {
    #cabecalho > div.conteiner > div.row-fluid > div.conteudo-topo.span9 > div.inferior.row-fluid > div.span4.hidden-phone > div {
        top: 3.3px;
    }
}



