#page-head {
  padding: 12px 0;
  @include flex();

  div #logo {
    max-width: 300px;
  }

  nav > .menu-main-menu-container {
    & > ul {
      margin: 0;
      padding: 0;
      list-style-type: none;

      & > li {
        position: relative;
        display: inline-block;

        &.current-menu-item, &.current-menu-ancestor {
          border-bottom: solid 4px $red;
        }

        & > .sub-menu-toggle {
          display: none;
        }

        & > a {
          display: inline-block;
          @include rem-size(0.9);
          color: $black;
          padding: 8px 20px;
          text-decoration: none;

          svg {
            color: $red;
          }
        }

        //&:last-child {
        //  &.current-menu-item, &.current-menu-ancestor {
        //    border-bottom: none !important;
        //  }
        //
        //  & > a {
        //    @extend .btn;
        //    @extend .btn-primary;
        //    color: $white;
        //    padding: 2px 20px;
        //    display: inline-block;
        //    position: relative;
        //    top: -2px;
        //    margin-left: 10px;
        //    @include rem-size(0.9);
        //
        //    &:hover { color: $white; }
        //  }
        //}

        & > ul {
          position: absolute;
          top: 40px;
          left: 20px;
          width: 225px;
          background-color: $white;
          margin: 0;
          padding: 0;
          list-style-type: none;
          @include shadow(6px, 12px, 0.3);
          max-height: 0;
          overflow: hidden;
          @include trans(all 0.4s ease);
          z-index: 999999;

          &.open {
            max-height: 350px !important;
          }

          & > li {
            & > a {
              display: block;
              @include rem-size(0.9);
              color: $black;
              text-decoration: none;
              padding: 4px 20px;
              background-color: $white;

              &:hover {
                background-color: $red;
                color: $white;
              }
            }
          }
        }

        &:hover {
          & > a { color: $red; }
        }
      }
    }
  }
}

#menu-about-pancreaseq-menu {
  list-style-type: none;
  margin: 0;
  padding: 10px 0;
  background: $navy; //rgba(26,113,157,0.5);
  border-radius: 5px;

  li > a {
    display: block;
    padding: 7px 16px;
    color: $white;
    font-weight: 500;
    text-decoration: none;
    background: $blue;

    &:hover {
      color: $white;
      background: $red;
    }
  }

  li.current-menu-item > a {
    color: $black;
    background: rgba(255,255,255,0.85);
  }
}

@media (max-width: 900px) {
  #page-head div #logo {
    max-width: 250px;
  }
  #page-head > nav > .menu-main-menu-container > ul > li > a {
    padding: 6px 14px;
  }
}

@media (max-width: 810px) {
  #page-head div #logo {
    max-width: 225px;
  }
  #page-head > nav > .menu-main-menu-container > ul > li > a {
    padding: 6px 8px;
  }
}

@media (max-width: 730px) {
  #page-head div #logo {
    max-width: 225px;
  }
  #page-head > nav > .menu-main-menu-container > ul > li > a {
    padding: 6px 8px;
  }
  //#page-head > nav > .menu-main-menu-container > ul > li:last-child {
  //  display: none;
  //}
}

@media (max-width: 650px) {
  #page-head {
    display: block;
    padding-bottom: 0;
  }
  #page-head > nav > .menu-main-menu-container > ul {
    text-align: center;
    margin-top: 10px;
  }
  #page-head div #logo {
    max-width: 225px;
    display: block;
    margin: 0 auto;
    text-align: center;
  }
  #page-head > nav > .menu-main-menu-container > ul > li > a {
    padding: 10px 8px;
    @include rem-size(0.95);
  }
  #page-head > nav > .menu-main-menu-container > ul > li > ul {
    left: 0;
    top: 42px;
    position: absolute;
    width: 100vw;
    max-height: 0;
    padding: 0;
    overflow: hidden;

    &.open {
      max-height: 350px;
      padding: 12px 0;

    }
  }
  #page-head > nav > .menu-main-menu-container > ul > li > ul > li > a {
    padding: 12px 0;
  }
  //#page-head > nav > .menu-main-menu-container > ul > li:last-child {
  //  display: none;
  //}
}