.header_container {
  @include rem(height, 90px);

  @media all and (max-width: $screen-landscape) {
    height: 82px;
  }

  @media all and (max-width: $screen-mobile) {
    height: 56px;
  }
}

.header {
  background: $white;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 110;
  //border-bottom: 1px solid #EBEDEF;

  @include rem(padding, 25px 0);
  @include transition(margin $transition-default);

  .container {
    max-width: 1170px + 30px;
  }

  &__menu_button,
  &__logo {
    display: inline-block;
    vertical-align: middle;
  }

  &__menu_button {
    @include rem(margin-left, -5px);
    @include rem(margin-right, 13px);
  }

  &__logo {
    img {
      @include rem(height, 40px);
    }
  }

  &.nav_down {
    margin-top: 0;
  }

  &.nav_up {
    margin-top: -100px;
  }

  @media all and (max-width: $screen-landscape) {
    &.nav_up {
      margin-top: -80px;
    }
  }

  @media all and (max-width: $screen-mobile) {
    padding: 12px 0;

    &.nav_up {
      margin-top: -58px;
    }

    &__menu_button {
      margin-top: 2px;
    }

    &__logo {
      overflow: hidden;
      width: 34px;
      margin-top: 1px;

      img {
        height: 30px;
      }
    }
  }
}

.header_logo {
  @include rem(margin-top, -2px);

  &__img,
  &__title {
    display: inline-block;
    vertical-align: middle;
  }

  &__img {
    margin-right: 0;
  }

  &__title {
    letter-spacing: -0.5px;
    font-weight: $fw-semi;
    color: $text;
    position: relative;

    @include rem(top, 4px);
    @include rem(font-size, 31px);
    @include rem(line-height, 40px);

    span {
      font-weight: normal;
    }
  }

  @media all and (max-width: $screen-landscape) {
    &__title {
      top: 2px;
    }
  }

  @media all and (max-width: $screen-mobile) {
    &__title {
      display: none;
    }
  }
}

@media (max-width: 543px) {
  .header__logo {
    width: 33px;
  }
}

.btn_menu {
  position: relative;
  width: 30px;
  height: 30px;

  &:after,
  &:before,
  span {
    content: '';
    position: absolute;
    border-radius: $border-radius;
    background: $gray-dark;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 18px;
    height: 2px;

    @include transition(background $transition-default);
  }

  &:after {
    margin-top: -5px;
  }

  &:before {
    margin-top: 5px;
  }

  &:hover {
    &:after,
    &:before,
    span {
      background: $black
    }
  }
}

.header_nav_container {
  @include rem(height, 60px);
}

.header_nav {
  background: $gray-5;
  z-index:109;
  width: 100%;
  left: 0;
  top: 0;
  position: fixed;
  height: auto;

  @include transition(margin $transition-default, top $transition-default);
  @include rem(padding-top, 91px);

  .btn {
    @include rem(margin, 10px 0 0);
  }

  .btn_create_project {
    @include rem(margin, 20px 0 0);
  }

  &__list {
    float: left;

    @extend %disable-list-style;

    @include rem(padding, 13px 0 11px);
    @include rem(margin-left, -14px);
  }

  .container {
    max-width: 1170px + 30px;
  }

  .nav_list {
    &__item {
      text-transform: uppercase;
      font-weight: $fw-semi;

      @include rem(letter-spacing, 2px);

      .icon {
        margin-top: -5px;
        margin-bottom: -5px;
      }
    }
  }

  &.nav_down {
    margin-top: 0;
  }

  &.nav_up {
    margin-top: -91px;
  }

  @media all and (max-width: $screen-landscape) {
    height: 129px;
    padding-top: 83px;
    overflow: hidden;

    &__inner {
      overflow: hidden;
      overflow-x: auto;

      @include rem(height, 85px);
    }

    &.nav_up {
      margin-top: -77px;
    }
  }

  @media all and (max-width: $screen-mobile) {
    padding-top: 62px;
    height: 101px;

    &.nav_up {
      margin-top: -56px;
    }
  }
}

.nav_list {
  white-space: nowrap;

  &__item {
    color: $black;
    display: inline-block;
    vertical-align: middle;
    position: relative;

    @include rem(font-size, 15px);

    > a {
      color: inherit;
      display: block;

      @include rem(padding, 10px 13px);
    }

    &--active {
      > a {
        color: $primary !important;
      }
    }
  }

  @media all and (min-width: $screen-landscape + 1) {
    &__item {
      &:hover {
        .submenu {
          opacity: 1;
          visibility: visible;
          pointer-events: all;
        }
      }

      > a {
        &:hover {
          color: rgba($black, .6);

          + .submenu {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
          }
        }
      }
    }
  }
}

.site_nav {
  overflow: hidden;

  @include rem(height, 80px);

  .container {
    max-width: 1170px + 30px;
  }

  &__inner  {
    overflow: hidden;
    overflow-x: auto;

    @include rem(padding, 19px 0);
    @include rem(height, 100px);
  }

  .nav_list {
    padding: 0;

    &__item {
      color: rgba($black, .6);

      @include rem(font-size, 18px);

      > a {
        color: inherit;

        &:hover {
          color: $black;
        }
      }

      &--active {
        font-weight: $fw-semi;

        > a {
          position: relative;
          color: $black !important;

          @include rem(top, 1px);
        }
      }
    }
  }

  @media all and (max-width: $screen-landscape) {
    &__inner {
      white-space: nowrap;
    }

    .btn,
    .nav_list {
      float: none !important;
      display: inline-block;
      vertical-align: middle;
    }

    .btn {
      margin-right: 15px;
    }
  }
}

.header_actions {
  @include rem(margin-bottom, -3px);

  &__search,
  &__notifications,
  &__location,
  &__notifications,
  &__services,
  &__login,
  &__logout {
    float: left;
    position: relative;

    @include rem(margin-left, 15px);

    > .btn--icon {
      @include rem(padding, 7px 8px);
      @include rem(font-size, 16px);

      .icon {
        @include rem(font-size, 30px);
      }
    }
  }

  &__search {
    > .btn--icon {
      .icon {
        @include rem(font-size, 26px);
        @include rem(line-height, 32px);
      }
    }
  }

  &__logout {
    @include rem(margin-right, -10px);
  }

  &__login {
    position: relative;

    @include rem(margin-right, -10px);
    @include rem(margin-left, 15px);

    .header_user {
      .header_user__img + .header_login__title {
        color: $text;
      }
    }

    a {
      display: block;
      color: #111;

      @include clearfix;
      @include rem(padding, 5px 10px);

      &:hover {
        color: rgba($black, .8);
      }
    }
  }

  .btn--icon {
    &:hover, &.active {
      color: #111 !important;
    }
  }

  @media all and (min-width: $screen-landscape + 1) {
    .btn:hover + .submenu {
      opacity: 1;
      visibility: visible;
      pointer-events: all;
    }
  }

  @media all and (max-width: $screen-landscape) {
    &__search,
    &__notifications,
    &__location,
    &__notifications,
    &__services,
    &__login,
    &__logout {
      margin-left: 8px;
    }

    &__login {
      margin-right: -3px;

      a {
        padding: 0;
      }
    }

    .btn {
      .icon {
        font-size: 24px;
      }

      span {
        display: none;
      }
    }

    &__logout {
      .btn--icon .icon {
        font-size: 18px;
        position: relative;
        top: 1px;
      }
    }
  }
}

.header_user {
  @include clearfix;

  &__img {
    float: left;

    @include rem(width, 40px);
    @include rem(height, 40px);
    @include rem(margin-top, -3px);
    @include rem(margin-bottom, -3px);

    img {
      border-radius: 100px;

      @include rem(width, 40px);
      @include rem(height, 40px);
    }

    + .header_login__title {
      color: $text;
    }
  }

  @media all and (max-width: $screen-landscape) {
    &__img {
      margin-top: 0;
      margin-bottom: 0;
      margin-right: 0;

      + .header_login__title {
        display: none;
      }

      img {
        width: 32px;
        height: 32px;
      }
    }
  }
}

.header_login {
  &__title {
    overflow: hidden;
    font-weight: $fw-semi;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;

    @include rem(font-size, 16px);
    @include rem(padding, 8px 0);
    @include rem(max-width, 170px);
  }

  @media all and (max-width: $screen-landscape) {
    &__title {
      padding: 11px 0;
    }
  }
}

.btn.btn_create_project {
  min-width: 0;
  text-align: center;

  @include rem(width, 24px);
  @include rem(height, 24px);
  @include rem(font-size, 33px);
  @include rem(padding, 0);
  @include rem(line-height, 22px);

  .icon {
    margin-right: 0;
  }

  &:hover {
    @include scale(1.2);
  }
}

.sidebar_menu {
  position: fixed;
  z-index: 115;
  background: $white;
  top: 0;
  left: 0;
  bottom: 0;
  max-width: 100%;

  @include transition(transform $transition-default);
  @include transform(translate(-100%, 0));
  @include rem(width, 380px);

  &__body {
    overflow: hidden;
    overflow-y: visible;
    height: 100%;
    -webkit-overflow-scrolling: touch;

    @include rem(padding, 115px 30px 230px 28px);
  }

  &__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 15px;
    border-bottom: 1px solid $border-alt;
    background: $white;
    z-index: 10;

    @include rem(padding, 25px 0);
    @include rem(margin, 0 28px);

    .btn {
      display: none;
    }

    .header_logo__img {
      margin-right: 0;
    }
  }

  &__inner {
    height: 100%;
    position: relative;
  }

  &__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 15px;
    background: $white;

    @include rem(padding, 20px 15px 54px 30px);
  }

  .social {
    text-align: left !important;

    li {
      float: left;
      width: 50%;
    }

    &__item {
      letter-spacing: 0;
      color: rgba($black, .8);
      display: block;

      @include rem(font-size, 16px);
      @include rem(line-height, 24px);
      @include rem(padding, 10px);
    }

    .icon {
      text-align: center;

      @include rem(width, 20px);
      @include rem(margin-right, 15px);
    }
  }

  &--open {
    @include transform(translate(0, 0));
  }

  @media all and (max-height: 860px),
  all and (max-width: $screen-mobile),
  screen and (max-device-width: $screen-tablet),
  screen and (pointer:coarse) {
    .social {
      text-align: center !important;

      li {
        float: none;
        width: auto;
        display: inline-block;
        vertical-align: middle;
        margin-left: 0px;

        &:first-child {
          margin-left: 0;
        }
      }

      &__item {
        .icon {
          margin-right: 0;
        }

        span {
          display: none;
        }
      }
    }

    &__footer {
      padding-left: 10px;
      padding-right: 5px;

      @include rem(padding-bottom, 20px);
    }

    &__body {
      @include rem(padding-bottom, 80px)
    }
  }
  
  @media all and (max-width: $screen-mobile) {
    width: 100%;
    display: none;

    @include transform(translate(0, 0));

    &__body {
      padding-left: 12px;
      padding-right: 12px;
      padding-top: 72px;
    }

    &__header {
      margin: 0 0 0 12px;
      padding: 15px 0;
      right: 12px;

      .btn {
        display: block;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -14px;

        .icon {
          position: relative;
          top: 1px;
          font-size: 24px;
        }
      }
    }

    .header_logo {
      text-align: center;

      &__img {
        height: 30px;
      }
    }

    &--open {
      display: block;
    }
  }
}

.main_projects_list {
  &__img {
    float: left;

    @include rem(margin-right, 12px);
  }

  &__content {
    overflow: hidden;

    @include rem(padding-top, 11px);
  }

  &__title {
    color: $text;
    font-weight: $fw-semi;

    @include rem(font-size, 25px);
    @include rem(line-height, 30px);
    @include rem(letter-spacing, -1px);
    @include rem(margin, 0 0 5px);

    @include transition(color $transition-default);

    span {
      font-weight: normal;
    }
  }

  &__link {
    @include clearfix;
  }

  &__item {
    @include rem(margin-bottom, 12px);
    @include rem(padding-bottom, 13px);

    a {
      &:hover {
        .main_projects_list__title {
          color: rgba($black, .8);
        }
      }
    }
  }

  &__text {
    color: rgba($black, .6);

    @include rem(font-size, 16px);
    @include rem(line-height, 24px);
  }

  @media all and (max-height: 860px) and (min-width: $screen-tablet + 1) {
    &__text {
      font-size: 14px;
      line-height: 22px;
    }
  }

  @media all and (max-width: $screen-mobile) {
    &__item {
      border-bottom: 1px solid $border-alt;
      padding-bottom: 18px;
    }
  }
}

.body--menu_opened {
  overflow: hidden;

  @media all and (min-width: $screen-mobile + 1) {
    article, header, footer, nav.header_nav, .site_nav {
      -webkit-filter: blur(5px);
      filter: blur(5px);
    }

    .menu_overlay {
      visibility: visible;
      opacity: 1;
    }
  }

  @media all and (max-width: $screen-mobile) {
    position: fixed;
  }
}

.body--search_showed {
  @media all and (max-width: $screen-mobile) {
    article, footer, nav.header_nav, .site_nav {
      -webkit-filter: blur(5px);
      filter: blur(5px);
    }

    .menu_overlay {
      visibility: visible;
      opacity: 1;
      z-index: 110;
    }
  }
}

.menu_overlay {
  position: fixed;
  z-index: 114;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  background: rgba(#CFD2D7, .5);

  @media all and (min-width: $screen-mobile + 1) {
    @include transition(all $transition-default);
  }
}

.header_search {
  position: absolute;
  z-index:10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: $white;
  display: none;

  @include rem(padding, 25px 0);

  .form-control {
    border: 0;
    border-radius: 0;

    @include rem(height, 40px);
    @include rem(padding-left, 35px);
  }
  
  &__btn {
    position: absolute !important;
    left: 0;
    top: 50%;

    @include rem(margin-top, -13px);
  }
  
  &__field {
    overflow: hidden;
  }
  
  &__buttons {
    float: right;

    .btn--icon {
      color: #CFD2D7;

      @include rem(padding, 7px 6px);
      @include rem(margin-right, -6px);
    }
  }

  &__inner {
    position: relative;
  }

  .btn--icon {
    .icon {
      font-size: 20px;
    }
  }

  &--show {
    display: block;
  }
  
  @media all and (max-width: $screen-mobile) {
    padding: 15px 0;
    top: 100%;
    margin-top: 1px;
  }

  @media all and (max-width: $screen-landscape) {
    &__btn {
      @include rem(margin-top, -16px);
    }

    .form-control {
      @include rem(padding-left, 40px);
    }
  }
}

.submenu {
  position: absolute;
  left: 0;
  top: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  min-width: 110%;

  @extend %disable-list-style;
  @include rem(margin-left, -5px);
  @include rem(padding-top, 12px);
  @include transition(opacity $transition-default, visibility $transition-default);

  &:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }
}

.submenu_list {
  text-transform: none;
  letter-spacing: 0;
  border-radius: $border-radius;
  background-color: $white;
  font-weight: normal;
  z-index:111;
  box-shadow: 0 8px 50px 0 rgba(63, 77, 96, 0.4), 0 5px 5px 0 rgba(63, 77, 96, 0.05);

  @include rem(padding, 5px);
  @include rem(font-size, 16px);

  &__item {
    color: $black;

    a {
      color: $black;
      display: block;

      @include rem(padding, 10px 13px);

      &:hover {
        color: rgba($black, .7);
        background-color: #f5f6f7;
      }
    }

    &--active {
      a {
        color: rgba($black, .7);
        background-color: #f5f6f7;
      }
    }
  }
}

.is_mobile {
  .nav_list {
    &__item {
      position: static;

      &--selected {
        > a {
          color: rgba($black, .6);
        }

        .submenu {
          opacity: 1;
          visibility: visible;
          pointer-events: all;
        }
      }
    }
  }

  .header_nav {
    &--selected {
      overflow: visible;
    }
  }
/*
  .submenu {
    padding-top: 0;
    z-index: 1;
    left: auto;
    width: auto;
    min-width: 0;
    display: block;
  }

  .submenu_list {
    box-shadow: 0 8px 20px 0 rgba(63, 77, 96, 0.2), 0 5px 5px 0 rgba(63, 77, 96, 0.05);
    border-radius: 0 0 $border-radius $border-radius;

    &__item > a {
      padding: 10px 15px;
      font-size: 14px;
    }
  }
  */
  @media all and (max-width: $screen-mobile) {
    .nav_list {
      &__item {

        &:last-child,
        &:last-of-type,
        &:nth-child(4){
          .submenu {
            right: 0;
          }
        }
      }
    }
  }
}

.header_submenu {
  min-width: 270px;
  left: auto;
  right: 0;

  @include rem(padding-top, 20px);
  @include rem(margin-right, -84px);

  .submenu_list {
    padding: 8px;
  }

  .main_projects_list {
    &__item {
      padding-bottom: 0;
      margin-bottom: 0;

      a {
        display: block;
        border-radius: $border-radius;
        padding: 10px 12px;

        &:hover {
          background-color: #f5f6f7;

          .main_projects_list__title {
            color: #111111;
          }
        }
      }
    }

    &__img {
      margin-right: 14px;
    }

    &__text {
      line-height: 1.4;
      font-size: 14px;
    }

    &__title {
      line-height: 1.3;
      letter-spacing: 0;
      font-weight: $fw-semi;
      color: #111111;
      font-size: 16px;
      margin-bottom: 5px;

      span {
        font-weight: $fw-semi;
      }
    }

    &__content {
      padding-top: 5px;
      padding-bottom: 12px;
    }
  }

  .social {
    padding: 8px 6px;

    li {
      display: inline-block;
      text-align: center;

      @include rem(margin-bottom, 5px);
      @include rem(width, 45px);
    }

    a {
      opacity: 0.6;
      color: #3f4d60;
      display: inline-block;

      @include rem(padding, 10px);

      &:hover {
        opacity: 1;
      }
    }

    .icon {
      margin-right: 0;

      @include rem(font-size, 16px);
    }
  }

  @media all and (max-width: $screen-landscape) {
    position: fixed;
    left: 0;
    top: 77px;
    bottom: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    border-top: 1px solid #ebedef;
    padding-top: 10px;
    z-index: 99999;
    background-color: #fff;

    @include transform(translate3d(0,0,0));

    &.open {
      display: block;
      opacity: 1;
      visibility: visible;
      pointer-events: all;
    }

    .submenu_list {
      height: 100%;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }

    .main_projects_list {
      &__item {
        border: 0;
      }
    }

    .social {
      padding-top: 30px;
      padding-bottom: 30px;

      li {
        width: 50px;
        margin-bottom: 12px;
      }

      .icon {
        font-size: 18px;
      }
    }
  }

  @media all and (max-width: $screen-mobile) {
    top: 56px;

    .social {
      max-width: 340px;
    }
  }
}

.container,
.header .container,
.header_nav .container,
.site_nav .container {
  max-width: 1250px;
}

@media all and (max-width: $screen-landscape) {
  .submenu_opened {
    overflow: hidden;
    height: 100%;
  }
}