@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap');
body{
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    overflow: hidden;
}
.mapsiframe{
	height: calc(100vh + 48px);
	position: relative;
	border: 0;
	top: -48px;
}
.mapsiframe iframe{
	width: 100%;
	height: 100%;
}
.sitelocation{
	position: absolute;
	left: 25%;
	font-size: 20px;
	top: 10vh;
	color: #fff;
}
.masterplan{
	position: relative;
    top: 5vh;
    left: 5vw;
}
.masterplan a{
    cursor: pointer;
}
.logo{
	position: absolute;
    z-index: 1;
    left: 0;
    max-width: 9rem;
}
.plottingbg{
	position: absolute;
	width: 50vw;
}
area:hover{
    background-color: red;
    opacity: 0.5;
}
.padding-0{
    padding-right:0;
    padding-left:0;
}
.image-map, .image-map *{
    border: 1px dotted #000 !important;
    cursor: pointer;
}
.st0{
    fill:#515151;
    stroke:#998181;
    stroke-miterlimit:10;
}
.st1{
    fill:none;
    stroke:#998181;
    stroke-miterlimit:10;
}
.st2{
    fill:none;
    stroke:#998181;
    stroke-miterlimit:10;
    stroke-dasharray:19.6606,19.6606;
}
.st3{
    fill:none;
    stroke:#998181;
    stroke-miterlimit:10;
    stroke-dasharray:20,20;
}
.st4{
    fill:#C9C3C3;
    stroke:#998181;
    stroke-miterlimit:10;
}
.plotmap *{
    transition: .3s fill ;
    fill: #E2D1BC;
    border: 1px solid #BFAC97 !important;
    font-size: 0.7rem;
}
.plotmap *:hover {
    fill: #293A86;
}
.soldplot, .soldplot *{
    fill: #E69890;
}

.blurbg{
    background-image: url('../image/blurbg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.selected{
    fill:#293A85;
}
.modal-dialog{
    max-width: 800px;
}
.modal-header{
    border-bottom: 0;
}
.plotnumnber{
    font-weight: 100;
    font-size: 3rem;
    text-transform: uppercase;
}
.close{
    font-size: 2.8rem;
    font-weight: 100;
    line-height: 1;
    color: #c1c1c1;
    text-shadow: 0 1px 0 #fff;
}
.modal-body{
    padding: 2rem 1rem 1rem 3rem;
}
.status{
    font-weight: 100;
    font-size: 14px;
    padding: 0.5rem 1rem; 
    color: #fff;
}
.available{
    background-color: #4CD892;
}
.sold{
    background-color: #D66B4D;
}
.detail{
    color: #293A86;
    font-size: 22px;
}
.icon{
    width: 55px;
    float: left;
}
.area{
    padding-top: 70px;
}
.facing{
    padding-top: 105px;
}
.stitle{
    color:#8D8E93;
    font-size: 18px;
    padding-left: 70px;
    font-weight: 100;
    line-height: 85px;
}
.tabledata tr td{
    padding-right: 10px;
}
.viewmore{
    color: #fff;
    padding-top: 3rem;
    font-size: 0.8rem;
}
.projectdetails{
    position: absolute;
    top: 0;
    right: 10vw;
    border: 1px solid #fff;
    border-radius: 5px;
    color: #fff !important;
    padding: 7px 15px;
    font-size: 13px;
}

svg a text, svg a text tspan{
    fill: #848484 !important;
}

.plotmaps{
    font-size: 2rem !important;
}

.roadcol{
    fill: #848484 !important;
}

.st5{
    fill:none;
    stroke:#998181;
    stroke-miterlimit:10;
    stroke-dasharray:20,20;
}

@media(max-width: 600px){
    body{
        height: 100vh;
    }
    .googlemaps{
        display: none;
    }
    body > .container-fluid, body > .container-fluid > .row{
        height: 100%;
    }
    .masterplan{
        position: static;
        padding: 2rem 0.5rem 1rem 0.5rem;
        height: 100%;
    }
    .logo{
        position: static;
    }
    .viewmore{
        padding-top: 0;
    }
    svg{
        width: 100%;
    }
    .modal-body{
        padding: 1rem;
        height: 95vh;
    }
    .plotnumnber{
        font-size: 2rem;
    }
    .icon{
        display: none;
    }
    .stitle{
        padding-left: 0;
        line-height: 35px;
    }
    .detail{
        font-size: 1rem;
    }
    .area{
        padding-left: 0;
        padding-right: 0;
    }
    .projectdetails{
        position: static;
    }
}