/* GLOBAL RESET: Removes whitespace around the edge of the screen */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  /* height: 100%; */
}

/* HEADER STYLES: Set the height of your header */
header {
  width: 100%;
  height: 48px;
  padding: 5px 0 0 10px;
  background: #e8e8e8;
  position: relative;
  float: left;
}

header h1 {
  font-size: 1rem;
}

@media (min-width: 1025px) {
  header {
    height: 120px;
  }
  
  header h1 {
    font-size: 1.5rem;
  }
}

/* IFRAME STYLES: For the height property, subtract the pixel height of everything above the iframe from 100% */
#map_frame {
  /* height: calc(100% - 48px); */
  position: relative;
  float: left;
  border: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1025px) {
  #map_frame {
   /* height: calc(100% - 120px); */
  }
}