/* 
    Created on : 9 июл. 2023 г., 13:01:41
    Author     : Popov Andrey, yellowkite@yandex.ru, +7 985 643-24-32
*/
/*
    Ширина экрана 1280. Минус о
*/ 
:root {/*Определим глобальные переменные*/
    --min_grid_block_width: 96px;
    --min_grid_block_height: 96px;
    --gap: 8px;
}           
            body {
                font-size: 16px;
                color: #2C2D33;
            }
            
            div.header_fixed {
                width: 100vw;/*1264px;Для экрана 1280, для остальных вычисляется*/
                position: fixed;
                z-index: 10;
                /*box-shadow: 0px 2px 10px  #CCCCCC;*/
                background-color: white; /*Убираем прозрачность фона*/
            }
            
            
            div#scroll_header {/*Блок создан, чтобы решить проблему отсуствия прокрутки в fixed*/                
                height: 100px; /*Чуть больше 96px чтобы не было полосы прокрутки*/
                overflow-y: auto;
                overflow-x: auto;
                scrollbar-width: none;
            }
            
            header, .wrapper {
                display: grid;
                grid-template-columns: repeat(12, minmax(var(--min_grid_block_width), 1fr));
                grid-auto-rows: minmax(var(--min_grid_block_height), auto);
                grid-gap: var(--gap);                
            }
            
            
            
            header .wrapper {
                grid-column-start: 1;
                grid-column-end: 13;
            }
            
            /*Cтили шапки*/
            
            
            header a:link{
               color:#2C2D33;
               text-decoration: none;
            }
            
            header a:visited {
               color:#2C2D33; 
            }
            
            header a:hover {
               color: #0f92fc; /*#4FBC77;*/ 
               text-decoration: underline; 
            }
            
            header a:active {
               color:#2C2D33; 
            }    
            
            .logo {
               padding-top: 2px;
               padding-left: 2px;
               width: var(--min_grid_block_height); /*чтобы сохранить пропорции*/
               /*height: 100%;*/
               object-fit: cover;               
            }
            /*Блок основного меню*/
            .main_menu {
                grid-column-start: 3;
                grid-column-end: 10;                
                display: grid;
                grid-template-columns: repeat(7, minmax(var(--min_grid_block_width), 1fr));
                grid-gap: var(--gap);                
            }
            
            .main_menu ul {
                height: 100%; /*Делаем на всю высоту, чтобы корректно отрабатывать событие mouseover*/ 
                
            }
            /*Плавное подчеркивание основных пунктов меню при наведении*/
            .main_menu ul li {
                transition: border 0.2s ease;
                width: 100%;
                height: var(--min_grid_block_height);
                display: flex;
                align-items: center; /*Вертикальное выравнивание элементов сетки по центру*/
            }
            .main_menu ul:hover {
                cursor: pointer; 
            }
            
            .main_menu ul:hover > li {
                border-bottom: #2C2D33 2px solid;
                color: inherit;
                text-decoration: #2C2D33;
            }
            
            .main_menu ul li i {
                color: #0f92fc;
                transition: all .3s ease;
                font-size: 24px;
                opacity: 0.5;
                padding-top: 6px;
                
            }
            /*Поворачиваем стрелочку*/
            .turn_up {               
                transform: translate(0, 1px) rotateX(180deg);    
            }
            /*Указываем новые свойства, если просто прописать его в классе .turn_up 
            без указания полного пути: .main_menu ul li i.turn_up, - не работает*/
            .main_menu ul li i.turn_up {
                font-weight: bold;                
                opacity: 1;
            }
            
            #for_patient_and_relatives_mmitem {
                grid-column-start: 1;
                grid-column-end: 4;
            }
            
            #about_clinic_mmitem {
                grid-column-start: 5;
                grid-column-end: 7;
            }
            
            ul {
               list-style-type: none; /* Убираем маркеры */ 
               font-family: Comfortaa;
               font-weight: normal;
               /*white-space: nowrap;   /*Запрет переноса слов*/
            }
            
            
            
            
            
            
            div.contacts {
                display: grid;
                grid-column-start: 10;
                grid-column-end: 13;
                align-items: center;    
            }
            
            a:link.phone_number {
               color: #0f92fc;
               text-decoration: none;
               
            }
            div.contacts a {
                white-space: nowrap;
            }
            
            div.contacts p {
                text-align: center;
                color: #0f92fc;
            }
            /*Стили для стикеров: звонок, телеграмм, вотсап*/
            div.contacts_sticker_group {
                position: fixed;
                width: 48px;
                right: 16px;
                bottom: 96px;
                display: flex;
                flex-direction: column;
                gap: var(--gap);
                z-index: 20; /*Поверх шапки*/
            }
            
            div.sticker {
                width: 48px;
                height: 48px;                
                display: flex; /*Делаем флексбокс, чтобы выровнять картинку внутри по центру и вертикально и горизотально*/                
                align-items: center; 
                justify-content: center;
                outline: none;
                border-radius: 48px;                
                -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: 60%;
                height: 60%;                
            }
            
            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;
            }
            
            
            /*Стили для основного содержимого*/            
            main {
                padding-top: 104px;/*--min_grid_block_width + --gap*/
            }
            
            
            
            /*Контейнер для содерижмого основных заголовков меню*/
            .main_menu_content {
                grid-column-start: 2;
                grid-column-end: 11;
                grid-template-columns: repeat(9, minmax(var(--min_grid_block_width), 1fr));                
                grid-gap: var(--gap);                
                grid-auto-rows: minmax(48px, auto);                
                display: grid;              
            }
            .submenu {
                grid-column-start: 1;
                grid-column-end: 10;
                grid-template-columns: repeat(9, minmax(var(--min_grid_block_width), 1fr));                
                grid-gap: var(--gap);                
                grid-auto-rows: minmax(48px, auto);                
                display: grid;
            }
            #bottom_arrow {
                display: flex;
                height: var(--min_grid_block_height);
                justify-content: center;
                align-items: flex-start;
                border-top: #2C2D33 1px solid;
            }
            
            /*Стили списка подменю*/
            .main_menu_subitem ul {
                list-style-type: "\2014";/*Маркер - длинное тире*/
                list-style-position: outside;
                margin-left: -6px; /*Коррекция отступа, чтобы оставалось на одном уровне с заголовком*/
            }
            
            .main_menu_subitem ul li {                
                padding-left: 6px; /*Отделяем маркер от текста*/
            }
            
            .main_menu_subitem ul li.head {                
                list-style-type: none;
                font-weight: bold;    
            }
            /*Пометим синеньким пункты - заголовки */
            li.head a {
                color: #0f92fc;/*#3D915C; #4FBC77;*/
            }
            
            /*Блоки, которые показываются при активации соответствующих пунктов главного меню*/
            div#for_patient_and_relatives_block, div#treatment_block, 
            div#about_clinic_block, div#prices_and_promotions_block {
                display: none;
            }
            
            /*Стили для блока Родственникам и пациентам*/
            /*Левый блок*/
            div#for_patient_and_relatives_block .main_menu_content .left {
                padding-top: 18px;
                grid-column-start: 1;
                grid-column-end: 6;                
            }
            /*Правый блок*/
            div#for_patient_and_relatives_block .main_menu_content .right {
                padding-top: 18px;
                grid-column-start: 8;
                grid-column-end: 11;                  
            }
            .for_relatives, .for_patients{
                width: 100%;    
            }
            .for_relatives ul li, .for_patients ul li {
                padding-top: 6px;
                padding-bottom: 6px;
            }
            
            
            /*Стили для блока Лечение*/
            div#treatment_block h2 {
                padding-top: 18px;
            }
            /*Левый блок*/
            div#treatment_block .main_menu_content .left {
                padding-top: 18px;
                grid-column-start: 1;
                grid-column-end: 6;
                
            }
            /*Правый блок*/
            div#treatment_block .main_menu_content .right {
                padding-top: 18px;
                grid-column-start: 7;
                grid-column-end: 10;                
            }
            
            h3#WhatTreat, h3#HowTreat {
                font-family: Saar SP Demo;
                letter-spacing: 2px;
                font-weight: normal;
                font-size: 1.5em;
                opacity: 0.5;
            }
            /*Правый блок содержит "Что мы лечим" */
            .diseases_and_symptoms_content {
                grid-column-start: 1;
                grid-column-end: 6;
                display: grid;
                grid-template-columns: repeat(5, minmax(var(--min_grid_block_width), 1fr));    
            }
            /*Подблоки "Симптомы", "Болезни"*/
            .deseases, .symptoms {
                display: flex;               
            }
            .deseases {
                grid-column-start: 1;
                grid-column-end: 3;
            }
            .symptoms {
                grid-column-start: 4;
                grid-column-end: 6;
            }
            .deseases ul li, .symptoms ul li {
                padding-top: 6px;
                padding-bottom: 6px;
            }
            
            /*Левый блок содержит "Как мы лечим"*/            
            .kind_of_treatment_content {
                grid-column-start: 7;
                grid-column-end: 10;                
            }
            .kind_of_treatment_content ul li {
                padding-top: 6px;
                padding-bottom: 6px;
            }
            
            
            /*Стили основного содержимого*/
            /*Блок страницы*/
            div.page_content {
                display: grid;
                grid-template-columns: repeat(12, minmax(var(--min_grid_block_width), 1fr));
                grid-auto-rows: minmax(var(--min_grid_block_height), auto);
                grid-gap: var(--gap);                
            }
            /*Блок основного содержимого страницы*/
            div.main_page_content {                
                grid-column-start: 3;
                grid-column-end: 11;                                
            }
            
            /*Блок контекстного меню страницы*/
            div.page_context_menu {                
                grid-column-start: 1;
                grid-column-end: 3;                               
            }
            div.page_content div.wrapper#first_block {
                background-image: url("../img/FCC001-min.png");
                grid-column-start: 3;
                grid-column-end: 11;
                grid-row-start: 1;
                grid-row-end: 7;                
                background-size: 100%, auto;
                background-repeat: no-repeat;
            }
            
            
           
            img.first_img {
                display: block;
                width: 100%; 
                object-fit: contain;
            }
            /*Здесь стили, делающие нактивными элементы мобильной версии*/
            .back, .menu_burger, i.mobile, .bottom_line, .widthgrid100, h3#WhatTreat i, h3#HowTreat i{
                display: none;
            }