.contact-row
  position: relative
  z-index: 5
  width: 85%
  margin-bottom: 120px

.contact-info
  position: relative
  h3
    text-transform: uppercase
    color: $orange
    +font-bold(32px)
    padding-bottom: 20px
    position: relative

  p, a
    font-family: "Lato", sans-serif
    font-size: 16px
    line-height: 35px !important
    position: relative
  a:hover
    color: white

  span
    position: absolute
    left: -35px

    &.adress
      +sprite(-40px -58px, 14px, 26px)
      display: inline-block
      margin-top: 3px
    &.phone
      +sprite(-59.5px -58px, 19px, 26px)
      display: inline-block
      margin-left: -3px
      margin-top: 5px
    &.mail
      +sprite(-85px -58px, 20px, 14px)
      display: inline-block
      margin-left: -4px
      margin-top: 10px


.contact-form
  form
    text-align: right
  .thanks
    display: none
    p
      +font-default(20px)

  h2
    text-transform: uppercase
    color: $orange
    +font-bold(32px)
    padding-bottom: 35px

  .form-row
    +flex(space-between, flex-start)

  .name, .email
    width: 45%
    position: relative

  label
    position: absolute
    left: 12px
    opacity: 0.7
    +translate3d(0,0,0)
    +transition(all 0.3s)

  .active-input
    label
      +translate3d(0, -30px, 0)

  .form_message.active-input
    label
      +translate3d(0, -50px, 0)


  .form_message
    position: relative
    margin-top: 75px
    label
      position: absolute
      top: 12px
      left: 12px

  input, textarea
    +appearance(none)
    width: 100%
    border: 0
    border-bottom: 2px solid $orange
    padding: 0 10px
    outline: none
    background: none
    color: white !important
    +font-default(18px)
    &:-webkit-autofill
      -webkit-box-shadow: 0 0 0px 1000px $darkBlue inset
      -webkit-text-fill-color: white


  textarea
    padding: 10px
    border: 2px solid $orange
    min-height: 250px

  .hide
    display: none

  .send-button
    border: 2px solid $orange
    display: inline-block
    margin: 50px 0 0
    cursor: pointer
    +transition(all 0.3s)
    p
      margin: 8px 20px
      +flex(space-between, center)
      em
        font-style: normal
        opacity: 0.7
        +transition(all 0.3s)

      span
        +orangeArrow
        margin-bottom: -4px
        margin-left: 10px
        +translate3dRotate(0,0,0, 180deg)
        +transition(all 0.3s)
    &:hover
      p
        em
          color: $orange
          opacity: 1
        span
          +translate3dRotate(5px,0,0, 180deg)

+media-query(800px)
  .contact-row
    .grid5, .grid7
      width: 100%

    .contact-form
      max-width: 500px
      float: none
      margin-left: auto
      margin-right: auto

    .contact-info
      margin-bottom: 100px
      p, h3
        max-width: 260px
        text-align: center
        margin-left: auto
        margin-right: auto