/*============================================================================*/
/* ### Trunk - контейнер для содержательной части страницы 
/*============================================================================*/ 
 
.trunk { 
  flex: 1 0 auto;           /* из 3 слоев body (header/trunk/footer) растягивается по вертикали именно trunk запись для IE (flex: 1; не работает */
  background:transparent;   /* rgb(41,62,79);/* за счет этого последний слой - footer - всегда "прилипает" к низу экрана (если виден) */   
  display: flex;            /* элементы - контейнеры страниц (page-wrap) с flex:1 равномерно растягиваются по вертикали   */
  flex-direction:column;    /* в данном шаблоне растягивается только последняя страничка */   
  }
  
/*============================================================================*/
/* ### ФОН САЙТА - Фиксированная КАРТИНКА на полный экран. С учетом низких экранов при повороте смартфона
/*============================================================================*/ 
  
.back_img{
    width:100%;                   /* контейнер с фоном занимает ровно один экран */
    height:100vh;                 /* контейнер с фоном занимает ровно один экран */
    min-height:500px;             /* ВАЖНО! чтобы надписи поверх картинки не уменьшались до бесконечности */
    z-idex:1;                     /* Важно! слой лежит нижк всех, остальные при прокрутке будут его перекрывать */
    position:fixed;               /* Важно! слой зафиксирован и не прокручивается */
    top:0;                        /* Важно! слой зафиксирован по верхней кромке экрана */
    background-color:#4f4f4f;     /* ВАЖНО! пока грузится картинка белые надписи будут читаться поверх */
                                  /* центрирует фон и фиксирует нижнюю границу при сжатии окна браузера */
    background:url('/_context/img/banners/banner-winter.jpg') center center no-repeat;
    background-size:cover;        /*  background-size:contain;  фоновый рисунок всегда вписан и не меняет размер вне зависимости от разрешений */ 
    border-top:1px solid #ddd;                                
    border-bottom:1px solid #ddd;
  }  

.back_img_filter {
    height:100vh;              /* контейнер с фоном занимает ровно один экран */
    min-height:500px;          /* ВАЖНО! чтобы надписи поверх картинки не уменьшались до бесконечности */
    z-idex:2;                  /* перекрывает back_img */
    position:static;           /* не двигается при прокрутке, как и back_img */
    background-color:          /* затемняет back_img */
    rgba(30,34,38,0.35);       /* 0.00 - полностью прозрачен. 0.99 - полностью непрозрачен*/
  }

/*============================================================================*/
/* ### ЯКОРЬ для плавной прокрутки внутри странички и Разделительная линия
/*============================================================================*/ 
.anchor {position:relative; top:-55px;}   /* ссылка-якорь <a name> с учетом фиксированной шапки-меню */

.hor-divider {height:1px; background:#efe0e0; width:80%; max-width:940px; margin: 30px auto;}


/*============================================================================*/
/* ### Страничка PAGE - КОНТЕЙНЕР СТРАНИЦ                238 240 242
/*============================================================================*/
.page_wrap 
    {
    position:relative; /* для absolute объектов поверх контейнера */
    width:100%;
    z-index:3;
    background:transparent;
    }
    
.pw_white {background:white;}
.pw_greyblue {background:rgb(187,200,211);}
.pw_silver {background:rgb(247,247,247);}
.pw_grey {background:rgb(228,228,228);}
.pw_trans {background:transparent;}

.page_frame 
    {                 /* ограничивает страничку по ширине */
    width:100%; 
    z-index:4; 
    max-width:1200px; 
    min-width:300px; 
    margin:auto; 
    }

.page_container {      /* Вертикальные отступы важны на больших экранах */
    width:100%; 
    z-index:5;
    padding-top:40px;
    padding-bottom:65px; 
    position:relative; /* для absolute объектов поверх контейнера */
    }


    
/* ---      MEDIA ЗАПРОСЫ        --- */

@media (min-width:960px) 
{
  .page_container {padding-top:120px; padding-bottom:135px;}
}       

/*============================================================================*/
/* ### Страничка PAGE -  ЗАГОЛОВКИ страничек и глав на стрвничках
/*============================================================================*/  

.page__header {               /* контейнер заголовка странички .page   */
    padding-top:40px;         /* отделяет заголовок от верха странички */
    width:auto;
    position:relative;        /* для возможного украшения before after */
    z-index: 11;              /* родитель - page_container - имеет z-index 5 */
    }
    
.ph_container {width:100%; max-width:900px; padding:0; margin:auto; text-align:center;}

.ph_container h1{             /* Общий Заголовок страницы 'Open Sans' */
    font-family:Roboto, sans-serif;     /* прямой */
    text-align:center;
    font-weight:400;
    font-size: 1.4rem;
    line-height:2.2rem;
    text-transform:none; /*uppercase;   */
    margin:0;
    display:inline-block;
    padding-left:0;
    color:rgb(60,64,68); 
}

.ph-title{position:relative; display:inline-block; }

.ph-title::before {
    content:'';
    position:absolute;
    left:-5px;
    bottom:-11px;
    width:20px;
    height:3px;
    background-color:#921345;
    }     
    
.ph-title::after {
    content:'';
    position:absolute;
    left:21px;
    bottom:-10px;
    width: calc(100% - 16px);
    height:1px;
    background-color:#424242;
    } 


.ph_container h1.light{             /* Общий Заголовок страницы*/
    color:rgb(240,244,248);
}

.page__subheader {               /* контейнер заголовка странички .page   */
    padding-top:25px;         /* отделяет заголовок от верха странички */
    width:auto;
    position:relative;        /* для возможного украшения before after */
    z-index: 11;              /* родитель - page_container - имеет z-index 5 */
    }
.page__subheader.bold {padding-top:40px;}
    
.psh_container {width:100%; max-width:400px; padding:0; margin:auto; text-align:center;} 

.psh_container h2{             /* Общий Заголовок страницы*/
    font-family:'Open Sans', sans-serif;     /* прямой */
    text-align:center;
    font-weight:600;
    font-size: 0.9rem;
    line-height:1.4rem;
    text-transform:none; /*uppercase;   */
    margin:0;
    display:inline-block;
    padding-left:0;
    color:rgb(60,64,68); 
}
.psh_container h3 {font-weight:400;font-size: 1rem;}

.psh_container h2.light, h3.light{             /* Общий Заголовок страницы*/
    color:rgb(175,175,175);
}

.psh_container h2.white, h3.white{             /* Общий Заголовок страницы*/
    color:rgb(240,240,240);
}

.psh_container h2 a,
.psh_container h2 a:visited {color:inherit!important;border-bottom:#444 dashed 1px!important;}

.psh_container h2 a:hover {color:#d44!important;}

.page_chapter {               /* Обертка заголовка раздела */
    padding-top:50px;         /* отделяет от верха  */
    width:auto;
    }
pch_wrap {               /* Контейнер заголовка раздела */
    width:100%; 
    max-width:900px;
    margin:auto;
    padding 0 20px; 
    }   
.pch_container {padding:0 20px;} 


.pch_container h1{             /* Заголовок раздела */
    font-family:'Open Sans', sans-serif;     /* прямой */
    text-align:left;
    font-weight:600;
    font-size: 1rem;
    line-height:1.2rem;
    text-transform:none;
    color:#111;
    margin:0 auto!important; 
}



/* ---      MEDIA 380        --- */
 
@media (min-width:640px) 
{
 .ph_container h1 {font-size: 1.6rem; line-height:2.6rem; }
 .pch_container h1{font-size: 1.3rem; line-height:1.8rem; }
}
@media (min-width:960px) 
{
  .ph_container h1 {font-size: 2.2rem; line-height:2.6rem; }
  .pch_container h1{font-size: 1.45rem; line-height:2.0rem; }
  .page__subheader {padding-top:30px; }
    
  .psh_container h2 {font-size: 1.2rem; line-height:1.8rem; }
  .psh_container h3 {font-size: 1.15rem;}
}
@media (min-width:1200px) 
{  
  .ph_container h1 {font-size: 3.25rem; line-height:4rem; }
  .psh_container h2 {font-size: 1.3rem; }
  .page__subheader.bold {padding-top:60px;}
}

/*============================================================================*/
/* ### Страничка PAGE -  КНОПКИ НА СТРАНИЧКАХ  для тега <a>
/*============================================================================*/  

.a-button-wrap {           /*  контейнер кнопки внутри контейнера .canvas  */
  margin:25px 0 0;           /* отступ от верхнего блока */
  display:flex;
  flex-direction:column;     /* кнопки на узких экранах располагаются в колонку по центру */
  align-items:center;
  justify-content: center;    /* направление выравнивания в контейнере (главная ось) */ 
  }  

.a-btn {                    /*  класс кнопки внутри контейнера .canvas  */
    display: inline-block;
    font-family:'Open sans', sans-serif; 
    font-weight: 400;
    text-align: center;
    vertical-align: middle;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
        
    color:#111; 
    background-color:rgba(84,84,84,0.0);
    border:1px solid rgba(73,109,131,0.9);
    padding: 25px 20px;
    width:220px;
    font-size: 1rem;
    line-height: 1.5;
    margin: 8px 4px 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    
    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    }
    
.a-btn.black {
    color:#111;
    border:1px solid #b8b8b8;
    }    
    
.a-btn:hover {
    color: #f1f1f1; 
    background-color: rgba(23,34,60,0.8);
    text-decoration:none;
    } 

/* ---      MEDIA 380        --- */
     
@media (min-width:640px) 
{
 .a-button-wrap {           /*  контейнер кнопки внутри контейнера .canvas  */
   margin:60px 0 0;    /* отступ от верхнего блока */
   text-align: left;
   flex-direction:row; /* кнопки внутри контейнера располагаются в ряд слева направо */
   align-items:center;
   justify-content: center;    /* направление выравнивания в контейнере (главная ось) */ 
  
   } 
 .a-btn {
    margin-top: 10px; 
    font-size: 1.05rem;
    padding: 25px 5px;
    width:140px;         /* на широких экранах кнопки пошире */
    }
}
@media (min-width:960px) 
{
   
 .a-btn {
     font-size: 1.15rem;
     margin-top: 10px; 
     padding: 25px 20px;
     width:200px;         /* на широких экранах кнопки пошире */
     }        
}

/*============================================================================*/
/* ### Страничка PAGE -  СТАТЬИ
/*============================================================================*/  
.article-wrap
    {
    width:100%; 
    padding:60px 0 0;
    }
    
.article-wrap.internal {padding:20px 0 0;}    
    
article {display:block; padding:0 20px}

article.first {padding-top:20px;}
article.last  {padding-bottom:30px;}

article p
    {
    font-family:'Open Sans', sans-serif;  
    color: rgb(41, 62, 79);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: justify;
    margin-bottom:5px;
    }
    
article p.bold 
    {
    line-height:110%;
    font-weight: 600;
    padding-left:30px;
    color:#000; 
    font-weight:600;
    }    
    
article p a         {color:#22f!important; text-decoration:none!important}    
article p a:hover   {color:#f22!important; } 
article p a:active  {color:#22f } 
article p a:visited {color:#22f }

article p a.dotted-red,
article p a.dotted-red:visited {color:inherit!important;border-bottom:#444 dashed 1px!important;}
article p a.dotted-red:hover {color:#d44!important;}

article p.pcut{display:none;}  
span.scut {display:none;}   /* убираем ненужные части текста на малых экранах */

/* ---  MEDIA ЗАПРОСЫ   --- */

@media (min-width:640px) 
{/* --- 640 --- */ 
 .article-wrap   {padding:80px 0 0;}
 .article-wrap.internal {padding:40px 0 0;}  
 
  article.first {padding-top:30px;}
  article.last  {padding-bottom:40px;}
  article p 
    {
    /* text-align: justify; */
    margin-bottom:20px;
    font-size: 18px;
    line-height: 26px;
    }
    
   article p.bold {line-height:40%;}   
   
   article p.pcut{display:inline-block;}
   span.scut{display:inline;}
}/* --- 640 --- */ 


/*============================================================================*/
/* ### Страничка PAGE -  ХЛЕБНЫЕ КРОШКИ    breadcrumbs
/*============================================================================*/  
.bc_wrap {              /* Внешняя обертка для Хлебных Крошек */
  width:100%; 
  background:#fff;
  }
  
.bc_frame{              /* Рамка - ограничитель ширины для Хлебных Крошек */
  max-width:1200px; 
  min-width:300px; 
  margin:auto;
  }
  
.bc_container {         /* Контейнер с вертикальными и горизонтальными отступами для Хлебных Крошек */
  padding:60px 0 10px 20px;
  }
  
.bc_container p {      /* Шртфт для Хлебных Крошек */
    color:#666;
    text-transform:none;
    font-family: 'Open Sans', sans-serif;
    font-size:0.8rem;
    font-weight:400;
    text-decoration:none;
    padding:1px 0;
    }
    
.bc_container p a,
.bc_container p a:visited {color: #111; border-bottom:#bbb dashed 1px!important;} 
.bc_container p a:hover   {color:#d44!important;}   
    
/*============================================================================*/
/*======================= Конец общей части стилей ===========================*/
/*============================================================================*/



/*============================================================================*/
/* ### РЕГИОНЫ :: Стр.-1: «Заголовок»   Узкая фоновая картинка
/*============================================================================*/ 
.pw-bgr {                  /* фоновая картинка в для page-wrap */
    position:relative;
    /* margin-top:50px;  */    /* отступ из под фиксированного меню теперь будет в breadcrumbs - Хлебных крошках} */
    background-size:cover;
    /*  filter: blur(10px); размытие фона; */
    } 
                
             
.pw-bgr.regions {background:url('/_context/img/banners/banner-grass-1.jpg') center center no-repeat;    
                 background-size:cover;}       
    
.pw-filter {          /* фильтр для затемнения фоновой картинки */
    height:100%;              /* совпадает с page-wrap   */
    width:100%;               /* совпадает с page-wrap   */
    background-color:         /* затемняет фон page-wrap */
    rgba(50,50,5,0.4);       /* 0.99 - полностью непрозрачен */
    }

.pw-filter.regions {background-color:rgba(5,5,50,0.4);}


  
  .ht-wrap {                  /* контейнер заголовка общей шапки страницы   */
    padding-top:30px;         /* отделяет заголовок от верха странички */
    width:auto;
    position:relative;        /* для возможного украшения before after */
    z-index: 11;              /* родитель - page_container - имеет z-index 5 */
    }
    
.ht_container {width:100%; max-width:600px; padding:0; margin:auto; text-align:center;}

.ht_container h1{             /* Общий Заголовок страницы*/
    font-family:'Open Sans', sans-serif;     /* прямой */
    text-align:center;
    font-weight:400;
    font-size: 1.8rem;
    line-height:2.2rem;
    text-transform:none; /*uppercase;   */
    margin:0;
    display:inline-block;
    padding-left:0;
    color:rgb(60,64,68); 
}

.ht_container h1.light{             /* Общий Заголовок страницы*/
    color:rgb(240,244,248);
}


.hst_container {width:100%; max-width:400px; padding-top:20px; margin:auto; text-align:center;} 

.hst_container h2{             /* Общий Заголовок страницы*/
    font-family:'Open Sans', sans-serif;     /* прямой */
    text-align:center;
    font-weight:600;
    font-size: 1.2rem;
    line-height:1.4rem;
    text-transform:none; /*uppercase;   */
    margin:0;
    display:inline-block;
    padding-left:0;
    color:rgb(60,64,68); 
}

.hst_container h2.light{             /* Общий Заголовок страницы*/
    color:rgb(175,175,175);
}

.hst_container h2.white{             /* Общий Заголовок страницы*/
    color:rgb(240,240,240);
}

/* ---      MEDIA   --- */
@media (min-width:960px) 
{
  .ht_container  h1 {font-size: 2.4rem; line-height:3rem; }
  .hst_container h2 {font-size: 1.3rem; line-height:1.8rem; font-weight:400;}
  .ht_container h1 {font-size: 3rem; line-height:3.8rem; }
  .header-bgr {height:500px;}
}

@media (min-width:1200px) 
{
  .ht_container h1 {font-size: 4rem; line-height:4.8rem; }
} 
/*==== РЕГИОНЫ :: Стр.-1: «Заголовок» ======================================*/




/*============================================================================*/
/* ### РЕГИОНЫ:: Стр.-2: «Список региональных отделений»  Обертка странички
/*============================================================================*/ 
.flex-page__wrap {                      /* обертка странички- полоса на всю ширину экрана */
    background-color: rgb(240,237,236); /* включает несколько горизонтальных полос section одна под другой */
    display: flex;
    flex-direction:row;                 /* выравнивание по вертикали для смартфонов */ 
    align-items: center; 
    justify-content:center;             /* выравнивание по центру */
    }
           
.last-page {                 /* дополнительный класс к классу контейнера flex-page__wrap */
    height:0px;              /* если хватает других страничек заполнить окно в высоту, то её не видно */
    flex: 1 0 auto;          /* родительский контейнер - .feeder (flex-direction:column;)*/
    }                        /* flex-page__wrap .last-page - растягивается в вертикальном направлении  */
  
.first-page {
  padding-top:55px;         /* отступ под зафиксированное по верхнему краю экрана Главное меню */
  }
  
.flex-page__section {       /* полоса на всю ширину экрана */
    display: flex;          /* элементы - контейнеры внутри section с flex:1 равномерно растягиваются   */
    flex-direction:row;     /* выравнивание по горизонтали */ 
    align-items: center;    /* по вертикали по центру */
    justify-content:center; /* по горизонтали по центру */
    width:100%;             /* растягивается на всю ширину экрана */
    max-width:992px;        /* но ограничен центральной зоной на широких экранах */
    background-color:white; 
    border-top:1px solid #e0d7d6;
    border-bottom:1px solid #e0d7d6;
    margin-top:3px;         /* темный просвет между новостными блоками */
  }
  

#last-page {padding:0; }                      /* Последняя страничка невидима ноотделяет 5зч от footera*/

.flex-page__container {           /* собственно контейнер горизонтальной странички ограниченной ширины (на широких экранах) */
    padding: 10px 15px;           /* состоит из вертикально сгруппированых полос .page-header, page-feeder, .page-footer  */
    width:calc(100% - 30px);      /* растягивается на всю ширину контейнера с отступом */
   }

.flex-page__header {               /* контейнер заголовка странички .page */
    position:relative;
    padding:30px 5px 10px;
    width:auto;
    }

.flex-page__header h1{             /* Общий Заголовок страницы*/
    position:relative;
    font-family: Roboto;
    font-size: 1.6rem;
    line-height: 1.3rem;
    font-weight: 300; 
    text-transform:uppercase;
    display:inline-block;
    }

.flex-page__header h1::before {
    content:'';
    position:absolute;
    left:-2px;
    bottom:-11px;
    width:20px;
    height:3px;
    background-color:#921345;
    }                                                                                                                              
    
.flex-page__header h1::after {
    content:'';
    position:absolute;
    left:21px;
    bottom:-10px;
    width: calc(100% - 16px);
    height:1px;
    background-color:#424242;
    }
    
.flex-page__header h2{             /* Частный Заголовок раздела страницы*/        
    font-family: 'Open Sans', sans-serif;     /* прямой */
    color:rgb(41, 62, 79);
    text-align:center;
    font-weight:600;
    font-size: 1.2rem;
    line-height:1.9rem;
    }
    
.page-main-header {padding-bottom:30px;} /* для заглавия страницы НОВОСТИ*/       
    
.t-left {text-align:left;}            /* дополнительный класс для контейнера .flex-page__header */
.t-center {text-align:center;}        /* дополнительный класс для контейнера .flex-page__header */
.t-right {text-align:right;}          /* дополнительный класс для контейнера .flex-page__header */


/*============================================================================*/
/* ### РЕГИОНЫ:: Стр.-2: «Список региональных отделений»  Обертка списка
/*============================================================================*/

#spr-top-img {                    /* фоновая картинка вверху страницы на малых экранах не видна */
  background:none;
  background-size:contain;        /* background-size:cover; растягивает фон на весь экран при изменении разрешения монитора  */ 
                                  /*  background-size:contain;  фоновый рисунок всегда вписан и не меняет размер вне зависим */
} 

.flex-page__sprWrap {padding:15px 20px; z-index:200;}                                       
.flex-page__sprBox {padding-bottom:1px;}

.flex-page__sprBox p {
    color: #111;
    font-family: Times New Roman, serif;     /* прямой */
    font-weight:400;
    font-size:1rem;
    text-align:left;
    line-height:1.3rem;
    padding:2px 0;
    margin-bottom:20px;
    }
    
.flex-page__sprBox p.wide {display:none;}   /* виден на широких экранах */ 
    
.flex-page__sprBox ul {
    list-style-type:square;
    margin-left:10px;
    margin-bottom:20px;
    }
.flex-page__sprBox ul li{
    color: #444;
    font-family: 'Open Sans', sans-serif;     /* прямой */
    font-weight:600;
    font-size:.95rem;
    text-align:left;
    padding-bottom:.9rem;
    }
.flex-page__sprBox ul li:last-child{
    padding-bottom:0;
    }
    
a.spr {color:#22e;}
a.spr:hover {color:#90f!important;}
a.spr:active {color:#e22!important;} 
a.spr:visited {color:#22e;} 

@media (min-width:530px) {{}
  #spr-top-img{background:url('/_context/img/spr-members/members.jpg') top center no-repeat; background-size:contain;}
  .flex-page__sprBox ul {margin-left:30px;}
}
       
@media (min-width:768px) {{}                                                               
.flex-page__sprBox p {font-size:1.15rem;line-height:1.4rem; padding:2px 10px;padding:2px 10px; text-align:justify;}                  /* Обертка фрейма яндекс карты */
.flex-page__sprBox p.wide {display:block;} 
.flex-page__sprBox ul {margin-left:80px;}
.flex-page__sprBox ul li {font-size:1rem;}
.spr-title {text-align:left;}

}
@media (min-width:1000px) {{}
.flex-page__sprBox p {font-size:1.25rem;line-height:1.6rem;}
.flex-page__sprBox ul li {font-size:1.05rem;}              
}

/*============================================================================*/
/* ### РЕГИОНЫ:: Стр.-2: «Список региональных отделений» элементы списка
/*============================================================================*/ 
                         /* box - это flex-контейнер для кнопок региональных отделений */
.box {                   /* justify-content: flex-start; justify-content: space-between; justify-content: space-around;  */
                         /* align-items: flex-start; align-items: center; последний имеет смысл при задании высоты контейнера */
  display: flex;         /* элементы - контейнеры div внутри контейнера .box растягиваются по горизонтали   */
  flex-direction:row;    /* если для них задано свойство flex:1 */  
                         /* в данном шаблоне растягивание отдельных элементов заменено выравниванием промежутков между ними по горизонтали */  
  flex-wrap: wrap;       /* элементы - контейнеры div внутри контейнера .box распределяются по горизонтали */
                         /* если места не хватает, элементы не сжимаются, а переходят в нижние ряды */
  justify-content: center;      /* основная (продольная) ось - равномерные поля справа и слева вокруг каждого блока */  
  align-items: flex-start;      /* поперечная ось - блоки группируются  от верхнего края контейнера .box */
  }

.box div {                       /* контейнер с документом */
  height: 220px;
  width:  280px;                 /* ширина и поля задают ширину экрана, при которой должен менятся режим упорядочения со space-around на space-between */
  margin:0 10px 20px 10px;       /* на узких экранах - space-around для центровки блоков на экране, на широких - space-between для раздвижки к краям   */
  border:1px solid #dfdfdf; 
  background: rgb(186,154,114);
  background: rgb(170,140,119);
  background: rgb(102,45,28);  
  background: rgb(178,107,77);
}
.box div:hover {
   background: rgb(73,109,131);
  }

.box div.noref:hover {
   background: rgb(168,97,67);
  }

.box div p{
  color:#fff;
  font-family: Times New Roman, serif;     /* прямой */
  font-weight:400;
  font-size:1.2rem;
  line-height:1.6rem;
  text-align:center;
  padding:10px 10px ;
  }
  

.box div img{
  margin:20px 20px;
  max-width:21px;
  max-height:21px;
}

@media (min-width:1000px) {{} /* Расчет ширины перехода в ряды для n блоков шириной W: W*n+80 */

  .box {
    justify-content: space-around; /* space-between; основная (продольная) ось - равномерные промежутки между блоками, крайние прижаты к краям */
    }
}

 
.box div.regs {                       /* контейнер с документом */
  height: 70px;
  width:  280px;                 /* ширина и поля задают ширину экрана, при которой должен менятся режим упорядочения со space-around на space-between */
  margin:0 2px 4px 2px;       /* на узких экранах - space-around для центровки блоков на экране, на широких - space-between для раздвижки к краям   */
  border:1px solid #dfdfdf; 
  background: transparent;
  }
.box div.regs div.regs_icon,             /* иконка СПР */
.box div.regs div.regs_code,             /* код региона */
.box div.regs div.regs_name,             /* название региона */
.box div.regs div.regs_sprn,             /* название РО */
.box div.regs div.regs_topm              /* ФИО руководителя */
  {
   width: auto;
   height: calc(30% - 2px);
   margin:0;
   padding:0 8px 2px 0;
   border:0px solid #dfdfdf;
   background: transparent;
  }
  
.box div.regs p{
  color:#555;
  font-family: Times New Roman, serif;     /* прямой */         
  font-weight:400;
  }  
    
.box div.regs div.regs_icon {display:block;}                 /* иконка, под курсором - исчезает */ 
.box div.regs div.regs_code {display:none;float:left;}       /* номер региона, под курсором - появляется */ 
.box div.regs div.regs_code p.regs_code {font-size:.85rem;padding-top:6px;margin:0;line-height:.85rem;}
.box div.regs div.regs_name {display:none;}                  /* название региона, под курсором - появляется */
.box div.regs div.regs_name p.regs_name {font-size:.85rem;padding-top:6px;margin:0;line-height:.85rem; text-align:left;}
.box div.regs div.regs_topm {display:none;}                  /* фио руководителя, под курсором - появляется */
.box div.regs div.regs_topm p.regs_topm {font-size:1rem;padding-top:6px;margin:0;line-height:1.15rem;}
.box div.regs div.regs_sprn {display:block;}                 /* название регионального отделения, под курсором - исчезает */ 
.box div.regs div.regs_sprn p.regs_sprn {font-size:1.2rem;line-height:1.7rem; margin:0 auto; padding:0;}
  
.box div.regs:hover {                                        /* под курсором синеет */
   background: rgb(73,109,131);
  }
  
.box div.regs:hover p{                                       /* под курсором белеет */
  color:#fff;
  }
  
.box div.regs:hover div.regs_icon {display:none;}            /* под курсором иконка исчезает */
.box div.regs:hover div.regs_code {display:block;}           /* под курсором номер региона - появляется */
.box div.regs:hover div.regs_name {display:block;}           /* под курсором название региона - появляется */
.box div.regs:hover div.regs_topm {display:block;}           /* под курсором фио руководителя - появляется */
.box div.regs:hover div.regs_sprn {display:none;}            /* под курсором название регионального отделения - исчезает */

.box div.regs img{
  margin:10px 2px 0px 10px;
  max-width:21px;
  max-height:21px;
  }

#regs-top-img {                    /* фоновая картинка вверху страницы на малых экранах не видна */
  background:none;
  position:relative; 
  overflow:hidden;
  height:80px;         /* background-size:cover; растягивает фон на весь экран при изменении разрешения монитора  */ 
  }                                /*  background-size:contain;  фоновый рисунок всегда вписан и не меняет размер вне зависим */

@media (min-width:530px) {{}
  #regs-top-img{background:url('/_context/img/banners/banner-regions.jpg') center center no-repeat; background-size:cover;}
  #regs-top-img {height:160px;}
}
@media (min-width:690px) {{}
  .box div.regs {margin:0 4px 8px 4px;}
  .box div.regs p{text-align:center; padding:0px 10px;}
}

@media (min-width:992px) {{}
  .box div.regs {margin:0 10px 20px 10px;}
}


/*============================================================================*/
/* ### РЕГИОНЫ:: Стр.-3:  «Обращение в РО с сайта» (Обработка TopDownMenu.js)  для mess.php  
/*============================================================================*/
.contact-mask{                   /* маска для остальной части экрана ПОД ШАПКОЙ!!! шапка реагирует на onclick самостоятельно */
 position:fixed;                 /* ВАЖНО!!  всегда на одном месте  */
 z-index:2000;
 left:0;                         /* ВАЖНО!! закрывает всю страницу */
 top:0;                          /* ВАЖНО!! закрывает всю страницу */
 height:100vh;                    /* ВАЖНО!! закрывает правую часть страницы целиком и не участвует в прокрутке (fixed) */
 width:0;                      /* ВАЖНО!! ширина задается в topdown-menu.js, в начале должна бвть 0 (меню не видно)*/
 /*background-color: rgba(41,62,79,0.95); /* Прозрачность (0.75 - видимо  прозрачен) с непрозрачным текстом */
 background:url('/_context/img/banners/banner-grass-3.jpg') center center no-repeat; background-size:cover;    /* */
 }
 
.contact-filtr {
    height:100%;              /* совпадает с page-wrap   */
    width:100%;               /* совпадает с page-wrap   */
    background-color:         /* затемняет фон page-wrap */
    rgba(5,5,30,0.2);         /* 0.99 - полностью непрозрачен */
    }

.contact-page {
 position:fixed;                 /* ВАЖНО!!  всегда на одном месте  */
 z-index:2001;
 top:10px;                       /* ВАЖНО!!  отступ от верха страницы */
 left:0;                         /* ВАЖНО!! до вызова - вне экрана */  
 right:0;
 width:0px;                      /* ВАЖНО!! ширина задается в topdown-menu.js, в начале должна бвть 0 (меню не видно)*/
 max-width:700px;
 margin:auto;                    /* ВАЖНО!! по центру страницы */
 text-align:left;                /* отступ слева задается в <li> */
 background-color: rgba(222,218,221,0.7);   /* Прозрачность (0.7 - видимо  прозрачен) с непрозрачным текстом */
 color: #323223;                 /* темный текст, реальный цвет текста - в <li> <a> */
 height:460px;                   /* замедленное появление/скрытие */
 /* border:1px solid #fff;    */ /* почему-то статический бордюр не дает вывести окно, меняю динамически в Open_Mess_Form в mess.php */
   -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px   /* */
  overflow-y: auto;
}

.contact-page:hover {background-color: rgba(222,218,221,1);}  /* так удобнее читать и писать */

.contact-page .page-frame{  
     z-index:2002;                 /* ВАЖНО!! поверх тоp-down меню */
     overflow:hidden;
     overflow-y:auto;             /* ВАЖНО!! имеет правую полосу прокрутки при уменьшении вертикального размера окна */
     height:100%;                 /* ВАЖНО!! это позволяет видеть всю полосу прокрутки  для выпадающего меню(64px-смещение fix div) height:calc(100% - 64px);  */
     /*width:100%;                /* ВАЖНО!! на всю ширину top-down меню */
     background-color: transparent;
          
    } 

.contact-page .page-frame .close-sign {
     padding:20px 20px 0; 
     text-align:right; 
     font-size: 46px; 
     text-transform: uppercase; 
     font-stretch: none; 
     font-weight: 400; 
     color:#676767; 
     margin-bottom:-10px;
    }
 
.contact-page .page-frame .contact-text{  /* блок с текстом заголовка окна */
    width:100%; 
    margin:auto;
    margin-bottom:6px;
   } 
 
.contact-page .page-frame .contact-text p{
    font-family: 'Open Sans', sans-serif;     /* прямой */
    color:rgb(41, 62, 79);
    text-align:left;
    font-weight:400;
    font-size: 1rem;
    line-height:1.4rem;
    padding:0 4px;
   } 
   
.contact-page .page-frame .contact-text p.small{
    font-size: .9rem;
    }   
                                              /* это дополнительный класс для заглавия */
                                              
                                              /* #mess_status -  строка подтверждения отправки */
#mess_status {font-size:.9rem; line-height:1.7rem; text-align:center;display:none;
              background-color:#fefefe;border:1px solid #a8a8a8;}                                              

                                              /* #pers_data - текст согласия на обработку */                                              
#pers_data   {font-size:.9rem; line-height:1.4rem; text-align:center;display:block;}

                                              /* #consent - чекбокс согласия */
#consent     {width:20px; height:20px; font-weight:200; display:inline-block!important;}

.border-red {border:1px solid #f55;}

.contact-page   .page-frame .close-sign a{color:inherit; text-decoration:none}
.contact-page   .page-frame .close-sign a:hover{color:#ff2323;} 



.pointer:hover {cursor:pointer;}   /* для кнопок Отправить Очистить*/

@media screen and (min-width: 640px){{}
.contact-page {top:64px;}
.contact-page .page-frame .contact-text p{font-size: 1.1rem;}
.contact-page .page-frame .contact-text p.small{font-size: 1rem;}

}

/*============================================================================*/
/* ### РЕГИОНЫ:: Стр.-3:  «Форма отправки сообщения в РО»   для mess.php
/*============================================================================*/
.pform {width:calc(100% - 20px); min-width:320px; max-width:600px; margin:auto; margin-top:4px; }
.pform {overflow:hidden;}
.class-form {width:100%;border:0px solid #ddd}

.pform table {width:100%; min-width:320px; margin:auto; border:0px solid #f0f}


.pform td.td-button {
   border:0px solid #fff;
   text-align:center;
   font-family: 'Arial';  
   font-size: 16px; 
   line-height: 24px;
   }
.pform td.td-button .button {
  color:#444;
  width:100px;
  padding:8px 4px;
  background-color:rgba(255,255,255,0.9); 
  margin-right:8px;
  border:1px solid #b8b8b8;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px  
  }

.pform td.td-button .submit {
  color:#444;
  width:110px;
  padding:8px 4px;    
  background-color:rgba(255,100,80,0.9);
  color:#fff; 
  margin-right:8px;
  border:1px solid #ff7460;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px  
  }  
 

.pform td.value input 
    {
    white-space: nowrap; 
    height:34px; 
    width:calc(100% - 14px); 
    min-width:100px; 
    padding:0 6px;
    margin-bottom:4px; 
    color:#555; 
    background-color:#fefefe;
    border:1px solid #a8a8a8;
    }
.pform td.value textarea 
    {
    padding:0 6px; 
    width:calc(100% - 14px);
    border:1px solid #a8a8a8;
    color:#555; 
    background-color:#fefefe; 
    margin-bottom:4px;
    resize: none;
    }

@media screen and (min-width: 640px){{}

}



/*============================================================================*/
/*============================================================================*/
/*============================================================================*/

/* ==== Конец файла ====   */