body {
    font-family: Geneva, Verdana, Tahoma, sans-serif;
    background: linear-gradient(to bottom, #b0bfc0, #fcfdfd);
    background-attachment: fixed;
    background-position: center;
    background-size: 100%;
    hyphens: auto;
}

/*компьютер */
@media (orientation: landscape) {
    a {
        text-decoration: none;
        color: #000;
    }
.vstyazke
{
    font-weight: bolder;
}
    h1 {
        font-family: Geneva, Verdana, Tahoma, sans-serif;
        color: black;
        font-size: 2.2vw;
    text-align: center;
    }

    h2 {
        font-family: Geneva, Verdana, Tahoma, sans-serif;
        color: rgb(71, 71, 71);
        font-size: 2vw;
        text-align: center;
    }

    .content {
        display: grid;
        grid-template-rows: 0.7fr 15fr 0.5fr;
        grid-template-columns: 25% auto;
        gap: 2vw;
    }

    .header {
        grid-column-start: 1;
        grid-row-start: 1;
        grid-column-end: 3;
        grid-row-end: 2;
        display: grid;
        grid-template-columns: 10vw auto 15vw;
        justify-items: center;
        align-items: center;
    }

    .logotype {
        height: 4vw;
        width: auto;
    }

    .zagolovok {
        display: flex;
    }

    .headcall {
        display: flex;
        flex-wrap: wrap;
        height: 3vw;
    }

    .call_img {
        height: 2.5vw;
        padding: 0 0.5vw 0 0.5vw;
    }

    .call {
        font-size: 1vw;
    }

    .menu {
        background: rgba(245, 245, 245, 0.7);
        grid-column-start: 1;
        grid-row-start: 2;
        grid-column-end: 2;
        grid-row-end: 3;
        display: flex;
        flex-direction: column;
        border-radius: 1vw;
        padding: 1vw 1vw 1vw 0vw;
        margin-left: 5vw;
    }

    ul {
        list-style-type: none;
        font-size: 1.2vw;
        position: sticky;
        top: 1vw;
    }

    li {
        border-radius: 0.3vw;
        background: #b0bfc0;
    }

    .uslugi_li {
        background: rgb(193, 185, 169);
    }

    .dropdown {
        background: none;
    }

    .li_1,
    .vidy,
    .li_2 {
        display: flex;
        background: rgb(231, 231, 231);
        margin: 0.1vw 0.1vw 0.5vw 0.1vw;
        padding: 0.2vw;

    }

    .li_1:hover,
    .vidy:hover,
    .li_2 :hover {
        background: rgb(222, 222, 222);
    }

    .main {
        grid-column-start: 2;
        grid-row-start: 2;
        grid-column-end: 3;
        grid-row-end: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 3vw;
        margin-left: 3vw;

    }

    .main_i {
        background: rgba(245, 245, 245, 0.7);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        border-radius: 1vw;
        margin-bottom: 4vw;
        font-size: 1.3vw;
        line-height: 1.3em;

        >img {
            width: 50%;
            height: auto;
            margin: 2vw;
            border-radius: 1vw;
        }
    }

    .text {
        padding: 3vw;
    }

    .spisok {
        text-align: left;
        margin-left: 5vw;
    }

    #pricetable {
        margin: 2vw 2vw 2vw 2vw;
    }

    .td2 {
        border: 1px solid grey;
        border-radius: 5px;
        padding: 4px 4px 4px 4px;
        background-color: rgb(231, 231, 231);
    }

    .td1 {
        background-color: rgb(231, 231, 231);
        font-size: 1.2em;
        font-weight: bolder;
        text-align: center;
        border-radius: 5px;
    }

    .footer {
        background: rgba(238, 238, 238, 0.7);
        grid-column-start: 1;
        grid-row-start: 3;
        grid-column-end: 3;
        grid-row-end: 4;
        border-radius: 1vw;
        padding: 1vw;
        margin-left: 5vw;
        margin-right: 5vw;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        font-size: 1vw;
    }

    .call_down {
        display: none;
    }
}



/* смартфоны */
@media (orientation: portrait) {
    a {
        text-decoration: none;
        color: #000;
    }

    h1 {
        font-family: Geneva, Verdana, Tahoma, sans-serif;
        color: black;
        font-size: 4.5vw;
        text-align: center;
    }

    h2 {
        font-family: Geneva, Verdana, Tahoma, sans-serif;
        color: rgb(49, 49, 49);
        font-size: 5vw;
        text-align: center;
    }

    .content {
        display: flex;
        flex-direction: column;
    }

    .header {
        display: flex;
        flex-direction: row;
        align-items: center;
        align-content: center;
    }

    .logotype {
        height: 6vw;
        width: auto;
        padding: 0.5vw 1vw 0.5vw 1vw;
    }

    .zagolovok {
        display: flex;
        padding: 0 2vw 0 2vw;
        text-align: center;
    }

    .headcall {
        display: none;
    }

    .menu {
        position: sticky;
        top: 0;
        z-index: 5;
        background: none;
    }

    ul {
        background:rgb(231, 231, 231);
        border-radius: 1vw;
        margin: 0 2vw 2vw 2vw;
        position: sticky;
        top: 0;
        z-index: 5;
        list-style-type: none;
        padding: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-top: 1vw;
        padding-bottom: 1vw;
    }

    .ul_2 {
        display: none;
    }

    .dropdown:hover .ul_2 {
        display: block;
        position: absolute;
        top: 100%;
      left: 0;

    }

    .li_1:hover .ul2 {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 40px;
    }

    .li_1 {
        list-style-type: none;
        background: rgb(231, 231, 231);
        padding: 1.5vw;
        border-radius: 1vw;
        font-size: 3vw;
        font-weight: bold;
    }

    .dropdown {
        background: rgb(231, 231, 231);
        ;
        padding: 1.5vw;
        border-radius: 1vw;
        font-size: 3vw;
        font-weight: bold;
    }

    .li_2 {
        padding: 1.5vw;
        margin: 0.5vw;
        background: rgb(225, 225, 225);
        border-radius: 1vw;
        border: 0.3vw solid rgb(101, 101, 101);
        font-size: 3vw;
    }

    .vidy {
        background: rgb(231, 231, 231);
    }

    .main {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 2vw;
        margin-right: 2vw;

    }

    .main_i {
        background: rgba(245, 245, 245, 0.7);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 1vw;
        border-radius: 3vw;
        margin-bottom: 4vw;
        font-size: 4.5vw;
        line-height: 1.3em;

        >img {
            width: 80%;
            height: auto;
            margin: 2vw;
            border-radius: 5vw;
        }
    }

    .text {
        padding: 3vw;
    }
    #vstyazke
    {
      font-size: 20vw;
    }
    .spisok {
        text-align: left;
        margin-left: 5vw;
    }

    #pricetable {
        margin: 2vw 2vw 2vw 2vw;
    }

    .td2 {
        border: 1px solid grey;
        border-radius: 5px;
        padding: 4px 4px 4px 4px;
        background-color: rgb(231, 231, 231);
    }

    .td1 {
        background-color: rgb(231, 231, 231);
        font-size: 1.2em;
        font-weight: bolder;
        text-align: center;
        border-radius: 5px;
    }

    .call_down {
        visibility: visible;
        z-index: 2;
        display: table-row;
        position: fixed;
        bottom: 6%;
        left: 5%;
    }

    .call_down_call {
        display: table-cell;
        padding-right: 4vw;
    }

    .call_down_watsapp {
        display: table-cell;
        padding: 0;
    }

    .call_down_post {
        display: table-cell;
        padding-left: 5vw;
    }

    .call_down_img {
        width: 8vw;

    }

    .footer {
        background: rgba(238, 238, 238, 0.7);
        border-radius: 1vw;
        padding: 3vw;
        margin: 2vw 2vw 0 2vw;
        font-size: 1.5vw;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        height: 3%;
    }
}