#controls {
        position: absolute;
        bottom: 0;
        z-index: 2;
        text-align: center;
        width: 100%;
        padding-bottom: 3px;
    }
    .ctrl {
        padding: 2px;
        width: 22px;
        text-align: center;
        background: #fff;
        cursor: pointer;
		margin-left: 5px;
		border-radius: 100%;
		border: 1px solid #ddd;
		font-weight: bold;
    }
    .ctrl:hover {
        background: #f8f8f8;
    }
	.hotspot-toggle {
		display: none;
	}

	div.pnlm-tooltip span {
		padding: 10px;
		font-size: 90%;
	}
	
	// Pulsing button
.button {
	  background: red; 
	  border-radius: 100%;
	  height: 20px;
	  width: 20px;

} 
.custom-hotspot {
        height: 15px;
        width: 15px;
        background: transparent;
		border-radius: 100%;
		position: absolute;
    }

    .pulse:before,
    .pulse:after {
      content: "";
      border-radius: 100%;
      display: block;
      height: 140%;
      position: absolute;
	  top: -20%;
      left: -20%;
      width: 140%;
      box-shadow: inset 0 0 0 2px #ddd;
      transition: all ease-in-out 300ms;
      opacity: 0
    }
  
    .pulse:nth-child(2n+1) {
        animation-delay: 200ms
      }
      
    .pulse:before {
      animation: pulse-long;
      animation-iteration-count: infinite;
      animation-duration: 1200ms;
      opacity: 1;
    }
  
    .pulse:hover {
      box-shadow: inset 0 0 10px 0 #000; }

        .pulse:before,
        .pulse:after {
          opacity: 1;
        }
    
        .pulse:before {
          animation: pulse-short;
          animation-iteration-count: infinite;
          animation-duration: 1800ms;
          opacity: .7;
        }
   
@keyframes pulse-short {
    0% {
      transform: scale(1);
    }
    60% {
      transform: scale(2)
    }
    100% {
      opacity: 0;
    }
}

@keyframes pulse-long {
    0% {
      transform: scale(1)
    }
    60% {
      transform: scale(1.4)
    }
    100% {
      opacity: 0;
    }
}