/* Bulma 0.9.4 navbar styling adapted for pages that retain Bootstrap content.
   Scope these rules to the shared navigation to preserve those layouts. */
html.has-navbar-fixed-top { padding-top: 52px; }

#site-navbar {
  background: #363636;
  border: 0;
  border-radius: 0;
  color: #fff;
  display: block;
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  left: 0;
  line-height: 1.5;
  margin: 0;
  min-height: 52px;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1030;
}

#site-navbar .navbar-brand {
  align-items: stretch;
  display: flex;
  flex-shrink: 0;
  float: none;
  font-size: inherit;
  height: auto;
  margin: 0;
  min-height: 52px;
  padding: 0;
}

#site-navbar .navbar-item {
  color: #4a4a4a;
  display: block;
  flex-grow: 0;
  flex-shrink: 0;
  line-height: 1.5;
  padding: 8px 12px;
  position: relative;
  text-decoration: none;
}

#site-navbar .navbar-brand > .navbar-item {
  align-items: center;
  color: #fff;
  display: flex;
}

#site-navbar strong { color: orange; font-weight: 700; }
#site-navbar .navbar-item:hover,
#site-navbar .navbar-item:focus { background: #fafafa; color: #485fc7; }
#site-navbar .navbar-brand > .navbar-item:hover,
#site-navbar .navbar-brand > .navbar-item:focus { background: #292929; color: #fff; }

#site-navbar .navbar-burger {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: block;
  height: 52px;
  margin-left: auto;
  padding: 0;
  position: relative;
  width: 52px;
}

#site-navbar .navbar-burger span {
  background: currentColor;
  display: block;
  height: 1px;
  left: calc(50% - 8px);
  position: absolute;
  transform-origin: center;
  transition: background-color 86ms ease-out, opacity 86ms ease-out, transform 86ms ease-out;
  width: 16px;
}

#site-navbar .navbar-burger span:first-child { top: calc(50% - 6px); }
#site-navbar .navbar-burger span:nth-child(2) { top: calc(50% - 1px); }
#site-navbar .navbar-burger span:nth-child(3) { top: calc(50% + 4px); }
#site-navbar .navbar-burger.is-active span:first-child { transform: translateY(5px) rotate(45deg); }
#site-navbar .navbar-burger.is-active span:nth-child(2) { opacity: 0; }
#site-navbar .navbar-burger.is-active span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

#site-navbar .navbar-menu {
  background: #fff;
  box-shadow: 0 8px 16px rgba(10, 10, 10, .1);
  display: none;
  max-height: calc(100vh - 52px);
  overflow-y: auto;
  padding: 8px 0;
}

#site-navbar .navbar-menu.is-active { display: block; }

@media screen and (min-width: 1024px) {
  #site-navbar,
  #site-navbar .navbar-menu,
  #site-navbar .navbar-start,
  #site-navbar .navbar-end { align-items: stretch; display: flex; }

  #site-navbar .navbar-menu {
    background: transparent;
    box-shadow: none;
    flex-grow: 1;
    flex-shrink: 0;
    max-height: none;
    overflow: visible;
    padding: 0;
  }

  #site-navbar .navbar-start { margin-right: auto; }
  #site-navbar .navbar-end { margin-left: auto; }
  #site-navbar .navbar-burger { display: none; }
  #site-navbar .navbar-item { align-items: center; color: #fff; display: flex; }
  #site-navbar .navbar-item:hover,
  #site-navbar .navbar-item:focus { background: #292929; color: #fff; }
}