.mobile-contact
  display: none
  opacity: 0
  +translate3d(0, -100%, 0)

  padding: 50px column(1)
  background-color: white

  color: $darkGray
  font-size: 0.9rem

  transition: opacity 0.4s, transform 0.4s

  &.active
    +translate3d(0,0,0)
    opacity: 1
    pointer-events: all


  h1, h2
    font-size: 2rem
    line-height: 1.2
    max-width: 580px
    color: $darkBlue
    margin: 0 0 40px

  p
    margin: 1rem 0

  strong
    color: $fontBlack

  a:not(.button)
    color: $blue
    text-decoration: none
    transition: color 0.3s, border 0.3s, opacity 0.3s
    &:hover
      color: darken($blue, 15%)



  a.button
    display: inline-block
    margin-top: 20px
    padding: 15px 20px
    border-radius: 25px
    background-color: $blue
    text-decoration: none
    font-size: 0.9rem
    line-height: 1
    font-weight: bold()
    color: white
    transition: background-color 0.3s

    &:after
      content: ''
      +arrowWhite
      margin-left: 20px
      +translate3d(0,0,0)
      transition: transform 0.3s

    &:hover
      background-color: $darkBlue
      &:after
        +translate3d(5px, 0, 0)


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