@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@800&display=swap');
/*** Generales ***/
body{
    background-color:#e6e6e6;
}
.opacidad {
    opacity: 0.8;
}
.contenedor-principal{
    background-color: transparent;
    padding-top: 0;
}
.top-unam-home{
    background-color: rgb(26,35,129,0.8);
}

/*** Estilos en la sección del video ***/
#cabeza{
    width:100%;
    height:720px;
    overflow:hidden;
    z-index:-2;
}
#fadeparallax{
    position:absolute;
    top:80px;
    width:100%;
    height:10px;
    background-color:#0F0;
    opacity:0.0;
}
#video{
    position: fixed;
    width: 100%;
    z-index: -2;
}
.mp4video{
    width: 100%;
}
#overlogo{
    position: absolute;
    width:100%;
    height: 400px;
    color:#FFF;
    font-size:25px; 
    text-align: left;
    overflow: hidden;
    z-index: -1;
}
#overlogo p{
    color: #fff;
    font-size:55px;
    position: absolute;
    display: block;
    top: 180px;
    width: 100%;
    text-transform:uppercase;
}
.titulo-blanco-overlogo{
    font-family: 'Prompt', sans-serif;
    color: #FFFFFF;
    line-height: 1;
}
/*** Animación texto sobre video ***/
.item-1, .item-2, .item-3, .item-4{
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}					
.item-1{
    -webkit-animation-name: anim-1;
    animation-name: anim-1;
}
.item-2{
    -webkit-animation-name: anim-2;
    animation-name: anim-2;
}
.item-3{
    -webkit-animation-name: anim-3;
    animation-name: anim-3;
}
.item-4{
    -webkit-animation-name: anim-4;
    animation-name: anim-4;
}
@-webkit-keyframes anim-1 {
    0%, 20% { left: -100%; opacity: 0; }
    28.3%, 40% { left: 10%; opacity: 1; }
    50%, 100% { left: 110%; opacity: 0; }
}
@keyframes anim-1 {
    0%, 20% { left: -100%; opacity: 0; }
    28.3%, 40% { left: 10%; opacity: 1; }
    50%, 100% { left: 110%; opacity: 0; }
}
@-webkit-keyframes anim-2 {
    0%, 20% { left: -100%; opacity: 0; }
    28.63%, 40% { left: 10%; opacity: 1; }
    50%, 100% { left: 110%; opacity: 0; }
}
@keyframes anim-2 {
    0%, 20% { left: -100%; opacity: 0; }
    28.63%, 40% { left: 10%; opacity: 1; }
    50%, 100% { left: 110%; opacity: 0; }
}
@-webkit-keyframes anim-3 {
    0%, 40% { left: -100%; opacity: 0; }
    48.96%, 60% { left: 10%; opacity: 1; }
    75%, 100% { left: 110%; opacity: 0; }
}
@keyframes anim-3 {
    0%, 40% { left: -100%; opacity: 0; }
    48.96%, 60% { left: 10%; opacity: 1; }
    75%, 100% { left: 110%; opacity: 0; }
}
@-webkit-keyframes anim-4 {
    0%, 60% { left: -100%; opacity: 0; }
    74.96%, 91.62% { left: 10%; opacity: 1; }
    100% { left: 110%; opacity: 0; }
}
@keyframes anim-4 {
    0%, 60% { left: -100%; opacity: 0; }
    74.96%, 91.62% { left: 10%; opacity: 1; }
    100% { left: 110%; opacity: 0; }
}
#overbutton{
    position: absolute;
    width: 100%;		
    padding-top: 510px;
    text-align: center;
}
#overbutton #recurso3{
    position: absolute;
    top: 440px;
    right: 10px;
    width: 211px;
    margin: auto;
}
#overbutton #recurso4{
    position: absolute;
    top: 350px;
    right: 10px;
    width: 211px;
    margin: auto;
}
#overbutton #recurso5{
    position: absolute;
    top: 395px;
    right: 10px;
    width: 211px;
    margin: auto;
}
.down_cabeza {
    cursor: pointer;
}
/*** Estilos Contenido ***/
.contenedor-home{
    padding-top: 20px;
    padding-bottom: 40px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 20px;
    line-height: 1.42857143;
    color: #333;
    background-color: #e6e6e6;
}
.tema-homeS1 {
    position: initial;
    top: 20px;
    color: #000000;
}
.tema-home{
    position: absolute;
    background: #000;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 3;
    opacity: 0;
   transition: opacity .35s ease-in-out;
   -moz-transition: opacity .35s ease-in-out;
   -webkit-transition: opacity .35s ease-in-out;
}
.tema-home:hover{
    opacity: 0.3;
}
/*** Caja A ***/
.tema-homeA1,
.tema-homeA2 {
    position: relative;
    height: 427px;
    overflow: hidden;
}
.overA1{
    width: 50%;
    height: 100%;
    background-color: #414042;
    position: absolute;
    top: 0;
    right: 0;
    color: #FFFFFF;
    opacity: 0.85;
}
.titulo-homeA1 {
    margin-top: 10px;
    font-size: 125%;
    padding: 0 10px;
    font-weight: bold;
    text-align: left;
    color: #fff;
}
.desc-homeA1{
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 80%;
}
.iconA2 {
    position: absolute;
    z-index: 1;
    top: 36%;
    left: 40%;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    -moz-transition: -moz-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
}
/*** Caja B ***/
.tema-homeB1,
.tema-homeB2,
.tema-homeB3 {
    position: relative;
    background-color: #FFFFFF;
    height: 427px;
    overflow: hidden;
}
.tema-homeB1 a,
.tema-homeB1 a:link,
.tema-homeB1 a:hover,
.tema-homeB2 a,
.tema-homeB2 a:link,
.tema-homeB2 a:hover{
    text-decoration: none;
}
.imgB1,
.imgB2 {
    height: 48%;
}
.imgB3 {
    height: 100%;
    opacity: 0.5;
}
.iconB1{
    position: absolute;
    bottom:55%;
    right: 10%;
}
.iconB2{
    position: absolute;
    top: 3%;
    right: 5%;
    width: 30px;
}
.titulo-homeB1,
.titulo-homeB2,
.titulo-homeB3 {
    margin-top: 10px;
    font-size: 125%;
    padding: 0 10px;
    font-weight: bold;
    text-align: left;
    color: #000;
}
.desc-homeB1,
.desc-homeB2,
.desc-homeB3 {
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 80%;
    color: #000;
}
.overB3 {
    position: absolute;
    top: 25%;
    margin-top: -25%;
    right: 0;
    width: 100%;
    height: 100%;
    color: #000;
}
/*** Caja C  ***/
.tema-homeC {
    position: relative;
    height: 427px;
    overflow: hidden;
}
.tema-homeC1, .tema-homeC2, .tema-homeC3 {
    position: absolute;
    width: 100%;
}
.tema-homeC1-top, .tema-homeC2-top, .tema-homeC3-top {
    top: 0;
}
.tema-homeC1-bottom, .tema-homeC2-bottom, .tema-homeC3-bottom {
    bottom: 0;
}
.imgC1, .imgC2, .imgC3{
    width: 100%;
}
.imgC3 {
    opacity: 0.5;
}
.iconC1 {
    position: absolute;
    z-index: 1;
    top: 35px;
    left: 70px;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    -moz-transition: -moz-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
}
.iconC2, .iconC3 {
    width: 30px;
    position: absolute;
    top:10px;
    right: 10px;
}
.iconC3 {
    z-index: 3;
}
.titulo-homeC3 {
    margin-top: 38px;
    font-size: 125%;
    padding: 0 10px;
    font-weight: bold;
    text-align: left;
    color: #000;
}
.desc-homeC3 {
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 80%;
    color: #000;
}
.overC3 {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    color: #000;
}

/*** Media queries ***/
@media screen and (min-device-width:1024px) and (orientation: landscape) {
    #overbutton{
        padding-top: 490px;
    }
}
@media screen and (max-width:991px){
    #cabeza{
        height:557px;
    }
    #overlogo p{
        top:140px;
    }
    #overbutton{
        padding-top:490px;
    }
    #overbutton img{
        top: -55px;
    }
}
@media only screen and (max-device-width:991px) and (orientation: portrait) {
    .opacidad{
        opacity: 1 !important;
    }
    .contenedor-principal{
        padding-top: 102px;
    }
    #cabeza{
        height: auto;
    }
    #video{
        position: relative;
    }
}
@media screen and (max-width:940px){
    #overbutton{
        padding-top:460px;
    }
    #overbutton img{
        //top: 380px;
    }
}
@media screen and (max-width:850px){
    #overbutton{
        padding-top:380px;
    }
    #overbutton img{
        //top: 380px;
    }
}
@media screen and (max-width:767px){
    .opacidad{
        opacity: 1 !important;
    }
    .contenedor-principal{
        padding-top: 102px;
    }
    #cabeza{
        height: auto;
    }
    #video{
        position: relative;
    }
    #overbutton{
        padding-top: 250px;
    }
    #overlogo p{
        font-size: 28px;
    }
    @-webkit-keyframes anim-1 {
        0%, 20% { left: -100%; opacity: 0; }
        28.63%, 40% { left: 5%; opacity: 1; }
        50%, 100% { left: 110%; opacity: 0; }
    }
    @keyframes anim-1 {
        0%, 20% { left: -100%; opacity: 0; }
        28.63%, 40% { left: 5%; opacity: 1; }
        50%, 100% { left: 110%; opacity: 0; }
    }
    @-webkit-keyframes anim-2 {
        0%, 20% { left: -100%; opacity: 0; }
        28.63%, 40% { left: 5%; opacity: 1; }
        50%, 100% { left: 110%; opacity: 0; }
    }
    @keyframes anim-2 {
        0%, 20% { left: -100%; opacity: 0; }
        28.63%, 40% { left: 5%; opacity: 1; }
        50%, 100% { left: 110%; opacity: 0; }
    }
    @-webkit-keyframes anim-3 {
        0%, 40% { left: -100%; opacity: 0; }
        48.96%, 60% { left: 5%; opacity: 1; }
        75%, 100% { left: 110%; opacity: 0; }
    }
    @keyframes anim-3 {
        0%, 40% { left: -100%; opacity: 0; }
        48.96%, 60% { left: 5%; opacity: 1; }
        75%, 100% { left: 110%; opacity: 0; }
    }
    @-webkit-keyframes anim-4 {
        0%, 60% { left: -100%; opacity: 0; }
        74.96%, 91.62% { left: 5%; opacity: 1; }
        100% { left: 110%; opacity: 0; }
    }
    @keyframes anim-4 {
        0%, 60% { left: -100%; opacity: 0; }
        74.96%, 91.62% { left: 5%; opacity: 1; }
        100% { left: 110%; opacity: 0; }
    }
}
@media screen and (max-width:550px){
    #cabeza{
        height: auto;
    }
    #overlogo p{
        top: 45px;
        font-size: 22px;
    }
    #overbutton{
        padding-top: 250px !important;
    }
    #overbutton img{
        width: 180px;
    }
}
/*   MEDIA QUERIES  */
@media screen and (min-width:992px) and (max-width: 1199px) { /* md */
    /*  CAJA A */
    .tema-homeA1, .tema-homeA2 { height: 350px; }
    .iconA2 {top:50%; left:50%; margin-left: -71px; margin-top: -71px}
    .overA1 {width: 50%; height: 350px;}
    .titulo-homeA1 { font-size: 105%; }
    .desc-homeA1{ font-size: 67%; }
    /* Caja B */
    .tema-homeB1, .tema-homeB2, .tema-homeB3 { height:350px; }
    /* Título y descripción B y C3 */
    .titulo-homeB1, .titulo-homeB2, .titulo-homeB3, .titulo-homeC3 { font-size: 105%; }
    .desc-homeB1, .desc-homeB2, .desc-homeB3, .desc-homeC3 { font-size: 67%; }
    /* Caja C  */
    .tema-homeC { height: 350px; }
    .iconC1 { top:10px; left:40px; }
}
@media (min-width: 768px) and (max-width: 991px) { /* sm */	
    /*  CAJA A */
    .tema-homeA1, .tema-homeA2 { height: 554px; margin-top: 25px}
    .imgA1, imgA2 {width: 100%}
    .iconA2, .iconC1 {top:50%; left:50%; margin-left: -71px; margin-top: -71px}
    .overA1{ width: 50%; height: 554px;	}
    .titulo-homeA1 { font-size: 125%; }
    .desc-homeA1{ font-size: 80%; }
    /* Caja B */
    .tema-homeB1, .tema-homeB2, .tema-homeB3 { height: 554px;margin-top: 25px;}
    /* Título y descripción B y C3 */
    .titulo-homeB1, .titulo-homeB2, .titulo-homeB3, .titulo-homeC3 { font-size: 125%; }
    .desc-homeB1, .desc-homeB2, .desc-homeB3, .desc-homeC3 { font-size: 80%; }
    .iconB1, .iconB2 { bottom:51%; }
    /* Caja C */
    .tema-homeC { height: 554px; margin-top: 25px; }
}
@media (min-width: 600px) and (max-width: 767px) { /* xs */	
    /* CAJA A */
    .tema-homeA1, .tema-homeA2 { height: auto; margin-top: 25px}
    .iconA2, .iconC1 {top:50%; left:50%; margin-left: -71px; margin-top: -71px}
    .overA1{bottom: 0px; width: 50%; height: auto;	}
    .imgA1, .imgA2 {width: 100%}
    .titulo-homeA1 { font-size: 125%; }
    .desc-homeA1{ font-size: 80%; }
    /* Caja B */
    .tema-homeB1, .tema-homeB2, .tema-homeB3 { height: 420px; margin-top: 25px;}
    .imgB1, .imgB2 { width: 100%; height: auto; }
    .titulo-homeB1, .titulo-homeB2, .titulo-homeB3 { font-size: 125%; }
    .desc-homeB1, .desc-homeB2, .desc-homeB3 { font-size: 80%; }
    /* Caja C */
    .tema-homeC { height: auto; margin-top: 25px; }
    .tema-homeC1, .tema-homeC2, .tema-homeC3 { width: 100%;	position: relative; }
    .tema-homeC1-bottom, .tema-homeC2-bottom, .tema-homeC3-bottom { margin-top: 10px; }
    .iconC2, iconC3 { top:10%; right: 5%; }
}
@media (min-width: 320px) and (max-width: 599px) { /* xxs */
    .col-xxs-12{ width: 100%; }
    /*  CAJA A */
    .tema-homeA1, .tema-homeA2 { height:auto; margin-top: 25px}
    .iconA2, .iconC1 {top:50%; left:50%; margin-left: -71px; margin-top: -71px}
    .overA1{bottom: 0px; width: 80%; height: auto; background: rgba(65, 64, 66, 0.8);	}
    .titulo-homeA1 { font-size: 125%; }
    .desc-homeA1{ font-size: 70%; }
    /* Caja B */
    .tema-homeB1, .tema-homeB2, .tema-homeB3 { height: auto;margin-top: 25px;}
    .imgB1, .imgB2 { width: 100%; height: auto; }
    .iconB1, .iconB2 { top:300px; }
    .titulo-homeB1, .titulo-homeB2, .titulo-homeB3 { font-size: 125%; }
    .desc-homeB1, .desc-homeB2, .desc-homeB3 { font-size: 80%; padding-bottom: 50px;}
    /* Caja C  */
    .tema-homeC { height: auto; margin-top: 25px; }
    .tema-homeC1, .tema-homeC2, .tema-homeC3 { width: 100%;	position: relative; }
    .tema-homeC1-bottom, .tema-homeC2-bottom, .tema-homeC3-bottom { margin-top: 30px; }
    .iconC2, iconC3 { top:10%; right: 5%; }
}
@media (min-width: 360px) and (max-width: 390px) { /* xxs */
	.texto-largo .desc-homeA1 { font-size: 62% }
}
@media (min-width: 320px) and (max-width: 359px) { /* xxs */
	.texto-largo .desc-homeA1 { font-size: 52% }
}

/*** Temporal para propuestas terna***/
.liga-propuesta,
.liga-propuesta:focus{
    color: #fff;
    text-decoration: none;
}
.liga-propuesta:hover,
.liga-propuesta:visited
{
    color: #fff;
    text-decoration: underline;
}