@charset "utf-8";
header, nav, section, article, aside, figure, footer{
	display:block;
}
.clear{
	clear:both;
}

.limpiar{
	clear:both;
}
a img{
	border:none;
}
body{
	background:#f1f1f1;
	margin:0px 30px auto;
}

/*---ESTILOS TEXTOS---*/
p.dest{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:24px;
	color:#595959;
	margin:0px;
}

p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#595959;
	line-height:20px;
	margin:0px;
}

h1{
	font-family:Arial, Helvetica, sans-serif;
	font-size:19px;
	color:#ff7200;
	margin:0px;
}

h2{
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#e46c0b;
	margin:0px;
	padding-bottom:10px;
}
/*---maquetacion---*/

#contenedor{
	width:1024px;
	margin:0 auto;
	background:#FFF;
	border-top:5px solid #595959;
}
/*---cabecera---*/
#cabecera{
	width:960px;
	margin:0 auto;
	height:147px;
}

#logo{
	width:215px;
	float:left;
	margin-top:20px;
	
}

/*---menu---*/
#menu{
	height:86px;
	float:right;
	margin-top:61px;
}
#menu ul{
	margin:0;
	padding:0;
	list-style:none;
	height:86px;
	display:block;
	background:none;
	
}

#menu li{
	float:left;
}

#menu li a{
	display:block;
	padding:0 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#26383c;
	text-decoration:none;
	padding-top:30px;
	height:56px;
}
#menu li a:hover{
	color:#FFF;
	background:#e46c0b;
	padding-top:30px;
	height:56px;
}

/*---cuerpo: nota central---*/

/*---imagen del banner---*/
.banner {
	border-bottom:10px solid #595959;
	border-top:15px solid #e46c0b;
	}
	
.banner img{
	width:1024px;
	height:249px;
}
/*---cuerpo: nota central para el texto---*/
#cuerpo{
	width:1024px;
	margin:0 auto;
}
.nota_banner{
	width:960px;
	text-align:left;
	margin:0 auto;
	padding-bottom:20px;
	border-bottom:0px solid #595959;
}

.obras-link{
	color:#e46c0b;
	font-weight:bold;
	text-decoration:none;
	font-size:14px;
	margin:0px;
}

/*---cuerpo: proyectos
.caja-proyectos{
	width:200px;
	float:left;
	border-top:1px solid #FF2F04;
	padding-top:16px;
	margin-right:50px;
}

.caja-proyectos h2{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#464646;
	margin:6px;
}

.caja-proyectos a{
	color:#848484;
	text-decoration:none;
}---*/

/*---cuerpo: servicios---*/
.servicios{
	width:960px;
	text-align:left;
	margin:0 auto;
	padding-bottom:20px;
}

.caja-servicios{
	width:290px;
	float:left;
	margin-right:45px;
	margin-bottom:20px;

}

.caja-servicios-sm{
	width:290px;
	float:left;
	margin-right:0;
	margin-bottom:20px;
}

/*---cuerpo: portfolio-rubro---*/

.caja-portfolio-rubro{
	width:290px;
	float:left;
	margin-right:45px;
	padding-top:20px;
	padding-bottom:10px;
	border-bottom:2px solid #595959;
}

.caja-portfolio-rubro-sm{
	width:290px;
	float:left;
	margin-right:0px;
	padding-top:20px;
	padding-bottom:10px;
	border-bottom:2px solid #595959;
}

.caja-portfolio-rubro a, .caja-portfolio-rubro-sm a{
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#595959;
	font-weight:bold;
	text-decoration:none;
	padding-top:20px;
	height:30px;
}

.caja-portfolio-rubro a:hover, .caja-portfolio-rubro-sm a:hover{
	color:#FFF;
	padding:0 10px;
	background:#e46c0b;
	padding-top:20px;
	height:30px;
}

/*---cuerpo: portfolio---*/
.portfolio{
	width:960px;
	text-align:left;
	margin:0 auto;
	padding-bottom:20px;
}

.titulo{
	background:#e46c0b;
	padding:10px;
	
}
.caja-portfolio{
	width:210px;
	float:left;
	margin-right:40px;
	padding-top:20px;
	padding-bottom:10px;
	border-bottom:2px solid #595959;
}

.caja-portfolio-sm{
	width:210px;
	float:left;
	margin-right:0px;
	padding-top:20px;
	padding-bottom:10px;
	border-bottom:2px solid #595959;
}

.caja-portfolio a, .caja-portfolio-sm a{
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#595959;
	font-weight:bold;
	text-decoration:none;
	padding-top:20px;
	height:30px;
}

.caja-portfolio a:hover, .caja-portfolio-sm a:hover{
	color:#FFF;
	padding:0 10px;
	background:#e46c0b;
	padding-top:20px;
	height:30px;
}

/*---cuerpo: ficha portfolio---*/

.caja-imagen-grande{
	width:600px;
	float:left;
	margin-right:40px;
}

.caja-ficha{
	width:320px;
	float:left;
	text-align:left;
	
}

.solo-ficha{
	margin-bottom:30px;
}

.solo-galeria{
	margin-bottom:20px;
}	

.caja-solo-galeria{
	width:74px;
	height:69px;
	float:left;
	margin-right:8px;
	margin-bottom:8px;
	cursor: pointer;
}	

.caja-solo-galeria-sm{
	width:74px;
	height:69px;
	float:left;
	margin-bottom:8px;
	cursor: pointer;
}

.volver {
	padding-top:10px;
	border-top:1px solid #595959;
	color:#e46c0b;
	font-weight:bold;
	text-decoration:none;
	font-size:14px;
	margin:0px;
}

/*---cuerpo: CONTACTO---*/
.contacto{
	width:960px;
	margin:0 auto;
	text-align:left;
}
.caja-formulario{
	width:310px;
	float:left;
	text-align:left;
}
input.form{
	width:310px;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:3px;
	border:1px solid #595959;
}

textarea.comentario{
	width:310px;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:3px;
	border:1px solid #595959;
	height:80px;
}

.caja-datos-contacto{
	width:500px;
	float:right;
	text-align:left;
}

/*---pie de pagina---*/
#piepagina{
	width:960px;
	padding-top:20px;
	padding-bottom:20px;
	text-align:left;
	margin:0 auto;
}


	/******************************************/
/***    DISEÑO PARA TABLETAS  iphone         ****/
/******************************************/
@media only screen and (max-width:1024px){
	body{
		margin:0 auto;
	}
	
}
	/******************************************/
/***    DISEÑO PARA TABLETAS           ****/
/******************************************/
@media only screen and (max-width:768px){
	body{
		margin:0 px 15px;
	}

	/*---maquetacion---*/
	#contenedor{
		width:100%;
	}
	/*---cabecera---*/
	#cabecera{
		height:auto;
		width:94%;
	}



	/*---banner imagen---*/
	
	.banner img{
		width:100%;
		height:auto;
	}
	/*---cuerpo---*/
	#cuerpo{
		width:100%;
		
	}
	.nota_banner{
		width:94%;
		text-align:left;
	}

	
	/*---cuerpo: servicios---*/
	.servicios{
		width:94%;
		margin:0 auto;
	
	}
		.caja-servicios{
		width:100%;
		
		
		
	}
	
	.caja-servicios-sm{
		width:100%;
		
		}
	
	/*---cuerpo: portfolio rubros---*/
	.caja-portfolio-rubro{
		width:65%;
		float:none;
		margin-right:none;
		padding-bottom:10px;
		border-bottom:2px solid #595959;
		text-align:left;
		margin:auto;
		padding-top:20px;
	
		}
	
	.caja-portfolio-rubro-sm{
		width:65%;
		float:none;
		margin-right:none;
		padding-bottom:10px;
		border-bottom:2px solid #595959;
		text-align:left;
		margin:auto;
		padding-top:20px;
		}

	/*---cuerpo: portfolio---*/
	.portfolio{
		width:94%;
		margin:0 auto;
		text-align:center;
	}
	
	.caja-portfolio{
		width:60%;
		float:none;
		margin-right:none;
		padding-bottom:10px;
		border-bottom:2px solid #595959;
		text-align:left;
		margin:auto;
		padding-top:20px;
	
		}
	
	.caja-portfolio-sm{
		width:60%;
		float:none;
		margin-right:none;
		padding-bottom:10px;
		border-bottom:2px solid #595959;
		text-align:left;
		margin:auto;
		padding-top:20px;
		}

	/*---cuerpo: ficha portfolio---*/
	
	.caja-imagen-grande{
		width:60%;
		float:none;
		margin:0 auto;
		}
	
	.caja-ficha{
		width:60%;
		float:none;
		text-align:left;
		margin-left:none;
		margin:0 auto;
		padding-top:30px;
		}	
	
	.caja-solo-galeria-sm{
		margin-right:8px;
		}		
	
/*---cuerpo: CONTACTO---*/
	.contacto{
		width:94%;
	}
	.caja-formulario{
		width:100%;
		float:none;
		text-align:left;
		margin-bottom:30px;
	}
	
	.caja-datos-contacto{
		width:100%;
		float:none;
		text-align:left;
	}

/*---pie de pagina---*/
	#piepagina{
		width:94%;
		
	}
	
	.nombre{
		width:100%;
		text-align:center;
		padding-bottom:10px;
		margin:0 auto;
	}

}

/******************************************/
/***    DISEÑO PARA MOVILES TABLETAS CHICAS IPHONE 640       ****/
/******************************************/
@media only screen and (max-width:640px){
	/*---pie de pagina---*/
	.nombre{
		width:100%;
		text-align:center;
		padding-bottom:10px;
		margin:0 auto;
	}
}
	
/******************************************/
/***    DISEÑO PARA MOVILES 480        ****/
/******************************************/
@media only screen and (max-width:480px){
	body{
		margin:0 px 8px;
	}
	/*---maquetacion---*/
	
	#logo{
		width:100%;
		margin:0 auto; 
		float:none;
		text-align:center;
		padding-top:20px;
		}
	/*---menu---*/
	#menu{
		width:100%;
		float:none;
		margin-top:15px;
	}
	
	#menu ul{
		width:auto;
		height:auto;
		display:block;
		background:none;
		
	}
	
	#menu li{
		float:none;
		
	}
	
	#menu li a{
		display:block;
		padding:0 11px;
		font-family:Arial, Helvetica, sans-serif;
		background:#26383c;
		font-size:14px;
		color:#fff;
		text-decoration:none;
		padding-top:8px;
		height:22px;
		text-align:center;
		margin-bottom:1px;
		
	}
	#menu li a:hover{
		color:#FFF;
		background:#c73130;
		padding-top:8px;
		height:22px;
	}
	/*---banner imagen---*/
	.banner {
		border-bottom:none;
		border-top:none;
	}
	.banner img{
		display:none;
	}
		
	/*---cuerpo---*/
	h2{
		font-family:Arial, Helvetica, sans-serif;
		font-size:21px;
		color:#c7302f;
		margin:0px;
	}
	
	p.dest{
		font-family:Arial, Helvetica, sans-serif;
		font-size:14px;
		line-height:20px;
		color:#26383c;
		margin:0px;
}

	p{
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#26383c;
		line-height:18px;
		margin:0px;
	}

	h1{
		font-family:Arial, Helvetica, sans-serif;
		font-size:18px;
		color:#0b6e38;
		margin:0px;
	}
	/*---cuerpo: portfolio---*/	
	
	.portfolio{
		padding-top:10px;
	}
	
	.caja-portfolio{
		width:80%;
		float:none;
		margin-right:none;
		padding-bottom:10px;
		border-bottom:2px solid #595959;
		text-align:left;
		margin:auto;
		padding-top:20px;
	
		}
	
	.caja-portfolio-sm{
		width:80%;
		float:none;
		margin-right:none;
		padding-bottom:10px;
		border-bottom:2px solid #595959;
		text-align:left;
		margin:auto;
		padding-top:20px;
		}
	
	/*---cuerpo: ficha portfolio---*/
	
	.caja-imagen-grande{
		width:80%;
		float:none;
		margin:0 auto;
		}
	
	.caja-ficha{
		width:80%;
		float:none;
		text-align:left;
		margin-left:none;
		margin:0 auto;
		padding-top:30px;
		}	
	
	.caja-solo-galeria-sm{
		margin-right:8px;
		}		

	/*---cuerpo: CONTACTO---*/
	.contacto{
		padding-top:10px;
	}


	/*---pie de pagina---*/

	
	
}
/******************************************/
/***    DISEÑO PARA MOVILES 320        ****/
/******************************************/
@media only screen and (max-width:320px){
	
	#logo img{
		width:60%;
		height:auto;
	}


}
/******************************************/
/***    DISEÑO PARA MOVILES 240        ****/
/******************************************/
@media only screen and (max-width:240px){
	body{
		margin:5px;
	}
}