/* note changed bkg of zoomViewport on this page to match faded drawing */
.zoomViewport, html {
  background-color:#e3d4c1;
}

/*This file has the positions of the zoomTarget(s) for each image.*/
/* Keyimage2 ver 20210124 */
.zoomTarget[data-index="1"] {
    position:absolute;
    top: 0%;
    left: 48%;
    width: 50%;
    height: 50%;
/* border:1px solid pink; */
}

.overlay[data-index="1"] {
  position: absolute;
  top: -2%;
  left: 48%;
  width: 50%;
  height: 18%;
  border: 2px solid maroon;
} 
  
.zoomTarget[data-index="2"] {
    position:absolute;
    top: 0%;
    left: 48%;
    width: 50%;
    height: 50%;
    /* border:5px solid red; */
}

.overlay[data-index="2"] {
  position: absolute;
  top: 2.4%;
  left: 50%;
  width: 9%;
  height: 11.25%;
  border: 2px solid maroon;
  border-radius: 50%;
}

.zoomTarget[data-index="3"] {
    position:absolute;
    top: 0%;
    left: 48%;
    width: 50%;
    height: 50%;
    /* border:1px solid green; */
}

.overlay[data-index="3"] {
  position: absolute;
  top: 3.4%;
  left: 60.5%;
  width: 17.6%;
  height: 11.25%;
  border: 2px solid maroon;
  /* border-radius: 50%; */ 
}

.zoomTarget[data-index="4"] {
    position:absolute;
    top: 0%;
    left: 48%;
    width: 50%;
    height: 50%;
    /* border:1px solid blue; */
}


.overlay[data-index="4"] {
    position: absolute;
    top: 2%;
  	left: 78%;
  	width: 12%;
  	height: 8%;
  	border: 2px solid maroon;
}


.zoomTarget[data-index="5"] {
    position:absolute;
    top: 0%;
    left: 48%;
    width: 50%;
    height: 50%;
    /* border:1px solid lime; */
}


.overlay[data-index="5"] {
  position: absolute;
  top: 10%;
  left: 48.5%;
  width: 6%;
  height: 14%;
  border: 2px solid maroon;
  border-radius: 50%;
}



.zoomTarget[data-index="6"] {
    position:absolute;
    top: 0%;
    left: 48%;
    width: 50%;
    height: 50%;
    /* border:1px solid black; */
}

.overlay[data-index="6"] {
  position: absolute;
  top: 3.4%;
  left: 87%;
  width: 8%;
  height: 16%;
  border: 2px solid maroon;
  border-radius: 50%;
}

.zoomTarget[data-index="7"] {
    position:absolute;
    top: 0%;
    left: 48%;
    width: 50%;
    height: 50%;
    /* border:1px solid white; */
}

.overlay[data-index="7"] {
    position: absolute;
    top: 16%;
  	left: 54.5%;
  	width: 39%;
  	height: 14%;
    border-radius: 0%;
    border: 2px solid maroon;
}


.zoomTarget[data-index="8"] {
    position:absolute;
    top: 0%;
    left: 48%;
    width: 50%;
    height: 50%;
/*  border:1px solid orange; */
}