* {font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:1.3; box-sizing:border-box}
html {height:100%}
body {margin:0px; height:100%; background-color:#FFF}
h1 {font-size:32px !important; font-weight:700 !important; line-height:1.1 !important; color:#333 !important; margin:0px !important; padding:0px !important}
input, textarea, select {outline-color:#111}
input[type=text], input[type=email], input[type=password], textarea, select {border:1px #D4D4D4 solid; border-radius:6px; padding:15px 12px; width:100%; color:#111; margin-top:10px}
select {padding-right:15px; background:url('../img/icone-arrow-down.png') no-repeat calc(100% - 15px) center; background-size:11px; -webkit-appearance: none; -moz-appearance: none; appearance: none}
img {vertical-align:baseline !important}
input:disabled, input:read-only, select:disabled {background-color:#eee; color:#666}

:root {
    --gridPrincipal: 1240px;
    --gridSecundario: 780px;
    --topoInfoBg: #111;
    --topoInfoColor: #e2e2e2;
    --corLogoPrimaria: #DC0000;
    --corLogoSecundaria: #FCE302;
    --linkPadrao: #1878C0;
}

.grid-g {width:calc(100% - 28px); max-width:var(--gridPrincipal); margin:0px 14px}
.grid-m {width:calc(100% - 28px); max-width:var(--gridSecundario)}
.flex {display:flex; flex-wrap:wrap}
.linha {display:flex; width:100%; flex-wrap:wrap}
.centralizar {justify-content:center}
.centralizar-v {align-items:center}
.espalhar {justify-content:space-between}
.texto {font-size:14px; color:#6A6A6A; line-height:1.6}
.titulo {font-size:32px; font-weight:700; line-height:1.1; color:#333; margin:0px; padding:0px}
.bold {font-weight:700}
.invisivel {display:none !important}
.mouseHover:hover {opacity:0.7; cursor:pointer; transition:80ms}
.bordaErro {border:1px #dd0000 solid !important}
.msgErro {display:flex; flex-wrap:wrap; width:100%; padding:12px 20px; background-color:#ffdede; color:#f3616d; font-weight:600; border-radius:4px}
.msgErro span {display:block; width:100%; color:#333; font-weight:700; font-size:16px; padding-bottom:6px}
.msgSucesso {display:flex; flex-wrap:wrap; width:100%; padding:12px 20px; background-color:#d2ffe8; color:#4fbe87; font-weight:600; border-radius:4px}
.msgSucesso span {display:block; width:100%; color:#333; font-weight:700; font-size:16px; padding-bottom:6px}
.msgSucesso a {color:#4fbe87}

.col2, .col3 {width:100%; display:flex; flex-wrap:wrap; justify-content:space-between}
.col2 input, .col2 select {width:calc(50% - 5px)}
.col3 input, .col3 select {width:calc(33.33% - 6.66px)}

.marginTop10 {margin-top:10px !important}
.marginTop20 {margin-top:20px !important}
.marginTop30 {margin-top:30px !important}
.marginTop40 {margin-top:40px !important}
.marginTop50 {margin-top:50px !important}
.marginBottom20 {margin-bottom:20px !important}

#topo {display:flex; width:100%; flex-wrap:wrap; justify-content:center}
#topo .linhaInfo {padding:10px 0px; width:100%; background-color:var(--topoInfoBg); align-items:center}
#topo .linhaInfo div {color:var(--topoInfoColor); font-size:13px; display:flex; flex-wrap:wrap; align-items:center}
#topo .linhaInfo div i {color:var(--topoInfoColor); font-size:13px; margin-right:8px}
#topo .linhaInfo div i.fa-whatsapp {font-size:19px}
#topo .linhaInfo div a {margin:0px 4px}
#topo .linhaInfo div a i {font-size:25px}
#topo .linhaLogo {border-bottom:1px #E9E9E9 solid; padding:30px 0px; background-color:var(--corLogoPrimaria)}
#topo .linhaLogo img {width:100%; max-width:260px; height:auto}
#topo .linhaLogo .linkLogo {width:300px}
#topo .linhaLogo .busca {flex:1}
#topo .linhaLogo .busca input {height:45px; border:1px #DEDEDE solid; border-radius:6px 0px 0px 6px; font-size:15px; padding:0px 15px; margin:0px; width:calc(100% - 58px)}
#topo .linhaLogo .busca button {height:45px; width:58px; background-color:#000; border:0px; border-radius:0px 6px 6px 0px; margin-left:-4px}
#topo .linhaLogo .busca button i {color:#fff; font-size:18px}
#topo .linhaLogo .contBuscaUserCart {flex:1}
#topo .linhaLogo .usuarioCarrinho {display:flex; flex-wrap:wrap; align-items:center; width:130px; margin-left:50px}
#topo .linhaLogo .usuarioCarrinho .icone {width:24px; margin-right:15px; position:relative}
#topo .linhaLogo .usuarioCarrinho .icone i {color:#fff; font-size:28px}
#topo .linhaLogo .usuarioCarrinho span {display:block}
#topo .linhaLogo .usuarioCarrinho span.titulo {font-size:15px; font-weight:600; color:#fff}
#topo .linhaLogo .usuarioCarrinho span.subtitulo {font-size:13px; color:#fff}
#topo .linhaLogo .usuarioCarrinho a {text-decoration:none}
#topo .menuMobile {width:35px; display:none; align-items:center; justify-content: flex-end}
#topo .menuMobile i {font-size:28px; color:#111}
#topo .fa-cart-shopping {position:relative}
#topo #carrinhoMobile {position:absolute; width:20px; height:20px; border-radius:100%; background-color:var(--corLogoPrimaria); top:-10px; right:-12px; z-index:9; display:none; justify-content:center; align-items:center; font-size:13px; color:#fff}
#topo .linhaMenu {background-color:#fff; border-bottom:1px #E9E9E9 solid; padding:15px 0px; overflow:hidden}
#topo .linhaMenu .menu {min-width:1240px; position:relative}
#topo .linhaMenu i {font-size:28px}
#topo .linhaMenu a {font-size:15px; font-weight:600; margin:0px 20px; text-decoration:none; color:#222}
#topo .linhaMenu a:hover {color:var(--corLogoPrimaria)}
#topo .linhaMenu a.todas {margin-left:10px; display:flex; align-items:center}
#topo .linhaMenu a.todas i {margin-right:10px}
#topo .linhaMenu a.todas:hover i {color:var(--corLogoPrimaria)}

#dropCategorias {position:relative; display:none}
#dropCategorias .cont {position:absolute; top:0px; left:0px; display:flex; flex-wrap:wrap}
#dropCategorias .categorias {background-color:#fff; border-radius:6px; -webkit-box-shadow: 3px 3px 6px 2px rgba(0,0,0,0.18); box-shadow: 3px 3px 6px 2px rgba(0,0,0,0.18); width:300px; height:auto; z-index:9; padding:10px 0px}
#dropCategorias .subcategorias {display:none; background-color:#f7f7f7; border-radius:6px; -webkit-box-shadow: 3px 3px 6px 2px rgba(0,0,0,0.18); box-shadow: 3px 3px 6px 2px rgba(0,0,0,0.18); width:300px; height:auto; z-index:9; padding:10px 0px}
#dropCategorias .subcategorias .titulo {display:block; width:calc(100% - 40px); font-size:15px; color:#999; border-bottom:1px #ccc solid; padding:15px 0px; padding-top:10px; margin:0px 20px; font-weight:400; margin-bottom:5px}
#dropCategorias .categorias.active {border-radius:6px 0px 0px 6px}
#dropCategorias .categorias.active ~ .subcategorias {border-radius:0px 6px 6px 0px}
#dropCategorias a {display:block; width:100%; padding:10px 20px; text-decoration:none; font-weight:600; color:#222}
#dropCategorias a.temSub {background:url('../img/icone-arrow-right.png') no-repeat calc(100% - 20px) center; background-size:5px}
#dropCategorias a:hover {background-color:var(--corLogoPrimaria); color:#fff}

#subbanner .contBanners {width:calc(100% + 20px); min-width:1000px; margin-left:-10px; display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:30px}
#subbanner .contBanners a {width:calc(33.33% - 20px); margin:0px 10px}
#subbanner .contBanners a img {max-width:100%; height:auto; border-radius:4px}

#vantagens {margin-top:30px}
#vantagens .containerVant {background-color:#F5F5F5; border-radius:4px; padding:40px 0px; display:flex; flex-wrap:wrap}
#vantagens .containerVant .box {width:33.33%; padding:0px 0px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
#vantagens .containerVant .box .alinhar {width:60%; display:flex; flex-wrap:wrap; align-items:center}
#vantagens .containerVant .box .icone {width:45px; margin-right:20px}
#vantagens .containerVant .box .icone i {font-size:32px}
#vantagens .containerVant .box .info {width:45px; flex:1}
#vantagens .containerVant .box .info span.titulo {display:block; font-size:18px; font-weight:700}
#vantagens .containerVant .box .info span.texto {display:block; font-size:15px; color:#878787}

#produtos {margin-top:30px}
#produtos .listagemProd {display:flex; flex-wrap:wrap; width:calc(100% + 20px); margin-left:-10px; justify-content:flex-start; margin-top:10px}
#produtos .box.home {width:calc(20% - 20px); margin:10px; border:1px #E1E1E1 solid; border-radius:4px; padding:15px}
#produtos .box.produtos {width:calc(25% - 20px); margin:10px; border:1px #E1E1E1 solid; border-radius:4px; padding:15px}
#produtos .box a {text-decoration:none}
#produtos .box .img {width:100%; height:210px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center}
#produtos .box .img img {max-width:100%; max-height:100%}
#produtos .box .titulo {width:100%; font-size:14px; color:#333333; border-top:1px #E1E1E1 solid; padding-top:20px; height:60px; overflow:hidden; margin-top:20px; line-height:1.3}
#produtos .box .preco {width:100%; font-size:17px; color:var(--corLogoPrimaria); font-weight:700; margin-top:10px}
#produtos .box .preco span {font-size:16px; color:#D5D5D5; font-weight:600; margin-right:10px; text-decoration: line-through}
#produtos .bannerCategoria {width:100%; height:auto}
#produtos .bannerCategoria img {max-width:100%; max-height:100%; border-radius:6px}
#produtos .lateral {width:220px; margin-right:30px; margin-top:0px}
#produtos .lateral .bloco {width:100%; background-color:#F6F6F6; border-radius:4px; padding:20px; margin-top:20px}
#produtos .lateral .bloco .titulo {width:100%; font-size:14px; color:#222; font-weight:700; background:url('../img/icone-arrow-down.png') no-repeat center right; padding-right:20px; cursor:pointer; background-size:12px}
#produtos .lateral .bloco .titulo.active {background:url('../img/icone-arrow-up.png') no-repeat center right; background-size:12px}
#produtos .lateral .bloco .conteudo {margin-top:15px; display:none}
#produtos .lateral .bloco .conteudo.active {display:block}
#produtos .lateral .bloco .categoria {width:100%; font-size:14px; color:#111; text-decoration:none; margin:9px 0px; display:block}
#produtos .lateral .bloco .categoria:hover {text-decoration:underline}
#produtos .lateral .bloco .subcategoria {display:none}
#produtos .lateral .bloco .subcategoria.active {display:block !important}
#produtos .lateral .bloco .subcategoria a {text-decoration:none; font-size:14px; color:#888; display:block; margin:7px 10px}
#produtos .lateral .bloco .subcategoria a:hover {text-decoration:underline}
#produtos .lateral .bloco .subcategoria a:last-child {margin-bottom:10px}
#produtos .lateral .filtroPreco input {height:40px; margin-bottom:10px}
#produtos .lateral .filtroPreco button {height:40px; width:100%; background-color:#222; color:#fff; font-size:14px; border-radius:3px; border:0px; cursor:pointer}
#produtos .principal {width:calc(100% - 250px)}
#produtos .principal .cabecalho {margin-top:15px}
#produtos .principal .cabecalho div:first-child {width:calc(100% - 230px)}
#produtos .principal .cabecalho select {width:230px; height:45px; padding-top:0px; padding-bottom:0px}

#produto {margin-top:40px}
#produto .fotos {width:60%}
#produto .infos {width:40%; padding-left:35px}
#produto .infos .codigo {display:block; width:100%; color:#333333; font-size:14px; margin-top:10px}
#produto .infos .minidescricao {display:block; width:100%; color:#999999; font-size:14px; line-height:1.5; margin-top:20px}
#produto .infos .preco {display:block; width:100%; color:var(--corLogoPrimaria); font-size:29px; margin-top:20px; font-weight:700}
#produto .infos .preco .oldprice {display:block; width:100%; color:#D5D5D5; font-size:19px; font-weight:600; text-decoration: line-through}
#produto .infos .preco .texto {display:block; width:100%; color:#666666; font-size:14px; font-weight:400}
#produto .infos .btnAddCarrinho {display:block; width:100%; height:54px; background-color:var(--corLogoPrimaria); font-size:21px; font-weight:600; color:#fff; border:0px; border-radius:6px; margin-top:20px}
#produto .infos .indisponivel {display:block; width:100%; height:54px; background-color:#ccc; font-size:21px; font-weight:600; color:#fff; border:0px; border-radius:6px; margin-top:20px}
#produto .infos .frete {display:block; width:100%; padding:25px; background-color:#F2F2F2; border-radius:6px; margin-top:30px}
#produto .infos .frete .titulo {display:block; width:100%; font-size:15px; color:#222; font-weight:700}
#produto .infos .frete input {height:45px; width:70%; border-radius:6px 0px 0px 6px; margin-top:0px}
#produto .infos .frete button {height:45px; width:30%; background-color:#222; font-size:14px; font-weight:600; color:#fff; border:0px; border-radius:0px 6px 6px 0px}
#produto .infos .frete .resultado {display:block; width:100%}
#produto .infos .frete .resultado table {width:100%; margin-top:15px}
#produto .infos .frete .resultado table td {padding:4px 0px}
#produto .infos .frete .resultado table td:nth-child(2) {padding:4px 10px}
#produto .descricao {display:block; width:100%; margin-top:20px; font-size:15px; color:#666666; line-height:1.5}

#carrinho {margin-top:40px}
#carrinho .colTitulo {background-color:#EFEFEF; width:100%; padding:14px 30px; margin-top:30px; border-radius:6px}
#carrinho .colTitulo div {font-size:16px; color:#222222; font-weight:700}
#carrinho .colTitulo .produto {width:95px}
#carrinho .colTitulo .outros {width:calc(100% - 95px)}
#carrinho .colTitulo .outros div:nth-child(1) {width:45%}
#carrinho .colTitulo .outros div:nth-child(2) {width:14%}
#carrinho .colTitulo .outros div:nth-child(3) {width:21%}
#carrinho .colTitulo .outros div:nth-child(4) {width:14%}
#carrinho .colTitulo .outros div:nth-child(5) {width:6%}
#carrinho .box {width:100%; padding:30px 30px; border-top:1px #EBEBEB solid; align-items:center}
#carrinho .box:nth-child(1) {border-top:0px}
#carrinho .box .colImg {width:75px; margin-right:20px}
#carrinho .box .colImg img {max-width:100%; max-height:100%}
#carrinho .box .colInfos {width:calc(100% - 95px); align-items:center}
#carrinho .box .colInfos div {font-size:16px; color:#333}
#carrinho .box .colInfos .produto {width:45%}
#carrinho .box .colInfos .produto span {display:block; width:100%; font-size:13px; margin-top:4px; font-weight:400}
#carrinho .box .colInfos .produto span, b {font-size:13px}
#carrinho .box .colInfos .preco {width:14%}
#carrinho .box .colInfos .quantidade {width:21%}
#carrinho .box .colInfos .total {width:14%}
#carrinho .box .colInfos .remover {width:6%; text-align:right; cursor:pointer}
#carrinho .box .colInfos .remover i {font-size:23px; color:#999}
#carrinho .box .colInfos .remover a {display:none}
#carrinho .box .colInfos .contqtde {display:flex; width:100%; max-width:170px; padding-right:20px}
#carrinho .box .colInfos .contqtde button {width:25%; height:50px; border:1px #D8D8D8 solid; background-color:#fff; font-size:27px}
#carrinho .box .colInfos .contqtde button:hover {cursor:pointer; background-color:#eee}
#carrinho .box .colInfos .contqtde button:first-child {border-right:0px; border-radius:3px 0px 0px 3px}
#carrinho .box .colInfos .contqtde button:last-child {border-left:0px; border-radius:0px 3px 3px 0px}
#carrinho .box .colInfos .contqtde input {width:50%; height:50px; border:1px #D8D8D8 solid; font-size:16px; text-align:center; border-radius:0px; margin-top:0px}
#carrinho .subtotal {background-color:#EFEFEF; width:100%; padding:14px 30px; border-radius:6px}
#carrinho .subtotal span {font-size:18px; color:#222; font-weight:700}
#carrinho .contCepTotalFinalizar {justify-content:flex-end; margin-top:30px}
#carrinho .contCepTotalFinalizar .alinhar {width:100%; max-width:700px}
#carrinho .frete {border:1px #E1E1E1 solid; border-radius:6px; padding:30px 30px; padding-bottom:20px}
#carrinho .frete .titulo {display:block; width:100%; font-size:15px; color:#222; font-weight:700}
#carrinho .frete input {height:45px; width:70%; border-radius:6px 0px 0px 6px; margin-top:0px}
#carrinho .frete button {height:45px; width:30%; background-color:#222; font-size:14px; font-weight:600; color:#fff; border:0px; border-radius:0px 6px 6px 0px}
#carrinho .frete .resultado {display:block; width:100%}
#carrinho .frete .resultado table {width:100%; margin-top:15px}
#carrinho .frete .resultado table td {padding:6px 0px}
#carrinho .frete .resultado table td:nth-child(2) {padding:4px 10px}
#carrinho .linhaTotal {background-color:#EFEFEF; width:100%; padding:14px 30px; border-radius:6px; margin-top:20px}
#carrinho .linhaTotal span {font-size:21px; color:#222; font-weight:700}
#carrinho .botoes {margin-top:20px}
#carrinho .botoes button {height:55px; width:calc(50% - 10px); font-size:18px; font-weight:600; border-radius:4px}
#carrinho .botoes button.continuar {border:2px var(--corLogoPrimaria) solid; color:var(--corLogoPrimaria); background-color:transparent}
#carrinho .botoes button.finalizar {background-color:var(--corLogoPrimaria); color:#fff; border:0px}
#carrinho .carrinho-vazio {border:1px #ddd solid; margin-top:30px; padding:80px 20px}
#carrinho .carrinho-vazio span {display:block; width:100%; text-align:center; margin-bottom:20px}
#carrinho .carrinho-vazio button {height:55px; padding:0px 30px; font-size:18px; font-weight:600; border-radius:4px; border:2px var(--corLogoPrimaria) solid; color:var(--corLogoPrimaria); background-color:transparent}

#compra {width:100%; min-height:calc(100% - 160px); display:flex; flex-wrap:wrap}
#compra .laterais {width:calc(50% - (var(--gridPrincipal) / 2))}
#compra .laterais:last-child {background-color:#FAFAFA}
#compra .centro {display:flex; flex-wrap:wrap; width:100%; max-width:var(--gridPrincipal); min-height:100%}
#compra .centro .colunaPrincipal {width:55%; padding:40px 60px 40px 0px}
#compra .centro .colunaResumo {width:45%; padding:40px 0px 40px 40px; background-color:#FAFAFA; border-left:1px #E1E1E1 solid}
#compra .centro .colunaResumo .box {width:100%; display:flex; flex-wrap:wrap; align-items:center; border-bottom:1px #E1E1E1 solid; padding-bottom:20px; margin-bottom:20px}
#compra .centro .colunaResumo .box .img {width:80px; height:80px; background-color:#fff; border:1px #DBDBDB solid; border-radius:4px; display:flex; justify-content:center; align-items:center; padding:8px}
#compra .centro .colunaResumo .box .img img {max-width:100%; max-height:100%}
#compra .centro .colunaResumo .box .infos {width:calc(100% - 80px); padding-left:20px; align-items:center}
#compra .centro .colunaResumo .box .infos .preco {font-size:15px; color:#222; font-weight:700}
#compra .centro .colunaResumo .box .infos .titulo {font-size:15px; color:#222; font-weight:400; padding-right:20px; flex:2}
#compra .centro .colunaResumo .box .infos .titulo span {display:block; width:100%; font-size:13px; color:#999; font-weight:400; margin:5px 0px; flex:1}
#compra .centro .colunaResumo .subtotalFrete {margin-bottom:10px}
#compra .centro .colunaResumo .subtotalFrete span {font-size:14px}
#compra .centro .colunaResumo .subtotalFrete span:last-child {font-weight:700}
#compra .centro .colunaResumo .total {margin-top:20px; border-top:1px #E1E1E1 solid; padding-top:20px; align-items:center}
#compra .centro .colunaResumo .total span {font-size:14px}
#compra .centro .colunaResumo .total span:last-child {font-weight:700; font-size:20px}
#compra .centro .colunaPrincipal .txtCampo {display:block; width:100%; font-size:15px; color:#222; margin-bottom:8px}
#compra .centro .colunaPrincipal .txtCampo font {font-size:13px; color:#666}
#compra .centro .colunaPrincipal .txtCampo b {font-size:15px; color:#222}
#compra .btnProsseguir {height:52px; width:100%; max-width:200px; color:#fff; font-size:17px; font-weight:600; background-color:var(--corLogoPrimaria); border:0px; border-radius:6px; margin-top:20px}
#compra .btnProsseguir:disabled {background-color:#ccc; cursor:no-drop}
#compra .btnFinalizar {height:52px; width:100%; max-width:200px; color:#fff; font-size:17px; font-weight:600; background-color:#25b446; border:0px; border-radius:6px; margin-top:20px}
#compra .esqueciSenha {color:#333; text-decoration:underline}
#compra .subtitulo {font-size:18px; color:#222}
#compra .blocoInfo {width:100%; display:flex; flex-wrap:wrap; border:1px #D4D4D4 solid; padding:0px 15px; border-radius:6px}
#compra .blocoInfo .linha2col, .linha3col {width:100%; display:flex; flex-wrap:wrap; border-top:1px #dfdfdf solid; padding:16px 0px}
#compra .blocoInfo .linha2col:first-child {border-top:0px}
#compra .blocoInfo .linha3col:first-child {border-top:0px}
#compra .blocoInfo a.trocarInfo {text-decoration:none; color:var(--linkPadrao); font-weight:400}
#compra .blocoInfo a.trocarInfo:hover {text-decoration:underline}
#compra .blocoInfo .linha3col div:nth-child(1) {width:80px; color:#999} 
#compra .blocoInfo .linha3col div:nth-child(2) {flex:1; color:#222} 
#compra .blocoInfo .linha3col div:nth-child(3) {width:70px; text-align:right} 
#compra .blocoInfo .linha2col div:nth-child(1) {flex:1} 
#compra .blocoInfo .linha2col div:nth-child(2) {width:80px; text-align:right; font-weight:700} 
#compra .blocoInfo .customCheck i {font-size:21px; margin-right:10px}
#compra .blocoInfo .customCheck {display:flex !important; align-items:center}
#compra .blocoInfo .camposFormaPagamento {display:none}
#compra .confirmacao {width:100%; background-color:#f5f5f5; border-radius:6px; padding:40px 30px; margin-top:30px}
#compra .confirmacao .tituloConfirm {display:block; width:100%; font-size:23px; color:#25b446; font-weight:700; text-align:center}
#compra .confirmacao .tituloConfirm i {font-size:23px; color:#25b446; margin-right:10px}
#compra .confirmacao .numPedido {display:block; width:100%; font-size:15px; color:#333; margin-top:20px; text-align:center}
#compra .confirmacao .numPedido b {color:#111; font-size:29px}
#compra .confirmacao .textoPedido {display:block; width:100%; font-size:15px; color:#333; margin-top:20px; text-align:center; margin-bottom:20px}
#compra .confirmacao .textoPedido b {font-size:15px; color:#333}
#compra .confirmacao button {background-color:transparent; border:1px #999 solid; border-radius:6px; padding:12px 40px; font-size:14px; color:#454545; font-weight:600}
#compra .confirmacao button.boleto {background-color:transparent; border:2px #25b446 solid; border-radius:6px; padding:12px 40px; font-size:16px; color:#25b446; font-weight:700}
#compra .divCompraSegura span {display:block; width:100%; font-size:15px; font-weight:700; color:#25b446; margin-top:10px}
#compra .divCompraSegura img {max-width:100%; height:auto}

#conta h2 {margin:0px; padding:0px; font-size:24px; color:#222; font-weight:700; margin-bottom:20px; line-height:1.1}
#conta .subtitulo {display:block; width:100%; font-size:18px; color:#222}
#conta .btnProsseguir {width:100%; height:55px; background-color:var(--corLogoPrimaria); border:0px; border-radius:4px; font-size:16px; color:#fff; font-weight:600; margin-top:20px}
#conta .login {display:flex; flex-wrap:wrap; padding:0px 100px; margin-top:70px; margin-bottom:50px}
#conta .login .souCadastrado {width:calc(50% - 62px); margin:0px 30px; border:1px #E3E3E3 solid; border-radius:6px; padding:30px}
#conta .login .naoCadastrado {width:calc(50% - 62px); margin:0px 30px; border:1px #E3E3E3 solid; border-radius:6px; padding:30px}
#conta .login .naoCadastrado span, b {font-size:15px; line-height:1.1; color:#222}
#conta .login .naoCadastrado span {padding-top:15px; padding-bottom:10px}
#conta .login button {width:100%; height:50px; border:0px; border-radius:4px; font-size:17px; color:#fff; font-weight:600; margin-top:10px}
#conta .login button.btnLogin {background-color:#333}
#conta .login button.btnCadastrar {background-color:var(--corLogoPrimaria); margin-top:60px}
#conta .login a.esqueci {display:block; margin:15px 0px}
#conta .cadastro {margin-top:40px}
#conta .interno {margin-top:30px}
#conta .interno h2 {margin:0px; padding:0px; color:#222; line-height:1.1; font-size:28px; font-weight:700}
#conta .interno .lateral {width:350px; padding-right:50px}
#conta .interno .principal {width:calc(100% - 350px)}
#conta .interno .lateral .contLateral {width:100%; border:1px #ccc solid; border-radius:6px; padding:0px 25px}
#conta .interno .lateral .contLateral .ola {display:block; width:100%; font-size:15px; margin-top:20px}
#conta .interno .lateral .contLateral a {display:block; text-decoration:none; color:#333; font-size:17px; font-weight:700; margin:20px 0px; border-top:1px #ddd solid; padding-top:20px}
#conta .interno .lateral .contLateral a i {font-size:19px; margin-right:10px; width:20px; text-align:center}
#conta .interno .lateral .contLateral a.active, a.active i {color:var(--corLogoPrimaria)}
#conta .interno .principal {width:calc(100% - 350px)}
#conta .interno .principal .contTable {width:100%; margin-top:20px}
#conta .interno .principal .contTable table {width:100%; border-spacing:0; border-collapse:collapse}
#conta .interno .principal .contTable table tr {border-bottom:1px #ddd solid}
#conta .interno .principal .contTable table tr:hover {background-color:#f8f8f8; cursor:pointer}
#conta .interno .principal .contTable table tr:first-child {background-color:#eee; font-weight:700; border-bottom:0px}
#conta .interno .principal .contTable table tr:first-child td:first-child {border-radius:6px 0px 0px 6px}
#conta .interno .principal .contTable table tr:first-child td:last-child {border-radius:0px 6px 6px 0px}
#conta .interno .principal .contTable table td {padding:15px 10px}
#conta .interno .principal .centro .colunaResumo {width:100%; border:1px #ccc solid; border-radius:6px; padding:30px}
#conta .confirmacao {padding:30px 0px; padding-top:0px}
#conta .pedidoStatus .boxStatus {width:25%; display:flex; flex-wrap:wrap; justify-content:center; margin-top:30px}
#conta .pedidoStatus .boxStatus .circulo {width:70px; height:70px; border:4px #ccc solid; border-radius:50%; margin-bottom:20px; display:flex; justify-content:center; align-items:center}
#conta .pedidoStatus .boxStatus .circulo i {color:#ccc; font-size:23px}
#conta .pedidoStatus .boxStatus .circulo.active {border:4px #2DC258 solid} 
#conta .pedidoStatus .boxStatus .circulo.active i {color:#2DC258} 
#conta .pedidoStatus .boxStatus .status {color:#666; font-weight:700; text-align:center}
#conta .pedidoStatus .boxStatus .info {font-size:13px; color:#999; text-align:center}
#conta .redefinir-invalido {display:flex; flex-wrap:wrap; width:100%; border:1px #ccc solid; padding:30px; border-radius:4px}
#conta .redefinir-invalido span {display:block; width:100%; font-weight:700; font-size:16px; padding-bottom:6px}

#homeBannerMid {margin-top:40px}
#homeBannerMid img {max-width:100%; max-height:100%}

#homeCategorias {width:100%; height:380px; margin-top:50px; background-position:center center; background-repeat:no-repeat; background-size:cover}
#homeCategorias .contCats {height:100%; align-items:center}
#homeCategorias .item {display:flex; flex-wrap:wrap; justify-content:center}
#homeCategorias .item .img {width:120px; height:120px; background-color:#fff; border-radius:50%; padding:20px; display:flex; justify-content:center; align-items:center}
#homeCategorias .item .img img {max-width:100%; max-height:100%}
#homeCategorias h3 {width:100%; margin:0px; padding:0px; text-align:center; font-size:18px; font-weight:600; color:#fff; margin-top:20px}
#homeCategorias a {text-decoration:none}

#migalha {display:flex; flex-wrap:wrap; color:#333; font-size:15px; list-style-type: none; margin:0; padding:0; margin-bottom:3px}
#migalha span {color:#666; font-size:14px; margin-right:10px}
#migalha a {text-decoration:none}
#migalha .ativo {color:#999}

#sobre {margin-top:60px}
#sobre .colimagem {width:calc(100% + 20px); margin-left:-10px; display:flex; flex-wrap: wrap; margin-top:20px}
#sobre .colunas {width:calc(25% - 20px); margin:10px}
#sobre .colunas img {max-width:100%; height:auto; border-radius:6px; margin-bottom:20px}
#sobre .colunas img:last-child {max-width:100%; height:auto; border-radius:6px; margin-bottom:20px}

#perguntas {margin-top:60px}
#perguntas .contPerguntas {width:100%; margin-top:40px}
#perguntas .box {background-color:#fff; border-radius:4px; padding:25px 30px; margin-top:20px; border:1px #E5E5E5 solid; border-radius:6px}
#perguntas .pergunta {font-size:18px; font-weight:600; background:url('../img/icone-arrow-down.png') no-repeat center right; padding-right:20px; cursor:pointer}
#perguntas .active {background:url('../img/icone-arrow-up.png') no-repeat center right}
#perguntas .resposta {font-size:15px; color:#999999; line-height:1.5; margin-top:20px; display:none}

#contato {margin-top:60px}
#contato .colunas {width:50%; padding:0px 50px; margin-top:60px}
#contato label {display:block; width:100%; margin-top:5px}
#contato input[type=submit] {width:100%; height:51px; background-color:var(--corLogoPrimaria); color:#fff; font-size:14px; border-radius:3px; border:0px; margin-top:20px; font-weight:600}
#contato .infoendereco div {width:100%; font-size:14px; color:#111; margin-bottom:20px}
#contato .infoendereco i {margin-right:10px}
#contato iframe {border-radius:3px; margin-top:10px}
#contato .sucesso {width:100%; padding:20px; background-color:#4fbe87; border-radius:4px; text-align:center; color:#fff}

#newsletter {width:100%; display:flex; flex-wrap:wrap; background-color:#111; border-radius:4px; padding:30px 50px; margin-top:-105px; align-items:center}
#newsletter .texto {display:flex; width:40%; align-items:center; font-size:17px; color:#A2A2A2; font-weight:600; padding-right:30px}
#newsletter .texto i {font-size:36px; color:#A2A2A2; margin-right:20px}
#newsletter form {width:60%; display:flex; flex-wrap:wrap}
#newsletter form input {width:calc(100% - 130px); height:45px; border-radius:4px; background-color:#fff; font-size:15px; color:#666; border:0px; padding:0px 15px; margin-top:0px}
#newsletter form button {width:120px; height:45px; background-color:var(--corLogoPrimaria); color:#fff; font-size:15px; font-weight:600; border:0px; border-radius:4px; margin-left:10px}
#newsletter .sucesso {width:100%; padding:15px; text-align:center; border:1px #22C046 solid; border-radius:4px; color:#22C046}

#rodape {width:100%; margin-top:120px}
#rodape .principal {width:100%; display:flex; flex-wrap:wrap; justify-content:center; background-color:#F1F1F1; padding:50px 0px}
#rodape .titulo {color:#222; font-size:18px; font-weight:700}
#rodape .principal .info {width:35%}
#rodape .principal .info span {display:flex; align-items:center; align-content:center; width:100%; margin-top:20px; font-size:14px; color:#222; line-height:1.5}
#rodape .principal .info span:first-child {margin-top:0px}
#rodape .principal .info span i {margin-right:12px; font-size:18px; color:var(--corLogoPrimaria)}
#rodape .principal .paginas {width:30%; padding:0px 50px}
#rodape .principal .paginas a {display:block; margin-top:10px; text-decoration:none; color:#222222}
#rodape .principal .pagamento {width:35%}
#rodape .principal .pagamento .logos {width:100%; display:flex; flex-wrap:wrap; margin-top:10px; align-items:center}
#rodape .principal .pagamento .logos img {margin-top:10px}
#rodape .principal .pagamento .logos img:first-child {margin-right:40px}
#rodape .principal .pagamento .meios {width:100%; display:flex; flex-wrap:wrap; margin-top:30px}
#rodape .principal .pagamento .meios img {width:59px; height:35px; margin-right:10px; margin-top:10px}
#rodape .secundario {width:100%; display:flex; flex-wrap:wrap; justify-content:center; background-color:#E9E9E9; padding:12px 0px}
#rodape .secundario span {font-size:13px; color:#707070}
#rodape .secundario span a {font-size:13px; color:#707070; text-decoration:none; font-weight:600}
#rodape .secundario .redes {display:flex; flex-wrap:wrap;}
#rodape .secundario .redes a {display:flex; width:38px; height:38px; background-color:#111; border-radius:100%; justify-content:center; align-items:center; margin:0px 5px; text-decoration:none}
#rodape .secundario .redes a:hover {background-color:var(--corLogoPrimaria)}
#rodape .secundario .redes a i {color:#fff; font-size:18px}

#custCarousel .carousel-inner {border-radius:6px 0px 0px 0px}
/*#custCarousel .carousel-inner img {width:100%; height:100%}*/
#custCarousel .carousel-indicators {position: static; margin-top: 20px}
#custCarousel .carousel-indicators>li {width: 100px}
#custCarousel .carousel-indicators li img {display: block; opacity: 0.5}
#custCarousel .carousel-indicators li.active img { opacity: 1}
#custCarousel .carousel-indicators li:hover img {opacity: 0.75}
/*#custCarousel .carousel-item img {width: 100%}*/
#custCarousel .carousel-indicators.list-inline {margin-right:0px; margin-left:0px}

#bannerHome {width:100%}
#bannerHome img {max-width:100%; height:auto}
#bannerHome #custCarousel .carousel-inner {text-align:center}

#produto #custCarousel .carousel-inner {width:100%; height:500px; border:1px #E1E1E1 solid; border-radius:6px}
#produto #custCarousel .carousel-item {width:100%; height:100%; position:relative}
#produto #custCarousel .carousel-item img {max-width:95%; max-height:95%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}
#produto #custCarousel .list-inline-item {width:100%; max-width:100px; height:80px; border:1px #E1E1E1 solid; border-radius:6px; position:relative}
#produto #custCarousel .list-inline-item img {max-width:95%; max-height:95%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}
#produto #custCarousel .carousel-control-next, #produto #custCarousel .carousel-control-prev {height:500px}

#lgpd {position:fixed; width:100%; bottom:20px; z-index:9; display:flex; flex-wrap:wrap; justify-content:center; padding:0px 14px}
#lgpd div {width:100%; max-width:1160px; background-color:#fff; border-radius:6px; padding:30px; -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.3); box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.3); display:flex; flex-wrap:wrap; align-items:center}
#lgpd span {flex:1; color:#111; font-size:15px; font-weight:600; padding-right:30px}
#lgpd a {background-color:var(--corLogoSecundaria); color:#fff; font-size:13px; font-weight:700; width:160px; padding:15px 0px; text-align:center; border-radius:3px; text-decoration:none;}
#lgpd a:hover {opacity:0.7; cursor:pointer}

#pag404 {margin-top:60px}
#pag404 .texto {text-align:center}

#whatsFlutuante {position:fixed; bottom:20px; right:20px; width:60px; height:60px; background-color:#22C046; border-radius:100%; z-index:8; cursor:pointer; display:flex; justify-content:center; align-items:center}
#whatsFlutuante:hover {background-color:#1f973b}
#whatsFlutuante i {color:#fff; font-size:32px}

#menuMobile2 {position:fixed; z-index:9; top:0px; left:0px; width:100%; height:100%; background-color: rgba(0, 0, 0, 0.6); display:none}
#menuMobile1 {position:fixed; z-index:9; top:0px; left:-290px; width:290px; height:100%; background-color:#ffffff; box-sizing:border-box; overflow-y:auto; display:flex; flex-wrap: wrap; align-content: flex-start;}
#menuMobile1 .minhaConta {display:flex; flex-wrap:wrap; width:100%; background-color:var(--corLogoPrimaria); align-items:center; padding:20px; font-size:21px; font-weight:600}
#menuMobile1 .minhaConta i {font-size:21px; color:#fff; margin-right:10px}
#menuMobile1 .minhaConta a {color:#fff; text-decoration:none}
#menuMobile1 .contLinks {display:flex; flex-wrap:wrap; width:100%; padding:20px; padding-top:0px}
#menuMobile1 .contLinks a {width:100%; text-transform: uppercase; text-decoration: none; color:#222; font-size:17px; margin-top:30px}
#menuMobile1 .contLinks a.options {background:url('../img/icone-arrow-down.png') no-repeat right center; background-size:11px}
#menuMobile1 .contLinks .opDown {display:none; width:100%; padding-left:20px}
#menuMobile1 .contLinks .opDown a {display:block; font-size:16px; text-transform:none; margin-top:12px}
#menuMobile1 .contLinks .opDown a.temSub {background:url('../img/icone-arrow-down.png') no-repeat right center; background-size:10px}
#menuMobile1 .contLinks .opDown .sub {display:none; width:100%; padding-left:20px}
#menuMobile1 .contLinks .opDown .sub a {color:#999}

.customCheck {display: block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.customCheck input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.customCheck .checkmark {position: absolute;top: 0;left: 0;height: 20px;width: 20px;background-color: #eee}
.customCheck .checkmark.radio {border-radius:50%}
.customCheck:hover input ~ .checkmark {background-color: #ccc;}
.customCheck input:checked ~ .checkmark {background-color: #2196F3;}
.checkmark:after {content: "";position: absolute;display: none;}
.customCheck input:checked ~ .checkmark:after {display: block;}
.customCheck .checkmark:after {left: 6px;top: 2px;width: 5px;height: 10px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.customCheck .checkmark.radio:after {top: 6px !important;left: 6px !important;width: 5px !important;height: 5px !important;border-radius: 50%;background: white;}

@media screen and (max-width: 1400px) {
    #rodape .secundario {padding-right:80px}
}

@media screen and (max-width:1240px) {
    #compra .centro {padding:0px 14px}
}

@media screen and (max-width: 1240px) {
    #topo .linhaMenu {justify-content: flex-start;}
}

@media screen and (max-width: 1100px) {
    #produtos .box.home {width:calc(25% - 20px)}
    #produtos .box.produtos {width:calc(33.33% - 20px)}
    #conta .login {padding:0px 0px}
}

@media screen and (max-width: 1000px) {
    .autoscroll {overflow:auto}
    #vantagens .containerVant .box .alinhar {width:80%}
}

@media screen and (max-width: 900px) {
    #topo .linhaLogo {padding:20px 0px}
    #topo .linhaInfo {display:none}
    #topo .linhaLogo .linkLogo {width:100%; text-align:center}
    #topo .linhaLogo .contBuscaUserCart {margin-top:20px}
    #topo .linhaLogo .blocoConta {display:none}
    #topo .linhaLogo .blocoCarrinho {margin:0px; width:35px; margin-left:15px}
    #topo .linhaLogo .blocoCarrinho div:last-child {display:none}
    #topo .menuMobile {display:flex}
    #topo #carrinhoMobile {display:flex}
    #topo .linhaMenu {display:none}
    #newsletter {padding:20px 20px}
    #newsletter .texto {width:100%; font-size:15px; padding-right:0px}
    #newsletter form {width:100%; margin-top:20px}
    #newsletter form input {width:100%}
    #newsletter form button {width:100%; margin-top:10px; margin-left:0px}
    #rodape .secundario {padding:20px 0px}
    #rodape .secundario span {width:100%; order:2; text-align:center; margin-top:5px}
    #rodape .secundario .redes {width:100%; order:1; justify-content:center; margin-bottom:10px}
    #produtos .box.home {width:calc(33.33% - 20px)}
    #produtos .box.produtos {width:calc(50% - 20px)}
    #sobre .colunas {width:calc(50% - 20px)}
    #produto .fotos {width:100%}
    #produto .infos {width:100%; padding-left:0px; margin-top:20px}
    #produto #custCarousel .carousel-indicators {display:none}
    #produto #custCarousel .carousel-inner {height:300px}
    #carrinho .box .colInfos .produto {width:100%}
    #carrinho .box .colInfos .preco {width:100%; margin-top:10px}
    #carrinho .box .colInfos .quantidade {width:100%; margin-top:10px}
    #carrinho .box .colInfos .total {display:none}
    #carrinho .box .colInfos .remover {width:100%; margin-top:14px; text-align:left}
    #carrinho .box .colInfos .remover i {font-size:18px}
    #carrinho .box .colInfos .remover a {display:inline}
    #carrinho .colTitulo .outros {display:none}
    .col2 input, .col2 select {width:100%}
    .col3 input, .col3 select {width:100%}
    #conta .login {margin-top:30px; margin-bottom:20px}
    #conta .login .souCadastrado {width:100%; margin:0px 0px; padding:20px}
    #conta .login .naoCadastrado {width:100%; margin:0px 0px; padding:20px; margin-top:20px}
    #conta .login button.btnCadastrar {margin-top:20px}
    #conta .interno .lateral {display:none}
    #conta .interno .principal {width:100%}
    #conta .interno .principal .contTable table tr td.hidemobile {display:none}
}   

@media screen and (max-width: 800px) {
    #rodape .principal {padding:30px 0px}
    #rodape .principal .info {width:100%}
    #rodape .principal .paginas {width:100%; display:flex; align-items:center; flex-direction: column; margin-top:20px}
    #rodape .principal .pagamento {width:100%; display:flex; align-items:center; flex-direction: column; margin-top:20px}
    #rodape .principal .pagamento .logos {justify-content: center}
    #rodape .principal .pagamento .meios {justify-content: center}
    #rodape .principal .info span {justify-content: center;}
    #contato .colunas {width:100%; padding:0px; margin-top:60px}
    #produtos .lateral {display:none}
    #produtos .principal {width:100%}
    #produtos .principal .cabecalho div:first-child {width:100%}
    #produtos .principal .cabecalho select {width:100%; margin-top:10px}
    #compra .centro .colunaPrincipal {width:100%; padding:30px 0px}
    #compra .centro .colunaResumo {width:100%; padding:30px 0px; border-left:0px}
    #conta .pedidoStatus .boxStatus {width:50%}
}

@media screen and (max-width: 700px) {
    #produtos .box.home {width:calc(50% - 20px)}
    #produtos .box.produtos {width:calc(100% - 20px)}
}

@media screen and (max-width: 600px) {
    #lgpd span {min-width:100%; padding-right:0px}
    #lgpd a {width:100%; margin-top:20px}
    #produtos .box.home {width:calc(100% - 20px)}
    #sobre .colunas {width:calc(100% - 20px)}
    #carrinho .botoes button {width:100%; margin-bottom:10px}
}