/*#region popup*/

.mfp-bg.mfp-gallery,
.mfp-wrap.mfp-gallery {
    opacity: 1;
    background: #000;
    color: #fff;
    z-index: 1100 !important;
    filter: none !important;
}

.mfp-gallery .mfp-container {
    padding: 0 !important;
}

/*#endregion popup*/

/*#region slider*/

.gallery {
    padding: 3rem 1rem;
}

.gallery .mfp-close {
    position: absolute;
    top: 2.5rem;
    right: calc((100% - 1200px) / 2 + 15px);
    color: #fff;
    font-size: 5rem;
    opacity: 1;
    font-family: Montserrat, sans-serif;
    font-weight: 200;
}

.gallery .mfp-close:hover {
    opacity: 0.75;
}

.gallery .gallery-slider {
    margin: 0 auto;
}

.gallery .main-carousel {
    width: 1000px;
    margin: 0 auto;
}

.gallery .main-carousel .slick-track {
    display: flex;
}

.gallery .main-carousel .slick-track .slick-slide {
    display: flex;
    height: auto;
    align-items: center;
    justify-content: center;
}

.gallery .main-carousel .slick-arrow {
    border: 1px solid #fff;
    background: inherit;
}

.gallery .main-carousel .slick-arrow:hover {
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.1);
}

.gallery .main-carousel .slick-arrow::before {
    color: #fff;
    opacity: 1;
}

.gallery .main-carousel .slick-prev {
    left: -50px;
}

.gallery .main-carousel .slick-next {
    right: -50px;
}

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

.gallery .main-carousel-elem img {
    max-width: 100%;
    max-height: calc(100vh - 3rem - 56px - 95px - 3rem);
    margin: 0 auto;
}

.gallery .page-number {
    margin: 1em 0;
    color: #fff;
    text-align: center;
}

.gallery .gradient-wrapper .page-number {
    display: none;
}

.gallery .main-connect-carousel {
    width: 1200px;
    margin: 0 auto;
}

.gallery .main-connect-carousel-elem {
    cursor: pointer;
}

.gallery .main-connect-carousel-elem img {
    height: 95px;
    margin: 0 auto;
    width: auto;
}

.gallery .main-connect-carousel .slick-slide.slick-current img {
    border: 4px solid #312e81;
}

/*#endregion slider*/

@media (max-width: 1199.98px) {
    /*#region slider*/

    .gallery {
        padding: 4rem 1rem 2rem;
    }

    .gallery .main-carousel {
        width: 700px;
    }

    .gallery .main-connect-carousel {
        width: 900px;
    }

    .mfp-wrap.mfp-gallery .gallery .mfp-close {
        right: calc((100% - 900px) / 2 + 15px);
    }

    .gallery .main-carousel-elem {
        padding: 0.6em;
    }

    .gallery .main-carousel-elem img {
        max-height: calc(100vh - 4rem - 56px - 70px - 2rem);
    }

    .gallery .main-connect-carousel-elem img {
        height: 70px;
    }

    .gallery .main-connect-carousel .slick-slide.slick-current img {
        border-width: 2px;
    }

    /*#endregion slider*/
}

@media (max-width: 991.98px) {
    /*#region slider*/

    .gallery .main-carousel {
        width: 100%;
    }

    .gallery .main-connect-carousel {
        width: 100%;
    }

    .mfp-wrap.mfp-gallery .gallery .mfp-close {
        top: 1rem;
        right: 15px;
    }

    .gallery .main-carousel-elem img {
        max-height: calc(100vh - 4rem - 56px - 95px - 2rem);
    }

    .gallery .main-connect-carousel-elem img {
        height: 95px;
    }

    /*#endregion slider*/
}

@media (max-width: 575.98px),
(orientation:landscape) and (max-height: 575.98px) {
    /*#region slider*/

    .gallery .gradient-wrapper {
        position: relative;
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.8) 100%);
    }

    .gallery .page-number {
        display: none;
    }

    .gallery .gradient-wrapper .page-number {
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .gallery .main-carousel-elem img {
        position: relative;
        z-index: -2; /* чтобы увидеть затемнение в .gradient-wrapper */
        width: 100%;
        max-height: calc(100vh - 4rem - 2rem);
    }

    .gallery .main-connect-carousel {
        display: none;
    }

    /*#endregion slider*/
}

@media (orientation:landscape) and (max-height: 575.98px) {
    /*#region slider*/

    .gallery {
        padding: 1rem 0 2rem;
    }

    .gallery .main-carousel-elem img {
        width: auto;
        max-height: calc(100vh - 1rem - 2rem);
    }

    /*#endregion slider*/
}