#slideshow-modal .modal__container {
    max-height: unset;
    max-width : unset;

    width : 100%;
    height: calc(100vh - ((1rem * 0.85) * 3 + 3px));
    /* 100vw - (height of nav + border on bottom slider) */

    position: absolute;
    top     : 0;

    border-radius: 0;

    background-color: rgba(0, 0, 0, 0.85);
    font-family     : 'UniversLight', sans-serif;
}

#slideshow-modal .header,
#slideshow-modal .viewport,
#slideshow-modal .footer {
    width    : 100%;
    /* border: 2px solid white; */
    position : relative;
}

#slideshow-modal .swiper-button-next,
#slideshow-modal .swiper-button-prev {
    background   : rgba(255, 255, 255, 0.125);
    border-radius: 100%;
    padding      : 1.5rem;
}

#slideshow-modal .swiper-button-next::after,
#slideshow-modal .swiper-button-prev::after {
    font-size: 1.5rem;
    color    : #84ca98;
}

#slideshow-modal .header {
    height        : 10%;
    display       : block;
    pointer-events: none;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
}

#slideshow-modal .header p {
    font-size     : 8.5vh;
    display       : inline;
    color         : #84ca98;
    font-weight   : bolder;
    text-transform: lowercase;
    position      : relative;
    bottom        : 0.3em;
}

#slideshow-modal p.separator {
    color: white;
    margin: 0 0.1em;
}

#slideshow-modal .slideshow-modal-close {
    position: absolute;
    top     : 3%;
    right   : 2.25%;

    background   : rgba(255, 255, 255, 0.125);
    border-radius: 100%;
    padding      : 0.62em 1em;

    cursor: pointer;
}

#slideshow-modal .swiper-button-next:hover,
#slideshow-modal .swiper-button-prev:hover,
#slideshow-modal .slideshow-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

#slideshow-modal .slideshow-modal-close::after {
    content  : '✕';
    color    : #84ca98;
    font-size: 1.5rem;
}

#slideshow-modal .viewport,
#slideshow-modal .preview-list {
    overflow-x: scroll;
    overflow-y: hidden;

    -ms-overflow-style: none;
    scrollbar-width   : none;
}

#slideshow-modal .viewport::-webkit-scrollbar,
#slideshow-modal .preview-list::-webkit-scrollbar {
    display: none;
}

#slideshow-modal .viewport {
    height : 60%;
    padding: 2.5% 0;
}

#slideshow-modal .viewport .viewport-content:not([class*="linked"]) {
    position  : relative;
    top       : 50%;
    left      : 50%;
    max-height: 100%;
    max-width : 100%;
    transform : translate(-50%, -50%);
}

.viewport-content img {
    position  : relative;
    top       : 50%;
    left      : 50%;
    max-height: 100%;
    max-width : 100%;
    transform : translate(-50%, -50%);
}

#slideshow-modal .footer {
    height: 25%;
}

#slideshow-modal .preview-list {
    height: 100%;
    width : 100%;
}

#slideshow-modal .proj-item-container {
    position: relative !important;
    height  : 100%;
}

#slideshow-modal .proj-item-container {
    position: relative !important;
    height  : 100%;
    border  : 2px solid transparent;
}

#slideshow-modal .proj-item-container.selected {
    border-color: #84ca98;
}

#slideshow-modal .proj-item-container .overlay {
    opacity: 1;
}

#slideshow-modal .proj-item-container .overlay:hover,
#slideshow-modal .proj-item-container.selected .overlay {
    opacity: 0;
}

@media (min-width: 320px) and (max-width: 480px) {
    #slideshow-modal .swiper-wrapper {
        display: flex;
    }
}