﻿


/* Summery images */
.houseBlockInnerDiv { display: flex; 
					  width: 100%;
					  --gallery-separator: 0.5vw;
                    			   

					margin-left: calc(0 - var(--gallery-separator));
					margin-right: calc(0 - var(--gallery-separator));
                    justify-content: center;
                    align-items: center;
                    overflow: hidden
}


.houseBlockInnerDiv .subDivision { display: flex; flex-wrap: wrap;box-sizing:border-box;}
.houseBlockInnerDiv .smallImage {
	
}
.houseBlockInnerDiv .imageFrame {
	min-width: 100%;
    min-height: 100%;
	box-sizing:border-box;
	cursor: pointer;
}
    .houseBlockInnerDiv a {
        text-decoration: none;
        color: var(--button-color);
        min-width: 100%;
        min-height: 100%;
		box-sizing:border-box;
    }

.houseBlockInnerDiv img,
.houseBlockInnerDiv a img {

    object-fit: contain;
    max-width: 100%;
	height: auto;
	width: auto;
	flex-shrink: 0;
            min-width: 100%;
            min-height: 100%;
			box-sizing:border-box;
}


 .thumbnailGallery {
			
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            /*height: 10vw; */
            
            overflow: hidden;
            /* flex-wrap:wrap; */
			
}

 .adjustMargins {
    margin-left: calc(0px - var(--halfImageGap));
    margin-right: calc(0px - var(--halfImageGap));
    display: flex;
    justify-content: center;
    margin-bottom: calc(0px - var(--halfImageGap));
    margin-top: calc(0px - var(--halfImageGap));
}

 

.adjustMargins > .section1 {}
.adjustMargins > .section2 { height: 30vw;	}
.adjustMargins > .section3 { height: 21vw;	}

.thumbnailGallery .flex     { display: flex; }
.thumbnailGallery .center     { 
			display:flex;
			justify-content: center;
			align-items: center;
}
.thumbnailGallery .wrap     { flex-wrap: wrap; }


 .thumbnailGallery .image {
            width: 100%; /* or any custom size */
            height: 100%; 
            /* padding-bottom: 54%; */
            object-fit: cover;
            box-sizing: border-box;
			display: block;
}
        
.pt	{ padding-top: var(--halfImageGap); }
.thumbnailGallery .hidden { display: none; }

.thumbnailGallery .box.layout-1,
.thumbnailGallery .box.layout-2,
.thumbnailGallery .box.layout-3,
.thumbnailGallery .box.layout-4,
.thumbnailGallery .box.layout-5 { 
	display: grid;
	grid-template-columns: repeat(36, 1fr); /* Creates 4 columns with equal width */
	grid-template-rows: repeat(2, 1fr); /* Creates 2 rows with auto height */

	/* Optional: Adjust gap between grid items */
	gap: 10px;
}

.thumbnailGallery .box.layout-5 .item.i1 { grid-column: 1 / span 18; grid-row: 1 / span 2; }
.thumbnailGallery .box.layout-5 .item.i2 { grid-column: 19 / span 9; grid-row: 1; }
.thumbnailGallery .box.layout-5 .item.i3 { grid-column: 28 / span 9; grid-row: 1; }
.thumbnailGallery .box.layout-5 .item.i4 { grid-column: 19 / span 9; grid-row: 2; }
.thumbnailGallery .box.layout-5 .item.i5 { grid-column: 28 / span 9; grid-row: 2; }

.thumbnailGallery .box.layout-4 .item.i1 { grid-column: 1 / span 18; grid-row: 1; }
.thumbnailGallery .box.layout-4 .item.i2 { grid-column: 19 / span 18; grid-row: 1; }
.thumbnailGallery .box.layout-4 .item.i3 { grid-column: 1 / span 18; grid-row: 2; }
.thumbnailGallery .box.layout-4 .item.i4 { grid-column: 19 / span 18; grid-row: 2; }

.thumbnailGallery .box.layout-3 .item.i1 { grid-column: 1 / span 12; grid-row: 1; }
.thumbnailGallery .box.layout-3 .item.i2 { grid-column: 13 / span 12; grid-row: 1; }
.thumbnailGallery .box.layout-3 .item.i3 { grid-column: 25 / span 12; grid-row: 1; }

.thumbnailGallery .box.layout-2 .item.i1 { grid-column: 1 / span 18; grid-row: 1 / span 2; }
.thumbnailGallery .box.layout-2 .item.i2 { grid-column: 19 / span 18; grid-row: 1 / span 2; }

.thumbnailGallery .box.layout-1 .item.i1 { grid-column: 9 / span 18; grid-row: 1 / span 2; }

.thumbnailGallery .box.layout-col.same-height {}
.thumbnailGallery .box.layout-col.varying-height { display: block; /*flex;*/ 
    margin: auto;
    overflow: hidden;
}
.thumbnailGallery .box.layout-col.varying-height .col { display: flex; flex-direction:column; height: 100%; justify-content: center; }



.thumbnailGallery .box.layout-col .item {  margin-bottom: var(--imageGap); margin-left: var(--halfImageGap); margin-right: var(--halfImageGap); }
.thumbnailGallery .box.layout-col.cols-1.same-height .item,
.thumbnailGallery .box.layout-col.cols-2.same-height .item { height: 50vw; }
.thumbnailGallery .box.layout-col.cols-3.same-height .item { height: 40vw; }
.thumbnailGallery .box.layout-col.cols-4.same-height .item { height: 30vw; }
.thumbnailGallery .box.layout-col.cols-5.same-height .item { height: 20vw; }

.thumbnailGallery .box.layout-col.varying-height .item { }
.thumbnailGallery .box.layout-col.cols-1 .item { width: calc(50% - var(--imageGap)); }
.thumbnailGallery .box.layout-col.cols-2 .item { width: calc(50% - var(--imageGap)); }
.thumbnailGallery .box.layout-col.cols-3 .item { width: calc(33% - var(--imageGap)); }
.thumbnailGallery .box.layout-col.cols-4 .item { width: calc(25% - var(--imageGap)); }
.thumbnailGallery .box.layout-col.cols-5 .item { width: calc(20% - var(--imageGap)); }

.thumbnailGallery .box a.image-frame { display: block; height:100%;line-height: 0;}


.thumbnailGallery .grid-sizer { width: 50%; }
.thumbnailGallery .gutter-sizer { width: 0px; }

.thumbnailGallery .box .std-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.thumbnailGallery .box .item .text{
	line-height: 1.5;
}


.thumbnailGallery .more {
	box-sizing: border-box;
	height: 100%;
	text-align:center;
	font-size: var(--font-size-label);
	background-color: var(--button-bg-color);
	color: var(--button-color);
	min-height: 50px;
	display: flex !important;
}
	.thumbnailGallery .more span {
		font-size: var(--font-size-label);
	}

.thumbnailGallery .more,
.thumbnailGallery .std-img {
	cursor: pointer;
}


.thumbnailGallery .load-more-area { text-align: center;}
.thumbnailGallery .load-more-area .loading-indicator { visibility: hidden; display:block; margin-left: auto; margin-right: auto; }
.thumbnailGallery .load-more-area .loading-indicator.show { visibility:visible; }
.thumbnailGallery .load-more-area .fetch-btn { margin: auto; display:block;}
.thumbnailGallery .load-more-area .fetch-btn.init,
.thumbnailGallery .load-more-area .fetch-btn.disable { cursor: not-allowed; pointer-events:none; opacity:0.5; }
.thumbnailGallery .load-more-area .fetch-btn.hide { visibility:hidden;pointer-events:none; }
.thumbnailGallery .load-more-area.hide { display: none; }

.houseBlockInnerDiv .stretch {
	align-self: stretch;
	background: blue;
}



/* Gallery */
.galleryComponentFrame .miniGalleryPanel {
	/*padding-left: var(--puff-gap);
	padding-right: var(--puff-gap);*/
	padding-bottom: var(--puff-gap);
}


.galleryComponentFrame .miniGalleryPanel .headline {
	display: block;
	text-align: center;
	font-size: var(--font-size-section-headline);
	width: 100%;
}



.galleryComponentFrame .largeGalleryPanel {
	/*
	position: absolute;
	top: 0;
	left:0;	
	height: auto;
	*/

	width: 100%;
	height: 100%;

	/*background-color: rgba(255,255,255,1);*/
	z-index: 100;
	display:none;	
	/*border: 1px solid #DDD;
	box-shadow: 0 0.4vw 0.3vw 0px #00000030;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;*/
}

.galleryComponentFrame .userDashboard {
	position: fixed;
	
	top: 2vw;
	right: 2vw;
	z-index: 300;
	/*height: 100px;
	width: 100px;*/
	
	
	color: white;
}

.galleryComponentFrame .closeGalleryBtn,
.galleryComponentFrame .closeSlideshowBtn {

	border: 1px solid #FAFAFA;
	border-radius: 50%;
	width: var(--closeBtnSize);
	height: var(--closeBtnSize);

	cursor: pointer;
	
	/*box-shadow: 0 4px 3px 0px #00000030;*/
	box-shadow: 0 0.4vw 0.3vw 0px #0000000a;
	display: inline-block;
	background-color: rgba(255,255,255,1);
	color: black;
	text-align: center;
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


.galleryComponentFrame .closeGalleryBtn {
	
}

.galleryComponentFrame .closeGalleryBtn i,
.galleryComponentFrame .closeSlideshowBtn i {

    font-size: max(24px, 2vw);
    position: relative;
    transform: translateY(-45%);
    top: 45%;
	right: 0.2vw;
}

.galleryComponentFrame .galleryInfo {
	font-size: var(--font-size-galleryinfo);
	display: inline-block;
	background-color: rgba(255,255,255,0.2);
	border-radius: 0.5vw;
	padding: 0 0.5vw;
	padding-top: clamp(4px, 3px + 0.6vw ,13px);
}


.galleryComponentFrame .closeSlideshowBtn:before,
.galleryComponentFrame .closeGalleryBtn:before {
    /*content: "\f104";*/
/*    content: '';	

	color:black;
    width: var(--closeBtnSize);
	height: var(--closeBtnSize);	
	display: inline-block;*/
   /* background-position: center;
    background-image: url('/gfx/arrow-down-16.png');
    transform: translateX(-0.1vw) rotate(90deg);
	
    background-repeat: no-repeat;
    background-size: calc(var(--closeBtnSize) / 2); 
*/

}    


.galleryComponentFrame .closeSlideshowBtn {
	z-index:201;
}


.galleryComponentFrame .largeGalleryPanel .largeGalleryFrame {
	margin: 4vw auto;

}

.galleryComponentFrame .largeGalleryPanel .largeGalleryContent {
	width: 70%;		
}

.galleryComponentFrame .largeGalleryPanel .gallerySection {
	
	
}

.galleryComponentFrame .largeGalleryPanel .gallerySection i,
.galleryComponentFrame .largeGalleryPanel .gallerySection p {	
	font-size: 16px;
	display: inline;
}


.galleryComponentFrame .largeGalleryPanel .gallerySection .image {
	width:100%;
	height: 100%;
}

.gallerySection .shrinkFrame {
        display: inline-block;
        font-size: 0;
        /*max-width: 30%;*/
        width: 100%;
        /*min-width: 30%;*/
}

.gallerySection .adjustImg {
        box-sizing: border-box;
        width: 100%;
}

.galleryComponentFrame .largeGalleryPanel .gallerySection .image img {
	max-width: 100%;
	max-height: 100%;
}

.galleryComponentFrame .largeGalleryPanel .buttonArea {
	text-align:right;	
}

.galleryComponentFrame .largeGalleryPanel .buttonArea .bottomRow {
	height: 3vw;
}



/* Slideshow */
.galleryComponentFrame .slideshowPanel {
	position: fixed;
	top: 0;
	left:0;	
	width: 100%;
	height: 100%;
	bottom:0;
	right: 0;
	background-color: rgba(0, 0, 0, 1);
	z-index: 200;
	display:none;	
	
	align-items: center;
}


.galleryComponentFrame .slideshowPanel .slideshowContent {
	/*height: 100vh;	
	position:absolute;
    top:0px;
    bottom:0px;
    width:100%;
    height:100%;
*/
  /* Using flexbox */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
  /*----*/

}


.galleryComponentFrame .slideshowPanel .slideshowFrame {

}

.stop-scrolling { height: 100vh; max-height: 100vh; overflow: hidden; }


.slick-track {
  display: flex;
  height: 100%; 
}

.slick-track .slick-slide {
  display: flex;
  height: auto;
  align-items: center;
  justify-content: center;
  
}

.slick-list
{
    height: 100%; 
}


.slick-slider {
	height: 100%; 
}

.galleryComponentFrame .slideshowPanel .sliderWrapper {
    position: relative;

    width: 100vw;
	height: 100%; 
    order: 0;
    
	flex: 0 1 auto;
    align-self: center;
	
}


.sliderWrapper {
    position: relative;
}

    .sliderWrapper .slideshowFrame {
        overflow: hidden;
        margin: 0 5px;
		margin: 0 0.1vw;
    }

    .sliderWrapper .frameContent {
        position: relative;
		height: 100%; 
    }

    .sliderWrapper .filter {
        height: 100%;
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        /*background: linear-gradient(180deg, rgba(255,255,255,0) 70%, rgba(0,0,0,0.7567401960784313) 100%);*/
        background: linear-gradient(180deg, rgba(255,255,255,0) 70%, rgba(0,0,0,0.25) 100%);
    }

    .sliderWrapper .slideshowFrame {
        overflow: hidden;
    }

        .sliderWrapper .slideshowFrame img {
            width: 100%;
			height: 100%;
			/*max-width: 100%;
			max-height: 100%;
*/
			object-fit:contain;
        }

        .sliderWrapper .slideshowFrame span {
            position: absolute;
            bottom: 10%;
            left: 5%;
            color: #fff;
            z-index: 3;
            font-size: 3vw;
            display: none;
        }

        .sliderWrapper .slideshowFrame:hover span {
            display: block;
        }


.slideshowContent #prevImage,
.slideshowContent #nextImage { 
	left: 3vw;
	--halfButtonHeight: calc(var(--prevNextBtnSize) / 2); 
	top: calc(50% - var(--halfButtonHeight));
	position: absolute;
	width: var(--prevNextBtnSize);
	height: var(--prevNextBtnSize);
	cursor: pointer;
	background-color: rgba(255,255,255,0.2);
    border-radius: 50%;
}

.slideshowContent #nextImage {
	left: auto;
	right: 3vw;
}

.slideshowContent #prevImage .fa-angle-left,
.slideshowContent #nextImage .fa-angle-right {
	font-size: var(--prevNextBtnTextSize);
	position: absolute;
	transform: translateY(-50%);
	top:50%;
	left: 42%;
}


.slideshowContent #prevImage .fa-angle-left {
   
	left: 30%;
}
.slideshowContent #nextImage .fa-angle-right {
	
}









@media screen and (max-width: 1000px) {

    .thumbnailGallery .box.layout-5 .item.i2 { grid-column: 19 / span 18; grid-row: 1 / span 2; }
	.thumbnailGallery .box.layout-5 .item.i3 { grid-column: 1 / span 12; grid-row: 3; }
	.thumbnailGallery .box.layout-5 .item.i4 { grid-column: 13 / span 12; grid-row: 3; }
	.thumbnailGallery .box.layout-5 .item.i5 { grid-column: 25 / span 12; grid-row: 3; }
	
	.thumbnailGallery .box.layout-col.cols-3 .item,
	.thumbnailGallery .box.layout-col.cols-4 .item,
	.thumbnailGallery .box.layout-col.cols-5 .item { width: calc(33% - 2 * var(--halfImageGap)); }
}


@media screen and (max-width: 800px) {

    .adjustMargins {
        flex-wrap: wrap;
        
    }
	.adjustMargins > .section2 {
		flex: 1 1 100%;		
		height: 70vw;
	}
}

@media screen and (max-width: 600px) {
	.thumbnailGallery .box.layout-col.cols-1 .item,
	.thumbnailGallery .box.layout-col.cols-2 .item,
	.thumbnailGallery .box.layout-col.cols-3 .item,
	.thumbnailGallery .box.layout-col.cols-4 .item,	
	.thumbnailGallery .box.layout-col.cols-5 .item { width: calc(50% - 2 * var(--halfImageGap)); }
	
}

@media screen and (max-width: 500px) {
	
	adjustMargins {
		flex-wrap: wrap;
	}

	.thumbnailGallery .box.layout-5 { grid-template-columns: repeat(2, 1fr); }

	.thumbnailGallery .box.layout-5 .item.i1 { grid-column: 1; grid-row: 1;  }
	.thumbnailGallery .box.layout-5 .item.i2 { grid-column: 2; grid-row: 1;  }
	.thumbnailGallery .box.layout-5 .item.i3 { grid-column: 1; grid-row: 2;  }
	.thumbnailGallery .box.layout-5 .item.i4 { grid-column: 2; grid-row: 2;  }
	.thumbnailGallery .box.layout-5 .item.i5 { grid-column: 1 / span 2; grid-row: 3; }	

	.thumbnailGallery .box .item.hide-on-mobile { display: none; }
}


@media screen and (max-width: 360px) {

	.thumbnailGallery .box.layout-5 .item.i1 { grid-column: 1 / span 2; grid-row: 1;  }
	.thumbnailGallery .box.layout-5 .item.i2 { grid-column: 1 / span 2; grid-row: 2;  }
	.thumbnailGallery .box.layout-5 .item.i3 { grid-column: 1 / span 2; grid-row: 3;  }
	.thumbnailGallery .box.layout-5 .item.i4 { grid-column: 1 / span 2; grid-row: 4;  }
	.thumbnailGallery .box.layout-5 .item.i5 { grid-column: 1 / span 2; grid-row: 5; }

	
	.thumbnailGallery .box.layout-col.cols-1 .item,
	.thumbnailGallery .box.layout-col.cols-2 .item,
	.thumbnailGallery .box.layout-col.cols-3 .item,
	.thumbnailGallery .box.layout-col.cols-4 .item,
	.thumbnailGallery .box.layout-col.cols-5 .item { width:100%; margin-left:0; margin-right:0; height: auto !important; }

}


