#header{
  position: relative;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  box-shadow: 0px 0px 20px #666;
}

.header-logo{
  display: flex;
  align-items: center;

  &>a{
    max-width: 420px;
  }
  
  & .badges{
    padding-left: 15px;
    margin-left: 15px;
    border-left: 2px solid var(--pnt--color--steel-gray);
  }
}

#header-nav{
  justify-content: flex-end;

  & .nav-item{
    & .nav-link{
      white-space: nowrap;
      color: var(--pnt--color--steel-gray);
    }

    &.active .nav-link,
    & .nav-link:hover,
    & .nav-link:focus,
    & .nav-link.active{
      color: var(--pnt--color--steel-blue);
      text-decoration: none;
    }
  }

  & .dropdown-menu{
    & .dropdown-item{
      color: var(--pnt--color--steel-gray);
    }

    & .nav-item.active,
    & .dropdown-item.active,
    & .dropdown-item:hover,
    & .dropdown-item:focus,
    & .dropdown-item:active{
      color: var(--pnt--color--steel-blue);
      text-decoration: none;
      background-color: #fff;
    }
  }

  & .dropdown-toggle:after{
    transition: var(--pnt--transition--normal);
    margin-left: 0;
  }

  & .dropdown-toggle.show:after{
    transform: rotate(180deg);
  }

  .nav-item.header-login > a.nav-link{
    color: var(--pnt--color--steel-blue);
    border: 2px solid var(--pnt--color--steel-blue);
    padding: 10px 16px;
    line-height: 1em;
    border-radius: 12px;
    display: inline-block;
  
    &:hover,
    &:focus{
      color: #fff;
      background-color: var(--pnt--color--burnt-red);
      border-color: var(--pnt--color--burnt-red);
    }
  }
}

.header-mobile-ctas{
  margin-top: 30px;
  margin-left: auto;
}

.navbar-toggler{
  border-color: var(--pnt--color--steel-gray);
}

.navbar-toggler .icon-bars{
  height: 30px;
  width: 30px;
  fill: var(--pnt--color--steel-gray);
}

@media (min-width: 992px){
  #header{
    position: fixed;
  }

  body{
    margin-top: 138px;
  }

  #header-nav .nav-item.header-login > a.nav-link{
    margin-left: 20px;
  }
}