@charset "utf-8";

#shopping { float: left; width: 90%; margin: 20px 5% 0;}
#shopping .lado1 { float: left; width: 21%; margin: 0 0 20px;}
#shopping .lado2 { float: right; width: 78%;}

#filtros { float: left; width: 100%;}
#filtros .filtronome { float: left; width: 100%; margin: 0 0 10px; position: relative;}
#filtros .filtronome .campo { float: left; width: 91.4%; height: 55px; padding: 1px 4% 0; border: 1px solid rgb(170, 170, 170); background-color: transparent;}
#filtros .filtronome .botao { position: absolute; top: 0;  right: 0; width: 57px; height: 57px; background-color: rgb(0, 0, 0, 0); background-image: url('../imagens/icoBusca.png'); background-repeat: no-repeat; background-position: 50%; cursor: pointer;}
#filtros .chave { float: left; width: 96%; padding: 12px 2% 10px; margin: 0 0 10px; background-color: rgb(127, 193, 51); position: relative; text-transform: uppercase; font-size: 1.2em; color: rgb(49, 85, 8); display: none;}
#filtros .chave:hover { background-color: rgb(127, 193, 51);}
#filtros .chave em { float: left; width: 20px; height: 20px; background-image: url('../imagens/icoZoom.png'); background-repeat: no-repeat; background-position: 50%; background-size: 100%;}
#filtros .chave b { float: left; margin: 0 0 0 5px;}
#filtros .chave .abre { position: absolute; width: 100%; height: 100%; top: 0;  left: 0; z-index: 1; cursor: pointer;}
#filtros .chave .fecha { position: absolute; width: 100%; height: 100%; top: 0;  left: 0; z-index: 1; cursor: pointer;}
#filtros .chave .prioridade { z-index: 2;}
#filtros .conteudo { float: left; width: 100%;}
#filtros .ocultar { float: left; width: 100%; padding: 0 0 5px; background-color: rgb(235, 235, 235);}
#filtros .ocultar a { float: left; width: 92%; padding: 10px 4%; font-size: 1em; color: rgb(150, 127, 113);}
#filtros .ocultar a:hover { color: rgb(193, 127, 88);}
#filtros .ocultar a em { float: left; width: 20px; height: 20px; background-image: url('../imagens/ok.png'); background-repeat: no-repeat; background-position: 50%; opacity: 0;}
#filtros .ocultar a b { float: left; margin: 3px 0 0 5px;}
#filtros .ocultar a.bor { border-bottom: 1px solid rgb(210, 210, 210);}
#filtros .ocultar a.ativo { color: rgb(193, 127, 88);}
#filtros .ocultar a.ativo:hover { color: rgb(150, 127, 113);}
#filtros .ocultar a.ativo em { opacity: 1;}
#filtros .ordenar { float: left; width: 100%; padding: 0 0 5px; margin: 5px 0 0; background-color: rgb(235, 235, 235);}
#filtros .ordenar a { float: left; width: 92%; padding: 10px 4%; font-size: 1em; color: rgb(150, 127, 113);}
#filtros .ordenar a:hover { color: rgb(193, 127, 88);}
#filtros .ordenar a em { float: left; width: 20px; height: 20px; background-image: url('../imagens/ok.png'); background-repeat: no-repeat; background-position: 50%; opacity: 0;}
#filtros .ordenar a b { float: left; margin: 3px 0 0 5px;}
#filtros .ordenar a.bor { border-bottom: 1px solid rgb(210, 210, 210);}
#filtros .ordenar a.ativo { color: rgb(193, 127, 88);}
#filtros .ordenar a.ativo:hover { color: rgb(150, 127, 113);}
#filtros .ordenar a.ativo em { opacity: 1;}
#filtros .departamentos { float: left; width: 100%; padding: 0 0 5px; margin: 5px 0 0; background-color: rgb(210, 230, 187);}
#filtros .departamentos a { float: left; width: 92%; padding: 15px 4%; font-size: 1em; color: rgb(130, 81, 52);}
#filtros .departamentos a:hover { color: rgb(9, 11, 15);}
#filtros .departamentos a em { float: left; width: 20px; height: 20px; background-image: url('../imagens/ok.png'); background-repeat: no-repeat; background-position: 50%; opacity: 0;}
#filtros .departamentos a b { float: left; margin: 3px 0 0 5px;}
#filtros .departamentos a.bor { border-bottom: 1px solid rgb(169, 183, 153);}
#filtros .departamentos a.ativo { color: rgb(9, 11, 15);}
#filtros .departamentos a.ativo:hover { color: rgb(9, 11, 15);}
#filtros .departamentos a.ativo em { opacity: 1;}

#produtos { float: left; width: 100%;}
#produtos .tab { float: left; width: 21%; margin: 0 2% 35px;}
#produtos .tab .imagem { float: left; width: 100%;}
#produtos .tab .imagem .borda { float: left; width: 100%; padding: 0 0 100%; text-align: center; position: relative; overflow: hidden;}
#produtos .tab .imagem .obs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; background-color: rgb(0, 0, 0, 10%);}
#produtos .tab .imagem .img { position: absolute; margin: 0 auto; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;}
#produtos .tab .descricao { float: left; width: 100%;}
#produtos .tab .descricao .nome { float: left; width: 100%; height: 39px; margin: 10px 0 0; overflow: hidden;}
#produtos .tab .descricao .nome h3 { float: left; width: 100%; line-height: 1.35; font-size: 0.9em;}
#produtos .tab .descricao .valores { float: left; width: 100%; margin: 7px 0 0; padding: 15px 0 10px; border-top: 1px solid rgb(200, 200, 200); border-bottom: 1px solid rgb(200, 200, 200);}
#produtos .tab .descricao .valores h3 { float: left; width: 100%; margin: 5px 0 0; font-weight: bold; line-height: 1; font-size: 1.2em; color: rgb(34, 34, 34);}
#produtos .tab .descricao .valores h3 b { font-weight: normal; font-size: 0.7em; color: rgb(80, 80, 80);}
#produtos .tab .descricao .valores h4 { float: left; width: 100%; line-height: 1; font-size: 0.9em; color: rgb(80, 80, 80);}
#produtos .tab .descricao .valores h5 { float: left; width: 100%; margin: 3px 0 0; font-size: 0.8em; color: rgb(80, 80, 80);}
#produtos .tab .descricao .valores h5 a:hover { text-decoration: underline;}
#produtos .tab .links { float: left; width: 100%; margin: 10px 0 0;}
#produtos .tab .links .detalhes { float: left; padding: 8px 7px 7px; background-color: rgb(31, 26, 23); color: rgb(127, 193, 51); text-transform: uppercase; font-weight: bold; font-size: 0.9em;}
#produtos .tab .links .coracao { float: right; width: 33px; height: 33px; background-size: 100%; background-color: rgb(127, 193, 51); background-image: url('../imagens/icoCoracao.png'); background-repeat: no-repeat; background-position: 50%;}
#produtos .tab:hover .links .detalhes { background-color: rgb(127, 193, 51); color: rgb(31, 26, 23);}
#produtos .tab:hover .links .coracao { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; -moz-transform: scale(1) rotate(-720deg); -webkit-transform: scale(1) rotate(-720deg); -o-transform: scale(1) rotate(-720deg); -ms-transform: scale(1) rotate(-720deg); transform: scale(1) rotate(-720deg);}

#installPWA { float: left; width: 100%; padding: 15px; background-color: #E3E3E3; box-sizing: border-box; text-align: center;}
#installPWA span { padding: 20px 0 20px 40px; background-image: url('../imagens/app.png?v1'); background-position: 0 50%; background-repeat: no-repeat; text-transform: uppercase; font-weight: bold;}

@media only screen and (max-width: 1100px){
	#shopping .lado1 { width: 32%;}
	#shopping .lado2 { width: 65%;}
}
@media only screen and (max-width: 1000px){
	#produtos .tab { width: 46%;}

	#filtros .ocultar a { font-size: 0.9em;}
	#filtros .ordenar a { font-size: 0.9em;}
	#filtros .departamentos a { font-size: 0.9em;}
}
@media only screen and (max-width: 900px){
	#shopping .lado1 { width: 37%;}
	#shopping .lado2 { width: 60%;}
}
@media only screen and (max-width: 600px){
	#shopping { width: 94%; margin: 10px 3% 0;}

	#shopping .lado1 { width: 96%; margin: 0 2%;}
	#shopping .lado2 { width: 100%;}

	#filtros .chave { display: block;}
	#filtros .conteudo { display: none;}
}
@media only screen and (max-width: 500px){
	#produtos .tab .links .detalhes { padding: 7px 7px 6px; font-size: 1em;}
	#produtos .tab .links .coracao { width: 32px; height: 32px;}
}