#azoresMap,
#madeiraMap,
#routeMap {
    /* margin-top:-18.5%; */
    padding: 0;
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
    z-index: 0;
    /* float: left; */
}

/* images in the popups  */
.img_popup {
    display: block;
    width: 100%;
    transition: .5s ease;

}

  /* this is the style for the box that cover the image when user over on the image,*/
  .middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 33%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    border-radius: 5px;
    background-color: orangered;
  }

  .highlight {
    position: relative;
  }

      /* when user hover the pointer (on desktop only) it shows a bow over the image */
      .highlight:hover .img_popup {
        background-color: azure;
        opacity: 0.3;
      }
  
      /* this is the middle of the box when user over the pointer on the image, it shows a green botton on top of the image */
      .highlight:hover .middle {
        opacity: 1;
      }
  
      /* text that show the user that the user can click on the image and redirect to more info about the image location */
      .text {
        color: white;
        padding: 5px 10px;
      }
  
  
      span {
        color: orangered;
      }