@media screen and (max-width: 1140px) {

    h1 {
        font-size: 24px !important;
    }

    h2,
    .courses-callback .x-title,
    h4.person-title,
    .reply-author,
    .person-subtitle {
        font-size: 18px !important;
    }

    .container {
        width: calc(100% - 20px);
    }

    .header-menu {
        display: none;
    }

    .welcome .container {
        padding: 25px 0;
        flex-direction: column-reverse;
    }

    .welcome .img-wrap img {
        width: 250px;
        margin: 0 auto;
        display: block;
    }

    body {
        background-image: none;
    }

    .course {
        background-position: top -50px right;
        background-size: auto 600px;
        padding: 15px 15px 100px;
        display: block;
    }

    .course-button {
        width: calc(100% - 30px);
        left: 15px;
        bottom: 15px;
    }

    .courses-row {
        display: block;
    }

    .course,
    .courses-callback {
        width: 100%;
        margin-bottom: 20px;
        min-height: auto;
    }

    .course h3 {
        min-height: 0;
        font-size: 20px;
        margin-bottom: 5px;
    }

    .course .subtitle {
        margin: 0 0 20px;
    }

    .course br {
        display: none;
    }

    .course-image {
        height: 200px;
        background-size: cover;
        background-position: center;
    }

    .gallery_numbers .container,
    .gallery .container {
        flex-direction: column-reverse;
    }

    .person {
        width: 100%;
        flex-direction: column;
    }

    .reply-slide {
        margin-right: 0;
    }

    .person-avatar {
        height: 250px;
        width: 200px;
        margin: 30px 35px 0 15px;
        border-radius: 5px;
    }

    .gallery-slider-wrap {
        margin-left: 0;
        width: 100%;
    }

    .gallery-slider-list-inner a {
        width: 70px;
    }

    .number-block .x-number {
        font-size: 24px;
    }

    .callback .form-wrap {
        flex-direction: column;
    }

    .callback .container {
        padding: 20px;
        box-sizing: border-box;
    }

    .form-wrap .x-text,
    .form-wrap .callback-form {
        width: 100%;
    }

    .form-wrap .x-text {
        margin-bottom: 20px
    }

    footer h2 {
        font-size: 18px !important;
    }

    .partners-gallery {
        flex-wrap: wrap;
    }

    .partner-block {
        height: 70px;
        width: 50%;
        margin-bottom: 20px;
    }

    .welcome-links {
        flex-wrap: wrap;
    }

    .welcome-links a {
        padding: 8px 10px;
        margin-right: 12px;
        margin-bottom: 10px;
    }

    .welcome .subtitle {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .courses .subtitle,
    .course-description,
    .courses-callback .x-description,
    .persons .subtitle,
    .gallery .subtitle,
    .callback .subtitle {
        font-size: 16px;
    }

    .course-old-price {
        font-size: 16px;
        margin-bottom: 0;
        margin-top: 285px;
    }

    .price-desc {
        margin-top: 3px;
        font-size: 10px;
        width: 100%;
    }

    .person-text {
        padding: 15px;
    }

    .reply-photo {
        width: 80px;
        height: 100px;
    }

    .partners {
        padding: 20px 0
    }

    .course-price-block {
        flex-direction: column;
    }

    .primary-btn {
        padding: 8px 12px;
        font-size: 16px;
    }

    .courses-callback {
        padding: 15px;
    }

    .price-rub {
        font-size: 20px;
    }

    .reply-text .reply-text {
        margin-top: 60px;
    }

    .reply-text .reply-date,
    .reply-text .reply-text {
        position: relative;
        left: -110px;
        width: calc(100% + 100px);
    }

    .replies h2 {
        margin-bottom: 30px;
    }

    .gallery-slider-main {
        height: 200px;
    }

    .lity-wrap {
        padding: 40px !important;
    }
}

@media screen and (max-width: 450px) {

    .person-avatar {
        height: 440px;
        width: calc(100% - 30px);
        margin: 15px 15px 0;
    }
}

@media screen and (max-width: 380px) {

    .person-avatar {
        height: 350px;
    }
}
