@font-face {
  font-family: "Helvetica";
  src: url("../font/helvetica.otf") format("opentype");
}
@font-face {
  font-family: "Andalemk";
  src: url("../font/andalemk.ttf");
}
@font-face {
  font-family: "28 Days Later";
  src: url("../font/28dayslater.ttf");
}
body {
  min-width: 1024px;
  font-family: "Helvetica";
}
.mapconteiner {
  position: relative;
  height: 100vh;
}
.mapconteiner #map {
  background: white;
  height: 100vh;
}
.mapconteiner #map .awesome-marker svg {
  font-size: 17px;
  margin-top: 10px;
}
.mapconteiner #map .awesome-marker svg path {
  fill: white;
}
.mapconteiner #map .leaflet-control-container,
.mapconteiner #map .leaflet-popup-tip-container {
  display: none;
}
.mapconteiner #map .leaflet-popup-content-wrapper {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  margin-bottom: -55%;
}
.mapconteiner #map .leaflet-popup-content-wrapper h2 {
  font-size: 16px;
  font-family: "Andalemk";
}
.mapconteiner #map .leaflet-popup-content-wrapper p {
  margin: 5px 0;
  font-family: "Helvetica";
}
.mapconteiner .menu {
  position: absolute;
  left: 0;
  top: 0;
  width: 17.7%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999999999;
  color: white;
}
.mapconteiner .menu a img {
  margin: 20px 0 15px 40px;
}
.mapconteiner .menu h1 {
  width: 70%;
  border-radius: 0 13px 13px 0;
  font-weight: bold;
  padding: 3px 0 3px 10px;
  text-transform: uppercase;
  font-family: "Andalemk";
  margin-top: 10px;
}
.mapconteiner .menu h1 svg {
  margin-right: 10px;
  width: 20px;
}
.mapconteiner .menu h1:hover {
  cursor: pointer;
}
.mapconteiner .menu p {
  cursor: pointer;
  font-family: "Helvetica";
  margin: 5px 0 5px 40px;
}
.mapconteiner .menu > div div {
  display: none;
}
.mapconteiner .menu > div.active div {
  display: block;
}