// Header styles.
.page-head {

  &__logo {
    display: inline-block;

    @include breakpoint($screen-tablet) {

    }

    @include breakpoint($screen-desktop) {
      border-bottom: none;
      display: block;
      padding-bottom: 9px;
      position: absolute;
      z-index: 1001;
    }

    .logo {
      height: 38px;
      margin: 16px;

      @include breakpoint($screen-desktop) {
        height: 70px;
      }
    }

    .aof {
      display: none;

      @include breakpoint($screen-lg-desktop) {
        display: inline;
        height: 33px;
        margin-left: -22px;
        margin-top: 35px;
      }
    }
  }

  &__search {
    padding-left: 140px;
    z-index: 50;

    .search-form-wrapper {
      background-color: $blue;
      padding-bottom: 22px;
    }

    form {
      display: inline-block;
    }

    input[type="submit"] {
      display: none;
    }

    .search-input {
      width: 676px;
      display: inline-block;

      @include breakpoint($screen-lg-desktop) {
        width: 838px;
      }
    }

    &-close {
      color: $white;
      padding-left: 22px;
      text-transform: uppercase;

      &:hover {
        color: $light-grey;
        text-decoration: none;
      }
      .fa {
        font-size: 34px;
        vertical-align: top;
      }
    }
  }
  .is-camp &__top-menu,
  &__top-menu {
    @include clearfix();

    border-bottom: 1px solid $medium-grey;

    .navbar-nav>li>a {
      text-shadow: none;

      @include breakpoint($screen-tablet) {
        padding-bottom: 12px;
        padding-top: 12px;
      }
    }

    a {
      @include cachet();
      font-size: 16px;
      font-style: normal;
      font-stretch: normal;
      font-weight: 500;
      line-height: 1.06;
      text-transform: uppercase;

    }

    @include breakpoint($screen-desktop) {
      border-bottom: none;

      a {
        font-size: 12px;
        line-height: 1.42;
      }
    }
    &.clearfix {
      // Fix for menu contextual links.
      overflow: visible;
    }
  }
  .is-camp &__main-menu,
  &__main-menu {

    a {
      @include cachet();
      font-size: 18px;
      font-weight: 500;
      font-style: normal;
      font-stretch: normal;
      line-height: 0.85;
      text-transform: uppercase;
    }

    .navbar-nav>li>a {
      @include breakpoint($screen-tablet) {
        padding-top: 10px;
      }
    }

    @include breakpoint($screen-desktop) {
      border-bottom: none;

      .nav-level-2,
      .nav-level-3 {
        > a {
          text-shadow: none;
          text-transform: uppercase;
          white-space: normal;
        }
      }
    }
  }
}

.search-input {
  border: 1px solid $light-grey;
  border-radius: 8px;
  width: 100%;
  height: 40px;
  line-height: 26px;
  padding: 7px 10px 7px 35px;
}

.search-input-decoration {
  position: absolute;
  font-size: 22px;
  color: $blue;
  margin-top: 12px;
  margin-left: 8px;
}

.top-navs {
  height: 70px;
  background-color: $blue;

  .viewport & {
    height: $top-nav-height;
    border-bottom: none;
  }

  .navbar-default {
    background: none;
    border: none;
    box-shadow: none;
    top: 0 !important;
  }

  @include breakpoint($screen-tablet) {

  }
}


.viewport {
  overflow: hidden;
  -webkit-filter: none;
}

@include breakpoint(0 $screen-sm-max) {
  .icon-bar {
    transition: -webkit-transform .35s .35s ease-out, height .35s .35s, width .35s .35s, padding-bottom .35s .35s;
  }
  .sidebar-in .navbar-toggle  {

    .icon-bar {
      height: 8px;
      transition-delay: 0s;
      width: 28px;
      @include border-radius(1px);

      &:first-of-type {
        -webkit-transform: translate(0, 8px) rotate(-45deg);
        transform: translate(0, 8px) rotate(-45deg);
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
      }
      &:last-of-type {
        -webkit-transform: translate(0px, -18px) rotate(45deg);
        transform: translate(0px, -18px) rotate(45deg);
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
      }
      &:nth-of-type(2) {
        -webkit-transform: scale(0);
        transform: scale(0);
      }
    }
  }
}

.modal-open .viewport {
  -ms-filter: blur(5px);
  -webkit-transition: -webkit-filter 0s .25s linear;
  -moz-transition: -moz-filter 0s .25s linear;
  -ms-transition: -ms-filter 0s .25s linear;
  -o-transition: -o-filter 0s .25s linear;
  transition: filter 0s .25s linear;
  -moz-filter: blur(5px);
}

.sidebar {
  .search-form-wrapper {
    border-bottom: 1px solid $medium-grey;
    border-top: 1px solid $medium-grey;
    padding-bottom: 22px;
    padding-top: 22px;
  }

  @include breakpoint($screen-desktop) {
    body & {
      display: none !important;
    }
  }
}

@include breakpoint(0 $screen-sm-max) {

  .sidebar.collapsing-in,
  .sidebar.collapsing-out {
    width: 100% !important;
  }
  .sidebar.collasping-in + .viewport:after {
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
  }
  .viewport {
    &:after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 100%;
      left: -1px;
      z-index: 1001;
      display: block;
      background-color: rgba(0, 0, 0, 0);
      content: '';
      -webkit-transition: background-color .2s .2s ease-out, bottom 0s .4s linear;
      -moz-transition: background-color .2s .2s ease-out, bottom 0s .4s linear;
      -ms-transition: background-color .2s .2s ease-out, bottom 0s .4s linear;
      transition: background-color .2s .2s ease-out, bottom 0s .4s linear;
    }
    &.in:after, &.collapsing-in:after {
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.64);
      -webkit-transition-delay: 0s, 0s;
    }
  }
  .navbar > .container .navbar-brand {
    left: 50%;
    float: none;
    margin-left: -24px;
    padding: 0;
    height: 80%;
    background-position: left top;
    background-size: contain;
  }
  .collapsing-in .nav-global, .in .nav-global, .collapsing-out .nav-global {
    position: absolute;
    margin-top: -50px;
  }

  .viewport.collapsing-out {
    -webkit-transition: -webkit-transform .35s ease-out;
    -moz-transition: -moz-transform .35s ease-out;
    -ms-transition: -ms-transform .35s ease-out;
    transition: transform .35s ease-out;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .sidebar > .nav {
    overflow: hidden;
    width: 100%;
  }

  .viewport {
    position: relative;
    width: 100%;

    &.collapsing-in,
    &.collapsing-out {
      position: fixed;
      left: 0;
      height: 100%;
      width: 100%;
    }

    &.collapsing-in {
      -webkit-transition: -webkit-transform .35s ease-out;
      -moz-transition: -moz-transform .35s ease-out;
      -ms-transition: -ms-transform .35s ease-out;
      transition: transform .35s ease-out;
    }
    &.in {
      position: fixed;
      top: 30px;
      left: 0;
      bottom: 0;
      -webkit-transform: translateX(100%);
      -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
    &.collapsing-in {
      -webkit-transform: translateX(100%);
      -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
  }

  html.sidebar-in {
    overflow: hidden;
  }
}


.navbar-toggle {
  border: none;
  margin-bottom: 13px;
  margin-top: 13px;
  padding: 9px 6px;
}

.navbar-default {

  .navbar-toggle,
  .navbar-toggle:focus,
  .navbar-toggle:hover,
  .navbar-toggle:active {
    background-color: $blue;
    cursor: pointer;

    .icon-bar {
      background-color: $white;
    }
  }
}

.navbar-toggle .icon-bar {
  border-radius: 1px;
  display: block;
  height: 5px;
  width: 31px;
}

.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 5px;
}

.viewport {
  .nav-global {
    > .container > .row {
      height: $top-nav-height;
      position: relative;

      .header-content {
        bottom: 0;
        position: absolute;

        .page-head__search {

        }
      }
    }
  }

  .header-content {
    .page-head__search {
      bottom: 1px;
      position: absolute;
      width: 100%;
    }
  }
}

.toolbar-fixed {
  &.toolbar-horizontal {
    .viewport,
    .top-navs {
      margin-top: 39px;
    }

    &.toolbar-tray-open {
      .viewport,
      .top-navs {
        margin-top: 79px;
      }
    }
  }

  &.toolbar-vertical {
    .viewport,
    .top-navs {
      margin-top: 39px;
      &.affix {
        margin-top:39px;
      }
    }

    .sidebar {
      top: 109px;
    }

    &.toolbar-tray-open {
      .viewport .top-navs {
        margin-left: 15rem;
      }
    }
  }
}

.toolbar-vertical {
  .top-navs {
    &.affix ~ .viewport {
      margin-top:0;
    }
  }
}

.toolbar-vertical {
  .top-navs {
    &.affix-top ~ .viewport {
      margin-top:39px;
    }
  }
}

.toolbar-vertical {
  .top-navs {
    margin-top: 39px;
    &.affix {
      margin-top: 0px;
    }
  }
  .sidebar {
    top:109px;
  }
  &.toolbar-tray-open {
    .top-navs {
      margin-left: 150px;
    }
  }
}
