.intro-row.contact
  h2
    +font-bold(22px)

.contact-block
  .person
    +flex(space-between, center)
    position: relative
    padding-bottom: 50px

    &:first-child
      padding-bottom: 100px

    &:hover
      .image
        svg
          path
            stroke-dashoffset: 2382
            +transition(stroke-dashoffset 0.8s)

    .image
      position: relative
      width: 25%
      display: inline-block

      img
        width: calc(100% - 30px)
        position: relative
        top: 15px
        left: 15px

      svg
        width: 100%
        position: absolute
        top: 0
        left: 0

        path
          fill: none
          stroke: $yellow
          stroke-width: 4
          stroke-miterlimit: 10
          stroke-dasharray: 2382
          stroke-dashoffset: 0
          +transition(stroke-dashoffset 2s)

    .text-content
      width: 65%
      position: relative
      +flex(space-between, flex-start)

    .personal
      width: 60%
      p, a
        +font-default(21px)
        margin: 0

      .social
        margin-top: 20px
        margin-bottom: 28px
        a
          display: inline-block
          margin-right: 30px
          opacity: 0.75
          +transition(opacity 0.3s)

          &.facebook
            +sprite(0 -270px, 12px, 25px)
          &.twitter
            +sprite(-14px -270px, 27px, 25px)
          &.googlep
            +sprite(-43px -270px, 32px, 25px)
          &.linkedin
            +sprite(-125px -270px, 26px, 25px)
          &.behance
            +sprite(-80px -270px, 40px, 25px)

          &:hover
            opacity: 1
    .faq
      width: 36%
      display: inline-block
      h4
        +font-bold(21px)
        margin: 0

      ul
        margin: 0
        padding: 0 0 0 35px
        li
          +font-default(21px)

    &:nth-child(2)
      .image
        svg
          path
            +transition-delay(0.3s)

#map,#map_overlay
  margin-top: 50px
  height: 500px

#map_overlay
  background-color: rgba(255,222,0,0.6)
  position: absolute
  width: 100%
  z-index: 2

+media-query(1000px)
  .contact-block
    .person
      .personal
        p, a
          +font-default(18px)
        .social
          a
            +transform(scale(0.9))
            +transform-origin(0 0)
            margin-right: 25px
      .faq
        h4
          +font-bold(18px)

        ul li
          +font-default(18px)



+media-query(800px)
  .contact-block
    .person
      .personal
        .social
          a
            +transform(scale(0.8))
            +transform-origin(0 0)
            margin-right: 20px

+media-query(720px)
  .contact-block
    .person
      display: block

      .image
        width: 80%
        margin: 0 auto 50px
        max-width: 350px
        display: block

      .text-content
        width: 90%
        margin: 0 auto
        display: block
        .personal
          width: 100%
        >*
          margin: auto
          display: block
          text-align: center
          ul
            list-style: none
            padding: 0

            li
              padding-bottom: 10px

          .social
            +flex(space-between, center)
            max-width: 280px
            margin-left: auto
            margin-right: auto
            a
              margin-right: 0