.hospital-area  h3 {
  font-size: 1.6em;
  font-weight: 700;
  margin-left: -10px;
}
.hospital-area .area-plan {
  position: relative;
  margin-bottom: 1.5em;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}
.hospital-area .area-points {
  font-size: 1.1em;
  margin-left: 1.25em;
  margin-bottom: 2em;
}
.hospital-area li {
  list-style: none;
  line-height: 1.8;
}
.hospital-area a:hover {
  font-weight: 600;
}

.hotspots-panel {
  flex: 1 0 100%;
}

.hotspots-panel > img {
  width: 100% !important;
  height: auto !important;
}
.hotspots-panel > .hotspot {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  font-size: 1.8em;
  font-weight: 900;
  border-radius:50%;
  transition:all .3s ease-in-out;
  transform: translate(-50%, -50%);
}

.hotspots-minipanel {
  position: relative;
  max-width: 80%;
  margin-top: 1.5em;
}
.hotspots-minipanel > img {
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  filter: opacity(0.5);
}
.hotspots-minipanel > .hotspot {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 1.65em;
  font-weight: 800;
  border-radius:50%;
  transition:all .3s ease-in-out;
  background-color: #F44336;
  box-shadow: 0px 0px 0px 15px rgba(178,22,18,0.5);
  transition:all .3s ease-in-out;
  animation: 2s infinite pulsingSpot, 2s infinite styleSpotRed;
}

.hotspot.spot-entrance {
  background-color: #8ac63b;
  box-shadow: 0px 0px 0px 15px rgba(138,198,59,0.5);
  animation: 2s infinite pulsingSpot, 1.3s infinite styleSpotGreen !important;
}

.group1 {
  border: 4px solid #e74c3c;
  background-color: #fff !important;
}
.group2[data-bg-color] {
  color:#000;
  background-color: #e69632;
}

.zoomIn {
/*	transform: scale(1.5);*/
	animation: 1s infinite alternate pulsing;
}
.hoverMap {
	opacity: 0.5;
}
.hotspots-panel  > .hotspot:hover {}

.area-plan {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.area-points {
  list-style: none !important;
  text-indent: -16px;
  margin-left: 40px;
}
.area-points li::before {
  display: inline-block;
  content: attr(data-mark) '. ';
  margin-right: 10px;
  font-weight: 800;
}

.area-legend {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.area-legend > div {
  flex: 1 0 50%;
  padding-left: 40px;
}

@keyframes styleSpotGreen {
  0% {
    box-shadow: 0px 0px 0px 15px rgba(138,198,59,0.5);
  }
  50% {
    box-shadow: 0px 0px 0px 15px rgba(138,198,59,0.15);
  }
  100% {
    box-shadow: 0px 0px 0px 15px rgba(138,198,59,0.5);
  }
}

@keyframes styleSpotRed {
  0% {
    box-shadow: 0px 0px 0px 15px rgba(178,22,18,0.5);
  }
  50% {
    box-shadow: 0px 0px 0px 15px rgba(178,22,18,0.15);
  }
  100% {
    box-shadow: 0px 0px 0px 15px rgba(178,22,18,0.5);
  }
}

@keyframes pulsingSpot {
  0% {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.5);
  }
  50% {
    opacity: .8;
    transform: translate(-50%,-50%) scale(0.75);
  }
  100% {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.5);
  }
}


@keyframes pulsing {
  from {transform: translate(-50%, -50%) scale(0.8);}
  to {transform: translate(-50%, -50%) scale(2.5);}
}

@media only screen and (max-width: 500px) {
	.hotspots-panel > .hotspot {
		width: 15px;
    height: 15px;
    font-size: 0.8rem;
    border-width: 2px;
	}
  .area-legend > div {
    flex: 1 0 100%;
  }
}
@media only screen and (max-width: 768px) {
  .hotspots-minipanel {
    width: 100%;
  }
  .hotspots-panel > .hotspot {
    width: 20px;
    height: 20px;
    font-size: 1rem;
    border-width: 2px;
  }
}