body, html {overflow-x: hidden; height: 100%;margin:0;padding:0;font-family: 'Roboto', sans-serif;}
svg, g, img, option, a, select{outline: none;}
img {width:100%;}
.map{position:relative;overflow-x:auto;height:100%; }
body, .map svg, .fixed-top h1{opacity: 0;}
#map{
    transform: translateX(1px);
}
.fixed-top h1{
    font-family: 'Roboto', sans-serif;
    font-size:4rem;
    font-weight: 100;
    text-transform: uppercase;
    text-shadow: 2px 2px 1px #00100090;
    display:none;
}
.fixed-bottom h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 4rem;
  text-shadow: 2px 2px 1px #00100090;
  text-transform: uppercase;
}
.fixed-top h1 b{font-weight: 500;}

@media (max-width: 720px) {
  .fixed-top h1, .fixed-bottom h1 {
    font-size: 2.5rem;
  }
}

@media (max-width: 480px) {
  .fixed-top h1, .fixed-bottom h1 {
    font-size: 8.234vw;
  }
}
.h_overlay { 
    position: absolute;
    top: 80px;
    right: 0;
    text-align: center;
    color: white;
}

@media (max-width: 720px) {
  .h_overlay {
    top: 110px;
  }
}
svg{position: absolute;top:0;left:0;width:100%;}
.area, .sector, .st3{transition: 200ms;}
.roads, .st0{transition: 200ms; fill:#a69773; stroke-width: 0;opacity: 0.7;}
/* ---------------  .roads:hover, .st0:hover{opacity: 1; fill:darkgray; transition: 200ms;}   -----------*/

.prud {
    fill: lightskyblue;
    opacity: 0.2;
}
#roads text{fill:white;}
.sector, .st3{fill: white;cursor: pointer}
.st1 {
    opacity: 1;
    stroke: #e6dfdf;
    stroke-width: 2;
}
.sector_text, .st2{font-family:'Arial';}
#sectors g, #sub_sectors g{fill:#929693; transition: 200ms;cursor: pointer}
#sectors g:hover .st1, #sub_sectors g:hover .st1{fill:#ffb934; transition: 200ms; opacity: 1; stroke:#ffb934;}
#sectors g:hover .st2, #sub_sectors g:hover .st2{fill:#262626; transition: 200ms; stroke: #262626;}

#sub_sectors .st1 {
  stroke: white;
  stroke-width: 6;
}
#sub_sectors .st2 {
  font-size: 2em;
}

#sectors g.reserve {
  fill: #1b5daa;
}

#sectors g.forsale {
  fill: #138629;
}

#sectors g.sold {
  fill: #929693 ;
}

#sectors g.preorder {
  fill: #ffaa0a;
}

.preorder text{fill: #2a261e;}

#sectors .st2{font-size:0.8em;}

.head{width:320px;}
.head > div {
    background: #00000090;
}
.logo.col-3 {
  max-width: 103px;
  width: 103px;
  flex: 0 0 auto;
}
.logo a {
  background: white;
  padding: 0 10%;
  height: 90px;
  width: 100%;
}
.logo img {
  width: 100%;
  margin: 0 auto;
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.contacts.col-9 {max-width: fit-content;} 
.contacts a{display: block; color: white;}
.contacts a:hover{color: white;}
.contacts > div {
    margin: 0 auto;
}

.menu button {
    background: url(././img/menu.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    background-color: transparent;
    text-indent: 1000%;
    overflow: hidden;
    box-shadow: none;
    padding: 0 !important;
    margin: 0 !important;
}
.svg_popover{
  background: rgba(0,20,0,0.7) !important;
  z-index: 1200 !important;
}

.svg_popover > div
{
  padding: 5%;
  min-width: 240px;
}
.svg_popover span {color:white}
.svg_popover.bs-popover-auto[x-placement^="top"] > .arrow::after,
.svg_popover.bs-popover-top > .arrow::after,
.svg_popover.bs-popover-auto[x-placement^="top"] > .arrow::before,
.svg_popover.bs-popover-top > .arrow::before{
    border-top-color:#00000090}
.svg_popover.bs-popover-auto[x-placement^="bottom"] > .arrow::before,
.svg_popover.bs-popover-bottom > .arrow::before,
.svg_popover.bs-popover-auto[x-placement^="bottom"] > .arrow::after,
.svg_popover.bs-popover-bottom > .arrow::after{
    border-bottom-color:#00000090}
.svg_popover.bs-popover-auto[x-placement^="left"] > .arrow::before,
.svg_popover.bs-popover-left > .arrow::before,
.svg_popover.bs-popover-auto[x-placement^="left"] > .arrow::after,
.svg_popover.bs-popover-left > .arrow::after{
    border-left-color:#00000090}
.svg_popover.bs-popover-auto[x-placement^="right"] > .arrow::before,
.svg_popover.bs-popover-right > .arrow::before,
.svg_popover.bs-popover-auto[x-placement^="right"] > .arrow::after,
.svg_popover.bs-popover-right > .arrow::after{
    border-right-color:#00000090}

.img-con {
  text-align: center;
  position: relative;
  padding-bottom: 50px;
}
.status {
  position: absolute;
  top: 10px;
  right: 10px;
}
.forsale {
  background: #35b121;
  display: inline-block;
  border-radius: 12px;
  padding: 2px 15px 3px 20px;
}
.reserve, .preorder {
  background: #ebd52b;
  display: inline-block;
  border-radius: 12px;
  padding: 2px 15px 3px 20px;
  color: #212121 !important;
}
.sold {
  background: #eb2b2b;
  display: inline-block;
  border-radius: 12px;
  padding: 2px 15px 3px 20px;
}
.forsale:before {
  content: "";
  position: absolute;
  background: url(././img/for_sale.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  height: 40px;
  background-size: contain;
  left: -22px;
  top: -5px;
}
.sold:before {
  content: "";
  position: absolute;
  background: url(././img/sold.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  height: 40px;
  background-size: contain;
  left: -22px;
  top: -5px;
}
.reserve:before, .preorder:before {
  content: "";
  position: absolute;
  background: url(././img/reserve.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  height: 40px;
  background-size: contain;
  left: -22px;
  top: -5px;
}
.sector_egrn a {
    color: #69eaff;
    text-decoration: underline;
    padding-top: 10px;
    display: block;
}

.sector_egrn a:hover{color:white;}

.call {
    background: #3eb921;
    border: 1px solid darkgreen;
    border-radius: 20px;
    color: white;
    display: table;
    text-transform: uppercase;
    padding: 0px 15px 12px 25px;
    margin: 25px auto 15px;
    transition: 200ms
}
.call:hover{background: #2d8618; border-width: 2px; color: white;}
.call::before {
    content: "";
    background: url(././img/call.png);
    background-repeat: repeat;
    background-size: auto;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    position: relative;
    top: 10px;
    left: -10px;
}

.sector_numb {
  font-size: 1.8em;
}
.sector_sqrt {
  font-size: 1.4em;
}
.fixed-bottom .h_overlay.text-left.left-side{top:-150px;right:unset;}

#section_1, #section_2, #section_3 {
  cursor: pointer;
}
.section_overlay {
  position: absolute;
  top: 0;
  background: #00000090;
  right: 0;
  z-index: 2000;
  padding: 10px;
}

.overlay_container a, .overlay_container a:hover{
  color: white;
}