/* HOME PAGE */
/*#headerbox              { position: absolute; width: 100%; z-index: 999; background: transparent; }*/
#global                 { background: transparent; }
#container02            { background: transparent; border-radius: 0; }

#home                   { background: transparent; margin: 0; padding: 0; position: static; width: 100%; border-right: 0px none #D6CC0A; }

#home a 		{ color: #fff; font-weight: 700; text-decoration: none; }
#home a:hover 		{ color: #fff; font-weight: 700; text-decoration: none; }
#home p 		{ color: #425AB2; padding: 0; margin: 0 0 20px; font-size: 1.6em; font-weight: 600; text-align: center; }

/* SLIDER: aw-slider del FW (moduli/[home]/slider.php + jq-home.php), al posto
   di nivoSlider. Le regole riproducono la resa di prima: foto a tutta larghezza
   in 16:10 (le slide sono 1920x1200 e 1200x750), didascalia in Abel su fascia
   scura, al 40% dal fondo sugli schermi larghi e in fondo su quelli stretti. */
#wrapper 		{ width: 100%; margin: 0 auto; }

.aw-slider{position:relative;z-index:1;margin:0 auto;}
.aw-viewport{position:relative;width:100%;overflow:hidden;}
/* Altezza esplicita (750/1200 = 62.5%): senza, la viewport collassa a zero
   perche' le slide sono tutte in position:absolute. */
.aw-viewport::before{content:"";display:block;padding-top:62.5%;}
.aw-track{list-style:none;margin:0;padding:0;}
.aw-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;}
.aw-slide.is-active{opacity:1;}
.aw-link{display:block;width:100%;height:100%;text-decoration:none;color:#fff;}
div.aw-link{cursor:default;}
.aw-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.aw-caption{position:absolute;left:10%;right:10%;bottom:40%;text-align:center;font-family:'Abel', sans-serif;}
/* #home davanti per battere "#home p" (blu, 1.6em, margine sotto) */
#home .aw-caption p{display:inline-block;background-color:var(--color-overlay-dark);color:#fff;font-size:1.92em;font-weight:400;line-height:1.5em;margin:0;padding:5px 2%;}
/* frecce prev/next: nivo non le mostrava, ma senza la tastiera e chi non usa i
   puntini non avrebbe modo di scorrere */
.aw-prev,.aw-next{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
                  background:var(--color-overlay-dark);color:#fff;font-size:1.2em;line-height:1;}
.aw-prev{left:12px;}
.aw-next{right:12px;}
.aw-prev:hover,.aw-next:hover{background:var(--color-accent);}
/* riga controlli: play/pausa + puntini, sotto l'immagine come i puntini di nivo */
.aw-controls{position:static;height:30px;display:flex;justify-content:center;align-items:center;gap:10px;}
.aw-toggle{width:22px;height:22px;border:0;border-radius:50%;cursor:pointer;background:#999;color:#fff;font-size:.6em;line-height:1;padding:0;}
.aw-toggle:hover{background:var(--color-accent);}
.aw-dots{display:flex;gap:8px;}
.aw-dot{width:12px;height:12px;padding:0;border:2px solid #999;border-radius:50%;background:transparent;cursor:pointer;}
.aw-dot[aria-current="true"]{background:#999;}
.aw-dot:hover{border-color:var(--color-accent);}
/* messa a fuoco sempre visibile (accessibilita' da tastiera) */
.aw-prev:focus-visible,.aw-next:focus-visible,.aw-toggle:focus-visible,
.aw-dot:focus-visible,.aw-link:focus-visible{outline:3px solid var(--color-focus-outline);outline-offset:2px;}
/* testo solo per screen reader */
.aw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* rispetta "riduci animazioni": niente dissolvenza (l'autoplay lo ferma il JS) */
@media (prefers-reduced-motion: reduce){.aw-slide{transition:none;}}


/* BOXES */
#boxes			{ width: 100%; margin: 20px 0 10px 0; padding: 0 }

/* SEZIONI */
#box01,
#box02,
#box04,
#box03                  { background: transparent; text-align: left; border: 0;position: relative; width: 100%; min-height: 550px; margin: 0; padding: 30px 0 0 0; text-align: center; display: inline-block; clear: both;}

#box01                  { height: 750px;}

#boxes img.box1         { position: absolute; top: 0; left: 0; width: 90%; margin: 0 5%;}
#boxes img.box2         { position: relative; float: left; width: 47%; margin: 0 4% 0 1% }
#boxes img.box3         { position: relative; float: left; width: 31%; margin: 0 1% 30px; }
#boxes img.box4         { position: relative; float: right; width: 47%; margin: 0 1% 0 4% }

#boxes h2 a             { background-color: rgba(243, 243, 243, 0.8); color: #333; font-family: 'Abel', sans-serif; font-size: 1.3em; text-transform: uppercase; text-decoration: none; padding: 10px 10px}
#boxes h2 a:hover 	{ color: #555; }
#boxes p                { background: transparent !important; font-family: 'Abel', sans-serif; width: 100% !important; text-align: center; }
#boxes p a              { background-color: rgba(243, 243, 243, 0.8); color: #333; font-size: 0.9em; line-height: 1.5em; width: auto !important; }
#boxes p a:hover 	{ color: #555; }

#box01 h2 a             { background-color: rgba(43, 43, 43, 0.8); position: absolute; color: #fff; left: 0; top: 80px; width: 20%; margin: 0 40%; text-align: center; z-index: 50; }
#box01 h2 a:hover 	{ color: #ddd; }

#box01 p.box1           {  }
#box01 p.box1 a         { background-color: rgba(43, 43, 43, 0.8); position: absolute; color: #fff; font-size: 24px; font-weight: 400; letter-spacing: 2px; left: 0; top: 150px; margin: 30% 10%; padding: 10px; z-index: 100; }
#box01 p.box1 a:hover 	{ color: #eee; }

#boxes p.box2           { width: 70% !important; padding: 4% 15%; margin: 0; text-align: left; }
#boxes p.box2 a         { background: transparent;  }

#boxes p.box3           { width: 98% !important; padding: 1%; margin: 0; text-align: center; }
#boxes p.box3 a         { background: transparent; font-size: 0.8em; }

#boxes p.box4           { width: 70% !important; padding: 4% 15%; margin: 0; text-align: right; }
#boxes p.box4 a         { background: transparent;  }

/* Codice per SMARTPHONE max 320 px  */
@media only screen and (max-width: 320px) {
#headerbox{position: relative; }
#boxes img.box2,#boxes img.box4{width:90%;margin:4% 5%;}
#boxes p.box2,#boxes p.box4{width:80% !important; padding:0 10%;text-align:center;}
.aw-caption{left:0;right:0;bottom:0;background-color:var(--color-overlay-dark);font-size:0.6em;}
#home .aw-caption p{background:transparent;font-size:1.6em;padding:6px;}
.aw-prev,.aw-next{display:none;}
}
/* Codice per SMARTPHONE 321 – 480 px */
@media only screen and (min-width: 321px) and (max-width: 480px) {
#headerbox{position: relative; }
#boxes img.box2,#boxes img.box4{width:90%;margin:4% 5%;}
#boxes p.box2,#boxes p.box4{width:80% !important; padding:0 10%;text-align:center;}
.aw-caption{left:0;right:0;bottom:0;background-color:var(--color-overlay-dark);font-size:0.6em;}
#home .aw-caption p{background:transparent;font-size:1.6em;padding:6px;}
.aw-prev,.aw-next{display:none;}
}
/* Codice per TABLET 481 – 768 px */
@media only screen and (min-width: 481px) and (max-width: 768px) {
#headerbox{position:relative; }
#boxes img.box2,#boxes img.box4{width:90%;margin:4% 5%;}
#boxes p.box2,#boxes p.box4{width:80% !important; padding:0 10%;text-align:center;}
.aw-caption{left:0;right:0;bottom:0;background-color:var(--color-overlay-dark);font-size:0.8em;}
#home .aw-caption p{background:transparent;font-size:1.6em;padding:6px;}
.aw-prev,.aw-next{display:none;}
}
/* Codice per TABLET 769 – 1024 px */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
#boxes p.box2{width: 45% !important; padding: 2% 1% 4% 52%; }
#boxes p.box4{width: 45% !important; padding: 2% 52% 4% 1%; }
}
/* Codice per DESKTOP min. 1025 px  */
@media only screen and (min-width: 1025px) and (max-width: 1240px)  {
.aw-caption{bottom:20%;}
}

@media only screen and (min-width: 1241px) {
.aw-caption{bottom:40%;}
}