@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,500,700,400italic,500italic,700italic);

/* RESET */
* { margin:0; padding:0; list-style:none; border:0; vertical-align:baseline; font-family: 'Ubuntu', Arial, sans-serif; font-weight:400; }
td { vertical-align:middle; }
h1, h2, h3, h4, h5, h6 { font-weight:400; }
img, picture, video, embed { max-width: 100%; } /* truque para deixar as imagens e outros elementos adaptáveis */
a { color:#666; text-decoration:none; }
input:focus, button:focus, textarea:focus, select:focus { outline: none; }

.clearfix:before,.clearfix:after { content: " "; display: table; } 
.clearfix:after { clear: both; } 
.clearfix { *zoom: 1; }
/* fazer com que todos elementos fiquem dentro da div #conteudo por exemplo */

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* todos os elementos agora levarão em conta apenas a largura e altura determinada, sem somar a este valor a borda e o padding */

/* SITE */
body { color:#000; font-size:62.5%; background:#999; }
#tudo { float:left; width:100%; background:#fff; }

/* CABEÇALHO */
header { float:left; width:100%; background:#083f88; font-size:0; }
header .iconMenu { float:left; width:7.25%; margin:2.5% 0 2.5% 5%; }
header .iconLogo { float:left; width:11.25%; margin:2.5%; }
header .iconBusca { float:right; width:6.25%; margin:2.5% 5% 2.5% 0; }

/* CONTEÚDO */
main { float:left; width:100%; }
.blocoInicio { float:left; width:100%; background:#083f88; margin-bottom:2px; }
.blocoInicio .logo { float:left; width:65.9375%; margin:-9.375% 0 5.375% 17.03125%; }
.buscaPrincipal { position:relative; float:left; width:85%; margin:0 0 9.375% 7.5%; }
.caixaBuscaPrincipal { float:left; width:100%; font-size:1.4em; padding:5.882352941176471%; border-radius:5px; text-indent:10%; }
.iconCaixaBusca { width:7.352941176470588%; position:absolute; top:30%; left:5.147058823529412%; }

.central { float:left; width:100%; padding:5%; background:#fff; }
.central.cinza { background:#E6E6E6; }

.vitrine { float:left; width:100%; }


.rodape { float:left; width:100%; padding:5%; background:#E6E6E6; }
.rodape p { text-align:center; margin-bottom:1.5%; }
.rodape p img { width:15px; margin-bottom:-5px; }

.listaItens { float:left; width:100%; font-size:1.4em; margin-bottom:10%; }
.listaItens li { width:100%; padding:3.472222222222222% 0; border-bottom:0.1em solid #ccc; }
.listaItens li a { color:#006fe9; text-decoration:none; display:block; }

.blocoEmpresa { float:left; width:100%; background:#fff; margin-bottom:5.555555555555556%; }
.blocoEmpresa .dadosPrincipais { float:left; width:100%; }
.blocoEmpresa .dados { float:left; width:100%; padding:5.555555555555556%; }
.blocoEmpresa .detalhes { float:left; width:100%; }
.blocoEmpresa h2 { font-size:1.6em; margin-bottom:3%; }
.blocoEmpresa h2 a { font-weight:600; color:#083f88; }
.blocoEmpresa h1 { font-weight:600; color:#083f88; }
.blocoEmpresa .categoria a { color:#009245; font-size:1.3em; }
.blocoEmpresa .endereco { float:left; width:100%; font-size:1.3em; color:#666; margin-left:20px; }
.blocoEmpresa .telefone { float:left; width:100%; font-size:1.4em; }
.blocoEmpresa .telefone a { color:#000; font-weight:600; margin-right:5%; }
.blocoEmpresa .botaoLigar { float:left; width:50%; text-align:center; font-size:1.2em; color:#fff; background:#61c46e; }
.blocoEmpresa .botaoLigar .iconLigar { width:11.11111111111111%; display:inline-block; margin:5.555555555555556% 5.555555555555556% 5.555555555555556% 0; vertical-align:-0.3em; }
.blocoEmpresa .botaoInfo { float:left; width:50%; text-align:center; font-size:1.2em; color:#fff; background:#999; }
.blocoEmpresa .botaoInfo .iconInfo { width:11.11111111111111%; display:inline-block; margin:5.555555555555556% 5.555555555555556% 5.555555555555556% 0; vertical-align:-0.3em; }

.blocoEmpresa.anunciante { background:#fffed7; }
.blocoEmpresa.anunciante .dadosPrincipais { float:right; width:62.5%; margin-top:3.90625%; } /* margin 10px, largura base 256px */
.blocoEmpresa.anunciante .logoEmpresa { float:left; width:31.25%; }
.blocoEmpresa.anunciante .logoEmpresa img { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; box-shadow: 0 2px 3px 2px rgba(0,0,0,0.30); -webkit-box-shadow: 0 2px 3px 2px rgba(0,0,0,0.30); -moz-box-shadow: 0 2px 3px 2px rgba(0,0,0,0.30); }
.blocoEmpresa a.linkAnuncio { padding:2px; font-size:11px; font-family:Arial; color:#fff; text-decoration:none; background:#eeb704; border-radius: 2px; margin-top:5px; float:left; clear:both; }

.botaoLigarGrande { float:left; width:100%; text-align:center; font-size:1.2em; color:#fff; background:#61c46e; }
.botaoLigarGrande .iconLigar { width:5%; display:inline-block; margin:2.5% 2.5% 2.5% 0; vertical-align:-0.3em; }

.mapaLocalizacao { float:left; width:100%; height:165px; background:#b3b3b3; }
.marcadores { float:left; width:100%; padding:5.555555555555556%; margin:5.555555555555556% 0; background:#fff; text-transform:lowercase; }
.marcadores ul { font-size:1.2em; }

.enderecoContato { float:left; width:100%; margin-top:5%; }
.enderecoContato p { font-size:1.3em; color:#666; }

.descricao { float:left; width:100%; font-size:1.4em; color:#666; }
.descricao p { margin-bottom:2.5%; }

/* FORMULÁRIO */
.formulario { float:left; width:100%; }
.caixa { float:left; width:100%; font-size:1.3em; color:#666; padding:5%; margin-bottom:3%; border-bottom:0.1em solid #ccc; }
.caixa.parte1 { width:75%; }
.caixa.parte2 { width:22%; float:right; }

.botaoSubmit { float:left; width:100%; font-size:1.4em; color:#fff; font-weight:600; padding:5%; margin-bottom:3%; background:#b10d00; cursor:pointer; }
.mensagemSucesso { float:left; width:100%; color:#fff; font-size:1.4em; padding:5%; background:#55ca93; }

/* FONTES */
h1 { font-size:1.8em; }
h2 { font-size:1.8em; margin-bottom:5.555555555555556%; }
h3 { font-size:1.8em; margin-bottom:5.555555555555556%; }

.justify { text-align:justify; }



/* ---------- MENU LATERAL ----------*/
html, body {overflow-x: hidden;}

/*.menu-anchor {
	width: 40px;
	height: 32px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	background: #FFF;
}

.menu-anchor:before {
	content: "";
	display: block;
	margin: 7px auto;
	width: 70%;
	height: 0.25em;
	background: #f49c14;
	box-shadow: 0 .45em 0 0 #f49c14, 0 .9em 0 0 #f49c14;
}

.menu-active .menu-anchor {background: #d55401}*/

menu {
	font-size:1.6em;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 80%;
	height: 100%;
	padding-top: 10px;
	background:#0f3971;
	box-shadow: inset -5px -5px 10px 0 rgba(0,0,0,.2)
}

menu li a {
	display: block;
	border-bottom: 1px solid rgba(0,0,0,.3);
	margin: 0 10px;
	padding: 10px;
	color: #fff;
	text-decoration: none;
}

menu li a:hover {
	background: #f7bd14;
}

/*
	Aqui você esconde o menu para fora da tela 
	O valor é exatamente a largura da sidebar
*/
menu {
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-transition: all .25s linear;
	-moz-transition: all .25s linear;
	-ms-transition: all .25s linear;
	transition: all .25s linear;
}

/*
	Essa é a posição original do HEADER e do MAIN
*/
header, main {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition: all .25s linear;
	-moz-transition: all .25s linear;
	-ms-transition: all .25s linear;
	transition: all .25s linear;
}

/*
   Com a classe menu-active na tag HTML
*/
.menu-active menu {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
}

.menu-active header, 
.menu-active main {
	-webkit-transform: translateX(80%);
	-moz-transform: translateX(80%);
	-ms-transform: translateX(80%);
	transform: translateX(80%);
}