/*
 *
 */

@import url(reset.css);
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,600,600italic,900,900italic);

html { font-size: 18px; background: #FFF; }
body { font: 300 1em/1.4em 'Source Sans Pro', sans-serif; color: #184C33; background: #FFF; width: 1088px; padding: 0 28px; margin: auto; }

/* -------------------------------------------- gerais, tiopgraficas */
.cb { clear: both; }
a:link, a:visited { color: #327244; outline: 0; }
a:hover { color: #26A94A; }
b , strong { font-weight: 600; }

/* modelo fontes */
.fontesource { font-family: 'Source Sans Pro', sans-serif; }
.fonteyanone { font-family: 'Yanone Kaffeesatz', sans-serif; }

/* exemplo animacao */
p.animadao { animation: animacaoprima 5s infinite alternate; }
@keyframes animacaoprima {
	0% { opacity: 0; margin-left: 10px; color: black; }
	20%,100% { opacity: 1; margin-left: 30px; color: red; }
}

/*
  modelo de sequencia das declarações no modo curto, para transition e animation
	div { transition: |property| |duration| |timing-function| |delay|; }
	div { animation: |name| |duration| |timing-function| |delay| |iteration-count| |direction| |play-state|; }
*/

p { margin: 0 0 1em; }
h3 { font: 300 2.33em 'Yanone Kaffeesatz'; margin: 1em 0 .4em; }
h4 { font: 300 1.89em 'Yanone Kaffeesatz'; margin: 1em 0 .4em; }
h5 { font: 600 1.22em 'Source Sans Pro'; }
ul { margin: 0; padding-left: 16px;}
li { margin-bottom: 0.2em; }

/* ---------------------------------------- fim gerais, tiopgraficas */

/* ---------------------------------------------------------- header */

header { border-bottom: 1px solid #6D6D6D; position: relative; }

header h1 , header h2 {
	background: url(../img/logo_brasilreage.gif) no-repeat;
	text-indent: -9999px;
	width: 270px;
	margin: 8px 0px 14px 18px;
}
header h1 a , header h2 a { display: block; height: 118px; }

header #socialheader {
	background: url(../img/ico_telefone.gif) no-repeat left center;
	font: 700 1.22em 'Yanone Kaffeesatz';
	letter-spacing: 1px;
	padding-left: 33px;
	position: absolute;
	right: 21px;
	top: 10px;
}

header nav ul {
	position: absolute;
	right: 0;
	bottom: 6px;
	margin-bottom: -1px;
}
header nav ul li {
	height: 70px;
	display: inline-block;
	margin: 0 0 0 -4px;
	font: 200 1.22em 'Yanone Kaffeesatz';
}
header nav ul li a:link , header nav ul li a:visited {
	display: block;
	padding: 20px 15px 30px;
	color: #000;
	letter-spacing: .8px;
	text-decoration: none;
}
header nav ul li a:hover {
	background: #02723F linear-gradient(to bottom, #02723F, #02723F 80%, #26A94A) repeat;
	color: #FFF;
}

/* ------------------------------------------------------ fim header */

/* ----------------------------------------------------- banner home */
#bannerhome { border-bottom: 1px solid #6D6D6D; position: relative; }
#bannerhome h3 { font: 300 3.56em 'Yanone Kaffeesatz'; color: #989898; text-align: center; margin: 0; }
#bannerhome h3 b , #bannerhome h3 strong { color: #000; }
#bannerhome p {
	text-align: center; margin: 20px 0 0;
	opacity: 0.3;
	animation: animacabannerhome 10s 1s infinite alternate;
}
#bannerhome p img { max-width: 100%; }

@keyframes animacabannerhome {
	0% { opacity: 0; }
	20%,100% { opacity: 1; }
}
/* ------------------------------------------------- fim banner home */

/* ------------------------------------------------------------ main */
#main {
	margin: 57px 0 120px;
}
#home #main {
	display: flex;
	flex-wrap: wrap;
}
#home #main article {
	width: 344px;
	margin-right: 28px;
}
#home #main article:last-of-type { margin: 0; }


/* ------------------------------- main fotos galerias */
a.fancybox { width: 343px; display: inline-block; margin: 0 25px 40px 0; height: 227px; overflow: hidden; }
/* a.fancybox:nth-of-type(3n) { width: auto; } */
a.fancybox:nth-of-type(3n) { width: auto; }
a.fancybox img { width: 304px; height: auto; }

iframe.portfolio {
	margin: 0 25px 40px 0;
}
iframe.portfolio:nth-of-type(2) { margin: 0 0 40px 42px; }

/* --------------------------- fim main fotos galerias */

/* -------------------------------- logotipos clientes */
.clientes span {
	display: inline-block;
	margin: 0 25px 22px 0;
	text-indent: -9999px;
	width: 250px;
	height: 140px;
	background: #ccc;
}
.clientes span:nth-child(4n+1) { margin-right: 0; background: #ddd; }

.clientes span.queirozgalvao { background: url(../img/logo_queirozgalvao.jpg)}
.clientes span.citroen { background: url(../img/logo_citroen.jpg)}
.clientes span.grupooma { background: url(../img/logo_oma.jpg)}
.clientes span.simbolo { background: url(../img/logo_simbolo.jpg)}
.clientes span.diocesecampolimpo { background: url(../img/logo_diocesecampolimpo.jpg)}
.clientes span.lello { background: url(../img/logo_lello.jpg)}
.clientes span.condominiosresidencias { background: url(../img/logo_condominiosresidencias.jpg)}
.clientes span.building { background: url(../img/logo_building.jpg)}
.clientes span.komaco { background: url(../img/logo_komaco.jpg)}
.clientes span.habitacional { background: url(../img/logo_habitacional.jpg)}
.clientes span.bbz { background: url(../img/logo_bbz.jpg)}
.clientes span.ofner { background: url(../img/logo_ofner.jpg)}
.clientes span.embrac { background: url(../img/logo_embrac.jpg)}
.clientes span.caram { background: url(../img/logo_caram.jpg)}
.clientes span.fecaf { background: url(../img/logo_fecaf.jpg)}
.clientes span.alliz { background: url(../img/logo_alliz.jpg)}
.clientes span.taty { background: url(../img/logo_taty.jpg)}
.clientes span.mariodalmaso { background: url(../img/logo_mariodalmaso.jpg)}
.clientes span.inelcom { background: url(../img/logo_inelcom.jpg)}
.clientes span.dogscanfly { background: url(../img/logo_dogscanfly.jpg)}
.clientes span.atento { background: url(../img/logo_atento.jpg)}
.clientes span.satta { background: url(../img/logo_satta.jpg)}
.clientes span.inengenharia { background: url(../img/logo_inengenharia.jpg)}
.clientes span.bancodobrasil { background: url(../img/logo_bancodobrasil.jpg)}

/* ---------------------------- fim logotipos clientes */


/* -------------------------- aside submenu e servicos */

#servicos article {
	display: flex;
	flex-wrap: wrap;
	position: relative;
}
#servicos div.content { width: 716px; }
#servicos div.content h4 { margin-top: -10px; }
#main aside {
	width: 344px;
	margin-right: 28px;
}
#main aside ul {
	list-style-type: none;
	padding: 0;
}
#main aside ul li {
	text-transform: uppercase;
	margin: 0;
}
#main aside ul li a {
	background: #fff url(../img/ico_seta.png) no-repeat 0 17px;
	padding: 12px 5px 12px 20px;
	display: block;
	text-decoration: none;
	border-top: 1px solid #CBF3D6;

}
#main aside ul li a:hover ,
#servicos.licenciamento #main aside ul li a.licenciamento ,
#servicos.manutencao #main aside ul li a.manutencao ,
#servicos.paisagismo #main aside ul li a.paisagismo ,
#servicos.manejo #main aside ul li a.manejo {
	background-color: #F5F5F5;
	color: #327244;
	text-decoration: none;
}

#servicos a.fancybox:nth-of-type(2n) { width: auto; }
#servicos a.fancybox:nth-of-type(3n) { width: 343px; }

/* ---------------------- fim aside submenu e servicos */

/* ------------------ FALE CONOSCO - formulario e mapa */
#faleconosco #main { display: flex; flex-wrap: wrap; }
#faleconosco #main h3 { width: 100%; margin-top: 0; }
#faleconosco article.endereco , #faleconosco article.formulario , #faleconosco article.mapa { width: 344px; }
#faleconosco article.formulario { width: 716px; margin: 0 0 0 28px; }
#faleconosco article.endereco h5:first-of-type { margin-bottom: 1em; }

#faleconosco .formulario input , #faleconosco .formulario textarea {
	border: 1px solid #CBF3D6;
	font: 300 1em 'Source Sans Pro';
	color: #000;
	width: 696px;
	padding: 12px 10px;
	margin: 0 0 20px;
	border-radius: 4px;
	display: block;
}
#faleconosco .formulario input:focus , #faleconosco .formulario textarea:focus {
	border: 1px solid #79CE90;
}

#faleconosco .formulario button {
	background: #26A94A;
	background-image: linear-gradient(to bottom, #26A94A 35% , #02723F);
	border: 0 none;
	border-radius: 4px;
	box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.7);
	color: #FFF;
	cursor: pointer;
	font: 600 1em 'Source Sans Pro';
	padding: 12px 10px;
	transition: all 0.1s linear 0s;
}
#faleconosco .formulario button:hover { background: #02723F; box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.8); }


/* -------------- fim FALE CONOSCO - formulario e mapa */



/* -------------------------------------------------------- fim main */


/* ---------------------------------------------------------- footer */
footer { position: relative; border-top: 1px solid #6D6D6D; position: relative; }
footer h2 {
	background: url(../img/logo_brasilreage.gif) no-repeat 0 0 / 155px auto;
	text-indent: -9999px;
	margin: 30px 55px 0 0;
	width: 155px;
	float: left;
}
footer h2 a { display: block; height: 80px; }
footer h2 + p { margin-top: 80px; }

footer ul { float: right; margin-top: -41px; }
footer ul li { display: inline; font-weight: 600; }
footer ul li a { text-decoration: none; word-spacing: 200%; }
footer ul li a::after { content: ' | '; }

footer address { font: 600 0.89em/140% 'Source Sans Pro'; margin: 36px 0; }

footer #author {
	background: #F1F1F1 none repeat scroll 0 0;
	font: 600 0.67em 'Source Sans Pro';
	padding: 18px 28px 2px;
	transition: all 0.2s linear 0s;
	margin-top: 80px;
}
footer #author:hover { background: #F9F9F9 none repeat scroll 0 0; }
footer #author a:link, footer #author a:visited { color: #6D6D6D; text-decoration: none; }
footer #author a:hover { text-decoration: underline; }

/* ------------------------------------------------------ fim footer */



/* --------------------------------------------------- media queries */
@-ms-viewport { width: device-width; }

@viewport { width: device-width; }

@media screen and (max-width: 1066px) {
	body { width: 96%; padding: 0 2%; }
	#home #main article { width: 100%; }
	a.fancybox { width: auto; }
	iframe.portfolio:nth-of-type(2) { margin: 0 25px 40px 0; }
	#faleconosco article.endereco , #faleconosco article.formulario , #faleconosco article.mapa { margin-bottom: 100px; }
	article .mobileselect {
		background: #fff;
		border: 1px solid #02723F;
		color: #184C33;
		font: 300 1.0rem 'Source Sans Pro';
		left: 0;
		padding: 2px;
		width: 96%;
		position: absolute;
		top: 0px;
	}
	#servicos div.content h4 { margin-top: 1.4em; }
	#servicos a.fancybox:nth-of-type(3n) { width: auto; }
	#faleconosco article.mapa { width: 96%; }
}

@media screen and (max-width: 860px) {
	#bannerhome h3 { font-size: 2.8em; }
	footer ul { float: none; margin-top: auto; }
	footer ul li:last-child a::after { content: none ; }
}

@media screen and (max-width: 784px) {
	#faleconosco article.endereco , #faleconosco article.formulario , #faleconosco article.mapa { margin-bottom: 50px; }
	#faleconosco .formulario input , #faleconosco .formulario textarea { width: 90%; }
}

@media screen and (max-width: 680px) {
	#bannerhome h3 { font-size: 2.2em; }
	header nav ul { position: relative; }
	#faleconosco article.formulario { margin: 0 0 50px; }
}
@media screen and (max-width: 400px) {
	header nav ul { bottom: 0; padding: 0; }
	header nav ul li { height: auto; font-size: 1.04em; }
	header nav ul li a:link , header nav ul li a:visited { padding: 15px 10px 20px; }
	a.fancybox img , iframe.portfolio { width: 290px; }
	a.fancybox , iframe.portfolio , iframe.portfolio:nth-of-type(2) { margin: 0 0 40px 0; }
	#faleconosco .formulario input , #faleconosco .formulario textarea { width: 90%; }
}




/* ----------------------------------------------- fim media queries */