.contact__wrapper
  display: flex
  width: 100%
  background-color: $pure-white
  padding: 5rem 0
  flex-direction: column

.contact--left
  width: auto
  padding: 0 1rem
  padding-bottom: 5rem

.contact--right
  //width: 100%
  padding: 0 1rem

.form-instruction
  padding-bottom: $font-size
  padding-top: $lg-font-size
  color: $env-primary

.contact-form
  width: 100%
  display: block

  form
    background-color: $white
    border: solid 1px rgba($env-primary, .2)
    border-radius: 4px
    padding: 2rem
  label
    font-size: $font-size * .8
    color: $env-secondary

.google-map
  width: 100%

  //padding: 0 5rem
  //filter: sepia(.3)
  iframe
    border-radius: 4px
    width: 100%
    height: 40vh
    border: solid 1px rgba($env-primary, .2)

.contact-details
  display: flex
  flex-direction: column
  padding: 4rem 0
  p
    padding-bottom: 2rem
  .fas
    color: $env-primary
  a
    color: $env-secondary
    transition: all .2s ease-in-out
    //text-decoration: none
    &:hover
      color: $env-primary
  .social-media-link
    font-size: $lg-font-size
    color: $env-secondary
    padding-right: $lg-font-size

.form-element
  width: 100%
  height: 40px
  border-radius: 4px
  //font-size: 1rem
  font-weight: 100
  margin: 2vh 0
  border: none
  background-color: $pure-white
  padding: .1rem 0 .4rem 0
  text-indent: 1rem

  &::placeholder
    color: rgba($env-primary, .3)

.btn-contact
  background: $env-primary
  color: #ffffff
  cursor: pointer
  font-size: $font-size * .8
  padding: 1rem 2rem
  border: 0
  transition: all .3s
  border-radius: 4px
  width: auto
  position: relative


@media screen and ( min-width: 1024px )

  .contact__wrapper
    display: flex
    flex-direction: row
    width: 100%
    padding: 5rem 0

  .contact--left
    width: 40%
    padding: 0 5rem

  .contact--right
    width: 60%
    padding: 0 5rem

  .contact-form
    width: 100%
    display: block

    form
      border: solid 1px rgba($env-primary, .2)
      border-radius: 4px
      padding: 2rem
    label
      font-size: $font-size * .8
      color: $black

  .google-map
    //grid-area: googleMap
    width: 100%

    //padding: 0 5rem
    //filter: sepia(.3)
    iframe
      width: 100%
      height: 40vh
      border: solid 1px rgba($env-primary, .2)

  .contact-details
    display: flex
    flex-direction: column
    padding: 4rem 0
    p
      padding-bottom: 2rem
    .fas
      color: $env-primary
    a
      transition: all .2s ease-in-out
      text-decoration: none
      &:hover
        color: $env-primary
    .social-media-link
      font-size: $font-size * 2

  .form-element
    width: 100%
    height: 40px
    border-radius: 4px
    //font-size: 1rem
    font-weight: 100
    margin: 2vh 0
    border: none
    background-color: $pure-white
    padding: .1rem 0 .4rem 0
    text-indent: 1rem

    &::placeholder
      color: rgba($env-primary, .3)

  .btn-contact
    background: $env-primary
    color: #ffffff
    cursor: pointer
    font-size: $font-size * .8
    padding: 1rem 2rem
    border: 0
    transition: all .3s
    border-radius: 4px
    width: auto
    position: relative

    &::after
      content: "\f054"
      font-family: "Font Awesome 5 Free"
      font-weight: 900
      position: absolute
      //left: 85%
      top: 28%
      right: 5%
      bottom: 0
      opacity: 0

    &:hover
      background: rgba($env-primary, .9)
      transition: all .5s
      box-shadow: 0px 6px 15px rgba($env-primary, .3)
      padding: 1rem 3rem 1rem 2.1rem

      &::after
        opacity: 1
        transition: all 0.3s