:root {
    --bg-color-h: 25.71;
    --bg-color-s: 24.71%;
    --bg-color-l: 16.67%;
    --text-h: 22.5;
    --text-s: 5.71%;
    --text-l: 72.55%;
    --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));
    --text-color: hsl(var(--text-h), var(--text-s), var(--text-l));
    --pan-distance: 20;
    --pan: calc(var(--pan-distance) * 0.5%);
    --compensate-scale: var(--pan-distance) / 100;
    --min-scale: calc(1 + var(--compensate-scale));
    --max-scale: calc(1.3 + var(--compensate-scale));
}

*,
::after,
::before {
    border-style: solid;
    border-width: 0;
    box-sizing: border-box;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*body {
    align-items: center;
    background: var(--bg-color);
    color: var(--text-color);
    display: grid;
    font-family: "Arial", sans-serif;
    justify-items: center;
    margin: 0;
    min-height: 100lvh;
    place-items: center;
    width: 100%;
}*/

.kenburns-slideshow {
    
    aspect-ratio: 16/9;
    border-radius: clamp(.0625rem, var(--border-radius), (100% - var(--border-radius)) / 2);
    display: grid;
    /*max-width: 64rem;*/
    overflow: hidden;
    position: relative;
    /*width: calc(100% - 2rem);*/
    z-index: 0;
}

.kenburns-slide {
    aspect-ratio: inherit;
    contain: strict;
    grid-area: 1/-1;
    opacity: 0;
    position: relative;
}

.kenburns-slide:not(:first-of-type) {
    display: none;
}

.kenburns-img {
    aspect-ratio: inherit;
    backface-visibility: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    border: 0;
    color: transparent;
    display: block;
    font: 0/0 a;
    height: 100%;
    max-width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    outline: none;
    padding: 0;
    position: relative;
    text-shadow: none;
    vertical-align: middle;
    width: 100%;
}


@keyframes pan-right {
    0% {
        transform: translateX(calc(-1 * var(--pan))) scale(var(--min-scale));
    }

    100% {
        transform: translateX(var(--pan)) scale(var(--min-scale));
    }
}

@keyframes pan-left {
    0% {
        transform: translateX(var(--pan)) scale(var(--min-scale));
    }

    100% {
        transform: translateX(calc(-1 * var(--pan))) scale(var(--min-scale));
    }
}

@keyframes pan-down {
    0% {
        transform: translateY(calc(-1 * var(--pan))) scale(var(--min-scale));
    }

    100% {
        transform: translateY(var(--pan)) scale(var(--min-scale));
    }
}

@keyframes pan-up {
    0% {
        transform: translateY(var(--pan)) scale(var(--min-scale));
    }

    100% {
        transform: translateY(calc(-1 * var(--pan))) scale(var(--min-scale));
    }
}

@keyframes pan-zoom-in-right {
    0% {
        transform: translateX(calc(-1 * var(--pan))) scale(var(--min-scale));
    }

    100% {
        transform: translateX(var(--pan)) scale(var(--max-scale));
    }
}

@keyframes pan-zoom-in-left {
    0% {
        transform: translateX(var(--pan)) scale(var(--min-scale));
    }

    100% {
        transform: translateX(calc(-1 * var(--pan))) scale(var(--max-scale));
    }
}

@keyframes pan-zoom-in-down {
    0% {
        transform: translateY(calc(-1 * var(--pan))) scale(var(--min-scale));
    }

    100% {
        transform: translateY(var(--pan)) scale(var(--max-scale));
    }
}

@keyframes pan-zoom-in-up {
    0% {
        transform: translateY(var(--pan)) scale(var(--min-scale));
    }

    100% {
        transform: translateY(calc(-1 * var(--pan))) scale(var(--max-scale));
    }
}

@keyframes pan-zoom-out-right {
    0% {
        transform: translateX(calc(-1 * var(--pan))) scale(var(--max-scale));
    }

    100% {
        transform: translateX(var(--pan)) scale(var(--min-scale));
    }
}

@keyframes pan-zoom-out-left {
    0% {
        transform: translateX(var(--pan)) scale(var(--max-scale));
    }

    100% {
        transform: translateX(calc(-1 * var(--pan))) scale(var(--min-scale));
    }
}

@keyframes pan-zoom-out-down {
    0% {
        transform: translateY(calc(-1 * var(--pan))) scale(var(--max-scale));
    }

    100% {
        transform: translateY(var(--pan)) scale(var(--min-scale));
    }
}

@keyframes pan-zoom-out-up {
    0% {
        transform: translateY(var(--pan)) scale(var(--max-scale));
    }

    100% {
        transform: translateY(calc(-1 * var(--pan))) scale(var(--min-scale));
    }
}

@keyframes pan-zoom-in-top-left-to-bottom-right {
    0% {
        transform: translate(calc(-1 * var(--pan)), calc(-1 * var(--pan))) scale(var(--min-scale));
    }

    100% {
        transform: translate(var(--pan), var(--pan)) scale(var(--max-scale));
    }
}

@keyframes pan-zoom-out-bottom-right-to-top-left {
    0% {
        transform: translate(var(--pan), var(--pan)) scale(var(--max-scale));
    }

    100% {
        transform: translate(calc(-1 * var(--pan)), calc(-1 * var(--pan))) scale(var(--min-scale));
    }
}

@keyframes pan-zoom-in-bottom-left-to-top-right {
    0% {
        transform: translate(calc(-1 * var(--pan)), var(--pan)) scale(var(--min-scale));
    }

    100% {
        transform: translate(var(--pan), calc(-1 * var(--pan))) scale(var(--max-scale));
    }
}

@keyframes pan-zoom-out-top-right-to-bottom-left {
    0% {
        transform: translate(var(--pan), calc(-1 * var(--pan))) scale(var(--max-scale));
    }

    100% {
        transform: translate(calc(-1 * var(--pan)), var(--pan)) scale(var(--min-scale));
    }
}

@keyframes pan-zoom-in-top-right-to-bottom-left {
    0% {
        transform: translate(var(--pan), calc(-1 * var(--pan))) scale(var(--min-scale));
    }

    100% {
        transform: translate(calc(-1 * var(--pan)), var(--pan)) scale(var(--max-scale));
    }
}

@keyframes pan-zoom-out-bottom-left-to-top-right {
    0% {
        transform: translate(calc(-1 * var(--pan)), var(--pan)) scale(var(--max-scale));
    }

    100% {
        transform: translate(var(--pan), calc(-1 * var(--pan))) scale(var(--min-scale));
    }
}

@media (max-width:51.29875em) {
    .kenburns-slideshow {
        aspect-ratio: 4/3;
    }
}



.tour-image{
    position:relative;
}

.fullscreen-btn{
    position:absolute;
    top:12px;
    right:12px;
    z-index:1000;

    width:42px;
    height:42px;

    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.45);
    color:#fff;
    cursor:pointer;
    font-size:22px;
}