#aside {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 4rem;
    z-index: 20;
}
@media only screen and (min-width: 1024px) {
    #aside {
        left: unset;
        bottom: 0;
        min-height: 100vh;
        height: 100vh;
        max-height: 100vh;
        width: 4rem;
    }
}


/* BACKDROP */
#aside-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    background-color: rgba(0, 0, 0, 0.25);
    visibility: hidden;
    cursor: pointer;
}


/* BAR */
.aside-bar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3rem;
    -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.75);
    z-index: 20;
}
@media only screen and (min-width: 1024px) {
    .aside-bar {
        left: unset;
        bottom: 0;
        flex-direction: column;
        width: 3rem;
        height: 100%;
        -webkit-box-shadow: 2px 0px 10px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 2px 0px 10px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 2px 0px 10px 0px rgba(0, 0, 0, 0.75);
    }
}

/* Button */
#aside-button {
    width: 3rem;
    min-height: 3rem;
    max-height: 3rem;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Links */
.aside-bar div {
    width: 100%;
    height: 100%;
    flex-direction: column;
}

#aside-button-menu-mobile > *{
    position: absolute;
    width: fit-content;
}

#aside-button-menu-mobile > button {
    height: 1rem;
    width: 1.5rem;
    right: 1rem;
}

#aside-button-menu-mobile > button div {
    position: absolute;
    left: 0;
    right: 0;
    background-color: black;
    height: 2px;
    transition: 500ms ease;
}
#aside-button-menu-mobile > button div:nth-of-type(1) {top: 0;}
#aside-button-menu-mobile > button div:nth-of-type(2) {top: calc(.5rem - 1px);}
#aside-button-menu-mobile > button div:nth-of-type(3) {bottom: 0;}

#aside-button-menu-mobile > button.open div:nth-of-type(1) {transform: translate(0px, 8px) rotate(30deg);}
#aside-button-menu-mobile > button.open div:nth-of-type(2) {width: 0 !important;}
#aside-button-menu-mobile > button.open div:nth-of-type(3) {transform: translate(0px, -8px) rotate(-30deg)}

@media only screen and (min-width: 1024px) {
    .aside-bar ul {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
}

.aside-bar li {
    display: flex;
    height: fit-content;
    align-items: center;
}

.aside-bar-link {width: 1.3rem;}
.aside-bar-link-wrap {writing-mode: vertical-rl;}

@media only screen and (min-width: 1024px) {
    .aside-bar-lang {height: 1rem !important;}
}


/* 
MENU
*/
#aside-menu-close {
    position: fixed;
    top: 1rem;
    left: 1rem;
    transform: translateX(-100vw);
}

#aside-menu {
    position: fixed;
    display: flex;
    flex-wrap: nowrap;
    top: 3rem;
    bottom: 0;
    right: 0;
    left: 0;
    min-width: 100vw;
    width: 100vw;
    max-width: 100vw;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    transform: translate(0, -100vh);
}
@media only screen and (min-width: 1024px) {
    #aside-menu {
        top: 0;
        left: unset;
        right: 3rem;
        min-width: 33vw;
        width: 33vw;
        max-width: 33vw;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: none;
        transform: translate(100vw, 0);
    }
}

#aside-mobile {flex-direction: column;}
#aside-mobile > ul {margin-bottom: .5rem;}
#aside-mobile .aside-menu-link {margin-bottom: .3333rem;}
#aside-mobile .aside-menu_lang-first {margin: 8rem 0 .3em;}
#aside-mobile .aside-menu-section-fill img {margin: auto;}

.aside-menu-section {
    min-height: calc(100vh - 3rem);
    height: calc(100vh - 3rem);
    max-height: calc(100vh - 3rem);
    min-width: 100vw;
    width: 100vw;
    max-width: 100vw;
    flex-direction: column;
    overflow-y: auto;
    scroll-snap-align: center;
    transition: 200ms;
}
@media only screen and (min-width: 1024px) {
    .aside-menu-section {
        min-height: fit-content;
        height: fit-content;
        max-height: fit-content;
        min-width: 100%;
        width: 100%;
        max-width: 100%;
        overflow-y: unset;
        scroll-snap-align: unset;
        transition: unset;
        transition: unset;
    }

    .aside-menu-section:not(:last-of-type) {padding-bottom: 0;}
}

.aside-menu-section > .hide-d {line-height: 125%;}
.aside-menu-section > .hide-d button {height: 5.5vw; align-self: center;}
.aside-menu-section > .hide-d button img {height: 100%; width: auto;}
.aside-menu-section > div:not(:last-of-type) {margin-bottom: .5rem;}
@media only screen and (min-width: 1024px) {
    .aside-menu-section > div:not(:last-of-type) {margin-bottom: .75rem;}
}

.aside-menu-section-fit {height: fit-content;}
.aside-menu-section-fill {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#aside-instalacio .aside-menu-section-fill {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media only screen and (min-width: 1024px) {
    .aside-menu-section-fill {
        display: block;
        height: fit-content;
    }

    #aside-instalacio .aside-menu-section-fill {height: 50vh;}
}

/* Sobre */
#aside-sobre .t-serif {
    font-size: 11.25vw;
    line-height: 100%;
}
#aside-sobre .t-serif.t-es {font-size: 9.75vw;}
@media only screen and (min-width: 1024px) {
    #aside-sobre .t-serif {font-size: 3.7vw;}
    #aside-sobre .t-serif.t-es {font-size: 3vw;}
}

#aside-sobre .aside-menu-section-fill p:first-of-type {margin-bottom: auto;}
#aside-sobre .aside-menu-section-fill p:last-of-type {margin-top: auto;}
#aside-sobre .aside-menu-section-fill img {
    width: 80%;
    padding: 1.5rem 0 0;
    margin: auto;
}
@media only screen and (min-width: 1024px) {
    #aside-sobre .aside-menu-section-fill img {width: 70%;}
}

/* Benestar Emocional */
#aside-benestar_emocional .aside-menu-section-fill div:first-of-type {margin-bottom: auto;}
#aside-benestar_emocional .aside-menu-section-fill div:last-of-type {margin-top: auto;}
#aside-benestar_emocional .aside-menu-section-fill img {
    width: 90%;
    padding: 3rem 0;
    margin: auto;
}

/* Recursos */
#aside-recursos .t-serif {font-size: 10.5vw;}
@media only screen and (min-width: 1024px) {
    #aside-recursos .t-serif {font-size: 3.25vw;}
}

#aside-recursos .aside-menu-section-fill div:first-of-type {margin-bottom: auto;}
#aside-recursos .aside-menu-section-fill div:last-of-type {margin-top: auto;}
#aside-recursos .aside-menu-section-fill img {
    width: 90%;
    margin: -1.5rem auto;
}
@media only screen and (min-width: 1024px) {
    #aside-recursos .aside-menu-section-fill img {
        width: 70%;
        margin: -.5rem auto;
    }
}

/* Instalacio */
.aside-instalacio-gallery-full {
    top: 1.25rem;
    left: 1.25rem;
}
.aside-instalacio-gallery {
    display: flex;
    flex-wrap: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    width: 100%;
    aspect-ratio: 3/2;
    scroll-snap-type: x mandatory;
}

.aside-instalacio-gallery > * {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    scroll-snap-align: center;
}
.aside-instalacio-gallery>*:not(:last-of-type) {margin-right: .75rem;}

.aside-instalacio-gallery-bottom {margin-top: .75rem;}
.aside-instalacio-gallery-nav button {margin-left: .75rem;}


#gallery-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 500;
}
#gallery-overlay[data-status="close"] {transform: translateY(-150vh);}

.gallery-overlay-close {
    top: 1.25rem;
    left: 1.25rem;
}
.gallery-overlay {
    display: flex;
    flex-wrap: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    width: calc(100vw - 2rem);
    margin: auto;
    aspect-ratio: 3/2;
    scroll-snap-type: x mandatory;
}
@media only screen and (min-width: 1024px) {
    .gallery-overlay {width: 60vw;}
}

.gallery-overlay>* {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    scroll-snap-align: center;
}
.gallery-overlay>*:not(:last-of-type) {margin-right: 20vw;}
@media only screen and (min-width: 1024px) {
    .gallery-overlay>*:not(:last-of-type) {margin-right: 1rem;}
}

.gallery-overlay-bottom {
    left: 4rem;
    bottom: 1.25rem;
    right: 1rem;
}
.gallery-overlay-nav button {
    margin-left: .75rem;
}


/* 
PODCAST
*/
#aside-podcast iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}