/** * V A R I A B I L I
    ==================================================================================*/

    :root {
        
        /** --------------- GESTIONE FONTS ----------------- */
        
        --font:             'Inter';

        
         /** --------------- GESTIONE COLORI ----------------- */
        
        --maincolor:        #2B2222;
        --fontcolor:        #1f1f1f;
        --titolicolor:      #F4BE05;
        --bianco:           #fff;   
        --grigio:           ;
    }


    /** * STRUTTURA
    ==================================================================================*/

    html, body              { font-size: 16px;  color:var(--fontcolor); min-height: 800px; font-family:var(--font); }


    .column     { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; justify-content: space-between;  } 

    aside       { position: -webkit-sticky; position: sticky; top:80px; max-height: calc( 100vh - 160px );  } 
    aside       { display: flex; flex-direction: column; gap: 2em; flex-wrap: wrap; } 
    

    .site-title             { background-image: url(../img/logo.svg); display: block;  text-indent: -9999px; }
    .site-title a           { display: block; height: 150px; width: 150px; } 
    .site-description       { display: none; }

    .contenitore            { padding-top: 50px;}

    #title                  { margin-bottom: 85px; }

    .preventivo             { margin-top: 80px; }

    /** * page animation
    ==================================================================================*/

    .reveal         { position: relative; transform: translateY(250px); opacity: 0; transition: 2s all ease;}
    .reveal.active  { transform: translateY(0); opacity: 1;}


    /** *   T I P O G R A F I A
    ==================================================================================*/
 
     h1, h2, h3,h4, h5, h6, p {
      font-size: clamp(var(--min), var(--val), var(--max));
    }

    h1 {
      --min: 2em; 
      --val: 5vw; 
      --max: 3em; 
      line-height: 1.2;
      font-weight: 800;
    }


    h2 {
      --min: 2em; 
      --val: 5vw; 
      --max: 3em; 
      line-height: 1.2;
      font-weight: 800;
    }

    h3 {
      --min: 1em; 
      --val: 4vw; 
      --max: 2em; 
      line-height: 1.1;
      font-weight: 800;
    }

    p {
      --min: 1em;
      --val: 1.6vw;
      --max: 1.1em;
    }

    h1, h2, h3,h4, h5, h6    {  color:var(--titolicolor);    }

    p                     { font-family: var(--font), sans-serif;   }
    p.data                { margin: 20px 0 0 0 !important; }
    
    a                     { }
    a:link                { color: var(--titolicolor); }
    a:focus               { outline: 0;}
    a:hover               { text-decoration:none; }

    a.free img            { width: 70px; height: auto; margin: 20px 0; }

    #address h3             { font-size: 21px; line-height: 21px; }
    #address h5             { font-size: 14px; line-height: 21px; }
    #address p              { font-size: 13px; line-height: 21px; font-weight: 300; }
    
    
    

    /** *   M E N U
    ==================================================================================*/

    ul#main-menu                { list-style-type: none; padding: 0; }  
    ul#main-menu li             { line-height: 30px; }  
    ul#main-menu li a           { font-size: 18px;    color:var(--titolicolor); font-weight: 500;}  

    /** *   MENU MOBILE  =======================================================================*/


    .nav-mobile {
      background-color: rgba(244, 190, 5, 1);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease-in-out;
      z-index: 9999;
    }

    .nav-mobile ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      position: absolute;
      left: 50%;
      top: 170px;
      transition: all 0.3s ease-in-out;
      transform: translateX(-50%);
    }

    .nav-mobile ul li {
      transform: translateY(50px);
      opacity: 0;
    }

    .nav-mobile ul li a {
      display: block;
      font-size: 21px;
      text-decoration: none;
      padding: 10px 0;
      text-align: center;
      color: #000 !important;
      font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 2px;
      transition: all 0.2s ease-in-out;
    }

    .nav-mobile ul li a:hover {
      color: #E84A5F;
    }    

    .nav-mobile p {
        text-align: center;
        display: block;
        
        width: 80vw;
        position: absolute;
        bottom: 30px;
        left: 10vw;
        
        font-size: 18px;
        font-weight: 800;   
    }

    .nav-mobile p a {
        color: #333 !important;
        text-decoration: underline;
    }

    .toggle-btn {
      display: block;
      position: fixed;
      z-index: 10000;
      right: 45px;
      top: 40px;
      cursor: pointer;
    }

    .toggle-btn .bar {
      width: 30px;
      height: 2px;
      margin: 7px auto;
      background-color: #1f1f1f;
      transition: all 0.3s ease-in-out;
    }

    .toggle-btn .bar:nth-child(2) { width: 20px; }

    #toggle:checked ~ nav { opacity: 1; visibility: visible; }
    #toggle:checked ~ nav ul { top: 70px; }
    #toggle:checked ~ nav ul li { transform: translateY(0px); opacity: 1; }
    #toggle:checked ~ nav ul li:nth-child(1) { transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.1s; }
    #toggle:checked ~ nav ul li:nth-child(2) { transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.2s; }
    #toggle:checked ~ nav ul li:nth-child(3) { transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.3s; }
    #toggle:checked ~ nav ul li:nth-child(4) { transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.4s; }
    #toggle:checked + label.toggle-btn .bar { background-color: #fff; }
    #toggle:checked + label.toggle-btn .bar:nth-child(2) { transform: translateX(50px); opacity: 0; }
    #toggle:checked + label.toggle-btn .bar:nth-child(1) { transform: translateY(10px) rotate(45deg); }
    #toggle:checked + label.toggle-btn .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


    /** * G U T E N B E R G
    ==================================================================================*/

    .alignwide          { margin: 32px calc(25% - 25vw); max-width: 100vw;}
    .alignwide img      { max-width: 1600px; display: inline; }
    
    .alignleft,.alignright  { margin-bottom: 20px;    width: 40%; }
    .alignleft              { float: left;	margin: 5px 40px 30px 0; }

    .alignfull              { margin: 0 calc(50% - 50vw); max-width: 100vw; width: 100vw;}


    /** * B U T T O N S
    ==================================================================================*/

    .btn-primary.disabled,
    .btn-primary:disabled {
        color: #fff;
        background-color: #999;
        border-color: #999;
    }

    .btn-primary {
        color: #333;
        background-color: var(--titolicolor);
        border-color: var(--titolicolor);
    }

    .btn-primary:hover {
        color: #333;
        background-color: var(--titolicolor);
        border-color: #333;
    }

    /** * ==================================================================================================================

        R E S P O N S I V E

    ======================================================================================================================= */
    
    @media (min-width: 782px) {

        .site-header { display: none!important; }


        }

    @media (max-width: 782px) {

        .site-header    { display: block; } 
        aside           { display: none!important;}
        
                
        .wphead {
    display: flex !important;
  
    flex-wrap: nowrap;
    
    justify-content: space-between;
}
        
        .column {
    display: flex;
 
    flex-wrap: wrap!important;
    align-items: normal!important;
}

        }


/** * ==================================================================================*/

    @media (max-width: 480px) {
        
        .wrapper                { padding: 40px 30px;}
          
        .site-title             { position: relative;  z-index: 9999; height: 78px; width: 200px;}   
        .site-title a           { display: block;height: 78px; width: 200px; }
        
       .site-header             { margin-bottom: 40px; }
        
        .wp-block-spacer                { display: none !important; }
        .wp-block-media-text__media     { margin: 10px 0 40px 0 !important; }

        
        
      }

/** * ==================================================================================*/

    @media (min-width: 480px) and (max-width: 760px) {

        .site-title             { position: relative;  z-index: 9999; height: 120px; width: 300px;}   
        .site-title a           { display: block;height: 120px; width: 300px; }
        
    
      }

/** * ==================================================================================*/

      @media (min-device-width: 768px) and (max-device-width: 1024px)  and (orientation: landscape) {
        
          .site-title { height: 180px; width: 170px; margin: 0px 0; }
    }    


    @media (min-width: 768px) and (max-width: 980px) {
         
        }
}

/** * ==================================================================================*/

    @media (min-width: 980px) and (max-width: 1200px)  and (orientation: landscape) {
        
         
        }

/** * ==================================================================================*/


    @media (min-width: 980px) and (max-width: 1200px) {
         
        .site-title             { background-size: cover; height: 200px; width: 150px; margin: 20px 0; }   
        .site-title a           { display: block; height: 85px; width: 300px; }
        

    }

/** * ==================================================================================*/
    
    @media (min-width: 1200px) {
        


        .wrapper    { display: flex; flex-direction: row; padding: 0 80px; margin-bottom: 80px;  margin-top: 80px;  } 

        .cont     { margin:0 150px 0 150px;}


        .site-title             { position: relative;  z-index: 9999; height: 120px; width: 300px;}   
        .site-title a           { display: block;height: 120px; width: 300px; }
        
    }  

/** * =========    THE END      =========================================================================*/