#Search {
  margin-top: 30px;
}

.coop-header {
  border-bottom: 1px solid #d8d8d8;
  padding: $eighth-spacing-unit 0;
  margin-bottom: $quarter-spacing-unit;
  box-shadow: 0 2px 1px 0 rgba(0,0,0,0.20);
  border-bottom: 0;
  @include media(large) {
    // height: 120px;
    border: 0;
    padding: 0;
  }

  .wrap {
    padding: 0 10px;
  }

  .margin-tx {
    margin-top: 0;
  }
}

.coop-logo {
  display: inline-block;
  display: flex;
  flex: 0 1 auto;
  @include media(medium) {
    // margin-top: 1px; //Getting logo position to match collegues site
    margin-left: 24px;
  }
  @include media(large) {
    // margin-top: 16px;
    margin-left: 19px;
  }

  &--link {
    height: 40px;
    width: 38px;
    text-decoration: none;
    border-bottom-color: transparent;

    &:hover {
      border-bottom-color: transparent;
    }
  }

  img {
    width: 38px;
  }
  @include ie(9) {
    position: relative;
    top: 0;
  }
}

.coop-nav {
  color: #282828;
  display: block;
  //Older browsers
  display: flex;
  justify-content: space-between;
  //font-family: $medium;
  @include medium;

  ul {
    list-style: none;

    li {
      list-style: none;
    }
  }
  @include media(large) {
    display: block;
    display: flex;
    position: relative;
  }

  &__toplink {
    display: inline-block;
    display: flex;
    text-decoration: none;
    text-align: center;
    align-items: center;
    justify-content: center;
    color: #282828;
    border-bottom: none;

    svg {
      margin-left: 6px; //icon
    }

    &:hover {
      color: #282828;
      text-decoration: underline;
      border-bottom: none;
    }
  }

  &__trigger {
    min-width: 66px;
    border-bottom: 4px solid transparent;

    &:hover {
      border-bottom: 4px solid transparent;
    }

    .close-menu {
      display: none;
    }

    &.active {
      @include bold;
      border-bottom-color: #326BB7;

      .open-menu {
        display: none;
      }

      .close-menu {
        display: inline-block;
      }
    }
    @include media(large) {
      display: none;
    }
  }

  &__finder {
    margin-top: -4px;
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
    @include media(large) {
      position: absolute;
      top: 16px;
      right: 390px;
      height: 41px;
      font-family: $bold;
      @include ie(9) {
        top: 20px;
        padding: 5px 0;
      }
    }
  }

  &__signin {
    margin-top: -4px;
    background-color: $white;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    color: #166D66;
    font-size: 16px;
    text-decoration: underline;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-bottom-width: 2px;
    border-bottom-color: transparent;

    &:hover {
      color: #166D66;
      border-bottom-width: 2px;
      border-bottom-color: transparent;
      text-decoration: none;
    }
    @include media(medium) {
      margin-right: 24px;
    }
    @include media(large) {
      position: absolute;
      top: 20px;
      right: 10px;
      height: 41px;
      width: 85px;
      border: #166D66 2px solid;
      border-radius: 7px;
      font-size: 16px;
      text-decoration: none;
      @include bold;

      &:hover {
        border-bottom-width: 2px;
        border-bottom-color: #166D66;
        text-decoration: underline;
      }
    }
    @include ie(9) {
      padding: 6px 0;
    }
  }

  &__wrap {
    @include media(large) {
      display: inline-block;
      display: flex;
    }
  }

  &__link-wrap {
    @include media(large) {
      &:hover + .coop-nav__level2 {
        display: block;
        //Older browsers
        display: flex;
      }
    }
  }

  &__link-wrap.active {
    a {
      &:active {
        color: #282828;
      }
    }
    @media (max-width: 960px) {
      display: block;
      //Older browsers
      display: flex;
      margin-left: -24px;
    }
    //Need to sort mixin out for this for some reason we only have min width set in the frontend toolkit
    @media (max-width: 960px) {
      &.active {
        .coop-nav__level1 {
          background-color: #3E71AF;
          padding-left: 24px;
          border: 0;
          outline: 0;
          color: $white;

          .chevron {
            display: none;
          }

          .open-chevron {
            display: inline-block;
          }
        }
      }
    }
  }

  &__list {
    background: $white;
    display: none;
    margin-bottom: 0;
    padding-left: 0;
    width: 100%;
    list-style: none;
    // position: absolute;
    // top: 50px;
    @include media(large) {
      // top: 54px;
      // left: 0;
      background: transparent;
      display: inline-block; //Older browsers
      display: flex;
      justify-content: space-between;
      padding: 0 72px 0 10px;

      .coop-nav__item {
        &:first-of-type .coop-nav__level1 {
          padding-left: 10px;
        }
      }

      .coop-nav__wrap:hover {
        .coop-nav__level1 {
          border-bottom: 8px solid #326BB7;
        }
      }
      @include ie(9) {
        top: 54px;
        left: 0;
      }
    }

    &.toggle-show {
      //Need to sort mixin out for this for some reason we only have min width set in the frontend toolkit
      @media (max-width: 960px) {
        display: block;
        display: flex;
        flex-direction: column;
        left: 0;
        margin-top: -1px;
        z-index: 10;
      }
    }
  }

  &__item {
    margin-left: $quarter-spacing-unit;
    @include media(large) {
      //display: inline-block; //Older browsers
      padding-right: 0;
      //margin-right: $quarter-spacing-unit;
      margin-left: 0;

      &:hover {
        .coop-nav__level2 {
          display: inline-block; //Older browsers
          display: flex;

          .coop-nav__level1 {
            border-bottom: 8px solid #326BB7;
          }
        }
      }
      @include ie(9) {
        margin-right: $quarter-spacing-unit;
      }
    }
    @include media(xlarge) {
      padding-right: 0;
      @include ie(9) {
        margin-right: half-spacing-unit;
      }
    }
    @media all and (-ms-high-contrast: none) {
      -ms-display: flex;
      -ms-flex-direction: column;
      -ms-flex: 0 1 auto;
    }
  }

  &__link {
    display: block;
    //Older browsers
    display: flex;
    width: 100%;
    padding: 24px 0;
    justify-content: space-between;
    text-decoration: none;
    font-size: 16px;
    color: #282828;
    border-bottom: 4px solid #f7f7f7;

    &:hover {
      color: #282828;
      border-color: #A5A5A5;
    }

    &--strong {
      @include media(large) {
        @include bold;
      }
    }
    //Need to sort mixin out for this for some reason we only have min width set in the frontend toolkit
    @media (max-width: 959px) {
      background-color: $white;
      border-bottom: #A5A5A5 1px solid;
    }
    @include media(large) {
      padding: 10px 8px 8px;
      //  font-family: $regular;
      @include regular;

      &:hover {
        border-bottom: 4px solid #3b70b1;
      }
    }
    @include media(xlarge) {
      // padding-right: $half-spacing-unit;
    }

    svg {
      margin-top: 10px;
      margin-right: 10px;
      margin-left: auto;
    }

    .chevron {
      display: inline-block;
      @include media(large) {
        display: none;
      }
    }

    .open-chevron {
      display: none;
      @include media(large) {
        display: none;
      }
    }

    &.active {
      .chevron {
        display: none;
      }

      .open-chevron {
        display: inline-block;
        @include media(large) {
          display: none;
        }
      }
    }
    @media all and (-ms-high-contrast: none) {
      -ms-display: flex;
      -ms-flex-direction: column;
      -ms-flex: 0 1 auto;
    }
  }

  &__level1 {
    outline: 0;

    &:active {
      color: #282828;
    }
    @include media(large) {
      border-bottom: 8px solid $white;
      // font-family: $medium;
      @include regular;
      padding-left: $quarter-spacing-unit;
      padding-right: $quarter-spacing-unit;

      &:hover {
        border-bottom: 8px solid #326BB7;
        @include medium;
      }

      &:hover + .coop-nav__level2 {
        display: block;
        //Older browsers
        display: flex;
      }
    }
    @include media(xlarge) {
      padding-left: $half-spacing-unit;
      padding-right: $half-spacing-unit;
    }
  }

  &__level2 {
    display: none;
    margin-bottom: 0;
    background-color: #3B70B1;
    @media (max-width: 960px) {
      margin-left: -$quarter-spacing-unit;
    }

    &.toggle-show {
      //Need to sort mixin out for this for some reason we only have min width set in the frontend toolkit
      @media (max-width: 960px) {
        display: block;
        display: flex;
        flex-direction: column;
        padding-left: 0;
      }
    }
    @include media(large) {
      position: absolute;
      background-color: #F7F7F7;
      width: 98%;
      border-top: 2px solid #356DB5;
      border-bottom: 8px solid #356DB5;
      left: 1%;
      top: 50px;
      padding: $eighth-spacing-unit $quarter-spacing-unit;
      z-index: 10;
      justify-content: space-between;

      .coop-nav__item {
        flex-basis: 25%;
      }
      @include ie(8) {
        top: 42px;
      }
      @include ie(9) {
        left: 0;
        margin-left: 0;
      }
    }
    @include media(xlarge) {
      width: 104%;
      left: -2%;
      padding: $eighth-spacing-unit $half-spacing-unit;
    }

    > .coop-nav__item {
      @include media(large) {
        display: inline-block;
        width: 24%;
        margin-right: $quarter-spacing-unit;
        vertical-align: text-top;
        @include ie(9) {
          display: block;
          max-width: 20%;
          float: left;

          &.mega-content {
            max-width: 30%;
          }
        }
      }
    }

    .coop-nav__link {
      padding-left: 24px;
      @include media(large) {
        font-size: 18px;
        padding-left: 0;
      }
    }
    @include media(large) {
      .coop-nav__level1 {
        border-bottom: 8px solid $white;
      }

      &:hover {
        display: block;
        //Older browsers
        display: flex;
      }
    }

    .same-column {
      ul {
        margin-bottom: 0;
        padding-left: 0;
      }
      //Need to sort mixin out for this for some reason we only have min width set in the frontend toolkit
      @media (max-width: 960px) {
        margin-left: 0;
      }
      @include media(large) {
        margin-left: 0;

        .coop-nav__item {
          margin-right: 0;
        }
      }
    }
  }

  &__level3 {
    display: none;
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;

    &.toggle-show {
      //Need to sort mixin out for this for some reason we only have min width set in the frontend toolkit
      @media (max-width: 960px) {
        display: block;
        background: #344E87;
      }
    }
    @include media(large) {
      display: block;

      .coop-nav__item {
        margin: 0;

        &:first-child .coop-nav__link {
          margin-bottom: 0;
        }
      }

      .coop-nav__link {
        padding-bottom: 0;
      }
    }
  }

  &__member {
    background-color: #0F8482;
    color: $white;
    border: 0;
    font-size: 16px;
    width: 100%;
    padding: 24px;
    box-shadow: none;
    border-radius: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      color: white;
      border: none;
      text-decoration: underline;
    }
    @include media(large) {
      position: absolute;
      top: -54px;
      right: 139px;
      width: 232px;
      height: 41px;
      min-width: 232px;
      padding: 0;
      border-radius: 7px;
      text-align: center;
      @include ie(9) {
        top: -54px;
        right: 135px;
        padding-top: 8px;
        padding-bottom: 8px;
      }
    }
  }

  &.toggle-show {
    @include media(large) {
      display: none;
    }
  }

  .menu-inline {
    @include media(large) {
      display: inline-block;
    }
  }

  .mega-content {
    display: none;

    p {
      font-size: 18px;
    }
    @include media(large) {
      display: inline-block;
      display: flex;
      flex-direction: column;
      border-left: 2px solid #C4C4C4;
      padding-right: $quarter-spacing-unit;
      padding-left: $quarter-spacing-unit;

      h4 {
        font-size: 18px;
        margin-bottom: $eighth-spacing-unit;
      }

      .coop-nav__link--strong {
        @include bold;
      }
      @include ie(9) {
        float: right;
      }
    }

    img {
      margin-bottom: $half-spacing-unit;
    }

    .red-text {
      color: #9F2A00;
      //font-family: $bold;
      @include bold;
    }

    &__feature {
      display: flex;
      align-items: center;
      justify-content: space-around;

      &-text {}

      img.mega-content__feature-image {
        width: 100px;
        align-self: center;
        order: 1;
        margin-bottom: 0;
      }
    }
  }
  //Need to sort mixin out for this for some reason we only have min width set in the frontend toolkit
  @media (max-width: 960px) {

    .level3-trigger {
      outline: 0;
      &.active {
        background-color: #344E87;
        border-bottom-color: #344E87;
        color: $white;
        outline: 0;
      }
    }
  }
  //Need to sort mixin out for this for some reason we only have min width set in the frontend toolkit
  @include media(large) {
    .level3-trigger {
      //font-family: $bold;
      padding-bottom: 0;
      @include bold;
      border-bottom: 4px solid #f7f7f7;

      &:hover {
        border-bottom: 4px solid #326BB7;
      }
    }
  }
}
@media (max-width: 960px) {
  .no-js {
    #Search {
      margin-top: 1435px;
    }

    .coop-nav {
      font-family: "AvenirNextLTW01-Medium"!important;

      .coop-nav__list {
        display: block;
        z-index: 10;

        .coop-nav__item {
          margin-left: 0;
          margin-right: 24px;
          width: 100%;

          &:last-child {
            padding-bottom: $eighth-spacing-unit;
          }

          .coop-nav__level1 {
            border-top: #A5A5A5 1px solid;
            font-family: "AvenirNextLTW01-Demi";
          }

          .first-item {
            border-top: 0;
          }

          .coop-nav__level2 {
            display: block;
            margin-left: -24px;
            background-color: transparent;

            .coop-nav__link {
              padding: $eighth-spacing-unit 24px;
            }
          }
        }

        .coop-nav__link {
          border-bottom: 0;
          padding: $eighth-spacing-unit $eighth-spacing-unit 0 0;

          svg {
            display: none;
          }
        }
      }

      .coop-nav__member {
        @include bold;
        background-color: transparent;
        color: #282828;
        padding-left: 0;
      }
    }
  }
}

.hide-large {
  @include media(large) {
    @include visuallyhidden;
  }
}
@media (max-width: 960px) {
  .same-column {
    .margin-tq {
      margin-top: 0;
    }

    .margin-bq {
      margin-bottom: 0;
    }
  }
}
@include media(large) {
  .same-column {
    .margin-bq {
      margin-bottom: $quarter-spacing-unit;
    }

    ul {
      .coop-nav__item {
        .coop-nav__link {
          padding-bottom: 0;
        }

        .coop-nav__link--strong {
          @include bold;
        }
      }
    }
  }
}


.coop-nav--top,
.coop-c-nav--top {
  position: relative;
  top: auto;
  align-items: center;
  margin-bottom: $quarter-spacing-unit;
}

.coop-nav__list,
.coop-c-nav__list {}

.coop-nav__list--top,
.coop-c-nav__list--top {
  position: relative;
  top: auto;
}

.coop-nav__list--bottom,
.coop-c-nav__list--bottom {}

.coop-nav__list--right,
.coop-c-nav__list--right {
  position: relative;
  top: auto;
  justify-self: flex-end;
  flex: 0;
  min-width: 33%;
  max-width: 48%;
  padding: 0;

}

.coop-nav__list--left,
.coop-c-nav__list--left {}