@charset "utf-8";

* { box-sizing: border-box; }
.azul { color: #002f5d; }
hr.min { width: 20%; margin-right: 0 auto; border: none; height: 3px; background-color: #002f5d; }
a { text-decoration: none; color: #002f5d; }
h1.medios { font-size: 40px; max-width: 1600px; padding: 0 40px; margin: 0 auto 60px; }
h1.boton a span { background-color: #ff5b6c; padding: 10px 45px; color: #fff; border-radius: 50px; font-size: 30px }

/* ----- Header ----- */
header { overflow: hidden; padding: 20px; max-width: 1100px; margin: 0 auto; }
header div.img { text-align: center; margin-top: 20px }
header div.img img { margin-top: 30px; }
/*header div.img { float: left; width: 20%; }
header div.img img { max-width: 300px; height: auto; }*/
header nav.desk, div#head nav.desk  { float: right; width: 80%; }
header nav.desk ul, div#head nav.desk ul  { margin: 28px 0 0; padding: 0; text-align: right; }
header nav.desk ul li, div#head nav.desk ul li  { list-style-type: none; display: inline-block; }
header nav.desk ul li a, div#head nav.desk ul li a  { color: #002f5d; text-decoration: none; }
header nav.desk ul li a span, div#head nav.desk ul li a span  { display: inline-block; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; font-weight: bold; }
header nav.desk ul li a span.izq, div#head nav.desk ul li a span.izq  { margin-right: 10px; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); transform: translateX(20px); }
header nav.desk ul li a span.der, div#head nav.desk ul li a span.der  { margin-left: 10px; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); transform: translateX(-20px); }
header nav.desk ul li a:hover span.izq, div#head nav.desk ul li a:hover span.izq  { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); }
header nav.desk ul li a:hover span.der, div#head nav.desk ul li a:hover span.der  { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); }

header nav.desk ul.cont li { border: 2px solid #002f5d; border-radius: 30px; margin: 5px 10px;}

div#videosismos { max-width: 900px; margin: 40px auto; padding: 20px; }

/*--Flota--*/
div#flotahome { position: fixed; right: 270px; text-align: right; bottom: 360px; z-index: 99; width: 160px; }
div#flotahome ul { list-style: none; }
div#flotahome ul li a { display: block; padding: 0px; height: 120px; width: 120px; margin: 3px 0px; border-radius: 100%; text-decoration: none; background: #023F6E; overflow: hidden; }
div#flotahome ul li a p { color: #fff; font-weight: bolder; width: 50px; margin: 43px auto; text-align: center; line-height: 19px; font-size: 20px;}


/* ----- Contenido ----- */
div#content div#infomebtn { text-align: center; }
div#content div#infomebtn h1 { margin: 5px auto; font-size: 40px; display: block; padding: 0 20px; }
div#content div#infomebtn h1 a span { font-size: 20px; display: inline-block; }
div#content div#infomebtn h1.segundo a span { font-size: 12px; padding: 10px 20px; }
div#content div#infomebtn h1.boton.segundo.min { display: inline-block; width: 16%; }
div#content div#infomebtn div.boton.segundo.min { max-width: 220px; display: inline-block; background-color: #6d0d19; padding: 5px 10px; border-radius: 20px; margin: 10px 20px; }
div#content div#infomebtn div#calendario { width: 800px!important; margin: auto; }
div#content div#infomebtn div#calendario div.uno { width: 33.3%; float: left; }
div#content div#infomebtn div#calendario div.uno2 { width: 20%; float: left; }
div#content div#infomebtn div.boton.segundo.min a span { color: #fff; }
div#content span.link { display: inline-block; border: 2px solid #002f5d; border-radius: 20px; padding: 4px 25px; margin: 10px 20px; }
div#content span.link:hover { background-color: #002f5d; }
div#content span.link:hover a { color: #fff; }

div#content span.link.mas { display: inline-block; border: 2px solid #002f5d; border-radius: 20px; margin: 30px 10px 0; padding: 4px 25px; font-size: 20px; background-color: #002f5d; }
div#content span.link.mas a { color: #fff; }
div#content span.link.mas:hover { background-color: #fff; }
div#content span.link.mas:hover a { color: #002f5d; }


div#content { margin-top: 50px; }
div#content h1.max { font-size: 50px; font-weight: bold; }
div#content h1.min { margin: 0; margin-top: -1.1em; margin-bottom: 70px; font-size: 40px; }
div#content h1 span { font-weight: 500; }

div#content div#cifrass { overflow: hidden; max-width: 900px; margin: 0 auto 90px; }
div#content div#cifrass > div { width: 50%; float: left; padding: 10px; color: #fff; text-align: center; height: 290px; }
div#content div#cifrass > div:nth-child(3n) { width: 100%; height: inherit; }
div#content div#cifrass > div div.total { background-color: #002f5d; padding: 25px 15px; }
div#content div#cifrass > div div.total div.medio { border: 2px solid; border-radius: 12px; padding: 0 10px; }
div#content div#cifrass > div div.total div.medio h2 { font-size: 40px; font-weight: 400; margin: 10px; }
div#content div#cifrass > div div.total div.medio h3 { font-weight: 100; font-size: 22px; margin-bottom: 0; }

div#content div#monto { overflow: hidden; max-width: 900px; margin: 40px auto; }
div#content div#monto > div { width: 50%; float: left; height: 380px; padding: 30px 30px 30px 60px; background-color: #eff2fb; margin-bottom: 40px;  }
div#content div#monto > div ol { font-weight: bold; padding: 0; font-size: 18px;}
div#content div#monto > div ol li { margin: 20px 0; }
div#content div#monto > div ol li span { font-weight: 100; }

div#content div#gris { overflow: hidden; background-color: #dcdcdc; padding: 70px 20px; position: relative; }
div#content div#gris > div { overflow: hidden; max-width: 900px; margin: 0 auto; }
div#content div#gris > div > div { float: left; max-width: 399px; }
div#content div#gris > div > div.raya { width: 4px; height: 126px; background-color: #002f5d; margin: 20px 49px; }
div#content div#gris > div > div h1.mid { font-size: 29px; text-align: left; margin: 0; }
div#content div#gris > div > div h1.mid span { font-size: 46px; }
div#content div#gris > div > div h1.mas { font-size: 45px; text-align: left; margin: 0; }

div#content div#apoyo { overflow: hidden; max-width: 400px; margin: 70px auto; text-align: center; }
div#content div#apoyo >div h1 { padding: 0 35px; border-left: 4px solid; border-right: 4px solid }

div#content div#apoyoo { overflow: hidden; max-width: 500px; margin: 70px auto; text-align: center; }
div#content div#apoyoo > div { overflow: hidden; border-left: 4px solid; border-right: 4px solid; padding: 20px 0; }
div#content div#apoyoo > div h1 { padding: 0 35px; }

div#content div#galeria { overflow: hidden; text-align: center; max-width: 800px; margin: 0 auto 50px; }
div#content div#galeria > div { margin-bottom: 30px; }
div#content div#galeria > div div { overflow: hidden; float: left; width: 25%; padding: 7px; height: 155px; }
div#content div#galeria > div div:first-child { width: 75%; height: 300px; }

div#content article#galeria { max-width: 900px; margin: 0 auto; }
div#content article#galeria h1 { margin-top: 40px;	 }

div#footer { text-align: center; margin-bottom: 60px; }
div#footer img { max-width: 200px; height: auto; margin: 20px; }

div#content div#video.video-container{
    position: relative;
    padding-bottom: 25%;
    padding-top: 20px;
    height: 0;
    overflow: hidden;
}
div#content div#video.grande {
    max-width: 850px;
    max-height: 478px;
    margin: 0 auto;
    border-radius: 40px 0;
}

/*---- Diseño 2019--*/

div#content div#infomebtn div.boton.segundo.min2 { max-width: 320px; display: inline-block; padding: 4px 34px; border-radius: 20px; margin: 60px 20px; border: 3px #EF651A solid; }
div#content div#infomebtn div.boton.segundo.min2 span { color: #EF651A; }
div#content div#infomebtn div.boton.segundo.min2:hover { background-color: #EF651A; }
div#content div#infomebtn div.boton.segundo.min2:hover span { color: #fff; }

div#content div#infomebtn div.boton.segundo.min9 { max-width: 320px; display: inline-block; padding: 4px 34px; border-radius: 20px; margin: 60px 20px; border: 3px #6d0d19 solid; }
div#content div#infomebtn div.boton.segundo.min9 span { color: #6d0d19; }
div#content div#infomebtn div.boton.segundo.min9:hover { background-color: #6d0d19; }
div#content div#infomebtn div.boton.segundo.min9:hover span { color: #fff; }
div#content div#infomebtn div.boton.segundo.min8 { max-width: 320px; display: inline-block; padding: 4px 34px; border-radius: 20px; margin: 60px 20px; border: 3px #7f61a1 solid;  }
div#content div#infomebtn div.boton.segundo.min8 span { color: #7f61a1; }
div#content div#infomebtn div.boton.segundo.min8:hover { background-color: #7f61a1; }
div#content div#infomebtn div.boton.segundo.min8:hover span { color: #fff; }
div#content div#infomebtn div.boton.segundo.min7 { max-width: 320px; display: inline-block; padding: 4px 34px; border-radius: 20px; margin: 60px 20px; border: 3px #069789 solid; }
div#content div#infomebtn div.boton.segundo.min7 span { color: #069789; }
div#content div#infomebtn div.boton.segundo.min7:hover { background-color: #069789; }
div#content div#infomebtn div.boton.segundo.min7:hover span { color: #fff; }
div#content div#infomebtn div.boton.segundo.min21 { max-width: 320px; display: inline-block; padding: 4px 34px; border-radius: 20px; margin: 60px 20px; border: 3px #358f51 solid; }
div#content div#infomebtn div.boton.segundo.min21 span { color: #358f51; }
div#content div#infomebtn div.boton.segundo.min21:hover { background-color: #358f51; }
div#content div#infomebtn div.boton.segundo.min21:hover span { color: #fff; }
div#content div#infomebtn div.boton.segundo.min22 { max-width: 320px; display: inline-block; padding: 4px 34px; border-radius: 20px; margin: 60px 20px; border: 3px #ff5b6c solid; }
div#content div#infomebtn div.boton.segundo.min22 span { color: #ff5b6c; }
div#content div#infomebtn div.boton.segundo.min22:hover { background-color: #ff5b6c; }
div#content div#infomebtn div.boton.segundo.min22:hover span { color: #fff; }

h1.boton08 { max-width: 320px; display: inline-block; padding: 4px 34px; border-radius: 20px; margin: 60px auto!important; background-color: #7f61a1; width: 160px; color: #fff;  }
div#calendario08 { width: 1200px; margin: auto; }
div#content div#infomebtn div#calendario08 div.uno { width: 24.3%; float: left; }
div#content div#infomebtn div.boton.segundo.min_8 { max-width: 320px; width: 240px; display: inline-block; padding: 4px 0px; border-radius: 20px; margin: 10px; border: 3px #7f61a1 solid;  }
div#content div#infomebtn div.boton.segundo.min_8 span { color: #7f61a1; }
div#content div#infomebtn div.boton.segundo.min_8:hover { background-color: #7f61a1; }
div#content div#infomebtn div.boton.segundo.min_8:hover span { color: #fff; }
div#videosismos { margin: 80px auto; }

h1.boton07 { max-width: 320px; display: inline-block; padding: 4px 34px; border-radius: 20px; margin: 60px auto!important; background-color: #069789; width: 160px; color: #fff;  }
div#content div#infomebtn div.boton.segundo.min_7 { max-width: 320px; display: inline-block; padding: 4px 34px; border-radius: 20px; margin: 10px 20px; border: 3px #069789 solid; }
div#content div#infomebtn div.boton.segundo.min_7 span { color: #069789; }
div#content div#infomebtn div.boton.segundo.min_7:hover { background-color: #069789; }
div#content div#infomebtn div.boton.segundo.min_7:hover span { color: #fff; }
div#content div#infomebtn div#calendario2 div.uno { width: 50%; float: left; }
div#content div#infomebtn div#calendario2 { width: 800px; margin: auto; }

h1.boton09 { max-width: 320px; display: inline-block; padding: 4px 34px; border-radius: 20px; margin: 60px auto!important; background-color: #6d0d19; width: 160px; color: #fff;  }
div#content div#infomebtn div.boton.segundo.min_9 { max-width: 320px; width: 240px; display: inline-block; padding: 4px 0px; border-radius: 20px; margin: 10px; border: 3px #6d0d19 solid; }
div#content div#infomebtn div.boton.segundo.min_9 span { color: #6d0d19; }
div#content div#infomebtn div.boton.segundo.min_9:hover { background-color: #6d0d19; }
div#content div#infomebtn div.boton.segundo.min_9:hover span { color: #fff; }
div#content div#infomebtn div#calendario09 div.uno { width: 33%; float: left; }
div#calendario09 { width: 800px; margin: auto; }

h1.boton20 { max-width: 320px; display: inline-block; padding: 4px 34px; border-radius: 20px; margin: 60px auto!important; background-color: #EF651A; width: 160px; color: #fff;  }
div#content div#infomebtn div.boton.segundo.min_2 { max-width: 320px; width: 240px; display: inline-block; padding: 4px 0px; border-radius: 20px; margin: 10px; border: 3px #EF651A solid; }
div#content div#infomebtn div.boton.segundo.min_2 span { color: #EF651A; }
div#content div#infomebtn div.boton.segundo.min_2:hover { background-color: #EF651A; }
div#content div#infomebtn div.boton.segundo.min_2:hover span { color: #fff; }
div#content div#infomebtn div#calendario20 div.uno { width: 33%; float: left; }
div#calendario20 { width: 800px; margin: auto; }

h1.boton21 { max-width: 320px; display: inline-block; padding: 4px 34px; border-radius: 20px; margin: 60px auto!important; background-color: #358f51; width: 160px; color: #fff;  }
div#content div#infomebtn div.boton.segundo.min_21 { max-width: 320px; width: 240px; display: inline-block; padding: 4px 0px; border-radius: 20px; margin: 10px; border: 3px #358f51 solid; }
div#content div#infomebtn div.boton.segundo.min_21 span { color: #358f51; }
div#content div#infomebtn div.boton.segundo.min_21:hover { background-color: #358f51; }
div#content div#infomebtn div.boton.segundo.min_21:hover span { color: #fff; }
div#content div#infomebtn div#calendario21 div.uno { width: 33%; float: left; }

h1.boton22 { max-width: 320px; display: inline-block; padding: 4px 34px; border-radius: 20px; margin: 60px auto!important; background-color: #ff5b6c; width: 160px; color: #fff;  }
div#content div#infomebtn div.boton.segundo.min_22 { max-width: 320px; width: 240px; display: inline-block; padding: 4px 0px; border-radius: 20px; margin: 10px; border: 3px #ff5b6c solid; }
div#content div#infomebtn div.boton.segundo.min_22 span { color: #ff5b6c; }
div#content div#infomebtn div.boton.segundo.min_22:hover { background-color: #ff5b6c; }
div#content div#infomebtn div.boton.segundo.min_22:hover span { color: #fff; }

/* ----- Versión Movil ----- */
@media (max-width:1440px) {
	div#flotahome { right: 130px;  }
}
@media (max-width:1200px) {
	div#content div#video.video-container { padding-bottom: 40%; }
	div#flotahome { right: 30px; }

}
@media (max-width:1097px) {
	div#calendario08 { width: 1097px; margin: 0 10px; }

}
@media (max-width:1024px) {
	div#flotahome { bottom: 370px; }

}
@media (max-width:900px) {
	div#content div#gris > div > div { max-width: 379px; }
	div#content div#gris > div > div h1.mid { font-size: 28px; }
	div#content div#gris > div > div h1.mas { font-size: 44px; }
	div#content div#video.video-container { padding-bottom: 52%; }

	div#calendario08 { width: 900px; }
	div#content div#infomebtn div.boton.segundo.min_8 { width: 210px; }
	div#content div#infomebtn div.boton.segundo.min_2 { width: 210px; }
}
@media (max-width:832px) {
	div#content div#cifrass > div div.total div.medio h2 { font-size: 30px!important; }

	div#content div#gris > div > div, div#content div#gris > div > div.raya { float: none; max-width: 100%; width: 100%; padding: 0 40px; }
	div#content div#gris > div > div.raya {  height: 4px; margin: 20px 0; }
	div#content div#gris > div > div h1.mid, div#content div#gris > div > div h1.mas { text-align: center; }

	div#content div#monto > div { height: 400px; }

	div#content div#video.video-container { padding-bottom: 57%; }

	div#calendario08 { width: 832px; }
	div#calendario20 { width: 832px; }
	div#content div#infomebtn div#calendario08 div.uno { width: 32.3%; }


}
@media (max-width:800px) {
	div#content div#monto > div { height: 420px; }

	div#content div#video.video-container { padding-bottom: 60%; }

	div#content div#infomebtn h1.boton.segundo.min { width: 33%; }

	div#content div#infomebtn div#calendario { width: 740px!important; }

	div#calendario08 { width: 800px; }
	div#calendario20 { width: 800px; }
}


@media (max-width:680px) {
	div#content div#cifrass > div div.total div.medio h2 { font-size: 25px!important; }

	div#content div#monto > div { height: 460px; }

	div#content div#monto > div { float: none; width: 100%; max-width: 100%; height: inherit; margin: 0; }
	div#content div#monto > div ol { margin: 0; }
	div#content div#monto > div:nth-child(1n) { padding-bottom: 1px; }
	div#content div#monto > div:nth-child(2n) { padding-top: 1px; padding-bottom: 30px; }

	div#content div#video.video-container { padding-bottom: 70%; }

	div#content div#infomebtn h1.boton.segundo.min { width: 100%; }

	div#content div#infomebtn div#calendario { width: 480px!important; }

	/*--2019--*/
	div#content div#infomebtn div#calendario09 div.uno { width: 42%; }
	div#calendario08 { width: 680px; }
	div#content div#infomebtn div#calendario2 { width: 680px; }

	div#content div#infomebtn div#calendario div.uno2 { width: 50%; }

	div#calendario20 { width: 680px; }



}
@media (max-width:450px) {
	header nav.desk, div#head nav.desk  { float: none; width: 100%; }
	header div.img img { max-width: 90%; }

	div#content div#cifrass > div { float: none; width: 100%; max-width: 100%; }

	div#content div#galeria > div div { float: none; width: 100%!important; max-width: 246px!important; margin: 0 auto; height: inherit!important; }
	div#content div#infomebtn div#calendario { width: 430px!important; }
	div#content div#infomebtn h1 { padding: 0 16px; font-size: 36px; }
	div#content div#infomebtn div#calendario div.uno { width: 29.3%; }
	div#videosismos { margin: 0px auto; }

	/*--2019--*/
	div#content div#infomebtn div#calendario09 div.uno { width: 100%; }
	div#calendario09, div#calendario08, div#content div#infomebtn div#calendario2 { width: 450px; }
	div#content div#infomebtn div#calendario08 div.uno { width: 100%; margin-left: -10px; }
	div#content div#infomebtn div#calendario2 div.uno { width: 100%; }
	div.img { width: 400px; margin: 0 auto; }

	div#calendario20 { width: 450px; }
	div#content div#infomebtn div#calendario20 div.uno { width: 100%; }

}

@media (max-width:425px) { 
	div.img { width: 360px; }
	div#content div#infomebtn div#calendario { width: 400px!important; }
	div#content div#infomebtn h1 { font-size: 30px; }

	div#calendario20 { width: 425px; }
 }
@media (max-width:400px) {
	div#content h1.max { font-size: 40px; }
	div#content h1.min { margin-top: -0.9em;}
	div#content div#cifrass > div div.total div.medio h1 { font-size: 34px; }
	div#content div#infomebtn div#calendario { width: 390px!important; }
	div#content div#infomebtn div#calendario div.uno { width: 100%; }
	div#content div#infomebtn div#calendario div.uno2 { width: 100%; }

	div#calendario09, div#calendario08, div#content div#infomebtn div#calendario2 { width: 400px; }
	div.img { width: 350px; }
	div#content div#infomebtn div.boton.segundo.min9, div#content div#infomebtn div.boton.segundo.min8, div#content div#infomebtn div.boton.segundo.min7, div#content div#infomebtn div.boton.segundo.min2  { margin: 20px 20px; }
	div#content div#cifrass > div div.total div.medio h1 { font-size: 32px; }
	div#content div#apoyo { max-width: 330px; }

	div#calendario20 { width: 400px; }
	div#content div#infomebtn div.boton.segundo.min21 { margin: 20px 20px; }
}
@media only screen and (max-width:360px){
	div#content div#cifrass > div div.total div.medio h1 { font-size: 29px; }
	div#content div#gris > div > div h1.mid span { font-size: 30px; }
	div#content div#apoyo { max-width: 300px; }
	div#content div#apoyo >div h1 { padding: 0 25px; }
	div#content div#infomebtn div#calendario div.uno, div#content div#infomebtn div#calendario2 { max-width: 360px; }

	div#content div#infomebtn div#calendario { width: 330px!important; }
	div#calendario09, div#calendario08 { width: 360px; }
	div.img { width: 330px; }
	div#content div#cifrass > div div.total div.medio h1 { font-size: 27px; }

	div#calendario20 { width: 360px; }
}
@media only screen and (max-width:320px) {
	div#content div#infomebtn div#calendario { width: 290px!important; }
	div#content div#cifrass > div div.total div.medio h1 { font-size: 25px; }
	div#content div#cifrass > div div.total div.medio h2 { font-size: 23px!important; }
	div#content div#infomebtn h1 { padding: 0 14px; }
	div#content div#gris > div > div h1.mid span { font-size: 33px; }
	div#calendario09, div#calendario08, div#content div#infomebtn div#calendario2 { width: 320px; }
	div.img { width: 290px; }
	div#content div#cifrass > div div.total div.medio h1 { font-size: 23px; }

	div#calendario20 { width: 320px; }
	div#flotahome { right: 12px; }
}