.photos-wrapper {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    min-height: 200px;
    min-width: 300px;
}

#PhotosCarousel {
    height: 100%;
}

#PhotosCarousel .slick-arrow {
    width: 50px;
    height: 50px;
}

.slick-arrow {
    opacity: .6;
    z-index: 1;
}

.slick-arrow:hover {
    opacity: .7;
}

.slick-prev:before, .slick-next:before {
    display: none;
}

.slick-slide:focus {
    outline: none;
}

#PhotosCarousel .slick-prev {
    background: url(Image/Carousel/arrow-left.png) no-repeat center center;
    background-size: contain;
    left: 15px;
}

#PhotosCarousel .slick-next {
    background: url(Image/Carousel/arrow-right.png) no-repeat center center;
    background-size: contain;
    right: 15px;
}
#PhotosCarousel .slick-disabled {
    display: none;
}
#PhotosCarousel .slick-disabled:hover {
    cursor: default;
}

.photos-wrapper {
    position: relative;
}

.slick-list,
.slick-track {
    height: 100%;
}

.carousel-img {
    background: no-repeat center center;
    background-size: contain;
}
.carousel-img.landscape {
    background-size: cover;
}

.thumbnail-wrap.active {
    background-color: #005B96;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.75);
}

.thumbnail-wrap:not(.active):hover {
    background-color: rgba(0, 0, 0, 0.1);
}

    .thumbnail-wrap.active .thumbnail-content {
        outline: 2px solid white;
    }

    #ThumbnailsCarousel .thumbnail-content {
        position: relative;
        height: 100%;
    }

.thumbnail-wrap {
    padding: 6px;
}
#ThumbnailsCarousel {
    visibility: hidden;
    height: 0px;
    display: inline-block;
    width: 100%;
}

#ThumbnailsCarousel .thumb-loading {
    width: 180px;
}

@media (min-height: 500px) {
    #ThumbnailsCarousel {
        visibility: visible;
        height: 120px;
        padding-bottom: 6px;
    }
}

.thumbnail-img {
    height: 100%;
    background: no-repeat center center;
    background-size: cover;
}

.thumbnail-text {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    max-height: 100%;
    padding: 3px;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-align: center;
    color: white;
    background-color: rgba(74, 74, 74, 0.2);
    line-height: 1;
    text-shadow: 0 0 5px black, 2px 2px 2px black;
}

.controls-container {
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 1;
}

.carousel-controls {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.carousel-controls .control-buttons {
    line-height: 0;
    display: flex;
}
.carousel-controls .slide-count {
    line-height: 1;
    text-align: center;
    font-size: 14px;
    color: white;
    text-shadow: 0 0 5px black, 2px 2px 2px black;
}

.control-buttons a {
    display: block;
    padding: 5px 3px;
    color: white;
    text-shadow: 1px 1px 4px black;
    font-size: 20px;
}

.control-buttons .play-button.pause .play-icon,
.control-buttons .play-button:not(.pause) .pause-icon {
    display: none;
}

.carousel-wrapper.fullscreen .expand-icon,
.carousel-wrapper:not(.fullscreen) .compress-icon {
    display: none;
}

.control-buttons .fullscreen-button {
    margin-left: 5px;
}

@media (min-width: 768px) {
    .carousel-controls .slide-count {
        font-size: 16px;
    }
    .control-buttons a {
        font-size: 25px;
        padding: 5px;
    }
}


/* fullscreen mode */
.carousel-wrapper.fullscreen {
    background-color: white;
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 9999;
}

.carousel-wrapper.fullscreen .photos-wrapper {
    top: 50%;
    transform: translateY(-50%);
    padding-bottom: 0px;
}
.carousel-wrapper.fullscreen #CarouselLevels {
    display: none;
}
.carousel-wrapper.fullscreen #ThumbnailsCarousel {
    visibility: hidden;
}

.carousel-close {
    visibility: hidden;
    width: 30px;
    position: absolute;
    top: 15px;
    right: 10px;
    cursor: pointer;
    opacity: .5;
    z-index: 1;
}
.carousel-close:hover {
    opacity: .7;
}
.carousel-wrapper.fullscreen .carousel-close {
    visibility: visible;
}