/* 
    Created on : 24 июл. 2023 г., 14:17:35
    Author     : Popov Andrey, yellowkite@yandex.ru, +7 985 643-24-32
*/
:root {
                --min_grid_block_width: 51px;
                --min_grid_block_height: 51px;
                --gap: 2px;
            }
            
            
            body {                
                font-size: 8.5px;                                
            }           
            
            /*Значок крестик для закрытия всплывающих окон*/
            .cross {
                width: 20.5px;
                height: 20.5px;
                position: relative;
            }
            
            .cross::before, .cross::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 2px;
                background-color: #8a8a8a;
                top: 50%;
            }
            
            .cross::before {
                transform: rotate(45deg);
            }
            
            .cross::after {
                transform: rotate(-45deg);
            }
            
            
            
            
            /*Фиксируем шапку*/
            .header_fixed {
                width:100vw;
                /*box-shadow: 0px 2px 10px  #CCCCCC;*/
                position: fixed;
                padding: 2px 0 0 2px; 
                z-index: 10;
                background-color: white; /*Убираем прозрачность фона*/
            }
            
            div#scroll_header {/*Блок создан, чтобы решить проблему отсуствия прокрутки в fixed*/
                overflow-x: hidden;/*Чтобы скрытые справа или слева блоки нельзя было увидеть с помощью прокрутки*/
                overflow-y: hidden;
                width: 100vw;
                height: 59px;
            }
            
            header {
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                grid-auto-rows: auto;
                min-width: 320px;
                gap: var(--gap);               
            }
            
            header a:link{
               color:#2C2D33;
               text-decoration: none;
            }
            
            header a:visited {
               color:#2C2D33; 
            }
            
            header a:hover {
               color: #0f92fc; 
               text-decoration: underline; 
            }
            
            header a:active {
               color:#2C2D33; 
            }
            .logo, .contacts {
                display: flex;
                justify-content: center;
                align-items: center;                
            }
            .logo {
                grid-column-start: 1;
                grid-column-end: 2;
                grid-row-start: 1;
                grid-row-end: 2;
            }
            img.logo {
                object-fit: cover;
                height: 51px;
                width: 51px;
                padding-left: 2px;
                padding-top: 2px;
            }
            
            .contacts {
                grid-column-start: 2;
                grid-column-end: 6;
                grid-row-start: 1;
                grid-row-end: 2;
                font-size: 12.75px;
                font-weight: bold;
            }
            div.contacts svg {
                width: 17px;
                height: 17px;
                display: inline-block;
                fill: #0f92fc;
            }
            div.contacts a:link, div.contacts a:visited, div.contacts a:hover, div.contacts a:active {
                color:#2C2D33;
                text-decoration: none;
            }
            .menu_burger {
                display: flex;
                grid-column-start: 6;
                grid-column-end: 7;
                grid-row-start: 1;
                grid-row-end: 2;
                justify-content: center;
                flex-direction: column;
                align-items: flex-end;
                padding-right: 12.75px;
                cursor: pointer;                
            }
            /*Рисуем палочки в меню*/
            .menu_burger span {
                transition: all .3s ease;
                width: 25.5px;
                height: 2px;
                background-color: #4f515b;              
                margin: 1px;
            }
            /*Анимация бургера в крестик*/
            .up_burger_line {
                transform: translate(0, 4px) rotate(45deg);
            }
            .middle_burger_line{
                transform: scale(0);
            }
            .bottom_burger_line{
                transform: translate(0, -4px) rotate(-45deg);
            }
            
            /*Вспомогательный блок шириной на всю сетку*/
            .widthgrid100 {
                grid-column-start: 1;
                grid-column-end: 7;
                display: block;
            }
            
            .main_menu {
                grid-column-start: 1;
                grid-column-end: 7;
                grid-row-start: 2;
                position: relative;                
                left:100vw;/*Спрячем за пределы экрана справа*/
                height: 0px;/*Чтобы не увеличивал высоту header*/
                padding-top: 2px;
                padding-left: 12.75px;
                overflow: hidden;
                transition: left .5s ease-out, height .2s ease-out;
                /*border-top: #c2c8e1 solid thin;*/
            }
            .main_menu ul {
                font-size: 17px;
                list-style-type: none;
                line-height: 2;                
            }
            /*Отступ у самого верхнего пункта*/
            .main_menu ul#for_patient_and_relatives_mmitem {
                padding-top: 17px;
            }
            .main_menu ul li i {
                color: #0f92fc;/*синие стрелочки*/
                float: right;
                padding-right: 12.75px;
            }
            /*Блок обертка для содержимого меню*/
            .wrapper {                
                grid-column-start: 1;
                grid-column-end: 7;
                grid-row-start: 2;                
                position: relative;
                height: 0px;/*Чтобы не увеличивал высоту header*/
                font-size: 12.75px;
                z-index: 2;/*Поверх меню*/                
                background: white;/*Убираем прозрачность фона*/
                transition: left .3s ease-out;                
            }
            /*Cтрелочка рядом с надписью "Назад" синенькая*/
            .wrapper i {
                color:#0f92fc;
            }
            .wrapper .main_menu_content{
                width: 100vw;
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                padding-top: 12.75px;                 
            }
            #for_patient_and_relatives_block, #treatment_block, #about_clinic_block, #prices_and_promotions_block {
                left: 100vw;/*Скроем за пределами экрана спрва*/
                height: 0;/*Убираем высоту, чтобы не увелчивалась шапка*/                
            }
            
            
            /*Стили для блоков с содержимым меню*/
            .back {
                width:100vw;                
                text-align: right;
                padding-top: 17px;
                padding-bottom: 8.5px;              
                box-sizing: border-box;   /*Свойство нужно, чтобы блок не увеличивался вширь
                за пределы экрана при установке padding-left,padding-right (что приводит к тому, что 
                отступы справа и слева не работают), а оставался в пределах своих размеров, таким образом 
                размер блока не увеличивался, а отступы начинают работать */            
            }
            
            .back span {
                padding-right: 12.75px;
            }
            
            .bottom_line {
                padding-left: 2px;
                padding-top: 8.5px;
                display: block;
                width: calc(100% - 14.75px);   /*Обеспечим ширину, чтобы справа был отступ 12.75px*/                            
                border-bottom: /*#c2c8e1*/#4f515b solid 1px;
                opacity: 0.3;
            }
            
            .main_menu_content .left {
                grid-column-start: 1;
                grid-column-end: 7;                
            }
            
            .main_menu_content .right {
                grid-column-start: 1;
                grid-column-end: 7;                
            }
            
            .main_menu_content h2 {
                grid-column-start: 1;
                grid-column-end: 7;
                padding-left: 12.75px;
                line-height: 1;                
            }
            .main_menu_subitem ul {
                list-style-type: "- ";
                list-style-position: outside;
                padding: 12.75px; /*Коррекция отступа, чтобы оставалось на одном уровне с заголовком*/
            }
            .main_menu_subitem ul li {
                padding-bottom:4px;
                font-size: 17px;
            }
            
            .main_menu_subitem ul li::marker {
                color: #0f92fc;
            }
            .main_menu_subitem ul li.head {                
                list-style-type: none;
                font-weight: bold;    
            }
            /*Пометим синеньким пункты - заголовки */
            li.head a {
                color: #0f92fc; /*#4FBC77;*/
            }
            div#for_patient_and_relatives_block .main_menu_content .right h2 {
                display: none;
            }
            
            /*Стили для блока лечение*/
            
            section.submenu {
                display: grid;
                grid-column-start: 1;
                grid-column-end: 7;
                grid-template-columns: repeat(6, 1fr);                
                position: relative;                
                transition: left .3s ease-out;
                left: 0vw;
            }
            div#treatment_block .main_menu_content .left {
                /*grid-column-start: 1;
                grid-column-end: 4;*/                
            }
            
            div#treatment_block .main_menu_content .right {
                /*grid-column-start: 4;
                grid-column-end: 7;*/                
            }
            
            /*Подблок блока "Лечения": "Что мы лечим"*/
            .diseases_and_symptoms_content  {
                display: grid;
                grid-column-start: 1;
                grid-column-end: 7;
                grid-template-columns: repeat(6, 1fr);                
                position: relative;
                height: 0px;/*Чтобы не увеличивал высоту header*/                
                z-index: 2;/*Поверх меню*/                
                background: white;/*Убираем прозрачность фона*/
                transition: left .3s ease-out;
                left: 100vw;                
            }
            /*Подблок блока "Лечения": "Как мы лечим"*/
            .kind_of_treatment_content  {
                /*display: grid;*/
                grid-column-start: 1;
                grid-column-end: 7;
                grid-template-columns: repeat(6, 1fr);                
                position: relative;
                height: 0px;/*Чтобы не увеличивал высоту header*/                
                z-index: 2;/*Поверх меню*/                
                background: white;/*Убираем прозрачность фона*/
                transition: left .3s ease-out;
                left: 100vw;
            }
            
            /* У блока "Что мы лечим" есть подблоки: Правый - "Болезни" и левый - "Симптомы"*/
            .deseases {
                grid-column-start: 1;
                grid-column-end: 4;
            }
            
            .symptoms {
                grid-column-start: 4;
                grid-column-end: 7;                
            }
            
            h3#WhatTreat, h3#HowTreat {
                font-size: 17px;
                padding-left: 12.75px;
                font-weight: normal;
                line-height: 2;
            }
            h3#WhatTreat {
                padding-top: 12.75px;
            } 
            h3#WhatTreat i, h3#HowTreat i {
                color: #0f92fc;
                float: right;
                padding-right: 12.75px;
            }
            
            
            
            h2#WhatTreat, h2#HowTreat {
                transition: ease-in .2s border;                
            }
            
            h2#WhatTreat i, h2#HowTreat i {
                float: right;
                display: none;
            }
            
            /*Стили для блока "Цены"*/
            
            div#prices_and_promotions_block .main_menu_content .left ul,
            div#prices_and_promotions_block .main_menu_content .right ul {
                padding: 12.75px; /*Коррекция отступа, чтобы оставалось на одном уровне с заголовком*/ 
                list-style-type: none;
                grid-column-start: 1;
                grid-column-end: 7;
                display: grid;
            }
            
            li.service_title, li.price {
                font-size: 17px;
            }
            
            li.service_title {
                grid-column-start: 1;
                grid-column-end: 4;                
            }
            
            li.price {
                grid-column-start: 5;
                grid-column-end: 7;                
            }
            
            main {
                padding-top: 59px;
            }
            
            
            /*Стили для блока "О клинике"*/
            
            
            .clinic_information, #about_clinic_block .contacts {
                grid-column-start: 1;
                grid-column-end: 7;
                padding: 8.5px;
                font-size: 17px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;                
            }
            
            .clinic_information p a {
                color: #0f92fc;
            }
            
            .license_link {
                color: #0f92fc;
                text-decoration: underline dashed;
            }
            
            .license_link:hover {
                text-decoration: none;
            }
            
            .license {
                position: absolute;
                top: 20.5px;
                left: 20.5px;
                z-index: 30;
                width: 80%;
                display: none; 
                flex-direction: column;
            }
            
            .license .cross {
                float: right;
                top: 0;
                left: 100%;
            }
            
            .phone_number {
                font: 24px 'ShancallunaRegular';
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
            }
            
            .phone_number svg {
                display: inline-block;
                padding-top: 6px;
                width: 17px;
                height: 17px;                
                fill: #0f92fc; /*Синенький*/
            }
            
            .address, .email {
                padding-top: 8.5px;
                font-weight: normal;
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
            }
            .address svg {
                display: inline-block;
                width: 17px;
                height: 17px;                
                fill: #0f92fc; /*Синенький*/
            }
            
            div.address p, div.email p, div.phone_number p {
                padding-left: 16px;
                color: #2C2D33;
            }
            
            .email svg{
                display: inline-block;
                padding-top: 8px;
                width: 32px;
                height: 32px;               
            }
            
            div.email svg rect{
                stroke: #0f92fc; /*Синенький цвет контура*/
                fill: none;
            }
            
            div.email svg path {
                stroke: #0f92fc; /*Синенький цвет контура*/
                fill: none;
            }
            
            
            div.map {
                height: 204px;
                width: 100%;                    
            }
            
            div.map iframe {
                height: 204px;
                width: 80%;                
            }
            
            
            .license img {
                width:100%;
                height: auto; /* Высота подстраивается автоматически, чтобы сохранить пропорции */
                object-fit: cover; /* Сохраняем пропорции, картинка вписывается в контейнер */  
                border-radius: 5px;
                border: #50525e solid 1px;
                margin: 2px;                
            }
            
            
            /*Стили для стикеров: звонок, телеграмм, вотсап*/
            div.contacts_sticker_group {
                position: fixed;
                width: 51px;
                right: 12.75px;
                bottom: 25.5px;
                display: flex;
                flex-direction: column;
                gap: 8.5px;
                z-index: 20; /*Поверх шапки*/
            }
            
            div.sticker {
                width: 51px;
                height: 51px;                
                display: flex; /*Делаем флексбокс, чтобы выровнять картинку внутри по центру и вертикально и горизотально*/                
                align-items: center; 
                justify-content: center;
                outline: none;
                border-radius: 34px;                
                -moz-box-shadow: 0px 2px 10px #CCCCCC; /* для Firefox Грозного */
                -webkit-box-shadow: 0px 2px 10px #CCCCCC; /* да для люда обычного, праведного */
                -box-shadow: 0px 2px 10px #CCCCCC; /* и про Оперушку не забудем */                
                background-color: white; /*чтобы не было прозрачности в векторе*/
                
            }
            
            div.sticker svg.whatsapp, div.sticker svg.phone {
                width: 34px;
                height: 34px;                
            }
            
            div.sticker svg.telegram {
                width: 100%;
                height: 100%;
            }
            svg.phone {
                fill: #0f92fc;
                opacity: 100%;
            }
            
            svg.whatsapp {
                fill: #FFFFFF;
                opacity: 100%;
            }
            
            svg.telegram {
                fill: #0f92fc;
                opacity: 100%;
            }           
            
            
            #whatsapp {
                background-color: #0f92fc;
            }
            
            /*Стили основного содержимого*/
            div.page_content {
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                grid-auto-rows: auto;
                min-width: 320px;
                gap: var(--gap);
                line-height: 1.5em;
            }
            
            img.first_img {
                display: block;
                width: 100%; 
                object-fit: contain;
            }
            /*Неактивные стили десктопной версии*/
            #bottom_arrow {
                display: none;
            }
            
            /*Блок Footer*/
            footer {
                padding-top: 8.5px;
            }
            
            .footer_content {
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                grid-auto-rows: auto;
                min-width: 320px;
                gap: var(--gap);                
            }
            
            .copy_content, .phone_content, .email_content, .address_content, .medlicense_content {
                grid-column-start: 1;
                grid-column-end: 7;
                display: flex;
                align-items: center;
                font-size: 12.75px;
                padding-left: 8.5px;
                padding-top: 4.25px;
            }
            
            .email_content svg, .phone_content svg, .address_content svg {
                display: inline-block;
                flex-shrink: 0;/*Не дадим сжиматься, чтобы на мобильном устройстве не уменьшался элемент*/
            }
            
            .email_content svg {
                width: 17px;
                height: 17px;                
            }
            
            .email_content svg rect{
                stroke: #50525e; /*Темно-серый цвет контура*/
                 
            }
            
            .email_content svg path {
                stroke: #50525e; /*Темно-серый цвет контура*/
            }
            
            .phone_content svg {
                width: 12.75px;
                height: 12.75px;
                fill: #50525e;
            }
            
            .address_content svg {
                width: 15px;
                height: 15px;
                fill: #50525e;
            }