#masthead {
  max-width: 83.25rem;
  min-width: 16.5rem;
  margin: 0 auto;
  z-index: 100;
  height: 5rem;
  grid-template-rows: 1rem 2rem;
  position: relative;
  margin-top: 2rem;
  margin-bottom: 2rem;
  overflow: visible; }
  #masthead .logo {
    grid-column: 1 / 3;
    grid-row: 1 / 3; }
    #masthead .logo img {
      width: 100%;
      height: auto; }
    #masthead .logo#stacked {
      display: none; }
    #masthead .logo:hover {
      background-color: white; }
  #masthead #burger {
    display: none; }
  #masthead #left {
    grid-column: 3 / 10;
    grid-row: 1 / 3;
    grid-template-rows: 1rem 2rem;
    display: grid;
    z-index: 10; }
    #masthead #left .menu,
    #masthead #left .menu li {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
      display: inline; }
      #masthead #left .menu ul,
      #masthead #left .menu li ul {
        display: none; }
    #masthead #left .dropdown:hover ul {
      display: block; }
    #masthead #left #toolbar {
      grid-column: 4 / 10;
      grid-row: 0 /1;
      text-align: right; }
      #masthead #left #toolbar > li:not(:last-child)::after {
        content: " | "; }
      #masthead #left #toolbar li {
        position: relative; }
      #masthead #left #toolbar #tools_dropdown {
        position: absolute;
        width: 200px;
        background-color: white;
        left: 0px;
        z-index: 10;
        text-align: left;
        border: 1px solid var(--highlight);
        padding: 4px; }
        #masthead #left #toolbar #tools_dropdown li {
          display: block;
          flex: 0 0 100%;
          width: 100%;
          padding: 4px;
          text-transform: capitalize; }
    @media screen and (min-width: 61rem) {
      #masthead #left .navigation {
        grid-row: 3 / 4;
        font-size: 1rem;
        text-align: center;
        font-family: "Serifa", serif; }
        #masthead #left .navigation a {
          color: black;
          text-transform: uppercase; }
        #masthead #left .navigation#badges {
          grid-column: 2/4; }
        #masthead #left .navigation#approaches {
          grid-column: 4/6; }
        #masthead #left .navigation#search {
          grid-column: 8/10; }
          #masthead #left .navigation#search:hover {
            background-color: none; }
          #masthead #left .navigation#search form {
            display: flex; }
            #masthead #left .navigation#search form input {
              font-size: 0.8rem;
              border-radius: 0.5rem 0rem 0rem 0.5rem;
              flex: 1 1 4rem;
              padding: 5px;
              min-height: auto; }
            #masthead #left .navigation#search form button {
              flex: 0 0 2rem;
              min-width: auto;
              display: inline;
              border-radius: 0rem 0.5rem 0.5rem 0rem;
              border-left: none;
              height: 42px;
              min-height: 42px;
              margin: 0px;
              background-color: white;
              color: var(--highlight); }
              #masthead #left .navigation#search form button:hover {
                border-radius: 0rem 0.5rem 0.5rem 0rem;
                background-color: var(--highlight);
                color: white; }
              #masthead #left .navigation#search form button span {
                margin-top: 8px; }
      #masthead #left .aggregation:hover > li > ul {
        position: absolute;
        left: 0%;
        right: 0%;
        background-color: white;
        border: 2px solid var(--highlight);
        padding: 10px;
        display: grid;
        grid-template-columns: 200px repeat(auto-fit, minmax(50px, 1fr)); }
        #masthead #left .aggregation:hover > li > ul li {
          max-width: 150px;
          vertical-align: middle; }
          #masthead #left .aggregation:hover > li > ul li .badge_fallback {
            display: none; }
          #masthead #left .aggregation:hover > li > ul li img {
            width: 100%;
            height: auto; }
          #masthead #left .aggregation:hover > li > ul li .icon {
            padding-top: 10px;
            width: 100%;
            height: auto; }
            #masthead #left .aggregation:hover > li > ul li .icon span {
              font-size: 2.5rem;
              line-height: 2.5rem; }
          #masthead #left .aggregation:hover > li > ul li .title {
            width: 100%;
            font-size: .85rem;
            font-weight: normal; }
        #masthead #left .aggregation:hover > li > ul li:first-of-type {
          width: 150px;
          max-width: 150px;
          min-width: 150px;
          text-align: left;
          align-self: center; }
        #masthead #left .aggregation:hover > li > ul li:not(:first-of-type) a:hover {
          background-color: white; } }

@media screen and (max-width: 60rem) {
  body {
    margin: 0px; }
    body #page_container {
      padding: 8px; }
  #masthead {
    margin: 20px 0px 10px 10px;
    max-width: 100%;
    grid-gap: 0px;
    padding: 0px 5px;
    display: flex; }
    #masthead .logo {
      flex: 1 1 50%; }
      #masthead .logo img {
        height: 5rem;
        width: auto; }
    #masthead #burger {
      display: block;
      font-size: 2rem;
      line-height: 2rem;
      display: block;
      flex: 0 0 70px;
      text-align: center; }
      #masthead #burger.selected {
        background-color: var(--highlight); }
    #masthead #left {
      display: flex;
      flex-direction: column-reverse;
      flex-wrap: wrap-reverse;
      position: absolute;
      left: 100%;
      right: 0px;
      top: 100px;
      z-index: 200;
      height: auto;
      padding-bottom: 30px;
      background-color: white;
      overflow: hidden;
      background-color: white;
      transition: left 0.5s ease-in-out;
      border-bottom: 1px solid var(--highlight); }
      #masthead #left.selected {
        left: 0%; }
      #masthead #left .menu,
      #masthead #left .menu ul,
      #masthead #left .menu li {
        flex: 0 0 100%;
        display: flex;
        flex-direction: column;
        padding-inline-start: 0px; }
        #masthead #left .menu li,
        #masthead #left .menu ul li,
        #masthead #left .menu li li {
          background-color: var(--highlight);
          display: block;
          font-family: sans-serif;
          font-weight: normal;
          font-size: 12px;
          text-align: center;
          border-top: 1px solid var(--highlight);
          display: block; }
          #masthead #left .menu li ul,
          #masthead #left .menu ul li ul,
          #masthead #left .menu li li ul {
            display: block; }
          #masthead #left .menu li a,
          #masthead #left .menu ul li a,
          #masthead #left .menu li li a {
            color: white;
            text-transform: uppercase; }
            #masthead #left .menu li a img,
            #masthead #left .menu li a .icon,
            #masthead #left .menu li a .title,
            #masthead #left .menu ul li a img,
            #masthead #left .menu ul li a .icon,
            #masthead #left .menu ul li a .title,
            #masthead #left .menu li li a img,
            #masthead #left .menu li li a .icon,
            #masthead #left .menu li li a .title {
              display: none; }
            #masthead #left .menu li a span,
            #masthead #left .menu ul li a span,
            #masthead #left .menu li li a span {
              font-weight: normal; }
          #masthead #left .menu li li,
          #masthead #left .menu ul li li,
          #masthead #left .menu li li li {
            background-color: white;
            color: black; }
            #masthead #left .menu li li a,
            #masthead #left .menu ul li li a,
            #masthead #left .menu li li li a {
              color: black; }
          #masthead #left .menu li li:first-of-type,
          #masthead #left .menu ul li li:first-of-type,
          #masthead #left .menu li li li:first-of-type {
            display: none; }
      #masthead #left #search li {
        background-color: white; }
      #masthead #left #search form {
        display: flex;
        padding: 10px; }
        #masthead #left #search form input {
          flex: 1 1 40%;
          height: 10px; }
        #masthead #left #search form button {
          margin-top: 0px;
          flex: 0 0 75px;
          min-width: 75px;
          height: 37px; }
          #masthead #left #search form button span {
            padding-top: 3px; } }

/*# sourceMappingURL=header.css.map */