@CHARSET "UTF-8";
/* * --------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('modal.css');

/* Reset CSS
 * --------------------------------------- */
* {padding: 0; margin: 0; box-sizing: border-box;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0; margin: 0; box-sizing: border-box; line-height: 100%}
a{text-decoration:none;}
table {border-spacing: 0; border-collapse: collapse;}
fieldset,img {border: 0;}
img {margin:0; padding: 0}
html, body, div, header, section, nav, footer {vertical-align: middle;}
p {font-size: 1.1em;}

strong{font-weight: 800;}
ol,ul {list-style: none; margin:0; padding:0;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {display: inline-block; letter-spacing: 0.1em;}

h1,h2 {font-size: 2.8em; position: relative;}

p {display: block; letter-spacing: 0.12em; line-height: 150%;}

q:before,q:after {content:'';}
abbr,acronym {border: 0;}
a, img, .header, .nav-container, .hide, .appear, .modal-content {-webkit-transition: all 0.44s ease; -moz-transition: all 0.44s ease; -o-transition: all 0.44s ease; transition: all 0.44s ease;}

::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {border-radius: 6px; background: transparent;}
::-webkit-scrollbar-thumb {border-radius: 6px; background: #032392;}
::-webkit-scrollbar-thumb:hover {background: #333;}

/*---------FONT FAMILY-----------------------*/
body {font-family: 'Montserrat', sans-serif; font-weight: 400}
.spacer {position: relative; height: 5vh;}
.footer-spacer {position: relative; height: 12vh;}
.line-height-150 {line-height: 250%;}
.item-title-50 {width: 50%; padding: 1em; text-align: left;}
.cont-50 {width: 50%; height: auto; position: relative;}
/*--------- COLORES --------*/
body {background-color: #fff; color: #333;}
p {text-align: justify;}

/*--------- CAPAS --------*/
#menuBtn {z-index: 900; display: inline-block; padding: 0.8em 2em; background-color: #032392; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.2em; border-radius: 25px; border: 2px solid #032392}
#menuBtn i {margin-left: 16px;}
#menuBtn:hover {background-color: transparent; color: #032392;}

.menu-container {width: 100%; height: auto; background-color: #fff; padding: 0; text-align: center;}

/*---------LAYOUT-----------------------*/
.wrap {width: 100%; max-width: 2048px; position: relative; margin: 0 auto;}
.header {position: fixed; width: 35%; height: 100vh; top: 0; left: 0; z-index: 800; -webkit-box-shadow: 5px 0px 11px -2px #000000; box-shadow: 5px 0px 11px -2px #000000; text-align: center; overflow: auto;}

.header .logo {width: 100%; height: auto; text-align: center; background-color: #fff; margin: 20px auto;}
.header .logo img {max-height: 106px;}

.cover-video {position: relative; width: 100%; height: 65vh; margin: 0 auto; background-color: #E7F2F8; z-index: 1}
.cover-video {display: flex; align-items: center; justify-content: center;}
.cover-video h3 {display: inline-block; font-size: 2em; color: #fff; letter-spacing: 0.12em; text-shadow:5px 5px 10px #000; max-width: 92%; line-height: 160%; text-align: center;}

.animated {-webkit-animation-fill-mode: both; animation-fill-mode: both;}
@-webkit-keyframes slideInUp {from {-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); opacity: 0;} to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}}
@keyframes slideInUp {from {-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); opacity: 0;} to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}}
.slideInUp {-webkit-animation-name: slideInUp; animation-name: slideInUp; -webkit-animation-duration: 2s; animation-duration: 2s;}

.nav-container {position: fixed; z-index: 1000; display: flex; justify-content: center; align-items: center; top: 0; width: 35%; height: 100vh; background-color: #032392;}
.nav-container img {max-width: 50%;}
.nav-hide {left: -40%;}
.nav-show {left: 0;}

#boton-cerrar {position: absolute; top: 0; right: 0; display: block; padding: 0.8em 1em; color: #fff; font-size: 1.6em;}
#boton-cerrar:hover {background-color: rgba(0,0,0,0.5);}

.mainNav {display: block;}
.mainNav a {display: block; color: #fff; padding: 1.1em 1.3em; margin: 1rem 0; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; line-height: 100%; text-align: center; border-radius: 25px;}
.mainNav a:hover {background-color: rgba(0,0,0,0.15);}
.mainNav .homeBtn {display: none;}
.mainNav a.active {background-color: #fff; color: #032392}
.mainNav a span {font-weight: 400; font-size: 0.82em; letter-spacing: 0.25em}

.footer {text-align: center; color: #fff; width: 35%; position: fixed; bottom: 0; left: 0; background-color: #032392}
.social {width: 100%; text-align: center; margin-bottom: 0}
.social a {color: #fff; display: inline-block; font-size: 2.1em; padding: 0 0.3em; margin: 0.8rem 0;}
.social a:hover {transform: scale(1.3); border-radius: 30px;}
.footer p {position: fixed; right: 2%; bottom: 1rem; max-width: 72%; font-size: 0.9em; line-height: 0; background: rgba(255,255,255,0.5); display: block; padding: 0.4em}
.tels {display: block; width: 90%; margin: 0 auto; border-top: 1px dotted #fff; border-bottom: 1px dotted #fff;}
.tels h4, .tels a {display: block; color: #fff; padding: 0.4em 0; text-transform: uppercase;}
.tels a {font-size: 1.1em; letter-spacing: 0.14em}

.avatar {position: relative; width: 90%; margin: 1rem 5% 0 5%; text-align: center;}
.avatar .foto {width: 52%; max-width: 580px; margin-bottom: 1rem; border-radius: 100%;}
.avatar h1, .avatar h2 {display: block; font-size: 1.1em; padding: 0;}
.avatar p {font-size: 0.85em; text-transform: uppercase; margin-top: 10px; display: block; text-align: center;}
.avatar .unam {max-width: 30%;}

.footer .width-80 a {display: block; padding: 1em 2em; margin-bottom: 1rem; background-color: #1E90FF; border-radius: 30px; color: #fff; text-align: left; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em;}
.footer .width-80 a i {font-size: 1.4em; margin-right: 1rem}
.footer .width-80 a:hover {background-color: #333}

.section {position: relative; float: right; width: 65%; min-height: 100vh; display: table; background-color: #fff;}
.section .description {font-size: 1.2em; margin: 1rem 0; padding-bottom: 0.8em; border-bottom: 1px dotted #333;}
.section-title {position: relative; width: 100%; height: auto;}
.section-title img {position: relative; top: 0; left: 0; max-width: 100%;}
.section-title h1, .section-title h2 {position: absolute; font-size: 1.8em; bottom: 2rem; right: 0; color: #fff; padding: 1rem 2.4rem; display: inline-block; background-color: #032392; border-radius: 25px 0 0 25px;}
.section-title h1 span, .section-title h2 span {font-weight: 400; font-size: 0.7em; float: right;}
.section-title p {width: 60%; text-align: center; margin: 0 auto; color: #fff;}
.section-content {width: 96%; height: auto; margin: 1rem 2%; position: relative;}

.section-p {padding: 1em 2em;}
.section-content ul {display: block; padding: 0 1.5em 1em 3em;}
.section-content ul li {display: block; padding: 0.6em; line-height: 130%; position: relative; font-size: 1.1em; letter-spacing: 0.1em;}
.section-content ul li:before {font-family: FontAwesome; content: "\f058"; position: absolute; left: -12px; font-size: 0.9em; color: #032392;}

.space-between {width: 100%; height: auto; display: flex; align-items: center; flex-direction: row;}
.space-between img, .space-between-reverse img {max-width: 30%; border-radius: 100%; margin: 1rem;}
.mision-vision {width: auto; margin: 0 1rem;}
.mision-vision h3 {display: block; padding: 1em; text-transform: uppercase; letter-spacing: 0.12em; border-bottom: 1px dotted #333; text-align: center;}
.mision-vision p {padding: 0.8em 0;}
.space-between-reverse {width: 100%; height: auto; display: flex; align-items: center; flex-direction: row-reverse;}

.cont-50 img {max-width: 90%; border-radius: 0;}
.slogan {display: block; padding: 1em 2em}

.contact {display: block;}
.contact li {display: block; padding: 0.6em; margin-left: 1.5rem; line-height: 130%; position: relative; font-size: 1.2em; letter-spacing: 0.1em;}
.contact .contact-mail:before {font-family: FontAwesome; content: "\f0e0"; position: absolute; left: -28px; font-size: 1.5em; color: #032392;}
.contact .contact-phone:before {font-family: FontAwesome; content: "\f095"; position: absolute; left: -28px; font-size: 1.5em; color: #032392;}
.contact .contact-mobile:before {font-family: FontAwesome; content: "\f232"; position: absolute; left: -28px; font-size: 1.5em; color: #032392;}
.contact .www:before {font-family: FontAwesome; content: "\f0ac"; position: absolute; left: -28px; font-size: 1.5em; color: #032392;}
.contact span {font-weight: 800}
.contact span a {color: #333}
.contact span a:hover {text-decoration: underline;}

.mainNav a.active  {-webkit-box-shadow: 2px 2px 10px -2px rgba(0,0,0,0.7); box-shadow: 2px 2px 10px -2px rgba(0,0,0,0.7);}

.float-left {float: left;}
.float-right {float: right;}

.mar-top-1r {margin-top: 1rem;}
.mar-bottom-1r {margin-bottom: 1rem;}
.orange {background-color: #1E90FF; text-align: center; border-radius: 8px}
.orange img {max-width: 80%; margin: 1rem auto; z-index: 2}
.width-80 {width: 80%; margin: 1rem 10%;}

.copyright {line-height: 100%; font-size: 0.8em; padding: 0.6em 0; float: left; color: #1a1a1a; text-transform: uppercase;}
.clix {display: block; line-height: 100%; font-size: 0.8em; padding: 0.6em 0; float: right; color: #1a1a1a; text-transform: uppercase;}

.footer-copyright {width: 100%; padding: 1.6em 0; background-color: #e6e6e6; color: #333; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.1em; text-align: center;}

.mostrar {display: block !important}

.modalFoto {cursor: pointer; position: relative;}
.modalFoto::after {
	font-family: FontAwesome; content: "\f00e"; position: absolute; top: 35%; right: 0; color: #032392; font-size: 1.4em;
}

/*---------FORMULARIO-----------------------*/
.mar-right-2 {margin-right: 2%}
.formulario {width: 100%; padding: 2em;}
#contact-form {position: relative;}
#contact-form .input-width {width: 98%;}
#contact-form label {display: inline-block; width: 48%; margin-top: 1.5rem; border-bottom: 1px solid #000; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.12em;}
#contact-form label input {width: 100%; border: 0; font-size: 1.2em; padding: 8px; outline: none;}
#contact-form .textarea {display: block; width: 100%; margin-top: 1.5rem; border-bottom: 1px solid #000; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.12em;}
#contact-form .textarea textarea {width: 100%; height: 140px; border: 0; padding: 8px; outline: none; font-family: inherit; font-size: 1.2em; margin-top: 8px}
input[type="submit"] {width: 100%; outline: none; padding: 1.2em 0; margin: 1rem 0; background: #032392; color: #fff; border: 2px solid #032392; text-transform: uppercase; font-size: 0.8em; font-weight: 800; letter-spacing: 0.3em; transition: all 0.5s ease; border-radius: 50px;}
input[type="submit"]:hover {cursor: pointer; background: transparent; color: #032392}

#status {background-color: #fff;}

.confirm-send {width: 100%; height: 100%; padding: 1em; text-align: center; color: #032392}
.confirm-send i {display: block; font-size: 2.4em; color: #032392; line-height: 100%; margin: 16px 0; padding: 0;}
.confirm-send h3 {display: block; padding-bottom: 1em; font-size: 1.2em; font-weight: 800; color: #032392; line-height: 100%}
.confirm-send #reload {display: block; padding: 0.9em; background-color: #032392; color: #fff; text-transform: uppercase; letter-spacing: 0.14em; margin: 12px 0; border: 1px solid #032392; border-radius: 50px; cursor: pointer;}
.confirm-send #reload:hover {background-color: transparent; color: #032392}

.sending-mail {width: 100%; height: auto; background-color: rgba(255,255,255,0.8); position: absolute; top: 0; left: 0; z-index: 30; display: flex; align-items: center; justify-content: center;}
.sending-mail i {display: block; font-size: 2.4em; color: #00008B; line-height: 100%; margin: 16px 0; padding: 0;}
.sending-mail p {display: block; font-size: 1.2em; color: #00008B; line-height: 150%; text-transform: uppercase; letter-spacing: 0.2em; padding: 0.8em 0; font-weight: 800;}



/*---------RESPONSIVE-----------------------*/
@media all and (max-width: 1024px) {
	.mainNav a {letter-spacing: 0.12em;}
}

@media all and (max-width: 935px) {
	.header {position: relative; top: auto; left: auto; width: 100%; height: auto; overflow: hidden; border-right: none; background-size: cover; -webkit-box-shadow: 0px 11px 11px -2px #000000; box-shadow: 0px 11px 11px -2px #000000;}
	.mainNav .homeBtn {display: block;}
		/*STICKY NAV*/
	#menuBtn:hover {background-color: transparent; color: #032392;}
	#menuBtn.sticky {position: fixed; top: 0; right: 0; border-radius: 0 0 0 12px; margin: 0 0; display: block; background-color: #000; border: none;}
	.nav-container {width: 100%;}
	.nav-hide {left: -100%;}
	.nav-show {left: 0;}
	.section, .contact-section {float: none; width: 100%;}
	.contacto .space-between {width: 100%; height: auto; display: block; margin-bottom: 1rem;}
	.cont-50 {width: 100%;}
	.footer {position: relative; width: 100%;}
	.footer-spacer {height: 4vh;}
}

@media all and (max-width: 580px) {
    .header .logo img {max-height: none; max-width: 74%;}
	.section-title h1, .section-title h2 {position: relative; display: block; text-align: center; border-radius: 0 0 0 0}
	.section-content {width: 98%; margin: 0 1%;}
.mar-right-2 {margin-right: 0}
.avatar .foto {margin-top: 1rem;}
#contact-form label {display: inline-block; width: 100%; margin-top: 1.5rem; border-bottom: 1px solid #000; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.12em;}
#contact-form label input {width: 100%; border: 0; font-size: 1.2em; padding: 8px; outline: none;}
#contact-form .textarea {display: block; width: 100%; margin-top: 1.5rem; border-bottom: 1px solid #000; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.12em;}
#contact-form .textarea textarea {width: 100%; height: 140px; border: 0; padding: 8px; outline: none; font-family: inherit; font-size: 1.2em; margin-top: 8px}
input[type="submit"] {width: 100%; outline: none; padding: 1.2em 0; margin: 1rem 0; background: #032392; color: #fff; border: 2px solid #032392; text-transform: uppercase; font-size: 0.8em; font-weight: 800; letter-spacing: 0.3em; transition: all 0.5s ease; border-radius: 50px;}
input[type="submit"]:hover {cursor: pointer; background: transparent; color: #032392}

.cover-video h3 {font-size: 1.6em;}
}

@media all and (max-width: 450px) {
	p {letter-spacing: 0.09em; line-height: 130%;}
	.section-title h1, .section-title h2 {font-size: 1.4em;}
    .space-between, .space-between-reverse {width: 100%; height: auto; display: block; margin-bottom: 1rem;}
	.space-between img, .space-between-reverse img {max-width: 80%; margin: 24px 10% 0 10%;}
	.mision-vision {width: 94%; margin: 0 3%;}

	.section-p {padding: 0 1em;}
	.section-content ul {padding: 0.6em 1em 1em 1.5em;}
}

@media all and (max-width: 350px) {
	#menuBtn {padding: 0.5em 1.5em; font-size: 0.8em}
	.avatar {margin: 0 5%;}
	.avatar img {width: 40%; margin-bottom: 8px;}
	.avatar .unam {width: 80%;}
	.avatar h1 {font-size: 1em;}
	.avatar p {font-size: 0.8em; margin-top: 5px;}
	.social {margin-bottom: 0}
	.social a {font-size: 1.6em; margin: 0.5rem 0;}
	.mainNav a {padding: 1em; font-size: 0.9em;}
	.contact {font-size: 0.9em; letter-spacing: 0;}
	.contact .contact-mail:before {font-size: 1.2em;}
	.contact .contact-phone:before {font-size: 1.2em;}
	.contact .contact-mobile:before {font-size: 1.2em;}
	.section-title h1, .section-title h2 {font-size: 1.2em; padding: 1rem 1rem;}
}