/*SLIDESHOW*/

.img-container {
    height: calc(100vh + 1.618em);
    width: 100%;
    display: flex;
    overflow-x: auto;
    margin-top: 0
}

.img-container>* {
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.slide figure {
    position: relative;
    width: 100%;
    height: 100vh;
}

@supports (hanging-punctuation: first) and (-webkit-appearance: none) {

  figure.safari-only {
    top: -1.618em;
  }

}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative
}

.slide figcaption {
    display: none
}

/*ARROWS*/
.slideshow button {
    position: absolute;
    bottom: calc(50vh - 0.309em) !important;
    top: auto !important;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1.309em !important;
    height: 1.309em !important;
    border: none;
    font-family: 'roboto mono', monospace;
    font-size: 2.618rem;
    font-weight: 300;
    text-align: center;
    color: #fff;
    cursor: pointer;
    background: rgba(0, 0, 0, 0);
    transition: all .5s cubic-bezier(.17, .67, .39, 2.8);
    box-shadow: none;
    padding: 0 !important;
    margin: 0.309em !important;
}

.slideshow button.prev {
    left: 0
}

.slideshow button.next {
    right: 0
}

.slideshow button:hover {
    background: rgba(0, 0, 0, 0);
    color: #fff
}

.slideshow button span {
    margin-top: 0
}

.slideshow button [aria-hidden="true"] {
    display: block;
    width: 1.309em !important;
    height: 1.309em !important;
    line-height: 1em;
    background: #000;
    transition: all .5s cubic-bezier(.32, 1.09, .44, 3);
    border: 2px solid #fff;
}

.io_supported .slideshow button [aria-hidden="true"]{
    opacity: 0;
    transform: scale(.25)}

    .io_supported .slideshow.visible button [aria-hidden="true"]{
    opacity: 1;
    transform: scale(1)translateX(0);
    animation: button 2s cubic-bezier(.32,1.09,.44,3) 5
}


.img-container:has(li:first-of-type.visible) ~ button.prev,.img-container:has(li:last-of-type.visible) ~ button.next{
    opacity: 0;
    background: rgba(0,0,0,0);
    transform: scale(.75);
    pointer-events: none}



@keyframes button {

    0%,
    100% {
        filter: drop-shadow(0 0 .382rem rgba(255, 255, 255, 0)) drop-shadow(0 0 .618rem rgba(255, 255, 255, 0)) drop-shadow(0 0 1rem rgba(255, 255, 255, 0))
    }

    50% {
        filter: drop-shadow(0 0 .382rem rgba(255, 255, 255, .2)) drop-shadow(0 0 .618rem rgba(255, 255, 255, .2)) drop-shadow(0 0 1rem rgba(255, 255, 255, .2))
    }
}



@media (min-aspect-ratio:1/1) {
    @media(min-width:76rem) {
        .slideshow button {
            width: 1em !important;
            height: 1em !important;
            font-size: 3.618em !important;
        }

        .slideshow button [aria-hidden="true"] {
            width: 1em !important;
            height: 1em !important;
            line-height: 0.7em !important;
        }
    }
}

@media(hover:hover) {
    .slideshow button [aria-hidden="true"]:hover {
        filter: drop-shadow(0 0 .382rem rgba(255, 255, 255, .25)) drop-shadow(0 0 .618rem rgba(255, 255, 255, .25)) drop-shadow(0 0 1rem rgba(255, 255, 255, .25))
    }
}

/*END BUTTONS*/

/*SWIPE*/
@supports (scroll-snap-align: center) {
    .img-container {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory
    }

    .slide {
        scroll-snap-align: center;
        scroll-snap-stop: always
    }
}

/*HIDE SCROLLBAR*/
.img-container {
    scrollbar-width: 0;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}

.img-container::-webkit-scrollbar {
    width: 0;
    height: 0
}

.img-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0)
}

.img-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0)
}

/*END SLIDESHOW*/

@media(max-aspect-ratio:1/1) and (max-width:150vh) {
    .slideshow-trigger {
        display: block;
        width: 1px;
        height: 100%;
        position: absolute;
        top: 120vh;
        left: 0;
        z-index: 99
    }

    /*LOWER OPACITY WHEN TEXT(.inner) IS ON SCREEN*/
    .io_supported .sticky-element {
        transition: all 3s ease-out;
        opacity: 1
    }

    .io_supported .slideshow-trigger.visible+.sticky-element {
        opacity: .2 !important
    }

    .io_supported .slideshow-trigger.visible+.sticky-element button {
        pointer-events: none;
        opacity: 0
    }

    /*HIDE ARROWS ON MOBILE WHEN TEXT(.inner) IS ON SCREEN*/
    .sticky-container .inner {
        margin-top: -8vh;
    }

    .sticky-container:not(#dark-bg) .inner::before,
    .sticky-container:not(#dark-bg) .inner::after {
        display: none
    }

    .sticky-container:last-of-type .inner {
        padding-bottom: var(--font-size-lg, 1.618rem)
    }
}

@media(min-aspect-ratio:1/1) {

    .sticky-container {
        display: flex;
        flex-direction: column
    }

    .sticky-container+.sticky-container {
        margin-top: -21vh
    }

    .sticky-container .inner {
        width: 50%;
    }

    .sticky-container .inner::before {
        display: none
    }

    .sticky-container .inner::after {
        top: auto;
        bottom: 0;
        z-index: -1;
        width: 130%;
        max-width: 150vh;
        height: calc(100% + 62vh)
    }

    /*SLIDESHOW*/
    .slideshow {
        width: 50%;
    }

   #img-container3 {
    max-width: none !important;
   }

    .slideshow img, .slideshow figure, .slideshow li, .slideshow ul {
        max-width: none !important;
    }

    .img-container {
        width: 100%;
        max-width: 95vw;
    }

    .slide figcaption {
        display: block;
        width: fit-content;
        max-width: 50%;
        margin: 0;
        position: absolute;
        bottom: 1ch;
        padding: 1ch;
        color: #fff;
        background: rgba(0, 0, 0, .5);
        -webkit-backdrop-filter: blur(21px);
        backdrop-filter: blur(21px);
        border-radius: 1ch;
        box-shadow: 0 .146rem .236rem rgba(0, 0, 0, .08), 0 .236rem .382rem rgba(0, 0, 0, .08), 0 .382rem .618rem rgba(0, 0, 0, .08), 0 .618rem 1rem rgba(0, 0, 0, .08)
    }

    /*IMAGE LEFT*/



    /*IMAGE RIGHT*/
    .img-right .sticky-element {
        align-self: flex-end
    }

    .img-right .slideshow>div {
        display: flex;
        flex-direction: column
    }

    .img-right .img-container {
        align-self: flex-end;
    }

    .img-right .slide figcaption {
        right: 1ch
    }

    .sticky-container.img-right .inner {
        margin-left: 0;
        padding-right: 0;
        padding-left: 3vw
    }

    .img-right .inner::after {
        background: linear-gradient(to bottom, rgba(255, 250, 245, 0)0%, rgba(255, 250, 245, 1)62vh, rgba(255, 250, 245, 1)calc(100% - 62vh), rgba(255, 250, 245, 0)100%);
    }
}

#couple-dickinson .slideshow:has(button.visible),
.slideshow:not(:has(div:last-of-type.visible))~button.next.visible,
.slideshow:not(:has(div:first-of-type.visible))~button.prev.visible{
    opacity: 1;
}