// Header
.header-branding {
  color: white;
  padding: 0;
  @media screen and (max-width: 900px) {
    text-align: center;
  }
  .container {
    display: flex;
    align-items: center;
    @media screen and (max-width: 900px) {
      flex-direction: column;
      padding-left: @cont-padding;
      padding-right: @cont-padding;
    }
  }
  .brand {
    @media screen and (min-width: 901px) {
      flex-basis: 245px;
    }
    img {
      max-width: 1000px;
      padding: 5px 0;
      min-width: 220px;
    }
  }
  .tagline {
    font-size: 18px;
    font-weight: 200;
    color: white;
    flex: 1 auto;
    text-align: right;
    padding: 5px 0;
    @media screen and (max-width: 900px) {
      text-align: center;
    }
    > * {
      display: inline;
      vertical-align: middle;
    }
  }
  a {
    color: white;
    cursor: pointer;
    font-weight: 400;
    transition: 250ms all ease;
  }
  a:hover,
  a:active {
    opacity: .8;
    color: white;
    text-decoration: none;
    transition: 250ms all ease;
  }
  .dropdown {
    padding: 0;
    text-align: right;
    white-space: nowrap;
    .dropdown-menu {
      right: -10px;
      left: auto;
      min-width: auto;
      left: auto;
      & > li > a {
        font-size: 15px;
        padding: 5px 30px 5px 15px;
        position: relative;
      }
    }
  }
}

.dropdown-menu a.active {
  text-decoration: none;
  color: @brand-primary;
  background-color: @gray-lightest;
}

// Navigation
.nav-container {
  position: relative;
  overflow-y: hidden;

  .nav-scroll {
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    margin-bottom: -20px;
    font-size: 0;
    white-space: nowrap;
    @media screen and (max-width: @screen-sm) {
      margin: 0 -5% -20px;
    }
    .nav-inner {
      border-bottom: 2px solid @gray-lighter;
      display: inline-block;
      font-size: 0;
      margin-bottom: 20px;
      min-width: 100%;
      padding: 5px 0 0;
      vertical-align: middle;
      .nav-item {
        display: inline-block;
        font-size: 0;
        &.NAV_Swap a:before {
          content: "";
          display: inline-block;
          margin-top: -.1rem;
          width: 1.3rem;
          height: 1.3rem;
          background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20620.04%20631.27%22%3E%3Ctitle%3Eicon-swap%3C/title%3E%3Cpath%20d%3D%22M469.95%20289.68c-77%200-139.59-62.62-139.59-139.59S392.98%2010.5%20469.95%2010.5s139.59%2062.62%20139.59%20139.59-62.62%20139.59-139.59%20139.59z%22%20fill%3D%22%23ffe14d%22/%3E%3Cpath%20d%3D%22M469.95%2021a129.09%20129.09%200%201%201-129.09%20129.09A129.24%20129.24%200%200%201%20469.95%2021m0-21c-82.76%200-150.09%2067.33-150.09%20150.09s67.29%20150.09%20150.09%20150.09%20150.09-67.33%20150.09-150.09S552.71%200%20469.95%200z%22%20fill%3D%22%230f0f0f%22/%3E%3Cpath%20d%3D%22M599.04%20150.09A129.24%20129.24%200%200%200%20469.95%2021v258.18a129.24%20129.24%200%200%200%20129.09-129.09z%22%20fill%3D%22%23fc3%22/%3E%3Cpath%20d%3D%22M469.95%2044.94a105.12%20105.12%200%201%200%20105.12%20105.15A105.24%20105.24%200%200%200%20469.95%2044.94zm0%20179c-49.27%200-74.85-24.6-74.85-73.87s25.58-74.85%2074.85-74.85%2075.82%2025.58%2075.82%2074.85-26.55%2073.87-75.82%2073.87z%22%20fill%3D%22%23ff9f19%22/%3E%3Cpath%20d%3D%22M545.77%20150.09c0%2049.27-26.55%2074.85-75.82%2074.85v30.27a105.12%20105.12%200%201%200%200-210.24v30.27c49.27%200%2075.82%2025.58%2075.82%2074.85z%22%20fill%3D%22%23f28618%22/%3E%3Cpath%20fill%3D%22%230492be%22%20d%3D%22M100.66%20277.37H26.9V114.06h240.72V50.84l131.7%20100.1-131.7%20100.09v-63.22H100.66v89.56z%22/%3E%3Cpath%20fill%3D%22%23103957%22%20opacity%3D%22.2%22%20d%3D%22M63.78%20150.94h335.54l-131.7-100.1v63.22H26.9v163.31h36.88V150.94z%22/%3E%3Cpath%20d%3D%22M259.71%2034.94l152.67%20116-152.67%20116v-71.23H108.55v89.56H19V106.15h240.71zm126.55%20116L275.52%2066.77v55.17H34.8v147.53h57.95v-89.53h182.77v55.19z%22/%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M292.951%20119.43l9.638-12.482%2047.456%2036.642-9.638%2012.482z%22/%3E%3Cpath%20d%3D%22M150.09%20620.77c-77%200-139.59-62.62-139.59-139.59s62.65-139.59%20139.59-139.59%20139.59%2062.62%20139.59%20139.59-62.62%20139.59-139.59%20139.59z%22%20fill%3D%22%23ffe14d%22/%3E%3Cpath%20d%3D%22M150.09%20352.09A129.09%20129.09%200%201%201%2021%20481.18a129.24%20129.24%200%200%201%20129.09-129.09m0-21C67.33%20331.09%200%20398.42%200%20481.18s67.33%20150.09%20150.09%20150.09%20150.06-67.33%20150.06-150.09-67.3-150.09-150.06-150.09z%22%20fill%3D%22%230f0f0f%22/%3E%3Cpath%20d%3D%22M21%20481.18a129.24%20129.24%200%200%200%20129.09%20129.09V352.09A129.24%20129.24%200%200%200%2021%20481.18z%22%20fill%3D%22%23fc3%22/%3E%3Cpath%20d%3D%22M150.09%20586.3A105.12%20105.12%200%201%200%2044.97%20481.18%20105.24%20105.24%200%200%200%20150.09%20586.3zm0-179c49.27%200%2074.85%2024.6%2074.85%2073.87s-25.58%2074.85-74.85%2074.85-75.82-25.58-75.82-74.85%2026.55-73.86%2075.82-73.86z%22%20fill%3D%22%23ff9f19%22/%3E%3Cpath%20d%3D%22M74.26%20481.18c0-49.27%2026.55-74.85%2075.82-74.85v-30.27a105.12%20105.12%200%201%200%200%20210.24v-30.27c-49.26%200-75.82-25.58-75.82-74.85z%22%20fill%3D%22%23f28618%22/%3E%3Cpath%20fill%3D%22%230492be%22%20d%3D%22M519.39%20353.9h73.75v163.31H352.43v63.22L220.72%20480.34l131.71-100.1v63.22h166.96V353.9z%22/%3E%3Cpath%20fill%3D%22%23103957%22%20opacity%3D%22.2%22%20d%3D%22M556.26%20480.34H220.72l131.71%20100.09v-63.22h240.71V353.9h-36.88v126.44z%22/%3E%3Cpath%20d%3D%22M360.32%20596.36l-152.66-116%20152.66-116v71.25h151.16V346h89.56v179.11H360.32zm-126.55-116l110.74%2084.16v-55.21h240.73V361.8h-57.95v89.56H344.52v-55.19z%22/%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M268.572%20486.574l9.7-12.473%2047.419%2036.875-9.7%2012.473z%22/%3E%3C/svg%3E);
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          vertical-align: middle;
          margin-right: @space-xs;
        }
        a {
          color: darken(@link-color, 15%);
          display: block;
          font-size: 16px;
          font-weight: 300;
          padding: 10px;
          white-space: nowrap;
          position: relative;
          min-height: 2.75rem;
        }
        a:after {
          content: "";
          background: @brand-primary;
          height: 2px;
          width: 100%;
          left: 0px;
          position: absolute;
          bottom: -1px;
          transition: all 250ms ease 0s;
          transform: scale(0);
        }
        &.active a,
        a:hover,
        a:focus {
          color: @brand-primary;
          text-decoration: none;
          transition: all 250ms ease 0s;
          &:after {
            transform: scale(1);
            transition: all 250ms ease 0s;
          }
        }
      }
    }
  }

  .nav-arrow-right,
  .nav-arrow-left {
    background-color: white;
    bottom: 12px;
    color: #d6d6d6;
    font-size: 33px;
    line-height: 1.3;
    min-width: 50px;
    position: absolute;
    top: 0;
    vertical-align: middle;
    width: 5%;
    z-index: 999;
    &:hover {
      text-decoration: none;
    }
  }
  .nav-arrow-right {
    right: 3%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 47%, rgba(255, 255, 255, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    padding-right: 5px;
    text-align: right;
    @media screen and (max-width: @screen-sm) {
      right: 0;
    }
  }
  .nav-arrow-left {
    left: 3%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 47%, rgba(255, 255, 255, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    padding-left: 5px;
    text-align: left;
    @media screen and (max-width: @screen-sm) {
      left: 0;
    }
  }
}