/**
 *  SLIDESHOW POPUP
 */

.slideshow-popup {
    position: fixed;
    top: var(--header-height, 100px);
    left: 0;
    right: 0;
    bottom: var(--footer-height, 80px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    /* Position between header and footer */
    display: flex;
    flex-direction: column;
}

.slideshow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: var(--color-body); */
    cursor: pointer;
    z-index: -1;
}

.slideshow-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.slideshow-popup.active {
    opacity: 1;
    visibility: visible;
}

.slideshow-image-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding-right: 3em;
    padding-left: 3em;
    width: 100%;
    position: relative;
}

.slideshow-image {
    max-height: calc(100vh - var(--header-height, 100px) - var(--footer-height, 80px) - 8em);
    max-width: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    max-width: 70%;
}

.slideshow-counter {
    display: none;
    position: absolute;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1rem;
    background: rgba(0, 0, 0, 0.6);
    padding: 0.5em 1em;
    border-radius: 2em;
}

/** 
 * Buttons
 */


.slideshow-popup button {
    background-repeat: no-repeat;
    color: transparent;
    transition: background-size 0.3s ease, transform 0.2s ease;
    padding: 0;
    line-height: 1;
    width: 3.2em;
    cursor: pointer;
    border: 0;

    background-size: 90% auto;
    background-color: transparent;
    background-position: center;

    opacity: 0.6;

    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    z-index: 10000;


}

.slideshow-popup button:hover {
    opacity: 1;
}

.slideshow-popup button.slideshow-close {
    position: absolute;
    top: 0;
    right: 0;
    height: 4em;

    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.00386 9.41816C7.61333 9.02763 7.61334 8.39447 8.00386 8.00395C8.39438 7.61342 9.02755 7.61342 9.41807 8.00395L12.0057 10.5916L14.5907 8.00657C14.9813 7.61605 15.6144 7.61605 16.0049 8.00657C16.3955 8.3971 16.3955 9.03026 16.0049 9.42079L13.4199 12.0058L16.0039 14.5897C16.3944 14.9803 16.3944 15.6134 16.0039 16.0039C15.6133 16.3945 14.9802 16.3945 14.5896 16.0039L12.0057 13.42L9.42097 16.0048C9.03045 16.3953 8.39728 16.3953 8.00676 16.0048C7.61624 15.6142 7.61624 14.9811 8.00676 14.5905L10.5915 12.0058L8.00386 9.41816Z' fill='%23ffffff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM3.00683 12C3.00683 16.9668 7.03321 20.9932 12 20.9932C16.9668 20.9932 20.9932 16.9668 20.9932 12C20.9932 7.03321 16.9668 3.00683 12 3.00683C7.03321 3.00683 3.00683 7.03321 3.00683 12Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 80% auto;

    z-index: 20000;
}

button.slideshow-prev,
button.slideshow-next {

    top: 0;
    bottom: 0;
}

.slideshow-popup button.slideshow-prev {
    left: 0;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 800 800' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(-19.0476,0,0,19.0476,800,0)'%3E%3Cpath d='M13.933,1L34,21.068L14.431,40.637L9.498,35.704L24.136,21.068L9,5.933L13.933,1Z' style='fill:white;fill-rule:nonzero;'/%3E%3C/g%3E%3C/svg%3E");
}

.slideshow-popup button.slideshow-next {
    right: 0;
    top: 4em;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' version='1.1' width='800px' height='800px' viewBox='0 0 42 42'%3E%3Cpolygon points='13.933,1 34,21.068 14.431,40.637 9.498,35.704 24.136,21.068 9,5.933 '/%3E%3C/svg%3E");
}

.slideshow-popup:has(.slideshow-close:hover) .slideshow-image-container,
.slideshow-popup:has(.slideshow-close:focus) .slideshow-image-container {
    opacity: 0.6;
}

.slideshow-caption h2 {
    border: none;
    padding: 0;
    font-size: 2em;
    font-weight: 900;
    text-align: left;
    margin: 0 0 1em 0;
}

.slideshow-caption {
    opacity: .6;
    position: fixed;
    left: 10%;
    z-index: 30000;
    max-width: 50%;
}


@media (min-width: 2560px) {
    .slideshow-image-container {
        width: 1980px;
        margin: 0 auto;
    }

    .slideshow-caption {
        left: calc((100% - 1980px) / 2 + 3em);
    }
}

@media (max-width: 768px) {

    .slideshow-image {
        max-height: auto;
        width: 50%;
    }

    .slideshow-caption h2 {
        font-size: 1.2em;
    }

    .slideshow-prev,
    .slideshow-next {
        font-size: 1em;
    }
}