/* textInfo.css */



#textInfo {

  margin-left: -15px;  /* was -30px */

  margin-top: -15px;   /* was -30px */

}

#textInfo:hover {

  z-index: 3;

}



#textInfo .tooltip-content {

  position: absolute;

  left: -70px;

  top: 40px;

  width: 200px;

  pointer-events: none;

  background-color: #333;

  color: #fff;

  line-height: 1.2em;

  padding: 0.4em;

  opacity: 0;

  transform-origin: 50% calc(0% - 3em);

  transform: rotate3d(0, 0, 1, -15deg);

  transition: opacity 0.5s, transform 0.5s;

  transition-timing-function: ease, cubic-bezier(.17,.67,.4,1.39);

}



#textInfo:hover .tooltip-content {

  opacity: 1;

  pointer-events: all;

  transform: translate3d(0,0,0) rotate3d(0,0,0,0);

}



#textInfo .hotspot {

  cursor: pointer;

}



/* Halved circle hotspot */

#textInfo .hotspot .out:before {

  speak: none;

  font-size: 24px;  /* was 48px */

  line-height: 45px;/* was 90px */

  font-style: normal;

  font-weight: normal;

  font-variant: normal;

  text-transform: none;

  display: block;

  -webkit-font-smoothing: antialiased;

}



#textInfo .hotspot .out {

  width: 30px;  /* was 60px */

  height: 30px; /* was 60px */

  border-radius: 50%;

  border: 2.5px solid rgba(255,255,255,.4); /* was 5px */

  transition: transform ease-out 0.1s, border 0.2s;

}

#textInfo .hotspot .in {

  width: 20px;  /* was 40px */

  height: 20px; /* was 40px */

  position: absolute;

  top: 5px;     /* was 10px */

  left: 5px;    /* was 10px */

  background-color: rgba(255,255,255,.4);

  border-radius: 50%;

  transition: transform ease-out 0.1s, background 0.2s;

}

#textInfo .hotspot .out:after {

  top: 0; left: 0;

  padding: 0;

  z-index: -1;

  box-shadow: 0 0 0 1px rgba(255,255,255,0.1); /* was 2px */

  opacity: 0;

  pointer-events: none;

  position: absolute;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  content: '';

  transform: scale(0.9);

}



#textInfo .hotspot:hover .out {

  border: 2.5px solid rgba(255,255,255,1);

  transform: scale(0.9);

  color: #fff;

}

#textInfo .hotspot:hover .in {

  background-color: rgba(255,255,255,1);

  transform: scale(0.8);

}

#textInfo .hotspot:hover .out:after {

  animation: sonarEffect 1.2s ease-out;

}



/* Halve the 'box-shadow' expansions in keyframes for consistency */

@-webkit-keyframes sonarEffect {

  0% {

    opacity: 0.5;

  }

  20% {

    opacity: 0.8;

    box-shadow: 0 0 0 1px rgba(255,255,255,0.1),

                0 0 5px 5px rgba(169, 216, 206,.8),

                0 0 0 5px rgba(255,255,255,0.5);

  }

  100% {

    box-shadow: 0 0 0 1px rgba(255,255,255,0.1),

                0 0 5px 5px rgba(169, 216, 206,.8),

                0 0 0 5px rgba(255,255,255,0.5);

    transform: scale(1.5);

    opacity: 0;

  }

}

@-moz-keyframes sonarEffect {

  /* same pattern */

}

@keyframes sonarEffect {

  /* same pattern */

}