.dimbox-container {
    position: fixed;
    inset: 0 0 0 0;
    display: flex!important;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 50px;
    opacity: 0;
    transition: opacity .5s;
    z-index: 99999
}

.dimbox-container.dimbox-light {
    color: #000
}

.dimbox-container.show {
    opacity: 1
}

.dimbox-container.close-on-overlay-click,
.dimbox-container.close-on-overlay-click .dimbox-figure,
.dimbox-container.close-on-overlay-click .dimbox-video-container,
.dimbox-container.close-on-overlay-click .dimbox-iframe-container,
.dimbox-container.close-on-overlay-click .dimbox-ajax-container,
.dimbox-container.close-on-overlay-click:not(.dimbox-loaded) .dimbox-image {
    cursor: pointer
}

.dimbox-container * {
    color:#fff;
    box-sizing: border-box
}

.dimbox-container::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0 0 0 0;
    background-color: #000;
    opacity: .75
}

.dimbox-container.dimbox-light::before {
    background-color: #fff
}

.dimbox-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
    border: 4px solid #fff;
    border-right-color: rgba(0, 0, 0, 0);
    border-radius: 50%;
    opacity: .5;
    animation: spin 1s linear infinite
}

.dimbox-container.dimbox-light .dimbox-loader {
    border-color: #000;
    border-right-color: rgba(0, 0, 0, 0)
}

.dimbox-container.dimbox-loaded .dimbox-loader {
    display: none
}

[class^=dimbox-btn] {
    position: absolute;
    width: 32px;
    height: 32px;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0);
    color: #fff;
    padding: 0;
    border: none;
    opacity: .5;
    cursor: pointer
}

.dimbox-container.dimbox-light [class^=dimbox-btn] {
    color: #000
}

.dimbox-btn-close {
    top: 16px;
    right: 16px
}

.dimbox-btn-download {
    top: 16px;
    right: 64px
}

[class^=dimbox-btn]:hover,
[class^=dimbox-btn]:active,
[class^=dimbox-btn]:focus {
    color: #fff;
    opacity: 1
}

.dimbox-container.dimbox-light [class^=dimbox-btn]:hover,
.dimbox-container.dimbox-light [class^=dimbox-btn]:active,
.dimbox-container.dimbox-light [class^=dimbox-btn]:focus {
    color: #000
}

.dimbox-btn-prev,
.dimbox-btn-next {
    top: 50%
}

.dimbox-btn-prev {
    left: 8px;
    transform: rotate(180deg) translateY(50%)
}

.dimbox-btn-next {
    right: 8px;
    transform: translateY(-50%)
}

[class^=dimbox-btn] svg {
    width: 32px;
    height: 32px
}

.dimbox-sequence {
    position: absolute;
    top: 16px;
    left: 16px
}

.dimbox-content {
    position: relative;
    max-height: 100%;
    z-index: 1;
    opacity: 0;
    transition: opacity .5s;
    cursor: default
}

.dimbox-container.show .dimbox-content {
    opacity: 1
}

.dimbox-container.dimbox-gallery .dimbox-content.dimbox-transition-left {
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity .5s, transform .5s
}

.dimbox-container.dimbox-gallery .dimbox-content.dimbox-transition-right {
    transform: translateX(50%);
    opacity: 0;
    transition: opacity .5s, transform .5s
}

.dimbox-figure,
.dimbox-video-container,
.dimbox-iframe-container {
    margin: 0;
    opacity: 0;
    transition: opacity .5s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: calc(100vh - 88px);
    transition: width .5s, height .5s
}

.dimbox-iframe-container {
    width: calc(100vw - 112px);
    height: calc(100vh - 88px)
}

.dimbox-ajax-container {
    display: flex;
    flex-direction: column
}

.dimbox-container.dimbox-loaded .dimbox-figure,
.dimbox-container.dimbox-loaded .dimbox-video-container,
.dimbox-container.dimbox-loaded .dimbox-iframe-container {
    opacity: 1
}

.dimbox-ajax-content,
.dimbox-inline-content {
    background-color: #fff;
    color: #000;
    max-width: 768px;
    max-height: calc(100vh - 88px);
    padding: 16px;
    overflow: auto
}

.dimbox-image,
.dimbox-video,
.dimbox-iframe {
    display: block;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
    cursor: default;
    transition: width .5s, height .5s
}

.dimbox-image,
.dimbox-video {
    object-fit: contain
}

.dimbox-caption {
    color: #fff;
    font-size: .85rem;
    text-align: center;
    margin: 8px auto 0 auto;
    cursor: default
}

.dimbox-container.dimbox-light .dimbox-caption {
    color: #000
}

.dimbox-iframe {
    border: none
}

.dimbox-iframe.ratio-16x9 {
    aspect-ratio: 16/9
}

.dimbox-iframe.ratio-4x3 {
    aspect-ratio: 4/3
}

.dimbox-iframe.ratio-1x1 {
    aspect-ratio: 1/1
}

.dimbox-iframe.ratio-9x16 {
    aspect-ratio: 9/16
}

.dimbox-noscroll {
    overflow: hidden !important
}

@media(orientation: portrait) {

    .dimbox-figure,
    .dimbox-video-container {
        max-width: 100%;
        height: 100%;
    }

    .dimbox-iframe-container,
    .dimbox-ajax-container {
        width: 100%;
        height: calc(100vh - 112px)
    }

    .dimbox-inline-content {
        max-height: calc(100vh - 112px)
    }

    .dimbox-image,
    .dimbox-video {
        width: 100%;
        height: auto
    }

    .dimbox-btn-prev,
    .dimbox-btn-next {}
}

@keyframes spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}