* { /* estilos universales para todos los elementos */
	margin:0;
	padding:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

  	.altura 
  	{ 
 	  height:50px;
	}
	
div#padre {
	 height:100%px;
	 width:100%;
		/*background-color:#4f4f4f;*/
}
	div#left {
		float:left;
		height:28px;
		width:5%;
		margin-right:-5px;
		/*background-color:#c39;*/
	}
	
	div#right {
		float:left;
		width:95%;
		height:28px;
		/*background-color:#cc6;*/
	}
 
body {
	background:#FFFFFf;}
    .logo {
        width:20%;
        max-width:100%;
	  margin-top: 50px;
    }
    .logopie {
        width:70%;/*50*/
        max-width:100%;
    }    
    p.espacio {
        display: block;
    }	
.menu_bar { 
	display:none;  /* desaparece menu bar*/
	}

    .cuerpo {
        width:100%;
        max-width:100%;
			  margin-top: 50px;
	  margin-bottom: 50px;

    }

    .cuerpito {
        width:80%;
        max-width:80%;
    }

	.pie {
        width:100px;
        height:100px;
        max-width:90%;
    }

    .fondo{
	background-color: #FFBA53;/*#ECF8C7*/
	}  

    .fondopie{
	background-color: #024959;/*#ECF8C7*/
	font-family: Arial, Helvetica, sans-serif;
	font-size:20px;
	color:#ffffff;
	}  

  	.textop 
  	{ font-family: GeosansLight, Arial, Helvetica, sans-serif;
	  font-size:70px;
	  color:#000000;
	}
.dos-colum {
 width: 40%; 
display: inline-block;
}
.two-columnas {
width: 100%; 
display: inline-block;
}
.three-columns {
width: 32%;
display: inline-block;
}
.tres-colum{
width: 25%;
display: inline-block;
	  font-family: Arial, Helvetica, sans-serif;
	  font-size:20px;
background-color: #FFBA53; /*#ECF8C7*/
	  color:#000000;
	  text-align: justify;
/*  margin-top: 10px; */
  margin-right: 20px;
/*  margin-bottom: 10px; */
  margin-left: 20px;
}
.two-columns {
width: 32%;
display: inline-block;
}	
    iframe {
        width:1366px;
        height:1000px;
    }


	
  	.etiq
  	{ font-family: Arial, Helvetica, sans-serif;
/*	  font-weight:bold;*/
	  font-size:20px;
	  color:#000000;
	  text-align: justify;
	  margin-top: 20px;
      margin-right: 150px;
	  margin-bottom: 20px;
	  margin-left: 150px;
	}
  	.etiqf
  	{ font-family: Arial, Helvetica, sans-serif;
/*	  font-weight:bold;*/
	  font-size:20px;
	  color:#000000;
	  margin-top: 20px;
      margin-right: 150px;
	  margin-bottom: 20px;
	  margin-left: 150px;
	}

  	.etitulo 
  	{ font-family: Arial, Helvetica, sans-serif;
/*	  font-weight:bold;*/
	  font-size:50px;
	  color:#000000;
	}

	
  	H1 
  	{ font-family:GeosansLight, Arial, Helvetica, sans-serif;
	  /*font-weight:bold;*/
	  font-size:35px;
	  color:#000000;
	}	

.fotocliente {
    display: block;
}
header {
	width:100%;
}
 
header nav {
	background:#024959;/*#97C21B*/

	z-index:1000;  /* el menu va estar arriba de los demas elementos*/
/*	max-width:1000px; */ /* maximo ancho del menu en pantalla normal */
	width:100%; /* el menu ocupara el 90% del ancho de cualquier pantalla */
/*	margin:20px auto; */ /* es la distancia del menu al borde superior de la pantalla y auto es para centrarlo */
	position: fixed;
}
 
header nav ul {
/*	overflow:hidden;*/
	list-style:none; /* para q a todos los elementos ul que estan dentro del nav quitarles los listados*/
}
 
header nav ul li {
	display: inline-block; /* mostrar el menu de manera lineal */
	position: relative; /*relative, siempre se coloca para el menu (padre)*/
    font-family:century-gothic, Arial, Helvetica, sans-serif;  /*************+DETERMINA EL TIPO DE LETRA DEL MENU**************/
    font-size:16px;
    }
 
header nav ul li a:hover { /* cambia el color de fondo del boton menu cuando mouse pasa por encima*/
	background:#037E8C;/*#806D4A*/
}

header nav ul li a {
	color:#fff;
	display:block;
	text-decoration:none;
	padding:20px;
	
}
 
header nav ul li a span { /*para separar iconos de menus*/
	margin-right:10px;
}
 
header nav ul li:hover .children{	/*para mostrar las clases children (sub menus ej. proyectos en venta) cuando el mouse pase por encima*/
	display: block;
}

header nav ul li .children{	
	display: none; /*para ocultar las clases children (sub menus ej. proyectos en venta) */
	background:#011826;
	position:absolute; /* absolute, siempre se coloca para los submenus (hijos)*/
	width:150%; /* para que su ancho sea un 150% mas que el tamaņo del padre*/
	z-index:1000;
} 

header nav ul li .children li{	
	display: block;
	overflow:hidden;
	border-bottom: 1px solid rgba (255,255,255,.5);
	background:#858585;/*fondo submenus */
}

header nav ul li .children li a{
	display: block;
}

header nav ul li .children li a span{  /*para darle caracteristicas al punto dot que esta al costado de los submenus*/
	float: right;
	position:relative;
	top:3px; /* para que baje el punto pues estaba muy arriba*/
	margin-right:0;
	margin-left:10px; /*margen a la izquierda del punto dot*/
}

header nav ul li .caret{  /* para que baje el arrow(simbolo al costado de menu proyectos en venta) pues estaba muy arriba*/
	position:relative;
	top:3px;
	margin-right:10px;
	margin-left:0;
}

section {
	padding:20px;
}
 
@media screen and (max-width:800px ) {
  	.altura 
  	{ 
 	  height:100px;
	}
div#padre {
	 /*position: absolute;*/
	 height:100%px;
	 width:100%;
		/*background-color:#4f4f4f;*/
}
	div#left {
		float:left;
		height:100%;
		width:5%;
		margin-right:-5px;
		/*background-color:#c39;*/
	}
	
	div#right {

		float:left;
		width:95%;
		height:100%;
		/*background-color:#cc6;*/
	}
	
    p.espacio {
        display: none;
    }
        .achica {
        display: none;
    }
	body {
		padding-top:80px;  /* es el alto del menu, la idea que que el contenido del cuerpo se muestre por debajo de la barra de menu*/
		}
    .logo {
        width:60%;
        max-width:100%;
	  margin-top: 10px;
    }
.dos-colum {
width: 100%;
        max-width:100%;
display: inline-block;
}	
	iframe {
        width:100%;
        height:400px;
        }
.three-columns {
width: 100%;
display: inline-block;
text-align: center;
	  margin-top: 80px;
}
.tres-colum {
width: 80%;
display: inline-block;
text-align: justify;
	  font-family: Arial, Helvetica, sans-serif;
	  font-size:20px;
	  color:#000000;
	  margin-top: 100px;
	  margin-right: 35px;
	  margin-bottom: 10px;
	  margin-left: 35px;	  
}
.two-columns {
width: 100%;
display: inline-block;
text-align: center;
}
  	.textop 
  	{ font-family: GeosansLight, Arial, Helvetica, sans-serif;
	  font-size:35px;
	  color:#000000;
	  max-width:100%;
	}
    


  	.etiq
  	{ font-family: Arial, Helvetica, sans-serif;
/*	  font-weight:bold;*/
	  font-size:20px;
	  color:#000000;
	  margin-top: 10px;
	  margin-right: 35px;
	  margin-bottom: 10px;
	  margin-left: 35px;
	}
  	.etiqf
  	{ font-family: Arial, Helvetica, sans-serif;
/*	  font-weight:bold;*/
	  font-size:20px;
	  color:#000000;
	  margin-top: 10px;
	  margin-right: 35px;
	  margin-bottom: 10px;
	  margin-left: 35px;
	}
  	.etitulo 
  	{ font-family: Arial, Helvetica, sans-serif;
/*	  font-weight:bold; */
	  font-size:30px;
	  color:#000000;
	}
	
	H1 { 
	  font-family: GeosansLight, Arial, Helvetica, sans-serif;
	  /*font-weight:bold;*/
	  font-size:30px;
	  color:#000000;
	  max-width:90%;
	}

	.fotocliente {
	display:none;
	}
	
    form{
        max-width:90%; 
        margin-left:10px;
    } 
    
    .cuerpo {
        width:100%;
        max-width:100%;
    }

    .logopie {
        width:100%;/*70*/
        max-width:100%;
    }

    .pie {
        width:70px;
        height:70px;
        max-width:90%;
        
    }	
	.menu_bar {		/* es la barra de menu desde donde se desplegaran los sub menus*/
		display:block;
		width:100%;
		position:fixed;
		top:0;
		background:#ccc;
	}
	
	.menu_bar .bt-menu {
		display:block;
		padding:20px;
		color:#fff;
		overflow:hidden;
		font-size:25px;
		font-weight: bold;
		text-decoration:none;

/*
		background:#024959;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
*/
	}

	.menu_bar span {  /* es el icono de menu que esta ubicado en el extremo derecho de la barra*/
		float:right;
		font-size:40px;
	}

	header nav {  /* son todos los elementos del menu que se despliegan hacia abajo */
		width:80%;
		height: calc(100%-80px);
		position: fixed;
		right:100%;
		margin:0;
		overflow:scroll;
/*		left:-100%;*/
	}
 
	header nav ul li {
		display:block;
/*		float:none;*/
		border-bottom:1px solid rgba(255,255,255, .5);
	}
 
 	header nav ul li a {
 		display:block;
	}

 	header nav ul li:hover .children {  /* al pasar el mouse sobre los elementos de menu no se mostraran los sub menus */
		display:none;
	}

 	header nav ul li .children {
		width:100%;
		position: relative;
	}
	
 	header nav ul li .children li a {
		margin-left:20px;	
	}
}