.o-contact-content {
  position: relative;
  z-index: 100;
  padding-bottom: 100px;

  @include mq(null, 900) {
    padding-bottom: 90px;
  }

  .l-bisection {
    position: relative;
    @include mq(900) {
      display: flex;
      flex-direction: row-reverse;
    }
  }

  .l-bisection__item {
    height: 100%;

    @include mq(900) {
      width: 50%;
    }
  }

  #contactForm {
    background-color: white;
    border-radius: 20px;
    width: column(5, 6);
    padding: 50px 80px;
    min-height: 690px;
    box-shadow: 6px 6px 25px 0 rgba(104, 153, 252, 0.1);

    @include mq(null, 1280) {
      width: column(5.5, 6);
      padding: 50px 40px;
    }

    @include mq(null, 900) {
      width: 100%;
      margin-top: 120px;
    }

    @include mq(null, 612) {
      margin-top: 200px;
    }

    .form-element {
      position: relative;
    }

    label {
      display: block;
      color: palette(text, 400);
      margin-bottom: 4px;
    }

    input[type=text],input[type=email], textarea {
      width: 100%;
      border: none;
      padding: 12px 15px;
      border-radius: 3px;
      background-color: white;
      color: black;
      @include font(18, 22);
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);

      &:focus {
        outline: none;
        border-bottom: 1px solid #6EB8FF;
      }

      &.error {
        border-bottom: 1px solid #F97A4D;
      }

      &::placeholder {
        color: palette(text, 400);
      }
    }
    textarea {
      resize: none;
      min-height: 100px;
    }
    .submit {
      text-align: right;
      input[type=submit] {
        background: transparent;
        border: none;
        padding: 13px 35px 15px 35px;
        cursor: pointer;
        @include font(18, 22, 500);
        @include border-radius;
        border-radius: 400px;
        color: white;
        background: linear-gradient(90deg, #699BFF 0%, #2F6CE6 100%);
      }
    }

    .error-message {
      position: absolute;
      right: 0;
      color: #F97A4D;
      width: 75%;
      text-align: right;
    }
  }

  .contact-options {
    white-space: nowrap;
    margin-bottom: 50px;

    .left,
    .right {
      display: inline-block;
      width: 50%;
      vertical-align: top;

      @include mq(null, 900) {
        width: 49%;
      }

      @include mq(null, 612) {
        display: block;
        width: 100%;
      }

      svg {
        margin-right: 40px;

        @include mq(null, 1280) {
          margin-right: 20px;
        }
      }

      a {
        text-decoration: none;
        display: block;
        margin: 0 0 25px 0;
        @include font(18, 22);
        color: white;
      }
      p {
        color: white;
        @include font(18, 22);
        margin: 0 0 10px 0;
      }

      .company-details {
        display: inline-block;
      }
    }
    .right {
      svg {
        vertical-align: top;
      }
    }
  }

  #map {
    width: 100%;
    height: calc(100% - 145px);
    border-radius: 20px;
    box-shadow: 6px 6px 25px 0 rgba(104, 153, 252, 0.1);

    @include mq(null, 900) {
      height: 540px;
    }

    > div:first-child {
      height: 105% !important;
    }
  }

  .o-block {
    &:first-of-type {
      padding-top: 140px;
    }
  }
}