.group.obfuscated_map-group {
  height: 100vh;

  @include breakpoint(mobileonly) {
    height: 75vh;
  }

  .row.obfuscated_map-row {
    min-height: 100vh;
    padding: 0;
    background: linear-gradient(to bottom, #333333 15%, rgba(#333333, 0));

    @include breakpoint(mobileonly) {
      min-height: 75vh;
    }

    .obfuscated_map {
      height: 100vh;
      .header {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        height: 20vh;

        padding-right: calculateRem(50);
        padding-top: 10vh;
        padding-left: calculateRem(50);

        .title-paragraph {
          color: white;
          text-align: center;

          @include breakpoint(laptop) {
            max-width: 50%;
          }
          .yellow-text {
            color: $primary-color;
            font: inherit;
          }
        }
      }
      .barnacle_obfuscated_map {
        height: 100vh;
        top: -20vh;
        z-index: -1;

        @include breakpoint(mobileonly) {
          height: 75vh;
          min-height: 75vh;
          top: -20vh;
        }

        div div.gm-style div.gmnoprint div.gm-style-cc div {
          line-height: 1.5;
          span, a {
            line-height: 1.5;
          }
        }
        div div.gm-style div.gmnoprint.gm-style-cc div {
          line-height: 1.5;
          span, a {
            line-height: 1.5;
          }
        }
      }



      // PULSING STYLIN'
      @-moz-keyframes pulsate {
        from {
          -moz-transform: scale(0.25);
          opacity: 1.0;
        }
        45% {
          -moz-transform: scale(1.3);
          opacity: 0;
        }
        50% {
          -moz-transform: scale(0.3);
          opacity: 0;
        }
        to {
          -moz-transform: scale(0.3);
          opacity: 0;
        }
      }
      @-webkit-keyframes pulsate {
        from {
          -webkit-transform: scale(0.25);
          opacity: 1.0;
        }
        45% {
          -webkit-transform: scale(1.3);
          opacity: 0;
        }
        50% {
          -webkit-transform: scale(0.3);
          opacity: 0;
        }
        to {
          -webkit-transform: scale(0.3);
          opacity: 0;
        }
      }
      /* get the container that's just outside the marker image,
          which just happens to have our Marker title in it */
      .barnacle_obfuscated_map div[title="pulse_me"] {
        -moz-animation: pulsate 3s ease-in-out infinite;
        -webkit-animation: pulsate 3s ease-in-out infinite;
        border:1pt solid #FFFFFF;
        /* make a circle */
        -moz-border-radius:51px;
        -webkit-border-radius:51px;
        border-radius:51px;
        /* multiply the shadows, inside and outside the circle */
        -moz-box-shadow:inset 0 0 5px rgba($primary-color, .2), inset 0 0 5px rgba($primary-color, .2), inset 0 0 5px rgba($primary-color, .2), 0 0 5px rgba($primary-color, .2), 0 0 5px rgba($primary-color, .2), 0 0 5px rgba($primary-color, .2);
        -webkit-box-shadow:inset 0 0 5px rgba($primary-color, .2), inset 0 0 5px rgba($primary-color, .2), inset 0 0 5px rgba($primary-color, .2), 0 0 5px rgba($primary-color, .2), 0 0 5px rgba($primary-color, .2), 0 0 5px rgba($primary-color, .2);
        box-shadow:inset 0 0 5px rgba($primary-color, .2), inset 0 0 5px rgba($primary-color, .2), inset 0 0 5px rgba($primary-color, .2), 0 0 5px rgba($primary-color, .2), 0 0 5px rgba($primary-color, .2), 0 0 5px rgba($primary-color, .2);
        /* set the ring's new dimension and re-center it */
        height:51px!important;
        margin:-14px 0 0 -14px;
        width:51px!important;

        @include breakpoint(mobileonly) {
          -moz-border-radius:25px;
          -webkit-border-radius:25px;
          border-radius:25px;

          height: 25px !important;
          margin: -7px 0 0 -7px;
          width: 25px !important;
        }
      }
      /* hide the superfluous marker image since it would expand and shrink with its containing element */
      /*	#map_canvas div[style*="987654"][title] img {*/
      .barnacle_obfuscated_map div[title="pulse_me"] img {
        display:none;
      }
      /* compensate for iPhone and Android devices with high DPI, add iPad media query */
      @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (device-width: 768px) {
        .barnacle_obfuscated_map div[title="pulse_me"] {
          margin: 1px 0 0 1px;

          @include breakpoint(laptop) {
            margin: -14 0 0 -14px;
          }
        }
      }
    }
  }
}