@import "css/locomotive-scroll.min.css";

    @font-face 
    {
    font-family: 'GillSansRegular';
    src: url('fonts/regular.otf') format('otf'); /* Modern Browsers */
    font-weight: 400;
    font-style: normal;
    }

    @font-face 
    {
    font-family: 'GillSansBold';
    src: url('fonts/bold.otf') format('otf'); /* Modern Browsers */
    font-weight: 600;
    font-style: normal;
    font-display: swamp;
    }

    @font-face 
    {
    font-family: 'GillSansHeavy';
    src: url('fonts/extra_bold.otf') format('otf'); /* Modern Browsers */
    font-weight: 700;
    font-style: normal;
    font-display: swamp;
    }

    @font-face 
    {
    font-family: 'herbert';
    src: url('fonts/herbert/her.woff') format('woff'); /* Modern Browsers */
    font-weight: 400;
    font-style: normal;
    font-display: swamp;
    }

    @font-face 
    {
    font-family: 'july';
    src: url('fonts/july/regular_j.woff') format('woff'); /* Modern Browsers */
    font-weight: 400;
    font-style: normal;
    font-display: swamp;
    }

    @font-face {
    font-family: "Harbour-Light";
    src: url("fonts/deb3e4f740ee193dacdddb317ddecc15.woff2")format("woff2");
    src: url("fonts/deb3e4f740ee193dacdddb317ddecc15.woff")format("woff"),
    url("fonts/deb3e4f740ee193dacdddb317ddecc15.ttf")format("truetype");
    }

    @font-face {
    font-family: 'DIN Alternate';
    font-style: normal;
    font-weight: normal;
    src: local('DIN Alternate Bold'), url('fonts/DINAlternate-Bold.woff') format('woff');
    }

    @font-face {
      font-family: 'FoundersGrotesk';
      src: url('fonts/FoundersGrotesk-Medium.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'FoundersGrotesk';
      src: url('fonts/FoundersGrotesk-MediumItalic.otf') format('opentype');
      font-weight: 400;
      font-style: italic; /* Correct for italic */
      font-display: swap;
    }

    @font-face {
      font-family: 'FoundersGrotesk';
      src: url('fonts/FoundersGrotesk-Bold.otf') format('opentype');
      font-weight: 700;   /* Bold weight */
      font-style: normal;
      font-display: swap;
    }

    *, *::after, *::before 
    {    
    --black: #1b1c1e;  
    --white: #fff; 
    --green: #000;
    --grey: #666666;
    --animation: cubic-bezier(.215,.61,.355,1);
    --smallMarginTopBottom:80px;
    --bigMarginTopBottom:130px;
    
    color:var(--black);
    box-sizing: border-box;
    font-family: 'GillSansRegular', sans-serif;
    letter-spacing:0.5px;
    font-weight: lighter;
    }

/*    .has-scroll-smooth [data-scroll-container] {
    min-height: auto !important;
    }*/

    a:hover, a:focus 
    {
    outline: none;
    }
    
    a
    {
    text-decoration: none;
    }

    ul, li
    {
    margin:0px;
    padding:0px;
    list-style: none;
    }
  
    html, body 
    {
    width: 100vw;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    margin:0px;
    overflow:hidden;
    font-size: 100%;
    background: var(--white);
/*    scroll-behavior: smooth;*/
    }

    /*html.homepage {
    scroll-behavior: smooth;
    }*/

    #CookiebotWidget,
    #CybotCookiebotDialogPoweredbyImage,
    #CybotCookiebotDialogPoweredbyCybot svg
    {
    display: none !important;
    }

    #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll 
    {
    background-color: var(--black) !important;
    border-color: var(--black) !important; 
    }

    #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection 
    {
    border-color: var(--black) !important;
    }

    #CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider 
    {
    background-color: var(--green) !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a 
    { 
    color:  var(--black) !important;
    }

    #page-wrap
    {
    background: var(--white);
    }

    picture img 
    {
    width:100%;
    }

    h1, h2, h3, h4, h5
    {
    font-weight: lighter;
    margin:0px;
    }
    
    .nomargin
    {
    margin:0px !important;
    }

    /* ######### THE GRID ######### */
    .contgrid, .contgrid_margin,  .contgrid_28, .contgrid_margin_all,
    .grid_2, .grid_3, .grid_4, .grid_7, .grid_32
    {
    display:grid;
    }

    /* GRIGLIA 32 COLONNE */
    .contgrid
    {
    grid-template-columns:repeat(32,1fr);
    }

    /* GRIGLIA 28 COLONNE */
    .contgrid_28
    {
    grid-template-columns:repeat(28,1fr);
    }

    /* GRIGLIA 30 COLONNE */
    .contgrid_margin_all,
    .contgrid_margin
    {
    grid-template-columns: repeat(30,1fr);
    }

    /* CONTENITORE CON MARGIN (1 COLONNA PER LATO) */
    .contgrid_margin
    {
    width:93.75vw;
    margin:auto;
    }

    /* contenitore che prende tutte e 32 colonne */
    .grid_int
    {
    grid-column: 1 / 33;
    }

    /* contenitore cheprende 30 colonne di margine */
    .grid_int_margin
    {
    grid-column: 2 / 32;
    }

    /* contenitore diviso in X colonne */
    .grid_2
    {
    grid-template-columns: repeat(2, 1fr);
    }

    .grid_3
    {
    grid-template-columns: repeat(3, 1fr);
    }

    .grid_4
    {
    grid-template-columns: repeat(4, 1fr);
    }

    .grid_7
    {
    grid-template-columns: repeat(7, 1fr);
    }

    .grid_32
    {
    grid-template-columns: repeat(32, 1fr);
    }

    /* posizioni in griglia */
    .gr_center
    {
    justify-self: center;
    }

    .gr_align_center
    {
    align-self: center;
    }

    .gr_end
    {
    justify-self: end;
    }
    /* ######### END THE GRID ######### */

    .back_black
    {
    background: var(--black);
    }

    /*############## LOADING ##############*/    
    #loading, #load_page
    {
    position:fixed;
    width:100%;
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    top:0px;
    left:0px;
    z-index:5;
    will-change: transform;
    }

    #loading.stop
    {
    transform:translateY(-200000vh);
    }

    #loading>div
    {
    width:100%;
    height:100vh; 
    height:calc(var(--vh, 1vh) * 100);
    position: relative;
    background:var(--green);
    display: flex;
    justify-content: center;
    align-items: center; 
    }

    #load_page
    {
    display:block;
    background:var(--green);
    top:auto;
    height:0px;
    bottom:0px;
    overflow: hidden;
    /*opacity:0;*/
    transition:height .8s var(--animation);
    z-index:5;
    }

    #load_page.show
    {
    height:100vh; 
    height:calc(var(--vh, 1vh) * 100);
    }

    #load_page>div
    {
    position: absolute;
    top:0px;
    width:100%;
    height:100vh; 
    height:calc(var(--vh, 1vh) * 100);
    }

    #load_page>div>div#title_page
    {
    position: relative;
    }

    #load_page>div>div.center
    {
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -65%);
    text-align: center;
    font-size:clamp(5rem, 25vw, 9999px);
    overflow: hidden;
    }

    #load_page>div>div#title_page
    {
    width:93.75vw;
    height:30vw;
    }

    #title_page span
    {
    color:var(--white);
    }

    #load_page>div>div>div:not(#load_page>div>div>div:first-child)
    {
    position: absolute;
    top:0px;
    }

    #load_page>div>div>div
    {
    transform:translateY(130%);
    margin: auto;
    width: 100%;
    }

    #load_page.show>div>div>div.load_attivo,
    #load_page>div>div>div#adaptive.load_attivo
    {
    transform:translateY(0%);
    transition:transform 1s var(--animation);
    will-change: transform;
    }

    #load_page.hide
    {
    top:0px;
    bottom:auto;
    height:0px;  
    }

    .logo_loading
    {
    width:clamp(360px, 8vw, 360px);
    overflow: hidden;
    transform:scale(1);
    fill:var(--white);
    }
  
    .logo_loading>div svg
    {
    width:100%;
    }

    #load_page .logo_loading
    {
    display: none;
    }

    x img
    {
    width: 100%;
    display: block;
    }
    
    #load_page .logo_loading>div,
    #loading .logo_loading>div
    {
    width: 100%;
    display: block;
    transform:translateY(100%);
    will-change: transform;
    }

    body.start #loading .logo_loading>div,
    #load_page.show .logo_loading>div
    {
    transform:translateY(0%);
    transition: transform .8s var(--animation);
    
    } 
    
    #load_page.show .logo_loading>div
    {
    transition-delay:.8s;
    }  

    #loading .logo_loading
    {
    transform:scale(1) translateX(0) rotateZ(0deg);
    will-change: transform;
    }

    body.start #loading .logo_loading
    {
    transform:scale(1) translateX(0) rotateZ(0deg);
    transition: transform 1.5s linear;
    transition-delay:1.2s;
    }

    #loading .logo_loading img
    {
    width: 100%;
    }

    body.start #loading
    {
    opacity:0;
    transition: opacity .5s linear;
    transition-delay:1.5s;
    }
  
    #loading h2
    {
    font-size:clamp(110px, 22vw, 9999999px);
    line-height:clamp(115px, 24vw, 9999999px);
    text-align:center;
    position: relative;
    overflow: hidden;
    transform:translateY(18%);
    }
  
    #loading h2>div
    {
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    margin: auto;
    opacity: 0;
    text-align: center;
    }

    #image_load, #image_load_page
    {
    position: absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
    width:clamp(240px, 30vw, 900px);
    mix-blend-mode: multiply;
    }

  
    #image_load>img,
    #image_load_page>img
    {
    width: 100%;
    display: block;
    position: absolute;
    top:0px;
    left:0px;
    opacity: 0;
    }

    #loading h2>div.show
    {
    opacity: 1;
    }

    #image_load>img.show,
    #image_load_page>img.show
    {
    opacity: 1;
    }

    #loading h2
    {
    opacity: 0;
    }

    #loading h2.start
    {
    opacity: 1;
    transition: opacity .2s ease-out;
    }

    #loading h2 div,
    #loading h2 span
    {
    color:var(--white);
    font-family: 'GillSansBold';
    text-align: center;
    }

    #loading h2 span>span
    {
    text-align: center;
    }
  
    #loading h2>div:first-child,
    #image_load>img:first-child,
    #image_load_page>img:first-child
    {
    position: relative;
    }

    #image_load>img.show.active,
    #image_load_page>img.show.active
    {
    transform: translateY(-20%);
    opacity:0;
    transition: opacity .8s cubic-bezier(.99,-0.01,.06,.99),transform 1s cubic-bezier(.99,-0.01,.06,.99);
    }
    /*############## END LOADING ##############*/ 


    /*############## Bottone con freccia ##############*/ 
    a.botton_g
    {
    padding: 10px 18px;
    text-transform: uppercase;
    border: 1px solid var(--black);
    border-radius: 70px;
    width:clamp(175px, 100%, 250px);
    display: flex;
    justify-content:space-between;
    position: relative;
    overflow: hidden;
    gap:20px;
    }

    #cont_type a.botton_g
    {
        border: 1px solid var(--white);
        margin-top:20px;
    }

    a.botton_g:after
    {
    content:"";
    display: block;
    width:100%;
    height:100%;
    position: absolute;
    left:0px;
    top:0px;
    transform:translateY(100%);
    transition: transform .5s var(--animation);
    background-color: var(--green);
    z-index: -1;
    will-change: transform;
    }

    a.botton_g:hover:after
    {
    transform:translateY(0%);
    }

    a.botton_g.al:hover,
    #cont_type a.botton_g:hover
    {
    border: 1px solid var(--green);
    transform:translateY(0%);
    transition: transform .5s var(--animation), border .5s var(--animation);
    }


    
    a.botton_g>div span
    {
    font-size:clamp(14px, 1.4vw, 1.2rem);
    line-height:clamp(16px, 1.4vw, 1.2rem);
    transform: translateY(0%);
    transition: transform .5s var(--animation), color .5s var(--animation);
    color:var(--black);
    display: block;
    }

    #cont_type a.botton_g>div span {
     
        color: var(--white);
        
    }

    a.botton_g img
    {
    display: block;
    height:18px;
    width:18px;
    transform: translateY(0%);
    transition: transform .5s var(--animation);
    }

    a.botton_g>div
    {
    overflow-y:hidden;
    height:18px;
    }

    a.botton_g:hover>div>span,
    #cont_type a.botton_g:hover>div span
    {
    transform: translateY(-100%);
    color:var(--black);
    }

    a.botton_g:hover>div>img
    {
    transform: translateY(-100%);
    }



    /*############ END Bottone con freccia #############*/
    
    #container.hide
    {
    opacity: 0;
    transition: opacity 1s var(--animation);
    }
    
    #mousepointer
    {
    mix-blend-mode:difference;
    position: absolute;
    width:10px;
    height:10px;
    top:0px;
    left:0PX;
    transition:all .2s ease-out;
    pointer-events: none;
    z-index:999;
    }

    #mousepointer>div
    {
    width:10px;
    height:10px;
    border-radius:50%;
    background-color:var(--white);
    transform:scale(1);
    will-change: transform;
    transition:transform .5s ease-out;
    }

    #mousepointer.active>div
    {
    transform:scale(5);
    }

    #nav_bot_mob,  #nav_mobile
    {
    display: none;
    }

    #nav_bot_mob
    {
    height: 1.35rem;
    position: absolute;
    top:0px;
    bottom:0px;
    right:calc(3.125vw*2);
    margin: auto;
    }

    #nav_bot_mob>div
    {
        height: 1.35rem;
        width:100%;
        overflow: hidden;
    }

    #nav_bot_mob::before
    {
    content:"";
    display: block;
    position: absolute;
    top:0px;
    bottom: 0px;
    margin: auto;
    left:-15px;
    width:0;
    aspect-ratio:1 / 1;
    background-color: var(--white);
    border-radius:50%;
    transform:scale(0);
    transition: transform 1s var(--animation);
    will-change: transform;
    }

    header.active #nav_bot_mob::before
    {
    transform:scale(1);
    }

    #nav_bot_mob span:first-child
    {
    transform:translateY(130%) rotateZ(15deg);
    transition: transform 1s cubic-bezier(.19,1,.22,1);
    will-change: transform;
    }

    header.active #nav_bot_mob span:first-child
    {
    transform:translateY(0%) rotateZ(0);
    }



    #nav_bot_mob span
    {
    color:var(--white);
    font-size:1.35rem;
    line-height:1.35rem;
    display: block;
    transform:translateY(0);
    transition: transform 1s cubic-bezier(.19,1,.22,1);
    }

    header.active #nav_bot_mob.open span
    {
    transform:translateY(-100%);
    }

 




    #nav_mobile
    {
    background:var(--black);
    width:100vw;
    height:0px;
    position: fixed;
    top:0px;
    left:0px;
    z-index:99;
    overflow: hidden;
    transition:height 1s cubic-bezier(.19,1,.22,1);
    }

    #nav_mobile.open
    {
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    }

    #nav_mobile>div
    {
    width:100vw;
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    position: relative;
    }

    #nav_mobile>div nav ul
    {
    position: absolute;
    transform:none;
    top:30%;
    left:10%;
    width:100%;
    }

    #nav_mobile>div nav ul li
    {
        text-align: center;
        margin-bottom:10px;
    }

    #nav_mobile>div nav a 
    {
    display: inline-block;
    text-align: center;
    font-size: 6.2rem;
    line-height: 6.3rem;
    height: 6.3rem;
    position: relative;
    }


    #nav_mobile ul li.attivo a::before {
        aspect-ratio: 1;
        content: "";
        width: 1.1rem;
        background: var(--green);
        border-radius: 100%;
        left: -10%;
        top: 0px;
        bottom: 0px;
        margin: auto;
        display: inline-block;
        position: absolute;
        transform:scale(0);
        transition:transform 1s var(--animation);
        will-change: transform;
    }

    #nav_mobile ul.active li.attivo a::before {
        
        transform:scale(1);
    }


    #nav_mobile>div nav a span
    {
    color:var(--white);
    text-transform: uppercase;
    }

    #mob_mail
    {
    position: absolute;
    bottom:40px;
    text-align:center;
    font-size: 1.375rem;
    width: 100%;
    }

    #mob_mail a
    {
    color:var(--white);
    }

    #mob_mail span
    {
    color:var(--green);
    text-decoration:none;
    }



    /* ######### TITLE EFFECT SPLITTING ######### */

    .show_text .word
    {
    display: inline-block;
    overflow: hidden; 
    }

    .show_text .word .char
    {
    display: inline-block;
    opacity: 0;
    transform: translateY(120%); 
    will-change: transform;
    }

    .show_text .active .word .char
    {
    transform: translateY(0%);
    transition: transform .8s var(--animation);
    opacity:1;
    transition-delay: calc(.02s * var(--word-index));
    }

    .show_text .active .speed .word .char
    {
    transform: translateY(0%);
    transition: transform .5s var(--animation);
    opacity:1;
    transition-delay: calc(.01s * var(--word-index));
    }

    .show_text .active .letter .word .char
    {
    transform: translateY(0%);
    transition: transform .8s var(--animation);
    opacity:1;
    transition-delay: calc(.08s * var(--char-index));
    }

    .show_text .active .letter .word .char
    {
    transform: translateY(0%);
    transition: transform .8s var(--animation);
    opacity:1;
    transition-delay: calc(.05s * var(--char-index));
    }

    .show_text #titoloFooter.active .letter .word .char
    {
    color:var(--black);
    opacity: 1;
    }

    .show_text .active .letter.slow .word .char
    {
    transform: translateY(0%);
    transition: transform .8s var(--animation);
    opacity:1;
    transition-delay: calc(.2s * var(--char-index));
    color:var(--black);
/*    font-family: serif;*/
    }


    /************ GENERAL PAGE ************/
    #page-wrap
    {
    width:100vw;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    position:fixed;
    top:0px;
    right:0px;
    z-index:1;
    }

/*    html.has-scroll-smooth {
    overflow: auto !important;
}*/

    .cont_center
    {
    width:93.75vw; 
    margin:auto;
    }

    .cont_center_no4
    {
    width:87.5vw; 
    margin:auto;
    }

    header
    {
    left:0px;
    right:0px;
    position:fixed; 
    z-index:2;
    padding-top:40px;
    font-size:16px;
    padding-bottom:30px;
    mix-blend-mode: difference;
    transform: translate3d(0,0,0) !important;
    }

    header.menu_open
    {
    mix-blend-mode:normal;
    z-index: 999999;
    }

    
    #skill
    {
    position: absolute;
    right:3.125vw;
    transform:translateY(14vh);
    }

    #skill ul li
    {
    text-transform: uppercase;
    font-size:clamp(20px, 2.6vh, 40px);
    line-height:clamp(25px, 2.7vh, 48px);
    margin-bottom:-3%;
    }


    header>div
    {
    display: flex;
    justify-content: space-between;
    align-self: center;
    }

    header #logo, #logo_h
    {
    display: block;
    width:clamp(110px, 6vw, 160px);
    fill:var(--black);
    display: block;
    z-index: 1;
    }

    #logo_h
    {
    width:28vw;
    fill:var(--black);
    top:40px;
    position: absolute;
    left:3.125vw;
    fill:var(--white);
    overflow:hidden;
    }

    #logo_h svg
    {
    width:100%;
    transform: translateY(130%);
    will-change: transform;
    }

    #logo_h.attivo svg
    {
    width:100%;
    transform: translateY(0%);
    transition: transform 1s var(--animation);
    }

    header #logo svg
    {
    display: block;
    width:28vw;
    transform:translate3d(0, 0, 0) !important;
    z-index:1;
    }

    header #logo.block svg
    {
    width:100% !important;
    transform:translate3d(0, 0, 0) !important;
    }

    nav {
    z-index: 99999999;
    right:45px;
    position: fixed;
    padding-top: 40px;
    font-size: 16px;
    padding-bottom: 30px;
    mix-blend-mode: difference;
    transform: translate3d(0, 0, 0) !important;
    }

    #nav_mobile nav {
    z-index: 99999999;
    right: 0;
    position: unset;
    padding-top: 0;
    font-size: 16px;
    padding-bottom: 30px;
    mix-blend-mode: unset;
    transform: none !important;
    }

    nav ul
    {
    display:flex;
    gap: 16px;
    flex-direction: column;
    }

    nav ul a
    {
    display: inline-block;
    line-height: 110%;
    height: 1rem;
    overflow: hidden;
    }

    nav ul a div
    {
    display: flex;
    }

 
    nav ul li {
    position: relative;
    align-items: flex-start;
    display: flex;
    text-transform: uppercase;
    flex-direction: column;
    }

    ul.inner-menu {
    margin-left: 20px;
    flex-direction: column;
    justify-content: center;
    max-height: 0;
    transition: max-height 1s cubic-bezier(.19,1,.22,1);
    //transition: max-height 0.15s ease-out;
    will-change: max-height;
    overflow: hidden;
    position: relative;
    opacity: 0;
    //display: none;
    }

    .panelOpen ul.inner-menu {
    //max-height: none;
    display: flex;
    max-height: 500px;
    transition: max-height 1s ease-in;
    //transition: max-height 1s cubic-bezier(.19,1,.22,1);
    opacity: 1;
    margin-top: 16px;
    }

    ul.inner-menu li a div {
        color: var(--white);
    }

    .number {
    width: .9722222222vw;
    font-size: .5755555556vw;
    display: inline-flex;
    font-weight: normal;
    }

    .inner-menu .number {
    font-size: .5555555556vw;
    margin-right: .4861111111vw;
    }

    nav ul li.attivo::before
    {
    /*aspect-ratio: 1;
    content: "";
    width: 9.1rem;
    height: 1.6em;
    background: #f5f5f563;
    /* border-radius: 100%; */
    /*display: inline-block;
    left: -0.4rem;
    position: absolute;
    transform: scale(0); */
    }

    header.active nav ul li.attivo::before
    {
        
        transform: scale(1);
        transition:transform 1s var(--animation); 
    }

    nav ul span
    {
    color:var(--white);
    font-size: 1rem;
    line-height: 1.1rem;
    letter-spacing:0.5px;
    }

    #nav_mobile nav ul span
    {
    color:var(--white);
    font-size: 2rem;
    line-height: 2.1rem;
    }

    nav ul a span.char
    {
    transform:translateY(0%);
    transition:transform .4s cubic-bezier(0.76, 0, 0.24, 1);
    transition-delay:calc(.05s * var(--char-index));
    will-change: transform;
    }

    nav ul a:hover span.char
    {
/*    transform:translateY(-100%);*/
    }


    /************ Artwork Start Home ************/

    #cielo
    {
    position: absolute;
    overflow: hidden;
    width:100%;
    height: 100%;
    z-index: -1;
    top:0px;
    }

    #cielo img
    {
    width:100%;
    height:100%;
    transform: scale(2);
    object-fit: fill;
    }

    main>section
    {
        position: relative;
    }

    #apertura
    {
    height:0;
    width:100vw;
    overflow: hidden;
    }

    #apertura #princBlock
    {
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    width:100%;
    }

    #apertura #princBlock #artwork
    {
    width:95%;
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    opacity: 0;
    margin: auto;
    position: relative;
    transform:translateY(35vh);
    }

    #start.active #apertura #princBlock #artwork
    {
    opacity: 1;
    transition:opacity 1s var(--animation);
    }

    #apertura #princBlock #artwork>div
    {
    transform:translateY(20vh) scale(1.5) rotateZ(15deg);
    width:100%;
    height: 100%;
    position: absolute;
    }

    #start.active #apertura #princBlock #artwork>div
    {
    transform:scale(1) rotateZ(0deg);
    transition:transform 1.5s var(--animation);
    will-change: transform;
    }

    #start.active.active_l #apertura #princBlock #artwork>div
    {
    transform:scale(1) rotateZ(0deg);
    transition:none;
    }

    #apertura #astronauta
    {
    width:100%;
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    position: absolute;
    transform: translateY(-33%);
    }

    #apertura #astronauta img
    {
    display: block;
    width:clamp(400px, 30vw, 99999px);
    position: absolute;
    transform: translate(-50%, -50%);
    left:50%;
    top:50%;
    }

    #sfondo_black
    {
    background: var(--black);
    width:100%;
    height: 100%;
    position: absolute;
    z-index: 5;
    opacity: 0;
    }

    /************ General ************/

    .flex-column
    {
    display: flex;
    justify-content: space-between;
    align-self: center;
    }

    .startSection span
    {
    color:var(--white);
    }

    .startSection.black,
    .startSection.black span
    {
    color:var(--black);
    }

    .startSection h2,
    .startSection p
    {
    width:34.375vw;
    margin:0px;
    }

    .startSection h2
    {
    font-size: clamp(1.5rem, 5vw, 1.875rem);
    color:var(--black);
    text-transform: uppercase;
    }

    #designSocial .bigText
    {
    padding-bottom:var(--bigMarginTopBottom);
/*    gap: 4em;*/
/*    align-items: flex-end;*/
    }

    .title_is_one span
    {
    color:var(--white);
    }

    .startSection h2.white span
    {
    color:var(--white);
    }


    .startSection p
    {
    font-size:1.25rem;
    line-height: 1.363rem;
    }

    .startSection span.small_data
    {
    font-size:1rem;
    line-height: 1.5rem;
    }
    
    .bigText, .smallText
    {
    justify-content: center !important;
    }
   
    .bigText
    {
/*    padding-top:80px;*/
    }

    .smallText
    {
    padding-top:20px;  
    }
   
    .bigText p
    {
    max-width:1600px;
    }

    .bigText p
    {
    width:clamp(600px, calc(3.125vw * 20), 1300px);
    margin-bottom: 0px;
    }

    .smallText p
    {
    width:clamp(400px, calc(3.125vw * 13), 1200px);
    margin-bottom: 0px;
    }
    
    .bigText p span,
    .bigText p
    {
    color:var(--white);
    font-size:1rem;
    line-height:1.5rem;
    margin-bottom: 0.7rem;
    }

    .bigText span,
    .smallText span
    {
    margin-top:-1.5%;
    }

    .smallText p span,
    .smallText p
    {
    color:var(--white);
    font-size:clamp(1.7rem, 1.5vw, 40px);
    line-height:clamp(1.9rem, 1.7vw, 45px);
    }
   
    .bigText.black p span, .smallText.black p span,
    .bigText.black p, .smallText.black p
    {
    color:var(--black);
    }

    .bigText p>span:first-child,
    .smallText p>span:first-child
    {
    margin-left: 18.75vw;
    }


    /************ Home - ROOTS ************/
   
    #roots
    {
    padding-top:37em;
    padding-bottom:29em;
    background: var(--black);
    margin-top: -20px;
    z-index:2;
    background: url(img/new-york-4-smaller.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    }

    #roots h2
    {
    width:81.25vw;
    margin: auto;
    font-size:clamp(5.6rem, 8.7vw, 999px);
    line-height:clamp(6rem, 9.2vw, 999px);
    text-transform: uppercase;
    display: grid;
    grid-template-columns: repeat(26,1fr);
    grid-template-rows: auto auto 1fr 1fr 1fr 2fr;
    }

    @media screen and (max-width: 1600px) {
        #roots h2
        {
            grid-template-rows: auto auto 1fr 1fr 1fr 1.3fr;
        }
    }
    
    #roots div>span
    {
    display: block;
    }

    #roots span.word
    {
    color:var(--white);
    opacity:0.1;
    }

    #roots span.word
    {
    transition:opacity 1s var(--animation);
    }
 
    #roots h2>div
    {
    display: flex;
    margin-bottom:-2%;
    }

    #roots h2>div>span
    {
    display: inline-block;   
    }

    #roots h2 span.small
    {
    font-size:clamp(1.5rem, 1.6vw, 999px);
    line-height:clamp(1.7rem, 2.1vw, 999px);
    padding-top:15px;
    margin-right:5px;
    position: relative;
    width:18.75vw;
    text-align: right;
    }

    #roots h2 span.small.left
    {
    text-align: left;
    margin-right:0px;
    margin-left:5px;
    }

    #roots h2 span.small>span.tt
    {
    margin-right:4px;
    }

    #roots h2 span>span.imgHide,
    #roots h2 span>span.imgHide>span
    {
    width:12.5vw;
    aspect-ratio: 205 / 116;
    position: absolute;
    top:.8vw;
    right:0px;
    display: block;
    margin:0px;
    }

    #roots h2 span.left>span.imgHide,
    #roots h2 span.left>span.imgHide>span
    {
    left:0px;
    }

    #roots h2 span>span.imgHide>span
    {
    width:0;
    top:-0.2vw;
    right:0px;
    height: 100%;
    transition: width .5s var(--animation);
    }

    #roots h2 div>span.active>span.imgHide>span
    {
    transition: width .5s var(--animation);
    width:100%;
    }

    #roots h2 span>span.imgHide img
    {
    width:100%;
    }

    #roots h2>div:first-child
    {
    grid-column: 4 / 27;
    }

    #roots h2>div:nth-child(2)
    {
    grid-column: 7 / 27;
    }

    #roots h2>div:nth-child(3)
    {
    grid-column: 5 / 27;
    }

    #roots h2>div:nth-child(4)
    {
    grid-column: 1 / 27;
    }

    #roots h2>div:nth-child(5)
    {
    grid-column: 1 / 27;
    }

    #roots h2>div:last-child
    {
    grid-column: 1 / 27;
    }

    .mastherad-sub-header {
    font-size: 0.3em;
    }

    @media screen and (max-width: 512px) {
        .mastherad-sub-header {
        font-size: 0.4em;
        }

        #roots h2 {
        grid-template-rows: auto auto 1fr 1fr 1fr 2.1fr;
        }
    }

    /************ Home - Design SOCIAL ************/

    #designSocial
    {
/*    padding-top: var(--bigMarginTopBottom);*/
    background:var(--white);
    }

    #designSocial.home-sec {
    padding-top: var(--bigMarginTopBottom);
    }

    #blockPEACE,
    #love
    {
    width: 100%;
    height:6000px;
    }

    #blockPEACE
    {
    
    }

    #peaceCONT
    {
    overflow: hidden;
    }
    
    #peaceCONT
    {
    width:100%;
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    background:transparent;
    overflow: hidden;
    position:relative;
    background: url(img/truss-2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    }

    #bomb
    {
    width:clamp(600px, 40vw, 1000px);
    aspect-ratio: 1;
    position: absolute;
    transform:translate(-50%, 100%);
    left:50%;
    top:50%;
    mix-blend-mode: multiply;
    z-index:5;
    }

    #peaceCONT #scritta_peace
    {
    font-size: 60vw;
    line-height:40vw;
    width:100%;
    height:40vw;
    position: absolute;
    top:0;
    bottom:0;
    margin: auto;
    transform:translateX(-50%);
    }

    #peaceCONT #scritta_peace span
    {
    width:99999px;
    display: block;
    color:var(--white);
    }

    #bomb>picture,
    #bomb>picture img
    #peaceText>picture,
    #peaceText>picture img
    {
    width:100%;
    display:block;
    }

    #fiori, #buco
    {
    opacity: 0;
    position: absolute;
    top:0px;
    left:0px;
    z-index: 3;
    }

    #fiori
    {
    transform: scale(0.4);
    }
    
    #buco
    {
    z-index: 2;
    }

    #bomba_t
    {
    position: absolute;
    top:0px;
    }

    #bomba_b
    {
    position: relative;
    z-index: 1;
    }

    #bomb.active #buco
    {
    opacity:1;
    transition:opacity .01s;
    }

    #bomb.active>picture#bomba_t
    {
    transform:translate(30%, -20%) rotate(80deg);
    width:70%;
    transition: width 1s var(--animation), transform 1.5s var(--animation);
    }

    #bomb.active #fiori
    {
    opacity: 1;
    transform: scale(1);
    transition: opacity .2s var(--animation), transform .5s var(--animation);
    }

    /************ Home - Fight ************/

    #fight
    {
    background-color:var(--black);
    height:400vh;
    position: relative;
    }

    #fight>div,
    #fight>div>div
    {
    width:100%;
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    }

    #fight>div h3
    {
    position: absolute;
    opacity: 1;
    height:clamp(100px, 8vw, 400px);
    mix-blend-mode: difference;
    }

    #fight>div h3:first-child
    {
    top:calc(9.25vh*2);
    left:10.125vw;
    }

    #fight>div h3:nth-child(2)
    {
    bottom:15vh;
    right:11vw;
    }

    #fight>div h3 span
    {
    font-size:clamp(130px, 11vw, 400px);
    line-height:clamp(140px, 12vw, 400px);
    color:var(--white);
    margin-left:-0.3vh;
    text-transform: uppercase;
   font-family: 'GillSansBold';;
    }

    .globe-vid {
    width: 100%;
    }

    .text_fight
    {
    position: absolute;
    left:calc(3.125vw*7.5);
    width:clamp(200px, calc(3.125vw*5), 300px);
    top:calc(6.25vh*6);
    }

    .text_fight p
    {
    margin: 0px;
    }

    .text_fight.second
    {
    top:auto;
    left:calc(3.125vw*20.5);
    bottom:calc(6.25vh*5);
    }

    .text_fight span
    {
    color:var(--white);
    font-size:1.2rem;
    }

    #fight>div h3 span.small
    {
    margin:0px 20px;
    }

    #fight>div h3 span.small span
    {
    font-size:clamp(60px, 4vw, 120px);
    line-height:clamp(50px, 9vw, 250px);
    text-transform:lowercase;
    }

    #fight .post
    {
    position: absolute;
    aspect-ratio:1900 / 1286;
    width:clamp(255px, calc(7.125vw * 3.5), 400px);
    overflow: hidden;
    }

    #fight .post::before
    {
    content: "";
    display: block;
    width:100%;
    height:100%;
    position: absolute;
    z-index:3;
    background:var(--green);
    will-change: transform;
    }

    #fight>div.active .post::before
    {
    transform:translateY(-130%);
    transition:transform 1.2s var(--animation);
    }

    #fight #war
    {
    left:4.125vw;
    bottom:calc(3.25vh*4);
    width: clamp(155px, calc(6.125vw* 3.5), 400px);
    }

    #fight #ukraine
    {
    left:calc(3.125vw*7.5);
    bottom:6.25vh;
    width: clamp(205px, calc(3.125vw* 3.5), 400px);
    }

    #fight #memorial
    {
    left:calc(3.125vw * 20.5);
    top:calc(6.25vh*2);
    }

    #fight #agitatevi
    {
    top:0%;
    left:0%;
    right:0px;
    bottom:0px;
    margin:auto;
    background-color:#000;
    display: flex;
/*    z-index: 3;*/
width:clamp(455px, calc(3.125vw * 3.5), 400px);
    }

    #agitatevi video, #fight .post.hide picture video, #roots h2 span>span.imgHide>span video {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 1;
    }

    #fight #race
    {
    right:4.125vw;
    bottom:calc(7.25vh*6);
    z-index: -1;
    width: clamp(175px, calc(3.125vw* 3.5), 400px);
    }

    #fight>div img
    {
    width:100%;
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    margin: auto;
    transform: scale(1.2);
    }

    #fight>div.active img
    {
    transform: scale(1);
    transition:transform 1.2s var(--animation);
    }

    .text_fight p>span 
    {
    margin-bottom:-5%;
    }

    .team-slide {
    display: block;
    } 

    /************ Home - Branding ************/

    #branding
    {
    background: var(--white);
    padding-top: var(--bigMarginTopBottom);
    padding-bottom: var(--bigMarginTopBottom);
    overflow: hidden;
    margin-top:-20px;
    display: none;
    }

    #brand_col
    {
    display: flex;
    width:auto;
    margin: auto;
    margin-top:0;
    gap: 25px;
    padding: 2em;
    }

    #brand_col ul
    {
    margin:0px;
    padding: 0px;
    width:33%;
    transform-origin:bottom left;
    }

    #brand_col li
    {
    width:100%;
    border:1px solid #3b3b3b;
    margin-bottom:25px;
    transform-origin:bottom left;
    aspect-ratio: 1 / 1;
/*    border-radius:20px;*/
    position: relative;
    justify-content:center;
    display: flex;
    flex-direction: column;
    transform: none !important;
    }

    /*#brand_col li>div
    {
    display: flex;
    justify-content:space-between;
    position: absolute;
    top:40px;
    width:85%;
    }*/

    #brand_col li>div:last-child
    {
    top:auto;
    bottom:40px;
    }

    /*#brand_col li picture
    {
    position: absolute;
    display: block;
    width:50%;
    top:50%;

    transform: translateY(-50%);
    }*/

/*    #brand_col li picture.rect
    {
    width:60%;
    }*/

    #brand_col li picture img
    {
    width:100%;
    }

    #brand_col li>div span,
    #brand_col li>div h3
    {
    font-size:20px;
/*    color:#000;*/
    }
    
    #brand_col .right,
    #brand_col .right li
    {
    transform-origin:bottom right;
    }

    #branding .startSection h2
    {
    width: 100% !important;
    color:var(--white);
    }
    
    #branding .startSection picture img
    {
    width:100%;
    }

    /* Initially hide the bio */
    .team-member .team-member-bio {
/*        display: none;*/
        height: 0;
        overflow: hidden;
        transition: all 1s ease;
    }

    /* Add styles for the open state */
    .team-member.open .team-member-bio {
        display: block;
        padding: 0 1em 1em;
        height: auto; /* This will be dynamically set using JS */
    }

    .toggle-bio {
        cursor: pointer;
        background-color: transparent;
        color: #000;
        border: 0.5px solid #000;
        border-top: 1px solid #000;
        padding: 5px 10px;
        margin: 0;
        margin-top: -5px;
        height: 50px;
    }

    .toggle-bio:hover, .team-member.open .toggle-bio {
        background-color: #000;
        color: #fff;
    }

    /* Home - Font */

    #type
    {
    padding-top:var(--bigMarginTopBottom);
    }

    #type.project
    {
    padding-top: 200px;
    }

    #type h2,
    #cont_poster h2, #branding h2
    {
    font-size: 11vw;
    line-height: 17vw;
    text-align: right;
    margin-right: 0.5em;
/*    text-transform: uppercase;*/
    }

    #type h2.kagami-font, #type h2.medusa-font, #type h2.the-life-font, #type h2.an-ark-font {
    text-align: center;
    margin-right: 0;
    line-height: 12vw;
    text-transform: uppercase;
    }

    .an-ark-font .word span {
    font-family: 'FoundersGrotesk';
    font-weight: bold; 
    letter-spacing: 20px;
    }

    .kagami-font .word span {
    font-family:'DIN Alternate';
    }

    .medusa-font .word span {
    font-family:'Harbour-Light';
    }

    .the-life-font .word span {
    letter-spacing: 34px;
    font-weight: bold;
    }

    .the-life-font-single .word span {
    letter-spacing: 8px;
    }

    #poster h2
    {
    position: absolute;
    }

    .an-ark p, .an-ark span {
    font-family: 'FoundersGrotesk';
    }

    .an-ark h1, .an-ark h2 {
    font-family: 'FoundersGrotesk';
    font-weight: bold;
    letter-spacing: 12px;
    text-align: center;
    }

    .an-ark-header {
    font-family: 'FoundersGrotesk';
    font-weight: bold;
    letter-spacing: 12px;
    text-align: center;
    }

    .ark-italic {
    font-family: 'FoundersGrotesk';
    font-style: italic;
    }

    #cont_type
    {
    width:81.25vw;
    margin:auto;
    position: relative;
    padding-bottom:var(--bigMarginTopBottom);
    }

    .project #cont_type
    {
    width:auto;
    padding: 2em;
    }

    #cont_type>div
    {
    width:26.25vw;
    margin-bottom:133px;
    position: relative;
    }

    #cont_type>div.margin-top
    {
    margin-top:-14vw;
    margin-left: 19%;
    }

    #cont_type>div.rightish
    {
    margin-top:-2vw;
    margin-left: 32%;
    }

    #cont_type>div.right
    {
    position: absolute;
    right:137px;
    margin-top: -7vw;
    }

    #cont_type>div.an-ark-tile
    {
    position: absolute;
    right:337px;
    margin-top: -3vw;
    }

    #cont_type>div.new-one
    {
    margin-top:0vw;
    margin-left: 5%;
    margin-bottom: 30px;
    }

    #cont_type>div.margin-top-2
    {
    margin-top:-5vw;
    margin-left: -12%;
    }

    #cont_type>div.rightish-2
    {
    margin-top:-35vw;
    margin-left: 66%;
    }

    #cont_type>div.right-2
    {
    position: absolute;
    right:282px;
    margin-top: 0vw;
    }

    #cont_type picture,
    #cont_type img
    {
    width:100%;
    display: block;
    margin: auto;
    }

    #cont_type>div #hearth
    {
    position: absolute;
    top:15vh;
    left:0px;
    right:0px;
    margin:auto;
    width:90%; 
    mix-blend-mode:multiply;
    }

    .text_font
    {
    width: clamp(303px, 15.625vw, 999999px);
    aspect-ratio: 1.6 / 2;
    background: var(--black);
    position: relative;
    top: 0px;
    bottom: 0px;
    margin: auto;
    right: -5.69vw;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    transition: 1s;
    }

    #cont_type>div .text_font
    {
    background-image: url("img/kagami_poster_image.webp");
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 2000px rgba(255, 255, 255, 1);
    border: 1px solid #000;
    }

    #cont_type>div:hover .text_font
    {
    width: 810px;
    aspect-ratio: 1.6 / 1;
    right: -4.31vw;
    z-index: 99;
    box-shadow: inset 0 0 0 2000px rgba(0,0, 0, 0.3);
    }

    #cont_type>div.right-2:hover .text_font {
    right: 4.69vw;
    }

    #cont_type>div.rightish-2:hover .text_font {
    right: 25.69vw;
    }

    #cont_type>div.margin-top .text_font, #cont_type>div.margin-top-2 .text_font
    {
    background-image: url("img/thelife.jpeg");
    }

    #cont_type>div.margin-top:hover .text_font
    {
    right: 3.31vw;
    }

    #cont_type>div.right .text_font, #cont_type>div.right-2 .text_font
    {
    background-image: url("img/medusa.jpeg");
    }

    #cont_type>div.right:hover .text_font
    {
    right: 14.31vw;
    }

    #cont_type>div.an-ark-tile .text_font, #cont_type>div.margin-top-2 .text_font
    {
    background-image: url("img/AN_ARK.webp");
    }

    /*#cont_type>div.rightish .text_font, #cont_type>div.rightish-2 .text_font
    {
    background-image: url("img/truss-2.jpg");
    }*/

    #cont_type>div.rightish .text_font
    {
    background-image: none;
    aspect-ratio: 2 / 1.3;
    width: clamp(620px, 15.625vw, 999999px);
    }

    #cont_type>div.rightish:hover .text_font {
    width: 810px;
    aspect-ratio: 1.6 / 1;
    right: -4.31vw;
    z-index: 99;
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
    }

    #cont_type>div.rightish .text_font div h3 {
    visibility: visible;
    transition: visibility 0.7s;
    }

    #cont_type>div.rightish:hover .text_font div h3
    {
    visibility: hidden;
    transition: visibility 0s;
    }

    #cont_type>div.rightish .text_font div div {
    visibility: hidden;
    height: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 62px;
    transition: 0.7s;
    }

    #cont_type>div.rightish:hover .text_font div div
    {
    visibility: visible;
    height: auto;
    padding: 3em 4em;
    position: absolute;
    left: 0;
    top: 62px;
    transition: 0.7s;
    }

    #cont_type>div.rightish .text_font div div p {
    color: #fff;
    }

    #cont_type>div.rightish:hover .text_font
    {
    right: 10.31vw;
    }

    #cont_type>div.new-one .text_font {
    background-image: none;
    box-shadow: inset 0 0 0 2000px rgba(255, 255, 255, 1);
    border: 0;
    background: transparent;
    aspect-ratio: auto;
    width: clamp(323px, 15.625vw, 999999px);
    }

    #cont_type>div.new-one:hover .text_font h3 {
    color: #000;
    }

    /* ======================== PRESS LAYER ======================== */

    #press_layer {
    position: relative;
    z-index: 10;
    margin-top: -50vh;
    height: 45vh;
    pointer-events: none;
    overflow: visible;
    }

    #press_cont {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
    }

    .press-tile {
    position: absolute;
    pointer-events: auto;
    transform: translateX(var(--pressX, 0px));
    z-index: 6;
    will-change: transform;
    }

    .press-tile:nth-child(1) { left: 5%;  top: 4vh; }
    .press-tile:nth-child(2) { left: 19%; top: 22vh; }
    .press-tile:nth-child(3) { left: 32%; top: 7vh; }
    .press-tile:nth-child(4) { left: 47%; top: 19vh; }
    .press-tile:nth-child(5) { left: 60%; top: 4vh; }
    .press-tile:nth-child(6) { left: 72%; top: 24vh; }
    .press-tile:nth-child(7) { left: 71%; top: 10vh; }
    .press-tile:nth-child(8) { left: 44%; top: 33vh; }
    .press-tile:nth-child(9) { left: 20%; top: 35vh; }

    .press-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    cursor: pointer;
    transition: width 0.45s ease, transform 0.45s ease, padding 0.45s ease, box-shadow 0.3s ease, background 0.3s ease;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: relative;
    transform: translateX(0px);
    }

    .press-size-large  .press-card { width: 230px; }
    .press-size-medium .press-card { width: 190px; }
    .press-size-small  .press-card { width: 150px; }

    .press-card > img {
    width: 80%;
    max-height: 63px;
    object-fit: contain;
    filter: invert(1) brightness(2);
    display: block;
    margin: 0 auto;
    flex-shrink: 0;
    }

    .press-size-small .press-card > img { max-height: none; }

    .press-expand {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s ease, opacity 0.35s ease, margin-top 0.35s ease;
    margin-top: 0;
    text-align: center;
    width: 100%;
    }

    .press-quote {
    font-size: 11px;
    line-height: 1.4;
    color: #fff;
    margin: 0 0 6px;
    font-style: italic;
    }

    .press-outlet {
    display: block;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    }

    .press-cta {
    display: inline-block;
    font-size: 11px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 4px 10px;
    border-radius: 2px;
    letter-spacing: 0.05em;
    pointer-events: none;
    transition: background 0.2s;
    }

    .press-cta:hover { background: rgba(255, 255, 255, 0.2); }

    .press-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
    border-radius: 2px;
    margin-bottom: 8px;
    }

    .press-thumb {
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    }

    .press-thumb::after {
    content: '▶';
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    }

    /* Video tiles expand wider so the iframe has room */
    @media (hover: hover) {
        .press-tile[data-type="video"]:hover .press-card { width: 340px; transform: translateX(-55px); }
    }

    .press-tile[data-type="video"].is-open .press-card { width: 340px; transform: translateX(-55px); }

    @media (hover: hover) {
        .press-tile:hover { z-index: 20; }
        .press-tile:hover .press-card {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
        background: rgba(255, 255, 255, 0.2);
        }
        .press-size-large:hover  .press-card { width: 260px; transform: translateX(-15px); }
        .press-size-medium:hover .press-card { width: 220px; transform: translateX(-15px); }
        .press-size-small:hover  .press-card { width: 180px; transform: translateX(-15px); }
        .press-tile:hover .press-expand {
        max-height: 200px;
        opacity: 1;
        margin-top: 12px;
        }
        .press-tile:hover .press-cta { pointer-events: auto; }
    }

    .press-tile.is-open { z-index: 20; }

    .press-tile.is-open .press-card {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
    background: rgba(255, 255, 255, 0.2);
    }

    .press-tile.is-open.press-size-large  .press-card { width: 260px; transform: translateX(-15px); }
    .press-tile.is-open.press-size-medium .press-card { width: 220px; transform: translateX(-15px); }
    .press-tile.is-open.press-size-small  .press-card { width: 180px; transform: translateX(-15px); }

    .press-tile.is-open .press-expand {
    max-height: 200px;
    opacity: 1;
    margin-top: 12px;
    }

    .press-tile.is-open .press-cta { pointer-events: auto; }

    @media (max-width: 768px) {
        #roots {
        padding-bottom: 23em;
        }

        #press_layer { margin-top: -48vh; height: 38vh; }
        .press-size-large  .press-card { width: 109px; }
        .press-size-medium .press-card { width: 110px; }
        .press-size-small  .press-card { width: 80px; }
        .press-tile:nth-child(1) { left: -8%; }
        .press-tile:nth-child(2) { left: 29%; top: 17vh; }
        .press-tile:nth-child(3) { left: 35%; top: 5vh; }
        .press-tile:nth-child(4) { left: 74%; top: 17vh; }
        .press-tile:nth-child(5) { left: 8%; top: 29vh; }
        .press-tile:nth-child(6) { left: 61%; top: 31vh; }
        .press-tile:nth-child(7) { left: 100%; }
        .press-tile:nth-child(8) { left: 100%; }
        .press-tile:nth-child(9) { left: 100%; }

        /* is-open: transition transform so --pressX animates smoothly open and close */
        .press-tile.is-open {
        z-index: 9999;
        transition: transform 0.45s ease !important;
        }
        .press-tile.is-open .press-card {
        width: 100% !important;
        transform: translateX(0px) !important;
        }
        .press-tile[data-type="video"].is-open .press-card {
        width: 100% !important;
        transform: translateX(0px) !important;
        }
        .press-tile.is-open .press-expand {
        max-height: 70vh;
        }
    }

    /* ====================== END PRESS LAYER ====================== */

    #cont_type>div.todd {
    margin-top: -1vw;
    margin-left: -3%;
    }

    #cont_type>div.david {
    margin-top: -30vh;
    right:321px;
    }

    #cont_type>div.mary {
    margin-top: -20vh;
    }

    #cont_type>div.yoyo{
    right: 616px;
    margin-top: -30vw;
    }

    #cont_type>div.cora {
    margin-top: -15vw;
    margin-left: -7%;
    }

    #cont_type>div.tomaso {
    margin-top: -26vw;
    margin-left: 61%;
    }

    #cont_type>div.laurentiu {
    right: 408px;
    margin-top: -7vw;   
    }

    #cont_type>div.louisa {
    right: 911px;
    margin-top: -20vw;
    }

    #cont_type>div.oded {
    right: 582px;
    margin-top: -2vw;
    }

    #cont_type>div.ben {
    right: 36px;
    margin-top: -9vw;
    }

    #cont_type>div.rory{
    margin-top: 2vw;
    margin-left: -3%;
    right: unset;
    }

    #cont_type>div.rebecca {
    right: 214px;
    margin-top: 12vw;   
    }

    .floating-title {
    text-transform: none !important;
    font-size: 4.3em !important;
    }

    #cont_type>div .text_font.bio-cont {
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
    }

    #cont_type>div.todd .text_font.bio-cont {
    background-image: url(img/ToddEckert.webp);
    }

    #cont_type>div.david .text_font.bio-cont {
    background-image: url(img/DavidViecelli.webp);
    }

    #cont_type>div.mary .text_font.bio-cont {
    background-image: url(img/MaryHickson.webp);
    }

    #cont_type>div.yoyo .text_font.bio-cont {
    background-image: url(img/yoyo_headshot.webp);
    }

    #cont_type>div.cora .text_font.bio-cont {
    background-image: url(img/CaroCahan.webp);
    }

    #cont_type>div.tomaso .text_font.bio-cont {
    background-image: url(img/TomasoCariboni.webp);
    }

    #cont_type>div.laurentiu .text_font.bio-cont {
    background-image: url(img/LaurentiuFenes.webp);    
    }

    #cont_type>div.ben .text_font.bio-cont {
    background-image: url(img/BEN-CHAMBERLAIN.webp);    
    }

    #cont_type>div.louisa .text_font.bio-cont {
    background-image: url(img/LouisaMichaels.webp);    
    }

    #cont_type>div.oded .text_font.bio-cont {
    background-image: url(img/OdedGera.webp);    
    }

    #cont_type>div.rory .text_font.bio-cont {
    background-image: url(img/RoryHowson.webp);
    }

    #cont_type>div.rebecca .text_font.bio-cont {
    background-image: url(img/RebeccaRoche.webp);    
    }

    #cont_type>div:hover .text_font.bio-cont {
    width: 510px;
    aspect-ratio: 1 / 1.2;
    right: -4vh;
    z-index: 99;
    box-shadow: inset 0 0 0 2000px rgba(255, 255, 255, 1);
    overflow: hidden;
    }

    #cont_type>div.todd:hover .text_font.bio-cont {
    aspect-ratio: 1 / 0.76;
    right: -10vh;
    }

    #cont_type>div.david:hover .text_font.bio-cont {
    aspect-ratio: 1 / 0.5;
    right: -5vh;
    }

    #cont_type>div.mary:hover .text_font.bio-cont {
    aspect-ratio: 1 / 1.35;
    right: 4vh;
    }

    #cont_type>div.yoyo:hover .text_font.bio-cont {
    aspect-ratio: 1 / 0.96;
    right: -3vh;
    }

    #cont_type>div.tomaso:hover .text_font.bio-cont {
    aspect-ratio: 1 / 1.19;
    right: -2vh;
    }

    #cont_type>div.cora:hover .text_font.bio-cont {
    aspect-ratio: 1 / 0.85;
    right: -8vh;
    }

    #cont_type>div.laurentiu:hover .text_font.bio-cont {
    aspect-ratio: 1 / 0.88;
    right: -8vh;
    }

    #cont_type>div.louisa:hover .text_font.bio-cont {
    aspect-ratio: 1 / 0.5;
    right: -14vh;
    }

    #cont_type>div.oded:hover .text_font.bio-cont {
    aspect-ratio: 1 / 0.5;
    /*right: 782px;
    margin-top: -2vw;*/
    }

    #cont_type>div.ben:hover .text_font.bio-cont {
    aspect-ratio: 1 / 0.4;
    /*right: 36px;
    margin-top: -9vw;*/
    }

    #cont_type>div.rebecca:hover .text_font.bio-cont {
    aspect-ratio: 1 / 0.73;
    right: -8vh;
    }

    .team-bio {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    height:0;
    transition: 0.7s;
    font-size: 0.8em;
    left: 0;
    top: 37px;
    width: 100%;
    transition: 0.2s;
    }

    .team-bio p {
    color: #fff;
    }

    #cont_type>div:hover .text_font.bio-cont .team-bio {
    visibility: visible;
    position: absolute;
    height: auto;
    opacity: 1;
    padding: 0 2em;
    transition: 0.7s;
    }

    #ourteam li h3, #ourteam li div span {
    position: absolute;
    font-weight: normal;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
    font-size: 1.4em;
    padding: 0.4em;
    transition: 0.7s;
    }

    #ourteam li h3 {
    top:0;
    left:0;
    }

    #ourteam li div span {
    bottom: 0;
    right:0;
    }

    #cont_type>div:hover .text_font.bio-cont #ourteam li div span, #cont_type>div:hover .text_font.bio-cont #ourteam li h3, #cont_type>div:hover .text_font.bio-cont #ourteam .team-bio p {
    position: absolute;
    transition: 0.7s;
    padding: 0.4em;
    color: #000;
    }

    #cont_type>div:hover .text_font.bio-cont #ourteam .team-bio p {
    position: relative;
    }

    .team-bio p {
    color: #fff;
    padding: 1em;
    transition: 0.7s;
    }

    .text_font>div
    {
    width:auto;
    }

    .text_font h3
    {
    font-size: clamp(2.8rem, 1.7vw, 3rem);
    line-height: clamp(1.6rem, 1.7vw, 2.5rem);
    color: var(--black);
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    }

    .team-slide .text_font h3
    {
    text-transform: none;
    }

    #cont_type>div:hover .text_font h3
    {
    color: var(--white);
    }

    .margin-top h3, .margin-top-2 h3
    {
    font-weight: bold;
    letter-spacing: 5px;
    }

    /*.rightish h3
    {
    font-size: clamp(1.8rem, 1.7vw, 3rem);
    }*/
    
    .text_font li
    {
    color:var(--white);
    margin-bottom:3px;
    }

    #circle_s
    {
    display: block;
    width:15vw;
    aspect-ratio:1 / 1;
    border-radius: 50%;
    background-color: var(--green);
    z-index:2;
    position: absolute;
    top:8vw;
    left:0px;
    right:0px;
    margin: auto;
    }

    #rectangle_s
    {
    display: block;
    position: absolute;
    bottom:10%;
    left:0px;
    right:0px;
    margin:auto;
    z-index:3;
    mix-blend-mode:multiply;
    }

    #rectangle_s>span
    {
    display: block; 
    width:6vw;
    aspect-ratio:83 / 481;
    background-color: var(--green);
    mix-blend-mode:multiply;
    transform:rotate(-55deg);
    transform-origin:center;
    margin:auto;
    }

    .testo_stelvio
    {
    width: 100%;
    font-size:clamp(10.5rem, 11vw, 99999px);
    display: block;
    text-align: center;
    }

    .testo_stelvio.bottom
    {
    position: absolute;
    bottom:5vw;
    }

    #acquila
    {
    position: relative;
    top:-7vw;
    z-index:3;
    }

    #rectangle_back
    {
    width:75%;
    left:0px;
    right:0px;
    margin: auto;
    aspect-ratio: 406 / 637;
    background: var(--green);
    mix-blend-mode: multiply;
    position:absolute;
    top:0px;
    }

    #e_july
    {
    left:0px;
    position:absolute;
    top:0px;
    width:100%;
    }

    #woman
    {
    position: relative;
    z-index:3;
    }

    .text_font.july
    {
    top:10vw;
    bottom:auto;
    }

    /* Home - Poster */

    #cont_poster
    {
    background: var(--black);
    }

    #cont_poster>div>h2 span
    {
    color: var(--white);
    margin:5vw 0 3vw 0;
    }

    #poster
    {
    width:100%;
    height:800vh;
    overflow:hidden;
    }

    #poster>div>div#cont_poster_total
    {
    width:100%;
    overflow:hidden;
    height: calc(var(--vh, 1vh) * 100);
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap:2vw;
    }

    .circle_rotate
    {
    width:calc(3.125vw * 3);
    position: relative;
    transform:scale(1);
    transition: transform .8s var(--animation);
    will-change: transform;
    }

    .circle_rotate.behance
    {
    width:clamp(128px, calc(3.125vw * 2.5), 99999px);
    }

    .circle_rotate:hover
    {
    transform:scale(1.1);
    transition: transform .8s var(--animation);
    }

    .circle_rotate.behance
    {
    margin:auto;
    margin-top:30px;
    }

    .circle_rotate.behance a
    {
    opacity: 0;
    transform: scale(0.8);
    }

    .active .circle_rotate.behance a
    {
    opacity: 1;
    transform: scale(1);
    transition: opacity 2s var(--animation), transform 2s var(--animation);
    }

    .circle_rotate.absolute
    {
    width:clamp(150px, calc(3.125vw * 3), 9999px);
    position: absolute;
    right:3.125vw;
    z-index:2;
    bottom:3.125vw;
    }

    .circle_rotate a
    {
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .circle_rotate img.circle_back
    {
    width:100%;
    animation:spin 20s linear infinite;
    }

    @keyframes spin 
    { 
        100% 
        { 
        transform:rotate(360deg); 
        } 
    }

    .circle_rotate a img:last-child
    {
    display: block;
    position: absolute;
    width: clamp(20px, 30%, 999999px);
    transform: scale(1);
    transition: transform .8s var(--animation);
    will-change: transform;
    }

    .circle_rotate.behance a img:last-child
    {
    width: 30%;
    }

    .circle_rotate:hover a img:last-child
    {
    transform: scale(.8);
    transition: transform .8s var(--animation);
    }

    #cont_type .stars {
    margin: 4em auto;
    display: flex;
    width: auto;
    max-width: 1400px;
    justify-content: space-between;
    }

    #cont_type .stars div img {
    width: 50%;
    text-align: center;
    }

    #cont_type .stars div p {
    text-align: center;
    }

    /*.video-embed iframe {
    height: 200px !important;
    }*/

    .margin-bottom-4 {
    margin-bottom: 0 !important;
    }

    .review {
    margin: 0 auto;
    margin-top: 2em;
    }

    .review.review-no-ma {
    margin-top: 0;
    }

    #cont_type .review img {
    width: 50%;
    margin: 0;
    }

    #type .image-text {
    display: flex;
    width: auto;
    max-width: 1400px;
    margin: 0 auto;
    }

    #type .an-ark .image-text {
    margin-top: 4em;
    align-items: center;
    justify-content: center;
    }

    #type .image-text-image {
    width: 30%;
    }

    #type .an-ark .image-text-image {
    width: 62%;
    }

    #type .image-text-text {
    width: 70%;
    padding: 0 3em;
    }

    #type .image-text div h2, #type .cols-50 div h2 {
    font-size: 3vw;
    line-height: normal;
    text-align: left;
    margin-right: 0;
    }

    .cols-50 a {
        text-decoration: underline;
    }

    .project-vid {
/*    margin: 4em auto;*/
    text-align: center;
    display: block;
    width: 100%;
    }

    .project-vid.ark-vid {
    margin-top:-200px;
    }

    #type .col-100 {
    width: auto;
    }

    #type .video-embed {
    text-align: center;
    }

    #type .cols-50, #type .cols-33 {
    display: flex;
    width: auto;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    }

    .cols-padding{
    padding-top: 3em;
    }

    #type .cols-50 div {
    width:50%;
    }

    #type .cols-50 div .reviews {
    width:100%;
    }

    .lightweight-accordion {
    width: 100% !important;
    max-width: 1400px;
    margin: 0 auto;
    }

    .lightweight-accordion-body {
    width: 100% !important;
    display:flex !important;
    flex-wrap: wrap;
    }

    .lightweight-accordion-body p {
    flex: 1 0 20%;
    margin: 40px 20px;
    /*height: 100px;*/
    }

    #type .cols-50 .reviews .review {
    width:60%;
    }

    .hide-mobile {
    display: flex !important;
    }

    .hide-desktop {
    display: none !important;
    }

    .press {
    display: none !important;
    }

    .press-logos {
    align-items: center;
    margin-bottom: 35px;
    }

    .press-logos p a img {
    /*max-height: 69px;*/
    width: auto !important;
    max-width: 100%;
    /*min-width: 80%;*/
    }

    .press-logos p a img.square-logo {
    max-width: 50%;
    border-radius: 20px;
    }

    .press-logos p a img.middle-logo {
    max-width: 70%;
    }

    .press-logos p a img.logo-4 {
    width: 100% !important;
    }

    .press-logo {
    max-height: 59px;
    width: auto !important;
    margin: unset !important;
    max-width: 100%;
    }

    .press-logo.logo-4 {
    width: 100% !important;
    }

    .press-text {
    margin-bottom: 0 !important;
    }

    .press-logos-ex {
    margin-top: 0 !important;
    }

    /* Only while the press panel is open, force native scrolling */
html.press-native-scroll,
html.press-native-scroll body,
html.press-native-scroll #page-wrap {
  overflow: auto !important;
  height: auto !important;
}

html.press-native-scroll #page-wrap {
  position: relative !important; /* or relative */
}

/*.press-panel__content{
  height: 0;
  overflow: hidden;
  transition: height 350ms ease;
}*/

/* The wrapper IS the button/panel */
.press-panel{
  margin: 2em auto;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  overflow: hidden;

  width: 240px;              /* closed width */
  /*max-width: 80% !important;*/
  display: flex;
  flex-direction: column;

  transition:
    width 450ms ease,
    box-shadow 250ms ease,
    transform 250ms ease,
    height 450ms ease;       /* IMPORTANT: panel height animates */
}

@media screen and (min-width:767px) {
    .press-panel{
        max-width: 85% !important;
    }
}

.press-panel.is-open{
  width: min(100%) !important;
  box-shadow: 0 16px 50px rgba(0,0,0,0.18);
  transform: scale(1.01);
}

/*.press-panel.is-open{
  width: min(860px, 100%);
  height: 520px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.18);
  transform: scale(1.01);
}*/

/* Header button */
.press-panel__summary{
  background: transparent;
  border: 0;
  width: 100%;
  cursor: pointer;
  padding: 22px 18px 20px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.press-panel.is-open .press-panel__summary{
  justify-content: center;
  padding-bottom: 14px;
}

.press-panel .press-panel__label{
  margin: 0 auto !important;
  font-size: 1.5em;
}

/*.press-panel.is-open .press-panel__label{
  margin-left: 0 !important;
}*/

/* Content area animates height */
.press-panel__content{
  flex: 1 1 auto;
  overflow: hidden;
  height: 0;
  transition: height 350ms ease;
}

.press-panel__inner{
  padding: 0 20px 20px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 200ms ease;
}

/* When panel is open we’ll also fade inner in */
.press-panel.is-open .press-panel__inner{
  opacity: 1;
  transform: translateY(0);
}

.press-panel img { height: auto; display: block; }

.press-logos img{
  /*width: 120px !important;     /* whatever fits */
  height: auto;
  display: block;
}


@media (prefers-reduced-motion: reduce){
  .press-panel,
  .press-panel__content,
  .press-panel__inner{
    transition: none !important;
  }
}




    #type .cols-33 div {
    width:33.3333%;
    }

    iframe {
    width: 100%;
    }

    #poster>div>div>div
    {
    top:-90vh;
    position: relative;
    }

    #poster>div>div>diV:nth-child(2)
    {
    top:auto;
    bottom:45%;
    }

    #poster>div>div>div>picture
    {
    width:100%;
    margin-bottom:2vw;
    display: block;
    }

    #poster>div>div>div>picture.none
    {
    display: none;
    }

    #poster>div>div>div>picture>img
    {
    width:100%;
    }

    #poster>div>div>div>div
    {
    min-height:30vh;
    width:100%;
    margin-bottom:2vw;
    }

    /* Home - Work */

    #cont_work
    {
    background: var(--black);
    /*width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh)* 100);*/
    background: transparent;
    overflow: hidden;
    position: relative;
    background: url(img/medusa-3.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    }

    #work_new
    {
    height: 400vh;
    }

    #works
    {
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    position: relative;
    }

    #work_blocks,
    #work_title
    {
    position: relative;
    height:100vh;
    height: calc(var(--vh, 1vh) * 100);
    }

    #work_title
    {
/*    width:100vw;*/
    position:absolute;
/*    background-color: rgba(0,0,0,0.5);*/
    top:227px;
    left: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:2;
    }

    #work_title h2
    {
    overflow: hidden;  
    max-width:calc(3.125vw * 20);
    text-align: left; 
    }

    #work_title h2 span
    {
    font-size:clamp(130px, 11vw, 250px);
    line-height:clamp(120px, 10.5vw, 240px);
    color:var(--white)
    }

    #work_title h2>div:last-child
    {
    transform:translateY(-2vw);
    }

    #work_blocks>div
    {
    position:absolute;
    overflow:hidden;
    }

    #work_blocks div video 
    {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    #bomb picture video 
    {
    width: 100%;
    height: 100%;
    }

    #work_blocks>div.first
    {
    aspect-ratio:13 / 9;
    }

    #work_blocks>div.second
    {
    aspect-ratio:9 / 13;
    }

    #work_blocks>div.third
    {
    aspect-ratio:1 / 1;
    }

    #works #work_blocks>div>div img
    {
    height: 100%;
    display: block;
    transform: scale(3) skew(10deg);
    opacity: 0;
    transition: transform 2s var(--animation), opacity 2s var(--animation);
    }

    #works #work_blocks>div.active>div img
    {
    transform: scale(1) skew(0deg);
    opacity: 1;
    }


    #blocco_1, 
    #blocco_7,
    #blocco_8
    {
    top:5vh;
    left: 9.37vw;
    width:clamp(290px, calc(3.125vw * 7), 99999px);
    opacity: 0.8;
    }

    #blocco_2
    {
    top:20vh;
    left:calc(3.125vw * 4);
    }

    #blocco_3
    {
    top:45vh;
    left:25vw;
    width:clamp(100px, calc(3.125vw * 2), 99999px);
    }

    #blocco_4,  #blocco_9
    {
    width:clamp(130px, calc(3.125vw * 3), 99999px);
    }

    #blocco_5, #blocco_4,  #blocco_2
    {
    width:clamp(180px, calc(3.125vw * 4), 99999px);
    }

    #blocco_6
    {
        width:clamp(180px, calc(3.125vw * 6), 99999px);
    }

    #blocco_4
    {
    bottom:55vh;
    left:calc(3.125vw * 12);
    }

    #blocco_5
    {
    bottom:6vh;
    left:3.125vw;
    }

    #blocco_6
    {
    bottom:6vh;
    left:calc(3.125vw * 11);
    }

    #blocco_7
    {
    bottom:7vh;
    left:auto;
    right:calc(3.125vw * 5);
    width:clamp(220px, calc(3.125vw * 5), 99999px);
    }

    #blocco_8
    {
    top:50vh;
    left:auto;
    right:calc(3.125vw * 4);
    width:clamp(270px, calc(3.125vw * 6), 99999px);
    }

    #blocco_9
    {
    bottom:10vh;
    left:auto;
    right:calc(3.125vw * 2);
    }

    /*###################### My Story ######################*/

    #start h1
    {
    position: absolute;
    text-align: center;
    top:50%;
    width:100%;
    transform: translateY(-65%);
    font-size:0;
    overflow: hidden;
    }

    #start.p404
    {
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    min-height:100vh !important;
    }
    

    #start.p404 h1
    {
    transform: translateY(-50%);
    }

    #start h1 span
    {
    font-size: clamp(5rem, 25vw, 9999px);
    }

    #start.p404 h1 span
    {
    font-size: clamp(10rem, 50vw, 9999px);
    }

    #img404
    {
    position: absolute;
    top:50%;
    left:50%;
    
    width:30vw;
    
    transition:transform 1s var(--animation), opacity .5s var(--animation);
    }

    #mex404
    {
    padding:10px 21px;
    background:var(--green);
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -30%) rotate(-7.5deg);
    font-size: clamp(2.2rem, 3vw, 99999999999px);
    border-radius:30vw;
    width:40vw;
    word-wrap: break-word;
    text-align: center;
    }

    .anim404
    {
        opacity: 0;
        transform: translate(-50%, -30%);
        transition:transform 1s var(--animation), opacity .5s var(--animation);
    }
    
    #start.active .anim404
    {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-delay:.3s;
    }

    #start.active #mex404.anim404
    {
    transform: translate(-50%, -50%) rotate(-7.5deg);
    }

    #back
    {
    position: absolute;
    opacity: 0;
    bottom:30px;
    width:100%;
    text-align: center;
    font-size:30px;
    }

    #start.active #back
    {
    opacity: 1; 
    bottom:60px;
    transition:bottom 1s var(--animation), opacity .5s var(--animation);
    transition-delay:.3s;
    }

    #back a
    {
    text-decoration: underline;
    }
    


    
    #start #adaptive_ap  h1>div
    {
    display:flex;
    flex-direction: row;
    justify-content:center;
    }

    #start #adaptive_ap  h1>div>span
    {
    letter-spacing:-1.1vw;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    }
    
    #start  h1 div
    {
    transform:rotateZ(15deg) translateY(130%);
    will-change: transform;
    }

    #start.active h1 div
    {
    transform:rotateZ(0deg) translateY(0%);
    transition:transform 1.5s var(--animation);
    }

    #start.active.active_l h1 div
    {
    transform:rotateZ(0deg) translateY(0%);
    transition:none;
    }


    #start h1 span.char, #load_page>div>div span.char
    {
    margin-left:-1.5%;
    }

    #first {
        width: 19.8vw;
    }

    #second {
        width: 60vw;
        text-indent: -21vw;
    }

    #sp_center 
    {
    width: 0%;
    position: relative;    
    }

    #sp_center span
    {
    position:absolute;
    display: block;
    width:100%;
    height:1.65vw;
    background: var(--black);
    left:0;
    top:10.65vw
    }

    #sp_center span:nth-child(2)
    {
    top:auto;
    bottom:7.85vw;
    height: 1.6vw;
    }

    #mystory_ap, #goals_ap, #type_ap, #adaptive_ap
    {
    height:300vh;
    width:100%;
    }

    #type_ap
    {
    height:300vh;
    }

    #mystory_ap>div, #goals_ap>div, #type_ap>div, #adaptive_ap>div
    {
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    width:100%;
    position: relative;
    }

    #story_astro, #heart_g, #type_g, #adaptive_pill
    {
    width:60vw;
    aspect-ratio:1;
    position: absolute;
    left:0;
    right:0;
    margin: auto;
    margin-top:53vh;
    transform:rotate(15deg) translateY(80%);
    pointer-events: none;
    }

    #heart_g
    {
    margin-top:45vh;
    }

    #type_g
    {
    margin-top:65vh;
    }

    #start.active #story_astro,
    #start.active #heart_g,
    #start.active #type_g,
    #start.active #adaptive_pill
    {
    transform:rotate(0deg) translateY(0%);
    transition:transform 1.5s var(--animation);
    }

    #start.active.active_l #story_astro,
    #start.active.active_l #heart_g,
    #start.active.active_l #type_g,
    #start.active.active_l #adaptive_pill
    {
    transform:rotate(0deg) translateY(0%);
    transition:none;
    }

    #story_astro picture,
    #heart_g picture,
    #adaptive_pill picture
    {
    width:100%;
    display: block;
    position: absolute;
    top:0px;
    }

    #type_g>div
    {
    width:clamp(300px, 30vw, 550px);
    left:0px;
    right:0px;
    margin: auto;
    position: absolute;
    top:0;
    }

    #type_g>div picture
    {
    width:100%;
    position: absolute;
    }
    
    #type_g>div:first-child
    {
     left:-70%;
     transform:rotate(-10deg);
    }

    #type_g>div:nth-child(2)
    {
    z-index:2;
    }

    #type_g>div:last-child
    {
    left:70%;
    transform:rotate(15deg);
    }


    /* Generalpage */

    .start_page
    {
    position: relative;
    z-index: 2;
    }


    /* My Story - Begin */
    
    #begin
    {
    padding-top:140px;
    }

    #begin_foto
    {
    width:100%;
    height:1000vh;
    position:relative;
    }

    #begin_foto>div
    {
    position:absolute;
    top:0px;
    width:100%;
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    }

    #begin_foto>div picture
    {
    display: inline-block;
    width:25vw;
    width:clamp(410px, 25vw, 99999px);
    position: absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    margin:auto;
    display: flex;
    justify-content: center;
    align-items: center; 
    transition:transform .2 var(--animation);
    will-change: transform;
    }

    #begin_foto>div picture#img_begin2
    {
        width:clamp(533px, 40vw, 99999px);
    }

    #begin_foto>div picture#img_begin1
    {
        width:clamp(631px, 45vw, 99999px);
    }

    /* My Story - Meedori */
   
    #meedori_foto
    {
    position: absolute;
    top:0px;
    width:100vw;
    height:100vh;
    background-image:url(img/meedori.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    mask-image: url(img/meedori_logo.svg);;
    background-size:cover;
    mask-size: 12vw;
    mask-repeat: no-repeat;
    mask-position: center;
    display: flex;
    justify-content: center;
    align-items: center; 
    }

    #meedori
    {
    background-color: var(--green);
    position: relative;
    z-index:2;
    }

    #meedori>div:first-child
    {
    padding-top:80px;
    padding-bottom: var(--bigMarginTopBottom);
    }
    
    .meedori_immagini
    {
    display:grid;
    }

    .meedori_immagini.left
    {
    grid-column: 1 / 18;
    grid-template-columns: repeat(17, 1fr);
    }

    .meedori_immagini.right
    {
    grid-column: 18 / 33;
    grid-template-columns: repeat(15, 1fr);
    }

    .meedori_immagini.left picture:first-child
    {
    grid-column: 8 / 16;
    }

    .meedori_immagini.left picture:last-child
    {
    grid-column: 1 / 12;
    padding-top:50px;
    }

    .meedori_immagini picture
    {
    overflow: hidden;
    }

    .meedori_immagini.right picture
    {
    grid-column: 5 / 12;
    margin-top:25vh;
    }

    .meedori_immagini picture img
    {
    transform:scale(1.1);
    transition:transform 1.5s var(--animation);
    will-change: transform;
    }

    .meedori_immagini picture::before
    {
    content:"";
    display: block;
    width: 100%;
    height:100%;
    background:var(--green);
    position: absolute;
    z-index:2;
    top:0px;
    left:0px;
    }

    .meedori_immagini picture.active::before
    {
    transform:translateY(-100%);
    transition:transform 1.5s var(--animation);
    }

    .meedori_immagini picture.active img
    {
    transform:scale(1);
    }

    /* My Story - Switzerland */


    #switzerland
    {
    padding:var(--bigMarginTopBottom) 0px;   
    position: relative;
    background: url('img/mystory/back_swi.webp') no-repeat;
    background-size: 100%;
    background-position: 20% 0;
    }

    #switzerland>h2
    {
    overflow-x: hidden;
    width:130vw;
    margin-left: -10vw;
    transform: rotate(10deg);
    mix-blend-mode: multiply;
    }

    #switzerland>h2 span
    {
    display: block;
    color:var(--green);
    font-size:clamp(100px, 30vw, 9999px);
    font-family: 'GillSansBold', sans-serif;
    width:9999999999px;
    margin-left: -10vw;
    letter-spacing:-0.7vw;
    }

    #cross
    {
    position: absolute;
    left:calc(3.125vw * 4);
    bottom:15vh;
    width: clamp(400px, calc(3.125vw * 13), 700px);
    mix-blend-mode: multiply;
    }

    #cross>img
    {
    display: block;
    transform: rotate(28deg);
    width:100%;
    mix-blend-mode: multiply;
    }

    /* Mystory - K95 */

    #studiok95
    {
    width:100%;
    position: relative;
    }

    #studiok95 h3#scritta_apertura_k95
    {
    width:100%;
    margin-top:140px;
    text-transform: uppercase;
    text-align: center;
    }

    #studiok95 h3#scritta_apertura_k95 span
    {
    font-family: 'GillSansHeavy';
    }
    
    #studiok95 h3#scritta_apertura_k95>span
    {
    display: block;
    font-size:27vw;
    line-height:28vw;
    height:28vw;
    margin-bottom:-7vw;
    font-family: 'GillSansHeavy';
    }
    
    #studiok95>div
    {
    width:100%;
    position:relative;
    }

    #k95_statua
    {
    width:clamp(600px, 50vw, 9999999px);
    aspect-ratio:1;
    position: absolute;
    left:0px;
    top:50%;
    transform:translateY(-50%);
    right:0px;
    margin:auto;
    }


    #k95_statua picture
    {
    width:100%;
    display: block;
    position: absolute;
    top:0px;
    }

    #k95_statua picture#statua_kk
    {
    top:40%;
    }

    #text_k95
    {
    padding-top:var(--bigMarginTopBottom);
    padding-bottom:180px;
    }

    #philosophy_k95
    {
    height:500vh;
    background-color:var(--black);
    }

    #philosophy_k95>div
    {
    width:100vw;
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    position: relative;
    overflow: hidden;
    }

    #philosophy_k95 h3
    {
    width:100%;
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    position: relative;
    }

    #philosophy_k95 h3 span
    {
    color:var(--white);
    font-size:clamp(115px, 11vw, 999999px);
    line-height:clamp(120px, 13vw, 999999px);
    font-family: 'GillSansHeavy';
    text-transform: uppercase;
    }

    #philosophy_k95 h3>div
    {
    position: absolute;
    overflow: hidden;
    }

    #philosophy_k95 h3:first-child>div:first-child
    {
    top:calc(6.25vh*2.5);
    left:3.125vw;
    }

    #philosophy_k95 h3:first-child>div:last-child
    {
    top:50%;
    transform:translateY(-20%);
    right:3.125vw;
    }

    #words_k95 div>span
    {
    display: block;
    }

    #philosophy_k95 h3#words_k95
    {
    width:100%;
    bottom:-4vw;
    left:3.125vw;
    position: absolute;
    height:15vw;
    z-index:4;
    }

    #k95_foto
    {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    transform:translateY(100vh);
    height:300vh;
    }

    #k95_foto>div
    {
    width:100%;
    }

    #k95_foto>div:first-child picture
    {
    width:calc(3.125vw*7);
    margin-left:calc(3.125vw*5);
    }

    #k95_foto>div:nth-child(2) picture
    {
    width:calc(3.125vw*12);
    margin-left:calc(3.125vw*18);
    margin-top:-4vw;
    }
    
    #k95_foto>div:nth-child(3) picture
    {
    width:calc(3.125vw*7);
    margin-left:3.125vw;
    margin-top:-4vw;
    }

    #k95_foto>div:nth-child(4) picture
    {
    width:calc(3.125vw*12);
    margin-left:calc(3.125vw*12);
    margin-top:-3vw;
    }

    #k95_foto>div:nth-child(5) picture
    {
    width:calc(3.125vw*12);
    margin-left:calc(3.125vw*3);
    margin-top:9vw;
    }

    #k95_foto>div:nth-child(6) picture
    {
    width:calc(3.125vw*11);
    margin-left:calc(3.125vw*19);
    margin-top:-6vw;
    }

    #k95_foto picture
    {
    position: relative;
    overflow: hidden;
    display: block;
    }

    #k95_foto picture::before
    {
    content:"";
    display: block;
    position: absolute;
    z-index:2;
    width:100%;
    height: 100%;
    background:var(--green);
    }

    #k95_foto picture.active::before
    {
    transform: translateY(-100%);
    transition: transform 1s var(--animation);
    }

    /* Mystory Awwwards */

    #awwwards
    {
    width:100%;
    min-height:100vh;
    min-height:calc(var(--vh, 1vh) * 100);
    z-index:3;
    }

    #awwwards>div:first-child
    {
    position:relative;
    width:100%;
    min-height:100vh;
    min-height:calc(var(--vh, 1vh) * 100);
    }

    #awwwards>div:last-child
    {
    padding:var(--bigMarginTopBottom) 0px;
    }

    #title_aww
    {
    color:var(--black);
    width:100%;
    text-align: center;
    font-size:clamp(80px, 17vw, 9999px);
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    }

    .certificato_award
    {
    width:clamp(300px, calc(3.125vw*9), 99999px);
    position: relative;
    transform: rotate(-15deg);
    transform-origin: center center;
    top:40vh;
    left: 0px;
    right:0px;
    margin: auto;
    }

    .certificato_award img
    {
    display:block;
    width:100%;
    opacity:0;
    }

    .certificato_award img.active
    {
    opacity:1;
    transition:opacity .5s var(--animation);
    }

    /*###################### Goals ######################*/

    /* Goals - Goal number */
    #numbers_car>div
    {
    background: url('img/goals/etna.webp') no-repeat;
    background-size:cover;
    background-position:center;
    padding: var(--bigMarginTopBottom) 0px;
    }
    
    #numbers_car>div>div>div
    {
    padding:60px 0px;
    }

    #numbers_car>div>div>div:first-child,
    #numbers_car>div>div>div:nth-child(4)
    {
    grid-column: 1 / 12;
    }

    #numbers_car>div>div>div:nth-child(2),
    #numbers_car>div>div>div:nth-child(5)
    {
    grid-column: 12 / 23;
    }

    #numbers_car>div>div>div:nth-child(3)
    {
    grid-column: 23 / 28;
    }

    #numbers_car>div>div>div span
    {
    display: block;
    width:100%;
    font-size: clamp(90px, 14vw, 999999px);
    line-height: clamp(90px, 14vw, 999999px);
    }

    #numbers_car>div>div>div span:last-child
    {
    font-size: clamp(20px, 2vw, 999999px);
    line-height: clamp(20px, 2vw, 999999px);
    }

    /* Goals - Table Award */

    #awards
    {
    padding: var(--smallMarginTopBottom) 0px;
    position: relative;
    }

    #awards h2 span,
    #brand h2 span,
    #talk h2 span
    {
    font-size:clamp(60px, 11vw, 250px);
    line-height:clamp(65px, 10.5vw, 240px);
    color:var(--black);
    }

    #awards h2,
    #brand h2,
    #talk h2
    {
    margin-bottom:var(--smallMarginTopBottom);
    }
    
    .table_award
    {
    font-size:1.2rem;
    line-height:1.3rem;
    width:70vw;
    margin: auto;
    }

    #awards h3
    {
    color:var(--black);
    font-size:3.125rem;
    line-height:3.125rem;
    font-family: 'GillSansBold', sans-serif;
    }

    .table_award>div:first-child,
    .table_award>lasr-child>div
    {
    border-top:5px solid var(--black);
    padding:20px 0px;
    }

    .table_award>div:first-child
    {
    display: flex;
    justify-content: space-between;
    }
    
    .table_award .icon
    {
    width:20px;
    height:20px;
    overflow: hidden;
    display: block;
    }

    .table_award .icon img
    {
    display: block;
    transform:translateY(0);
    transition: transform .5s ease-out;
    }

    .table_award.open .icon img
    {
    transform:translateY(-100%);
    }

    .table_award>div:last-child>div
    {
    border-top:1px solid #666;
    padding-top:10px;
    min-height: 80px;
    }

    .table_award>div:last-child>div span
    {
        font-size: 1.5rem;
        line-height: 1.7rem;
    }

    .table_award>div:last-child
    {
    overflow: hidden;
    max-height:0px;
    transition:max-height .8s ease-out;
    }

    .table_award div.grid_32 div
    {
    position: relative;
    }

    .table_award.open>div:first-child .icon img
    {
    transform: translateY(-100%);
    }

    .table_award div.grid_32 div:first-child
    {
    grid-column: 1 / 8;
    }

    .table_award div.grid_32 div:nth-child(2)
    {
    grid-column: 9 / 24;
    }

    .table_award div.grid_32 div:last-child
    {
    grid-column: 24 / 33;
    text-align: right;
    }

    #img_aw
    {
    max-width: 195px;
    position: absolute;
    z-index: 9999;
    top:10vh;
    opacity: 0;
    left:50vw;
    transform: translateY(-50%) scale(0.9);
    transition:top .3s linear, opacity .3s linear, transform, .3s linear;
    pointer-events: none;
    }

    #img_aw.show
    {
    opacity:1;
    transform: translateY(-50%) scale(1);
    }

    #img_aw img
    {
    transform: rotate(-15deg);
    }

    /* Goals - Brands */

    #brand>div>h2>div
    {
    margin-bottom:-3%;
    }

    #brand
    {
    padding:80px 0px;
    }
    
    #table_brand>div
    {
    border-bottom:1px solid #dddddd;
    border-right:1px solid #dddddd;
    }

    #table_brand
    {
    display: grid;
    grid-template-columns:repeat(6,1fr);
    }

    #table_brand>div:nth-child(6n)
    {
    border-right:0px;
    }

    #table_brand>div:nth-child(n+13)
    {
    border-bottom:0px;
    }

    #table_brand img
    {
    width:70%;
    display: block;
    margin: auto;
    }

    #table_brand div.lega,
    #table_brand div.lega img
    {
    mix-blend-mode: multiply;
    }

    /* Goals - Book and mag */

    #book_and_mag
    {
    display: flex;
    justify-content:flex-end;
    }

    #book_and_mag>div>div
    {
    width:calc(3.125vw * 22);
    display: grid;
    grid-template-columns:repeat(22,1fr);
    padding:20px 0px;
    border-bottom:1px solid #666;
    }

    #book_and_mag>div>div>div:first-child
    {
    grid-column: 1 / 10;
    }

    #book_and_mag>div>div>div:nth-child(2)
    {
    grid-column: 13 / 17;
    }

    #book_and_mag>div>div>div:last-child
    {
    grid-column: 21 / 23;
    }

    #book_and_mag span
    {
    font-family: 'GillSansBold', sans-serif;
    display: block;
    }

    #book_and_mag a
    {
    text-decoration: underline;
    word-wrap:break-word;
    white-space: pre-wrap;
    }

    #talk
    {
    padding-bottom:var(--bigMarginTopBottom);
    }

    /*###################### Type ######################*/

    .testata_font
    {
    display: flex;
    justify-content:space-between;
    padding-bottom:40px;
    }

    .testata_font h2
    {
    font-size:clamp(2.2rem, 3vw, 2.313rem)
    }

    #july .testata_font h2,
    #july .testata_font .desc p,
    #july a.botton_g>div span 
    {
    color:var(--white);
    }

    #july a.botton_g 
    {
    border: 1px solid var(--white);
    }

    #july a.botton_g img {
       fill:var(--white)
    }
 
    .testata_font .desc p
    {
    margin:0px;
    font-size: clamp(1.2rem, 2vw, 1.5rem)
    }

    .font_cont
    {
    width:100%;
    padding-bottom:var(--bigMarginTopBottom);
    }

    .font_letter
    {
    width: 100%;
    font-size:30vw;
    overflow: hidden;
    }

    .font_letter>div
    {
    white-space:nowrap ;
    }

    .font_artwork
    {
    min-height:70vh;
    position: relative;
    }

    .font_artwork .fondo
    {
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    overflow: hidden;
    margin-top: 40px;
    }

    .font_artwork .fondo img
    {   
    display: block;
    width:100%;
    object-fit: cover;
    transform: scale(1.5);
    }

    #stelvio
    {
    position: relative;
    z-index:2;
    }

    #artwork_stelvio #acquila
    {
    width:clamp(500px, 38vw, 900px);
    display:block;
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom: 0px;
    margin: auto;
    }

    #artwork_stelvio #rectangle_s
    {
    bottom:-5vw;
    left: -5vw;
    }

    #rectangle_s>span 
    {
    width: clamp(100px, 6vw,150px);
    }

    #artwork_stelvio #circle_s span
    {
    width:clamp(250px, 17vw,9999999px);
    }

    #artwork_stelvio #circle_s
    {
    top:-1vw;
    width:clamp(250px, 17vw,9999999px);
    mix-blend-mode: multiply;
    }

    #herbert, #july
    {
    padding:var(--bigMarginTopBottom) 0px;
    }

    #herbert
    {
    background-color: var(--green);
    }

    #herbert .font_letter>div
    {
    font-family: 'herbert';
    }

    #herbert .font_letter
    {
    font-size:25vw;
    }

    #cont_cuore
    {
    width:60%;
    aspect-ratio: 1 / 1;
    border-radius:50%;
    background: var(--white);
    margin: auto;
    overflow: hidden;
    }

    #artwork_july>div,
    #cont_cuore
    {
    display: flex;
    align-items: center;
    justify-content:center;
    }

    #cont_cuore picture
    {
    position: absolute;
    }

    .cuore_il
    {
    display: block;
    Width:clamp(450px, 33%, 999999999px);
    mix-blend-mode: multiply;
    }

    .scritta_he
    {
    width:clamp(350px, 28%, 999999999px); 
    }

    #july
    {
    background-color: var(--black);
    }

    #july .font_letter>div
    {
    font-family: 'july';
    color: var(--white);
    }

    #artwork_july
    {
    background:url("img/type/background_july.jpg") no-repeat;
    background-size:cover;
    height: 80vh;
    position: relative;
    }

    #artwork_july>div>picture
    {
    position: absolute;
    bottom:0px;
    }

    #artwork_july>div #e_com
    {
    bottom:60px;
    }

    #artwork_july>div picture
    {
    width: clamp(500px, 40vw, 9999999999px);
    }

    /*###################### What is Adaptive ######################*/

    #what_is
    {
    background: var(--green);
    padding-top:var(--bigMarginTopBottom);
    }

    #what_foto
    {
    width:70vw;
    margin: auto;
    white-space:pre-wrap;
    position: relative;
    }

    #what_foto picture
    {
    width:100%;
    }

    #ad_p
    {
        transition:transform 1.2s var(--animation);
    }

    #vett_1, #vett_2
    {
    width:130vw;
    position: absolute;
    }

    #vett_1
    {
    top:40vh;
    left:-5vw;
    }

    #vett_2
    {
    top:70vh;
    left:-60vw;
    }

    #adaptive_cover
    {
    aspect-ratio: 1561 / 896;
    width:100%;
    overflow: hidden;
    position: relative;
    }

    #adaptive_cover #felpa_fondo
    {
    width:100%;
    display: block;
    }

    #adaptive_cover #felpa_fondo
    {
    width:100%;
    display: block;
    }

    #felpa
    {
    position: absolute;
    z-index:3;
    top:0px;
    left:0px;
    right:0px;
    margin: auto;
    width:45vw;
    transition:transform .8s var(--animation);
    }

    #title_phi h2 span span
    {
    font-size:clamp(2rem, 22vw, 9999999999px);
    line-height:clamp(2.2rem, 23vw, 9999999999px);
    color:var(--white);
    text-transform: uppercase;
    font-family: 'GillSansHeavy';
    }

    #title_phi h2
    {
    position: relative;
    z-index: 4;
    transform: translateY(-10vw);
    }

    #fil_ad
    {
    background:var(--black);
    padding-bottom:var(--bigMarginTopBottom);
    }

    #title_phi h2>span
    {
    display: block;
    transform: translateX(8vw);
    }

    #title_phi h2>span:last-child
    {
    display: block;
    transform: translate(18vw, -5vw);
    }

    #fil_ad .startSection h2 span
    {
        text-transform: uppercase;
    }

    #fil_ad .bigText
    {
    justify-content:start !important;
    padding-top: 0px;
    }

    #fil_ad .bigText p
    {
    padding-left:5vw;
    }

    #fil_ad .left
    {
    padding-bottom:var(--bigMarginTopBottom);
    padding-left:20vw;
    }

    #puf_ad
    {
    width:clamp(500px, 50vw, 1200px);
    position: relative;
    margin: auto;
    }

    #cont_puf
    {
    margin:var(--bigMarginTopBottom) 0px;
    }

    #cont_puf_sf
    {
    width:100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    }

    #cont_puf_sf img
    {
    width:100%;
    transform: scale(1.5);
    display: block;
    }

    #puf_man
    {
    position: absolute;
    display: block;
    bottom:-5px;
    width:90%;
    }

    #puf_ad h3
    {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -38%);
    width:100vw;
    text-align: center;
    overflow: hidden;
    }

    #puf_ad h3 span
    {
    font-family: 'GillSansBold';
    color:var(--white)
    }

    #puf_ad h3>span>span
    {
        font-size:clamp(25rem, 37vw, 99999999999px);
    }

    #title_fu>h3>span
    {
       display: block;
       margin-bottom:-10%;
    }

    #title_fu h3
    {
    width:80vw;
    margin: auto;
    margin-bottom:var(--bigMarginTopBottom);
    }

    
    #title_fu h3>span>span>span
    {
        font-size:clamp(3rem, 23vw, 99999999999px);
        line-height:clamp(3.1rem, 24vw, 99999999999px);
        color:var(--white);
        text-transform: uppercase;
        font-family: 'GillSansBold';
    }

    #title_fu h3>span:nth-child(2)
    {
        transform:translateX(20vw);
    }


    /************ FOOTER ************/

    #footer
    {
    background: var(--white);
    position: relative;
    overflow: hidden;
    padding-bottom:40px;
    margin-top: 10em;
    }

    #titoloFooter
    {
    padding-bottom:var(--smallMarginTopBottom);
    padding-top:var(--bigMarginTopBottom);
    width:calc(3.125vw*15);
    }

    #footer h2
    {
    font-size:clamp(3.75rem, 13vw, 999999px);
    line-height:clamp(3.9rem, 13.2vw, 999999px);
    }

    #footer p
    {
    margin-top: 0;
    }

    #footer h2 .word:last-child
    {
    margin-top:-10%;
    display: block;
    }
   
    #footer h3 span
    {
    font-family: 'GillSansBold';
    }

    #footer ul li
    {
    margin-bottom:8px;
    }

    #footer ul li:last-child,
    #copy p
    {
    margin-bottom:0px;
    }

    #contact_info,
    #text_info, #contact_page_info
    {
    display:flex;   
    }

    #contact_page_info
    {
    align-items: flex-start;
    gap: 6em;
    justify-content: center;
    margin-bottom: 6em;
    }

    #contact_page_info li, #contact_page_info #mail_f a {
    font-size: 6em;
    }

    #contact_page_info #mail_f a {
    line-height: 4.85rem;
    }

    #contact_info
    {
    font-size:1.563rem;
    line-height:1.563rem;
    justify-content:space-between;
    }

    #copy
    {
    font-size:1rem;
    line-height:1.2rem;
    align-self:flex-end;
    }

    #contact_info h3, #mail_f a
    {
    font-family: 'GillSansBold';
    margin-bottom:0px;
    font-size:1.6rem;
    line-height:1.65rem;
    }

    #mail_f a
    {
    font-family: 'GillSansRegular', sans-serif;
    }

    #text_info
    {
    gap:calc(3.125vw * 3);
    }

    #mail_f
    {
    margin-bottom:30px;
    }

    .ticket-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    text-align: center;
    }

    .an-ark div.ticket-links {
    margin: 0 auto;
    margin-top: 2em;
    margin-bottom:0 !important;
    }

    .ticket-links a {
    color: #000;
    border: 1px solid #000;
    padding: 0.5em;
    transition: all 0.4s;
    }

    .ticket-links a:hover {
    color: #fff;
    background: #000;
    }

    .extra-contacts {
    display: flex;
    align-items: flex-start;
    gap: 1em;
    max-width: 1500px;
    margin: 0 auto;
    justify-content: center;
    margin-bottom: 6em;
    padding: 3em;
    }

    .extra-contacts div {
    border: 1px solid #000;
    padding: 4em;
    flex-basis: 33.3333%;
    width: 33.3333%;
    }

/* 
#ppp, #start, #roots, #designSocial, #love, #begin, #meedori, #switzerland, #studiok95 {display: none;}
*/ 

@media screen and (min-width:1340px) {
    .extra-contacts div {
    padding: 5em;
    }
}

/* #### LARGE SCREENS #### */
@media screen and (min-width: 2400px) {
    #cont_type>div {
    margin-bottom: 189px;
    }

    #cont_type>div.oded {
    right: 855px;
    margin-top: 6vw;
    }
}

/* #### TABLET LANDSCAPE #### */
@media screen and (max-width:1180px) and (max-height:860px) and (orientation: landscape) 
{
    #img_aw, #mousepointer
    {
    display: none;
    }

    /* Genenral */
    .bigText p 
    {
    width: calc(3.125vw * 25);
    }

    .smallText p 
    {
    width: calc(3.125vw * 20);
    }

    header nav ul 
    {
    gap: 40px;
    }

    header nav ul a
    {
    height: 1.15rem;
    }

    header nav ul span
    {
    color:var(--white);
    font-size: 1rem;
    line-height: 1.2rem;
    }

    header nav ul a:hover span.char
    {
    transform:none;
    }

    /* ####### Home ####### */

    /* Home - Brand */

    #brand_col 
    {
    width: 90%;
    }

    #brand_col li>div 
    {
    top:20px;
    }

    #brand_col li>div:last-child 
    {
    top: auto;
    bottom: 20px;
    }

    #brand_col li>div span, 
    #brand_col li>div h3 
    {
    font-size: 16px;
    }

    .text_fight span
    {
    font-size: 1rem;
    }

    .text_font a.botton_g:hover
    {
    border: 1px solid var(--white);
    }

    a.botton_g:hover:after
    {
    transform:translateY(100%);
    }

    .text_font a.botton_g:hover
    {
    border: 1px solid var(--white);
    }

    .text_font a.botton_g:hover>div>span
    {
    color:var(--white);
    }

    /* ###### Other pages ###### */

    .start_page {
    min-height: 120vh;
    }

    .bigText p span,
    .bigText p
    {
    font-size:clamp(1.438rem, 3.5vw, 55px);
    line-height:clamp(1.75rem, 3.5vw, 60px);
    }

    /* ###### Goals ###### */

    #numbers_car 
    {
    padding: 80px 0px;
    }

    /* ###### Type ###### */

    #artwork_july>div>picture 
    {
    bottom: 80px;
    }
}

/* #### TABLET / PHONE PORTRAIT #### */
@media screen and (max-width:1024px) and (orientation: portrait) 
{
    *, *::after, *::before {
    font-weight: 300;
    }

    h1, h2, h3, h4, h5 {
    font-weight: 300;
    }

    #mousepointer,
    #image_nav,
    #img_aw,
    main nav, #skill,
    #title_page,
    #logo_h
    {
    display: none;
    }

    #load_page .logo_loading,
    #nav_bot_mob, #nav_mobile, #nav_mobile div nav
    {
    display:block;
    }

    .active.speed .letter .word .char 
    {
    transition: transform .5s var(--animation);
    transition-delay: calc(.1s * var(--char-index));
    }

    .ticket-links {
    flex-direction: column; 
    padding: 0 2em;
    margin-top: 25px;   
    }

    .extra-contacts {
    flex-direction: column;
    padding: 1em;
    }

    .extra-contacts div {
    width: 100%;
    padding: 1.5em;
    }

    .smallText p 
    {
    width: 70vw;
    padding-top:10px;
    }

    .cont_center 
    {
    width: 87.5vw;
    margin: auto;
    }

    .bigText {
    padding: 0 1em;
    }

    .bigText p 
    {
    width: 80vw;
    margin-bottom: 1em;
    }

    nav ul 
    {
    gap: 35px;
    }

    #skill ul li
    {
    text-transform: uppercase;
    font-size:clamp(20px, 1.6vh, 40px);
    line-height:clamp(25px, 1.7vh, 48px);
    }

    /* ###### HOME ###### */

    /* HOME - Peace */

    header #logo
    {
    width:clamp(110px, 8vw, 160px);
    }

    header #logo svg
    {
    width:100% !important;
    }

    #skill
    {
    transform:translateY(15vh);
    right:calc(3.125vw*2)
    }

    #apertura #princBlock #artwork 
    {
    transform: translateY(35vh);    
    }

    #apertura #astronauta 
    {
    transform: translateY(-36%);
    }

    #apertura #astronauta img
    {
    width: 65vw;
    }

    #apertura #princBlock #artwork
    {
    width:90%;
    }

    /* HOME - Peace */

    #peaceCONT #scritta_peace 
    {
    font-size: 90vw;
    line-height: 70vw;
    height: 70vw;
    }

    /* HOME - Roots */

    #roots h2>div 
    {
    display: flex;
    margin-bottom: -1.5%;
    }

    /* HOME - Brand */
    
    #brand_col 
    {
    width: 90%;
/*    margin-top: 140px;*/
    }

    #brand_col li>div 
    {
    top:15px;
    justify-content: space-between;
    }

    #brand_col .right, #brand_col .right li {
    margin-top: 0;
    transform: none !important;
    }
    
    #brand_col li>div:last-child 
    {
    top: auto;
    bottom: 15px;
    }

    #brand_col li>div span, #brand_col li>div h3 
    {
    font-size: 15px;
    }

    /* HOME - Fight */

    #fight 
    {
    height: 300vh;
    }

    .text_fight span
    {
    font-size: 1rem;
    }

    #fight>div h3
    {
    width:100%;
    text-align: center;
    left:0px !important;
    right:0px !important;
    }

    #fight>div h3 span.small span 
    {
    line-height: clamp(108px, 9vw, 250px);
    }

    #fight #memorial
    {
    left:auto;
    right:calc(3.125vw*2);
    top:calc(6.25vh*4);
    }

    #fight #war
    {
    left:calc(3.125vw*2);
    bottom:calc(6.25vh*3);
    }

    #fight #ukraine
    {
    top:calc(6.25vh*4);
    left:calc(3.125vw*2);
    }

    #fight #agitatevi
    {
    top:0%;
    left:0%;
    right:0px;
    bottom:0px;
    margin:auto;
    background-color:#EFE7E1;
    z-index:3;
    }

    #fight #race
    {
    right:calc(3.125vw*2);
    bottom:calc(6.25vh*3);
    }

    /* HOME - Roots */

    /*#roots
    {
    padding: 25vw 0px;
    }*/

    #roots h2
    {
    width:93.75vw;
    }

    #roots h2 span>span.imgHide, #roots h2 span>span.imgHide>span 
    {
    width: 18.5vw;
    top:0px;
    }

    #type.project {
    padding-top: 136px;
    }

    /* HOME - Type */

    #circle_s 
    {
    width: 23vh;
    top: 10vh;
    }

    #rectangle_s
    {
    bottom:5%;
    }

    #rectangle_s>span 
    {
    width: 8vh;
    }

    #peace
    {
    width:clamp(300px, 70vw, 999999px);
    }

    /* Home - Type */

    #cont_type 
    {
    width: 87.5vw;
    padding-bottom: 0em;
    }

    #cont_type>div 
    {
    width: 60vw;
    margin: 5vh auto 10vh auto;
    }

    #cont_type>div.right 
    {
    position: relative;
    margin-top:0;
    right: 54px;
    }

    #cont_type>div.rightish {
    margin-top: -12vw;
    margin-left: -2%;
    }

    #cont_type>div.rightish .text_font {
    width: 100%;
    }

    #cont_type>div.rightish .text_font {
    overflow: hidden;
    }

    #cont_type>div.rightish:hover .text_font {
    aspect-ratio: 1 / 2;
    width: 100%;
    }

    #cont_type>div.rightish:hover .text_font div div {
    padding: 0em 1em;
    position: absolute;
    }

    #cont_type>div.rightish:hover .text_font div div {
    top: 36px;
    }

    .new-one .text_font {
    width: 38vh;
    top: 0px !important;
    }

    #cont_type>div.new-one {
    margin-left: 0%;
    } 

    #cont_type>div.right-2 {
    right: 58px;
    margin-top: -21vw;
    }

    #cont_type>div.right-2.david {
    right: 58px;
    margin-top: -32vw;
    }

    #cont_type>div.right-2.yoyo {
    right: 58px;
    margin-top: -23vw;
    }

    #cont_type>div.margin-top-2 {
    margin-top: 18vw;
    margin-left: 20%;
    }

    #cont_type>div.margin-top-2.cora {
    margin-top: 59vw;
    margin-left: 20%;
    }

    #cont_type>div.rightish-2.mary {
    margin-top: 53vw;
    margin-left: 8%;
    }

    #cont_type>div.rightish-2.tomaso {
    margin-top: -31vw;
    margin-left: 8%;
    }

    #cont_type>div.right-2.rory {
    right: 58px;
    margin-top: 3vw;
    }

    /*#cont_type>div {
    width: fit-content !important;
    height: fit-content !important;
    }*/

    #cont_type>div:hover {
    position:relative !important;
/*    margin-top: 0 !important;*/
    }

    .margin-top h3, .margin-top-2 h3 {
    line-height: 1em;
    }

    #cont_type>div.margin-top-2:hover {
    margin-left: -8px;
    }

    #cont_type>div:hover .text_font.bio-cont {
    max-width: 339px;
    aspect-ratio: 1 / 1 !important;
    overflow-y: scroll;
    }

    #cont_type>div.todd:hover .text_font.bio-cont {
/*    aspect-ratio: 1 / 2.9 !important;*/
    }

    #cont_type>div.todd:hover {
/*    aspect-ratio: 1 / 2.9 !important;*/
position: fixed !important;
        z-index: 99;
    }

    #cont_type>div.david:hover .text_font.bio-cont {
/*    aspect-ratio: 1 / 1.1;*/
    right: -5vh !important;
    }

    #cont_type>div.mary:hover .text_font.bio-cont {
/*    aspect-ratio: 1 / 2.9;*/
    right: 4vh !important;
    }

    #cont_type>div.yoyo:hover .text_font.bio-cont {
/*    aspect-ratio: 1 / 2.2;*/
    right: -6vh !important;
    }

    #cont_type>div.cora:hover .text_font.bio-cont {
/*    aspect-ratio: 1 / 1.95;*/
    }

    #cont_type>div.tomaso:hover .text_font.bio-cont {
/*    aspect-ratio: 1 / 2.5;*/
    right: 5vh !important;
    }

    #cont_type>div.laurentiu:hover .text_font.bio-cont {
/*    aspect-ratio: 1 / 1.88;*/
    right: -6vh !important;
    }

    #cont_type>div.rebecca:hover .text_font.bio-cont {
/*    aspect-ratio: 1 / 1.88;*/
    right: -6vh !important;
    }

    .team-slide {
    display: none;
    }

    #branding {
    display: none;
    }

    #ourteam li div span {
    bottom: unset;
    top: 0;
    right:0;
    }

    #designSocial.home-sec {
    padding-top: 0;
    }

    #contact_info, #text_info, #contact_page_info {
    flex-direction: column;
    padding: 0 0;
    }

    #contact_page_info.contact-page-info {
    padding: 0 1em;
    }

    #contact_page_info li, #contact_page_info #mail_f a {
    font-size: 2em;
    line-height: 2em;
    }

    .text_font h3 {
    font-size: clamp(2rem, 1.7vw, 3rem);
    }

    .text_font a.botton_g:hover
    {
    border: 1px solid var(--white);
    }

    a.botton_g:hover:after
    {
    transform:translateY(100%);
    }

    .text_font a.botton_g:hover
    {
    border: 1px solid var(--white);
    }

    .text_font a.botton_g:hover>div>span
    {
    color:var(--white);
    }

    .text_font 
    {
    width: 36.5vw;
    }

    /* HOME - Poster */

    #poster 
    {
    height: 600vh;
    }

    #poster>div>div#cont_poster_total 
    {
    grid-template-columns: repeat(2, 1fr);
    column-gap:2vw;
    }

    #poster>div>div>div:last-child
    {
    display:none;
    }

    #poster>div>div>div>picture.none
    {
    display:block;
    }

    /* HOME - Work */

    #work_new
    {
    height:4000px;
    }

    

    /* #### Other Pages #### */

    .start_page h1 span
    {
    font-size: clamp(5rem, 22vw, 9999px);
    }

    .start_page.start_font h1
    {
       margin-top: 0vw; 
    }

    .start_page 
    {
    min-height: 0;
    }

    .startSection h2
    {
    width:80%;
    margin-bottom: 1em;
    }

    #start h1 span 
    {
    font-size:24vw;
    }

    #start.active #story_astro,
    #start.active #heart_g,
    #start.active #type_g,
    #start.active #adaptive_pill
    {
    opacity:1;
    transform:translate(0%, 0%);
    transition:transform 1.5s var(--animation), opacity .8s var(--animation);
    transition-delay:.2s;
    }

    .after_start>div
    {
    opacity: 0 !important;
    transform:translateY(10vh);
    }

    .after_start.active>div
    {
    opacity: 1 !important;
    transform:translateY(0vh);

    transition:opacity .8s var(--animation), transform 1.5s var(--animation);
    transition-delay:.2s;
    }

    #start h1 div {
        transform: rotateZ(0deg) translateY(130%);
        will-change: transform;
    }

    #start.active h1 div 
    {
    transform: rotateZ(0deg) translateY(0%);
    transition: transform 1.5s var(--animation);
    }

    .text_fight 
    {
    position: absolute;
    left: calc(3.125vw*12.7);
    top: calc(6.25vh*4);
    }

    .text_fight.second 
    {
    left: calc(3.125vw*12.7);
    bottom:calc(6.25vh*3.5);
    }

    /* #### MYSTORY ####*/

    #mystory_ap, #goals_ap, #type_ap, #adaptive_ap
    {
    height: 50vh;
    transform: 0px !important;
    }

    #mystory_ap div, #goals_ap div, #type_ap>div, #adaptive_ap div
    {
    height: 100%;  
    transform: 0px !important; 
    }

    #sp_center 
    {
    width: 0px !important;
    }

    #story_astro, #heart_g, #type_g, #adaptive_pill
    {
    margin-top: 25vh;
    opacity: 0;
    transform:translate(0, 30%);
    }
    
    #begin 
    {
    padding-top: 0px;
    }

    body.go #begin.show_text  .speed .word .char 
    {
    transform: translateY(0%);
    transition: transform .5s var(--animation);
    opacity: 1;
    transition-delay: calc(.01s * var(--word-index));
    }

    #begin.show_text .active .letter .word .char 
    {
    transform: translateY(120%);
    opacity: 0;
    }

    body.go #begin.show_text .active .letter .word .char 
    {
    transform: translateY(0%);
    transition: transform .8s var(--animation);
    opacity: 1;
    transition-delay: calc(.03s * var(--char-index));
    }

    #meedori_foto 
    {
    mask-size: 20vw;  
    }

    #meedori>div:first-child 
    {
    padding-bottom: 80px;
    }

    .meedori_immagini.left picture:first-child
    {
    grid-column: 5 / 16;
    }

    .meedori_immagini.left picture:last-child
    {
    grid-column: 1 / 14;
    }

    .meedori_immagini.right picture
    {
    grid-column: 4 / 13;
    margin-top:25vh;
    }

    .meedori_immagini.right picture 
    {
    margin-top: 15vh;
    }

    #k95_statua picture#statua_kk 
    {
    top: 20%;
    }

    #philosophy_k95 
    {
    height: 350vh;
    background-color: var(--black);
    }

    #k95_foto 
    {
    height: 200vh;
    }

    #philosophy_k95 h3#words_k95 
    {
    bottom: 2vw;
    height: 13vw;
    }

    #k95_foto>div
    {
    margin-top: 120px;
    }

    #k95_foto>div picture 
    {
    margin-top: 0px !important;
    }

    #k95_foto>div:first-child picture
    {
    width: calc(3.125vw*11);
    margin-left:calc(3.125vw*2);
    }

    #k95_foto>div:nth-child(2) picture 
    {
    width: calc(3.125vw*18);
    margin-left: calc(3.125vw*12);
    }

    #k95_foto>div:nth-child(3) picture 
    {
    width: calc(3.125vw*11);
    margin-left: calc(3.125vw*2);
    }

    #k95_foto>div:nth-child(4) picture 
    {
    width: calc(3.125vw*18);
    margin-left: calc(3.125vw*10);
    }

    #k95_foto>div:nth-child(5) picture 
    {
    width: calc(3.125vw*16); 
    }

    #k95_foto>div:nth-child(6) picture 
    {
    width: calc(3.125vw*18);
    margin-left: calc(3.125vw*13);   
    }

    #k95_statua 
    {
    width: 80vw;
    }

    #awwwards>div:first-child
    {
    min-height:50vh;
    min-height:calc(var(--vh, 1vh) * 50);
    }

    #certificato_award img 
    {
    top: -10vh;
    }

    .certificato_award
    {
    top:22vh;
    }

    .certificato_award img 
    {
    top: 0vh;
    }

    /* #### GOALS #### */

    #numbers_car>div
    {
    padding: 60px 0px;
    }

    .table_award
    {
    width:100%;
    }

    .table_award>div:last-child>div span 
    {
    font-size:1.2rem;
    line-height:1.3rem;
    }

    .table_award div.contgrid_margin div:first-child
    {
    grid-column: 1 / 8;
    }

    .table_award div.contgrid_margin div:nth-child(2)
    {
    grid-column: 9 / 20;
    }

    .table_award div.contgrid_margin div:last-child
    {
    grid-column: 22 / 31;
    }

    #table_brand
    {
    display: grid;
    grid-template-columns:repeat(4,1fr);
    }

    #table_brand>div
    {
    border-bottom:1px solid #dddddd !important;
    border-right:1px solid #dddddd !important;
    }

    #table_brand>div:nth-child(4n)
    {
    border-right:0px !important;
    }

    #table_brand>div:nth-child(n+17)
    {
    border-bottom:0px !important;
    }

    #table_brand img
    {
    width:80%;
    }

    #book_and_mag>div>div
    {
    width:calc(3.125vw * 25);
    }

    /* #### TYPE #### */

    #type_g
    {
    margin-top: 32vh;
    }

    #artwork_stelvio #rectangle_s
    {
    bottom:-5vh;
    left: -8vh;
    }

    .font_artwork 
    {
    height: 50vh;
    position: relative;
    }

    .testata_font>div:last-child
    {
    width:175px;
    }

    #type_g>div:first-child 
    {
    left: -90%;
    }

    .font_artwork .fondo img 
    {
    width: auto;
    height:100%;
    }

    #cont_cuore 
    {
    margin-top:40px;
    width:100%;
    }

    #herbert .font_artwork 
    {
    min-height: auto;
    height: auto;
    }

    #artwork_july 
    {
    height: 50vh;
    min-height: 50vh;
    }

    /* ### Adaptive #### */

    #first 
    {
    width: 19vw;
    }

    #second 
    {
    width: 59vw;
    text-indent: -22vw;
    }

    #what_foto
    {
    width:100%;
    height:80vh;
    overflow:hidden;
    }

    #vett_1 
    {
    top: 30vh;
    left: 15vw;
    }

    #vett_2 
    {
    top: 40vh;
    left: -50vw;
    }

    #adaptive_cover #felpa_fondo
    {
    position:relative;
    width:200%;
    left:-50%;
    }

    #felpa 
    {
    width: 60vw;
    }

    #felpa 
    {
    width: 75vw;
    top:5vh;
    }

    #adaptive_cover 
    {
    height:50vh;
    }

    #fil_ad .left
    {
    padding-left:0vw;
    }

    #puf_ad
    {
    width:80vw;
    position: relative;
    margin: auto;
    }

    #puf_ad h3>span>span 
    {
    font-size:60vw;
    }
    
    /* ### Footer ### */

    #contact_info
    {
    flex-direction:column;
    }

    #contact_info>div:last-child
    {
    order: 1;
    padding-bottom:var(--bigMarginTopBottom);
    }

    #contact_info>div:first-child
    {
    order: 2;    
    }

    #contact_info>div 
    {
    width: 100%;
    }

    #mex404 
    {
    width:60vw;
    }

    #img404 
    {   
    width: clamp(300px, 50vw, 99999px);
    }

    #start.active #back {
    
        bottom: 20vh;
    }

    .cols-padding {
    padding-top: 0em;
    }

    iframe {
    height: 200px;
    }

    .project-vid.ark-vid {
    margin-top: -60px;
    }

    #cont_type>div.an-ark-tile {
    position: absolute;
    right: 37px;
    margin-top: -1vh;
    }

    #cont_type>div.kagami-tile {
    /*position: absolute;*/
    right: -44px;
    top: 14em;
    margin-top: 20vw;
    }
}

/* #### SMARTPHONE PORTRAIT #### */
@media screen and (max-width:568px) and (orientation: portrait) 
{
    #fight #memorial,
    #fight #ukraine,
    #fight #race,
    #fight #war 
    {
    display:none;   
    }

    #load_page>div>div.center {
        width:130px;
    }

    header 
    {
    padding-top: 30px;
    }

    header svg
    {
    width:22vw;
    }

    header #logo
    {
    width:100px;
    }

    .hide-mobile {
    display: none !important;
    }

    .hide-desktop {
    display: flex !important;
    }

    #nav_mobile>div nav a
    {
    font-size:3.2rem;
    line-height:3.3rem;
    height:3.3rem;
    }

    #nav_mobile ul li.attivo a::before
    {
    width: .7rem;   
    }

    #cross
    {
    left:3.125vw;
    width: calc(3.125vw * 18);
    }

    .bigText 
    {
    margin-top:30px;
    padding-top: 20px;
    }

    .bigText p 
    {
    width: 100%;
    }

    .smallText
    {
    margin-top:0px;
    }

    .bigText p span,
    .bigText p 
    {
    font-size: 1.6rem;
    line-height: 1.9rem;
    }

    .smallText p span,
    .smallText p
    {
    font-size: 1.3rem;
    line-height: 1.6rem;
    }

    .smallText p 
    {
    width: 80vw;
    padding-top: 10px;
    }

    .startSection.flex-column h2,
    .startSection.flex-column p
    {
    width:100%;
    }

    .startSection.flex-column p 
    {
    font-size: 23px;
    line-height: 25px;
    }

    .startSection.flex-column p>span:first-child 
    {
    margin-left: 18.75vw;
    }

    /* ### Home ### */

    #apertura
    {
/*    height:2000px;*/
    }
   
    #blockPEACE, #love 
    {
    height: 4000px;
    }

    #apertura #astronauta img 
    {
    width: 83vw;
    }

    #apertura #astronauta
    {
    transform: translateY(-40%);
    }

    /* Home - Roots */

    #roots h2 span.small
    {
    padding-top:7px;
    }

    #roots h2
    {
    font-size:10.5vw;
    line-height:11.5vw;
    }
    
    #roots h2 span.small
    {
    font-size:3.5vw;
    line-height:4.5vw;
    }

    /* Home - Social */

    #designSocial .flex-column
    {
    flex-direction: column;
    }

    #bomb 
    {
    top:50%;
    width: 90vw;
    }

    /* Home - Type */
    
    .text_font 
    {
    right:0px !important;
    bottom:50px !important;
    top:auto !important;
    }

    #circle_s 
    {
    width: 52vw;
    top: 10vh;
    }

    #rectangle_s 
    {
    bottom: -10%;
    }

    .testo_stelvio 
    {
    font-size:6.5rem;
    }

    .text_font 
    {
    width: 58vw;
    }

    .text_font a.botton_g 
    {
    gap: 5px;
    }

    .text_font a.botton_g>div span
    {
    font-size:0.8rem;
    line-height: 1rem;
    }

    .text_font a.botton_g img,
    .text_font a.botton_g>div 
    {
    height: 15px;
    }

    .text_font a.botton_g
    {
    margin-top:20px;
    }

    .text_font a.botton_g
    {
    width:auto;
    }

    .lightweight-accordion-body {
    flex-direction: column;
    }

    /* Home - Fight */

    #fight>div h3 span 
    {
    font-size: 15vw;
    line-height:18vw;
    height: 15vw;
    }

    .text_fight 
    {
    display: none;
    }

    #fight .post,
    #fight>div.active img
    {
    width:30vw;
    }

    #fight>div h3:first-child 
    {
    top: calc(6.25vh* 2.2);   
    }

    #fight #agitatevi.post,
    #fight #agitatevi img
    {
    width:50vw;
    }

    #fight>div h3:nth-child(2) 
    {
    bottom: 5vh;
    }

    /* Home - Brand */

    #brand_col ul 
    {
    width: 100%;
    transform: none !important;
    }

    li>div h3, li>div span 
    {
    text-align: center;
    }

    #brand_col
    {
    gap: 12px;
    flex-direction: column;
    padding: 0;
    }

    /*#brand_col li 
    {
    height:350px;
    transform: none !important;
    }*/

    #branding .wraper img 
    {
    padding: 12vw;
    }

    /* Home - Work */

    #work_title h2 span 
    {
    font-size:22vw;
    line-height:22.5vw;
    color: var(--white);
    }

    #work_title h2 
    {
    max-width:100%;
    }

    #cont_work
    {
    padding-bottom:0vh;
    }

    #cont_type .stars {
    flex-direction: column;
    margin: 2em auto;
    }

    #cont_type .stars div {
    margin-bottom: 20px;
    }

    #type .image-text {
    flex-direction: column;
    }

    #type .image-text-image {
    width: 100%;
    }

    #type .image-text div h2, #type .cols-50 div h2 {
    font-size: 7vw;
    margin-top: 20px;
    }

    #type .image-text-text {
    width: 100%;
    padding: 0;
    }

    #type .cols-50, #type .cols-33 {
    flex-direction: column;
    }

    #type .cols-50 div {
    width: 100%;
    }

    #type .cols-33 div {
    width: 100%;
    }

    .margin-bottom-4 {
    margin-bottom: 0;
    }

    #work_blocks
    {
    transform: none !important;
    }

    #blocco_7, #blocco_6, #blocco_8
    {
    display: none;
    }

    #blocco_4
    {
    left:auto;
    right:calc(3.125vw * 3);
    }

    #blocco_1
    {
    width:calc(3.125vw * 17);
    }

    #blocco_3, #blocco_1
    {
    left:calc(3.125vw * 4);
    }

    #blocco_2, #blocco_4,  #blocco_9
    {
    width:calc(3.125vw * 9);
    }

    #blocco_2, #blocco_5
    {
    left:calc(3.125vw * 2);
    }

    #blocco_5
    {
    width:calc(3.125vw * 11);
    }

    /* Home - Poster */

    #poster 
    {
    height: 300vh;
    }

    

    /* ### Other pages ### */

    #mystory_ap, #goals_ap, #adaptive_ap
    {
    height: 70vh;   
    }

    #start h1 
    {
    transform: translateY(0);
    top:27%;
    }

    .start_page 
    {
    min-height: 0;
    }

    .start_page h1 
    {
    font-size: clamp(5rem, 20vw, 9999px);
    }

    .start_page.start_font h1
    {
    font-size: clamp(3.5rem, 2.5vw, 9999px);  
    }

    .start_page.start_font h1.active
    {
    top:25%;
    }
    
    /* ### Mystory ### */
    
    #begin_foto>div picture 
    {
    width:60vw;
    }

    #begin_foto>div picture#img_begin2 
    {
    width: 80vw;
    }

    #begin_foto>div picture#img_begin1 
    {
    width: 90vw;
    }

    #meedori_foto 
    {
    mask-size: 30vw;
    }

    #philosophy_k95 h3
    {
    text-align: center;
    }

    #philosophy_k95 h3 div
    {
    width:100%;
    left:0px !important;
    text-align: center;
    }

    #philosophy_k95 h3#words_k95 
    {
    bottom: 4vw;
    height: 13vw;
    left:0;
    }

    #philosophy_k95 h3 span
    {
    font-size:13vw;
    line-height:16vw;
    }

    #k95_foto>div
    {
    margin-top: 40px;
    }

    .certificato_award
    {
    width:50vw;
    }

    /* ### Goals ### */

    #story_astro, #heart_g, #type_g, #adaptive_pill
    {
    width:80vw;
    margin-top: 33vh;
    }

    #heart_g
    {
    margin-top: 27vh;
    }

    #numbers_car>div>div>div:first-child,
    #numbers_car>div>div>div:nth-child(3)
    {
    grid-column: 1 / 24;
    }

    #numbers_car>div>div>div:nth-child(2)
    {
    grid-column: 18 / 29;
    }

    #numbers_car>div>div>div 
    {
    padding: 30px 0px;
    }

    .table_award div.contgrid_margin div:first-child
    {
    display: none;
    }

    .table_award div.contgrid_margin div:nth-child(2)
    {
    grid-column: 1 / 15;
    }

    .table_award div.contgrid_margin div:last-child
    {
    grid-column: 16 / 31;
    }

    .table_award 
    {
    font-size: 1rem;
    line-height: 1.2rem;
    }

    #awards h3 
    {
    font-size: 2.5rem;
    line-height: 2.7rem;
    }

    #table_brand
    {
    display: grid;
    grid-template-columns:repeat(2,1fr);
    }

    #table_brand>div
    {
    border-bottom:1px solid #dddddd !important;
    border-right:1px solid #dddddd !important;
    }

    #table_brand>div:nth-child(4n)
    {
    border-right:1px solid #dddddd !important;
    }

    #table_brand>div:nth-child(n+17)
    {
    border-bottom:0px  !important;
    }

    #table_brand>div:nth-child(2n)
    {
    border-right:0px !important;
    }

    #book_and_mag>div>div
    {
    width:calc(3.125vw * 28);
    }

    #book_and_mag
    {
    display: block;
    }

    #book_and_mag>div>div>div:first-child
    {
    grid-column: 1 / 10;    
    }

    #book_and_mag>div>div>div:nth-child(2)
    {
    grid-column: 12 / 31;    
    }

    #book_and_mag>div>div>div:last-child
    {
    grid-column: 1 / 10;
    }

    /* ### Type ### */

    #cont_type>div 
    {
    width: 100%;
    }
    
    #type_g
    {
    margin-top: 23vh;
    }

    #type_g>div 
    {
    width: 40vw;
    }

    #type_g>div:first-child 
    {
    left: -68%;
    }

    #type_g>div:last-child 
    {
    left: 65%;
    }

    .testata_font h2
    {
    margin-bottom:30px;
    width:100%;
    }

    .testata_font 
    {
    flex-wrap: wrap
    }

    .font_artwork 
    {    
    min-height:50vh;    
    }

    #artwork_stelvio #acquila 
    {
    width: 90vw;  
    }

    #artwork_stelvio #rectangle_s 
    {
    bottom: -8vh;
    left: -2vh
    }

    #artwork_stelvio #circle_s 
    {
    width: 50vw;
    }

    .cuore_il
    {
    width:70%;
    }

    .scritta_he 
    {
    width: 47%;
    }

    #artwork_july>div picture
    {
    width:80vw;
    }

    #artwork_july>div>picture 
    {
    bottom: 50px;
    }

    #vett_1, #vett_2 
    {
    width: 140vw;
    }
 
    #vett_2 
    {
    top: 28vh;
    }

    #vett_1 
    {
    top: 20vh;
    }

    /* ### Adaptive ### */

    #adaptive_cover #felpa_fondo
    {
    position:relative;
    width:200%;
    left:-50%;
    top:-20%;
    }

    #felpa 
    {
    width: 60vw;
    }

    #felpa 
    {
    width: 100vw;
    top:10vh;
    }

    #what_foto
    {
    height: 60vh;
    overflow: visible;
    }

    #adaptive_cover 
    {
    height:40vh;
    }

    #fil_ad .left
    {
    padding-bottom:var(--smallMarginTopBottom);
    }

    /* ######## FOOTER #########*/
 
    #titoloFooter 
    {
    width:calc(4.125vw*20);
    }

    #titoloFooter 
    {
    padding-bottom: 0px;
    padding-top: 80px;
    }

    #footer h2 .word:last-child 
    {
    margin-top: -5%;
    }

    #footer h3
    {
    font-size:6vw;
    line-height:7.7vw;
    }

    #contact_info div 
    {
    width: 100% !important;
    }

    #contact_info div:last-child 
    {
    margin-left: 0px;
    margin-top:40px;
    }

    #text_info 
    {
    display: block;
    }

    #mex404 {
    width: 84vw;
    }

    #back {
    
        font-size: 25px;
    }

    #start.active #back {
        bottom: 10vh;
    }

   
}

/* #### SMARTPHONE LANSCAPE #### */
@media only screen 
and (max-width: 896px) 
and (max-height: 420px)
and (orientation: landscape) 
{
    #blocco_2, 
    #blocco_4, 
    #blocco_9,
    header nav,
    #skill,
    #mob_mail
    {
    display: none;
    }

    #nav_bot_mob, #nav_mobile 
    {
    display: block;
    }

    #nav_mobile>div nav a 
    {
    font-size: 3rem;
    line-height: 3.1rem;
    height: 3.1rem;  
    }

    #nav_mobile ul li.attivo a::before 
    {
    width: .7rem;
    left: -15%;
    }

    #nav_mobile>div nav ul 
    {
    transform: translate(-50%, -45%);
    }

    #start h1,
    #load_page>div>div#title_page
    {
    font-size: 20vw;
    transform:translate(0);
    top:20%;
    }

    #load_page>div>div#title_page
    {
    font-size: 20vw;
    transform:translate(-50%, 0);
    top:20%;
    }

    /* #### Home #### */

    #apertura #astronauta 
    {
    transform: translateY(-16%);
    }

    #apertura #astronauta img 
    {
    width: 230px;
    }

    /* Home - Roots */

    #roots h2 
    {
    font-size:8vw;
    line-height:9vw;    
    }

    /* Home - Fight */

    #fight>div h3,
    .text_fight
    {
    display: none;
    }

    #fight #ukraine,
    #fight #race,
    #fight #war,
    #fight #memorial,
    #fight #agitatevi
    {
    top:auto;
    bottom: 6.25vh;
    }

    #fight #race 
    {
    right: -6.6vw;    
    }

    #fight #ukraine 
    {
    left: calc(3.125vw*5.45); 
    }

    #fight #war 
    {
    left: -6.6vw;   
    }

    .circle_rotate.behance 
    {   
    margin-top:0px;
    position: absolute;
    right:30px;
    bottom:30px;
    }

    /* Home - Work */

    #work_title h2
    {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -40%);
    }

    #work_title h2 span 
    {
    font-size: 102px;
    line-height:104px;
    }
    
    .circle_rotate.absolute 
    {
    width: clamp(128px, calc(3.125vw * 3), 9999px);
    }

    /* #### Goals #### */

    .table_award 
    {
    font-size: 1.2rem;
    line-height: 1.3rem;
    width: 100%;
    margin: auto;
    }

    /* Footer */

    #contact_info
    {
    flex-direction:column;
    }

    #contact_info>div:last-child
    {
    order: 1;
    padding-bottom:var(--bigMarginTopBottom);
    }

    #contact_info>div:first-child
    {
    order: 2;    
    }

    /* ### Type #### */

    .font_artwork 
    {
    min-height: 100vh;
    }

    #rectangle_s>span 
    {
    width: 9vw;
    }

    #artwork_stelvio #rectangle_s 
    {
    bottom: -18vw;
    left: -5vw;
    }

    #rectangle_s>span 
    {
    transform: rotate(-65deg);
    }

    .cuore_il 
    {   
    Width: 35VW; 
    }

    .scritta_he 
    {
    Width: 26VW;
    }

    #artwork_july>div picture 
    {
    width: 40vw;
    }

    .testata_font>div:last-child
    {
    width:175px;
    }
}