.subMenu
  position: relative
  z-index: 5
  &.sticky
    position: fixed
    top: 60px
    width: 100%
    z-index: 999

    .content-container
      width: 100%
      border-radius: 0

      ul
        li
          border-radius: 0

  .content-container
    background: $defaultRed
    border-radius: 6px
    width: 1440px
    max-width: initial
    +transition(all 0.5s)

  ul
    +flex(space-between, center)
    height: 50px
    max-width: 1440px
    margin: auto

    li
      border-right: 1px solid rgba(255, 255, 255, 0.3)
      flex-grow: 1
      position: relative
      height: 100%
      box-sizing: border-box
      &:last-child
        border-right: none
        border-radius: 0 6px 6px 0
      &:first-child
        border-radius: 6px 0 0 6px

      &:hover
        background: $highLightRed

      &.active
        background: $selectedRed

      a
        height: 100%
        +flex(flex-start, center)
        span
          display: inline-block
        &.isolation
          span
            +sprite(-325px -50px, 17px, 18px)
        &.isolation_placing
          span
            +sprite(-325px -95px, 28px, 20px)
        &.pricing_payback
          span
            +sprite(-350px -35px, 9px, 14px)
        &.isolationpearls
          span
            +sprite(-325px -27px, 23px, 22px)

        &.pvc_windows, &.aluminium_windows
          span
            +sprite(-330px 0, 16px, 23px)

        &.pvc_doors, &.aluminium_doors
          span
            +sprite(-348px 0, 16px, 30.5px)

        p
          margin: 0
          +font-semi-bold(16px, 18px)
          color: white
          padding: 0 7%
          width: 100%
          +flex(initial, center)

          span
            margin-right: 20px

.isolation
  .subMenu
    .content-container
      background: darken($defaultGreen, 8%)

    ul
      li
        &:hover
          background: darken($defaultGreen, 12%)

        &.active
          background: darken($defaultGreen, 15%)


.subMenu-placeholder
  height: 50px
  width: 100%
  display: none

  &.show
    display: block


+media-query($maxWidth + 40px)
  .subMenu
    .content-container
      padding: 0
      margin: 0 20px
      width: calc(100% - 40px)

    &.sticky
      .content-container
        margin: 0
        width: 100%

+media-query(1000px)
  .subMenu
    ul
      li
        a
          p
            font-size: 14px
            span
              margin-right: 10px

+media-query(750px)
  .subMenu
    ul
      +flex-rows
      height: 100px
      li
        width: 49% !important
        height: 50px
        border-bottom: 1px solid rgba(255, 255, 255, 0.3)
        //+flex(flex-start, center)
        //padding: 0 10px
        //box-sizing: border-box
        &:first-child
          border-radius: 6px 0 0 0
        &:nth-of-type(2)
          border-radius: 0 6px 0 0
        &:nth-of-type(3)
          border-radius: 0 0 0 6px
          border-bottom-color: transparent
        &:last-child
          border-radius: 0 0 6px 0
          border-bottom-color: transparent

+media-query(400px)
  .subMenu, .subMenu-placeholder.show
    display: none