.main-parcours span{
    display: none;
}


@media only screen and (max-width: 1024px)
{
    .mf-cursor{
        display: none!important;
    }
    .close-on header {
        opacity: 0;
        pointer-events: none;
    }
    .close-cursor{
        transition: 300ms all ease-in-out;
        display: flex!important;
    }
    .cursor, .cursor.hovered, .cursor.expand {
        left: auto!important;
        right: calc((var(--global-space)) * 1)!important;
        top: calc((var(--global-space)) * 0.55)!important;
        position: fixed;
        border-width: 0px!important;
        display: block!important;
        opacity: 1!important;
        transform: scale(0.6)!important;
        z-index: 99999999999;
        pointer-events: none;
        animation: none!important;
        transition: 300ms all ease-in-out;
    }
    .close-on .cursor, .close-on .cursor.hovered {
       pointer-events: none;
    }


    .close-on .close-cursor{
        opacity: 1!important;
        display: flex!important;
    }
    .second-part-anim {
        font-size: clamp(1rem, 40px, 4vw);
    }
    .parcours p {
        font-size: 0.9rem;
    }
    .parcours .main-parcours p {
        font-size: 4rem;
    }
    .portfolio-grid picture.first-img {
        width: 90vw;
    }
    .portfolio-grid picture:nth-of-type(5n+3) {
        width: clamp(570px, 30vw, 800px);
        height: 60%;
    }
    .portfolio-item h3 {
        padding-left: 13vw;
        padding-right: 5vw;
    }
    .more-projects-scroller {
        padding: calc((var(--global-space)) * 2) calc((var(--global-space)) * 3) calc((var(--global-space)) * 2) calc((var(--global-space)) * 0);
    }
    .more-projects-scroller h5 {
        font-size: 1.2rem;
    }
    footer .contact .footer-title {
        font-size: 1.5rem;
    }
    .portfolio-grid picture.second-img {
        transform: translateY(calc((100vw / 4) * 1))!important;
        margin-bottom: auto;
        margin: 0 -8vw auto -8vw;
        z-index: 9;
        width: 50vw;
        height: 50vw;
    }

    .circle-div:hover #circle {
        transform: rotate(0deg) scale(1);
    }
    .circle-div:hover .blitz {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
}

.arrow .small-text br{
    display: none;
}

/* IPAD */

@media only screen and (max-width: 768px){
    .main-logo {
        font-size: 4rem;
    }
    #main-nav ul li .huge-spacing {
        letter-spacing: 1rem;
        margin-right: -1rem;
    }
    #main-nav ul li {
        margin-right: 2rem;
    }
    .second-part-anim{
        font-size : clamp(1rem, 50px, 9vw);
    }
    
    .parcours {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        justify-content: center;
        gap: 1px;
        align-items: initial;
        background: #ffffff50;
    }
    .parcours > div,
    .parcours > div:not(.main-parcours) {
        flex: 1 1 0;
        width: 50%;
        display: flex;
        flex-direction: column;
        padding: calc((var(--global-space)) * 1);
        background: #000;
    }
    .main-parcours {
        width: 50%;
        text-align: left;
        font-size: 3rem;
    }
    .main-parcours > div {
        flex: 100%;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 0;
    }
    .main-parcours h2 {
        margin-left: 0;
    }
    .parcours span {
        height: 2px;
        width: 20%;
        background-color: var(--tonic);
        margin: 2rem 0;
    }

    .icon-logo-anim:nth-of-type(1) {
        left: 30%;
        top: 20%;
    }
    .icon-logo-anim:nth-of-type(2) {
        right: 10%;
        bottom: 10%;
    }
    .icon-logo-anim:nth-of-type(3) {
        left: 70%;
        top: 10%;
    }
    .icon-logo-anim:nth-of-type(4) {
        right: 15%;
        top: -30%;
    }
    .icon-logo-anim:nth-of-type(5) {
        left: 20%;
        top: -30%;
    }
    .parcours h2 {
        font-size: 1rem;
        text-transform: uppercase;
    }
    .main-parcours span{
        display: block;
    }
    .main-parcours h2 svg{
        display: none;
    }
    .parcours .main-parcours p {
        font-size: 1rem;
        font-weight: 300;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-family: 'Montserrat', sans-serif;
        margin: 0;
    }
    .title-portfolio, .project-name-repeat {
        height: 100%;
    }
    .project-name-repeat {
        font-size: 0.9rem;
        padding: calc((var(--global-space)) * 4) 0;
    }
    .portfolio-item h3 {
        font-size: 14vh;
    }
    .portfolio-item .project-name-repeat > .modal-toggle {
        transform: translate(calc((100vh / 10) * 0.3), 50%);
    }
    .content-modal .title-portfolio .project-name-repeat,
    .small-info-modal > * {
        font-size: 0.7rem;
    }
    .text-modal p {
        font-size: 0.9rem;
    }
    .text-modal h4 {
        font-size: 1rem;
    }
    .more-projects-scroller h4 {
        font-size: 2.6rem;
    }
    .more-arrow{
        display: none;
    }
    .more-projects > .more-projects-scroller li {
        font-size: 0.9rem;
    }
    .more-projects li a {
        font-size: 0.6rem;
        letter-spacing: 0.1rem;
    }
    .more-projects-scroller {
        padding: calc((var(--global-space)) * 2) calc((var(--global-space)) * 3) 50vh calc((var(--global-space)) * 0);
    }
    footer .contact{
        padding: calc((var(--global-space)) * 2) 0 0 0;
    }
    footer .contact .contact-arrow {
        width: calc(100vw - ((var(--global-space)) * 2));
        margin: auto auto calc((var(--global-space)) * 0) auto;
    }
    footer .contact .contact-content {
        display: flex;
        flex-wrap:wrap;
        gap: 0;
        padding: 0px;
        align-items: initial;
    }
    footer .contact .contact-content > div {
        flex: 50%;
        width: 50%;
        display: flex;
        flex-direction: column;
        padding: calc((var(--global-space)) * 1);
        align-items: flex-start;
        justify-content: flex-end;
    }
    .sub-footer{
        margin: 0;
        padding: calc((var(--global-space)) * 1);
    }
    .sticky-on header {
        padding: calc((var(--global-space)) * 1);
    }
    .sticky-on .circle-div {
        top: calc(100% - (var(--global-space)) * 1);
        right: calc((var(--global-space)) * 1);
    }
    .footer-on .circle-div {
        right: calc((var(--global-space)) * 2.5);
        top: calc((var(--global-space)) * 3);
    }
    .arrow {
        max-width: 50%;
    }
    .arrow .small-text br{
        display: block;
    }
    .arrow .small-text e{
        display: none;
    }

        /* PORTFOLIO ITEM */
        .portfolio-x-scroll {
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            overflow: hidden;
            height: 100%;
            align-items: center;
            padding: 0 0 0 65vw;
        }
        .portfolio-item h3{
            display: none;
        }
     
        .portfolio-grid .project-name-repeat span {
            padding: calc((100vh / 10) * 0.2);
            writing-mode: initial;
        }
        .portfolio-grid .portfolio-item .project-name-repeat > .modal-toggle {
            transform: none;
        }
        .portfolio-grid picture.first-img {
            width: 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%)!important;
        }
        .portfolio-grid picture:not(.first-img){
            display: none;
        }
        .portfolio-item {
            min-width: 150vw;
            align-items: center;
            justify-content: center;
        }
        .portfolio-grid .title-portfolio, .portfolio-grid .project-name-repeat {
            height: 100%;
            width: 100%;
        }
        .portfolio-grid .project-name-repeat {
            font-size: 0.9rem;
            padding: calc((var(--global-space)) * 4) 0;
            width: 100vw;
            justify-content: flex-start;
            align-items: flex-end;
            flex-direction: column-reverse;
        }
        .portfolio-grid .project-name-repeat span {
            padding: calc((100vh / 10) * 0.1) 3rem;
            width: 100%;
            white-space: initial;
            text-align: left;
            font-size: 0.7rem;
        }
        .portfolio-grid .project-name-repeat b {
            color: var(--white);
            font-family: "Glysa";
            font-size: 2rem;
            max-width: 100vw;
        }
        .portfolio-grid .project-name-repeat span svg{
            display: none;
        }
        .portfolio-grid .portfolio-item .project-name-repeat > .modal-toggle {
            transform: none;
            order: -1;
            margin-right: auto;
            margin-top: 2rem;
            margin-bottom: 3rem;
            margin-left: 3rem;
        }
        .number, .number-repeat {
            font-size: 25vh;
        }
        .portfolio-item .modal-toggle svg{
            display: none;
        }
        .portfolio-item .modal-toggle b {
            font-size: 0.7rem;
        }
        /* .title-portfolio {
            background: #00000038;
        } */
        .more-projects-container .title-portfolio {
            display: none;
        }
        .portfolio-item.last-portfolio-item{
            /* max-width: 100vw; */
        }
        .more-projects-scroller {
            padding: calc((var(--global-space)) * 6) calc((var(--global-space)) * 1) calc((var(--global-space)) * 0) 
        }
}




/* MOBILE */
@media only screen and (max-width: 546px){
    section#ui-ux .first-part-anim h2 {
        font-size: clamp(40vh, 20vw, 100vh);
    }
    section#ui-ux h2 span.gradient-anim-1 {
        letter-spacing: 4rem;
        transform: translate(15%, 30vh) scale(2);
    }
    section#ui-ux h2 span.gradient-anim-2 {
        letter-spacing: -2rem;
        transform: translate(10%, 30vh) scale(2);
    }
    .more-projects-spacer-x {
        width: 500vw;
    }


    :root{
        --global-space : (100vw / 11);
        --animBigTitle : 200vh;
    }
    .circle-div {
        right: calc((var(--global-space)) * 0.5);
        top: calc((var(--global-space)) * 4);
        transform: translate(0, 0%) scale(0.8);
        transform-origin: bottom right;
    }
    .main-logo p{
        opacity: 0;
        pointer-events: none;
        display: none;
    }
    .main-logo svg{
        opacity: 1;
    }
    #main-nav ul li .huge-spacing {
        letter-spacing: 0.4rem;
        margin-right: -1rem;
    }
    .sticky-on #main-nav ul li .huge-spacing {
        letter-spacing: 0.4rem!important;
    }
    .arrow {
        max-width: 50%;
    }
    .arrow .small-text br{
        display: block;
    }
    .arrow .small-text e{
        display: none;
    }
    nav.textcarrousel img {
        max-width: 60px;
        opacity: 0.4;
    }
    nav.textcarrousel img:first-of-type {
        max-width: 40px;
    }
    .icon-logo-anim:nth-of-type(1) {
        opacity: 0.5;
    }
    .icon-logo-anim:nth-of-type(2) {
        opacity: 0.2;
    }
    .icon-logo-anim:nth-of-type(3) {
        opacity: 0.2;
    }
    .icon-logo-anim:nth-of-type(4) {
        right: 15%;
        top: -55%;
        opacity: 0.4;
    }
    .icon-logo-anim:nth-of-type(5) {
        left: 20%;
        top: -50%;
        opacity: 0.4;
    }
    .parcours h2,
    .parcours p {
        font-size: 0.9rem;
        letter-spacing: 0rem;
    }

    .since {
        padding: 0.2rem 0.2rem 0.2rem 0.3rem;
        letter-spacing: 0.1rem;
    }


    .footer-on .circle-div {
        top: calc(100% - (var(--global-space)) * 0.5);
        transform: translate(0, -100%) scale(0.5);
        right: calc((var(--global-space)) * 0.5);
        opacity: 0;
        pointer-events: none;
    }
    footer .contact .contact-content,
    .sub-footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1px;
        background-color: #ffffff50;
    }
    footer .contact .contact-content > div,
    .sub-footer{
        width: 100%;
        justify-content: flex-start;
        align-items: flex-start;
        padding: calc((var(--global-space)) * 0.5) calc((var(--global-space)) * 1);
        background-color: #000;
    }
    .sub-footer {
        letter-spacing: 0rem;
    }

    .footer-on .main-logo{
        opacity: 0;
    }
    .portfolio-x-scroll {
        padding: 0 0 0 120vw;
    }
    .anchor.arrow > div {
        transform: scaleX(-1);
        margin-right: auto;
    }
    .content-modal .title-portfolio .project-name-repeat span {
        padding: 1rem;
        font-size: 0.6rem;
    }
    .content-modal .project-name-repeat {
width: auto;
    }
    .recompenses img {
        max-width: 30px;
        height: auto;
    }
    .recompenses {
        padding: calc((100vh / 10) * 0.2);
        gap: 0.2rem;
    }
    .text-modal {
        padding: calc((100vh / 10) * 0.2);
    }
    .content-modal .title-portfolio {
        width: auto;
    }
    .right-side {
        width: 100%;
    }
    .text-modal h2 {
        font-size: 2rem;
        font-family: "Brier";
        margin-bottom: 1rem;
    }
    .text-modal p {
        font-size: 0.7rem;
    }
    .text-modal h4 {
        font-size: 0.7rem;
    }
    .small-info-modal p {
        letter-spacing: 0px;
    }
    .small-info-modal > * {
        letter-spacing: 0rem;
        padding: calc((100vh / 10) * 0.5) calc((100vh / 10) * 0.2);
    }

    .thumb {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 80vw;
        width: 80vw;
        filter: blur(30px);
        pointer-events: none;
        cursor: url(../assets/picker-icon.svg) 100 100, pointer;
    }
    .thumb img {
        height: 80vw;
        width: 80vw;
        top: 50%;
        left: 50%;
    }
    .colorVal {
        letter-spacing: 0;
    }




    /* VERTICAL MOBILE ANIM */
    .second-part-anim {
        margin: calc(var(--animBigTitle) * 0) 0 10vh 0;
    }
    
    .portfolio-grid {
        position: relative!important;
        margin-top: -200vh;
        width: 100vw;
        height: auto;
        
    }
    .portfolio-grid-overflow {
        position: relative;
        overflow: hidden;
        height: auto;
    }
    .portfolio-x-scroll {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        overflow: hidden;
        height: auto;
        align-items: flex-start;
        padding: 0;
        justify-content: center;
    }
    .portfolio-item {
        min-width: 100vw;
        max-width: 100vw;
        align-items: center;
        height: 125vh;
        justify-content: center;
    }
    .portfolio-item:first-of-type:before {
        content: "";
        height: 25vh;
        width: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(180deg, black, transparent);
        z-index: 9;
        pointer-events: none;
    }
    article.portfolio-item.last-portfolio-item {
        height: auto;
        align-items: flex-start;
    }
    .portfolio-grid picture.first-img {
        height: 125vh;
    }
    .portfolio-grid .project-name-repeat {
        font-size: 0.9rem;
        padding: calc((var(--global-space)) * 4) 0;
        width: 100vw;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
    }
    .more-projects-container, .more-projects {
        height: auto;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .more-projects-spacer-x {
        width: 0vw;
    }
    .more-projects-container .title-portfolio {
        display: block;
    }
    .more-projects-container .portfolio-item h3 {
        display: block;
        writing-mode: unset;
        text-orientation: unset;
    }
    /* NUMBERS */
    .number, .number-repeat {
        top: 45%;
        right: 20vw;
        transform: translate(10%, -20%);
    }
    .number-repeat:nth-of-type(1){
        top: 40%;
        right: 20vw;
        opacity: 1;
    }
    .number-repeat:nth-of-type(2){
        top: 35%;
        right: 20vw;
        opacity: 0.6;
    }
    .number-repeat:nth-of-type(3){
        top: 30%;
        right: 20vw;
        opacity: 0.3;
    }
    .number-repeat:nth-of-type(4){
        top: 25%;
        right: 20vw;
        opacity: 0.2;
    }
    .number-repeat:nth-of-type(5){
        top: 20%;
        right: 20vw;
        opacity: 0.1;
    }
    
    /* FOOTER */
    footer {
        margin-top: 200vh;
    }
}