/* 
    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;
            }
            /*Значок крестик для закрытия всплывающих окон*/
            .cross {
                width: 32px;
                height: 32px;
                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);
            }
            
            
            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тили шапки*/
            
            
            
            .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;
            }
            
            /*Стили "О клинике"*/
            #about_clinic_block .main_menu_content {
                padding-top: 16px;
            }
            
            .clinic_information {
                grid-column-start: 1;
                grid-column-end: 5;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }
            
            .clinic_information a {
                color: #0f92fc;
            }
            
            .license_link {
                color: #0f92fc;
                text-decoration: underline dashed;
            }
            
            .license_link:hover {
                text-decoration: none;
            }
            
            .license {
                position: absolute;
                top: 128px;
                left: 96px;
                z-index: 30;
                width: 80%;
                display: none; 
                flex-direction: column;
            }
            
            .license .cross {
                float: right;
                top: 0;
                left: 100%;
            }
            
            .license img {
                width:100%;
                height: auto; /* Высота подстраивается автоматически, чтобы сохранить пропорции */
                object-fit: cover; /* Сохраняем пропорции, картинка вписывается в контейнер */  
                border-radius: 10px;
                border: #50525e solid 1px;
                margin: 8px;
            }
            
            #about_clinic_block .contacts {
                grid-column-start: 6;
                grid-column-end: 10;
                display: flex;
                flex-direction: column;
                align-items: flex-start;                
            }
            .phone_number {
                font: 24px 'ShancallunaRegular';
                display: flex;
                flex-wrap: nowrap;
                align-items: center;                
            }
            
            .phone_number svg {
                display: inline-block;
                width: 24px;
                height: 24px;                
                fill: #0f92fc; /*Синенький*/
                padding-top: 16px;
            }
            
            .address, .email {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                padding-top: 8px;
            }
            
            div.address p, div.email p, div.phone_number p {
                padding-left: 16px;
                color: #2C2D33;
            }
            
            div.address p {
                text-align: left;                
            }
            
            .address svg {
                display: inline-block;
                padding-top: 0px;
                width: 32px;
                height: 32px;                
                fill: #0f92fc; /*Синенький*/
            }
            
            .email svg{
                display: inline-block;
                padding-top: 8px;
                width: 32px;
                height: 32px;               
            }
            
            .email svg rect{
                stroke: #0f92fc; /*Синенький цвет контура*/
            }
            
            .email svg path {
                stroke: #0f92fc; /*Синенький цвет контура*/
            }
            
            

            div.map {                
                height: 416px;
                width: 100%;                    
            }
            
            div.map iframe {
                height: 416px;
                width: 100%;                
            }
            
            
            /*Стили "Цены*/
            div#prices_and_promotions_block .main_menu_content .left {
                grid-column-start: 1;
                grid-column-end: 5;
                grid-template-columns: repeat(4, minmax(var(--min_grid_block_width), 1fr));                
                grid-gap: var(--gap);                       
                display: grid;                
            }
            
            div#prices_and_promotions_block .main_menu_content .right {
                grid-column-start: 6;
                grid-column-end: 10;
                grid-template-columns: repeat(4, minmax(var(--min_grid_block_width), 1fr));                
                grid-gap: var(--gap);                       
                display: grid;                
            }
            
            div#prices_and_promotions_block .main_menu_content .left h2, div#prices_and_promotions_block .main_menu_content .right h2 {
                padding-top: 16px;
                color: #50525e;
                
            }
            
            div#prices_and_promotions_block .main_menu_content .left h2, 
            div#prices_and_promotions_block .main_menu_content .right h2
            {
                grid-column-start: 1;
                grid-column-end: 5;
                width: 100%;
            }
            
            div#prices_and_promotions_block .main_menu_content .left ul, 
            div#prices_and_promotions_block .main_menu_content .right ul {
                grid-column-start: 1;
                grid-column-end: 5;
                grid-template-columns: repeat(4, minmax(var(--min_grid_block_width), 1fr));                
                grid-gap: var(--gap);                       
                display: grid;                
            }
            
            
            
            li.service_title {
                grid-column-start: 1;
                grid-column-end: 3;
            }
            
            
            
            li.price {                
                grid-column-start: 4;
                grid-column-end: 5;
            }
            
            li.price,  li.service_title{
                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;
            }
            
            /*Блок Footer*/
            footer {
                padding-top: 16px;
            }
            .footer_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);
            }
            
            .footer_content {
                grid-column-start: 2;
                grid-column-end: 12;
                display: flex;
                flex-direction: column;                
            }
            
            .copy_content, .phone_content, .email_content, .address_content, .medlicense_content {
                width: 100%;
                display: flex;
                align-items: center;
                padding-top: 8px;
                padding-bottom: 8px;
            }
            
            .email_content svg, .phone_content svg, .address_content svg {
                display: inline-block;                 
            }
            
            .email_content svg {
                width: 24px;
                height: 24px;                
            }
            
            .email_content svg rect{
                stroke: #50525e; /*Темно-серый цвет контура*/
                 
            }
            
            .email_content svg path {
                stroke: #50525e; /*Темно-серый цвет контура*/
            }
            
            .phone_content svg {
                width: 18px;
                height: 18px;
                fill: #50525e;
            }
            
            .address_content svg {
                width: 20px;
                height: 20px;
                fill: #50525e;
            }
            
            

            span.copyspan {
                /*font-size: 18px;*/
            }