#app .hide {display: none !important;}

#app {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.garaze {
	background-color: hsl(35, 46%, 70%);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	width: 130px;
	position: absolute;
	z-index: 20;
	bottom: 30px;
	left: 30px;
	transition: all 0.3s;
}
.garaze:hover {
	transform: translateY(-2px);
	background-color: #95c009;
	box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.5);
}
.garaze_icon {
	flex-grow: 1;
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.garaze_icon__image {
	display: block;
	transition: transform 0.8s;
}
.garaze:hover .garaze_icon__image {
	transform: rotate(360deg);
}
.garaze_caption {
	display: block;
	padding: 15px 0;
	text-align: center;
	color: #fff;
	background-color: #96c00e;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1;
}
#pietra {
	display: block;
	width: 100%;
}
#pietra path {
	fill: hsl(35, 46%, 70%);
	fill-opacity: 0;
	transition: all 0.4s;
}
#pietra path.active,
#pietra path:hover {
	fill-opacity: 0.8;
	cursor: pointer;
}
.app_logo {
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 50;
    bottom: 50px;
    left: auto;
	width: 100%;
	background-color: #f2f2f2;
}
.ktore {
	color: #1f1f1f;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 2px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.flat_view {
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #fff;
	min-width: 564px;
	width: 33%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	box-shadow: -10px 0 30px -5px hsla(0, 0%, 0%, .2);
}
.flat_view__flats {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex-grow: 1;
}
.flat_view__flats--bg {
	display: block;
	max-width: 100%;
	position: relative;
	z-index: 1;
}
.flat_view__flats--data {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	width: 100%;
	height: 100%;
}
.flat_link {
	background-color: #31b06e;
	width: 32px;
	height: 32px;
	border-radius: 100%;
	color: #fff;
	font-weight: 700;
	font-size: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: all 0.2s;
	position: absolute;
}
.flat_link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.5);
	filter: brightness(110%);
}
.flat_link.wolne {
	background-color: #31b06e;
}
.flat_link.zarezerwowane {
	background-color: #ecb558;
}
.flat_link.sprzedane {
	background-color: #e04c4c;
}





.parter .flat_link--0 {
	top: 67%;
    left: 47.2%;
}
.parter .flat_link--1 {
	top: 33.7%;
    left: 18.8%;
}
.parter .flat_link--2 {
	top: 33.7%;
    left: 30.8%;
}
.parter .flat_link--3 {
	top: 33.7%;
    left: 63.5%;
}

.parter .flat_link--4 {
	top: 33.7%;
    left: 75.8%;
}




.pietro--1 .flat_link--0 {
	top: 34%;
    left: 20.8%;
}
.pietro--1 .flat_link--1 {
	top: 67.7%;
    left: 25.8%;
}
.pietro--1 .flat_link--2 {
	top: 67.7%;
    left: 62.7%;
}
.pietro--1 .flat_link--3 {
	top: 34%;
    left: 67.8%;
}


.pietro--2 .flat_link--0 {
	top: 30%;
    left: 26.8%;
}
.pietro--2 .flat_link--1 {
	top: 64.7%;
    left: 32.8%;
}
.pietro--2 .flat_link--2 {
	top: 64.7%;
    left: 67.7%;
}
.pietro--2 .flat_link--3 {
	top: 30%;
    left: 73.8%;
}



.pietro--3 .flat_link--0 {
	top: 30%;
    left: 23.8%;
}
.pietro--3 .flat_link--1 {
	top: 64.7%;
    left: 23.8%;
}
.pietro--3 .flat_link--2 {
	top: 64.7%;
    left: 58.2%;
}
.pietro--3 .flat_link--3 {
	top: 30%;
    left: 69.8%;
}


.pietro--4 .flat_link--0 {
	top: 45%;
    left: 30%;
}
.pietro--4 .flat_link--1 {
	top: 45%;
    left: 65%;
}


.pietro--1 .budynek-3--flat .flat_link--0 {		top: 46%;		left: 25.8%;	}
.pietro--1 .budynek-3--flat .flat_link--1 {		top: 16.7%;		left: 24.8%;	}
.pietro--1 .budynek-3--flat .flat_link--2 {		top: 16.7%;		left: 46%;		}
.pietro--1 .budynek-3--flat .flat_link--3 {		top: 25%;		left: 67.8%;	}
.pietro--1 .budynek-3--flat .flat_link--4 {		top: 60.5%;		left: 45.5%;	}
.pietro--1 .budynek-3--flat .flat_link--5 {		top: 62%;		left: 65.8%;	}

.pietro--2 .budynek-3--flat .flat_link--0 {		top: 46%;		left: 25.8%;	}
.pietro--2 .budynek-3--flat .flat_link--1 {		top: 16.7%;		left: 24.8%;	}
.pietro--2 .budynek-3--flat .flat_link--2 {		top: 16.7%;		left: 46%;		}
.pietro--2 .budynek-3--flat .flat_link--3 {		top: 25%;		left: 67.8%;	}
.pietro--2 .budynek-3--flat .flat_link--4 {		top: 62%;		left: 65.8%;	}
.pietro--2 .budynek-3--flat .flat_link--5 {		top: 60.5%;		left: 45.5%;	}

.pietro--3 .budynek-3--flat .flat_link--0 {		top: 46%;		left: 25.8%;	}
.pietro--3 .budynek-3--flat .flat_link--1 {		top: 18%;		left: 36.5%;	position: relative;	}
.pietro--3 .budynek-3--flat .flat_link--2 {		top: 25%;		left: 67.8%;	}
.pietro--3 .budynek-3--flat .flat_link--3 {		top: 62%;		left: 65.8%;	}
.pietro--3 .budynek-3--flat .flat_link--4 {		top: 60.5%;		left: 45.5%;	}

.pietro--4 .budynek-3--flat .flat_link--0 {		top: 41%;		left: 47.8%;	}




#app2 .pietro--1 .flat_link--1 			  {		top: 62.7%;		left: 27.8%;	}
#app2 .pietro--1 .flat_link--2 			  {		top: 62.7%;		left: 68.7%;	}
#app2 .pietro--1 .flat_link--3 			  {		top: 34%;		left: 73.8%;	}

#app2 .pietro--2 .flat_link--0 			  {		top: 34%;		left: 20.8%;	}
#app2 .pietro--2 .flat_link--1 			  {		top: 61.7%;		left: 26.8%;	}
#app2 .pietro--2 .flat_link--2 			  {		top: 61.7%;		left: 67.7%;	}
#app2 .pietro--2 .flat_link--3 			  {		top: 34%;		left: 73.8%;	}

#app2 .pietro--3 .flat_link--0 			  {		top: 34%;		left: 20.8%;	}
#app2 .pietro--3 .flat_link--1 			  { 	top: 60.7%;		left: 33.8%; 	}
#app2 .pietro--3 .flat_link--2 			  {		top: 60.7%;		left: 74.2%;	}
#app2 .pietro--3 .flat_link--3 			  {		top: 34%;		left: 72.8%; 	}

#app2 .pietro--4 .flat_link--0 			  { 	top: 45%; 		left: 27%; 		}
#app2 .pietro--4 .flat_link--1 			  { 	top: 45%; 		left: 68%; 		}


.pietro--3 .budynek-3--flat .flat_link--1::after {
	background-color: #94f20d;
	content: '';
	display: block;
	width: 100%;
	height: 45%;
	position: absolute;
	top: 100%;
}


.tooltip {
	position: absolute;
	z-index: 666;
	padding: 15px;
	top: 50%;
	left: 50%;
	background: #0d1525;
	color: #fff;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.tooltip strong {
	font-weight: 700;
	color: white;
	display: block;
	text-align: center;
	text-transform: uppercase;
}
.tooltip .wolne strong {
	color: #31b06e !important;
	margin-right: 0.2rem;
}
.tooltip .rezerwacje strong {
	color: #ecb558 !important;
	margin: 0 0.2rem;
}
.tooltip .sprzedane strong {
	margin-left: 0.2rem;
	color: #e04c4c !important;
}

.mobile-buttons {display: none;}






#app2 {
	display: block;
	width: 100%;
	position: absolute;
	inset:0;
	z-index: 20;
}

#app2 path {
	opacity: 0;
	cursor: pointer;
	transition: opacity 300ms;
}

#app2 path:hover {opacity: 1;}

#mieszkania2 img {
	width: 100%;
	display: block;
	position: relative;
	z-index: 1;
}













@media (max-width: 1199px) {
	.mieszkania_bg {
		height: 460px;
		object-fit: cover;
		object-position: center;
	}

	#pietra path {
		transform-origin: center;
		transform: scale(1.155);
	}

	.flat_view {
		min-width: 350px;
	}

	.flat_view__flats {
		flex-grow: 0;
	}
}

@media (max-width: 980px) {
	#pietra path {
		transform: scale(1.185);
	}
}

@media (max-width: 800px) {
	#pietra {display: none;}

	.flat_view__flats {
		flex-grow: 0;
		width: 100%;
		height: 100%;
	}

	.mobile-buttons {
		display: flex;
		position: absolute;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		z-index: 1;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 20px;
	}

	.btn-mobile-pietro {
		display: block;
		background-color: rgba(255,255,255,.7);
		backdrop-filter: blur(3px);
		text-align: center;
		padding: 15px 0;
		margin: 5px 0;
		width: 100%;
		color: black;
		font-size: 1.4rem;
		font-weight: bold;
	}

	.flat_view {
		width: 100%;
		height: 100%;
		padding-top: 40px;
		align-items: center;
		background-color: #fff;
		z-index: 99;
	}

	.flat_view__flats {
		position: relative;
		overflow: hidden;
		z-index: 666;
		background-color: #fff;
		width: auto;
	}

	.flat_view__flats--bg {
		width: auto;
		height: 100%;
		object-fit: contain;
		object-position: center;
		/* border: 15px solid white; */
		box-sizing: border-box;
	}

	.ktore {
		color: #1f1f1f;
		text-transform: uppercase;
		font-weight: 700;
		font-size: 16px;
		letter-spacing: 1px;
		margin-top: 8px;
		margin-bottom: 8px;
	}

	.app_logo {
		bottom: auto;
		top: 0;
		z-index: 88888;
	}

	.flat_view__flats--data {
		top: 0;
		left: 0;
		z-index: 20;
		width: 100%;
		height: 100%;
		bottom: 0;
		right: 0;
	}
}

@media (max-width: 640px) {
	.flat_view__flats--data {
		inset: 0;
		padding: 15px 10px 10px;
		box-sizing: border-box;
		height: 100%;
		width: 100%;
		background-color: #fff;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
		gap: 10px;
	}

	.flat_link {
		border-radius: 0;
		position: relative;
		width: 100%;
		height: 100%;
		font-size: 1.5rem;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		top: auto !important;
		left: auto !important;
	}

	#mieszkania2 .mieszkania-bg {
		aspect-ratio: 5/4;
		width: 100%;
		height: auto;
		object-fit: cover;
	}
}

@media screen and (max-width: 480px) {
	.flat_view {
		min-width: 100%;
		max-width: 100%;
	}

	.flat_view__flats--data {
		/* width: calc(100% - 20px); */
		grid-template-columns: 1fr 1fr;
	}

	#mieszkania2 .mieszkania-bg {
		aspect-ratio: 1/1.3;
	}
}