.medSlide.medSlideOpen span.closeButton { display: flex; }
.medSlideWrap { display: block; transition: transform 0.3s ease-out; }
.medSlide div, .medSlide img { width: 100%; display: block; float: left; }
ul.medSlideThumb { margin: 0px; padding: 0px; flex-direction: row; display: flex; position: relative; display: flex; float: left; gap: 10px; justify-content: flex-start; align-items: center; flex-wrap: nowrap; width: 100%; margin-top:20px;}
    ul.medSlideThumb li { list-style-type: none; display: flex; flex-direction: row; flex: 1; cursor: pointer; max-width: 50px; }
.lnk { cursor: pointer; }
ul.medSlideThumb li a, ul.cont_immagine_small li img { width: 100%; }
@media (max-width: 500px) {
    ul.medSlideThumb { margin: 0px auto; justify-content: center; margin-top: 10px; }
}
.medSlide.medSlideOpen div div { height: 100vh !important; width: 100vw !important; display: flex; text-align: center; justify-content: center; align-items: center; }
.medSlideOpen.medSlide img { width: auto !important; height: auto !important; max-width: 100% !important; }
.medSlide.medSlideOpen .medSlideThumb { position: absolute; z-index: 1; }

@media (orientation: landscape) {
    .medSlide.medSlideOpen .medSlideThumb { left: 20px; top: 20px; width: 10vw; max-width: 100px; display: flex; flex-direction: column; }
}

@media (orientation: portrait) {
    .medSlide.medSlideOpen .medSlideThumb { width: calc(100vw - 80px); left: 0px; max-width: 100vw; margin-top: 15px; margin-left: 10px; }
}
/* Animazione di scomparsa e riapparizione dell'immagine */
@keyframes fadeOutInEffect {
    0% { opacity:; }
    /* Opacità iniziale */
    10% { opacity: 0; }
    /* Scomparsa rapida dell'immagine */
    70% { opacity: 0; }
    /* Mantieni opacità a 0 fino al completamento della transizione del contenitore */
    100% { opacity: 1; }
    /* Riappare alla fine */
}

/* Applica l'animazione all'immagine */
.medSlide img { opacity: 1; /* Opacità iniziale */ transition: opacity 0.3s ease; /* Transizione per la scomparsa iniziale */ }
.medSlide.pop img { cursor: zoom-in; }
.medSlide.medSlideOpen img { animation: fadeOutInEffect 1.1s ease; /* Animazione che nasconde e poi riappare dopo 2.5s */ }

/* Transizione del contenitore */
.medSlide { width: 100%; /* Larghezza iniziale */ overflow: hidden; position: relative; transition: width 1s ease, height 1s ease; /* Transizione più veloce per il contenitore */ -webkit-overflow-scrolling: touch; }

.medSlide.medSlideOpen { width: 100vw !important; /* Espansione a tutta la larghezza della viewport */ height: 100vh !important; /* Espansione a tutta l'altezza della viewport */ position: fixed; top: 0; left: 0; background-color: #fff; z-index: 210; }

button.prev, button.next { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.5); color: white; border: none; cursor: pointer; z-index: 1; }
    button.prev::before { background-image: url(/customtheme/liguori.eu/contents/svg/bck.svg); }
    button.next::before { background-image: url(/customtheme/liguori.eu/contents/svg/nxt.svg); }
button.prev, button.next { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.5); color: white; border: none; cursor: pointer; z-index: 1; height: 60px; width: 60px; margin-top: -15px; display: flex; align-items: center; justify-content: center; }
button.prev { left: 0; }
button.next { right: 0; }
    button.prev::before, button.next::before { content: ""; background-repeat: no-repeat; background-position-x: center; background-position-y: center; height: 34px; width: 19px; background-size: 65%; right: 0px; }

.medSlide.oneImg .medThumb img, .medSlide.oneImg button { display:none!important; }