#fth-slideshow,
#fth-slideshow * {
    box-sizing: border-box;
}

#fth-slideshow {
    position: relative !important;

    width: 900px !important;
    max-width: calc(100vw - 30px) !important;

    aspect-ratio: 100 / 62;

    margin: 0 auto !important;
    padding: 8px !important;

    background:
        linear-gradient(
            145deg,
            rgba(118, 63, 145, .88),
            rgba(187, 128, 210, .92) 45%,
            rgba(91, 43, 118, .90)
        ) !important;

    border: 3px solid rgba(216, 170, 234, .95) !important;
    border-radius: 18px !important;

    box-shadow:
        0 0 0 3px rgba(95, 42, 125, .65),
        0 0 20px rgba(151, 84, 187, .42),
        0 10px 30px rgba(25, 5, 35, .36) !important;

    overflow: hidden !important;
}

#fth-slideshow .fth-slideshow__stage {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;
    border-radius: 10px !important;

    background: rgba(20, 8, 28, .18) !important;

    perspective: 1200px;
}

#fth-slideshow .fth-slideshow__image {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    backface-visibility: hidden;
    transform-origin: center center;
    will-change: opacity, transform, filter, clip-path;
}

#fth-slideshow .fth-slideshow__image--current {
    z-index: 2;
    opacity: 1;
}

#fth-slideshow .fth-slideshow__image--next {
    z-index: 3;
    opacity: 0;
}

/* =========================================================
   TRANSITIONS CLASSIQUES
   ========================================================= */

#fth-slideshow .fth-in-fade {
    animation: fthInFade 760ms ease forwards;
}

#fth-slideshow .fth-out-fade {
    animation: fthOutFade 760ms ease forwards;
}

#fth-slideshow .fth-in-left {
    animation: fthInLeft 820ms cubic-bezier(.22,.61,.36,1) forwards;
}

#fth-slideshow .fth-out-right {
    animation: fthOutRight 820ms cubic-bezier(.4,0,.2,1) forwards;
}

#fth-slideshow .fth-in-right {
    animation: fthInRight 820ms cubic-bezier(.22,.61,.36,1) forwards;
}

#fth-slideshow .fth-out-left {
    animation: fthOutLeft 820ms cubic-bezier(.4,0,.2,1) forwards;
}

#fth-slideshow .fth-in-up {
    animation: fthInUp 820ms cubic-bezier(.22,.61,.36,1) forwards;
}

#fth-slideshow .fth-out-down {
    animation: fthOutDown 820ms cubic-bezier(.4,0,.2,1) forwards;
}

#fth-slideshow .fth-in-diag-tl {
    animation: fthInDiagTL 860ms cubic-bezier(.22,.61,.36,1) forwards;
}

#fth-slideshow .fth-out-diag-br {
    animation: fthOutDiagBR 860ms cubic-bezier(.4,0,.2,1) forwards;
}

#fth-slideshow .fth-in-diag-tr {
    animation: fthInDiagTR 860ms cubic-bezier(.22,.61,.36,1) forwards;
}

#fth-slideshow .fth-out-diag-bl {
    animation: fthOutDiagBL 860ms cubic-bezier(.4,0,.2,1) forwards;
}

#fth-slideshow .fth-in-zoom {
    animation: fthInZoom 850ms cubic-bezier(.22,.61,.36,1) forwards;
}

#fth-slideshow .fth-out-zoom {
    animation: fthOutZoom 850ms cubic-bezier(.4,0,.2,1) forwards;
}

#fth-slideshow .fth-in-rotate {
    animation: fthInRotate 900ms cubic-bezier(.22,.61,.36,1) forwards;
}

#fth-slideshow .fth-out-rotate {
    animation: fthOutRotate 900ms cubic-bezier(.4,0,.2,1) forwards;
}

#fth-slideshow .fth-in-blur {
    animation: fthInBlur 820ms ease forwards;
}

#fth-slideshow .fth-out-blur {
    animation: fthOutBlur 820ms ease forwards;
}

@keyframes fthInFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fthOutFade {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fthInLeft {
    from { opacity: 0; transform: translateX(-100%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fthOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
}

@keyframes fthInRight {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fthOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-100%); }
}

@keyframes fthInUp {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fthOutDown {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-100%); }
}

@keyframes fthInDiagTL {
    from { opacity: 0; transform: translate(-65%, -65%) scale(.92); }
    to { opacity: 1; transform: translate(0,0) scale(1); }
}

@keyframes fthOutDiagBR {
    from { opacity: 1; transform: translate(0,0) scale(1); }
    to { opacity: 0; transform: translate(65%, 65%) scale(.92); }
}

@keyframes fthInDiagTR {
    from { opacity: 0; transform: translate(65%, -65%) scale(.92); }
    to { opacity: 1; transform: translate(0,0) scale(1); }
}

@keyframes fthOutDiagBL {
    from { opacity: 1; transform: translate(0,0) scale(1); }
    to { opacity: 0; transform: translate(-65%, 65%) scale(.92); }
}

@keyframes fthInZoom {
    from { opacity: 0; transform: scale(1.18); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fthOutZoom {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(.82); }
}

@keyframes fthInRotate {
    from { opacity: 0; transform: rotate(-5deg) scale(.9); }
    to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes fthOutRotate {
    from { opacity: 1; transform: rotate(0) scale(1); }
    to { opacity: 0; transform: rotate(5deg) scale(.9); }
}

@keyframes fthInBlur {
    from { opacity: 0; filter: blur(14px); transform: scale(1.06); }
    to { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes fthOutBlur {
    from { opacity: 1; filter: blur(0); transform: scale(1); }
    to { opacity: 0; filter: blur(14px); transform: scale(.96); }
}

/* =========================================================
   EFFET TUILES / BRIQUES
   ========================================================= */

#fth-slideshow .fth-slideshow__tiles {
    position: absolute !important;
    inset: 0 !important;

    z-index: 5;

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);

    pointer-events: none;
    opacity: 0;
}

#fth-slideshow .fth-tile {
    position: relative;
    overflow: hidden;

    opacity: 0;
    transform: scale(.6) rotate(6deg);

    background-repeat: no-repeat;
}

#fth-slideshow .fth-slideshow__tiles.fth-tiles-active {
    opacity: 1;
}

#fth-slideshow .fth-slideshow__tiles.fth-tiles-active .fth-tile {
    animation: fthTileIn 620ms cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes fthTileIn {
    from {
        opacity: 0;
        transform: scale(.55) rotate(7deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

#fth-slideshow .fth-slideshow__message {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1rem;
    text-align: center;

    color: #fff;
    background: rgba(20,8,28,.45);
}

@media (max-width: 700px) {
    #fth-slideshow {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        padding: 5px !important;
        border-width: 2px !important;
        border-radius: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #fth-slideshow .fth-slideshow__image,
    #fth-slideshow .fth-tile {
        animation-duration: 1ms !important;
    }
}