@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200;300;400;500;600;700;800;900&display=swap');

/*
@font-face {
    font-family: 'Unbounded';
    src: url('../font/Unbounded-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 1 999;
}
*/
/* generated by https://loading.io/ */

/* width */
::-webkit-scrollbar {
    width: 6px;
    border-radius: 3px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgba(33, 33, 37, .5);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(22, 22, 22, 1);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgba(33, 33, 33, 1);
}
.hidden {
    display: none;
}

/* ////////////////////////////////////////// Correct Viewport Height on Mobile ////////////////////////////////////////// */
html {
    scroll-behavior: smooth;
  }
html,
body {
    padding: 0;
    margin: 0;
    /*height: 100vh;
    height: calc(var(--vh, 1vh) * 100);*/
    max-width: 100%;
    overflow-x: hidden;
    color: #CDC8BE;
}

/* */

body.modal-open {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    overflow-y: hidden;
}

* {
    box-sizing: border-box;
}

#top {
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    top: 0
}
img.fit,
video.fit {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
.w50.desktop_only,
.desktop_only {
    display: block;
}
.w50.tablet_only,
.tablet_only {
    display: none;
}

.w50.mobile_only,
.mobile_only {
    display: none;
}

@media (max-width: 768px) {
    .w50.desktop_only,
    .desktop_only {
        display: none;
    }
    .w50.tablet_only,
    .tablet_only {
        display: block;
    }
    .w50.mobile_only,
    .mobile_only {
        display: none;
    }
}

@media (max-width: 414px) {
    .w50.desktop_only,
    .desktop_only {
        display: none;
    }
    .w50.tablet_only,
    .tablet_only {
        display: none;
    }
    .w50.mobile_only,
    .mobile_only {
        display: block;
    }
}

body {
    font-family: 'Unbounded';
    background: #040300;
    font-variation-settings: 'wght' 300;
}

/* //////////////////////////////////////////// Opera #detach-button-host //////////////////////////////////////////// */

#detach-button-host {
    display: none !important;
}

/* ///////////////////////////////////////////////////// M E N U /////////////////////////////////////////////////////*/

body {
    opacity: 0;
}
.anchor_target {
    position: absolute;
    top: 0;
    left: 10%;
    height: 1px;
    width: 100px;
    
    z-index: 99999;
}
#Judith-Nunta- {
    top: 70vh;
}
#Zoila-Ochoa- {
    top: 70vh;
}


.button_container {
    position: fixed;
    top: 3vmax;
    right: 3vmax;
    height: 27px;
    width: 35px;
    cursor: pointer;
    z-index: 100;
    transition: all 0.25s ease;
    border: 0;
    border: none;
    background-color: transparent;
    z-index: 100001;
}

@media (max-width: 768px) {
    .button_container {
        position: fixed;
        top: 4vmax;
        right: 4vmax;
    }
}

@media (max-width: 414px) {}

.button_container:hover {
    opacity: 0.7;
}

button:focus {
    outline: 0;
}

.button_container.active .top {
    transform: translateY(11px) translateX(0) rotate(45deg);
    background: #CCC6BE;
}

.button_container.active .middle {
    opacity: 0;
    background: #CCC6BE;
}

.button_container.active .bottom {
    transform: translateY(-11px) translateX(0) rotate(-45deg);
    background: #CCC6BE;
}

.button_container span {
    background: #CCC6BE;
    border: none;
    height: 4px;
    border-radius: 2px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.35s ease;
    cursor: pointer;
}

.button_container span:nth-of-type(2) {
    top: 11px;
}

.button_container span:nth-of-type(3) {
    top: 22px;
}


.overlay {
    position: fixed;
    background: url(../img/bg-hamburger.svg);
    background-size: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s, height 0.35s;
    overflow: hidden;
    font-variation-settings: 'wght' 300;
}

.overlay.open {
    opacity: 1;
    visibility: visible;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    z-index: 100000;
}

.overlay img {
    width: 182px;
    height: auto;
    position: absolute;
    bottom: 3vw;
    right: 3vw;
    opacity: 0;
    transition: all 0.05s;
}

.overlay.open img {
    width: 182px;
    height: auto;
    position: absolute;
    bottom: 4vw;
    right: 4vw;
    opacity: 1;
    transition: all 0.5s;
}

@media (max-width: 768px) {}

@media (max-width: 414px) {
    .overlay.open img {
        width: 36%;
        bottom: 10vw;
        right: 10vw;
    }
}



.overlay.open li {
    -webkit-animation: fadeInRight 0.5s ease forwards;
    animation: fadeInRight 0.5s ease forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s;
}

.overlay.open li:nth-of-type(2) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.overlay.open li:nth-of-type(3) {
    -webkit-animation-delay: 0.45s;
    animation-delay: 0.45s;
}

.overlay.open li:nth-of-type(4) {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.overlay nav {
    position: relative;
    height: fit-content;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1vmax;
    font-variation-settings: 'wght' 100;
    text-align: center;
    line-height: 1.5;
}

@media (max-width: 768px) {}

@media (max-width: 414px) {
    .overlay nav {
        font-size: 4vw;
        padding: 2vmax;
    }
}

.overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    height: 100%;
}

.overlay ul li {
    display: block;
    height: 16.667%;
    height: calc(100% / 8);
    position: relative;
    opacity: 0;
    margin: 1em 0;
}

.overlay ul li a {
    display: block;
    position: relative;
    color: #CFC9C1;
    text-decoration: none;
    overflow: hidden;
}

.overlay ul li a span {
    display: block;
    font-size: 2.2em;
    font-variation-settings: 'wght' 700;
}

.overlay ul li a.acerca {
    margin-top: 2em;
    font-size: 1.7vmax;
    text-decoration: underline;
}

@media (max-width: 768px) {}

@media (max-width: 414px) {
    .overlay ul li a.acerca {
        margin-top: 3.7vw;
        font-size: 3vmax;
    }

    .overlay ul li a span {
        font-size: 1.5em;
    }
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        left: 20%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        left: 20%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}

/* =Main */
#intro {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    text-align: center;
    color: #CDC8BE;
}

h1 {
    font-family: 'OpenSans-Light', Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.logohome {
    width: 12.66111111vw;
    position: absolute;
    top: 3vmax;
    left: 3vmax;
}

@media (max-width: 768px) {
    .logohome {
        width: 25%;
        left: 4vmax;
    }
}

@media (max-width: 414px) {
    .logohome {
        width: 50%;
    }
}

#intro .content {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 3vmax;
    height: 100%;
}

.bghome {
    position: absolute;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    z-index: 0;
}

.title {
    width: 44.90436508vw;
}

.byline {
    color: #CCC6BE;
    font-size: 1.725vw;
}

@media (max-width: 768px) {
    .title {
        width: 66%;
    }

    .byline {
        color: #CCC6BE;
        font-size: 2.4vw;
    }

}

@media (max-width: 414px) {
    .title {
        width: 96%;
    }

    .byline {
        color: #CCC6BE;
        font-size: 3.2vw;
    }

}



.wip,
.wip * {
    border: black 1px solid;
}

section {
    position: relative;
    overflow: hidden;
}

section .page {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    padding: 4.4vmax;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

.page_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    z-index: 0;
}


.page_content {
    position: relative;
    z-index: 1;
    height: fit-content;
    margin: 0 auto;
    max-width: 80%;
    text-align: center;
    color: #CCC6BE;
}

@media (max-width: 768px) {}

@media (max-width: 414px) {
    .page_content {
        margin: 10vh auto;
        max-width: 100%;
    }    
}

.v_lines_block1,
.v_lines_block2,
.v_lines_block3,
.v_lines_block4 {
    position: relative;
    overflow: hidden;
}

.v_lines_block1 .vlines,
.v_lines_block2 .vlines2,
.v_lines_block3 .vlines3,
.v_lines_block4 .vlines4 {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    width: 8vw;
    z-index: 20;
    overflow: hidden;
}
.v_lines_block2 .vlines2 {
    width: 6vw;
    background: url(../img/graph_3.2.svg);
    background-position: 0 0;
    background-size: 100% auto;
    background-repeat: repeat-y;
}
#g_loaiza {
    position: relative;
    top: 0;
    left: 10px;
    width: 20px;
    height: 1px;
    z-index: 1000;
}
#Gabriela-Loaiza {
    background: #212125;
}

#Gabriela-Loaiza .page {
    flex-direction: column;
}
.big_orange {
    position: absolute;
    text-align: center;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    
}
@media (max-width: 768px) {
    #Gabriela-Loaiza .page {
        flex-direction: column;
        padding: 13vmax 4.4vmax;
    }

}

@media (max-width: 414px) {}

h3 {
    font-size: 3.722222222vw;
    font-variation-settings: 'wght' 500;
    margin: 0;
}

.bajada {
    font-size: 1.785714286vw;
    margin: 0;
}

@media (max-width: 768px) {
    h3 {
        font-size: 6vw;
        font-variation-settings: 'wght' 500;
        margin: 0;
    }

    .bajada {
        font-size: 3vw;
        margin: 0;
    }
}

@media (max-width: 414px) {
    h3 {
        font-size: 7vw;
    }

    .bajada {
        font-size: 3.6vw;
    }
}

#section2 {
    margin-top: 0;
    height: 400vh;
    z-index: -1;
    margin-bottom: -25vh;
}

.vid_section .page {
    height: fit-content;
    max-height: fit-content;
    min-height: fit-content;
}

.big_orange_text {
    color: #C9721F;
    font-size: 2.579365079vw;
    font-variation-settings: 'wght' 500;
}

.big_orange_text span {
    display: block;
}

.med_orange_text {
    color: #C9721F;
    font-size: 1.654761905vw;
    font-variation-settings: 'wght' 500;
}

@media (max-width: 768px) {
    .big_orange_text {
        font-size: 4vw;
    }

    .med_orange_text {
        font-size: 3.2vw;
    }

}

@media (max-width: 414px) {
    .big_orange_text {
        font-size: 5vw;
    }
}
#section3 {
    height: 200vh;
}
.bg_vid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    margin: 0;
    line-height: 0;
    border: 0;
    z-index: 0;
}

.vid_section .pin-spacer {
   /* margin-bottom: 56.25vw !important;*/
}

.vimeowrapper {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);  
}
lite-vimeo{
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}
@media (max-width: 768px) {
    .vimeowrapper {
        margin-bottom: 0;
    }
}

@media (max-width: 414px) {
    .vimeowrapper {
        margin-bottom: 0;
    }
}


.wrapper,
.wrapper2,
.wrapper3,
.wrapper4,
.wrapper5,
.wrapper6 { 
    overflow: hidden;
    position: relative;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    display: block;
    min-height: 100vh;
}
.mask_wrapper {
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    display: flex;
    z-index: 20;
}

#mask {
    width: 10vw;
    border-radius: 3px;
    background: rgba(22, 22, 22, 0.85)
}

.scrollx_container {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    display: flex;
    width: fit-content;
    background: #000000;
    margin: 0;
}

.scrollx_container section {
    position: relative;
    display: flex;
    flex-direction: row;
    width: min-content;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

.scrollx_container section {
    padding: 0 5vw;
}

.scrollx_container .page {
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
    min-width: fit-content;
}

.scrollx_container .page_content {
    width: 100%;
    height: 100%;
    margin-top: 4.5vh;
    height: calc(100vh - 10vmax - 4.5vh);
    max-width: 100%;
    display: block;
    text-align: left;
    font-size: 0.94vmax;
    color: #CAC4BC;
    overflow: visible;
}

@media (max-width: 768px) {
    .scrollx_container .page_content {
        width: 100%;
        /*height: auto;*/
        max-height: 80%;
        max-width: 100%;
        display: block;
        text-align: left;
        font-size: 0.96vmax;
        color: #CAC4BC;
        overflow: auto;
    }

}

@media (max-width: 414px) {
    .scrollx_container .page_content {
        width: 100%;
        /*height: auto;*/
        max-height: 100%;
        max-width: 100%;
        display: block;
        text-align: left;
        font-size: 0.96vmax;
        color: #CAC4BC;
        overflow: auto;
        margin: 0 auto;
        margin-top: 3.5vh;
    }
}

.h_lines_block1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5.66993007vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /*
    background: url(../img/h_lines_block1.svg);
    background-position: left top;
    background-size: contain;
    background-repeat: repeat-x;*/
    z-index: 1;
}
.h_lines_block1 span {
    background: #614029;
    display: block;
}

.abridora {
    z-index: 3;
}

.abridora_h3 {
    width: calc(100% + 4.5vmax);
    transform: translateX(-9vmax);
}

.abridora .page_content::before {
    content: '';
    position: relative;
    width: 50vw;
    display: inline-block;

}

.portadilla {
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    min-width: 50vw;
    overflow: hidden;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}



@media (max-width: 768px) {
    .abridora_h3 {
        width: calc(100% + 4.5vmax);
        transform: translateX(0vw);
    }

    .portadilla {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        min-width: 100vw;
        overflow: hidden;
        height: 100vh
    }
}

@media (max-width: 414px) {
    .portadilla {
        width: 50%;
    }
}

.portadilla img {
    max-width: 100%;
}
.image {
    position: relative;
    width: fit-content;
    display: flex;
    overflow: hidden;
}
.scrollx_img {
    width: auto;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    margin: 0 -5vw;
}

.scrolly_img {
    width: auto;
    min-height: 120vh;
    max-height: none !important;
    position: relative;
    margin: -10vh 0;
}

.w25 {
    position: relative;
    width: 25vw;
    min-width: 25vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4.5vmax;
}

.w33 {
    position: relative;
    width: 33vw;
    min-width: 33vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4.5vmax;
}

.w40 {
    position: relative;
    width: 40vw;
    min-width: 40vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4.5vmax;
}

.w50 {
    position: relative;
    width: 45vw;
    min-width: 45vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5vmax;
}

.w66 {
    position: relative;
    width: 66vw;
    min-width: 66vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4.5vmax;
}

.leyenda {
    font-size: 1.323412698vw;
    font-variation-settings: 'wght' 400;
}
.color_c8721f {
    color: #c8721f !important;
}
.color_cdc8be {
    color: #cdc8be !important;
}
.color_b04459 {
    color: #b04459 !important
}
.color_b2444c {
    color: #b2444c !important
}
.w100 {
    position: relative;
    width: 91vw;
    min-width: 91vw;
}

@media (max-width: 768px) {
    
    .leyenda {
        font-size: 2.8vw;
    }

    .w33 {
        width: 66vw;
        min-width: 66vw;
        padding: 10vh 10vw;
    }

    .w40 {
        width: 80vw;
        min-width: 80vw;
        padding: 10vh 10vw;
    }

    .w50 {
        width: 100vw;
        min-width: 100vw;
        padding: 10vh 10vmax;
    }

    .w66 {
        width: 100vw;
        min-width: 100vw;
        padding: 10vh 10vmax;
    }
}

@media (max-width: 414px) {
    .scrolly_img {
        width: auto;
        min-height: 123vh;
        max-height: none !important;
        position: relative;
        margin: -10vh 0;
    }
    .leyenda {
        font-size: 3.2vw;
        max-width: 50vw !important;
    }

    .w25 {
        width: 40vw;
        min-width: 40vw;
        padding: 10vh 10vw;
    }

    .w33 {
        width: 66vw;
        min-width: 66vw;
        padding: 10vh 10vw;
    }

    .w40 {
        width: 100vw;
        min-width: 80vw;
        padding: 10vh 10vw;
    }

    .abridora .w40 {
        width: 80vw;
        min-width: 80vw;
        padding: 10vh 10vw;
    }

    .w50 {
        width: 100vw;
        min-width: 100vw;
        padding: 10vh 10vw;
    }

    .w66 {
        width: 100vw;
        min-width: 100vw;
        padding: 10vh 10vw;
    }
}

.w33.image,
.w40.image,
.w50.image,
.w66.image {
    padding: 0;
    overflow: hidden;
}

.scrollx_container h3 {
    font-size: 3.3vw;
    line-height: 1.1;
    color: #CDC8BE;
    margin-bottom: 0.8em;
}
.scrollx_container h5 {
    font-size: 2vw;
    font-variation-settings: 'wght' 300;
}
.scrollx_container p {
    line-height: 1.4;
    text-align: left;
    font-size: 0.93vmax;
    color: #CAC4BC;
}

.scrollthis {
    overflow: auto;
    /*padding-right: 20px;*/
}

.scrollx_container h2 {
    font-size: 3.3vw;
    color: #CC721F;
    font-variation-settings: 'wght' 700;
    line-height: 1.1;
}

.page_content h4 {
    font-size: 1.619047619vmax;
    color: #CDC8BE;
    margin-top: 0;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    font-variation-settings: 'wght' 700;
}

.big {
    font-size: 1.8650794vw !important;
    font-size: 1.5vmax !important;
    color: #CEC8C0;
}

.big_lite {
    font-size: 1.4vmax !important;
    color: #CEC8C0;
    font-variation-settings: 'wght' 100;
}

@media (max-width: 768px) {
        
    .scrollx_container h5 {
        font-size: 3vw;
    }
    .scrollx_container h2 {
        font-size: 4vw;
    }
    .scrollx_container h3 {
        font-size: 5vw;
        margin-bottom: 1.8em;
        max-width: 100%;
    }

    .page_content h4 {
        font-size: 3.2vmax;
    }

    .scrollx_container p {
        font-size: 1.5vmax;
    }
    .minimapa p {
        font-size: 1.2vmax;
    }
}

@media (max-width: 414px) {
    .page_content h4 {
        font-size: 2.5vmax;
    }

    .big {
        font-size: 3.3vw !important;
        color: #CEC8C0;
    }
    .big_lite {
        font-size: 3vw !important;
        color: #CEC8C0;
        font-variation-settings: 'wght' 100;
    }
    .scrollx_container p {
        font-size: 1.4vmax;
    }
}

.mapa {
    position: relative;
    padding: 5vh 0vw 5vh 5vw;
}
.minimapa {
    padding: 2.5vh 10vw 5vh 2vw;
    position: relative;
    width: 320px; box-sizing: content-box;
    max-width: 90vw;
}
.minimapa img {
    width: auto;
    max-width: 240px;
    height: auto;
    max-height: 50vh;
}
.minimapa p {
    margin: 20px 0 0 6px ;
}

.mapa img,
.mapa svg {
    height: 90vh;
    height: calc(var(--vh, 1vh) * 90);
}

.map-data-1 p {
    font-size: 0.64vw;
    line-height: 1.2;
}

.map-data-2 p {
    font-size: 0.82vw;
    line-height: 1.2;
}

.map-data-2 p b,
.map-data-1 p b {
    font-size: 1.5em;
    display: block;
    margin-bottom: 0.5em;
    font-variation-settings: 'wght' 500;
}

.map-data-1 {
    position: absolute;
    top: 13%;
    left: 25%;
    width: 22%;
}

.map-data-2 {
    position: absolute;
    top: 60%;
    left: 70%;
    width: 28%;
}

@media (max-width: 768px) {
    .map-data-1 p {
        font-size: 1.64vw;
        line-height: 1.2;
    }

    .map-data-2 p {
        font-size: 1.82vw;
        line-height: 1.2;
    }

    .map-data-1 {
        position: absolute;
        top: 13%;
        left: 25%;
        width: 22%;
    }

    .map-data-2 {
        position: absolute;
        top: 60%;
        left: 70%;
        width: 28%;
    }
}

@media (max-width: 414px) {
    .map-data-1 p {
        font-size: 2.64vw;
        line-height: 1.2;
    }

    .map-data-2 p {
        font-size: 3vw;
        line-height: 1.2;
    }

    .map-data-1 {
        position: absolute;
        top: 13%;
        left: 25%;
        width: 22%;
    }

    .map-data-2 {
        position: absolute;
        top: 60%;
        left: 70%;
        width: 28%;
    }
}

.texto-chico {
    justify-content: flex-start;
    padding: 8vmax 4.5vmax;
    font-size: .75vmax;
}



.texto-chico p {
    font-size: .8vmax;
}



.play,
.play2,
.play3,
.play4,
.play5,
.play6 {
    height: 140px;
    width: 140px;
    margin: auto;
    background: url(../img/play.svg);
    background-size: contain;
    opacity: .8;
}
.play.active,
.play2.active,
.play3.active,
.play4.active,
.play5.active,
.play6.active {
    background: url(../img/pause.svg);    
}

.play2 {
    background: url(../img/play2.svg);
}
.play2.active {
    background: url(../img/pause2.svg);    
}
.play3 {
    background: url(../img/play3.svg);
}
.play3.active {
    background: url(../img/pause3.svg);    
}
.play4 {
    background: url(../img/play4.svg);
}
.play4.active {
    background: url(../img/pause4.svg);    
}
.play5 {
    background: url(../img/play5.svg);
}
.play5.active {
    background: url(../img/pause5.svg);    
}
.play6 {
    background: url(../img/play6.svg);
}
.play6.active {
    background: url(../img/pause6.svg);    
}


@media (max-width: 768px) {    
}

@media (max-width: 414px) {

    .play,
    .play2,
    .play3,
    .play4,
    .play5,
    .play6 {
        height: 25vw;
        width: 25vw;
    }
    .pause,
    .pause2,
    .pause3,
    .pause4,
    .pause5,
    .pause6 {
        height: 25vw;
        width: 25vw;
    }
}

.play:hover,
.play2:hover,
.play3:hover,
.play4:hover,
.play5:hover,
.play6:hover {
    opacity: 1;
}

.play button,
.play2 button,
.play3 button,
.play4 button,
.play5 button,
.play6 button {
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.Podcast {
    width: 100vw !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.Podcast .page_bg {
    width: 120% !important;
}
.Podcast .w50 {
    height: 70vh;
    padding-bottom: 0;
}

.audio_wrapper {
    height: 30vh;
    padding: 0 4.5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 90vw;
    min-width: 90vw;
}

.audiowaves {
    width: 60%;
    margin: auto;
}

@media (max-width: 768px) {
    .scrollx_container section.Podcast {
        width: 100vw !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 0 5vw;
    }

    .Podcast .w50 {
        width: 50%;
        min-width: 50%;
        height: 60vh;
        padding: 5vh 5vw;
    }

    .audio_wrapper {
        height: 30vh;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .audiowaves {
        width: calc(100% - 10vw);
        margin: auto;
    }

}

@media (max-width: 414px) {
    .Podcast h2 {
        font-size: 5.5vw;
    }
}

.page_bg img {
    max-height: 100%;
}

#Nelyda-Entsakua {
    background: #212125;
}

#Nelyda-Entsakua .page {
    flex-direction: column;
}
.big_purple {
    position: absolute;
    text-align: center;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    
}

.Entsakua_graph1 {
    width: 45vmax;
    height: 45vmax;
    background: url('../img/Entsakua_graph1.svg');
    position: absolute;
    top: 0;
    z-index: 2;
    left: -16vmax;
}

#section14 {
    height: 400vh;
    color: #764d71;
    margin-top: -25vh;
    z-index: -1;
    margin-bottom: -25vh;
}
#section15 {
    height: 200vh;
}
.graph2 {
    position: absolute;
    width: 100%;
    /* overflow: hidden; */
    height: 160vh;
    /* margin: -50vh 0; */
    z-index: 2;
}

.Entsakua_graph2 {
    width: 32vmax;
    height: 32vmax;
    background: url('../img/Entsakua_graph2.svg');
    position: absolute;
    top: 50%;
    right: -6vmax;
}

.graph3 {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    margin: -50vh 0;
    z-index: 2;
}

.Entsakua_graph3 {
    width: 29.2vmax;
    height: 29.2vmax;
    background: url('../img/Entsakua_graph3.svg');
    position: absolute;
    top: 50%;
    right: -6vmax;
}

.Entsakua_graph4 {
    width: 29.2vmax;
    height: 29.2vmax;
    background: url('../img/Entsakua_graph4.svg');
    position: absolute;
    top: 80%;
    right: -5vmax;
    z-index: 2;
}

.big_purple_text {
    color: #764d71;
    font-size: 2.579365079vw;
    font-variation-settings: 'wght' 500;
}

.big_purple_text span {
    display: block;
}

.med_purple_text {
    color: #dfd8d4;
    font-size: 1.785714286vw;
    max-width: 32em;
    text-shadow: 0 0 20px #000000;
    font-variation-settings: 'wght' 500;
}

@media (max-width: 768px) {
    .big_purple_text {
        font-size: 4vw;
    }

    .med_orange_text,
    .med_purple_text {
        font-size: 3.2vw;
    }

}

@media (max-width: 414px) {
    .big_purple_text {
        font-size: 5vw;
        max-width: 80%;
    }

    .med_orange_text,
    .med_purple_text {
        font-size: 2.2vmax;
    }
}
#Cecilia-Martinez {
    background: #212125;
}

#Cecilia-Martinez .page {
    flex-direction: column;
}

#section26 {
    margin-top: -25vh;
    height: 400vh;
    z-index: -1;
    margin-bottom: -25vh;
}
#section27 {
    height: 200vh;
}
.big_mustard {
    position: absolute;
    text-align: center;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    max-width: 80%;    
}
.big_mustard_text {
    color: #ac8149;
    font-size: 1.984126984vw;
    font-variation-settings: 'wght' 500;
    max-width: 31em;
}



.med_mustard_text {
    color: #cdc8be;
    max-width: 29em;
    font-size: 1.654761905vw;
    font-variation-settings: 'wght' 500;
    text-shadow: 0 0 20px #000000;
}


@media (max-width: 768px) {
    .big_mustard_text {
        font-size: 4vw;
    }

    .med_mustard_text {
        font-size: 3.2vw;
    }

}

@media (max-width: 414px) {
    .big_mustard_text {
        font-size: 5vw;
    }
    .med_mustard_text {
        font-size: 2.2vmax;
    }
}
.h_lines_block2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5.66993007vh;
    background: url(../img/hlines2.svg);
    background-position: left top;
    background-size: contain;
    background-repeat: repeat-x;
    z-index: 1;
}

#section39 {
    margin-top: -25vh;
    height: 400vh;
    z-index: -1;
    margin-bottom: -25vh;
}

.bosque_graph1 {
    width: 45vmax;
    height: 45vmax;
    background: url('../img/Nuwas1.svg');
    position: absolute;
    top: 0;
    z-index: 2;
    left: -16vmax;
}
/*

.Entsakua_graph2 {
    width: 32vmax;
    height: 32vmax;
    background: url('../img/Entsakua_graph2.svg');
    position: absolute;
    top: 50%;
    right: -6vmax;
}*/
.bosque_graph2 {
    width: 32vmax;
    height: 32vmax;
    background: url('../img/Nuwas2.svg');
    position: absolute;
    top: 50%;
    right: -6vmax;
}

.bosque_graph3 {
    width: 29.2vmax;
    height: 29.2vmax;
    background: url('../img/Nuwas3.svg');
    position: absolute;
    top: 50%;
    right: -6vmax;
}
#Bosque-de-las-Nuwas {
    background: #212125;
}

#Bosque-de-las-Nuwas .page {
    flex-direction: column;
}

.big_b2444c {
    position: absolute;
    text-align: center;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    max-width: 80vw;
    
}

.big_b2444c_text {
    color: #b2444c;
    font-size: 2vw;
    font-variation-settings: 'wght' 500;
    max-width: 31em;
}

.med_b2444c_text {
    color: #b2444c;
    font-size: 1.785714286vw;
    max-width: 32em;
    text-shadow: 0 0 20px #000000;
}

@media (max-width: 768px) {
    .big_b2444c_text {
        font-size: 4vw;
    }

    .med_b2444c_text {
        font-size: 3.2vw;
    }

}

@media (max-width: 414px) {
    .big_b2444c_text {
        font-size: 5vw;
    }

    .med_b2444c_text {
        font-size: 3.2vw;
    }
}




.v_lines_block3 .vlines3 {
    width: 6vw;
    background: url(../img/vlines2.svg);
    background-position: -1px -1px;
    background-repeat: repeat-y;
}
#Judith-Nunta {
    background: #212125;
}

#Judith-Nunta .page {
    flex-direction: column;
}
.big_pink {
    position: absolute;
    text-align: center;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;    
    max-width: 80%;    
}
.big_pink_text {
    color: #E393BB;
    font-size: 2vw;
    font-variation-settings: 'wght' 500;
    max-width: 31em;
}
.med_beige_text {
    color: #DBD5D1;
    font-size: 1.8vw;
}
@media (max-width: 768px) {
    #Judith-Nunta .page {
        flex-direction: column;
        padding: 13vmax 4.4vmax;
    }

}

@media (max-width: 414px) {}


#section36 {
    height: 200vh;
}
#section40 {
    height: 200vh;
}


.wrapper5 .scrollx_container h2 {
    color: #E393BB;
}
.v_lines_block4 .vlines4 {
    width: 6vw;
    background: url(../img/vlines3.svg);
    background-position: -1px -1px;
    background-repeat: repeat-y;
}


#Zoila-Ochoa {
    background: #212125;
}

#Zoila-Ochoa .page {
    flex-direction: column;
}

.h_lines_block3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5.66993007vh;
    background: url(../img/hlines3.svg);
    background-position: left top;
    background-size: contain;
    background-repeat: repeat-x;
    z-index: 1;
}

.h_lines_block4 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5.66993007vh;
    background: url(../img/hlines4.svg);
    background-position: left top;
    background-size: contain;
    background-repeat: repeat-x;
    z-index: 1;
}


/*



@media (max-width: 768px) {
    

}

@media (max-width: 414px) {
    .big_mustard_text {
        font-size: 5vw;
    }
}
*/
.big_ochoa {
    position: absolute;
    text-align: center;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;    
    max-width: 66%;
}
.big_ochoa_text {
    color: #9B7369;
    font-size: 2vw;
    font-variation-settings: 'wght' 500;
}
.med_beige_text {
    color: #DBD5D1;
    font-size: 1.8vw;
    font-variation-settings: 'wght' 500;
    max-width: 31em;
}

@media (max-width: 768px) {
    .big_ochoa_text {
        font-size: 3vw;
    }

    #Zoila-Ochoa .page {
        flex-direction: column;
        padding: 13vmax 4.4vmax;
    }
    .big_pink_text {
        font-size: 4vw;
    }

    .med_beige_text {
        font-size: 3.2vw;
    }

}

@media (max-width: 414px) {
    .big_ochoa_text {
        font-size: 2vmax;
    }
    .med_beige_text {
        font-size: 2.2vmax;
    }

}


#section36 {
    height: 200vh;
}
#section40 {
    height: 200vh;
}



#section48 {
    height: 200vh;
}


















#acerca-de {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

#acerca-de .title {
    position: absolute;
    width: 27.5%;
    top: 50%;
    transform: translateY(-50%);
    right: 4.5%;
}

#acerca-de .byline {
    font-size: 1.24vw;
    text-align: center;
}

#acerca-de .content {
    display: flex;
    height: 100%;
    flex-direction: row;
    justify-content: start;
    padding: 4.5vmax 6vmax;
}

#acerca-de .text {
    width: 40%;
    font-size: 1.32vmax;
    line-height: 1.5;
    position: relative;
    align-self: flex-end;
}
.bg_grad {
    height: 200vh;
    height: calc(var(--vh, 1vh) * 200);
    background-size: cover !important;
    background-position: center center;
    background-repeat: no-repeat;    
    position: relative;
    margin-top: -100vh;
    z-index: -10;
}

.bg_grad1 {
    background: url(../img/bg_grad1.svg);
}
.bg_grad2 {
    background: url(../img/bg_grad2.2.svg);    
}
.bg_grad3 {
    background: url(../img/bg_intro_acerca.svg);    
}
.bg_grad4 {
    background: url(../img/bg_grad3.2.svg);    
}
.bg_grad5 {
    background: url(../img/bg_grad4.svg);    
}
.bg_grad6 {
    background: url(../img/bg_grad6.svg);    
}
.bg_grad7 {
    background: url(../img/bg_grad7.svg);    
}
.bg_grad8 {
    background: url(../img/bg_grad8.svg);    
}

.bg-acerca-de {
    background: url(../img/bg-acerca-de.svg);
    background-size: auto 100%;
}

.bg-acerca-de section {
    height: fit-content;
}

.bg-acerca-de .page_content {
    width: 75%;
    text-align: left;
    padding: 7vmax 5vmax;
}

@media (max-width: 768px) {


}

@media (max-width: 414px) {
    .bg-acerca-de .page_content {
        width: 100%;
        text-align: left;
        padding: 7vmax 5vmax;
        margin: 0 auto;
    }
    #acerca-de .content {
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 4.5vmax 6vmax;
    }
    #acerca-de .title {
        position: relative;
        width:100%;
        top: auto;
        right: auto;
        transform: translateY(0);
    }
    #acerca-de .byline {
        font-size: 2.4vw;
        text-align: center;
    }
    #acerca-de .text {
        width: 100%;
        font-size: 1.32vmax;
        line-height: 1.5;
        position: relative;
        align-self: flex-end;
        text-align: center;
    }
}


.p_siete {
    font-size: 1.388888889vmax;
    font-variation-settings: 'wght' 500;
}

.p_nueve {
    font-size: 1.785714286vmax;
}

.w85 {
    width: 85% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.light {
    font-variation-settings: 'wght' 300;
    font-size: 1.19047619vmax;
}

.two_cols {
    display: flex;
    flex-direction: row;
    column-gap: 10%;
}

.two_cols div {
    width: 45%;
}
.logosss {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 10%;

}
.bg-acerca-de h3 {
    font-size: 2.388888889vw;
}

.three_cols {
    display: flex;
    flex-direction: row;
    column-gap: 5%;
    flex-wrap: wrap;
}

.three_cols div {
    width: 30%;
    min-width: 30%;
}

.p_cinco p {
    font-size: 0.992063492vmax;
    line-height: 1.6;
    margin: 0;
    font-variation-settings: 'wght' 300;
}

.bg-acerca-de h5 {
    font-size: 1.742063492vw;
    margin-bottom: 10px;
}

.bg-acerca-de div img {
    max-width: 100%;
}

.row {
    padding: 2vmax 0;
    display: flex;
    flex-direction: row;
    column-gap: 5%;
    align-items: center;
}

.row .w25 {
    width: 21.6666%;
    min-width: 21.6666%;
}

.row .w30 {
    width: 26.66667%;
    min-width: 26.66667%;
}

.row .w40 {
    width: 36.66667%;
    min-width: 36.66667%;
    padding: 0;
}

.row .w40.equipo {
    width: 45%;
    min-width: 45%;
    padding: 0;
}

.equipo p {
    margin: 0;
    font-size: 0.992063492vmax;
    font-variation-settings: 'wght' 300;
    padding-left: 1em;
    line-height: 1.5;
}

#Equipo .row {
    justify-content: space-between;
}


strong {
    font-variation-settings: 'wght' 700;
}
.equipo .nombre {
    padding-left: 0;
}
.equipo .subti {
    font-size: 1.19047619vmax;
    margin: 1em 0;
    font-variation-settings: 'wght' 500;
    padding-left: 0;
}

.equipo_logo {
    width: 11.55456349vw;
}


.bg-acerca-de #creditos .page_content {
    width: 85%;
    padding: 6vmax 0;
}

.logo_pai {
    width: 16.66666667vw;
}

#creditos .page_content .row {
    justify-content: center;
    column-gap: 8%;
}

#footer {
    background: #cac4bc;
    color: #000000;
    padding: 6vmax 4.5vmax;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#footer h3 {
    color: #000000;
    font-size: 1.482142857vmax;
    text-align: left;

}

#footer p {
    font-size: 0.948412698vmax;
    color: #000000;
    text-align: left;

}

#footer p strong {
    font-size: 1.10515873vmax;
}

.logo_footer {
    width: 16.47638889vw;
}
.logo_footer img {
    max-width: 100% ;
    height: auto;
}

.redes {
    display: flex;
    margin: 26px 0;

}

.redes img {
    height: 3.174603175vmax;
}

.mix-diff {
    mix-blend-mode: difference
}
.mix-mult {
    mix-blend-mode: luminosity;
}

@media (max-width: 768px) {
    .logo_footer {
        width: 30vw;
        margin-bottom: 1em;
    }
    #footer h3 {
        font-size: 1.6vmax;
        margin-top: 1.5em;
        text-align: center;    
    }
    #footer p {
        font-size: 1.2vmax;
        text-align: center;
    }
    #footer .row {
        flex-direction: column;
    }
}












.project {
    text-align: center;
    padding: 200px 0;
    border-bottom: 1px #ebebeb solid;
}

.project img {
    width: 180px;
    height: 180px;
}

.project p {
    max-width: 300px;
    margin: 0 auto;
    color: #294D67;
}

#project02 {
    transition: background-color 0.3s linear;
}

#project02.active {
    background-color: #efefef;
}

#project01 h2 {
    color: #3DB3CE;
}

#project02 h2 {
    color: #75C695;
}

#project03 h2 {
    color: #F5876F;
}

#main {
    position: relative;
    background-color: #FFF;
}

.bcg-parallax {
    padding: 150px 0;
    color: #fff;
    background-color: #000;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.bcg {
    background: url('../img/img_background.jpg') no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 150%;
    top: 0;
    z-index: 1;
    opacity: 0.7;
}

.content-wrapper {
    width: 90%;
    margin: 0 auto;
    max-width: 1140px;
    position: relative;
    z-index: 2;
}

/* =Footer */
.footer-container {
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    background-color: #06060d;
}

.footer-container .wrapper {
    width: 80%;
    max-width: none;
    margin: 0 10%;
}

.footer-container h3 {
    margin: 0;
    padding: 20px 0;
    font-variation-settings: 'wght' 500;
}

.footer-container a {
    color: rgba(255, 255, 255, 0.5);
}