/** *  F O N T S
    ==================================================================================*/ 


    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');



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


    :root  {
        
        /** --------------- GESTIONE FONTS ----------------- */

        --font:             'Outfit';
        --titoli:           'Outfit';

        /** --------------- GESTIONE COLORI ----------------- */
        
        --main:             #2B2222 ;
        --red:              #8B1F1C;

        --fontcolor:        #333;
        --bianco:           #fff; 
        
        /** --------------- SCROLL ----------------- */
        
        --size:                clamp(10rem, 1rem + 40vmin, 30rem);
        --gap:                 calc(var(--size) / 14);
        --duration:            50s;
        --scroll-start:        0;
        --scroll-end:          calc(-100% - var(--gap));
        --color-text:          #cc0000;
        
            }    


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


    html                    { font-size: 62.5%; }   
    body                    { font-size: 1.6rem; position: relative;}

    body            		{ font-family: var(--font),serif;   font-weight: 300;  color: #111;  }

    .site-title             { background-image: url("../img/logo.svg"); text-indent: -9999px; display: block; }

    .container-fluid        { padding: 0;}

    #header, footer         { background-color: var(--main); }
    

    .hero                   { position: relative; overflow: hidden; }
    .hero img               { width: 100vw; height: auto; }

 

    .simple-slider          { position: absolute; inset: 0; } 
 





.simple-slider img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* desktop */
    opacity: 0;
    transition: opacity 1.2s ease;
}

.simple-slider img.active {
    opacity: 1;
}


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

    .free                   { width:50px; height: auto; position: absolute; right: 0px; bottom: 200px;   transform: rotate(-90deg);  }


    #azienda                { background-image: url("../img/azienda.jpg"); background-size: cover;  }
    #servizi                { background-color: #F7F2ED;  }

    #mapid                  { display: block; height: 500px;}

    section.title           { background-color: #F7F2ED; padding: 40px !important;}

    #direzioni a.btn        { margin-bottom: 30px; text-decoration: none !important; font-size: 1em; }
    #direzioni h3           { margin-bottom: 0 !important; }
    #direzioni .text-muted           { margin-bottom: 20px !important; }

    /** * A N I M A Z I O N I D I P A G I N A
    ========================================================================================================= */

    
    .reveal {
      position: relative;
      opacity: 0;
      transition: 2s all ease;
    }

    .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }

    /* varianti */
    .reveal-up   { transform: translateY(150px); }
    .reveal-down { transform: translateY(-150px); }
    .reveal-fade { transform: none; }




    /** * DOWNLOAD
    ==================================================================================*/
    
    .wp-block-file  { display: block;  height: 80px; padding: 20px; border-radius: 8px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; position: relative; }
    .ultimofiglio  { clear: both;}

    .wp-block-file a   { position: absolute; top: 20px; width: 80%; height: 80px; text-decoration: none !important; }
    .wp-block-file, .wp-block-file a   { color: #333; text-transform: uppercase; font-size: 14px;  }

    .wp-block-file a::before  { display: inline; font-size: 24px; font-family: "Font Awesome 5 Free"; content: "\f1c1"; color: var(--maincolor); margin-right: 20px; }

    .wp-block-file:hover    {  background-color:var(--main);  }
    .wp-block-file:hover a    {  color: var(--bianco);   }
    .wp-block-file:hover a::before    {   color: var(--bianco);   }


    /** * TIPOGRAFIA
    ==================================================================================*/
    
    hr {
      border: none;          /* rimuove bordo predefinito */
      height: 1px;           /* spessore linea */
      background-color: #000;/* colore nero */
      margin: 20px 0 !important;        /* 10px sopra e sotto */
        max-width: 70%;
    }
    
    /** * TITOLI  ----------------------------------------------------------------------- */

    h1, h2, h3,h4, h5, h6    { font-family: var(--titoli), 'serif';  font-weight: 400; color:var(--main); }

    h2      { font-size:  2.6rem; }
    h3      { font-size:  2.3rem; }
    h4      { font-size:  2rem; }

    #header h2   { font-weight: 200; font-size: clamp(1.500em, calc(1.310em + 0.952vw), 2.500em); color: #fff; text-transform: uppercase; letter-spacing: 1px; }

    #pagina h3  { margin:0 0 20px 0; color: var(--main); font-weight: 700; }
    #pagina ol  { margin:0 0 20px 0;  }


    /** * PARAGRAFI  ----------------------------------------------------------------------- */
    
    p, ul, ol             { font-size: 1.2rem; font-weight: 400; line-height: 200%; text-transform: uppercase; letter-spacing: 1px; }
    
    html 				  { text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; } 
    body 				  { *zoom: 1; text-align: left; overflow-x: hidden; -ms-word-wrap: break-word; word-wrap: break-word; }

    #pagina p             { line-height: 190%; }
    
    /** * AZIENDA  ----------------------------------------------------------------------- */

    #azienda p          { color: var(--bianco); }
    #azienda h3         { color: var(--bianco); font-size: clamp(1.3125rem, -0.0417rem + 4.3333vw, 3.75rem); font-weight: 800; margin-bottom: 40px;}


    /** * SERVIZI  ----------------------------------------------------------------------- */

    #servizi h3         { font-weight: 800; }
    #servizi h4         { font-weight: 800; font-size: 24px; text-transform: uppercase; margin-bottom: 40px;}

    #servizi { position: relative; } 
    #servizi h3 { position: absolute; transform: rotate(-90deg) translateY(-50%); transform-origin: left top; letter-spacing: 0.15em; }


    /** * FOOTER  ----------------------------------------------------------------------- */

    footer p,  footer a  { color: var(--bianco); margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; font-weight: 300; }
    footer b             { font-weight: 800; }

    footer a:hover  { color: var(--red);  }

    /** * FORM  ----------------------------------------------------------------------- */

    #form                 { background-color: var(--red); }
    #form h3              { font-size: clamp(1.125em, calc(0.900em + 1.125vw), 2.250em); font-weight: 800; margin-bottom: 40px;  }

    #form p, #form a, #form h3      { color: var(--bianco); } 

    .wpcf7 input.form-control,
    .wpcf7 textarea.form-control {
        font-size: 18px;
        padding:5px 8px;
        border-radius: 6px;
    }

    .form-group     { margin-bottom: 20px;}

    .wpcf7-spinner  { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); margin: 0;}
    .wpcf7-submit   { position: relative;}

    /** * CONTATTI  ----------------------------------------------------------------------- */

    #contatti h3              { font-size: clamp(1.125rem, 0.7083rem + 1.3333vw, 1.875rem); font-weight: 800; text-transform: uppercase;}
    #contatti a               { color:var(--main); text-transform: uppercase; font-size: 13px;}
    #contatti a:hover         { color:var(--red); }

    .address { display: flex; align-items: flex-start; gap: 16px;}
    .address-text { display: flex; flex-direction: column;}

    /** * SCROLLA  ----------------------------------------------------------------------- */

    #scrolla h3 { color:var(--main); text-transform: uppercase; font-size: 24px; margin-top: 40px; font-weight: 800; }

    /** * PIEDE  ----------------------------------------------------------------------- */

    #piede p         { font-size: 1.3rem; line-height: 18px; font-weight: 400; }
    #piede h3        { color: var(--main); margin: 0; font-size: 1.6rem; font-weight: 600;  }
    #piede a         { color: var(--main); }

    /** * LINKS  ----------------------------------------------------------------------- */

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

    #pagina a             { text-decoration: underline; text-underline-offset: 5px;}
    #pagina a.wp-element-button             { text-decoration: none; }
    
    .sidebar a  { color: var(--bianco); }

    section.title h2           { font-size: clamp(1.875em, calc(1.420em + 2.273vw), 3.125em); font-weight: 700; text-transform: uppercase;}



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

    .alignwide          { margin: 0px calc(25% - 25vw); max-width: 100vw;}
    .alignwide img      { max-width: 1600px; display: inline; }
    
    .wp-block-image .alignleft              { float: left;	margin: 5px 40px 30px 0; }

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

    .wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, .wp-block-cover h2, .wp-block-cover-image .wp-block-cover-image-text, .wp-block-cover-image .wp-block-cover-text, .wp-block-cover-image h2 {  font-size: 28px; color: #fff; font-weight: 200; letter-spacing: 4px; text-transform: uppercase; }

    .wp-block-cover, .wp-block-cover-image { min-height: 500px; }


    /** * MARCHI  ================================================================================================*/

    #marchi     { padding: 0 100px; }
    #marchi p   { text-align: justify; }

    .pos    { position: relative; }

    .marchio-item       {  margin-bottom: 140px; position: relative; }

    .marchi-image       { width: 200px; height: auto; margin-bottom: 40px;}
    .marchi-content     { padding-top: 80px;}

    .layout-right       { flex-direction: row-reverse; } 

  
    .text h3    { font-size: clamp(1.125rem, 0.6667rem + 1.4667vw, 2.5rem); text-transform: uppercase; margin-bottom: 20px;}

    .ombra  { box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}


    #servizi .slider { position: relative; } 
    #servizi .slide { position: absolute; width: 100%; top: 0; left: 0; opacity: 0; transition: opacity 0.8s ease-in-out; } 
    #servizi .slide.active { opacity: 1; position: relative; }

    /** * BTN ================================================================================================*/
    
    
    .btn    { text-transform: uppercase;  }

    .btn-outline-primary {
        color: var(--rosso);
        background-color: transparent;
        background-image: none;
        border-color: transparent;
        text-transform: uppercase; font-size: 11px; letter-spacing: 1px; font-weight: 400;
    }
    
    .btn-outline-primary:hover {
     
        background-color: var(--rosso);
         border-color: var(--rosso);
        
    }

    .btn-primary.disabled, .btn-primary:disabled { color: var(--maincolor); background-color: #eee; border-color: #eee;}
    .btn-primary { color: #fff; background-color: var(--red); border-color: var(--red); font-size: 0.8em;}
    .btn-primary:hover { color: #fff; background-color: var(--main); border-color: var(--main);}
    


    /** * MENU
    ==================================================================================*/
    
    #main-menu                              { padding: 0 !important; margin:0 80px 0 0; }
    #main-menu li                           { line-height: 24px; margin-right: 20px;   }
    #main-menu li.current-menu-item a       { color:#cc0000 ; font-weight: 700; }
    #main-menu li a:hover                   { color: #cc0000; }

    .navbar-light .navbar-nav .nav-link     { font-size: 15px;  font-family: var(--font), 'serif'; font-weight: 300;  color:var(--bianco); text-transform: uppercase; letter-spacing: 3px; }


    #main-menu .menu-item-58 > a {
        border: 1px solid #fff;
        padding: 6px 16px;
        border-radius: 10px;
        transition: all .3s ease;
    }

    #main-menu .menu-item-58 > a:hover {
    background: #fff;
    color: var(--red);
    }


    /** * SCROLLA
    ==================================================================================*/

     #scrolla { display: grid;
              align-content: center;
              overflow: hidden;
              gap: var(--gap);
              width: 100%;
              min-height: 250px;
              font-family: system-ui, sans-serif;
              font-size: 1rem;
              line-height: 1.5;

             }

    


        .marquee {
          display: flex;
          overflow: hidden;
          user-select: none;
          gap: var(--gap);
          
        }

        .marquee__group {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: space-around;
          gap: var(--gap);
          min-width: 100%;
          animation: scroll-x var(--duration) linear infinite;
        }

        @media (prefers-reduced-motion: reduce) {
          .marquee__group {
            animation-play-state: paused;
          }
        }
        --reverse .marquee__group {
          animation-direction: reverse;
          animation-delay: -3s;
        }

        @keyframes scroll-x {
          from {
            transform: translateX(var(--scroll-start));
          }
          to {
            transform: translateX(var(--scroll-end));
          }
        }

        @keyframes scroll-y {
          from {
            transform: translateY(var(--scroll-start));
          }
          to {
            transform: translateY(var(--scroll-end));
          }
        }

        /* Element styles */
        .marquee img {
          display: grid;
          place-items: center;
          width: var(--size);
          padding: calc(var(--size) / 5);
          border-radius: 0.5rem;
              fill: var(--color-text);

        }



        /* Parent wrapper */
        .wrapper {
          display: flex;
          flex-direction: column;
          gap: var(--gap);
          margin: auto;
          max-width: 100vw;
        }



        @keyframes fade {
          to {
            opacity: 0;
            visibility: hidden;
          }
        }

        
        .hover {
          display: inline-block;
          position: relative;
        }

        .hover::after {
          content: '';
          position: absolute;
          width: 100%;
          transform: scaleX(0);
          height: 0.5px;
          bottom: -5px;
          left: 0;
          background-color: var(--maincolor);
          transform-origin: bottom right;
          transition: transform 0.25s ease-out;
        }

        .hover:hover::after {
          transform: scaleX(1);
          transform-origin: bottom left;
        }






    /** *   R E S P O N S I V E
    ==================================================================================*/
    

    @media all and (max-width: 986px) {


        
        section:not(#header)    { padding:40px 20px; }
        
        #header h2      { text-align: center; margin: 20px 0 0 0;}
        
        .stosa          { display: none;}
        .hero           { height: calc( 100vh - 300px ); overflow: hidden; }
        
        #azienda        { background-position-x: 1000px; }
        #servizi        { padding-left: 100px !important; }
        
        #servizi h3     { font-size: 50px;  left: 47px; top: 275px !important;}
        
        footer          {  padding: 40px; }
        
        .address        { padding-bottom: 40px; }
        
        .navbar         { margin-top: 20px;}
        
         #main-menu      { margin:0 0 0 0; }
         #main-menu li   { margin-right: 0; }
         #main-menu .menu-item-58 > a {margin: 40px 40px 0 40px;  }
        
         .text       { margin: 40px 0;}
        
        section.title h2           { text-align: center; }
        
        .simple-slider img { object-position: center 30%; }
        



    }

    @media all and (min-width: 986px) {
        
            #header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;  } 
            body { padding-top: 150px; } 
        
            section:not(#header):not(#scrolla):not(#marchi) { padding: 80px 150px;}
        
            section#scrolla { padding: 40px 0;}
        
            .hero        { height: calc( 100vh - 150px ); overflow: hidden;  }
            .hero::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); pointer-events: none; }
        
            #header h2   { margin-left: 40px; }
        
            .stosa  { position: absolute; right: 20px; bottom: 40px; width: 150px !important; height: auto !important; z-index: 100; }
        
            #servizi h3     { font-size: 100px;  left: 80px;  bottom: -40px; }  
        
            footer          { height: 100px; padding: 0 150px; }
        
            #main-menu       {  margin:0 80px 0 0; }
        
            .text       { margin: 100px;}
        
            .simple-slider img { object-position: center center;}    


        }


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

    @media (max-width: 480px) {
        
        body                    {  }
          
        .site-title             { background-size: cover; width: 100px; height:100px;  margin: 0 auto; }   
        .site-title a           { display: block; width: 100px; height:100px; }
        
        section                 { padding: 20px; }
        
        .menunav                { padding-bottom: 40px; background-color: transparent; }
        .navbar-toggler         { margin: 0 auto; border:0 !important; }
        .navbar-nav             { text-align: center;}
        
        footer                  { text-align: center; }
        .footlogo               { margin: 0 auto; }
        
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
        }
        
        .navbar-toggler { padding: .55rem;}
        .navbar-toggler-icon { width: 3rem; height: 3rem;}
        

      }

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

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

       
        .site-title             { background-size: cover; height: 170px; width: 200px; margin:0 auto; }   
        .site-title a           { display: block; height: 170px; width: 200px; }
    
      }

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

    @media (min-width: 768px) and (max-width: 1023px) {
         
        .site-title          { background-size: cover; width:290px; height: 136px; }
        .site-title a        { display: block; width:290px; height: 136px; }

        
        #pagina, header {  padding: 40px 80px; }

    }

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

    @media (min-width: 1023px) and (max-width: 1200px) {
        
        .site-title          { background-size: cover; width:290px; height: 136px; }
        .site-title a        { display: block; width:290px; height: 136px; }

        
        #pagina, header {  padding: 40px 80px; }
        

    }
    


    /** * ==================================================================================*/
    
    @media (min-width: 1201px) {
        
        .site-title          { background-size: cover; width:150px; height: 150px; margin: 0; }
        .site-title a        { display: block; width:150px; height: 150px; }

        
        #pagina, header {  padding: 40px 80px; }

   
    }  

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