#raf-serrano{
    top: 11%;
    left: 16%;
}

#sem-serrano{
    top: 18%;
    left: 36%;
}

#mt-delpozo{
    top: 18%;
    left: 74%;
}

#fam-raf{
    top: 26%;
    left: 11%;
}

#sem-branch{
    top: 36%;
    left: 38%;
}

#mar-teresa{
    top: 39%;
    left: 68%;
}

.detail-links {
   position: absolute;
    left: 6.5%;
    top: 49%;
}

.detail-linkp {
   position: absolute;
    left: 63.6%;
    top: 61%;
}


.hotspot{
    width: 20px; /* Diameter of inner circle for flashing wave */
    height: 20px; /* ditto */
    border-radius: 50%; /* make it a circle */
    background-color: #9acd32; /* This is the color of the spot itself (originally green)*/
    position: relative; /* positioning of all hotspots will be RELATIVE */
    animation: wave 1s infinite;  /* This references the "wave" keyframes below */
    cursor: pointer;
}

@media screen and (max-width: 700px)
{
   .hotspot{
      width:  10px; 
      height: 10px; 
    }

}


@keyframes wave{  /* this is the flashing wave circle. It goes from 0 width to 10px width currently */
    from{
        box-shadow: 0 0 0 0 #9acd32bb;
    }
    to{
        box-shadow: 0 0 0 10px #9acd3210; /* This 10 px is the max width of the flashing wave circle and the 10 is its transparency*/
    }
}

abbr {
    position: relative; /* it actually works to give this a position and then reposition the hot area */
}

.clickbox { /* Square "hot" area over hotspot */
   width: 35px;
   height: 35px;
   position: absolute;
   /*left: 0;
   top:  5px;*/
}



/* BEGIN Minimal Tooltip code from info/demo page */
#tooltip {
  text-align: left !important;
  line-height: 1.3em;
  color: #fff;
  background: #333;
  position: absolute;
  z-index: 12010;
  padding: 15px;
  /* Extra stuff from demo (for a prettier tooltip): */
  background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .6 ) ), to( rgba( 0, 0, 0, .8 ) ) );
  background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
  background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
  background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
  background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
  background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border-top: 1px solid #fff;
  /* End Extra Stuff */

}

#tooltip::after {  /* triangle decoration */
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #111;
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: -10px;
}

#tooltip.top::after {
  border-top-color: transparent;
  border-bottom: 10px solid #111;
  top: -20px;
  bottom: auto;
}

#tooltip.left::after {
  left: 10px;
  margin: 0;
}

#tooltip.right::after {
  right: 10px;
  left: auto;
  margin: 0;
}

.main-navigation {
   position: relative;
   z-index: 5; 
}