/* ================================================1200px=================================================== */

@media (max-width: 1200px) {
    .service__img {
        width: 500px;
    }

    .gallery__main {
        grid: repeat(15, 75px) / repeat(10, 75px);
    }

}

/* ================================================1100px=================================================== */

@media (max-width: 1100px) {
    .service__img {
        width: 400px;
    }
}

/* ================================================1000px=================================================== */

@media (max-width: 1000px) {
    .service__title {
        margin: 100px 100px 0 0;
    }

    .serivice__content {
        gap: 30px;
    }

    .service__content-row {
        flex-flow: column;
    }

    .service__content-row:nth-child(2) {
        flex-flow: column-reverse;
    }

    .service__img {
        width: 600px;
    }

    .reviews__window {
        flex-flow: column-reverse;
        gap: 100px;
    }

    .contacts__main {
        flex-flow: column-reverse;
        align-items: center;
        gap: 100px;
    }

    .contacts__div {
        justify-content: end;
    }
}

/* ================================================960px==================================================== */

@media (max-width: 960px) {
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(25px);
        visibility: hidden;
        opacity: 0;
        transition: 0.25s;
    }

    .overlay--show {
        visibility: visible;
        opacity: 1;
    }

    .header__top {
        display: flex;
        position: fixed;
        height: 100%;
        top: 0;
        right: 0;
        background: url(../img/bgimg.jpg) 50% 50%;
        transform: translateX(100%);
        transition: 0.25s;
        z-index: 250;
    }

    .header__top--open {
        transform: translateX(0%);
        box-shadow: 0 0 25px 5px black;
    }

    .header__top-inner {
        display: flex;
        flex-flow: column;
        padding: 0 30px;
        height: 100%;
    }

    .header__nav-list {
        flex-flow: column;
        gap: 30px;
        font-weight: 700;
    }

    .header__nav-link {
        font-size: 20px;
        font-weight: 700;
    }

    .header__contacts-list {
        text-align: center;
    }

    .header__contacts-item {
        animation: none;
    }

    .header__contacts-link {
        font-size: 20px;
        font-weight: 700;
    }

    .header__contacts-item:first-child {
        margin-bottom: 30px;
    }

    #webapp_cover {
        display: block;
        position: absolute;
        top: 60px;
        right: 60px;
        width: 39px;
        transform: translateY(-50%) scale(1.5);
        z-index: 900;
    }

    #menu_button {
        width: 39px;
        overflow: hidden;
    }

    #menu_checkbox {
        display: none;
    }

    #menu_label {
        position: relative;
        display: block;
        height: 29px;
        cursor: pointer;
    }

    #menu_label:before,
    #menu_label:after,
    #menu_text_bar {
        position: absolute;
        left: 0;
        width: 100%;
        height: 5px;
        border-radius: 1px;
        background-color: #fff;
    }

    #menu_label:before,
    #menu_label:after {
        content: "";
        transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) left;
    }

    #menu_label:before {
        top: 0;
    }

    #menu_label:after {
        top: 12px;
    }

    #menu_text_bar {
        top: 24px;
    }

    #menu_text_bar:before {
        content: "МЕНЮ";
        position: absolute;
        top: 5px;
        right: 0;
        left: 0;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
    }

    #menu_checkbox:checked+#menu_label:before {
        left: -39px;
    }

    #menu_checkbox:checked+#menu_label:after {
        left: 39px;
    }

    #menu_checkbox:checked+#menu_label #menu_text_bar:before {
        animation: moveUpThenDown 0.8s ease 0.2s forwards,
            shakeWhileMovingUp 0.8s ease 0.2s forwards,
            shakeWhileMovingDown 0.2s ease 0.8s forwards;
    }

    @keyframes moveUpThenDown {
        0% {
            top: 0;
        }

        50% {
            top: -27px;
        }

        100% {
            top: -17px;
        }
    }

    @keyframes shakeWhileMovingUp {
        0% {
            transform: rotateZ(0);
        }

        25% {
            transform: rotateZ(-10deg);
        }

        50% {
            transform: rotateZ(0deg);
        }

        75% {
            transform: rotateZ(10deg);
        }

        100% {
            transform: rotateZ(0);
        }
    }

    @keyframes shakeWhileMovingDown {
        0% {
            transform: rotateZ(0);
        }

        80% {
            transform: rotateZ(3deg);
        }

        90% {
            transform: rotateZ(-3deg);
        }

        100% {
            transform: rotateZ(0);
        }
    }

    .no-scroll {
        overflow: hidden;
        height: 100%;
    }


    .mobile-contacts-list {
        display: flex;
        flex-flow: column-reverse;
        margin-top: 15px;
        gap: 5px;
    }

    .reviews__window-title {
        text-align: center;
    }

    .gallery__main {
        grid: repeat(22, 100px) / repeat(6, 100px);
    }

    .photo1 {
        grid-row: 1 / 4;
        grid-column: 1 / 3;
    }

    .photo2 {
        grid-row: 1 / 5;
        grid-column: 3 / 5;
    }

    .photo3 {
        grid-row: 1 / 5;
        grid-column: 5 / 7;
    }

    .photo4 {
        grid-row: 5 / 7;
        grid-column: 3 / 7;
    }

    .photo5 {
        grid-row: 4/ 8;
        grid-column: 1 / 3;
    }

    .photo6 {
        grid-row: 7 / 11;
        grid-column: 3 / 5;
    }

    .photo7 {
        grid-row: 7 / 11;
        grid-column: 5 / 7;
    }

    .photo8 {
        grid-row: 8 / 11;
        grid-column: 1 / 3;
    }

    .photo9 {
        grid-row: 11 / 14;
        grid-column: 3 / 5;
    }

    .photo10 {
        grid-row: 11 / 15;
        grid-column: 5/ 7;
    }

    .photo11 {
        grid-row: 11 / 15;
        grid-column: 1 / 3;
    }

    .photo12 {
        grid-row: 14 / 18;
        grid-column: 3 / 5;
    }

    .photo13 {
        grid-row: 11 / 15;
        grid-column: 5 / 7;
    }

    .photo14 {
        grid-row: 15 / 19;
        grid-column: 1 / 3;
    }

    .photo15 {
        grid-row: 18 / 22;
        grid-column: 3 / 5;
    }

    .photo16 {
        grid-row: 15 / 19;
        grid-column: 5 / 7;
    }

    .photo17 {
        grid-row: 19 / 23;
        grid-column: 1 / 3;
    }

    .photo18 {
        grid-row: 19 / 23;
        grid-column: 5 / 7;
    }

    .photo19 {
        display: none;
    }

    .photo20 {
        grid-row: 22 / 23;
        grid-column: 3 / 5;
    }

    footer {
        display: none;
    }

}

/* ================================================700px==================================================== */

@media (max-width: 700px) {
    .header__top {
        width: 100%;
    }

    .serivice__content {
        align-items: center;
    }

    .service__title {
        text-align: center;
        margin: 100px 0 0 0;
    }

    .service__content-row {
        max-width: 500px;
    }

    .service__img {
        width: 500px;
    }

    .reviews__title {
        text-align: center;
    }

    .contacts__title {
        text-align: center;
    }

    .contacts__div-box {
        align-items: center;
        gap: 30px;
    }

    .contacts__nav-link {
        text-align: center;
    }

    .reviews__window iframe {
        width: 100%;
    }

    .map-container {
        width: 100%;
    }

    .gallery__main {
        grid: repeat(35, 100px) / repeat(4, 100px);
    }

    .photo1 {
        grid-row: 1 / 4;
        grid-column: 1 / 3;
    }

    .photo2 {
        grid-row: 1 / 5;
        grid-column: 3 / 5;
    }

    .photo3 {
        grid-row: 4 / 8;
        grid-column: 1 / 3;
    }

    .photo4 {
        grid-row: 5 / 7;
        grid-column: 3 / 5;
    }

    .photo5 {
        grid-row: 7 / 11;
        grid-column: 3 / 5;
    }

    .photo6 {
        grid-row: 7 / 11;
        grid-column: 3 / 5;
    }

    .photo7 {
        grid-row: 11 / 15;
        grid-column: 1 / 3;
    }

    .photo8 {
        grid-row: 8 / 11;
        grid-column: 1 / 3;
    }

    .photo9 {
        grid-row: 11 / 14;
        grid-column: 3 / 5;
    }

    .photo10 {
        grid-row: 15 / 19;
        grid-column: 1 / 3;
    }

    .photo11 {
        grid-row: 14 / 18;
        grid-column: 3 / 5;
    }

    .photo12 {
        grid-row: 19 / 23;
        grid-column: 1 / 3;
    }

    .photo13 {
        grid-row: 18 / 22;
        grid-column: 3 / 5;
    }

    .photo14 {
        grid-row: 23 / 27;
        grid-column: 1 / 3;
    }

    .photo15 {
        grid-row: 22 / 26;
        grid-column: 3 / 5;
    }

    .photo16 {
        grid-row: 27 / 31;
        grid-column: 1 / 3;
    }

    .photo17 {
        grid-row: 26 / 30;
        grid-column: 3 / 5;
    }

    .photo18 {
        grid-row: 30 / 34;
        grid-column: 3 / 5;
    }

    .photo19 {
        display: block;
        grid-row: 31 / 34;
        grid-column: 1 / 3;
    }

    .photo20 {
        grid-row: 34 / 36;
        grid-column: 1 / 5;
    }
}

@media (max-height: 700px) and (orientation: landscape) {

    .header__logo {
        position: absolute;
        top: 30px;
        left: 30px;
    }

    .header__nav-list {
        margin-top: 30px;
        gap: 15px;
    }

    .header__top-inner {
        gap: 30px;
    }
}

/* ================================================600px==================================================== */

@media (max-width: 600px) {

    .container {
        padding: 0 15px;
    }

    .header__title {
        font-size: 64px;
    }

    .gallery__h2 {
        font-size: 48px;
    }

    .service__content-row {
        max-width: 400px;
    }

    .service__img {
        width: 400px;
    }

    .service__title {
        font-size: 48px;
    }

    .reviews__title {
        font-size: 48px;
    }

    .contacts__title {
        font-size: 48px;
    }

}

/* ================================================500px==================================================== */

@media (max-width: 500px) {

    #webapp_cover {
        top: 50px;
        right: 50px;
    }

    .header__title {
        font-size: 48px;
    }

    .gallery__h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 24px;
    }

    .service__content-row {
        max-width: 400px;
    }

    .service__img {
        width: 100%;
    }

    .service__title {
        font-size: 32px;
    }

    .reviews__title {
        font-size: 32px;
    }

    .contacts__title {
        font-size: 32px;
    }

    .gallery__main {
        grid: repeat(70, 150px) / repeat(2, 150px);
    }

    .photo:hover {
        transform: none;
        border: none;
    }

    .photo1 {
        grid-row: 1 / 4;
        grid-column: 1 / 3;
    }

    .photo2 {
        grid-row: 4 / 8;
        grid-column: 1 / 3;
    }

    .photo3 {
        grid-row: 8 / 12;
        grid-column: 1 / 3;
    }

    .photo4 {
        grid-row: 12 / 14;
        grid-column: 1 / 3;
    }

    .photo5 {
        grid-row: 14 / 18;
        grid-column: 1 / 3;
    }

    .photo6 {
        grid-row: 18 / 22;
        grid-column: 1 / 3;
    }

    .photo7 {
        grid-row: 22 / 26;
        grid-column: 1 / 3;
    }

    .photo8 {
        grid-row: 26 / 29;
        grid-column: 1 / 3;
    }

    .photo9 {
        grid-row: 29 / 32;
        grid-column: 1 / 3;
    }

    .photo10 {
        grid-row: 32 / 36;
        grid-column: 1 / 3;
    }

    .photo11 {
        grid-row: 36 / 40;
        grid-column: 1 / 3;
    }

    .photo12 {
        grid-row: 40 / 44;
        grid-column: 1 / 3;
    }

    .photo13 {
        grid-row: 44 / 48;
        grid-column: 1 / 3;
    }

    .photo14 {
        grid-row: 48 / 52;
        grid-column: 1 / 3;
    }

    .photo15 {
        grid-row: 52 / 56;
        grid-column: 1 / 3;
    }

    .photo16 {
        grid-row: 56 / 59;
        grid-column: 1 / 3;
    }

    .photo17 {
        grid-row: 59 / 63;
        grid-column: 1 / 3;
    }

    .photo18 {
        grid-row: 63 / 67;
        grid-column: 1 / 3;
    }

    .photo19 {
        grid-row: 67 / 70;
        grid-column: 1 / 3;
    }

    .photo20 {
        grid-row: 70 / 71;
        grid-column: 1 / 3;
    }
}

/* ================================================400px==================================================== */

@media (max-width: 400px) {

    #webapp_cover {
        right: 40px;
    }

    .header__title {
        font-size: 40px;
    }

    .header__p-1 {
        font-size: 18px;
    }

    .header__p-2 {
        font-size: 18px;
    }

    .mobile-contacts-item {
        font-size: 16px;
    }

    h3 {
        font-size: 24px;
    }

    .gallery__h2 {
        font-size: 24px;
    }

    .service__content-row {
        max-width: 300px;
    }

    .service__img {
        width: 100%;
    }

    .service__title {
        font-size: 32px;
    }

    .reviews__title {
        font-size: 32px;
    }

    .contacts__title {
        font-size: 32px;
    }
}

/* ================================================350px==================================================== */

@media (max-width: 350px) {

    .gallery__main {
        grid: repeat(70, 100px) / repeat(2, 100px);
    }

}