*{
	margin: 0;
	padding: 0;
}
body{
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#portada{
	position: absolute;
	 width: 100%;
	 height: 100%;
	 background-position: initial initial;
	 background-repeat: initial initial;
	 background: url(../img/POrtada3.jpg); 
	 background-size: 100% 100%;

}
#titulo{
	position: absolute;
	font-family:Trebuchet MS,Segoe UI;
	font-weight: bold;
	font-size: 26px;
	margin: 2% 25%;
	text-align: center;
	color: #fff;
}

.texto1{
 font-family: Trebuchet MS,Segoe UI;
 font-size: 18px;
 color: #fff;
 text-align: left;
 padding-top: 4%;
 padding-left: 8%;

 
}
.texto2{
 
 font-family: Trebuchet MS,Segoe UI;
 font-size: 18px;
 color: #fff;
 text-align: left;
 padding-top: 4%;
 padding-left: 8%;
}
.texto3{
 
 font-family: Trebuchet MS,Segoe UI;
 font-size: 18px;
 color: #fff;
 text-align: left;
 padding-top: 4%;
 padding-left: 0%;
}
.texto4{
 
 font-family: Trebuchet MS,Segoe UI;
 font-size: 14px;
 color: #fff;
 text-align: left;
 padding-top: 4%;
 padding-left: 0%;
}
 .texto5{

 font-family: Trebuchet MS,Segoe UI;
 font-size: 18px;
 color: #fff;
 text-align: left;
 padding-top: 4%;
 padding-left: 0%;
}
#uno{
	position: absolute;
	width: 20%;
	height: 8%;
	top: 7%;
	right: 0%;
	/*margin: 5% 80%;*/
	background: #333333;
	/*opacity: .70;*/
	border-radius: 5px 0 0 5px ;
	
}

/*.ic1:hover{
width: 70%;
cursor: pointer;
	
}*/

#icono1{
	position: absolute;
	 width: 20%;
	 height: 100%;
	 left:1%;
	 margin: 0;
	 background-position: initial initial;
	 background-repeat: initial initial;
	 background: url(../img/Preyecto_Conacyt.png); 
	 background-size: 100% 100%;

	
}

#opcion1{
	position: absolute;
	margin: 0 20%;
	width: 100%;
	height: 100%;
	
	
}
#dos{
	position: absolute;
	width: 20%;
	height: 8%;
	top: 17%;
	right: 0;
	/*margin: 10% 80%;*/
	background: #333333;
	border-radius: 5px 0 0 5px ;
}
#icono2{
	position: absolute;
	 width: 20%;
	 height: 100%;
	 left:1%;
	 margin: 0;
	 background-position: initial initial;
	 background-repeat: initial initial;
	 background: url(../img/Presentación_de_la_Base_de_Datos.png); 
	 background-size: 100% 100%;
	
}

#opcion2{
	position: absolute;
	margin: 0 20%;
	width: 100%;
	height: 100%;
	
}
#tres{
	position: absolute;
	width: 20%;
	height: 8%;
	top: 27%;
	right: 0;
	/*margin: 15% 80%;*/
	background: #333333;
	border-radius: 5px 0 0 5px ;
}
#icono3{
	position: absolute;
	 width: 20%;
	 height: 100%;
	 left:1%;
	 margin: 0;
	 background-position: initial initial;
	 background-repeat: initial initial;
	 background: url(../img/Metodología.png); 
	 background-size: 100% 100%;
	
}

#opcion3{
	position: absolute;
	margin:  0 25%;
	width: 100%;
	height: 100%;
	
}

#cuatro{
	position: absolute;
	width: 20%;
	height: 8%;
	top: 37%;
	right: 0;
	/*margin: 20% 80%;*/
	background: #333333;
	border-radius: 5px 0 0 5px ;
}
#icono4{
	 position: absolute;
	 width: 20%;
	 height: 100%;
	 left:1%;
	 margin: 0;
	 background-position: initial initial;
	 background-repeat: initial initial;
	 background: url(../img/Programas_Públicos_para_intervención_del_EP_en_Xalapa.png); 
	 background-size: 100% 100%;

}

#opcion4{
	position: absolute;
	margin:  0 25%;
	width: 100%;
	height: 100%;

}
#cinco{
	position: absolute;
	width: 20%;
	height: 8%;
	top: 47%;
	right: 0;
	/*margin: 25% 80%;*/
	background: #333333;
	border-radius: 5px 0 0 5px ;
}
#icono5{
	 position: absolute;
	 width: 20%;
	 height: 100%;
	 left:1%;
	 margin: 0;
	 background-position: initial initial;
	 background-repeat: initial initial;
	 background: url(../img/Cartografía_y_Base_de_Datos.png); 
	 background-size: 100% 100%;
	
}


#opcion5{
	position: absolute;
	margin:  0 25%;
	width: 100%;
	height: 100%;

}
#uno:hover{
	opacity: .80;
	background: #444;
	border-left: 10px solid #FF0000;

}
#dos:hover{
	opacity: .80;
	background: #444;
	border-left: 10px solid #FF9900;
}
#tres:hover{
	opacity: .80;
	background: #444;
	border-left: 10px solid #6AA84F;
}
#cuatro:hover{
	opacity: .80;
	background: #444;
	border-left: 10px solid #9700FF;
}
#cinco:hover{
	opacity: .80;
	background: #444;
	border-left: 10px solid #3C83C7;
}