:root {
    --plist-item-height: calc((100vw - 2 * var(--page-h-padding)) / 5);
    --nav-btn-height: 40px;
    --extra-photo-font-size: calc(var(--plist-item-height) / 2);
    --double-padding: 30px;
    --photo-show-limit: 5;
    --nav-btn-color: var(--grey-social-color);
}

.flex.text-center { justify-content: center; }

.gallery-model-title { margin: calc(var(--page-h-padding) - var(--h1-font-size)) 0px var(--double-padding); }

.gallery-item {
    height: var(--plist-item-height);
    aspect-ratio: 1/1;
    padding: 7.5px;
}

.gallery-item:first-child {
    height: calc(var(--plist-item-height) * 2);
    aspect-ratio: 3 / 2;
}

.gp-nav-block,
.gallery-preview-navigation {
    height: calc(2 * var(--double-padding) + var(--nav-btn-height));
    margin-top: -7.5px;
    margin-bottom: -7.5px;
}

.go-back-btn {
    width: calc(var(--plist-item-height) - 15px);;
    height: var(--nav-btn-height);
    line-height: var(--nav-btn-height);
}

.gp-nav-block .svgIcon {
    width: calc(var(--nav-btn-height) * .5);
    height: var(--nav-btn-height);
}

.social-grey { color: var(--grey-social-color); fill: var(--grey-social-color); }

.cheatingMargin { margin-right: -20px; }

.gallery-list-container.row { margin-left: -3.5px; margin-right: -3.5px; margin-top: -7.5px; margin-bottom: -7.5px; }

.extraPhotos {
    display: none;
    margin: auto;
    opacity: .7;
    color: #fff;
    font-size: var(--extra-photo-font-size);
}

.gallery-list-container .gallery-item:nth-of-type(n + 6) {
    display: none;
}

.gallery-list-container .gallery-item:nth-of-type(n + 5) .extraPhotos {
    display: block;
}

.nav-svg-wrapper { height: var(--nav-btn-height)}

.gal-nav-btn {
    top: 50%;
    transform: translateY(-50%);
    left: 8px;
    color: var(--nav-btn-color);
    fill: var(--nav-btn-color);
    opacity: .7;
}

a.gal-nav-btn:hover, a.gal-nav-btn:visited { color: var(--nav-btn-color); }

.gal-nav-btn:hover { opacity: 1; }

.gal-nav-btn.nav-next {
    left: auto;
    right: 8px;
}

.gal-nav-btn .svgIcon {
    width: calc(var(--nav-btn-height) * .5);
    height: var(--nav-btn-height);
}


/***************************************************/
#gallery-show-slider {
    height: 100%;
}

#gallery-show-slider .swiper-slide { height: 100%; }
#gallery-show-slider .swiper-slide img { height: 100%; margin: auto; display: block; }

#photo-slider-modal {
    padding: var(--page-h-padding) var(--page-h-padding) calc(var(--page-h-padding) * 1.5);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,.9);
    z-index: 100;
    width: 100%;
}

.close-photo-modal {
    position: absolute;
    right: var(--page-h-padding);
    top: var(--page-h-padding);
    z-index: 50;
    cursor: pointer;
}

.close-photo-modal .svgIcon {
    height: calc(var(--page-h-padding) / 3);
    width: calc(var(--page-h-padding) / 2);
    fill: var(--grey-social-color);
}

.photo-slider-btn {
    z-index: 50;
    top: 50%;
    position: absolute;
    left: calc(var(--page-h-padding) / 2);
    padding: calc(var(--page-h-padding) / 2);
    transform: translateY(-50%);
}

.photo-slider-btn-next {
    left: auto;
    right: calc(var(--page-h-padding) / 2);
}

.photo-slider-btn .svgIcon {
    height: var(--nav-btn-height);
    width: calc(var(--page-h-padding) / 2);
    fill: var(--grey-social-color);
}

@media (max-width: 1180px) and (min-width: 770px) {

    :root {
        --plist-item-height: calc((100vw - 2 * var(--page-h-padding)) / 5 + 3px);
    }

    .gallery-list-container.row {
        margin-left: -7.5px;
        margin-right: -7.5px;
        margin-top: -7.5px;
        margin-bottom: -7.5px;
        width: calc(100% + 15px);
    }

    .gal-nav-btn { left: 0px; }
    .gal-nav-btn.nav-next { right: 0px; }
}

@media screen and ( max-width: 850px ) and ( min-width: 770px ) {
    :root {
        /*--plist-item-height: calc((100vw - 2 * var(--page-h-padding)) / 5 + 3px);*/
        --plist-item-height: calc((100vw - 2 * var(--page-h-padding)) / 2 + 7.5px);
    }
    
    .go-back-btn { width: calc(var(--plist-item-height) - 15px); }
    .gallery-preview-navigation .flex.text-center { justify-content: flex-start; }
    
    .gallery-item:first-child {
        height: auto;
        width: 100%;
    }
}

@media screen and (max-width: 700px) and (orientation: landscape) {
    .col-sm-5.gp-nav-block { width: 60%; }
    .col-sm-7.gp-nav-block { width: 40%; }
}

@media (max-width: 769px) and (min-width: 500px) {
    :root {
        /*--plist-item-height: calc((100vw - 2 * var(--page-h-padding)) / 5 + 3px);*/
        --plist-item-height: calc((100vw - 2 * var(--page-h-padding)) / 2 + 7.5px);
    }
    
    #gallery-show-slider .swiper-slide img {
        max-height: 100%;
        max-width: 100%;
        height: auto;
        width: auto;
    }

    #gallery-show-slider .swiper-slide { display: flex; }

    .gallery-list-container.row {
        margin-left: -7.5px;
        margin-right: -7.5px;
        margin-top: -7.5px;
        margin-bottom: -7.5px;
        width: calc(100% + 15px);
    }
    .gal-nav-btn { left: 0px; }
    .gal-nav-btn.nav-next { right: 0px; }

    .go-back-btn { width: calc(var(--plist-item-height) - 15px); }
    .gallery-preview-navigation .flex.text-center { justify-content: flex-start; }
    
    .gallery-item:first-child {
        height: auto;
        width: 100%;
    }
}

@media (max-width: 499px) {
    :root {
        --plist-item-height: calc((100vw - 2 * var(--page-h-padding)) / 2 + 7.5px);
        --nav-thumb-height: calc(2 * var(--page-h-padding));
    }

    #gallery-show-slider .swiper-slide img {
        max-height: 100%;
        max-width: 100%;
        height: auto;
        width: auto;
    }

    #gallery-show-slider .swiper-slide { display: flex; }

    .close-photo-modal .svgIcon {
        height: var(--page-h-padding);
        width: var(--page-h-padding);
    }

    .gallery-item { width: 50%; }

    .gallery-item:first-child {
        height: auto;
        width: 100%;
    }

    .gallery-model-title {
        margin-top: 30px;
        padding-bottom: 80px;
        margin-bottom: -25px;
    }

    .go-back-btn { width: 100%; }

    .columns.gallery-preview-navigation {
        display: flex;
        flex-wrap: wrap;
        height: 91px;
        justify-content: unset;
        flex-direction: column-reverse;
        margin-bottom: 15px;
    }

    .columns .gp-nav-block {height: 57px;}
    
    .xs-btn {
        text-align: center;
        width: 100%;
        background-color: var(--grey-vlight-color);
        padding: 10px;
    }
    
    .xs-btn .nav-svg-wrapper {
        display: none;
    }
    
    .gallery-model-title .h1 + .abig {
        display: block;
    }
    
}


/*****************  UPDATE 2025-04-10  ******************/

.gallery-list-container.swiper-container {
    margin-left: -3.5px;
    margin-right: -3.5px;
    margin-top: -7.5px;
    margin-bottom: -7.5px;
}

#inner-gallery-slider .gallery-list-container.swiper-container { margin-left: 0px; }

.gallery-list-container-wrap {
    padding: 0 var(--page-h-padding);
    margin: 0 calc(-1* var(--page-h-padding));
    overflow: hidden;
}

.gallery-list-container-wrap .photo-slider-btn-next {
    right: calc(var(--page-h-padding) * -.25);
}

.gallery-list-container-wrap .photo-slider-btn-prev {
    left: calc(var(--page-h-padding) * -.25);
}

@media (max-width: 1180px) and (min-width: 770px) {
	.gallery-list-container.swiper-container {
        margin-left: -7.5px;
        margin-right: -7.5px;
        margin-top: -7.5px;
        margin-bottom: -7.5px;
        width: calc(100% + 15px);
    }
}

@media (max-width: 769px) and (min-width: 500px) {
	.gallery-list-container.swiper-container {
        margin-left: -7.5px;
        margin-right: -7.5px;
        margin-top: -7.5px;
        margin-bottom: -7.5px;
        width: calc(100% + 15px);
    }
}