:root {
        
    	--free-body-font:      'Manrope', sans-serif;
    	--free-headings-font:  'Manrope', sans-serif;
    	--free-headbook:       'Manrope', sans-serif;
    	--free-headlight:      'Manrope', sans-serif;
        
    	--free-primary:        #333;
    	--free-head:           #013080;
        
    	--maincolor:           #013080;
    	--bianco:              #fff;
        
        --size:                clamp(10rem, 1rem + 40vmin, 30rem);
        --gap:                 calc(var(--size) / 14);
        --duration:            60s;
        --scroll-start:        0;
        --scroll-end:          calc(-100% - var(--gap));
        --color-text:          #cc0000;
    	
    }
    

    import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;700;800&display=swap');


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


    body            		{ font-family: var(--free-body-font); font-size: 16px; font-weight: 300;  color: #333;  }

    header                  { padding: 0; position: relative;  }
    footer                  { display: block;  border-top: 1px solid rgba(1, 48, 128, 0.3);  padding-top: 40px; background-color: #F7F6F6;  }
    
    footer .container       {  position: relative; }
    .home footer            {  background-color: transparent !important;}

    .container-fluid        { padding: 0;}
    #wrapper                {  }

    .menunav                { padding: 0; }

    .logo                   {  }

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

    .servizi                { background-color: #F4F1F1; }
    .servizio               { margin-bottom: 40px; }
    .servizi h3             { color: #706F6F; margin-bottom: 30px; }

    .servizi img[src$=".svg"].wp-post-image { width: auto !important; height: 60px !important; margin-bottom: 30px; }

    .title                  { background-color: var(--maincolorr); position: relative; min-height: 150px; padding: 0 40px; }
    
    #pagina             { padding: 40px 0 0 0; }

    .free               { width:70px; height:auto; }

    .slide              { background-image: url(../img/azmarinepower.webp;); position: relative; }

    h2.claim            { margin-left: 40px;  color: white;}

    .back-servizi       { margin-bottom: 40px; }
    .back-servizi a     { text-transform: uppercase; color: var(--maincolor); }


    /** * TESTATA CON IMMAGINE -----------------------------------------------   */

    #title  { overflow: hidden; position: relative;}

    .img-title-single-page      { overflow: hidden; position: relative; }
    .img-title-single-page img  { width: 100%; height: auto; }


    #title h1 { color: #595959; font-weight: 400; letter-spacing: 4px; margin: 0; position: absolute; text-align: center; text-transform: uppercase; top: 50%; transform: translateY(-50%); width: 100%; z-index: 2;}

    

        #title h2 {
            color: white;
            font-weight: 700;
            margin: 0;
            position: absolute;
            text-align: center;
            top: 130px;
            width: 100%;
            z-index: 2;
            padding-left: 40px;
            font-size: 50px;
            z-index: 12000;
        }

        .img-opacity {
        background-color: rgba(1, 48, 128, 0.8);
        height: 400px;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1
        }


        .limiter { max-width: 100%; } 
        .text-entry--half { width: 50%; margin-bottom: 3rem; position: relative; } 
        .text-entry { float: left; }



        .sub-text--no-uppercase {
            text-transform: none;
            font-size: .93rem;
            font-weight: 400;
            margin-bottom: 0;
            display: inline-block;
        }

        .text-entry--third {
            width: 33.33333%;
            margin-bottom: 2rem;
            position: relative;

        }

        footer .sub-footer {
            padding-top: 3rem;
            padding-bottom: 5rem;
        }

        .scrollTop {
            position: absolute;
            right: 15px;
            bottom: 65px;
            width: 10px;
            height: 35px;
            background: url(/svg/svg-07.svg) 50% no-repeat;
            background-size: auto;
            background-size: contain;
        }



        #mapid { width: 100%; height: 550px;}

    /** *   PREVENTIVO  ----------------------------- */

    .preventivo { background-color: var(--maincolor); padding: 40px 0; }
    .preventivo { background-image: url("../img/bk-form.jpg"); background-size: contain; }

    .preventivo h2, .preventivo p, .preventivo label    { color: var(--bianco);  }

    

/** *   NAVIGAZIONE POST  ----------------------------- */

    .post-navigation {  position: relative; }

    .post-navigation-inner {  max-width: 100%; padding: 30px 0; margin: 0 auto}
    .post-nav-prev,.post-nav-next { display: block; float: left; width: 47.5%}

    .post-navigation p { display: inline-block; padding-bottom: 2px; border-bottom: 2px solid var(--secondcolor); margin-bottom: 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color:var(--secondcolor); }

    .post-navigation h4 { display: block; font-size: 18px; font-weight: 700; line-height: 130%; margin: 0}

    .post-navigation h4 a           { color: var(--maincolor); text-decoration: none }
    .post-navigation h4 a:hover     { color: var(--secondcolor);}

    .post-nav-next                  { float: right}

    .post-nav-next,.post-nav-next h4 { text-align: right}


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

    .scheda { min-height: 200px; margin-bottom: 30px;  }
    .wrap { background-color: #fff; border-radius: 8px; padding: 30px; box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.4);  min-height: 200px; }
    .wrap h3 a { color: var(--maincolor); font-size: 21px; letter-spacing: 1; }

    .basso { position: absolute;margin-bottom: 20px;}


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

    #servizi h3 { font-size: 24px;}

    .card__img {
            visibility: hidden;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat !important;
            width: 100%;
            height: 235px;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;

    }

    .card__info-hover {
            position: absolute;
            padding: 16px;
            width: 100%;
            opacity: 0;
            top: 0;
            overflow: hidden;
    }

    .card__img--hover {
            transition: 0.2s all ease-out;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat !important;
            width: 100%;
            position: absolute;
            height: 235px;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            top: 0;
            overflow: hidden;

    }

    .carta {
            margin-right: 25px;
            transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
            background-color: #fff;
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0px 13px 10px -7px rgba(0, 0, 0,0.1);
            min-height: 370px;
    }

    .carta:hover {
            box-shadow: 0px 30px 18px -8px rgba(0, 0, 0,0.1);
            transform: scale(1.10, 1.10);
            overflow: hidden;
    }

    .card__info {
            z-index: 2;
            background-color: #fff;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            padding: 16px 24px 24px 24px;
    }



    .carta:hover .card__img--hover { height: 100%; opacity: 0.3; overflow: hidden; }
    .carta:hover .card__info { background-color: transparent; position: relative; }
    .carta:hover .card__info-hover { opacity: 1; }

    /** * TIPOGRAFIA
    ==================================================================================*/
    

    h1, h2, h3,h4, h5, h6    { font-family:var(--free-body-font), 'sans-serif'; color: var(--free-head); font-weight: 700;   }
    
    p                     { font-size: 16px; font-weight: 400; line-height: 28px; }
    b, strong             { color: var(--maincolor); }
    
    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; }

    .title h2             { color: #fff;  margin: 50px 0 0 0; z-index: 2; font-size:36px; font-weight: 700; letter-spacing:1px;} 
    .title h6             { color: #eee; margin: 10px 0 0 0; font-weight:normal; letter-spacing:1px; } 


    footer p, footer a      { color: var(--maincolor);    margin: 0; }
    footer h3               { font-size: 18px; color: var(--maincolor);  font-weight: 200;  margin-bottom: 10px; letter-spacing: 1px  }
    footer a                { font-weight: 600; font-size: 21px;   transition: all 0.2s ease-in-out; }

    .foothover a:after {
        background: none repeat scroll 0 0 transparent;
        bottom: -10px;
        content: "";
        display: block;
        height: 1px;
        left: 0px;
        position: absolute;
        background: rgba(1, 48, 128, 0.6);
        transition: width 0.3s ease 0s, left 0.3s ease 0s;
        width: 50px;
    }

    .foothover a:hover:after {
        width: 100px;
        left: 0px;
        background: background: rgba(1, 48, 128, 1);
    }
    


    .btn-default          { background-color: #2a2a2a; color:#fff; font-size: 14px; border-color: #333;}
    .btn-default:hover    { background-color: #000; color:#fff; }
    .button:hover         { background-color: #000; color:#fff; }
    
    a                     { }
    a:link                { text-decoration:none; }
    a:focus               { outline: 0;}
    a:hover               { text-decoration:none; }
        


    ul.sitemap         { columns: 2; -webkit-columns: 2; -moz-columns: 2; list-style-type: none; padding: 0; margin: 40px 0;  column-gap: 40px;}
    ul.sitemap li      { line-height: 30px; border-bottom: 1px solid #DED9D1; }
    ul.sitemap li a    { color: #FFB300; }



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

         }

        #scrolla h2 { margin-top: 40px; }


        .marquee {
          display: flex;
          overflow: hidden;
          user-select: none;
          gap: var(--gap);
          mask-image: linear-gradient(
            var(--mask-direction, to right),
            hsl(0 0% 0% / 0),
            hsl(0 0% 0% / 1) 20%,
            hsl(0 0% 0% / 1) 80%,
            hsl(0 0% 0% / 0)
          );
        }

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




        /** *   F O R M
    ==================================================================================*/

    span.wpcf7-list-item { margin: 0;}



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


    /** * P H O T O S W I P E
    ==================================================================================*/

    .pswp__bg   {opacity: 0.9 !important; background-color: #544D67; }



    /** * BTN
    ==================================================================================*/

    .btn-outline-primary {
        color: #544D67;
        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: #544D67;
         border-color: #544D67;
        
    }

    .btn-primary.disabled, .btn-primary:disabled { color: #544D67; background-color: #eee; border-color: #eee;}
    .btn-primary { color: #fff; background-color:var(--maincolor); border-color: var(--maincolor);}
    .btn-primary:hover { color: #fff; background-color: #544D67; border-color: #544D67;}
    
    .btnnews { color: #544D67; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; font-weight: 400; margin-top:20px; display:block; }


    /** * MENU
    ==================================================================================*/
    
    .navbar         { padding: 0 !important;  }

    .nav-link      { color:  var(--maincolor); font-size: 14px; text-transform: uppercase; font-weight: 600; }

    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color: #cc0000 !important; }
    

    .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link { color: #cc0000 !important; font-weight: 900; }   

.gtranslate_wrapper { margin-bottom: 5px;}
    .glink  { margin-right: 10px; }


    /** * NEWS
    ==================================================================================*/
    
    .notizia            { margin: 20px 0; }
    .notizia h3         { font-size: 24px; }
    .notizia img        { margin-bottom: 20px; border: 1px solid #e5e5e5; padding: 2px; }
    .notizia p          { margin: 20px 0; }
    .notizia .data      { color: #FFB300; }


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





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

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

        #menu-icon              { display:block; }
        #title h2               { top: 10px; padding: 0 40px;  }
        
        .single .img-title-single-page  { min-height: 250px; } 
        .single #title h2               { font-size: 32px; } 
        .single .img-title-single-page img.img-responsive { height: 100%; width: auto; }
        
        .post-navigation    { margin:0 0 80px 0; padding:0 30px; }

    }

    @media all and (min-width: 1025px) {

        #title              { height: 400px; }
        .post-navigation    { margin: 80px 0; padding: 40px 0; }
        
        .home footer        { padding:20px 40px 0 40px; }
        h2.claim            { font-size: 50px;}

    
    }



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

    @media (max-width: 480px) {
        
  /** * ANTISCROLL */
        
        html, body              { overflow-x: hidden; }
        body                    { position: relative; }
        
  /** * -------------------------------------------------------------- */
        
        .logo                   { margin-top: 20px;}
        .site-title             { background-size: cover; height: 52px; width: 300px; margin: 10px auto; }  
        .site-title a           { display: block; height: 52px; width: 390px; }
        
        .cont                   { text-align: center; padding:0; }    
        
        .menunav                {  padding-bottom: 40px; background-color: transparent; }
        .navbar-toggler         { margin: 0 auto; border:none;  margin-top:20px; }
        .navbar-nav             { text-align: center;}
        .navbar-nav li          { border-bottom: 1px solid #ddd; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); }
        
        
        .navbar-light .navbar-nav .nav-link     { color:#544D67; }
        
        .vertical-gap { display: none;}
        .testatina { display: none; }
        
        .claim h2               { font-size:18px;  }
        
        
         .title  { min-height: 150px; }
         .title h2 { margin: 20px 0;  font-size: 24px; text-align:center; }
         
         .post-meta p { font-size: 11px; letter-spacing:0; }
        
        .inner  {  position: absolute; top:40px; left:0px; padding: 0 30px; }
        
        .slide       { background-size: auto 100%;background-position: center center;height: 400px;}
         h2.claim    { font-size:24px; margin: 0 auto; text-align: center; }
        
        .text-entry--half { width: 100%; margin-bottom: 3rem;}
        
        .img-title-single-page { height: 100px;}
        .img-title-single-page img.img-responsive { height: 100px;}
        
        footer      { text-align: center !important; margin-bottom: 40px;  } 
        footer p    { text-align: center; } 
        
        .img-title-single-page      { height: 100px; } 
        .img-title-single-page      { overflow: hidden; position: relative; max-height: 300px; }
        .img-opacity { height: 300px; position: absolute; top: 0; width: 100%; z-index: 1;}

      }

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

    @media (min-width: 480px) and (max-width: 768px) {
        
          /** * ANTISCROLL */
        
        html, body              { overflow-x: hidden; }
        body                    { position: relative; }
        
        header                  { padding: 20px 10px; }

        .site-title             { background-size: cover; width: 300px; height: 50px; margin:0 auto; }   
        .site-title a           { display: block; width: 300px; height: 50px; }
        
        .inner                  { height: 100%; display: flex; align-items: center; margin-top: auto; padding-bottom: 500px; }
        h2.claim                { font-size: 36px; }
        
        .slide      { height: calc( 100vh - 180px );  background-size: cover !important;  background-position: center center;}
        
        #title h2 { top: 50%; transform: translateY(-50%);}
    
      }

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

    @media (min-width: 769px) and (max-width: 1025px) {
         

        .site-title             { background-size: cover; width: 390px; height: 65px;  margin:0 auto; }   
        .site-title a           { display: block; width: 390px; height: 65px; }
        
        .inner  { width: 250px; position: absolute; top:40px; left:40px; }
        
        .slide      { height: calc( 100vh - 180px );  background-size: cover !important;  background-position: center center;}
        
        .img-title-single-page      { height: 250px; } 
        .img-title-single-page      { overflow: hidden; position: relative; max-height: 300px; }
        .img-opacity { height: 300px; position: absolute; top: 0; width: 100%; z-index: 1;}
        
        #title h2 { top: 50%; transform: translateY(-50%);}

    }

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

    @media (min-width: 1023px) and (max-width: 1280px) {
         
        body                    { margin:0 30px; }
        header                  { height: 100px; }
        
        .slide      { height: calc( 100vh - 180px );  background-size: cover !important;  background-position: center center;}
        
        .inner  { width: 30vw; position: absolute; left: 0; top: 0;   }
        .inner   { height: 100%; display: flex; align-items: center; margin-top: auto; }

        .site-title             { background-size: cover; height: 65px; width: 390px; margin: 25px 0; }   
        .site-title a           { display: block; height: 65    px; width: 390px; }     

    }
    


    /** * ==================================================================================*/
    
    @media (min-width: 1281px) {
        
        body                    {  }
        header                  { padding: 0 40px; height: 100px; }
        
        .slide                  { height: calc( 100vh - 180px );  background-size: cover !important;  background-position: center center;}
        
        .inner                  { width: 30vw; position: absolute; left: 0; top: 0;   }
        .inner                  { height: 100%; display: flex; align-items: center; margin-top: auto; padding-bottom: 200px; }

        .site-title             { background-size: cover; height: 65px; width: 390px; margin: 25px 0; }   
        .site-title a           { display: block; height: 65px; width: 390px; }

        .navbar                 { line-height: 100px;  }

        
        a.nav-link                  { padding: 0; font-size: 15px; margin-right: 15px; }
        
        .navbar-light .navbar-nav .nav-link     { color: var(--maincolor) !important; }
        

    }  


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