@media only screen and (max-width : 1200px) {
    .container,
    .capability .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .purpose__num::before {
        padding-left: 0;
        width: 65px;
        height: 75px;
        top: 0;
        left: 0;
        border-top: none;
        border-left: none;
    }

    .history__foto::after {
        right: 0;
    }

    .calc__item {
        padding: 30px 30px 30px 125px;
        position: relative;
        text-align: left;
        background-color: #F7F7F7;
    }

    .calc__item img {
        left: 0;
    }

    .capability.buy-2 .container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .buy-2 .capability__item {
        width: 265px;
        margin: 0 auto;
    }
}

@media only screen and (max-width : 992px) {
    .header {
        padding: 30px 0 80px 0;
    }

    .header__top {
        padding-bottom: 40px;
    }

    .header__bottom {
        display: block;
    }

    .header__bottom a.light-btn {
        margin: 0 auto;
    }

    .header__text p {
        margin: 25px 0 60px 0;
    }

    .header__video,
    .header__not-video {
        width: 80%;
        margin: 0 auto 60px auto;
    }

    .purpose {
        padding-bottom: 60px;
    }

    .need .container {
        display: block;
    }

    .need__tittle {
        padding-top: 60px;
        padding-bottom: 60px;
        top: 0;
        height: auto;
    }

    .need__text {
        padding: 60px 40px 60px 0;
    }

    .need-2 .need__text {
        padding: 0 0 60px 0;
    }

    .need-3 .need__text {
        padding: 20px 0 20px 0;
    }

    .h3-big {
        left: 63px;
    }

    .history__foto::after {
        width: 80%;
    }

    .calc__inner {
        display: block;
    }

    .calc__inner img {
        width: 80%;
        margin: 0 auto;
    }

    .calc__text {
        margin-top: 40px;
    }

    .capability .container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }

    .capability__item {
        padding: 20px;
        max-width: 100%;
    }

    .buy-2 .capability__item {
        padding: 0;
        max-width: 100%;
    }

    .button__table .table__cell-2 img {
        display: block;
        width: 100%;
        height: auto;
    }

    .need .need__text .dark-btn {
        margin: 0 auto;
    }

    .calc-2 a {
        margin-top: 40px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (max-width : 768px) {
    /* .header__top {
        grid-template-columns: 300px 1fr;
    } */

    .menu ul {
        width: 250px;
    }

    .header__video,
    .header__not-video {
        width: 100%;
    }

    .history .container {
        display: block;
    }

    .history__text {
        padding-right: 0;
    }

    .calc__item {
        margin-top: 40px;
        padding: 20px 20px 20px 90px;
    }

    .calc__item img {
        width: 80px;
        top: -10px;
        left: -8px;
        border: 10px solid #fff;
    }

    .history-2 .history__foto {
        margin-top: 60px;
    }

    .command__inner {
        grid-template-columns: 1fr;
    }

    .try .container {
        grid-template-columns: 1fr;
        grid-row-gap: 60px;
    }

    .breadcrumbs {
        margin-top: 40px;
        text-align: left;
    }

    .command .h3.h3-light,
    .system .h3.h3-light {
        line-height: 45px;
    }

    .command .h3.h3-light::before,
    .system .h3.h3-light::before {
        width: 80%;
        left: 0;
    }

    .history-3 .dark-btn {
        margin-top: 60px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (max-width : 576px) {
    .header__top {
        grid-template-columns: 360px 1fr;
    }

    .header__lang {
        top: -10px;
    }

    .logo-wrap img {
        width: 250px;
    }

    .h3-light::before, .h3-dark::before {
        width: 90%;
        left: 0px;
    }

    .calc-2 .h3-light {
        line-height: 40px;
    }

    .purpose__item {
        grid-template-columns: 75px 1fr;
    }

    .h3-big {
        width: 100%;
        left: 0;
    }

    .h3-big::before {
        width: 80%;
        left: 0;
    }

    .need__text {
        padding: 60px 0 60px 0;
    }

    .need__tittle p {
        padding: 70px 20px 0 20px;
    }

    .calc__inner img {
        width: 100%;
    }

    .capability .container {
        display: block;
    }

    .capability__item {
        margin: 0 auto;
        margin-top: 30px;
        max-width: 310px;
    }

    .capability__item:first-child {
        margin-top: 0;
    }

    .history-3 .history__foto::after {
        content: none;
    }

    .capability.buy-2 .container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }

    .instruction-page .h3,
    .commands-page .h3 {
        display: block;
        margin-left: 15px;
        margin-right: 15px;
    }

    .instruction-page .h3.h3-light::before,
    .instruction-page .h3.h3-dark::before,
    .commands-page .h3.h3-dark::before {
        width: 80%;
        height: 100%;
        left: 0;
    }

    .indicator__table .table__cell-1,
    .button__table .table__cell-1 {
        width: 115px;
    }

    
}

@media only screen and (max-width : 480px) {
    body {
        font-size: 16px;
        line-height: 28px;
    }

    .h1 {
        font-size: 28px;
        line-height: 45px;
    }

    .h3 {
        padding: 8px;
        font-size: 20px;
    }

    .h3-big {
        line-height: 40px;
        padding: 8px 20px 8px 20px;
    }

    .light-btn,
    .dark-btn {
        width: 140px;
        height: 50px;
        line-height: 50px;
    }

    .header__lang {
        margin-left: 25px;
    }

    .purpose__item {
        grid-template-columns: 1fr;
    }

    .purpose__num {
        display: none;
    }

    .history__foto {
        margin-top: 40px;
        padding: 15px 15px 25px 15px;
    }

    .button__table .table__cell-2 img {
        display: none;
    }

    .table__cell-2 ul,
    .commands .command ul {
        padding: 0;
    }

    .indicator__table,
    .button__table {
        width: 450px;
        background-color: #fff;
        /* overflow-x: scroll; */
    }

    .indicator__table-wrap,
    .button__table-wrap {
        overflow-x: auto;
    }

    .command .h3.h3-light {
        line-height: 32px;
    }
}

@media only screen and (max-width : 350px) {
    .h1 {
        font-size: 25px;
        line-height: 40px;
    }
}

@media only screen and (max-width : 320px) {
    .header__top {
        grid-template-columns: 240px 1fr;
    }

    .logo-wrap img {
        width: 210px;
    }

    .header__lang {
        display: block;
        margin-top: 20px;
        margin-left: 0;
    }

    .header__video {
        border: 8px solid rgba(89, 94, 104, 0.5);
    }

    .calc__item {
        padding: 15px;
    }

    .calc__item img {
        display: none;
    }
}