@media only screen and (max-width: 1800px) {
    
}

@media only screen and (max-width: 1600px) {
    #menu {
        padding-right: 20px;
    }
    #menu {
        right: -920px;
        width: 600px;
    }
}

@media only screen and (max-width: 1550px) {
    
}

@media only screen and (max-width: 1366px) {
    .midside {
        padding: 0 50px;
    }
}

@media only screen and (max-width: 1200px) {
    #hero-slider .slide {
        min-height: 500px;
        height: 100vh;
        padding-top: 0;
    }
    #hero-slider .slide .slide-content {
        position: relative;
        left: 0;
        transform: translateX(0);
    }
}

@media only screen and (max-width: 1024px) {
    :root {
        --container: 900px;
    }
    #header {
        padding-top: 30px;
    }
    #header > .header-in > .logo > img {
        width: 116px;
        height: 28px;
    }
    #menu {
        padding-top: 30px;
        padding-right: 60px;
    }
    #menu .menu-middle .menu-items .menu-item {
        margin-bottom: 30px;
    }

    .midside {
        padding: 0 20px;
    }
    .section-mg {
        margin-bottom: 100px;
    }

    /* Home */
    #hero-slider .slide .slide-content > .slide-title {
        max-width: 500px;
        font-size: 36px;
        margin-bottom: 16px;
    }
    #hero-slider .slide .slide-content > .slide-descr {
        max-width: 450px;
        margin-bottom: 24px;
        font-size: 18px;
    }
    .cta-button > .cta-text {
        margin-right: 20px;
        font-size: 12px;
    }
    .square-btn {
        --btn-size: 38px;
    }
    #hero-slider .slide .slide-content .slide-numeration > .slide-num {
        font-size: 18px;
    }

    .row > .row-1 {
        min-width: 200px;
    }
    #portfolio-section .section-top {
        margin-bottom: 30px;
    }
    #portfolio-section .section-title {
        font-size: 24px;
    }
    #portfolio-section .section-descr {
        max-width: 480px;
        font-size: 16px;
    }
    #portfolio-section .slider {
        margin-bottom: 60px;
    }
    #portfolio-section .slider-title {
        font-size: 16px;
    }
    #portfolio-section .slider-control {
        gap: 20px;
    }
    .square-btn.size-m {
        --btn-size: 32px;
    }

    #about .columns .column-1 {
        min-width: 200px;
    }
    #about .columns .column-1 .section-title {
        font-size: 24px;
    }
    #about .columns .column-2 {
        margin-right: 0;
    }
    #about .columns .column-2 .section-descr {
        max-width: 644px;
        font-size: 16px;
        margin-bottom: 30px;
    }
    #about .columns .column-2 .rows {
        display: flex;
        /* flex-direction: row; */
        justify-content: space-between;
        gap: 0;
        padding-left: 0;
    }
    #about .columns .column-2 .rows .row {
        flex-basis: 50%;
    }
    #about .columns .column-2 .rows .row .side .number {
        font-size: 30px;
    }
    #about .columns .column-2 .rows .row .side .info-title {
        font-size: 12px;
    }
    #about .column-2-image {
        display: block;
        margin-bottom: 30px;
    }
    #about .columns .column-3 {
        display: none;
    }

    .banner .banner-title {
        font-size: 24px;
    }
    .banner .banner-image {
        height: 400px;
    }

    #partners .section-top {
        align-items: unset;
    }
    #partners .section-title {
        max-width: 200px;
        height: 100%;
        font-size: 24px;
        border-right: 1px solid var(--bgcolor-darker);
    }
    #partners .section-content {
        padding-left: 30px;
        border-left: none;
    }
    #partners .partners {
        max-width: 550px;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 16px;
    }

    #footer .footer-in {
        flex-direction: column;
    }
    #footer .foot-left {
        flex-basis: 100%;
        margin-bottom: 40px;
    }
    #footer .foot-right {
        grid-gap: 40px;
    }

    /* About us */
    #about-us .section-title {
        font-size: 28px;
    }
    #about-us .section-descr {
        font-size: 14px;
    }
    #about-us .slider-control {
        gap: 20px;
    }
    #about-us .company .info {
        max-width: 350px;
    }
    #about-us .company .info-title {
        font-size: 22px;
    }
    #about-us .company .info-descr {
        font-size: 14px;
    }
    #about-us .team .member .name {
        font-size: 16px;
    }
    #about-us .team .member .position {
        font-size: 10px;
    }

    /* Calculator */
    #page-calculator #header.not-main {
        margin-bottom: 30px;
    }
    #calculator {
        max-width: 900px;
        margin-bottom: 60px;
    }
    #calculator .section-top {
        margin-bottom: 60px;
    }
    #calculator .section-title {
        font-size: 24px;
    }
    #calculator .section-descr {
        font-size: 16px;
    }
    #calculator .calculator {
        margin-bottom: 60px;
        grid-gap: 20px;
    }
    #calculator .calc-column .column-title {
        margin-bottom: 30px;
        font-size: 18px;
    }
    #calculator .calc-column .column-content .option-wrapper .option-name {
        font-size: 16px;
    }
    .checkbox > span {
        --checkbox-size: 20px;
    }
    .calculator .question-mark > img {
        width: 16px;
        height: 16px;
    }
    .radio {
        --wrapper-size: 20px;
    }
    .radio > span {
        --radio-size: 10px;
    }
    #calculator .total-title {
        font-size: 20px;
    }
    #calculator .total-price {
        font-size: 28px;
    }
    #calculator .order-btn {
        margin: 0 0 0 auto;
        font-size: 16px;
        max-width: 260px;
    }

    /* Portfolio */
    #portfolio .page-title {
        margin-bottom: 40px;
        font-size: 28px;
    }
}

@media only screen and (max-width: 900px) {
    #calculator .calculator {
        grid-template-columns: repeat(3, 1fr);
        grid-row-gap: 40px;
    }
}

@media only screen and (max-width: 800px) {
    #menu {
        padding-right: 20px;
    }
    #partners .partners {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 768px) {
    #portfolio .page-menu {
        flex-wrap: wrap;
        gap: 10px;
    }
    #portfolio .page-menu > .menu-item {
        width: 100%;
        font-size: 16px;
    }

    /* Fullstory */
    #other .other-title {
        font-size: 28px;
    }

    /* About us */
    #about-us .company {
        margin-bottom: 60px;
    }
    #about-us .team .members {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width: 600px) {
    /* About us */
    #about-us .team .members {
        grid-template-columns: repeat(2, 1fr);
    }
    #calculator .calculator {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 480px) {
    .shortstory.short-type-2 > .short-in > .short-info > .short-title {
        font-size: 14px;
    }
    .section-mg {
        margin-bottom: 90px;
    }

    /* Header */
    #menu {
        padding-left: 20px;
    }
    #header.not-main {
        margin-bottom: 50px;
    }
    #header > .header-in > .logo > img {
        width: 120px;
        height: auto;
    }

    /* Hero */
    #hero-slider .slide {
        max-height: 670px;
    }
    #hero-slider .slide .slide-content > .slide-title {
        margin-bottom: 20px;
        font-size: 24px;
    }
    .ru #hero-slider .slide .slide-content > .slide-title {
        font-size: 22px;
    }
    #hero-slider .slide .slide-content > .slide-descr {
        font-size: 15px;
    }
    #hero-slider .slide .slide-content .cta-text {

    }
    .cta-button > .cta-text {
        margin-right: 20px;
        font-size: 12px;
    }
    .square-btn {
        --btn-size: 32px;
    }
    #hero-slider .slide .slide-content .slide-numeration > .slide-num {
        font-size: 14px;
    }

    /* Portfolio */
    #portfolio-section .section-top {
        flex-direction: column;
        margin-bottom: 30px;
    }
    #portfolio-section .section-title {
        font-size: 28px;
        padding-right: 0;
        margin-bottom: 10px;
    }
    #portfolio-section .section-title::after {
        content: '';
        display: block;
        margin-top: 6px;
        width: 70%;
        height: 1px;
        background: var(--bgcolor-darker);
    }
    #portfolio-section .section-descr {
        padding-left: 0;
        font-size: 16px;
        border-left: none;
    }
    #portfolio-section .section-content {
        flex-direction: column-reverse;
        align-items: normal;
    }
    #portfolio-section .slider {
        margin-bottom: 50px;
    }
    #portfolio-section .slider-title {
        font-size: 12px;
    }
    #portfolio-section .slider-control {
        gap: 8px;
    }
    .square-btn.size-m {
        --btn-size: 32px;
    }
    #portfolio-section .section-cta {
        margin-top: 20px;
    }
    #portfolio-section .section-cta .cta {
        justify-content: flex-end;
    }

    /* About */
    #about {
        padding: 0;
    }
    #about .column-1,
    #about .columns .column-2 .section-descr,
    #about .columns .column-2 .rows {
        padding: 0 20px;
    }
    #about .columns {
        flex-direction: column;
    }
    #about .column-1 .cta {
        display: none;
    }
    #about .columns .column-1 .section-title {
        font-size: 28px;
        padding-right: 0;
        margin-bottom: 10px;
    }
    #about .columns .column-1 .section-title::after {
        content: '';
        display: block;
        margin-top: 6px;
        width: 70%;
        height: 1px;
        background: var(--bgcolor-darker);
    }
    #about .columns .column-2 {
        margin-right: 0;
    }
    #about .columns .column-2 .section-descr {
        margin-bottom: 30px;
        font-size: 16px;
        border-left: none;
    }
    #about .columns .column-2 .rows {
        flex-direction: column;
    }
    #about .columns .column-2 .rows .row .side.right {
        padding-left: 0;
    }
    #about .columns .column-2 .rows .row .side .number {
        justify-content: center;
    }
    #about .columns .column-2 .rows .row .side .info-title {
        display: block;
        padding: 0 3px;
        text-align: center;
        font-size: 13px;
    }
    #about .column-2-image {
        display: block;
        margin-bottom: 30px;
    }
    #about .column-3 {
        display: none;
    }

    /* Banner */
    .banner .banner-image {
        height: 400px;
        background-position: 35%;
    }
    .banner .banner-title {
        font-size: 28px;
    }
    .hy .banner .banner-title {
        font-size: 23px;
    }

    /* Partners */
    #partners .section-top {
        align-items: normal;
        flex-direction: column;
    }
    #partners .section-title {
        max-width: none;
        font-size: 28px;
        padding-right: 0;
        margin-bottom: 20px;
        border-right: none;
    }
    #partners .section-content {
        justify-content: center;
        padding-left: 0;
        border-left: none;
    }
    #partners .partners {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 16px;
    }
    #partners .partners > .partner > .hovered > .hovered-text {
        font-size: 12px;
    }

    /* Footer */
    #footer .footer-in {
        flex-direction: column;
        margin-bottom: 40px;
    }
    #footer .foot-left {
        width: 100%;
        flex-basis: 100%;
        margin-bottom: 40px;
    }
    #footer .foot-right {
        width: 100%;
        flex-basis: 100%;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 40px;
    }
    #footer .foot-logo {
        margin-bottom: 20px;
    }
    #footer .foot-langs {
        text-align: left;
    }

    /* Calculator */
    #calculator {
        margin-bottom: 50px;
    }
    #calculator .section-top {
        margin-bottom: 50px;
        text-align: left;
    }
    #calculator .section-descr {
        max-width: 280px;
        font-size: 14px;
        margin: 0;
    }
    #calculator .calculator {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 40px;
        margin-bottom: 40px;
    }
    #calculator .calc-column .column-title {
        margin-bottom: 25px;
    }
    #calculator .total {
        text-align: center;
    }
    #calculator .total-title {
        margin-bottom: 16px;
        font-size: 20px;
    }
    #calculator .total-price {
        justify-content: center;
        font-size: 30px;
    }
    #calculator .order-btn.size-l {
        display: inline-block;
        font-size: 18px;
    }
    
    /* About us */
    #about-us.midside {
        padding: 0;
    }
    #about-us > section:not(.slider) {
        padding: 0 20px;
    }
    #about-us .section-top {
        flex-direction: column;
        margin-bottom: 20px;
    }
    #about-us .section-title {
        flex-basis: 100%;
        margin-bottom: 10px;
        padding-right: 0;
        font-size: 28px;
    }
    #about-us .section-descr {
        flex-basis: 100%;
        font-size: 14px;
    }
    #about-us .slider {
        margin-bottom: 20px;
    }
    #about-us .slider-control {
        gap: 10px;
    }
    #about-us .slider-info {
        margin-bottom: 10px;
        padding: 0 20px;
    }
    #about-us .slide {
        --image-height : 220px;
        min-height: var(--image-height);
    }
    #about-us .slide > img {
        height: var(--image-height);
        object-fit: cover;
    }
    #about-us .company {
        margin-bottom: 30px;
    }
    #about-us .company .info {
        margin-bottom: 20px;
    }
    #about-us .company .info-title {
        font-size: 22px;
    }
    #about-us .company .info-descr {
        font-size: 14px;
    }
    #about-us .team .members {
        grid-template-columns: repeat(1, 1fr);
        place-items: center;
    }
    #about-us .team .members .member {
        max-width: 260px;
    }
    #about-us .team .member .name {
        margin-bottom: 0px;
        font-size: 18px;
    }
    
    /* Portfolio */
    #portfolio .page-title {
        margin-bottom: 20px;
        font-size: 28px;
        text-align: left;
    }
    #portfolio .projects {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px;
    }
    #portfolio .shortstory.short-type-1 > .short-in > .short-info > .short-title {
        max-width: 150px;
    }

    /* Fullstory */
    #fullstory {
        margin-bottom: 50px;
    }
    #fullstory .cover-photo {
        min-height: auto;
        max-height: 350px;
        margin-bottom: 50px;
    }
    #fullstory .project-info {
        margin-bottom: 30px;
    }
    #fullstory .project-content {
        margin-bottom: 50px;
    }
    #fullstory .gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    #fullstory .gallery .gallery-item > a {
        display: block;
        height: 100%;
        overflow: hidden;
    }
    #fullstory .gallery .gallery-item img {
        margin-right: 0;
        border: none;
        width: 100%;
        height: 100%;
        max-height: 350px;
        object-fit: cover;
        transform: scale(1);
    }
    #fullstory .project-info > .param {
        margin-bottom: 12px;
    }
    #fullstory .project-info > .param .param-name {
        display: none;
    }
    #other .projects {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 24px;
    }
    #other .other-title {
        margin-bottom: 24px;
        font-size: 20px;
    }
}