@charset "utf-8";

#paginas { float: left; width: 100%; min-height: 400px;}

#espacamento { float: left; width: 100%; height: 136.5px;}

#titulo { float: left; width: 100%;}
#titulo h1 { float: left; width: 100%; padding: 10px 0 7px; background-color: rgb(0 0 0 / 10%); text-transform: uppercase; font-weight: bold; text-align: center; font-size: 1.5em; color: rgb(90 90 90);}

#texto { float: left; width: 100%;}
#texto h2 { float: left; width: 100%; text-align: center; font-size: 1.2em; color: rgb(90 90 90);}

#problema { float: left; width: 100%; margin: 30px 0;}
#problema h2 { float: left; width: 100%; text-align: center; font-size: 1.3em; color: rgb(90 90 90);}

#mapa { float: left; width: 90%; padding: 12px 5% 10px; font-style: italic; color: rgb(90 90 90);}
#mapa b { float: left; font-weight: normal;}
#mapa em { float: left; margin: 0 10px;}
#mapa a { float: left; color: rgb(131 103 0);}
#mapa a:hover { color: rgb(0 135 190);}

#destaques { float: left; width: 90%; padding: 40px 5% 50px;}
#destaques .tab { float: left; width: 25%;}
#destaques .tab .nome { float: left; padding: 12px 0 11px 55px; background-position: 0 50%; background-repeat: no-repeat; font-size: 1em;}
#destaques .tab .nome strong { font-weight: normal; font-size: 0.9em; color: rgb(90 90 90);}
#destaques .tab .nome.seguro { background-image: url('../../imagens/site/destaques-seguro.png');}
#destaques .tab .nome.pix { background-image: url('../../imagens/site/destaques-pix.png');}
#destaques .tab .nome.entrega { background-image: url('../../imagens/site/destaques-entrega.png');}
#destaques .tab .nome.gratis { background-image: url('../../imagens/site/destaques-gratis.png');}

#categorias { position: absolute; width: 100%; top: 137px; left: 0; z-index: 50;}
#categorias .fundo { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(0 0 0 / 80%); z-index: 1;}
#categorias .conteudo { float: left; width: 90%; padding: 10px 5% 15px; background-color: rgb(255 255 255); position: relative; z-index: 2;}
#categorias .coluna { float: left; width: 18%; margin: 0 1%;}
#categorias .tab { float: left; width: 100%; padding: 10px 0; border-bottom: 1px solid rgb(0 0 0 / 10%);}
#categorias .departamento { float: left; width: 100%; padding: 8px 0; font-weight: bold; font-size: 1.1em;}
#categorias .departamento.ativo { color: rgb(179 43 43);}
#categorias .departamento:hover { color: rgb(179 43 43);}
#categorias .categoria { float: left; width: 100%; padding: 8px 0; color: rgb(90 90 90);}
#categorias .categoria.ativo { color: rgb(179 43 43);}
#categorias .categoria:hover { color: rgb(179 43 43);}
#categorias .x { position: absolute; width: 30px; padding: 15px 0 ; top: 10px; right: 10px; background-color: rgb(179 43 43); text-align: center; font-weight: bold; color: rgb(255 255 255); line-height: 0; z-index: 3;}
#categorias .x:hover { background-color: rgb(90 90 90);}

#departamentos { float: left; width: 100%;}
#departamentos .bloco { float: left; width: 100%;}

#mapasite { float: left; width: 100%; margin: 20px 0 0; position: relative;}
#mapasite .logo { position: absolute; width: 50px; height: 50px; top: -35px; left: 50%; padding: 10px; margin: 0 0 0 -45px; outline: 10px solid rgb(179 43 43); background-color: rgb(255 255 255);}
#mapasite .logo img { position: absolute; max-width: 100%; top: 50%; left: 50%; overflow: hidden; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}

#mapasite .pags { float: left; width: 90%; padding: 60px 5% 20px; background-color: rgb(179 43 43);}
#mapasite .pags .lado { float: left; width: 50%;}
#mapasite .pags .tab { float: left; width: 33.3%; text-align: center;}
#mapasite .pags .tab h2 { float: left; width: 100%; margin: 0 0 10px; font-weight: bold; font-size: 1.2em; color: rgb(255 255 255);}
#mapasite .pags .tab a { float: left; width: 100%; padding: 3px 0; font-size: 1em; color: rgb(255 255 255);}
#mapasite .pags .tab a.ativo { color: rgb(255 196 161);}
#mapasite .pags .tab a:hover { color: rgb(255 196 161);}

#mapasite .app { float: left; width: 100%; padding: 10px 0; border-top: 1px solid rgb(146 22 22); background-color: rgb(179 43 43); text-align: center; line-height: 0;}
#mapasite .app img { max-width: 90%; margin: 0 4px;}

#mapasite .bandeiras { float: left; width: 90%; padding: 10px 5%; border-top: 1px solid rgb(146 22 22); background-color: rgb(179 43 43); text-align: center; font-size: 0;}
#mapasite .bandeiras img { margin: 2px;}

#mapasite .sociais { float: left; width: 100%; padding: 30px 0; background-color: rgb(143 31 31); text-align: center; line-height: 0;}
#mapasite .sociais a { padding: 10px 20px; margin: 0 2px; background-color: rgb(255 255 255); background-position: 50%; background-repeat: no-repeat;}
#mapasite .sociais a.whatsapp { background-image: url('../../imagens/site/links-sociais-whatsapp.png');}
#mapasite .sociais a.instagram { background-image: url('../../imagens/site/links-sociais-instagram.png');}
#mapasite .sociais a.youtube { background-image: url('../../imagens/site/links-sociais-youtube.png');}
#mapasite .sociais a.facebook { background-image: url('../../imagens/site/links-sociais-facebook.png');}
#mapasite .sociais a.telegram { background-image: url('../../imagens/site/links-sociais-telegram.png');}

#endereco { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 150;}
#endereco .fundo { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background-color: rgb(0 0 0 / 80%);}
#endereco .centro { margin: 0 auto; width: 700px; max-width: 80%; position: relative; z-index: 2;}
#endereco .conteudo { float: left; width: 90%; padding: 5%; margin: 50px 0 0; background-color: rgb(255 255 255); position: relative;}
#endereco .conteudo .x { position: absolute; width: 30px; top: -15px; right: -15px; padding: 16px 0 14px; outline: 5px solid rgb(255 255 255); background-color: rgb(179 43 43); text-transform: uppercase; text-align: center; font-weight: bold; color: rgb(255 255 255); line-height: 0;}
#endereco .conteudo .x:hover { background-color: rgb(146 22 22);}
#endereco .infor { float: left; width: 100%;}
#endereco .infor h2 { float: left; width: 100%; text-align: center; font-weight: bold; font-size: 1.5em;}
#endereco .novo { float: left; width: 100%;}
#endereco .novo .campo { float: left; width: 100%; height: 60px; outline: 1px solid rgb(90 90 90 / 60%); text-align: center; font-size: 1.2em;}
#endereco .novo .salvar { float: left; padding: 20px; background-color: rgb(25 141 77); text-transform: uppercase; font-size: 1.2em; color: rgb(255 255 255); line-height: 0;}
#endereco .novo .salvar:hover { background-color: rgb(19 128 47);}

#bloqueado { float: left; width: 90%; min-height: 300px; padding: 50px 5% 80px;}
#bloqueado h1 { float: left; width: 100%; text-align: center; font-size: 2em;}
#bloqueado h2 { float: left; width: 100%; text-align: center; font-size: 1.1em;}
#bloqueado h3 { float: left; width: 100%; margin: 20px 0 0; text-align: center; font-size: 1.1em;}
#bloqueado h3 a { color: rgb(33 101 128);}


#whatsapp { position: fixed; width: 80px; height: 80px; right: 20px; bottom: 20px; background-image: url('../../imagens/site/whats-padrao-verde.png'); background-repeat: no-repeat; background-position: 50%; z-index: 100;}


@media only screen and (max-width: 1200px){
  #destaques { font-size: 14px;}
}
@media only screen and (max-width: 1000px){
  #destaques { font-size: 16px;}
  #destaques .tab { width: 48%; margin: 5px 0; outline: 1px solid rgb(0 0 0 / 10%); text-align: center;}
  #destaques .tab.left { float: left;}
  #destaques .tab.right { float: right;}
  #destaques .tab .nome { width: 100%; padding: 12px 0 11px; background-position: 10px 50%;}
  #espacamento { height: 121px;}

  #categorias { top: 121px;}

  #mapasite .pags { padding: 60px 5% 0;}
	#mapasite .pags .lado { width: 100%; padding: 20px 0;}
}
@media only screen and (max-width: 800px){
  #destaques { padding: 20px 5%;}
  #destaques .tab { width: 99%; padding: 12px 0 10px;}
  #destaques .tab.left { float: left;}
  #destaques .tab.right { float: left;}

  #categorias .coluna { width: 100%; margin: 0;}
}
@media only screen and (max-width: 500px){
  #destaques { font-size: 14px;}
  #espacamento { height: 98px;}

  #categorias { top: 98px;}

  #mapasite .pags { width: 100%; padding: 60px 0 0; border-bottom: 0;}
  #mapasite .pags .lado { padding: 0;}
  #mapasite .pags .tab { width: 100%; margin: 0;}
  #mapasite .pags .tab a { padding: 20px 0; border-bottom: 1px solid rgb(146 22 22);}
}