#contentSlider
  padding: 100px 0
  background-color: $offsetWhite
  text-align: center

  h3
    font-size: 2rem
    line-height: 1.2
    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: $blue
      border: 2px solid $blue
      border-radius: 12px
      font-size: 1.1rem
      line-height: 1.2
      font-weight: bold()
      color: $black
      cursor: pointer
      transition: color 0.4s, background 0.4s

      &:first-child
        margin-left: 0

      p
        margin: 0

      &:hover
        background-color: white

      &.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
      opacity: 0
      font-size: 0.85rem
      line-height: 1.6
      color: $black
      font-weight: light()
      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()

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

    .grid-row
      width: 100%

    h3
      padding: 50px 0

    .slider-nav
      display: none

    .slides
      margin-top: 0

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

        &:nth-of-type(odd)
          background-color: $lightGray

        h4
          display: block

        .content
          text-align: left