section .contact-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 32px;
    margin: 0 6px;
}

section .contact-wrapper .contact-form {
    flex-basis: 0;
    flex-grow: 1;
    padding-right: 88px;
}

section .contact-wrapper .contact-form {
    flex-grow: 1;
    margin-top: 32px;
}

section .contact-wrapper h3 {
    font-size: 24px;
}

section .contact-wrapper h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    color: #2b3a42;
}

section .contact-wrapper .contact-form .form {
    grid-template-columns: 1fr 1fr;
}

section .contact-wrapper .contact-form .form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 24px;
    margin-top: 8px;
}

section .contact-wrapper .contact-form .form .form-input {
    width: 100%;
    background-color: #fff;
}

.input-wrapper {
    width: 100%;
    position: relative;
    margin: 16px 0;
}

.input-wrapper input[type=email], .input-wrapper input[type=password], .input-wrapper input[type=tel], .input-wrapper input[type=text], .input-wrapper select {
    font-size: 14px;
}

.input-wrapper input[type=email], .input-wrapper input[type=password], .input-wrapper input[type=tel], .input-wrapper input[type=text] {
    width: 100%;
    border-radius: 5px;
    padding: 9px 16px 5px;
    border: 1px solid #989797;
    font-size: 12px;
    line-height: 28px;
    letter-spacing: .00937em;
    background: 0 0;
    margin-bottom: 0 !important;
    outline: 0 !important;
    color: #2b3a42;
    box-shadow: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-top: 0 !important;
    height: 44px;
}

.input-wrapper label {
    position: absolute;
    font-size: 16px;
    font-weight: 400;
    top: 16px;
    left: 12px;
    display: inline-block;
    transition: all 100ms ease-in-out;
    margin-bottom: 0 !important;
    color: #7e7e7e;
    pointer-events: none;
}

.input-wrapper.error input, .input-wrapper.error select, .input-wrapper.error textarea {
    border-color: red !important;
}

.input-wrapper input[type=email], .input-wrapper input[type=password], .input-wrapper input[type=tel], .input-wrapper input[type=text], .input-wrapper select {
    font-size: 14px;
}

.input-wrapper select {
    width: 100%;
    display: block;
    border-radius: 5px;
    padding: 9px 16px 5px;
    border: 1px solid #989797;
    font-size: 12px;
    line-height: 28px;
    letter-spacing: .00937em;
    background: 0 0;
    margin-bottom: 0 !important;
    outline: 0 !important;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    color: #2b3a42;
    margin-top: 0 !important;
    height: 44px;
}

.input-wrapper input[type=email].hk_valid ~ label, .input-wrapper input[type=email].wait_data ~ label, .input-wrapper input[type=email]:focus ~ label, .input-wrapper input[type=password].hk_valid ~ label, .input-wrapper input[type=password].wait_data ~ label, .input-wrapper input[type=password]:focus ~ label, .input-wrapper input[type=tel].hk_valid ~ label, .input-wrapper input[type=tel].wait_data ~ label, .input-wrapper input[type=tel]:focus ~ label, .input-wrapper input[type=text].hk_valid ~ label, .input-wrapper input[type=text].wait_data ~ label, .input-wrapper input[type=text]:focus ~ label, .input-wrapper select.hk_valid + label, .input-wrapper select.wait_data + label, .input-wrapper select:focus + label {
    transform: translateY(-170%);
    font-size: 12px;
    z-index: 9;
    color: #989797;
    background: #fff;
    padding-left: 7px;
    padding-right: 7px;
    left: 10px;
}

.input-wrapper input[type=email].hk_valid ~ label, .input-wrapper input[type=email].wait_data ~ label, .input-wrapper input[type=email]:focus ~ label, .input-wrapper input[type=password].hk_valid ~ label, .input-wrapper input[type=password].wait_data ~ label, .input-wrapper input[type=password]:focus ~ label, .input-wrapper input[type=tel].hk_valid ~ label, .input-wrapper input[type=tel].wait_data ~ label, .input-wrapper input[type=tel]:focus ~ label, .input-wrapper input[type=text].hk_valid ~ label, .input-wrapper input[type=text].wait_data ~ label, .input-wrapper input[type=text]:focus ~ label, .input-wrapper select.hk_valid + label, .input-wrapper select.wait_data + label, .input-wrapper select:focus + label {
    transform: translateY(-170%);
    font-size: 12px;
    z-index: 9;
    color: #989797;
    background: #fff;
    padding-left: 7px;
    padding-right: 7px;
    left: 10px;
}


.input-wrapper textarea {
    width: 100%;
    border-radius: 5px;
    padding: 12px 16px 14px;
    border: 1px solid rgba(0, 0, 0, .24);
    font-size: 16px;
    line-height: 28px;
    letter-spacing: .00937em;
    background: 0 0;
    margin-bottom: 0 !important;
    outline: 0 !important;
    resize: none;
}

.check-wrapper input[type=checkbox], .input-wrapper.error .before-icon, .radio-wrapper input[type=radio] {
    display: none;
}

section .contact-wrapper .contact-form .form .checkbox-text {
    font-size: 12px;
    line-height: normal;
    color: #59646a;
}

.check-wrapper input[type=checkbox] + label {
    font-size: 14px;
}

.check-wrapper input[type=checkbox] + label {
    padding-left: 40px;
    margin-bottom: 0;
    color: #515151;
    cursor: pointer;
    font-weight: 400;
    font-size: 12px;
    display: inline-block;
    position: relative;
    line-height: 16px;
}

.check-wrapper input[type=checkbox] + label:after {
    content: " ";
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    margin-top: -12px;
    border: 1px solid #7e7e7e;
    transition: all 350ms ease-in-out;
    left: 0;
}


section .contact-wrapper .contact-form .form #conditional-input, section .contact-wrapper .contact-form .form .check-wrapper, section .contact-wrapper .contact-form .form .form-input, section .contact-wrapper .contact-form .form .send-form {
    grid-column-start: 1;
    grid-column-end: 3;
}

section .contact-wrapper .contact-form .form .send-form {
    padding: 8px 16px;
    border-radius: 4px;
    border: 0;
    font-size: 16px;
    line-height: normal;
    color: #fff;
    background-color: #ff6000;
}

section .contact-wrapper .contact-info {
    flex-basis: 0;
    flex-grow: 1;
    padding-left: 88px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: none;
    border-left: 1px solid #eee;
}

section .contact-wrapper .contact-info {
    margin-top: 24px;
    padding-top: 24px;
}

section .contact-wrapper .contact-info .info-item:first-of-type {
    margin-top: 24px;
}

section .contact-wrapper .contact-info .info-item {
    margin: 16px 0;
}

section .contact-wrapper .contact-info .info-item .row .line-border {
    padding-right: 6px;
    border-right: 1px solid;
    border-color: #adb5bb;
}

section .contact-wrapper .contact-info h4, section .contact-wrapper .contact-info p {
    font-size: 14px;
    line-height: normal;
    color: #2b3a42;
}

section .contact-wrapper .contact-info h4 {
    font-weight: 700;
}

.send-form {
    margin-top: 20px;
}