@import url(http://weloveiconfonts.com/api/?family=fontawesome);

span[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;

}


/* ---------- NAVEGACION ---------- */

nav {
	margin: 50px auto;
	width: 60px;
	
}

nav ul {
	background: #505664;
	border-radius: 5px;
	display: inline-table;
	position: relative;
	
}

nav li {
	float: left;
}

nav a {
	color: #6daeb0;
	display: block;
	height: 45px;
	line-height: 45px;
	text-align: center;
	width: 60px;
}

nav a:hover{
	color: #fff;
}

nav ul li ul {
	background: #6daeb0;
	margin-top: 20px;
	padding: 5px 0;
	position: absolute;
}

nav ul li ul:before {
	background: #6daeb0;
	content: "";
	height: 8px;
	left: 50%;
  margin: -4px 0 0 -4px;
	position: absolute;
	top: 0;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	width: 8px;
}

nav ul li ul li {
	float: none;
	  
}

nav ul li ul li a {
	color: #fff;
}

nav ul li ul li a:hover {
	background-color: #5d9799;
}
body {
    font-family: Georgia;
    font-size: 10px;
    text-shadow: 0 1px 0 rgba(255,255,255,.50);
    color: #262626;
	/*1695EA	2A94DC	58B2EF	0A5E96	3CAFFB	0C71B4*/
    /*background: url(../images/images.jpg);*/
	background-color:#0A5E96; /*color de la barra*/
	overflow-x: hidden;
	
}

h1 img {
    float: bottom;
	margin-right: 55px;
	left: 45%;
}
h1 {
	text-align:center;
	line-height: 251%; 
	font-size: 23%;
	font: arial;
	
	/*font: bold 290% arial;*/
	color:black;
}
h2 {
	text-align:center;
	/*line-height: 251%; */
	/*font-size: 23%;
	font: arial;*/
	font-size: 86em;
	/*font: bold 290% arial;*/
	color:white;
}
#barra_uno {
			    
	background-color:#0A5E96; /*color de la barra*/
	/*background: url(../images/images.jpg);*/
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:700px;/*largo de la barra*/
	top: 80%; /*Distancia sobre la parte superior*/
	height: 155px;/*altura*/
	left:24%;
						
					}
/*Esta div es para el telefono*/
	#barra_tres2{

	/*background: url(../images/images.jpg);*/
	background-color:#0A5E96;
	position: absolute;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:200px;/*largo de la barra*/
	top: 0%; /*Distancia sobre la parte superior*/
	height: 200px;/*altura*/
	overflow:hidden;
	left:80%;
						
					}				
					/*Continene la imagen del edumovil*/
#figura_uno {
	background-color:#0A5E96; /*color de la barra*/
	/*background: url(../images/images.jpg);*/
	position: relative;
	left: -35%;
	padding:1px; /*altura de la barra*/
	width:41%;/*largo de la barra*/
	top: -80%; /*Distancia sobre la parte superior*/
	height: 200px;/*altura*/
	width:200px;
						
					}
					/*Aqui est ael carrusel de fotos*/
#barra_dos {
	/*background: url(../images/images.jpg);*/
	background-color:#0A5E96;
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:78%;/*largo de la barra*/
	top: 60%; /*Distancia sobre la parte superior*/
	height: 500px;/*altura*/
	left:10%;
						
					}
					
					/*aqui estan las redes sociales*/
#barra_dos1 {
	/*background: url(../images/images.jpg);*/
	background-color:#0A5E96;
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:100px;/*largo de la barra*/
	top: 25%; /*Distancia sobre la parte superior*/
	height: 200px;/*altura*/
	left:-12.5%;
						
					}

/*Menu superior*/
#sse1
{
    /*Se puede modifcar para cambiar el color del menu*/
    /*background : url(../images/12.jpg);*/
	background-color:#0A5E96; /*color de la barra*/
    height: 38px;
    padding: 15px;
    border-radius: 5px;
	
	
}
#sses1
{
    margin:0 auto;/*Hace que el menu este alineado al centro*/
	
}
#sses1 ul 
{ 
    position: relative;
    list-style-type: none;
    float:left;
    padding:0;margin:0;
}
#sses1 li
{
    float:left;
    list-style-type: none;
    padding:2;margin:0;background-image:none;
}
/*maneja la barra que sigue a los elementos en el menu superior*/
#sses1 li.highlight
{
    background-color:#fff;
    top:0px;
    height:7px;
    z-index: 0;
    position: absolute;
    overflow:hidden;
}
#sses1 li a
{
    height:30px;
    padding-top: 8px;
    margin: 0 20px;/*Es usado para ajustar la distancia entre cada elemento del menu. Ahora tiene la de 20+20=40px.*/
    color: #fff;
    font: normal 22px arial;
    text-align: center;
    text-decoration: none;
    display: block;
    float:left;
    position: relative;
    z-index: 2;
	
}

/*-------------------------------------------------------------------------Termina menu superior--------------------------------------------------------------------------*/
#miniat{
	position: relative;
	left: 2%;
	top: 1em;
}

#minis{
	background-color:white;
	position: absolute;
	/*text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	/*width:720px;/*largo de la barra*/
	top: 35%; /*Distancia sobre la parte superior*/
	height: 950px;/*altura*/
	/*overflow:scroll;*/
	left:19%;
	opacity: 0.95;
	border-radius: 15px 15px 15px 15px;
}

/************************************************Derechos reservados*************************************************************************************************/
#derechos{					
	position: relative; /*Posicion Que no se mueve*/
	left: 25%;	/*Posicion centrada*/
	z-index: 1;	/*Posicion en Z*/
	width:50em;
	height: 20px;/*altura*/
	top: 20em;/*Distancia sobre la parte superior*/
}		
#derechosGa{					
	position: relative; /*Posicion Que no se mueve*/
	left: 21%;	/*Posicion centrada*/
	z-index: 1;	/*Posicion en Z*/
	width:50em;
	height: 20px;/*altura*/
	top: 34em;/*Distancia sobre la parte superior*/
}		
#derechosq{					
	position: relative; /*Posicion Que no se mueve*/
	left: 8%;	/*Posicion centrada*/
	z-index: 1;	/*Posicion en Z*/
	width:50em;
	height: 20px;/*altura*/
	top: 10em;/*Distancia sobre la parte superior*/
}
#derechos4{					
	position: relative; /*Posicion Que no se mueve*/
	left: 18%;	/*Posicion centrada*/
	z-index: 1;	/*Posicion en Z*/
	width:50em;
	height: 20px;/*altura*/
	top: 49em;/*Distancia sobre la parte superior*/
}				
#derechoContact{					
	position: relative; /*Posicion Que no se mueve*/
	left: 22%;	/*Posicion centrada*/
	z-index: 1;	/*Posicion en Z*/
	width:50em;
	height: 20px;/*altura*/
	top: 1em;/*Distancia sobre la parte superior*/
}	


/***********************************************************************************************/
/*Aqui estan las noticias*/
#barra_tres {
	/*background: url(../images/images.jpg);*/
	-moz-border-radius-topleft:10px;
	-moz-border-radius-topright:10px;
	-moz-border-radius-bottomleft:10px;
	-moz-border-radius-bottomright:10px;
				
	-webkit-border-top-left-radius:10px;
	-webkit-border-top-right-radius:10px;
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	background-color:white;
	/*1695EA	2A94DC	58B2EF	0A5E96	3CAFFB	0C71B4*/
	position: relative;
	text-align:center; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:30%;/*largo de la barra*/
	top: 50%; /*Distancia sobre la parte superior*/
	height: 300px;/*altura*/
	left:12%;
	border-radius: 15px 15px 15px 15px;			
}

				
					/*contiene el fram del facebook*/
#barra_tres1{
	/*background: url(../images/images.jpg);*/
	
	background-color:white;
	position: absolute;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:99%;/*largo de la barra*/
	top: 0%; /*Distancia sobre la parte superior*/
	height: 300px;/*altura*/
	overflow:auto;
	left:150%;
	border-radius: 15px 15px 15px 15px;						
}

/*QUIENES SOMOS*/
#qscuadrar{
	background-color:white;
	position: absolute;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:900px;/*largo de la barra*/
	top: 40%; /*Distancia sobre la parte superior*/
	height: 2450px;/*altura*/
	/*overflow:scroll;*/
	left:15%;
	border-radius: 15px 15px 15px 15px;		
}
#qscuadrar1{
	background-color:white;
	position: absolute;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:900px;/*largo de la barra*/
	top: 40%; /*Distancia sobre la parte superior*/
	height: 1150px;/*altura*/
	/*overflow:scroll;*/
	left:15%;
	border-radius: 15px 15px 15px 15px;						
}
#b_t1 {
	
	left:5%;
	/*background: url(../images/images.jpg);*/
	background-color:white;
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:500px;/*largo de la barra*/
	top: 3%; /*Distancia sobre la parte superior*/
	height: 400px;/*altura*/
						
}
 #cuadro_uno {
					    
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:20%;/*largo de la barra*/
	top: -80%; /*Distancia sobre la parte superior*/
	height: 300px;/*altura*/
	left: 115%;
						
}
#cuadro_uno_1 {
					    
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:20%;/*largo de la barra*/
	top: -50%; /*Distancia sobre la parte superior*/
	height: 300px;/*altura*/
	left: 115%;
						
}
#b_t3 {
	
	left:5%;
	/*background: url(../images/images.jpg);*/
	background-color:white;
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:500px;/*largo de la barra*/
	top: 3%; /*Distancia sobre la parte superior*/
	height: 400px;/*altura*/
						
}
#cuadro_tres {
					    
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:20%;/*largo de la barra*/
	top: -85%; /*Distancia sobre la parte superior*/
	height: 300px;/*altura*/
	left: 115%;
						
}
#b_t5 {
	
	left:5%;
	/*background: url(../images/images.jpg);*/
	background-color:white;
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:500px;/*largo de la barra*/
	top: 3%; /*Distancia sobre la parte superior*/
	height: 400px;/*altura*/
						
}
#cuadro_cinco {
					    
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:20%;/*largo de la barra*/
	top: -96%; /*Distancia sobre la parte superior*/
	height: 300px;/*altura*/
	left: 115%;
						
}
#b_t7 {
	
	left:5%;
	/*background: url(../images/images.jpg);*/
	background-color:white;
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:500px;/*largo de la barra*/
	top: 10%; /*Distancia sobre la parte superior*/
	height: 500px;/*altura*/
						
}
#cuadro_siete{
					    
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:20%;/*largo de la barra*/
	top: -96%; /*Distancia sobre la parte superior*/
	height: 300px;/*altura*/
	left: 105%;
						
}
#ex2 img{ 
	height: 250px; 
	width: 250px;
	margin: 15px 0; 
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease; 
	-ms-transition: all is ease;
 -o-transition: all 1s ease; } 
 #ex2 img:hover { 
	height: 300px; 
	width: 280px;
	margin-left: -50px; 
 }
#b_t2 {
	
	left:41%;
	/*background: url(../images/images.jpg);*/
	background-color:white;
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:500px;/*largo de la barra*/
	top: 2%; /*Distancia sobre la parte superior*/
	height: 300px;/*altura*/
	
						
}
 #cuadro_dos {
					    
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:20%;/*largo de la barra*/
	top: -90%; /*Distancia sobre la parte superior*/
	height: 300px;/*altura*/
	left: -65%;
						
}
 #cuadro_dos_1 {
					    
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:20%;/*largo de la barra*/
	top: -90%; /*Distancia sobre la parte superior*/
	height: 300px;/*altura*/
	left: -65%;
						
}
#b_t4 {
	
	left:41%;
	/*background: url(../images/images.jpg);*/
	background-color:white;
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:500px;/*largo de la barra*/
	top: 3%; /*Distancia sobre la parte superior*/
	height: 300px;/*altura*/
	
						
}
 #cuadro_cuatro {
					    
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:20%;/*largo de la barra*/
	top: -77%; /*Distancia sobre la parte superior*/
	height: 300px;/*altura*/
	left: -65%;
						
}
#b_t6 {
	
	left:41%;
	/*background: url(../images/images.jpg);*/
	background-color:white;
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:500px;/*largo de la barra*/
	top: 5%; /*Distancia sobre la parte superior*/
	height: 500px;/*altura*/
	
						
}
 #cuadro_seis {
					    
	position: relative;
	text-align:left; /*alineacion del texto*/
	padding:1px; /*altura de la barra*/
	width:20%;/*largo de la barra*/
	top: -90%; /*Distancia sobre la parte superior*/
	height: 300px;/*altura*/
	left: -65%;
						
}
#ex3 img{ 
	height: 200px; 
	width: 250px;
	margin: 15px 0; 
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease; 
	-ms-transition: all is ease;
 -o-transition: all 1s ease; } 
 #ex3 img:hover { 
	height: 250px; 
	width: 280px;
	margin-left: 25px; 
 }
#ex4 { width: 400px; margin: 0 auto; } 
#ex4 img { 
					margin: 20px; 
					border: 5px solid #eee; 
					-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); 
					-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); 
					box-shadow: 4px 4px 4px rgba(0,0,0,0.2); 
					-webkit-transition: all 0.5s ease-out; 
					-moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; 
					
					}
#ex4 img:hover { 
					-webkit-transform: rotate(-7deg);
					-moz-transform: rotate(-7deg);
					-o-transform: rotate(-7deg);
					}
#container { width: 300px; margin: 0 auto; } 

