/* ######################
    Modal target boxes
    (320 to 600px)
###################### */

.modalTarget.level1 {
    top: 15%;
    width: 4%;
    height: 2.5%;
}

.modalTarget.section1 {
    top: 22.8%;
    width: 4%;
    height: 2.5%;
    left: 60%;
}

.modalTarget.level2 {
    top: 35.9%;
    width: 4%;
    height: 2.5%;
}

.modalTarget.section2 {
    top: 43.8%;
    width: 4%;
    height: 2.5%;
    left: 63.1%;
}

.modalTarget.level3 {
    top: 56.5%;
    width: 4%;
    height: 2.5%;
}

.modalTarget.level4 {
    top: 70.1%;
    width: 4%;
    height: 2.5%;
}

.modalTarget.level5 {
    top: 94.2%;
    width: 4%;
    height: 2.5%;
}

/* Here we define parameters that apply to
    specific boxes, identified numerically
    in order from left to right (within each level)
*/

#ml1-box1 {
    left: 24.5%;
}

#ml1-box2 {
    left: 74.1%;
}

#ml2-box1 {
    left: 6.5%;
}

#ml2-box2 {
    left: 18.8%;
}

#ml2-box3 {
    left: 30.6%;
}

#ml2-box4 {
    left: 42.8%;
}

#ml2-box5 {
    left: 60.2%;
}

#ml2-box6 {
    left: 74.9%;
}

#ml2-box7 {
    left: 88.8%;
}

#ml3-box1 {
    left: 28.8%;
}

#ml3-box2 {
    left: 67.1%;
}

#ml4-box1 {
    left: 6.3%;
}

#ml4-box2 {
    left: 19.7%;
}

#ml4-box3 {
    left: 32.6%;
}

#ml4-box4 {
    left: 46%;
}

#ml4-box5 {
    left: 58.8%;
}

#ml4-box6 {
    left: 73.7%;
}

#ml4-box7 {
    left: 89.5%;
}

#ml5-box1 {
    left: 16.7%;
}

#ml5-box2 {
    left: 32.2%;
}

#ml5-box3 {
    left: 48%;
}

#ml5-box4 {
    left: 62.8%;
}

#ml5-box5 {
    left: 77.8%;
}