/* 
    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;                                
            }           
            
            
            
            
            
            /*Фиксируем шапку*/
            .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;
            }
            
            main {
                padding-top: 59px;
            }
            
            /*Стили для стикеров: звонок, телеграмм, вотсап*/
            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;
            }