@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; }

/* ----- 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 { float: right; width: 80%; }
header nav.desk ul { margin: 28px 0 0; padding: 0; text-align: right; }
header nav.desk ul li { list-style-type: none; display: inline-block; }
header nav.desk ul li a { color: #002f5d; text-decoration: none; }
header 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 { margin-right: 10px; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); transform: translateX(20px); }
header 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 { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); }
header nav.desk ul li a:hover span.der { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); }

/* ----- Contenido ----- */
div#content span.link { display: inline-block; border: 2px solid #002f5d; border-radius: 20px; padding: 4px 25px; }
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: 50px auto 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#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;
}

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

}
@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%; }
}
@media (max-width:832px) {
	div#content div#cifrass > div div.total div.medio h2 { font-size: 30px; }

	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%; }
}
@media (max-width:800px) {
	div#content div#monto > div { height: 420px; }

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

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

	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%; }
}
@media (max-width:450px) {
	header 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; }
}
@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: 35px; }
}
@media only screen and (max-width:320px) {}