/* ================================
   PALETTE & SETTINGS (personalizzabile)
================================ */
:root {
  --accent: #8b5cf6;        /* Viola neon – cambialo! */
  --text-primary: #f5f5f5;
  --text-secondary: #cfcfcf;
  --bg: #0d0d0d;
}

/* ================================
   DARK MODE BASE
================================ */
/*
body {
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: "Inter", "Poppins", sans-serif;
  margin: 40px;
}
*/

/* ================================
   ANIMAZIONI MODERNE
================================ */

/* Fade + Slide verticale */
@keyframes fadeSlide {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glow al passaggio del mouse */
@keyframes subtleGlow {
  0% { text-shadow: 0 0 0 var(--accent); }
  100% { text-shadow: 0 0 12px var(--accent); }
}

/* ================================
   TITOLI CONTENUTI HOME PAGE
================================ */

h1, h2, h3 {
  animation: fadeSlide 0.8s ease forwards;
  opacity: 0; /* animazione in entrata */
  letter-spacing: -0.5px;
  margin: 10px 0 15px 0;
}

/* Ritardi progressivi eleganti */
h1 { animation-delay: 0s; }
h2 { animation-delay: 0.1s; }
h3 { animation-delay: 0.2s; }

/* H1 – grande e pulito */
h1 {
  font-size: 28px;
  font-weight: 600;
}

/* H2 – barra neon animata */
h2 {
  font-size: 22px;
  font-weight: 600;
  position: relative;
  padding-left: 22px;
}

h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  transform: translateY(-12%);
  width: 5px;
  height: 70%;
  background: var(--accent);
  border-radius: 3px;
  box-shadow: 0 0 10px var(--accent);
  animation: fadeSlide 1s ease forwards;
  opacity: 0;
  animation-delay: 0.2s;
}

/* Glow al passaggio */
/*
h2:hover, h1:hover {
  animation: subtleGlow 0.4s ease-in-out forwards;
}
*/

/* H3 – elegante e minimal */
h3 {
  font-size: 18px;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 10px;
}



h5.inte {margin:0 0 10px 0;padding:0px;font-size:15px;color:white;line-height:140%;}
h5.inte a {color:#7499ff ;}
h5.inte a:hover {color:#FFDF3F;}
h5 span, .articolo span{color:#FFDF3F;font-weight:bold;}		
h5 small, h4 small, h3 small {color:#efefef;}
h4 span{color:#FFDF3F;}			
hr{border-color:#777777;}


p {text-align:justify; padding-top:10px;}
p.audio{text-align:center;margin:0;padding:0;}
p.audio audio{
    margin: 10px 0 10px 0;
    padding:0;
    height:25px;
    max-width:260px;
}

div.crop{text-align:center;position:relative;overflow:hidden;}
div.crop img{position: absolute; top:0px;left:0px;width:100%;}

div.tit-audio{padding:5px 0px 10px 0px;border:none;text-align:center;font-size:15px;color:#efefef;}
/*div.cont-btnZoom{width:260px;height:40px;margin:20px auto;}*/

p.mini{font-size:10px;margin:0;padding:0;line-height:120%;text-align:left;}
p.stit{text-align:justify;color:white;font-weight:normal;font-size:13px;line-height:135%;color:#dfdfdf;}

div.XY {

    /* centra orizzontalmente il div con classe XY e lo posiziona verticalmente in base al valore in percentuale di top */			
    /* modificare SOLO il valore in percentuale di top per l'allineamento verticale in rapporto all'immagine prescelta */

    /*top: 51.5%;*/

    /*------------------------------------------------------------------------------------*/

    width:172px;height:70px;
    position: relative;
    margin: 0 auto;
    /*left: 50%;			
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);*/
}

div.XY span {margin:0;font-size:15px;display:block;color:white;font-weight:bold;padding:4px;}

div.prosEve {color:#FFDF3F;font-size:12px;font-weight:bold;float:left;padding-top:5px;padding-left:2px;padding-right:2px;}

div.terIsc{margin:0;padding:12px 4px 7px 4px;}

span.spTimer{font-size:11px; color:#ddd;}

#aib img{max-width:140px;}

a.mtop {margin-top:6px;}

/* SEZIONE bs_preno_lista_eventi_home_v4-min.js */

.lista {font-size:14px;color:#efefef;}
.lista :hover {color:#FFA500;}
.omino {display:inline;font-size:11px;color:#777777}

a.reg, a.traccia{display:block;padding:5px;font-size:14px;font-weight:normal;color:#efefef;width:170px;margin:6px auto 0px auto;border:2px solid #777777;border-radius:14px;background:transparent;}
a.traccia{margin-top:12px;}
a.reg:hover, a.traccia:hover, span.btnIsc:hover{color:#FFA500;}

span.btnIsc {padding:5px 12px;font-size:14px;font-weight:normal;border:solid 2px #777777;border-radius:14px;}
span.numIsc {font-size:16px;font-weight:normal;color:#FFA500;}		

img.evebuss{width:19px;height:auto;margin:0;padding:0;float:right;margin-right:6px;}

span.annullato{background-color:transparent;color:#ffffff;font-weight:normal;font-size:16px;text-align:center;padding:2px 3px;line-height:150%;border-bottom: 1px dashed #FFA500;cursor:not-allowed;}

img.prenoListaEvInfo{width:63px;height:auto;opacity:0.85;}
img.prenoListaEvInfo:hover{opacity:1;}

hr.riga-btniscriz{margin:6px auto;width:96%;opacity:35%;border:solid 1px #ffffff;}

u{display:inline-block; margin-top:5px;}

button.btn-iscriz-dis, button.btn-iscriz-abi{
    font-size:14px;
    color:#ffffff;
    font-weight:bold;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
    width:200px;
    margin:8px auto;
    border:none;
    border-radius:16px;
    line-height:130%;
    min-height:86px;
    display:block;
    background-image: linear-gradient(to bottom, #62CDEA 0%, #0270B9 100%);
    padding:10px;
    opacity:0.85;
    cursor:not-allowed;
}

button.btn-iscriz-abi{opacity:1;cursor:pointer;}

.scrolling-text {
    width: 95%;
    margin:0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box; /* The box-sizing property allows us to include the padding and border in an element's total width and height */
}

.scrolling-text p {
    display: inline-block;
    animation: scrollText 20s linear -4s infinite normal none running;
    /* animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state]; */

}

@keyframes scrollText {
    0% {transform: translateX(100%);}
    100% {transform: translateX(-100%);}
}

/* FINE SEZIONE bs_preno_lista_eventi_home_v4-min.js */		

div.vcenter {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}

/*
#traccia{background-color:transparent;}
#traccia:hover{background-color:rgba(255, 255, 255, 0.13);}
*/

img.bussola{width:24px;height:auto;margin:0;float:right;margin-right:6px;}
img.buss_N{max-width:37px;height:auto;display:inline;margin-right:10px;}	


/* SEZIONE IMG-VIDEO DI COPERTINA */

.contcop{padding:0;height:236px;position:relative;}

img.cop, video.cop{
    margin:0 auto;max-height:234px;max-width:100%;border-radius:7px;padding:3px;
    /* transform: translate(asseX, asseY); centra orizzontalmente e verticalmente */			
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* FINE SEZIONE IMG-VIDEO DI COPERTINA */		

/*
/* .traccia{position:absolute;margin:0;padding:3px 0 0 10px;font-size:13px;color:#dddddd;font-weight:bold;}
.traccia:hover{color:#FFA500;}
*/


div.bkgcrop{background-repeat:no-repeat;background-size:cover;background-position:top center;}
div.frase{background-repeat:no-repeat;background-size:contain;background-position:center center;}
.li-img{margin:2px 3px 2px 4px;width:20px;height:auto;display:inline-block;}

/* SEZIONE iframe di andiamoinbici */

#iframeContainer {
width: 100%;
height: 100%;
 /* overflow-y: auto;Abilita la barra di scorrimento solo nell'iframeContainer */
}

#iFrame1{width: 100%;height: 489px; border:none;}
#iFrame1.bloccato{overflow:hidden;pointer-events: none;}

/* SEZIONE FRASE */

#contFrase{height:133px;position:relative;overflow-y:auto;}

/* FINE SEZIONE FRASE */

/* SEZIONE ADESIONI E PRENOTAZIONI */

.contAdes {
  display: flex; /* Usa Flexbox */
  justify-content: center; /* Centra orizzontalmente */
  align-items: center; /* Centra verticalmente */
  height: 91px;
}

table.adesioni, table.prenotazioni{
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 4px;
  overflow: hidden;
  padding:12px 8px;
  background: #0166A3;
  width:100%;  
}

table.adesioni:hover, table.prenotazioni:hover{background: #255e90;cursor:pointer;}

table.adesioni th, table.prenotazioni th{text-align:center;}

table.adesioni th span.home, table.prenotazioni th span.home{
  font-size:18px;
  color: #efefef;
  text-align:center;
  line-height:130%;
  padding:0px 4px;
  text-shadow: 2px 4px 4px #555;
}

/* FINE SEZIONE ADESIONI E PRENOTAZIONI */		

div.row{width:100%;margin:0;padding:0;}


/* SEZIONE PRENOTAZIONI HOME PAGE */

.prenoFade {
  opacity: 0;
  transition: opacity 1s ease;
}

.prenoFade.show {
  opacity: 1;
}

.contIscrizAbilitata {
  width: 100px;
  height: 56px;
  background-image: url('/images/calendarioIscrizAbilitata.png');
  background-size: contain;
  background-position: center;
  background-repeat:no-repeat;  
  position: relative;
  margin:10px auto 0px auto;
  opacity:0.8;
}

.contIscrizChiusa {
  width: 100px;
  height: 56px;
  background-image: url('/images/calendarioIscrizChiusa.png');
  background-size: contain;
  background-position: center;
  background-repeat:no-repeat;
  position: relative;
  margin:10px auto 0px auto;
  opacity:0.8;  
}

.mese {
  position: absolute;
  width:100%;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 2px #333;
}

.mesiDiversi {
  position: absolute;
  width:100%;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 2px #333;
}

.giorno {
  position: absolute;
  width:160px;
  top: 29px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  line-height:100%;
  font-weight: bold;
  color: #000000;
  /*text-shadow: 2px 2px 2px #ccc;*/
}

.giorno span{
  display:block;
  margin-top:10px;
  width:100%;
  color: #ffffff;
  font-size:14px;
  font-weight:normal;
  text-align:center;
}



/* FINE SEZIONE PRENOTAZIONI HOME PAGE */


/* SEZIONE CONTENUTI HOME PAGE */

div.contenuto{width:100%;max-width:900px;font-size:16px;line-height:145%;text-align:justify;margin:0 auto;padding:5px;}
div.contenuto h5{margin-bottom:5px;font-size:16px;line-height:150%;}
div.contenuto img.singola{
  display:block;
  width:100%;
  max-width:600px;  
  margin:8px auto 15px auto;
  padding:0;
  cursor:zoom-in;  
}

div.contenuto img.whatsapp, div.contenuto img.whatsapp-link{
  display:block;
  width:100%;
  max-width:340px;  
  margin:0 auto;
  padding:8px 5px;
  border: 1px solid rgb(29, 94, 115);
  border-radius:5px;
}

div.contenuto img.whatsapp-link:hover{opacity:0.8;}

div.contenuto a.whatsapp, div.contenuto button.whatsapp{
  display:block;
  width:320px;
  margin:0 auto;
  padding:0;
  border:none;
  background:transparent;
}

div.contenuto a.whatsapp:hover{opacity:0.8;}

div.contenuto button.btnWAPrivacy{
  display:block;
  margin:0 auto;
  padding:4px 12px;
  text-shadow: 1px 1px 2px #000;
  border: 1px solid rgb(29, 94, 115);
  color:#efefef;
  background:transparent;
  border-radius:4px;
}

div.contenuto button.btnWAPrivacy:hover{opacity:0.8;}

  /* immagini (in evidenza in home page) */
  div.contenuto img.affiancata{
    display:inline-block;    
    margin:8px 1px 0px 1px;
    padding:0;    
    width:100%;
    max-width:420px;
    cursor:zoom-in;
  }
 
  /* a button (in evidenza in home page) */ 
  .btnEv {
    display:block;
    width:fit-content;
    max-width:100%;
    margin:17px auto 0px auto;
    padding:5px 6px;
    background: #4186C3;
    color: #ffffff;
    font-size:14px;
    border-radius:3px;
  }

  .btnEv:hover {background: #2F6CA0;}  


div.testocentrato{text-align:center;}
span.racTracce{color:#f2f3f4;font-size:16px;}
span.in-evidenza{color: #F3D716;}
span.in-evidenza:hover{color: #F3D716;text-decoration:underline;}
a.centrato{display:block;margin:0 auto;}
.zoomIn:hover{cursor:zoom-in;}
.ib{display:inline-block;}

a.btn-video{color: #ffffff;}

/* inizio sotto-sezione adesione gruppo WhatsApp */

#waLink{margin-top:10px;}
#privacyCheck{width:16px; height:16px;margin-right:6px;}

.info-box {
  display: none;
  opacity: 0;
  padding: 10px;
  background: #fff3cd;
  border: 1px solid #ffeeba;
  margin-bottom: 10px;
  transition: opacity 1s ease;
}

.info-box.show {
  display: block;
  opacity: 1;
}
/* fine sotto-sezione adesione gruppo WhatsApp */

/* FINE SEZIONE CONTENUTI HOME PAGE */


/* SEZIONE FOTO RECENTI */

div.contRec{display:block;width:100%;text-align:center;}

a.foto-recenti, a.vedi-tutte{width:100%;max-width:240px;font-size:14px;text-align:center;text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;border:solid 1px #727373;border-radius:4px;padding: 10px 15px;opacity:100%;}

a.foto-recenti:hover, a.vedi-tutte:hover{opacity:80%;}

/* h4 a{display:inline;} */
h4 a:hover{text-decoration:underline;}

/* FINE SEZIONE FOTO RECENTI */