/* All artwork and fonts are served locally. No framework or plugin required. */
@font-face {
  font-family: "Open Sans";
  src: url("assets/open-sans.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: #fff; font-family: "Open Sans", Arial, sans-serif; }
.landing { position: relative; width: 100%; }
picture, .landing img { display: block; width: 100%; }
.landing img { height: auto; }
/* Hotspots use the original image-map circle coordinates, expressed as
   percentages so that they track the image at every viewport width. */
.country {
  position: absolute;
  display: block;
  border-radius: 50%;
  border: 2px solid transparent;
  background: transparent;
}
.country--usa {
  left: 6.958333%; top: 71.058475%;
  width: 10.75%; height: 19.096965%;
}
.country--canada {
  left: 25.083333%; top: 71.576610%;
  width: 10.5%; height: 18.652850%;
}
@media (hover: hover) {
  .country:hover { background: rgb(60 162 162 / 71%); border-color: #235b6e; }
}
.country:focus-visible {
  background: rgb(60 162 162 / 71%);
  border-color: #235b6e;
  outline: 3px solid #fff;
  outline-offset: 3px;
}
footer {
  padding: 15px 20px 20px;
  background: #171715;
  color: #a3a3a3;
  text-align: center;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.7;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (max-width: 767px) {
  .country--usa {
    left: 12.333333%; top: 60.125343%;
    width: 27.5%; height: 12.925969%;
  }
  .country--canada {
    left: 58.583333%; top: 59.929495%;
    width: 28.333333%; height: 13.317666%;
  }
  @media (hover: hover) {
    .country:hover { background: rgb(60 162 162 / 81%); }
  }
  .country:focus-visible { background: rgb(60 162 162 / 81%); }
}