/* locomotive-scroll CSS import commented out because the local file is missing
    If you have the file, restore the import or place the file at css/locomotive-scroll.min.css */
/* @import "css/locomotive-scroll.min.css"; */

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

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

    @font-face 
    {
    font-family: 'StelvioGroteskExtrabold';
    src: url('fonts/extra_bold.woff') format('woff'); /* 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;
    }

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

    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);
    }

   

    #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);
    position: relative;
    }

    picture img 
    {
    width:100%;
    }

    h1, h2, h3, h4, h5
    {
    font-weight: normal;
    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:99999999999;
    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 1.1s var(--animation);
    }

    /* Compat React: PageTransition usa classi fadeIn/fadeOut.
       Le mappiamo sul vecchio sistema show/hide per evitare flicker. */
    #load_page.fadeOut
    {
    height:100vh; 
    height:calc(var(--vh, 1vh) * 100);
    }

    #load_page.fadeIn
    {
    height:0px;
    }

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

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

    #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;
    }

    /* Compat React */
    #load_page.fadeOut .logo_loading>div
    {
    transform:translateY(0%);
    transition: transform .8s var(--animation);
    }

    #load_page.fadeOut .logo_loading>div
    {
    transition-delay:1.1s;
    }

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

    /* Compat React: dissolve contenuto mentre il sipario è su */
    .page-content
    {
    will-change: opacity;
    }

    .page-content.fadeOut
    {
    opacity:0;
    transition: opacity .15s linear;
    }

    .page-content.fadeIn
    {
    opacity:1;
    transition: opacity .15s linear;
    }
    .logo_loading
    {
    width:clamp(160px, 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);
    }

    body.start #loading .logo_loading
    {
    transform: scale(50) translateX(-6%) rotateZ(-60deg);
    transition: transform 0.7s ease-in;
    transition-delay: 0.8s;
    will-change: transform;
    }

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

    body.start #loading
    {
    opacity: 0;
    transition: opacity 0.4s ease-out;
    transition-delay: 1.2s;
    }

    /* Loading Text e Percentuale */
    .loading-text {
        position: absolute;
        bottom: 25%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        color: var(--white);
    }

    .loading-message {
        display: block;
        font-family: 'StelvioGroteskRegular', sans-serif;
        font-size: 14px;
        letter-spacing: 1px;
        margin-bottom: 10px;
        opacity: 0.8;
    }

    .loading-percent {
        display: block;
        font-family: 'StelvioGroteskBold', sans-serif;
        font-size: 32px;
        letter-spacing: 2px;
    }

    body.start .loading-text {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Loading Spinner */
    .loading-spinner {
        position: absolute;
        bottom: 12%;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 40px;
    }

    .loading-spinner svg {
        width: 100%;
        height: 100%;
        animation: rotate-spinner 1.5s linear infinite;
    }

    .loading-spinner circle {
        stroke: var(--white);
        stroke-linecap: round;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        animation: dash-spinner 1.5s ease-in-out infinite;
    }

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

    @keyframes dash-spinner {
        0% {
            stroke-dasharray: 1, 150;
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -35;
        }
        100% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -124;
        }
    }

    body.start .loading-spinner {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    body.start .loading-text {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
  
    #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: 'StelvioGroteskBold';
    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:15px 23px;
    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:.5rem;
    height:.5rem;
    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:translate(-50%, -50%);
    top:50%;
    left:50%;
    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 .active .letter.slow .word .char
    {
    transform: translateY(0%);
    transition: transform .8s var(--animation);
    opacity:1;
    transition-delay: calc(.2s * var(--char-index));
    }


    /************ 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;
    }

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

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

    header
    {
    left:0px;
    right:0px;
    position:fixed; 
    /* aumento il z-index per assicurare che l'header stia sopra footer/caricamenti dinamici */
    z-index:9999;
    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;
    }

    
    #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(--white);
    display: block;
    }

    #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;
        /* smooth transitions when JS toggles the .block class */
        transition: width .6s var(--animation), transform .6s var(--animation);
    }

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

    header nav ul
    {
    display:flex;
    gap: 50px;
    }

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

 
    header nav ul li
    {
    position: relative;
    align-items: center;
    display: flex;
    text-transform: uppercase;
    
    }

    header nav ul li.attivo::before
    {
    aspect-ratio:1;
    content: "";
    width: 0.4rem;
    background: var(--white);
    border-radius: 100%;
    display: inline-block;
    left: -1rem;
    position: absolute;  
    transform: scale(0);     
    }

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

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

    header 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;
    }

    header 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;
    opacity: 0;
    transition: opacity 1.2s var(--animation) 0.1s;
    }

    #start.active #cielo
    {
    opacity: 1;
    }

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

    main>section
    {
        position: relative;
    }

    #apertura
    {
    height:4000px;
    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) 0.1s;
    }

    #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(-30%);
    padding-top: 2vh;
    }

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

    #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(30px, 5vw, 1.875rem);
    }

    #placeholder_idx_1 .bigText
    {
    padding-bottom:var(--bigMarginTopBottom);
    }

    .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: end !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:2.5rem;
    line-height:3rem;
    }

    .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:var(--bigMarginTopBottom);
    padding-bottom:var(--bigMarginTopBottom);
    background: var(--black);
    margin-top: -20px;
    z-index:2;
    }

    #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);
    }
    
    #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:last-child
    {
    grid-column: 3 / 27;
    }

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

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

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

    #peaceCONT
    {
    overflow: hidden;
    }
    
    #peaceCONT
    {
    width:100%;
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    background:var(--green);
    overflow: hidden;
    position:relative;
    }

    #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 - placeholder_idx_3 ************/

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

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

    #placeholder_idx_3>div h3
    {
    position: absolute;
    opacity: 1;
    height:clamp(100px, 8vw, 400px);
    }

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

    #placeholder_idx_3>div h3:nth-child(2)
    {
    bottom:4vh;
    right:3.125vw;
    }

    #placeholder_idx_3>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: 'StelvioGroteskBold';;
    }

    .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;
    }

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

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

    #placeholder_idx_3 .post
    {
    position: absolute;
    aspect-ratio:900 / 1286;
    width:clamp(170px, calc(3.125vw * 3.5), 400px);
    overflow: hidden;
    }

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

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

    #placeholder_idx_3 #war
    {
    left:3.125vw;
    bottom:calc(6.25vh*4);
    }

    #placeholder_idx_3 #ukraine
    {
    left:calc(3.125vw*7.5);
    bottom:6.25vh;
    }

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

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

    #placeholder_idx_3 #race
    {
    right:3.125vw;
    bottom:calc(6.25vh*6);
    }

    #placeholder_idx_3>div img
    {
    width:clamp(170px, calc(3.125vw * 3.5), 400px);
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    margin: auto;
    transform: scale(1.2);
    }

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

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

    /************ Home - placeholder_idx_4 ************/

    #placeholder_idx_4
    {
    background: var(--black);
    padding-top: var(--bigMarginTopBottom);
    padding-bottom: var(--bigMarginTopBottom);
    overflow: hidden;
    margin-top:-20px;
    }

    #brand_col
    {
    display: flex;
    width:70vw;
    margin: auto;
    margin-top:300px;
    gap: 25px;
    }

    #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;
    }

    #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:#7a7a7a;
    }
    
    #brand_col .right,
    #brand_col .right li
    {
    transform-origin:bottom right;
    }

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

    /* Home - Font */

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

    #placeholder_idx_5 h2,
    #cont_poster h2
    {
    font-size: 30vw;
    line-height:30vw;
    text-align: center;
    }

    #poster h2
    {
    position: absolute;
    }

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

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

    #cont_type>div.margin-top
    {
    margin-top:7vw;
    }

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

    #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(250px, 15.625vw, 999999px);
    height:clamp(250px, 15.625vw, 999999px);
    background: var(--black);
    position: absolute;
    top:0px;
    bottom:0px;
    margin: auto;
    right:-5.69vw;
    border-radius:50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:5;
    }

    .text_font>div
    {
    width:70%;
    }

    .text_font h3
    {
    font-size:clamp(1.5rem, 1.7vw, 3rem);
    line-height:clamp(1.6rem, 1.7vw, 2.5rem);
    color:var(--white);
    margin-bottom:10px;
    }
    
    .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;
    }

   

    #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);
    }

    #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;
    }

   

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

    #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:0px;
    left:0px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:2;
    }

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

    #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.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);
    }

    #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, #placeholder_com_5, #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;
    }

    #placeholder_com_5
    {
    margin-top:45vh;
    }

    #type_g
    {
    margin-top:65vh;
    }

    #start.active #story_astro,
    #start.active #placeholder_com_5,
    #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 #placeholder_com_5,
    #start.active.active_l #type_g,
    #start.active.active_l #adaptive_pill
    {
    transform:rotate(0deg) translateY(0%);
    transition:none;
    }

    #story_astro picture,
    #placeholder_com_5 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);
    }

    
   
    

    

   



    

    #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;
    }

 
    
  

    

   

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

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

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

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

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

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

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

   

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

  
    
   

    

    

    

    #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);
    }

   


    

  
    
    .table_award
    {
    font-size:1.2rem;
    line-height:1.3rem;
    width:70vw;
    margin: auto;
    }

   

    .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);
    }

  
    
    #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: 'StelvioGroteskBold', sans-serif;
    display: block;
    }

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

   

    /*###################### placeholder_idx_5 ######################*/

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

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

    
 
    .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);
    }

  

    #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;
    }

    

   

    

    #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); 
    }

   

   

    #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: 'StelvioGroteskExtrabold';
    }

    #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: 'StelvioGroteskBold';
    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: 'StelvioGroteskBold';
    }

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


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

    #footer
    {
    background: var(--green);
    position: relative;
    overflow: hidden;
    padding-bottom:40px;
    }

    #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: 'StelvioGroteskBold';
    }

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

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

    #contact_info,
    #text_info
    {
    display:flex;   
    }

    #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: 'StelvioGroteskBold';
    margin-bottom:0px;
    font-size:1.6rem;
    line-height:1.65rem;
    }

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

    #mail_f
    {
    margin-bottom:30px;
    }



/* #### 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;
    }

  

    #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);
    }

    

    /* ###### placeholder_idx_5 ###### */

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

/* #### TABLET / PHONE PORTRAIT #### */
@media screen and (max-width:1024px) and (orientation: portrait) 
{
    #mousepointer,
    #image_nav,
    #img_aw,
    #brand_col li>div:first-child span,
    #brand_col li>div:last-child span:last-child,
    header nav, #skill,
    #title_page,
    #logo_h
    {
    display: none;
    }

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

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

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

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

    .bigText p 
    {
    width: 80vw;
    }

    header 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(-32%);
    }

    #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%;
    }

    
    
    #brand_col 
    {
    width: 90%;
    margin-top: 140px;
    }

    #brand_col li>div 
    {
    top:15px;
    justify-content: center;
    }
    
    #brand_col li>div:last-child 
    {
    top: auto;
    bottom: 15px;
    }

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

    /* HOME - placeholder_idx_3 */

    #placeholder_idx_3 
    {
    height: 300vh;
    }

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

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

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

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

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

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

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

    #placeholder_idx_3 #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;
    }

    /* HOME - placeholder_idx_5 */

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

    #rectangle_s
    {
    bottom:5%;
    }

    #rectangle_s>span 
    {
    width: 8vh;
    }

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

    /* Home - placeholder_idx_5 */

    #cont_type 
    {
    width: 87.5vw;
    }

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

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

    .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;
    height: 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: 70vh;
    }

    .startSection h2
    {
    width:80%;
    }

    #start h1 span 
    {
    font-size:24vw;
    }

    #start.active #story_astro,
    #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, #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));
    }

    

    

    #text_scroll_panel 
    {
    height: 350vh;
    background-color: var(--black);
    }

    

    #text_scroll_panel h3#words_panel 
    {
    bottom: 2vw;
    height: 13vw;
    }

    

   

    

    

   

    #certificato_award img 
    {
    top: -10vh;
    }

    .certificato_award
    {
    top:22vh;
    }

    .certificato_award img 
    {
    top: 0vh;
    }

  

    .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);
    }

    /* #### placeholder_idx_5 #### */

    #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%;
    }

    

    #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;
    }

    
}

/* #### SMARTPHONE PORTRAIT #### */
@media screen and (max-width:568px) and (orientation: portrait) 
{
    #placeholder_idx_3 #memorial,
    #placeholder_idx_3 #ukraine,
    #placeholder_idx_3 #race,
    #placeholder_idx_3 #war 
    {
    display:none;   
    }

    #load_page>div>div.center {
        width:130px;
    }

    header 
    {
    padding-top: 30px;
    }

    header svg
    {
    width:22vw;
    }

    header #logo
    {
    width:100px;
    }

    #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;
    }
   
    #placeholder_idx_2, #love 
    {
    height: 4000px;
    }

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

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

    /* 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 */

    #placeholder_idx_1 .flex-column
    {
    flex-direction: column;
    }

    #bomb 
    {
    top:50%;
    width: 90vw;
    }

    /* Home - placeholder_idx_5 */
    
    .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;
    height: 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;
    }

    /* Home - placeholder_idx_3 */

    #placeholder_idx_3>div h3 span 
    {
    font-size: 15vw;
    line-height:18vw;
    height: 15vw;
    }

    .text_fight 
    {
    display: none;
    }

    #placeholder_idx_3 .post,
    #placeholder_idx_3>div.active img
    {
    width:30vw;
    }

    #placeholder_idx_3>div h3:first-child 
    {
    top: calc(6.25vh* 2.2);   
    }

    #placeholder_idx_3 #agitatevi.post,
    #placeholder_idx_3 #agitatevi img
    {
    width:50vw;
    }

    #placeholder_idx_3>div h3:nth-child(2) 
    {
    bottom: 5vh;
    }

   

    #brand_col ul 
    {
    width: 31.2%;
    }

    li>div h3, li>div span 
    {
    text-align: center;
    }

    #brand_col
    {
    gap: 12px;
    }

    #brand_col li 
    {
    height:190px;
    }

    #placeholder_idx_4 .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;
    }

    #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: 50vh;
    }

    .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;
    }

   

    #text_scroll_panel h3
    {
    text-align: center;
    }

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

    #text_scroll_panel h3#words_panel 
    {
    bottom: 4vw;
    height: 13vw;
    left:0;
    }

    #text_scroll_panel h3 span
    {
    font-size:13vw;
    line-height:16vw;
    }

   

    .certificato_award
    {
    width:50vw;
    }

    /* ### Goals ### */

    #story_astro, #type_g, #adaptive_pill
    {
    width:80vw;
    margin-top: 33vh;
    }

   

   

    .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;
    }

    

    #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;
    }

    /* ### placeholder_idx_5 ### */

    #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 - placeholder_idx_3 */

    #placeholder_idx_3>div h3,
    .text_fight
    {
    display: none;
    }

    #placeholder_idx_3 #ukraine,
    #placeholder_idx_3 #race,
    #placeholder_idx_3 #war,
    #placeholder_idx_3 #memorial,
    #placeholder_idx_3 #agitatevi
    {
    top:auto;
    bottom: 6.25vh;
    }

    #placeholder_idx_3 #race 
    {
    right: -6.6vw;    
    }

    #placeholder_idx_3 #ukraine 
    {
    left: calc(3.125vw*5.45); 
    }

    #placeholder_idx_3 #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;    
    }

    /* ### placeholder_idx_5 #### */

    .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;
    }
}
#placeholder_idx_1, #placeholder_idx_2, #placeholder_idx_3, #placeholder_idx_4, #placeholder_idx_5, #cont_poster, #cont_work, #placeholder_cre_1, #placeholder_cre_2, #placeholder_cre_3, #placeholder_cre_4, #placeholder_cre_5, #placeholder_con_1, #placeholder_con_2, #placeholder_con_3, #placeholder_com_1, #placeholder_com_2, #placeholder_com_3 {
  display: none !important;
}
#mail_f a {
    color: white;
}
#mail_f .icon {
    font-size: 1.1em; /* dimensione icona */
    margin-right: 6px;
    color: white; /* colore icona */
    vertical-align: middle;
}
/* Nasconde #corpo1 di default (altre pagine) */
#corpo1 {
    display: none;
    background: #1b1c1e;
    position: relative;
    overflow: hidden;
    padding-bottom: 40px;
    color: white;
}

/* Mostra #corpo1 solo sulla homepage (classe "home" sul body) */
body.home #corpo1 {
    display: block;
}
:root {
  --gray-dark: #696969;
}

/* container generale: colonna singola */
.cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem auto;
  padding: 0;
  
  width: 80%;
}

/* ogni item occupa tutta la larghezza del genitore */
.cards__item {
  width: 100%;
  display: flex;
}

/* card */
.card {
  width: 100%;
  background-color: #1b1c1e;
  border-radius: 0.25rem;
  /*box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25);*/
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* immagine - usa ::before per il ratio */
.card__image {
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  transition: filter 0.5s cubic-bezier(.43,.41,.22,.91);
}

/* crea l'altezza mantenendo il rapporto 2:1 */
.card__image::before {
  content: "";
  display: block;
  padding-top: 50%; /* 2:1 aspect ratio */
}

/* Media query per mobile */
@media screen and (max-width: 600px) {
  .cards {
    width: 95%;
    margin: 1rem auto;
  }
}

/* contenuto testuale */
.card__content {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  /* default: allineamento normale a sinistra */
  align-items: flex-start;
  text-align: left;
}

/* stile titolo / testo */
.card__title {
  color: var(--gray-dark);
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.card__text {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: 0.5rem;
  flex: 0 1 auto;
  color: white;
}

/* immagini di esempio */
.card__image--flowers { background-image: url("img/flowers.png"); }
.card__image--fence   { background-image: url("img/fence.png"); }



/* ====== STILE SOLO PER LA PRIMA CARD: centrare il suo contenuto ====== */
/* centra testo e titolo */
.cards__item:first-child .card__content {
  align-items: center;   /* centra il contenuto orizzontalmente nel flex column */
  text-align: center;    /* centra il testo inline */
}

/* centra l'immagine visivamente (non altera la sua larghezza) */
.cards__item:first-child .card__image {
  margin-left: 0; /* già è width:100%, ma lascia così per sicurezza */
}
.cards__item .card__image {
  background-size: 30% auto;      /* mantiene dimensione originale, non ingrandisce */
  background-repeat: no-repeat;
  background-position: center;
}
.separator-curve {
  background-color: #1b1c1e;
  height: 60px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.separator-curve svg {
  display: block;
  width: 200%;          /* doppia larghezza */
  height: 100%;
  animation: waveScroll 5s linear infinite;
}

@keyframes waveScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* scorre esattamente di una onda */
}
#testo1 {
    font-size: 150%;
}
.hero-clip {
    position: relative;
    width: 95vw;
    max-width: 1400px;
    height: 320px;
    margin: 2rem auto;
    overflow: hidden;
    border-radius: 12px;
    background-color: #111;
    font-family: system-ui, sans-serif;
    color: white;
}

/* Contenuto sottostante */
.hero-clip__content {
    position: absolute;
    inset: 0;
    padding: 2rem;

    /* AGGIUNTA / SOSTITUZIONE */
    padding-left: clamp(35%, 45vw, 55%);

    color: #fff;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Layer immagine */
.hero-clip__image {
    position: absolute;
    inset: 0;
    z-index: 2;

    background-image: url("/img/software.jpg");
    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;
    padding-left: 2rem;

    /* CLIP-PATH */
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.6s ease-in-out;
}
.image2 {
    background-image: url("/img/web.jpg") !important;
}
.image3 {
    background-image: url("/img/cybersec.png") !important;
}
.image4 {
    background-image: url("/img/writer.jpg") !important;
}
.image5 {
    background-image: url("/img/copywriter.jpg") !important;
}
.image6 {
    background-image: url("/img/designer.jpg") !important;
}
/* Titolo sopra immagine */
.hero-clip__title {
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 4px 10px rgba(0,0,0,0.6);
}

/* Hover: mascheratura */
.hero-clip:hover .hero-clip__image {
    clip-path: inset(0 60% 0 0);
}
.hero-clip__content,
.hero-clip__content h2,
.hero-clip__content p {
    color: #ffffff;
}
hr {
    border: none;
    border-top: 1px solid #ccc;
    margin-top: 1rem;
    margin-bottom: 3rem;
}
.card2 {
  width: 100%;
  background-color: white;
  border-radius: 0.25rem;
  /*box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25);*/
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card__text2 {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: 0.5rem;
  flex: 0 1 auto;
  color: black;
}
#placeholder_com_4 h2 span
 
    {
    font-size:clamp(60px, 11vw, 250px);
    line-height:clamp(65px, 10.5vw, 240px);
    color:var(--black);
    }

    
    #placeholder_com_4 h2
   
    {
    margin-bottom:var(--smallMarginTopBottom);
    }

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

    #placeholder_com_4
    {
    padding:80px 0px;
    }
    .cta {
    width: 80%;
    max-width: 100%;
    margin: 0 auto;              /* centra il div rispetto al padre */
    display: flex;
    justify-content: center;     /* centra orizzontalmente il contenuto */
    align-items: center;         /* centra verticalmente se necessario */
}

.cta img {
    max-width: 100%;             /* l'immagine non supera il contenitore */
    height: auto;                /* mantiene le proporzioni */
    display: block;
}
#errore {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
}

#errore img {
  max-height: 50vh;
  width: auto;
  max-width: 100%;
  margin-bottom: 1.5rem;
}

#errore h1,
#errore h2,
#errore p {
  margin: 0.5rem 0;
}
#errore a {
  color: #007BFF;
  text-decoration: none;
  font-weight: bold;
}

nav ul li.attivo a {
    pointer-events: none;
}

/* ====== HERO-CLIP MOBILE: Layout Verticale ====== */
@media screen and (max-width: 768px) {
    .hero-clip {
        height: auto;
        min-height: 280px;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }
    
    .hero-clip__image {
        position: relative;
        height: 180px;
        min-height: 180px;
        clip-path: none !important;
        transition: height 0.4s ease-in-out;
        border-radius: 12px 12px 0 0;
    }
    
    .hero-clip__content {
        position: relative;
        inset: auto;
        padding: 1.5rem;
        padding-left: 1.5rem;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
        background-color: #111;
        border-radius: 0 0 12px 12px;
    }
    
    /* Stato attivo al tap */
    .hero-clip.active .hero-clip__image {
        height: 120px;
        min-height: 120px;
    }
    
    .hero-clip.active .hero-clip__content {
        max-height: 400px;
        opacity: 1;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    
    /* Indicatore tap */
    .hero-clip__image::after {
        content: "Tap per info";
        position: absolute;
        bottom: 10px;
        right: 15px;
        font-size: 0.75rem;
        color: rgba(255,255,255,0.7);
        background: rgba(0,0,0,0.5);
        padding: 4px 10px;
        border-radius: 4px;
        transition: opacity 0.3s ease;
    }
    
    .hero-clip.active .hero-clip__image::after {
        opacity: 0;
    }
}
a.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}