.slideshow {position: relative;height: 100%;margin: 0;overflow: hidden;max-height: 100vh;user-select: none;}
/* Slides */
.slideshow .slide {padding: 0 !important;margin: 0 !important;width: 100%;}
.slideshow .slide img{ pointer-events: none; }
.slideshow .slide.prev{ transform: translateX(-100%); }
.slideshow .slide.next{ transform: translateX(100%); }

@media screen and (max-width: 768px) {
    .slideshow .slides .slide {width: 100%;}
}

/* Flèche */
.slideshow .next-arrow, .slideshow .prev-arrow {position: absolute;top: 50%;transform: translateY(-50%);z-index: 2;cursor:pointer;display:inline-block;}
.slideshow .next-arrow{ right: 0; }
.slideshow .prev-arrow { left: 0; }
.slideshow .prev-arrow::after{ content:'<'; }
.slideshow .next-arrow::after{ content:'>'; }

/* Navigation */
.navigation {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);display: flex;align-items: center;}

/* Navigation - Thumnnail */
.navigation.thumbs{ margin-bottom:100px; overflow-x: scroll; max-width: 100%; position: relative; height: 75px; }
.navigation.thumbs .scroller{ display: flex; position:absolute; }
.navigation.thumbs .dot{ opacity:0.5; cursor:pointer; transition:0.5s all; width: 100px; height: 75px; display: inline-block; background-size: cover; }
.navigation.thumbs .dot:hover{ opacity:1; }
.navigation.thumbs .dot.dot-active{ opacity:1; }

/* Navigation - Number */
.navigation .number {cursor: pointer;}

/* Navigation - Dots */
.navigation.dots .dot {width: 25px;height: 25px;background-color: #ccc;border-radius: 100%;transition: all 0.5s ease;display: block;cursor: pointer;}
.navigation.dots .dot:hover {background-color: black;}
.navigation.dots .dot-active {background-color: black;}

/* Play / Pause btn */
.controlCtn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.controlCtn img {
    width: 25px;
    aspect-ratio: 1;
    display: block;
    cursor: pointer;
}

.controlCtn.paused img.play {
    display: block;
}

.controlCtn.paused img.pause {
    display: none;
}

.controlCtn img.play {
    display: none;
}

.controlCtn img.pause {
    display: block;
}
