@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

.hs-map {
  width: 90%;
  height: 100%;
}
.map-row {
  //display: flex;
  height: 20rem;
}
.graph-row {
  height: 20rem;
}

.graph-row-plotly {
  height: 35rem;
}

.eq {
  font-style: italic;
  font-family: 'Times New Roman', Times, serif;
}

.page {
  margin-bottom: 5rem;
}

hslayers {
  height: 20rem;
  display: block;
}

.menu-link {
  position: fixed;
  left: 0;
  top: 0;
  margin: 1rem;
}

/* https://www.w3schools.com/howto/howto_css_menu_icon.asp */
.container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}
