import url("reset.css");

*{margin:0;padding:0}
a{text-decoration: none}
html, body{height: 100%}
body > #wrapper{position: relative; height: auto !important; min-height: 100%; height: 100%; margin: 0 auto -50px}
body{font-family: 'Roboto Condensed', Helvetica, sans-serif; background-color: #f1f1ea}
body:before{content:""; height:100%; float:left; width:0; margin-top:-32767px}/* fix para opera */
iframe{border: 1px solid #A47549}
img{max-width: 100%; border: 0}
#toTop,iframe[src="about:blank"] {display: none}

#logo{position: absolute; z-index: 1000}

@media (min-width:992px) {
	#logo {
		left: 15px;
    top: 15px;
	}
}

#push_content{height: 60px}
#footer_wrapper{background-color: #6f6f69; color: white; position: relative; width: 100%; min-height: 50px; line-height: 50px}
	#footer_wrapper #footer{padding: 25px 0; margin: 0 auto; color: #4d4d4d}

#thanks{font: 500 11px Arial, sans-serif; width: 100%; border-radius: 5px;  color: white; -moz-border-radius: 5px; height: 25px; line-height: 25px; text-align: center; margin: 0 auto; display: none; margin-bottom: 10px}

.whats {
  position: fixed;
  bottom: 2%;
  right: 2%;
  z-index: 19;
  cursor: pointer;
}
.whats .ripple {
  border-radius: 50%;
  border: 5px solid #069113;
  z-index: -1;
    position: absolute;
    width: 100%;
    height: 95%;
    top: 0;
}
.whats:hover {
  cursor: pointer;
  border-color: #069113;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.whats:hover div.ripple {
  -webkit-animation: ripple 0.6s ease-out;
          animation: ripple 0.6s ease-out;
}
@-webkit-keyframes ripple {
  100% {
    -webkit-transform: scale(1.5, 1.5);
            transform: scale(1.5, 1.5);
    opacity: 0;
  }
}
@keyframes ripple {
  100% {
    -webkit-transform: scale(1.5, 1.5);
            transform: scale(1.5, 1.5);
    opacity: 0;
  }
}

#login{max-width:400px; margin:0 auto; margin-top:5%}
	#login h3{padding:20px 0; font-size:120%; font-weight:300; text-align:center}
	#login form{padding: 6% 4%}
	#login input[type="text"],
	#login input[type="password"]
	{width:100%; background:#fff; margin-bottom:4%; border:1px solid #CCCCCC; padding:4%; font-family: 'Raleway',sans-serif; font-size:95%; color:#CCCCCC}

.contato{margin:0 auto}
	.contato form{padding: 4%}
	.contato input[type="text"],
	.contato input[type="password"],
	.contato textarea
	{width:100%; background: transparent; margin-bottom:2%; border: 2px solid #CCCCCC; padding:2%; font-family: 'Raleway',sans-serif; color:#939597}
	.contato textarea{height: 100px}

.color-text{color: #6D6E70}
.color-menu{color: #939597}
.color-feature{color: #EF4951}
.color-lighter{color: #B8B8CF}
.color-titles{color: #292A3E}
.color-white{color: #FFFFFF}

.font-roboto{font-family: 'Roboto Condensed', sans-serif}
.font-raleway{font-family: 'Raleway', sans-serif}

.text-center{text-align: center}
.text-left{text-align: left}
.text-right{text-align: right}

.load_more{margin: 0 auto; width: 165px}

/** CSS3 **/
.bottom-shadow{
						/*   angle | bottom | blur | spread | color,opacity  */
	-webkit-box-shadow: 0px 6px 9px -4px rgba(50, 50, 50, 0.7);
	-moz-box-shadow:    0px 6px 9px -4px rgba(50, 50, 50, 0.7);
	box-shadow:         0px 6px 9px -4px rgba(50, 50, 50, 0.7);
}
.grayscale{
  -webkit-filter: grayscale(100%);
  filter: gray; /* IE6-9 */
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'gs\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#gs");
  -webkit-transition: all .7s ease;
  -webkit-backface-visibility: hidden; /* fix pra evitar que a transicao fique piscando */
}
	.grayscale:hover, .prodWrap .grayscale, .imgWrap .grayscale{filter: none; -webkit-filter: grayscale(0%);}

.no-radius{border-radius: 0 !important}

.prodWrap,.imgWrap{position: relative; overflow: hidden; max-width: 171px; margin: 20px auto}
.prodWrap{max-width: 273px}
.prodWrap img{height: 263px}
.imgDesc{position: absolute; bottom: -65px; padding: 10px; height: 65px; background: #222; width: 100%; transition: 0.5s; visibility: hidden}
	.prodWrap:hover .imgDesc,
	.imgWrap:hover .imgDesc{
		visibility: visible;
	    opacity: 1;
		transition: 0.5s;
		bottom: 0;
	}

.font-8{font-size: 8pt}
.font-10{font-size: 10pt}
.font-11{font-size: 11pt}
.font-12{font-size: 12pt}
.font-14{font-size: 14pt}
.font-16{font-size: 16pt}
.font-18{font-size: 18pt}
.font-20{font-size: 20pt}

.line-bigger{line-height: 24px}

.pointer{cursor: pointer}
.magnifier{cursor: -webkit-zoom-in; -moz-zoom-in}

.lighter{font-weight:lighter}
.semi-bold{font-weight: 400}
.bold{font-weight:bold}
.italic{font-style:italic}
.clr{clear: both}
.spc{padding: 10px}
.mspc{padding: 5px}
.bspc{padding: 20px}
.bbspc{padding: 40px}
.spc-h{padding: 10px 0}
.spc-v{padding: 0 10px}

.no-padding-left{padding-left: 0 !important}
.no-padding-right{padding-right: 0 !important}

.submenu-inline{display: inline-block}
	.submenu-inline li{list-style: none; float: left; margin: 0 15px}

.success{background-color: #b5c833}
.error{background-color: #BFA432}

.success,
.error{color: white; width: 95%; margin: 10px auto; border-radius: 5px; -moz-border-radius: 5px; padding: 4px}

.no-mobile,
.no-mobile-480,
.sair{}

.footer-left{text-align: left}
.footer-right{text-align: right}

.botao-transparente{background: transparent; border: 0}

/* sprites */
.setas-sprite{background: url(/content/static/setas-sprite.png?3) no-repeat top left; z-index: 5; display: inline-block}
	.botao-cima i{background-position: -43px 0; width: 33px; height: 33px; background-repeat: no-repeat}
		.botao-cima:hover i{background-position: 0 0; width: 33px; height: 33px; background-repeat: no-repeat}
	.botao-dir i{background-position: -129px 0; width: 33px; height: 33px; background-repeat: no-repeat}
		.botao-dir:hover i{background-position: -86px 0; width: 33px; height: 33px; background-repeat: no-repeat}
	.botao-esq i{background-position: -215px 0; width: 33px; height: 33px; background-repeat: no-repeat}
		.botao-esq:hover i{background-position: -172px 0; width: 33px; height: 33px; background-repeat: no-repeat}
	.botao-mais i{background-position: -300px 0; width: 32px; height: 32px; background-repeat: no-repeat}
		.botao-mais:hover i{background-position: -258px 0; width: 32px; height: 32px; background-repeat: no-repeat}
	.botao-esq-rosa i{background-position: -385px 0; width: 33px; height: 33px; background-repeat: no-repeat}
		.botao-esq-rosa:hover i{background-position: -342px 0; width: 33px; height: 33px; background-repeat: no-repeat}
	
.compartilhar-sprite{background: url(/content/static/compartilhar-sprite.png) no-repeat top left; z-index: 5; display: inline-block}
	.botao-compartilhar{background-position: 0 -52px; width: 143px; height: 37px}
		.botao-compartilhar:hover{background-position: 0 0; width: 143px; height: 37px}

.botao-carrossel{position: absolute; top: 50%; left: 35%}
.botao-amarelo:hover{color: #f7a51c !important}
.botao-vermelho:hover{color: #EF4951 !important}

.botao-lateral-direita{margin-left: 5px; margin-top: -5px; float: right}
.botao-lateral-esquerda{margin-right: 5px; margin-top: -5px; float: left}

.menu-resp{float: right; margin-top: 25px; width: 100%; padding: 6px; font-family: 'Roboto Condensed', sans-serif; font-size: 16pt}

@media (min-width: 768px){
	#toTop{padding: 5px 3px; position: fixed; bottom: 60px; left: 15%; display: none}

	.subnav{
		float: right;
		margin: 7.5px -15px;
	}
	.subnav > li {
		float: left;
		font-family: 'Roboto Condensed', sans-serif;
		font-weight: 200;
		font-size: 13pt;
	}
	.subnav > li:hover,
	.subnav > li .sec{
		font-weight: 400;
	}
	.subnav > li > a{
		color: #939597;
	}
}

/* MEDIA QUERIES */
@media (min-width: 801px) {
	.menu-resp{display: none}
}

@media (max-width: 480px) {
	.botao-carrossel{top: 40%; left: 20%}
	.no-mobile-480{display: none}
}

@media (max-width: 768px) {
	.botao-carrossel{left: 30%}
	.carousel-control {width: 20% !important}
}

@media (max-width: 910px) {
	.footer-left,
	.footer-right{text-align: center}
	.sair{padding: 15px 15px;}
	.no-mobile{display: none}
}@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {/*ipad*/	.ver-todos{display: none}}