.steps-slider
  padding: 100px 0
  //background-color: $lighterGrey
  text-align: center

  .grid-row
    > h2
      font-size: 2rem
      line-height: 1.2
      //+karla
      color: $blue
    //text-align: center

  .slider-nav
    position: relative
    display: inline-block
    list-style: none
    padding: 0
    margin: 45px auto 0

    &:before
      content: ''
      position: absolute
      left: 0
      top: calc(50% - 1px)
      height: 2px
      width: 100%
      background-color: $blue


    .slide-nav-item
      position: relative
      z-index: 1
      display: inline-block
      padding: 12px 18px
      margin-left: 14px
      background-color: white
      border: 2px solid $blue
      border-radius: 12px
      font-size: 1.1rem
      line-height: 1.2
      font-weight: bold()
      color: $blue
      cursor: pointer
      transition: color 0.4s, background 0.4s

      &:first-child
        margin-left: 0

      p
        margin: 0

      &:hover
        background-color: darken(white, 10%)

      &.active
        background-color: $blue
        color: white

  .slides
    position: relative
    max-width: 600px
    min-height: 150px
    margin: 50px auto 0

    .slide
      position: absolute
      z-index: 1
      top: 0
      left: 0
      display: block
      width: 100%
      opacity: 0
      font-size: 0.85rem
      line-height: 1.6
      //color: $blackBlue
      transform: translate3d(0, 20px, 0)
      transition: opacity 0.4s, transform 0.4s

      &.active
        z-index: 2
        opacity: 1
        transform: translate3d(0, 0, 0)

      h4
        display: none
        font-size: 1.3rem
        line-height: 1.2
        font-weight: bold()

    .navigation-buttons

      .nav-item
        position: absolute
        +flex(center, center)
        bottom: 0
        width: 35px
        height: 35px
        cursor: pointer
        border-radius: 100%
        transition: background 0.3s

        span
          +flex(center, center)
          height: 16px
          width: 16px
          transform-origin: center
          transition: transform 0.3s

          .arrow-icon
            position: relative
            width: 10px
            height: 16px
            transform-origin: center
            .st0
              fill: white

        &.previous
          background-color: $bisque
          right: calc(50% + 3px)

          span
            .arrow-icon
              transform: rotate(90deg)

          &:hover
            background-color: lighten($bisque, 5%)

        &.next
          background-color: $blue
          left: calc(50% + 3px)

          span
            .arrow-icon
              transform: rotate(270deg)

          &:hover
            background-color: darken($blue, 10%)

  +respond-to-width(975)
    padding: 0

    .grid-row
      width: 100%

      >h2
        padding: 50px 0

    .slider-nav
      display: none

    .slides
      margin-top: 0
      max-width: none
      height: auto !important

      .slide
        position: relative
        height: auto !important
        opacity: 1
        padding: 40px column(1, 12)
        transform: translate3d(0,0,0) !important
        background-color: white

        &:nth-of-type(odd)
          background-color: darken(white, 5%)

        .content
          text-align: left