/* HOME PAGE */
#headerbox{position: fixed; width: 100%; z-index: 999; }
#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: var(--color-home-text); padding: 0; margin: 0 0 20px; font-size: 1.6em; font-weight: 600; text-align: center; }

/* SLIDER: aw-slider (moduli/[home]/slider.php + jq-home.php), al posto di
   nivoSlider. Le regole riproducono la resa di prima: immagine a tutta
   larghezza in proporzione 1920x1000, didascalia centrata al 20% dal fondo su
   fascia scura. */
#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 (1000/1920 = 52.08%): senza, la viewport collassa a zero
   perche' le slide sono tutte in position:absolute. */
.aw-viewport::before{content:"";display:block;padding-top:52.08%;}
.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:0;right:0;bottom:20%;text-align:center;font-family:'Abel', sans-serif;}
/* #home davanti per battere "#home p" (blu, 1.6em, margine sotto). 1.92em e'
   il 1.6em del vecchio <p> per l'1.2em del <a> che nivo ci metteva dentro; il
   margine sotto rifa' quello che "#home p" dava al <p> dentro .nivo-caption. */
#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.25em;margin:0 0 24px;padding:5px 2%;}
/* frecce prev/next */
.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. Sta SOTTO l'immagine, nella fascia di
   30px che nivoSlider riservava ai suoi controlli: cosi' i box della home
   restano esattamente dov'erano. */
.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:#bbb;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 #bbb;border-radius:50%;background:transparent;cursor:pointer;}
.aw-dot[aria-current="true"]{background:#bbb;}
.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-accent);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 */
/* Entrata di #box01 da sinistra: prima la faceva jQuery UI (show("slide", 1000)
   nel vecchio jq-home.php), ora basta il CSS. */
@keyframes box01-slide{from{transform:translateX(-100%);opacity:0;}to{transform:none;opacity:1;}}
#box01{animation:box01-slide 1s ease-out both;}
@media (prefers-reduced-motion: reduce){#box01{animation:none;}}
#box01,#box02,#box04,#box03{background: transparent; text-align:left;border:0;position: relative; width: 100%; min-height: 300px; margin: 0; padding: 30px 0 0; text-align: center; display: inline-block; clear: both;}

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

#boxes h2 a{background-color:var(--color-overlay-dark);position:relative;color:#333;font-family:'Abel', sans-serif; font-size: 1.3em; text-transform: uppercase; text-decoration: none; padding: 10px 0; color: #fff; left: 0; top: 0; width: 24%; margin: 0 38%; text-align: center; z-index: 50;display: inline-block;}
#boxes h2 a:hover{color: #ddd; }
#boxes p{background: transparent !important; font-family: 'Abel', sans-serif; width: 100% !important; text-align: center; }
#boxes p{width:95% !important;padding:10px;margin:0;color:#333;font-size:1.5em !important;text-align:center;font-weight:400 !important;}
#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: #000; }

#box01 p.box1           {  }
#box01 p.box1 a         { background-color: transparent; position: relative; color: #777; font-size: 1.6em; font-weight: 400; letter-spacing: 2px; margin:0; padding: 10px; z-index: 100; }
#box01 p.box1 a:hover 	{ color: #555; }

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

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

#boxes h3.box2{font-family:'Abel',sans-serif;width:70% !important;padding:1% 15%;margin:0;color:#333;font-size:1.6em;text-align:left;text-transform:uppercase;}
#boxes h3 a{background:transparent;}
#boxes a.box3{width:31%;margin: 0 1.1% 30px;float:left;}
#boxes h3.box3{position:absolute;text-align:center;top:0;background-color:var(--color-overlay-mid);font-family:'Abel',sans-serif;letter-spacing:1px;padding:0 1%;width:20%;margin:23% 5% 30px;color:#fff;font-size:1.6em;text-transform:uppercase;}
#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.inbox3{position:absolute;text-align:center;top:170px;background-color: rgba(0, 102, 0, 0.8) !important;z-index: 999;font-family:'Benchnine',sans-serif;letter-spacing:1px;padding:0;width:24% !important;margin: 0 3% 30px; color:#fff;font-size:1.6em;text-transform:uppercase;}

/* Codice per SMARTPHONE max 320 px  */
@media only screen and (max-width: 320px) {
#headerbox{position: relative; }
#boxes h2 a{padding: 10px 10px;width: 70%; margin: 0 15%;}
#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;}
/* su schermo stretto la fascia scura e' tutto il contenitore, a filo del fondo */
#home .aw-caption{bottom:0;padding:5px 10px;background-color:var(--color-overlay-dark);}
#home .aw-caption p{display:block;background:transparent;margin:0;font-size:1.344em;line-height:1.5em;padding:0;}
/*#boxes a.box3{width:94%;margin: 0 2% 30px;float:left;}*/
div.box3.special{width:98%;float:left;margin: 0 1% 30px; }
#box03 form{position:relative;top:-290px;width:90%;margin: 0 5%;}
#boxes a.box3{width:98%;float:left;margin: 0 1% 30px; }
#boxes h3.box3{position:relative;bottom:0;margin: 60% 0 5px;padding:0 3%;width:94%;}
#boxes h3.box3.special{top:-370px;}
}
/* Codice per SMARTPHONE 321 – 480 px */
@media only screen and (min-width: 321px) and (max-width: 480px) {
#headerbox{position: relative; }
#boxes h2 a{padding: 10px 10px;width: 70%; margin: 0 15%;}
#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;}
/* su schermo stretto la fascia scura e' tutto il contenitore, a filo del fondo */
#home .aw-caption{bottom:0;padding:5px 10px;background-color:var(--color-overlay-dark);}
#home .aw-caption p{display:block;background:transparent;margin:0;font-size:1.536em;line-height:1.8em;padding:0 6px;}
/*#boxes a.box3{width:94%;margin: 0 2% 30px;float:none}
#boxes h3.box3{padding:0 3%;width:19%;margin:310px 3% 30px;font-size:1.6em;}*/
div.box3.special{width:98%;float:left;margin: 0 1% 30px; }
#box03 form{position:relative;top:-290px;width:90%;margin: 0 5%;}
#boxes a.box3{width:98%;float:left;margin: 0 1% 30px; }
#boxes h3.box3{position:relative;bottom:0;margin: 60% 0 5px;padding:0 3%;width:94%;}
#boxes h3.box3.special{top:-370px;}
}
/* Codice per TABLET 481 – 768 px */
@media only screen and (min-width: 481px) and (max-width: 768px) {
#headerbox{position:relative; }
#boxes h2 a{padding: 10px 10px;width: 70%; margin: 0 15%;}
#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;}
/* su schermo stretto la fascia scura e' tutto il contenitore, a filo del fondo */
#home .aw-caption{bottom:0;padding:5px 10px;background-color:var(--color-overlay-dark);}
#home .aw-caption p{display:block;background:transparent;margin:0;font-size:2.048em;line-height:1.8em;padding:0 6px;}
/*#boxes a.box3{width:94%;margin: 0 2% 30px;float:left;}*/
div.box3.special{width:98%;float:left;margin: 0 1% 30px; }
#box03 form{position:relative;top:-290px;width:90%;margin: 0 5%;}
#boxes a.box3{width:98%;float:left;margin: 0 1% 30px; }
#boxes h3.box3{position:relative;bottom:0;margin: 60% 0 5px;width:98%;}
#boxes h3.box3.special{top:-370px;}
}
/* 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%; }*/
div.box3.special{width:98%;float:left;margin: 0 1% 30px; }
#boxes a.box3{width:98%;float:left;margin: 0 1% 30px; }
#boxes h3.box3{position:relative;bottom:0;margin: 60% 0 5px;width:98%;}
#boxes h3.box3.special{top:-370px;}
}
/* Codice per DESKTOP min. 1025 px  */
@media only screen and (min-width: 1025px) and (max-width: 1240px)  {
#boxes h3.box3{bottom:0;margin: 25% 0 0;width:29%;}
}

@media only screen and (min-width: 1241px) {

}