#header {
  &.fixed-ready {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

  }

  &.sticky {


    //zoom: 9999;
    background: rgba(255, 255, 255, 0.95);


    #topbanner .logo {
      max-width: 150px;
    }
  }

  #topbanner {
    //  transition: all 0.4s ease;
    .logo  {
      transition: all 0.4s ease;
      img {

      }

    }
  }

}

#toplogin {
  width: 100%;
  background-color: $brand-lightblue;

  padding: 5px 30px;
  nav {

    text-align: right;
    li {
      display: inline;
      list-style: none;
      margin: 0 10px;

    }
    a {
      color: $brand-lightgrey;
      color: $brand-white;
      text-decoration: none;
      @include font-size(20);
      font-weight: bold;
      &:hover {
        color: lighten($brand-darkgrey, 30%);
        color: $brand-lightgrey;
        text-decoration: underline;
      }
    }
  }
}
#topbanner {
  justify-content: space-between;
  padding: 10px 30px 10px 30px;
  border-bottom: 5px solid $brand-orange;
  @media (max-width: 600px) {
    flex-direction: column;
    justify-content: center;


  }
  .logo {
    min-width: 160px;
    max-width: 250px;
    margin: auto;
  }
  nav {
    flex: 3;
    text-align: right;
    align-self: end;

    li {
      display: inline;
      list-style: none;
      margin: 0 10px;
      &.nav-more {
        display: none;
      }
      &.has-sub-menu {
        position: relative;
        ul {
          margin-top: 0;
          padding-left: 0;
          min-width: 200px;
          text-align: left;

          a {
            @include font-size(16);
          }
        }
        li {
          border-top: 1px solid $brand-darkblue;
          padding: 10px 1px;
          &:first-of-type {
            border-top: none;
          }
        }
        &::after {
          font-family: 'FontAwesome';
          content: "\f107";
          display: inline-block;
          padding-left: 3px;
          color: $brand-darkblue;

        }
        &:hover .sub-menu {
          opacity: 1 !important;
          left: 0;

        }

      }
    }
    a {
      text-decoration: none;
      color: $brand-darkblue;
      @include font-size(20);
      font-weight: bold;

      &:hover {
        text-decoration: underline;
        color: $brand-lightblue;


      }
    }

    .spillover-nav {
      display: none;
      position: absolute;
      right: 0;
      background-color: $brand-white;g
      li {
        display: none;
        &:nth-of-type(1n+4) {display: inline-block;}
      }
    }


    .sub-menu {
      opacity: 0;

      position: absolute;
      z-index: 100;
      background-color: white;
      border: 1px solid $brand-darkblue;
      left: 0;
      left: -9000px;
      transition: opacity .5s;


      ul {
        margin-top: 0;
      }
      li {
        display: block;

      }
    }

    @media (max-width: 850px) {
      li {
        &:nth-of-type(1n+4) {display: none;}
        &.nav-more {
          display: inline;
          li {
            display: none;
            &:nth-of-type(1n+4) {
              display: inline;
            }
          }
        }
      }

    }
    @media (max-width: 600px) {
      flex: 1;
      text-align: center;
      align-self: center;
      ul {
        padding-left: 0;
      }
      a {
        @include font-size(16);
      }
    }
  }




}