/*==========================================================================
  Inline Text block (used on surrounding, projects and invest)
  ========================================================================== */

.inline-text
  padding-bottom: 100px

  h2
    padding: 0 column(1, 24) 45px
    +phenomena
    font-size: 2rem
    color: $blue
    line-height: 1.25

  .grid-row
    position: relative

    &:after
      content: ''
      position: absolute
      width: 50%
      height: 60%
      right: column(2, 12)
      bottom: -55px
      background-color: $lightGray2
      opacity: 0.5


  .image-placeholder
    position: relative
    z-index: 1
    width: column(13, 24)
    vertical-align: top
    overflow: visible

    figure
      position: relative
      width: 100%
      height: 0
      padding-bottom: 60%


    span
      position: absolute
      top: 0
      left: 0
      height: 100%
      width: 100%
      background-size: cover
      background-position: center

      &.medium, &.small
        display: none

      +respond-to-width(1350)
        &.large
          display: none

        &.medium
          display: block

    .placeholder
      position: relative
      width: 100%
      padding-bottom: 65%
      height: 0
      cursor: move

      .controllers
        position: absolute
        z-index: 3
        width: 100%
        height: 100%

        .nav-item
          position: absolute
          +flex(center, center)
          bottom: -15px
          width: 30px
          height: 30px
          cursor: pointer

          &:after
            content: ''
            +arrowWhite
            transition: transform 0.3s

          &.previous
            background-color: $blue
            right: 90px
            &:after
              +translate3dRotate(0,0,0, 180deg)

            &:hover
              &:after
                +translate3dRotate(-3px,0,0, 180deg)

          &.next
            background-color: $brown
            right: 60px
            &:after
              +translate3d(0,0,0)

            &:hover
              &:after
                +translate3d(3px,0,0)



      figure
        position: absolute
        z-index: 1
        top: 0
        left: 0
        width: 100%
        height: 100%
        opacity: 0
        transition: opacity 0.4s

        span
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          background-color: white
          background-size: cover
          background-position: center
          background-repeat: no-repeat


          &.medium
            display: none

          +respond-to-width(540)
            &.medium
              display: block

            &.large
              display: none

        &.active
          z-index: 2
          opacity: 1

  .content
    position: relative
    z-index: 1
    padding-left: column(1, 12)
    width: column(5, 12)
    overflow: visible

    *:first-child
      margin-top: 0

    *:last-child
      margin-bottom: 0

    h3
      color: $blue
      margin-bottom: 30px

    p
      +metropolisLight
      font-size: 1rem

      &.intro
        +metropolis
        font-size: 1.1rem
        color: $brown

        strong
          +metropolisLight
          color: $blue

    .button
      margin-top: 45px

  &[data-image-location='right']
    .grid-row
      +flex(flex-start, flex-start)

      &:after
        bottom: 55px
        height: calc(100% - 110px)

    .image-placeholder
      +order(2)
      margin-left: column(1, 24)

    .content
      +order(1)
      padding-left: column(1, 24)
      //padding-right: column(1, 24)



  +respond-to-width(1600)
    .grid-row
      &:after
        width: column(13, 24)

    .image-placeholder
      width: column(10, 24)

    .content
      width: column(13, 24)


  +respond-to-width(950)
    position: relative
    padding-bottom: 100px !important

    .grid-row
      position: static
      display: block !important

      &:after
        width: column(9, 12)
        right: column(3, 12)
        bottom: 50px

        +respond-to-width(410)
          display: none

    .image-placeholder
      width: column(22, 24)
      margin-left: column(1, 24)

    .content
      width: column(22, 24)
      margin-top: 50px
      margin-left: column(1, 24)
      padding-left: 0 !important
      padding-right: 0