/* --------------------------------------------------------------------
* Defatul Stylesheet
* Author:		Mirko Cogo
* URL:			https://www.yumestudio.it/
-------------------------------------------------------------------- */
/*
* Normalize v8.0.1 / github.com/necolas/normalize.css
* General
* Smooth Scrollbar
* Remodal
*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

:root {
  --col1: #91c21d;
  --col2: #fff; /* #242b3b*/ 
  --col3: #495461;
  --col4: #1c1c1c;
  --col5: #242b3b;
  --col6: #bbbfc1;  
}


@font-face{font-family:Poppins;src:url(../fonts/Poppins-Thin.ttf) format('truetype');font-style:normal;font-weight:100}@font-face{font-family:Poppins;src:url(../fonts/Poppins-ThinItalic.ttf) format('truetype');font-style:italic;font-weight:100}@font-face{font-family:Poppins;src:url(../fonts/Poppins-ExtraLight.ttf) format('truetype');font-style:normal;font-weight:200}@font-face{font-family:Poppins;src:url(../fonts/Poppins-ExtraLightItalic.ttf) format('truetype');font-style:italic;font-weight:200}@font-face{font-family:Poppins;src:url(../fonts/Poppins-Light.ttf) format('truetype');font-style:normal;font-weight:300}@font-face{font-family:Poppins;src:url(../fonts/Poppins-LightItalic.ttf) format('truetype');font-style:italic;font-weight:300}@font-face{font-family:Poppins;src:url(../fonts/Poppins-Regular.ttf) format('truetype');font-style:normal;font-weight:400}@font-face{font-family:Poppins;src:url(../fonts/Poppins-Italic.ttf) format('truetype');font-style:italic;font-weight:400}@font-face{font-family:Poppins;src:url(../fonts/Poppins-Medium.ttf) format('truetype');font-style:normal;font-weight:500}@font-face{font-family:Poppins;src:url(../fonts/Poppins-MediumItalic.ttf) format('truetype');font-style:italic;font-weight:500}@font-face{font-family:Poppins;src:url(../fonts/Poppins-SemiBold.ttf) format('truetype');font-style:normal;font-weight:600}@font-face{font-family:Poppins;src:url(../fonts/Poppins-SemiBoldItalic.ttf) format('truetype');font-style:italic;font-weight:600}@font-face{font-family:Poppins;src:url(../fonts/Poppins-Bold.ttf) format('truetype');font-style:normal;font-weight:700}@font-face{font-family:Poppins;src:url(../fonts/Poppins-BoldItalic.ttf) format('truetype');font-style:italic;font-weight:700}@font-face{font-family:Poppins;src:url(../fonts/Poppins-ExtraBold.ttf) format('truetype');font-style:normal;font-weight:800}@font-face{font-family:Poppins;src:url(../fonts/Poppins-ExtraBoldItalic.ttf) format('truetype');font-style:italic;font-weight:800}@font-face{font-family:Poppins;src:url(../fonts/Poppins-Black.ttf) format('truetype');font-style:normal;font-weight:900}@font-face{font-family:Poppins;src:url(../fonts/Poppins-BlackItalic.ttf) format('truetype');font-style:italic;font-weight:900}

/* ==============================================================*/
/* # GENERAL */
/* ==============================================================*/
html {
  scroll-behavior: smooth;
  overflow-x: hidden; 
}
html, body { font-family: 'Poppins', Arial, Helvetica, sans-serif; color:var(--col5); font-size:16px; line-height: 25px; overflow-x: hidden; color:var(--col2);}
body { background: var(--col4); padding-top:87px; }
.overflowhide {
  overflow: hidden !important;
}
img { max-width:100%;}

/* text selection */
::-moz-selection {
  background: var(--col1);
  color: #fff;
}

::selection {
  background: var(--col1);
  color: #fff;
}

::-moz-selection {
  background: var(--col1);
  color: #fff;
}

::-webkit-selection {
  background: var(--col1);
  color: #fff;
}

/* SCROLL */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--col2);
  border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--col3);
}
.error {
  background: #ed5050;
  color: #fff;
  padding: 5px;
}
.sent {
  background: #baf17a;
  color: #000;
  padding: 5px;
}



a:not([href])[name] {
    display: block;
    position: relative;
    top: -90px;
    visibility: hidden;
}

/* ==============================================================*/
/* # TESTI */
/* ==============================================================*/
.altf { /* font-family: 'Recharge', Arial, Helvetica, sans-serif; */ }
/* RESPONSIVE FONT SIZE */
p,
h1,
h1.maintitle span,
h2,
h3,
h3.maintitle span,
h4,
h5,
h6 {
    --min_breakpoint: 420;
    --max_breakpoint: 1440;
    --responsive: (var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - (var(--min_breakpoint) * 1px)) / (var(--max_breakpoint) - var(--min_breakpoint)));
    /* FOR BETTER UNDERSTANDING   --responsive: (var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - 420px) / (1440 - 420)); */

    --fontsize: clamp(var(--min-font) * 1px, var(--responsive), var(--max-font) * 1px);
    /* clamp min value - optimal responsive value - max value, basic example font-size: clamp(35px, 4.5vw, 53px); */
    font-size: var(--fontsize);
}

h1 {
    --min-font: 35;
    --max-font: 53;
}

h2 {
    --min-font: 30;
    --max-font: 45;
}

h3 {
    --min-font: 25;
    --max-font: 40;
}

p {
    --min-font: 14;
    --max-font: 16;
}

h1.maintitle {
    font-weight: 600;
    line-height: 44px;
}

h1.maintitle span {
    font-weight: 200 !important;
    --min-font: 18;
    --max-font: 22;
    line-height: 22px;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
}
h3.maintitle {
    font-weight: 900;
    line-height: 44px;
}

h3.maintitle span {
    font-weight: 400;
    --min-font: 18;
    --max-font: 22;
    line-height: 22px;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
}

.big, .big p {
    font-size: 120%;
}
.medium,
.medium p {
    font-size: 110%;
}

a { text-decoration: none; color:var(--col1);}
a:hover {
    color: var(--col3);
}
/* ==============================================================*/
/* # HEADER */
/* ==============================================================*/
header {
    top:0;
    position: fixed;
    padding: 15px 0;
    z-index: 9;
    width: 100%;
    background: var(--col4);
    transition: 1s;
}
header div { 
    display: flex;
    justify-content: space-between;
}
#logo { max-height: 70px; }

/* ==============================================================*/
/* # MENU */
/* ==============================================================*/
.menu { 
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-evenly;
}
.menu li.active a {
   /* border: 1px solid rgb(255 255 255 / 30%);*/
}
.menu li { 
    
}
.menu li a { 
    display:block;
    padding: 15px 23px;
    border: 1px solid rgb(255 255 255 / 0%);
    border-radius: 2px;
    text-decoration: none; 
    color: var(--col2);
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
}
.menu li:hover a {
    color: var(--col1);
}

.menu>li>a:before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 30px;
    height: 2px;
    bottom: 1px;
    top: 45px;
    left: calc(50% - 15px);
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    background-color: var(--col1);
    -webkit-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

.menu>li:hover>a:before, .menu>li.active>a:before {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-delay: .1s;
    -o-transition-delay: .1s;
    transition-delay: .1s;
}

.submenu { 
    position: absolute;
    z-index: 1;
    background: #fff;
    padding: 40px 20px 20px;
    border-radius: 0 0 2px 2px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    list-style: none;
    line-height: 40px;
    transition: .15s ease-in-out;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    /*top:110px;*/
    transform-origin: top;
    transform: perspective(1000px) rotateX(-90deg);
    transition: transform 0.3s ease-in-out;
}
.menu .submenu li a {
    padding:0;
}
.menu .submenu li:hover a {
   color:var(--col1);
}
.menu li:hover .submenu {
    visibility: visible;
    overflow: visible;
    opacity: 1;
    transition: 0.5s ease-in-out;
   /* top: 87px;*/
    transform: perspective(1000px) rotateX(0);
}


.button_container {
    display:none;
    position: fixed;
    margin-top: 11px;
    right: 15px;
    height: 47px;
    width: 50px;
    cursor: pointer;
    z-index: 100;
    text-align: center;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    top: 5px;
}

.button_container span {
    background: rgb(135 135 134);
    border: none;
    height: 2px;
    width: 70%;
    position: absolute;
    top: 17px;
    left: 8px;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    cursor: pointer;
}

.button_container span:nth-of-type(2) {
    top: 24px;
}

.button_container span:nth-of-type(3) {
    top: 32px;
}

.button_container.active .top {
    -webkit-transform: translateY(5px) translateX(0) rotate(45deg);
    transform: translateY(5px) translateX(0) rotate(45deg);
}

.button_container.active .middle {
    opacity: 0;
}

.button_container.active .bottom {
    -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
    transform: translateY(-11px) translateX(0) rotate(-45deg);
}

.button_container.active {
    right: 15px;
    pointer-events: auto;
}





/* ==============================================================*/
/* # HOMEPAGE */
/* ==============================================================*/
.homecover {
    min-height: calc(100vh - 90px);
    background-size: cover !important;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--col1);
}
.sectioncover {
    min-height: calc(100vh - 90px);
    background-size: cover !important;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--col1);
}
.covertitle { 
    z-index:1;
    max-width: 500px;
    text-align: center;
    padding-bottom: 150px;
    z-index: 3;
        position: relative;
}
.covertitle h1.maintitle span{ color: var(--col2); margin-bottom:15px; font-weight:500; }
.cover-arrow { 
    width: 600px;
    max-width: 90vw ;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.8;
}
.down-arrow {
    position: absolute;
    /*top: calc(100vh - 200px);*/
    left: calc(50%);
    width: 0;
    height: 30px;
    border: 0px solid;
    border-radius: 1px;
    animation: jumpInfinite 1.5s infinite;
}
.down-arrow:after {
    content: " ";
    position: absolute;
    top: -12px;
    left: -18px;
    width: 36px;
    height: 36px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-radius: 1px;
    transform: rotateZ(45deg);
    opacity: 0.4;
}
@keyframes jumpInfinite {
    0% {
        margin-top: 0;
    }

    50% {
        margin-top: 20px;
    }

    100% {
        margin-top: 0;
    }
}

.initaly { background: #2d2d2d;
    color: #fff;
    position: absolute;
    right: -96px;
    top: 30%;
    transform: rotate(-90deg) translateY(-50%);
    width: 200px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;}
.initaly:after{
    content: "";
    background: linear-gradient(90deg, rgba(0, 146, 70, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(206, 43, 55, 1) 66%, rgba(206, 43, 55, 1) 100%);
    width: 200px;
    height: 4px;
    display: block;
}





a.title h3 { font-weight:200; align-self: center; }
a.title h3 b{
    font-weight: 700;
    color: var(--col1);
}

a.title {
    position: relative;
    display: flex;
    color: #fff;
    min-height: 150px;
    text-align: center;
    padding: 0;
    justify-content: center;
}

a.title:hover {
    color: #fff;
}

a.title:hover .letterbg{
    transition: 0.5s;
    filter: blur(2.5rem);
}


a.title .scopri{
    z-index: 2;
    position: absolute;
    color: #fff;
    font-size: 20px;
    letter-spacing: 5px;
    top: 130%;
    opacity: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
}


a.title:hover .scopri {
    top: 90%;
    opacity: 1;
}

.letterbg { color: #000;
    font-size: 2.5em;
    font-weight: 900;
    opacity: 0.8;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.title h3 {z-index: 2; position: relative;}


/* ==============================================================*/
/* # INCORDATRICI */
/* ==============================================================*/
.nomemacchina h1 span { 
    font-size: 0.4em;
    font-weight: 200;
}
.nomemacchina h1  {
    margin: 0;
}

.info h3 { font-size:20px; color:var(--col1); }



.fotobox {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    gap: 0px 0px;
    grid-template-areas:
        "foto1 foto3"
        "foto2 foto3";
    height: calc( 100vh - 100px);
   
}
.fotobox div { border: 1px solid #333; }
.foto3 {
    grid-area: foto3;
}

.foto1 {
    grid-area: foto1;
}

.foto2 {
    grid-area: foto2;
}


@media (max-width: 991.98px) {
  
/*
    .fotobox {
        grid-template-columns: 100%; 
        grid-template-rows: 100%;
        height: auto;
    }
    .foto1 {
        grid-row: 1;
        height: 50vh;
    }
    .foto2 {
        grid-row: 2;
        height: 50vh;
    }
    .foto3 {
        grid-row: 3;
        height: 100vh;
    }
    */
}

.fotobox img { width:100%; height: 100%; object-fit: cover; }
.fotobox img.contain {
    object-fit: contain;
}
/* ==============================================================*/
/* # BUTTONS */
/* ==============================================================*/
.btn-outline-1 { border: 1px solid rgb(255 255 255 / 70%);
    padding: 0;
    display: inline-block;
    text-decoration: none;
    margin-top: 30px;
    color: #fff;
    transition: color .6s ease-in;
    background: var(--col1);
    border-radius: 20px; 
}
.btn-outline-1>.testo{
    padding: 10px 20px;
    display: inline-block;
    border-right: 1px solid rgb(255 255 255 / 30%);
    font-weight: bold;
}
.btn-outline-1>.arrowbox {
    padding: 10px 15px; 
    color: #fff;
}
.btn-outline-1 .arrow{
    fill: currentColor;
}
.btn-outline-1:hover { color:var(--col2); }
.btn-outline-1 .arrow path:nth-of-type(1) {
    transform: translateX(0px);
    transition: transform .3s ease-in;
}
.btn-outline-1:hover .arrow path:nth-of-type(1) {
    transform: translateX(22px);
}
.btn-outline-1 .arrow path:nth-of-type(2) {
    transform: translateX(-22px);
    transition: transform .3s ease-in;
}
.btn-outline-1:hover .arrow path:nth-of-type(2) {
    transform: translateX(0px);
}

.btn-w { 
    background: #fff;
    border-radius: 0;
    color: var(--col1);
    font-weight: bold;
    font-size: 14px;
    border: 1px solid #fff;
}
.btn-w:hover { 
    background: var(--col1);
    color: #ffffff;
    border: 1px solid #fff;
}

.btn-round-1 { background: var(--col1);
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    border: 1px solid var(--col1);
    transition: 1s;
}
/*
.btn-round-1:hover {
    color: var(--col1);
    border: 1px solid var(--col1);
}*/
.btn-round-1:hover {
    color: #fff;
    background: var(--col3);
    border: 1px solid var(--col3);
}


.btn-round-2 {
    background: transparent;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--col1);
    border: 1px solid var(--col3);
    transition: 1s;
}

.btn-round-2:hover {
    color: #fff;
    background: transparent;
    border: 1px solid var(--col1);
}
/* ==============================================================*/
/* # animazioni */
/* ==============================================================*/

  .rombo {
      position: relative;
  }

  .rombo img {
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      /*clip-path: polygon(50% 1%, 99% 50%, 50% 99%, 1% 50%);*/
      object-fit: cover;
      width: 100%;
      aspect-ratio: 1/1;
  }

 /* .rombo:before {
      content: "";
      display: block;
      background: var(--col4);
      clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
      width: 100%;
      aspect-ratio: 1/1;
      position: absolute;
      top: 0%;
      right: 0%;
      opacity: 0;
      transition: 1.5s;
  }*/

  .rombo:after {
      content: "";
      display: block;
      background: var(--col1);
      clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
      width: 100%;
      aspect-ratio: 1/1;
      position: absolute;
      top: 32%;
      right: 72%;
      z-index: -1;
      opacity: 0;
      transition: 1.5s;
      animation-delay: 8.5s;
  }

  .rombo.visible:after,
  .rombo.visible:before {
      opacity: 1;
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }


  .reveal {
      visibility: hidden;
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }
  .reveal2 {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;

      transition: clip-path 1s;
  }
  .reveal2 img {
      -o-object-fit: cover;
      object-fit: cover;
      transform: scale(0.8);
      width: 100%;
      /*object-position: 50% 50%;*/
  }
.indexp { display: inline-block; position: relative;
    aspect-ratio: 1/2.5;
    transform: skew(-15deg);
    max-height: 400px; width: auto;
    }
  .indexp img { width: 100%;
    height: 100%;
    object-fit: cover;}

    .indexp:after { display: block;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0) 15%, var(--col4) 100%);
        top: 0;
        opacity: 0;
       
    }
         .indexp .cname {
            transition: 1s; color: #fff;
         }
         .indexp:hover:after { opacity: 1; }

         .selectcat:hover .cname { color: #777 }
    .indexp:hover .cname { color: #fff;}
/* ==============================================================*/
/* # Helpers */
/* ==============================================================*/
.relative { position: relative;}
.tj { text-align: justify; }
.bgcol1 { background: var(--col1); color: #fff; }
.bgcol2 { background: var(--col2); color:#fff; }
.bgcol5 {
    background: var(--col5);
    color: #fff;
}
.col1 { color: var(--col1); }
.bgcolw {
    background:#fff;
}
.spgreen span { color: var(--col1); }



.left-bg-box { 
    height: 100%;
    width: 50%;
    display: block;
    position: absolute;
}
.right-bg-box {
    height: 100%;
    width: 50%;
    display: block;
    position: absolute;
    right:0;
}
@media (max-width: 991.98px) {
.left-bg-box {
        height: 400px;
        width: 100%;
        display: block;
        position: relative;
    }

    .right-bg-box {
        height: 400px;
            width: 100%;
            display: block;
            position: relative;
    }
}


/*
.left-img-box {
    position: relative;
    height: 100%;
}
.left-img-box img{
    position: absolute;
    height: 100%;
    width: 150%;
    top: 0;
    right: 0;
    display: block;
    object-fit: contain;
}
*/
/*
.tlbox, .brbox { position:relative;}
.tlbox:before { content: "";
    display: block;
    width: 150px;
    height: 200px;
    position: absolute;
    background: var(--col1);
    top: -40px;
        -webkit-transform: skew(20deg);
            -moz-transform: skew(20deg);
            -o-transform: skew(20deg);

}
.brbox:after {
    content: "";
    display: block;
    width: 150px;
    height: 200px;
    position: absolute;
    background: var(--col1);
    bottom: -40px;
    right:0;
        -webkit-transform: skew(20deg);
            -moz-transform: skew(20deg);
            -o-transform: skew(20deg);
}
*/
.socialico { padding:5px; }
.parallelogram {
    display:block;
    width: 150px;
    height: 200px;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    background: var(--col1);
}
.white { background: #fff;}
.fw-5 {    font-weight: 500; }

.left-full {position: relative;}
.left-full:before { content: "";
    position: absolute;
    display: block;
    width: 100vw;
    height: 100%;
    background: var(--col5);
    top: 0;
    right: 0;
    z-index: -1;
}

.left-full:after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 80%, var(--col5) 100%);
    top: 0;
    right: 0;
   
}
/*
.oblicw{ position: relative;}
.oblicw:before { 
    content: "";
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 100vw solid transparent;
    border-bottom: 100px solid #fff;
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 2;
}
*/
/* ==============================================================*/
/* # FOOTER */
/* ==============================================================*/

.prefooter { display: block; width:100vw; height:200px; }
footer { 
    position:relative;
    background: var(--col4);
    color:#fff;
    font-weight: lighter;
    font-size: 14px;
    letter-spacing: 1.2px;
       /* clip-path: polygon(0% 0%, 100% 30%, 100% 100%, 0 100%);*/
      
}


.overfoot { top: -100px;
    position: relative; margin-bottom: -50px;}

.logo-footer { width:260px; }
footer a { 
    color:currentColor;
    text-decoration: none;
}
footer a:hover {
    color: #27c2fe;
}

.footer2 a {
    font-weight:bold;
    color: currentColor;
    text-decoration: none;
}

.footer2 a:hover {
    color: #27c2fe;
}

footer form { background: var(--col1);
   padding: 20px; letter-spacing: 0.5px;}
   footer form small {
       font-size:12px; 
   }
footer b { font-weight: bold; }
footer ul { list-style: none; padding-left: 0; }
footer ul li {
  font-weight: bold; text-transform: uppercase;
}


@media (max-width: 991.98px) {
    .overfoot {
        top: -50px;
        margin-bottom: 0px;
    }
       
}
@media (max-width: 575.98px) {
    .overfoot {
        top: -20px;
    }
    footer::before {
        border-bottom: 100px solid var(--col2);
        top: -100px;
    }
         .prefooter {
             height: 100px;
         }
}
/* ==============================================================*/
/* # FORM */
/* ==============================================================*/
input, textarea {
        background: transparent;
            border: 1px solid rgb(255 255 255 / 50%);
        width: 100%;
            padding: 10px;
                margin: 5px 0;
        color:currentColor;
        transition: border 1s;
}
input::placeholder, textarea::placeholder {
    color: currentColor;
    opacity: 0.7;
}
input:focus-visible,textarea:focus-visible { outline: 0; border:1px solid #fff; }
input[type="checkbox"] { width:auto; }
.checkbox-label { line-height: 16px;}




/* input form textarea */

.fancy-form-label {
    color:var(--col3);
    font-size: 12px;
    text-transform: uppercase;
    position: absolute;
    top: 6px;
    left: 16px;
    cursor: text;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}

.fancy-form-label .fa-asterisk {
    font-size: 6px;
    vertical-align: text-top;
}


.form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.fancy-form-label span {
    font-size: 14px;
    line-height: 10px;
}

.fancy-form .form-control {
    padding: 26px 16px 6px 16px;
    height: auto;
}

.fw-input {
    width: 100%;
}

.fancy-form {
    position: relative;
}

.form-control:focus {
    border-color: rgba(0, 0, 0, 0.26);
    -webkit-box-shadow: inherit;
    box-shadow: inherit;
}

.fancy-form-input:focus+.fancy-form-label,
.fancy-form-textarea:focus+.fancy-form-label {
    color: #c0c0c0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

.form-control {
    background: transparent;
    color: #0e1219;
    border: 1px solid var(--col6);
    box-shadow: 0;
    -webkit-box-shadow: 0;
    border-radius: 0px;
}

.form-control:hover {
    border-bottom: 1px solid #00a2dd;
}

.form-control:focus {
    border: 1px solid #00a2dd;
}

.fancy-form select {
    margin: 0 !important;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    background-color: #fff !important;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

.checkbox-label {
    color: #828282 !important;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}

.checkbox-label>input {
    margin-right: 10px;
}

.contmsg {
    padding: 15px;
    margin: 10px 0;
    text-align: center;
}

.form-group i.fa {
    font-size: 6px;
}

.btn1 {
    background: rgb(48, 53, 93);
    background-image: linear-gradient(to right, rgba(48, 53, 93, 1) 0%, rgba(19, 120, 166, 1) 50%, rgba(48, 53, 93, 1) 100%);
    padding: 10px;
    color: #fff;
    font-size: 16px;
    letter-spacing: 1px;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    -webkit-background-size: 200% auto;
    background-size: 200% auto;
}

.btn1:hover {
    background-position: right center;
    color: #fff;
}


.btn2 {
    background: rgb(138, 144, 194);
    padding: 10px 20px;
    color: #fff;
    font-size: 16px;
    letter-spacing: 1px;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    border-radius: 0;
}

.btn2:hover {
    background: transparent;
    border: 1px solid rgb(138, 144, 194);
    color: rgb(138, 144, 194);
}
/* ==============================================================*/
/* # PRODOTTO SINGOLO */
/* ==============================================================*/
.backgroundcover {
    background: var(--col6);
    background: linear-gradient(0deg, var(--col6), var(--col4) 100%);
    position: relative;
}
.product-cover .ptitle h2 { 
    color: var(--col1);
    font-weight: normal;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
}

.product-cover .ptitle h2:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 1px;
    background-color: var(--col1);
    right: -50px;
    top: 50%;
    transform: translateY(-1px);
}


.product-cover .ptitle h1 {
        text-transform: uppercase;
        color: #fff;
        margin: 0;
}

.product-cover .ptitle {
    background: var(--col2);
    display: inline-block;
    
    position: relative;
    max-width: 60%;
    margin-top: 100px;
}
.product-cover .ptitle .bgbefore {
    padding: 60px 60px 60px 0px;
    z-index: 1;
    position: relative;
}

.product-cover .ptitle .bgbefore:before{
    content: "";
    position: absolute;
    display: block;
    width:100vw;    
    height: 100%;
    background: var(--col2);
    top: 0;
    right:0;
z-index: -1;
}

.product-cover .ptitle:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--col2);
    top: 0;
    left: 68px;
    transform: skew(-25deg);
  
}

.product-cover .ptitle:after {
    content: "";
    position: absolute;
    display: block;
    width: 25%;
    height: 100%;
    background: var(--col1);
    top: 0;
    left: 40px;
    transform: skew(-25deg) translateX(425%) translateY(-20%);

}

.btncube { background: #fff;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    color: #111;
    padding: 20px;
    border-radius: 5px;
    width: 200px;
    font-size: 16px;
    line-height: 18px;
    height: 100%;
    transition: transform 1s, opacity 1s;
}
.btncube img { margin-bottom: 10px; transform: scale(0.9); transition: 2s;}


.btncube:hover {
    color: #777;
    cursor:pointer;
    transform: perspective(1000px) rotateX(35deg);
}
.btncube:hover img {
    /*transform: scale(1);*/
    opacity:0.4;
}

@media (max-width: 991.98px) {
    .btncube {
    width: 100%;
    font-size: 14px;
    line-height: 14px;
    }
}
/*
*/
/*
.product-cover .ptitle {
    background: var(--col2);
    background: transparent;
    display: inline-block;
    padding: 60px 60px 60px 60px;
    position: relative;
    margin-left: 100px;
    transform: skew(25deg);
   
}


.product-cover .boxtitle {
    background: var(--col2);
    position: relative;
    margin-top: 100px;
    max-width: 60%;
    transform: skew(-25deg);
    margin-left: -100px;
}


.product-cover .boxtitle:after {
    content: "";
    position: absolute;
    display: block;
    width: 25%;
    height: 100%;
    background: var(--col1);
    top: 0;
    left: 40px;
    transform: translateX(390%) translateY(-20%);
    z-index: -1;
}

*/

.sectiontitle {
    background: var(--col1);
    display: inline-block;
    position: relative;
    max-width: 60%;
    width: 40vw;
    color:#fff;
    text-transform: uppercase;
}
.sectiontitle:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--col1);
    top: 0;
    left: 68px;
    transform: skew(-25deg);
}

.sectionbbf {
    padding: 40px 60px;
    z-index: 1;
    position: relative;
}
.sectionbbf:before {
    content: "";
    position: absolute;
    display: block;
    width: 100vw;
    height: 100%;
    background: var(--col1);
    top: 0;
    right: 0;
    z-index: -1;
}





.background2 { background:#fff; }

.product-sections ul {
    counter-reset: index;
    padding: 0;
}

/* List element */
.product-sections ul li {
    counter-increment: index;
    padding: 12px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 17px;
}


/* Element counter */
.product-sections ul li::before {
    /*content: counters(index, ".");*/
    content: counters(index, ".", decimal-leading-zero);
    font-size: 1.3rem;
    text-align: right;
    /*font-weight: bold;*/
    min-width: 50px;
    padding-right: 12px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    align-self: flex-start;
    background-image: linear-gradient(0deg, rgba(36, 43, 59, 1) 0%, rgba(0, 152, 217, 1) 100%);
    background-attachment: fixed;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Roboto";
}


/* Element separation */
.product-sections li+li {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}


.imgcover { position: relative;}

.poi { 
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    background: #35c4ff;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-size: 30px;
    line-height: 32px;
}
.poi:before{
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid #35c4ff;
    border-radius: 50%;
    top: -5px;
    left: -5px;
    transition: transform 1s;
}
.poi:hover {
    color: #fff;
}
.poi:hover:before {
    transform:scale(1.2);
}





.tooltipoi {
    position: relative;
display: block;
    width: 100%;
}

.tooltipoi:before {
    content: attr(tooltip-data);
    position: absolute;
    width: 150px;
    background-color: var(--col1);
    color: #fff;
    text-align: center;
    padding: 5px;
    line-height: 1.1;
    border-radius: 5px;
    z-index: 1;
    opacity: 0;
    transition: opacity .5s;
    bottom: 33px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    visibility: hidden;
}

.tooltipoi:after {
    content: "";
    position: absolute;
    bottom: 13px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    opacity: 0;
    transition: opacity .5s;
    border-color: var(--col1) transparent transparent transparent;
    visibility: hidden;
}

.tooltipoi:hover:before,
.tooltipoi:hover:after {
    opacity: 1;
    visibility: visible;
}

/* ==============================================================*/
/* # CONTATTI */
/* ==============================================================*/
.cis-cont {
display: flex;
    flex-direction: row;margin-bottom: 30px;
}
.cis-icon img { max-width: 40px; margin-right: 20px;}

@media (max-width: 991.98px) {
.cis-cont {
        flex-direction: column;
        align-items: center;
}
.cis-icon img {
    margin-right: 0px;
}
}
/* ==============================================================*/
/* # GMAPS */
/* ==============================================================*/
#google-map,
.google-map iframe {
    height: 500px;
    position: relative;
    background-color: #eee !important;
    z-index: 1;

}

.google-map iframe {
    display: block;
    width: 100%;
}

#google-map.contact-form-with-catcha {
    height: 500px;
}

.google-map-container {
    text-align: center;
    padding-top: 45px;
}


/* ==============================================================*/
/* # NEWS */
/* ==============================================================*/
.widget {
    margin-bottom: 60px;
}
.clearlist,
.clearlist li {
    list-style: none;
    padding: 0;
    margin: 0;
    background: none;
}
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.widget-posts-img {
    float: left;
    margin: 0 15px 0 0;
}
.widget-posts li {
    font-size: 13px;
    margin-bottom: 20px;
}
.widget-posts-descr {
    padding-left: 90px;
}
.blog-page-title {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
}


/* ==============================================================*/
/* # OPTIONAL  E GAMMA */
/* ==============================================================*/
.optionbox{
    margin-bottom: 30px;
    font-size: 14px;
    text-align: center;
}
.optionbox a {
    display: block;
    overflow: hidden;
    aspect-ratio: 1.4;
    margin-bottom: 15px;
    position: relative;
 }
  .optionbox a:before {
      content: url('../img/magnify.png'); /* "+"*/
      display: block;
      color:#fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      z-index: 19;
      font-size: 80px;
      font-weight: 100;
    opacity: 0;
     transition: 1s;
  }
 .optionbox a:after {
    content: "";
     display: block;
     background: linear-gradient(15deg, rgba(18, 53, 95, 1) 0%, rgba(0, 0, 0, 1) 100%);
     position: absolute;
     top:0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: 1s;
 }
 .optionbox a img {
    object-fit: cover;
    height: 100%;
    width: 100%;
   transition: 1s;
 }
  .optionbox a:hover img {
      transform: scale(1.2);
  }

.optionbox a:hover:before {
    opacity:1;
}
.optionbox a:hover:after {
    opacity: 0.5;
}

.overfade {
    position: fixed;
    top: 0;
    z-index: 9;
    width: 0;
    height: 100vh;
    background: #fff;
    transition: .35s;
}
.overfade.open {
    width: 100vw;
    /*transition-delay: 0.3s;*/
}
.overmodal { 
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    background: #fff;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
}
.close-modal { 
    position: absolute;
    right: 15px;
    top: 15px;
    transition: 1s;
}
.close-modal:hover {
    opacity:0.5;
}
.gammaprodotti { font-size:14px; background: var(--col2); color:#fff; }
.gammaprodotti .close-modal img {
    filter: invert(1);
}
.icon-g { display:inline-block;width: 50px; margin-right:10px; margin-bottom:15px;}

/* ==============================================================*/
/* # RESPONSIVE */
/* ==============================================================*/
@media (max-width: 991.98px) {
    header div {
        flex-direction: column;
    }

    .navigation {
        margin-top: 15px;
    }
}

@media (max-width: 767.98px) {
    header {
        height: 80px;
        transition: 0.5s;
    }
    header.open {
        overflow-y: auto;
        height: 100vh;
    }

    .button_container {
        display: block;
    }
    .menu {
        flex-direction: column;
        align-items: center;
        visibility: hidden;
        overflow: hidden;
        opacity: 0;
        height:0;
        transition: opacity 1s, height 0s;
    }

    header.open .menu{
          visibility: visible;
          overflow: visible;
          opacity: 1;
        height: 100%;
        margin-top: 50px;
    }

    .menut { display: none; }

   

    .submenu {
        visibility: visible;
        overflow: visible;
        opacity: 1;
        padding: 0;
        padding-top: 5px;
        position: relative;
        background: none;
        text-align: center;
        top: 0;
        transform-origin: top;
        transform: none;
        transition: transform 0.3s ease-in-out;
        background: rgb(255 255 255 / 60%);
    }


    .menu li {
        width: 100%;
    }

    .menu li a {
        text-align: center;
    }

    .menu li:hover a {
        border-color: transparent;
        background: none;

    }

    .menu li:hover>a {
        color: var(--col1);
    }

    .menu>li:hover>a:before,
    .menu>li.active>a:before {
        -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
        transform: scaleX(0);
    }

    .menu li a.dropd {
        border-bottom: 1px solid rgb(51 51 51 / 25%);
        padding-bottom: 10px;

    }


    .indexp {
        aspect-ratio: 2.5/1;
        transform: skew(0deg);
     margin-bottom: 20px;
    }


    .initaly {
       
        right: auto;
        top: auto;
        transform: rotate(0deg) translateY(0);
        bottom: 0;
    }
        .homecover {flex-direction: column; }
}

@media (max-width: 575.98px) {

    .cover-arrow { max-width: none;}
    .mission-icons { flex-direction: column;}
     .mission-icons>div {border-right: 0px solid rgb(18 53 95 / 30%);}
    .product-cover .ptitle .bgbefore {
        padding: 60px 60px 60px 20px;
    }
    .cbox {
        flex-direction: column;
    }
    .counticon {
        margin-right: 0;
    }
    .cbox .testi { text-align:center;}
}
@media (max-width: 349.98px) {
.product-cover .ptitle {max-width: 100%;}
}


.icone>div {
color:var(--col2);
letter-spacing: 2px;
text-transform: uppercase;
}
.icone>div>img { margin-bottom:20px; }