@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0');
/* -----------------
       COLORS
-----------------*/
:root{
    --main-color:#003b75;
    --main-colorTrans:rgba(18,96,144,.15);
    --main-color-rgb:0,59,117;
    --secondary-color:#d39f0c;
    --third-color:#2F3B46;
    --neutral-color:#707070;
    --neutral-dark-color:#1f1f1f;
    --neutral-light-color:#e0e0e0;
    /* --contrast-color:#d39f0c; */
    --bg-color:#F3F5F6;
    --bg-color-rgb:243,245,246;

    --text-font:'Open Sans', sans-serif;
    --titles-font:'Rubik', sans-serif;

    --header-height: 5em;
}
*{
    box-sizing: border-box;
    margin: 0;
    outline: none;
    padding: 0;
}
/* --------------------------------------------------------------------------------------
                                          SEMANTICS
----------------------------------------------------------------------------------*/
a.ingreso{
    background: #169ec5;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    color: #fff;
    display: block;
    margin: 2em auto 0;
    padding:.5em .25em;
    text-align: center;
    text-decoration: none;
}
a.ingreso:hover{
    background:var(--main-color);
}
a.no-style{
    color: inherit;
    text-decoration: none;
}
body, html{
    background: var(--bg-color);
    font-family:var(--text-font);
    font-size:16px;
}
footer{
    background: var(--neutral-dark-color);
    bottom: 0;
    -webkit-box-shadow: inset 0 15px 25px -15px rgba(0,0,0,.5);
    box-shadow: inset 0 15px 25px -15px rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    padding: 0 5vw;
    height: 6em;
    width: 100%;
}
footer #logo_footer,
footer #info_footer{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: .75em 1.5em;
}
footer #logo_footer{
    background: url(../img/logos/logo-footer.svg) no-repeat center;
    background-size: 4em;
    min-height: 100%;
    height: 100%;
    width: 6em;
}

footer p{
    color: var(--neutral-color) !important;
    font-size: .8em !important;
    line-height: 1.5em !important;
    margin: 0;
}
form#form_ingreso{
    margin: 0 auto;
}
form h4{
    margin:1em 0 .25em;
}
form label,
form select,
form .boton,
form .campo{
    font-size: calc(16px + .25vw);
    line-height: calc(1.1em + 0.5vw);
}
form select{
    background-color: rgba(22, 158, 197, .15);
    color: rgba(22, 158, 197, .15);
    border: 1px #169ec5 solid;
    border-radius: 0;
    color: #05496d;
    cursor: pointer;
    margin: .5em 0;
    padding: .25em .75em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
}
form select option{
    border: 0;
    padding: .25em .75em;
}
form .campo{
    background: none;
    border: 0;
    border-bottom: 1px #169ec5 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    font-family: var(--text-font);
    margin: .1em 0;
    padding: .25em;
    -webkit-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    width: 100%;
}
form .campo:focus{
    background-color: rgba(22, 158, 197, .15);
        color: rgba(22, 158, 197, .15);
    color: #000;
    outline:none;
}
form .campo.error,
form select.error{
    background-color: rgba(255, 0, 0, .25);
        color: rgba(255, 0, 0, .25);
    color: #000;
    border-bottom: 1px red solid;
}
form label.error{
    display: none !important;
}
form .campoOculto {
    display: none;
    width: 100%;
}
form .custom-input-file {
    margin: 0 auto;
    padding: .5em;
    text-align: center;
    overflow: hidden;
    position: relative;
    width: 50% !important;
}
form .custom-input-file .input-file {
    width: 0;
}
form .custom-input-file #filename{
    color: gray;
}
form .custom-input-file #filename.fileLoad{
    color: #126090;
    font-weight: bold;
}
form .custom-input-file .error + .error + span{
    color: red !important;
    font-weight: bold;
}
form #cont_form_fecha{
    text-align: left;
}
form #cont_form_fecha > *{
    display: inline-block;
    vertical-align: middle;
}
form #cont_form_fecha input{
    text-align: center;
    width: 4em;
}
h1{
    height: 100%;
    font-size: 1em;
    width: calc(100% - 16em);
}
h2, h3, h4{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
h2{
    color: var(--main-color);
    font-family: var(--titles-font);
    font-size: calc(1.5em + 2vw);
    margin: 0 0 .5em;
}
h2.title_ldi{
    margin: 2rem 0 0 27%;
    text-align: left;
    width: 70%;
}
h2.title_simple{
    margin: 0 auto 1rem;
    width: 100%;
}
h2.title_event,
.ficha_evento{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 82vh;
    position: absolute;
    vertical-align: middle;
}
h2.title_event{
    color: #fff;
    font-family:var(--titles-font);
    font-size: calc(1.75em + 2vw);
    font-weight: 600;
    padding: 1.25em;
    width: 45%;
}
h3{
    color: var(--main-color);
    font-family: var(--titles-font);
    font-size: calc(1em + 1.1vw);
    font-weight: 800;
    margin: .25em auto 1em;
    text-align: left;
}
h4{
    color: #206090;
    font-size: calc(1em + .75vw);
    font-weight: 400;
    margin: 0 0 .25em;
    text-align: left;
}
h4.post_proyecto_titulo{
    font-family: var(--titles-font);
    font-size: calc(1em + .5vw);
    font-weight: normal;
    line-height: 1.2;
}
header{
    background:#fff;
    display: flex;
    height:var(--header-height);
    justify-content: space-around;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
header #header_logos{
    display: flex;
    gap: .5em;
    padding-left: 1em;
    width: 48%;
}
header .logo{
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    height: 100%;
    text-indent: -9999px;
}
header #logoiSTAR{
    background-image: url(../img/logos/istar-unam.svg);
    background-size: 17em;
    max-width: 18em;
}
header #logoIG{
    background-image: url(../img/logos/igg.svg);
    background-size: 6em;
    width: 7em;
}
header #logoUNAM{
    background-image: url(../img/logos/unam.svg);
    background-size: 3em;
    width: 4em;
}
nav#menu_principal {
  flex: 1;
  max-width: 70em;
}

nav#menu_principal ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav#menu_principal li {
  position: relative;
}

nav#menu_principal a {
    align-items: center;
    color: var(--neutral-color);
    display: flex;
    font-family: var(--titles-font);
    height:var(--header-height);
    justify-content: center;
    padding: 0 1rem;
    position: relative;
    text-align: center;
    text-decoration: none;
}
nav#menu_principal li:hover a{
    color:#fff;
}
nav#menu_principal li:hover {
    background: var(--secondary-color);
}

/* --- Submenús --- */
nav#menu_principal ul.submenu {
    background: #fff;
        -webkit-box-shadow: 0 15px 30px -20px rgba(103, 112, 127, .75);
    box-shadow: 0 15px 30px -20px rgba(103, 112, 127, .75);
    display: none;
    flex-direction: column;
    left: 0;
    min-width: 220px;
    position: absolute;
    top: 100%;
    z-index: 1000;
}

nav#menu_principal ul.submenu li a {
    color: var(--neutral-color);
    height: auto;
    justify-content: flex-start;
    padding: 0.75rem 1rem;
    text-transform: none;
    font-size: 0.9rem;
}
.submenu-label::after {
    content: "\25BC";
    display: block;
    font-size: .5em;
    margin: .25em 0 0 1em;
}
nav#menu_principal ul.submenu li a:hover {
  background: var(--neutral-light-color);
  color: var(--main-color);
}

nav#menu_principal li:hover > ul.submenu {
  display: flex;
}

hr{
    border:none;
    border-bottom:thin dashed var(--third-color);
    margin: 0.5em auto;
}
iframe, img{
    max-width:100%;
}
iframe{
    margin:1em 0;
    width:100%; 
}


p.p-left,
p.p-right{
    display: inline-block;
    vertical-align:top;
    width: 35%;
}
p.p-left img,
p.p-right img{
    height: auto;
    max-width: 100%;
    width: 100%;
}
p.p-left + p,
p.p-right ~ p{
    display: inline-block;
    padding:0 1em;
    vertical-align:top;
    width: 55%;
}

strong{
    font-weight: 600;
}
#contenido ol, #contenido p, #contenido ul:not(.ldi):not(.curso-datos){
    color: var(--neutral-dark-color);
    font-size: calc(1rem + .25vw);
    line-height: calc(.9rem + 1vw);
    text-align: left;
}
ol{
    margin:0 0 0 2em;
    text-align:left;
}
p{  
    margin: .5em 0 1.25em;
}
ul{
    list-style: none;
}
ul.list-publications {
    font-size: 1.1em;
    line-height: 1.5;
    list-style: disc;
    margin: 1rem 0 3rem 2rem;
    width: auto;
}
ul.list-publications li{
    margin: .5em 0;
}
ul.list-publications .publication-title{
    color: var(--main-color);
    font-weight: bold;
}
ul.workgroup{
    margin: 0 !important;
}
ul.workgroup.compact {
    margin: 1em auto !important;
}
ul.workgroup.compact li{
    box-shadow:none;
}
ul.workgroup > li{
    border: 1px solid var(--neutral-light-color);
    border-radius: 1em;
    -webkit-box-shadow: 0 5px 10px -2px rgba(162,179,189,.35);
    box-shadow: 0 5px 10px -2px rgba(162,179,189,.35);
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content:left;
    margin: .25em 0 0;
    padding: 1.25em;
}
ul.workgroup > li:hover{
    -webkit-box-shadow: 0 7px 10px -2px rgba(162,179,189,.5);
    box-shadow: 0 7px 10px -2px rgba(162,179,189,.5);
}
ul.workgroup li,
ul.workgroup li .member_photo,
ul.workgroup li .member_name{
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
ul.workgroup li .member_photo,
ul.lista_instructores li .member_photo{
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0;
    border: 1px solid var(--third-color);
    border-radius: 50%;
    display: block;
    height: .5em;
    margin: 0 .5em 0 0;
    width: .5em;
}
ul.workgroup li:hover .member_photo{
    border: 1px solid var(--main-color);
}
ul.workgroup li.active .member_photo,
ul.lista_instructores li .member_photo{
    background-size: 6em;
    border: 1px solid var(--neutral-light-color);
    height: 6em;
    width: 6em;
}
ul.workgroup li .member_name{
    color: var(--third-color);
    cursor: pointer !important;
    display: block;
    font-size: calc(16px + .25vw);
    line-height: 1em;
}
ul.workgroup li .member_name em{
    font-style: normal;
}
ul.workgroup li .member_name em:before{
    content: " | ";
}
ul.workgroup li.active .member_name em:before{
    display: none;
}
ul.workgroup li:hover .member_name,
ul.workgroup li.active .member_name{
    color: var(--main-color);
}
ul.workgroup li.active .member_name{
    line-height: 1.5em;
}
ul.workgroup li.active .member_name > *{
    display: block;
}
ul.workgroup li .member_info{
    width: 100%;
}
ul.workgroup li .member_info p{
    margin: .5em auto;
}
ul.workgroup li .member_info p:last-child{
    margin: .5em auto 0;
}
ul li#ncm .member_photo{
    background-image:url(../img/fotos/ncm.jpg);
}
ul li#tsm .member_photo{
    background-image:url(../img/fotos/tsm.jpg);
}
ul li#lcb .member_photo{
    background-image:url(../img/fotos/lcb.jpg);
}
ul li#hdrl .member_photo{
    background-image:url(../img/fotos/hdrl.jpg);
}
ul li#hssr .member_photo{
    background-image:url(../img/fotos/hssr.jpg);
}
ul li#ams .member_photo{
    background-image:url(../img/fotos/ams.jpg);
}
ul li#jabp .member_photo{
    background-image:url(../img/fotos/jabp.jpg);
}
ul li#jrr .member_photo{
    background-image:url(../img/fotos/jrr.jpg);
}
ul li#cco .member_photo{
    background-image:url(../img/fotos/cco.jpg);
}
ul li#fjnc .member_photo{
    background-image:url(../img/fotos/fjnc.jpg);
}
ul li#ajpl .member_photo{
    background-image:url(../img/fotos/ajpl.jpg);
}
ul li#rjdv .member_photo{
    background-image:url(../img/fotos/rjdv.jpg);
}
ul li#jltv .member_photo{
    background-image:url(../img/fotos/jltv.jpg);
}
ul li#lams .member_photo{
    background-image:url(../img/fotos/lams.jpg);
}
ul li#ifr .member_photo{
    background-image:url(../img/fotos/ifr.jpg);
}
ul li#gmr .member_photo{
    background-image:url(../img/fotos/gmr.jpg);
}
ul li#jor .member_photo{
    background-image:url(../img/fotos/jor.jpg);
}
ul li#generic .member_photo{
    background-image:url(../img/fotos/generic.jpg);
}

ol.capacitacion-temario{
    list-style-type: upper-roman;
}
ol.capacitacion-temario > li{
    color: var(--main-color);
}
ol.capacitacion-temario ul{
    list-style: disc;
    margin: .5em 0 0 1em;
}
ol.capacitacion-temario ol{
    color: var(--neutral-dark-color);
    font-weight: normal;
    list-style-type: upper-alpha;
}
ol.capacitacion-temario ol ul{    
    list-style-type: lower-alpha;
    margin-left: 1.5em;
}
ol.capacitacion-temario li ul li{
    margin-bottom: .5em;
}

ul.custom{
    list-style:none;
    margin: 0 0 1em 1em;
    text-align:left;
}
ul.custom li > ul.custom{
    list-style: disc;
    margin: .5em 0 1.5em 1em;
}
ul.simple{
    font-size: calc(16px + .25vw);
    list-style: circle;
    margin: .5em 0 1.5em 1em;
}
ul.simple li{
    margin: 0 0 .25em;
}
#contenido, #contenido_index{
    min-height: calc(100vh - 6em);
    width:100%;
}
#contenido a{
    word-break: break-word;
}
#contenido .entrada{
    background-color: var(--bg-color);
    min-height: 61vh;
    z-index: 1;
    position: relative;
}
#contenido.pageContent{
    padding-top:var(--header-height);
}
#contenido ul#menu_sec_contenido {
    -webkit-box-shadow: -30px 4px 75px -15px rgba(0,0,0,.45);
    box-shadow:-30px 4px 75px -15px rgba(0,0,0,.45);
    margin:0;
}
#contenido ul#menu_sec_contenido li{
    border-bottom: 1px dashed #7a8081;
}
#contenido ul#menu_sec_contenido li a{
    color: #7a8081;
    cursor: pointer !important;
    display: block;
    font-size: .9em;
    padding: .75em .5em;
    text-decoration: none;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#contenido ul#menu_sec_contenido li a:hover{
    background: #eee;
    color: #000;
}
#contenido ul#menu_sec_contenido li.current-menu-item a{
    color: #206090;
}
#contenido ul#menu_sec_contenido li:last-child{
    border-bottom: none;
}
#contenido ul#menu_sec_contenido > li:before{
    display: none;
}
#contenido .content_info_section{
    margin: 0 auto;
    max-width: 1000px;
    padding: 1.5em 0;
    width: 100%;
}
#contenido .bloque{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    width: 45%;
}
#contenido .bloque_izq{
    margin: 0 2.5em 0 0;
}
#contenido .bloque_der{
    margin: 0 0 0 2.5em;
}
#contenido.proyectos #content_info{
    display: flex;
    flex-wrap: wrap;
}
#contenido.proyectos .bloque{
    min-height: 65vh;
    padding: 0 4em 2em 2em;
    width: 50%;
}
#contenido.proyectos .bloque.proyect_info + .bloque{
    padding:1em 2em 2em;
}
#contenido .content_info_section.wide-block{
    padding:0 0 1.5em;
}
#contenido.capacitacion .content_info_section {
    margin: 1em auto 2em;
    max-width: 900px;
    position: relative;
}
#contenido.capacitacion .cabecera_evento{
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    display: flex;
    flex-direction: column;
    height: 75vh;
    justify-content: center;
    overflow: hidden;
    padding:0 calc((100vw - 1000px) / 2);
    position: relative;
}
#contenido.capacitacion.curso-power-bi .cabecera_evento{
    background-image: linear-gradient(to bottom, rgba(var(--main-color-rgb), 1), rgba(var(--main-color-rgb), 0)),
     url(../img/bg_cursos/cover-powerBI.jpg);
}
#contenido.capacitacion.curso-python .cabecera_evento{
    background-image: linear-gradient(to bottom, rgba(var(--main-color-rgb), 1), rgba(var(--main-color-rgb), 0)),
     url(../img/bg_cursos/cover-python.jpg);
}
#contenido.capacitacion .cabecera_evento h3{
    color: #fff;
    font-size: 2.5em;
    text-align: center;
}
#contenido.subPageContent{
    padding-top:var(--header-height);
}
#contenido .menu_section,
#contenido #content_section{
    display: inline-block;
    vertical-align: top;
}
#contenido #content_section{
    margin: 2em 0 2em 27%;
    width: 70%;
}
#contenido .menu_section{
    left: 0;
    position: fixed;
    top: 9em;
    width: 25%;
}
#contenido .cover{
    background-size: cover !important;
    height: 60vh;
    left: 0;
    position: fixed;
    top: 6em;
    width: 100%;
}
#contenido .cover#cover_academia{
    background: url(../img/cover_academia.jpg) center no-repeat;
}
#contenido .cover#cover_capacitacion{
    background: url(../img/cover_capacitacion.jpg) center no-repeat;
}
#contenido .cover#cover_gits{
    background: url(../img/cover_gits.jpg) center no-repeat;
}
#contenido .cover#cover_portal{
    background: url(../img/cover_portal.jpg) center no-repeat;
}
#contenido .cover#cover_proyectos{
    background: url(../img/cover_portafolio.jpg) center no-repeat;
}
#contenido .cover#cover_soluciones{
    background: url(../img/cover_soluciones.jpg) center no-repeat;
}
#map{
    height: 100%;
}
#timeline{
    height: calc(100vh - 7rem);
    margin-top: 6.5rem;
    position: absolute;
    transform: translateX(-50%);
}

    #timeline-path .base-line{
        fill:none;
        stroke:var(--third-color);
        stroke-width:2;
        stroke-miterlimit:10;
    }
    #timeline-path .circle{
        fill:#FFFFFF;
        stroke:var(--third-color);
        stroke-width:5;
        stroke-miterlimit:10;
    }
    #timeline-path .circle:hover{
        fill:var(--contrast-color);
        stroke: var(--main-color);
    }
    #timeline-path .text-year{
        fill:var(--third-color);
        font-family:var(--Condensed);
        font-size:24.2123px;
    }
    #timeline-path .text-year:hover,
    #timeline-path .circle:hover + .text-year{
        fill: var(--contrast-color);
    }
    #timeline-path a[href="#a2018"] circle,
    #timeline-path a[href="#a2019"] circle,
    #timeline-path a[href="#a2020"] circle,
    #timeline-path a[href="#a2021"] circle{
        stroke:#d59f0f;
    }
#timeline-contents{
    height: 60vh;
    margin-top: 8em;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    scroll-behavior: smooth;
    transform: translateX(10vw);
    width: 55vw;
}
#timeline-contents article{
    height: 100%;
}
#timeline-contents article#inicio{
    align-items: center;
    display: flex;
    justify-content: center;
}
#timeline-contents article#inicio h3{
    font-size: 4em;
    margin: 0;
    text-align: center;
}
#timeline-contents article#inicio h3 span{
    color:#d59f0f;
}
#timeline-contents article h3{
    font-size: 1.5em;
    font-weight: bold;
    margin: 0 0 .25rem;
}
#timeline-contents article.istar h3{
    color:#d59f0f;
}
#timeline-contents .bullet-proyecto{
    margin-bottom: 1em;
    padding-bottom: 1em;
    text-align: left;
}
#timeline-contents .bullet-proyecto:not(:last-child){
    border-bottom: 1px solid var(--contrast-color);
}
#timeline-contents .bullet-proyecto h4{
    font-size: 1.2em;
    margin: 0;
}
#timeline-contents .bullet-proyecto p{
    font-size: 1em;
    margin: 0;
}
#timeline-contents .bullet-proyecto small{
    font-size: .85em;
    color: var(--neutral-color);
    margin-top: .25em;
}
.banner{
    align-items: center;
    background-image: url(../img/bg-banner_.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    height: calc(100vh - var(--header-height));
    justify-content: end;
    margin: var(--header-height) 0 0;
    position: relative;
}
.banner blockquote{
    color: #fff;
    font-family: var(--titles-font);
    font-size: 12vmin;
    font-weight: 900;
    margin: 0 5vw;
    mix-blend-mode: overlay;
    text-align: right;
    text-transform: uppercase;
    width: 90vw;
}
.block-index.slider{
    margin: 6em 0 0;
}
.boton{
    background-color: rgba(22, 158, 197, .15);
        color: rgba(22, 158, 197, .15);
    border: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #05496d;
    cursor: pointer !important;
    font-size: calc(16px + .25vw);
    margin: 1em 0;
    padding: .5em 1.5em;
    text-decoration: none;
}
.boton:hover{
    background-color: rgba(22, 158, 197, .8);
        color: rgba(22, 158, 197, .8);
    color: #fff;
}
.buttonClass_1,
.buttonClass_2{
    border-radius: .33em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer !important;
    display: inline-block;
    font-size: calc(16px + .25vw);
    padding: .75em 1em;
    text-align: center;
    text-decoration: none;
    width: auto;
}
.buttonClass_1{
    background-color:var(--main-color);
    color:#fff;
}
.buttonClass_1:hover{
    background: var(--secondary-color);
    color: #fff;
}
.buttonClass_2{
    background-color:#fff;
    border: 1px solid var(--third-color);
    color: var(--main-color);
}
.buttonClass_2:hover{
    background-color:var(--main-colorTrans);
    border: 1px solid var(--main-color);
}
.buttonClass_2.back_button{
    background-image: url(../img/ui/back_arrow.svg);
    background-position: .75em center;
    background-repeat: no-repeat;
    background-size: 1em;
    display: block;
    padding: .75em 1em .75em 2em;
    width: 8em;
}
.buttonClass_2.compact{
    font-size: inherit;
}
.content-anchor{
    scroll-margin: calc(var(--header-height) + 2em);
}

.cont_card{
    color: #000;
    display: block;
    margin: 0 1em 2em;
    text-align: left;
    width: auto;
}
.cont_card span{
    display: block;
    margin: .5em 0 .5em .75em;
    padding: 0 0 0 1.75em;
}
.cont_card .cont_nombre{
    background: url(../img/bullets/cont_nombre.png) center left no-repeat;
    font-size: 1.3em;
    height: auto;
    margin: .5em 0 0;
    padding: 0 0 0 1.75em;
}
.cont_card .cont_cargo{
    display: inline;
    font-size: .9em;
    font-weight: 300;
    margin: 0;
    padding: 0;
}
.cont_card .cont_mail{
    background: url(../img/bullets/cont_mail.png) center left no-repeat;
}
.cont_card .cont_tel{
    background: url(../img/bullets/cont_tel.png) center left no-repeat;
}

.curso-content{
    margin-bottom: 1.5em;
}
.curso-datos{
    font-size: initial;
    display: flex;
    gap: 1em;
    justify-content: center;
}
.curso-datos li{
    align-items: center;
    background-color: #fff;
    border-radius: .33em;
    color: var(--neutral-color);
    display: flex;
    flex-direction: column;
    gap: .25em;
    justify-content: start;
    padding: 1em;
    width: calc(100% / 5 - 1em);
} 
.curso-datos li .curso-info-icon{
    color: var(--secondary-color);
    font-size: 3em;
}
.curso-datos li strong{
    color: var(--main-color);
}
.curso-datos li .curso-info-dato{
    text-align: center;
}
.curso-botonera{
    align-items: center;
    display: flex;
    gap: 1em;
    justify-content: center;
    padding: 1em 0 0;
}
.curso-botonera li a{
    width: 9em;
}
.m_element{
    display: none;
}
.post-evento{
    display: inline-block;
    vertical-align: top;
    width: 33%;
}
.post-evento:hover{
    filter: invert(1);
}

.post_proyectos, .post_proyectos_inicio{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
}
.post_proyectos_inicio{
    justify-content: space-between;
}
.post_proyectos_inicio .post_proyecto{
    flex-basis: auto;
    width: calc(100% / 2.1);
}
.post_proyectos_inicio .post_proyecto .buttonClass_1.post_proyecto_link{
    width: 100%;
}
.post_proyecto{
    background: #fff;
    border-radius: 1em;
    box-shadow: 0 5px 10px -2px rgba(162,179,189,.5);
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 48%;
    overflow: hidden;
    position: relative;
}
.post_proyecto a:not(.buttonClass_1){
    color: inherit;
    text-decoration: none;
}
.post_proyecto .post_proyecto_thumb{
    height: 30vmin;
    overflow: hidden;
}
.post_proyecto .post_proyecto_thumb img{
    height: auto;
    max-width: 100%;
    width: 100%;
}
.post_proyecto .post_proyecto_info{
    padding: 1.25em 1.25em 5em;
}
.post_proyecto .post_buttons{
    align-items: center;
    bottom: 1.75em;
    box-sizing: border-box;
    display: flex;
    height: 3.5em;
    justify-content:space-between;
    padding: 1.25em 1.25em 0;
    position: absolute;
    width: 100%;
}
.post_proyecto .post_buttons .post_proyecto_link{
    display: block;
    width: 33%;
}
.post_proyecto .post_buttons .post_proyecto_ldi_link{
    display: block;
    margin: 0 auto;
    width: 66%;
}
.post_proyecto .post_buttons ul.post_cat_menu{
    display: flex;
    visibility: hidden;
}
.post_proyecto .post_buttons ul.post_cat_menu li a{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 3.5em;
    border-radius: 50%;
    display:none;
    height: 3em;
    margin: 0 .25em 0 0;
    text-indent:-9999px;
    width: 3em;
}
.post_proyecto .post_buttons ul.post_cat_menu a#proyectos_analisis_espacial,
.post_proyecto .post_buttons ul.post_cat_menu a#proyectos_investigacion_desarrollo_software,
.post_proyecto .post_buttons ul.post_cat_menu a#proyectos_normatividad_espacial,
.post_proyecto .post_buttons ul.post_cat_menu a#proyectos_geografia_seguridad_vial,
.post_proyecto .post_buttons ul.post_cat_menu a#proyectos_transporte{
    display: block;
    position: relative;
}
.post_proyecto .post_buttons ul.post_cat_menu a#proyectos_analisis_espacial{
    background-image: url(../img/ldi_icon_ae.svg);
}
.post_proyecto .post_buttons ul.post_cat_menu a#proyectos_investigacion_desarrollo_software{
    background-image: url(../img/ldi_icon_ids.svg);
}
.post_proyecto .post_buttons ul.post_cat_menu a#proyectos_normatividad_espacial{background-image: url(../img/ldi_icon_nide.svg);
}
.post_proyecto .post_buttons ul.post_cat_menu a#proyectos_geografia_seguridad_vial{
    background-image: url(../img/ldi_icon_gsv.svg);
}
.post_proyecto .post_buttons ul.post_cat_menu a#proyectos_transporte{
    background-image: url(../img/ldi_icon_tr.svg);
}
.proyect_info{
    column-count: 2;
    column-gap: 10vw;
    padding:1.5em 5vw;
}
.proyect_info > *{
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
.proyect-info-header{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto .75em;
}
.proyect-info-header .buttonClass_2.back_button{
    background-position: center;
    height: 2.25em;
    margin:.25em 0 0 !important;
    padding: 0;
    width: 2.25em;
}
.proyect_info h3{
    margin: 0;
    width: calc(100% - 4.25rem);
}
.proyect_info .proyect_data{
    display: flex;
    margin:0 auto .5em;
}
.proyect_info .proyect_data span{
    font-weight: 300;
    padding: 0 .25em .25em;
}
.proyect_info .proyect_data .proyect_year{
    align-items: center;
    border-bottom: 2px solid var(--main-color);
    color: var(--main-color);
    display: flex;
    justify-content: center;
    width: 8em;
}
.proyect_info .proyect_data .proyect_client{
    border-bottom: 2px solid var(--secondary-color);
    color:var(--neutral-dark-color);
    text-align: left;
    width: calc(100% - 8em);
}
.proyect_info .proyect_part{
    color:var(--neutral-color);
    font-size: .9em;
    font-weight: 300;
    text-align: left;
}
.proyect_info .proyect_video{
    min-height: 40vh;
}

.g-recaptcha > div{
    margin: 0 auto .5em;
}
.trans_f,
.buttonClass_1,
.buttonClass_2{
    -webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.trans_s{
    -webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
header .menu-toggle {
    display: none;
    width: 3em;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
}
/*-------------------------------------------------------------
                    MEDIA QUERIES
---------------------------------------------------------------*/
/* Mobile ------------------ */
@media only screen and (min-device-width : 320px) and (max-device-width : 750px),
    only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
    body{
        --header-height: 3em;
    }
    body #cover{
        background-size: 75vw, 100%;
        background-position: center 20vh, center;
        padding: 65vh 0 0;
    }
    body #cover blockquote{
        font-size: calc(1.6em + 0.5vw);
        font-weight: 400;
        line-height: calc(1em + 0.5vw);
        width: 95%;
    }
    footer{
        flex-wrap: wrap;
        height:auto;
        position: relative;
    }
    footer #logo_footer{
        background-size: 5.75em;
        display: block;
        height: 7em;
        min-height: 0;
        position: relative;
        width: 100%;
    }
    footer nav{
        display: none;
    }
    footer p{
        font-size: .7em;
    }
    footer a.buttonClass_1{
        display: block;
    }
    footer #info_footer{
        border-top: none;
        height: auto;
        min-height: 0;
        width: 100%;
    }
    header {
        -webkit-box-shadow: 0 15px 20px -13px rgba(0,0,0,.25);
        box-shadow: 0 15px 20px -13px rgba(0,0,0,.25);
        flex-wrap: wrap;
        height: var(--header-height);
        justify-content: space-between;
        padding: 0 .25em;
        position: fixed;
        width: 100%;
    }
    header #header_logos{
    gap: .25em;
    height: 3rem;
    justify-content: space-around;
    padding: 0;
    width: calc(100% - 3em);
    }
    header #logoUNAM{
        background-size: 1.75em;
        width: 2em;
    }
    header #logoIG{
        background-size: 3.5em;
        width: 4em;
    }
    header #logoiSTAR{
        background-size: 11em;
        border: none;
        width: auto;
    }
    header .menu-toggle {
        display: block;
    }
    header .menu-toggle span {
        color: var(--main-color);
        font-size: 2.5em;
        font-weight: bold;
        transition: all 0.3s linear;
    }
    header nav {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: var(--header-height);
    right: -100%;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background: var(--bg-color);
    transition: all 0.3s ease-in-out;
    z-index: 1;
    }
    header nav.open {
        right: 0;
    }
    header nav ul {
        flex-direction: column;
        gap: .5em;
        padding: 1.5em 0;
        align-items: end;
    }
    nav#menu_principal a{
        color: var(--main-color);
        justify-content: end;
    }
    nav#menu_principal ul.submenu {
        background: transparent;
        box-shadow: unset;
        display: flex;
        flex-direction: column;
        position: relative;
    }
    h1{
        flex:1 1 auto;
        width: auto;
    }
    h2:not(.title_event):not(.title_ldi):not(.title_simple){
        font-size: calc(1.25em + 1.25vw);
        height: auto;
        width: 100%;
    }
    ul.ldi{
        display: block;
    }
    ul.ldi li{
        display: block;
        margin: 0 auto .5em;
        width: 100%;
    }
    ul.ldi li a{
        display: flex;
        align-items: center;
    }
    ul.ldi li a span.icon_image,
    ul.ldi li a span.icon_image:hover{
        border-radius: 1em 0 0 1em;
        height: 4em;
        margin: 0;
        width: 25%;
    }
    ul.ldi li a span.icon_label{
        box-sizing: border-box;
        height: auto;
        padding: 0 1em .5em;
        width: 75%;
    }
    ul.workgroup > li{
        padding: 1em;
    }
    ul.workgroup li.active{
        display: block;
    }
    ul.workgroup li.active .member_photo{
        margin: 0 auto 1em auto;
    }
    ul.workgroup li .member_name{
        font-size: calc(15px + .15vw);
        line-height:1.25em;
        width: calc(100% - 2em);
    }
    ul.workgroup li .member_name > *{
        display: block;
    }
    ul.workgroup li .member_name em:before{
        display: none;
    }
    ul.workgroup li.active .member_name{
        line-height: inherit;
        text-align: center;
        width: 100%;
    }
    #contenido .cover{
        top: 0;
    }
    #contenido.capacitacion .content_info_section{
        margin: 1em auto;
    }
    #contenido .content_info_section{
        padding: .5em 5vw !important;
    }
    #contenido.subPageContent {
        padding: var(--header-height) 0 0;
    }
    .ldi-page #contenido.subPageContent {
        padding: 5em 3vw 0 9vw;
    }
    #contenido.proyectos .bloque{
        padding: 0 1.5em !important;
        width: 100%;
    }
    #contenido.capacitacion .cabecera_evento{
        padding: 1em;
        height: auto;
    }
    #contenido.capacitacion .cabecera_evento h3{
        font-size: 1.5rem;
        line-height: 1.1;
    }
    .curso-datos{
        flex-wrap: wrap;
        font-size: .85em;
        gap: .25em;
    }
    .curso-datos li{
        display: grid;
        flex: 1 auto;
        grid-template-areas: "icono label"
                                "data data";
        justify-content: center;
        padding: .5em;
        width: 45%;
    }
    .curso-datos li .curso-info-icon{
        font-size: 2em;
        grid-area: icono;
    }
    .curso-datos li strong{
        grid-area: label;
    }
    .curso-datos li .curso-info-dato{
        grid-area: data;
    }
    h2.title_ldi{
        font-size: 1.5em;
        line-height: 1.2;
        margin: .5rem 0;
        width: auto;
    }
    #contenido ol, #contenido p, #contenido ul:not(.ldi):not(.curso-datos),
    #contenido .post_proyecto_extracto p{
        font-size: calc(14px + .25vw);
    }
    #contenido .bloque,
    #contenido.proyectos .bloque_der,
    #contenido.proyectos .bloque_izq,
    #contenido.capacitacion #content_info .info_evento .bloque,
    .post_proyecto .post_buttons .post_proyecto_ldi_link,
    ul.modulos_list,
    ul.modulos_list li,
    .back_button{
        display: block;
        width: 100%;
    }
    #contenido.capacitacion #content_info .info_evento .bloque,
    #contenido.capacitacion #content_info .info_evento .bloque_single,
    ul.modulos_list,
    ul.modulos_list li{
        padding: 0;
        margin: 0;
    }
    ul.modulos_list{
        margin: 1em 0 0;
    }
    #contenido .bloque_der,
    #contenido .bloque_izq{
        margin: 0 0 2em;
    }
    .back_button{
        margin:0 auto !important;
    }
    nav#menu_secundario.menu{
        display: none;
    }
    .m_element{
        display: block;
    }
    #contenido #content_section {
        margin: 0 auto;
        width: 100%;
    }
    #contenido .menu_section{
        background: #fff;
        border-right: 2px solid #126090;
        top: 6em;
        width: 80vw;
        left:calc(-80vw - 2px);
        -webkit-transition: all 500ms ease-in-out;
        -moz-transition: all 500ms ease-in-out;
        -ms-transition: all 500ms ease-in-out;
        -o-transition: all 500ms ease-in-out;
        transition: all 500ms ease-in-out;
        z-index: 2;
    }
    #contenido .menu_section.opened{
        left: 0;
    }
    #contenido .menu_section .menu_section_trigger{
        background:var(--main-color);
            background-image: url(../img/btn_menu.gif);
        background-position:center;
        background-repeat: no-repeat;
        background-size: 3.5vh;
        color: #fff;
        display: block;
        height: 2.5rem;
        left: 80vw;
        margin: -3.5vh 0 0;
        text-indent: -9999px;
        top: 3rem;
        position: absolute;
        width: 8vw;
    }
    .banner blockquote{
        font-size: 9vmin;
    }
    .block-index.slider {
        margin: 3em 0 0;
    }
    .post_proyectos,
    .post_proyectos_inicio{
        display: block;
    }
    .post-evento,
    .post_proyecto,
    .post_proyectos_inicio .post_proyecto{
        margin-top: 1em;
        width: 100%;
    }
    .post-evento
    .post_proyecto{
        margin:1em 0;
    }
    .post_proyecto .post_proyecto_thumb{
        height: 9em;
    }
    .post_proyecto .post_buttons ul.post_cat_menu li a{
        background-size: 3em;
        height: 2.5em;
        width: 2.5em;
    }
    .post_proyecto .post_buttons .post_proyecto_link{
        width: auto;
    }
    .post_evento_thumb{
        height: 10em;
    }
    .proyect_info{
        column-count:unset;
    }
    .proyect-info-header{
        align-items: flex-start;
    }
    .proyect_info h3{
        width: calc(100% - 3.25rem);
    }
}
/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    h2:not(.title_event) {
        font-size: calc(1em + 1.25vw);
    }
    ul.ldi li a:hover{
        background-size: 30em;
    }
    #contenido.capacitacion .form_cursos{
        bottom: -600px;
        height: 480px;
    }
    .pageContent .post_proyecto .post_proyecto_thumb,
    .post_proyectos_inicio .post_proyecto .post_proyecto_thumb{
        height: 23vmin;
    }
    #timeline-contents article{
        font-size: 2.4vmin;
    }
}

/* ---- reset ---- */ canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; }