/*==========================================================================
  Contact page
  ========================================================================== */


.ajax-container.contact
  display: grid
  grid-template-columns: 1fr 1fr
  grid-template-rows: 2fr 1fr
  grid-template-areas: "info form" "map map"
  overflow: hidden


  .map-container
    position: relative
    grid-area: map

    #map
      position: absolute
      left: 0
      top: 0
      width: 100%
      height: 100%
      opacity: 0
      transition: opacity 0.5s
      &.show
        opacity: 1

  .contact-form
    grid-area: form
    background-color: $lightGray
    padding: 6% 8% 20px
    transition: background 0.4s ease 0.1s

    h1
      position: relative
      z-index: 2
      display: inline-block
      font-size: 1.5rem
      line-height: 1.2
      text-transform: uppercase
      margin-bottom: 40px
      +translate3d(0, 0, 0)
      opacity: 1

      color: rgba($darkBlue, 1)
      text-indent: 0

      transition: all 0.4s ease 0.2s, color 0.4s ease 0.5s, text-indent 0.4s ease 0.5s


      &:after
        content: ''
        position: absolute
        z-index: -1
        left: -15px
        top: -5px
        height: calc(100% + 10px)
        width: calc(100% + 30px)
        background-color: white

    .mail-message
      color: $fontBlack
      font-size: 0.7rem

    form
      +translate3d(0, 0, 0)
      opacity: 1
      transition: all 0.4s ease 0.3s

    &.loaded-animation
      background-color: transparent

      +respond-to-width-beyond(900)
        h1
          color: rgba($darkBlue, 0)
          text-indent: -40px

      h1, form
        +translate3d(-40px, 0, 0)
        opacity: 0

  .main-contact
    grid-area: info
    padding: 6% 4% 6% 8%

    .contact-info
      max-width: 600px
      font-size: 0.9rem
      color: white

      >*
        +translate3d(0, 0, 0)
        opacity: 1
        transition: all 0.4s ease 0.1s

      hr
        margin: 20px 0

      .message
        position: relative
        min-height: 80px
        padding-left: 100px
        margin-top: 40px

        figure
          position: absolute
          top: 0
          left: 0
          width: 80px
          height: 80px
          img
            width: 100%
            transform: scale3d(1,1,1)
            opacity: 1
            transition: all 0.5s ease 0.4s

          span
            position: absolute
            z-index: 2
            +flex(center, center)
            right: 0
            top: 0
            width: 20px
            height: 20px
            background-color: $red
            border-radius: 100%
            font-size: 13px
            line-height: 1
            font-weight: bold
            color: white
            opacity: 1
            transform: scale3d(1,1,1)
            transition: all 0.5s ease 0.5s


        .text
          position: relative
          background-color: $lightGray
          border-radius: 10px
          padding: 15px 20px
          max-width: 400px
          opacity: 1
          +translate3d(0,0,0)
          transition: all 0.4s ease 0.5s

          &:before
            content: ''
            position: absolute
            left: -8px
            top: 20px
            width: 0
            height: 0
            border-top: 10px solid transparent
            border-bottom: 10px solid transparent
            border-right: 8px solid $lightGray

          p
            color: $fontBlack
            font-size: 0.8rem
            &:last-of-type
              margin-bottom: 0

        &.animation-part
          figure
            img
              transform: scale3d(0.6, 0.6, 1)
              opacity: 0

            span
              transform: scale3d(0.6, 0.6, 1)
              opacity: 0

          .text
            opacity: 0
            +translate3d(-20px, 0, 0)

    h2
      position: relative
      z-index: 2
      display: inline-block
      font-size: 1.5rem
      line-height: 1.2
      text-transform: uppercase
      margin-bottom: 20px
      +translate3d(0, 0, 0)
      opacity: 1

      color: rgba($darkGray, 1)
      text-indent: 0

      transition: all 0.4s ease 0s, color 0.4s ease 0.3s, text-indent 0.4s ease 0.3s !important

      &:after
        content: ''
        position: absolute
        z-index: -1
        left: -15px
        top: -5px
        height: calc(100% + 10px)
        width: calc(100% + 30px)
        background-color: white

    p
      a
        color: $fontBlack
        text-decoration: none
        font-weight: bold
        &:hover
          color: black

      &:first-of-type
        margin-top: 0

      &:last-of-type
        margin-top: 0

    &.loaded-animation
      .contact-info
        +respond-to-width-beyond(900)
          h2
            text-indent: -40px
            color: rgba($darkGray, 0)
        >*
          +translate3d(-40px, 0, 0)
          opacity: 0

      h2
        +translate3d(-40px, 0, 0)
        opacity: 0

  &.animateOut
    .main-contact
      .contact-info
        >*
          +translate3d(-40px, 0, 0)
          opacity: 0

      h2
        +translate3d(-40px, 0, 0)
        opacity: 0


    .contact-form
      transition: background 0.4s ease 0.6s
      background-color: transparent

      h1, form
        +translate3d(-40px, 0, 0)
        opacity: 0

    .map-container
      #map
        opacity: 0

  /* Small Tablet view
     ========================================================================== */
  +respond-to-width-or-height(900, 700)
    display: block

  /* Mobile view
    ========================================================================== */
  +respond-to-width-or-height(500, 600)
    display: block

    .main-contact
      padding: 80px 40px 40px

    .contact-form
      padding: 40px

    .map-container
      width: 100%
      padding-bottom: 80%