#gMapContainer {
  max-height: 500px;
  min-height: 300px;
  width: 100%;
  height: 50dvh;
  border-radius: 10px;
  background-color: #cccccc;
  position: relative;
  overflow: hidden;

  iframe {
    width: 100%;
    height: 100%;
  }
}

/**
  * Half ring
  *
  * @author jh3y - jheytompkins.com
*/
#gMapContainer:not(.loaded):after {
  -webkit-animation: spin 1s infinite linear;
          animation: spin 1s infinite linear;
  border-radius: 10px;
  -webkit-box-shadow: 25px 0px 0 0 rgba(255, 255, 255, 0.2), 20.22542px 14.69463px 0 0 rgba(255, 255, 255, 0.4), 7.72542px 23.77641px 0 0 rgba(255, 255, 255, 0.6), -7.72542px 23.77641px 0 0 rgba(255, 255, 255, 0.8), -20.22542px 14.69463px 0 0 white;
          box-shadow: 25px 0px 0 0 rgba(255, 255, 255, 0.2), 20.22542px 14.69463px 0 0 rgba(255, 255, 255, 0.4), 7.72542px 23.77641px 0 0 rgba(255, 255, 255, 0.6), -7.72542px 23.77641px 0 0 rgba(255, 255, 255, 0.8), -20.22542px 14.69463px 0 0 white;
  height: 10px;
  width: 10px;
  display: block;
  content: '';
  left: 50%;
  top: 50%;
  position: absolute;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}