@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i');

body { margin:0; padding:0; font-family: "Roboto", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; }

.hide { display:none; }
a.button { display:inline-block; font:900 22px/20px "Roboto"; padding:15px 17px; background:#fff; border:#fff solid 2px; color:#006276 !important; text-decoration:none; }
a.button:hover, a.button:focus { background:#006276; color:#fff !important; text-decoration:none; }

#body-wrapper { width:1600px; height:699px; position:relative; background:url(/images/interface/bg-home-map.svg) top left no-repeat; }
#body-overlay { width:1600px; height:699px; position:absolute; top:0; left:0; right:0; bottom:0; display:block; z-index:1; background:url(/images/interface/bg-home-map-overlay.svg) top left no-repeat; }
#body-overlay.hide { display:none; }
#body-text { position:relative; z-index:2; }
#body-text .text-content * { color:#fff; text-align:right; }
#body-text .text-content p { font-size:1.8rem; }
#body-text .text-content p:first-line { font-weight:600; }
.large-text { font-size:33px; font-weight:900; }

.population, .workforce, .population2 { padding-right: 60px; line-height:1.1; }
.population { background:url(https://selectmcduffie.com/images/interface/gpx_icon-profile.svg) right top no-repeat; }
.workforce { background:url(https://selectmcduffie.com/images/interface/gpx_icon-worker.svg) right top no-repeat; }
.population2 { background:url(https://selectmcduffie.com/images/interface/gpx_icon-graph.svg) right top no-repeat; }

.gpx-dot { position:absolute; top:417px; }
.txt-dot a { position:relative; z-index:3; color:#fff !important; display:block; background:#48786A; width:84px; height:84px; border:#48786A solid 2px; padding-top:18px; border-radius:42px; text-align:center; font:400 22px/20px "Roboto"; text-transform:uppercase; text-decoration:none; }
.txt-dot a strong { font-weight:900; }
.txt-dot a:hover, .txt-dot a:focus { color:#48786A !important; background:#fff !important; }
#dot-20 { left:655px; }
#dot-40 { left:495px; }
#dot-60 { left:353px; }

@keyframes circular-pulse {
  0% { transform: scale(1); opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; transform: scale(2); }
}
.ring1, .ring2, .ring3 { border: 1px solid #fff; border-radius: 100%; height: 84px; width: 84px;  position: absolute; top:0; right: 0px; z-index:2;
  animation-name: circular-pulse;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
.ring2 { animation-delay:1s; }
.ring3 { animation-delay:2s; }