/*@import url('https://fonts.googleapis.com/css?family=Outfit:300,400,700');*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700&display=swap');



/*********************************
CLASSES
*********************************/
.left { float:left !important }
.right { float:right !important }
.nofloat { float:none !important }
.clear { clear:both }
.hide { display:none }
.bold { font-weight:bold }
.italic { font-style:italic }
.upper { text-transform:uppercase }
.lower { text-transform:lowercase }
.underline { text-decoration:underline; }
.center { text-align:center }
.align-left { text-align:left !important } /* text-left  */
.align-right { text-align:right !important } /* text-right */
.align-justify { text-align:justify !important } /* text-left  */
.width-auto { width:auto !important }

a, input, button{
    text-decoration: none!important;
    -o-transition: color .3s linear, background .3s linear;
    -moz-transition: color .3s linear, background .3s linear;
    -webkit-transition: color .3s linear, background .3s linear;
    transition: color .3s linear, background .3s linear;
    color: #212121;
}

img{
    max-width: 100%;
}

.mg-bt-5{margin-bottom:5px!important;}
.mg-bt-10{margin-bottom:10px!important;}
.mg-bt-20{margin-bottom:20px!important;}
.mg-bt-30{margin-bottom:30px!important;}
.mg-bt-40{margin-bottom:40px!important;}
.mg-bt-50{margin-bottom:50px!important;}
.mg-bt-60{margin-bottom:60px!important;}
.mg-bt-80{margin-bottom:80px!important;}
.mg-bt-90{margin-bottom:90px!important;}
.mg-bt-100{margin-bottom:100px!important;}
.mg-tp-10{margin-top:10px!important;}
.mg-tp-15{margin-top:15px!important;}
.mg-tp-20{margin-top:20px!important;}
.mg-tp-30{margin-top:30px!important;}
.mg-tp-40{margin-top:40px!important;}
.mg-tp-50{margin-top:50px!important;}
.mg-tp-60{margin-top:60px!important;}
.mg-tp-70{margin-top:70px!important;}
.mg-tp-80{margin-top:80px!important;}
.mg-tp-90{margin-top:90px!important;}
.mg-tp-100{margin-top:100px!important;}

.pd-0{padding: 0px!important;}
.pd-5{padding: 5px!important;}
.pd-bt-10{padding-bottom:10px!important;}
.pd-bt-20{padding-bottom:20px!important;}
.pd-bt-30{padding-bottom:30px!important;}
.pd-bt-40{padding-bottom:40px!important;}
.pd-bt-50{padding-bottom:50px!important;}
.pd-bt-60{padding-bottom:60px!important;}
.pd-bt-70{padding-bottom:70px!important;}
.pd-bt-80{padding-bottom:80px!important;}
.pd-bt-100{padding-bottom:100px!important;}
.pd-tp-10{padding-top:10px!important;}
.pd-tp-20{padding-top:20px!important;}
.pd-tp-30{padding-top:30px!important;}
.pd-tp-40{padding-top:40px!important;}
.pd-tp-50{padding-top:50px!important;}
.pd-tp-60{padding-top:60px!important;}
.pd-tp-80{padding-top:80px!important;}
.pd-tp-90{padding-top:90px!important;}
.pd-tp-100{padding-top:100px!important;}

/*********************************
GERAL
*********************************/
html , body {
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: #212121;
    border-top: 2px solid #212121;
}

a , a:link {
    text-decoration: none;	
}

input , select , textarea {
    border: 1px #ccc solid;
    padding: 1px;
}

/*********************************
TOPO
*********************************/
#bem-vindo{
    float: left;
    text-align: left;
    font-weight: 300;
    font-size: 16px;
    margin-top: 5px;
}
#bem-vindo a{
     color: #212121;
}
.carrinho{
    background-image: url(../img/sacola.png);
    height: 32px;
    width: 36px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    color: #456b92!important;
    line-height: 30px;
}
#menutopo {
    float: right;
}
#menutopo ul {
    display: inline-block;
}
#menutopo li {
    display: inline;
    font-size: 16px;
    color: #212121;
    line-height: 40px;
    padding: 0 7px;
}
#menutopo ul li a{
    color: #212121;
}
#menutopo ul li a:hover{
    color: #000;
}
#menutopo img{
    margin-bottom: 5px;
    margin-right: 5px;
    margin-left: 5px;
}
#whats {
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
}

/*********************************
MENU PRINCIPAL
*********************************/
.menu-principal{
    background: #212121;
    float: left;
    height: 50px;
    width: 100%;
    margin-bottom: 70px;
}
.menu-principal .menu-list{
    list-style: none;
    float: left;
    height: 50px;
    width: 1170px;
    margin-left: -585px;
    left: 50%;
    position: relative;
}
.menu-principal .sub-menu{
    list-style: none;
}
.menu-principal a{
    color: #fff;
    line-height: 50px;
    font-size: 17px;
}
.menu-principal > .menu-list > li{
    float: left;
    position: relative;
}
.menu-principal > .menu-list > li > a {
    padding: 14px 10px 14px 10px;
    margin: 0 5px;
}
.menu-principal > .menu-list > li:hover a {
    color: #CCC;
    background: #000;
}
.menu-principal > .menu-list > li:hover > .sub-menu {
    display: block;
}
.menu-principal > .menu-list > li > .sub-menu {
    position: absolute;
    top: 50px;
    left: 5px;
    background: #000;
    min-width: 150px;
    z-index: 1000;
    display: none;
    padding-bottom: 1px;
}
.menu-principal > .menu-list > li > .sub-menu > li {
    display: inline-block;
    line-height: 40px;
}
.menu-principal > .menu-list > li > .sub-menu > li > a {
    font-size: 16px;
    padding: 10px 20px;
    line-height: 40px;
}
.menu-principal > .menu-list > li > .sub-menu > li > a {
    color: #FFF;
}
.menu-principal > .menu-list > li > .sub-menu > li > a:hover {
    color: #CCC;
}
.menu-principal:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

/*********************************
BUSCA
*********************************/
#fbusca {
    float: right;
    height: 50px;
}
#fbusca #txtBusca {
    float: left;
    padding: 0px 0px 0px 10px;
    height:50px;
    border:none;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    background-color: #000;
}
#fbusca #btnBusca {
    float: left;
    background: url('../img/ok.png') no-repeat;
    width: 19px;
    height: 24px;
    border: none;
    cursor: pointer;
    margin-left:-30px;
    margin-top: 15px;
}
::-webkit-input-placeholder{ color: #ccc; }
:-moz-placeholder{ color: #ccc; }
::-moz-placeholder{ color: #ccc; }
:-ms-input-placeholder{  color: #ccc; }

#fbuscaM {
    float: right;
    height: 50px;
    width:100%;
    margin: 15px 0;
}
#fbuscaM #txtBuscaM {
    float: left;
    padding: 0px 0px 0px 10px;
    height:50px;
    border:none;
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    background-color: #f2f2f2;
    width:100%;
}
#fbuscaM #btnBuscaM {
    float: left;
    background: url('../img/okM.png') no-repeat;
    width: 19px;
    height: 24px;
    border: none;
    cursor: pointer;
    margin-left:-30px;
    margin-top: 15px;
}
#txtBuscaM::-webkit-input-placeholder{ color: #212121; }
#txtBuscaM:-moz-placeholder{ color: #212121; }
#txtBuscaM::-moz-placeholder{ color: #212121; }
#txtBuscaM:-ms-input-placeholder{  color: #212121; }


#subBanner{
    float: left;
    width: 100%;
    border-top: 1px solid #212121;
    border-bottom: 1px solid #212121;
    margin: 20px 0 40px 0;
    padding: 20px 15px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}
#subBanner img{
    display: inline-block;
    margin-bottom: 7px;
}

/*********************************
PRODUTO
*********************************/
.produto-imagem{
    float: left;
    width: 100%;
    height: 190px;
    background-size: cover;
}

.produto-catalogo p.info {
    display: inline-block;
    width: 100%;
    min-height: 64px;
}

.produto-catalogo p.info a {
    display: inline-block;
    width: 100%; 
    font-size: 20px;
    text-align: left;
    height: 20px;
    color: #000;
    font-weight: 300;
    margin-top: 10px;
}

.produto-catalogo span.valor-old {
    text-decoration: line-through;
    color: #456b92;
    display: inline-block;
    width: 50%;
    font-size: 14px;
    line-height: 14px;
}

.produto-catalogo span.rs-pequeno, #produto-info span.rs-pequeno{
    font-weight: 600;
    color: #456b92;
    font-size: 16px;
}

.produto-catalogo span.valor {
    color: #456b92;
    display: inline;
    width: 50%;
    font-size: 20px;
    line-height: 18px;
    font-weight: 600;
}

img.imgPromo {
    position: absolute;
    right: 0;
    top: 0;
}

a.comprar{
    display: inline-block;
    width: 100%;
    color: #456b92;
    border: 2px solid #456b92!important;
    text-align: center;
    padding: 4px 10px;
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 80px;
    border-radius: 3px;
    text-transform: uppercase;
    font-size: 14px;
}

a.comprar:hover, a.comprar:focus{
    color: #FFF;
    background-color: #456b92;
} 

#produto-relacionado h5 {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #456b92;
    font-size:  22px;
    font-weight: 600;
    margin-bottom: 30px;
}

#produto-imagem{
    float: left;
    width: 100%;
    margin-top: 10px;
}

#produto-imagem .principal{
    display: inline-block;
    width: 100%;
    border: #fff 5px solid;
}

#troca2:hover{
    cursor: zoom-in!important;
}

#outras-imagens{
    float: left;
    width: 100%;
}

#outras-imagens .auxiliar {
    height: 140px;
    background-size: cover;
    margin-top:10px;
   border: #fff 5px solid;
   cursor: pointer;
}

#produto-imagem span {
    font-size: 10px;
    color: #555;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 3px;
}

#produto-imagem .border-none {
    border: none;
}

.breadcrumb{
    display: inline-block;
    width: 100%;
    background-color: #FFF;
    padding: 0;
}

.breadcrumb a{
    color: #456b92;
    font-weight: 400;
    font-size: 16px;
}

#titulo-detalhe-produto{
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
    font-size: 38px;
    font-weight: 700;
    color: #212121;
}

#produto-info .valor-old {
    display: inline-block;
    width: 100%;
    color: #456b92;
    font-size: 14px;
    text-decoration: line-through;
}

#produto-info .valor {
    display: inline-block;
    width: 100%;
    font-size: 20px;
    color: #456b92;
    font-weight: 600;
}

#produto-info #fcomprar {
    display: inline-block;
    width: 100%;
    margin-top: 30px;
}

#produto-info #fcomprar label {
    display: inline-block;
    width: 100%;
    font-size: 16px;
    color: #212121;
    font-weight: 300;
}

#produto-info #fcomprar select {
    font-size: 14px;
    width: 200px;
    height: 40px;
    line-height: 40px;
    border: 1px #212121 solid;
}

#fcomprar .btnComprar{
    display: inline-block;
    width: 100%;
    border: none;
    background-color: #456b92;
    color: #FFF;
    height: 40px;
    margin-top: 50px;
    font-weight: 400;
    font-size: 18px;
}

#fcomprar .btnComprar:hover, #fcomprar .btnComprar:focus{
    background-color: #1A237E;
    color: #FFF;
}

.voltar-pagina a{
    display: inline-block;
    color: #FFF;
    font-weight: 300;
    background-color: #212121;
    font-size: 16px;
    padding: 5px 20px;
    margin-bottom: 20px;
}

#comentario{
    display: inline-block;
    width: 90%;
    margin-left: 5%;
    padding-top: 30px;
}

#comentario input, #comentario textarea{
    display: inline-block;
    width: 100%;
    padding: 5px 10px;
    margin-top: 15px;
    border-color: #333;
}

#comentario ::-webkit-input-placeholder{ color: #333; }
#comentario :-moz-placeholder{ color: #333; }
#comentario ::-moz-placeholder{ color: #333; }
#comentario :-ms-input-placeholder{  color: #333; }

.enviarcomentario{
    display: inline-block;
    width: 100%!important;
    background-color: #FFF;
    border: 1px solid #212121;
    color: #212121;
    padding: 5px 10px;
    margin-top: 15px;
}

.enviarcomentario:focus, .enviarcomentario:hover{
    background-color: #212121;
    color: #FFF;
}

#avalicoes{
    display: inline-block;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
    font-size: 17px;
    line-height: 24px;
    font-weight: 400;
    /*border-bottom: 1px solid #212121;
    border-top: 1px solid #212121;*/
    text-align: center;
    margin-bottom: 50px;
}

#avalicoes h5{
    display: inline-block;
    width: 100%;
    font-size: 22px;
    font-weight: 600;
    color: #456b92;
}


/*********************************
PAGINACAO
*********************************/
.paginas{
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
}

.nPaginas, .nPaginas a {
    display: inline-block;
    padding: 2px 5px;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    background-color: #232323;
    margin: 0px 2px;
    border-radius: 3px;
}

.nPaginasB, .nPaginasB a, .nPaginasB a:link {
    display: inline-block;
    padding: 2px 5px;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    background-color: #212121;
    margin: 0px 2px;
    border-radius: 3px;
}

.espaco:first-child{margin-left:100px;}

.setas1 {
    display: inline-block;
    width: 93px;
    height: 14px;
}

.setas1 a, a:link, img{
    text-decoration: none;
    border: none;
}

.setas {
    display: inline-block;
    width: 70px;
    height: 14px;
    margin: 0px 5px;
    font-size: 14px;
}

.setas a, a:link, img{
    text-decoration: none;
    border: none;
}


/*********************************
RODAPE
*********************************/
#fundoRodape{
    float: left;
    width: 100%;
    background-color: #FFF;
    border-top: 5px solid #212121;
    color: #212121;
    font-weight: 400;
    padding: 30px 0;
    line-height: 22px;
}

#redes-sociais{
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
}

#redes-sociais img{
    display: inline-block;
    margin-right: 10px
}

#redes-sociais a:hover{
    opacity: 0.5;
}

#rodape ul{
    float:left;
}

#rodape ul li {
    display: inline-block;
    width: 100%;
    text-align: center;
}

#rodape ul li a{
    font-size:16px;
    color: #212121;
}

#rodape ul li a:hover {
    color: #000;
}

.pagamento img{
    display: inline-block;
    vertical-align: sub;
}

/*********************************
NEWSLETTER
*********************************/
#newsletter {
    display: inline-block;
    width: 100%;
}

#newsletter input{
    display: inline-block;
    width: 100%;
    border: 1px solid #212121;
    padding: 4px 5px;
    text-align: center;
    color: #212121;
    margin-top: 10px;
    font-size: 14px;
    font-style: italic;
    border-radius: 3px;
}
#newsletter ::-webkit-input-placeholder{ color: #212121; }
#newsletter :-moz-placeholder{ color: #212121; }
#newsletter ::-moz-placeholder{ color: #212121; }
#newsletter :-ms-input-placeholder{  color: #212121; }

.botao{
    cursor: pointer;
    float: left!important;
    width: 100%!important;
    border: 1px solid #212121;
    background-color: #212121;
    color: #FFF!important;
    font-style: normal!important;
    margin-top: 10px;
    font-size: 14px;
    padding: 3px 15px;
    border-radius: 3px;
}
.botao:hover{
    background-color: #000;
}

#lh{
   display: inline-block;
   width: 100%;
   text-align: left;
   color: #212121;
   font-size: 14px;
   margin-top: 30px;
}

/************* Páginas institucionais ***************/
h2.titulo {
    display: inline-block;
    width: 100%;
    font-size: 24px;
    margin-left: 20px;
    color: #456b92;
    font-weight: 600;
    margin-bottom: 30px;
    text-transform: uppercase;
    text-align: center;
}

div.texto {
    display: inline-block;
    width: 90%;
    margin-left: 5%;
    font-size: 18px;
    text-align: justify;
}

/*********************************
CONTATO
*********************************/
#fcentral{
    display: inline-block;
    width: 100%;
}

#fcentral label{
    isplay: inline-block;
    width: 100%;
    text-align:left;
    line-height:25px;
    color:#212121;
    font-size:14px;
    margin-right:10px;
}

#fcentral p{
    margin-bottom:15px;
    width: 100%;
}

#fcentral input{
    isplay: inline-block;
    border: 1px solid #212121;
    padding: 5px 10px;
}

#fcentral  select{
    isplay: inline-block;
    width: 100%;
    border: 1px solid  #212121!important;
    padding: 5px 10px;
}

#fcentral textarea{
    isplay: inline-block;
    width: 100%;
    border:#212121 1px solid;
    resize:none;
}

/***********Busca***********/
.descricao-topo-pagina{
    font-size: 18px;
    color: #456b92;
    font-weight: 400;
    margin-bottom: 30px;
}

#nenhum-produto{
    font-size: 24px;
    color: #212121;
    margin-top: 30px;
    margin-bottom: 100px;
}

/*********Login**********/
h3.tituloBox {
    display: inline-block;
    width: 100%;
    color: #456b92;
    text-align: left;
    font-size: 22px;
    font-weight: 400;
}

#flogin, #fprecadastro{
    display: inline-block;
    width: 100%;
}

#flogin input, #fprecadastro input{
    display: inline-block;
    width: 100%;
    border: 1px solid #212121;
    padding: 5px 10px;
}

#login label , #precadastro label {
    display: inline-block;
    width: 100%;
    font-size: 16px;
    color: #212121;
    margin-top: 10px;
}

.esqueci-senha-login{
    display: inline-block;
    width: 100%;
    font-size: 16px;
    text-decoration: underline;
    margin:10px 0;
    font-weight: 400;
}

#login .botaoContinuar, #fprecadastro .botaoContinuar{
    cursor: pointer;
    display: inline-block;
    width: 100%;
    background: #212121;
    color: #fff !important;
    margin-top: 20px;
    padding: 5px 10px;
    font-weight: 400;
}

#login .botaoContinuar:hover, #fprecadastro .botaoContinuar:hover{
    background: #000;
}

#fprecadastro input.fcep, #fcadastro .fcas-cpf{
    width: 50%;
    float: left;
}

/*********************************
CADASTRO
*********************************/
#titulo-cadastro{
    display: inline-block;
    width: 100%;
    text-align: left;
    font-size: 24px;
    color: #212121;
    font-weight: 600;
    margin-top: 20px;
    margin-left: 15px;
}

#fcadastro{
    display: inline-block;
    width: 100%;
}

#fcadastro input{
    display: inline-block;
    width: 100%;
    border: 1px solid #212121;
    padding: 5px 10px;
    border: 2px solid #212121;
    padding: 5px 10px;
    border-radius: 3px;
}

#fcadastro label {
    display: inline-block;
    width: 100%;
    font-size: 16px;
    color: #212121;
    margin-top: 10px;
    
}

#fcadastro select{
    display: inline-block;
    width: 100%;
    padding: 5px 10px;
    border:#212121 2px solid;
    border-radius: 3px;
}

.campo-dd{
    float: left;
    width: 15%!important;
    margin-right: 1%!important;
}

.campo-telefone{
    float: left;
    width: 84%!important;
}

span.dica {
    display: inline-block;
    width: 100%;
    font-style: italic;
    font-size: 14px;
}

#fcadastro .botaoCadastrar{
    display: inline-block;
    width: 100%;
    background-color: #212121;
    cursor: pointer;
    color: #fff;
}

.altera-senha{
    display: inline-block;
    width: 100%;
    font-weight: 400;
    color: #456b92;
}

/*********Carrinho***************/
#linha1-carrinho{
    display: inline-block;
    width: 100%;
    font-weight: 400;
    margin-top:30px;
    font-size: 14px;
    background: #212121;
    color: #FFF;
    padding: 5px 0;
}

.linha-carrinho{
    border-bottom: 1px solid #212121;
    padding: 10px 0;
}

.select-carrinho{
    width: 50px;
    border: #212121 1px solid;
    padding: 5px;
}

#procurarCep {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    color:#212121;
    text-decoration: underline;
    font-weight: 300;
    margin-top: 10px;
}	

#cepDestino {
    padding: 3px 1px;
    width: 100%;
    border: 1px solid #212121;
}

.botao-comprar{
    display: inline-block;
    width: 100%;
    background-color: #456b92;
    cursor: pointer;
    color: #fff;
    margin-top: 50px;
    padding: 10px 10px;
    text-align: center;
    font-weight: 300;
    border: none;
    border-radius: 3px;
}

.botao-comprar:focus, .botao-comprar:hover{
    background-color: #000;
    color: #fff;
}

#opcoesFrete2{
    display: inline-block;
    width: 100%;
    font-size:14px;
    margin-top: 20px;
}

.detalhes-meus-pedidos{
    padding: 5px 10px;
    background-color: #212121;
    color: #fff;
}

.detalhes-meus-pedidos:focus, .detalhes-meus-pedidos:hover{
    background-color: #000;
     color: #fff;
}

.botaoPedido{
    display: inline-block;
    width: 100%;
    background: #212121;
    color: #FFF;
    padding: 5px 10px;
    text-align: center;
}

.botaoPedido:focus, .botaoPedido:hover{
    background-color: #000;
     color: #fff;
}

.msgErro {
    color: red;
    float: right;
    display: inline-block
}

p.opcoesFrete {
    display: inline-block;
    font-size: 16px;
    color: #212121;
    margin-top: 10px;
    font-weight: 600;
}

@media(max-width:768px){
    #subBanner .col-xs-12{
        margin: 10px 0;
    }
    .produto-imagem {
        height: 240px;
    }
    #rodape{
        font-size: 14px;
        text-align: center;
    }
    .pagamento, #newsletter{
        margin-top: 20px;
    }
    .campo-dd {
        width: 20% !important;
    }
    .campo-telefone{
        width: 50% !important;
    }
    #fcomprar .btnComprar{
        width: 100%;
    }
    .breadcrumb{
        display: none;
    }
    #titulo-detalhe-produto{
        margin-top: 30px;
    }
    #produto-relacionado .produto-imagem {
        height: 100px;
    }
    .produto-catalogo p.info a{
        font-size: 18px;
    }
    #outras-imagens .auxiliar{
        height: 90px;
    }
    .valor-xs{
        display: inline-block;
        width: 100%;
        font-size: 14px;
        font-weight: 300;
    }
    .linha-carrinho{
        margin-top: 10px;
    }
    .botao-comprar {
        margin-top: 20px;
    }
}

@media(max-width:992px){
    body{
        padding-top: 70px;
    }
    #rodape{
        font-size: 14px;
    }
}

@media (min-width:992px) and (max-width:1200px) {
    .menu-principal .menu-list{
        width: 100%;
        margin: 0;
        left: 0;
    }
    .menu-principal > .menu-list > li > a {
        padding: 14px 5px 14px 5px;
    }
}