/*============================================================================*/
/* Page Header
/*============================================================================*/
header {flex-shrink: 0;} /*https://css-live.ru/articles/uporyadochivanie-bagov-krossbrauzernosti-flexbox.html */

/*==============================================================================
/* стили для верхнего фиксированного меню при размере экрана  < 640 px
/*============================================================================*/
.mobile-menu {                    /* обертка верхнего фиксированного меню высотой 50 пикселов */
  position: fixed;                /* всегда на месте вне потока контента */
  top: 0;                         /* всегда вверху экрана */
  left: 0;                        /* на всю ширину экрана */
  right: 0;                       /* на всю ширину экрана */
  height: 50px;                   /* высота 50 пикселов */
  z-index: 200;                   /* закрывает контент сайта при скроллинге*/ 
  background: rgb(73,109,131);    /*  background:rgb(58,54,50); ### */
  border-bottom:1px solid #bbb;/* rgb(180,184,188) нижняя  тонкая светлая линия, отделяющая меню от контента сайта при скроллинге */
  box-sizing: content-box!important; /* border не включен в высоту| border-box | padding-box | inherit  */
  }
  
.mobile-menu__filter {            /* Фильтр, меняющий цвет картинки */
  position: fixed;                /* всегда на месте вне потока контента */
  width:100%;
  height:50px;
  background-color:               /* затемняет header-frame */
  rgba(35,30,33,0);             /* Прозрачность (0.00 - полностью прозрачен. 0.99 - полностью непрозрачен) с непрозрачным текстом 157,133,135,*/
  }  

.mobile-menu__container {         /* внутренний контейнер верхнего фиксированного меню */ 
  width:calc(100% - 32px);        /* занимает всю ширину на узких экранах с отступами по краям */ 
  height:inherit;                 /* высота та же, что и у хозяина */
  margin:auto;                    /* выровнен по центру верхнего меню */
  max-width:992px;                /* ограничивает ширину меню на больших экранах */
  min-width:300px;                /* ограничивает ширину меню на узких экранах */
  display: flex;                  /* резиновый порядок размещения элементов */
  flex-direction:row;             /* выравнивание по горизонтали */
  align-items: center;            /* по вертикали - посередине */
  justify-content: space-between; /* по горизонтали - на равном расстоянии друг от друга */
  border:0px solid red;
  }

#logo{                            /* непонятно к чему относится */
    color:#ddd;
    text-transform:uppercase;
    font-family: 'Segoe UI', sans-serif;
    font-size:1.6rem;
    font-weight:400;
    text-decoration:none;
    padding:1px 0;
    }

/* -------------------------------------------------------------------------- */
/* элемент контейнера mobile-menu__container - логотип слева  (не меняется)
/* -------------------------------------------------------------------------- */                                   
.mobile-menu__logo  img {float:left; height:35px; margin-right:10px;margin-top:2px}
.mobile-menu__logo .txt {
    float:left; 
    padding:1px 8px; 
    border-left:1px solid #ababab; 
    color: rgb(242,241,242);
    text-transform:uppercase;
    font-family: 'Open Sans', sans-serif;     /* прямой */
    font-size:0.55rem;
    line-height:0.8rem;
    font-weight:400;
    text-decoration:none;
    }

/* -------------------------------------------------------------------------- */
/*  кнопка гамбургера (появляется на экранах уже 640 px)
/* -------------------------------------------------------------------------- */  
.mobile-menu__btn {           /* элемент контейнера mobile-menu__container - кнопка гамбургера справа */
  position: relative;         /* необходимый стиль для  display: flex; */
  display: flex;              /* резиновый дизайн для равномерного размещения трех полосок */
  flex-direction:column;      /* полоски размещаются в колонку друг над другом */
  align-items: center;        /* полоски по вертикали группируются в центре баттона */
  justify-content: center;    /* полоски по горизонтали руппируются в центре баттона */
  width: 35px;
  height: 30px;
  cursor: pointer;
  transition: .4s;             /* анимация гамбургера при нажатии курсором за 400 мс */
  z-index: 300;                /* гамбургер виден всегда поверх всех слоев */
  }
  
.mobile-menu__checkbox {       /* управляющий элемент для label class=mobile-menu__btn */
  display: none;               /* определяет, нажата или нет кнопка гамбургера */
  }  
  
.mobile-menu__icon {           /* центральная полоска кнопки гамбургера  */
  position: relative;          /* она исчезает при клике мышкой по кнопке гамбургера */ 
  display: block;              /* изначально расположена точно посередине (flex-дизайн) */ 
  background: white;
  width: 90%;
  height: 4px;                 /* толщина полоски гамбургера */
  transition: .4s;             /* анимация за 400 мс */ 
  margin-bottom:1px;           /* промежуток для выравнивания центральной полоски */  
  }
                               /* верхняя и нижняя полоски кнопки гамбургера  */
.mobile-menu__icon::after, .mobile-menu__icon::before { 
  content: "";                 /* представлены псевдоэлементами */ 
  display: block;              /* расположенными до (сверху) */
  position: absolute;          /* и после (снизу) */
  background: white;
  width: 100%;
  height: 4px;
  transition: .4s;
  }
.mobile-menu__icon::after {
  top: 8px;
  }
.mobile-menu__icon::before {
  top: -8px;
  }

/* -------------------------------------------------------------------------- */
/* стили моб. меню для смартфона, появляющегося при нажатой кнопке гамбургера
/* -------------------------------------------------------------------------- */
.mobile-menu__bgr{        /* шторка гамбургера для адаптивного мобильного меню */
  position: fixed;        /* шторка не прокручивается */ 
  top: 0px;               /* закрывает весь экран полностью */ 
  left: 0;                /* закрывает весь экран полностью */ 
  right: 0;               /* закрывает весь экран полностью */ 
  z-index: 250;           /* закрывает контент сайта и верхнее фиксированное меню с z=200 */
  height: 0;              /* до нажатия на кнопку гамбургера шторка поднята и не видна */ 
  -webkit-transition: height .4s;
  transition: height .4s; /* закрывается плавно */ 
  overflow: hidden;
  background-color:rgb(73,109,131); /* rgb(60,64,68) общий фон меню верхнего, нижнего и мобильного меню */
  }
                          /* дополнительная шторка правая белая - фон для подменю второго уровня */
.mobile-menu__white-bgr{  /* изначально шторка не видна, так как встроена в mobile-menu__bgr с нулевой высотой*/  
  margin-top:50px;        /* начинается под гамбургером */ 
  width:calc(100% - 200px);              /* занимает чуть менее половины экрана */ 
  float:right;            /* выравнена вправо */ 
  height:inherit;         /* тут не совсем ясно: inherit это 100% но она ещё и сдвинута на 50 вниз */ 
  background:#f8f8f8;     /* изначально шторка не видна, так как встроена в bgr с нулевой высотой*/ 
  border-top:1px solid #bbb;  /*  rgb(180,184,188) тут тоже не совсем ясно почему 6 а не 5 - это линия отделяющяя верхний кусочек с гамбургером */ 
  }
  
/* -------------------------------------------------------------------------- */
/* адаптивное мобильное меню как для смартфонов (< 640 px), так и для широких экранов
/* -------------------------------------------------------------------------- */  
.mobile-menu__nav {        /* элемент контейнера mobile-menu__container - меню посередине */
  position: relative;      /* непременное условие для display:flex */
  display:none;            /* на узком экране (< 640 px) не видно до нажатия на гамбургер */
  align-items: center;     /* на узком экране (< 640 px) центрированы по вертикали */
  justify-content: center; /* на узком экране (< 640 px) центрированы и по горизонтали */
  z-index: 250;            /* одинаковый z-index со шторкой, но шторка фиксирована и выпадает из потока контента */
  -webkit-transition:opacity .3s;
  transition: opacity .3s; /* появляется шустро за 300 мс */
  overflow: visible;
  background-color: transparent;   /* через меню просвечивает фон шторки - общий фон для верхнего, нижнего и мобильного меню */
  }
  
.mobile-menu__nav i{display:none;}   /* на смартфонах лупа в пункте ПОИСК не видна */
  
.mobile-menu__listTopline {    /* светлая линия 5 пикселей под верхним фиксированным меню */
  position: absolute;          /* для того, чтобы граница нижней части верхнего фиксированного меню с гамбургером как бы сохранялась */
  top: 50px;                   /* при опускании поверх нее шторки mobile-menu__bgr */
  left: 0!important;
  right: 0!important;
  border-top:1px solid #bbb;    /* rgb(180,184,188)*/   
  }
  
.mobile-menu__list {          /* элемент контейнера mobile-menu__nav - список пунктов меню */
  border:0px solid white;     /* для отладки */
  position: relative;         /* непременное условие для display:flex - резинового дизайна */
  display:flex;               /* резиновый дизайн для внутренних элементов */
  flex-direction:row;         /* элементы расположены по горизонтали */
  align-items: center;        /* выравнивание по вертикали - в центре */
  justify-content: flex-end;  /* выравнивание по горизонтали - по правому краю */
  width:100%;            
  height:50px;                /* чтобы не закрывалось подменю снизу от пункта верхнего фиксированного меню */
                              /* при выходе курсора вниз за пределы пункта верхнего фиксированного меню */
  list-style: none;          
  margin-top: 0; 
  margin-bottom:0;            
  -webkit-transition: .3s;
  transition: .3s;
  }
    
.mobile-menu__item {           /* элемент контейнера mobile-menu__list - обертка для пункта меню */
  font-family: 'Open Sans', sans-serif;
  text-align: right;
  text-transform:uppercase;
  font-size: 0.9rem;
  font-weight:400;
  padding-bottom: 0px;
  float: left;
  position: relative;
  list-style-type: none!important;
  
  display:block; height:100%; padding-top:28px;  /* чтобы не выходить из области hover; 28 для мелкого шрифта можно увеличить*/

  }

/* ссылки главного меню */
.mobile-menu__link {        /* элемент контейнера mobile-menu__item - пункт-ссылка меню */
  text-decoration: none!important;
  color:#ddd!important; 
  cursor:pointer      
  }

.mobile-menu__link span.red{        /* элемент контейнера mobile-menu__item - пункт-ссылка меню */
  text-decoration: none;
  color:#ffc!important;       
  }
  
.mobile-menu__link:visited {
  color:#ddd!important; 
}  
.mobile-menu__link:hover{
  color: #fff!important;
  text-decoration: underline!important;     
  }
.mobile-menu__link:active{
  color: #ffc!important;
}


/* -------------------------------------------------------------------------- */
/* подменю ВТОРОГО уровня         
/* -------------------------------------------------------------------------- */  
.mobile-menu__item .submenu {               /* меню второго уровня скрыто по opacity и visibility */
  background-color: transparent;            /* через ul.submenu должны просвечивать пункты главного меню */
  position: absolute;                       /* должен быть absolute, а в li первого уровня relative */ 
  top:43px;                                /* захватывает все поле главного меню сверху до низу */
  padding-top:0px;                         /* сами пункты меню li располагаются под полосой главного меню */
  text-align:left;                          /* строчки подменю выравнены по левому краю */
  visibility: hidden;                       /* пока не наведешь мышку - не видно */
  opacity: 0;                               /* пока не наведешь мышку - не видно */
  /*transform: perspective(600px) rotateX(-90deg);*/
  transform-origin: 0% 0%;
  transition: .3s ease-in-out;
  border: 0px dotted #f77;
  width:100%;
  
}

.mobile-menu__item:hover .submenu{       /* открывается при наведении мышки на пункт меню первого уровня */ 
  visibility: visible;
  opacity: 1;
  /*transform: perspective(600px) rotateX(0deg); */
} 

.mobile-menu__item .submenu .bgr            /* в div bgr должны быть помещены пункты submenu */ 
  {                                         /* фон для части ul.submit, расположенной ниже главного меню, чтобы были видны пункты подменю */
  position: absolute;                       /* по отношению к чему? */ 
  top:20px; 
  left:-30px;                               /* чтобы у пунктов подменю  левый край был выровнен с родительским пунктом*/
  width:auto;
  height:auto; /*160px; */
  padding-top:10px;                        /* отступ сверху до первой строчки подменю */
  background-color: rgb(73,109,131);       /* 58, 54, 50*/
  border-left:1px solid #bbb;
  border-right:1px solid #bbb;
  border-bottom:1px solid #bbb;
  padding:10px 20px;
  }


/* ссылки меню второго уровня */  
.mobile-menu__item .submenu li a{
  color: #ddd;
  line-height: 36px;
  padding: 0 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  font-weight:400;
  text-transform:none;
}
.mobile-menu__item .submenu li a:visited {
  color: #ddd; 
}
.mobile-menu__item .submenu li a:hover{
  color: #fff;
}
.mobile-menu__item .submenu li a:active {
  color: #ffc;
  }
  
/*==============================================================================
/* стили для размера экрана >= 750 px (планшет, пк):  мобильное меню исчезает
/*============================================================================*/ 
@media only screen and (min-width: 750px) {{}      /* связанный параметр в c_footer = 750-18=732  ###640 */

.mobile-menu__btn {display: none;}                 /* исчезает кнопка гамбургера */
                                                   /* меню занимает всю ширину контейнера минус ширина логотипа */
.mobile-menu__nav {display:flex; width:100%; max-width:calc(100% - 140px)}
.mobile-menu__nav span.search {display:none;}      /* Пункт меню "Поиск": слово ПОИСК исчезает */
.mobile-menu__nav span.arrow  {display:none;}      /* выдвигающаяся стрелка для пунктов с подменю больше не видна */
.mobile-menu__nav i {display:inline-block;}        /* вместо ПОИСК появляется лупа */
 
.mobile-menu__item {padding-left:15px;}            /* равномерно распределяет пункты меню по ширине */ 
.mobile-menu__item:first-child {padding-left:5px;} /* равномерно распределяет пункты меню по ширине */ 
.mobile-menu__item:last-child {padding-right:5px;} /* равномерно распределяет пункты меню по ширине */  
.mobile-menu__item .submenu li a{font-size: 1rem;}


}

@media only screen and (min-width: 870px) {        /* шрифт для пунктов меню становится крупнее ### 768*/
 .mobile-menu__item {font-size: 1rem;}
 .mobile-menu {background-size:cover;}        /* фон меню расширяется вместе с фоном шапки */
}
/*==============================================================================
/* стили при нажатой кнопке Гамбургер (все размеры)        border:1px solid #ddd;   
/*============================================================================*/ 
.mobile-menu__checkbox:checked ~ .mobile-menu__bgr {
  height:100%;                    /* разворачиваем синюю и белую шторки - закрываем контент */
  
}
.mobile-menu__checkbox:checked ~ .mobile-menu__nav {
  border:0px dotted white;        /* для отладки */
  position: fixed;                /* меню перемещается из верхней области занимая фиксированное новое положение */
  display:flex;                   /* гибкий дизайн остается */ 
  align-items: top;               /* но единственный элемент - список пунктов меню,- выровнен по верху */ 
  justify-content: center;        /* и по центру */ 
  top: 0;                         /* контейнер mobile-menu__nav выровнен в левом верхнем углу экрана */ 
  left: 0;                        /* контейнер вmobile-menu__nav ыровнен в левом верхнем углу экрана */
  right:0;                        /* и занимает пол экрана */
  max-width:200px;                /* !!! в bgr соответственно 100% -200px */
  width:100%;                     /* на всякий случай? как это сочетается с max-width:50%;? */
  }
  
.mobile-menu__checkbox:checked ~ .mobile-menu__nav .mobile-menu__list {
  overflow:none;                  /* ? */
  display:block;                  /* а было - flex, теперь по умолчанию контейнеры пунктов меню расположены не в строку, а столбиком */
  margin-top: 70px;               /* начинается на 20 px ниже верхней фиксированной части экрана с логотипом и гамбургером */
  width:100%;                     /* занимает всю ширину контейнера, чтобы при движении курсора к расположенному справа подменю оно не пропадало */
  height:auto;                    /* уже не нужна высота 50px горизонтального меню, так как подменю справа а не снизу */
  }

.mobile-menu__checkbox:checked ~ .mobile-menu__nav .mobile-menu__list .mobile-menu__item {
  float:none;                     /* а было - left */ 
  text-align: left;               /* выравнены по левому краю */
  font-size: 1rem;                /* крупненькие  */
  padding-left:50px;               /* колонка меню примерно по центру левой синей шторки */
  padding-bottom: 12px;           /* отступ между пунктами */
  height:auto;                    /* убираем 100% высоту контейнера для горизонтального меню (была нужна для бесшовного перехода к нижнему подменю) */
  padding-top:0;                  /* убираем отступ в контейнередля центрирования пунктов при 100% высоте */
  }

.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon {
  background: transparent;        /* при нажатой кнопке гамбургера центральная полоска исчезает */
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before, 
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
  top: 0;                         /* а верхняя и нижняя образуют косой крест (Х)) */
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
  transform: rotate(-45deg);         /* а верхняя и нижняя образуют косой крест (Х)) */
  -webkit-transform: rotate(-45deg); /* а верхняя и нижняя образуют косой крест (Х)) */
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before {
  transform: rotate(45deg);           /* а верхняя и нижняя образуют косой крест (Х)) */
  -webkit-transform: rotate(45deg);   /* а верхняя и нижняя образуют косой крест (Х)) */
}

.mobile-menu__checkbox:checked ~ .mobile-menu__nav .mobile-menu__list .mobile-menu__item .submenu {
  position:absolute;              /* подменю выравнивается справа от соответствующего пункта меню */
  border:0px solid red;           /* для отладки */
  left:100%;                      /* чуть смещено от центра при этом красиво примыкает */
  top:inherit;                    /* по топу пункта меню */
  padding-top:0px;
  padding-bottom:8px;
  border-left:0px solid #fff;
  margin-top:-36px;
  margin-left:-10px;
  z-index:300;
  transform: perspective(600px) rotateY(90deg);
  transform-origin: 0% 0%;
  transition: .3s ease-in-out;
  }
  
.mobile-menu__checkbox:checked ~  .mobile-menu__nav .mobile-menu__list .mobile-menu__item .submenu .bgr {border:1px solid #ddd;}

.mobile-menu__checkbox:checked ~ .mobile-menu__nav .mobile-menu__list  .mobile-menu__item:hover .submenu{
transform: perspective(600px) rotateY(0deg);
  }
  
.mobile-menu__checkbox:checked ~ .mobile-menu__nav .mobile-menu__list  .mobile-menu__item span.arrow {                
  display:inline-block;                       /* маленькая стредка в span появляется и выдвигается вправо при наведении курсора на пункт меню */
  -o-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  opacity:0.1;
  }
.mobile-menu__checkbox:checked ~ .mobile-menu__nav .mobile-menu__list  .mobile-menu__item:hover span.arrow {        
  display:inline-block;                     /* маленькая стредка в span появляется и выдвигается вправо при наведении курсора на пункт меню */
  -o-transform: translateX(6px);
  -ms-transform: translateX(6px);
  -moz-transform: translateX(6px);
  -webkit-transform: translateX(6px);
  transform: translateX(6px);
  opacity:1;
  }   
  
/* end of file */