IT61/it61-rails

.navbar {
  width: 100%;
  overflow: hidden;

  &-blue {
    background: $blue;

    .hamburger {
      color: $white;
    }
  }

  &-wrapper {
    padding: 16px 0;
    position: relative;
    @include clearfix;

    @include media($desktop-md-max) {
      padding-left: 20px;
      padding-right: 20px;
    }
  }

  .hamburger {
    display: none;
    font-size: 18px;
    line-height: 30px;
    cursor: pointer;

    @include media($tablet-screen-max) {
      display: inline-block;
      position: absolute;
      padding: 18px 15px 15px 0;
      top: 0;
    }
  }

  .logo {
    display: inline-block;
    vertical-align: bottom;
    background: image_url("logo-white.svg") no-repeat;
    background-size: cover;
    width: 33px;
    height: 33px;

    @include media($tablet-screen-max) {
      display: none;
    }
  }

  &-profile {
    .avatar, .name, .btn {
      display: inline-block;
      vertical-align: middle;
    }

    .avatar {
      margin-right: 11px;
      width: 25px;
      height: 25px;
    }

    .name {
      color: $white;
      font-size: 18px;
      margin-right: 11px;
      font-weight: 700;
      max-width: 155px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .btn-small {
      margin-top: 2px;
      padding: 6px 9px;
    }
  }

  &-menu {
    display: inline-block;
    vertical-align: super;
    @include media($tablet-screen-max) {
      display: none;
    }

    li {
      display: inline;
      text-transform: uppercase;
      font-weight: bold;
      cursor: pointer;
      margin-left: 35px;
    }

    a {
      color: $white;

      &.active, &:hover {
        opacity: 0.7;
      }
    }
  }
}

.content-background {
  background-color: #327ab5;
  height: 398px;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.header-title {
  background: $blue;
  padding: 45px 0 20px;

  @include media($tablet-screen-max) {
    padding-top: 20px;
  }

  h1 {
    font-size: 36px;
    color: $white;
    margin-bottom: 0;
  }
}