.contact-page
  .breadcrumb-row .breadcrumb ul, .breadcrumb-row .breadcrumb ol
    margin-left: 0


  .info-contact
    .map-container
      height: 300px
      width: $contentGrid*11
      overflow: hidden
    #map
      height: 330px
      width: 100%


    .google-maps
      text-align: right
      width: $contentGrid*11
      margin-top: 5px

      a
        color: $fontBlue
        +font-default(16px, 24px)

      span
        +circleArrowBlue
        display: inline-block
        margin-bottom: -1px
        margin-left: 5px

    .contact-info
      margin-bottom: 70px

      h2
        +font-semi-bold(24px, 24px)
        margin: 0 0 35px 0
        color: $fontColor1

      h3
        +font-bold(18px, 18px)
        margin-bottom: 25px
        color: $fontColor1

      p
        +font-default(16px, 22px)
        strong
          +font-bold(16px, 22px)
          color: $fontColor1

        a
          color: $fontBlue
          +font-default(16px, 22px)


  .form-contact
    padding: 60px
    +calc(width, "#{$contentGrid} * 6 - 120px")
    background-color: $semiLightGrey
    float: left
    +transition(all 0.3s)
    h5.alert
      +font-semi-bold(14px, 21px)
      color: $highLightRed

    form
      margin-top: 40px

    h1
      +font-semi-bold(32px, 32px)

    p
      +font-default(16px, 22px)

    label
      +font-default(15px)
      color: $fontColor1
    #contactForm
      .email, .first_name, .last_name, .extra_message
        label
          &:after
            content: '*'
            color: $defaultRed
            font-size: 12px
            display: inline-block
            margin-left: 5px
    input, textarea
      width: calc(100% - 20px)
      border: 1px solid $greyBackground
      padding: 6px 10px
      +font-default(15px, 19px)
      color: $fontColor1
      outline: 0 !important
      display: inline-block
      margin-bottom: 18px
      background: white

      &:-webkit-autofill
        background: white!important
        background-color: white !important
        -webkit-box-shadow: 0 0 0px 1000px white inset

      &.alert
        border: 1px solid $highLightRed

      &:focus
        outline: 0 !important

    textarea
      resize: none
      height: 140px

    .multiple-elements
      +flex(space-between, flex-start)
      >*
        width: calc(50% - 5px)

    .name-row
      +flex(space-between, center)
      div:first-child
        margin-right: 20px

    .submit-button
      width: calc(100% - 16%)
      max-width: 200px
      border-radius: 999999px
      background-color: $neonGreen
      height: 50px
      +flex(space-between, center)
      padding: 0 8%
      color: white
      +font-bold(16px, 18px)

      cursor: pointer

      input
        display: none

      &:hover
        background: darken($neonGreen, 2%)

      &:active
        background: darken($neonGreen, 5%)


      span
        display: block
        position: relative
        +arrowRightWhite
        top: 2px

    .thanks
      opacity: 1
      margin: 0
      overflow: hidden
      height: 150px
      +transition(all 0.4s)
      &.inactive
        opacity: 0
        height: 0

.isolation
  .contact-page
    .form-contact
      .submit-button
        background: $fontBlue
        &:hover
          background: darken($fontBlue, 2%)
        &:active
          background: darken($fontBlue, 5%)

+media-query(1000px)
  .contact-page
    width: 100%
    margin-left: 0
    .form-contact
      .name-row
        display: block
        div:first-child
          margin-right: 0

+media-query(750px)
  .contact-page
    >.grid6
      width: 100%
    .form-contact
      width: calc(100% - 80px)
      margin-bottom: 60px
      padding: 40px
    .info-contact
      #map, .google-maps
        width: 100%

+media-query(450px)
  .contact-page
    .info-contact
      .contact-info
        +flex-rows
        +flex(flex-start, flex-start)

        h3
          margin-bottom: 5px

        h2
          margin-bottom: 15px

        .grid6
          float: none
          width: 100%
          +order(2)
          &.location-info
            +order(1)

+media-query(400px)
  .contact-page
    .form-contact
      .multiple-elements
        display: block
        >*
          width: 100%
      .submit-button
        font-size: 15px