#mapouter {
  overflow: hidden;
  position: relative;

}

#mapouter .back {
  position: absolute;
  top: -100px;
  left: 10px;
  background: #e18f3f;
  padding: 10px;
  border-radius: 50%;
  line-height: 0;
  transition: background 0.3s, top 0.3s, opacity 0.3s;
  z-index: 9;
  opacity: 0;
}

#mapouter .back:hover {
  background: #B36D28;
}

#map .area { fill: #52a1ca !important; }
#map .area:hover { fill: #e18f3f !important; }

#mapouter.zoomed .back { top: 10px; opacity: 1;}

#mapouter .back path {
  fill: #fff;
}

#map {
  transition: transform 0.3s, transform-origin 0.4s;
  font-family: "Open Sans", sans-serif;
  background: #fff;
  z-index: 8;
  position: relative;
}

#map g.layer { display: inline !important; }

#map .count circle {
  fill: #fff !important;
  stroke: #529fc8 !important;
  opacity: 1 !important;
  transition: fill 0.3s;
}

#map .count:hover circle {
  fill: #b6e1f2 !important;
}

#map .count {
  cursor: pointer;
}

#map .empty {
  fill: #aaa !important;
  cursor: default !important;
}

#mapouter.zoomed #map .count {
  display: none !important;
}

#mapouter .col1 { transition: opacity 0.3s, transform 0.3s; }

#mapouter.zoomed .col1 { opacity: 0 }
#mapouter.zoomed .col1 { opacity: 0; transform: translateX(200%); }
#mapouter.zoomed .col1:first-child { opacity: 0; transform: translateX(-200%); }


#mapouter.zoomed #map { transform: scale(3); }

#mapouter.zoomed #map .counter {
  display: none;
}

#map .marker { stroke: #fff !important; fill: #e18f3f !important; opacity: 1 !important; }
#mapouter.zoomed #map .marker { stroke: none !important; fill: #fff !important; opacity: 1 !important; }

#map .name,
#map .line,
#map .button {
  display: none !important;
}

#map .line {
  opacity: 1 !important;
  fill: #e18f3f !important;
}

#map .button tspan { fill: #fff !important; }

#map .name tspan { fill: #000 !important; }

#mapouter.zoomed #map .area {
  fill: #52a1ca;
  cursor: default;
}


#mapouter.area0 #map { transform-origin: 100% 80%; }
#mapouter.area1 #map { transform-origin: 80% 70%; }
#mapouter.area2 #map { transform-origin: 80% 90%; }
#mapouter.area3 #map { transform-origin: 60% 40%; }
#mapouter.area4 #map { transform-origin: 60% 55%; }
#mapouter.area5 #map { transform-origin: center 120px; }

#mapouter.area9 #map { transform-origin: 70% 70%; }
#mapouter.area10 #map { transform-origin: 80% 50%; }

#mapouter.zoomed .area { fill: #aaa !important; }

#mapouter.area0 #map_0,
#mapouter.area1 #map_1,
#mapouter.area2 #map_2,
#mapouter.area3 #map_3,
#mapouter.area4 #map_4,
#mapouter.area5 #map_5,
#mapouter.area6 #map_6,
#mapouter.area7 #map_7,
#mapouter.area8 #map_8,
#mapouter.area9 #map_9,
#mapouter.area10 #map_10 {
  fill: #52a1ca !important;
}

#mapouter.zoomed .marker { display: none !important; }

#mapouter.zoomed.area0 #map .name.area0,
#mapouter.zoomed.area0 #map .button.area0,
#mapouter.zoomed.area0 #map .line.area0,
#mapouter.zoomed.area0 #map .marker.area0,

#mapouter.zoomed.area1 #map .name.area1,
#mapouter.zoomed.area1 #map .button.area1,
#mapouter.zoomed.area1 #map .line.area1,
#mapouter.zoomed.area1 #map .marker.area1,

#mapouter.zoomed.area2 #map .name.area2,
#mapouter.zoomed.area2 #map .button.area2,
#mapouter.zoomed.area2 #map .line.area2,
#mapouter.zoomed.area2 #map .marker.area2,

#mapouter.zoomed.area3 #map .name.area3,
#mapouter.zoomed.area3 #map .button.area3,
#mapouter.zoomed.area3 #map .line.area3,
#mapouter.zoomed.area3 #map .marker.area3,

#mapouter.zoomed.area4 #map .name.area4,
#mapouter.zoomed.area4 #map .button.area4,
#mapouter.zoomed.area4 #map .line.area4,
#mapouter.zoomed.area4 #map .marker.area4,

#mapouter.zoomed.area5 #map .name.area5,
#mapouter.zoomed.area5 #map .button.area5,
#mapouter.zoomed.area5 #map .line.area5,
#mapouter.zoomed.area5 #map .marker.area5,

#mapouter.zoomed.area6 #map .name.area6,
#mapouter.zoomed.area6 #map .button.area6,
#mapouter.zoomed.area6 #map .line.area6,
#mapouter.zoomed.area6 #map .marker.area6,

#mapouter.zoomed.area7 #map .name.area7,
#mapouter.zoomed.area7 #map .button.area7,
#mapouter.zoomed.area7 #map .line.area7,
#mapouter.zoomed.area7 #map .marker.area7

#mapouter.zoomed.area8 #map .name.area8,
#mapouter.zoomed.area8 #map .button.area8,
#mapouter.zoomed.area8 #map .line.area8,
#mapouter.zoomed.area8 #map .marker.area8,

#mapouter.zoomed.area9 #map .name.area9,
#mapouter.zoomed.area9 #map .button.area9,
#mapouter.zoomed.area9 #map .line.area9,
#mapouter.zoomed.area9 #map .marker.area9,

#mapouter.zoomed.area10 #map .name.area10,
#mapouter.zoomed.area10 #map .button.area10,
#mapouter.zoomed.area10 #map .line.area10,
#mapouter.zoomed.area10 #map .marker.area10 {
  display: inherit !important;
}
#map .button rect { fill: #e18f3f !important; transition: fill 0.3s; opacity: 1 !important}
#map .button:hover rect { fill: #B36D28 !important }
#map .button text { fill: #fff !important; }
#map .button { cursor: pointer; }

.mapmobileheader { display: none; }

@media (max-width: 800px) {
  #mapouter .col1 { display: none !important; }
  #mapouter .empty { display: inline !important; }
  #map { transform: scale(1.2); transform-origin: 90% 60%; }
  .mapmobileheader { display: block; text-align: center; padding: 10px; }
}