/*skeleton*/
.h-1000 .loading{
	border-bottom-right-radius: 0;
	border-bottom-left-radius:0.8rem ;
	border-top-right-radius: 0;
	border-top-left-radius: 0.8rem;
}
.second-img .loading:first-child{
	margin-bottom: 8px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius:0;
	border-top-right-radius: 0.8rem;
	border-top-left-radius: 0;
}

.second-img .loading:last-child{
	border-bottom-right-radius: 0.8rem;
	border-bottom-left-radius:0;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
}
/*skeletonend*/

/*.lsb-control-panel{
	display: none;
}*/
	.slider-counter{
		background-color: #222 ;
		opacity: 0.7;
		border-radius: 0.4em;
		color: white;
		width: 3em;
		position: absolute;	
		z-index: 2;
		font-size: 12px !important;
		line-height: 16px !important;
		background-color: rgba(34, 34, 34, 0.66) !important;
		border-radius: 4px !important;
		color: rgb(255, 255, 255) !important;
		font-weight: 600 !important;
		margin-bottom: 10px !important;
		margin-right: 12px !important;
		padding: 3px 10px !important;
	}
	.slider-counterwrap{
		-webkit-box-pack: end !important;
    -webkit-box-align: end !important;
    align-items: flex-end !important;
    inset: 0px !important;
    display: flex !important;
    justify-content: flex-end !important;
    pointer-events: none !important;
    position: absolute !important;
	}
/*.next-hover-proyek:hover .carousel-control-prev{
	display: flex;
}
.next-hover-proyek:hover .carousel-control-next{
	display: flex;
}
.carousel-control-prev{
	display: none;
}
.carousel-control-next{
	display: none;
}*/

/*dualring*/
.lds-dual-ring {
  display: inline-block;
  height: 12rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #222;
  border-color: #222 transparent #222 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*dualringend*/


.wrapper{
	padding-top: 5rem;
}

h1{
	color: #222;
	margin-bottom: 5px;
}
.underline{
	text-decoration: underline;
}

.button-container{
	display: inline-block;
	position: relative;
}
.button-container button{
position: absolute;
bottom:1em;
right:1em;
border-radius:0.8em;
padding:0.4em 0.8em;
background-color:white;
/*color:white;*/
}

/*whatsap*/
.img-floating{
	position: fixed;
	right: 1.5em;
	bottom: 2em;
	z-index: 9999;
	width: 9em;
	height: 9em;
	transition: transform 500ms;
}
.img-floating:hover{
	transform: scale(1.2);
}
@media (max-width: 769px){
	.img-floating{
		width: 7em;
		height: 7em;
	}
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.btn-floating{
	position: fixed;
	right: 2.5em;
	bottom: 8em;
	overflow: hidden;
	width: 5em;
	height: 5em;
	border-radius: 100px;
	z-index: 9999;
	color: white;
	transition: .2s;
	/*background-color: #34af23;*/
	background-color:#34af23 ;
	border: 2px solid #fff;
}
.btn-floating-img{
	position: fixed;
	right: 2.5em;
	bottom: 2em;
	overflow: hidden;
	width: 5em;
	height: 5em;
	border-radius: 100px;
	z-index: 9999;
	color: white;
	transition: .2s;
	/*background-color: #34af23;*/
	/*background-color:#34af23 ;*/
	border: 2px solid #fff;
	background-image: url("/images/cs23.png");
	background-size: cover;
	background-position: center;
}
.btn-floating-img:hover{
	transform: scale(1.5);
}
.btn-floating:hover{
	width: auto;
	padding: 0 20px;
	cursor: pointer;
	/*background-color: #1f7a12;*/
	background-color: #34af23;
}
.btn-floating i{
	font-size: 2em;
}
.btn-floating span{
	font-size: 16px;
	margin-left: 5px;
	transition: .2s;
	line-height: 0px;
	display: none;
}
.btn-floating:hover span{
	display: inline-block;
}
.btn-floating:hover i{
	margin-bottom: -3px;
}
/*whatasap-end*/


.head-proyek{
	display: flex;
	justify-content: space-between;
}

/*grid photo*/
#photo-list{
	display: grid;
	grid-gap: 0.5em;
	grid-template-areas: 
		"photo1 photo2"
		"photo1 photo3";
	grid-template-columns: 1fr 30%;
}

#photo-list div > img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/*#photo-list div > img:first-child{
	border-bottom-right-radius: 0;
	border-bottom-left-radius:0.8rem ;
	border-top-right-radius: 0;
	border-top-left-radius: 0.8rem;
}*/

#photo-list div:nth-of-type(1) > img{
	border-bottom-right-radius: 0;
	border-bottom-left-radius:0.8rem ;
	border-top-right-radius: 0;
	border-top-left-radius: 0.8rem;
}
#photo-list div:nth-of-type(2) > img{
	border-bottom-right-radius: 0;
	border-bottom-left-radius:0;
	border-top-right-radius: 0.8rem;
	border-top-left-radius: 0;
}
#photo-list div:nth-of-type(3) > img{
	border-bottom-right-radius: 0.8rem;
	border-bottom-left-radius:0;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
}

#photo-list> div:first-child{
	grid-area: photo1;
	height: 30em;
}
#photo-list> div:nth-of-type(2){
	grid-area: photo2;
	height: 14.8em;
}
#photo-list> div:nth-of-type(3){
	grid-area: photo3;
	height: 14.8em;
}
/*grid photo end*/

.owl-nav,.owl-dots{
	display: none;
}

.total-size{
	font-size: 1.4rem;
}
.total-size2{
	font-size: 1.2rem;
}
.tab-pane button{
	background-color: #222 !important;
}


/*icon*/
.fa-share-from-square:hover::before{
    content: "\f14d";
   	color: #222;
}
.fa-share-square:before {
    content: "\f14d";
    padding-right:4px;
}
.fa-heart:before {
    content: "\f004";
    padding-right:4px;
}
.ti-view-grid:before {
    content: "\e669";
    padding-right:4px;
}
.fa-ruler-combined:before {
    content: "\f546";
    color: #222;
}
.fa-file-alt:before {
    content: "\f15c";
    color: #222;
}
.fa-home:before {
    content: "\f015";
    color: #222;
}
.fa-person-running:before, .fa-running:before {
    content: "\f70c";
    color: #222;
}
.fa-road-bridge:before {
    content: "\e563";
    color: #222;
}
.fa-tree:before {
    content: "\f1bb";
    color: #222;
}
.fa-map-location-dot:before, .fa-map-marked-alt:before {
    content: "\f5a0";
    color: #222;
}
.fa-info-circle:before {
    content: "\f05a";
    color: #222;
}
/*icon end*/

.title-marginup{
	margin-top: 2rem;
}
.col222{
	color: #222;
}
.card{
	border-radius: 0.8rem;
}
.nav-pills .nav-item.show .nav-link, .nav-pills .nav-link.active {
	border: 1px solid #f7f7f7;
    background-color: #f7f7f7;
}
.nav-pills .nav-item.show .nav-link, .nav-pills .nav-link:hover{
    border: 1px solid #f7f7f7;
    background-color: #f7f7f7;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #222;
}
.nav-pills .nav-link {
    border-radius: 0.8rem;
}
.media-scroller{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 20%;
	overflow-x: auto;
	overscroll-behavior-inline: contain ;
	gap: 4rem;
}
@media (max-width: 766px){
	.media-scroller766{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain ;
	gap: 4rem;
	}
}

.cluster-container{
	width: 241px;
	height: 200px;
}
.cluster-container img{
	width: 100%;
	height: 100%;
	border-radius: 0.8rem;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	object-fit: cover;
}
.cluster-contain{
	position: relative;
	display: flex;
	border-radius: 0.8rem;
	transition: 250ms ease;
}
#tipe .cluster-contain:hover,
#cluster .cluster-hover:hover{
	background-color: #f7f7f7;
}
#cluster .cluster-hover{
	border-radius: 0.8rem;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	flex-grow: 1;
}
@media (min-width: 767px){
	.cluster-grid{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 50%;
	column-gap: 1em;
}
.media-scroller-mid{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 50%;
	overflow-x: auto;
	overscroll-behavior-inline: contain ;
	gap: 4rem;
	scrollbar-color: red green;
}
.media-scroller-mid::-webkit-scrollbar{
	width: 1vw;
}
.media-scroller-mid::-webkit-scrollbar-thumb{
	background-color: #e6e1e155;
}
.media-scroller-mid::-webkit-scrollbar-thumb:hover{
	background-color: #e6e1e1;
}
.media-scroller-mid::-webkit-scrollbar-track{
	background-color: #d9d7d755;
}

.media-scroller-mid::-webkit-scrollbar-track:hover{
	background-color: #d9d7d7;
}
}

.media-scroller::-webkit-scrollbar{
	width: 1vw;
}
.media-scroller::-webkit-scrollbar-thumb{
	background-color: #e6e1e155;
}
.media-scroller::-webkit-scrollbar-thumb:hover{
	background-color: #e6e1e1;
}
.media-scroller::-webkit-scrollbar-track{
	background-color: #d9d7d755;
}

.media-scroller::-webkit-scrollbar-track:hover{
	background-color: #d9d7d7;
}


.nav-scroller::-webkit-scrollbar{
  	display: none;
}
.modal-body > p{
	color: #222;
}
#map{
	width: 100%;
	height: 70%;
}


/*main foto*/
.first-img{
	width: 70%;
	height: 100%;
}
.first-img img{
	border-bottom-right-radius: 0;
	border-bottom-left-radius:0.8rem ;
	border-top-right-radius: 0;
	border-top-left-radius: 0.8rem;
}
.second-img{
	width: 30%;
	height: 100%;
	padding-left: 8px;
	display: flex;
	flex-direction: column;
}
.second-img1{
	border-bottom-right-radius: 0;
	border-bottom-left-radius:0;
	border-top-right-radius: 0.8rem;
	border-top-left-radius: 0;
}
.second-img2{
	border-bottom-right-radius: 0.8rem;
	border-bottom-left-radius:0;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
}
.ob-cov{
	object-fit: cover;
}
.h-1000{
	height: 28em;
}
#btn-img{
/*	position: absolute !important;
    z-index: 3 !important;
    bottom: 56px !important;
    right: 10px !important;*/
    position: absolute;
    bottom: 4em;
    right: 0.6em;
    border-radius: 0.8em;
    padding: 0.4em 0.8em;
    background-color: white;
}
/*main photo end*/

.flex-wrap-fasilitas{
	-webkit-box-pack: start !important;
	-webkit-box-align: stretch !important;
	display: flex !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	flex-wrap: wrap !important;
}
.siteplan-container{
	width: 100%;
	height: 100%;
}
.siteplan{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.judul-proyek{
	font-size: 0.9rem;
	font-weight: 600;
}
.cluster-gambar{
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: white;
    background-color: #222;
    border: none;
    border-radius: 0.8rem;
    line-height: 32px;
    padding: 0 16px;
    cursor: pointer;
}
.cluster-gambar:hover{
	color: white;
	background-color: #0a0a0a;
}
.copy-data-proyek{
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: transparent;
    width: 40px;
    height: 40px;
    border: 1px solid #e5e5e5;
    /*border: none;*/
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.copy-data-proyek:hover{
	border-color: #222;
}
.copy-data-proyek:hover > .ri-file-copy-line:before{
	/*content: "\ecd4";*/
}


.cluster-contain.active{
	/*background-color: #f7f7f7;*/
	box-shadow: rgb(0 0 0 / 30%) 0px 4px 10px;
    /*box-shadow: rgb(0 0 0 / 9%) 0px 3px 15px;*/
    /*box-shadow: rgb(0 0 0 / 12%) 0px 6px 16px;*/
}
.modal-content .modal-body .share-link-method{
	margin-bottom: 16px;
	border-radius: 8px !important;
}
.modal-content .modal-body .share-link-method:hover{
	background-color: #f7f7f7 !important;
}
@media (max-width: 995px){
	.media-scroller{
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 30%;
		overflow-x: auto;
		overscroll-behavior-inline: contain ;
		gap: 4rem;
	}
}

@media(min-width: 685px){

.slider-counter{
	display: none;
	}
#mobile-pic{
	display: none;
	}
}

@media(max-width: 685px){
	iframe{
		height: 218px;
	}
	.media-scroller{
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 100%;
		overflow-x: auto;
		overscroll-behavior-inline: contain ;
		gap: 4rem;
	}
	.nav-scroller{
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 40%;
		overflow-x: auto;
		overscroll-behavior-inline: contain ;
	}
	.media-scroller::-webkit-scrollbar{
	  display: none;
	}
	#image-list{
		display: none;
	}
	.fa-heart:before {
	    content: "\f004";
	    padding-right:0;
	    
	    color: white;
	}
	.wrapper{
		padding-top: 4.5rem;
	}
	.carousel-inner{
		border-radius: 0;
	}
	h1{
		font-size: 2rem;
	}

	#mobile-img{
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 100%;
		overflow-x: auto;
		overscroll-behavior-inline: contain ;
	}
	/*#mobile-img > img{
		inline-size: 100%;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}*/
	#mobile-img .owl-item > img{
		inline-size: 100%;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
	#mobile-load{
		aspect-ratio: 16 / 9 ;
		position: relative;
	}
	.owl-item > img{
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
	#mobile-img::-webkit-scrollbar{
	  display: none;
	}
	.snap-inline{
		scroll-snap-type: inline mandatory;
	}
	.snap-inline > *{
		scroll-snap-align: start;
	}
	.snap-inline > img:last-child{
		scroll-snap-align: end;
	}
	.title-margin{
		margin-bottom: 2rem;
	}
	.info-margin{
		margin-top: 2rem;
	}
}
@media(max-width: 360px){
/*	.slider-counter{
		background-color: #222 ;
		opacity: 0.7;
		border-radius: 0.4em;
		color: white;
		width: 3em;
		position: absolute;	
		z-index: 2;
		top: 18rem;
		right: 0.8rem;
	}*/
}
@media (max-width: 320px){
/*.slider-counter {
    background-color: #222;
    opacity: 0.7;
    border-radius: 0.4em;
    color: white;
    width: 3em;
    position: absolute;
    z-index: 2;
    top: 14.5rem;
    right: 0.8rem;
}*/
}
@media(min-width: 686px){
	#mobile-img{
		display: none;
	}
	.info-margin{
		margin-bottom: 2rem;
	}
}

@media (min-width: 375px){
	.fasilitas-proyek {
	    padding-left: 6px !important;
	    padding-right: 6px !important;
	}
}
@media (min-width: 744px){
	.fasilitas-proyek {
	    padding-left: 8px !important;
	    padding-right: 8px !important;
	}
}
@media (min-width: 950px){
	.fasilitas-proyek {
	    padding-left: 8px !important;
	    padding-right: 8px !important;
	}
}
@media (min-width: 1128px){
	.fasilitas-proyek {
	    width: 50% !important;
	    padding-left: 8px !important;
	    padding-right: 8px !important;
	}
}

@media (max-width: 766px){
	.d-none766{
		display: none;
	}
}
@media (min-width: 766px){
	.d-none-above-766{
		display: none;
	}
}

@media (max-width: 820px){
	.cluster-container {
    	/*width: 50%;*/
    	/*height: 50% !important; */
	}
}

@media (max-width: 480px){
	#siteplan-dekstop{
		display: none;
	}
	#siteplan-mobile{
		display: block !important;
	}
}
@media (max-width: 480px){
	.cluster-container {
    	width: 50%;
    	height: 147px;
	}
}