html, body {
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}

#viewer{
  width:100%;
  height:100%;
}

.hotspot{
  width:80px;
  height:80px;

  background:#ffffff50;

  border-radius:50%;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
}

.hotspot-DOOR{
  background: url("../assets/icons/hotspots/DOOR.png") no-repeat center;
  background-size: contain;
}

.hotspot-INFO{
  background: url("../assets/icons/hotspots/INFO.png") no-repeat center;
  background-size: contain;
}

.hotspot-FORWARD{
  background: url("../assets/icons/hotspots/FORWARD.png") no-repeat center;
  background-size: contain;
}

.hotspot-DOWN{
  background: url("../assets/icons/hotspots/DOWN.png") no-repeat center;
  background-size: contain;
}

.hotspot-UP{
  background: url("../assets/icons/hotspots/UP.png") no-repeat center;
  background-size: contain;
}

.hotspot-POINT{
  background: url("../assets/icons/hotspots/POINT.png") no-repeat center;
  background-size: contain;
}