.contact-container
  @extend .grid6
  margin-top: -50px
  .contact-form
    box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1)
    background-color: white
    padding: 35px
    border-radius: $panelBorderRadius
    .form-element
      position: relative
      margin-bottom: 10px
      .error
        display: none
        &.active
          color: darkred
          display: block

      &.text-area
        margin-bottom: 0
        +flex(flex-start, flex-start)
        label
          margin-top: 15px
      &.select-element
        position: relative
        span
          background-image: url('/img/down.png')
          width: 16px
          height: 16px
          background-size: contain
          display: inline-block
          position: absolute
          right: 10px
          top: 25px
          pointer-events: none
        select
          margin-top: 10px
          +appearance(none)
          outline: none
          height: 45px
          width: calc(100% - 126px)
          font-size: 15px
          line-height: 16px
          font-weight: 500
          background-color: #f3f3f3
          color: $black
          padding: 0 30px 0 20px
          border: 1.5px transparent solid

        .selectric-wrapper
          margin-top: 10px
          width: calc(100% - 126px)
          display: inline-block

        .selectric-items
          li
            padding-left: 20px
            padding-right: 20px
            font-size: 15px
            line-height: 16px
            font-weight: 500
        .selectric
          background-color: #f3f3f3
          .label
            padding: 0 20px 0 10px
            font-size: 15px
            line-height: 16px
            font-weight: 500
            color: $black
            +flex(flex-start, center)
      label
        width: 120px
        display: inline-block
        font-size: 15px
        line-height: 15px
        font-weight: 600
      input, textarea
        margin-top: 10px
        height: 45px
        width: calc(100% - 126px)
        font-size: 15px
        line-height: 16px
        font-weight: 500
        background-color: #f3f3f3
        color: $black
        padding: 0 20px
        border: 1.5px transparent solid

        &.alert
          border: 1.5px darkred solid
          box-shadow: 0 0 5px darkred


      textarea
        height: 116px
        padding-top: 8px
        padding-bottom: 10px
        resize: vertical
        margin-left: 6px
        +font-default()
        font-size: 15px
        line-height: 16px
        font-weight: 500


    .submit
      padding: 20px 0 0 120px
      text-align: right
      input
        display: inline-block
        border: 1.5px transparent solid
        font-size: 15px
        line-height: 15px
        width: 100%
        max-width: 300px
        background: $ctaBackgroundColor
        color: white
        padding: 15px 0
        cursor: pointer

        &:hover
          background: darken($ctaBackgroundColor, 5%)

    input:focus, textarea:focus
      box-shadow: none
      border: none
      border-radius: 0
      outline: none


  .thanks.inactive
    display: none


.get-up
  height: 400px
  margin-top: -50px

.contact-information
  @extend .grid6
  padding: 40px 0px
  .features-title
  p
    color: white
    font-weight: 600

+media-query(1020px)
  .contact-information
    width: 40%
  .contact-container
    width: 60%

+media-query(768px)
  .contact-information
    width: 100%
    text-align: center
  .contact-container
    width: 100%
    margin-top: 0px

+media-query(800px)
  .contact-container
    .contact-form
      .form-element
        margin-bottom: 30px
        &.text-area
          display: block
        &.select-element
          display: block
          select
            width: 100%
          .selectric-wrapper
            width: 100%
            display: block
        label
          display: block
          width: 100%
          padding-left: 20px
        input, textarea
          width: 100%
          margin-left: 0

+media-query(550px)
  .contact-container
    .contact-form
      width: 100%