.gmap {
  display: block;
  /* Intrinsic Ratio Box */
  position: relative;
  height: 0;
  width: 100%;
  padding-top: 100%;
  background: #bbb;
  /* Modifier for a 16:9 aspect ratio. */
}
@media screen and (min-width: 44em) {
  .gmap {
    padding-top: 40%;
  }
}
@media screen and (min-width: 60em) {
  .gmap {
    overflow: hidden;
  }
}
.gmap.gmap--16x9 {
  padding-top: 56.25%;
}

/* Force the item to fill the intrinsic box. */
.gmap__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.gmap__info {
  position: relative;
  z-index: 10;
  width: 1px;
}
@media screen and (min-width: 60em) {
  .gmap__info {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
  }
}

.gmap__buttons {
  width: 90%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  top: -130px;
  left: 5%;
  z-index: 1;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media screen and (min-width: 60em) {
  .gmap__buttons {
    top: -60px;
  }
}

.gmap__button {
  margin: 0 20px;
  color: #fff;
  font-weight: bold;
  border-radius: 3px;
  background-color: #888B8d;
}
.gmap__button:hover {
  color: #000;
}
.gmap__button.btn--reversed {
  color: #fff;
}

#gmap__location.btn--reversed {
  background-color: #002f6c;
}

#gmap__restore.btn--reversed {
  background-color: #09c;
}