#map a { text-decoration: none; }

#map { overflow: hidden; position: relative; width: 100%; }
#map > img { width: 100%;  }
#map > div { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
#map > div > a  { cursor: pointer; position: absolute; transition: opacity .24s; }
#map > div > a > span { color: #000; font-size: .9em; position: absolute; }
#map > div > a img { width: 100%; }
#map > div > a div { background-color: #fff; bottom: 46%; box-shadow: 3px 4px 10px 0 #555; margin-top: 22px; opacity: 0; position: absolute; text-align: center; width: 220px; z-index: 6; }
#map > div > a.go-right div { left: -9000%; }
#map > div > a.go-left div { right: -9000%; }
#map > div > a div strong { background-color: #0D2C54; color: #fff; display: block; padding: 4px; text-align: center; width: 100%; }
#map > div > a div span { display: block; color: #000; padding: 6px 5px 2px; }
#map > div > a div p { display: block; font-size: .75em; margin: 0; padding: 5px 5px 7px; }
#map > div:hover > a { opacity: .56; }
#map > div:hover > a:hover { opacity: 1; }
#map > div > a:hover div { bottom: 86%; opacity: 1; transition: right .01s, left .01s, bottom .5s ease-in-out .01s, opacity .3s ease-in-out .01s;  }
#map > div > a.go-right:hover div { left: 135%; }
#map > div > a.go-left:hover div { right: 135%; }

#map > span { display: block; position: absolute; }
#map > span:nth-of-type(1) { height: 20%; top: 0; left: 0; width: 20.6%;  }
#map > span:nth-of-type(2) { bottom: 0; height: 40.5%; left: 0; width: 22.4%; }
#map > span:nth-of-type(3) { height: 39%; right: 0; top: 0; width: 32.8%; }
#map > span:nth-of-type(4) { bottom: 22%; height: 18.7%; right: 0; width: 21.7%;}
#map > span:nth-of-type(5) { bottom: 0; height: 22%; right: 0; width: 11%; }

#cass-county {    left: 0.2%;top: 0.38%;width: 48.55%; }
#map > div > #cass-county > span,
#map > div > #clay-county > span { color: #7FB800; font-size: 1.2em; font-weight: 700; left: 66%; top: 2%; }
#map > div > #cass-county div { bottom: 66%; }
#map > div > #cass-county:hover div { bottom: 73%; left: 104%; }

#clay-county {     left: 41.1%; top: 0.3%; width: 58.6%;}
#map > div > #clay-county > span { color: #0097D8; font-weight: 700; left: 8%; }
#map > div > #clay-county div { bottom: 66%; right: 2000%; }
#map > div > #clay-county:hover div { bottom: 73%; right: 104%; }

#casselton { left: 6.8%; top: 34.8%; width: 3.74%; }
#casselton > span { left: -23%; top: -30%; }

#mapleton { left: 20.68%; top: 35.56%; width: 3.74%; }
#mapleton > span { left: -13%; top: -40%; }

#glyndon { left: 63.3%; top: 41.4%; width: 2.8%; }
#glyndon > span { left: 39%; top: 92%; }

#barnesville { left: 76.85%; top: 91.6%; width: 3.6%; }
#barnesville > span { left: -77%; top: -40%; }

#hawley { left: 85.26%; top: 39.3%; width: 3.4%; }
#hawley > span { left: -30%; }

#harwood { left: 36.4%;top: 17.1%;width: 3.07%; }
#harwood > span { left: -54%; top: -44%; }

#fargo { left: 35.78%;top: 20.4%;width: 13.21%; }
#map > div > #fargo > span { color: #fff; left: 42%; top: 38%; }
#map > div > #fargo div { bottom: 66%; }
#map > div > #fargo:hover div { bottom: 73%; left: 104%; }

#west-fargo { left: 30.75%; top: 36.3%; width: 8.74%; }
#map > div > #west-fargo > span { color: #fff; top: 20%; left: 52%; text-align: center; width: 16%; }
#map > div > #west-fargo div { bottom: 66%; }
#map > div > #west-fargo:hover div { bottom: 73%; right: 114%; }

#horace { left: 31.99%;top: 59.5%;width: 6.6%;}
#horace > span { bottom: -5%; }
#map > div > #horace div { bottom: 58%; }
#map > div > #horace:hover div { bottom: 73%; right: 114%; }

#moorhead {     left: 44.7%;top: 26.7%;width: 13.47%;z-index: 1;}
#map > div > #moorhead > span { color: #fff; left: 22%; top: 60%; }
#map > div > #moorhead div { bottom: 78%; }
#map > div > #moorhead:hover div { bottom: 86%; left: 50%; }

#dilworth { left: 51.3%; top: 39.85%; width: 6.47%; z-index: 2; }
#dilworth > span { top: -64%; left: 23%; }

@media screen and (max-width: 1370px) {
    #map > div > a > span { font-size: .75em; }
}

@media screen and (max-width: 1180px) {
    #map > div > #cass-county > span,
    #map > div > #clay-county > span { font-size: .8em; }
    #map > div > a > span { font-size: .6em; }
}

@media screen and (max-width: 904px) {
    #dilwofrth { top: 38.5%; }
    #map > div > #fargo > span { left: 40%; top: 27%; }
    #map > div > #west-fargo > span { color: #000; left: -18%; top: 40%; }
    #map > div > #moorhead > span { color: #000; left: 42%; top: 93%; }
}

@media screen and (max-width: 780px) {
    #map > div > #cass-county div { bottom: 46%; }
    #map > div > #cass-county:hover div { bottom: 53%; }
    #map > div > #clay-county div { bottom: 46%; }
    #map > div > #clay-county:hover div { bottom: 53%; }
    #map > div > a div { width: 150px; }
    #map > div > a div strong { font-size: .8em; }
    #map > div > a div span { font-size: .75em; padding: 5px 5px 0; }
    #map > div > a div p { display: block; font-size: .7em; padding: 3px 5px 5px; }
}

@media screen and (max-width: 688px) {
    #map > div > a:hover div { bottom: 30%; }
    #map > div > #cass-county > span { left: 62%; }
    #map > div > #cass-county > span,
    #map > div > #clay-county > span { font-size: .67em; }
    #dilworth { top: 37.9%; }
    #glyndon { top: 39.4%; }
    #hawley { top: 39%;}
    #barnesville { top: 88%; }
    #map > div > #harwood div { bottom: -120%; }
    #map > div > #harwood:hover div { bottom: -160%; }
}

@media screen and (max-width: 518px) {
    #map > img,
    #map > span,
    #map > div > a img,
    #map > div > a span,
    #map > div > #cass-county > span,
    #map > div > #clay-county > span { display: none; }
    #map > div { position: static; }
    #map > div > a { display: block; opacity: 1 !important; position: static; width: 100% !important; }
    #map > div > a.in-cass div { background-color: #cae48f; }
    #map > div > a.in-clay div { background-color: #8ecde8; }
    #map > div > a div { box-shadow: none; font-size: .8em; position: static; left: 0; margin: 0; opacity: 1; width: 100%; }
    #map > div > a div strong { background-color: transparent; color: #333; display: inline-block; padding: 0; width: auto; }
    #map > div > a div span { display: inline-block; padding: 4px 6px; }
    #map > div > a div p { display: inline-block; font-size: .75em; padding: 0; }
}