@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'CousineRegular';
    src: url('Tipografia/Cousine-Regular-Latin-webfont.eot');
    src: url('Tipografia/Cousine-Regular-Latin-webfont.eot?#iefix') format('embedded-opentype'),
         url('Tipografia/Cousine-Regular-Latin-webfont.woff') format('woff'),
         url('Tipografia/Cousine-Regular-Latin-webfont.ttf') format('truetype'),
         url('Tipografia/Cousine-Regular-Latin-webfont.svg#CousineRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'WinterthurCondensedRegular';
    src: url('Tipografia/WinterthurCondensed-webfont.eot');
    src: url('Tipografia/WinterthurCondensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('Tipografia/WinterthurCondensed-webfont.woff') format('woff'),
         url('Tipografia/WinterthurCondensed-webfont.ttf') format('truetype'),
         url('Tipografia/WinterthurCondensed-webfont.svg#WinterthurCondensedRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

ol, ul {
	list-style:none;
	padding:0px; margin:0px;
	display:block;
}
html {}
body {
	background:#EEE url(IMG/generales/lineasDiagonales.png) center top;
	margin-top:0px;
	margin:0px auto 0px auto;
	width:720px;
	font-family: 'CousineRegular', Arial, sans-serif;
	overflow-y:hidden;
	min-height:650px;
	line-height:110%;
}

/* footer + header */
nav ol li, footer ol li {
	display:block;
	float:left;
	margin-right:30px;
}

.HFtrans {
	height:15px; width:100%;
	display:block;
	background: url(IMG/generales/lineasDiagonales.png) 
}

header, footer {
	overflow:auto;
	font: 15px 'CousineRegular', Arial, sans-serif;
	position: fixed;
	width:720px;
	z-index:100;
}

/* header */

header {background:#C7582E url(IMG/generales/lineasDiagonales.png);}
	header .HFtrans {background: url(IMG/generales/HFtrans.png);}
	nav {
		background:url(IMG/logo/logo.png) left no-repeat;
		height:43px;
		padding:112px 0px 0px 0px;
		margin-left:20px;
		display:block;
		position:relative;
	}
		#hidrovialTxt {
			position:absolute;
			bottom:6px; left:-10px;
			text-transform:uppercase;
			font-size:10px;
			color:#EEE;
			width:70px;
			text-align:center;
		}
		nav ol { float:left; margin-left:100px;}
			nav ol li {
				display:block;
				float:left;
				margin-right:50px;
			}
				nav ol li a {
					color:#FFF;
					text-decoration:none;
					text-transform:uppercase;
					font-size:13px;
					line-height:15px;
				}
				
				#marcador {
					background:url(IMG/generales/marcadorlineas.png) center;
					position:fixed; top:132px; margin-left:122px;
					height:7px; width:55px
				}

/* Footer*/
footer {
	background:#CCC url(IMG/generales/lineasDiagonales.png);
	bottom:0px;
}
	footer .HFtrans {background: url(IMG/generales/HFtrans.png);}
	
	footer ol {	margin: 5px 0px 0px 116px;}
		footer ol li, footer ol li a {
			text-decoration:none;
			color:#666;
			font-size:10px;
			line-height:30px;
		}

			
/* columnas w110 s12 */
.colPrim { margin-left:0px !important;}
.colLast { margin-right:0px !important;}
.unaCol, .dosCol, .treCol {margin:0px 6px 0px 6px; float:left;}
	.unaCol {width:110px;}
	.dosCol {width:234px;}
	.treCol {width:360px;}

/* slide */
#slide {
	position:absolute;
	left:0px;
	z-index:1;
	margin-top:200px;
}
	#slide article {
		display:block; float:left;
		height:inherit;
		width:auto;
	}
	#slide article .anchoPag {
		margin:0px auto 0px auto;
		padding-left:360px;
		width:360px;
		overflow:visible;
		position:relative;
	}
	#slide article#obras .anchoPag {width:1210px;}
	#slideInception {
		top:200px;left:0px;
		position:fixed;
	}
/* paginas particulares */
article {
	font-size:12px; }
article h1 {
	font-size:25px;	line-height:25px;

	height:25px; display:block; clear:both; overflow: visible;

	border-bottom:4px solid #000;
}
	article h1 span {
		border-bottom:10px solid #000;
	}
	article h2 {padding-top:20px;}
article p {
	clear:both;
	padding-top:15px;	
}

.Pempresa 		{background:url(IMG/secciones/empresa/main.png);}
.Pservicios 	{background:url(IMG/secciones/servicios/main.png);}
.Pobras	 		{background:url(IMG/secciones/obras/main.png);}
.Pequipamiento	{background:url(IMG/secciones/equipamiento/main.png);}
.Pcontacto	 	{background:url(IMG/secciones/contacto/main.png);}
	#metro {
		position:absolute;
		display:block;
		left:80px;
		top:40px;
	}
		img.metro {
			position:absolute;
			top:0px;
		}
.Pempresa, .Pservicios, .Pobras, .Pequipamiento, .Pcontacto { background-repeat:no-repeat; background-position:left top;}
	.Pcontacto div.dosCol {
		float:right;
		width:270px;
		padding-left:40px;
		padding-top:10px;
	}
	.Pcontacto form.dosCol {
		float:right;
		padding-top:10px;
		overflow:auto;
	}
	.Pcontacto .dir, .Pcontacto .tel, .Pcontacto .ema {
		margin:5px 0px 5px 0px;
		border-bottom:1px solid #CCC;
		padding:5px 0px 5px 30px;
	}
	.Pcontacto .dir {
		background:url(IMG/secciones/contacto/dir.png) left center no-repeat;
	}
	.Pcontacto .tel {
		background:url(IMG/secciones/contacto/tel.png) left center no-repeat;
	}
	.Pcontacto .ema {
		background:url(IMG/secciones/contacto/ema.png) left center no-repeat;
	}
	.Pcontacto form.dosCol label { display:block; overflow:auto; margin-bottom:5px;}
	.Pcontacto form.dosCol input, .Pcontacto form.dosCol textarea, #submitForm{
		float:right;
		width:150px;
	}
		input.submitFormBtn {
			border:0; 
			padding:0; 
			color: inherit; 
			background:transparent;
			width:auto !important;
			margin-right:110px;
		}
		#mensaje {
			background-color: #F90;
			color:#FFF;
			font-family:Arial, Helvetica, sans-serif;
			text-transform:uppercase;
			font-weight:bold;
			font-size:12px;
			width:225px;
			padding:10px;
			position:relative;
			display:none;
			margin-top:10px;
		}
			#dialogArrow {
				position:absolute;
				bottom:-16px;
				left:20px;
				background:url(IMG/secciones/contacto/arrowDialog.png);
				width:16px; height:16px;
				border:#000;
			}
footer span { width:100%; display:inline-block; font-size:10px; overflow:hidden;}


/* obras */
/* Galeria */
article#obras {}
.obrasInfo {
	width:360px;
	float:left;
	margin-right:85px;
}
	.obrasClientes {
		float:left;
		margin-top:-13px;
		width:750px !important;
	}
	.obrasClientes h2 {border-bottom:4px solid #333; font-size:14px; margin-bottom:10px; width:100%; display:block}
	.obrasClientes h2 span { color:#333; padding:4px;}
	
	.obrasClientes ol li {
		width:354px;
		display:block; float:left;
		margin-right:12px;
	}
#galeria {
	position:relative;
	height:220px;
	width:1210px;
	overflow:visible;
	clear:both;
}
#galeria img {
	padding:0px; margin:0px; border:none;
	display:block; float:left;
	cursor:pointer;
}
.dosXdos, .tresXdos, .cuatroXdos {
	display:block; float:left;
	height:220px;
}
.dosXdos {
	width:220px;
}
.tresXdos {
	width:330px;
}
.cuatroXdos {
	width:440px;
}
#infoLayer {
	font:'WinterthurCondensedRegular', Arial, sans-serif;
	background-image:url(IMG/generales/negro80.png);
	width:100px;
	padding: 10px 10px 0px 110px;
	height:210px;
	position:absolute;
	display:none;
	text-align: left;
	color:#FFF;
	cursor: pointer;
	line-height:100%;
	z-index:2000;
}
	#infoCat { font-size:10px; text-transform:uppercase; color:#CCC;}
	#infoTit { font-size:12px; text-transform:uppercase; font-weight:bold; min-height:70px;}
	#infoEtc { font-size:10px; font-weight:normal; color:#CCC; line-height:12px;}
	#infoDon { margin-top:7px;}
	#infoCom { margin-bottom:7px;}
	#infoDon, #infoCom { text-indent:-13px;font-size:11px;}
	#infoQue { text-indent:-13px;font-size:10px; text-transform:uppercase; color:#CCC;}
	
	#infoLayer a {
		padding:5px;
		background-color:#FFF;
		position:absolute;
		right:5px; bottom:5px;
	}

/* personajes */
img#carretilla {
	position:absolute; display:block;
	top:302px; left:0px;
}
img#carretillaRueda {
	position:absolute; display:block;
	top:357px; left:70px;
}

div#camino {
	display:block; position:absolute;
	top:240px; left:0px;
	width:340px;
	}
	div#caminoPlano {
		width:100px;
		float:left;
		background:url(IMG/animaciones/gifs/caminoPlano.png) repeat-x bottom;
	}
	div#aplanadora {
		float:right; position:relative;
		width:95px;
		height:54px;
	}
	div#caminoRugoso {
		float:left;
		width:240px;
		height:54px;
		background:url(IMG/animaciones/gifs/caminoRugoso.png) repeat-x bottom left;
	}
	img#aplandoraRuedaG {
		position:absolute; display:block;
		top:21px; left:60px;
		}
	img#aplandoraChasis {
		position:absolute; display:block;
		top:0px; left:0px;
		}
	img#aplandoraRuedaC {
		position:absolute; display:block;
		top:25px; left:18px;
		}
/* palamecanica */
#palamecanica {
	position:absolute; display:block;
	top:113px; left:1px;
	height:100px; width:340px;
}
	#palamecanica #maquina {
		position:absolute;
		height:100px;
		}
		#palamecanica #palaRuedas {
			position:absolute;
			height:13px; width:78px;
			bottom:0px;
		}
			#palamecanica .palaRueda {
				display:block; float:left;
				background:url(IMG/animaciones/gifs/palamecanica/rueda.png);
				height:9px; width:9px;
				margin-top:3px;
				margin-left:5px;
			}
		#palamecanica #cuerpo {
			position:absolute; bottom:0px;
			background:url(IMG/animaciones/gifs/palamecanica/maquina.png);
			width:78px;
			height:45px;
		}
		#palamecanica #pala {
			position:absolute; top:6px; left:45px;
			background: url(IMG/animaciones/gifs/palamecanica/anim.png) top left;
			width:110px; height:90px
		}

/* asfaltodora */
div#ruta {
	display:block; position:absolute;
	top:252px; left:180px;
	width:400px;
	z-index:2000;
	}
	div#rutaPlano {
		width:100px;
		float:left;
		background:url(IMG/secciones/obras/ruta.png) bottom left repeat-x;
	}
	div#asfaltadora {
		float:right; position:relative;
		width:95px;
		height:54px;
	}
	img#asfaltadoraRuedaG {
		position:absolute; display:block;
		top:21px; left:60px;
		}
	img#asfaltadoraChasis {
		position:absolute; display:block;
		top:0px; left:0px;
		}
	img#asfaltadoraRuedaC {
		position:absolute; display:block;
		top:25px; left:18px;
		}