/*###################
#### 1800px
################### */
@media (max-width: 1800px) {
	header div.barra_middle form {
		width: 240px;
	}
	header div.barra_middle form input.pesquisa {
		width: 195px;
		letter-spacing: 2.5px;
	}
	header div.barra_middle form input.botao { 
		float: right;
		width: 20px;
		height: 20px;
	}
}
/*###################
#### 1660px
################### */
@media (max-width: 1660px) {
	header div.barra_navegacao {
		margin-right: 133px;
	}
	header div.barra_middle form {
		width: 238px;
		margin-top: 34px;
	}
	header div.barra_middle form input.pesquisa {
		width: 210px;
		font-size: 11px;
		padding-left: 0px;
	}
	section div.banner {
		width: 100%;
		background: url(../imagens/banner.png) center no-repeat;
		background-size: 100%;
	}
	section div.condicoes {
		
	}
	section div.banner-2 img {
		width: 100%;
		margin-bottom: 1px;
		margin-top: -26px;
	}	
}
/*###################
#### 1480px
################### */
@media (max-width: 1480px) {
	header div.barra_navegacao {
		margin-right: 130px;
		width: 1065px;
	}
	header div.barra_navegacao ul li a {
		font-size: 11px;
		margin-left: 20px;
		margin-right: 0px;
	}
	header div.barra_navegacao ul li a.especial {
	margin-left: 20px;
	}
	section div.banner {

	}
	section div.condicoes {
		
	}
}
/*###################
#### 1440px
################### */
@media (max-width: 1440px) {
	header div.barra_middle form {
		width: 182px;
	}
	header div.barra_middle form input.pesquisa {
		width: 155px;
		font-size: 10px;
		letter-spacing: 1.8px;
	}
	header div.barra_navegacao {
		margin-right: 145px;
		width: 1018px;
	}
	header div.barra_navegacao ul li a {
		margin-left: 15px;
	}
	header div.barra_navegacao ul li a.especial {
		margin-left: 15px;
	}
	header div.barra_navegacao ul li.bt_bazar a {
		margin-left: 15px;
	}
	section div.condicoes {
		
	}
	#coluna_principal {
		width: calc(100% - 25px);
	}
	#coluna_principal .header_interno h2 {
		color: red;
	}
}
/*###################
#### 1366px
################### */
@media (max-width: 1366px) {
	header div.barra_navegacao {
		margin-right: 108px;
		width: 1018px;
	}
	section div.condicoes {
		
	}
}
/*###################
#### 1280px
################### */
@media (max-width: 1280px) {
	header div.barra_navegacao {
		margin-right: 117px;
		width: 913px;
	}
	header div.barra_navegacao ul li a {
		font-size: 10.5px;
		letter-spacing: 3.2px;
	}
	header div.barra_navegacao ul li a {
		margin-left: 10px;
	}
	header div.barra_navegacao ul li a.especial {
		margin-left: 10px;
	}
	header div.barra_navegacao ul li.bt_bazar a {
		margin-left: 10px;
	}
	section div.condicoes {
		
	}
	header ul.barra_preta li.right {
		width: unset;
	}
}
/*###################
#### 1000px
################### */
@media (max-width: 1000px) {
	html{
		position: relative;
		overflow-x: hidden;
	}
	body{
		padding-top: 100px;
	}
	body.body_produtos {
		padding-bottom: 80px;
	}
	header {
		display: table;
		width: 100%;
		position: fixed;
		background: #fff;
		z-index: 9999;
		height: 98px;
		top: 0;
	}
	section {
		margin: 0 auto;
	}
	header ul.barra_preta {
		height: auto;
		flex-direction: column;
		display: flex;
		padding-bottom: 0px;
		height: 29px;
		align-content: center;
		justify-content: center;
		
	}
	header ul.barra_preta li.left {
		width: 100%;
		text-align: center;
		margin-left: 0;
		margin-top: 0;
	}
	header ul.barra_preta li.right {
		display: none;
	}
	header ul.barra_preta li.center {
		width: auto;
		display: none;
	}
	header  div.barra_navegacao {
		display: none;
	}
	header div.direita {
		border: none;
		margin-right: 20px;
		margin-top: 0;
		width: 71px;
		top: 44px;
	}
	.barra_middle {
		display: flex;
/*		flex-direction: column;*/
		align-items: last baseline;
	}
	header div.barra_middle h1 {
		/*width: 166px;
		margin-left: auto;
		margin-right: auto;
		height: 30px;
		background-size: contain;
		margin-left: 20px;
		padding-left: 0;
		position: absolute;
		margin-top: 11px;
		margin-right: auto;
		display: flex;
		align-self: center;*/
		width: 90px;
		margin:  0;
		position: absolute;
		left: 15px;
		top: 35px;
	}
	header div.barra_middle form {
		position: relative;
		width: calc(100% - 320px);
		margin-left: 205px;
		float: left;
		margin-right: auto;
		border-bottom: 1px solid #b2b2b2;
		position: relative;
		top: -15px;
	}
	header div.barra_middle form input.pesquisa, 
	header div.barra_middle form input.botao {
		border: none;
	}
	header div.barra_middle form input.botao {
		width: 30%;	
		min-width: 20px;
		max-width: 20px;
	}
	header div.barra_middle form input.pesquisa {
		/*width: 65%;*/
		font-size: 12px;
		padding: 0;
		margin-top: 5px;
	}
	header div.barra_navegacao ul {
		margin-left: auto;
		margin-right: auto;
		margin-top: 50px;
		border: none;
		width: calc(100% - 40px);
		display: flex;
		flex-wrap: wrap;
	}
	header div.barra_navegacao ul li,
	header div.barra_navegacao ul li.bt_bazar a {
		width: 45%;
	}
	header div.barra_navegacao ul li a, 
	header div.barra_navegacao ul li.bt_primeiro a,
	header div.barra_navegacao ul li.bt_bazar a {
		margin-top: 15px;
		margin-left: 8px;
	}
	section div.produtos h2.sem_resultados{
		width: auto;
	}
	section div.produtos li .mask_imagem_produto{
		height: 250px;
	}
	section div.sombra p {
		display: none;
	}
	section div.banner {
	    height: 350px;
	    background: url(../imagens/banner_mobile.jpg) center center no-repeat;
	    background-size: auto;
	    background-size: 100%;
	    margin-top: 35px;
	    margin-top: 0;
	    display: block;
	    background-size: cover;
	}
	section div.condicoes,
	section div.condicoes-produto {
		width: calc(100% - 40px);
		height: 60px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		max-width: 230px;
	}
	section div.condicoes-produto ul li span {
		display: none;
	}
	section div.condicoes {
		
	}
	section div.condicoes ul.left li {
		margin-left: 5px;
		margin-top: 20px;
		display: none;
	}
	section div.condicoes ul.center li {
		margin-top: 15px;
	}
	section div.condicoes ul.center li p.normal,
	section div.condicoes ul.left li p.normal,
	section div.condicoes ul.right li p.normal,
	section div.condicoes ul.left li p.min,
	section div.condicoes ul.center li p.min {
		font-size: 11px;
		margin-left: 34px;
	}
	section div.condicoes ul.center,
	section div.condicoes-produto ul.center {
		padding-left: 0;
		margin-left: 12px;
		background: url(../imagens/cartao.png) left center no-repeat;
	}
	section div.condicoes ul.center li p {
	    padding-left: 5px;
	}
	section div.condicoes ul.left,
	section div.condicoes-produto ul.left {
		width: 45%;
		display: none;
	}
	section div.condicoes ul.right,
	section div.condicoes-produto ul.right {
	    float: none;
	    width: 60%;
	    margin-top: 0px;
	    display: none;
	}
	section div.condicoes ul.right li {
		float: none;
		margin-right: auto;
		margin-left: auto;
		display: none;
	}
	section div.nossa-indicacao,
	section div.nossas-promocoes,
	section div.imagens_fim {
		width: calc(100% - 40px);
		margin-right: auto;
		margin-left: auto;
	}
	section div.banner-2 {
		margin-bottom: 15px;
		margin-top: 30px;
	}
	section div.banner-2 img {
		margin-top: 0;
	}
	section div.paginacao h2{
		display: none;
	}
	section div.produtos {
		margin-top: 25px;
	}
	section div.nossas-promocoes p,
	section div.nossa-indicacao p {
		line-height: normal;
		font-size: 25px;
		letter-spacing: 3.02px;
		margin-top: 30px;
		margin-bottom: 30px;
	}
	section div.nossa-indicacao p {
		margin-top: 0px;
		margin-bottom: 0px;
	}
	section div.nossa-indicacao-2 p {
		line-height: unset;
		font-size: 22px;
	}
	section div.barra-produtos {
		display: flex;
		flex-direction: column;
		align-items: center;
		display: ;
	}
	section div.barra-produtos select, section div.barra-produtos label {
		display: none;
	}
	div.listagem_marcas {
		width: 100%;
	}
	aside label.categorias, aside label.caracteristicas{
		width: 100%;
		text-align: center;
		font-size: 13px;
		padding: 6px 7px 5px 11px;
		display: table;
		box-sizing: border-box;
	}
	section div.barra-produtos h3 a {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 13px;
		color: #ceb038;
		text-transform: uppercase;
		height: 40px;
		border-bottom: 1px solid #ceb038;
		border-top: 1px solid #ceb038;
		letter-spacing: 4px;
		text-decoration: none;
		margin-top: 25px;
	}		 
	section div.barra-produtos select.amarelo-primeira,
	section div.barra-produtos select.amarelo-segunda,
	section div.barra-produtos select.amarelo-terceira,
	section div.barra-produtos label.ultima,
	section div.barra-produtos label {
		margin-left: 10px;
		margin-right: 10px;
		padding: 7px 0px;
	}
	section div.barra-produtos select.caixa-amarela {
		width: 175px;
		padding: 8px 0px 8px 10px;
	}
	section div.produtos li {
		/*width: 45%;*/
		width: 100%;
		max-width: 280px;
		height: 440px;
		margin-bottom: 15px;
		float: left;
	}
	section div.produtos li .precos{
		bottom: 0;
	}
	section div.produtos ul li a p.nome-produto {
		margin-top: 10px;
		font-size: 16px;
		line-height: 18px;
		margin-top: 10px;
		margin-left: 16px;
	}
	section div.produtos ul li b.selo_desconto{
		top: 5px;
	}
	section div.produtos ul li a p.nome-produto br {
		display: none;
	}
	section div.produtos ul li a p.pequeno {
		margin-left: 16px;
	}
	section div.produtos ul li a p.grande {
		font-size: 18px;
		line-height: 20px;
		margin-left: 16px;
	}
	section div.produtos ul li a p.parcelas {
		padding-left: 16px;
		padding-bottom: 10px;
	}
	section div.produtos ul li a img.foto {
	    width: 100%;
	}
	section div.imagens_fim ul,
	section div.imagens_fim ul li,
	section div.imagens_fim ul li p.primeira,
	section div.imagens_fim ul li p.segunda,
	section div.imagens_fim ul li p.terceira {
		width: 100%;
	}
	section div.imagens_fim ul li label {
		font-size: 18px;
		letter-spacing: 4.2px;
	}
	section div.imagens_fim ul li {
		margin-bottom: 15px;
	}
	section div.imagens_fim ul li p.primeira {
		background: url(../imagens/foto-1.png) center no-repeat;
	}
	section div.imagens_fim ul li p.segunda {
		background: url(../imagens/foto-2.png) center no-repeat;
	}
	section div.imagens_fim ul li p.terceira {
		background: url(../imagens/foto-3.png) center no-repeat;
	}
	section div.imagens_fim ul li p.primeira,
	section div.imagens_fim ul li p.segunda,
	section div.imagens_fim ul li p.terceira {
		max-height: 300px;
		background-size: contain;
	}
	footer div.ofertas ul,
	footer div.colunas {
		width: auto;
	}
	footer div.colunas {
		margin-bottom: 0;
		display: table;
		padding-right: 0;
	}
	footer div.colunas ul.links {
		margin-right: auto;
		margin-left: 20px;
		margin-top: 30px;
		width: 42%;
		display: none;
	}
	footer div.ofertas {
		height: unset;
		margin-top: 35px;
		padding-bottom: 30px;
	}
	footer div.ofertas ul li {
		float: unset;
	}
	footer div.ofertas ul li p {
		margin-right: auto;
		margin-top: 30px;
		font-size: 13px;
		letter-spacing: 2.72px;
	}
	footer div.ofertas ul li input.email {
		width: 90%;
		padding-top: 15px;
		text-indent: 10px;
	}
	footer div.ofertas ul li button {
		margin-left: auto;
		margin-top: 5px;
	}
	footer div.direitos {
		border: none;
		margin-left: auto;
		margin-right: auto;
		width: calc(100% - 40px);
		display: block;
	}
	footer div.direitos br {
		display: none;
	}
	footer div.colunas ul.pagamento {
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		width: calc(100% - 40px);
		display: flex;
		float: none;
		flex-flow: column;
		align-items: center;
	}
	footer div.colunas ul.direita {
	    margin-left: auto;
	    margin-right: auto;
	    margin-top: 20px;
	    float: none;
	    display: flex;
	    flex-flow: ;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	}
	footer div.colunas ul.direita li a {
		margin-top: 0;
	}
	footer div.colunas ul.direita li.btn_face a {
		margin-left: 10px;
	}
	footer div.direitos p.primeiro,
	footer div.direitos p {
		font-size: 12px;
		line-height: 14px;
	}
	footer div.direitos p.final {
		font-size: 12px;
	}

	/* ##################################### listagem ################################ */
	body.resumido header div.direita{
		margin-top: 0;
	}
	div.sombra-listagem{
		margin-top: 8px;
	}	
	section#home, #listagem-grid section{
		margin-top: 0;
	}
	#listagem-grid {
		width: 100%;
		flex-direction: column;
	}
	#listagem-grid aside {
		margin: 0 auto;
		width: calc(100% - 40px);
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 0px;
	}
	#listagem-grid aside .container_opcoes {
		display: none;
		width: 100%;
		max-width: 280px;
	}
	#listagem-grid aside .bt_todas_categorias_mobile {
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: 'avenir_heavy';
		font-size: 13px;
		color: #1d1d1b;
		text-transform: uppercase;
		border: 2px solid #c2c2c2;
		border-radius: 12px 12px 0 0;
		background: transparent;
		cursor: pointer;
		width: 100%;
		max-width: 280px;
		height: 35px;
		margin: 0 auto;
	}
	aside ul.opcoes li:last-child{
		margin-bottom: 0;
	}
	aside ul.opcoes select{
		width: 100%;
		height: unset;
		padding: 5px 0 5px 11px;
	}
	section div.produtos li.primeira {
		margin-left: 0;
	}
	aside .listagem_caracteristicas{
		display: table;
		width: calc(100% - 5px);
		margin-left: -20px;		
	}
	aside ul.lista-categorias{
		display: table;
		width: 100%;
	}
	aside ul.lista-categorias li a{
		font-size: 12px;
		line-height: 18px;
	}
	aside ul.lista-categorias li:last-child{
		margin-bottom: 20px;
	}
	/* ##################################### produto ################################ */
	section div.center-produto {
		grid-template-columns: 1fr;
		margin-left: auto;
		margin-right: auto;
		width: calc(100% - 40px);
	}
	.body_produtos section div.center-produto {
		margin-top: 30px;
	}
	section div.produto-esquerda {
		margin-top: 20px;
	}
	section div.produto-esquerda .modelo-produto, 
	section div.produto-esquerda .modelo-produto img {
		max-width: 100%;
	}
	section div.produto-esquerda img.margem-amarela {
		right: 0;
	}
	section div.produto-esquerda figure.modelo-produto img {
		margin-right: 0;
	}
	section div.btn-imagens-esquerda {
		right: -5px;
		top: 10px;
	}
	section div.condicoes-produto ul {
		padding-top: 18px;
		padding-bottom: 0;
	}
	section div.produto-direita {
		margin-left: auto;
		margin-right: auto;
		width: calc(100% - 40px);
	}
	header div.barra_middle, header div.barra_navegacao {
		width: 100%;
	}
	#produto_produtos div.produtos ul, #home div.produtos ul, 
	#home2 div.produtos ul, #listagem-grid div.produtos ul  {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	#home2 {
		padding-top: 0;
	}
	#m_carrinho ul.car {
		display: flex !important;
		max-width: 400px;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
	}
	section div.center-produto {
		margin-top: 78px;
	}
	section div.produto-esquerda p {
		font-size: 11px;
	}
	section div.produtos ul li a img.off {
		top: 401px;
	}
	section div.comprar-agora ul.esquerda, 
	section div.comprar-agora ul.direita {
		width: 50%;
		height: 80px;
	}
	section div.comprar-agora ul.esquerda {
		width: 50%;
		justify-content: center;
		align-items: center;
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9999;
	}
	section div.comprar-agora ul.esquerda li{
		position: relative;
		/*top: -17px;*/
	}
	section div.comprar-agora ul.direita{
		position: fixed;
		right: 0;
		bottom: 0;
		z-index: 9999;		
	}
	section div.comprar-agora ul.direita button {
		max-width: 100%;
		width: 100%;
		border-radius: 0;
		height: 80px;
	}
	section div.comprar-agora ul.direita button p {
		margin-right: 0;
		background: url(../imagens/carrinho-produtos.png) 80% center no-repeat;
		padding-right: 90px;
		margin-top: -18px;
	}
	section div.comprar-agora ul.esquerda p.grande {
		margin-top: 18px;
	}
	section div.comprar-agora ul.esquerda p.voador {
		top: 0.9rem;
	}
	section div.comprar-agora ul.esquerda p.pequeno,
	section div.comprar-agora ul.esquerda p.pequeno-2 {
		margin-left: 0;
	}
	section div.comprar-agora ul.esquerda p.pequeno-3 {
		width: 100%;
		left: 0;
	}
	.comprar-agora,
	section .comprar-agora {
		margin: 0;
	}
}
@media(max-width: 500px) {
	section div.produtos ul li a img.off {
		top: 362px;
	}
	header div.barra_middle form {
		width: calc(100% - 300px);
		margin-left: 195px;
	}
	header div.barra_middle form input.pesquisa {
		/*width: 70%;*/
	}
	header div.barra_middle h1 {
		/*width: 160px;*/
	}
	.haraateliercom #video_hara .centro .mask_img video:not(.v_mobile) {
		display: none;
	} 
	.haraateliercom #video_hara .centro .mask_img video.v_mobile {
		display: flex;
	}
}
@media(max-width: 400px) {
	.descricao {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	section div.produto-direita legend {
		margin-left: 5%;
	}
}
@media(max-width: 380px) {
	header div.barra_middle h1 {
    	/*width: 140px;*/
	}
	header div.barra_middle form {
    width: calc(100% - 282px);
    margin-left: 178px;
		}
}

/*###################
#### MENU MOBILE
################### */
#menu_mobile{
	position: fixed;
	top: 0;
	right: -420px;
	width: 0;
	opacity: 0;
	height: calc(100% - 55px);
	padding-top: 55px;
	background: #fff;
	z-index: 9999;
	max-width: 420px;
	transition: all 0.16s ease-in;
}
#menu_mobile.aberto{
	width: 100%;
	opacity: 1;	
	right: 0;
	box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.10);
}
#menu_mobile ul.main{
	border-top: 1px solid #e2e2e2;
	display: block;
	width: 100%;
	padding-top: 15px;
	max-height: 200px;
	position: relative;
	overflow-y: scroll;
}
#menu_mobile ul.main li{
	padding-left: 25px;
}
#menu_mobile ul.main li a{
	font-size: 24px;
	line-height: 38px;
	font-family: 'avenir_light';
	color: #040404;
}
#menu_mobile ul.secundario{
	border-top: 1px solid #e2e2e2;
	display: table;
	width: 100%;
	padding-top: 23px;
	margin-top: 25px;
}
#menu_mobile ul.secundario li{
	padding-left: 25px;
}
#menu_mobile ul.secundario li a{
	font-size: 15px;
	line-height: 28px;
	font-family: 'avenir_medium';
	color: #040404;
}
#menu_mobile a.bt_fechar_mobile{
	display: block;
	width: 33px;
	height: 33px;
	background: #f4f4f4;
	position: absolute;
	top: 11px;
	left: 50%;
	margin-left: -16px;
	z-index: 999999999999999999999999;
	border-radius: 50%;
	text-align: center;
	color: var(--active-color);
	font-family: 'avenir_heavy';
	font-size: 13px;
	text-transform: uppercase;
	line-height: 33px;
}