.sticky-container {
    position: relative;
    margin-top: 0;
}

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

    .sticky-element {
        position: sticky !important;
        top: 0;
        margin-top: 0
    }

    .sticky-container .inner {
        width: 100%;
        position: relative
    }

}

main li {
    margin-left: 0;
}

/*SLIDESHOW*/
.slideshow {
    position: relative
}

.img-container {
    height: calc(100vh + 1.618em);
    max-height: 162vw;
    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: 100%;
}

@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;
    top: calc((100% - 4.236rem)/2);
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 4.236rem;
    height: 4.236rem;
    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);
}

.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: 2.618rem;
    height: 2.618rem;
    line-height: 1.7rem;
    background: var(--dark-red);
    border: 2px solid #fff;
    backdrop-filter: blur(8px)brightness(1);
    transition: all .5s cubic-bezier(.32, 1.09, .44, 3)
}

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

    .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 {
            top: calc((100% - 6.854rem)/2);
            width: 6.854rem;
            height: 6.854rem;
            font-size: 4.236rem
        }

        .slideshow button [aria-hidden="true"] {
            width: 4.236rem;
            height: 4.236rem;
            line-height: 3rem
        }
    }
}

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

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

    .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: 61.8%
    }

    .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%);
    }
}

/*CUSTOM*/
#another-church,
#gospel-outreach {
    padding-bottom: 0
}

#dark-bg {
    -webkit-mask-image: none;
    mask-image: none;

}

.portrait {
    height: 100vh;
    max-height: 162vw;
}

.portrait img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

#karituu {
    margin-top: -11vh
}

#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;
}