/*
 * =====================================================
 * SHIREEN M PROPERTY
 * Gallery v1.1.4-r2
 *
 * Clean standalone gallery.
 * Existing server gallery markup is converted by JS.
 * =====================================================
 */


.sm-gallery-v114-r2 {

    width:
        min(
            1320px,
            calc(100vw - 48px)
        ) !important;

    max-width: none !important;

    margin:
        18px auto
        34px !important;

    padding: 0 !important;

    transform: none !important;
}


/* =====================================================
   MAIN STAGE
   ===================================================== */

.sm-gallery-r2-stage {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    aspect-ratio:
        3 / 2 !important;

    overflow: hidden !important;

    background:
        #eee8e2 !important;

    border:
        1px solid
        rgba(37,33,31,.10) !important;
}


.sm-gallery-r2-main {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit:
        contain !important;

    object-position:
        center center !important;

    background:
        #eee8e2 !important;

    transition:
        opacity .18s ease !important;
}


.sm-gallery-r2-main.is-changing {

    opacity: .38 !important;
}


/* =====================================================
   SHIREEN M LOADER
   ===================================================== */

.sm-gallery-r2-loader {

    position: absolute !important;

    inset: 0 !important;

    z-index: 3 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    pointer-events: none !important;

    opacity: 0 !important;

    transition:
        opacity .18s ease !important;

    background:
        rgba(247,243,238,.20) !important;
}


.sm-gallery-r2-stage.is-loading
.sm-gallery-r2-loader {

    opacity: 1 !important;
}


.sm-gallery-r2-loader img {

    display: block !important;

    width: 92px !important;
    height: 92px !important;

    object-fit: contain !important;

    animation:
        smGalleryLogoPulse
        1.15s
        ease-in-out
        infinite alternate !important;
}


@keyframes smGalleryLogoPulse {

    from {
        opacity: .38;
        transform: scale(.94);
    }

    to {
        opacity: .90;
        transform: scale(1.04);
    }
}


@media (
    prefers-reduced-motion:
    reduce
) {

    .sm-gallery-r2-loader img {

        animation:
            none !important;
    }

    .sm-gallery-r2-main {

        transition:
            none !important;
    }
}


/* =====================================================
   LEFT / RIGHT
   ===================================================== */

.sm-gallery-r2-nav {

    position: absolute !important;

    top: 50% !important;

    z-index: 5 !important;

    width: 54px !important;
    height: 54px !important;

    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    transform:
        translateY(-50%) !important;

    border:
        1px solid
        rgba(255,255,255,.42) !important;

    border-radius:
        999px !important;

    background:
        rgba(37,33,31,.72) !important;

    color:
        #ffffff !important;

    font-family:
        Arial,
        sans-serif !important;

    font-size:
        30px !important;

    line-height:
        1 !important;

    cursor:
        pointer !important;

    box-shadow:
        0 8px 28px
        rgba(0,0,0,.18) !important;

    transition:
        background .15s ease,
        transform .15s ease !important;
}


.sm-gallery-r2-nav:hover {

    background:
        rgba(183,119,121,.95) !important;
}


.sm-gallery-r2-prev {

    left:
        18px !important;
}


.sm-gallery-r2-next {

    right:
        18px !important;
}


/* =====================================================
   COUNTER
   ===================================================== */

.sm-gallery-r2-counter {

    position: absolute !important;

    right: 18px !important;
    bottom: 16px !important;

    z-index: 5 !important;

    padding:
        8px 13px !important;

    border-radius:
        999px !important;

    background:
        rgba(37,33,31,.76) !important;

    color:
        #ffffff !important;

    font:
        600 13px/1
        Arial,
        sans-serif !important;

    letter-spacing:
        .04em !important;
}


/* =====================================================
   THUMBNAILS
   ===================================================== */

.sm-gallery-r2-thumbs {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    width: 100% !important;

    margin:
        12px 0 0 !important;

    padding:
        2px 1px 6px !important;

    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;

    scrollbar-width:
        thin !important;

    scroll-behavior:
        smooth !important;
}


.sm-gallery-r2-thumb {

    flex:
        0 0 126px !important;

    width: 126px !important;

    aspect-ratio:
        3 / 2 !important;

    padding: 0 !important;

    overflow: hidden !important;

    border:
        2px solid
        transparent !important;

    border-radius:
        2px !important;

    background:
        transparent !important;

    cursor:
        pointer !important;

    opacity:
        .72 !important;

    transition:
        opacity .16s ease,
        border-color .16s ease,
        transform .16s ease !important;
}


.sm-gallery-r2-thumb:hover {

    opacity:
        1 !important;
}


.sm-gallery-r2-thumb.is-active {

    opacity:
        1 !important;

    border-color:
        #b77779 !important;
}


.sm-gallery-r2-thumb img {

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    object-fit:
        cover !important;

    pointer-events:
        none !important;
}


/* =====================================================
   REDUCE GAP BEFORE PROPERTY CONTENT
   ===================================================== */

.property-detail
.sm-gallery-v114-r2 {

    margin-bottom:
        30px !important;
}


.property-detail
.sm-gallery-v114-r2
+ * {

    margin-top:
        0 !important;
}


/* =====================================================
   TABLET
   ===================================================== */

@media(max-width:900px) {

    .sm-gallery-v114-r2 {

        width:
            calc(100vw - 28px) !important;

        margin-bottom:
            26px !important;
    }


    .sm-gallery-r2-nav {

        width:
            48px !important;

        height:
            48px !important;

        font-size:
            26px !important;
    }


    .sm-gallery-r2-thumb {

        flex-basis:
            108px !important;

        width:
            108px !important;
    }
}


/* =====================================================
   MOBILE
   ===================================================== */

@media(max-width:640px) {

    .sm-gallery-v114-r2 {

        width:
            calc(100vw - 20px) !important;

        margin-top:
            10px !important;

        margin-bottom:
            22px !important;
    }


    .sm-gallery-r2-stage {

        aspect-ratio:
            3 / 2 !important;
    }


    .sm-gallery-r2-nav {

        width:
            42px !important;

        height:
            42px !important;

        font-size:
            23px !important;
    }


    .sm-gallery-r2-prev {

        left:
            9px !important;
    }


    .sm-gallery-r2-next {

        right:
            9px !important;
    }


    .sm-gallery-r2-counter {

        right:
            10px !important;

        bottom:
            10px !important;
    }


    .sm-gallery-r2-thumb {

        flex-basis:
            92px !important;

        width:
            92px !important;
    }
}