.hotspot-wrapper{display:inline-block;position:relative}.hotspot-image{border-radius:16px;display:block;max-width:100%}.hotspot{position:absolute;transform:translate(-50%,-50%);z-index:2}.hotspot-dot{align-items:center;background:#00bcd4;box-shadow:0 0 0 0 rgba(0,188,212,.5);color:#fff;cursor:pointer;display:flex;font-size:22px;justify-content:center;transition:.3s}.hotspot-dot,.hotspot-dot:after{border-radius:50%;height:34px;width:34px}.hotspot-dot:after{animation:pulse 2s infinite;border:2px solid #00bcd4;content:"";position:absolute}@keyframes pulse{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(1.8)}to{opacity:0}}.hotspot-popup{background:#fff;border-radius:10px;bottom:140%;box-shadow:0 10px 25px rgba(0,0,0,.15);left:50%;opacity:0;padding:14px 16px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:.3s;width:220px}.hotspot-popup h4{font-size:16px;margin:0 0 6px}.hotspot-popup p{font-size:14px;line-height:1.4;margin:0}.hotspot-popup:after{border:8px solid transparent;border-top-color:#fff;content:"";left:50%;position:absolute;top:100%;transform:translateX(-50%)}.hotspot.active .hotspot-popup{opacity:1;pointer-events:auto}.hotspot.active .hotspot-dot{transform:scale(1.15)}.hotspot-wrapper.dim .hotspot{opacity:.25}.hotspot-wrapper.dim .hotspot.active{opacity:1}