#don-pedro{
    top: 4%;
    left: 57%;
}

#albert-mk{
    top: 13%;
    left: 18%;
}

#don-juan-cent{
    top: 13%;
    left: 77%;
}

#jose-santos{
    top: 24%;
    left: 49%;
}

#boni-leonor{
    top: 35%;
    left: 50%;
}

#jose-maria{
    top: 44%;
    left: 63%;
}

.detail-link {
   position: absolute;
    left: 49%;
    bottom: 3%;
}

.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: absolute; */ /* positioning of all hotspots will be absolute */
    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: 440px)
{
   .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;
  color: #fff;
  line-height: 1.3em;
  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;
}