@charset "utf-8";
/* CSS Document */

/*@font-face {
font-family:"din_bold";
src:url("dincond-boldalternate.eot");
src:url("dincond-boldalternate.eot?") format("embedded-opentype"),
url("dincond-boldalternate.woff") format("woff"),
url("dincond-boldalternate.TTF") format("truetype"),
url("dincond-boldalternate.svg#dincond-boldalternate") format("svg");
}
@font-face {
font-family:"din_light";
src:url("dincond-lightalternate.eot");
src:url("dincond-lightalternate.eot?") format("embedded-opentype"),
url("dincond-lightalternate.woff") format("woff"),
url("dincond-lightalternate.TTF") format("truetype"),
url("dincond-lightalternate.svg#dincond-lightalternate") format("svg");
}*/
h4 { text-align: center;
	font-weight: 100;
	font-family: 'Source Sans Pro', sans-serif;
	font-size:20px;
}
h5 { text-align: center;
	font-weight: 100;
	font-family: 'Source Sans Pro', sans-serif;
	font-size:16px;
}

@media (min-width: 65em) {
.center {
  margin: auto;
  width: 45%;
 border: 1px solid #6B6B6B;
  padding: 5px;
	
}
	h1 {
font-size:1.9vw;
		color: #F5C312;
		font-family: 'Source Sans Pro', sans-serif;
}
			h2 {
font-size:1.7vw;
		color:#015d5d;
				font-family: 'Source Sans Pro', sans-serif;
}
				h3 {
font-size:1.3vw;
		color:#015d5d;
		text-align: center;
					font-family: 'Source Sans Pro', sans-serif;
}
	li {margin-top: 3%;
		font-size:1.3vw;
		font-family: 'Source Sans Pro', sans-serif;
	}
	li::before {content: "•"; color:#015d5d;
  display: inline-block; width: 1em;
  margin-left: -1em}
}	

@media (max-width: 65em) {
.center {
  margin: auto;
  width: 90%;
 border: 1px solid #6B6B6B;
  padding: 5px;
	 
}
	
	h1 {
font-size:3.2vw;
		color:#F5C312;
		font-family: 'Source Sans Pro', sans-serif;
}
		h2 {
font-size:2.5vw;
		color:#015d5d;
			font-family: 'Source Sans Pro', sans-serif;
}
		h3 {
font-size:2.3vw;
		color:#015d5d;
		text-align: center;
			font-family: 'Source Sans Pro', sans-serif;
}
	li {margin-top: 3%;
		font-size:2.7vw;
		font-family: 'Source Sans Pro', sans-serif;
	}
	li::before {content: "•"; color: #015d5d;
  display: inline-block; width:2em;
  margin-left: -1em}
}	
ul {
  display: block;
  list-style: none;
  margin-top: 10%;
  margin-left: 5%;
	float: left;
	position: absolute;
}


.cabecera {

  width: 100%;
 
	position: relative;
	

}
.titulo{
  float: left;
	position: absolute;
	margin-left: 5%;
	margin-top: 1%;
	width: 80%;
	
 
}
.quees{
  float: right;
	position: absolute;
	margin-left: 80%;
	margin-top: 25%;
	width: 20%;
 
}
.icomasque{
  float: right;
	position: absolute;
	margin-left: 72%;
	margin-top: 28%;
	width: 7%;
	animation-name: infozoom;
	animation-duration: 5s;
	 animation-iteration-count: infinite;
 
}
@keyframes infozoom {
  0% {width: 8%;}
  5% {width: 9%;}
  10% 	{width: 8%;}
}
.porque{
  float: right;
	margin-left: 40%;
	margin-top: -2%;
	position: absolute;
	width: 25%;
}

.icomaspor{
  float: right;
	position: absolute;
	margin-left: 10%;
	margin-top: 1.5%;
	width: 7%;
	animation-name: infozoom;
	animation-duration: 5s;
	 animation-iteration-count: infinite;
	animation-delay: -2s;
 
}
.icoface{
  float: right;
	position: relative;
	margin-right: 18%;
	margin-top: 2.5%;
	width: 6%;
	animation-name: icorrss;
	animation-duration: 5s;
	 animation-iteration-count: infinite;
	animation-delay: -2s;
 
}

.icotwit{
  float: right;
	position: relative;
	margin-right: -11%;
	margin-top: 2.5%;
	width: 6%;
	animation-name: icorrsst;
	animation-duration: 5s;
	 animation-iteration-count: infinite;
	animation-delay: -2s;
 
}
.icoinst{
  float: right;
	position: relative;
	margin-right: -16%;
	margin-top: 2.5%;
	width: 6%;
	animation-name: icorrssi;
	animation-duration: 5s;
	 animation-iteration-count: infinite;
	animation-delay: -2s;
 
}
.icoyout{
  float: right;
	position: relative;
	margin-right: -21%;
	margin-top: 2.5%;
	width: 6%;
	animation-name: icorrssit;
	animation-duration: 5s;
	 animation-iteration-count: infinite;
	animation-delay: -2s;
 
}
@keyframes infozoom {
  0% {width: 7%;}
  5% {width: 9%;}
  10% 	{width: 7%;}
}

@keyframes icorrss {
  15% {transform: rotate(0deg);}
  20% {transform: rotate(20deg);}
  25% 	{transform: rotate(-20deg);}
  30% 	{transform: rotate(0deg);}
}

@keyframes icorrsst {
  25% {transform: rotate(0deg);}
  30% {transform: rotate(20deg);}
  35% 	{transform: rotate(-20deg);}
  40% 	{transform: rotate(0deg);}
}

@keyframes icorrssi {
  35% {transform: rotate(0deg);}
  40% {transform: rotate(20deg);}
  45% 	{transform: rotate(-20deg);}
  50% 	{transform: rotate(0deg);}
}
@keyframes icorrssit {
  40% {transform: rotate(0deg);}
  50% {transform: rotate(20deg);}
  55% 	{transform: rotate(-20deg);}
  60% 	{transform: rotate(0deg);}
}

.mapa {

  width: 100%;
	position: relative;
	margin-top: -22%;
	

}

 *{ box-sizing: border-box;}
/* Estilos Columnas */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  
	}

.columnact {
  float: left;
  width: 49%;
  padding: 10px;
  
	}
.columnico {
  float: left;
  width: 33.33%;

  
	}
.row:after {
  content: "";
  display: table;
  clear: both;
	
}
.rowico:after {
  content: "";
  display: table;
  clear: both;
display: inline-block;
	
	}

.imgico {
	width: 33%;
	display: block;
  margin-left: auto;
  margin-right: auto;
	margin-top: -10%;
	animation-name: icozoom;
	animation-duration: 5s;
	 animation-iteration-count: infinite;

	}

@keyframes icozoom {
  0% {transform: rotate(0deg);}
  5% {transform: rotate(20deg);}
  10% 	{transform: rotate(-20deg);}
  15% 	{transform: rotate(0deg);}
}
.objetivos {
background-color:#E4E4E4;
}
.actividades {
background-color:#E4E4E4;

}

/* FIM Estilos Columnas */

.imagen { position: relative;}

.ficha_gal {
	background-color:#28641C;
	color:white;
	margin-top:10%;
	margin-left:-50%;
	width:55%;
	padding: 0.1vw;
	border:1px solid white;
	position: absolute;
	z-index: 5;
	float:left;
	-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
    transition: 0.5s;
	font-size:1.2vw; font-family: 'Source Sans Pro', sans-serif; 
	opacity:0;
	box-shadow: 2px 2px 1px #424242;}

.ficha_vg {
	background-color:#28641C;
	color:white;
	margin-top:20%;
	margin-left:-50%;
	width:48%;
	padding: 0.1vw;
	border:1px solid white;
	position: absolute;
	z-index: 5;
	float:left;
	-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
    transition: 0.5s;
	font-size:1.2vw; font-family: 'Source Sans Pro', sans-serif; 
	opacity:0;
	box-shadow: 2px 2px 1px #424242;}

.ficha_val {
	background-color:#28641C;
	color:white;
	margin-top:40%;
	margin-left:-50%;
	width:58%;
	padding: 0.1vw;
	border:1px solid white;
	position: absolute;
	z-index: 5;
	float:left;
	-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
    transition: 0.5s;
	font-size:1.2vw; font-family: 'Source Sans Pro', sans-serif;
	opacity:0;
	box-shadow: 2px 2px 1px #424242;}

.ficha_cl {
	background-color:#28641C;
	color:white;
	margin-top:20%;
	margin-left:-50%;
	width:48%;
	padding: 0.1vw;
	border:1px solid white;
	position: absolute;
	z-index: 5;
	float:left;
	-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
    transition: 0.5s;
	font-size:1.2vw; font-family: 'Source Sans Pro', sans-serif; 
	opacity:0;
	box-shadow: 2px 2px 1px #424242;}

.ficha_z {
	background-color:#28641C;
	color:white;
	margin-top:20%;
	margin-left:-50%;
	width:48%;
	padding: 0.1vw;
	border:1px solid white;
	position: absolute;
	z-index: 5;
	float:left;
	-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
    transition: 0.5s;
	font-size:1.2vw; font-family: 'Source Sans Pro', sans-serif; 
	opacity:0;
	box-shadow: 2px 2px 1px #424242;}

.ficha_bar {
	background-color:#28641C;
	color:white;
	margin-top:20%;
	margin-left:-50%;
	width:48%;
	padding: 0.1vw;
	border:1px solid white;
	position: absolute;
	z-index: 5;
	float:left;
	-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
    transition: 0.5s;
	font-size:1.2vw; font-family: 'Source Sans Pro', sans-serif; 
	opacity:0;
	box-shadow: 2px 2px 1px #424242;}

.ficha_tol {
	background-color:#28641C;
	color:white;
	margin-top:20%;
	margin-left:-50%;
	width:58%;
	padding: 0.1vw;
	border:1px solid white;
	position: absolute;
	z-index: 5;
	float:left;
	-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
    transition: 0.5s;
	font-size:1.2vw; font-family: 'Source Sans Pro', sans-serif; 
	opacity:0;
	box-shadow: 2px 2px 1px #424242;}

.ficha_sev {
	background-color:#28641C;
	color:white;
	margin-top:40%;
	margin-left:-50%;
	width:48%;
	padding: 0.1vw;
	border:1px solid white;
	position: absolute;
	z-index: 5;
	float:left;
	-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
    transition: 0.5s;
	font-size:1.2vw; font-family: 'Source Sans Pro', sans-serif; 
	opacity:0;
	box-shadow: 2px 2px 1px #424242;}

.ficha_can {
	background-color:#28641C;
	color:white;
	margin-top:60%;
	margin-left:-50%;
	width:48%;
	padding: 0.1vw;
	border:1px solid white;
	position: absolute;
	z-index: 5;
	float:left;
	-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
    transition: 0.5s;
	font-size:1.2vw; font-family: 'Source Sans Pro', sans-serif; 
	opacity:0;
	box-shadow: 2px 2px 1px #424242;}

.ficha_quees {
	background-color:#28641C;
	color:white;
	margin-top:20%;
	margin-left:-50%;
	width:48%;
	padding: 0.1vw;
	border:1px solid white;
	position: absolute;
	z-index: 5;
	float:left;
	-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
    transition: 0.5s;
	font-size:1.2vw; font-family: 'Source Sans Pro', sans-serif; 
	opacity:0;
	box-shadow: 2px 2px 1px #424242;}

.icomasque:hover ~ .ficha_quees	{
	background-color:#F0F0F0;
	color:#3a3a3a;
	border:1px solid #3a3a3a;
	opacity:1;
	margin-left:15%;
	 }

.icomapagal:hover ~ .ficha_gal	{
	background-color:#F0F0F0;
	color:#3a3a3a;
	border:1px solid #3a3a3a;
	opacity:1;
	margin-left:15%;
	z-index: 2;
	 }

.icomapavg:hover ~ .ficha_vg	{
	background-color:#F0F0F0;
	color:#3a3a3a;
	border:1px solid #3a3a3a;
	opacity:1;
	margin-left:5%;
	 }

.icomapacl:hover ~ .ficha_cl	{
	background-color:#F0F0F0;
	color:#3a3a3a;
	border:1px solid #3a3a3a;
	opacity:1;
	margin-left:5%;
	 }

.icomapaz:hover ~ .ficha_z	{
	background-color:#F0F0F0;
	color:#3a3a3a;
	border:1px solid #3a3a3a;
	opacity:1;
	margin-left:5%;
	 }
.icomapabar:hover ~ .ficha_bar	{
	background-color:#F0F0F0;
	color:#3a3a3a;
	border:1px solid #3a3a3a;
	opacity:1;
	margin-left:5%;
	 }
.icomapatol:hover ~ .ficha_tol	{
	background-color:#F0F0F0;
	color:#3a3a3a;
	border:1px solid #3a3a3a;
	opacity:1;
	margin-left:5%;
	 }
.icomapaval:hover ~ .ficha_val	{
	background-color:#F0F0F0;
	color:#3a3a3a;
	border:1px solid #3a3a3a;
	opacity:1;
	margin-left:5%;
	 }
.icomapasev:hover ~ .ficha_sev	{
	background-color:#F0F0F0;
	color:#3a3a3a;
	border:1px solid #3a3a3a;
	opacity:1;
	margin-left:5%;
	 }
.icomapacan:hover ~ .ficha_can	{
	background-color:#F0F0F0;
	color:#3a3a3a;
	border:1px solid #3a3a3a;
	opacity:1;
	margin-left:5%;
	 }
/* Iconos Mapa */
.icomapagal{
  float: right;
	position: absolute;
	margin-left: 20%;
	margin-top: 47%;
	width: 7%;
	animation-name: icopacity;
	animation-duration: 6s;
	 animation-iteration-count: infinite;
	opacity: 0;
	z-index: 5;
 
}
.icomapacl{
  float: right;
	position: absolute;
	margin-left: 37%;
	margin-top: 47%;
	width: 7%;
	animation-name: icopacity;
	animation-duration: 6s;
	 animation-iteration-count: infinite;
	opacity: 0;
	z-index: 5;
 
}

.icomapavg{
  float: right;
	position: absolute;
	margin-left: 55%;
	margin-top: 43%;
	width: 7%;
	animation-name: icopacity;
	animation-duration: 6s;
	 animation-iteration-count: infinite;
	opacity: 0;
	z-index: 5;
 
}

.icomapaz{
  float: right;
	position: absolute;
	margin-left: 66%;
	margin-top: 48%;
	width: 7%;
	animation-name: icopacity;
	animation-duration: 6s;
	 animation-iteration-count: infinite;
	opacity: 0;
	z-index: 5;
 
}

.icomapatol{
  float: right;
	position: absolute;
	margin-left: 46%;
	margin-top: 65%;
	width: 7%;
	animation-name: icopacity;
	animation-duration: 6s;
	 animation-iteration-count: infinite;
	opacity: 0;
	z-index: 5;
 
}

.icomapabar{
  float: right;
	position: absolute;
	margin-left: 81%;
	margin-top: 59%;
	width: 7%;
	animation-name: icopacity;
	animation-duration: 6s;
	 animation-iteration-count: infinite;
	opacity: 0;
	z-index: 5;
 
}

.icomapaval{
  float: right;
	position: absolute;
	margin-left: 66%;
	margin-top: 75%;
	width: 7%;
	animation-name: icopacity;
	animation-duration: 6s;
	 animation-iteration-count: infinite;
	opacity: 0;
	z-index: 5;
 
}

.icomapasev{
  float: right;
	position: absolute;
	margin-left: 23%;
	margin-top: 88%;
	width: 7%;
	animation-name: icopacity;
	animation-duration: 6s;
	 animation-iteration-count: infinite;
	opacity: 0;
	z-index: 5;
 
}

.icomapacan{
  float: right;
	position: absolute;
	margin-left: 13%;
	margin-top: 93%;
	width: 7%;
	animation-name: icopacity;
	animation-duration: 6s;
	 animation-iteration-count: infinite;
	opacity: 0;
	z-index: 5;
 
}
@keyframes icopacity {
  0% {opacity: 0;}
  5% {opacity: 0;}
  10% {opacity: 1;}
	95% {opacity: 1;}
	100% {opacity: 0;}
}