@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100..900&family=Noto+Sans+JP:wght@100..900&display=swap);
html {

    --col-theme: #ffffff;
    --col-pri: #ED2345;
    --col-sec1: #F18F01;
    --col-sec2: #ADCAD6;
    --col-txt-pri: #020300;

    --site-padding: 56px;

    background-color: var(--col-theme);
    height: 100%;
    overflow-x: hidden;
    background: url(/assets/mascot_bg.9b9e15c811885a8d7a68.svg) no-repeat;
    background-size: contain;
    background-position: center;
}

body {

    margin: 0;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}

html, body, *, *::before, *::after {

    box-sizing: border-box;
}

#site-wrapper {

    position: relative;
    overflow-x: clip;
}

a, ul, li {

    text-decoration: none;
    list-style-type: none;
    margin: 0;
    width: auto;
}

h1, h2, h3, h4, h5, h6, p, a, ul, li {
    
    color: var(--col-txt-pri);
}

.body-txt {

    font-family: 'Noto Sans JP';
    font-weight: 300;
    font-size: 16px;
}

.bold-body-txt {

    font-weight: 700;
}

.medium-body-txt {

    font-weight: 500;
}

h1, h2, h3, h4, h5, h6, p {

    margin: 0;
    overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, h6 {

    font-family: "Noto Sans HK";
    font-weight: 900;
}

h1 {

    font-size: 48px;
}

h2 {

    font-size: 38px;
}

button {

    border: none;
    background-color: transparent;
    cursor: pointer;
    width: max-content;
    padding: 0;
}

input, textarea {

    border: none;
    padding: 0;
    background-color: transparent;
    resize: none;
}

input:focus-visible,
button:focus-visible,
textarea:focus-visible {

    outline: none;
}

input::placeholder,
textarea::placeholder {

    opacity: 1;
}

/*Remove Up and Down Arrows in input type=number*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
  
    -moz-appearance: textfield;
}

span,
span::before,
span::after {

    display: inline-block;
}

img {

    object-fit: cover;
}

.padded-section {

    margin: 0 var(--site-padding);
}

.cta {

    padding: 8px 16px;
    border-radius: 4px;
    background-color: var(--col-pri);
    color: var(--col-theme);
    display: inline-block;
    font-weight: 900;
    font-size: 15px;

    transition: border-radius 0.24s ease-in-out;
}

.cta:hover,
.cta:focus,
.cta:active {

    border-radius: 8px;
}
#navbar {

    position: sticky;
    top: 0;
    padding: 10px var(--site-padding);
    z-index: 20;
    border-bottom: 2px black solid;
    background-color: var(--col-theme);
}

#nav-content {

    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#defocus {

    display: none;
}

#nav-list-bg {

    display: none;
}

#nav-toggle-btn {

    display: none;
    position: relative;
}

.nav-list {

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 32px;
    align-items: center;
    padding: 0;
    max-height: 75lvh;
}

.nav-link {

    font-size: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
    border-radius: 0;

    transition: color 0.24s ease-in-out, font-weight 0.24s ease-in-out, padding 0.24s ease-in-out, border-radius 0.24s ease-in-out;
}

.nav-link:hover,
.nav-link:focus,
.nav-link:active {

    color: var(--col-sec1);
    font-weight: 500;
}

.nav-list[nav-state=home] .home-link,
.nav-list[nav-state=impact] .impact-link,
.nav-list[nav-state=little_g] .little-giants-link,
.nav-list[nav-state=msa_factory] .msa-factory-link,
.nav-list[nav-state=propulse] .propulse-link,
.nav-list[nav-state=gallery] .gallery-link,
.nav-list[nav-state=contact] .contact-link,
.nav-link[navigation-state=active] {

    padding: 4px 6px;
    border-radius: 4px;
    background-color: var(--col-pri);
    color: var(--col-theme);
    font-weight: 700;
    font-size: 14px;
}

#mobile-focus-bg {

    display: none;
}

#msa-logo {

    display: block;
    width: max-content;
    height: 60px;
}

#msa-logo > img {

    height: 100%;
}
/* was 900px before */
@media screen and (max-width: 1100px){

    #nav-main {

        position: relative;
        z-index: 22;

        transition: z-index 0.24s ease-in-out;
    }

    #nav-toggle-btn {

        display: flex;
        flex-direction: row;
        align-items: center;
        width: max-content;
    }

    #nav-toggle-btn::before {

        content: "Menu";
        font-weight: 400;
        font-size: 14px;
        margin-right: 8px;
    }

    #nav-toggle-btn > img {

        width: 24px;
        height: 24px;
        object-fit: contain;

        transition: opacity 0.24s ease-in-out;
    }

    #nav-btn-open {

        opacity: 1;
    }

    #nav-btn-close {

        margin-left: -24px;
        opacity: 0;
    }

    .nav-list {

        position: absolute;
        top: 0;
        right: 0;
        margin-top: 54px;
        padding-top: 35px;
        flex-direction: column;
        width: 77.2lvw;
        align-items: end;
        translate: calc(100% + var(--site-padding) + 10px) 0;
        padding-bottom: var(--site-padding);
        overflow-y: auto;

        transition: translate 0.24s ease-in-out;
    }

    .nav-list-item {

        width: auto;
    }

    .nav-link {

        width: auto;
        text-align: end;
    }

    .more-nav > p {

        display: none;
    }

    .more-nav > .more-nav-items {

        position: relative;
        top: 0;
        border: none;
        visibility: visible;
        opacity: 1;
        translate: 0 0;
        box-shadow: none;
        margin-top: 0;
        padding: 0;
        gap: 35px;
    }

    #mobile-focus-bg {

        display: block;
        position: fixed;
        top: 60px;
        right: 0;
        width: 100%;
        height: 100lvh;
        background-color: rgba(0, 0, 0, .24);
        /* border-top: 2px var(--col-pri3) solid; */
        visibility: hidden;

        transition: visibility 0.24s ease-in-out;
    }

    #nav-list-bg {

        display: block;
        position: fixed;
        top: 62px;
        right: 0;
        width: 77.2%;
        height: 100lvh;
        background-color: var(--col-theme);
        /* border-top: 2px black solid; */
        translate: 100% 0;

        transition: translate 0.24s ease-in-out;
    }

    #nav-list-bg::before {

        content: "Momentum";
        font-size: 48px;
        position: absolute;
        top: calc(var(--site-padding)*-5);
        left: calc(var(--site-padding)*0);
        transform: rotate(90deg);
        transform-origin: left bottom;
        font-family: "Noto Sans JP";
        font-size: 98px;
        /* opacity: 0.01; */
        opacity: 0;
    }

    #nav-list-bg::after {

        content: "";
        font-size: 48px;
        position: absolute;
        bottom: calc(var(--site-padding)*4 + 62px);
        right: var(--site-padding);
        height: 66px;
        width: 179px;
        background: url(/assets/momentum_mobile_nav_bg.9c4043c1a3af0564b506.png) no-repeat;
        background-size: contain;
    }

    /* CLOSE GYMNASTICS */
    #defocus {

        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        translate: 0 -50%;
        z-index: 21;
    }

    #defocus::before {

        content: "MSAMenu";
        color: red;
        opacity: 0;
    }

    /* Brings defocus to the fore */
    #nav-main:focus,
    #nav-main:focus-within {

        z-index: 20;
    }

    #nav-main:focus #nav-toggle-btn::before,
    #nav-main:focus-within #nav-toggle-btn::before {

        content: "Close";
    }

    #nav-main:focus #nav-btn-open,
    #nav-main:focus-within #nav-btn-open {

        opacity: 0;
    }

    #nav-main:focus #nav-btn-close,
    #nav-main:focus-within #nav-btn-close {

        opacity: 1;
    }

    #nav-main:focus #nav-list-bg,
    #nav-main:focus-within #nav-list-bg,
    #nav-main:focus #nav-list,
    #nav-main:focus-within #nav-list {

        translate: 0 0;
    }

    #nav-main:focus + #mobile-focus-bg,
    #nav-main:focus-within + #mobile-focus-bg {

        visibility: visible;
    }
        
    #msa-logo {

        height: 40px;
    }
}

@media screen and (max-width: 600px) {

    #nav-list-bg {

        width: 87.2%;
    }
}
#footer {

    padding: var(--site-padding);
    background-color: var(--col-theme);
    border-top: 2px black solid;
    border-bottom: 2px black solid;
    margin-top: 135px;
}

#footer > div:not(:first-of-type) {

    margin-top: 48px;
}

#footer > div {

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: flex-start;
}

#locat-info > p:first-of-type {

    font-family: "Noto Sans HK";
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 24px;
}

#locat-info > p:last-of-type {

    display: flex;
    flex-direction: column;
    gap: 8px;
}

#nav-socials {

    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: flex-end;
}

#socials-list {

    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

#socials-list > a {

    display: inline-block;
    width: 24px;
    height: 24px;
    background: var(--socialBg) no-repeat;
    background-size: contain;
}

#socials-list > a[data-type=whatsapp] {

    --socialBg: url(/assets/icon_whatsapp_footer.891cfa67ed99ff2b8a1d.svg);
}

#socials-list > a[data-type=linkedin] {

    --socialBg: url(/assets/icon_linkedin_footer.624ca7eca3c92441bd51.svg);
}

#socials-list > a[data-type=x] {

    --socialBg: url(/assets/icon_socials_x_footer.ca1a5ff75d22a85bd51c.svg);
}

#socials-list > a[data-type=facebook] {

    --socialBg: url(/assets/icon_facebook_footer.ce355cd3c17948621121.svg);
}

#socials-list > a[data-type=instagram] {

    --socialBg: url(/assets/icon_instagram_footer.81ecd15ec07ce9844fc7.svg);
}

#socials-list > a[data-type=mail] {

    --socialBg: url(/assets/icon_mail_footer.f8c7579ab9f932c25b9d.svg);
}

#privacy-ts {

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

#privacy-ts > a {

    transition: font-weight 0.24s ease-in-out;
}

#privacy-ts > a:hover,
#privacy-ts > a:focus,
#privacy-ts > a:active {

    font-weight: 400;
}
/* was 900px before */
@media screen and (max-width: 1100px){

    #footer > div {

        flex-direction: column;
        justify-content: flex-start;
        gap: 48px;
    }

    #footer > div:not(:first-of-type) {

        margin-top: 64px;
    }

    #nav-socials {

        align-items: flex-start;
        gap: 64px;
    }

    #footer .nav-list {

        position: relative;
        margin-top: 0;
        padding-top: 0;
        width: auto;
        translate: unset;
        padding-bottom: 0;
        align-items: flex-start;
    }

    #footer .nav-list::before {

        content: "- Navigation";
        font-size: 14px;
        font-weight: 800;
        margin-bottom: -8px;
    }

    #footer > div:last-of-type {

        flex-direction: column-reverse;
        gap: 24px;
    }

    #privacy-ts {
        
        flex-direction: column;
        align-items: flex-start;
    }

    #locat-info > p:first-of-type {

        font-size: 16px;
    }

    #footer #socials-list {

        justify-content: flex-end;
    }

    #footer #socials-list::before {

        content: "Socials";
        width: 100%;
        font-size: 14px;
        font-weight: 800;
    }
}

/* PHONE PORTRAIT */
@media screen and (max-width: 600px) {
    
    #footer {

        padding: calc(var(--site-padding)*2) var(--site-padding);
    }
}
/*Ultrawide*/
@media screen and (min-width:3400px) and (min-height: 700px) {

    body {

        padding: 0 12%;
    }
}

/*Mobile*/
@media screen and (max-width: 600px){

    html {

        --site-padding: 20px;
    }

    h1 {

        font-size: 28px;
    }

    h2 {

        font-size: 26px;
    }

    h3 {

        font-size: 18px;
    }
}
.sections-wrapper > .section:not(:first-of-type) {

    margin-top: 115px;
}

.section {

    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}

.section[data-span-all] {

    grid-template-columns: 1fr;
    width: auto;
}

.section > .padded[data-dir=left] {

    margin-left: var(--site-padding);
}

.section > .padded[data-dir=right] {

    margin-right: var(--site-padding);
}

.hero-section {

    margin-top: 112px;
}


.mini-hero-section > h2,
.hero-section > h1 {

    display: flex;
    gap: 4px;
    flex-direction: column-reverse;
}


.mini-hero-section > h2[data-dir=normal],
.hero-section > h1[data-dir=normal] {

    flex-direction: column;
}

.mini-hero-section > h2::after,
.hero-section > h1::after {

    content: attr(data-byline);
    font-size: 20px;
    font-family: "Noto Sans JP";
    border-bottom: 2px solid transparent;
    /* border-image: linear-gradient(
        to right,
        #F18F01, 
        transparent,
        transparent,
        transparent) 1; */
    border-image: linear-gradient( 
        to right, 
        #F18F01, 
        transparent, 
        transparent, 
        transparent, 
        transparent, 
        transparent, 
        transparent, 
        transparent, 
        transparent, 
        transparent) 1;
    padding-bottom: 4px;
    color: var(--col-sec1);
}

.mini-hero-section > h2::after {

    width: 210px;
    padding-bottom: unset;
    border-image: linear-gradient(
        to right,
        #F18F01, 
        transparent,
        transparent,
        transparent) 1;
}

.content > p:not(:first-of-type) {

    margin-top: 12px;
}

.hero-section > .content {

    margin-top: 48px;
}

.hero-section > .cta {

    margin-top: 32px;
}

.hero-img-wrapper > img {

    width: 100%;
    position: sticky;
    top: 82px;
}

.hero-img-wrapper[data-skew] > img {

    width: 93.75%;
}

.mini-hero-section > .content {

    margin-top: 24px;
}

.mini-hero-section > .content > ul {

    margin-top: 12px;
}

.mini-hero-section > .content > ul > li {

    list-style-type: disc;
}

.mini-hero-section > .content > ul > li:not(:first-of-type) { 

    margin-top: 6px;
}

.mini-hero-section > .content > ul > li > span {

    margin-right: 6px;
}

#programs-list {

    margin-top: 48px;
}

.program > h3 {

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

.program > h3 > span:first-of-type {

    width: 32px;
    height: 20px;
    background: url(/assets/list_mascot.ea97dec7bf2a813b2e6f.svg) no-repeat;
    background-size: contain;
    margin-top: 8px;
    flex-shrink: 0;
}

.program > h3 > span:last-of-type {

    display: flex;
    flex-direction: column;
    gap: 6px;
}

.program > h3 > span:last-of-type::after {

    content: "";
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(
        to right,
        #ED2345, 
        transparent,
        transparent,
        transparent) 1;
    width: 140px;
}

.program > .content {

    margin-top: 16px;
}

.cta-wrapper {

    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    margin-top: 24px;
}

#little-giants {

    background-color: var(--col-sec2);
}

#msa-factory {

    background-color: var(--col-sec1);
}

#programs-list > .program:not(:first-of-type) {

    margin-top: 56px;
}

#success-stories,
#partners,
#contact-us {

    grid-template-columns: 1fr;
}

#success-stories > .hero-img-wrapper {

    position: absolute;
    width: 50%;
    top: 0;
    right: 0;
    z-index: -1;
}

#success-stories > .mini-hero-section > .content,
#contact-us > .mini-hero-section > .content {

    width: 50%;
}

#stories-carousel {

    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 360px));
    gap: 32px;
}

.story {

    display: block;
    width: auto;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, .72);
    box-shadow: 0 0 24px rgba(0, 0, 0, .24);
    overflow: hidden;

    transition: box-shadow 0.24s ease-in-out;
}

.story:hover,
.story:active,
.story:focus,
.story:focus-within {

    box-shadow: 0 0 24px rgba(237, 35, 69, .34);
}

.success-hero-img-wrapper {

    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
}

.success-hero-img-wrapper > img {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.story-content {

    padding: 24px 16px;
}

.story-content > p:first-of-type {

    font-weight: 900;
}

.story-content > p:not(:first-of-type) {

    margin-top: 16px;
}

#success-stories-cta {

    margin-top: 56px;
    background-color: var(--col-sec1);
}

#partners,
#contact-us {

    margin-top: 88px;
}

#partners-list {

    margin-top: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
}

#partners-list > a {

    display: block;
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    flex-grow: 0;
    z-index: auto;
    transform: scale(1);

    transition: z-index 0.24s ease-in-out, transform 0.24s ease-in-out;
}

#partners-list > a::after {

    content: attr(data-name);
    position: absolute;
    display: inline-block;
    bottom: 0;
    left: 50%;
    font-size: 14px;
    width: max-content;
    max-width: 180px;
    text-align: center;
    padding-bottom: 6px;
    background-color: rgba(255, 255, 255, .72);
    border-radius: 4px;
    font-weight: 300;
    translate: -50% calc(100% + 16px);
    opacity: 0;
    border-bottom: 2px var(--col-sec1) solid;
    z-index: 10;
    border-image: linear-gradient(
        to right,
        transparent,
        transparent,
        var(--col-pri), 
        transparent,
        transparent) 1;

    transition: translate 0.24s ease-in-out, opacity 0.24s ease-in-out;
}

#partners-list > a:hover::after,
#partners-list > a:focus::after,
#partners-list > a:active::after {

    translate: -50% calc(100% + 8px);
    opacity: 1;
}

#partners-list > a > img {

    position: absolute;
    top: 0;
    left: 0;
    border-radius: 800px;
    height: 100%;
    width: 100%;
    background-color: #f3f3f3;
    border: 4px var(--col-theme) solid;
    object-fit: contain;
}

#contact-us-cta {

    margin-top: 40px;
}

#msa-on-the-go {

    display: block;
}

#msa-on-the-go div:first-of-type > h2::after {

    display: none;
}

#msa-on-the-go-list {

    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 64px;
}

#msa-on-the-go-list > a {
 
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
}

#msa-on-the-go-list img {

    width: 124px;
    height: 124px;
    border-radius: 16px;
}

#msa-on-the-go-list div > p:nth-of-type(2) {

    margin-top: 12px;
}
/*4k screens*/
@media screen and (min-width:3800px) {

    .hero-section {

        margin-top: 212px;
    }
}

/*Ultrawide*/
@media screen and (min-width:3400px) and (min-height: 700px) {

    .hero-section {

        margin-top: 312px;
    }
}

/* TAB LANDSCAPE - SPECIAL CASE */
@media screen and (max-width:1100px){

    #stories-carousel {

        grid-template-columns: repeat(auto-fill, minmax(300px, 300px));
        gap: 16px;
    }
    
    .hero-img-wrapper > img {

        top: 48px;
    }
}

/* TAB LANDSCAPE - Default */
@media screen and (max-width:900px){

    .section {

        grid-template-columns: 1fr;
    }

    .section > .padded {

        margin-left: var(--site-padding);
        margin-right: var(--site-padding);
    }

    .section > .hero-section > h1 {

        width: 67%;
    }

    .section > .hero-img-wrapper,
    #success-stories > .hero-img-wrapper {

        position: absolute;
        right: 0;
        width: 120%;
        translate: 60%;
        height: 67%;
        border-bottom-left-radius: 8000px;
        border-left: 4px var(--col-sec1) solid;
        z-index: -1;
        overflow: hidden;
    }

    .hero-img-wrapper > img {

        width: 100%;
        height: 100%;
        top: 0;
        object-position: top left;
    }

    .mini-hero-section > h2::after,
    .hero-section > h1::after {

        font-size: 18px;
    }

    .section:nth-child(even) > .hero-img-wrapper {

        right: unset;
        left: 0;
    }
    
    .section:nth-child(even) > .hero-img-wrapper > img {
        
        width: 100%;
        transform: rotateY(180deg);
    }

    #section-programs > .hero-img-wrapper {

        height: 20%;
        /* height: 300px; */
    }

    .hero-img-wrapper {

        /* height: 20%; */
        /* height: 300px !important; */
    }

    #section-programs > .mini-hero-section > .content {

        width: 78%;
    }

    #section-programs > .mini-hero-section > #programs-list .cta-wrapper {

        flex-direction: row;
    }

    #stories-carousel {

        grid-template-columns: repeat(auto-fill, minmax(200px, 200px));
        gap: 16px;
    }

    #contact-us > .mini-hero-section > .content {

        width: 100%;
    }
}

/* Mobile Portrait */
@media screen and (max-width:600px){ 

    .section > .hero-img-wrapper,
    #success-stories > .hero-img-wrapper {

        position: absolute;
        right: 0;
        width: 120%;
        translate: 60%;
        height: 50%;
        border-bottom-left-radius: 8000px;
        border-left: 4px var(--col-sec1) solid;
        z-index: -1;
        overflow: hidden;
    }

    #section-programs > .mini-hero-section > .content {

        width: 80%;
    }

    #success-stories > .hero-img-wrapper {

        height: 20%;
        translate: 72%;
    }

    #success-stories > .hero-img-wrapper > img {

        translate: -25%;
    }

    #success-stories > .mini-hero-section > .content {

        width: 72%;
    }

    #stories-carousel {

        grid-template-columns: 1fr;
        gap: 32px;
    }

    #partners-list > a::after {

        max-width: 120px;
    }
}
#contact-options {

    margin-top: 80px;
}

#contact-options > div {

    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#contact-options > div > a {

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

#contact-options > div > a::before {

    content: "";
    width: 24px;
    height: 24px;
    background: var(--cLinkBg) no-repeat;
    background-size: contain;
}

#contact-options > div > a[data-for=mobile] {

    --cLinkBg: url(/assets/contact_phone.bd32f2ffdcca8eab19c7.svg);
}

#contact-options > div > a[data-for=email] {

    --cLinkBg: url(/assets/contact_mail.cb11f6b84c422a5dc33b.svg);
}

#contact-options > div > a[data-for=map] {

    --cLinkBg: url(/assets/contact_map.ba4e7c40ed936b882a6b.svg);
}

#contact-options > div > a[data-for=map] {

    align-items: flex-start;
}

#contact-options > div > a[data-for=map] > span {

    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* TAB LANDSCAPE - Default */
@media screen and (max-width:900px){

    #contact-main-section .hero-section > h1 {

        width: 60%;
    }

    #contact-main-section .hero-section > .content {

        width: 67%;
    }

    #contact-main-section .hero-img-wrapper > img {

        translate: -20%;
    }
}

/* Mobile Portrait */
@media screen and (max-width:600px){ 

    #contact-main-section .hero-section > .content {

        width: 80%;
    }
}
.privacy-terms-wrapper {
   
    counter-set: num 0;
}

.privacy-terms-wrapper > h1 {

    margin-top: 80px;
}

.privacy-terms-wrapper > div {

    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.privacy-terms-wrapper .content-wrapper {

    display: flex;
    flex-direction: column;
    gap: 16px;
}

.privacy-terms-wrapper .content-wrapper:not(:first-of-type) > h3 > span {

    counter-increment: num;
    margin-right: 8px;
}

.privacy-terms-wrapper .content-wrapper:not(:first-of-type) > h3 > span::before {

    content: counter(num);
}

.privacy-terms-wrapper .content-wrapper:not(:first-of-type) > h3 > span::after {

    content: ".";
}

.privacy-terms-wrapper .content-wrapper .content > ul {

    margin-top: 16px;
}

.privacy-terms-wrapper .content-wrapper .content > ul > li {

    list-style-type: disc;
}

.privacy-terms-wrapper .content-wrapper .content > ul > li > span {

    margin-right: 8px;
}

.privacy-terms-wrapper .content-wrapper .content > ul + p {

    margin-top: 16px;
}

.programs-cta {

    margin-top: 32px;
}

.layered-section > h2:not(:first-of-type) {

    margin-top: 64px;
}
/* TAB LANDSCAPE - Default */
@media screen and (max-width:900px){

    .programs-sections-wrapper .programs-main-hero-section .hero-img-wrapper > img {

        width: 30%;
        height: unset;
        translate: 25% 25%;
    }

    .little-g-hero {

        width: 164% !important;
        translate: 0 -36% !important;
        height: 172% !important;
    }

    .programs-sections-wrapper .programs-main-hero-section h1 {

        width: 54%;
    }

    .programs-sections-wrapper .section:not(:first-of-type) > .padded {

        margin-right: unset;
    }

    .programs-sections-wrapper .section:not(:first-of-type):not([data-span-all]) {

        grid-template-columns: 1fr 0.45fr;
    }

    .programs-sections-wrapper .section:not(:first-of-type) > .mini-hero-section {

        grid-column: 1/2;
        grid-row: 1/2;
    }

    .programs-sections-wrapper .section:not(:first-of-type) > .hero-img-wrapper {

        grid-column: 2/3;
        grid-row: 1/2;
        translate: 0;
        position: relative;
    }

    .programs-sections-wrapper .section-programs-pillars .hero-img-wrapper {

        height: 36%;
    }

    .programs-sections-wrapper .section:not(:first-of-type) .hero-img-wrapper > img {

        width: 140%;
        translate: 0;
    }

    .programs-sections-wrapper .section-programs-pillars .hero-img-wrapper > img {

        object-position: top right;
        width: 100%;
    }
}

/* PHONE PORTRAIT */
@media screen and (max-width: 600px) {
    
    .little-g-hero {

        translate: 0 -29% !important;
        height: 180% !important;
    }

    .programs-sections-wrapper .programs-main-hero-section h1 {

        width: 64%;
    }

    .programs-sections-wrapper .section-programs-overview .hero-img-wrapper,
    .programs-sections-wrapper .section-programs-pillars .hero-img-wrapper {

        width: 440%;
    }

    .programs-sections-wrapper .section:not(:first-of-type) .hero-img-wrapper > img {

        translate: -50% -25%;
    }

    .programs-sections-wrapper .section-programs-pillars .hero-img-wrapper > img {

        width: 120%;
        object-position: top left;
        translate: -76% -24%;
    }

    .programs-sections-wrapper .section-performance-framework .hero-img-wrapper,
    .programs-sections-wrapper .section-measuring-impact .hero-img-wrapper {

        width: 185%;
    }

    .programs-sections-wrapper .section-program-levels .hero-img-wrapper {

        height: 16%;
    }

    .programs-sections-wrapper .section-program-levels .hero-img-wrapper > img {

        translate: 0 0 !important;
    }
}
#msa-factory-privacy-cta {

    display: inline-block;
    margin-top: 12px;
}
/* TAB LANDSCAPE - Default */
@media screen and (max-width:900px){

    .programs-sections-wrapper[data-variant="msa_factory"] .programs-main-hero-section .hero-img-wrapper > img {

        width: 50%;
        translate: unset;
    }

    .programs-sections-wrapper[data-variant="msa_factory"] .section:nth-child(2n) > .hero-img-wrapper > img {

        transform: rotateY(0);
    }

    #hero-msa-factory-overview > img {

        translate: 0 !important;
    }

    .programs-sections-wrapper[data-variant="msa_factory"] .section-programs-overview > .hero-img-wrapper > img {

        translate: -38% !important;
    }

    .programs-sections-wrapper[data-variant="msa_factory"] .section-measuring-impact > .hero-img-wrapper > img {

        translate: 0 !important;
        width: 200% !important;
        height: unset;
    }

    .programs-sections-wrapper[data-variant="msa_factory"] .section-programs-pillars::after {

        content: "";
        width: auto;
        padding-bottom: 55.33%;
        background: url("https://ik.imagekit.io/eizd2ue5a/MSA%20Program%20Pillars.png") no-repeat;
        background-size: contain;
        margin: 48px var(--site-padding) 0 var(--site-padding);
        border-top: 2px transparent solid;
        border-image: linear-gradient(
                    to right,
                    #F18F01, 
                    transparent) 1;
        border-radius: 16px;
        grid-column: 1/3;
    }

    #section-msa-factory-pillars {

        grid-template-columns: 1fr;
    }

    #section-msa-factory-pillars > .mini-hero-section  {

        margin-right: var(--site-padding);
    }

    #section-msa-factory-pillars .hero-img-wrapper {

        display: none;
    }

    .programs-sections-wrapper[data-variant="msa_factory"] .section-program-levels > .hero-img-wrapper {
        
        height: 46%;
    }
}

/* PHONE PORTRAIT */
@media screen and (max-width: 600px) {

    .programs-sections-wrapper[data-variant="msa_factory"] .programs-main-hero-section .hero-img-wrapper > img {

        width: 80%;
    }

    .programs-sections-wrapper[data-variant="msa_factory"] .section-programs-overview > .hero-img-wrapper > img {

        height: 100% !important;
    }

    #hero-msa-factory-overview > img {

        translate: -38% !important;
        height: 80% !important;
    }

    .programs-sections-wrapper[data-variant="msa_factory"] .section-program-levels > .hero-img-wrapper {
        
        height: 12%;
    }

    .programs-sections-wrapper[data-variant="msa_factory"] .section-program-levels > .hero-img-wrapper > img {
        
        translate: -16% 0 !important;
        width: 180% !important;
    }

    .programs-sections-wrapper[data-variant="msa_factory"] .section-measuring-impact > .hero-img-wrapper {

        width: 240%;
    }

    .programs-sections-wrapper[data-variant="msa_factory"] .section-measuring-impact > .hero-img-wrapper > img {

        width: 180% !important;
    }
}

/* TAB LANDSCAPE - Default */
@media screen and (max-width:900px){

    .programs-sections-wrapper[data-variant="msa_factory"][data-variant-2=propulse] .section-programs-overview .hero-img-wrapper {

        height: 40%;
    }

    .programs-sections-wrapper[data-variant="msa_factory"][data-variant-2=propulse] .section-programs-pillars::after {

        display: none;
    }
}

/* PHONE PORTRAIT */
@media screen and (max-width: 600px) {

    .programs-sections-wrapper[data-variant="msa_factory"][data-variant-2=propulse] .programs-main-hero-section .hero-img-wrapper > img {

        width: 100%;
    }

    .programs-sections-wrapper[data-variant="msa_factory"][data-variant-2=propulse] .section-programs-pillars .hero-img-wrapper > img,
    .programs-sections-wrapper[data-variant="msa_factory"][data-variant-2=propulse] .section-programs-overview .hero-img-wrapper > img {

        translate: -40% !important;
        width: unset;
        height: 80% !important;
        transform: rotateY(180deg);
    }

    .programs-sections-wrapper[data-variant="msa_factory"][data-variant-2=propulse] .section-programs-pillars .hero-img-wrapper > img {

        transform: rotateY(0);
    }

    .programs-sections-wrapper[data-variant="msa_factory"][data-variant-2=propulse] .section-program-levels > .hero-img-wrapper {

        width: 380%;
    }
}
.section-programs-overview .content {

    counter-reset: imp_cont 0;
}

.impact-content-wrapper {

    margin-top: 40px;
    counter-increment: imp_cont;
}

.impact-content-wrapper > p:first-of-type {

    display: flex;
    flex-direction: row;
    align-items: center;
}

.impact-content-wrapper > p:first-of-type::before {

    content: counter(imp_cont);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--icwLBG);
    border-radius: 8px;
    padding-bottom: 5px;
    font-size: 24px;
    width: 40px;
    height: 40px;
    color: var(--col-theme);
    margin-right: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.impact-content-wrapper .impact-list {

    counter-set: impact_num 0;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.impact-content-wrapper .impact-list > div {

    counter-increment: impact_num;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}

.impact-content-wrapper .impact-list > div::before {

    content: counter(impact_num);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--col-theme);
    border-radius: 800px;
    background-color: var(--icwLBG);
    font-weight: 700;
    padding-bottom: 2px;
    flex-shrink: 0;
    flex-grow: 0;
    display: none;
}

.impact-content-wrapper .impact-list > div > img {

    width: 100px;
    height: 100px;
    border-radius: 8px;
    flex-shrink: 0;
    flex-grow: 0;
}

.impact-content-wrapper .impact-list > div > .content {

    padding-left: 16px;
    border-left: 1px rgba(0, 0, 0, .64) solid;
}

.section-programs-overview .impact-content-wrapper:first-of-type {

    --icwBg: url(/assets/arrow_little_g.17e5d4b48a4633168e85.svg);
    --icwLBG: var(--col-sec2)
}

.section-programs-overview .impact-content-wrapper:nth-of-type(2) {

    --icwLBG: var(--col-sec1)
}

#events-expertise-list {

    list-style-type: none;
    padding-left: 0;
    margin-top: 24px;
}

#events-expertise-list > li {

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

#events-expertise-list > li::before {

    content: "";
    width: 24px;
    height: 24px;
    background: url(/assets/event_list_marker.ec245728f0d8692a000c.svg) no-repeat;
    background-size: contain;
}

#events-expertise-list > li:not(:first-of-type) {

    margin-top: 16px;
}

#events-expertise-list + p {

    margin-top: 24px;
}

#events-expertise-list ~ .impact-content-wrapper {

    --icwLBG: var(--col-sec1)
}

#success-stories-list {

    margin-top: 64px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

#success-stories-list > div,
#success-stories-list > div > .text-video {

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
}

#success-stories-list > div > .title-image {

    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
    flex-grow: 0;
    position: sticky;
    top: 88px;
}

#success-stories-list > div > .title-image > p {

    font-size: 20px;
}

#success-stories-list > div > .title-image > .title-image-wrapper {

    position: relative;
    padding-bottom: 56.25%;
    border-radius: 16px;
    overflow: hidden;
}

#success-stories-list > div > .title-image > .title-image-wrapper > img {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#success-stories-list > div > .text-video {

    gap: 32px;
}

#success-stories-list > div > .text-video > .content {

    padding: 16px;
    border-radius: 16px;
    background-color: var(--col-theme);
    box-shadow: 0 0 24px rgba(0, 0, 0, .24);
}

#success-stories-list > div > .text-video > .content > .content[data-quote] {

    margin-top: 16px;
}

#success-stories-list > div > .text-video > .content > .content[data-quote]::before,
#success-stories-list > div > .text-video > .content > .content[data-quote]::after {

    content: "“";
    font-size: 40px;
    font-weight: 700;
    display: inline-block;
}

#success-stories-list > div > .text-video > .content > .content[data-quote]::after {

    content: "”";
    width: 100%;
    text-align: end;
}

.video-wrapper,
#success-stories-list > div > .text-video > .video-wrapper {

    flex-shrink: 0;
    flex-grow: 0;
    width: 440px;
    position: sticky;
    top: 88px;
}

.video-wrapper > div,
#success-stories-list > div > .text-video > .video-wrapper > div {

    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: 16px;
    overflow: hidden;
}

.video-wrapper > div > *,
#success-stories-list > div > .text-video > .video-wrapper > div > * {

    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#sports-marketing > .mini-hero-section > h2::after {

    width: max-content;
    font-size: 16px;
}
/* TAB LANDSCAPE *SPECIAL CASE */
@media screen and (max-width: 1100px) {

    #success-stories-list > div, #success-stories-list > div > .text-video {

        flex-direction: column;
    }

    #success-stories-list > div > .title-image {

        position: relative;
        top: 0;
    }
}

/* TAB PORTRAIT - DEFAULT */
@media screen and (max-width: 900px) {
    
    .programs-sections-wrapper[data-variant-3="impact"] .programs-main-hero-section > .hero-img-wrapper {

        overflow: unset;
    }

    .programs-sections-wrapper[data-variant-3="impact"] .section-programs-overview > .hero-img-wrapper,
    .programs-sections-wrapper[data-variant-3="impact"] .section-program-levels > .hero-img-wrapper {

        width: 400%;
    }

    #sports-marketing {

        grid-template-columns: 1fr !important;
    }

    #sports-marketing > .mini-hero-section {

        margin-right: var(--site-padding);
    }

    .programs-sections-wrapper[data-variant-3="impact"] .section-programs-pillars::after {

        background: url(/assets/impact_hero_3_full_v3.4da83c286971a38e5a5f.jpg) no-repeat;
        padding-bottom: 133.3%;
        border-image: unset;
        border-top: unset;
        background-size: contain;
        border-radius: 0;
        margin-bottom: -67px;
    }

    #sports-marketing .hero-img-wrapper {

        display: none;
    }
}

/* Mobile Portrait */
@media screen and (max-width: 600px) {
    
    .programs-sections-wrapper[data-variant-3="impact"] .section-programs-overview,
    .programs-sections-wrapper[data-variant-3="impact"] .section-program-levels {

        grid-template-columns: 1fr !important;
    }

    .programs-sections-wrapper[data-variant-3="impact"] .section-programs-overview > .mini-hero-section,
    .programs-sections-wrapper[data-variant-3="impact"] .section-program-levels > .mini-hero-section {

        margin-right: var(--site-padding);
    }

    .programs-sections-wrapper[data-variant-3="impact"] .section-programs-overview > .mini-hero-section > h2,
    .programs-sections-wrapper[data-variant-3="impact"] .section-program-levels > .mini-hero-section > h2 {

        width: 60%;
    }

    .programs-sections-wrapper[data-variant-3="impact"] .section-programs-overview > .mini-hero-section > .content,
    .programs-sections-wrapper[data-variant-3="impact"] .section-program-levels > .mini-hero-section > .content {

        margin-top: 40px;
    }

    .programs-sections-wrapper[data-variant-3="impact"] .section-programs-overview > .hero-img-wrapper,
    .programs-sections-wrapper[data-variant-3="impact"] .section-program-levels > .hero-img-wrapper {

        width: 40%;
        height: 4%;
        position: absolute;
        top: 0;
        right: 0;
        left: unset;
        grid-column: unset;
    }

    .programs-sections-wrapper[data-variant-3="impact"] .section-programs-overview > .hero-img-wrapper > img,
    .programs-sections-wrapper[data-variant-3="impact"] .section-program-levels > .hero-img-wrapper > img {

        width: 100%;
        translate: 0 !important;
    }

    .impact-content-wrapper .impact-list > div {

        flex-direction: column;
    }

    #success-stories-list > div > .title-image {

        width: 100%;
    }

    .video-wrapper,
    #success-stories-list > div > .text-video > .video-wrapper {

        width: 100%;
        display: none;
    }

    .video-wrapper,
    #success-stories-list > div > .text-video > .video-wrapper[has-video=true] {

        display: block;
    }

    #success-stories-list > div > .title-image {

        position: relative;
        top: 0;
    }
}
.gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper {

    margin-top: 40px;
    margin-right: var(--site-padding);
}

.gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper > #film-wrapper {

    position: relative;
    padding-bottom: 100%;
}

.gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper > #film-wrapper > #wrapper {

    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: grid;
    /* --minW: 172px; */
    --minW: 23%;
    --maxW: 335px;
    --minH: 23%;
    grid-template-columns: repeat(auto-fill, minmax(var(--minW), max-content));
    grid-template-rows: var(--minH) var(--minH) var(--minH) var(--minH);
    gap: 20px;
}

.gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper > #film-wrapper > #wrapper > div {

    position: relative;
}

.gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper > #film-wrapper > #wrapper > div::before {

    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.7);
}

.gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper > #film-wrapper > #wrapper > div:nth-of-type(2) {

    grid-column: 2/4;
    grid-row: 1/3;
}

.gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper > #film-wrapper > #wrapper > div:nth-of-type(2)::after,
.gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper > #film-wrapper > #wrapper > div:nth-of-type(7)::after {
    
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 120px;
    height: 120px;
    background: var(--fWBG) no-repeat;
    background-size: contain;
    z-index: 2;
}

.gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper > #film-wrapper > #wrapper > div:nth-of-type(2) {

    --fWBG: url(/assets/icon_camera_gallery.6a48a81b043349c44d87.svg)
}

.gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper > #film-wrapper > #wrapper > div:nth-of-type(7) {

    --fWBG: url(/assets/icon_video_gallery.d6d6e698b1ab05985468.svg);
}

.gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper > #film-wrapper > #wrapper > div:nth-of-type(3) {

    grid-column: 4/5;
    grid-row: 1/2;
}

.gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper > #film-wrapper > #wrapper > div:nth-of-type(7) {

    grid-column: 2/4;
    grid-row: 3/5;
}

.gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper > #film-wrapper > #wrapper > div > img {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#galleries-list {

    display: flex;
    flex-direction: column;
    gap: 56px;
}

#galleries-list > div > h3 {

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

#galleries-list > div > h3::before {

    content: "";
    width: 56px;
    height: 56px;
    background: url(/assets/icon_aperture.8fc77abfbd34d93e48b7.svg) no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

.main-gallery-wrapper {

    margin-top: 24px;
    margin-left: 68px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    /* flex-wrap: wrap; */
}

.main-gallery-wrapper > .content {

    padding: 24px;
    background-color: var(--col-theme);
    border-radius: 16px;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.24);
    /* width: 100%; */
}

.carousel {

    width: 400px;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
}

.carousel > .images-slider {

    width: 100%;
}

.carousel > .images-slider > .images,
.carousel > .controls > .images {

    width: 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    position: relative;
    scrollbar-width: none;
}

.carousel > .controls > .images {

    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.carousel > .images-slider > .images > div {

    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100%;
    margin-left: 24px;
    scroll-margin-top: 90px;
}

.carousel > .images-slider > .images > div > div {
    
    width: 100%;
    position: relative;
}

.carousel > .images-slider > .images > div > div:first-of-type {
    
    padding-top: 100%;
}

.carousel > .images-slider > .images > div > div > img {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.carousel > .controls {

    padding: 12px;
    background-color: var(--col-sec2);
    margin-top: 2px;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}

.carousel > .images-slider > .images > div > .carousel-snapper,
.carousel > .controls > .images > .carousel-snapper {

    width: 100%;
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    /* background-color: black; */
    opacity: 0;
    margin-top: 2px;
}

.carousel > .images-slider > .images > div > .carousel-snapper > a,
.carousel > .controls > .images > .carousel-snapper > a {

    display: inline-block;
    width: 36px;
    height: 36px;
    background-color: white;
}

.carousel > .controls > div {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.carousel > .controls > div > span {

    color: var(--col-theme);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}

.carousel > .controls > div > span:nth-of-type(2) {

    width: 36px;
    height: 36px;
    background: url(/assets/icon_camera_control.a76dd18f2612c570bae7.svg) no-repeat;
    background-size: contain;
}

.vid-targets-wrapper {

    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    width: 440px;
    height: auto;
    max-height: 100%;
    flex-shrink: 0;
    flex-grow: 0;
    /* align-self: stretch; */
}

.carousel-wrapper > .vid-targets-wrapper .video-wrapper > div {

    display: none;
}

.carousel-wrapper > .vid-targets-wrapper {

    margin-top: 24px;
}

.vid-targets-wrapper > .direct-targets {

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 120px;
    overflow-y: auto;
}

.vid-targets-wrapper > .direct-targets::before {

    content: attr(data-num);
    width: 24px;
    height: 24px;
    background: url(/assets/icon_camera_full.16e7e5d13b33649ff9e5.svg) no-repeat;
    background-size: contain;
    width: 100%;
    padding-left: 32px;
    font-size: 14px;
    background-position: left -2px;
}

.vid-targets-wrapper > .direct-targets > a {

    display: inline-block;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.vid-targets-wrapper > .direct-targets > a > img {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.vid-targets-wrapper > .video-wrapper {

    position: relative;
    top: 0;
    width: 100%;
}
/* TAB LANDSCAPE *Special Case */
@media screen and (max-width: 1100px) {

    .main-gallery-wrapper {

        flex-direction: column;
        margin-left: 0;
    }

    .vid-targets-wrapper {

        flex-direction: column;
        gap: 32px;
    }
}

/* TAB PORTRAIT */
@media screen and (max-width: 900px) {
    
    .gallery-sections-wrapper > .programs-main-hero-section {

        grid-template-columns: 1fr 0.32fr;
    }

    .gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper {

        width: 40%;
        border-left: unset;
        border-radius: 0;
        translate: unset;
        height: auto;
    }

    .gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper > #film-wrapper > #wrapper {

        gap: 12px;
    }

    .gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper > #film-wrapper > #wrapper > div:nth-of-type(2)::after,
    .gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper > #film-wrapper > #wrapper > div:nth-of-type(7)::after {

        width: 40px;
        height: 40px;
    }

    .carousel-wrapper {

        width: 100%;
    }

    .carousel,
    .vid-targets-wrapper {

        width: 100%;
    }

    .carousel > .images-slider > .images > div {

        scroll-margin-top: 112px;
    }
}

/* Phone Portrait */
@media screen and (max-width: 600px) {
    
    .gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper {

        width: 48%;
        margin-top: 56px;
    }

    .gallery-sections-wrapper > .programs-main-hero-section > .hero-img-wrapper > #film-wrapper > #wrapper {

        gap: 5px;
    }
}