/* THE MAP */
html, body {
  height: 100%;
}

#map {
  width: 100%; height: 100%;
}
/* /THE MAP */

/* OPTIONS */
header {
  z-index: 101001;
}

.map-options {
  position: fixed; right: 0; z-index: 101000; bottom: 0;
  width: 100%;
  padding: 15px;
  background-color: rgba(31, 31, 31, 0.95);
  box-shadow: 0 0 6px rgba(31, 31, 31, 0.8);;
}

.map-options .item {
  float: left; width: 49%;
  color: #FFF; font-size: 14px; font-weight: 700;
}
.map-options .item:first-of-type {
  margin-right: 2%;
}

.map-options .item input {
  display: block;
  width: 100%; height: 34px;
  margin-top: 10px; padding: 0 10px;
  border: 1px solid #FFF;
  border-radius: 100px;
}

.map-options .actions {
  margin-top: 12px;
}
.map-options .actions input {
  display: block;
  width: 100%; max-width: 120px; height: 34px;
  padding: 4px 0; margin: 0 auto;
  color: #FFF; text-align: center; font-size: 16px; text-transform: uppercase; font-weight: 700;
  border: 1px solid #14BF9D;
  background-color: #14BF9D;
  border-radius: 100px;
}

.map-options .reset {
  display: none;
  text-align: center;
}
.map-options .reset a {
  color: #FFF;
}
.map-options .reset a:hover {
  border-color: #FFF;
}

@media screen and (min-width: 640px) {
  .map-options .reset {
    display: block;
    margin-top: 12px;
  }
}
@media screen and (min-width: 1024px) {
  .map-options {
    top: 0; bottom: auto;
    width: 280px;
    height: 100%;
    padding: 70px 20px 30px;
  }

  .map-options .item {
    width: 100%;
    margin: 0 0 25px !important;
  }

  .map-options .actions {
    margin-top: 0;
  }

  .map-options .reset {
    margin-top: 15px;
  }
}
/* /OPTIONS */