@charset "UTF-8";
@media all and (max-width:1280px){
	/* HEADER */
		header nav#menu-desktop ul li{font-size:16px; line-height:22px; width:12%; padding-top:22px;}
			header nav#menu-desktop ul li.plano{width:250px; padding-top:12px;}
			header nav#menu-desktop ul li.avances{width:206px; padding-top:12px;}		
}

@media all and (max-width:1230px){
	/* HEADER */
		header nav#menu-desktop ul li{font-size:14px; line-height:20px; width:12%; padding-top:24px;}
			header nav#menu-desktop ul li.plano{width:210px; padding-top:13px;}
			header nav#menu-desktop ul li.avances{width:160px; padding-top:13px;}		
}

@media all and (max-width:1130px){
	/* PLANO DE LOTIFICACION */
	section#plano h3{font-size:20px; margin-bottom:50px;}
	section#plano .imagen-principal{margin-bottom:0px;}
		section#plano .contenedor-info{margin-bottom:0px; padding:30px;}
		section#plano .contenedor-info .consultar{color:rgba(79,66,83,1); font-size:20px; line-height:33px;}
			section#plano .contenedor-info ul{display:inline-block; vertical-align:top; width:100%;}
				section#plano .contenedor-info ul li{width:40% !important; display:inline-block;max-width:50%; box-sizing:border-box; padding-top:15px;}
				section#plano .contenedor-info ul li:first-child{width:50% !important; margin-right:0px;max-width:50% !important;  padding-top:0px;}
					section#plano .contenedor-info ul li:first-child img{margin:0 auto; display:block;}
				section#plano .contenedor-info ul li:last-child{max-width:100% !important; width:100% !important; margin:0 auto; margin-top:20px; font-size:19px;margin-left:0px; padding:30px; box-sizing:border-box; line-height:22px; text-align:center;}
		
		section#plano .contenedor-mapa{background:rgba(238,238,238,1); padding:30px; box-sizing:border-box; margin-bottom:100px;}
		section#plano .ver-disponibilidad{margin:0 auto; display:block; margin-bottom:50px;}
		section#plano .nota{text-align:center; margin-bottom:104px; color:rgba(79,66,83,1); font-size:18px;}
}

@media all and (max-width:1110px){
	/* SECCION NOSOTROS */			
	section#nosotros div.caja{margin-bottom:0px; box-sizing:border-box;}
		section#nosotros div.caja1, section#nosotros div.caja2, section#nosotros div.caja3{height:auto; padding:50px 30px;}
			section#nosotros div.caja1 p, section#nosotros div.caja2 p, section#nosotros div.caja3 p{padding:0px; font-size:22px; line-height:30px; text-align:center; margin:0 auto; display:block; margin-top:30px;}
			section#nosotros div.caja2 p img{display:block; margin:0 auto; margin-top:25px;}
		section#nosotros div.caja3{height:auto; padding:30px; margin-bottom:50px !important;}
			section#nosotros div.caja3 p img{display:block; margin:0 auto; margin-top:25px;}
	section#nosotros img.big-right{display:none;}
	section#nosotros img.big-left{display:none;}
	section#nosotros .inicio-resp{display:block; margin:0 auto;}
}

@media all and (max-width:1024px){
	/* HEADER */
		header nav#menu-desktop ul li{font-size:12px; line-height:18px; width:12%; padding-top:26px;}
			header nav#menu-desktop ul li.plano{width:180px; padding-top:16px;}
			header nav#menu-desktop ul li.avances{width:145px; padding-top:16px;}	
}

/* MENU RESPONSIVO */
/* Esto simplemente es para que nuestro nav (responsive-menu) aparezca a la izquierda (left) */
#responsive-menu{
	display:none;
	float: left;
	background:none;
	margin-top:-7px !important;
}
 
/* Quitamos estilos predeterminados de la etiqueta UL (margen, relleno, estilo de lista y tamaño de letra)  */
#responsive-menu ul{
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
}

#responsive-menu li:first-child{
	margin-top:0px;	
}
 
#responsive-menu li{
	background:rgba(0,0,0,1);
	color:rgba(255,255,255,1);
	display: inline;
	float: left; 
	text-transform: uppercase;
	text-align: center;
}
 
/* Añadimos estilo a los enlaces */
#responsive-menu li a{
	display: block; 
	color:rgba(0,0,0,1); 
	text-decoration: none; 
	line-height: 100px;
	width:100%;
	text-align:center;
}
 
#responsive-menu li a:hover{
	background:rgba(255,255,255,1); /* Color de fondo de cada elemento al pasar el cursor */
	color:rgba(0,0,0,1); /* Color de letra al pasar el cursor */
}
 
#nav-responsive{
	display: none; /* Ocultamos el enlace */
	background: url(../img/responsive.png) no-repeat 25px 40px; /* Imagen que desplegará el menú al hacer click */
	background-size:48px 26px;
	text-decoration: none; /* Sin subrayado */
	float: right; /* Flotado a la derecha */
	width: 80px; /* Ancho */
	height:100px; /* Alto */
	position: absolute;
	right: 27px; /* Derecha */
	top:-5px; /* Arriba */
	opacity: 1; /* Opacidad */ 
}
 
 
/* Agregaremos la clase .nav-active al enlace #nav-responsive, cuando el menu esté desplegado */
#nav-responsive.nav-active{
	width:117px;
	right:0;
	background:rgba(243,235,218,0.2) url(../img/responsive.png) no-repeat 35px 42px;
	background-size:48px 26px;
	height:100px;
	padding-bottom:10px;
	opacity: 1; /* Opacidad */
	margin-top:-2px !important;
}
 
@media all and (max-width:930px){
/* PRECIOS */
	section#precios h3{font-size:18px; margin-bottom:0px; padding:30px; box-sizing:border-box;}
	section#precios p.contacto{font-size:18px; padding:57px 52px;  margin:0 auto; margin-top:100px;}
	section#precios p.aviso{font-size:18px; margin:75px 0px 110px 0px;}
		section#precios table.precios-1 tr td:first-child{padding:26px 50px;}
		section#precios table.precios-1 tr:first-child td{font-size:21px;}
		section#precios table{font-size:18px;}
		section#precios .fondo-col1{font-size:21px;}
		section#precios table.precios-2{margin-top:100px;}
		section#precios table.precios-2 tr:first-child td{padding:26px 10px;}
			section#precios table.precios-2 tr.first-row td{font-size:21px;}
			section#precios table.precios-2 table.five-rows{padding:0; margin:0 auto;}
			section#precios table.precios-2 table.five-rows td{padding:26px 10px;}

}

/* A partir de aquí, vista móvil */
@media all and (max-width:900px){
	/* SECCION INICIO */
	section#inicio{overflow:hidden;}
		section#inicio h2{float:none;}
			section#inicio .slider-holder .contenedor p{font-size:20px; line-height:32px;}
			
	#responsive-menu{display:block;}
	/* MENU */
	#menu-desktop{display:none;	}
	/* Mostramos el enlace que desplegará el menú (#nav-responsive) */
	#nav-responsive{display: block;}
	 
	#responsive-menu{
		display:inline;
		width: 117px; /* Ancho (vista móvil) */
		float: right; /* Dejamos de flotar el menú ya que el ancho es 100% */
		padding-top: 0px; /*Relleno por arriba a partir del cual se mostrarán los elementos <li> */
		
	}
	 
	#responsive-menu ul{
		position:absolute;
		margin-top:22px;
		box-shadow: 0 1px 2px rgba(0,0,0,.5); /* Sombra al menú */
		max-height: 0;
		overflow: hidden;
		z-index:1002;
		background:rgba(255,255,255,1);
		width:117px;
	}
	/* Añadimos estilo a cada elemento <li> (Vista móvil) */
	#responsive-menu li{
		background:rgba(79,66,83,0.9); /* Color de fondo */
		color:rgba(0,0,0,1); /* Borde inferior tamaño-tipo-color */
		float: none;
		display: block;
		border-bottom:1px solid rgba(255,255,255,0.3);
	}
	
	#responsive-menu li:last-child{
		border-bottom:0px solid rgba(0,0,0,1);	
	}
	
	/* Estilos para los enlaces (Vista móvil) */
	#responsive-menu li a{
		font-weight:400;
		font-size:11px;
		padding: 10px 5px 10px 5px;
		box-sizing:border-box;
		color:rgba(255,255,255,1);
		height: auto;
		line-height: normal;
		width:117px;
	}
	#responsive-menu li a:hover{color:rgba(0,0,0,1);/* Color de fondo para cada enlace al pasar el cursor */}
	#responsive-menu ul.open-responsive-menu{max-height: 600px; /* Máximo alto para el menú desplegado */transition: max-height .5s; /* Efecto en el despliegue del menú */}
	/* FIN MENU */
	
	/* HEADER */
header{background:rgba(79,66,83,1); width:100%; height:100px;}
	header h1{margin:0; display:block; padding:15px 0 0px 30px;}
		header h1 img{margin:0; display:block; height:70px;}
	
	/* SECCIONES */
	section#aviso h2, section#contacto h2, section.proyecto h2, section#nosotros h2, section#inicio h2, section#plano h2, section#avances h2, section#precios h2, section#ubicacion h2{margin:0 auto; margin-top:50px; margin-bottom:50px; padding:0; max-width:90%;}
	
	/* CONTACTO */
	section#contacto .imagen-principal{margin-bottom:0px;}
	section#contacto .llama-ahora{ margin-bottom:0px;}
	section#contacto .ejecutivos{margin-bottom:0px; text-align:center;}
}

@media all and (max-width:770px){
	/* CONTACTO */
			section#contacto .llama-ahora{text-align:center;}
			section#contacto .llama-ahora p{margin:0 auto; clear:both; display:block;}
	/* AVANCES */
	section#avances .big-box{margin-bottom:50px; padding:0px;}
		section#avances .big-box p{height:auto;margin-bottom:4px;}
		section#avances .ver-video{margin-bottom:50px; max-width:90%;}
	/* PROYECTO */
	section.proyecto .big-box{margin-bottom:0px;}
		section.proyecto .big-box p{font-size:20px; padding:30px;}
		.primera-linea{padding:30px 30px 0px 30px !important;}
	section.proyecto .big-box2{margin-bottom:50px;}
		section.proyecto .big-box2 ul{margin-bottom:40px;}
			section.proyecto .big-box2 ul li{font-size:20px; margin:60px 0px 0px 0px;}
				section.proyecto .big-box2 ul li p{line-height:25px; margin-top:20px;}
	section.proyecto .ir-a-galeria{margin:0 auto; display:block; margin-bottom:50px; margin-top:50px; max-width:90%;}
}

@media all and (max-width:700px){
	/* PRECIOS */
	section#precios h3{font-size:16px; margin-bottom:0px; padding:30px; box-sizing:border-box;}
	section#precios p.contacto{font-size:16px; padding:30px;  margin:0 auto; margin-top:50px; text-align:center;}
	section#precios p.aviso{font-size:16px; padding:30px; margin:20px;}
		section#precios table.precios-1 tr td:first-child{padding:10px 20px;}
		section#precios table.precios-1 tr:first-child td{font-size:14px;}
		section#precios table{font-size:12px;}
		section#precios .fondo-col1{font-size:12px;}
		section#precios table.precios-2{margin-top:50px;}
		section#precios table.precios-2 tr:first-child td{padding:10px 10px;}
			section#precios table.precios-2 tr.first-row td{font-size:14px;}
			section#precios table.precios-2 table.five-rows{padding:0; margin:0 auto;}
			section#precios table.precios-2 table.five-rows td{padding:26px 10px;}
			section#precios .tabla-desktop{display:none;}
			section#precios .tabla-responsive{display:table; width:100% !important; max-width:100%;}
			
	/* SECCION INICIO */
		section#inicio .slider-holder{margin-bottom:50px;}
			section#inicio .slider-holder .contenedor{background:rgba(79,66,83,1);}
			section#inicio .slider-holder .contenedor p{padding:30px;padding-top:50px; text-align:center; font-size:16px; line-height:26px;}
			
	/* FOOTER */
	footer div.footer-top{height:85px;}
	footer div.footer-bottom{font-size:14px; letter-spacing:1px;}
		footer ul.redes-sociales li{float:left; height:85px; display:inline-block; text-align:center; padding-top:23px; box-sizing:border-box;}
	footer div.telefono{float:left; padding-top:19px; margin-left:30px;}
	footer div.telefono img{width:200px;}
}

@media all and (max-width:600px){
	/* PLANO */
	section#plano .contenedor-mapa{margin-bottom:50px;}
	section#plano h3{font-size:16px;}
	section#plano .contenedor-info ul li{width:100% !important; display:inline-block;max-width:100%; box-sizing:border-box; padding-top:15px; text-align:center;}
				section#plano .contenedor-info ul li:first-child{width:100% !important; margin-right:0px;max-width:100% !important;  padding-top:0px; text-align:center; margin-bottom:20px;}
				section#plano .contenedor-info ul li:last-child{max-width:100% !important; width:100% !important; margin:0 auto; margin-top:20px; font-size:16px;margin-left:0px; padding:30px; box-sizing:border-box; line-height:20px; text-align:center;}
	/* NOSOTROS */
	section#nosotros div.caja1 p, section#nosotros div.caja2 p, section#nosotros div.caja3 p{font-size:16px; line-height:24px;}
	/* CONTACTO */
	section#contacto .llama-ahora{padding:20px;}
	section#contacto .llama-ahora img{width:80px;}
	section#contacto .llama-ahora p{font-size:18px; margin-top:-22px;}
	section#contacto .ejecutivos{font-size:16px; padding:25px 25px;}
	section#contacto .formulario{padding:40px 30px;}
			section#contacto .formulario input[type=text]{height:40px; margin-bottom:40px; margin-top:15px; font-size:18px;}
		section#contacto input[type=image]{margin-top:55px; margin-bottom:66px;}
		section#contacto .formulario textarea{height:150px; margin-top:15px; margin-bottom:50px; font-size:18px;}
		section#contacto .formulario label{font-size:18px;}
		section#contacto .formulario .leido{font-size:14px;}
		section#contacto .formulario select{height:40px; margin-bottom:40px; margin-top:15px; font-size:18px;}
	
	/* UBICACION */
	section#ubicacion .big-box h3{font-size:14px; padding:30px;}
			section#ubicacion .big-box p{padding:30px; font-size:14px;}
			section#ubicacion .big-box .gmap{ padding-bottom:0px;}
			section#ubicacion .big-box .gmap .google-map{height:220px;}
	section#ubicacion .descarga-plano{margin-bottom:50px; margin-top:50px; max-width:90%;}
	
	/* PROYECTO */
	section.proyecto .big-box p{font-size:14px; line-height:21px;}
			section.proyecto .big-box2 ul li{font-size:16px !important;}
			
	section#aviso .big-box{margin-bottom:68px; padding:30px;}
		section#aviso .big-box p{font-size:14px; line-height:28px; margin-bottom:28px; text-align:justify;}
	
}

@media all and (max-width:530px){
	/* FOOTER */
	footer div.footer-bottom{font-size:10px; letter-spacing:0px;}
		footer ul.redes-sociales{float:none; margin-top:20px;; padding:0;}
		footer ul.redes-sociales li{float:left; width:30%; height:85px; display:inline-block; text-align:center; padding-top:23px; box-sizing:border-box;}
		footer ul.redes-sociales .facebook{background:rgba(79,66,82,1);}
		footer ul.redes-sociales .youtube{width:40%;}
	footer div.telefono{float:none; padding-top:19px; margin:0 auto;}
	footer div.telefono img{width:200px;margin:0 auto; display:block;}
	footer p.aviso{float:left; margin-left:20px;}
	footer p.derechos{float:right; margin-right:20px;}
	footer div.footer-bottom{background:rgba(209,208,206,1); height:45px; line-height:45px;}
}

@media all and (max-width:400px){
	
}