.services-row
  background: url("/images/structure/service-image.jpg")
  background-size: cover
  background-position: 50% 80%

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

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

    .extra-padding
      padding: 80px 0
      margin-left: $contentGrid*6

    h3, p
      max-width: 440px
      width: 80%
      position: relative
      z-index: 2

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


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

  .hans-block
    position: relative
    background: #48545B
    padding-top: 60px
    padding-bottom: 60px
    min-width: 360px
    +transform(translate3d(0, 0, 0))
    +transition(all 0.4s)

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


    >*
      position: relative
      z-index: 5


    .overlay
      position: absolute
      z-index: 4
      width: 100%
      height: 100%
      top: 0
      left: 0
      background: url("/images/structure/service-background.jpg")
      background-size: cover
      background-position: 50% 50%
      opacity: 0.2

    .gradient
      background: url("/images/structure/ownerGradient.png")
      background-size: contain
      background-repeat: repeat-x
      position: absolute
      z-index: 4
      left: 0
      bottom: 0
      width: 100%
      height: 200px

    .person
      padding-left: 8.5%
      margin-bottom: 50px

      &.last
        margin-bottom: 0


      h4
        +font-bold(24px, 22px)
        color: white
        margin: 0 0 15px 0
        text-align: left

      .function
        +font-default(15px, 15px)
        text-transform: lowercase
        color: white
        opacity: 0.6
        margin: 0 0 12px 0

      .email, .phone
        margin: auto

        a
          color: white
          +font-default(16px, 18px)
          +flex(flex-start, center)

          .icon-circle
            border-radius: 9999px
            border: 2px solid white
            +flex(center, center)
            width: 32px
            height: 32px
            margin-right: 10px
            background: none
            +transition(background 0.3s, opacity 0.3s)
            opacity: 0.5

            span
              +transition(background-position 0.3s)

        &:hover
          .icon-circle
            background: white
            opacity: 1

      .phone
        margin-bottom: 10px
        .icon-circle
          span
            +phoneWhite

        &:hover
          .icon-circle
            span
              background-position: -195px 0

      .email
        .icon-circle
          span
            +emailWhite

        &:hover
          .icon-circle
            span
              background-position: -260px 0

      .owner-image
        width: 60px
        background-size: cover
        background-position: 50% 50%
        border-radius: 9999px
        margin: 0 20px 40px 0
        float: left

+media-query(900px)
  .services-row
    .hans-block
      min-width: 300px

+media-query(615px)
  .services-row
    #services, .hans-block
      width: 100%
      margin-left: 0

    #services
      .extra-padding
        margin-left: $contentGrid*2
        width: $contentGrid*10

      p, h3
        width: 100%


    .hans-block
      .person
        h4
          +font-bold(30px, 30px)

        .function
          +font-default(21px, 21px)

        .phone, .email
          a
            +font-default(21px, 21px)

+media-query(340px)
  .services-row
    .hans-block
      min-width: none
      .person
        .phone
          clear: left