///////////////////////////////////////// VARIAVEIS DO LESS /////////////////////////////////////////////
@primaria:#322785;
@secundaria: #CD393C;
@terciaria: #F3F3F3;
@branco: #FFFFFF;
@cinza-escuro: #666666;
@verde: #58AC26;
@largura: 1100px;


////////////////////////////////////////// FUNCOES /////////////////////////////////////////////////////

/*alinhamento vertical*/
.vertical-align {
	position: relative;
	top: 50%;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);	
}

//fazer border radius, passa como parametro a borda, por padrao usa 5px
.radius(@borda: 5px) {
	border-radius: @borda;
	-moz-border-radius: @borda;
	-o-border-radius: @borda;
	-webkit-border-radius: @borda;
	behavior: url(PIE.htc);
}

/////////////////////////////////// flashdata ///////////////////////

#aviso {
	width: 100%;
	height: 50px;
	line-height: 50px !important;
	text-align: center;
	font-size: 14px;
	display: none;
	color: #FFF;
}

.aviso-sucesso {
	background: #27ae60;
}

.aviso-sucesso div {
	width: 30px;
	height: 30px;
	position: absolute;
	background: url('../img/aviso-sucesso.png');
	margin: 10px 10px 10px 15px;
}

.aviso-erro {
	background: #e74c3c;
}

.aviso-erro div {
	width: 26px;
	height: 26px;
	position: absolute;
	background: url('../img/aviso-erro.png');
	margin: 14px 10px 10px 15px;
}

.aviso-neutro {
	background: #f1c40f;
}

.aviso-neutro div {
	width: 30px;
	height: 30px;
	position: absolute;
	background: url('../img/aviso-neutro.png');
	margin: 9px 10px 10px 15px;
}

.estrela {
	width: 26px;
	height: 26px;
	overflow: hidden;
	background: url('../img/estrela.png') 0px 0px;
}


//////////////////////////////////////// COMPORTAMENTO COMUM DE ELEMENTOS  //////////////////////////////
body {
	border-top: solid 5px @primaria;
	margin: 0 auto;
	color: #666666;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	text-decoration: underline;
}

img {
	border: none;
}

h2 {
	font-size: 20px;
	height: 27px;
	margin: 15px 0 15px 0;
	font-weight: 500;
	border-bottom: solid 2px #DDDDDD;
	span {
		padding: 0 3px 0 3px;
		border-bottom: solid 2px @primaria;
	}
}



///////////////////////////////////////////// CLASSES GERAIS ///////////////////////////////////////////
.central {
	width: @largura;
	height: auto;
	display: table;
	margin: 0 auto;
}

//br clear melhorado
.clearfix {
	*zoom: 1;
	&:before,
	&:after {
		display: table;
		content: "";
		line-height: 0;
	}
	&:after {
		clear: both;
	}
}

.clear {
	clear: both;
}

.left {
	float: left;
}

.right {
	float: right;
}

#conteudo {
	width: @largura;
	margin: 0 auto;
	background-color: @branco;
	padding-top: 10px;
}

.texto {
	line-height: 22px;
	p {
		margin: 5px 0 5px 0;
	}
}

#loading {
	width: 28px;
	height: 28px;
	float: left;
	margin: 28px 10px 0 0;
	background: url('../img/loader.gif') no-repeat;
	background-size: 28px 28px;
	display: none;
}

////////////// ESTILO DOS INPUTS ////////////
.input {
	width: 100%;
	height: 32px;
	border: solid 1px #CCCCCC;
	outline: none;
	background-color: @branco;
	text-indent: 5px;
	&:disabled {
		background-color: #EAEAEA;
	}
}

.textarea {
	width: 99%;
	height: 100px;
	border: solid 1px #CCCCCC;
	outline: none;
	background-color: @branco;
	resize:none;
	&:disabled {
		background-color: #EAEAEA;
	}
}

.submit {
	width: auto;
	min-width: 100px;
	height: 35px;
	color: @branco;
	text-indent: 10px;
	cursor: pointer;
	border: none;
	font-weight: 500;
	font-family: 'Open Sans', sans-serif;
	float: right;
	margin: 25px 0 0 0;
	background-color: @primaria;
	font-size: 16px;
	padding: 0 25px 0 25px;
	&.seta {
		background: url('../img/seta-submit.png') no-repeat @verde;
	}
	&.done {
		background: url('../img/done.png') no-repeat @primaria;
	}	
	&:hover {
		background-color: @secundaria;
	}
}

.input-erro {
	outline-color: @primaria;
}

.tamanho-10 { width: 10% };
.tamanho-20 { width: 20% };
.tamanho-30 { width: 30% };
.tamanho-40 { width: 40% };
.tamanho-45 { width: 45% };
.tamanho-50 { width: 50% };
.tamanho-60 { width: 60% };
.tamanho-70 { width: 70% };
.tamanho-80 { width: 80% };
.tamanho-90 { width: 90% };
.tamanho-100 { width: 100% };

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

.botao-padrao {
	width: 100%;
	height: 30px;
	color: @terciaria;
	background-color: @primaria;
	text-align: center;
	font-weight: 500;
	padding: 10px 5px 0 5px;
	margin: 20px auto;
	&:hover {
		background-color: @secundaria;
	}
	&.cadeado {
		background: url('../img/cadeado.png') no-repeat @primaria;
	}
}


/////////////////////////////////////// TOPO DO SITE ///////////////////////////////////////////

header {
	width: 100%;
	height: auto;
	min-height: 235px;
	display: table;
	background-color: @branco;

	.content {
		width: @largura;
		height: auto;
		min-height: 180px;
		display: table;

		.tab {
			width: 128px;
			height: 27px;
			color: @branco;
			text-align: center;
			margin: -1px 40px 0 0;
			background-color: @primaria;
			.radius(2px);
			.right;
			font-size: 13px;
			padding-top: 4px;
		}

		.logotipo {
			margin: 5px 0 30px 100px;
			width: auto;
			max-width: 320px;
			height: auto;
			.left;
		}

		.body-find {
			width: 400px;
			height: 40px;
			background-color: @terciaria;
			margin: 50px 40px 0 0;
			.right;

			.input {
				width: 350px;
				height: 34px;
				margin: 3px 0 0 3px;
				outline: none;
				border: none;
				background-color: transparent;
				text-indent: 5px;
				.left;
			}
			.submit-busca {
				width: 20px;
				height: 20px;
				background: url('../img/lupa.png') no-repeat;
				margin: 10px;
				border: none;
				cursor: pointer;
				.right;
			}
		}

		.cart {
			width: 180px;
			height: 40px;
			font-family: tahoma, verdana, arial;
			line-height: 19px;
			font-size: 13px;
			background-color: @terciaria;
			clear: right;
			margin: 30px 40px 0 0;
			.right;

			.icon {
				width: 55px;
				height: 40px;
				background: url('../img/icon-cart.png') no-repeat @primaria;
				background-position: 13px 5px;
				margin-right: 10px;
				.left;
			}
		}
	}
	nav {
		width: 100%;
		height: 55px;
		background-color: @primaria;
		color: @branco;
		font-size: 18px;

		.item-menu {
			width: ( @largura / 7)-5;
			height: 40px;
			text-align: center;
			display: inline-block;
			font-weight: 500;
			padding-top: 15px;
			.seta {
				width: 8px;
				height: 5px;
				background: url('../img/caret.png') no-repeat;
				float: right;
				margin: 10px 5px 0 5px;
			}
			.submenu {
				width: 100%;
				height: 55px;
				background-color: @primaria;
				position: relative;
				z-index: 9999;
				display: none;
				text-align: left;
				box-shadow: 1px 1px 1px #888888;
				margin-top: 16px;			
				.subitem {
					height: 30px;
					font-size: 16px;
					padding-top: 6px;
					border-top: solid 1px #EAEAEA;
					text-indent: 10px;
					&:hover {
						background-color: @secundaria;
					}
				}
			}
			&:hover {
				background-color: @secundaria;
			}
		}
		.active {
			background-color: @secundaria;
		}

	}
}

////////////////////////// MENU DE CATEGORIAS ///////////////////////////

#categorias {
	width: 270px;
	height: auto;
	min-height: 120px;
	border: solid 1px #CCCCCC;
	border-top: none;
	.left;

	.top {
		width: 272px;
		margin-left: -1px;
		height: 45px;
		background-color: @primaria;
		color: @branco;
		font-size: 20px;
		font-weight: 500;
		padding-top: 1px;

		.icon {
			width: 45px;
			height: 46px;
			background: url('../img/icon-cat.png') no-repeat @secundaria;
			background-position: 12px 15px;
			margin: -1px 10px 0 0;
			.left;
		}
		span {
			display: block;
			margin-top: 8px;
		}
	}
	.item {
		width: 100%;
		height: 30px;
		padding-top: 7px;
		text-indent: 20px;
		color: @cinza-escuro;
		text-transform: uppercase;
		i {
			width: 5px;
			height: 7px;
			overflow: hidden;
			background: url('../img/setas-categorias.png') no-repeat;
			background-position: 0px 0px;
			.right;
			margin: 10px;
		}
		&:hover {
			background-color: @terciaria;
			i {
				background-position: 0px -7px;
			}
		}
	}
	.sub-item {
		min-width: 250px;
		min-height: 50px;
		height: auto;
		background-color: @branco;
		position: absolute;
		margin: -37px 0 0 270px;
		z-index: 9999;
		display: none;
		padding: 10px;
		-webkit-box-shadow: 1px 0px 5px 0px rgba(50, 50, 50, 0.75);
		-moz-box-shadow: 1px 0px 5px 0px rgba(50, 50, 50, 0.75);
		box-shadow: 1px 0px 5px 0px rgba(50, 50, 50, 0.75);
		text-transform: lowercase;
		.esquerda {
			width: 250px;
			min-height: 50px;
			height: auto;
			display: table;
			.left;
		}
		.direita {
			width: 250px;
			min-height: 50px;
			height: auto;
			display: table;
			.right;
		}
		span {
			color: @primaria;
			font-size: 18px;
		}
		p {
			margin: 5px 0 5px 10px;
		}
	}
}

#banner {
	width: 820px;
	height: 430px;
	.right;
	.banner {
		padding: 0px;
		margin: 0px;
	}
	img {
		width: 100%;
		height: 430px;
	}
}

////////////////////////////////////// BANNERS SECUNDARIOS //////////////////////////////

#banners-secundarios {
	width: @largura;
	height: 170px;
	padding-top: 15px;
	background-color: #F3F3F3;
	border-bottom: solid 1px #CCCCCC;

	.item {
		width: 545px;
		height: 155px;
		overflow: hidden;
		.left;
		&:last-child {
			.right;
		}
		img {
			width: 545px;
			min-height: 155px;
		}
	}
}



/////////////////////////////////// RODAPE //////////////////////////////////

footer {
	width: 100%;
	height: auto;
	min-height: 100px;
	border-top: solid 22px @primaria;
	background-color: #E6E6E6;
	.content {
		width: 100%;
		height: auto;
		min-height: 280px;
		display: table;
		padding: 20px 0 20px 0;
		background-color: @terciaria;
		.area {
			width: 330px;
			height: auto;
			min-height: 100px;
			padding: 0 0 0 20px;
			display: table;
			.left;
			span {
				font-size: 18px;
				font-weight: 600;
			}
			&:last-child {
				.right;
			}
			small {
				margin-left: 20px;
			}
			.item {
				margin: 15px 0 15px 20px;
				height: 20px;
				text-indent: 35px;
			}
			.endereco {
				background: url('../img/icon-endereco.png') no-repeat;				
			}
			.telefone {
				background: url('../img/icon-telefone.png') no-repeat;				
			}
			.fax {
				background: url('../img/icon-fax.png') no-repeat;				
			}		
			.whatsapp {
				background: url('../img/icon-whatsapp.png') no-repeat;				
			}	
			.skype {
				background: url('../img/icon-skype.png') no-repeat;				
			}
			ul {
				padding-left: 20px;
			}
			li {
				height: 20px;
				margin: 5px 0 8px 0;
				list-style-position: inside;
			}
		}
	}
	.pagamento {
		width: 100%;
		height: 50px;
		padding-top: 20px;
		background-color: @branco;
		text-align: center;
		.forma-pag {
			width: auto;
			height: 23px;
			display: inline-block;
			margin: 5px 10px 0 10px;
		}
	}
	.direitos {
		margin: 20px auto;
		width: 800px;
		text-align: center;
		font-size: 12px;
	}
	.hostche {
		float: right;
		margin: 30px;
	}
}





////////////////////////////////////// PAGINA EMPRESA //////////////////////////////////////////

.outros-institucionais {
	width: 300px;
	height: auto;
	display: table;
	.right;
	padding: 10px;
	border-left: solid 2px #CCCCCC;
	margin: 0 0 20px 20px;
	list-style-position: inside;
	li {
		margin: 5px 0 5px 0;
	}
}

///////////////////////////////////// PAGINA CLIENTES/IDENTIFICACAO////////////////////////////////

#area-identificacao {
	width: 755px;
	height: 390px;
	margin: 40px auto;
	.area-redes-sociais {
		width: 100%;
		height: 40px;
		padding-top: 15px;
		text-align: center;
		background-color: @terciaria;
		text-transform: uppercase;
		margin-bottom: 10px;
		a {
			margin: -3px 0 -5px 5px;
			float: left;
			display: inline-block;
		}
		#signinButton {
			display: inline-block;
			margin: -3px 0 0 10px;
		}
		.icones-redes{
			float: left;
			height: 30px;
		}
	}
	.ja-cadastrado {
		width: 305px;
		padding: 30px;
		height: 260px;
		float: left;
		background-color: @terciaria;
	}
	.novo-cliente {
		width: 305px;
		height: 260px;
		padding: 30px;
		float: right;
		background-color: @terciaria;
	}
	span {
		font-size: 20px;
		font-weight: 500;
		margin: 5px 0 15px 0;
		display: block;
	}
	p {
		margin: 5px 0 5px 0;
	}
}
.recuperar {
	float: left;
	font-size: 11px;
	margin: 10px 0 0 0;
}

///////////////////////////////////// PAGINA CLIENTES/CADASTRAR ////////////////////////////////

#area-cadastro {
	width: 690px;
	display: table;
	height: auto;
	padding: 15px 25px 25px 25px;
	margin: 40px auto;
	background-color: @terciaria;
	span {
		font-size: 20px;
		font-weight: 500;
		margin: 5px 0 15px 0;
		display: block;
	}
	p {
		margin: 20px 0 5px 0;
	}
	i {
		color: @primaria;
	}
	.checkbox {
		margin: 20px 0 0 0;
	}
	&.w-400 {
		width: 400px;
	}	
	&.w-800 {
		width: 800px;
	}
}

////////////////////////////////// TABLES PURECSS.IO ///////////////////////////////

.pure-table {
    /* Remove spacing between table cells (from Normalize.css) */
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cccccc;
}

.pure-table caption {
    color: @cinza-escuro;
    // font: italic 85%/1 arial, sans-serif;
    padding: 1em 0;
    text-align: center;
}

.pure-table td {
    border-left: 1px solid #cccccc;/*  inner column border */
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible; /*to make ths where the title is really long work*/
    padding: 0.5em 1em; /* cell padding */
}

.pure-table th {
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible; /*to make ths where the title is really long work*/
    padding: 0.5em 1em; /* cell padding */
}

/* Consider removing this next declaration block, as it causes problems when
there's a rowspan on the first cell. Case added to the tests. issue#432 */
.pure-table td:first-child,
.pure-table th:first-child {
    border-left-width: 0;
}

.pure-table thead {
    background-color: @primaria;
    color: @branco;
    text-align: left;
    vertical-align: bottom;
}

/*
striping:
   even - #fff (white)
   odd  - #f2f2f2 (light gray)
*/
.pure-table td {
    background-color: transparent;
}
.pure-table-odd td {
    background-color: #f2f2f2;
}

//////////////////////////////////// PAGINACAO /////////////////////////////////

#paginacao {
	width: 100%;
	height: 35px;
	line-height: 35px;
	text-align: center;
	margin: 15px auto 35px auto;
	color: @cinza-escuro;
	font: 16px;
}

#paginacao .ativo {
	font-size: 25px;
	color: @primaria;
}

#paginacao a {
	margin: 0 7px;
}

#paginacao a:hover {
	color: @primaria;
}

/////////////////////////////// PAGINA MEUS CLIENTES/DADOS  ////////////////////////

.item-endereco {
	width: 45%;
	min-height: 120px;
	height: auto;
	float: left;
	margin: 10px;
	border: solid 1px #CCCCCC;
	background-color: @terciaria;
	padding: 5px;
	span {
		font-size: 20px;
	}
	p {
		margin: 5px 0 5px 10px !important;
	}
	.acoes-endereco {
		color: @primaria;
		font-size: 11px;
		float: right;
	}
	.novo-endereco {
		width: 90%;
		margin: 50px auto;
		background: url('../img/icon-novo-endereco.png') no-repeat;
		text-indent: 55px;
		padding-top: 5px;
		font-size: 18px;
		font-weight: 500;
		height: 32px;
		color: @primaria;
	}
}


////////////////////////////// CARRINHO DE COMPRAS ///////////////////////////

.foto-carrinho {
	width: 70px;
	height: auto;
	float: left;
	padding-right: 5px;
	border-right: solid 1px #CCCCCC;
	margin: 3px 15px 0 3px;
}

.passos-compra {
	width: 487px;
	height: 60px;
	float: right;
	margin-top: 10px;
}

.nome-produto-carrinho {
	font-size: 16px;
}

.dados-produto-carrinho {
	width: auto;
	height: 20px;
	float: left;
	margin: 5px;
	font-size: 13px;
}
.remover-produto-carrinho {
	width: 200px;
	height: 20px;
	float: left;
	margin: 5px;
	font-size: 11px;
}

.botao-quantidade {
	width: 16px;
	height: 16px;
	float: left;
	margin: 10px 5px 0 5px;
	&.aumentar {
		background: url("../img/botao-mais.png") no-repeat;
	}
	&.diminuir {
		background: url("../img/botao-menos.png") no-repeat;	
	}
}

.botao-remover-carrinho {
	width: 16px;
	height: 16px;
	float: left;
	margin: 10px 5px 0 0;
	background: url("../img/botao-excluir.png") no-repeat;
}

.botao-remover-cupom {
	width: 16px;
	height: 16px;
	float: left;
	margin: 13px 0 0 20px;
	background: url("../img/botao-excluir.png") no-repeat;
	cursor: pointer;
}

.icone-presente {
	margin: -6px 8px 0 8px;
	float: left;
}

.checkbox-carrinho {
	float: left;
}

.preco-carrinho {
	color: #64C75A;
}
.subtotal-carrinho {
	width: 129px;
    border: 1px solid #cccccc;/*  inner column border */
    border-top: none;
    border-width: 1px;
    font-size: inherit;
    float: right;
    margin: 0;
    overflow: visible; /*to make ths where the title is really long work*/
    padding: 0.5em 1em; /* cell padding */
}

.area-frete-carrinho {
	width: 530px;
	height: 130px;
	float: right;
	margin-top: 20px;
	border: solid 1px #CCCCCC;
	.cep {
		width: 367px;
		padding-left: 5px;
		height: 85px;
		float: left;
		border: solid 1px #CCCCCC;
		border-top: none;
		border-left: none;
	}
	.valor {
		width: 157px;
		height: 55px;
		padding: 30px 0 0 0;
		text-align: center;
		float: right;
		border-bottom: solid 1px #CCCCCC;
	}
	.cupom {
		width: 372px;
		height: 45px;
		float: left;
		border-right: solid 1px #CCCCCC;
	}
	.desconto-cupom {
		width: 157px;
		height: 30px;
		text-align: center;
		float: right;
		padding-top: 10px;		
	}
}

.item-frete {
	height: 15px;
	margin: 5px 0 5px 0;
}

.pfrete {
	margin: 2px 0 2px 0;
	height: 15px;
}

.total-carrinho {
	width: 500px;
	height: auto;
	float: right;
	margin-top: 20px;
	text-align: right;
	line-height: 26px;
	font-size: 16px;
	.total-parcelado {
		color: #999999;
	}
}

.radio-frete {
	margin: 6px 0 6px 0;
}

.recalcular {
	color: @primaria;
	font-size: 12px;
}

///////////////////// PAGINA PAGAMENTO /////////////////////////

.form-pagamento {
	width: 300px;
	display: inline-block;
}

.paypal,
.pagseguro {
	height: 256px;
	display: inline-block;
	margin: 10px 20px 0 20px;
}

////////////////// PAGINA FINALIZADO ///////////////////////

.smile {
	width: 144px;
	height: 88px;
	margin: 30px auto;
	background: url('../img/smile-finalizado.png') no-repeat;
}

.tudo-pronto {
	font-size: 30px;
}



























///////////////////////////////////////// PRODUTOS /////////////////////////////////////////////

#etalage {
	width: 725px;
	height: 465px;
	margin-bottom: 20px;
}


.comprar-produto {
	border: 1px solid #CCC;
	width: 360px;
	min-height: 402px;
	display: table;
}

.preco-antigo {
	color: #999999;
	font-size: 16px;
	text-decoration: line-through;
	margin: 15px 0 0 30px;
	height: 22px;
}

.preco-atual {
	color: @primaria;
	font-size: 26px;
	margin: 15px 0 0 30px;
}

.valor-parcelado {
	color: #666;
	font-size: 14px;
	margin: 10px 0 0 30px;
	span {
		font-weight: bold;
	}
}

.descricao-produto {
	color: #666 !important;
	font-size: 14px !important;
}

.subtitulo-espec {
	font-weight: bold;
	font-size: 14px;
	margin: 10px 0 0 0;
	text-indent: 15px;
}

.lista-atributos {
	width: 100%;
	list-style-type: none;
}

.rotulo-atributo {
	width: 300px;
	max-height: 35px;
	line-height: 35px;
	color: #666666;
	font-size: 14px;
	text-indent: -25px;
}

.conteudo-atributo {
	width: 800px;
	min-height: 35px;
	line-height: 35px;
	text-indent: 15px;
	color: #666666;
	font-size: 14px;
}

.linha-avaliacao {
	width: 565px;
	height: 20px;
	line-height: 20px;
	margin: -2px 0 0 0;
}

.estrelas {
	width: 100px;
	height: 20px;
	margin-right: 10px;
}

.rotulo-avaliacao {
	width: 75px;
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #666;
	display: inline-block;
}

.medidor-avaliacao {
	width: 280px;
	height: 10px;
	background: #E4E4E4;
	margin-top: 5px;
	.preenchido {
		background: #64C75A;
		height: 100%;
	}
}

.qtd-avaliacao {
	margin-left: 15px;
	height: 20px;
	line-height: 20px;
}

.avaliacao-geral {
	font-size: 16px;
	font-weight: bold;
	color: #666;
	span {
		font-weight: normal;
		font-size: 14px;
	}
}

.botao-avaliar {
	width: 170px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #FFF;
	background: @primaria;
	font-size: 14px;
	font-weight: normal;
	margin: -5px 0 0 20px;
	&:hover {
		background-color: @secundaria;
	}
}

.lista-comentarios {
	width: 100%;
	list-style-type: none;
	padding: 0;
}

.item-comentario {
	width: 100%;
	height: auto;
	display: table;
	margin-bottom: 30px;
}

.foto-comentario {
	width: 95px;
	height: 99px;
	border: 1px solid #CCC;
	margin-right: 10px;
	img {
		display: block;
		margin: 18px auto 0 auto;
	}
}

.autor-comentario {
	width: 200px;
	overflow: hidden;
	font-size: 14px;
	font-weight: bold;
	color: #666;
	span {
		font-weight: normal;
	}
}

.info-comentario {
	width: 750px;
	height: auto;
	display: table;
	border: 1px solid #CCC;
	font-size: 12px;
	color: #666;
	padding: 0 10px 10px 20px;
	line-height: 20px;
	.rotulo-avaliacao {
		color: @primaria;
		margin-top: 4px;
		font-weight: bold;
	}
}

.mensagem-avaliacao {
	width: 100%;
	height: auto;
	display: table;
	overflow: hidden;
	margin-top: 10px;
}

.info-cor-tamanho {
	margin: 10px 0 0 30px;
}

.lembrete-estoque {
	width: 90%;
	height: auto;
	padding: 5%;
	.input {
		margin: 5px 0 5px 0;
	}
	i {
		color: red;
	}
}

.margin-left {
	margin-left: 20px;
}

.box-produto {
	border: 1px solid #CCC;
	width: 20px;
	height: 20px;
	margin: 10px 10px 0 0;
	cursor: pointer;
	text-align: center;
	overflow: hidden;
	line-height: 20px;
	font-size: 12px;
}

.marcador {
	width: 24px;
	height: 22px;
	background: url('../img/marcador.png');
	margin: -6px 0 0 0;
	display: none;
	position: absolute;
}

.botao-carrinho {
	width: 277px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background-color:  @verde;
	background-image: url('../img/icon-cart-2.png');
	background-repeat: no-repeat;
	background-position: 15px center;
	color: #FFF;
	display: block !important;
	text-transform: uppercase;
	text-indent: 25px;
	margin: 0 0 0 15px;
	&:hover {
		background-color: @secundaria;
	}
}

.desabilitado {
	background-color: #95a5a6 !important;
	&:hover {
		background-color: #7f8c8d;
	}
}

.area-cep {
	width: 315px;
	min-height: 100px;
	height: auto;
	display: table;
	margin: 15px 0 0 0;
	.resposta-cep {
		width: 100%;
		height: auto;
		font-size: 14px;
		text-align: center;
		overflow: hidden;
		line-height: 25px;
		margin: 15px 0;
		span {
			color: #30B030;
		}
	}
}

#form-cep {
	width: 100%;
	border: none;
	label {
		width: 125px;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}
	input[type="text"] {
		width: 90px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		border: 1px solid #CCC;
		outline: none;
		margin: 0 0 0 5px;
		color: #666;
	}
	input[type="submit"] {
		width: 90px;
		height: 32px;
		text-align: center;
		line-height: 32px;
		border: none;
		outline: none;
		margin: 0 0 0 2px;
		cursor: pointer;
		color: #FFF;
		background: @primaria;
		&:hover {
			background: @secundaria;	
		}
	}
}

.addthis_sharing_toolbox {
	width: 145px;
	margin: 0 auto;
}

////////////////////// AVALIAR PRODUTO //////////////////////

#area-avaliacao {
	width: 600px;
	height: auto;
	padding: 10px 10px 20px 10px;
}


///////////////////////// videos produto ///////////////////////

.area-videos {
	float: left;
	width: 150px;
	height: auto;
	margin: 10px;
	img {
		width: 100%;
		cursor: pointer;
	}
}

.area-video-aberto {
	width: 800px;
	height: 500px;
	float: right;
	margin: 10px;
}

//////////////////////////////////// ITEM PRODUTO  /////////////////////////////////////

.produto {
	width: 353px;
	height: 435px;
	.left;
	margin: 5px;
	border: solid 1px #CCCCCC;
	.box-img {
		width: 353px;
		height: 270px;
		text-align: center;
		img {
			.vertical-align;
		}
		.horizontal {
			width: 340px;
			max-height: 250px;
		}
		.vertical {
			width: auto;
			height: 230px;
		}
	}
	.selo {
		width: 60px;
		.right;
		position: relative;
		margin: -250px 20px 0 0;
	}
	.descricao {
		width: 333px;
		height: 120px;
		padding: 5px 10px 0 10px;
		font-size: 14px;
		span {
			font-size: 16px;
			span {
				color: @primaria;
			}
		}
		i {
			color: @primaria;
			font-style: normal;
		}
	}
	.botao-comprar {
		width: 353px;
		height: 39px;
		border-top: solid 1px #CCCCCC;
		.icon {
			width: 42px;
			height: 39px;
			.left;
			span {
				width: 20px;
				height: 17px;
				margin: 11px 0 0 11px;
				overflow: hidden;
				display: block;
				background: url('../img/icons-cart.png') 0px 0px;
			}
		}
		.comprar {
			text-align: center;
			text-indent: -25px;
			width: 311px;
			height: 28px;
			padding-top: 10px;
			.right;
		}
	}
	&:hover {
		.botao-comprar {
			background-color: @primaria;
			color: @branco;
			.icon{
				background-color: @secundaria;
				span {
					background-position: 0px 17px;
				}
			}
		}
	}
}

/////////////// LISTAGEM DE PRODUTOS /////////////////////

#corpo-listagem {
	width: 760px;
	height: auto;
	float: right;
	.produto {
		margin: 10px 0 10px 0;
	}
}

////////////// NOVIDADES /////////////////////

.item-novidade {
	width: 48%;
	height: 100px;
	border-left: solid 2px #CCCCCC;
	margin: 10px 0 10px 0;
	padding: 5px;
	font-size: 13px;
	.box-img {
		width: 100px;
		height: 100px;
		float: left;
		margin-right: 10px;
		overflow: hidden;
		img {
			.vertical-align;
		}
		.horizontal {
			width: auto;
			height: 100px;
		}
		.vertical {
			width: 100px;
			height: auto;
		}
	}
	p {
		margin: 1px 0 1px 5px;
		font-size: 16px;
	}
	.data {
		font-size: 10px;
		margin-bottom: 5px;
		padding-left: 5px;
	}
}
.lateral-novidade {
	width: 250px;
	height: auto;
	float: right;
	margin: 10px 10px 10px 20px;
	.foto-novidade {
		width: 240px;
		float: right;
		margin: 10px;
	}
	ul {
		padding: 10px;
		margin: 0px;
		list-style-position: inside;
		li {
			margin: 5px 0 5px 0;
		}
	}
}