:root{
    --position-navbar: 0em;
    --slideshow-height:52.42em;
    --generalschemecolor:rgb(0, 119, 255);
    --generalschemecpt:rgba(0, 119, 255, 0.7);
    --generalschemecptm:rgba(0, 119, 255, 0.2);
    --generalschemecptm2:rgba(0, 119, 255, 0.4);
    --generalschemecptm3:rgba(0, 119, 255, 0.1);
    --titles_fontsize:5em;
	--proj_fontsize_h1:3em;
	--proj_fontsize_h2:2em;
    font-size: 16px; /* Default root font size */
}

  /* Media Query para pantallas pequeñas (móviles) */
@media only screen and (max-width: 600px) {
    :root {
        font-size: 7px; /* Adjust root font size for small screens */
    }
    .button-left {
        position: relative; /* Asegura que la propiedad 'left' funcione */
        left: 0.4em;        /* Cambia la posición */
    }
    .button-right {
        position: relative; /* Asegura que la propiedad 'right' funcione */
        right: 0.4em;       /* Cambia la posición */
    }
    .tree_teacher{
        position: absolute;
        top: 0.5em !important;
        height: 2em!important;
        width: 2em !important;
        left: 0.5em !important;
    }
}

/* Media Query para pantallas medianas (tabletas) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    :root {
      font-size: 12px; /* Adjust root font size for medium screens */
    }
    .button-left{
        left:0.4em;
    }
    .button-right{
        right:0.4em;
    }
    .tree_teacher{
        position: absolute;
        top: 1em;
        height: 2em;
        width: 2em;
        left: 0.5em;    
    }
}

/* Media Query para pantallas grandes (escritorio) */
@media only screen and (min-width: 1025px) {
    :root {
        font-size: 15px; /* Adjust root font size for large screens */
    }
    .button-left{
        left:-10.4em;
    }
    .button-right{
        right:-10.4em;
    }
    .tree_teacher{
        position: absolute;
        top: 1em;
        height: 2em;
        width: 2em;
        left: 0.5em;    
    }
}

/* Styles the scrollbar itself */
body::-webkit-scrollbar {
    width: 0.9375em; /* or height for horizontal scrollbars */
    background-color: white; /* background of the scrollbar */
}

/* Styles the draggable part of the scrollbar */
body::-webkit-scrollbar-thumb {
    background-color: var(--generalschemecpt); /* color of the scroll thumb */
    border-radius: 0.46875em; /* roundness of the scroll thumb */
    border: 0.1875em solid white; /* creates padding around the scroll thumb */
    transition: all 0.3s;
}

body::-webkit-scrollbar-thumb:hover {
    background-color: var(--generalschemecolor); /* slightly darker on hover */
    
}

body::-webkit-scrollbar-track-piece:end {
    margin-bottom: 1.25em; 
}

body::-webkit-scrollbar-track-piece:start {
    margin-top: 1.25em;
}

body::-webkit-scrollbar-button:single-button {
    background-color:white;
    display: block;
    background-size: 11px;
    background-repeat: no-repeat;
    
}

/* Up */
body::-webkit-scrollbar-button:single-button:vertical:decrement {
    height: 12px;
    width: 16px;
    background-position: center 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgba(0, 119, 255, 0.7)'><polygon points='50,00 0,50 100,50'/></svg>");
}

body::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(0, 119, 255)'><polygon points='50,00 0,50 100,50'/></svg>");
}

body::-webkit-scrollbar-button:single-button:vertical:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgba(0, 119, 255, 0.4)'><polygon points='50,00 0,50 100,50'/></svg>");
}

body::-webkit-scrollbar-button:single-button:vertical:increment {
    height: 12px;
    width: 16px;
    background-position: center 2px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgba(0, 119, 255, 0.7)'><polygon points='0,0 100,0 50,50'/></svg>");
}

body::-webkit-scrollbar-button:single-button:vertical:increment:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(0, 119, 255)'><polygon points='0,0 100,0 50,50'/></svg>");
}

body::-webkit-scrollbar-button:single-button:vertical:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgba(0, 119, 255, 0.4)'><polygon points='0,0 100,0 50,50'/></svg>");
}

body{
    visibility: hidden;
    margin:0;
    padding: 0;
    color:black;
    background-color: white;
    font-family:"SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased; /* Chrome, Safari */
    -moz-osx-font-smoothing: grayscale; /* Firefox */
    text-rendering: optimizeLegibility;
    transition: padding-right 0.3s ease;
    
    
}

* {
      transition: color 0.55s ease, background-color 0.55s ease, border-color 0.55s ease;
}

#information{
    position:relative;
    z-index: 21;
    height: 5em;
    background-color: var(--generalschemecpt);
    display: flex;
    align-items: center;
    justify-content: left;
}

#header_I2MB{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: left;
    height: 100%;
    width: 50%;
}

#headerlogo{
    padding: 0em 0em 0em 3em;
    width: 12.5em;
}

#upv_I2MB{
    filter: invert(1);
    left:3em;
    width: 14em;
    position: relative;
    z-index: 21;
}

.language_links{
    color:white;
    margin-right:0%;
}

#language{
    position: relative;
    display: flex;
    right:3em;
    align-items: center;
    justify-content: right;
    float:right;
    width: 50%;
    padding: 1em;
    font-size: 1.0625em;

}

#idiom{
    color:rgba(255, 255, 255, 0.35);
    transition: color 0.3s;
}
#idiom:hover{
    color:rgba(255, 255, 255, 0.8);
}


#etsii{
    width: 8%;
    position: relative;
    z-index: 21;
    padding:1em;
    right:2em;
}
#navbarnavbar{
    font-size: 1em; 
    text-align: center;
    color: rgb(185, 185, 185);
    font-family:'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', 'sans-serif';
    display:flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top:0%;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(0.625em);
    height:4.2em;
    box-shadow: rgba(0, 0, 0, 0.25) 0em 0em 1.4375em 0.125em;
    z-index:25;
    transition: all 0.3s;

}
#QUEHACEMOS{
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    top:0em;
    margin:0em;
    color:var(--generalschemecolor);
    font-size: var(--titles_fontsize);
    padding: 2.5em;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
  }
  
  @keyframes shrink {
    from {
      scale: 0.8;
      opacity: 0;
    }
    to {

      scale: 1;
      opacity: 1;
      
    }
  }
  

@keyframes fadein_blocks {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  b{ 
    color:white;
}

@keyframes fadein_blocks2 {
    from {
      opacity: 0.5;
    }
    to {
      opacity: 1;
    }
  }
  
  b{ 
    color:white;
}

#QUIENES{
    text-align: center;
    position: relative;
    display: flex;
    margin:0em;
    align-items: center;
    justify-content: center;
    top:0em;
    padding: 2.5em;
    color:var(--generalschemecolor);
    font-size: var(--titles_fontsize);
    animation-timeline: view(block);
    animation-name: fadein_blocks;
}
#ACTUALIDAD{
    text-align: center;
    position: relative;
    display: flex;
    align-content: center;
    justify-content: center;
    margin:0em;
    top:0em;
    color:var(--generalschemecolor);
    font-size: var(--titles_fontsize);
    padding: 2.5em;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
}
#BIENVENIDA{
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(calc(calc((-3.125em*32/80)*2 - (3em*(48/32)*48/80)) + 3em) - 0.5em);
    margin-left: 1em;
    margin-bottom: 3em;
    margin-right: 1em;
    color:var(--generalschemecolor);
    font-size: var(--titles_fontsize);
    animation-timeline: view(block);
    animation-name: fadein_blocks;
}

#BIENVENIDA2{
    text-align: center;
    position: relative;
    display: block;
    align-items: center;
    justify-content: center;
    margin-top: calc((-3.125em*32/40)*2 - (3em*(48/32)*48/40) + 5em);
    margin-left:1em;
    margin-bottom: 0em;
    width: auto;
    margin-right:1em;
    color:var(--generalschemecpt);
    font-size: 2.5em;
    padding: 0em;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
}
#BIENVENIDA_SUB{
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: calc((-3.125em*32/40)*2 - (3em*(48/32)*48/40) + 5em);
    margin-bottom: calc((3.125em*32/40)*1/4 );
    margin-left:0em;
    width: auto;
    margin-right:0em;
    color:var(--generalschemecpt);
    font-size: 2.5em;
    padding: 0em;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
}
.linkeda{
    color:rgba(0, 0, 0, 0.719);
    text-decoration: none;
    margin:0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background: none;

    cursor:pointer;
    border-bottom: 0.125em solid transparent;
    transition: all 0.3s;
}
.linkeda:hover{
    color: var(--generalschemecolor);
}
#page_indic:hover{
    color: var(--generalschemecolor);
}

.h1_info_WORKS{
    color:var(--generalschemecolor);
    font-size: 2.5em;
    margin-right:0.75em;
}

.h1_current{
    color:var(--generalschemecolor);
    font-size: 2.5em;
    margin-right:0.75em;
}

.linktopublications{
    position: absolute;
    z-index: 29;
    top: 0.625em;
    border-radius: 3em;
    height: fit-content;
    padding-left:0.35em;
    padding-right:0.35em;
    padding-top:0.35em;
    padding-bottom:0.35em;
    width: fit-content;
    left:0.625em;
    text-align: right;
    font-size: 2em;
    color: white;
    background: var(--generalschemecptm2);
    backdrop-filter: blur(0.625em);
    display: flex;
    align-items: center;
    justify-content: right;
    cursor: pointer;
    transition: all 0.5s;
}
.linktopublications:hover{
    transform: scale(1.05);
}
.linktopublications2:hover{
    transform: scale(1.05);
}

.linktopublications img{
    height: 2.5em;
    width: 2.5em;
    margin:0em;
}
.linktopublications2 img{
    height: 2.5em;
    width: 2.5em;
    margin:0em;
}

.linktopublications2{
    position: absolute;
    z-index: 29;
    top: 0.625em;
    height: fit-content;
    padding-left:0.35em;
    padding-right:0.35em;
    padding-top:0.35em;
    padding-bottom:0.35em;
    width: fit-content;
    border-radius: 3em;
    right:0.625em;
    text-align: right;
    font-size: 2em;
    color: white;
    background: var(--generalschemecptm2);
    backdrop-filter: blur(0.625em);
    display: flex;
    align-items: center;
    justify-content: left;
    cursor: pointer;
    transition: all 0.3s;
}

.clear{
    height: 0em;
    clear:both;
}
#prgrs{
    border:0.125em solid rgba(255, 255, 255, 0) ;
    position: sticky;
    z-index: 27;
    top:4.2em;
    margin-top: 0em;
    margin-bottom: 0em;
    margin-right:100%;
    border-radius:  0em 0em 3em 0em;
      transition: color 0.55s ease, background-color 0.55s ease, border-color 0.55s ease;
}

span{

    background-color: var(--generalschemecpt);
    display: block;
    width: fill;
    height: 0;
    position: relative;
    top:1.6em;
    z-index: 21;
    align-items: center;
	scroll-margin-top: 125px;
}
.image_despl{
    height:280px;
    border-radius: 1em;
}
.navbar{
    margin-left:4%;
    margin-right:4%;
    height:100%;
    display: grid;
    justify-content: center;
}

.despl{
    display: none;
    justify-content: space-between;
    height: auto;
    top:calc(4.2em + 5em);
    position: fixed;
    background: rgb(255, 255, 255);
    z-index:31;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.35) 0em 0em 1.4375em -0.125em;
    overflow: hidden;
}

@keyframes fadeIN {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

@keyframes fadeOUT {
    0% {
      opacity: 1;
      display: flex;
    }
  
    100% {
      opacity: 0;
      display: none;
    }
}

.orcid{
    width:80%;
    margin:0;
    height: 100em;
    clear:both;
    text-align: left;
    border: none;
    transform: scale(1.1);
    overflow: hidden;
}

iframe::-webkit-scrollbar{
    display:none;
}


.link_orcid{
    z-index: 29;
    width: 0em;
}

.tree_teacher{
    position: absolute;
    z-index: 20;
    top: 1em;
    border-radius: 100%;
    height: 3em;
    width: 3em;
    left: 1em;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(0.625em);
    display: flex;
    border: none;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    transition: all 0.3s;

}

  .dropdown-content {
    
    top: 2em;
    width: 14em;
    left: 4.5em;
    border-radius: 0.625em;
    display: none;
    position: absolute;
    z-index: 20;
    animation: fadeIN 0.3s;
    background:rgba(0, 119, 255, 0.5);
    backdrop-filter: blur(1em);
    box-shadow: rgba(0, 0, 0, 0.2) 0em 0em 1.875em;

  }

  .dropdown-content a {
    display: grid;
    -webkit-font-smoothing: antialiased; /* Chrome, Safari */
    -moz-osx-font-smoothing: grayscale; /* Firefox */
    text-rendering: optimizeLegibility;
    color: rgb(255, 255, 255);
    text-align: left;
    padding: 0.9375em;
    align-content: center;
    text-decoration: none;
    transition: all 0.3s;
  }
  .dropdown-content a:hover {
    color: #bebebe;
  }

.tree_teacher:hover  {
    transform: scale(1.07);
}

.tree_teacher img{
    width: 70%;
}


@keyframes rotate0{
    0% {rotate:45deg;}
    100%{rotate:0deg;}
}
@keyframes rotate45{
    0% {rotate:0deg;}
    100%{rotate:45deg;}
}
@keyframes fadeoOUT2 {
    0% {
      opacity: 1;
      display: block;
    }
    100% {
      opacity: 0;
      display: none;
    }
}

#i2mb{
    width: 28.5em;
    position: relative;
    top:0em;
    border-radius: 1em;
}

#page_indic{
    color: var(--generalschemecpt);
}


#div1{
    position: relative;
    top:0em;
    float: left;
    width: fit-content;
    padding-top: 2em;
    padding-bottom: 2em;
    border-radius: 1.25em;
    display: grid;
    place-content: start center; 
    height: fit-content;
    z-index:6;
    margin-left: 2em;
    margin-right: 2em;
}

#div2{
    position: relative;
    top:0em;
    float: right;
    height: auto;
    width: fit-content;
    padding-top:2em;
    padding-bottom: 2em;
    border-radius: 1.25em;
    display: flex;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    margin-left:2em;
    margin-right:9em;
}

.projects_div1{
    position: relative;
    top:0em;
    height: 100%;
    float: left;
    width: fit-content;
    padding-top: 1em;
    padding-bottom: 2em;
    border-radius: 1.25em;
    display: grid;
    place-content: start left; 
    height: fit-content;
    z-index:6;
    margin-left: 2em;
    margin-right: 2em;
}
.projects_div2{
    padding-top: 1em;
    padding-bottom:2em;
    position: relative;
    top:0em;
    height: 100%;
    float: left;
    width: fit-content;
    border-radius:1.25em;
    display: grid;
    place-content: start left; 
    height: fit-content;
    z-index:6;
    margin-left: 2em;
    margin-right: 2em;
}
.projects_div3_1{
    padding-top: 2em;
    padding-bottom: 2em;
    position: relative;
    top:0em;
    float: left;
    width: fit-content;
    border-radius: 2em;
    display: grid;
    align-content: center;
    justify-content: center; 
    overflow:visible;
    height: auto;
    z-index:6;
    margin-left: 1em;
    margin-right: 9em;
}
.projects_div3{
    padding-top: 1em;
    padding-bottom:2em;
    position: relative;
    top:0em;
    height: 100%;
    width: fit-content;
    border-radius:1.25em;
    display: grid;
    place-content: start left; 
    height: fit-content;
    z-index:6;
    margin-left: 2em;
    margin-right: 2em;
}
.firstprojecth1{
    position: relative;
    color: black;
    top:0em;
    padding-top:0.1em;
    text-align: left;
    font-size: 1.25em;
    font-weight: bold;
    transition: color 0.1s;
}

.linklist{
    position: relative;
    color: black;
    top:0em;
    padding-top:0.75em;
    margin-top: 0em;
    margin-bottom:0.75em;
    text-align: left;
}
.firstprojecth1:hover {
    color: var(--generalschemecolor);
}

.firstprojecth1::after {
    content: ' \2192'; /* Unicode for the right arrow */
    opacity: 0; /* Start with the arrow hidden */
    display: inline-block; /* Ensures it's inline with the text */
    position: relative;
    margin-left: 0.1em; /* Space between text and arrow */
    transition: opacity 0.1s ease;
    top:-0.125em;
}

.firstprojecth1:hover::after {
    opacity: 1; /* Show the arrow on hover */
    animation: initial-translate 0.3s forwards ease, translate-loop 1s ease 0.3s infinite;
}

@keyframes initial-translate {
    from {
      transform: translate(0em);
    }
    to {
      transform: translate(0.3125em);
    }
  }

@keyframes translate-loop {
    0% {
      transform: translateX(0.3125em);
    }
    50% {
      transform: translateX(0em);
    }
    100% {
      transform: translateX(0.3125em);
    }
  }

.secondprojecth1{
    position: relative;
    color: black;
    top:0em;
    transition: color 0.1s;
    padding-top:0.1em;
    text-align: left;
    font-size:1.25em;
    font-weight: bold;
}
.secondprojecth1:hover{
    color: var(--generalschemecolor);
}

.secondprojecth1::after {
    content: ' \2192'; /* Unicode for the right arrow */
    opacity: 0; /* Start with the arrow hidden */
    display: inline-block; /* Ensures it's inline with the text */
    position: relative;
    margin-left: 0.1em; /* Space between text and arrow */
    transition: opacity 0.1s ease;
    top:-0.125em;
}

.secondprojecth1:hover::after {
    opacity: 1; /* Show the arrow on hover */
    animation: initial-translate 0.3s forwards ease, translate-loop 1s ease 0.3s infinite;
}

.thirdprojecth1{
    position: relative;
    color: black;
    top:0em;
    transition: color 0.1s;
    padding-top:0.1em;
    text-align: left;
    font-size: 1.25em;
    font-weight: bold;
}
.thirdprojecth1:hover{
    color: var(--generalschemecolor);
}

.thirdprojecth1::after {
    content: ' \2192'; /* Unicode for the right arrow */
    opacity: 0; /* Start with the arrow hidden */
    display: inline-block; /* Ensures it's inline with the text */
    position: relative;
    margin-left: 0.1em; /* Space between text and arrow */
    transition: opacity 0.1s ease;
    top:-0.125em;
}

.thirdprojecth1:hover::after {
    opacity: 1; /* Show the arrow on hover */
    animation: initial-translate 0.3s forwards ease, translate-loop 1s ease 0.3s infinite;
}

.fourthprojecth1 {
    position: relative;
    color: black;
    transition: color 0.1s;
    padding-top:0.1em;
    margin-top:1em;
    margin-left:0.5em;
    text-align: left;
    font-size: 1.25em;
    font-weight: bold;
}

.fourthprojecth1:hover {
    color: var(--generalschemecolor);
}

.fourthprojecth1::after {
    content: ' \2192'; /* Unicode for the right arrow */
    opacity: 0; /* Start with the arrow hidden */
    display: inline-block; /* Ensures it's inline with the text */
    position: relative;
    margin-left: 0.1em; /* Space between text and arrow */
    transition: opacity 0.1s ease;
    top:-0.125em;
}

.fourthprojecth1:hover::after {
    opacity: 1; /* Show the arrow on hover */
    animation: initial-translate 0.3s forwards ease, translate-loop 1s ease 0.3s infinite;
}



/*.fondoh1{
    z-index:1;
    color:rgba(0, 119, 255, 0.07);
    position: absolute;
    right:0.1em;
    top:0.2em;
    font-size: 200px;
}*/



#results_div1{
    position: relative;
    top:0em;
    height: 100%;
    float: left;
    width: 50%;
    border-radius: 1.25em;
    display:grid;
    margin-left:15em;  
    height: 100%;
}
#results_div2{
    position: relative;
    top:0em;
    height: 100%;
    float: right;
    width: 50%;
    margin-right:0em;
    border-radius:1.25em;
    display:block;   
    height: 100%;
}

#research_despl{
    background-color:rgba(255, 255, 255);
    width: 100%;
    height: 100%;
}


ul {
    list-style-type: none;
    margin-left:0em;
    padding: 0em;
}
  li{
    margin-top:0.75em;
    margin-bottom:0.75em;
    margin-left:0em;
  }

.presentul {
    list-style-type: circle;
    margin-left:2em;
}
.presentli{
    font-size: 1.15em;
    margin-top:0.5em;
    margin-left:0.5em;
}
.pagelink{
    position: relative;
    color: black;
    font-size: 1em;
    hyphens: auto;
    word-wrap: break-word;
    white-space: normal;        /* Permite que el texto se divida en varias líneas */
    overflow: visible;          /* Asegura que el contenido no se oculte */ 
    transition: color 0.1s;
}

.pagelink:hover{
    color:  var(--generalschemecolor);
}


#slideshow{
    height: var(--slideshow-height);
    position: relative;
    overflow: hidden ;
    margin-top:calc(-2*0.125em - 2*0.6em - 3em);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:19;

}
.slide_info{
    font-size: 3em;
    top:calc(-2*3.125em*32/48 - 1/2*(var(--slideshow-height) - (2*0.6em + 3em))*16/48 - 1.5em*48/32);
    color: white;
    position: relative;
    display: none;
    text-align: center;
    z-index:20;
    height: calc(3em*48/32); 
    pointer-events: none;
    justify-content: center;
	margin: 0em 3em 0em 3em;
}
.slide_info h1{
    position: relative;
    color: white;
    text-shadow: rgb(27, 27, 27) 0em 0em  0.625em;
    font-size: 1.3em;
    display: grid;
    align-content: center;
    margin-bottom:0em;
    margin-top: 0em;
	hyphens: auto;
    word-wrap: break-word;
}
.slide_info p{
    text-shadow: rgb(27, 27, 27) 0em 0em 0.625em;
    position: relative;
    color:rgba(255, 255, 255, 0.75);
    display: grid;
    align-content: center;
    margin-top:0em;
    margin-bottom: 0em;
    font-size: 0.75em;

}
.sld_link{
    margin-top:0em;
    width: 100%;
    overflow: hidden;
    height: var(--slideshow-height);
    display: none;
    align-items: center;
    justify-content: center;
}

.button-left{
    position: relative;
    z-index:22;
    top:calc(-1/2*3.125em*32/32 - 1/2*(var(--slideshow-height) - (2*0.6em + 3em))*16/32);
    font-size: 2em;
    height:3.125em;
    background: rgba(214, 214, 214, 0.438);
    backdrop-filter: blur(0.15625em);
    outline: none;
    display: grid;
    align-content: center;
    border:none;
    border-radius:0.625em 0.625em;
    transition:all 0.5s;
    cursor:pointer;
}
.button-left:hover{
    transform: scale(1.07);
}
.button-right{
    display: grid;
    align-content: center;
    float:right;
    position: relative;
    z-index:22;
    top:calc(-3/2*3.125em*32/32 - 1/2*(var(--slideshow-height) - (2*0.6em + 3em))*16/32);
    z-index:22;
    height:3.125em;
    font-size: 2em;
    backdrop-filter: blur(0.15625em);
    background: rgba(214, 214, 214, 0.438);
    border-radius:0.625em 0.625em;
    outline: none;
    border:none;
    transition:all 0.5s;
    cursor:pointer;
}
.button-right:hover{
    transform: scale(1.07);
}

.menu{
    position: sticky;
    z-index:34;
    top:0%;
}
.image-link{
    padding: 0em;
    margin:0;
    width: 100%;
}
.slideshow_image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 19;
}

.headings{
    color:whitesmoke;
    text-shadow: red 0.25em 0.0625em 0.125em;
    margin:0;
}

.display_a{
    text-decoration:none;
}

.i2mb_presnts{
    height: 100%;
    background-color: white;
    padding:3em 0em 0em 0em;
    position: relative;
    display: grid;
    align-content: center;
    justify-content: center;
    transition: all 0.6s;
    z-index: 5;
    width: auto;
    clear: both;
    margin-top: 0em;
    margin-left:7em;
    margin-right:7em;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
    animation-range: entry -10% contain 40%;
}

#collaborators{
    position: relative;
    padding-top: 3em;
    text-align: center;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
    animation-range: entry -10% contain 40%;
}
.imgTOPIC_bott{
    position: relative;
    width: 9em;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
    animation-name: shrink;
    animation-range: entry -10% contain 40%;
}
.imgTOPIC_top{
    height: 7em;
    margin: 2em; 
    animation-timeline: view(block);
    animation-name: fadein_blocks;
    animation-range: entry -50% contain 40%;
}
.imgTOPIC_coll{
    height: 6em;
    padding: 3em;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
    animation-range: entry -50% contain 40%;
}

#h1_present{
    color:var(--generalschemecpt);
    font-size: 3.8125em;
    margin: 0;
}

.i2mb_presnts_img {
       width: auto;
       display:flex;
       align-items: center;
       justify-content: space-evenly;
       position: relative; 
       z-index: 5;
        padding: 1.5em;
       height: 100%;
}

.i2mb_presnts_txt {
       width: auto;
       position: relative;
       padding-top: 1em;
       padding-right: 1em;
       padding-left: 1em;
       font-size: 1.5em;
       height: 100%;  
       z-index: 5;
       text-align: justify;
       display: grid;
       align-content: center;
       justify-content: center;
}

.div_i2mb_present{
    text-align: justify;
    margin: 0em;
    font-size: 1.15em;
}

.imp_proy_imp{
    margin-top:3em;
    margin-bottom: 3em;
    height: auto;
    box-shadow: rgb(219, 219, 219) 0em 0em 1.875em;
    background-color: white;
    margin-right:15em;
    margin-left:5em;
    border-radius: 1.875em 1.875em 1.875em 1.875em;
    overflow: visible;
    position:relative;
    display: flex;
    align-items: center;
    transition: 0.6s;
    z-index: 5;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
    animation-name: shrink;
    animation-range: entry -10% contain 40%;
}

.imp_proy_imp h1{
    position: relative;
    margin-top:1em;
}

.imp_proy_imp_img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
        border-radius: 1.875em 0em 0em  1.875em;
}

.imp_proy_imp_img {
    width: 30%;
    height: 100%;
    position: relative;
    float:left;  
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
    border-radius: 1.875em 0em 0em 1.875em;
}

.imp_proy_imp_txt {
    width: 70%;
    position: relative;
    float:right;
    height: 100%;  
    margin-left: 1.5em;
    margin-right: 1.5em;
    z-index: 5;
}

.imp_proy_imp_txt:hover {
    width: 70%;
    position: relative;
    height: 100%;  
    overflow:visible;

}

.imp_proy_imp:hover{
    height: 35em;
    position: relative;
    transform: scale(1.05) ;
}

.imp_proy_par{
    margin-top:3em;
    margin-bottom: 3em;
    height: auto;
    box-shadow: rgb(219, 219, 219) 0em 0em 1.875em;
    margin-left:15em;
    margin-right:5em;
    border-radius: 1.875em 1.875em 1.875em 1.875em;
    overflow: visible;
    position:relative;
    display: flex;
    align-items: center;
    transition: 0.6s;
    background-color: white;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
    animation-name: shrink;
    animation-range: entry -10% contain 40%;
}

.imp_proy_par h1{
    position: relative;
    margin-top:1em;

}

.imp_proy_par_img img{
    width: 100%;
    position: relative;
    height: 100%;
    object-fit: cover; 
    border-radius: 0em 1.875em 1.875em 0em;
}

.imp_proy_par_img {
    width: 30%;
    height: 100%;
    position: relative;
    float:right;
    border-radius: 0em 1.875em 1.875em 0em;
    background-color: transparent;
}

.imp_proy_par_img_11 img{
    width: 100%;
    position: relative;
    height: 100%;
    object-fit: cover; 
    border-radius: 0em 1.875em 1.875em 0em;
}

.imp_proy_par_img_11 {
    width: 30%;
    height: 100%;
    position: relative;
    float:right;
    border-radius: 0em 1.875em 1.875em 0em;
}

.imp_proy_imp_img_11 img{
    width: 100%;
    height: 100%;
    position: relative;
    object-fit: cover;
    border-radius: 1.875em 0em 0em 1.875em;
}

.imp_proy_imp_img_11 {
    width: 30%;
    height: 100%;
    position: relative;
    float:right;
    border-radius: 1.875em 0em 0em 1.875em;
}

.imp_proy_par_txt {
    width: 70%;
    position: relative;
    float:left;
    height: 100%;  
    margin-left: 1.5em;
    margin-right:1.5em;
    transition: 0.6s;
    

}

.imp_proy_par_txt:hover {
    width: 70%;
    position: relative;
    float:right;
    height: 100%;  
    overflow:visible;

}

.imp_proy_par:hover{
    height: 35em;
    position: relative;
    transform: scale(1.05);

}
.div_present{
    text-align: justify;
    font-size: 110%;
    margin-left: 0em;
}
.div_present_2{
    text-align: justify;
    font-size: 110%;
}
.profe {
    position: relative;
    height: 34em; /* Already in em */
    box-shadow: rgb(219, 219, 219) 0em 0em 1.875em; /* 30px to em */
    border-radius: 1.875em; /* 30px to em */
    overflow: hidden;
    width: 20em; /* Already in em */
    transition: 0.4s;
    margin-left: 2em; /* Already in em */
    display: inline-block;
    transition: 0.6s;
}



.profe:hover{
    transform: scale(1.05);
}

.teacher_prof_1{
    width: 170%;
    position: relative;
    left:-7em;
    top:0em;
}
#teacher_prof_2{
    width: 200%;
    position: relative;
    left:-6em;
}

.profe_profile {
    width: 100%;
    position: relative;
    height: 50%;
}

.profe_txt{
    width: 100%;
    position: relative;
    height:70%;
    margin-top: -6em;
    margin-right:1em;
    margin-left: 0em;
    white-space:normal;

    background-image: linear-gradient(to bottom, rgba(255,255,255,0), black);
}

.div_profe{
    position: relative;
    top:4.5em;
    text-align: justify;
    margin-right: 1em;
    margin-left: 1em;
    font-size: 120%;
    color: white ;
}

.h1_infoprofe{
    position: relative;
    top: 3em;
    text-align: left;
    margin-left: 0.5em;
    color: white ;
    font-weight: bold;
}

.profe_button_left.inactive,
.profe_button_right.inactive {

  cursor: not-allowed;
  pointer-events: none;    /* evita clicks */
  opacity: 0.5;            /* opcional, para más claridad visual */
}


#professor {
    padding: 3em;
    height: 40%;
    overflow-x: scroll;
    white-space: nowrap;
    scroll-behavior: smooth;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
    animation-range: entry -10% contain 40%;
}

.spacer{
    width: 30em;
    height: 40em;
    float: left;
}

#professor::-webkit-scrollbar{
    display:none;
}

.buttons_slide_profe{
    padding:0em;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: right;
    right: 10em;
    margin-top:-6.5em;
    border-radius:100%;
    z-index:20;
}

.profe_button_left {
    display: block;
    cursor: pointer;
    position: relative;
    left: -2em; /* Assuming this is already in em units */
    font-size: 1.875em; /* 30px / 16px = 1.875em */
    height: 2em; /* Already in em units */
    width: 2em; /* Already in em units */
    color: var(--generalschemecolor);
    background: rgba(214, 214, 214, 0.4);
    border: none;
    border-radius: 0.6667em; /* 20px / 30px = 0.6667em */
    transition: 0.3s;
    visibility: visible;
}

.profe_button_left:hover{
    transform: scale(1.07);
}
.profe_button_right:hover{
    transform: scale(1.07);
}
.profe_button_right {
    cursor: pointer;
    position: relative;
    left: 0em; /* Assuming this is already in em units */
    color: var(--generalschemecolor);
    font-size: 1.875em; /* 30px / 16px = 1.875em */
    height: 2em; /* Already in em units */
    width: 2em; /* Already in em units */
    background: rgba(214, 214, 214, 0.4);
    border: none;
    border-radius: 0.6667em; /* 20px / 30px = 0.6667em */
    transition: 0.3s;
    display: block;
}

#firsthead {
    padding: 1.25em; /* 20px / 16px = 1.25em */
    position: relative;
    text-align: center;
    height: 17.875em; /* 286px / 16px = 17.875em */
    z-index: 10;
    color: red;
    top: 0em; /* Assuming this is already in em units */
    background: ghostwhite;
    border-radius: 0 0 1.875em 1.875em; /* 30px / 16px = 1.875em */
    box-shadow: rgba(99, 97, 97, 0.548) 0 0 3.125em 0.125em; /* 50px / 16px = 3.125em, 2px / 16px = 0.125em */
}
h2, h3, h4 {
    text-align: center;
    color: black;
}

h5 {
    font-size: 2.5em; /* 40px / 16px = 2.5em */
    margin: 0.5em; /* 20px / 40px = 0.5em */
    background-color: rgba(102, 51, 153, 0.39);
    border-radius: 0.5em; /* 20px / 40px = 0.5em */
    padding: 0.25em; /* 10px / 40px = 0.25em */
}

h6 {
    font-size: 1.25em; /* 20px / 16px = 1.25em */
    color: red;
}

tr, th, td {
    font-size: 1.5625em; /* 25px / 16px = 1.5625em */
    color: black;
    border: 0.06em solid; /* 1.5px / 25px = 0.06em */
    border-color: black;
    text-align: center;
    padding: 0.4em; /* 10px / 25px = 0.4em */
    border-radius: 0.52em; /* 13px / 25px = 0.52em */
    clear: both;
}

table {
    border: none;
    width: 80%;
    height: 80%;
    border-radius: 0.8125em; /* 13px / 16px = 0.8125em */
    position: relative;
    z-index: 4;
}

a {
    text-decoration: none;
}

#topbutton{
    font-size: 2.5em; /* 40px / 16px = 2.5em */
    cursor: pointer; 
    padding: 0em; /* 0px */
    position: fixed;
    width: 1.4em;
    height: 1.4em;
    right: 0.5em; /* 20px / 40px = 0.5em */
    bottom: 0.5em; /* 20px / 40px = 0.5em */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(0.125em); /* 5px / 40px = 0.125em */
    box-shadow: 0em 0em 1.25em 0.025em rgba(0, 0, 0, 0.1); /* 50px / 40px = 1.25em, 1px / 40px = 0.025em */
    border-radius: 100%;
    z-index: 30;
    display: none;
    color: white;
    align-items: center;
    place-content: center;
    transition: all 0.3s;
}

#topbutton:hover{
    transform: scale(1.075);
    background-color:var(--generalschemecpt);
}

header > div#wellcome {
    background-image: url("https://img.freepik.com/foto-gratis/pintura-lago-montana-montana-al-fondo_188544-9126.jpg?t=st=1708344019~exp=1708344619~hmac=8020e3da3e8c5fe4d35846ad23374c4b89b7bc209b4e94f83a66fe252d2404d1");
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.46875em; /* 7.5px / 16px = 0.46875em */
    width: 49.5%; /* Already in % */
    top: 2.875em; /* 46px / 16px = 2.875em */
    height: calc(100% - 9.375em); /* 150px / 16px = 9.375em */
    float: left;
    z-index: 1;
}

header > div#n3 {
    background: url("https://techcrunch.com/wp-content/uploads/2015/04/codecode.jpg");
    background-position: center;
    background-size: cover;
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 0.46875em; /* 7.5px / 16px = 0.46875em */
    width: 49.5%; /* Already in % */
    top: 2.875em; /* 46px / 16px = 2.875em */
    height: calc(100% - 9.375em); /* 150px / 16px = 9.375em */
    float: right;
    z-index: 1;
}

header > div#subtitle_intro {
    background-color: ghostwhite;
    background-image: url("https://text.media.giphy.com/v1/media/giphy.gif?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJwcm9kLTIwMjAtMDQtMjIiLCJzdHlsZSI6Imd1bSIsInRleHQiOiJIRUxMTyIsImlhdCI6MTcwODQzNTQ4OX0.n8MV4-1RNyLQiKnGCKBQLYm0tPXlkaxpW2Y4tWWj5XY&cid=a559de6b6acb8b418d7d68ee2fb4bb18927e31387c677eca&dynamic_style=gum&ep=v1_text_animate&rid=giphy.gif&ct=t'  width='50' height='9'");
    background-position: center; /* Center the image */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 1.875em 1.875em; /* 30px / 16px = 1.875em */
    width: 100%; /* Already in % */
    height: calc(100% - 13.125em); /* 210px / 16px = 13.125em */
    top: calc(var(--position-navbar) + 4.0625em); /* 65px / 16px = 4.0625em */
    z-index: 1;
    border: 0.125em solid #ff57e1; /* 2px / 16px = 0.125em */
}

#article1 {
    width: 49%; /* Already in % */
    float: left;
    background-color: white;
    border-radius: 1.25em; /* 20px / 16px = 1.25em */
    margin-left: 0.625em; /* 10px / 16px = 0.625em */
    height: 38.75em; /* 620px / 16px = 38.75em */
}

.sectionss {
    text-align: center;
    background-color: rgba(102, 51, 153, 0.39);
    border-radius: 1.25em; /* 20px / 16px = 1.25em */
    margin-left: 1.875em; /* 30px / 16px = 1.875em */
    margin-right: 1.875em; /* 30px / 16px = 1.875em */
    padding: 0.625em; /* 10px / 16px = 0.625em */
}

.firstinfo {
    text-align: left;
    margin-left: 1.25em; /* 20px / 16px = 1.25em */
}

.secondinfo {
    text-align: right;
    margin-right: 1.25em; /* 20px / 16px = 1.25em */
}

.thirdinfo {
    text-align: left;
    margin-left: 1.25em; /* 20px / 16px = 1.25em */
}

#article2 {
    width: 49%; /* Already in % */
    float: right;
    background-color: rgb(255, 255, 255);
    border-radius: 1.25em; /* 20px / 16px = 1.25em */
    margin-right: 0.625em; /* 10px / 16px = 0.625em */
    height: 18.75em; /* 300px / 16px = 18.75em */
}

#article3 {
    width: 49%; /* Already in % */
    float: right;
    background-color: rgb(255, 255, 255);
    border-radius: 1.25em; /* 20px / 16px = 1.25em */
    margin-right: 0.625em; /* 10px / 16px = 0.625em */
    margin-top: 1.25em; /* 20px / 16px = 1.25em */
    height: 18.75em; /* 300px / 16px = 18.75em */
}

#part2 {
    background-color: rgb(255, 255, 255);
    position: relative;
    border-radius: 1.25em; /* 20px / 16px = 1.25em */
    top: 0px; /* Already in px */
    margin-right: 0.625em; /* 10px / 16px = 0.625em */
    margin-left: 0.625em; /* 10px / 16px = 0.625em */
    padding: 0.625em; /* 10px / 16px = 0.625em */
    height: 28.125em; /* 450px / 16px = 28.125em */
    z-index: 3;
}

#listtitle {
    font-size: 1.875em; /* 30px / 16px = 1.875em */
    text-align: center;
}

#lists {
    background-color: rgba(102, 51, 153, 0.39);
    width: 49%; /* Already in % */
    margin-left: 0.625em; /* 10px / 16px = 0.625em */
    height: 20.3125em; /* 325px / 16px = 20.3125em */
    float: left;
    border-radius: 0.625em; /* 10px / 16px = 0.625em */
}

#table {
    background-color: rgba(102, 51, 153, 0.39);
    width: 49%; /* Already in % */
    border-radius: 0.625em; /* 10px / 16px = 0.625em */
    margin-right: 0.625em; /* 10px / 16px = 0.625em */
    height: 20.3125em; /* 325px / 16px = 20.3125em */
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
}



.gurl {
    box-shadow: rgba(0, 0, 0, 0.459) 0em 0em 0.9375em 0.125em; /* 15px / 16px = 0.9375em, 2px / 16px = 0.125em */
}

.clear {
    clear: both;
}

p {
    color: black;
    position: relative;
    z-index: 3;
}

img#imagen1 {
    height: 3.125em; /* 50px / 16px = 3.125em */
    border-radius: 0.9375em; /* 15px / 16px = 0.9375em */
}

img#imagen2 {
    width: auto; /* Already in auto */
    height: 31.25em; /* 500px / 16px = 31.25em */
    box-shadow: rgb(21, 21, 105) 0em 0em 250em 0.5em; /* 4000px / 16px = 250em, 8px / 16px = 0.5em */
    position: relative;
    z-index: 1;
}

embed {
    position: relative;
    top: 0em; /* 0px / 16px = 0em */
}

.footer_info {
    float: left;
    width: 25%; /* Already in % */
    padding-left:2em ;
    padding-right:2em ;
    padding-top:3em;
    padding-bottom:3em;
    margin:0em;
    position: relative;
    display: grid;
    place-content: start center;
}

.info_foot_h1{
    font-size: 1.375em; /* 20px/16px */
    color: black;
    font-weight: bold;
    margin-top: 0.75em;
    pointer-events:none;
    text-decoration: none;
}

.pagelink_foot{
    font-size: 1.125em; /* 15px/16px */
    color: black;
    hyphens: auto;
    word-wrap: break-word;
    white-space: normal;        /* Permite que el texto se divida en varias líneas */
    overflow: visible;          /* Asegura que el contenido no se oculte */
}

.pagelink_foot:hover{
    text-decoration: underline;
}

footer{
    color: black;
    height: 100%;
    background-color: white;
}

#hrhr{
    border: none; 
    margin: 0em;
}

.footer_div{
    top: 0em;
    padding-bottom: 0em;
    padding-top: 0em;
    margin: 0em;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    background-color: var(--generalschemecpt);
}

p{
    text-align: center;
}

.pagelink_foot h1{
    font-size: 0.75em; /* 12px/16px */
    color: black;
    margin-left: -0.75em;
}

.footer_media{
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    padding: 1em;
    background-color: var(--generalschemecptm2);
}

.footer_media a{
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
}

.footer_media2{
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    padding:3em 1em 1em  1em;
    background-color: var(--generalschemecptm2);
}

.footer_media2 a{
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
}

.image_foot_i2mb{
    margin: 3em 5em 3em 5em;
    padding-top:1em;
    padding-bottom:1em;
}

.image_foot_i2mb img{
    height:  5.3em;
}

.footmedia{
    margin: 3em;
}
.footmedia:hover{
text-decoration:underline;
}
.separador{
    position: relative;
    top: 0em;
    height: 10%;
    margin-left: 3em;
    margin-right: 3em;
    color: black;
    background-color: rgba(255, 255, 255, 0);
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    align-items: left;
}

.delimiter_33{
    border: 0.25em solid var(--generalschemecpt); /* 4px/16px */
    backdrop-filter: blur(10px);
    margin-top: 0em;
    position: relative;
    z-index: 20;
}

#martian:hover{
    color: rgb(19, 187, 47);

}

#form_div{
    padding: 4em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
    width: auto;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
    animation-range: entry -15% contain 40%;
    -webkit-font-smoothing: antialiased; /* Chrome, Safari */
    -moz-osx-font-smoothing: grayscale; /* Firefox */
    text-rendering: optimizeLegibility;
}

#lbl{
    margin-top: 0.5em;
}
form{
    align-items: center;
}

label{
    position: relative;
    padding-left: 0.5em;
    padding-top:1em;
    padding-bottom:0.5em;
}

legend{
    color: var(--generalschemecolor);
    position: relative;
    background-color: white;
    box-shadow: 0.125em 0.125em 0.125em 0.125em var(--generalschemecolor); /* 2px/16 */
    backdrop-filter: blur(0.625em);
    border-radius: 0.625em; /* 10px/16 */
    margin-right: 1.875em; /* 30px/16 */
    padding: 0.625em; /* 10px/16 */
    top: 0em;
    text-align: right;
}
fieldset{
    color: black;
    position: relative;
    top: 0px;
    width: auto;
    place-items: left;
    background-color: var(--generalschemecptm);
    border-radius: 1.25em; /* 20px/16 */
    font-size: 1.5625em; /* 25px/16 */
    display: grid;
    border: none;
    padding: 1em;
    margin: 0em;
}
.this{
    color: red;
}

#form1{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 0.625em; /* 10px/16 */
    margin-left: 0px;
    margin-right: 0px;
}
#fieldset3{
    margin-top: 1.875em; /* 30px/16 */
    margin-left: 0px;
    margin-right: 0px;
}
#FORM_TITLE{
    text-align: center;
    position: relative;
    margin:0em;
    top: 0em;
    padding-top: 5em;
    color: var(--generalschemecolor);
    font-size: var(--titles_fontsize);
    animation-timeline: view(block);
    animation-name: fadein_blocks;
}
#FORM_SUB{
    text-align: center;
    position: relative;
    top: 0em;
    color: var(--generalschemecpt);
    font-size: 2.5em; /* 250% */
    margin-bottom: 0em;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
}

input {
    font-size: 0.9375em; /* 15px */
    color: black;
    border: none;
    width: auto;
    height: 2.6667em; /* 40px/15px */
    border-radius: 0.6667em; /* 10px/15px */
    padding-left: 0.6667em; /* 10px/15px */
    padding-right: 0.6667em; /* 10px/15px */
    background-color: white;
    border-color: red;
    color: black;
    position: relative;
    z-index: 4;
}

input:focus{
    outline: 0.133333333em solid var(--generalschemecolor);
}

input::placeholder{
    color:rgb(128, 128, 128);
}

#files {
    height: auto;
    padding-top: 2em;
    padding-bottom: 2em;
    padding-left: 0.5em;
    display: flex;
    align-items: center;
}

textarea {
    font-size: 1em; /* 16px */
    padding: 0.625em; /* 10px / 16px */
    resize: none;
    border: none;
    border-radius: 0.625em; /* 10px / 16px */
    outline: none;
    width: auto;
    height: 10em; /* remains the same as it's relative to its own font size */
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: white;
}

textarea:focus {
    outline: 2px solid var(--generalschemecolor);
}

#name_fields {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: left;
}

#email_div {
    position: relative;
    display: grid;
    align-content: center;
    padding: 0.5em;
    height: auto;

    margin: 0em;
}

#phone_div {
    position: relative;
    display: grid;
    align-content: center;
    padding: 0.5em;
    height: auto;
    margin: 0em;

}

#areafortext {
    position: relative;
    display: grid;
    align-content: center;
    padding-top: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
    height: auto;
}

#submit_cwu {
    display: flex;
    align-items: center;
    position: relative;
    left: 2em;
}

.nofield_s {
    font-size: 1em; /* 16px */
    border: 0.125em solid var(--generalschemecolor); /* 2px / 16px */
    transition: all 0.3s;
    height: 3.5em;
    width: 6em;
    padding: 1em;
    border-radius: 1em;
    background-color: rgba(214, 214, 214, 0.438);
    color: var(--generalschemecolor);
}

.nofield_s:hover {
    transform: scale(1.05);
}

.nofield_r {
    font-size: 1em; /* 16px */
    position: relative;
    left: 1em;
    transition: all 0.3s;
    border: 0px solid rgba(187, 40, 40, 0.603);
    color: var(--generalschemecolor);
    width: 8em;
    height: 3em;
    border-radius: 1em;
    padding: 1em;
    background-color: rgba(214, 214, 214, 0.438);
    display: flex;
    justify-content: center;
    align-items: center;
}

.nofield_r:hover {
    transform: scale(1.05);
}

.field_text {
    background-color: transparent;
    position: relative;
    display: grid;
    align-content: center;
    padding-top: 3em;
    padding-bottom: 3em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    width: 100%;
    text-align: left;
    top: 0em;
}

#media_div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5em 0em 2em 0em;
    background-color: var(--generalschemecptm2);

    margin-bottom: 0px;
    height: fit-content;
}

.media_click {
    height: fit-content;
    padding-left: 4em;
    padding-right: 4em;
    float: left;
}

.media_click a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.medialogo {
    width: 3.2em;
    fill: red;
    transition: 0.5s;
}
.medialogo:hover{
    transform: scale(1.04);
}

#MEDIA_TITLE {
    font-size: var(--titles_fontsize);
    text-align: center;
    position: relative;
    margin-top: 0em;
    color: var(--generalschemecolor);
    padding: 2.5em;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
    margin: 0em 2em 0em 2em;
}

#icons {
    width: 2em;
}

#copyright {
    font-size: 0.85em; /* 12px / 16px */
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    padding: 2em;
    margin: 0;
    background-color: var(--generalschemecptm2);
}

#unshadow {
    top: 5em;
    position: absolute;
    z-index: 33;
    width: 100%;
    height: 1em;
    background-color: transparent;
    box-shadow: none;
    transition: all 0.3s;
}

#logo_im2b img{
    width: 10em;
}

#logo_im2b{
    color:rgba(0, 0, 0, 0.719);
    text-decoration: none;
    margin:0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background: none;
    transition: color 0.3s;
    cursor:pointer;
}

.pagelinkh1{
    position: relative;
    color: var(--generalschemecolor);
    top:0em;
    padding-top:0.1em;
    text-align: left;
    font-size: 1.5em;
    font-weight: bold;
    transition: color 0.1s;
    width: fit-content;
    cursor: pointer;
      transition: color 0.55s ease, background-color 0.55s ease, border-color 0.55s ease;
}
.pagelinkh2{
    position: relative;
    color: var(--generalschemecpt);
    top:0em;
    padding-top:0.4em;
    text-align: left;
    font-size: 1em;
    margin-top:0em;
    margin-bottom:0em;
    font-weight: normal;
    transition: color 0.1s;
          transition: color 0.55s ease, background-color 0.55s ease, border-color 0.55s ease;
    
}
.pagelinkh1:hover{
    color: var(--generalschemecolor);
}

.links_to_page{
    display: flex;
}
.principal_to_page{
    display: grid;
    align-items: center;
    width: fit-content;
    padding-top: 2em;
    z-index:6;
    margin-left: 2em;
    margin-right: 2em;
    height: fit-content;
}
.links_text_pages{
    display: grid ;
    margin-left:9em;
    margin-right:1em;
    height: fit-content;
}
#BIENVENIDA_TARGET{
top:-15em;
}

.imp_proy_ws{
    height: 22.5em;
    box-shadow: rgb(219, 219, 219) 0em 0em 1.875em;
    background-color: white;
    margin-right:7em;
    margin-left:7em;
    margin-bottom:1em;
    margin-top:1em;
    border-radius: 1.875em 1.875em 1.875em 1.875em;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    transition: 0.6s;
    z-index: 5;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
    animation-name: shrink;
    animation-range: entry -10% contain 40%;
}


.imp_proy_ws h1{
    position: relative;
    margin-top:1em;
    margin-bottom:1em;

}
.imp_proy_ws_imp_img img{
    position: relative;
    height: 100%;
    width: 100%;
    object-fit: cover;

}
.imp_proy_ws_imp_img {
    width: 50%;
    height: 100%;
    object-fit: cover;
    position: relative;
    float:left;  
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;  
    overflow: hidden;
    transition: all 0.3s;
}
.imp_proy_ws_imp_txt {
    width: 50%;
    position: relative;
    float:right;
    height: fit-content;  
    margin-left: 1.5em;
    margin-right: 1.5em;
    z-index: 5;
    transition: 0.6s;
}


.imp_proy_par{
    height: 20em;
    box-shadow: rgb(219, 219, 219) 0em 0em 1.875em;
    margin-left:20em;
    margin-right:5em;
    border-radius: 1.875em 1.875em 1.875em 1.875em;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: 0.6s;
    background-color: white;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
    animation-name: shrink;
    animation-range: entry -10% contain 40%;
}

.imp_proy_par h1{
    position: relative;
    margin-top:1em;
    

}

.imp_proy_ws_par_img img{
    position: relative;
    height: 100%;
    width: 100%;
    object-fit: cover; 
}

.imp_proy_ws_par_img {
    width: 50%;
    height: 100%;
    object-fit: cover;
    position: relative;
    float:right;
    overflow: hidden;
    transition: all 0.3s;
}

.imp_proy_par_img_11 img{
    width: 100%;   
}

.imp_proy_par_img_11 {
    width: 50%;
    position: relative;
    float:right;
}

.imp_proy_imp_img_11 img{
    width: 100%;   
}

.imp_proy_imp_img_11 {
    width: 50%;
    position: relative;
    float:right;
}

.imp_proy_ws_par_txt {
    width: 50%;
    position: relative;
    float:left;
    height: fit-content;  
    margin-left: 1.5em;
    margin-right: 1.5em;
    transition: 0.6s;

}

.div_present_o{
    text-align: justify;
    margin-right:0em;
    font-size: 110%;
    transition: all 0.3s;
}

.open_popup{
    position: absolute;
    z-index: 30;
    top: 0.5em;
    border-radius: 1em;
    height: 1.5em;
    width: fit-content;
    left: 0.5em;
    font-size: 2em;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(0.625em);
    display: flex;
    border: none;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    transition: all 0.3s;
}
.info_plus{
    color:white;
    margin-left:0.5em;
    margin-bottom:0em;
    margin-top:0em;
    margin-right:0.5em;
    width: fit-content;
    font-weight: bold;
}
.open_popup:hover  {
    transform: scale(1.07);
}

.open_popup img{
    height: 55%;
    width: auto;

}

.open_popup_par{
    position: absolute;
    z-index: 30;
    top: 0.5em;
    border-radius: 1em;
    height: 1.5em;
    width: fit-content;
    right: 0.5em;
    font-size: 2em;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(0.625em);
    display: flex;
    border: none;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    transition: all 0.3s;
}

.open_popup_par:hover  {
    transform: scale(1.07);
}

.open_popup_par img{
    height: 55%;
    width: auto;
}


.cross_plus{
    margin-left: 0.5em;
    rotate:0deg;
}
.cross_plus_par{
    margin-right: 0.5em;
    rotate:0deg;
}
.title_h1_o{
    color:var(--generalschemecolor);
    font-size: 2em;
    margin-right:0em;
}

#container{
    padding: 0em 7em 0em 7em;
    height: fit-content;
    align-items: center;
    text-align: left;
	top:-2em;
	font-size:1em;
	position:relative;
}

#container h1{
    text-align: left;
    position: relative;
    display: flex;
    align-items: center;
    top:0em;
    margin: 1.5em 0em 1.5em 0em;
    color:var(--generalschemecolor);
    font-size: var(--proj_fontsize_h1);
    padding: 0em;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
	    hyphens: auto;
    word-wrap: break-word;
}

#container h2{
    text-align: left;
    position: relative;
    display: flex;
    align-items: center;
    top:0em;
    margin: 1em 0em 1em 0em;
    color:var(--generalschemecolor);
    font-size: var(--proj_fontsize_h2);
    padding: 0em;
    animation-timeline: view(block);
    animation-name: fadein_blocks;
	    hyphens: auto;
    word-wrap: break-word;
}

#container span{
 	all:unset;   
}

#container p{
	text-align:left;
}

.contenido{
	display:flex;
    justify-content: center;
    align-items: center;
}

.divtext{
    width: 50%;
    float: left;
}

.divtext p{
    font-size: 17px;
}

.divright{
    float:right;
    width:  50%;
}

.contenido img{
    width: auto;
	height: auto;
    margin: 2em;
    border-radius: 1em;
}