/*==========  Desktop First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    .header {
        padding: 16px;
    }
    .wrapper {
        max-width: 560px;
        width: 100%;
        margin: 0 auto;
    }
    .main-block {
        margin-top: 0;
    }
    .top-line {
        flex-direction: column;
        gap: 4px;
        align-items: center;
    }
    .main-block h1 {
        font-size: 38px;
        line-height: 100%;
    }
    .main-block h1 svg {
        height: 32px;
        width: 32px;
        object-fit: contain;
    }
    .main-block a {
        margin: 32px auto 0;
    }
    .main-block .main-img {
        margin-top: 32px;
    }
    .main-block .features {
        margin: 32px auto 0;
    }
    .main-block .features .item {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    .main-block .features .item .text {
        text-align: center;
    }
    .problems-decision {
        margin-top: 56px;
    }
    .problem-decision-wrapper {
        flex-wrap: wrap;
    }
    .problem-decision-wrapper > div {
        flex: 1 1 100%;
    }
    .format{
        margin-top: 56px;
    }
    .format-content {
        flex-wrap: wrap;
        gap: 56px;
        align-items: center;
    }
    .format-content__text {
        padding-top: 0;
        text-align: center;
    }
    .format-content__text h4 {
        justify-content: center;
    }
    .format-content__text a {
        margin: 32px auto 0;
    }
    .format-content__text:after {
        width: 20px;
        height: 32px;
        bottom: 8px;
        right: 20px;
        left: auto;
    }
    .result {
        margin-top: 56px;
    }
    .result-content {
        flex-wrap: wrap;
    }
    .result-content > div {
        flex: 1 1 100%;
    }
    .plan-content {
        flex-wrap: wrap;
    }
    .plan-content > div {
        flex: 1 1 100%;
    }
    .native {
        margin-top: 56px;
        background-image: none;
    }
    .native-content h2 {
        font-size: 28px;
    }
    .native-content h2 svg {
        height: 24px;
        width: 24px;
        object-fit: contain;
    }
    .native-content > img {
        margin-top: 32px;
    }
    .native-content .icon {
        margin-top: 32px;
    }
    .native-content h3 {
        font-size: 20px;
    }
    .program {
        margin-top: 56px;
    }
    .program-header h2 {
        font-size: 28px;
    }
    .program-levels button {
        padding: 4px 24px;
    }
    .program-items .item .top {
        flex-wrap: wrap;
        gap: 24px;
    }
    .program-items .item .top > div {
        flex: 1 1 100%;
        padding: 0 !important;
        border: none !important;
    }
    .program-items .item .bottom {
        flex-wrap: wrap;
        gap: 24px;
        display: none;
    }
    .program-items .item .bottom > div {
        padding: 0 !important;
        flex: 1 1 100%;
        border: none !important;
    }
    .program-items .item .bottom .future {
        margin-top: 24px;
    }
    .show-more {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: inherit;
        color: #FEE300;
        gap: 4px;
        background: transparent;
        border: none;
        outline: none;
        margin-top: 24px;
    }
    .level {
        margin-top: 56px;
    }
    .level-content h2 {
        font-size: 20px;
    }
    .progress {
        margin-top: 56px;
    }
    .progress_content {
        flex-wrap: wrap;
    }
    .progress_content > div {
        flex: 1 1 100%;
    }
    .progress-content__result h2, .progress-content__progress h2 {
        font-size: 20px;
    }
    .costly {
        margin-top: 56px;
    }
    .costly-content h2 {
        font-size: 28px;
    }
    .costly-content img {
        margin: 32px auto 0;
    }
    .you-way-content {
        margin-top: 32px;
    }
    .you-way-content h3 {
        font-size: 20px;
    }
    .teachers {
        margin-top: 56px;
    }
    .teachers-header h2 {
        font-size: 28px;
    }
    .teachers-list {
        margin-top: 32px;
        flex-wrap: wrap;
    }
    .teachers-list .card {
        flex: 1 1 100%;
    }
    .target {
        margin-top: 32px;
    }
    .target-header h2 {
        font-size: 20px;
    }
    .target-content {
        margin-top: 56px;
    }
    .target-content .image {
        display: none;
    }
    .target-content .text h2 {
        font-size: 20px;
    }
    .reviews {
        margin-top: 56px;
    }
    .reviews-header h2 {
        font-size: 28px;
    }
    .bottom-from-content {
        flex-wrap: wrap;
    }
    .bottom-from-content__text .form-img {
        margin-top: 32px;
    }
    .bottom-from-content__text .list .item {
        flex: 1 1 45%;
    }
    .bottom-from {
        margin-top: 56px;
    }
    .bottom-from-content__from {
        flex: 1 1 100%;
    }
    .program-levels {
        margin: 32px auto 0;
    }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .progress-content__result .list {
        flex-wrap: wrap;
    }
    .progress-content__result .list .block {
        flex: 1 1 100%;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    .native-content > img {
        width: 100%;
        height: auto;
    }
    .program-levels button {
        font-size: 14px;
        padding: 4px 16px;
    }
    .program-items .item,
    .plan-content__box,
    .plan-content__plan,
    .result-content__checkpoint,
    .decision,
    .progress-content__progress,
    .progress-content__result, 
    .target-content .text, 
    .reviews-slider__item,
    .form-wrapper {
        padding: 24px;
    }
    .result-content__result {
        padding: 32px 32px 0;
    }
    .problem {
        padding: 32px 32px 0;
    }
    .main-block .features .item .icon img {
        height: 32px;
        height: 32px;
    }
    .bottom-from-content__text .list .item .icon img {
        height: 40px;
        width: 40px;
        object-fit: contain;
    }
    .bottom-from-content__text .list .item .text h3 {
        font-size: 16px;
    }
    .bottom-from-content__text .list .item .text p {
        font-size: 14px;
    }
    .form-gift {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {}