.os-products-menu {
  background-color: #313334;
  height: 100%;
  left: -$os-header-product-menu-width;
  position: fixed;
  width: $os-header-product-menu-width;
  z-index: $os-header-products-z-index;
  @include transition(.25s ease-out all);

  &.os-products-menu-open {
    left: 0;
  }

  ul {
    padding-left: 0;
    padding-top: $os-header-height;

    li {
      font-weight: 300;
      line-height: 2.5em;
      list-style-type: none;
      padding-left: 20px;

      &.selected {
        background-color: $dark-grey;
        border-left: 3px solid $teal;
      }

      a {
        color: $white;
        text-decoration: none;

        &:hover {
          text-decoration: none;
        }
      }
    }
  }
}

.os-header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: $os-header-height;
  z-index: $os-header-z-index;
  color: $os-header-text;
  @include box-shadow(0 1px 1px $light-grey-alt);
  @include transition(.25s ease-out all);

  &.os-products-menu-open {
    margin-left: $os-header-product-menu-width;
  }

  .osicon-hamburger,
  .osicon-close {
    color: $dark-grey-alt;
  }
}

.os-header-vertical-rule {
  display: inline-block;
  height: 70%;
  border-right: 2px solid $medium-light-grey;
  float: left;
  margin-right: 18px;
  margin-top: 10px;
}

.os-header-content {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: $os-header-background;
  line-height: $os-header-height;

  .app-menu-trigger {
    border-right: 0;
    float: left;
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
    width: 62px;

    .osicon {
      font-size: 1.6em;
    }
  }

  .os-logo {
    position: relative;
    float: left;
    min-width: 100px;
    height: 100%;

    .os-logo-img {
      width: 130px;
      height: 18px;
    }

    .os-logo-text {
      font-size: $font-size-regular;
      padding-left: 20px;
      font-weight: $font-weight-light;
      vertical-align: sub;
      max-width: 415px;
      @include localized-line;
    }
  }
}

.os-cityscape-background-wrap {
  position: absolute;
  width: 100%;
  height: $os-header-height;
  top: 0;
  left: 0;
  overflow: hidden;

  .os-cityscape-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: $os-header-background-image-opacity;
    background-image: url('../img/cityscape_cross_section.jpg');
    background-repeat: no-repeat;
    background-position: 0 0;
  }
}

.os-header-notifications {
  display: none;
  position: relative;
  float: right;
  padding-right: 20px;

  .os-icon-button {
    height: 100%;
    width: auto;
    margin: 0;
  }

  .osicon {
    color: $white;
    font-weight: normal;
  }
}

.os-header-right {
  float: right;

  .osicon {
    color: $white;
    font-weight: normal;
  }
}

@media (max-width: 1024px) {

  .os-header-content {

    .os-logo {

      .os-logo-text {
        display: none;
      }
    }
  }

}

@media (max-width: 480px) {

  .os-header {
    height: $os-header-mobile-height;

    .os-products-menu {
      width: $os-header-product-menu-mobile-width;
      height: $os-header-mobile-height;

      .osicon {
        font-size: $font-size-regular-small;
        padding: 15px 0;
      }

    }
  }

  .os-header-content {
    line-height: $os-header-mobile-height;

    .os-logo {
      padding-left: 16px;

      .os-logo-img {
        width: 90px;
        height: 12px;
      }

      .os-logo-text {
        float: left;
        padding-left: 10px;
        position: absolute;
        bottom: 8px;
      }
    }
  }

  .os-cityscape-background-wrap {
    width: $os-header-background-image-mobile-large-width;
    height: $os-header-mobile-height;

    .os-cityscape-background {
      background-image: url('../img/cityscape_cross_section_mobile.jpg');
    }
  }

  .os-header-notifications {

    .osicon {
      font-size: $font-size-regular-small;
    }
  }
}

@media (max-width: 320px) {
  .os-header-content {

    .os-logo {
      padding-left: 16px;
    }
  }
}