.landing-features
  margin-top: -60px

  .landing-features-nav
    height: 60px
    width: $contentGrid*10
    max-width: 1200px
    margin: auto
    position: relative
    .placeholder
      background-color: $darkBlue
      width: 100%
      height: 100%
      max-width: 1200px
      margin: auto
      +transition(all 0.3s)

      .wrapper
        max-width: 1200px
        margin: auto
        height: 100%
        +flex(space-between, center)

    p, li
      width: calc( (100% - 3px) /4)
      margin: 0
      height: 100%
      border-right: 1px solid $lightBlue
      background-color: $darkBlue
      +transition(all 0.3s)
      a
        width: 100%
        height: 100%
        padding: 0 8%
        color: white
        +flex(flex-start, center)
        +transition(all 0.3s)
        span
          +font-semi-bold(17px, 18px)
          font-size: 15px
          color: white
          display: block
          width: 100%
      &:last-of-type
        border-right: none
      &:hover
        background-color: darken($darkBlue, 10%)
      &.active
        background-color: white
        a
          span
            color: $orange
            +font-semi-bold(17px, 18px)
  &.sticky-nav
    padding-top: 60px

    .landing-features-nav
      position: fixed
      z-index: 999
      max-width: none 
      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.11)
      top: 100px
      width: 100% !important
      margin: auto
      left: 0
      .placeholder
        max-width: 100%

.project-landings-item
  .placeholder
    width: $contentGrid*10
    max-width: 1200px
    margin: auto
    padding: 125px 0

  h3
    margin-bottom: 80px
    span
      display: block
      text-align: center
      margin-bottom: 25px
      &:before
        content: ''
        display: inline-block

    +font-light(32px)
    text-align: center
    line-height: 28px !important
    font-size: 28px
    color: $darkBlue
    sub
      +font-light(20px)
      font-size: 18px
      color: $lightBlue 
      display: block

  &#features_first
    h3 span:before
      +sprite(-240px -119px, 37px, 34px)
  &#features_second
    h3 span:before
      +sprite(-245px -35px, 38px, 26px)
  &#features_third
    h3 span:before
      +sprite(-225px -65px, 22px, 28px)
  &#features_fourth
    h3 span:before
      +sprite(-330px -0px, 37px, 32px)
  .inner
    +flex(space-between, flex-start)

    .text
      width: calc(100% / 10 * 3.5)
      &.full-width
        width: 100%
        padding: 0 20%

      p
        +font-light(18px, 26px)
        font-size: 16px
        line-height: 24px
        color: $lightBlue
        &:first-of-type
          margin-top: 0
      ul
        list-style: none
        padding-left: 20px
        margin-top: 20px
        margin-bottom: 0
        max-width: 320px
        li
          position: relative
          color: $orange
          +font-default(18px, 26px)
          font-size: 16px
          line-height: 24px
          margin-bottom: 5px
          &:before
            content: ''
            +sprite(-443px 0, 16px, 12px)
            display: inline-block
            position: absolute
            left: -23px
            top: 6px
      .button
        width: 100%
        max-width: 240px
        margin-top: 50px
        background: $orange
        +transition(all .3s)
        border-radius: 4px
        display: inline-block
        a
          +font-semi-bold(21px, 21px)
          font-size: 18px
          color: white
          padding: 15px 25px
          +flex(space-between, center)
          &:after
            content: ''
            +arrowWhite
            +translate3d(0,0,0)
            +transition(all .3s)
        &:hover
          background-color: $fellOrange
          a:after
            +translate3d( 5px, 0, 0)
    .image
      width: calc(100% / 10 * 6)
      img
        width: 100%
  &:nth-of-type(even)
    background-color: $lighterGray
    .window-bar
      background-color: $gray

    .inner
      .image
        +order(1)
      .text
        +order(2)


+media-query(1200px)
  .landing-features
    width: 100%
    .landing-features-nav
      p
        a
          +font-semi-bold(16px, 18px)

+media-query(850px)
  .landing-features
    .project-landings-item
      h3
        margin-bottom: 40px

      .inner
        +flex-wrap(wrap)
        +flex-direction(row)
        +flex-flow(row wrap)

        .image, .text
          width: 100%

        .image
          +order(1)
          margin-bottom: 40px
        .text
          +order(2)

+media-query(740px)
  .landing-features.sticky-nav
    .landing-features-nav
      top: 60px
+media-query(680px)
  .landing-features
    .landing-features-nav
      p
        a
          text-align: center
          +flex(center, center)
          span
            display: none
          &:before
            content: ''
            display: inline-block
            +transition(all 0.4s)
        &#features_first-nav
          a:before
            +sprite(-200px -119px, 37px, 34px)
        &#features_second-nav
          a:before
            +sprite(-200px -35px, 38px, 26px)
        &#features_third-nav
          a:before
            +sprite(-200px -65px, 22px, 28px)
        &#features_fourth-nav
          a:before
            +sprite(-290px -0px, 37px, 32px)

        &.active
          &#features_first-nav
            a:before
              +sprite(-240px -119px, 37px, 34px)
          &#features_second-nav
            a:before
              +sprite(-245px -35px, 38px, 26px)
          &#features_third-nav
            a:before
              +sprite(-225px -65px, 22px, 28px)
          &#features_fourth-nav
            a:before
              +sprite(-330px -0px, 37px, 32px)