@charset "UTF-8";

/*
Name: Motion Design for Digital Products
Author: Andre Navarre
Author URI: https://andrenavarre.com
Description: Portfolio website - responsive rules
Version: 1.0.0.6
*/


/* iMac or large screens */
@media only screen and (min-width: 1760px) {}


/* Is larger than Macbook Pro 15 screen */
@media only screen and (min-width: 1729px),
only screen and (min-height: 1118px) {


}


/* Is a large screen */
@media only screen and (min-width: 1920px),
only screen and (min-height: 1040px) {}

/* Services page */
@media only screen and (max-width: 1650px) {

    :root {

        --portfolio-about-row-height_1: 40vw;

        --scrollBox_services: 27.3vw;
        --font-size-tags: 0.75vw;

        --font-size-clients-small: 1.15vw;
    }

    div#scroll_observer_Tags {
        -webkit-box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.008),
            0px 13.3px 5.3px rgba(0, 0, 0, 0.04),
            0px 25px 10px rgba(0, 0, 0, 0.05),
            0px 44.7px 17.9px rgba(0, 0, 0, 0.03),
            0px 83.6px 33.4px rgba(0, 0, 0, 0.02),
            0px 100px 80px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 5.5px 2.2px rgba(0, 0, 0, 0.008),
            0px 13.3px 5.3px rgba(0, 0, 0, 0.04),
            0px 25px 10px rgba(0, 0, 0, 0.05),
            0px 44.7px 17.9px rgba(0, 0, 0, 0.03),
            0px 83.6px 33.4px rgba(0, 0, 0, 0.02),
            0px 100px 80px rgba(0, 0, 0, 0.1);
    }

    .scroll-box.expanded .list_static li {
        padding-block: 0;
        height: 1.5vw;
        line-height: 1.5vw;
    }

    .container-services.solutions.side_left p {
        max-width: 370px;
    }

    .section_split {
        gap: 1em;
    }

    .clientlist-link.outline,
    .container-services.reward .buttons_dual .btn_cta a {
        padding-inline: 1em;
    }

    .buttons_dual {
        gap: 1em;
    }


    #footer-area_clientlist p {
        font-size: var(--font-size-clients-small);
        line-height: calc(var(--font-size-clients-small) * 1.3);
        -webkit-margin-after: unset;
        margin-block-end: unset;
        -webkit-margin-before: unset;
        margin-block-start: unset;
    }

    body.clientlist:not(.noScroll) #location-area .timezone.onPage,
    body.clients-open #location-area .timezone {
        font-size: 16px;
    }

}


/* Is small screen */
@media only screen and (max-width: 1366px) {

    :root {

        --width-logo-andre: 120px;

        --font-size-p: 16px;
        --line-height-p: 22px;

        --font-size-H1: 52px;
        --line-height-H1: 52px;
        --font-size-H2: 52px;
        --line-height-H2: 52px;
        --font-size-contact-form-h1: 52px;
        --line-height-contact-form-h1: 52px;


        --font-size-card-title: 16px;

        --font-size-subline: 16px;
        --line-height-subline: 22px;

        --font-size-list: 16px;

        --font-size-contact-btn-form: 22px;

        --font-size-footer: 16px;
        --line-height-footer: 22px;

        --portfolio-row-height: 29.3vw;
        --page-padding: 10%;

        --card-padding-inline: 4vw;

        --portfolio-about-row-height_1: 50vw;




    }


    body.light #menu_bar {
        display: block;
    }

    /*     body.home-portfolio-open #menu_bar, */
    body.light.noScroll #menu_bar,
    body.home-portfolio-open.menu-delay #menu_bar {
        display: none;
    }







    #hero-text-area {
        width: 300px;
    }

    .header-area.projects.page-about .col_left {
        width: 600px;
    }

    .header-area.projects.page-about .col_right {
        width: 450px;
    }


    .header-area.projects.page-portfolio .col_left {
        width: 500px;
    }

    .header-area.projects.page-portfolio .col_right {
        width: 600px;
    }

    .header-area.projects.page-services .col_right {
        width: 580px;
    }

    .header-area.projects.page-portfolio .col_right {
        width: 400px;
    }

    .header-area.projects.page-services .col_right {
        width: 450px;
    }

    .header-area.projects.page-about.cta .col_left {
        width: 455px;
    }

    .header-area.projects.page-about.cta .col_right {
        width: 527px;
    }


    /*     #projects_home .section-more button.clientlist-link.outline {
        margin-top: 2em;
        margin-bottom: 2em;
    } */

    .container-work .btn_cta {
        margin-top: 4%;
        margin-bottom: unset;
    }

    .container-services .btn_cta,
    #projects_home .section-more button.clientlist-link.outline {
        margin-top: 2em;
        margin-bottom: 1em;
    }


    .container-about.transparent.side_right {
        background: unset;
        padding-inline: unset;
        margin-bottom: unset;
    }

    .portfolio.about .row_2 {
        gap: 0;
    }


    #video_BANKIN {
        border-radius: 2.5vw 2.5vw 0 0;
    }

    /* Should be padding-top to conserve footer nav logic */
    /* .content {
            top: calc(var(--top) *7);
        }
    */

    #projects_home .section-more button.clientlist-link.outline {
        padding-inline: 2.5em;
    }

    .container-services.cta_full {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
    }

    .cta_full span {
        white-space: nowrap;
    }

    .container-services.cta_full .col_left,
    body.projects .container-services.cta_full .col_left {
        width: unset;
    }

    .container-services.cta_full .col_left h2,
    .container-services.cta_full .col_left p {
        width: unset;
        text-align: center;
    }



    #projects_home .container-services.cta_full .col_left p {
        /*         width: 80%; */
        margin: 1em auto;
    }

    .container-services.cta_full .col_left p {
        /*         width: 60%; */
        margin: 1em auto;
    }

    .container-services.cta_full .btn_cta {
        margin-block: 1em;
    }



    .container-services.dribbble .col_left {
        width: 27em;
    }

    span.dribbble_spec {
        font-size: 7px;
        height: 16px;
        letter-spacing: 1.7px;
    }

    :root {
        --scrollBox_services: 38vw;
        --font-size-tags: 0.9vw;
    }

    .section_split .col_left {
        width: 30%;
    }

    .scroll-box.expanded .list_static li {
        padding-block: 0;
        height: 1.8vw;
        line-height: 1.8vw;
    }



    .cover-background,
    body.light.clientlist .cover-background {
        left: calc(var(--left)*-2);
    }

    .header-area.clientlist .col_left {
        width: 788px;
    }

    .lottie_container_block {
        width: 75%;
        height: auto;
        margin: auto;
    }

    .client_athletic.project-logo {
        background-size: 25%;
    }

    .client_alma.project-logo {
        background-size: 14%;
    }

    .client_cossette.project-logo {
        background-size: 30%;
    }

    .client_weglot.project-logo {
        background-size: 17%;
    }



}




/* Clients page */
@media only screen and (max-width: 1160px) {



    :root {
        --hero_left: -60vw;

        --font-size-clients-small: 16px;
    }

    #HOME_hero_container {
        width: 250%;
    }

    .modal-dialog {
        width: 100%;
    }

    .modal-content {
        width: 100%;
        padding-inline: var(--page-padding);
    }


    body.light.clients-open #menu_bar_clients,
    body.home.clients-open #menu_bar_clients {
        display: block;
        visibility: visible;
    }

    body.clients-open .header-area.clientlist,
    body.clientlist .header-area.clientlist.activated {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        gap: 2em;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .header-area.clientlist .col_left {
        text-align: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        gap: 2em;
    }

    span.icn_bolt {
        height: calc(var(--font-size-H2) * 0.7);
    }

    .header-area.clientlist h2 {
        -webkit-margin-before: unset;
        margin-block-start: unset;
    }

    .scroll-text li {
        font-size: var(--font-size-clients-small);
    }

    .header-area.clientlist .col_left {
        width: 726px;
    }

    .header-area.clientlist .col_right {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: 112px;
    }

    /* Clients make scrollable */
    body.light.clientlist {
        overflow: scroll;
        height: 100%;
        width: 100%;
        position: absolute;
    }

    body.light.clientlist.noScroll {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    .clientlist_page {
        position: -webkit-sticky;
        position: sticky;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;

    }


    body.clients-open #clientlist_insert,
    body.clientlist #clientlist_insert_clientspage {
        position: relative;


    }

    body.clients-open #clientlist_container,
    body.clientlist #clientlist_container.activated {
        position: relative;
    }


    /* Clients page */

    .clients_row {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }

    .clients_col {
        width: 23%;
    }

    .cover-background,
    body.light.clientlist .cover-background {
        height: calc(50% + 8em);
        width: 100%;
        left: 0;
        border-radius: 2em;
    }

    body.clients-open .header-area.clientlist,
    body.clientlist .header-area.clientlist.activated {
        padding-top: calc(var(--top)*5);
    }

    .bottom-spacer {
        height: 12em;
        width: 100%;
        position: relative;
        /* background: red; */
        z-index: -1;
    }


    #footer-area_clientlist {
        width: calc(100% - 4em);
        background: #fff;
        z-index: 1;
        bottom: 0;
        padding: 2em;
        border-radius: 2em 2em 0 0;
        -webkit-box-shadow: 6px -8px 35px -26px rgba(66, 68, 90, 0.52);
        box-shadow: 6px -8px 35px -26px rgba(66, 68, 90, 0.52);
    }

    #footer-area_clientlist p {
        width: 78%;
        padding-inline: calc(var(--page-padding) / 4);
    }

    #footer-area_clientlist span {
        display: inline;
    }

    body.clientlist:not(.noScroll) #location-area p,
    body.clients-open #location-area p {
        font-size: 9px;
    }

    body.clientlist:not(.noScroll) #location-area .timezone.onPage,
    body.clients-open #location-area .timezone {
        font-size: 14px;
    }

    /* Clients overlay on home */
    body.menu-open.clients-open #clientlist_insert,
    body.menu-open.clientlist #clientlist_insert_clientspage {
        /*         position: relative;
            overflow: scroll; */
        pointer-events: all;
    }

    .clients-open.menu-open #menu-bg {
        overflow: scroll;
        /*         height: auto;
            position: sticky; */
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;

        pointer-events: all !important;
    }

    #menuToggle {
        cursor: default;
    }

    .modal-body .instructions {
        padding: unset;
    }

}

/* --------------------------------------------------------------- */

/* Blocks Full - LAYOUT SWITCH */
@media only screen and (max-width: 1023px) {

    /* Home */

    .container-work,
    #projects_home .portfolio.services,
    .portfolio.about .row_2 {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        gap: 0;
    }

    .portfolio.about .row_2 {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }


    .container-work .col_right,
    #projects_home .portfolio.services .solutions.col_left,
    #projects_home .portfolio.services .solutions.col_right,
    .container-about {
        width: unset;
    }

    #projects_home .portfolio.about .side_left {
        width: 100%;
        background: var(--brand-color-gray);
        margin-bottom: var(--card-padding-inline);
    }

    .container-services .btn_cta {
        margin-block: 4em;
        margin-bottom: 0;
    }

    .container-services.cta_full .col_left p {
        width: 100%;
    }


    .page_end {
        width: 100%;
        height: 20vw;
    }

    /* Portfolio */

    :root {
        --portfolio-row-height: 90vw;
        --portfolio-item-small: 100%;
        --portfolio-item-large: 100%;
        --portfolio-row-gap: 5%;
        --portfolio-logos-height: 10vw;

        --page-padding: calc(var(--left)*2);

        --font-size-clients-small: 16px;

        --padding-contact-btn-form: calc(var(--height-contact-btn-menu)/2) 1.25em calc(var(--height-contact-btn-menu)/2) 1.25em;
    }

    #icn_info-toggle {
        opacity: 1;
    }

    .row {
        all: unset;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        gap: calc(3vw + var(--portfolio-logos-spacing));
    }

    .container-small,
    .container-large {
        width: 100%;
    }

    .project-logo {
        top: calc(var(--portfolio-logos-height)*0.3);
    }

    .client_tag.project-logo {
        background-size: 50%;
    }

    .client_athletic.project-logo {
        background-size: 50%;
    }

    .client_alma.project-logo {
        background-size: 28%;
    }

    .client_bankin.project-logo {
        background-size: 35%;
    }

    .client_bettersleep.project-logo {
        top: calc(var(--portfolio-logos-height)*0.3);
        background-size: 55%;
        height: var(--portfolio-logos-height);
    }

    .client_alan.project-logo {
        background-size: 37%;
    }

    .client_malt.project-logo {
        background-size: 35%;
        top: calc(var(--portfolio-logos-height)*0.3);
    }

    .client_cossette.project-logo {
        background-size: 40%;
    }

    .client_sendwave.project-logo {
        height: var(--portfolio-logos-height);
        top: calc(var(--portfolio-logos-height)*0.3);
        background-size: 45%;
    }

    .client_weglot.project-logo {
        background-size: 30%;
    }

    .client_payfit.project-logo {
        height: var(--portfolio-logos-height);
        top: calc(var(--portfolio-logos-height)*0.3);
        background-size: 35%;
    }

    .client_ludia.project-logo {
        height: var(--portfolio-logos-height);
        top: calc(var(--portfolio-logos-height)*0.3);
        background-size: 17%;
        background-position: bottom left;
    }

    .client_orizon.project-logo {
        height: var(--portfolio-logos-height);
        top: calc(var(--portfolio-logos-height)*0.3);
        background-size: contain;
    }

    .client_hermes.project-logo {
        height: var(--portfolio-logos-height);
        top: calc(var(--portfolio-logos-height)*0.3);
        background-size: contain;
    }

    #video_ATHLETIC {
        width: 65%;
        left: 11%;
    }

    #video_BANKIN {
        border-radius: 8vw 8vw 0 0;
    }

    #lottie_ALAN {
        height: 160%;
        width: 160%;
        position: absolute;
        bottom: -35%;
    }

    g#desktop {
        -webkit-transform: matrix(0.4, 0, 0, 0.4, -83.3, 18);
        -ms-transform: matrix(0.4, 0, 0, 0.4, -83.3, 18);
        transform: matrix(0.4, 0, 0, 0.4, -83.3, 18);
    }

    g#mobile {
        -webkit-transform: matrix(0.19, 0, 0, 0.19, 320.58, 136.08);
        -ms-transform: matrix(0.19, 0, 0, 0.19, 320.58, 136.08);
        transform: matrix(0.19, 0, 0, 0.19, 320.58, 136.08);
        -webkit-filter: drop-shadow(-4em 1.25em 18.25em rgba(1, 1, 1, 0.1));
        filter: drop-shadow(-4em 1.25em 18.25em rgba(1, 1, 1, 0.1));
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    #video_WEGLOT {
        width: 125%;
    }

    #video_PAYFIT {
        width: 115%;
    }

    video#video_MALT {
        width: 115%;
    }



    #video_BETTERSLEEP,
    #video_COSSETTE,
    #video_SENDWAVE,
    #video_LUDIA,
    #video_ORIZON {
        width: 100%;
        height: auto;
    }

    #video_HERMES {
        display: none;
    }

    #video_HERMES_mobile {
        display: block;
    }

    .client_hermes .video_shadow {
        opacity: 1;
    }

    /* Services */

    :root {
        --scrollBox_services: 60vh;
        --font-size-tags: 12px;

        --portfolio-about-row-height_1: auto;
    }


    .portfolio.services {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
    }

    .container-services.collaboration h2 {
        line-height: calc(var(--line-height-H2) * 1.2);
    }

    .section_split .col_right {
        width: 100%;
        max-width: unset;
    }

    .container-about.side_left p {
        margin-bottom: 4em;
    }

    /*     .portfolio.about {
        margin-top: calc(var(--top)*2);
    } */

    .portfolio.about .row {
        gap: unset;
    }

    .container-about .scroll-box {
        height: 50vh;
    }

    .header-area.projects {
        margin-inline: var(--card-padding-inline);
    }

    .header-area.projects.page-about img {
        width: 100%;
    }

    #lottie_Devices {
        width: 350%;
        -webkit-transform: translateX(-35%);
        -ms-transform: translateX(-35%);
        transform: translateX(-35%);
    }

    body.about .container-about.side_left.transparent.justify_center {
        width: 100%;
        background: var(--brand-color-gray);
        margin-bottom: var(--card-padding-inline);
        padding-block: var(--card-padding-inline);
        margin: unset;
    }

    .lottie_container_block {
        width: 90%;
        height: auto;
        margin: auto;
    }

    .icn_block.smiley-halo.float_emojis {
        top: -1em;
        right: 1em;
        left: unset;
    }

    #footer-area_clientlist p {
        width: 84%;
        padding-inline: unset;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }

    .scroll-box.expanded .list_static li {
        padding-block: 0;
        height: 3.2vh;
        line-height: 3.2vh;
    }

    #lottie_Process {
        width: unset;
        height: auto;
    }

    .lottie_container_process {
        background: var(--brand-color-gray);
        border-radius: 1.5em;

    }


}


/* --------------------------------------------------------------- */



/* Is tablet */
@media only screen and (max-width: 834px) {

    :root {


        --hero_left: -65vw;



        --font-size-contact-btn-form: 18px;


        --font-size-H1: 40px;
        --line-height-H1: 48px;
        --font-size-H2: 40px;
        --line-height-H2: 40px;

        --iframe-peek-scale: 0.90;

    }

    /*     :root {

        --font-size-p: 16px;
        --line-height-p: 22px;



        --font-size-card-title: 16px;

        --font-size-subline: 16px;
        --line-height-subline: 22px;

        --font-size-list: 16px;


        --font-size-footer: 16px;
        --line-height-footer: 22px;

        --portfolio-row-height: 30vw;
        --page-padding: 10%;

        --card-padding-inline: 4vw;


    } */

    body p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }

    #HOME_CTA.appear {
        -webkit-transition: opacity 1s var(--customEase) 0s,
            -webkit-transform 3s var(--customEase) 0s;
        transition: opacity 1s var(--customEase) 0s,
            -webkit-transform 3s var(--customEase) 0s;
        -o-transition: opacity 1s var(--customEase) 0s,
            transform 3s var(--customEase) 0s;
        transition: opacity 1s var(--customEase) 0s,
            transform 3s var(--customEase) 0s;
        transition: opacity 1s var(--customEase) 0s,
            transform 3s var(--customEase) 0s,
            -webkit-transform 3s var(--customEase) 0s;
    }


    .header-area.projects.page-about .col_left {
        width: 500px;
    }

    .header-area.projects.page-portfolio .col_left {
        width: 400px;
    }

    .header-area.projects.page-services .col_left {
        width: 300px;
    }


    #HOME_hero_container {
        /* width: 250%;
        left: -25vw;
        top: -5vh; */

        width: 350%;
        left: calc(-100vw + 25vh);
        top: -5vh;
    }

    #hero-scene {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    #hero-text-area h1 {
        position: unset;
    }

    body.light #hero-text-area,
    #hero-text-area h1 span.HOME_HEADER {
        all: unset;
        opacity: 0;
        color: #fff;
        -webkit-transition: opacity 2s var(--customEase), -webkit-transform 2s var(--customEase);
        transition: opacity 2s var(--customEase), -webkit-transform 2s var(--customEase);
        -o-transition: opacity 2s var(--customEase), transform 2s var(--customEase);
        transition: opacity 2s var(--customEase), transform 2s var(--customEase);
        transition: opacity 2s var(--customEase), transform 2s var(--customEase), -webkit-transform 2s var(--customEase);
    }

    #hero-text-area.appear h1 span.HOME_HEADER {
        opacity: 1;
    }

    #hero-text-area.appear h1 span.header_subline {
        opacity: 0.5;
    }

    #hero-text-area {
        width: calc(100% - var(--page-padding) * 2);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    #hero-text-area.appear {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        right: unset;
        left: unset;
        top: unset;
        bottom: 4em;
        gap: 0em;
    }

    #lottie_HOME_HEADER {
        display: none;
    }

    #HOME_CTA {
        -ms-grid-row: 2;
        grid-row: 2;
        margin: 0px auto;
        width: 100%;
    }

    #HOME_subline {
        -ms-grid-row: 3;
        grid-row: 3;
        visibility: hidden;
    }

    #projects-area {
        visibility: hidden;
        pointer-events: none;
    }

    .header-area.projects.page-portfolio .col_right,
    .header-area.projects.page-services .col_right,
    .header-area.projects.page-about .col_right {

        padding-inline: var(--card-padding-inline);
    }


    #ticker-area {
        left: calc(var(--left)*2);
    }

    #clients-area_home {
        right: calc(var(--right)*2);
    }

    .container-services.dribbble .col_left {
        width: 21em;
    }

    .container-services.social .col_right {
        width: 100%;
    }

    .dribbble_portfolio_container {
        margin-top: calc(var(--top)*2);
    }

    .header-area.clientlist .col_left {
        width: 591px;
    }

    #clientlist_insert_clientspage,
    #clientlist_insert {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    #footer-area_clientlist {
        width: calc(100% - 4em);
        position: relative;
    }

    .bottom-spacer {
        display: none;
    }

    #footer-area_clientlist p {
        width: 100%;
    }

    body.clientlist .clientlist_page #location-area,
    body.clients-open #location-area {
        display: none;
    }

    .header-area.clientlist .col_left {
        width: 100%;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }

    .clients_row {
        -webkit-column-gap: unset;
        -moz-column-gap: unset;
        column-gap: unset;
        row-gap: 2em;
    }

    .clients_col {
        width: 35%;
    }

    .cover-background,
    body.light.clientlist .cover-background {
        height: calc(60% + 8em);
    }

    #clientlist_container {
        width: calc(100% - (var(--page-padding) * 2));
    }

    /* Clients button */
    .clientlist .col_right {
        right: unset;
        margin: 0px auto;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        max-width: unset;
        width: 100%;
    }

    .clientlist .shadow-wrap {
        width: 100%;

    }

    .clientlist a.nav_btn {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 0;
    }

    .clientlist a.nav_btn .wrapper {
        height: 4em;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }

    .clientlist .icn_arrow {
        position: absolute;
        right: 2.5em;
    }



    /* Should be padding-top to conserve footer nav logic */
    /*     .content {
            top: calc(var(--top) *10);
        } */

}


/* Center Hero */
@media only screen and (max-width: 600px) {

    
    #HOME_hero_container {
        left: calc(-95vw + 25vh);
    }

    .header-area.projects.page-portfolio .col_left,
    .header-area.projects.page-services .col_left,
    .header-area.projects.page-about .col_left,
    .header-area.projects.page-about.cta .col_left {
        width: unset;
        max-width: 330px;
    }

    .header-area.projects.page-portfolio .col_right,
    .header-area.projects.page-services .col_right,
    .header-area.projects.page-about .col_right,
    .header-area.projects.page-about.cta .col_right {
        width: unset;
    }
}

/* Is mobile */
@media only screen and (max-width: 480px) {

    .header-area.projects {
        /* px amount same as scrollGive */
        margin-top: calc(100px + 4em);
    }

    #blur_container {
            display: none;
    }

    #HOME_hero_container {
        left: -55vw;
    }

    #scroll_hero {
        right: unset;
    }

    #scroll_hero #scroller {
        height: 200%;
    }

    :root {
        --page-padding: calc(var(--left)*2);

        --card-padding-inline: 6vw;

        --font-size-H1: 35px;
        --line-height-H1: 40px;
        --font-size-H2: 35px;
        --line-height-H2: 40px;

        --font-size-contact-form-h1: 30px;
        --line-height-contact-form-h1: 35px;


        --height-contact-btn-menu: 6em;
    }

    #menu_bar,
    #menu_bar_clients {
        height: calc(70px + (calc(var(--top) * 2)));
    }

    #menu-anim {
        transform: scale(1.5);
    }

    #menuToggle input:checked~#menu-anim {
        animation: unset;
    }

    #nav-top {
        right: calc(var(--right) * 2);
        top: calc(var(--top) * 1.75);
    }



    /* Should be padding-top to conserve footer nav logic */
    /*     .content {
        top: calc(var(--top) *10);
    } */

    a.block:after {
        width: 150vw;
        height: 150vw;
    }

    .modal-title {
        margin-bottom: var(--top);
        margin-top: var(--top);
        max-width: 350px;
        margin-inline: auto;
        text-align: center;
    }



    .instructions {
        width: 100%;
        margin-inline: auto;
    }

    .form-column-message textarea {
        height: 20vh;
    }


    .splash_container {
        width: 100%;
        /*         left: -25%; */
    }

    /*     #lottie_HOME_splash {
        will-change: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 50%;
    } */

    .buttons_sticky {
        opacity: 1;
    }

    .buttons_sticky a.nav_btn .title_line {
        will-change: auto;
        background: var(--nav-btn-gradient-o-);
        background: var(--nav-btn-gradient);
        background-clip: text;
        color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: var(--nav-btn-grad-size);
        -webkit-animation: var(--nav-btn-animation);
        animation: var(--nav-btn-animation);
        -o-animation: var(--nav-btn-animation);
        word-break: break-word;
        white-space: nowrap;
        width: 100%;
        animation-play-state: running;
        -webkit-animation-play-state: running;
    }

    body.light a.nav_btn:before,
    body.light .buttons_sticky a.nav_btn .top_line,
    body.light .buttons_sticky a.nav_btn .title_line {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        opacity: 1;
    }

    .clientlist a.nav_btn {
        padding-block: calc(1.5em - var(--nav-btn-line-thickness)*2);
        padding-inline: calc(2em - var(--nav-btn-line-thickness)*2);
        border-radius: calc(2em - var(--nav-btn-line-thickness)*2);
    }

    #lottie_HOME_splash {
        width: 110%;
    }



    #lottie_logo_left-stacked {
        left: calc(var(--left)*2)
    }

    #work-title-area {
        visibility: hidden;
        pointer-events: none;
    }

    #clients-area_home {
        visibility: hidden;
        pointer-events: none;
    }

    #hero-text-area.appear {
        bottom: -1em;
    }

    .header-area.projects.page-portfolio .col_left,
    .header-area.projects.page-services .col_left,
    .header-area.projects.page-about .col_left,
    .header-area.projects.page-about.cta .col_left {
        width: unset;
        max-width: 330px;
    }

    .header-area.projects.page-portfolio .col_right,
    .header-area.projects.page-services .col_right,
    .header-area.projects.page-about .col_right,
    .header-area.projects.page-about.cta .col_right {
        width: unset;
    }

    .header-area.projects.page-portfolio .col_left {
        width: 300px;
    }

    .header-area.projects.page-portfolio .col_right {
        width: 320px;
    }

    .header-area.projects.page-services .col_right {
        width: 245px;
    }

    .header-area.projects.page-about .col_right {
        width: 268px;
    }

    .header-area.projects.page-about.cta .col_right {
        width: 285px;
    }

    .header-area.projects.page-about.cta .col_left {
        max-width: unset;
        width: 400px;
    }


    #hero-text-area.appear span.header_subline {
        opacity: 0.5;
    }

    #blur_container.appear {
        opacity: 0;
    }

    body.menu-open #menu-bg #dribbble-area,
    body.menu-open #menu-bg #location-area {
        visibility: hidden;
        pointer-events: none;
    }

    body:not(.nav-menu) button.contact-btn {
        visibility: hidden;
        opacity: 0;
    }

    body:not(.nav-menu) button.contact-btn {
        -webkit-transition: unset;
        -o-transition: unset;
        transition: unset;
    }

    #HOME_CTA {
        height: 4.5em;
    }

    button#btnContactUs {
        width: 100%;
        height: 4em;
        padding: var(--padding-contact-btn-menu);
    }
        
    button.contact-btn {
        position: fixed;
        bottom: var(--page-padding);
        margin-inline: auto;
        width: 100%;
        left: 0;
        padding-inline: var(--page-padding);
        -webkit-transition: opacity 2s var(--customEase) 1.5s;
        -o-transition: opacity 2s var(--customEase) 1.5s;
        transition: opacity 2s var(--customEase) 1.5s;
    }

    .contact-btn.remove #contact.hide {
        width: unset;
    }

    #icn_contact {
        opacity: 1;
        margin: unset;
        margin-right: 1em;
        width: 20px;
        height: 20px;
    }

    body.menu-open #contact {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        color: #fff;
        background: unset;
        border: 1px solid #fff;
        flex-flow: row-reverse;
    }


    body.contact-open #lottie_logo_left-stacked,
    body.contact-open .contact-btn {
        display: none;
    }

    #lottie_menu_bg {
        width: 200%;
    }



    .icn_block.liked-message {
        width: 2.7em;
        height: 2.7em;
        left: -1em;
        top: -1.3em;
    }

    .icn_block.smiley-sunglasses {
        width: 2.7em;
        height: 2.8em;
        left: -0.8em;
        top: -1em;
    }

    body.services .container-services.cta_full .col_left p {
        width: 222px;
    }

    .scroll-box.expanded .list_static li {
        padding-block: 0;
        height: auto;
        line-height: 6vw;
        word-break: break-word;

        padding-block: 0;
        height: 3.2vh;
        line-height: 3.2vh;
    }



    .container-about.side_right.transparent.no_padding.tools {
        margin-top: calc(var(--top)*2);
    }

    .portfolio.about {
        margin-inline: unset;
        margin-top: calc(var(--top)*2);
        row-gap: 6em;
    }

    .container-about h2 {
        width: 80%;
    }

    .container-about.side_left p {
        max-width: unset;
        margin-bottom: 2em;
    }

    .container-work {
        margin-inline: unset;
    }

    .container-services.social .col_left {
        width: 19em;
    }

    .container-services.social.dribbble {
        padding-inline: unset;
    }

    .dribbble_portfolio_container {
        margin-top: calc(var(--top)*2);
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
    }

    a.dribbble_shot {
        width: 100%;
    }

    a.dribbble_shot:before,
    a.dribbble_shot:after {
        opacity: 1;
    }

    .icn_block.smiley-halo.float_emojis {
        right: unset;
        left: 60%;
        top: 0;
    }

    .header-area.clientlist .col_left {
        width: 84%;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }

    .header-area.clientlist {
        margin-bottom: 1em;
    }

    .clients_col {
        width: 100%;
    }

    .cover-background,
    body.light.clientlist .cover-background {
        height: calc(72% + 8em);
        display: none;
    }

    #footer-area_clientlist {
        background: var(--brand-color-gray);
        border-radius: unset;
        -webkit-box-shadow: unset;
        box-shadow: unset;
    }

    #footer-area_clientlist p {
        opacity: 1;
    }

    #footer-area_clientlist span {
        display: block;
        margin-top: 1em;
    }

    .client_cat {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row;
        flex-flow: row;
        width: 100%;
    }

    span.gradient-hashtag {
        width: unset;
    }

    .client_cat::after {
        content: "";
        height: 1px;
        background: #000;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 45%;
    }

    #lottie_Process {
        width: 166.66%;
        height: auto;
    }


    /* Simplify Hero */
    #HOME_hero_lightsource_right,
    #HOME_hero_lightsource_left,
    #img_HOME_hero {
        -webkit-animation: unset;
            animation: unset;
    }


}





/* Is Firefox */
@-moz-document url-prefix() {}



/* Is touch device */

@media (hover: none) and (pointer: coarse) {
    .block:before {
        opacity: 1;
    }


    a.block {
        background: #000;
        color: #fff;
    }


    a.block .btn_play {
        opacity: 1;
        -webkit-transform: unset;
        -ms-transform: unset;
        transform: unset;
    }

    a.block span .text_play {
        opacity: 1;
        -webkit-transform: unset;
        -ms-transform: unset;
        transform: unset;
    }
}








/* Footer rules */
@media only screen and (min-width: 1920px) {
    span.icn_text {
        visibility: visible;
    }
}

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

    :root {
        --font-size-footer: 16px;
        --line-height-footer: 22px;
    }

    /* 
    .client_cossette.project-logo {
        background-size: 30%;
    }
    .client_weglot.project-logo {
        background-size: 15%;
    }
    .client_alma.project-logo {
        background-size: 12%;
    }
    .client_athletic.project-logo {
        background-size: 25%;
    }
 */
}

@media only screen and (max-width: 1450px) {
    footer .col_mid {
        width: 18em;
    }

}

@media only screen and (max-width: 1366px) {
    footer .col_mid {
        width: 22em;
    }

    span.icn_text {
        visibility: visible;
    }

}

@media only screen and (max-width: 1230px) {
    span.icn_text {
        visibility: hidden;
    }
}

@media only screen and (max-width: 1080px) {
    footer .col_mid {
        width: 16em;
    }
}

@media only screen and (max-width: 960px) {
    footer .col_left.title .desktop {
        display: none;
    }

    footer .col_left.title .mobile {
        display: block;
    }

    footer .col_mid {
        /*  width: unset; */
        /* max-width: 16em; */
        text-align: center;
        margin-left: unset;
    }

    span.icn_text {
        visibility: visible;
    }

    .footer_center {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        padding-block: 2em;
        gap: 2em;
        margin-top: 10em;
    }

    footer .col_right {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row;
        flex-flow: row;
        gap: 2em;
    }

    .buttons_sticky.right {
        right: unset;
        margin: 0px auto;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        max-width: unset;
        width: 100%;
    }

    .buttons_sticky .shadow-wrap {
        width: 100%;
        padding-inline: var(--page-padding);
    }

    a.nav_btn.footer {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 0;
        /* flex-flow: column; */
    }

    .buttons_sticky .icn_arrow {
        position: absolute;
        right: 2.5em;
    }

    .buttons_sticky a.nav_btn .wrapper {
        height: 4em;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }

    /*     .title_line {
        font-size: 22px;
    } */

}


@media only screen and (max-width: 834px) {}

@media only screen and (max-width: 480px) {
    footer .col_right {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        gap: 1em;
    }
}



/* FOR OLD iOS DEVICES without new CSS rules */

body.iOS-tagged #bounce_peek {
    display: none;
}

body.iOS-tagged #scroll_hero {
    display: none;
    overflow: hidden;
}

body.iOS-tagged #iOS_notif {
    display: block;
    position: absolute;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid red;
    color: #fff;
    border-radius: 2em;
    padding: 2em;

    bottom: 2em;

    margin-inline: 1em;


}


body.iOS-tagged #hero-text-area.appear {
    /* display: none; */
    bottom: 13em;
}

#iOS_notif p {
    -webkit-hyphens: none;
    -ms-hyphens: none;
        hyphens: none;
}

#iOS_notif p span {
    display: inline-block;
    padding-top: 1em;
}

#iOS_notif .instructions {
    font-size: 10px;
}


/* FOR LOW PERFORMANCE DEVICES */

body.perf_low #HOME_hero_lightsource_container,
body.perf_low #HOME_hero_lightsource_right,
body.perf_low #HOME_hero_lightsource_left,
body.perf_low #blur_container,
body.perf_low #dust_container {

    display: none !important;

    mix-blend-mode: unset;
    -webkit-mask-image: unset;
    mask-image: unset;
    -webkit-animation: unset;
        animation: unset;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    
}

body.perf_low #img_HOME_hero {
    -webkit-animation: unset;
    animation: unset;
}