/* forms
   ============================ */

/* global styles for form fields */
.form.feature .title {
    margin-bottom: 36px;
}

.form .form-field {
    float: left;
    margin-bottom: 30px;
}

.form .form-field[data-type="hidden"] {
    margin-bottom: 0;
}

.form .form-field.hidden,
.form .dropdown-toggle.hidden {
    display: none;
}

.form .wrapper {
    padding: 40px 0;
}

.form .description {
    padding-bottom: 30px;
}

#main .form fieldset {
    margin: 0 -1%;
}

#main .form fieldset .form-slide-container {
    margin: 0;
}

.form .form-field,
#main .form .form-field {
    padding: 0 1%;
    width: 33.33%;
}

.form .form-field.half-width,
#main .form .form-field.half-width {
    width: 50%;
}

#main .form .form-field:nth-child(5n+1) {
    clear: left;
}

#main .form .form-field.checkbox {
    clear: none;
}

#main .form .form-field[data-type="multiline"] {
    clear: both;
    width: 100%;
}

/* specific styles for the form heding on main nav */
.feature div.title {
    color: #005daa;
    font-size: 4.8rem;
    font-weight: 400;
    letter-spacing: -0.048rem;
    line-height: 5rem;
    margin: 0 0 38px;
    padding: 0 0 0 14px;
    position: relative;
}

.feature div.title::before {
    background: #f78e1e;
    content: "";
    height: 30px;
    left: 0;
    position: absolute;
    top: 12px;
    width: 4px;
}

.feature div.title > a {
    color: #005daa;
}

.feature div.title > a:hover {
    color: #21016b;
}

/* non-stylish forms styles - prevents flash of unstyled form fields on page load */
.form input:not(.button),
.form select,
.form textarea {
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 15px;
    line-height: 52px;
    color: #7c7c7c;
    font-family: "AvenirLTStd-Medium", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
    border: 2px solid #f2f2f2;
}

.form textarea {
    height: 132px;
    line-height: 2.8rem;
}

.form input[type="checkbox"] {
    height: 22px;
    width: 22px;
    -webkit-appearance: none;
    padding: 0;
}

.form input[type="radio"] {
    height: 10px;
    width: 10px;
}

.form input[type="number"] {
    -moz-appearance: textfield;
}

.form .checkbox {
    position: relative;
}

.form .checkbox .field {
    position: absolute;
    left: 0;
    top: 2px;
}

.form .checkbox label {
    display: inline-block;
    font-family: "AvenirLTStd-Book", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
    margin-left: 34px;
    vertical-align: top;
}

.form .placeholder-wrapper .placeholder {
    color: #7c7c7c;
    font-family: "AvenirLTStd-Medium", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
    font-size: 1.4rem;
    left: 15px;
}

.form [data-model-type="TextArea"] .placeholder-wrapper .placeholder {
    line-height: 28px;
    top: 18px;
}

.form .captcha-container {
    clear: both;
    margin-bottom: 30px;
}

.form .captcha-container .g-recaptcha > div {
    margin: 0 auto;
}

.form .captcha-container .captcha-message {
    text-align: center;
}

.form .captcha-container .captcha-message,
.form .captcha-container .g-recaptcha > div .stylish-textarea {
    display: none;
}

.form input[type="number"]::-webkit-inner-spin-button,
.form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* stylish select field */
.form .stylish-form .stylish-select,
.selection .stylish-form .stylish-select {
    background: #ffffff;
    border: none;
}

.form .stylish-form .stylish-select > .dropdown-list,
.selection .stylish-form .stylish-select > .dropdown-list {
    max-height: 173px;
    min-height: 173px;
    top: 100%;
    border: none;
    border-top: 1px solid #f2f2f2;
}

.form .stylish-form .stylish-select > .dropdown-list .dropdown-option,
.selection .stylish-form .stylish-select > .dropdown-list .dropdown-option {
    padding: 4px 22px 8px;
    color: #6b6b6b;
    font-size: 1.6rem;
    line-height: 3rem;
    font-family: "FreightSans W01 Book", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
}

.ru .form .stylish-form .stylish-select > .dropdown-list .dropdown-option,
.ru .selection .stylish-form .stylish-select > .dropdown-list .dropdown-option {
    font-family: "Arial", "Helvetica Neue", "Helvetica", sans-serif;
}

.form .stylish-form .stylish-select > .dropdown-list .dropdown-option:not(:first-child),
.selection .stylish-form .stylish-select > .dropdown-list .dropdown-option:not(:first-child) {
    border-top: 1px solid #f2f2f2;
}

.form .stylish-form .stylish-select > .dropdown-list .dropdown-option.option-selected,
.form .stylish-form .stylish-select > .dropdown-list .dropdown-option:hover,
.selection .stylish-form .stylish-select > .dropdown-list .dropdown-option.option-selected,
.selection .stylish-form .stylish-select > .dropdown-list .dropdown-option:hover {
    background: #f2f2f2;
}

.form .stylish-form .stylish-select > span.selected,
.selection .stylish-form .stylish-select > span.selected {
    color: #7c7c7c;
    font-family: "AvenirLTStd-Medium", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
    font-size: 1.6rem;
    line-height: 5.2rem;
    max-width: 100%;
    padding: 0 40px 0 15px;
}

.form .stylish-form .stylish-select > span > span.ico,
.selection .stylish-form .stylish-select > span > span.ico {
    right: 22px;
    top: 50%;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #21016b;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.form .stylish-form .stylish-select.active > span > span.ico,
.selection .stylish-form .stylish-select.active > span > span.ico {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border-top-color: #f78e1e;
}

.form .stylish-form .stylish-select.disabled,
.selection .stylish-form .stylish-select.disabled {
    opacity: 0.7;
}

.form .stylish-form .stylish-select.disabled > span.selected,
.selection .stylish-form .stylish-select.disabled > span.selected {
    color: #6b6b6b;
}

.form .stylish-form .stylish-select.disabled > span > span.ico,
.selection .stylish-form .stylish-select.disabled > span > span.ico {
    border-top-color: #6b6b6b;
}

/* stylish text, email, number and textarea fields */
.form .stylish-form .stylish-text,
.form .stylish-form .stylish-email,
.form .stylish-form .stylish-number,
.form .stylish-form .stylish-textarea,
.form .stylish-form .stylish-select > span.selected {
    height: 56px;
    border: 2px solid #f2f2f2;
    background: #ffffff;
    -moz-transition: border ease-in-out 0.2s;
    -o-transition: border ease-in-out 0.2s;
    -webkit-transition: border ease-in-out 0.2s;
    transition: border ease-in-out 0.2s;
}

.form .stylish-form .stylish-textarea {
    height: 132px;
}

.form .stylish-form .stylish-text > input,
.form .stylish-form .stylish-email > input,
.form .stylish-form .stylish-number > input,
.form .stylish-form .stylish-textarea > textarea {
    padding: 0 15px;
    height: 100%;
    border: none;
}

.form .stylish-form .stylish-textarea > textarea {
    height: 100%;
    padding: 15px;
}

.form .stylish-form .stylish-email > span,
.form .stylish-form .stylish-number > span,
.form .stylish-form .stylish-password > span,
.form .stylish-form .stylish-text > span,
.form .stylish-form .stylish-textarea > span {
    display: none;
}

/* stylish checkbox field */
.form .stylish-form .checkbox .stylish-ds,
.form .stylish-form .checkbox .stylish-ds > span,
.form .stylish-form .checkbox .stylish-ds > input[type="checkbox"] {
    height: 22px;
    width: 22px;
    border: none;
}

.form .stylish-form .checkbox .stylish-ds > span {
    border: 2px solid #f2f2f2;
    background: #ffffff;
}

.form .stylish-form .checkbox .stylish-ds > span.checked {
    border: 2px solid #f78e1e;
    background: url("/Media/icons/checkbox-icon.svg") no-repeat center;
    background-size: 16px;
    background-color: #f78e1e;
}

/* stylish radio field */
.form .stylish-form .radio .stylish-ds,
.form .stylish-form .radio .stylish-ds + label {
    color: #21016b;
    display: inline-block;
    float: none;
    margin: 0;
    vertical-align: middle;
}

.form .stylish-form .radio .stylish-ds + label {
    font-family: "AvenirLTStd-Medium", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
    font-weight: 400;
    margin-left: 5px;
}

.form .stylish-form .radio .stylish-ds,
.form .stylish-form .radio .stylish-ds > span,
.form .stylish-form .radio .stylish-ds > input[type="radio"] {
    height: 10px;
    width: 10px;
    border: none;
}

.form .stylish-form .radio .stylish-ds > span {
    border: 2px solid #340e55;
    -moz-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
}

.form .stylish-form .radio .stylish-ds > span.checked {
    background-color: #f78e1e;
    border-color: #f78e1e;
}

/* hidden labels - positioned offscreen so they can be read by screenreaders */
.form .hidden-field,
.form label.hidden-label {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* focus state */
.form .stylish-form .stylish-text.focus,
.form .stylish-form .stylish-email.focus,
.form .stylish-form .stylish-number.focus,
.form .stylish-form .stylish-textarea.focus,
.form .stylish-form .stylish-select.focus > span.selected,
.form .stylish-form .stylish-select.active > span.selected,
.form .stylish-form .radio .stylish-ds.focus > span,
.form .stylish-form .checkbox .stylish-ds.focus > span {
    border: 2px solid #f78e1e;
}

/* form errors */
.form .err-msgs {
    display: none;
    font-size: 1.4rem;
    line-height: 2.7rem;
    font-family: "AvenirLTStd-Black", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
    font-weight: 400;
    color: #ed9b11;
}

.form .error .err-msgs,
.form .errors .err-msgs {
    display: block;
}

.form .stylish-form .form-field.error .stylish-text,
.form .stylish-form .form-field.error .stylish-email,
.form .stylish-form .form-field.error .stylish-number,
.form .stylish-form .form-field.error .stylish-textarea {
    border: 2px solid #d32626;
}

/* form response */
.form .form-response + .form-section {
    padding-top: 73px;
}

.form .form-response.hidden + .form-section {
    padding-top: 0;
}

/* alternative form - form slider */
.form-slider .form-slide-container {
    margin: 0 -1%;
}

.form-slider .form-slide-container .slide {
    display: none;
    float: left;
    opacity: 0;
    -moz-transition: 0.4s ease;
    -ms-transition: 0.4s ease;
    -o-transition: 0.4s ease;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
    visibility: hidden;
    width: 100%;
}

.form-slider .form-slide-container .slide.active {
    display: block;
    opacity: 1;
    visibility: visible;
}

.form-slider .form-slide-container .slide:first-child .prev,
.form-slide-controls button.hidden {
    display: block;
    opacity: 0;
    visibility: hidden;
}

.form-slider .form-slide-container .slide .form-fields {
    margin: 0 -1%;
}

.form-slider .form-slide-container .slide .form-field .checkbox {
    margin-top: 16px;
}

.form-slider .form-slide-container .slide .actions {
    float: left;
    padding: 0 1%;
    margin-top: 0;
    text-align: center;
    width: 33.33%;
}

.form-slider .form-slide-container .slide .close {
    color: #ffffff;
    font-family: "AvenirLTStd-Medium", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
    font-size: 1.6rem;
    letter-spacing: 0;
    line-height: 2.7rem;
    position: absolute;
    right: 20px;
    top: 22px;
}

.form-slider .form-slide-container .slide .close::after {
    content: "x";
    margin-left: 5px;
}

.form-slider .form-slide-container .slide .captcha-container {
    clear: none;
    float: left;
    margin-bottom: 10px;
    padding: 0 1%;
    width: 33.33%;
}

.form-slider .form-slide-container .slide .captcha-container .g-recaptcha > div {
    margin-bottom: 5px;
    min-width: 100%;
}

.form-slider .form-slide-container .slide .captcha-container .captcha-message {
    text-align: left;
}

.form-slider .form-slide-container .slide .captcha-container + .actions,
.form-slider .form-slide-container .slide .form-field + .form-field + .form-field + .actions {
    clear: both;
    float: none;
    margin: 0 auto 10px;
}

#main .form-slider .form-slide-container .slide .close {
    display: none;
}

#main .form-slider .form-slide-container .slide .form-field {
    float: left;
    padding: 0 1%;
    width: 33.33%;
}

#main .form-slider .form-slide-container .slide .form-field.half-width {
    width: 50%;
}

/* step form */
.form .form-error .message,
.form .form-submitted .message {
    font-family: "AvenirLTStd-Book", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
    font-size: 1.6rem;
    line-height: 2.6rem;
}

.form .form-error .message .icon,
.form .form-submitted .message .icon {
    display: block;
    height: 92px;
    margin: 0 auto 30px;
    width: 98px;
}

.form .form-error .message .icon {
    width: 19px;
}

.form .form-submitted .message .icon svg.tick path {
    fill: none;
    stroke-width: 2;
    stroke: #e69736;
}

.form .form-error .message .icon svg.warning path {
    fill: none;
    stroke: #f78e1e;
    stroke-width: 3;
    stroke-miterlimit: 10;
}

.step-form {
    color: #ffffff;
    position: relative;
}

.step-form.feature .title {
    color: #ffffff;
    text-align: left;
}

.step-form .form .wrapper {
    padding: 38px 0 30px;
}

.step-form .form .wrapper a {
    color: #ffffff;
    font-family: "AvenirLTStd-Medium", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
    text-decoration: underline;
}

.step-form .form .submit .button {
    -moz-box-shadow: 6px 0 10px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 6px 0 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 6px 0 10px 0 rgba(0, 0, 0, 0.1);
    font-size: 2.1rem;
    line-height: 3rem;
    padding: 12px 26px 13px;
    width: 100%;
}

.step-form .form .success-message.hidden,
.step-form .form .form-body.hidden,
.step-form .form .toggleable-dropdowns {
    display: none;
}

.form .pending-submit {
    display: none;
}

.form .pending-submit,
.form .pending-submit::before,
.form .pending-submit:hover,
.form .pending-submit:focus {
    background: #6caddf;
    color: #ffffff;
}

.form .pending-submit:hover::before {
    width: 0;
}

.form .pending .full-submit {
    display: none;
}

.form .pending .pending-submit {
    display: inline-block;
}

.form .pending .button.pending-submit::after {
    animation: ellipsis steps(4, end) 1.4s infinite;
    content: "\2026";
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    width: 0;
}

/* header form */
#header-links .step-form {
    left: 0;
    position: absolute;
    top: 100%;
    width: 100%;
}

#header-links .step-form .form {
    display: none;
}

.form-slide-controls {
    clear: both;
    padding: 0 1%;
    position: relative;
}

.form-slide-controls .pagination {
    height: 10px;
    margin-top: 11px;
}

.form-slide-controls button {
    margin-top: 7px;
}

.form-slide-controls button,
.form-slide-controls .pagination,
.form-slide-controls .pagination > span {
    color: #ffffff;
    display: inline-block;
    vertical-align: top;
}

.form-slide-controls .pagination > span {
    background: transparent;
    border: 2px solid #ffffff;
    height: 10px;
    margin: 0 5px;
    width: 10px;
}

.form-slide-controls .pagination > span.active {
    background: #ffffff;
}

/* download resource */
.form .wrapper a.download-resource {
    display: block;
}

@media screen and (max-width: 1200px) {

    .form .wrapper,
    .step-form .form .wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 1024px) {

    /* header form */
    .nav-open.form-slider-open #site-overlay.active,
    #navigation-links.form-open {
        background: #21016b;
    }

    #header-links .step-form {
        position: absolute;
        top: 100%;
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    #header-links .step-form.active,
    .step-form-open #navigation-links {
        height: 100vh;
    }

    .step-form-open #header-links .step-form.active .mod-form,
    .step-form-open #header-links .step-form.active .form-slider {
        height: 100%;
    }

    .step-form-open #header-links .step-form.active .form-slider,
    .step-form-open #navigation-links {
        background: #21016b;
    }
}

@media screen and (max-width: 880px) {

    /* stylish text, email, number and textarea fields */
    .form .stylish-form .stylish-text,
    .form .stylish-form .stylish-email,
    .form .stylish-form .stylish-number,
    .form .stylish-form .stylish-textarea,
    .form .stylish-form .stylish-select > span.selected {
        height: 50px;
    }

    .form .stylish-form .stylish-select > span.selected {
        line-height: 4.5rem;
    }

    .form .stylish-form .stylish-textarea {
        height: 132px;
    }

    /* alternative form - form slider */
    .step-form .form .wrapper {
        padding-top: 64px;
    }

    .step-form.feature .title {
        margin-bottom: 21px;
    }

    .form-slider .form-slide-container {
        margin: 0;
    }

    #main .form fieldset {
        margin: 0 auto;
    }

    #main .form .form-field,
    #main .form .form-field.half-width,
    .form-slider .form-slide-container .slide .actions,
    .form-slider .form-slide-container .slide .form-field,
    .form-slider .form-slide-container .slide .form-field.half-width,
    .form-slider .form-slide-container .slide .captcha-container,
    #main .form-slider .form-slide-container .slide .form-field,
    #main .form-slider .form-slide-container .slide .form-field.half-width {
        float: none;
        margin: 0 auto 20px;
        padding: 0;
        text-align: left;
        width: 100%;
    }

    .form-slider .form-slide-container .slide .captcha-container .g-recaptcha > div {
        margin: 0;
        min-width: 80%;
    }

    .step-form .form .submit .button {
        font-size: 1.8rem;
        padding: 10px 26px;
    }

    #main .form .submit .button {
        margin-top: 15px;
    }

    #main .captcha-container .g-recaptcha + .actions .button {
        margin-top: 0;
    }
}

@media screen and (max-width: 736px) {

    /* stylish select */
    .form input,
    .form textarea,
    .form .stylish-form .stylish-select > span.selected,
    .form .stylish-form .stylish-select > .dropdown-list .dropdown-option,
    .ru .form .stylish-form .stylish-select > .dropdown-list .dropdown-option {
        font-size: 1.6rem;
    }


    .feature div.title {
        font-size: 3.2rem;
        letter-spacing: -0.059rem;
        line-height: 4rem;
        margin-bottom: 33px;
        padding-left: 12px;
    }

    .feature div.title > a:hover {
        color: #6caddf;
    }

    .feature div.title::before {
        height: 20px;
        top: 11px;
    }
}