.map-container {
  position: relative;
}
.svg {
  position: absolute;
  left:0; top:0; width:100%; height:100%;
}
.map {
  position: relative;  
}
/**New css for tooltip**/
.land {
  fill: #0093a9;
  fill-opacity: 1;
  stroke: white;
  stroke-opacity: 1;
  stroke-width: 0.5;
}
.land:hover {
  fill: #008399 !important;
}
.water {
  fill: #00c1D2;
  fill-opacity: 1;
  stroke: white;
  stroke-opacity: 1;
  stroke-width: 0.5;
  }
.tooltiptext {
  position: fixed;
  display: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border:#d3d3d3 solid 1px;
  background: #fff;
  color: #000;
  font-family: 'Comfortaa', 'Verdana';
  font-size: 10px;
  padding: 8px;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 1;
}
.tooltiptext.active {
  display: initial;
}
.point {
  cursor: pointer;
  position: absolute;
  width: 24px;
  height: 24px;
  font-family: 'Roboto', sans-serif;
  background-color: #fff;
  border-radius: 50%;
  transition: all 0.3s ease;
  will-change: transform, box-shadow;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 rgba(255,255,255, 0.4);
  animation: pulse 3s infinite;
}
.point:hover {
  animation: none;
  transform: translate(-50%, -50%) scale3D(1.35, 1.35, 1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

@-webkit-keyframes pulse {
  0% {
 -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.5);
}
  70% {
 -webkit-box-shadow: 0 0 0 20px rgba(255,255,255, 0);
}
  100% {
 -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
  }
}
@keyframes pulse {
  0% {
 -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0.5);
 box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
}
  70% {
 -moz-box-shadow: 0 0 0 20px rgba(255,255,255, 0);
 box-shadow: 0 0 0 20px rgba(255,255,255, 0);
}
  100% {
 -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
 box-shadow: 0 0 0 0 rgba(255,255,255, 0);
 }
}

/**Objects of work**/
.aktau { top: 70%; left: 13%; }
.aktau::after { position: absolute; left: 3px; content: '\f013'; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; font-weight: 900; width: 20px; height: 20px; }

.aktobe { top: 40%; left: 28%; }
.aktobe::after { position: absolute; left: 3px; content: '\f013'; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; font-weight: 900; width: 20px; height: 20px; }

.atyrau { top: 52%; left: 13%; }
.atyrau::after { position: absolute; left: 3px; content: '\f013'; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; font-weight: 900; width: 20px; height: 20px; }

.shymkent { top: 80%; left: 54%; }
.shymkent::after { position: absolute; left: 3px; content: '\f013'; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; font-weight: 900; width: 20px; height: 20px; }


.kostanay { top: 16%; left: 41%; }
.kostanay::after { position: absolute; left: 3px; content: '\f013'; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; font-weight: 900; width: 20px; height: 20px; }

.uralsk { top: 30%; left: 12%; }
.uralsk::after { position: absolute; left: 3px; content: '\f013'; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; font-weight: 900; width: 20px; height: 20px; }

.ekibastuz { top: 26%; left: 71%; }
.ekibastuz::after { position: absolute; left: 3px; content: '\f013'; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; font-weight: 900; width: 20px; height: 20px; }