.tetralogy-row
  //background-color: #efefef
  background-color: #f6f6f6

  .placeholder
    max-width: 1440px
    margin: auto

    .row
      box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.4)

    .advise-impression
      background: url("/images/structure/advise-impression.jpg")
      background-size: cover
      background-position: 50%
      +transform(translate3d(0, 0, 0))
      +transition(all 0.4s)

      &.scroll-animation
        +transform(translate3d(-200px, 0, 0))

    .advise-cta
      background: url("/images/structure/advise-buy.jpg")
      background-size: cover
      background-position: 34.5%
      box-shadow: inset 0 0 10px 2px #fff
      +flex(center, center)

      .holder
        text-align: center
        padding-bottom: 75px

      p
        +font-default(18px)
        color: $orange

        &.date
          +font-default()
          font-size: 14px !important
          line-height: 14px !important
          margin: 0
          color: $blue
          text-transform: lowercase

      h1
        width: 90%
        +font-default(32px, 40px)
        margin: 0 auto 35px
        text-align: center
        color: $blue

      a
        border: 2px solid $blue
        +box-sizing(border-box)
        border-radius: 6px
        +font-bold(18px, 18px)
        color: $blue
        padding: 14px 20px
        &:after
          content: ''
          +arrowBlue()
          display: inline-block
          margin-left: -9px
          margin-top: 7px
          position: absolute
          +transform(translate3d( 0,-40px,0))
          opacity: 0
          +transition(all 0.3s)

        span
          +arrowBlue
          display: inline-block
          margin-left: 15px
          position: relative
          +transform(translate3d( 0,0,0))
          opacity: 1
          +transition(all 0.3s)

        &:hover
          &:after
            +transform(translate3d( 0,0,0))
            opacity: 1
          span
            opacity: 0
            +transform(translate3d( 0,40px,0))
        &.readMore
          span
            +transform(translate3d( 0, 0,0) rotate(-90deg))
          &:after
            +transform(translate3d( 0, -40px,0) rotate(-90deg))
          &:hover
            span
              +transform(translate3d( 0,40px,0) rotate(-90deg))
            &:after
              +transform(translate3d( 0,0,0) rotate(-90deg))

    #about
      background: $orangeBlock
      overflow: hidden
      +transform(translate3d(0, 0, 0))
      +transition(all 0.4s)

      &.scroll-animation
        +transform(translate3d(0, 100px, 0))

      .extra-padding
        padding: 80px 0 100px

      h3, p
        margin-left: $contentGrid*2
        width: $contentGrid*8
        position: relative
        z-index: 2

      .icon-background
        position: absolute
        height: 100%
        width: 100%
        top: 0
        right: -50%


        background: url("/images/structure/backgroundOrange.svg") 0 0 no-repeat
        background-size: 100% 120%
        background-position: 50% 50%

    .owner
      background: url("/images/structure/gripp-owners.jpg?v=1") white  
      background-size: cover
      background-repeat: no-repeat
      background-position: 50% 30%
      height: 100%
      position: relative

      .owner-name
        background: $blue
        +position(absolute, null null 0 0)
        margin: 0
        padding: 16px 40px
        +font-default(16px, 16px)
        color: white

        span
          +font-default(16px, 20px)
          color: white
          margin-left: 18px




+media-query(900px)
  .tetralogy-row
    .advise-impression
      display: none

    .grid7
      width: 100%

+media-query(800px)
  .tetralogy-row
    .placeholder
      .owner
        .owner-name
          +font-default(21px, 21px)
  .tetralogy-row .placeholder .advise-cta p
    +font-default(21px, 26px)
+media-query(550px)
  .tetralogy-row
    .placeholder
      .owner
        height: 500px !important
      #about
        h3, p
          margin-left: $contentGrid*2
          width: $contentGrid*10

      .advise-cta
        background-position: 40%
        height: 320px !important

        h1
          margin-bottom: 25px

        .holder
          padding-bottom: 80px