@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/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
:root {
	--w-header: 200px !important;
    --w-header-small: 60px !important;
    --w-header-up: 40px !important;
    --w-header-down: 120px !important;
    --w-header-down-small: 0px !important;
    --w-header-padding: 50px !important;
    --w-width-menu-left: 52px;
    --w-menu-orizontale-h: 50px;
    --w-menu-orizontale-padding: 5px;

    --font-body: 18px !important;
    --line-height-body: 20px !important;
    --font-family-2: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans;
    --font-family-1: "Josefin Sans", sans-serif;

    --w-color-text: #585858; 
    --w-color-text-bold: #585858;
    --w-color-text-apici: #638C6D;
    --w-color-text-pedici: #638C6D;
    --w-color-1:#500073;
    --w-color-1-n:#ffffff;
    --w-color-2:#C62300;
    --w-color-2-n:#ffffff;
    --w-color-3:#F14A00;
    --w-color-3-n:#ffffff;
    --w-color-4:#F14A00;
    --w-color-4-n:#ffffff;
    --w-color-5:#f9f9f9;
    --w-color-5-n:#585858;
    --w-color-input:#f9f9f9;
    --w-hover: #E7FBB4;
    --w-hover-text: #55555e;
    --w-black-gradient: linear-gradient(0deg, rgba(0,0,0,0) 49%, rgba(0,0,0,0.725910432532388) 100%);
    --w-shadow: #00000023;
}

.caption { 
    width: 100%;
    background: var(--w-color-2);
    padding: 8px 12px;
    padding-top: 8px;
    padding-right: 12px;
    padding-bottom: 8px;
    padding-left: 12px;
    box-sizing: border-box;
    position: relative;
    color: var(--sup);
    top: -30px;
}

blockquote { font-style: italic; padding-left:20px; border-left: 12px solid var(--w-color-3); font-weight: 600 }

img { border-radius: var(--radio-site); overflow: hidden; }

.img-float-left { float: left; margin: 0px 25px 15px 0px;width: 70% !important; margin: 0 auto;
        float: none !important; height: auto !important;display: block;}
.img-float-right { float: right; margin: 15px 0px 15px 15px;width: 70% !important; margin: 0 auto;
        float: none !important; height: auto !important; display: block;}

@media screen and (max-width: 748px){ 
    .img-float-right,
    .img-float-left { 
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }
}

.lezioni .effect-scroll {
    transform: scale(0.9);
}
.lezioni .effect-scroll.small {
    transform: scale(1);}

#cssmenu { margin-top: 10px; }
#header { background: white; }

.pensiero { 
    display: block;
    padding: 30px;  
    background-color: #f14a0017;
    border-radius: var(--radio-site);
    margin: 40px 0px;
    position: relative;
}
.attivita { 
    display: block;
    padding: 30px;  
    background-color: var(--w-color-5);
    border-radius: var(--radio-site);
    margin: 40px 0px;
    position: relative;
}

.scoprilo { 
    display: block;
    padding: 30px;  
    background-color: #50007329;
    border-radius: var(--radio-site);
    margin: 40px 0px;
    position: relative;
}

.nontutti { 
    display: block;
    padding: 30px;  
    background-color: #f19e0030;
    border-radius: var(--radio-site);
    margin: 40px 0px;
    position: relative;
}

.icon::after {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 15px;
    font-size: 22px;
    width: 26px;
    text-align: center;
    border-top-right-radius: var(--radio-site);
    border-bottom-left-radius: 20px;
}

.pensiero.icon::after {
    content: "\f0eb"; /* Codice Unicode dell'icona (esempio: lampadina da Font Awesome) */
    font-family: "Font Awesome 6 Free"; /* Sostituisci con la tua libreria di icone */
    font-weight: 900; /* Necessario per Font Awesome */
    background-color: var(--w-color-4);
    color: white; /* Colore dell'icona */
}

.attivita.icon::after {
    content: "\f005"; /* Codice Unicode dell'icona (esempio: lampadina da Font Awesome) */
    font-family: "Font Awesome 6 Free"; /* Sostituisci con la tua libreria di icone */
    font-weight: 900; /* Necessario per Font Awesome */
    background-color: var(--w-color-4);
    color: white; /* Colore dell'icona */
}
.scoprilo.icon::after {
    content: "\f002"; /* Codice Unicode dell'icona (esempio: lampadina da Font Awesome) */
    font-family: "Font Awesome 6 Free"; /* Sostituisci con la tua libreria di icone */
    font-weight: 900; /* Necessario per Font Awesome */
    background-color: var(--w-color-4);
    color: white; /* Colore dell'icona */
}
.nontutti.icon::after {
    content: "\3f"; /* Codice Unicode dell'icona (esempio: lampadina da Font Awesome) */
    font-family: "Font Awesome 6 Free"; /* Sostituisci con la tua libreria di icone */
    font-weight: 900; /* Necessario per Font Awesome */
    background-color: var(--w-color-4);
    color: white; /* Colore dell'icona */
}


.lezioni h1 { 
    background: none;
    width: 100%;
    padding: 5px 0px;
    color: var(--w-color-1);
    font-weight: 600;
    font-size: var(--font-x-large);
 }

body { 
    background: var(--w-color-1);
    font-weight: 350;

}
.w-card-bg, .box-deja { 
    padding: 40px;
    box-shadow: 0px 6px 6px var(--w-shadow);
}

@media screen and (max-width: 768px) {
  .w-card-bg {
    padding:20px !important;
    background-color: #fff;

  }
}

.box-deja { 
    background-color: var(--sup);
    border-radius: var(--radio-site);
}

.box-deja > .ar4 { 
    background-color: var(--w-color-1);
    color: var(--w-color-1-n); 
    border-radius: var(--radio-site);  
    padding: 40px; 
    box-sizing: border-box;  
} 

.box-deja > .ar4 > h2, .box-deja > .ar4 > h3 { color: var(--w-color-1-n) !important; }

.box-deja > .ar4 .w-btn-long { width:100% !important; box-sizing: border-box; margin-bottom: 0px; }


h1 {
    font-size: var(--font-large);
  font-weight: 600;
  color: var(--sup);
  line-height: 1.2em;
  background: var(--w-color-1);
  width: max-content;
  padding: 5px 25px;
}


.menu-orizzontale.menu-scroll.small {
  background-color: var(--sup);
  color: var(--w-color-text);
  top: var(--w-header-down-small);
  height: var(--w-menu-orizontale-h);
  opacity: 1;
}

#main {


}
.s3 > .header-up {}
.s3 > .header-up.small {}
.s3 > .header-down {}
.s3 > .header-down.small {}
.s3 > .footer-up {}
.s3 > .footer-down {}

.s4 > .header-up {}
.s4 > .header-up.small {}
.s4 > .header-down {}
.s4 > .header-down.small {}
.s4 > .footer-up {}
.s4 > .footer-down {}




/* ---------- 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: 999;
}
.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: 99;
}
.header-down.small {
    position: fixed;
    top: -120px;
    padding-top: 0px;
    box-shadow: none;
    height: var(--w-header-down) !important;
}
.header-down img { 
    width: 400px;
}
.header-down.small img { 
    width: 400px; 
    top: -100px;
}

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

.menu-orizzontale { 
    box-shadow: 0px 3px 3px var(--w-shadow); }

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

footer { 
    background-color: var(--w-color-4); 
    color: var(--w-color-4-n);
    max-width: 1200px !important;
    margin: 40px auto;
    border-radius: var(--radio-site);
    box-shadow: 0px 6px 6px var(--w-shadow);
    text-align: left !important;
}
footer img {
    max-width: 250px;
    padding-left: 10px;
}

footer .box-33 { display:none; }

.menu-orizzontale {
  background: var(--sup);
}
.menu-profile {
  top: calc( var(--w-header-up) + 10px );


}
.menu-profile-header { 
    height: 100%;
    padding: 10px;
 }

iframe { 
    height: auto !important;
    aspect-ratio: 16/9;
    border-radius: 15px;
    width: 100% !important;
}