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

html, body {height:100%;}

html, body, h1, p, a, div, section {
	margin: 0;
	padding: 0;
	font-size: 200%;
	font: inherit;}

body {font-family:Arial, Helvetica, sans-serif;
	  overflow-y:auto;
	  overflow-x:hidden;
	  position:relative;
	  background-image:url(../IMG/fondo.jpg);
	  font-size:1em;
	  } 

	  
h1 {
	color: #F00;
	font-size: 400%;
	line-height: 100%;
	font-weight: 600;
	vertical-align:middle;
	text-align:center;
	text-shadow:2px 4px 3px rgba(0, 0, 0, 0.3);
	padding:2%;
}

a {
  color: #ffffff;
  text-align:center;
}

p {
  margin: 0 0 12px 0;
}

strong {
  font-weight: 700;
}

.container {
  width: 100%;
  position:absolute;
  top:13px;
  z-index:100;
}

.content {
  display: table-cell;
  vertical-align: middle;
  text-align:justify;
}

.content h1 {
  z-index:10;
}

.explicacion {
	margin: 10px 20px 10px 20px;
	font-size: 180%;
	color:#FFF;
	line-height: 120%;
	z-index:100;
	background-color:rgba(9,9,175,0.9);
	padding:20px 20px 8px 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.dcha {
  display:block;
  text-align: right;
  font-style: italic;
  color:#ffb7ff;
  text-shadow:2px 4px 3px rgba(0, 0, 0, 0.5);
  position:relative;
  margin-top:-60px;
  margin-bottom:5px;
}
.dchaAct {float:right;
  padding:0 20px 0 0;
}

.dchaAct img{ height:40px;}

.capaTodas {width:70%; 
	background-color:#FFF; 
	display:block;
	margin:20px auto;
	padding:30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
	border:#2e7a9f 3px solid;
	-webkit-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.75);
	box-shadow: 10px 15px 20px 0px rgba(0,0,0,0.75);
	}
.capaTodas a{ color:#33F
	}
.tituloTodas {width:40%; 
	background-color:rgba(195,0,27,0.9); 
    color:#ffb7ff;
	display:block;
	margin:50px auto 20px auto;
	padding:30px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:400%;
    font-weight: 600;
    vertical-align:middle;
    text-align:center;
    text-shadow:2px 4px 3px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
	border:#2e7a9f 3px solid;
	-webkit-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.75);
	}
.tituloTodas h3{width:100%; 
	font-size:50%;
    font-weight: 100;
	text-align:center !important;
	}
.navTodas {width:40%; 
	display:block;
	margin:0 auto;
    text-align:center;
	}

.descarga {float:left; 
	width:30%; 
	background-color:#F9F; 
	background-image:url(../IMG/fondo.jpg); 
	margin-left:0; 
	margin-right:40px;
	padding:10px;
	color: #FF0;
	font-weight: 600;
	text-align:center;
	text-shadow:4px 4px 4px rgba(0, 0, 0, 1);
	}

.bandaColor {width:100%; height:16.67%; display:block; z-index:1; position:relative}
.bandaColor img {max-height:90%; padding-left:0.8%; max-width:10%}
.nav-ini {z-index:1000}
.nav-ini img {padding:0px !important; margin:0 !important; z-index:1000; position:absolute; top:3px; left:3px}
.ftFlecha {max-height:70% !important; margin:0 !important; padding:0 !important}
.bandaColor actividad { position:absolute; margin-top::-60px}
.banda1 {background-color:#ff0000}
.banda2 {background-color:#ff8b00}
.banda3 {background-color:#ffed01}
.banda4 {background-color:#008026}
.banda5 {background-color:#004dff}
.banda6 {background-color:#750686}
.firma  {padding-left:95%;}
.firma img {height:40%; margin-top:20px}
.logoCal {float:left;}
.logoCal img {margin-right:30px; height:70px}
.logoCal2 {float:left;}
.logoCal2 img {margin-right:30px; height:40px}
.pdf {display:none}

.ftft {float:right; font-size:70%; clear:both; line-height: 100%;}
.tipoAct {margin-right:40px !important}
.tipoActP {display:none}

.capaLogos {display:table;
  	margin: 10px 20px;
	width:100%;
	height:80px;
	text-align:left;
	vertical-align:bottom;
	z-index:1000;
	}
.logo1 {display: table-cell;
	width:25%;
	}
.logo2 {display: table-cell;
	width:5%;
	}
.logo3 {display: table-cell;
	width:25%;
	}
.logo4 {display: table-cell;
	width:5%;
	}
.logo5 {display: table-cell;
	width:33%;
	}
.logo6 {display: table-cell;
	width:10%;
	}
.capaLogos img {max-height:150px;}

.lineaLista {display: table-row;
  	margin: 10px 20px;
	width:100%;
	height:100%;
	text-align:left;
	vertical-align:middle;
	z-index:1000;
	}
.celda1 {display: table-cell;
	width:15%;
	}
.celda1 img {height:10%}

.celda2 {display: table-cell;
	width:15%;
	}
.celda3 {display: table-cell;
	width:15%;
	}
.celda4 {display: table-cell;
	width:49%;
	}
.celda5 {display: table-cell;
	width:6%;
	}

.resaltar {opacity: 0.9;}
.resaltar:hover {opacity: 1;}
.girar {z-index:45;
	position:relative;
	}
.girar:hover {
	-webkit-animation: spin1 1s infinite linear;
	-moz-animation: spin1 1s infinite linear;
	-o-animation: spin1 1s infinite linear;
	-ms-animation: spin1 1s infinite linear;
	animation: spin1 1s infinite linear; 
	}
/* Detalles del giro */
@-webkit-keyframes spin1 {
	0% { -webkit-transform: rotate(360deg);}
	100% { -webkit-transform: rotate(0deg);}
	}
@-moz-keyframes spin1 {
	0% { -moz-transform: rotate(360deg);}
	100% { -moz-transform: rotate(0deg);}
	}
@-o-keyframes spin1 {
	0% { -o-transform: rotate(360deg);}
	100% { -o-transform: rotate(0deg);}
	}
@-ms-keyframes spin1 {
	0% { -ms-transform: rotate(360deg);}
	100% { -ms-transform: rotate(0deg);}
	}
@-keyframes spin1 {
	0% { transform: rotate(360deg);}
	100% { transform: rotate(0deg);}
	}
	
/*@media only screen and (max-height: 767px) {
	  body {font-size:0.5em;}
	  .capaTodas {font-size:200%}
	  .capaTodas img{width:80%;}
	  .tituloTodas h3{font-size:95%;}
}*/
@media only screen and (max-width: 980px) {
	  .dcha {margin-top:-20px !important;}
	  .capaTodas {font-size:200%}
	  }
@media only screen and (max-width: 920px) {
  	  h1 {font-size: 30px;;}
	  .logo4 {width:45%;}
	  .logo5 {width:10%;}
  	  .ftFlecha {display:none}
	  .tipoActP {display:inline}
	  .tipoAct {margin-right:0px !important}
	  .capaTodas {font-size:180%}
	  .tituloTodas {font-size:200%}
	  }
@media only screen and (max-width: 600px) {
  	  body {overflow:auto;}
	  .capaLogos img {max-height:40px}
	  .logo4 {width:40%;}
	  .logo5 {width:15%;}
	  .resaltar{max-width:12% !important}
	  .tituloTodas {font-size:180%}
	  .capaTodas {font-size:160%}
	  .capaTodas img{width:90%;}
	  .descarga {width:90%;}
	  .tituloTodas img{width:90%;}
	  .tituloTodas h3{font-size:55%; font-stretch:condensed; color:#FFF}
	  
	  }
@media only screen and (max-width: 500px) {
  	  .ftft {font-size:12px; margin:5px 20px 10px 0;}
	  .logo4 {width:35%;}
	  .logo5 {width:20%; padding-right:20px}
	  .tituloTodas {font-size:180%}
	  .descarga {width:90%;}
	  .capaTodas {font-size:120% !important}
	  .tituloTodas h3{font-size:50%; font-stretch:condensed; color:#FFF}
	  }
	  
.animacion {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -300%, 0);
    transform: translate3d(0, -300%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -300%, 0);
    transform: translate3d(0, -300%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 300%, 0);
    transform: translate3d(0, 300%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 300%, 0);
    transform: translate3d(0, 300%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(200%, 0, 0);
    transform: translate3d(200%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(200%, 0, 0);
    transform: translate3d(200%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

/* modal */

.modalrojo {
    position: fixed;
    font-family: Arial, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	background: rgba(200,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
	}
.modalrojo:target {
    opacity:1;
    pointer-events: auto;
	}

.modalverde {
    position: fixed;
    font-family: Arial, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	background: rgba(0,200,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
	}
.modalverde:target {
    opacity:1;
    pointer-events: auto;
	}

.modalbox{
    width: 70%;
    position: relative;
    padding: 20px;
    background: #fff;
    border-radius:10px;
	font-size:150%;
    -webkit-transition: all 500ms ease-in;
    -moz-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
    }
.grande{
    width:900px;
	margin-top:5px;
	font-size:130%;
	overflow: auto;
	max-height:85%;
    }
.modalbox h3{padding-left:15px; padding-right:15px; text-align:justify; font-size:14px; color:#006}
.modalbox p{padding-left:15px; padding-right:15px; text-align:justify; font-size:12px}
.modalbox table{padding-left:60px; font-size:12px; width:100%; margin-top:-32px; margin-bottom:10px}
.modalbox a{color:#03F}

.movedown {
    margin: 0 auto;
	}
.modalrojo:target .movedown{        
    margin:10% auto;
	}
.modalverde:target .movedown{        
    margin:10% auto;
	}

.rotate {
    margin: 2% auto;
	overflow: auto;
    -webkit-transform: scale(-5,-5); 
    transform: scale(-5,-5);
	}
.modalrojo:target .rotate{      
    transform: rotate(360deg) scale(1,1);
    -webkit-transform: rotate(360deg) scale(1,1);
	}
.modalverde:target .rotate{      
    transform: rotate(360deg) scale(1,1);
    -webkit-transform: rotate(360deg) scale(1,1);
	}

.resize {
    margin: 10% auto;
    width:0;
    height:0;
	}
.modalrojo:target .resize{
	width:450px;
    height:200px;
	}
.modalverde:target .resize{
	width:450px;
    height:200px;
	}

@media only screen and (max-width: 600px) {
  	  .modalbox {max-width:80%;}
  	  .modalbox p {font-size:70%;}
  	  .modalbox table {font-size:50%;}
	  }
@media only screen and (max-width: 900px) {
  	  .grande {width:600px;}
  	  .grande p {font-size:70%;}
  	  .grande table {font-size:50%;}
	  }

.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 1px;
    text-align: center;
    top: 1px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius:10px;
	}
.close:hover { 
    background: #FAAC58; 
    color:#222;
	}

/* Triangulos de fondo */
#canvas {height:100%; width:100%; position:absolute; top:0; left:0; z-index:1;} 
#altBG {height:100%; width:100%; position:absolute; top:0; left:0;}