@charset "utf-8";
@import url("estilos.css");
/* Medios fluidos sencillos
   Nota: Los medios fluidos exigen la eliminación de los atributos de altura y anchura de los medios del código HTML
   http://www.alistapart.com/articles/fluid-images/ 

   
*/
@font-face{
font-family: geomanistlight;
src: url(geomanistlight.woff);
text-decoration: none; 


}

// css example
span {
  content: "\2022";
}

A:link,A:visited {
color: #fff;
text-decoration: none; 
}
A:hover {
color: #0d65ff;
text-decoration: none; 
}

/*
	FRANJA NEGRA DE ARRIBA
*/
header {
	width: 100%;
	height:70px;
	background: #39455d;
	padding-top: 15px;
	padding-bottom: 15px;
	
   
}



/*
	texto info oculto para computador
*/
#textoinfo p  {

   display:none;


}



/*
	CUERPO TOTAL DE LA PAGINA
*/
body {
	width: 100%;
	background:#39455d;
	
   
}



/*
	LOGO PARA COMPUTADOR
*/
#menu li p {
	width: 50%;
	height: auto;
	margin-top:-33px;
	margin-left:50px;


}


/*
	TEXTOS  botones
*/
#menu li a  {
	padding: 23px;
	font-family: geomanistlight;
	font-size: 13px;
	padding: 10px
	background: #333333;
	color: #F9F9F9;
	display: inline;
	text-decoration: none;
	float: center;
	padding-top: 10px;
	padding-bottom: 10px;
	
	

}



/*
	texto contacto
*/
#menu h1 {
	padding:23px;
	font-family: geomanistlight;
	font-size:13px;
	padding: 20px
	background: #EEE;
	color: #F9F9F9;
	display: inline;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-top:-10px;
	

}




/*
	DISTANCIA ENTRE LOS BOTONES ALTURA
*/
#menu li  {

  display: inline;
  font-family: geomanistlight;
  float: left;
  padding:0px;
  text-justify: center;
  margin-top:10px;
  
}

/*
	SE CAMBIA COLOR DE LAS LETRAS BOTON
*/
#menu li a:hover {
 baground-color:#FF0;
 color: #0d65ff;
 font-family: geomanistlight;
  

}

/*
	SE CAMBIA COLOR DE LAS LETRAS BOTON
*/
#banner{
 width:100%;
 margin-top:-80px;

  

}

	/*
	aqui CAJA GRANDE DONDE VAN LAS CAJAS CON TEXTOS
*/
	
.textoscelu {
    width:100%;
	height:auto;
	display:none;


}


	/*
	aqui CAJA GRANDE DONDE VAN LAS CAJAS CON TEXTOS
*/
	
.textos {
    width:100%;
	height:auto;
	display:inline;


}


/*
	TITULO
*/


h3 {   
	
	
	color:#fff;
	background:#39455d;
	text-align:center;
    padding:2px;
	font-family: geomanistlight;
	font-size:25px;
	margin-top:50px;
	
	
	}
	

	
	/*
	aqui CAJA GRANDE DONDE VAN LAS CAJAS CON TEXTOS
*/
	
.caja2 {
    width:950px;
	height:250px;
	margin: float;
	background:#39455d;
	padding: 10px 20px;
	box-sizing: border-box;
	margin-top: 35px;
	box-radius: 7px;

}

/*
	aqui 3 CAJAS DONDE VAN LOS TEXTOS
*/
.rectangulo1  {
	background:#39455d;
	float:left;
	width:200px;
	height:100px;
	text-align:left;
    padding:5px;
	margin-left:10px;
	margin-botton:0px;
	float:left;
	
}

/*
	RECTANGULO GRANDE
*/
img {

    object-fit:cover;
	margin-left:0px;

}
	/*
	FOTO
*/
.rectangulo1 img{
	width:200px;
	height:102px;
	margin-top:0px;
	margin-left:0px;


}



.rectangulo3  {
	background:#39455d;
	float:left;
	width:195px;
	height:50px;
	text-align:center;
    padding:5px;
	margin-left:0px;
	margin-botton:0px;
	float:left;
	margin-top:115px;
	margin-left:-207px;
	border-radius:5px;
	border: 1px solid #E4E4E4;
	
}

h6 {
	
	color:#fff;
    text-align:center;
	font-family: geomanistlight;
	font-size:16px;
	margin-top:10px;
	
}

	
	/*
	aqui CAJA GRANDE DONDE VAN LAS CAJAS CON TEXTOS
*/
	
.historia {
    width:80%;
	height:1200px;
	float:center;
	background:#39455d;
	padding: 5px 10px;
	box-sizing: border-box;
	margin-top: 35px;
	box-radius: 7px;
	
	

}

/*
	aqui 3 CAJAS DONDE VAN LOS TEXTOS
*/
.galeria8  {
	background:#39455d;
	float:left;
	width:300px;
	height:200px;
	text-align:left;
    padding:5px;
	margin-left:20px;
	margin-top:50px;
	float:left;
	
}
	/*
	FOTO
*/
.galeria8 img{
	width:300px;
	height:200px;
	margin-top:0px;
	margin-left:0px;
}



.galeria9  {
	background:#39455d;
	float:left;
	width:290px;
	height:30px;
	text-align:center;
    padding:5px;
	margin-botton:0px;
	margin-top:260px;
	margin-left:-305px;
	border-radius:2px;
	border: 1px solid #42506c;
	
}


h5 {
	
	color:#CCC;
    text-align:center;
	font-family: geomanistlight;
	font-size:14px;
	margin-top:0px;
	
}


	


/*
	aqui LINEA ABAJO FOOTER
*/
#bajada  {
	
    width:100%;
	height:200px;
	background:#39455d;
	padding:0px;
	margin-top:0px;
	margin-left:0px;
}


/*
	aqui LINEA ABAJO FOOTER
*/
h4  {
	
	color:#CCC;
    text-align:center;
	font-family: geomanistlight;
	font-size:16px;
	margin-top:30px;
}


/*
	aqui TEXTO LINEA DE ABAJO
*/

	
#bajada img{   
	
	width:200px;
	color: #FFF;
	margin-top:50px;
	float:center;

	}
	
	




	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*
	aqui se da el responsive a los elementos por separado
*/

@media(max-width:480px) {


/*
	FRANJA NEGRA DE ARRIBA
*/
header {
	width: 100%;
	height:70px;
	background: #39455d;
	padding-top: 15px;
	padding-bottom: 15px;
	
   
}



/*
	texto info oculto para computador
*/
#textoinfo p  {

   display:none;


}



/*
	CUERPO TOTAL DE LA PAGINA
*/
body {
	width: 100%;
	background:#39455d;
	
   
}



/*
	LOGO PARA COMPUTADOR
*/
#menu li p {
	width:55%;
	height: auto;
	margin-top:-33px;
	float:center;
	margin-left:50px;

}


/*
	TEXTOS  botones
*/
#menu li a  {
display:none;

}

/*
	texto contacto
*/
#menu h1 {
 display:none;
	

}




/*
	SE CAMBIA COLOR DE LAS LETRAS BOTON
*/
#menu li a:hover {
 display:none;

  

}

/*
	SE CAMBIA COLOR DE LAS LETRAS BOTON
*/
#banner{
 width:100%;
 margin-top:-80px;

  

}




/*
	TITULO
*/


h3 {   
	
	
	color:#fff;
	background:#39455d;
	text-align:center;
    padding:2px;
	font-family: geomanistlight;
	font-size:25px;
	margin-top:50px;
	}
	
	/*
	aqui CAJA GRANDE DONDE VAN LAS CAJAS CON TEXTOS
*/
	
.textoscelu {
    width:100%;
	height:auto;
	display:inline;


}


	/*
	aqui CAJA GRANDE DONDE VAN LAS CAJAS CON TEXTOS
*/
	
.textos {
    width:100%;
	height:auto;
	display:none;


}

	
	/*
	aqui CAJA GRANDE DONDE VAN LAS CAJAS CON TEXTOS
*/
	
.caja2 {
    width:95%;
	height:1250px;
	background:#39455d;
	padding: 10px 20px;
	box-sizing: border-box;
	margin-top: 35px;
	box-radius: 7px;
	float:center;
	color:#39455d;
	
	

}

/*
	aqui 3 CAJAS DONDE VAN LOS TEXTOS
*/
.rectangulo1  {
	background:#39455d;
	float:center;
	width:100%;
	height:300px;
	text-align:center;
    padding:5px;
	margin-left:0px;

	
}


/*
	RECTANGULO GRANDE
*/
img {

    object-fit:cover;
	margin-left:0px;

}
	/*
	FOTO
*/
.rectangulo1 img{
	width:98%;
	height:230px;
	margin-top:0px;
	margin-left:0px;


}



.rectangulo3  {
	background:#39455d;
	float:center;
	width:90%;
	height:45px;
	text-align:center;
    padding:5px;
	margin-top:-70px;
	border-radius:5px;
	border: 1px solid #42506c;
	margin-left:10px;
	
}

h6 {
	
	color:#fff;
    text-align:center;
	font-family: geomanistlight;
	font-size:16px;
	margin-top:10px;
	
}

	
	/*
	aqui CAJA GRANDE DONDE VAN LAS CAJAS CON TEXTOS
*/
	
.historia {
    width:80%;
	height:1600px;
	background:#39455d;
	padding: 5px 10px;
	box-sizing: border-box;
	margin-top:-50px;
	box-radius: 7px;
	margin-left:-110px;
	
	

}

/*
	aqui 3 CAJAS DONDE VAN LOS TEXTOS
*/
.galeria8  {
	background:#39455d;
	float:left;
	width:300px;
	height:200px;
	text-align:left;
    padding:5px;
	margin-left:20px;
	margin-top:50px;
	float:left;
	
}
	/*
	FOTO
*/
.galeria8 img{
	width:300px;
	height:200px;
	margin-top:0px;
	margin-left:0px;
}



.galeria9  {
	background:#39455d;
	float:left;
	width:290px;
	height:30px;
	text-align:center;
    padding:5px;
	margin-left:0px;
	margin-botton:0px;
	margin-top:260px;
	margin-left:-307px;
	border-radius:2px;
	border: 1px solid #42506c;
	
}


h5 {
	
	color:#CCC;
    text-align:center;
	font-family: geomanistlight;
	font-size:14px;
	margin-top:0px;
	
}


	


/*
	aqui LINEA ABAJO FOOTER
*/
#bajada  {
	
    width:100%;
	height:200px;
	background:#39455d;
	padding:10px;
	margin-top:1580px;
	margin-left:0px;
}


/*
	aqui LINEA ABAJO FOOTER
*/
h4  {
	
	color:#CCC;
    text-align:center;
	font-family: geomanistlight;
	font-size:16px;
	margin-top:40px;
}


/*
	aqui TEXTO LINEA DE ABAJO
*/

	
#bajada img{   
	
	width:200px;
	color: #FFF;
	margin-top:50px;
	float:center;

	}
	
	







}






















	/*
	este es el responsive que viene por defecto
*/




img, object, embed, video {
	max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
	width:100%;
}