@font-face {
    font-family: 'urbanist';
    src: url('../fonts/Urbanist.otf'); /* IE9 Compat Modes */ 
    src: url('../fonts/Urbanist.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/Urbanist.woff') format('woff'), /* Pretty Modern Browsers */
         url('../fonts/Urbanist.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-display: swap;     
  }
  
  *, *::before, *::after { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
  body {
    position:relative;
    margin: 0;        
    font-size: 1em;     
    background-color: white;
    color:var(--cl-txt);
    width:100%;        
    font-family: var(--font-normal-normal);     
    overflow-x: hidden;
    cursor:default;
    transition: background 1s ease-in-out;
}

html {scroll-behavior: smooth; scroll-padding-top: 80px; max-width:100%; overflow-x: hidden; }
img { max-width: 100%; }
:root {   
  --text: #282828;  
  --cw:#0061A0;
  --cw-l:#1ac0f2;
  --cw-light:  #e6f0f8;
  --ipn:#5bb8c9;
  --ipn2:#2874a7;
  --ipn-d:#243b64;
  --ipn-light: #ebf8fb;
  --sec:#0d9483;
  --sec-d: #02443c;
  --sec-l:#d6dfde;
  --antracite: #1c2030;   
  --antracite-l: #5e6066;   
  --muted: #5a6882;
  --white: #FAF9F6;
  --light: #8fa0b8;
  --off:   #f6f8fb;
  --boxshadowBOX: -1px -1px 4px rgb(184, 184, 184), 1px 1px 4px rgb(184, 184, 184);
  --font-normal-normal: 'urbanist', sans-serif; 
  --clborder: #afbbd4;
  --shadow-nav: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.45);
}

.pd-inline-gen {padding-inline: 20em;}

/* ─────────────────────────────────────────────────
   PRELOADER — sipario 
───────────────────────────────────────────────── */
#pl {
  position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* Each panel covers the full area but clipped to its half.
   Content (z:3) sits on top. On exit: panels skew and slide out. */
.pl-panel {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #0d1526 0%, #131d38 60%, #162044 100%);
  transition: transform .9s cubic-bezier(.77,0,.18,1);
  z-index: 1;
}
.pl-panel-l { clip-path: polygon(0 0, 51% 0, 51% 100%, 0 100%); transform-origin: left center }
.pl-panel-r { clip-path: polygon(49% 0, 100% 0, 100% 100%, 49% 100%); transform-origin: right center }
#pl.exit .pl-panel-l { transform: skewY(-3deg) translateX(-110%) }
#pl.exit .pl-panel-r { transform: skewY(3deg) translateX(110%) }
/* content fades out instantly when exit starts — no overlap with site below */
#pl.exit .pl-content { opacity: 0; transition: opacity .15s ease }
#pl.exit .pl-skip    { opacity: 0; transition: opacity .1s ease }
#pl.gone { display: none } 

.pl-skip {
  position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  padding: 9px 22px; border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.45); font-family: var(--font-normal); font-size: 12px;
  font-weight: 600; letter-spacing: .5px; cursor: pointer; background: rgba(255,255,255,.04);
  transition: all .25s;
}
.pl-skip:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9) }

.pl-content { position: relative; z-index: 2; text-align: center; padding: 0 24px; width: 100%; max-width: 1200px; transition: opacity .3s }

.pl-eyebrow {
  font-size: 14px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--sec); opacity:0.3; margin-bottom: 52px; font-weight: 700;
  opacity: 0; animation: plFadeUp .6s ease .3s both;
}
.pl-logos {
  display: flex; align-items: center; justify-content: center;
  gap: 28px; margin-bottom: 52px; flex-wrap: wrap;
  width:100%;
}
.pl-img {width:280px;}
.pl-co { text-align: center; opacity: 0 }
/* Enter from sides + zoom */
.pl-co.left  { animation: plFromLeft  1s cubic-bezier(.175,.885,.32,1.4) .5s both }
.pl-co.right { animation: plFromRight 1s cubic-bezier(.175,.885,.32,1.4) .5s both }

.pl-role { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; margin-top: 3px; color: rgba(255,255,255,0.5); font-weight: 700 }
.pipe {font-size:18px;}
.pl-plus {
  /*font-size: clamp(48px,7vw,96px); */
  font-size: 50px;
  font-weight: 400;
   color: white; 
   flex-shrink: 0; 
   line-height: 1;
  opacity: 0; transform: scale(0.2);
  animation: plPlusIn .7s cubic-bezier(.175,.885,.32,1.6) 1.5s both;
  text-shadow: 0 0 60px rgba(91,184,201,.6);
}
@keyframes plPlusIn { to { opacity: 1; transform: scale(1) } }
@keyframes plFadeUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: translateY(0) } }
@keyframes plFromLeft  { from { opacity: 0; transform: translateX(-100px) scale(.6) } to { opacity: 1; transform: translateX(0) scale(1) } }
@keyframes plFromRight { from { opacity: 0; transform: translateX(100px)  scale(.6) } to { opacity: 1; transform: translateX(0) scale(1) } }

.pl-bar-wrap {
  width: 200px; height: 1px; background: rgba(255,255,255,.08); margin: 0 auto;
  overflow: hidden; opacity: 0; animation: plFadeUp .5s ease 2.3s both;
}
.pl-bar { height: 1px; width: 0; background: linear-gradient(to right, var(--sec), var(--sec-d)); animation: plFill 3.6s ease .4s both }
@keyframes plFill { to { width: 100% } }

@media (max-width:950px) {
  .pl-logos {flex-direction:column; gap:20px;}
  .pl-plus { order: 2;}
  .pl-co.left  { order: 1; }
  .pl-co.right { order: 3; }
  .pl-img { width: 200px; }
}
/* ─────────────────────────────────────────────────
   NAVBAR
───────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; z-index: 200; width:100%;
  background: transparent; padding: 0 20em; height: 70px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background-color .35s, box-shadow .35s;
  will-change:background-color;
}
nav.sc { background-color: var(--sec); box-shadow: 0 4px 32px rgba(13,148,131,.25) }
.nav-logo { display: flex; align-items: center; gap: 11px; cursor: pointer }
.nav-logo-icon {
  width: 38px; height: 38px; background: var(--sec);
  display: flex; align-items: center; justify-content: center; transition: background .3s;
}
nav.sc .nav-logo-icon { background: rgba(255,255,255,.2) }
.nav-logo-icon svg { width: 20px; height: 20px }
.nav-logo-text { font-weight: 900; font-size: 18px; color: var(--text); letter-spacing: -.5px; transition: color .3s }
nav.sc .nav-logo-text { color:  var(--white); }
.nav-logo-text em { font-style: normal; color: var(--sec); transition: color .3s }
nav.sc .nav-logo-text em { color: rgba(255,255,255,.7) }

.nav-links { display: flex; gap: 0; align-items: stretch; height: 70px }
.nav-item { position: relative; display: flex; align-items: center }
.nav-item > a, .nav-links > a {
  padding: 0 16px; font-size: 18px; font-weight: 600; height: 100%;
  display: flex; align-items: center; gap: 4px;
  color: var(--text); transition: color .25s, background .2s;
  letter-spacing: .1px; position: relative;
  text-decoration:none;
}
nav.sc .nav-item > a, nav.sc .nav-links > a { color: rgba(255,255,255,.88) }
.nav-item > a:hover, .nav-links > a:hover { background: rgba(0,0,0,.04) }
nav.sc .nav-item > a:hover, nav.sc .nav-links > a:hover { background: rgba(255,255,255,.1); color:  var(--white); }
/* underline indicator */
.nav-item > a::after, .nav-links > a::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--sec); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
nav.sc .nav-item > a::after, nav.sc .nav-links > a::after { background: rgba(255,255,255,.6) }
.nav-item > a:hover::after, .nav-links > a:hover::after,
.nav-item:hover > a::after { transform: scaleX(1) }
/* Dropdown parent: no background change, only subtle text brighten */
.nav-item:hover > a { color: var(--text) }
nav.sc .nav-item:hover > a { color:  var(--white); }

/* ── MEGA DROPDOWN ── */
/* ── DROPDOWN SINTESI-STYLE ── */
.nav-drop {
  position: absolute;
  top: 100%;
  left: 50%; transform: translateX(-50%) translateY(-10px);
  min-width: 580px;
  background: var(--antracite);
  box-shadow: 0 12px 48px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  z-index: 190;
}
.nav-item:hover .nav-drop {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-drop::before, .nav-drop::after { display: none }

.nav-drop-inner {
  display: grid; grid-template-columns: 1fr 1fr;
}

.drop-col-l {
  background: var(--antracite);
  padding: 32px 28px;
  position: relative;
}
.drop-col-l::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,.05) 100%);
  pointer-events: none;
}
.drop-col-r {
  background: var(--white);
  padding: 32px 28px;  
}

.drop-col-h {
  font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  padding-bottom: 12px; margin-bottom: 8px;
  border-bottom: 2px solid;
}
.drop-col-l .drop-col-h { color: var(--white); border-bottom-color: var(--cw) }
.drop-col-r .drop-col-h { color: var(--antracite); border-bottom-color: var(--ipn); }

.nav-drop a {
  display: block;
  font-size: 14px; font-weight: 600;
  padding: 10px 12px;
  border-left: 3px solid transparent;
  transition: all .22s ease;
  text-decoration: none;
}
.drop-col-l a { color: rgba(255,255,255,.85) }
.drop-col-l a:hover {
  color: var(--white); background: rgba(255,255,255,.15);
  border-left-color: var(--cw); transform: translateX(6px);
}
.drop-col-r a { color: var(--antracite) }
.drop-col-r a:hover {
  color: var(--antracite); background: rgba(0,0,0,.04);
  border-left-color: var(--ipn); transform: translateX(6px);
}

.nav-drop-arrow { font-size: 10px; transition: transform .25s; display: inline-block; margin-left: 4px }
.nav-item:hover .nav-drop-arrow { transform: rotate(180deg) }

/* CTA button */
.nav-cta {
  padding: 11px 26px; background: var(--sec); color:  var(--white);; font-size: 14px; font-weight: 800;
  letter-spacing: .2px; position: relative; overflow: hidden;
  transition: background .3s, transform .2s, box-shadow .3s;
  display: inline-flex; align-items: center; margin-left: 8px; gap:5px;
  text-decoration:none;
}
.nav-cta::before {
  content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.15);
  transform: translateX(-105%) skewX(-15deg); transition: transform .4s ease;
}
.nav-cta::after { display: none }
.nav-cta:hover::before { transform: translateX(105%) skewX(-15deg) }
.nav-cta:hover { background: var(--sec-d);  transform: translateY(-1px) }
nav.sc .nav-cta { background:  var(--white);; color: var(--sec) }
nav.sc .nav-cta:hover { background: rgba(255,255,255,.9); color: var(--sec-d) }

.nav-burger { display: none; flex-direction: column; gap: 6px; cursor: pointer; padding: 8px; z-index: 200 }
.nb-l { display: block; width: 26px; height: 2px; background: var(--text); transition: all .4s cubic-bezier(.77,0,.18,1) }
nav.sc .nb-l { background:  var(--white); }
.nav-burger.open .nb-l:nth-child(1) { transform: translateY(8px) rotate(45deg) }
.nav-burger.open .nb-l:nth-child(2) { opacity: 0; transform: scaleX(0) }
.nav-burger.open .nb-l:nth-child(3) { transform: translateY(-8px) rotate(-45deg) }

/* ─────────────────────────────────────────────────
   FULLSCREEN MOBILE MENU — sipario, stile SINTESI
───────────────────────────────────────────────── */
#menuOv {
  position: fixed; inset: 0; z-index: 250; pointer-events: none;
}
.mo-panel-l,
.mo-panel-r {
  position: absolute; top: 0; bottom: 0; width: 51%; background: #2a2f3d;
  transition: transform .6s cubic-bezier(.77,0,.18,1);
}
.mo-panel-l { left: 0;  transform: translateX(-102%); }
.mo-panel-r { right: 0; transform: translateX(102%); }
#menuOv.open { pointer-events: all }
#menuOv.open .mo-panel-l { transform: translateX(0); }
#menuOv.open .mo-panel-r { transform: translateX(0); }
#menuOv.closing .mo-panel-l { transform: translateX(-102%); }
#menuOv.closing .mo-panel-r { transform: translateX(102%); }

.mo-inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 72px 32px 40px;
  overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
#menuOv.open .mo-inner { opacity: 1; pointer-events: all; transition-delay: .42s; }

.mo-close {
  position: absolute; top: 20px; right: 20px;
  width: 48px; height: 48px; background: rgba(255,255,255,.07); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 22px; color:  var(--white);;
  transition: background .2s, transform .35s;
}
.mo-close:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); }

/* Main links — stile SINTESI: sinistra, font medio, separatori sottili */
.mo-nav { display: flex; flex-direction: column; }

.mo-nav > a,
.mo-has-sub {
  font-size: 22px; font-weight: 600; color: rgba(255,255,255,.85);
  padding: 16px 0; letter-spacing: -.2px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center;
  opacity: 0; transform: translateY(10px);
  transition: transform .4s ease, opacity .4s ease, color .2s;
  text-decoration:none;
}
.mo-nav > a:hover { color: var(--sec); }


.mo-nav > a:first-child:hover { color: var(--sec-d); }

/* stagger */
#menuOv.open .mo-nav > a,
#menuOv.open .mo-has-sub { transform: translateY(0); opacity: 1; }
#menuOv.open .mo-nav > *:nth-child(1) { transition-delay: .45s; }
#menuOv.open .mo-nav > *:nth-child(2) { transition-delay: .50s; }
#menuOv.open .mo-nav > *:nth-child(4) { transition-delay: .55s; }
#menuOv.open .mo-nav > *:nth-child(5) { transition-delay: .60s ;}
#menuOv.open .mo-nav > *:nth-child(6) { transition-delay: .65s; }
#menuOv.open .mo-nav > *:nth-child(7) { transition-delay: .70s; }

/* Servizi trigger */
.mo-has-sub {
  cursor: pointer; user-select: none;
  justify-content: space-between;
  width: 100%;
  background: none; border: none;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  font-family: var(--font-normal); text-align: left;
}
/* when expanded: remove bottom border (sub-items provides its own) */
.mo-has-sub.sub-open {
  border-bottom: none !important;
}
.mo-sub-arr {
  font-size: 14px; color: rgba(255,255,255,.3);
  transition: transform .3s ease, color .3s ease;
  margin-left: auto; flex-shrink: 0;
}
.mo-has-sub.sub-open { color: var(--sec) }
.mo-has-sub.sub-open .mo-sub-arr { transform: rotate(180deg); color: var(--sec) }

/* Submenu — stile SINTESI: categorie verde + voci sotto */
/* Grid trick for smooth expand/collapse animation */
.mo-sub-items {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.77,0,.18,1);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mo-sub-items-inner {
  overflow: hidden;
  padding: 0;
  transition: padding .4s cubic-bezier(.77,0,.18,1);
}
.mo-sub-items.open {
  grid-template-rows: 1fr;
}
.mo-sub-items.open .mo-sub-items-inner {
  padding: 8px 0 12px 0;
}

.mo-sub-items a {
  display: block !important;
  font-size: 17px !important; font-weight: 500 !important;
  color: rgba(255,255,255,.6) !important;
  padding: 8px 0 !important;
  letter-spacing: 0 !important;
  transform: none !important; opacity: 1 !important;
  transition: color .2s !important; transition-delay: 0s !important;
  border: none !important;
  text-decoration:none;
}
.mo-sub-items a:hover { color:  var(--white) !important; }

/* ─────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────── */
footer { background: var(--antracite); color: rgba(255,255,255,.45); padding-top: 64px; padding-bottom:40px; border-top: 1px solid rgba(255,255,255,.05) }
.fg { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 52px }
.fb h4 { font-size: 22px; font-weight: 900; color: var(--white); margin-bottom: 12px; letter-spacing: -.5px; display: flex; align-items: center; gap: 10px;  }
.fbi { width: 30px; height: 30px; background: var(--sec); display: flex; align-items: center; justify-content: center }
.fbi svg { width: 17px; height: 17px }
.fb p { font-size: 14px; line-height: 1.5; max-width: 240px; }
.fc h5 { font-size: 14px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 16px;color:var(--sec); }
.fc a, .fc p { display: block; font-size: 14px; color: rgba(255,255,255,.4); margin-bottom: 10px; transition: color .2s; }
.fc a:hover { color: var(--white); }
.footer-bot { border-top: 1px solid rgba(255,255,255,.06); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; flex-wrap: wrap; gap: 12px; }
.fbl a { color: rgba(255,255,255,.3); margin-left: 20px; font-size: 13px; font-weight: 600; transition: color .2s }
.fbl a:hover { color: rgba(255,255,255,.7) }
.fc-co-socials { display: flex; gap: 14px; margin-top: 14px }
.fc-co-socials a {  
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.35); font-size: 16px;
  transition: all .2s; text-decoration: none;
}
.fc-co-socials a:hover {color: var(--white); background: rgba(255,255,255,.06) }

@media(max-width:1787px) {.pd-inline-gen { padding-inline: 10em; }}
@media(max-width:1500px) {.pd-inline-gen { padding-inline: 5em; }}
@media(max-width:1300px) {.pd-inline-gen { padding-inline: 4em; }}
@media(max-width:1350px) {
  .fg {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .fb { grid-column: span 2 }
}
@media(max-width:1200px) {  
  .nav-drop { display: none !important }  /* hide mega-menu on mobile */
  nav#nav { padding-block: 0; background: var(--sec) !important; box-shadow: 0 4px 32px rgba(13,148,131,.2) }
  nav#nav .nav-logo-text { color:  var(--white);}
  nav#nav .nav-logo-text em { color: rgba(255,255,255,.7) }
  nav#nav .nav-logo-icon { background: rgba(255,255,255,.2) }
  nav#nav .nb-l { background:  var(--white); }
  .nav-links, .nav-cta { display: none }
  .nav-burger { display: flex }
 
  footer { padding-top: 40px; padding-bottom:28px; }
}
@media(max-width:900px) {
  .fg {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .fb {
    grid-column: span 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .fb p { max-width: 100% }
}

@media (max-width:750px) {.footer-bot { justify-content: center; text-align:center; }}

@media(max-width:600px) {
  .mo-inner { padding: 90px 28px 40px }  
  .svc-main { padding: 36px }
  .svc-grid { grid-template-columns: 1fr }  
  #menuOv { grid-template-columns: 1fr }
  #menuOv .mo-r { display: none }
  .mo-inner { padding: 80px 28px }
  .pl-name { font-size: 28px }
  .pl-plus { font-size: 52px }
  
  .fg { grid-template-columns: 1fr; gap: 32px; }
  .fb { grid-column: span 1; text-align: left; align-items: flex-start; }
}

/* ─────────────────────────────────────────────────
   BUTTONS — no border-radius, slide fill
───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-normal); font-weight: 800; cursor: pointer; border: none;
  letter-spacing: .2px; font-size: 15px;
  /* gradient slide fill — avoids z-index/pseudo-element text coverage */
  background-size: 200% 100%; background-position: right center;
  transition: background-position .4s cubic-bezier(.77,0,.18,1), transform .25s ease, box-shadow .25s ease, color .2s ease;
  text-decoration:none;
}
.btn:hover { background-position: left center; }
/* btn-cta: green → darker green */
.btn-cta {
  padding: 16px 42px; color:  var(--white);;
  background-image: linear-gradient(to right, var(--antracite) 50%, var(--sec) 50%);
}
.btn-cta:hover { transform: translateY(-2px); color:  var(--white); }
/* btn-p: blue */
.btn-p {
  padding: 16px 42px; color:  var(--white);;
  background-image: linear-gradient(to right, var(--cw-d) 50%, var(--cw) 50%);
}
.btn-p:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,97,160,.35); color:  var(--white); }
/* btn-s: outline, fills dark */
.btn-s {
  padding: 16px 34px; color: var(--text); border: 2px solid var(--antracite);
  background-image: linear-gradient(to right, var(--sec) 50%, transparent 50%);
}
.btn-s:hover { border-color: var(--sec); transform: translateY(-2px); color:  var(--white); }

/*stili generali */
.width100 {width:100%;}
.h100 {height:100vh;} 
.relative {position:relative;}
.wrap-flex {display:flex; }
.column {flex-direction:column;}
.wrap {flex-wrap: wrap;}
.center {align-items:center;justify-content: center;}
.flexwrap {flex-wrap: wrap;}
.spc_btw {justify-content: space-between;}
.justify-c {justify-content: center;}
.justify-r {justify-content: flex-end;}
.justify-s {justify-content: flex-start;}
.align-start {align-items:flex-start;}
.align-end {align-items:flex-end;}
.align-center {align-items:center;}
.fit {width:fit-content;}

.txt-c {text-align:center;}
.txt-r {text-align:right;}
.txt-l {text-align: left;}
.txt-j {text-align: justify;}
.txt-w {color:white;}
.txt-green {color:var(--sec);}
.uppercase {text-transform: uppercase;}
.underline {text-decoration: underline;}
.bold {font-weight:600;}

.pointer {cursor:pointer;}
.gap5 {gap:5px;}
.gap10 {gap:10px;}
.gap16 {gap:16px;}
.gap20 {gap:20px;}
.gap30 {gap:30px;}
.gap50 {gap:50px;}
.gap100 {gap:100px;}

.m0 {margin:0;}
.ml-auto {margin-left:auto;}
.mr-auto {margin-right:auto;}
.m-auto {margin: 0 auto;}
.m-block0 {margin-block: 0;} /* top e bottom */
.m-inline0 {margin-inline: 0;} /* left e right */
.mt0 {margin-top:0;}
.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt16 {margin-top:16px;}
.mt20 {margin-top:20px;}
.mt50 {margin-top:50px;}
.mt100 {margin-top:100px;}
.mb0 {margin-bottom:0;}
.mb3 {margin-bottom:3em;}
.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb16 {margin-bottom:16px;}
.mb20 {margin-bottom:20px;}
.mb50 {margin-bottom:50px;}
.mb100 {margin-bottom:100px;}

.p0 {padding:0;}
.p5 {padding: 5px;}
.p10 {padding:10px;}

.pt0 {padding-top:0;}
.pb0 {padding-bottom:0;}
.p-block0 {padding-block: 0;} /* top e bottom */
.p-inline0 {padding-inline: 0;} /* left e right */

.bradius {border-radius:var(--bradius);}

.link-gen {color:var(--green);}
.link-gen:hover {color:var(--cl-lightblue);}

.bg-cw {background:var(--cw);}
.bg-ipn {background:var(--ipn2);}

.sticky {
  position:sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
}
.absolute {
  position:absolute;
  position: -webkit-absolute;
  position: -moz-absolute;
  position: -ms-absolute;
  position: -o-absolute;
}

.fixed {
  position:fixed;
  position: -webkit-fixed;
  position: -moz-fixed;
  position: -ms-fixed;
  position: -o-fixed;
}
.bkgr-image_cover {
  background-size: cover;
  -webkit-background-size:cover;
   -moz-background-size: cover;
   -o-background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  width:100%;
  height:100vh;
}