@media screen and (min-width: 240px) {
#desck{ display: none;}
#respo{ display: block; width:100%}
#tablet{ display: none;}


}

@media screen and (min-width: 320px) {
#desck{ display: none;}
#respo{ display: block;}
#tablet{ display: none;}
}

 
@media screen and (min-width: 480px) {
#desck{ display: none;}
#respo{ display: block;}
#tablet{ display: none;}
}
 
@media screen and (min-width: 768px) {
#desck{ display: none;}
#respo{ display: none;}
#tablet{ display: block;}
}
 

@media screen and (min-width: 1024px) {
#desck{ display: none;}
#respo{ display: none;}
#tablet{ display: block;}
}
 


@media screen and (min-width: 1200px) {
#desck{ display: block;}
#respo{ display: none;}
#tablet{ display: none;}
}

@media screen and (min-width: 2000px) {
#desck{ display: block;}
#respo{ display: none;}
#tablet{ display: none;}
}

input[type="date"] {
    background-color: #f0f0f0; /* Colore di sfondo */
    border: 1px solid #ccc;    /* Colore e stile del bordo */
    padding: 5px;              /* Spazio interno */
    font-family: sans-serif;   /* Font */
    border-radius: 3px;        /* Angoli arrotondati */
}

/* Stili specifici per il pulsante del calendario (su browser Webkit) */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1); /* Inverte il colore dell'icona del calendario */
    background-color: #007bff; /* Colore di sfondo del pulsante */
    border-radius: 50%; /* Rende il pulsante circolare */
}


.slideshow-container {
  max-width: 800px;
  position: relative;
  margin: auto;
}

/* Nascondi le immagini di default */
.mySlides {
  display: none;
}

/* Pulsanti avanti e indietro */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  background-color: rgba(0,0,0,0.3);
  user-select: none;
}

.next { right: 0; }
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }

/* Animazione di dissolvenza */
.fade {
  animation-name: fade;
  animation-duration: 1.5s; /* La dissolvenza dura 1.5 secondi */
}

@keyframes fadeAnim {
  from {opacity: .4} 
  to {opacity: 1}
}
    

/* Stile base per il link/icona */
.social-link {
    transition: opacity 0.3s ease; /* Rende l'effetto fluido e non a scatto */
    display: inline-block;
    text-decoration: none;
}

/* Effetto al passaggio del mouse (Desktop) */
.social-link:hover {
    opacity: 0.7; /* 1 è pieno, 0 è invisibile */
}

/* Effetto al click (Mobile e Desktop) */
.social-link:active {
    opacity: 0.5; /* Si scurisce/opacizza ancora di più mentre tieni premuto */
    transform: scale(0.95); /* Effetto opzionale: si rimpicciolisce leggermente */
}