body, html {
  margin: 0;
  font-size: 16px !important;
  font-family: 'Open Sans', sans-serif; }

@media (min-width: 40em) {
  .container {
    max-width: 60em;
    margin-left: auto;
    margin-right: auto; }
    .container:after {
      content: " ";
      display: block;
      clear: both; } }

.top-banner {
  height: 7.5em;
  background-color: #335c5c; }
  .top-banner .header {
    padding: 1em;
    color: #FFF;
    display: table-row;
    height: 7.5em;
    width: 100%; }
    @media (min-width: 40em) {
      .top-banner .header {
        padding: 0; } }
    .top-banner .header .logo-container {
      display: table-cell;
      vertical-align: middle;
      padding-left: 1em; }
      @media (min-width: 40em) {
        .top-banner .header .logo-container {
          padding-left: 0; } }
      .top-banner .header .logo-container img {
        max-width: 80px;
        margin-right: 1em; }
    .top-banner .header h1 {
      font-family: 'Open Sans', sans-serif;
      font-size: 1.25em;
      margin: 0;
      display: table-cell;
      vertical-align: middle; }
      .top-banner .header h1 span.title {
        display: none;
        font-weight: normal;
        font-size: 0.8em; }
      .top-banner .header h1 span.submitted {
        font-size: 0.6em;
        display: block;
        font-weight: 300; }
      .top-banner .header h1 span.inline {
        display: block; }
      @media (min-width: 40em) {
        .top-banner .header h1 {
          font-size: 1.25em; }
          .top-banner .header h1 span.title {
            display: block; }
          .top-banner .header h1 span.inline {
            display: inline; } }

#map {
  position: absolute;
  top: 7.5em;
  bottom: 0;
  width: 100%;
  font-size: 16px; }

.map-overlay {
  position: absolute;
  right: 40px;
  background: rgba(255, 255, 255, 0.8);
  overflow: auto;
  border-radius: 3px;
  padding: 0.25em 1em; }

.tips {
  display: none;
  position: fixed;
  bottom: 40px;
  left: 40px;
  font-weight: 400;
  width: 220px;
  height: 180px; }
  @media (min-width: 40em) {
    .tips {
      display: block; } }
  .tips .tips-header, .tips .tips-body {
    display: table-row; }
    .tips .tips-header span, .tips .tips-body span {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      width: 220px; }
  .tips .tips-header {
    background-color: #4d7070; }
    .tips .tips-header span {
      height: 40px;
      color: #7fbc7f;
      text-transform: uppercase; }
  .tips .tips-body {
    background-color: #7fbc7f; }
    .tips .tips-body span {
      height: 140px;
      font-size: 4em;
      color: #FFF; }
      .tips .tips-body span small {
        font-size: 0.20em;
        display: block;
        padding: 0 2em; }

#legend {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  line-height: 18px;
  margin-bottom: 40px;
  bottom: 0;
  padding: 1em;
  font-size: 0.875em;
  display: none; }
  @media (min-width: 40em) {
    #legend {
      display: block; } }

.legend-key {
  display: inline-block;
  border-radius: 20%;
  width: 10px;
  height: 10px;
  margin-right: 5px; }

.mapboxgl-popup {
  max-width: 400px;
  font-family: 'Open Sans', sans-serif; }
  @media (min-width: 40em) {
    .mapboxgl-popup {
      visibility: hidden; } }