.method-row
  padding: 100px 0 150px
  text-align: center
  background: white

  h3
    text-align: center
    +font-black(18px, 18px)
    color: $blue
    letter-spacing: 3.6px
    text-transform: uppercase
    margin-bottom: 90px

  .steps
    width: $contentGrid*8
    min-width: 450px
    display: inline-block
    position: relative

    .steps-image
      position: absolute
      top: 0
      left: 0
      width: 100%
      z-index: 99

    .progress-slider
      background-color: $blue
      margin-top: 5px
      margin-left: 5px
      width: calc(100% - 10px)
      position: relative

      .smiley
        position: absolute
        height: 100%
        width: 10%
        cursor: pointer
        text-align: left
        z-index: 100
        top: 0

        &#smileyNo
          left: 0

          span
            +font-black(24px, 21px)
            color: $orange
            position: absolute
            top: 18%
            left: 10%
            +transition(all 0.4s)
            +animation(moving-question 2s infinite)

            +keyframes(moving-question)
              0%, 100%
                +transform(rotate(-20deg))
              50%
                +transform(rotate(20deg))

        &#smileyYes
          right: 0

      .orange-steps
        background-color: $orange
        height: 100%
        width: 24%

        +transition(width 0.3s)

        &.state2
          width: 40.65%

        &.state3
          width: 57.3%

        &.state4
          width: 74%

        &.state5
          width: 100%

      .text-holder
        position: absolute
        z-index: 100
        +flex(space-around, center)
        width: 83%
        margin-left: 8.5%
        height: 98%

        p
          +font-black(16px, 16px)
          color: $blue
          text-transform: uppercase
          width: 20%
          height: 100%
          margin: 0
          +flex(center, center)
          cursor: pointer
          +transition(color 0.2s)

          &:first-child
            color: $orange

          &.orange
            color: $orange

  .steps-info
    .navigation
      +flex(space-between, center)
      width: 250px
      margin: 80px auto 45px
      .previous, .next
        +navArrow
        cursor: pointer
        &.disabled
          opacity: 0.2
          background-position: -220px -0px !important
          cursor: default

        &:hover
          background-position: -220px -21px

      .previous
        +transform(rotate(180deg))

      .show
        width: 75%
        height: 30px
        position: relative
        overflow: hidden

        ul
          margin: 0
          padding: 0
          position: absolute
          width: 100%
          text-align: center
          left: 0
          +transition(left 0.4s)

          li
            +font-black(16px, 16px)
            color: $blue
            text-transform: uppercase
            width: 100%
            height: 30px
            margin: 0
            +flex(center, center)
            cursor: pointer
            position: absolute

            &:nth-child(2)
              left: 120%

            &:nth-child(3)
              left: 240%

            &:nth-child(4)
              left: 360%

            &:nth-child(5)
              left: 480%



    .text-area
      width: $contentGrid*3
      min-width: 250px
      text-align: left
      margin: auto
      position: relative
      overflow: hidden

      .slider
        position: absolute
        width: 100%
        left: 0
        +transition(left 0.4s)

      .small-screen
        display: none

      p
        +font-default(16px, 24px)
        color: $blue
        position: absolute
        width: 100%
        margin: 0

        &:nth-child(2)
          left: 120%

        &:nth-child(3)
          left: 240%

        &:nth-child(4)
          left: 360%

        &:nth-child(5)
          left: 480%

+media-query(515px)
  .method-row
    padding: 40px 0 0
    h3
      +font-black(24px, 24px)
      margin-bottom: 40px
    .steps, .steps-info .navigation
      display: none

    .steps-info
      .text-area
        height: inherit!important
        width: 100%

        .slider, p
          position: relative
          left: 0!important

        p
          padding: 30px 10% 40px 2%
          width: 88%
          +font-default(18px, 24px)
          +flex(space-between, center)

          span.small-screen
            display: block
            +font-bold(28px, 40px)
            margin-bottom: 20px
            color: $blue
            width: 45px
            text-align: center
            padding: 25px

          &:nth-child(even)
            background: $blue
            color: white
            span.small-screen
              color: white