.object-detail{ 
	width: 100%; position: relative; background: #fff;
	border-top: 1px solid rgba(0,0,0,0.05);
	border-bottom: 1px solid rgba(0,0,0,0.05);
 }
.object-detail .info{ 
	float: right; width: 33.33%; height: auto; padding: 50px; padding-bottom: 32px;
	background: #232223; color: #fff; text-align: center;
}
.object-detail .info p{ display: block; width: 100%; clear: both; max-width: 400px; margin: 25px auto 0 auto; }
.object-detail p.ap-status{
	display: inline-block; padding: 0 0 0 75px; width: auto; margin-top: 0;
	font-weight: 600; color: #fff; text-transform: uppercase; font-size: 25px; line-height: 57px;
	background-repeat: no-repeat; background-size: auto 57px; background-position: center left; 
}
.object-detail .ap-status.ap-available{ padding-left: 75px; background-image: url(../images/status-ok.png); }
.object-detail .ap-status.ap-sold{ padding-left: 75px; background-image: url(../images/status-cancel.png); }
.object-detail .ap-status.ap-reserved{ padding-left: 75px; background-image: url(../images/status-reserved.webp?v=1); }
 
.mapping-wrapper{ 
	float: left; width: 66.66%; height: auto; padding: 50px; padding-right: 80px;
}
.mapping-wrapper img{ 
	display: block; width: 100%; max-width: 800px; height: auto; position: relative; top: 0; left: 0; z-index: 0; 
	margin: 0 auto;
}
.mapping-wrapper svg{ display: block; width: 100%; height: auto; /*max-width: 700px;*/ max-width: 1024px; margin: 0 auto; }
.mapping-wrapper svg path.over, .mapping-wrapper svg path.under{
	cursor: pointer; fill-opacity: 0; fill: #d26705;
	-webkit-transition: fill-opacity 200ms ease-in-out;
	-moz-transition: fill-opacity 200ms ease-in-out;
	-ms-transition: fill-opacity 200ms ease-in-out;
	-o-transition: fill-opacity 200ms ease-in-out;
	transition: fill-opacity 200ms ease-in-out; 
}
.mapping-wrapper svg path.under{
	-webkit-transition: fill 200ms ease-in-out;
	-moz-transition: fill 200ms ease-in-out;
	-ms-transition: fill 200ms ease-in-out;
	-o-transition: fill 200ms ease-in-out;
	transition: fill 200ms ease-in-out; 
}
.mapping-wrapper svg path.under{ fill: #fff; fill-opacity: 0.5;}
.mapping-wrapper svg path.under.enabled{ fill-opacity: 0.3; fill: #d26705; }
.mapping-wrapper.mapping-wrapper-500 svg{ max-width: 500px; }
.mapping-wrapper.mapping-wrapper-600 svg{ max-width: 600px; }
.mapping-wrapper.mapping-wrapper-700 svg{ max-width: 700px; }
.mapping-wrapper.mapping-wrapper-850 svg{ max-width: 850px; }
.mapping-wrapper.mapping-wrapper-1024 svg{ max-width: 1024px; }

.small-map{ 
	display: block; width: 375px; height: 375px; position: relative; margin: 36px auto 0 auto;
	background: url(../images/small-map.webp?v=3) top left no-repeat; background-size: 100% auto;
	color: rgba(255,255,255,0.55); padding-top: 375px; font-size: 13px; line-height: 15px;
}
.small-map:before{
	content: ''; display: none; width: 12px; height: 12px; border-radius: 6px;
	background: #d26705; position: absolute; margin-top: -6px; margin-left: -6px;
}
.small-map span.t{ 
	display: block; position: absolute; top: -19px; left: 50%; 	
	-moz-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	-o-transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	transform: translate(-50%,0); 
}
.small-map span.d{ opacity: 0.7; display: inline-block; border-top: 1px solid var(--c-orange); }

.map-pos-1:before{ display: block; top: 31.2%; left: 14.9%; }
.map-pos-2:before{ display: block; top: 35.0%; left: 6.8%; }
.map-pos-3:before{ display: block; top: 39.3%; left: 14.9%; }
.map-pos-4:before{ display: block; top: 44.9%; left: 14.9%; }
.map-pos-5:before{ display: block; top: 49%; left: 6.8%; }
.map-pos-6:before{ display: block; top: 53.1%; left: 14.9%; }  
.map-pos-7:before{ display: block; top: 58.5%; left: 14.9%; }
.map-pos-8:before{ display: block; top: 62.7%; left: 6.8%; }
.map-pos-9:before{ display: block; top: 66.9%; left: 14.9%; }
.map-pos-10:before{ display: block; top: 73.7%; left: 11.1%; }
.map-pos-11:before{ display: block; top: 90.9%; left: 11.1%; }
.map-pos-12:before{ display: block; top: 90.9%; left: 18.9%; }
.map-pos-13:before{ display: block; top: 84.8%; left: 25.5%; }  
.map-pos-14:before{ display: block; top: 91.1%; left: 29.6%; }    
.map-pos-15:before{ display: block; top: 84.8%; left: 33.9%; }    
.map-pos-16:before{ display: block; top: 84.8%; left: 39.4%; }    
.map-pos-17:before{ display: block; top: 91.1%; left: 43.4%; }    
.map-pos-18:before{ display: block; top: 84.8%; left: 47.7%; }

.map-pos-19:before{ display: block; top: 84.8%; left: 53.4%; }   
.map-pos-20:before{ display: block; top: 91.1%; left: 57.3%; }   
.map-pos-21:before{ display: block; top: 84.8%; left: 61.5%; } 

.map-pos-22:before{ display: block; top: 84.8%; left: 67.2%; }   
.map-pos-23:before{ display: block; top: 91.1%; left: 71.3%; }   
.map-pos-24:before{ display: block; top: 84.8%; left: 75.5%; }

.map-pos-25:before{ display: block; top: 91.1%; left: 81.9%; }   
.map-pos-26:before{ display: block; top: 90.5%; left: 89.7%; }   
.map-pos-27:before{ display: block; top: 81.2%; left: 90.5%; }
.map-pos-28:before{ display: block; top: 72.5%; left: 88.2%; }

.map-pos-51:before{ display: block; top: 72.5%; left: 84.8%; }
.map-pos-52:before{ display: block; top: 72.5%; left: 90.5%; }

.map-pos-29:before{ display: block; top: 67.1%; left: 85.2%; }   
.map-pos-30:before{ display: block; top: 67.1%; left: 93.9%; }   
.map-pos-31:before{ display: block; top: 61.7%; left: 93.9%; }
.map-pos-32:before{ display: block; top: 56.0%; left: 93.9%; }
.map-pos-33:before{ display: block; top: 59.4%; left: 85.2%; }

.map-pos-34:before{ display: block; top: 50.4%; left: 81.3%; }  
.map-pos-35:before{ display: block; top: 50.4%; left: 90.0%; }   
.map-pos-36:before{ display: block; top: 45.0%; left: 90.0%; }
.map-pos-37:before{ display: block; top: 39.3%; left: 90.0%; }
.map-pos-38:before{ display: block; top: 42.7%; left: 81.3%; }

.map-pos-39:before{ display: block; top: 25.4%; left: 81.3%; }  
.map-pos-40:before{ display: block; top: 32.4%; left: 81.3%; }   
.map-pos-41:before{ display: block; top: 33.8%; left: 89.6%; }
.map-pos-42:before{ display: block; top: 28.2%; left: 89.6%; }
.map-pos-43:before{ display: block; top: 21.4%; left: 89.6%; }
.map-pos-44:before{ display: block; top: 16.7%; left: 81.4%; } 

.map-pos-45:before{ display: block; top: 9.6%; left: 75.4%; }   
.map-pos-46:before{ display: block; top: 17.5%; left: 71.4%; }   
.map-pos-47:before{ display: block; top: 9.6%; left: 67.3%; }

.map-pos-48:before{ display: block; top: 9.6%; left: 61.5%; }   
.map-pos-49:before{ display: block; top: 17.5%; left: 57.3%; }   
.map-pos-50:before{ display: block; top: 9.6%; left: 53.1%; }


.btn-ask{
	display: inline-block; margin-top: 20px; height: 50px; width: 200px;
    padding: 0 0 0 70px; position: relative; color: #d26705;
    text-transform: uppercase; font-size: 20px; line-height: 50px;
}
.btn-ask:before{
	content: ''; display: block; width: 50px; height: 31px; 
	position: absolute; top: 9px; left: 0; opacity: 1;
    background-image: url(../images/favicon-o.svg); background-size: 100% 100%;
}


#main-popup{
	display: block; width: 160px; height: 160px; padding: 0; opacity: 0;
	position: fixed; top: 0; left: 0; z-index: 10; margin-top: -25px;
	color: #fff; text-align: center;
	border-radius: 100px; background: #d26705;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}
#main-popup:after{
	content: ''; display: block; width: 3px; height: 20px;
	position: absolute; bottom: -20px; left: 50%;	
	background: #d26705;	
	-moz-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	-o-transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	transform: translate(-50%,0); 
}
#main-popup > div{ 
	text-align: center; font-size: 1em; line-height: normal;
	width: 100%; height: auto; padding: 0 10px;
	position: absolute; top: 50%; left: 0;		
	-moz-transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%); 
}
#main-popup > div > *{ display: block; margin: 0; padding: 3px 0; }
#main-popup > div > h3{ font-size: 22px; line-height: 22px; }
#main-popup > div > p > .ap-area{ display: block; line-height: 25px; width: 100px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,1); padding: 0 3px; }
#main-popup > div > p > .ap-status{ 
	display: block; width: 100px; margin: 0 auto; line-height: 30px;
	text-transform: uppercase; font-weight: 600; 
	background: #fff; color: var(--c-main);
	background: var(--bg-black); color: #fff;
	background: none;
	border-top: 1px solid rgba(255,255,255,1); border-bottom: 1px solid rgba(255,255,255,1);
}
#main-popup.floor > div > p > .ap-area{ border-top: 0px solid; }
#main-popup.floor:after, #main-popup.floor{ background: #65ab12; }
#main-popup.floor.popup-inactive:after, #main-popup.floor.popup-inactive{ background: #ad0714; }

#MappingContent{ background: #fff; padding: 50px; position: relative; z-index: 1; padding-top: 70px; }
#MappingContent .inside-mapping{ width: 100%; position: relative; height: auto; max-width: 1300px; margin: 0 auto; }
#MappingContent .inside-mapping svg{ display: block; width: 100%; height: auto; }

#MappingContent.full-mapping-content .inside-mapping{ max-width: 100%; }

#MappingContent .inside-mapping svg path.under{ 
	fill: #d26705;	
	-webkit-transition: fill-opacity 200ms ease-in-out;
	-moz-transition: fill-opacity 200ms ease-in-out;
	-ms-transition: fill-opacity 200ms ease-in-out;
	-o-transition: fill-opacity 200ms ease-in-out;
	transition: fill-opacity 200ms ease-in-out; 
}
#MappingContent .inside-mapping svg path.over{ 
	fill: #d26705; fill-opacity: 0; cursor: pointer;
}
#MappingContent .inside-mapping svg path.under.o-active{ fill: #65ab12; fill-opacity: 0.2; }
#MappingContent .inside-mapping svg path.under.o-inactive{ fill: #ad0714; fill-opacity: 0.2; }

#MappingContent .inside-mapping svg path.under.enabled.o-active{ fill: #65ab12; fill-opacity: 0.5; }
#MappingContent .inside-mapping svg path.under.enabled.o-inactive{ fill: #ad0714; fill-opacity: 0.5; }

#MappingContent .inside-mapping svg path.under.o-parking.o-active{ fill: #65ab12; fill-opacity: 0.2; }
#MappingContent .inside-mapping svg path.under.o-parking.o-inactive{ fill: #ad0714; fill-opacity: 0.2; }

#MappingContent .inside-mapping svg path.under.o-parking.enabled.o-active{ fill: #65ab12; fill-opacity: 0.5; }
#MappingContent .inside-mapping svg path.under.o-parking.enabled.o-inactive{ fill: #ad0714; fill-opacity: 0.5; }

#MappingContent .garage-mapping{ max-width: 1800px; }
#MappingContent .full-mapping{ max-width: 1800px; }

.object-detail .mapping-wrapper{ position: relative; }
.object-detail .mapping-wrapper:after, #MappingContent:before{
	content: ''; display: block; width: 60px; height: 60px; overflow: hidden;
	background: url(../images/compass-belgravia.png?v=1) center center no-repeat;
	background-size: 100% 100%;
	position: absolute; top: 15px; right: 15px; z-index: 998;
}
.object-detail .mapping-wrapper.compass-pos1:after, #MappingContent.compass-pos1:before{ background-image: url(../images/compass-1.png?v=1); }
.object-detail .mapping-wrapper.compass-pos2:after, #MappingContent.compass-pos2:before{ background-image: url(../images/compass-2.png?v=1); }
/*#MappingContent.garage-mapping-content:before{ background-image: url(../images/compass-belgravia.png?v=1); }
#MappingContent.full-mapping-content:before{ background-image: url(../images/compass-belgravia.png?v=1); }*/



svg{ font: 500 22px Tahoma, "Trebuchet MS", sans-serif; }
svg text tspan{
	font-size: inherit; fill: #000;
	font-weight: inherit; 
}
/* .small .big */
svg text tspan.capT{ font-size: 30px; font-weight: 600; fill: #ff6e00; }
svg text tspan.capTsmall{ font-size: 28px; }
svg text tspan.capTg{ fill: #58595b; }
svg text tspan.ApsN{ font-size: 30px; font-weight: 600; fill: #fff; }
svg text tspan.ApsN:first-of-type{ font-size: 36px; }
svg text tspan.storageN{ font-size: 24px; font-weight: 600; fill: #fff; }


#MappingContent svg{ font-size: 10px; font-weight: 500; }
#MappingContent svg text tspan.capT{ font-size: 15px; }
#MappingContent svg text tspan.capTsmall{ font-size: 13px; }
#MappingContent svg text tspan.ApsN{ font-size: 11px; }
#MappingContent svg text tspan.ApsN:first-of-type{ font-size: 13px; }

#MappingContent svg text tspan.storageN{ font-size: 10px; font-weight: 400; }

#MappingContent.mapping-content1300 svg{ font-size: 15px; font-weight: 500; }
#MappingContent.mapping-content1300 svg text tspan.capT{ font-size: 20px; }
#MappingContent.mapping-content1300 svg text tspan.capTsmall{ font-size: 17px; }
#MappingContent.mapping-content1300 svg text tspan.ApsN{ font-size: 16px; }
#MappingContent.mapping-content1300 svg text tspan.ApsN:first-of-type{ font-size: 20px; }


.mapping-wrapper-500 svg text tspan{ font-size: 30px; }
.mapping-wrapper-500 svg text tspan.ApsN{ font-size: 40px; }
.mapping-wrapper-500 svg text tspan.ApsN:first-of-type{ font-size: 44px; }

.mapping-wrapper-600 svg text tspan{ font-size: 26px; }
.mapping-wrapper-600 svg text tspan.ApsN{ font-size: 35px; }
.mapping-wrapper-600 svg text tspan.ApsN:first-of-type{ font-size: 42px; }

.mapping-wrapper-700 svg text tspan{ font-size: 22px; }
.mapping-wrapper-700 svg text tspan.ApsN{ font-size: 26px; }
.mapping-wrapper-700 svg text tspan.ApsN:first-of-type{ font-size: 30px; }

.mapping-wrapper-850 svg text tspan{ font-size: 22px; }
.mapping-wrapper-850 svg text tspan.ApsN{ font-size: 26px; }
.mapping-wrapper-850 svg text tspan.ApsN:first-of-type{ font-size: 30px; }

.mapping-wrapper-1024 svg text tspan{ font-size: 16px; }
.mapping-wrapper-1024 svg text tspan.ApsN{ font-size: 20px; }
.mapping-wrapper-1024 svg text tspan.ApsN:first-of-type{ font-size: 24px; }


#MappingContent.garage-mapping-content svg{ font-size: 14px; font-weight: 500; }


@media screen and (max-width: 1440px) {
	.object-detail .info{ padding-left: 30px; padding-right: 30px; width: 50%;  }
	.mapping-wrapper{ width: 50%; }
	
	.object-detail .mapping-wrapper:after, #MappingContent:before{
		width: 50px; height: 50px; top: 10px; right: 10px;
	}
}
@media screen and (max-width: 1024px) {
	#MappingContent{ padding-left: 20px; padding-right: 20px; }
	#main-popup{ width: 140px; height: 140px; border-radius: 70px; }
	.object-detail .info, .mapping-wrapper{ width: 100%; }
	.object-detail .info { padding-left: 15px; padding-right: 15px; padding-top: 15px;  padding-bottom: 15px;	}
	
	#main-popup > div > h3{ font-size: 20px; line-height: 20px; }
	
	.object-detail .mapping-wrapper:after, #MappingContent:before{
		width: 30px; height: 30px; top: 10px; right: 10px;
	}
	.mapping-wrapper{ padding-right: 50px; padding-bottom: 10px; padding-left: 15px; }
}
@media screen and (max-width: 640px) {
	.object-detail .mapping-wrapper:after, #MappingContent:before{
		width: 30px; height: 30px; top: 5px; right: 5px;
	}
}
@media screen and (max-width: 500px) {
	#MappingContent{ padding-left: 30px; padding-right: 30px; }
}



@media screen and (max-width: 400px) {
	.small-map{ width: 100%; height: 0; padding-top: 100%; margin-bottom: 20px; }
	.small-map:before{ width: 10px; height: 10px; border-radius: 5px; margin-left: -5px; margin-top: -5px; }
}