@charset "utf-8";

#esquerda { float: left; width: 17%;}
#direita { float: right; width: 82%;}

#faixa { float: left; width: 96%; top: 0; left: 0; z-index: 60; padding: 0 2%;}

#abas { float: right;}
#abas a { float: left; padding: 11px 15px 10px;}
#abas b { float: left; width: 2px; height: 15px; margin: 14px 0 0;}
#abas b.m { display: none;}
#abas a.ativo { text-decoration: underline;}
#abas a:hover { text-decoration: underline;}

#categorias { float: left; color: rgb(9, 11, 15);}
#categorias .destaques { float: left; margin: 0 0 0 15px;}
#categorias .destaques a { float: left; padding: 12px 15px 10px; text-transform: uppercase; font-weight: bold; font-size: 0.95em;}
#categorias .destaques b { float: left; width: 2px; height: 15px; margin: 14px 0 0; opacity: 0.8;}
#categorias .destaques a.ativo { opacity: 0.8;}
#categorias .destaques a:hover { opacity: 0.8;}

#categorias .todas { float: left; position: relative;}
#categorias .todas .abrir { float: left;}
#categorias .todas .abrir em { float: left; width: 30px; height: 40px; background-repeat: no-repeat; background-position: 50%; cursor: pointer;}
#categorias .todas .abrir strong { float: left; padding: 12px 5px 10px; text-transform: uppercase; font-size: 0.95em;}
#categorias .todas .abrir:hover strong { text-decoration: underline;}
#categorias .todas .fechar { display: none; position: absolute; width: 100%; top: 0; left: 0;}
#categorias .todas .flutuante { display: none; position: absolute; width: 240px; top: 0; left: 2%; padding: 40px 0 0;}
#categorias .todas .flutuante .fundo { float: left; width: 100%; background-color: rgb(255, 255, 255); overflow: auto;}

#categorias .semsub { float: left; width: 100%;}
#categorias .semsub .cat { float: left; width: 90%; padding: 15px 5% 13px; border-bottom: 1px solid rgb(180, 180, 180); font-size: 1em;}
#categorias .semsub .cat.ativo { background-color: rgb(220, 220, 220);}
#categorias .semsub .cat:hover { background-color: rgb(220, 220, 220);}

#categorias .comsub { float: left; width: 100%;}
#categorias .comsub .tab { float: left; width: 100%;}
#categorias .comsub .tab .cat { float: left; width: 90%; padding: 15px 5% 13px; border-bottom: 1px solid rgb(180, 180, 180); position: relative; font-size: 1em; background-image: url('../imagens/setaCat.png'); background-position: 95%; background-repeat: no-repeat;}
#categorias .comsub .tab .cat .mostrar { display: none; position: absolute; width: 100%; height: 100%; top: 0; right: 0; z-index: 1;}
#categorias .comsub .tab .cat .esconder { display: none; position: absolute; width: 22px; top: 50%; right: 15px; z-index: 2; padding: 11px 0; margin: -11px 0 0; background-color: rgb(150, 150, 150); text-align: center; color: rgb(255, 255, 255); line-height: 0;}
#categorias .comsub .tab .mais { position: absolute; width: 200px; top: 40px; left: 230px; z-index: 1; padding: 0 20px; background-color: rgb(255, 255, 255); display: none; -webkit-box-shadow: 0 0 5px 0 rgb(0, 0, 0, 20%); -moz-box-shadow: 0 0 5px 0 rgb(0, 0, 0, 20%); box-shadow: 0 0 5px 0 rgb(0, 0, 0, 20%);}
#categorias .comsub .tab .mais .sub { float: left; width: 100%; padding: 15px 0 13px; border-bottom: 1px solid rgb(220, 220, 220); font-size: 0.95em; color: rgb(80, 80, 80);}
#categorias .comsub .tab .mais .sub:hover { text-decoration: underline;}
#categorias .comsub .tab:hover .cat { background-color: rgb(220, 220, 220);}

#subcategorias { float: left; width: 100%;}
#subcategorias .cat { float: left; width: 94%; padding: 15px 3% 13px; text-transform: uppercase; font-weight: bold; font-size: 1em; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
#subcategorias .sub { float: left; width: 94%; padding: 10px 3% 8px; margin: 1px 0 0;}
#subcategorias .sub:hover { text-decoration: underline;}
#subcategorias .sub.ativo { text-decoration: underline;}

#apaga { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(0, 0, 0, 50%); z-index: 10;}

#bannersTopo { float: left; width: 100%; position: relative; z-index: 1;}
#bannersTopo .fundo { float: left; width: 100%; position: relative;}
#bannersTopo .fundo.m { display: none;}
#bannersTopo .slides, .slides > li, .flex-control-nav { float: left; width: 100%; margin: 0; padding: 0; list-style: none;}
#bannersTopo .slides > li { display: none;}
#bannersTopo .slides > li img { float: left; width: 100%;}
#bannersTopo .flex-control-nav { display: none;}
#bannersTopo .flex-direction-nav { padding: 0; margin: 0; font-size: 0; list-style: none;}
#bannersTopo .flex-direction-nav a { position: absolute; width: 30px; height: 30px; top: 45%; z-index: 5; cursor: pointer;}
#bannersTopo .flex-direction-nav a.flex-prev { left: 2%; background-image: url('../imagens/seta1.png');}
#bannersTopo .flex-direction-nav a.flex-next { right: 2%; background-image: url('../imagens/seta2.png');}

#bannersMeio { float: left; width: 100%; padding: 0 0 10px; text-align: center;}
#bannersMeio .img { width: 24%; margin: 0 0.5%;}

#bannersRodape { float: left; width: 100%; padding: 0 0 10px;}
#bannersRodape .img { float: left; width: 100%;}

#buscar { float: left; width: 98%; margin: 10px 1% 0; position: relative;}
#buscar .campo { float: left; width: 98%; height: 60px; padding: 1px 1% 0; background-color: transparent; border: 1px solid rgb(80, 80, 80); font-size: 1.1em;}
#buscar .botao { position: absolute; top: 0; right: 0; width: 60px; height: 100%; background-color: transparent; background-image: url('../cores/buscar-preto.png'); background-position: 50%; background-size: 35px; background-repeat: no-repeat; cursor: pointer;}

#sociais { float: left; width: 100%; padding: 40px 0 10px; text-align: center;}
#sociais .ico { padding: 20px; margin: 2px; background-size: 100%; background-repeat: no-repeat; background-position: 50%;}
#sociais .ico.ins { background-image: url('../imagens/icoIns.png');}
#sociais .ico.zap { background-image: url('../imagens/icoZap.png');}
#sociais .ico.you { background-image: url('../imagens/icoYou.png');}
#sociais .ico.fac { background-image: url('../imagens/icoFac.png');}
#sociais .ico.twi { background-image: url('../imagens/icoTwi.png');}
#sociais .ico:hover { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; -moz-transform: scale(1.2) rotate(-720deg); -webkit-transform: scale(1.2) rotate(-720deg); -o-transform: scale(1.2) rotate(-720deg); -ms-transform: scale(1.2) rotate(-720deg); transform: scale(1.2) rotate(-720deg);}

#resumo { position: fixed; right: 10px; bottom: 10px; z-index: 10; padding: 15px 15px 13px 45px; background-color: rgb(127, 193, 51); background-image: url('../cores/carrinho-preto.png'); background-repeat: no-repeat; background-position: 10px 50%; display: none;}
#resumo .valor { float: left; width: 100%; text-align: center; font-weight: bold; font-size: 1em;}
#resumo:hover { background-color: rgb(129, 172, 81);}

@media only screen and (min-width: 1001px){
	#categorias .todas:hover .flutuante { display: block;}
	#categorias .comsub .tab:hover .mais { display: block;}
}
@media only screen and (max-width: 1000px){
	#esquerda { width: 27%;}
	#direita { width: 72%;}

	#faixa { width: 100%; padding: 0;}
	
	#abas { display: none; float: left; width: 100%;}
	#abas a { width: 90%; padding: 20px 5%;}
	#abas b { width: 100%; height: 1px; margin: 0; opacity: 0.4;}
	#abas b.m { display: block;}

	#categorias { float: left; width: 100%;}
	#categorias .destaques { display: none;}
	#categorias .todas { float: left; width: 100%;}
	#categorias .todas .abrir { float: left; width: 90%; margin: 0 5%;}
	#categorias .todas .fechar { height: 48px;}
	#categorias .todas .flutuante { float: left; width: 100%; position: relative; left: 0; padding: 0;}
	#categorias .semsub .cat { padding: 22px 5% 20px; background-color: rgb(220, 220, 220);}
	#categorias .comsub { width: 100%;}
	#categorias .comsub .tab .cat { padding: 22px 5% 20px; background-color: rgb(220, 220, 220); background-position: 200%;}
	#categorias .comsub .tab .cat .mostrar { display: block;}
	#categorias .comsub .tab .mais { float: right; width: 100%; position: relative; top: 0; left: 0; padding: 0 0 0 10%;}
	#categorias .comsub .tab .mais .sub { width: 80%; padding: 20px 10% 18px;}

	#apaga { height: 0;}

	#bannersMeio .img { width: 49%;}
}
@media only screen and (max-width: 800px){
	#bannersTopo .fundo.d { display: none;}
  #bannersTopo .fundo.m { display: block;}
}
@media only screen and (max-width: 700px){
	#esquerda { display: none;}
	#direita { width: 100%;}
}