﻿.gallery-slideshow {
    display: block;
    position: relative;
    transition: height 250ms ease-in;
}

    .gallery-slideshow a {
        display: none;
        top: 0;
        left: 0;
        width: 100%;
    }

    .gallery-slideshow a.active {
        display: block;
    }

    .gallery-slideshow a img {
        max-width: 100%;
    }

.gallery-wrapper {
    position: relative;
    background: #111;
    padding: 5px;
}

    .gallery-wrapper .gallery-slideshow {
        width: 100%;
    }

    .gallery-wrapper .gallery-info {
        position: absolute;
        z-index: 1000;
        top: 0px;
        left: 5px;
        background-color: rgba(0, 0, 0, 0.75);
        color: #aaa;
        font-size: 11px;
        padding: 0px 5px;
        border-bottom-left-radius: 5px;
    }

.gallery-display {
    position: relative;
    margin-bottom: 10px;
}

    .gallery-display .control {
        position: absolute;
        top: 45%;
        margin-top: -30px;
        font-size: 60px;
        z-index: 1000;
        cursor: pointer;
        color: #fff;
        opacity: 0.6;
    }

.gallery-wrapper .control:hover,
.gallery-wrapper .control:focus,
.gallery-wrapper .control:active
{
    color: #e72b1b;
    opacity: 1;
}

.gallery-wrapper .control * {
    pointer-events: none;
}

.gallery-wrapper .prev {
    left: 10px;
}

.gallery-wrapper .next {
    right: 10px;
}

.gallery-wrapper .control {
    background-color: #00000082;
}

.gallery-wrapper .prev .fa-angle-left {
    padding: 0 8px 0 6px;
}

.gallery-wrapper .next .fa-angle-right {
    padding: 0 6px 0 8px;
}


.gallery-pager-container {
    overflow-x: scroll;
}

.gallery-pager-container .gallery-pager {
    text-align: center;
    display: flex;
}

.gallery-pager-container .gallery-pager > div {
    text-decoration: none;
    display: inline;
}

.gallery-pager-container .gallery-pager img {
    height: 65px;
    width: 80px;
    border: 1px solid #555;
    margin: 5px;
    object-fit: cover;
}

.gallery-pager-container .gallery-pager > div.active img {
    border: 1px solid #fff;
}

@media(min-width: 992px) {
    .gallery-pager-container {
        overflow-x: unset;
    }

        .gallery-pager-container .gallery-pager {
            display: block;
        }
}
