.relation

  .sidebar
    .sidebar-content
      padding: 50px 0 50px

      h1
        margin: 0 0 0 column(1, 12)
        padding: 0
        font-size: 0.85rem
        line-height: 1.2
        font-weight: 300
        color: white
        text-transform: uppercase

        strong
          margin-top: 3px
          display: block
          font-size: 1.7rem
          line-height: 1.2
          letter-spacing: 1.6px

        +respond-to-width(1000)
          margin-left: 0



  .relation-part
    padding-top: 50px
    display: block
    text-decoration: none

    figure
      vertical-align: top
      display: inline-block
      width: column(9, 24)
      margin: 0 0 0 column(1, 12)

      +respond-to-width(1050)
        width: column(11, 24)
        margin-left: 0


      img
        width: 100%

        &.small
          display: none

    .content
      vertical-align: top
      margin-left: column(1, 12)
      width: column(11, 24)

      h2
        font-size: 1rem
        color: $darkBlue2
        text-transform: uppercase
        letter-spacing: 2.56px
        margin: 0 0 35px

        +respond-to-width(1200)
          margin-bottom: 20px

      p
        color: $darkBlue2
        font-size: 0.9rem
        line-height: 1.4

        &:first-of-type
          margin-top: 0
        &:last-of-type
          margin-bottom: 0

        strong
          +dubaiBold

        a
          +dubaiBold
          color: $darkGray
          transition: color 0.3s
          &:hover
            color: darken($darkGray, 10%)

      .see-more
        display: block
        padding: 20px 0
        margin: 15px 0 0
        text-decoration: none

        p
          display: block
          margin: 0
          font-size: 0.75rem
          line-height: 1.2
          font-weight: 300
          color: $darkBlue2
          text-transform: uppercase

        .click-me-wrapper
          margin-top: 4px
          +flex(flex-start, center)

        .click-me
          font-size: 0.9rem
          text-transform: uppercase
          +dubaiBold
          color: $darkBlue2

          &:after
            content: ''
            display: inline-block
            margin-left: 10px
            +sprite(-35px -14px, 15px, 11px )
            transform: translate3d(0, 0, 0)
            transition: transform 0.3s


        .lines
          display: inline-block
          margin-right: 15px
          width: 36px
          font-size: 0
          line-height: 0

          span
            display: inline-block
            height: 15px
            width: 2px
            background-color: $darkerBlue
            margin-right: 6px
            transition: background-color 0.3s

            @for $i from 1 to 6
              &:nth-child(#{$i})
                transition-delay: #{$i * 0.05s}

            &:last-of-type
              margin-right: 0 !important

        &:hover
          .click-me
            &:after
              transform: translate3d(5px, 0, 0)
          .lines
            span
              background-color: $yellow

  +respond-to-width(760)

    .sidebar
      &:before
        display: none

      .fill-out
        display: none

      .sidebar-content
        .grid-row
          width: 100%

        h1
          color: $darkBlue2
          margin-left: column(2, 14)

          +respond-to-width(480)
            margin-left: column(1, 14)


    .relation-part
      padding-bottom: 20px
      figure
        margin-bottom: 40px

      figure, .content
        width: column(10, 14)
        margin-left: column(2, 14)

        +respond-to-width(480)
          width: column(12, 14)
          margin-left: column(1, 14)

      .content
        .see-more
          .lines
            span
              background-color: $yellow

          &:hover
            .lines
              span
                background-color: $darkerBlue

      &:nth-child(3)
        background-color: $almostWhite