:root {
    --orange: #FFC107;
    --cyan-1: #4AA5FF;
    --cyan-2: #B0D5FB;
    --cyan-light: #CDE4FA;
    --green: #43B51F;
    --blue: #1616D3;
    --gray-dark: #2F2F2F;
    --gray: #545E5F;
    --gray-light-1: #ECF6F8;
    --gray-light-2: #ECF3F4;
    --white: #fff;
    --black: #000;

    --height-of-fixed-line: 36px;   /* высота фиксированной полосы сверху */
    --map-width-desktop: 1000px;

    --input-width-desktop: 620px;
    --input-width-mobile: 840px;
}

body {
    margin: 0;
    font-family: 'Roboto', Helvetica, sans-serif;
    box-sizing: border-box;   
}

div.wrapper {
    margin-left: auto;
    margin-right: auto;
    background-color: var(--white);
}

header {
    background-color: var(--gray-light-1);
}

div.with-fixed-line {
    /* height: var(--height-of-fixed-line); */
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 5000;
}

/* флекс-полоса */
div.fixed-flex {
    background-color: var(--gray-dark);
    width: 100%;
    height: var(--height-of-fixed-line);
    display: flex;
    flex-direction: row;
}
/* растягивающиеся */
div.growable {
    flex-grow: 1;
}
.fixed-flex div.separator {
    max-width: 10px;
    flex-grow: 1;
    flex-shrink: 1;
}

div.top-switch {
    background-color: #ECF6F8;
}

div.button span {
    display: inline-block;
    height: var(--height-of-fixed-line);
    line-height: var(--height-of-fixed-line);
    vertical-align: middle;
    color: var(--black);
}

/* курсивые плейсхолдеры */
::-webkit-input-placeholder {
    font-style: italic;
}    footer div.bottom-wide
:-moz-placeholder {
    font-style: italic;  
}
::-moz-placeholder {
    font-style: italic;  
}
:-ms-input-placeholder {  
    font-style: italic; 
}

a.link-no-decor {
    color: var(--black);
    text-decoration: none;
}

/* выпадающий список */ 
textarea {
    resize: none;
}

div.with-dropdown {
    position: relative;
    margin-bottom: 15px !important;
}
/* div.with-dropdown div.dropdown-content-show, */
div.with-dropdown div.dropdown-content {
    position: absolute;
    top: 57px;
    width: calc(var(--input-width-desktop) + 12px);
    height: 230px;
    overflow-y: scroll;
    box-sizing: border-box;
    border: 1px solid #ddd;
    background-color: var(--white);
    z-index: 1;
    display: block;
}
.dropdown-content div {
    box-sizing: border-box;
    border: 1px solid #ddd;
    font-size: 18px;
    padding: 2px;
    cursor: pointer;
}
/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content div:hover {
    background-color: #bbb;
}

footer .all-rights-reserverd {
    text-align: center; 
    position: absolute; 
    font-size: 14px;
}

footer img.qr_code {
    object-fit: contain;
    height: 123px;
    width: 123px;
}

/* скрываем всё, пока прогружается сайт */
div#hide-on-load {
    position: fixed;    /* Div будет "прилипать" к экрану */
    z-index: 8000;      /* Максимальное значение z-индекса */
    top: 0;             /* Опционально: разместить div в верхней части окна браузера */
    left: 0;            /* Опционально: разместить div в левой части окна браузера */
    width: 100%;
    height: 100%;
    background-color: #fff;
} 

/* размеры крутящейся штучки */
div#hide-on-load div,
div#hide-on-load img
{
    width: 400px;
    height: 300px;
}
/* положение */
div#hide-on-load div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div#hide-on-load img {
    object-fit: contain;
    object-position: center center;
}

/* карта */
div#map-container {
    position: fixed;    /* Div будет "прилипать" к экрану */
    z-index: 7000;      /* Максимальное значение z-индекса */
    top: 0;             /* Опционально: разместить div в верхней части окна браузера */
    left: 0;            /* Опционально: разместить div в левой части окна браузера */
    width: 100%;
    height: 100%;
    background-color: rgba(90, 90, 90, 0.5);
}

.map-hidden {
    display: none;
}

.map-active {
    display: flex;
}

/* десктоп версия */
@media screen and (min-width: 1281px) and (orientation: landscape) {

section.container-1200 {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

    div.with-fixed-line {
        height: var(--height-of-fixed-line);
    }
    /* блоки в фиксированной полоске */
    /* крайние */
    div.fixed-separator {
        width: 20px;
        flex-basis: auto;
    }
    /* кнопки-ссылки */
    .fixed-flex a {
        display: inline-block;
        width: 200px;
        flex-basis: auto;
        height: var(--height-of-fixed-line);
        text-align: center;
        vertical-align: middle;        
    }
    .fixed-flex .join,
    .fixed-flex .lk {
        font-size: 20px;
        font-weight: 600;
    }
    .fixed-flex .join {
        background-color: var(--cyan-1);

    }
    .fixed-flex .lk {
        background-color: var(--green);
    }
    /* техподдержка и иконки в фикс-полосе */
    .fixed-flex div.support-text,
    .fixed-flex div.support-contact {
        flex-basis: content;
        color: var(--white);
        font-size: 20px;
    }
    div.support-text span,
    div.support-contact span {
        display: inline-block;
        height: var(--height-of-fixed-line);
        line-height: var(--height-of-fixed-line);
        vertical-align: middle;
        text-align: center;
    }
    div.phone-icon {
        flex-basis: auto;
        width: var(--height-of-fixed-line);
        height: var(--height-of-fixed-line);
    }

    img.phone-icon {
        object-fit: contain;
        width: 22px;
        height: 22px;
        margin-top: calc((var(--height-of-fixed-line) - 20px)/2);
        margin-right: 10px;
    }

    .icon-active {
        display: none;
    }
    .icon-inactive {
        display: block;
    }

    div.fixed-flex div.support-contact:hover .icon-active {
        display: block;
    }
    div.fixed-flex div.support-contact:hover .icon-inactive {
        display: none;
    }

    div.fixed-flex div.support-contact:hover span {
        color: rgb(74, 165, 255);
    }

    .support-contact a.narrow {
        width: 50px !important;
    }

    /* блоки под фиксированной полоской */
    div.top-wide {
        background-color: var(--gray-light-1);
        height: 200px;
        display: flex;
        flex-direction: row;
        position: relative;
    }
    div.top-wide a.three-buttons {
        display: block;
        padding-top: 40px;
        width: 166px;
        flex-basis: auto;
        font-size: 20px;
        color: #000;
        background-color: transparent;
    }
    div.top-wide a.three-buttons span {
        text-align: center;
        display: inline-block;
        width: 166px;
    }
    div.top-wide a.three-buttons img {
        object-fit: contain;
        height: 95px;
        width: 112px;
        margin-left: auto;
        margin-right: auto;
    }
    div.top-wide .top-wide-fixed {
        width: 440px;
        flex-basis: auto;
    }
    div.top-wide .growable {
        min-width: 10px;
    }
    
    /* общий вид секции */
    section {
        width: 100%;
        overflow: hidden;
    }
    /* подрашенная секция */
    section.colored {
        background-color: var(--gray-light-1);
    }

    /* область верхнего логотипа */
    div.top-wide div.logo-area {
        position: absolute;
        left: 24px;
        top: 48px;
    }
    div.logo-area img {
        object-fit: contain;
        width: 100px;
        height: 100px;
    }
    div.text-large,
    div.text {
        position: absolute;
        font-weight: 500;
        left: 140px;
        color: var(--gray-dark);
    }

    div.text-large {
        font-size: 24px;
        top: 70px;
    }

    div.text {
        font-size: 20px;
        top: 95px;
    }

    /* переключение кнопок при наведении мыши */
    .three-buttons .icon-inactive,
    .three-buttons:hover .icon-active {
        display: block;
    }

    .three-buttons:hover .icon-inactive,
    .three-buttons .icon-active {
        display: none;
    }


    /* блок оплатить онлайн */
    div.top-wide div.pay-form {
        width: 362px;
        height: 180px;
        font-size: 20px;
        position: absolute;
        right: 26px;
        top: 40px;
    }

    div.pay-form div.orange-line {
        background-color: var(--orange);
        text-align: center;
        height: 44px;
        margin-bottom: 14px;
    }

    div.pay-form div.under-orange-line {
        text-align: left;
        display: flex;
        flex-direction: row;
    }
    div.pay-form div.under-orange-line span {
        flex-basis: auto;
    }
    div.pay-form div.under-orange-line span.rasporka {
        flex-grow: 1;
    }

    /* div.under-orange-line span {
        display: inline-block;
        width: 172px;
        margin-right: 10px;
    } */

    div.under-orange-line input {
        height: 30px;
        width: 168px;
        font-family: 'Roboto', Helvetica, sans-serif;
        font-size: 20px;
    }

    div.with-submit-button {
        text-align: center;
        padding-top: 14px;
    }

    div.with-submit-button input {
        color: var(--gray-dark);
        background-color: var(--orange);
        width: 100%;
        height: 44px;
        font-weight: 600;
        font-size: 24px;
        border-radius: 10px;
        border-style: none;
        cursor: pointer;
    }

    /* оформление футера */
    footer {
        background-color: var(--gray-dark);
        font-family: 'Roboto', Helvetica, sans-serif;
    }

    footer div.bottom-wide {
        position: relative;
        color:#fff;
        background-color: var(--gray-dark);
        width: 100%;
        height: 260px;
        font-weight: 400;
    }

    /* логотип и текст рядом с ним */
    footer div.logo-area {
        position: absolute;
        left: 26px;
        top: 22px;
        width: 316px;
        height: 100px;
    }
    footer div.text-ooo {
        position: absolute;
        left: 140px;
        font-size: 20px;
        top: 45px;
        font-weight: 400;
        color: var(--white);
    }

    footer .all-rights-reserverd {
        left: 140px;       
        top: 95px; 
    }

    /* блок ссылок по центру */
    footer div.in-bottom-center-2,
    footer div.in-bottom-center {
        position: absolute; 
        top: 22px; 
        width: 300px; 
        left: 50%; 
        transform: translate(-50%, 0%);
        font-size: 20px; 
        line-height: 140%;
        color: white;
        text-align: center; 
    }
    footer div.in-bottom-center a {
        color: white;
    }
    footer div.in-bottom-center-2 {
        width: 38px; 
        top: 188px; 
    }
    footer div.in-bottom-center-2:hover .icon-active {
        display: block;
    }
    footer div.in-bottom-center-2:hover .icon-inactive {
        display: none;
    }

    /* блок контактов справа */
    footer div.contact-block {
        position: absolute;
        right: 26px;
        top: 22px;
        width: 360px;
        height: 200px;
        font-size: 20px;
        text-align: right;
    }
    footer div.contact-block .support-phone {
        height: 36px;
    }
    footer div.contact-block .support-phone span {
        display: inline-block;
        height: 32px;
        line-height: 32px;
        vertical-align: middle;
        font-size: 32px;
    }
    footer .support-phone .phone-icon {
        object-fit: contain;
        width: 32px;
        height: 32px;
        margin-top: 2px;        
    }

    footer div.support-contact a:hover .icon-active,
    footer div.support-phone:hover .icon-active {
        display: block;
    }
    footer div.support-contact a:hover .icon-inactive,
    footer div.support-phone:hover .icon-inactive {
        display: none;
    }
    footer div.support-phone:hover span {
        color: rgb(74, 165, 255);
    }

    footer .support-contact-2 span,
    footer .support-contact-2 {
        line-height: normal;
        
    }

    footer .support-contact-2 span {
        vertical-align: top;
        margin-bottom: 10px;
    }
    footer .support-contact-2 span.block {
        height: 150px;
        display: inline-block;
    }
    footer .support-contact-2 span.block:first-child {
        width: 65px;
    }
    footer .support-contact {
        margin: 3px 0;
    }
    footer .support-contact-2 img.phone-icon {
        width: 50px;
        height: 50px;
    }
    footer .support-contact-2 img {
        margin-left: 6px;
    }

    /* отключим подчёркивание у ссылок */
    a {
        text-decoration: none;
    }

    img.map {
        object-fit: contain;
        width: 38px;
        height: 38px;
        margin-top: 10px;
    }

    /* слайдер */
    div.slider-container {
        position: relative;
    }

    div.slider-container img {
        width: 100%;
        height: 100%;
        /* без явно указанных размеров не работает центрирование */
        object-fit: contain;
        object-position: center center;
    }

    div.slider-container div.button-container {
        position: absolute;
        width: 40px;
        height: 40px;
        top: 50%;
        transform: translate(0%, -50%);
        background-color: rgba(128, 128, 128, 0.75);
    }

    div.slider-container div.button-prev {
        left: 0;
    }

    div.slider-container div.button-next {
        right: 0;
    }

    div.button-container img.chevron {
        width: 40px;
        height: 40px;
        cursor: pointer;
    }

    img.mirrored {
        transform: scale(-1, 1); /* отражение по горизонтали */
    }

    div.slider-container div.chain-container {
        position: absolute;
        bottom: 5px;
        height: 16px;
        left: 0px;
        width: 100%;
        text-align: center;
    }

    div.chain-container div.chain-gray,
    div.chain-container div.chain {
        display: inline-block;
        background-color: rgba(255, 255, 255, 0.75);
        width: 24px;
        height: 5px;
        margin: 0 5px 10px 5px;
    }

    div.chain-container div.chain-gray {
        background-color: rgba(128, 128, 128, 0.75) !important;
    }

    /* заголовок в полосе */
    div.headline-color {
        padding: 18px 0;
        text-align: center;
        font-size: 36px;
        font-weight: 600;
    }

    /* кнопки дом/квартира/организация */
    div.plan-buttons {
        margin: 32px 0 15px 0;
        text-align: center;
    }
    div.plan-details {
        margin-top: 15px;
        text-align: center;
    }

    div.plans-container .plan {
        cursor: pointer;
        display: inline-block;
        width: 165px;
        height: 48px;
        line-height: 48px;
        font-size: 22px;
        text-align: center;
        border: 2px solid #bbb;
        border-radius: 10px;
        margin: 0 60px;
    }

    div.plans-container .active-plan {
        color: var(--cyan-1);
        border-color: var(--cyan-1);
    }


    /* рамка вокруг карточки плана */
    div.plan-details .plan-detail {
        display: inline-block;
        border: 2px solid #bbb;
        border-radius: 10px;
        width: 248px;
        height: 480px;
        margin: 0 12px;
    }

    div.plan-details .plan-detail:hover {
        border: 2px solid transparent;
        background-color: var(--cyan-2);
    }

    div.plan-details .with-margin {
        margin: 0 32px;
    }

    .inner-1 {
        border: 2px solid transparent;
        width: 248px;
        height: calc(480px - 132px);
        margin: -2px 0px 0px -2px;
    }

    .inner-2 {
        background-color: #EFEDEE;
        border: 2px solid #bbb;
        border-radius: 10px;
        width: 248px;
        height: 132px;
        margin: 0px 0px 0px -2px;
    }

    .plan-detail:hover .inner-2 {
        border: 2px solid transparent;
        background-color: var(--cyan-light);
    }

    div.plan-detail .inner-1 .text-2,
    div.plan-detail .inner-2 .text-2 {
        font-size: 26px;
        padding-top: 10px;
    }

    div.plan-detail .inner-1 .speed {
        font-weight: 600;
        font-size: 86px;
    }

    div.plan-detail .inner-1 .text-3 {
        font-size: 26px;
        margin-bottom: 32px;
    }

    div.plan-detail .inner-1 .tv,
    div.plan-detail .inner-1 .text-tv {
        padding: 0 25px;
        text-align: center;
    }

    div.plan-detail .inner-1 .text-tv {
        font-size: 26px;
    }

    div.plan-detail .inner-1 .tv {
        font-size: 50px;
        font-weight: 600;
    }

    div.plan-detail .inner-2 div {
        padding: 20px 12px;
    }

    div.plan-detail .inner-2 .price span {
        font-weight: 600;
        font-size: 32px;
    }

    div.plan-detail .inner-2 .to-connect span {
        display: inline-block;
        background-color: #4AA5FF;
        font-weight: 600;
        border-radius: 10px;
        width: 220px;
        padding-top: 5px;
        height: 35px;
        cursor: pointer;
    }

    /** что меняется при навдении мыши */
    .plan-detail:hover .inner-2 .to-connect span {
        background-color: var(--blue);
        color: white;
    }

    div.plans-note {
        text-align: center;
        font-size: 20px;
        /* padding: 50px 40px; */
        margin: 50px auto;
        width: 990px;
    }


    /* элементы формы */
    div.form-container {
        padding: 33px 10px 30px 35px;
        width: 1080px;
        margin-left: auto;
        margin-right: auto;
        font-size: 24px;
        position: relative;
        /* vertical-align: top; */
    }

    div.form-container div.form-element {
        margin-bottom: 20px;
        line-height: normal;
    }

    div.form-note {
        text-align: left;
        font-size: 20px;
        margin: 30px 0px 30px 0px;
    }

    div.with-dropdown div.dropdown-content {
        left: 0px;
    }

    textarea,
    div.form-container input, 
    div.form-container select {
        font-size: 20px;
        padding: 4px;
        font-family: 'Roboto', Helvetica, sans-serif;
    }

    textarea {
        width: calc(var(--input-width-desktop) + 2px);
    }
    div.form-container input {
        width: var(--input-width-desktop);
    }
    div.form-container select {
        width: calc(var(--input-width-desktop) + 12px);
    }

    div.form-container span.label {
        display: inline-block;
    }

    div.form-container span.required {
        color: red;
    }

    img.location-tag {
        object-fit: contain;
        height: 30px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: calc(var(--input-width-desktop) + 16px);
        transform: translateY(-50%);        
    }

    div.form-container input[type=checkbox] {
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }

    div.form-element-option span {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }

    div.image-container {
        position: absolute;
        top: 33px;
        right: 0px;
        overflow-y: hidden;
        width: 393px;

    }

    div.image-container img {

        object-fit: contain;
        width: 393px;
    }

    /* кнопка в форме оформления заявки */
    div.sendform-inactive,
    div.sendform-active {
        padding-top: 5px;
        font-weight: 600;
        border-radius: 10px;
        width: 220px;
        height: 35px;
        text-align: center;
        border-color: var(--orange);
        border-width: 2px;
        border-style: solid;
    }

    div.sendform-inactive {
        color: var(--gray);
        background-color: var(--white);
    }

    div.sendform-active {
        color: var(--black);
        background-color: var(--orange);
        cursor: pointer;
    }

    /* блок новостей и акций*/
    div.news-container {
        padding: 26px 30px;
        text-align: center;
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    div.news-container div.news-card {
        padding: 0 3px;
        display: inline-block;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        height: calc(223px + 40px);
    }

    div.news-card img {
        object-fit: cover;
        width: 350px;
        height: 223px;
    }

    div.news-card div.caption {
        position: absolute;
        bottom: 40px;
        left: 3px;
        width: 350px;
        height: 64px;
        line-height: 64px;
        background-color: rgba(255, 255, 255, 0.75);
    }

    div.caption span {
        display: inline-block;
        font-size: 24px;
        vertical-align: middle;
        line-height: normal;
        text-align: center;
        width: 350px;
    }

    div.news-card div.date-formatted {
        position: absolute;
        bottom: 0px;
        left: 3px;
        width: 350px;
        height: 40px;
        line-height: 40px;
    }

    div.date-formatted span {
        display: inline-block;
        font-size: 20px;
        vertical-align: middle;
        line-height: normal;
        text-align: center;
        width: 350px;    
    }

    /* блок вопросов и ответов */
    div.qa-container {
        padding: 33px;
        width: 1080px;
        margin-left: auto;
        margin-right: auto;
        font-size: 24px;
    }

    div.qa-anwers-panel,
    div.qa-group-panel div {
        background-color: var(--white);
    }

    div.qa-group-panel {
        display: inline-block;
        width: 285px;
    }

    div.qa-group {
        border: 2px #bbb solid;
        border-radius: 8px;
        margin-bottom: 16px;
        text-align: center;
        height: 84px;
        line-height: 84px;
        cursor: pointer;
    }

    div.qa-group-active {
        border: 4px var(--cyan-1) solid;
        font-weight: 600;
    }

    div.qa-group span {
        display: inline-block;
        font-size: 24px;
        vertical-align: middle;
        line-height: normal;
        width: 240px;
    }

    div.qa-anwers-panel {
        display: inline-block;
        border: 2px #bbb solid;
        border-radius: 8px;
        vertical-align: top;
        margin-left: 40px;
        width: 742px;
    }

    div.qa-paired {
        padding: 20px 0px;
        width: 682px;
        margin-left: auto;
        margin-right: auto;
        border-bottom: 2px #bbb solid;
        position: relative;
    }

    div.qa-paired:last-child {
        border-bottom: none;
    }

    div.qa-paired img {
        object-fit: contain;
        width: 22px;
        position: absolute;
        top: 23px;
        right: 20px;
        cursor: pointer;
    }

    /* ответ свёрнут - шеврон отражён вертикально */
    div.qa-paired img.minimazed-answer {
        transform: scale(1, -1); /* отражение по вертикали */
    }

    div.qa-question {
        font-weight: 600;
        font-size: 22px;
        width: 530px;
        cursor: pointer;
    }

    div.qa-answer {
        font-size: 18px;
        text-align: justify;
        margin-top: 20px;
    }

    /* карта и её контейнер */
    div.flex-container-vertical {
        width: var(--map-width-desktop);
        flex-basis: auto;
        height: 100%;
    }

    div.flex-container-before,
    div.flex-container-after {
        cursor: pointer;
        flex-grow: 1;
    }

    div#close-map,
    div#get-address {
        /* display: inline-block; */
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
        text-align: center;
        font-size: 20px;
        width: var(--map-width-desktop);
    }

    div#get-address,
    div#close-map {
        color: var(--gray-light-1);
        height: var(--height-of-fixed-line);
        vertical-align: middle;
    }
    div#close-map {
        background-color: var(--gray-dark);
    }
    div#get-address {
        background-color: var(--green);
    }

    div#map {
        width: var(--map-width-desktop);
        height: 750px;
    }

    div#address-control, 
    div#map {
        margin: auto;
    }

    div#address-control {
        position: relative;
        text-align: center;
        background-color: rgb(90, 90, 90);
        padding: 5px 0px;
        width: var(--map-width-desktop);
    }

    #address-on-map {
        width: 900px; 
        font-size: 20px;
    }

    div.flex-container-vertical {
        display: flex;
        flex-direction: column;
    }

    #map, #close-map, #address-control, #get-address {
        flex-basis: auto;
    }

    #close-map span, 
    #get-address span {
        display: inline-block;
        height: var(--height-of-fixed-line);
        line-height: var(--height-of-fixed-line);
    }

    /* немного вернёмся к форме*/
    span.map-activator {
        color: rgb(19, 128, 210);
        cursor: pointer;
        display: inline-block;
        height: 30px;
        vertical-align: middle;
        font-size: 18px;
        line-height: normal;
    }

    a.link-no-decor:hover {
        text-decoration: underline;
    }

    /* стили формления тела новости */
    div.news-body {
        padding: 33px;
        margin-left: auto;
        margin-right: auto;
        font-size: 22px;
        display: flex;
        flex-direction: row;
        /* position: relative; */
        /* min-height: 500px;     */
    }
    div.news-body-1 {
        font-size: 22px;
        padding: 33px;
    }
    div.news-body .text-part{
        flex-grow: 1;
    }

    div.news-body .img-area{
        width: 300px;
        flex-basis: auto;
    }

    div.news-body img {
        object-fit: contain;
    }

    .mobile-only {
        display: none;
    }
}

/* промежуточная */
@media screen and (max-width: 1280px) and (orientation: landscape) {

section.container-1200 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

    div.with-fixed-line {
        height: var(--height-of-fixed-line);
    }
    /* блоки в фиксированной полоске */
    /* крайние */
    div.fixed-separator {
        width: 26px;
        flex-basis: auto;
    }
    /* кнопки-ссылки */
    .fixed-flex a {
        display: inline-block;
        width: 175px;
        flex-basis: auto;
        height: var(--height-of-fixed-line);
        text-align: center;
        vertical-align: middle;        
    }
    .fixed-flex .join,
    .fixed-flex .lk {
        font-size: 14px;
        font-weight: 600;
    }
    .fixed-flex .join {
        background-color: var(--cyan-1);

    }
    .fixed-flex .lk {
        background-color: var(--green);
    }
    /* техподдержка и иконки в фикс-полосе */
    .fixed-flex div.support-text,
    .fixed-flex div.support-contact {
        flex-basis: content;
        color: var(--white);
        font-size: 14px;
    }
    div.support-text span,
    div.support-contact span {
        display: inline-block;
        height: var(--height-of-fixed-line);
        line-height: var(--height-of-fixed-line);
        vertical-align: middle;
        text-align: center;
    }
    div.phone-icon {
        flex-basis: auto;
        width: var(--height-of-fixed-line);
        height: var(--height-of-fixed-line);
    }

    img.phone-icon {
        object-fit: contain;
        width: 22px;
        height: 22px;
        margin-top: calc((var(--height-of-fixed-line) - 20px)/2);
        margin-right: 10px;
    }

    .icon-active {
        display: none;
    }
    .icon-inactive {
        display: block;
    }

    div.fixed-flex div.support-contact:hover .icon-active {
        display: block;
    }
    div.fixed-flex div.support-contact:hover .icon-inactive {
        display: none;
    }

    div.fixed-flex div.support-contact:hover span {
        color: rgb(74, 165, 255);
    }

    .support-contact a.narrow {
        width: 50px !important;
    }

    /* блоки под фиксированной полоской */
    div.top-wide {
        background-color: var(--gray-light-1);
        height: 170px;
        display: flex;
        flex-direction: row;
        position: relative;
    }
    div.top-wide a.three-buttons {
        display: block;
        padding-top: 40px;
        width: 120px;
        flex-basis: auto;
        font-size: 16px;
        color: #000;
        background-color: transparent;
    }
    div.top-wide a.three-buttons span {
        text-align: center;
        display: inline-block;
        width: 120px;
    }
    div.top-wide a.three-buttons img {
        object-fit: contain;
        height: 45px;
        width: 55px;
        margin-left: auto;
        margin-right: auto;
    }
    div.top-wide .top-wide-fixed {
        width: 440px;
        flex-basis: auto;
    }
    div.top-wide .growable {
        min-width: 1px;
    }

    .fixable {
        width: 230px !important;
        min-width: 230px;
    }

    .fixable-2 {
        width: 380px !important; 
    }
    /* .grow-disappering {
        display: none;
    } */

    /* общий вид секции */
    section {
        width: 100%;
        overflow: hidden;
    }
    /* подрашенная секция */
    section.colored {
        background-color: var(--gray-light-1);
    }

    /* область верхнего логотипа */
    div.top-wide div.logo-area {
        position: absolute;
        left: 24px;
        top: 42px;
    }
    div.logo-area img {
        object-fit: contain;
        width: 50px;
        height: 50px;
    }
    div.text-large,
    div.text {
        position: absolute;
        font-weight: 500;
        left: 80px;
        color: var(--gray-dark);
    }

    div.text-large {
        font-size: 20px;
        top: 45px;
    }

    div.text {
        font-size: 16px;
        top: 65px;
    }


    /* переключение кнопок при наведении мыши */
    .three-buttons .icon-inactive,
    .three-buttons:hover .icon-active {
        display: block;
    }

    .three-buttons:hover .icon-inactive,
    .three-buttons .icon-active {
        display: none;
    }


    /* блок оплатить онлайн */
    div.top-wide div.pay-form {
        width: 325px;
        height: 180px;
        font-size: 14px;
        position: absolute;
        right: 26px;
        top: 40px;
    }

    div.pay-form div.orange-line {
        background-color: var(--orange);
        text-align: center;
        height: 44px;
        margin-bottom: 14px;
    }

    div.pay-form div.under-orange-line {
        text-align: left;
        display: flex;
        flex-direction: row;
    }
    div.pay-form div.under-orange-line span {
        flex-basis: auto;
    }
    div.pay-form div.under-orange-line span.rasporka {
        flex-grow: 1;
    }

    /* div.under-orange-line span {
        display: inline-block;
        width: 172px;
        margin-right: 10px;
    } */

    div.under-orange-line input {
        height: 22px;
        width: 150px;
        font-family: 'Roboto', Helvetica, sans-serif;
        font-size: 14px;
    }

    div.with-submit-button {
        text-align: center;
        padding-top: 10px;
    }

    div.with-submit-button input {
        color: var(--gray-dark);
        background-color: var(--orange);
        width: 100%;
        height: 30px;
        font-weight: 600;
        font-size: 16px;
        border-radius: 10px;
        border-style: none;
        cursor: pointer;
    }

    /* оформление футера */
    footer {
        background-color: var(--gray-dark);
        font-family: 'Roboto', Helvetica, sans-serif;
    }

    footer div.bottom-wide {
        position: relative;
        color:#fff;
        background-color: var(--gray-dark);
        width: 100%;
        height: 260px;
        font-weight: 400;
    }

    /* логотип и текст рядом с ним */
    footer div.logo-area {
        position: absolute;
        left: 26px;
        top: 22px;
        width: 316px;
        height: 100px;
    }
    footer div.text-ooo {
        position: absolute;
        left: 85px;
        font-size: 18px;
        top: 19px;
        font-weight: 400;
        color: var(--white);
    }
    footer .all-rights-reserverd {
        left: 86px;       
        top: 62px; 
        font-size: 10px;
    }

    /* блок ссылок по центру */
    footer div.in-bottom-center-2,
    footer div.in-bottom-center {
        position: absolute; 
        top: 22px; 
        width: 300px; 
        left: 50%; 
        transform: translate(-50%, 0%);
        font-size: 18px; 
        line-height: 140%;
        color: white;
        text-align: center; 
    }
    footer div.in-bottom-center a {
        color: white;
    }
    footer div.in-bottom-center-2 {
        width: 38px; 
        top: 170px; 
    }
    footer div.in-bottom-center-2:hover .icon-active {
        display: block;
    }
    footer div.in-bottom-center-2:hover .icon-inactive {
        display: none;
    }

    /* блок контактов справа */
    footer div.contact-block {
        position: absolute;
        right: 26px;
        top: 22px;
        width: 360px;
        height: 200px;
        font-size: 18px;
        text-align: right;
    }
    footer div.contact-block .support-phone {
        height: 36px;
    }
    footer div.contact-block .support-phone span {
        display: inline-block;
        height: 26px;
        line-height: 26px;
        vertical-align: middle;
        font-size: 26px;
    }
    footer .support-phone .phone-icon {
        object-fit: contain;
        width: 26px;
        height: 26px;
        margin-top: 2px;        
    }

    footer div.support-contact a:hover .icon-active,
    footer div.support-phone:hover .icon-active {
        display: block;
    }
    footer div.support-contact a:hover .icon-inactive,
    footer div.support-phone:hover .icon-inactive {
        display: none;
    }
    footer div.support-phone:hover span {
        color: rgb(74, 165, 255);
    }

    footer .support-contact-2 span,
    footer .support-contact-2 {
        line-height: normal;
        
    }

    footer .support-contact-2 span {
        vertical-align: top;
        margin-bottom: 10px;
    }
    footer .support-contact-2 span.block {
        height: 150px;
        display: inline-block;
    }
    footer .support-contact-2 span.block:first-child {
        width: 65px;
    }
    footer .support-contact {
        margin: 3px 0;
    }
    footer .support-contact-2 img.phone-icon {
        width: 50px;
        height: 50px;
    }
    footer .support-contact-2 img {
        margin-left: 6px;
    }

    /* отключим подчёркивание у ссылок */
    a {
        text-decoration: none;
    }

    img.map {
        object-fit: contain;
        width: 38px;
        height: 38px;
        margin-top: 10px;
    }

    /* слайдер */
    div.slider-container {
        position: relative;
    }

    div.slider-container img {
        width: 100%;
        height: 100%;
        /* без явно указанных размеров не работает центрирование */
        object-fit: contain;
        object-position: center center;
    }

    div.slider-container div.button-container {
        position: absolute;
        width: 40px;
        height: 40px;
        top: 50%;
        transform: translate(0%, -50%);
        background-color: rgba(128, 128, 128, 0.75);
    }

    div.slider-container div.button-prev {
        left: 0;
    }

    div.slider-container div.button-next {
        right: 0;
    }

    div.button-container img.chevron {
        width: 40px;
        height: 40px;
        cursor: pointer;
    }

    img.mirrored {
        transform: scale(-1, 1); /* отражение по горизонтали */
    }

    div.slider-container div.chain-container {
        position: absolute;
        bottom: 5px;
        height: 16px;
        left: 0px;
        width: 100%;
        text-align: center;
    }

    div.chain-container div.chain-gray,
    div.chain-container div.chain {
        display: inline-block;
        background-color: rgba(255, 255, 255, 0.75);
        width: 24px;
        height: 5px;
        margin: 0 5px 10px 5px;
    }

    div.chain-container div.chain-gray {
        background-color: rgba(128, 128, 128, 0.75) !important;
    }

    /* заголовок в полосе */
    div.headline-color {
        padding: 18px 0;
        text-align: center;
        font-size: 36px;
        font-weight: 600;
    }

    /* кнопки дом/квартира/организация */
    div.plan-buttons {
        margin: 32px 0 15px 0;
        text-align: center;
    }
    div.plan-details {
        margin-top: 15px;
        text-align: center;
    }

    div.plans-container .plan {
        cursor: pointer;
        display: inline-block;
        width: 165px;
        height: 48px;
        line-height: 48px;
        font-size: 22px;
        text-align: center;
        border: 2px solid #bbb;
        border-radius: 10px;
        margin: 0 50px;
    }

    div.plans-container .active-plan {
        color: var(--cyan-1);
        border-color: var(--cyan-1);
    }


    /* рамка вокруг карточки плана */
    div.plan-details .plan-detail {
        display: inline-block;
        border: 2px solid #bbb;
        border-radius: 10px;
        width: 230px;
        height: 480px;
        margin: 0 5px;
    }

    div.plan-details .plan-detail:hover {
        border: 2px solid transparent;
        background-color: var(--cyan-2);
    }

    div.plan-details .with-margin {
        margin: 0 32px;
    }

    .inner-1 {
        border: 2px solid transparent;
        width: 230px;
        height: calc(480px - 132px);
        margin: -2px 0px 0px -2px;
    }

    .inner-2 {
        background-color: #EFEDEE;
        border: 2px solid #bbb;
        border-radius: 10px;
        width: 230px;
        height: 132px;
        margin: 0px 0px 0px -2px;
    }

    .plan-detail:hover .inner-2 {
        border: 2px solid transparent;
        background-color: var(--cyan-light);
    }

    div.plan-detail .inner-1 .text-2,
    div.plan-detail .inner-2 .text-2 {
        font-size: 24px;
        padding-top: 10px;
    }

    div.plan-detail .inner-1 .speed {
        font-weight: 600;
        font-size: 86px;
    }

    div.plan-detail .inner-1 .text-3 {
        font-size: 26px;
        margin-bottom: 32px;
    }

    div.plan-detail .inner-1 .tv,
    div.plan-detail .inner-1 .text-tv {
        padding: 0 25px;
        text-align: center;
    }

    div.plan-detail .inner-1 .text-tv {
        font-size: 26px;
    }

    div.plan-detail .inner-1 .tv {
        font-size: 50px;
        font-weight: 600;
    }

    div.plan-detail .inner-2 div {
        padding: 20px 12px;
    }

    div.plan-detail .inner-2 .price span {
        font-weight: 600;
        font-size: 28px;
    }

    div.plan-detail .inner-2 .to-connect span {
        display: inline-block;
        background-color: #4AA5FF;
        font-weight: 600;
        border-radius: 10px;
        width: 206px;
        padding-top: 5px;
        height: 35px;
        cursor: pointer;
    }

    /** что меняется при навдении мыши */
    .plan-detail:hover .inner-2 .to-connect span {
        background-color: var(--blue);
        color: white;
    }

    div.plans-note {
        text-align: center;
        font-size: 18px;
        /* padding: 50px 40px; */
        margin: 50px auto;
        width: 750px;
    }

    /* элементы формы */
    div.form-container {
        padding: 33px 0px 30px 0px;
        width: 668px;
        margin-left: auto;
        margin-right: auto;
        font-size: 24px;
        position: relative;
    }

    div.form-container div.form-element {
        margin-bottom: 20px;
        line-height: normal;
    }

    div.form-note {
        text-align: left;
        font-size: 20px;
        margin: 30px 0px 30px 0px;
    }

    div.with-dropdown div.dropdown-content {
        left: 0px;
        width: 542px;
    }

    textarea,
    div.form-container input, 
    div.form-container select {
        font-size: 20px;
        padding: 4px;
        font-family: 'Roboto', Helvetica, sans-serif;
    }

    textarea {
        width: calc(var(--input-width-desktop) + 2px);
    }
    div.form-container input {
        width: var(--input-width-desktop);
    }
    div.form-container select {
        width: calc(var(--input-width-desktop) + 12px);
    }

    div.form-container span.label {
        display: inline-block;
    }

    div.form-container span.required {
        color: red;
    }

    img.location-tag {
        object-fit: contain;
        height: 30px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: calc(var(--input-width-desktop) + 16px);
        transform: translateY(-50%);      
    }

    div.form-container input[type=checkbox] {
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }

    div.form-element-option span {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }

    div.image-container {
        display: none;
    }

    /* кнопка в форме оформления заявки */
    div.sendform-inactive,
    div.sendform-active {
        padding-top: 5px;
        font-weight: 600;
        border-radius: 10px;
        width: 220px;
        height: 35px;
        text-align: center;
        border-color: var(--orange);
        border-width: 2px;
        border-style: solid;
    }

    div.sendform-inactive {
        color: var(--gray);
        background-color: var(--white);
    }

    div.sendform-active {
        color: var(--black);
        background-color: var(--orange);
        cursor: pointer;
    }

    /* блок новостей и акций*/
    div.news-container {
        padding: 26px 30px;
        text-align: center;
        width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

    div.news-container div.news-card {
        padding: 0 3px;
        display: inline-block;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        height: calc(223px + 40px);
    }

    div.news-card img {
        object-fit: cover;
        width: 350px;
        height: 223px;
    }

    div.news-card div.caption {
        position: absolute;
        bottom: 40px;
        left: 3px;
        width: 350px;
        height: 64px;
        line-height: 64px;
        background-color: rgba(255, 255, 255, 0.75);
    }

    div.caption span {
        display: inline-block;
        font-size: 24px;
        vertical-align: middle;
        line-height: normal;
        text-align: center;
        width: 350px;
    }

    div.news-card div.date-formatted {
        position: absolute;
        bottom: 0px;
        left: 3px;
        width: 350px;
        height: 40px;
        line-height: 40px;
    }

    div.date-formatted span {
        display: inline-block;
        font-size: 20px;
        vertical-align: middle;
        line-height: normal;
        text-align: center;
        width: 350px;    
    }

    /* блок вопросов и ответов */
    div.qa-container {
        padding: 33px;
        width: 880px;
        margin-left: auto;
        margin-right: auto;
        font-size: 24px;
    }

    div.qa-anwers-panel,
    div.qa-group-panel div {
        background-color: var(--white);
    }

    div.qa-group-panel {
        display: inline-block;
        width: 285px;
    }

    div.qa-group {
        border: 2px #bbb solid;
        border-radius: 8px;
        margin-bottom: 16px;
        text-align: center;
        height: 84px;
        line-height: 84px;
        cursor: pointer;
    }

    div.qa-group-active {
        border: 4px var(--cyan-1) solid;
        font-weight: 600;
    }

    div.qa-group span {
        display: inline-block;
        font-size: 24px;
        vertical-align: middle;
        line-height: normal;
        width: 240px;
    }

    div.qa-anwers-panel {
        display: inline-block;
        border: 2px #bbb solid;
        border-radius: 8px;
        vertical-align: top;
        margin-left: 40px;
        width: 542px;
    }

    div.qa-paired {
        padding: 20px 0px;
        width: 502px;
        margin-left: auto;
        margin-right: auto;
        border-bottom: 2px #bbb solid;
        position: relative;
    }

    div.qa-paired:last-child {
        border-bottom: none;
    }

    div.qa-paired img {
        object-fit: contain;
        width: 22px;
        position: absolute;
        top: 23px;
        right: 20px;
        cursor: pointer;
    }

    /* ответ свёрнут - шеврон отражён вертикально */
    div.qa-paired img.minimazed-answer {
        transform: scale(1, -1); /* отражение по вертикали */
    }

    div.qa-question {
        font-weight: 600;
        font-size: 22px;
        width: 450px;
        cursor: pointer;
    }

    div.qa-answer {
        font-size: 18px;
        text-align: justify;
        margin-top: 20px;
    }

    /* карта */
    div.flex-container-vertical {
        width: var(--map-width-desktop);
        flex-basis: auto;
        height: 100%;
    }

    div.flex-container-before,
    div.flex-container-after {
        cursor: pointer;
        flex-grow: 1;
    }

    div#close-map,
    div#get-address {
        /* display: inline-block; */
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
        text-align: center;
        font-size: 20px;
        width: var(--map-width-desktop);
    }

    div#get-address,
    div#close-map {
        color: var(--gray-light-1);
        height: var(--height-of-fixed-line);
        vertical-align: middle;
    }
    div#close-map {
        background-color: var(--gray-dark);
    }
    div#get-address {
        background-color: var(--green);
    }

    div#map {
        width: var(--map-width-desktop);
        height: 750px;
    }

    div#address-control, 
    div#map {
        margin: auto;
    }

    div#address-control {
        position: relative;
        text-align: center;
        background-color: rgb(90, 90, 90);
        padding: 5px 0px;
        width: var(--map-width-desktop);
    }

    #address-on-map {
        width: 900px; 
        font-size: 20px;
    }

    div.flex-container-vertical {
        display: flex;
        flex-direction: column;
    }

    #map, #close-map, #address-control, #get-address {
        flex-basis: auto;
    }

    #close-map span, 
    #get-address span {
        display: inline-block;
        height: var(--height-of-fixed-line);
        line-height: var(--height-of-fixed-line);
    }

    /* немного вернёмся к форме*/
    span.map-activator {
        color: rgb(19, 128, 210);
        cursor: pointer;
        display: inline-block;
        height: 30px;
        vertical-align: middle;
        font-size: 18px;
        line-height: normal;
    }

    /* скрываем всё, пока прогружается сайт */
    /* div#hide-on-load {
        position: fixed; 
        z-index: 8000;   
        top: 0;          
        left: 0;         
        width: 100%;
        height: 100%;
        background-color: #fff;
    }  */
    
    /* размеры крутящейся штучки */
    /* div#hide-on-load div,
    div#hide-on-load img
    {
        width: 400px;
        height: 300px;
    } */
    /* положение */
    /* div#hide-on-load div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    div#hide-on-load img {
        object-fit: contain;
        object-position: center center;
    } */

    a.link-no-decor:hover {
        text-decoration: underline;
    }

    /* стили формления тела новости */
    div.news-body {
        padding: 33px;
        margin-left: auto;
        margin-right: auto;
        /* display: flex;
        flex-direction: row; */
    }

    div.news-body-1 {
        padding: 33px;
    }

    div.news-body div {
        /* width: 950px; */
    }

    div.news-body .text-part{
        margin-left: auto;
        margin-right: auto;
        font-size: 20px;
        /* flex-grow: 1; */
    }

    div.news-body .img-area{
        display: none;
    }

    /* div.news-body img {
        object-fit: contain;
        width: 300px;
    } */

    .mobile-only {
        display: none;
    }
}    

/* мобильная версия */
/* mobile */
@media screen and (orientation: portrait) {

    div.with-fixed-line {
        background-color: var(--gray-dark);
    }

    /* div.fixed-flex {
        height: 140px;
    } */

    div.wrapper {
        width: 100%;
    }

    div.fixed-flex {
        display: flex;
        flex-direction: row;
        margin: 10px 0;
        height: 63px;
    }

    div.fixed-flex .fixed-separator {
        width: 30px;
        flex-basis: auto;
    }

    div.fixed-flex .growable {
        flex-grow: 1;
    }

    div.fixed-flex .menu-button {
        border: 3px solid var(--cyan-1);
        border-radius: 5px;
        width: 135px;
        flex-basis: auto;
        position: relative;
    }

    div.fixed-flex .menu-button img {
        /* object-fit: contain; */
        width: 75px;
        height: 60px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    div.fixed-flex .menu-button #dropdown_2 {
        position: absolute;
        top: 70px;
        left: -3px;
        z-index: 1;
        display: none;
        width: 600px;
        padding: 40px;

        background-color: var(--gray-dark);
    }
    
    #dropdown_2 a {
        color: white;
        text-decoration: none;
        font-size: 48px;
        line-height: 90px;
    }

    div.fixed-flex .join {
        background-color: var(--cyan-1);
        width: 350px;
        line-height: 60px;
        text-align: center;
    }

    img.bell { 
        object-fit: contain;
        height: 40px;
        transform: translate(0, 0%);
        margin-right: 10px;
    }
    div.fixed-flex .join a span {
        color: var(--black);
        text-decoration: underline;
        font-size: 32px;
    }

    /* контакты техподдержки переезжают на главную страницу */    
    #mobile-main-top {
        background-image: url("home.images/for-mobile.png");
        background-size: contain;
        background-repeat: no-repeat;
        height: 353px;
        position: relative;
    }

    #mobile-main-top img.logo {
        object-fit: contain;
        width: 154px;
        height: 160px;
        position: absolute;
        top: 75px;
        left: 229px;
        transform: translateX(-50%);
    }
    
    footer .bottom-wide .logo-area,
    #mobile-main-top .label-21-vek {
        text-align: center;
        position: absolute;
        /* left: 50%;
        transform: translateX(-50%); */
    }
    #mobile-main-top .label-21-vek {
        top: 246px;
        left: 229px;
        transform: translateX(-50%);
        font-size: 32px;
        width: 370px;
    }
    footer .bottom-wide .logo-area {
        /* top: 25px; */
        left: 190px;
        top: 180px;
        height: 120px;          /* см footer div.bottom-wide img.logo-2 */
        width: 120px;
    }

    #mobile-main-top img.phone-icon {    
        position: absolute;
        object-fit: contain;
        width: 70px;
        height: 70px;
        left: 450px;
        top: 75px;
        /* transform: translateY(-50%); */
    }

    #mobile-main-top .support-phone { 
        position: absolute;
        top: 75px;
        left: 550px;
        text-align: right;
    }

    #mobile-main-top .support-phone a {
        font-size: 40px;
        font-weight: 600;
        text-decoration: none;
        color: var(--black);
    }

    #mobile-main-top .label-for,
    #mobile-main-top .support-phone span {
        font-size: 28px;
        text-decoration: none;
        color: var(--gray-dark);
    }
    #mobile-main-top .label-for {
        position: absolute;
        top: 248px;
        transform: translateX(-10px);
    }

    #mobile-main-top img.contact-icon {
        object-fit: contain;
        width: 100px;
        position: absolute;
    }

    img.icon-tg {
        height: 74px;
        top: 165px;
        /* transform: translateX(3px); */
    }    

    img.icon-mail {
        height: 78px;
        top: 165px;
        /* transform: translateX(-3px); */
    }  

    .icon-tg {
        left: 600px;
    }    

    .icon-mail {
        left: 765px;
    }  


    /* блок оплатить онлайн */
    div.pay-form {
        background-color: rgb(247, 251, 252);
        width: 100%;
        font-size: 48px;
    }

    div.pay-form div.orange-line {
        background-color: var(--orange);
        text-align: center;
        padding-top: 12px;
        height: 100px;
    }

    div.pay-form div.under-orange-line {
        text-align: left;
        display: flex;
        flex-direction: row;
        padding: 40px 0px;
    }
    div.pay-form div.under-orange-line span {
        width: 420px;
        flex-basis: auto;
        text-align: center;
    }
    div.pay-form div.under-orange-line span.rasporka {
        flex-grow: 1;
    }

    div.pay-form input {
        font-size: 40px;
    }

    div.under-orange-line input {
        width: 410px;
        height: 62px;
        font-family: 'Roboto', Helvetica, sans-serif;
    }

    div.with-submit-button {
        text-align: center;
        padding-bottom: 40px;
    }

    div.with-submit-button input {
        color: #fff;
        font-weight: 500;
        background-color: var(--gray-dark);
        width: 516px;
        height: 82px;
        font-weight: 600;
        border-radius: 10px;
        border-style: none;
    }

    /* три иконки */
    div.top-wide {
        display: flex;
        flex-direction: row;
        height: 260px;
    }
    div.top-wide a.three-buttons {
        display: block;
        padding-top: 40px;
        width: 230px;
        flex-basis: auto;
        font-size: 35px;
        color: #000;
        background-color: transparent;
    }
    div.top-wide a.three-buttons span {
        text-align: center;
        display: inline-block;
        width: 222px;
    }
    div.top-wide a.three-buttons img {
        object-fit: contain;
        height: 120px;
        width: 135px;
        margin-left: auto;
        margin-right: auto;
    }

    /* три кнопки интернет/телефон/тв */
    .three-buttons {
        background-color: white;
        width: 100%;
        text-align: center;
    }

    .three-buttons img {
        object-fit: contain;
        width: 50px;
        height: 50px;
        margin-right: 5px;
    }

    .three-buttons div {
        display: inline-block;
        width: 310px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .three-buttons a {
        text-decoration: none;
        color: #000;
        font-size: 40px;
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }
    
    section {
        background-color: var(--white);
    } 

    /* кнопки дом/квартира/организация */
    div.plan-buttons {
        padding: 64px 0 32px 0;
        text-align: center;
        display: flex;
        flex-direction: row;
    }

    div.plans-container .rasporka {
        flex-basis: auto;
        width: 20px;
    }

    div.plans-container .plan {
        /* display: inline-block; */
        flex-grow: 1;
        white-space: nowrap;
        width: 220px;
        height: 80px;
        line-height: 80px;
        font-size: 32px;
        text-align: center;
        border: 2px solid #bbb;
        border-radius: 10px;
        margin: 0 15px;
    }

    div.plans-container .active-plan {
        color: var(--cyan-1);
        border-color: var(--cyan-1);
    }

    div.plans-container h1 {
        margin-top: 0px;
        text-align: center;
        font-weight: 600;
        font-size: 50px;
    }

    div.plan-details {
        margin-top: 32px;
        text-align: center;
    }
    
    /* рамка вокруг карточки плана */
    div.plan-details .plan-detail {
        display: inline-block;
        border: 2px solid #bbb;
        border-radius: 10px;
        width: 660px;
        height: 530px;
        margin: 20px;
    }

    .inner-1 {
        font-size: 30px;
        border: 2px solid transparent;
        width: 660px;
        height: calc(530px - 180px);
        margin: -2px 0px 0px -2px;
    }

    .inner-2 {
        font-size: 30px;
        border: 2px solid #bbb;
        border-radius: 10px;
        width: 660px;
        height: 180px;
        margin: -2px 0px 0px -2px;
        background-color: var(--gray-light-2);
    }

    div.plan-detail .inner-1 .text-2 {
        font-size: 40px;
        padding-top: 15px;
    }

    div.plan-detail .inner-2 .text-2 {
        font-size: 40px;
        font-weight: 600;
        padding: 15px;
    }

    div.plan-detail .inner-1 .speed {
        font-size: 70px;
        font-weight: 600;
        padding: 20px;
    }

    div.plan-detail .inner-1 .text-3 {
        font-size: 40px;
        margin-bottom: 32px;
    }

    div.plan-detail .inner-1 .tv {
        font-size: 48px;
        font-weight: 600;
        padding: 15px;
        text-align: center;
    }

    div.plan-detail .inner-2 div {
        padding: 5px 12px;
    }

    div.plan-detail .inner-2 .to-connect {
        padding: 0;
        line-height: 80px;
        vertical-align: middle;
    }

    div.plan-detail .inner-2 .to-connect span {
        display: inline-block;
        background-color: #4AA5FF;
        font-weight: 600;
        border-radius: 10px;
        width: 520px;
        height: 80px;
        line-height: 80px;
    }

    div.plans-note {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        padding: 30px;
        text-align: left;
    }

    /* заголовок в полосе */
    div.headline-color {
        padding: 25px 0;
        text-align: center;
        font-size: 36px;
        font-weight: 600;
    }

    /* элементы формы */
    div.form-container {
        padding: 40px 30px;
        background-color: var(--gray-light-1);
        font-size: 40px;
    }

    div.form-container div.form-element {
        margin-bottom: 30px;
        line-height: normal;
    }

    div.form-note {
        text-align: left;
        font-size: 20px;
    }

    img.location-tag {
        object-fit: contain;
        height: 70px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: calc(var(--input-width-mobile) + 20px);
        transform: translateY(-50%);      
    }

    textarea,
    div.form-container input, 
    div.form-container select {
        padding: 4px;
        font-family: 'Roboto', Helvetica, sans-serif;
    }

    div.form-container input, 
    div.form-container select {
        font-size: 40px;
    }
    textarea {
        font-size: 24px;
    }
    option {
        font-size: 20px;
    }

    textarea {
        width: var(--input-width-mobile);
    }
    textarea[name=comment] {
        width: calc(var(--input-width-mobile) + 70px);
    }
    div.form-container input {
        width: calc(var(--input-width-mobile) + 68px);
    }
    div.form-container select {
        width: calc(var(--input-width-mobile) + 80px);
    }

    span.map-activator {
        color: rgb(19, 128, 210);
        display: inline-block;
        vertical-align: top;
        font-size: 40px;
    }

    div.with-dropdown {
        padding-top: 15px;
    }

    div.with-dropdown div.dropdown-content {
        left: 0;
        top: 80px;
        width: 100%;
        height: 600px;
    }

    div.dropdown-content div {
        font-size: 35px;
        padding: 15px 0;
    }

    /* div.form-container span.label {
        display: inline-block;
    } */


    div.form-container span.required {
        color: red;
    }


    div.form-container input[type=checkbox] {
        width: 60px;
        height: 60px;
        vertical-align: middle;
    }


    /* кнопка в форме оформления заявки */
    div.sendform-inactive,
    div.sendform-active {
        padding-top: 5px;
        font-weight: 600;
        border-radius: 10px;
        width: 520px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        border-color: var(--orange);
        border-width: 2px;
        border-style: solid;
    }

    div.sendform-inactive {
        color: var(--gray);
        background-color: var(--white);
    }

    div.sendform-active {
        color: var(--black);
        background-color: var(--orange);
    }

    /* блок новостей и акций*/
    div.news-container {
        padding: 26px 30px;
        text-align: center;
    }

    div.news-container div.news-card {
        padding: 0 3px;
        display: inline-block;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        margin-bottom: 20px;
        height: 500px;
    }

    div.news-card img {
        object-fit: cover;
        width: 700px;
        height: 436px;
    }

    div.news-card div.caption {
        position: absolute;
        bottom: 60px;
        left: 3px;
        width: 700px;
        height: 134px;
        line-height: 134px;
        background-color: rgba(255, 255, 255, 0.75);
    }

    div.caption span {
        display: inline-block;
        font-size: 48px;
        vertical-align: middle;
        line-height: normal;
        text-align: center;
        width: 700px;
    }

    div.news-card div.date-formatted {
        position: absolute;
        bottom: 0px;
        left: 0px;
        /* left: 50%;
        transform: translateX(-50%); */
        width: 350px;
        height: 40px;
        line-height: 40px;
    }

    div.date-formatted span {
        display: inline-block;
        font-size: 40px;
        vertical-align: middle;
        line-height: normal;
        text-align: left;
        width: 350px;    
    }

    /* карта и её контейнер */
    div.flex-container-vertical {
        width: 100%;
        height: 80%;
        flex-basis: auto;
    }

    div.flex-container-before,
    div.flex-container-after {
        flex-grow: 1;
    }

    div#close-map {
        color: var(--gray-light-1);
        background-color: var(--green);
        text-align: center;
        width: 100%;
        font-size: 50px;
        padding: 15px;
        border-radius: 2px;
    }

    div#get-address {
        font-size: 50px;
        padding: 15px;
        border-radius: 2px;
        width: 100%;
        background-color: var(--green);
    }


    div#address-control, 
    div#map {
        margin: auto;
    }

    div#address-control {
        position: relative;
        text-align: center;
        background-color: rgb(90, 90, 90);
        width: 100%;
    }

    div#map {
        width: 100%;
        height: 80%;
    }

    #address-on-map {
        width: 85%; 
        font-size: 40px;
        margin-left: auto;
        margin-right: auto;
    }

    /* оформление футера */
    footer div.bottom-wide {
        position: relative;
        color: var(--white);
        background-color: var(--gray-dark);
        height: 370px;
        width: 100%;
    }

    footer div.bottom-wide img.logo-2 {
        object-fit: contain;
        width: 120px;
        height: 120px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    footer div.text-ooo,
    footer .all-rights-reserverd {
        color: var(--white);
        text-align: left;
    }
    footer div.text-ooo {
        position: absolute;
        top: 180px;
        right: 190px;           /* = footer .bottom-wide .logo-area { left } */
        font-weight: 400;
    }
    footer div.text-ooo span {
        font-size: 40px;
    }
    footer span.all-rights-reserverd-mobile {
        font-size: 28px !important;
        line-height: 28px;
        /* top: 275px; */
    }

    footer .mobile-contacts {
        display: flex;
        flex-direction: row;
        position: absolute;
        top: 30px;
        width: 100%;
    }
    footer .mobile-contacts div.growable {
        flex-grow: 1;
    }
    footer .mobile-contacts a {
        display: block;
        width: 136px;
        flex-basis: auto;
        text-align: center;
    }
    footer .mobile-contacts a img {
        object-fit: contain;
        width: 136px;
        height: 105px;
    }

    /* стили оформления тела новости */
    div.news-body {
        padding: 30px;
    }

    div.news-body img {
        display: none;
    }

    div.news-body table {
        font-size: 1.8em;
    }
    
    section.container-1200 {
        width: 90%;
        margin: auto;
    }

    .desktop-only {
        display: none !important;
    }
}