@charset "utf-8";

.desktop { display: block;}
.mobile { display: none;}

.titulo { float: left; width: 100%;}
.titulo h1 { float: left; width: 98%; margin: 0 1%; font-size: 1.5em; color: rgb(90 90 90);}
.titulo h2 { float: left; width: 99%; margin: 0 0.5%; font-size: 1.5em; color: rgb(90 90 90); line-height: 1.1;}
.titulo h3 { float: left; width: 100%; margin: 10px 0 0; text-align: center; font-size: 1.5em; color: rgb(90 90 90);}
.titulo h4 { float: left; width: 100%; font-size: 1.5em; color: rgb(90 90 90);}
.titulo h4 b { padding: 0 0 0 15px; border-left: 5px solid;}
.titulo h5 { float: left; width: 100%; font-weight: bold; font-size: 1.5em;}
.titulo h6 { float: left; width: 100%; font-size: 1.1em; color: rgb(90 90 90);}

.banners { float: left; width: 100%; position: relative;}
.banners .fundo { float: left; width: 100%;}
.banners .slides { float: left; width: 100%; position: relative; z-index: 1;}
.banners .slides, .slides > li, .flex-control-nav { float: left; margin: 0; padding: 0; list-style: none;}
.banners .slides > li { display: none;}
.banners .slides > li .img { float: left; width: 100%;}
.banners .flex-control-nav { display: none;}
.banners .flex-direction-nav { margin: 0; padding: 0; list-style: none;}
.banners .flex-direction-nav a { position: absolute; width: 40px; height: 100%; top: 0; z-index: 5; background-repeat: no-repeat; background-position: 50%; opacity: 0; outline: 0; display: block; cursor: pointer; font-size: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.banners .flex-direction-nav a.flex-prev { left: 0; background-image:url('../../imagens/site/seta-a.png');}
.banners .flex-direction-nav a.flex-next { right: 0; background-image:url('../../imagens/site/seta-b.png');}
.banners:hover .flex-direction-nav a.flex-prev { left: 25px; opacity: 1;}
.banners:hover .flex-direction-nav a.flex-next { right: 25px; opacity: 1;}

.publicidades { float: left; width: 84%; margin: 0 8%;}
.publicidades .grande { float: left; width: 96%; margin: 10px 2%;}
.publicidades .grande .img { float: left; width: 100%;}
.publicidades .pequeno { float: left; width: 46%; margin: 10px 2%;}
.publicidades .pequeno .img { float: left; width: 100%;}

.carousel { display: none; float: left; width: 80%; padding: 20px 10% 0; position: relative;}
.carousel .owl { float: left; width: 100%; position: relative;}
.carousel .owl-carousel { float: left; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; display: none; }
.carousel .owl-carousel.owl-loaded { display: block;}
.carousel .owl-carousel.owl-loading { opacity: 0; display: block;}
.carousel .owl-stage-outer { position: relative; padding: 5px 0; overflow: hidden;}
.carousel .owl-stage-outer .owl-item { float: left; position: relative; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;}
.carousel .owl-nav { position: absolute; width: 100%; top: 50%; left: 0; margin: -15px 0 0 0;}
.carousel .owl-nav button { position: absolute; width: 30px; height: 30px; top: 0; opacity: 0.8; background-position: 50%; background-repeat: no-repeat; background-color: transparent; cursor: pointer; outline: 0; border: 0; font-size: 0;}
.carousel .owl-nav button.owl-prev { left: -40px; background-image: url('../../imagens/site/seta-a.png');}
.carousel .owl-nav button.owl-next { right: -40px; background-image: url('../../imagens/site/seta-b.png');}
.carousel .owl-nav button:hover { opacity: 1;}
.carousel .owl-nav button:hover { opacity: 0.3; cursor: default;}
.carousel .owl-nav.disabled button:hover { opacity: 0.3;}
.carousel .owl-dots { display: none;}
.carousel .no-js .owl-carousel { display: block;}

.produtos { float: left; width: 100%;}
.produtos .tab { float: left; width: 96%; margin: 0 2%; position: relative;}
.produtos .tab .imagem { float: left; width: 100%; height: 370px; position: relative; overflow: hidden; font-size: 0;}
.produtos .tab .imagem img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;}
.produtos .tab .nome { float: left; width: 100%; height: 44px; margin: 10px 0 0;}
.produtos .tab .nome h2 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1em; line-height: 1.2; overflow: hidden;}
.produtos .tab .nome h3 { float: left; width: 100%; text-align: center; font-size: 0.9em; opacity: 0.8;}
.produtos .tab .valores { float: left; width: 100%; margin: 10px 0;}
.produtos .tab .valores h2 { float: left; width: 100%; text-align: center; font-size: 1em;}
.produtos .tab .valores h2 em { margin: 0 8px 0 0; font-style: normal; text-decoration: line-through; opacity: 8;}
.produtos .tab .valores h3 { float: left; width: 100%; text-align: center; font-size: 1em; opacity: 8;}
.produtos .tab .desconto { position: absolute; top: 10px; right: 10px; padding: 3px 5px; background-color: rgb(250 250 250); outline: 1px solid rgb(90 90 90 / 20%); color: rgb(90 90 90);}
.produtos .tab.vermelho { margin-top: 5px; outline: 5px solid rgb(179 43 43); background-color: rgb(179 43 43); color: rgb(255 255 255);}

.lojas { float: left; width: 100%;}
.lojas .tab { float: left; width: 86%; padding: 20px 5%; margin: 0 2%; background-color: rgb(250, 250, 250); outline: 1px solid rgb(0 0 0 / 15%); position: relative; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}
.lojas .tab .imagem { float: left; width: 80%; height: 100px; margin: 0 10%; position: relative; overflow: hidden; font-size: 0;}
.lojas .tab .imagem img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: scale-down;}
.lojas .tab .nome { float: left; width: 100%; margin: 15px 0 0;}
.lojas .tab .nome h2 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1em; color: rgb(90 90 90);}
.lojas .tab .botao { position: absolute; width: 100px; bottom: -60px; left: 50%; padding: 16px 0 14px; margin: 0 0 0 -50px; background-color: rgb(25 141 77); text-transform: uppercase; text-align: center; font-weight: bold; color: rgb(255 255 255); line-height: 0;}
.lojas .tab:hover { -webkit-box-shadow: 0 3px 10px 0 rgb(0 0 0 / 15%); -moz-box-shadow: 0 3px 10px 0 rgb(0 0 0 / 15%); box-shadow: 0 3px 10px 0 rgb(0 0 0 / 15%);}
.lojas .tab:hover .botao { bottom: -15px;}

.preenchimento { float: left; width: 100%;}
.preenchimento .c1 { float: left; width: 94%; margin: 0 0 0 3%; position: relative;}
.preenchimento .c2 { float: left; width: 45.3%; margin: 0 0 0 3%; position: relative;}
.preenchimento .c3 { float: left; width: 29.3%; margin: 0 0 0 3%; position: relative;}
.preenchimento .c100 { float: left; width: 100%; margin: 20px 0 0; text-align: center; position: relative;}
.preenchimento .instrucao { float: left; width: 100%; margin: 5px 0 0; opacity: 0.7;}
.preenchimento .informativo { float: left; width: 94%; margin: 0 3%; text-align: center;}
.preenchimento .utilidade { position: absolute; bottom: -28px; right: 0; opacity: 0.7;}
.preenchimento .utilidade b { font-weight: normal;}
.preenchimento .utilidade b:hover { color: rgb(55 171 200);}
.preenchimento .utilidade em { font-style: normal;}
.preenchimento .nomecampo { float: left; width: 100%; margin: 20px 0 0; font-size: 1.2em;}
.preenchimento .nomecampo em { font-style: normal; color: rgb(180 100 100); font-size: 0.8em;}
.preenchimento .nomecampo.center { text-align: center;}
.preenchimento .campo { float: left; width: 97.5%; height: 50px; padding: 0 1%; outline: 1px solid rgb(90 90 90 / 60%);}
.preenchimento .campo.nascimento { width: 30%; padding: 0; text-align: center;}
.preenchimento .campo.nascimento.mes { margin: 0 0 0 4.3%;}
.preenchimento .campo.nascimento.ano { float: right;}
.preenchimento .campo.cartao.mes { width: 100px;}
.preenchimento .campo.cartao.ano { width: 100px; margin: 0 0 0 10px;}
.preenchimento .campo.cartao.cvv { width: 100px;}
.preenchimento .escolha { float: left; width: 97.5%; height: 50px; padding: 0 1%; outline: 1px solid rgb(90 90 90 / 60%);}
.preenchimento .textarea { float: left; width: 97.5%; height: 130px; padding: 10px 1%; outline: 1px solid rgb(90 90 90 / 60%);}
.preenchimento .explicacao { float: left; width: 100%; margin: 5px 0 0; text-align: right; color: rgb(150 150 150);}
.preenchimento .length { position: absolute; bottom: 13px; right: -22px; font-size: 0.9em;}
.preenchimento .senha { position: absolute; width: 30px; height: 30px; right: 8px; bottom: 10px; z-index: 1; background-position: 50%; background-repeat: no-repeat;}
.preenchimento .senha.mostrar { background-image: url('../../imagens/geral/senha-mostrar.png?');}
.preenchimento .senha.ocultar { background-image: url('../../imagens/geral/senha-ocultar.png?');}
.preenchimento .submit { padding: 20px 70px 18px; margin: 20px 0; background-color: rgb(25 141 77); text-transform: uppercase; font-weight: bold; font-size: 1.4em; color: rgb(255 255 255);}
.preenchimento .submit:hover { background-color: rgb(19 128 47);}
.preenchimento .campo:focus { -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); -moz-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);}
.preenchimento .escolha:focus { -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); -moz-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);}
.preenchimento .readonly:focus { -webkit-box-shadow: 0 0 0 0 rgb(0 0 0 / 0); -moz-box-shadow: 0 0 0 0 rgb(0 0 0 / 0); box-shadow: 0 0 0 0 rgb(0 0 0 / 0);}

.pontinhos { float: left; width: 93%; height: 1px; margin: 30px 3%; border-bottom: 2px dotted rgb(90 90 90 / 50%);}

.tabela { float: left; width: 100%; padding: 0 0 5px; margin: 0 0 15px; overflow: auto; color: rgb(90 90 90);}
.tabela h2 { float: left; width: 96%; padding: 7px 2% 5px; margin: 20px 0 5px; background-color: rgb(143 191 203 / 58%); text-transform: uppercase; font-weight: bold; font-size: 1.1em; color: rgb(0 0 0 / 55%); overflow: hidden; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px;}
.tabela h3 { float: left; width: 96%; padding: 7px 2% 5px; margin: 0 0 5px; background-color: rgb(143 191 203 / 58%); text-transform: uppercase; font-weight: bold; font-size: 1.1em; color: rgb(0 0 0 / 55%); overflow: hidden; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px;}
.tabela table { width: 100%; border-collapse: collapse;}
.tabela table tr td { padding: 5px 10px;}
.tabela table tr td a { color: rgb(0 135 190);}
.tabela table tr td a:hover { text-decoration: underline;}

@media only screen and (max-width: 1000px){
  .banners .flex-direction-nav a.flex-prev { left: 25px; opacity: 1;}
  .banners .flex-direction-nav a.flex-next { right: 25px; opacity: 1;}

  .carousel { width: 100%; padding: 20px 50px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}  
}
@media only screen and (max-width: 800px){
  .banners.desktop { display: none;}
  .banners.mobile { display: block;}

  .produtos .tab .imagem { height: 275px;}
}
@media only screen and (max-width: 600px){
  .preenchimento .c1 { width: 100%; margin: 0;}
  .preenchimento .c2 { width: 100%; margin: 0;}
  .preenchimento .c3 { width: 100%; margin: 0;}
  .preenchimento .submit { padding: 20px 20px 18px;}

  .carousel { width: 100%; padding: 20px 2% 0;}
  .carousel .owl-nav button.owl-prev { left: -40px; display: none;}
  .carousel .owl-nav button.owl-next { right: -40px; display: none;}

  .produtos .tab .imagem { height: 220px;}
}
@media only screen and (max-width: 500px){
  .banners .flex-direction-nav a.flex-prev { display: none;}
  .banners .flex-direction-nav a.flex-next { display: none;}

  .produtos .tab .valores h2 { font-size: 0.9em;}
  .produtos .tab .valores h3 { font-size: 0.9em;}
}
@media only screen and (max-width: 400px){
  .produtos .tab .imagem { height: 175px;}
  .produtos .tab .nome h2 { font-size: 0.9em;}
}