/*
 * Copyright 2014, Tag Web Design
*/

@media screen and (max-width: 900px) {
	header #topo {
		width: 95%;
	}

	#conteudo {
		width: 95%;
		margin: 40px auto 0 auto;
	}
}

@media screen and (max-width: 767px) {
	header nav {
		z-index: 2;
		width: 100%;
		top: -190px;
		height: 240px;
		position: absolute;
	}

	header nav ul {
		width: 100%;
		height: auto;
		padding-top: 10px;
		position: relative;
	}

	header nav ul li {
		margin: 0;
		width: auto;
		float: none;
		height: auto;
		text-indent: 20px;
		text-transform: uppercase;
	}

	header nav ul li a {
		padding: 0;
		height: 35px;
		line-height: 35px;
	}

	header nav ul li a.selected {
		height: 35px;
		color: #74b9d0;
		padding-top: 0;
		font-weight: 700;
		line-height: 35px;
		border-bottom: 0 none;
	}

	header nav ul li.btMenu,
	header nav ul li.fecharMenu {
		display: block;
		visibility: visible;
		text-indent: -30000px;
	}

	header nav ul li.btMenu {
		width: 32px;
		margin: 16px 0 0 22px;
	}

	header nav ul li.btMenu a {
		width: 32px;
		height: 26px;
		display: block;
		background: url(../imagens/btMenuAbrir.jpg) no-repeat left top;
	}

	header nav ul li.fecharMenu {
		margin: 0;
		top: 16px;
		right: 12px;
		width: 32px;
		height: 26px;
		position: absolute;
		text-indent: -30000px;
	}

	header nav ul li.fecharMenu a {
		width: 32px;
		height: 26px;
		display: block;
		background: url(../imagens/btMenuFechar.jpg) no-repeat left top;
	}

	header nav ul li.btMenu a:hover,
	header nav ul li.fecharMenu a:hover {
		background-position: left bottom;
	}

	header #topo h1 {
		float: none;
		margin: 0 auto;
		padding-top: 90px;
	}

	header #topo p {
		display: none;
		visibility: hidden;
	}

	#conteudo {
		margin: 30px auto 0 auto;
	}
}

@media screen and (max-width: 500px) {
	header #topo h1 {
		width: 259px;
		height: 87px;
		margin: 0 auto;
	}

	header #topo h1 a {
		width: 259px;
		height: 87px;
		background: url(../imagens/logoStampi500.png) no-repeat;
	}
}

@media screen and (max-width: 300px) {
	#geral {
		width: 300px;
	}
}

/*----------------------------------------------------------------------------------*/
/*-------------------------------------> HOME <-------------------------------------*/
@media screen and (max-width: 900px) {
	#bannerCaixaBandejas a#bannerFundo img.desk {
		display: none;
	}
	#bannerCaixaBandejas a#bannerFundo img.mob {
		display: block;
	}

	header #topo.home {
		width: 100%;
	}

	header #topo.home h1 {
		margin: 0 auto;
	}

	.home #conteudo {
		width: 100%;
		padding-bottom: 540px;
	}

	footer #home {
		width: 460px;
		margin: 0 auto;
		padding-bottom: 40px;
	}

	footer #home #imagem {
		float: none;
	}

	footer #home a#whatsApp {
		position: inherit;
		left: inherit;
		bottom: inherit;
		margin: 0 auto;
	}
}

@media screen and (max-width: 767px) {
	header #topo.home h1 {
		float: none;
		width: 314px;
		height: 105px;
		padding-top: 90px;
	}

	header #topo.home h1 a {
		width: 314px;
		height: 105px;
		background: url(../imagens/logoStampi.png) no-repeat;
	}

	footer.home {
		padding-bottom: 90px;
	}
}

@media screen and (max-width: 500px) {
	header #topo.home h1 {
		width: 259px;
		height: 87px;
		margin: 0 auto;
	}

	header #topo.home h1 a {
		width: 259px;
		height: 87px;
		background: url(../imagens/logoStampi500.png) no-repeat;
	}

	footer.home {
		padding-bottom: 95px;
	}

	footer #home {
		width: 90%;
	}

	footer #home #imagem {
		width: 100%;
		margin: 0 auto;
		background: url(../fotos/home/stampi-home-pq.png) no-repeat center center;
	}
}

/*----------------------------------------------------------------------------------*/
/*-----------------------------------> EMPRESA <------------------------------------*/
@media screen and (max-width: 900px) {
	#conteudo.empresa #esquerda {
		width: 60%;
	}

	#conteudo.empresa #esquerda #video {
		width: 100%;
	}
}

@media screen and (max-width: 800px) {
	#conteudo.empresa #esquerda {
		width: 56%;
	}
}

@media screen and (max-width: 767px) {
	#conteudo.empresa #esquerda {
		float: none;
		width: 100%;
	}

	#conteudo.empresa #direita {
		float: none;
		width: 100%;
		margin-top: 20px;
	}

	#conteudo.empresa #direita iframe {
		display: none;
		visibility: hidden;
	}

	#conteudo.empresa #direita p.btFacebook {
		margin: 0;
		float: left;
		width: 49%;
		display: block;
		visibility: visible;
	}

	#conteudo.empresa #direita p.btProdutosServicos {
		margin: 0;
		width: 49%;
		float: right;
	}

	#conteudo.empresa #direita p.btFacebook a,
	#conteudo.empresa #direita p.btProdutosServicos a {
		width: 90%;
		padding: 15px 5%;
	}
}

@media screen and (max-width: 500px) {
	#conteudo.empresa #direita p.btFacebook,
	#conteudo.empresa #direita p.btProdutosServicos {
		float: none;
		width: 100%;
		font-size: 1.7em;
		text-align: center;
	}

	#conteudo.empresa #direita p.btFacebook a strong {
		display: inline;
	}

	#conteudo.empresa #direita p.btProdutosServicos {
		margin-top: 10px;
	}
}

/*----------------------------------------------------------------------------------*/
/*-----------------------------------> PRODUTOS <-----------------------------------*/
@media screen and (max-width: 900px) {
	#conteudo.produtos #esquerda {
		width: 32%;
	}

	#conteudo.produtos #esquerda ul li a {
		width: 88%;
		padding: 0 6%;
	}

	#conteudo.produtos #direita {
		width: 65%;
	}

	/* Matrizaria e Injeção */
	#conteudo.produtos #direita ol#fotos li {
		width: 49%;
	}

	#conteudo.produtos #direita ol#fotos li.margem {
		margin-left: 2%;
	}

	#conteudo.produtos #accordion {
		width: 100%;
	}

	/* Produtos Próprios */
	#conteudo.produtos #direita .produto {
		width: 100%;
	}

	#conteudo.produtos #direita .produto img {
		width: 42%;
	}

	#conteudo.produtos #direita .produto .bloco {
		width: 55%;
	}

	#conteudo.produtos #direita .produto a.foto {
		width: 42%;
	}

	#conteudo.produtos #direita .produto a.foto .lupa {
		top: 0;
	}

	/* Produtos Exclusivos */
	#conteudo.produtos #direita ol#galeria li {
		width: 49%;
	}

	#conteudo.produtos #direita ol#galeria li.margem {
		margin-left: 2%;
	}
}

@media screen and (max-width: 767px) {
	#conteudo.produtos #esquerda {
		float: none;
		width: 100%;
	}

	#conteudo.produtos #esquerda #menuCombo,
	#conteudo.produtos #esquerda #menuCombo ul#menuComboFirst,
	#conteudo.produtos #esquerda #menuCombo ul#menuComboItens {
		width: 100%;
		display: block;
		list-style-type: none;
	}

	#conteudo.produtos #esquerda #menuCombo ul#menuComboFirst {
		display: block;
		visibility: visible;
	}

	#conteudo.produtos #esquerda #menuCombo ul#menuComboItens {
		display: none;
		background: #767779;
		padding-bottom: 10px;
	}

	#conteudo.produtos #esquerda #menuCombo ul#menuComboFirst li,
	#conteudo.produtos #esquerda #menuCombo ul#menuComboItens li {
		width: 100%;
		margin-top: 0;
		display: block;
		color: #e5e5e5;
		font-size: 1.6em;
		position: relative;
		text-transform: none;
	}

	#conteudo.produtos #esquerda #menuCombo ul#menuComboFirst li {
		height: 52px;
		line-height: 52px;
		background: #848688;
	}

	#conteudo.produtos #esquerda #menuCombo ul#menuComboItens li {
		height: 45px;
		line-height: 45px;
	}

	#conteudo.produtos #esquerda #menuCombo ul#menuComboFirst li a,
	#conteudo.produtos #esquerda #menuCombo ul#menuComboItens li a {
		padding: 0;
		width: 100%;
		color: #e5e5e5;
		display: block;
		text-indent: 25px;
	}

	#conteudo.produtos #esquerda #menuCombo ul#menuComboFirst li a {
		height: 52px;
		font-weight: 700;
		background: #848688;
	}

	#conteudo.produtos #esquerda #menuCombo ul#menuComboItens li a {
		height: 45px;
		background: #767779;
	}

	#conteudo.produtos #esquerda #menuCombo ul#menuComboItens li a:hover {
		background: #848688;
	}

	#conteudo.produtos #esquerda #menuCombo ul#menuComboItens li a.selected {
		color: #949494;
	}

	#conteudo.produtos #esquerda #menuCombo ul#menuComboItens li a:hover.selected {
		background: #767779;
	}

	#conteudo.produtos #esquerda #menuCombo ul#menuComboFirst li a span {
		top: 0;
		right: 0;
		width: 52px;
		height: 52px;
		display: block;
		position: absolute;
	}

	#conteudo.produtos #esquerda #menuCombo ul#menuComboFirst li#fecharMenuCombo {
		display: none;
	}

	#conteudo.produtos #esquerda #menuCombo ul#menuComboFirst li#abrirMenuCombo a span {
		background: url(../imagens/iconsMenuCombo.jpg) no-repeat left top;
	}

	#conteudo.produtos #esquerda #menuCombo ul#menuComboFirst li#fecharMenuCombo a span {
		background: url(../imagens/iconsMenuCombo.jpg) no-repeat left bottom;
	}

	#conteudo.produtos #esquerda #menuCombo ul#menuComboFirst li#abrirMenuCombo a:hover span {
		background-position: left center;
	}

	#conteudo.produtos #direita {
		float: none;
		width: 100%;
	}
}

@media screen and (max-width: 450px) {
	/* Matrizaria e Injeção */
	#conteudo.produtos #direita ol#fotos li {
		width: 100%;
	}

	#conteudo.produtos #direita ol#fotos li.margem {
		margin-left: 0;
		margin-top: 8px;
	}

	#conteudo.produtos #accordion a {
		width: 96%;
		text-indent: 0;
		padding: 12px 2%;
		background: #d9dadb;
	}

	#conteudo.produtos #accordion a:hover {
		background: #d2d3d5;
	}

	#conteudo.produtos #accordion a.selected {
		background: #d9dadb;
	}

	#conteudo.produtos #accordion a.selected:hover {
		background: #d9dadb;
	}

	#conteudo.produtos #accordion .resposta {
		padding: 0 2% 12px 2%;
	}

	/* Produtos Próprios */
	#conteudo.produtos #direita .produto {
		width: 100%;
		margin-top: 20px;
	}

	#conteudo.produtos #direita .produto img {
		float: none;
		width: 100%;
	}

	#conteudo.produtos #direita .produto a.foto {
		float: none;
		width: 100%;
		height: auto;
	}

	#conteudo.produtos #direita .produto .bloco {
		float: none;
		width: 100%;
		margin-top: 12px;
	}

	/* Produtos Exclusivos */
	#conteudo.produtos #direita ol#galeria li {
		width: 100%;
	}

	#conteudo.produtos #direita ol#galeria li.margem {
		margin-left: 0;
		margin-top: 8px;
	}
}

/*----------------------------------------------------------------------------------*/
/*--------------------------------> REPRESENTANTES <--------------------------------*/
@media screen and (max-width: 900px) {
	#conteudo.representantes #direita {
		width: 48%;
	}
}

@media screen and (max-width: 800px) {
	#conteudo.representantes #direita {
		width: 46%;
	}
}

@media screen and (max-width: 767px) {
	#conteudo.representantes #esquerda {
		display: none;
		visibility: hidden;
	}

	#conteudo.representantes #direita {
		width: 100%;
	}
}

/*----------------------------------------------------------------------------------*/
/*-----------------------------------> CONTATO <------------------------------------*/
@media screen and (max-width: 900px) {
	#conteudo.contato #direita {
		margin-right: 0;
	}
}

@media screen and (max-width: 767px) {
	#conteudo.contato h2 {
		text-align: center;
	}

	#conteudo.contato #esquerda {
		width: 100%;
		float: none;
	}

	#conteudo.contato #esquerda {
		text-align: center;
	}

	#conteudo.contato #esquerda ol {
		margin: 12px auto 0 auto;
	}

	#conteudo.contato #direita {
		float: none;
		margin: 0 auto;
	}
}

@media screen and (max-width: 500px) {
	#conteudo.contato #direita {
		width: 100%;
	}

	#conteudo.contato #direita form input {
		width: 95%;
		padding: 0 2%;
	}

	#conteudo.contato #direita form textarea {
		width: 97%;
		min-width: 97%;
		max-width: 97%;
		padding: 10px 0 0 2%;
	}
}

/*----------------------------------------------------------------------------------*/
/*-----------------------------> NAVEGADOR / ERRO 404 <-----------------------------*/
@media screen and (max-width: 767px) {
	#conteudo.navegador #navegador,
	#conteudo.erro #erro {
		width: 85%;
		margin: 0 auto;
		padding-left: 15%;
	}
}

@media screen and (max-width: 500px) {
	#conteudo.navegador #navegador,
	#conteudo.erro #erro {
		width: 95%;
		margin: 0 auto;
		padding-left: 0;
		background: none;
	}
}

/*----------------------------------------------------------------------------------*/
/*------------------------------------> RODAPE <------------------------------------*/
@media screen and (max-width: 900px) {
	footer #rodape ol {
		width: 97%;
		margin-left: 3%;
		padding-top: 18px;
	}

	footer #rodape ol li {
		margin-right: 2%;
	}

	footer #rodape ol li.cidade {
		clear: both;
	}
}

@media screen and (max-width: 767px) {
	footer #rodape {
		height: 110px;
	}

	footer #rodape ol li {
		float: none;
		text-align: center;
		margin-right: 0;
	}

	footer #rodape ol li.facebook,
	footer p.logoTag {
		display: none;
		visibility: hidden;
	}
}