@import url('https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&family=Instrument+Serif:ital@0;1&display=swap');


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

    :root {
        
        /** --------------- GESTIONE FONTS ----------------- */
        
        --font:             'Instrument Serif';
        --hand:             'Fuzzy Bubbles';

        
         /** --------------- GESTIONE COLORI ----------------- */
        
        --maincolor:        #575756;
        --fontcolor:        #1f1f1f;
        --blu:              #3377A9;
        --lightblu:         #6D99D1;
        --bianco:           #fff;   
        --bkcolor:          #F4F4F0;
    }


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

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



    aside       { position: -webkit-sticky; position: sticky; top: 40px; max-height: 100vh; } 
    aside       { display: flex; flex-direction: column; gap: 2em; flex-wrap: wrap; padding: 40px; } 



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

    .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                  { text-align: center; text-transform: uppercase; }
    #mapid                  { display: block; height: 500px; }

    .testata:after          { content:url(../img/fregio.svg); margin-top: 40px;  }

    .preventivo             { margin-top: 80px; }

    .wpcf7-list-item        { margin: 20px 0; }

    .gtranslate_wrapper     { text-align: center; }
    a.glink                 { padding: 0 20px; }

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

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

    .reveal3            { transform: translate(200px, 0px); transition: transform 1000ms linear, opacity 4s;;  opacity: 0; }
    .reveal3.active     { transform: translate(0px, 0px); opacity: 1;  }    

    .reveal4            { transform: translate(-200px, 0px); transition: transform 1000ms linear, opacity 4s;  opacity: 0; }
    .reveal4.active     { transform: translate(0px, 0px); opacity: 1;  }


    /** * SLIDER HOME
    ==================================================================================*/



    .slider h2  { position:absolute; z-index: 9999;  color: #fff; text-align: center; text-transform: uppercase;}


    .items { position: relative; overflow: hidden; width: 100%; height: 100vh; padding-bottom: 56.25%; }

    .item { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; opacity: 0; transition: opacity 0.6s ease-in-out; } 
    .item.current { opacity: 1; } 
    .item img { width: 100%; height: 100%; object-fit: cover; }


    .opahome        { background-color: rgba(0, 0, 0, 0.2);  position: absolute; top: 0; width: calc( 100% - 280px ); height: 100vh;  z-index: 1; overflow: hidden; }


    /** * A C T I O N S  M E N U'
    ==================================================================================*/
    
    .contatti                   { display: block;  height: auto; text-align: center; z-index: 12000; }

    .contatti ul                { list-style-type: none; padding: 0; }
    .contatti ul                { list-style-type: none; padding: 0; }
    .contatti ul li             { margin-bottom: 40px; }
    .contatti ul li a           { color:var(--lightblu); }
    .contatti ul li a:hover     { color:var(--blu) !important;  }

    .contatti h6 { line-height: 10px;  display: block; font-size: 15px; letter-spacing: 1px; margin: 0; text-transform: uppercase; }

    .contatti svg,  .share svg          { width: 17px; height: auto; }



    #blocks img                         { border-radius: 8px; }

    .form   { padding: 0 !important; }


    /** *   T I P O G R A F I A
    ==================================================================================*/

    a, input, submit, textarea, button, .btn-default { transition: all 0.2s ease-out 0s; }
 
     h1, h2, h3,h4, h5, h6, p, ul li {
      font-size: clamp(var(--min), var(--val), var(--max));
    }

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


    h2 {
      --min: 2em; 
      --val: 3vw; 
      --max: 3em; 
      line-height: 1.2;
      letter-spacing: 5px;
    }

    h3 {
      --min: 1em; 
      --val: 1.8vw; 
      --max: 1.8em; 
      line-height: 1.4;
    }

    p, ul li {
      --min: 1em;
      --val: 1.2vw;
      --max: 2em;
        line-height: 150%;
    }

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

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

    a.free img            { width: 50px; height: auto; margin: 20px auto; opacity:0.7; display: block;}

    #address                { text-align: center; }
    #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; }
    
    .hand   { font-family: var(--hand); text-align: center; margin-bottom: 80px !important; line-height: 140%; font-size: 18px; text-transform: uppercase;  }

    #blocks h4  { margin-bottom: 10px;}
    #blocks h3  { margin: 40px 0 20px 0;}


    .wp-block-button__link {
        color: var(--blu) !important;
        border-color: var(--lightblu) !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 14px;
        transition: all 0.2s ease-out 0s;

    }

    .wp-block-button__link:hover {
        color: var(--bianco) !important;
        background-color: var(--blu) !important;
        border-color: var(--blu) !important;
        
    }

    .wp-block-image figcaption {
        color: var(--blu);
        font-size: 14px;
        text-align: center;
        font-family: var(--hand);
        margin-top:20px;
    }

    

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

    ul#main-menu                { list-style-type: none; padding: 0; text-align: center;}  
    ul#main-menu li             { line-height: 30px;  }  
    ul#main-menu li a           { font-size: 18px; color:var(--maincolor); text-transform: uppercase; letter-spacing: 1px; display: inline-block; padding: 3px 0; position: relative; transition: all 0.3s ease-in-out;}

    ul#main-menu li a:hover     { color:var(--blu); font-weight: bold; background-position: 0; }  

    ul#main-menu li a:before{ content: ''; background: var(--lightblu); display: block; position: absolute; bottom: 5px; left: 0; width: 0; height: 1px; transition: all 0.3s ease-in-out;} 
    ul#main-menu li a:hover::before{ width: 100%;}


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


    .nav-mobile {
      background-color: var(--blu);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease-in-out;
      z-index: 15000 !important;
    }

    .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: #fff !important;
      font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 2px;
      transition: all 0.2s ease-in-out;
    }

    .nav-mobile ul li a:hover {
      color: var(--giallo);
    }    

    .nav-mobile p {
        text-align: center;
        display: block;
        
        width: 80vw;
        position: absolute;
        bottom: 30px;
        left: 10vw;
        font-size: 15px;
        color: #fff;
    }

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

    .toggle-btn {
      display: block;
      position: fixed;
      z-index: 16000;
      right: 45px;
      top: 50px;
      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(--blu);
        border-color: var(--blu);
    }

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

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

        R E S P O N S I V E

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


/** * FINO A TABLET ==================================================================================*/

    @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; }
        
         #title         { margin: 20px 0 40px 0;  }
        
         .slider        { position: absolute; left: 0; width: 100%;  overflow: hidden; height: 60vh; }
        .item img       { height: auto !important; }
        
        .opahome        { display: none; }
        .slider h2      { color: var(--blu) !important; left: 20px; top: 35%; width: 90%; font-size: 21px; }
        
        body.blog       { height: 50vh; overflow: hidden;}
        
        .blog .contatti           { position: fixed; bottom: 0; left:0; }
        .blog .contatti ul li     {  margin: 0; }

        
        .contatti           { width: 100%; }
        .contatti ul li     {  display: inline-block; margin: 40px 0 80px; padding: 0 5px;}

        
        }

/** * OLTRE TABLET ==================================================================================*/

    @media (min-width: 782px) {

        .site-header        { display: none!important; }
        
        #blocks             { padding-bottom: 100px; }
        
        #title              { margin: 80px 0; }
        
        .contatti           { position: fixed; right: 0;  width: 180px; height: auto; }
        .contatti           { top:50%; transform: translateY(-50%);}
        .home .contatti ul li a             { color:var(--bianco) !important; }
        .home .contatti ul li a h6          { color:var(--bianco) !important; }
        
        .slider             { position:relative; width: 100%;  overflow: hidden; }
        .slider h2          { left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 24px; }

        }


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

    @media (max-width: 480px) {
        
        .wrapper                { padding: 20px 30px;}
          
        .site-title             { position: relative;  z-index: 9999; width: 100px; height: 90px; }   
        .site-title a           { display: block; width: 100px; height: 90px; }
        
       .site-header             { margin-bottom: 20px; }
        
        .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) {
        
        .wrapper    { display: flex; flex-direction: row;  } 
        .home       { height: 100vh; }
        .cont       { margin:0 200px 0 80px;}
         
        }
}

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

    @media (min-width: 980px) and (max-width: 1200px)  and (orientation: landscape) {
        
        .wrapper    { display: flex; flex-direction: row;  } 
        .home       { height: 100vh; }
        .cont       { margin:0 200px 0 80px;}
        
         
        }

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


    @media (min-width: 980px) and (max-width: 1200px) {
        
        .wrapper    { display: flex; flex-direction: row;  } 
        .home       { height: 100vh; }
        .cont       { margin:0 200px 0 80px;}
         
        .site-title             { background-size: cover; width: 200px; height: 180px; margin: 20px 0; }   
        .site-title a           { display: block; width: 200px; height: 180px;   }
        

    }

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


        .wrapper    { display: flex; flex-direction: row;  } 
        .home       { height: 100vh; }
        .cont       { margin:0 200px 0 80px;}

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

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