.contact {
    background: url(../../../img/contact-bg.jpg) no-repeat top left/100% 85%;
    color: #fff
}

.contact__wrap {
    padding: calc(260 / var(--media-breakdown)) 0 calc(50 / var(--media-breakdown))
}

.contact__row {
    margin: -1.5625vw -1.5625vw 2.86458vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.contact__col {
    margin: 1.5625vw;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(100% / 2 - 60 / 1920 * 100vw);
    flex: 0 0 calc(100% / 2 - 60 / 1920 * 100vw)
}

.contact__title {
    padding-bottom: calc(10 / var(--media-breakdown));
    position: relative;
    font-size: calc(37 / var(--media-breakdown));
    font-weight: 700;
    color: #fff
}

.contact__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(60 / var(--media-breakdown));
    height: calc(4 / var(--media-breakdown));
    border-radius: calc(2 / var(--media-breakdown));
    background-color: #fff
}

.contact__text {
    padding: calc(30 / var(--media-breakdown)) 0;
    color: #fff
}

.contact__text>:not(:last-child) {
    margin-bottom: calc(25 / var(--media-breakdown))
}

.contact__offices {
    -webkit-box-shadow: 0 calc(6 / var(--media-breakdown)) calc(8 / var(--media-breakdown)) rgba(113,102,131,.18);
    box-shadow: 0 calc(6 / var(--media-breakdown)) calc(8 / var(--media-breakdown)) rgba(113,102,131,.18);
    border-radius: calc(7 / var(--media-breakdown));
    padding: calc(60 / var(--media-breakdown));
    background-color: #fff;
    color: #000
}

.contact__offices .contact-office h2,
.contact__offices .contact-office h3,
.contact__offices .contact-office h4,
.contact__offices .contact-office label {
    display: block;
    margin-bottom: calc(8 / var(--media-breakdown));
    font-size: calc(22 / var(--media-breakdown));
    font-weight: 900;
    text-transform: uppercase;
    color: #d00
}

.contact__offices .contact-office a[href^='tel:'] {
    margin-bottom: calc(15 / var(--media-breakdown));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: calc(28 / var(--media-breakdown));
    font-weight: 900;
    color: #000
}

.contact__offices .contact-office a[href^='tel:']::before {
    content: url(../../../img/icon-phone-red.png);
    margin-right: calc(15 / var(--media-breakdown))
}

.contact__offices .contact-office ul>li {
    font-size: calc(18 / var(--media-breakdown));
    font-weight: 400
}

.contact__offices-row {
    margin: calc(-50 / var(--media-breakdown));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.contact__offices-col {
    margin: calc(50 / var(--media-breakdown))
}

.contact-form {
    padding: calc(20 / var(--media-breakdown)) 0
}

.contact-form__caption {
    margin-bottom: calc(20 / var(--media-breakdown));
    font-size: calc(27 / var(--media-breakdown));
    font-weight: 700;
    color: #fff
}

.contact-form__inputs {
    margin: -.78125vw -.78125vw 1.30208vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.contact-form__inputs>li {
    margin: .78125vw;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 calc(100% / 2 - 30 / 1920 * 100vw);
    flex: 1 0 calc(100% / 2 - 30 / 1920 * 100vw)
}

.contact-form__inputs>li label {
    margin-bottom: calc(10 / var(--media-breakdown));
    display: block;
    font-size: calc(14 / var(--media-breakdown));
    font-weight: 400;
    color: #fff
}

.contact-form__inputs>li .input {
    width: 100%
}

.contact-form__submit {
    width: 100%;
    border-radius: calc(8 / var(--media-breakdown));
    border: calc(3 / var(--media-breakdown)) solid #fff;
    padding: calc(15 / var(--media-breakdown));
    background-color: #000;
    color: #fff;
    font-size: calc(21 / var(--media-breakdown));
    font-weight: 700;
    cursor: pointer;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

.contact-form__submit:hover {
    background-color: #fff;
    color: #000
}

@media (max-width: 991px) {
    .contact__offices {
        padding: 45px
    }
}

@media (max-width: 767px) {
    .contact__col {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(100% - 60 / 1920 * 100vw);
        flex: 0 0 calc(100% - 60 / 1920 * 100vw)
    }

    .contact-form__inputs>li {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 calc(100% - 30 / 1920 * 100vw);
        flex: 1 0 calc(100% - 30 / 1920 * 100vw)
    }
}

@supports (-webkit-appearance: none) {
    .contact {
        background: url(../../../img/client-bg.jpg) no-repeat top left/100% 85%
    }
}