/*==========================================================================
  Main text area on top of the pages
  ========================================================================== */

.main-text-row
  position: relative

  .background
    position: absolute
    width: 100%
    height: calc(100% - 200px)
    top: 100px
    left: 0
    background-color: $lightBlue

    .background-icon
      position: absolute
      overflow: hidden
      right: 0
      top: 0
      width: 50%
      height: 100%
      +flex(flex-end, flex-start)

      svg
        position: relative
        top: 35px
        height: calc(100% - 55px)
        width: auto
        transform: translate3d(50%,0,0)
        opacity: 0.1
        &#location
          .st1
            fill: $lightBlue

      +respond-to-width-beyond(1920)
        +flex(flex-start, flex-start)
        svg
          left: 672px

  .grid-row
    position: relative
    z-index: 1
    margin-top: -100px
    +flex(center, flex-start)

    .placeholder
      position: relative
      +flex(flex-end, flex-start)
      width: column(11, 12)
      background-color: $blueishGray

    figure
      position: absolute
      top: 0
      left: 0
      display: block
      width: 50%
      height: 100%

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

        &.medium, &.small
          display: none

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

          &.medium
            display: block

    .content
      font-size: 1.1rem
      +metropolisLight
      padding: 100px column(2, 22) 80px
      width: 50%

      +respond-to-width(1080)
        padding: 60px column(2, 22)

      >a:first-of-type
        margin-top: 40px

      .button
        //margin-top: 40px
        +flex(space-between, center)
        width: 100%
        max-width: 300px

        &.map-button
          border-color: $brown
          background-color: $brown
          color: white
          margin-bottom: 15px

          &:after
            +arrowWhite 

        &:after
          +translate3dRotate(0,0,0, 90deg)
          transition: transform 0.3s

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

    .uniqueButton
      position: absolute
      right: calc(#{column(1, 24)} - 60px)
      bottom: -30px
      width: 200px
      height: 200px
      border-radius: 100%
      box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2)
      opacity: 1
      transform: scale3d(1, 1, 1)
      transition: transform 1s, opacity 0.8s

      .placeholder
        +flex(center, center)
        width: 200px
        height: 200px
        border-radius: 100%
        background-color: $brown
        transform: rotate(10deg)
        transition: transform 1s


        p
          +phenomena
          font-size: 2rem
          line-height: 1
          text-align: center
          color: white
          margin: 0

      &.animation
        opacity: 0
        transform: scale3d(0.75, 0.75, 1)

        .placeholder
          transform: rotate(0deg)

      +respond-to-width(1250)
        width: 150px
        height: 150px
        right: calc(#{column(1, 24)} - 20px)
        .placeholder
          width: 150px
          height: 150px

          p
            font-size: 1.5rem

      +respond-to-width(580)
        right: 20px

      +respond-to-width(450)
        bottom: auto
        top: 20px


  .surrounding &
    .grid-row
      .placeholder
        +flex(flex-start, flex-start)

        +respond-to-width(840)
          display: block

      figure
        left: auto
        right: 0

  +respond-to-width(840)
    .grid-row
      .placeholder
        display: block

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

      .content
        width: 100%

  +respond-to-width(580)
    .grid-row
      width: 100%
      .placeholder
        width: 100%