div.slideshow {
    position: relative;
    
    max-height: calc(100vh - 3rem);
    
    background-color: #ffffff;
    margin-top: 0;
    
    div.slides {
        background-color: #ffffff;
    }
    
    div.slide {
        position: static;
        z-index: 1;
        margin: 0;
        width: 100%;
        background-color: #ffffff;
        
        display: none;
        
        &.current {
            display: block;
        }
        div.image {
            /* margin: 0.5rem 4.4rem 2.1rem 4.4rem; */
            
            display: flex;
            justify-content: center;
            align-items: center;
            
            img {
                display: none;
                max-width: 100%;
                max-height: calc(100vh - 5rem);
                /* max-height: 100%; */
                margin: 0 auto 0 auto;
                
                justify-content: center;
                align-items: center;
            }
            noscript {
                img {
                    display: block;
                }
            }
        }
        
        div.caption {
            position: static;
            bottom: 0.5rem;
            left: 0;
            right: 0;
            
            text-align: center;
            
            cursor: pointer;
            
            h3 {
                display: none;
                padding-top: 10px;
                padding-bottom: 3px;
                margin: 0 0.75rem;
            }
            div.text {
                display: block;
                font-size: 1rem;
                margin: 0 0.5rem;
            }
            > div.right {
                display: none;
                white-space: nowrap;
                
                div.number {
                    display: inline-block;
                    text-align: right;
                    
                    min-width: 2rem;
                    margin: 0 0.75rem;
                }
            }
        }
        
        &:first-child {
            div.caption {
                h3 {
                    display: block;
                    margin-top: 1.75rem;
                    margin-bottom: 1.75rem;
                }
            }
        }
    }
    div.overlay {
        position: absolute;
        z-index: 7;
        display: none;
        top: 0;
        bottom: 0;
        /* height: 0; */
        left: 0;
        right: 0;
        overflow: hidden;
        
        -webkit-user-select: none;  /* Chrome all / Safari all */
        -moz-user-select: none;     /* Firefox all */
        -ms-user-select: none;      /* IE 10+ */
        user-select: none;          /* Likely future */
        
        > div {
            position: absolute;
            top: 0; bottom: 0;
            width: 33%;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            
            -webkit-tap-highlight-color: transparent;
            
            background-repeat: no-repeat;
            background-attachment: scroll;
            
            &:hover {
                opacity: 1;
            }
        }
        div.left-arrow {
            left: 0;
            opacity: 0;
            overflow: visible;
            /* pointer-events: none; */
            &:after {
                content: "←";
                font-size: 4rem;
                
                position: absolute;
                top: calc(50% - 2rem);
                left: 2rem;
            }
        }
        div.left {
            left: 0;
            &:hover div.left-arrow {
                opacity: 1
            }
        }
        div.right-arrow {
            right: 0;
            opacity: 0;
            overflow: visible;
            /* pointer-events: none; */
            &:after {
                content: "→";
                font-size: 4rem;
                
                position: absolute;
                top: calc(50% - 2rem);
                right: 2rem;
            }
        }
        div.right {
            right: 0;
            &:hover div.right-arrow {
                opacity: 1
            }
        }
        &.show > div {
            opacity: 1;
        }
    }
    &.js-done {
        div.overlay {
            display: block;
        }
    }
    
    &.show-all {
        div.slides {
            div.slide {
                position: static;
                display: block;
                height: auto;
                div.image {
                    height: auto;
                }
            }
        }
    }
}


body.js-ready {
    div.slideshow {
        div.slide {
            position: absolute;
            
            div.image {
                /* height: calc(100vh - 6rem);
                margin: 2.1rem 4.4rem 0.5rem 4.4rem;
                 */
                img {
                    display: block;
                }
            }
            div.caption {
                position: absolute;
                h3 {
                    display: inline-block;
                }
                div.text {
                    display: inline-block;
                }
                > div.right {
                    display: inline-block;
                }
            }
            &:first-child {
                div.caption {
                    h3 {
                        display: inline-block;
                        margin: 0 0.75rem;
                    }
                }
            }
        }
        &.show-all {
            
        }
    }
}