/*RESET*/

header, section, footer, div, nav {display: block;}

* {
    margin:0;
    padding:0;
}

body {
	font-family: open sans, verdana, arial, sans-serif;
	background: #436395 url(../imagens/usina-3.jpg) no-repeat -2px bottom;
	background-attachment: fixed;
	background-size:100%; 
}

a {
	color: #333;
	text-decoration: none;
}
a:hover {color: #fff;}

a, li {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

.lnk-especial {
	float:left;
	height:38px;
	padding-left:47px;
	background:url(../imagens/download.jpg) no-repeat;
}

.lnk-especial:hover {color:#333 !important; background:url(../imagens/download-1.jpg) no-repeat;}

h1 {
	width:266px;
	height:130px;
	text-indent:-9999px;
	background: url(../imagens/logotipo-ETNM-Engenharia.png) no-repeat 20px 20px;	
}

h2 {
	font-size:1.4em;
	color:#326699;
	border-bottom:1px solid #ccc;
	line-height:3em;
	margin:1em 0 1em 0;
	padding-left:47px;
}

h3 {
    border-left: 16px solid #326699;
    color: #333;
    font-size: 1em;
    height: 17px;
    line-height: 17px;
    margin: 20px 0 20px 17px;
    padding-left: 8px;
    text-transform: uppercase;
}

header {
    height: 145px;
    margin-top: -12px;
	border-bottom:8px solid #336699;
    background: #E6E6E6;	
}

article {
    width: 713px;	
    top: 0;	
    left: 0;
}

section {
	margin:25px;
    padding-bottom: -18px;
	width: 713px;	
	background: #fff url(../imagens/bg-rodape.png) repeat-x left bottom;	
}

article p {font-size:1em; line-height:1.1em; color:#666;}

article ul {margin:0 0 20px 30px;}

article ul li {
	font-size:1em;
	line-height:1.2em;
	list-style:square;
	margin-left:49px;	
	color:#666;
}

#conteudo p {
    padding: 0 0 18px 0;
    width: 625px;
	line-height:1.3em;
	margin-left:49px;	
}

.carregando {
position:absolute; 
left:50%;
margin-left:-80px;
width:160px;   
} 

@font-face {
	font-family: 'etnm';
	src: url('../fontes/etnm.eot');
	src: url('../fontes/etnm.eot?#iefix') format('embedded-opentype'),
		url('../fontes/etnm.woff') format('woff'),
		url('../fontes/etnm.ttf') format('truetype'),
		url('../fontes/etnm.svg#etnm') format('svg');
	font-weight: normal;
	font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family: 'etnm';
		src: url('../fontes/etnm.svg#etnm') format('svg');
	}
}

.icone-empresa, .icone-home, .icone-serv, .icone-contato, .icone-menu {
	font-family: 'etnm';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.icone-empresa:before {content: "\e604";}
.icone-home:before {content: "\e603";}
.icone-serv:before {content: "\e602";}
.icone-contato:before {content: "\e601";}
.icone-menu:before {content: "\f0c9";}


.nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.2em;
	font-weight: 300;
}

.nav li span {display: block;}

.nav a {
	display: block;
	color: #fff;
	text-decoration: none;
}

a, button {-webkit-tap-highlight-color: rgba(0,0,0,0);}

.nav li:nth-child(6n+1) {background: #afc6dc;}
.nav li:nth-child(6n+2) {background: #799ec4;}
.nav li:nth-child(6n+3) {background: #4e7dab;}
.nav li:nth-child(6n+4) {background: #336699;}

iframe { margin:10px 0 90px 20px;}

address {
	width:244px;
	font-size:0.9em;
	margin:10px 0 10px 20px;
}

address p.ver-mapa {margin-left:0 !important;}

address .limite {margin-top:20px;}

address a:hover {color:#333; text-decoration:underline;}

#menu li {
-webkit-transition: all 4s linear;
-moz-transition: all 4s linear;
-o-transition: all 4s linear;
transition: all 4s linear;
}


#menu li:hover {
background:#082745;
-webkit-transition: all 4s linear;
-moz-transition: all 4s linear;
-o-transition: all 4s linear;
transition: all 4s linear;
}

.tels { width:50%;}

/* ESTILO PARA MONITORES COM PELO MENOS 19.375em / 310px SMARTPHONE */

@media all and (min-width:19.375em ){

	#menu {
	clear: both;
	margin-top: 14px;
	position:relative;
	}
	
	.nav li {line-height:3em;}
	
	.nav li span {display: inline;}
	
	.icone {	padding:8px 0 8px 20px;}
	
	html {height:90%;}
	section {width:100%; margin:0;}
	
	article {
	position:relative;
	width:93%;
	margin-top:225px;
	}
	
	article ul,
	#conteudo p {
	width:auto;
	margin-left:20px;
	}
	h2 {padding-left:20px; margin-left:17px;}
	
	.carregando {top:100px !important; z-index:10;} 
	
	iframe {
    float: left;
    margin: 10px 0 23px 20px;
    width: 96%;
	}
	
}

/* ESTILO PARA MONITORES COM PELO MENOS 31.250em ou 500px SMARTPHONE */

@media all and (min-width:31.250em){

	.nav li { 
	float:left;
	width:50%;
	}

	article {margin-top:113px;}
}

/* ESTILO PARA MONITORES COM PELO MENOS 43.750em ou 700px TABLET */

@media all and (min-width:43.750em){
	h1 {float:left;}
	nav#menu {
	clear:none;
	float:left;
	width:427px;
	margin:20px 0 0 0;
	}

.carregando { left:60%;} 	
	
article {margin-top: 0;}

iframe {width:55%; float:none;}

}

/* ESTILO PARA MONITORES COM PELO MENOS 56.250em ou 900px  TABLET E DESKTOP */

@media all and (min-width:56.250em){

	section {width:455px; margin:20px;}

	#menu {
    float: right;
    margin-top: -119px; 	
	}
	
	nav#menu {
	float:right;
	width:597px;
	margin-top:11px;
	}

	/* Transforms the list into a horizontal navigation */
	.nav li {
		float: left;
		width: 149px;
		text-align: center;
		-webkit-transition: border .5s;
		-moz-transition: border .5s;
		-o-transition: border .5s;
		-ms-transition: border .5s;
		transition: border .5s;
		border-bottom: 8px solid #336699;	
line-height:1em;		
	}
	
	.nav li span {display:block;}

	.nav a {
		display: block;
		width: auto;
	}

	.icone {	padding-top: 1.1em;}

	.icone + span {
		margin-top: 0.8em;
		-webkit-transition: margin .5s;
		-moz-transition: margin .5s;
		-o-transition: margin .5s;
		-ms-transition: margin .5s;
		transition: margin .5s;
	}

	/* Animating the height of the element*/
	.nav a {height: 7em;}

	.nav a:hover ,
	.nav a:active ,
	.nav a:focus {
		height: 10em;
	}	

	/* Making the text follow the height animation */
	.nav a:hover .icone + span {
		margin-top: 3.2em;
		-webkit-transition: margin .5s;
		-moz-transition: margin .5s;
		-o-transition: margin .5s;
		-ms-transition: margin .5s;
		transition: margin .5s;
	}

	.nav i {
		position: relative;
		display: inline-block;
		margin: 0 auto;
		padding: 0.4em;
		border-radius: 50%;
		font-size: 1.1em;
		box-shadow: 0 0 0 30px transparent;
		background: rgba(255,255,255,0.1);
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-transition: box-shadow .6s ease-in-out;
		-moz-transition: box-shadow .6s ease-in-out;
		-o-transition: box-shadow .6s ease-in-out;
		-ms-transition: box-shadow .6s ease-in-out;
		transition: box-shadow .6s ease-in-out;
	}	
	
	/* Animate the box-shadow to create the effect */
	.nav a:hover i,
	.nav a:active i,
	.nav a:focus i {		
		box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
		-webkit-transition: box-shadow .4s ease-in-out;
		-moz-transition: box-shadow .4s ease-in-out;
		-o-transition: box-shadow .4s ease-in-out;
		-ms-transition: box-shadow .4s ease-in-out;
		transition: box-shadow .4s ease-in-out;
	}
		
	.carregando {top:250px; left:120%;} 		
	address {float: none;}

iframe {width:98%; float:none;}
	
}

/* ESTILO PARA MONITORES COM PELO MENOS 68.750em ou 1100px  DESKTOP */

@media all and (min-width:68.750em){

	section {width:555px;}
	.carregando {left:80% !important; top: -100px !important; z-index:30;} 	
}


/* ESTILO PARA MONITORES COM PELO MENOS 85.375em ou 1366px  DESKTOP */

@media all and (min-width:85.375em){
	section {width:689px;}
	
	nav#menu { width: 660px;}
	.nav li {width: 165px;}

	.carregando {left:80% !important; top: -100px !important; z-index:30;} 	 
		
	iframe {width:55%; float:none;}

}