@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Nunito:ital,wght@0,200;0,400;0,700;0,1000;1,200;1,400;1,700;1,1000&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&display=swap');

html {
    font-size: var(--font-body);
}
body { 
  line-height: var(--line-height-body);
  font-family: var(--font-family-2);
  font-family: var(--font-family-1);
  color: var(--w-color-text);
  }

#main { 
    margin-top: calc(var(--w-header-down) + var(--w-header-up) + var(--w-menu-orizontale-h) + 20px); 
} 
#main.menu-scroll.small { margin-top: calc(var(--w-header-down-small) + var(--w-menu-orizontale-h)); } 

/* ---------- HEADER ---------- */

.header-up { 
    position: fixed;
    top: 0px;
    background-color: var(--w-color-1); 
    color: var(--w-color-1-n);
    height: var(--w-header-up);
    width: 100%;
    z-index: 999999;
}
.header-up.small { 
    position: fixed;
    top: -200px;
}
.header-down { 
    width: 100%;
    height: var(--w-header-down);
    background-color: var(--sup);
    position: fixed;
    top: 0px;
    padding-top: var(--w-header-up);
    z-index: 99999;
}
.header-down.small {
    position: fixed;
    top: 0px;
    padding-top: 0px;
    height: var(--w-header-down-small);
    box-shadow: 0px 3px 3px var(--w-shadow);
}
.header-down img { 
    width: 400px;
}
.header-down.small img { 
    width: 200px;
}

.header-access {
    width: 100%;
    height: 50px;
    background-color: var(--sup);
    top: 0px;
    position: fixed;
    left: 0px;
    z-index: 999;
}
.header-access img {
    height: 40px;
    margin-top: 5px;
    margin-left: 5px;
}
.header-access-event {
    width: 100%;
    height: 36px;
    background-color: var(--w-color-5);
    top: 50px;
    position: fixed;
    left: 0px;
    align-content: center;
}
@media screen and (max-width: 748px){ 
    .header-access-event .text { display: none !important; }
    .header-down img { 
    width: 200px;
    }
    .header-up .lingua { padding-left: 10px; } 
    .header-up .text { display: none; }
}

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

footer { 
    background-color: var(--w-color-1); 
    color: var(--w-color-1-n);
}
footer img {
    max-width: 250px;
    padding-left: 10px;
}

/* ---------- ICON SETTING ---------- */

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}


/* ---------- FONT ---------- */

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.font-option, .font-x-small, .font-medium, .font-large, .font-x-large, .font-xx-large,
.font-apice, .font-pedice { width: 100%; letter-spacing:0; margin:0; margin-bottom: 8px }

.font-option { font-size: var(--font-option)  !important; font-weight: 400 !important; line-height: var(--fonth-option) } 
.font-x-small { font-size: var(--font-x-small)  !important; font-weight: 400 !important; line-height: var(--fonth-x-small) } 
.font-small { font-size: var(--font-small)  !important; font-weight: 400 !important; line-height: var(--fonth-small) } 
.font-medium { font-size: var(--font-medium)  !important; font-weight: 400 !important; line-height: var(--fonth-medium) } 
.font-normal { font-size: var(--font-normal)  !important; font-weight: 400 !important; line-height: var(--fonth-normal) } 
.font-large { font-size: var(--font-large)  !important; font-weight: 400 !important; line-height: var(--fonth-large) } 
.font-x-large { font-size: var(--font-x-large)  !important; font-weight: 600 !important; line-height: var(--fonth-x-large)} 
.font-xx-large { font-size: var(--font-xx-large)  !important; font-weight: 600 !important; line-height: var(--fonth-xx-large)}
.font-apice { vertical-align: super; display: inline; font-size: var(--font-apice) !important; color: var(--w-color-text-apici:);} 
.font-pedice { vertical-align: sub; display: inline; font-size: var(--font-pedice) !important; color: var(--w-color-text-apici:);} 

.font-style-i { font-style: italic; }
.font-style-n { font-style: normal; }
.fw100 { font-weight: 100 !important; }
.fw200 { font-weight: 200 !important; }
.fw300 { font-weight: 300 !important; }
.fw400 { font-weight: 400 !important; }
.fw500 { font-weight: 500 !important; }
.fw600 { font-weight: 600 !important; }
.fw700 { font-weight: 700 !important; }
.fw800 { font-weight: 800 !important; }
.fw900 { font-weight: 000 !important; }


/* ---------- PARAGRAPH ---------- */

h1, .h1 { font-size: var(--font-x-large); font-weight: 700; color: var(--w-color-1);line-height: 1.4em; } 
h2, .h2 { font-size: var(--font-large); font-weight: 600; color: var(--w-color-1); line-height: 1.2em;} 
h3, .h3 { font-size: var(--font-medium); font-weight: 600; color: var(--w-color-1); line-height: 1.2em;}
h4, .h4 { font-size: var(--font-small); font-weight: 600; color: var(--w-color-1); margin: 0px;}

#titoloar6, #titoloar6 {

}
#titoloar1 { margin-left:20px; margin-top: 30px; }
#titoloar4, #titoloar5, #titoloar6, #titoloar7 {
    text-align: center;
    margin-bottom: 20px; 
}

.spacer { color: transparent; margin: 20px auto; }

br.space-4 { margin: 4px; display: block; }
br.space-8 { margin: 8px; display: block; }
br.space-12 { margin: 12px; display: block; }
br.space-16 { margin: 16px; display: block; }

p { margin-bottom: 20px }

a { margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
a, p a { text-decoration: none; color: var(--w-text-color); }
p a { border-bottom: 2px solid var(--w-color-1); font-weight: 600; color: var(--w-color-1); }
a:hover {  } 
p a:hover { color: var(--w-hover); }

p, ul, ol, li { line-height: var(--line-height-p); } 
ul, ol { 
    list-style-type: disc;
    padding-left: 50px;
    margin-bottom: 40px;
    margin-top: 10px;
}

hr { border: 0; border-top: 1px solid var(--w-gray-300); margin: 10px 0px }
hr.hr0 { border: 0; border-top: 1px solid var(--w-gray-300); margin: 0px; }
hr.hr5 { border: 0; border-top: 1px solid var(--w-gray-300); margin: 5px 0px }
hr.hr8 { border: 0; border-top: 1px solid var(--w-gray-300); margin: 8px 0px }
hr.hr10 { border: 0; border-top: 1px solid var(--w-gray-300); margin: 10px 0px }
hr.hr20 { border: 0; border-top: 1px solid var(--w-gray-300); margin: 20px 0px }
hr.hr30 { border: 0; border-top: 1px solid var(--w-gray-300); margin: 30px 0px }
hr.hr40 { border: 0; border-top: 1px solid var(--w-gray-300); margin: 40px 0px }

.column-1 { -moz-column-count: 1; -moz-column-gap: 1em; -webkit-column-count: 1; -webkit-column-gap: 1em; column-count: 1; column-gap: 1em; }
.column-2 { -moz-column-count: 2; -moz-column-gap: 1em; -webkit-column-count: 2; -webkit-column-gap: 1em; column-count: 2; column-gap: 1em; }
.column-3 { -moz-column-count: 3; -moz-column-gap: 1em; -webkit-column-count: 3; -webkit-column-gap: 1em; column-count: 3; column-gap: 1em; }
.column-4 { -moz-column-count: 4; -moz-column-gap: 1em; -webkit-column-count: 4; -webkit-column-gap: 1em; column-count: 4; column-gap: 1em; }

.z-index-99999 { z-index: 99999 !important; }
.z-index-9999 { z-index: 9999 !important; }
.z-index-999 { z-index: 999 !important; }
.z-index-99 { z-index: 99 !important; }
.z-index-9 { z-index: 9 !important; }


.p0 { padding: var(--0) !important; }
.p4 { padding: var(--4) !important; }
.p5 { padding: var(--5) !important; }
.p6 { padding: var(--6) !important; }
.p8 { padding: var(--8) !important; }
.p10 { padding: var(--10) !important; }
.p12 { padding: var(--12) !important; }
.p14 { padding: var(--14) !important; }
.p15 { padding: var(--15) !important; }
.p16 { padding: var(--16) !important; }
.p18 { padding: var(--18) !important; }
.p20 { padding: var(--20) !important; }
.p25 { padding: var(--25) !important; }
.p30 { padding: var(--30) !important; }
.p35 { padding: var(--35) !important; }
.p40 { padding: var(--40) !important; }
.p45 { padding: var(--45) !important; }
.p50 { padding: var(--50) !important; }
.p55 { padding: var(--55) !important; }
.p60 { padding: var(--60) !important; }

/* ---------- PADDING TOP ---------- */
.pt0 { padding-top: var(--0) !important; }
.pt4 { padding-top: var(--4) !important; }
.pt5 { padding-top: var(--5) !important; }
.pt6 { padding-top: var(--6) !important; }
.pt8 { padding-top: var(--8) !important; }
.pt10 { padding-top: var(--10) !important; }
.pt12 { padding-top: var(--12) !important; }
.pt14 { padding-top: var(--14) !important; }
.pt15 { padding-top: var(--15) !important; }
.pt16 { padding-top: var(--16) !important; }
.pt18 { padding-top: var(--18) !important; }
.pt20 { padding-top: var(--20) !important; }
.pt25 { padding-top: var(--25) !important; }
.pt30 { padding-top: var(--30) !important; }
.pt35 { padding-top: var(--35) !important; }
.pt40 { padding-top: var(--40) !important; }
.pt45 { padding-top: var(--45) !important; }
.pt50 { padding-top: var(--50) !important; }
.pt55 { padding-top: var(--55) !important; }
.pt60 { padding-top: var(--60) !important; }
/* ---------- PADDING BOTTOM ---------- */
.pb0 { padding-bottom: var(--0) !important; }
.pb4 { padding-bottom: var(--4) !important; }
.pb5 { padding-bottom: var(--5) !important; }
.pb6 { padding-bottom: var(--6) !important; }
.pb8 { padding-bottom: var(--8) !important; }
.pb10 { padding-bottom: var(--10) !important; }
.pb12 { padding-bottom: var(--12) !important; }
.pb14 { padding-bottom: var(--14) !important; }
.pb15 { padding-bottom: var(--15) !important; }
.pb16 { padding-bottom: var(--16) !important; }
.pb18 { padding-bottom: var(--18) !important; }
.pb20 { padding-bottom: var(--20) !important; }
.pb25 { padding-bottom: var(--25) !important; }
.pb30 { padding-bottom: var(--30) !important; }
.pb35 { padding-bottom: var(--35) !important; }
.pb40 { padding-bottom: var(--40) !important; }
.pb45 { padding-bottom: var(--45) !important; }
.pb50 { padding-bottom: var(--50) !important; }
.pb55 { padding-bottom: var(--55) !important; }
.pb60 { padding-bottom: var(--60) !important; }
/* ---------- PADDING LEFT ---------- */
.pl0 { padding-left: var(--0) !important; }
.pl4 { padding-left: var(--4) !important; }
.pl5 { padding-left: var(--5) !important; }
.pl6 { padding-left: var(--6) !important; }
.pl8 { padding-left: var(--8) !important; }
.pl10 { padding-left: var(--10) !important; }
.pl12 { padding-left: var(--12) !important; }
.pl14 { padding-left: var(--14) !important; }
.pl15 { padding-left: var(--15) !important; }
.pl16 { padding-left: var(--16) !important; }
.pl18 { padding-left: var(--18) !important; }
.pl20 { padding-left: var(--20) !important; }
.pl25 { padding-left: var(--25) !important; }
.pl30 { padding-left: var(--30) !important; }
.pl35 { padding-left: var(--35) !important; }
.pl40 { padding-left: var(--40) !important; }
.pl45 { padding-left: var(--45) !important; }
.pl50 { padding-left: var(--50) !important; }
.pl55 { padding-left: var(--55) !important; }
.pl60 { padding-left: var(--60) !important; }

/* ---------- PADDING RIGHT ---------- */
.pr0 { padding-right: var(--0) !important; }
.pr4 { padding-right: var(--4) !important; }
.pr5 { padding-right: var(--5) !important; }
.pr6 { padding-right: var(--6) !important; }
.pr8 { padding-right: var(--8) !important; }
.pr10 { padding-right: var(--10) !important; }
.pr12 { padding-right: var(--12) !important; }
.pr14 { padding-right: var(--14) !important; }
.pr15 { padding-right: var(--15) !important; }
.pr16 { padding-right: var(--16) !important; }
.pr18 { padding-right: var(--18) !important; }
.pr20 { padding-right: var(--20) !important; }
.pr25 { padding-right: var(--25) !important; }
.pr30 { padding-right: var(--30) !important; }
.pr35 { padding-right: var(--35) !important; }
.pr40 { padding-right: var(--40) !important; }
.pr45 { padding-right: var(--45) !important; }
.pr50 { padding-right: var(--50) !important; }
.pr55 { padding-right: var(--55) !important; }
.pr60 { padding-right: var(--60) !important; }



/* ---------- MARGIN ---------- */
.mAuto { margin: 0 auto; !important; display:block !important; }
.m0 { margin: var(--0) !important; }
.m4 { margin: var(--4) !important; }
.m5 { margin: var(--5) !important; }
.m6 { margin: var(--6) !important; }
.m8 { margin: var(--8) !important; }
.m10 { margin: var(--10) !important; }
.m12 { margin: var(--12) !important; }
.m14 { margin: var(--14) !important; }
.m15 { margin: var(--15) !important; }
.m16 { margin: var(--16) !important; }
.m18 { margin: var(--18) !important; }
.m20 { margin: var(--20) !important; }
.m25 { margin: var(--25) !important; }
.m30 { margin: var(--30) !important; }
.m35 { margin: var(--35) !important; }
.m40 { margin: var(--40) !important; }
.m45 { margin: var(--45) !important; }
.m50 { margin: var(--50) !important; }
.m55 { margin: var(--55) !important; }
.m60 { margin: var(--60) !important; }

/* ---------- MARGIN TOP ---------- */
.mt0 { margin-top: var(--0) !important; }
.mt4 { margin-top: var(--4) !important; }
.mt5 { margin-top: var(--5) !important; }
.mt6 { margin-top: var(--6) !important; }
.mt8 { margin-top: var(--8) !important; }
.mt10 { margin-top: var(--10) !important; }
.mt12 { margin-top: var(--12) !important; }
.mt14 { margin-top: var(--14) !important; }
.mt15 { margin-top: var(--15) !important; }
.mt16 { margin-top: var(--16) !important; }
.mt18 { margin-top: var(--18) !important; }
.mt20 { margin-top: var(--20) !important; }
.mt25 { margin-top: var(--25) !important; }
.mt30 { margin-top: var(--30) !important; }
.mt35 { margin-top: var(--35) !important; }
.mt40 { margin-top: var(--40) !important; }
.mt45 { margin-top: var(--45) !important; }
.mt50 { margin-top: var(--50) !important; }
.mt55 { margin-top: var(--55) !important; }
.mt60 { margin-top: var(--60) !important; }

/* ---------- MARGIN BOTTOM ---------- */
.mb0 { margin-bottom: var(--0) !important; }
.mb4 { margin-bottom: var(--4) !important; }
.mb5 { margin-bottom: var(--5) !important; }
.mb6 { margin-bottom: var(--6) !important; }
.mb8 { margin-bottom: var(--8) !important; }
.mb10 { margin-bottom: var(--10) !important; }
.mb12 { margin-bottom: var(--12) !important; }
.mb14 { margin-bottom: var(--14) !important; }
.mb15 { margin-bottom: var(--15) !important; }
.mb16 { margin-bottom: var(--16) !important; }
.mb18 { margin-bottom: var(--18) !important; }
.mb20 { margin-bottom: var(--20) !important; }
.mb25 { margin-bottom: var(--25) !important; }
.mb30 { margin-bottom: var(--30) !important; }
.mb35 { margin-bottom: var(--35) !important; }
.mb40 { margin-bottom: var(--40) !important; }
.mb45 { margin-bottom: var(--45) !important; }
.mb50 { margin-bottom: var(--50) !important; }
.mb55 { margin-bottom: var(--55) !important; }
.mb60 { margin-bottom: var(--60) !important; }

/* ---------- MARGIN LEFT ---------- */
.ml0 { margin-left: var(--0) !important; }
.ml4 { margin-left: var(--4) !important; }
.ml5 { margin-left: var(--5) !important; }
.ml6 { margin-left: var(--6) !important; }
.ml8 { margin-left: var(--8) !important; }
.ml10 { margin-left: var(--10) !important; }
.ml12 { margin-left: var(--12) !important; }
.ml14 { margin-left: var(--14) !important; }
.ml15 { margin-left: var(--15) !important; }
.ml16 { margin-left: var(--16) !important; }
.ml18 { margin-left: var(--18) !important; }
.ml20 { margin-left: var(--20) !important; }
.ml25 { margin-left: var(--25) !important; }
.ml30 { margin-left: var(--30) !important; }
.ml35 { margin-left: var(--35) !important; }
.ml40 { margin-left: var(--40) !important; }
.ml45 { margin-left: var(--45) !important; }
.ml50 { margin-left: var(--50) !important; }
.ml55 { margin-left: var(--55) !important; }
.ml60 { margin-left: var(--60) !important; }

/* ---------- MARGIN RIGHT ---------- */
.mr0 { margin-right: var(--0) !important; }
.mr4 { margin-right: var(--4) !important; }
.mr5 { margin-right: var(--5) !important; }
.mr6 { margin-right: var(--6) !important; }
.mr8 { margin-right: var(--8) !important; }
.mr10 { margin-right: var(--10) !important; }
.mr12 { margin-right: var(--12) !important; }
.mr14 { margin-right: var(--14) !important; }
.mr15 { margin-right: var(--15) !important; }
.mr16 { margin-right: var(--16) !important; }
.mr18 { margin-right: var(--18) !important; }
.mr20 { margin-right: var(--20) !important; }
.mr25 { margin-right: var(--25) !important; }
.mr30 { margin-right: var(--30) !important; }
.mr35 { margin-right: var(--35) !important; }
.mr40 { margin-right: var(--40) !important; }
.mr45 { margin-right: var(--45) !important; }
.mr50 { margin-right: var(--50) !important; }
.mr55 { margin-right: var(--55) !important; }
.mr60 { margin-right: var(--60) !important; }


/* ---------- POSITION ---------- */
.position-fixed { position: fixed !important;}
.position-relative { position: relative !important;}
.position-absolute { position: absolute !important;}
.overflow-auto { overflow: auto !important; }

/* ---------- LEFT ---------- */
.l0 { left: var(--0) !important; }
.l4 { left: var(--4) !important; }
.l5 { left: var(--5) !important; }
.l6 { left: var(--6) !important; }
.l8 { left: var(--8) !important; }
.l10 { left: var(--10) !important; }
.l12 { left: var(--12) !important; }
.l14 { left: var(--14) !important; }
.l15 { left: var(--15) !important; }
.l16 { left: var(--16) !important; }
.l18 { left: var(--18) !important; }
.l20 { left: var(--20) !important; }
.l25 { left: var(--25) !important; }
.l30 { left: var(--30) !important; }
.l35 { left: var(--35) !important; }
.l40 { left: var(--40) !important; }
.l45 { left: var(--45) !important; }
.l50 { left: var(--50) !important; }
.l55 { left: var(--55) !important; }
.l60 { left: var(--60) !important; }

/* ---------- RIGHT ---------- */
.r0 { right: var(--0) !important; }
.r4 { right: var(--4) !important; }
.r5 { right: var(--5) !important; }
.r6 { right: var(--6) !important; }
.r8 { right: var(--8) !important; }
.r10 { right: var(--10) !important; }
.r12 { right: var(--12) !important; }
.r14 { right: var(--14) !important; }
.r15 { right: var(--15) !important; }
.r16 { right: var(--16) !important; }
.r18 { right: var(--18) !important; }
.r20 { right: var(--20) !important; }
.r25 { right: var(--25) !important; }
.r30 { right: var(--30) !important; }
.r35 { right: var(--35) !important; }
.r40 { right: var(--40) !important; }
.r45 { right: var(--45) !important; }
.r50 { right: var(--50) !important; }
.r55 { right: var(--55) !important; }
.r60 { right: var(--60) !important; }

/* ---------- TOP ---------- */
.t0 { top: var(--0) !important; }
.t4 { top: var(--4) !important; }
.t5 { top: var(--5) !important; }
.t6 { top: var(--6) !important; }
.t8 { top: var(--8) !important; }
.t10 { top: var(--10) !important; }
.t12 { top: var(--12) !important; }
.t14 { top: var(--14) !important; }
.t15 { top: var(--15) !important; }
.t16 { top: var(--16) !important; }
.t18 { top: var(--18) !important; }
.t20 { top: var(--20) !important; }
.t25 { top: var(--25) !important; }
.t30 { top: var(--30) !important; }
.t35 { top: var(--35) !important; }
.t40 { top: var(--40) !important; }
.t45 { top: var(--45) !important; }
.t50 { top: var(--50) !important; }
.t55 { top: var(--55) !important; }
.t60 { top: var(--60) !important; }

/* ---------- BOTTOM ---------- */
.b0 { bottom: var(--0) !important; }
.b4 { bottom: var(--4) !important; }
.b5 { bottom: var(--5) !important; }
.b6 { bottom: var(--6) !important; }
.b8 { bottom: var(--8) !important; }
.b10 { bottom: var(--10) !important; }
.b12 { bottom: var(--12) !important; }
.b14 { bottom: var(--14) !important; }
.b15 { bottom: var(--15) !important; }
.b16 { bottom: var(--16) !important; }
.b18 { bottom: var(--18) !important; }
.b20 { bottom: var(--20) !important; }
.b25 { bottom: var(--25) !important; }
.b30 { bottom: var(--30) !important; }
.b35 { bottom: var(--35) !important; }
.b40 { bottom: var(--40) !important; }
.b45 { bottom: var(--45) !important; }
.b50 { bottom: var(--50) !important; }
.b55 { bottom: var(--55) !important; }
.b60 { bottom: var(--60) !important; }

/* ---------- BOX ---------- */

.box-sizing { box-sizing: border-box; }
.box-936 { margin: 0 auto; max-width: var(--w-max-width); } 
.box-max { margin: 0 auto; max-width: var(--box-max); } 
.box, .box-10, .box-15, .box-16, .box-20, .box-25, .box-30, .box-33, .box-35,
.box-40, .box-50, .box-60, .box-65, .box-70, .box-80, .box-90, .box-100, .box-936, .box-max { 
    border: 0px;
    box-sizing: border-box;
}
.box-10 {width: var(--w-10)!important;}
.box-15 {width: var(--w-15)!important;}
.box-16 {width: var(--w-16)!important;}
.box-20 {width: var(--w-20)!important;}
.box-25 {width: var(--w-25)!important;}
.box-30 {width: var(--w-30)!important;}
.box-33 {width: var(--w-33)!important;}
.box-35 {width: var(--w-35)!important;}
.box-40 {width: var(--w-40)!important;}
.box-50 {width: var(--w-50)!important;}
.box-60 {width: var(--w-60)!important;}
.box-65 {width: var(--w-65)!important;}
.box-70 {width: var(--w-70)!important;}
.box-80 {width: var(--w-80)!important;}
.box-90 {width: var(--w-90)!important;}
.box-100 {width: var(--w-100)!important;}
.display-top {display: inline-block !important; vertical-align: top !important;}
.display-middle {display: inline-block !important; vertical-align: middle !important;}
.display-bottom {display: inline-block !important; vertical-align: bottom !important;}
.display-inline {display: inline !important; vertical-align: top !important;}
.display-flex, .display-flex-block { 
  display: flex; 
  flex-wrap: wrap;

}
.display-flex-center { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center;
    justify-content: space-between;
}
.justify-content-center { justify-content: center; }
.align-center {align-content: center;}
.align-center-item {align-items: center;}
.display-none {display: none !important;}
.display-block {display: block !important;}
.gap5 { gap: 5px; }
.gap10 { gap: 10px; }
.gap15 { gap: 15px; }
.gap20 { gap: 20px; }
@media screen and (max-width: 768px){
    
    .display-flex > .box-10, 
    .display-flex > .box-15, 
    .display-flex > .box-16, 
    .display-flex > .box-20,
    .display-flex > .box-25,
    .display-flex > .box-30,
    .display-flex > .box-33,
    .display-flex > .box-35,
    .display-flex > .box-40,
    .display-flex > .box-50,
    .display-flex > .box-60,
    .display-flex > .box-65,
    .display-flex > .box-70,
    .display-flex > .box-80,
    .display-flex > .box-90,
    .display-flex { 
        display:block; 
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* ---------- IMAGES ---------- */

.w-crop { position: relative; overflow:hidden; width: 100%; }
.w-crop-ball { position: relative; overflow:hidden; width: 100%; border-radius: 50%; }
.w-crop img, .w-crop-ball img { 
    position: absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%); 
    -o-object-fit:cover; object-fit:cover; width: 100%;
}
video { width:100% !important; height: auto;}
.w-crop-sq, .w-crop-sq img, .w-crop-sq video, .w-crop-sq iframe  { aspect-ratio: 1/1; }
.w-crop-ball, .w-crop-ball img, .w-crop-ball video, .w-crop-ball iframe { aspect-ratio: 1/1; }
.w-crop-h-rect, .w-crop-h-rect img, .w-crop-h-rect video, .w-crop-h-rect iframe { aspect-ratio: 4/3; }
.w-crop-v-rect, .w-crop-v-rect img, .w-crop-v-rect video, .w-crop-v-rect iframe { aspect-ratio: 3/4; }
.w-crop-land, .w-crop-land img, .w-crop-land video, .w-crop-land iframe { aspect-ratio: 4/1; }
.w-crop-video, .w-crop-video img, .w-crop-video video, .w-crop-video iframe { aspect-ratio: 16/9; }
.w-cover { 
    border-radius: var(--radio-site);
    overflow: hidden;
}
.w-cover-swadow { 
    border-radius: 10px;
    box-shadow: 2px 2px 3px var(--w-gray-300); 
}

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

.w-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuisce lo spazio */
}
.w-card-n { 
    overflow: hidden;
    background-color: var(--w-color-1);
    color: var(--w-color-1-n);
    border-radius: var(--radio-15);
}
.w-card-line { 
  border-radius: var(--radio-15);
  overflow: hidden;
  outline: 1px solid var(--w-color-text);
  outline-offset: -1px;
}

/* Da utilizzare per mettere un bg */
.w-card-bg { 
  border-radius: var(--radio-15);
  overflow: hidden;
  background-color: var(--sup);
}

@media screen and (max-width: 768px){
    .w-card-bg { 
      padding: 0px !important;
      background-color: transparent;
    }
    .w-card-bg > div { 
      padding: 0px !important;
      padding-top: 20px !important;
    }
    .w-card-option { width: fit-content; }
    .w-card-bg .w-card-option { 
        margin-bottom: 5px; 
    }
}

.w-card-content {
  flex-grow: 1; /* Fa crescere il contenuto fino a riempire lo spazio */
}

.w-card-footer {
  display: flex;
  margin-top: auto; /* Spinge il pulsante in basso */
}

/* Tag e categorie degli articoli */
.w-card-tag {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}

.w-card-tag div { 
  display: inline-flex; 
  flex-wrap: wrap;
  align-items: center;
  text-align: center; 
}
.w-card-tag label {
  font-size: var(--font-x-small);
  font-weight: 600;
  padding-left: 4px;
  padding-right: 8px;
}
.w-card-option {
    width: fit-content;
    padding: 5px 16px;
    border-radius: var(--radio-20);
    font-weight: 600;
    font-size: var(--font-x-small);
}

.w-card-n h1,
.w-card-n h2,
.w-card-n h3,
.w-card-n h4 { 
    color: var(--w-color-1-n) !important 
}
.w-shadow-1 {  }
.w-shadow-2 {  }
.w-shadow-3 {  }


/* Opzioni delle carte per social */
.w-card-like,
.w-card-money {
    position: absolute;
    padding: 4px 12px;
    padding-left: 12px;
    border-radius: 15px;
    font-size: var(--font-x-small);
    font-weight: 600;
}
.w-card-like { 
    top: 20px;
    right: 20px;
    background: var(--sup);
}
.w-card-money { 
    top: 20px;
    left: 20px;
    background: var(--w-color-4);
}
.w-card-best {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 60px;
    height: 50px;
    border-top-left-radius: 45px;
}
.w-card-best i {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: var(--font-medium);
}

/* Carte orizzontali con freccia a destra */
.w-card-long {
    display: inline-flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    font-weight: 600;
    width: 100%;
    border-radius: var(--radio-10);
    padding: 10px;
    text-align: left;
    margin-bottom: 5px;
    box-sizing: border-box;
    align-items: center;
}
.w-card-long:hover {
    opacity: 0.8;
}
.w-card-long-icon { text-align: right; }

/* Carte con immagine di sfondo */

.w-card-image-container { 
    width: 100%;
    margin: 0 10px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 20/12;

}
.w-card-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.w-card-image-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
}
.w-card-image-content h2 { 
    color: black;
    background: var(--w-color-4);
    padding: 0px 3px;
    width: fit-content;
}
/* ---------- FORME ---------- */

.w-circle-s, .w-circle-m, .w-circle-l, .w-circle-x-s { border-radius: 50%;}
.w-circle-x-s { width:24px !important; height: 24px; font-size: var(--font-x-small);}
.w-circle-s { width:32px !important; height: 32px; font-size: var(--font-small);}
.w-circle-m { width:48px !important; height: 48px; font-size: var(--font-medium);}
.w-circle-l { width:60px !important; height: 60px; font-size: var(--font-large);}

.w-circle-s span, .w-circle-m span, .w-circle-l span, .w-circle-x-s span,
.w-circle-s label, .w-circle-m label, .w-circle-l label, .w-circle-x-s label { 
    display: none;
}


/* ---------- BUTTON ---------- */

button { 
    cursor:pointer; 
    border: none;
    background-color: transparent;
    padding: 0px; 
    position: relative;   
}
.w-btn,
.w-btn-sample,
.w-btn-long,
.w-btn-card,
.w-btn-option,
.w-btn-tag,
.w-btn-site {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    width: fit-content;
    border: 0px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 8px;
    transition: all ease-in 0.25s;
    font-size: var(--font-small);
}
.w-btn:hover,
.w-btn:active,
.w-btn:focus,
.w-btn-long:hover,
.w-btn-long:active,
.w-btn-long:focus,
.w-btn-card:hover,
.w-btn-card:active,
.w-btn-card:focus,
.w-btn-option:hover,
.w-btn-option:active,
.w-btn-option:focus,
.w-btn-tag:hover,
.w-btn-tag:active,
.w-btn-tag:focus,
.w-btn-function:hover,
.w-btn-function:active,
.w-btn-function:focus,
.w-btn-site:hover,
.w-btn-site:active,
.w-btn-site:focus  {
    background-color: var(--w-hover);
    color: var(--w-hover-text);
    transition: all 0.25s;
    }
/* Bottone di ritorno in webi access*/
.w-btn-sample:hover,
.w-btn-sample:active,
.w-btn-sample:focus {
    color: var(--w-color-1);
    transition: all 0.25s;
}
.w-btn-tag  { padding: 1px 12px; border-radius: 36px !important; font-weight: 600; font-size: var(--font-x-small); }
.w-btn-sample { padding: 12px 36px; font-weight: 600; }
.w-btn-card { padding: 6px 18px; border-radius: 36px !important; font-size: var(--font-small); }
.w-btn-long { padding: 12px 36px; border-radius: 5px; }

/* Informazioni opzionali nei moduli*/
.w-btn-option { padding: 4px 12px; border-radius: 5px; font-size: var(--font-option);  }

/* Bottone di ritorno in webi access*/
.w-btn-access { 
    background-color: var(--w-color-1);
    color: var(--sup);
    font-size: var(--font-small);
    font-weight: 600;
    padding: 6px 30px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.w-btn-access:hover { background-color: var(--w-hover); }
.w-btn-access i { margin-right: 10px; }
.w-btn-site { border-radius: 36px !important }
.w-btn-long i, .w-btn-sample i, .w-btn.w-btn-option i { margin-right: 12px }
.w-btn-card i { margin-right: 6px; font-size: var(--font-medium) !important; }
/* Bottone nelle form multiple*/
.w-btn-function { 
    padding: 6px 18px;
    border-radius: 15px !important;
    font-size: var(--font-x-small);
    display: block !important;
    width: 100%;
    font-weight: 600;
}
.w-btn-function i { margin-right: 12px }

/* Colori bottone*/
.w-btn-1 { background-color: var(--w-color-1); color: var(--w-color-1-n); }
.w-btn-2 { background-color: var(--w-color-2); color: var(--w-color-2-n); }
.w-btn-3 { background-color: var(--w-color-3); color: var(--w-color-3-n); }
.w-btn-4 { background-color: var(--w-color-4); color: var(--w-color-4-n); }
.w-btn-5 { background-color: var(--w-color-5); color: var(--w-color-5-n); }

.w-btn-red { background-color: var(--button-red); color: var(--sup); }
.w-btn-green { background-color: var(--button-green); color: var(--sup); }
.w-btn-blue { background-color: var(--button-blue); color: var(--sup); }
.w-btn-yellow { background-color: var(--button-yellow); color: var(--sup); }
.w-btn-orange { background-color: var(--button-orange); color: var(--sup); }
.w-btn-purple { background-color: var(--button-purple); color: var(--sup); }
.w-btn-cyano { background-color: var(--button-cyano); color: var(--sup); }
.w-btn-trasparent { background-color: transparent; color: var(--sup); }
.w-btn-hover { background-color: var(--w-hover); color: var(--sup); }
.w-btn-gray { background-color: var(--w-gray-300); color: var(--sup);  }

.w-ms-red { background-color: var(--w-ms-red); color: var(--w-ms-red-n); }
.w-ms-green { background-color: var(--w-ms-green); color: var(--w-ms-green-n); }
.w-ms-blue { background-color: var(--w-ms-blue); color: var(--w-ms-blue-n); }
.w-ms-yellow { background-color: var(--w-ms-yellow); color: var(--w-ms-yellow-n); }
.w-ms-orange { background-color: var(--w-ms-orange); color: var(--w-ms-orange-n); }

.ms-green { background-color: var(--w-ms-green); color: var(--w-ms-green-n);}
.ms-red { background-color: var(--w-ms-red); color: var(--w-ms-red-n); }
.ms-orange { background-color: var(--w-ms-orange); color: var(--w-ms-orange-n);}
.ms-blue { background-color: var(--w-ms-blue); color: var(--w-ms-blue-n); }
.ms-yellow { background-color: var(--w-ms-yellow); color: var(--w-ms-yellow-n);}
.w-color-4 { background-color: var(--w-color-4); color: var(--w-color-4-n); }
.w-color-1 { background-color: var(--w-color-1); color: var(--w-color-1-n); }
.color1 { color: var(--w-color-1) !important }
.color2 { color: var(--w-color-2) !important}
.color3 { color: var(--w-color-3) !important}
.color4 { color: var(--w-color-4) !important}
.color5 { color: var(--w-color-5) !important}


/* ---------- INPUT E SELECT ---------- */
.w-input, 
.w-select {
  margin-bottom: 8px;
}
input, 
select,
textarea,
.ts-control {
  border: 0px;
  padding: 12px 0px;
  padding-left: 6px ;
  border-radius: 5px;
  font-size: 1em;
  background-color: var(--w-color-input);
  outline: 1px solid var(--w-color-input);
  transition: all ease-in 0.25s;
  outline-offset: 0px;
}
input:hover, 
select:hover,
textarea:hover,
.ts-control:hover {
  outline: 1px solid var(--w-hover);
  transition: all ease-in 0.25s;
}
input:focus, 
select:focus,
textarea:focus,
.ts-control:focus {
  outline: 1px solid var(--w-color-1);
  background-color: var(--sup);
  transition: all ease-in 0.25s;
}
textarea { 
    height: 300px;
    resize: none;
}
input,
select,
textarea,
.w-input label, 
.w-select label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
input, .w-input label { width: calc(100% - 6px) !important; }
select, .w-select label { width: 100% !important; }

.w-input label,
.w-select label { 
  margin-bottom: 5px;
  font-size: var(--font-small);
  font-weight: 600;
}
.w-input-icon { 
    position: relative;
}
.w-input-icon input { 
    padding-left: 35px; 
    box-sizing: border-box;
}
.w-input-icon i { 
    position: absolute; 
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
}

/* -------- SELEZIONA FILE ------- */
.w-file-group {
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 8px;
    background-color: var(--w-color-input);
    transition: background-color 0.3s;
}
/* Nascondi l'input file originale */
.w-file-input {
    opacity: 0;
    width: 0.1px;
    height: 0.1px;
    position: absolute;
}
/* Stile per la label che fungerà da bottone */
.w-file-label {
    display: inline-block;
    padding: 12px 24px;
    background: #2196F3;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}
/* Effetto hover */
.w-file-label:hover {
    background: #1976D2;
}

/* Stile per il nome del file selezionato */
.file-name {
    margin-left: 10px;
    font-size: var(--font-small);
}



/* ---------- TABELLE ---------- */

table {
    width: 100%;
    margin: 0 auto;
    background: white;
    border-radius: 8px;
    // border: 1px solid var(--w-gray-300);
    border-collapse: collapse;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
table caption {
    background-color:  var(--w-color-1);
    color:  var(--w-color-1-n);
    padding-bottom: 0px ;
    text-align: left;
    font-weight: 600;
    border-top-left-radius: var(--radio-8);
    border-top-right-radius: var(--radio-8);
}
table thead { font-weight: 600; background-color: var(--w-color-input); }
table tr { 
  text-align: left;
  border-bottom: 1px solid #eee;
  transition: all ease-in 0.25s;
}
table tr:hover { 
  background-color: var(--w-color-input);
  transition: all ease-in 0.25s;
}
table td { }
table caption { padding: 6px 16px; }
table td, table thead th { 
    padding: 16px 16px; 
    font-size: var(--font-small);
    vertical-align: middle;
}
td.box-btn-action {
    width: fit-content;
    min-width: min-content;
    padding: 8px;
    white-space: nowrap;
    text-align: right;
}

@media screen and (max-width: 768px) {
  table thead { display: none;}
  table tbody { display: grid; grid-gap: 16px; }
  table tbody tr {
      display: block;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      border: 1px solid #eee;
      padding: 16px;
  }
  table tbody td {
      display: block;
      padding: 8px 0;
      border: none;
  }
  table tbody td:not(:last-child) {
      border-bottom: 1px solid #eee;
  }
  table tbody td::before {
      content: attr(data-label);
      font-weight: 600;
      display: inline-block;
      margin-right: 6px;
  }
} 

/* ---------- ACCORDION  ---------- */

.w-login { 
    max-width: 500px;
    margin: 0 auto; 
}
.w-login img {
    max-width: 300px;
}
/* ---------- ACCORDION  ---------- */

.w-accordion-header {     
    cursor: pointer;
    background-color: var(--w-color-5);
    border-radius: 5px;
    margin-bottom: 5px;
    width: 100%;
}

.w-accordion-header label {  }

.w-accordion-header:hover {
    background-color: var(--w-color-4);
}

.w-accordion-content {
    width: 100%;
    display: none;
    // border: 1px solid #ddd;
    // border-radius: 0 0 5px 5px;
    margin-bottom: 15px;
    border-top: none;
}

.w-accordion-form-1 { 
    padding-top: 20px;

}
/* ---------- RADIO E CHECK BUTTON ---------- */
/* Nascondi l'input originale ma mantienilo accessibile */
.custom-checkbox,
.custom-radio {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 0px !important;
}

/* Stile per il contenitore label */
.checkbox-label,
.radio-label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    line-height: 25px;
}

/* Crea il box personalizzato */
.checkbox-label:before,
.radio-label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    background: #fff;
}

/* Stile specifico per radio button */
.radio-label:before {
    border-radius: 50%;
}

/* Stile per lo stato checked del checkbox */
.custom-checkbox:checked + .checkbox-label:before {
    background: #2196F3;
    border-color: #2196F3;
}

/* Aggiungi il segno di spunta */
.custom-checkbox:checked + .checkbox-label:after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Stile per lo stato checked del radio */
.custom-radio:checked + .radio-label:after {
    content: '';
    position: absolute;
    left: 6px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--w-color-1);
}

/* Stile hover */
.checkbox-label:hover:before,
.radio-label:hover:before {
    border-color: var(--w-hover);
}

/* Stile focus per accessibilità */
.custom-checkbox:focus + .checkbox-label:before,
.custom-radio:focus + .radio-label:before {
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
}
/* Versione con animazione */
.checkbox-label:before {
    transition: all 0.2s ease-in-out;
}

.custom-checkbox:checked + .checkbox-label:before {
    transform: scale(1.1);
}

/* Stile disabled */
.custom-checkbox:disabled + .checkbox-label,
.custom-radio:disabled + .radio-label {
    opacity: 0.6;
    cursor: not-allowed;
}

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

.box-form input, 
.box-form select,
.box-form textarea,
.rockets_elemento_infinito > .box-form { 
    width: 100%;
    font-family: var(--font-family-1); 
}
.box-form {  }
.display-flex.box-form-1,
.display-flex.box-form-2,
.display-flex.box-form-3,
.display-flex.box-form-4 { 
    display: flex; 
    flex-wrap: wrap; 
    // justify-content: space-between;
    align-items: center; 
    gap: 20px; 
    box-sizing: border-box;
}

.w-accordion-form-1 { margin-bottom: 50px; border: 0px }
.w-accordion-form-2 { margin-bottom: 50px; border: 0px }
.w-accordion-form-3 { margin-bottom: 50px; border: 0px }

.display-flex.box-form-1 > .box-form,
.display-flex.box-form-2 > .box-form,
.display-flex.box-form-3 > .box-form,
.box-form-multiple > div > .box-form { 
    flex: 0 1 calc(var(--w-50) - 20px );
}
.box-form-multiple { 
    width: var(--w-100);
}

.box-form-multiple > div {
    display: flex; 
    flex-wrap: wrap;
    justify-content: space-between;
}

.box-form-3 > .box-form-multiple > div { 
    border-left: 70px solid var(--w-color-4);
    padding-left: 30px;
    margin-bottom: 50px;
    border-bottom: 70px solid var(--w-color-4);
}

.box-form-multiple > .allegati_elemento_infinito,
.box-form-multiple > .immagini_elemento_infinito { 
    flex-wrap: nowrap; 
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--w-gray-200);
}

.box-form > .w-check {
    display: flex; 
    flex-wrap: wrap;
    justify-content: space-between;
}
.box-form > .w-check > .radio-label {
    margin-bottom: 20px;
}
.box-form-4 > .box-form > .w-check {
    font-size: var(--font-x-small);
    text-align: left;
    font-style: italic;
}


@media screen and (max-width: 768px) {
    .box-form-multiple > div,
    .box-form > .w-check {
        display: block;
    }
    .display-flex.box-form-1 { 
        display:block; 
    }
    .box-form { margin-bottom: 20px; }
}
/* ---------- PRODUCT  ---------- */
.w-product label {  }
.w-product-description {  }
.w-product-description p { font-size: var(--font-small); }
.w-product-price  { 
    font-size: var(--font-x-small);
    font-weight: 600; 
    background-color:var(--w-color-4); 
    padding: 6px 18px;
    max-width: max-content;
    border-radius: 35px;
}
/* ---------- RESERVATION  ---------- */

.box-reservation { 
    max-width: 900px; 
    margin: 0 auto;
 }
.box-reservation-profile {}
.box-reservation-card {
    background-color: var(--sup);
    border-radius: 15px;
}
.box-reservation-card-header { 
    border-top-left-radius:15px ;
    border-top-right-radius:15px ;
    box-sizing: border-box;
    overflow: hidden;
}
.box-reservation-card-travel { 
    max-width: 500px; 
    margin: 0 auto;  
}
.box-reservation-card-pax { justify-content: center; }
.box-reservation-card-pax > div { 
    padding: 6px 18px;
    background-color: var(--w-color-4);
    font-size: var(--font-small);
    border-radius: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.box-reservation-card-cost {
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-reservation-card-cost > div {
    display: inline-flex;
    align-items: center;
    max-width: 600px;
}
.box-reservation-card-cost .cost {
    background-color: var(--w-color-4);
    border-radius: 15px;
    padding: 5px;
}
.box-reservation-card-cost .symbol { 
    max-width: fit-content;
}
.box-reservation-card-footer a {
    border-bottom: 1px solid var(--w-color-text);
    margin: 0px 10px;
}



.noto-sans-<uniquifier> {
  font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}