.slideshow {position: relative;height: 100%;margin: 0;overflow: hidden;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% !important;}
}

/* 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: clamp(20px, 5vw, 70px); }
.slideshow .prev-arrow { left: clamp(20px, 5vw, 70px); }
.slideshow .prev-arrow::after {
    content: '';
    background-image: url("images/8666777_chevron_right_arrow_icon.png");
    transform: rotate(180deg);
    background-size: clamp(20px, 3vw, 40px);
    background-repeat: no-repeat;
    background-position: center;
    width: clamp(10px, 3vw, 40px);
    display: block;
    height: clamp(10px, 3vw, 40px);
    filter: invert(1); /* Keeps the color inverted */
    mix-blend-mode: difference; /* Adjusts the color based on the background */
    border: 2px solid #000;
    border-radius: 100%;
    padding: 12px;
}
.slideshow .next-arrow::after {
    content: '';
    background-image: url("images/8666777_chevron_right_arrow_icon.png");
    background-size: clamp(20px, 3vw, 40px);
    background-repeat: no-repeat;
    background-position: center;
    width: clamp(10px, 3vw, 40px);
    display: block;
    height: clamp(10px, 3vw, 40px);
    filter: invert(1); /* Keeps the color inverted */
    mix-blend-mode: difference; /* Adjusts the color based on the background */
    border: 2px solid #000;
    border-radius: 100%;
    padding: 12px;
}

/* Navigation */
body:not(.home) .navigation {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    /*margin-top: 125px;*/
}

.home .navigation {
    bottom: 0;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: clamp(40px, 6vw, 125px);
}

/* 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: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 100%;
    transition: all 0.5s ease;
    display: block;
    cursor: pointer;
}
.navigation.dots .dot:hover {background-color: white;}
.navigation.dots .dot-active {background-color: white;}

/* 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;
}