/*============================================================================*/
/* ### Trunk - Общие стили сайта         
/*============================================================================*/ 
 
.trunk { 
  flex: 1 0 auto;           /* из 3 слоев body (header/feeder/footer) растягивается по вертикали именно feeder запись для 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('/_context1/img/banners/banner-project-school.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.65);       /* 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:#ff4400!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; color:#293e4f;}
}/* --- 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.forum {background:url('/_context/img/banners/banner-project-school.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.forum {background-color:rgba(5,5,29,0.6);}


  
  .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:600px; 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 «ВИДЕО»  О совещании --  два бокса во флекс контейнере  
/*============================================================================*/ 
.project_wrap 
    {
    width:100%; 
    padding:60px 0 40px;
    border: 0px solid #dd4444;
    }
    
.project_container                 
    {                           /* justify-content: flex-start; justify-content: space-between; justify-content: space-around;  */
    display: flex;              /* align-items: flex-start; align-items: center; последний имеет смысл при задании высоты контейнера */
    flex-wrap: nowrap;          /* элементы - контейнеры div внутри контейнера .box не переносятся на след линию */
    flex-direction:column;      /* элементы - контейнеры div внутри контейнера .box растягиваются по главной оси   */
    justify-content: center;    /* направление выравнивания в контейнере (главная ось) */ 
    align-items: center;    /* поперечная (гор) ось - по центру контейнера */
    padding: 0 30px;             /* отступы внутри контейнера */
    border: 0px solid #dd4444;
    }

.project_item 
    {
    width:100%;
    height:auto;
    min-height:300px;
    margin:0px;
    padding:0 10px;
    background:#fff;
    
    display:flex;
    border: 0px solid #dd4444;
    }
    
.project_item:first-child {background:#3f3f3f;}    



.project_item .video_item {margin:10px 20px; width:100%; display:flex; justify-content: center; align-items: center;}

.project_item .text_item {margin:auto; width:80%;}



.project_item p {
    font-family:'Open Sans', sans-serif;  
    color: rgb(34, 34, 34);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    margin-bottom:5px;
    display:inline-block;
  }
  
.project_item p span{
  font-weight:600;
  }
  
.project_item h3 {margin-bottom:30px;text-align:center;}
  
.project_item p.pcut{
  display:none;
  }
      
.project_item img 
    {
    width:100%;
    max-width:380px;
    margin:20px 0 10px;
    border:1px solid rgb(217,230,241);
    }
    
    
@media (min-width:960px) 
{ 
 .project_wrap {padding:80px 0 60px;}
 .project_container {flex-direction:row; justify-content: center; padding: 0 20px; }
 .project_item {width:50%;height:600px;}
 .project_item:first-child {margin:0px;}
 .project_item:last-child {margin:0px;}
 .project_item img {max-width:600px;}
 .project_item p {
    font-weight: 400;
    font-size:20px;
    line-height:32px;
    text-align: center;
    margin-bottom:10px;
  }
  
 .project_item p span{
  font-weight:600;
  }
  
 .project_item p.pcut{display:block;}
 .project_wrap a {display:none;}
}
/*==================== ### ОМС :: СТРАНИЦА 2 «ВИДЕО» =========================*/
/*============================================================================*/



/*============================================================================*/
/* ### ОМС Стр.-3  «ПРЕЗЕНТАЦИЯ»   Слайдер my-slisk.css    slick-start.js   
/*============================================================================*/
.contest-slider_wrap                            /* ширина определяет масштабирование слайдера*/
    {
    position:relative; 
    width:100%;
    max-width:800px;
    margin:auto;
    padding: 40px 0;   
    background:transpatent;
    border:0px solid #888;
    }

.contest-slider_container                       /* зарезервированное имя класса, slick-start.js*/
    {
    width:100%;
    padding:0 20px;
    }
      
.contest-sslides 
    {
    margin-top:20px;
    margin-bottom:20px;
    height:auto!important;
    -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.3);
    -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.3);
    box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.5);
    }
    
.contest-sslides img 
    {                                                                       
    width: calc(100% - 40px)!important;
    padding:20px 10px 10px;
    margin:auto;
    }
    
.contest-slick_text
    {
    font-family:'Open Sans', sans-serif;  
    color: rgb(1, 2, 2);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    margin:auto;            /* в сочетании с  display:flex; у родительского блока центрирует текст по вертикали */
    padding:0 10px 10px;
    display:block;
    height:100px;
    }
    
@media (min-width:640px) 
{ 
.contest-sslides img {padding:20px;}      
.contest-slick_text {font-size: 14px; line-height: 20px;  padding:0 20px 20px;}  
}    
   
/* ================ ### ОМС Стр.-3  «ПРЕЗЕНТАЦИЯ»   ==========================*/
/*============================================================================*/



/*============================================================================*/
/* ### OMS :: СТР.-4 «УЧАСТНИКИ» Сертификаты -- много боксов во флекс-контейнере 
/*============================================================================*/  
.sponsors_set { 
  display: flex;
  flex-direction:column;
  flex-wrap: nowrap;
  justify-content: center; 
  align-items: center;     
  }
  
.sponsors_set:nth-child(3) {margin-top:40px;}    /* первый в контейнере - div с заголовком, а первый partset - второй в контейнере */
.sponsors_set:last-child {margin-bottom:40px;}  

.sponsors_item {width:250px;height:auto;margin:30px 0 40px}

.sponsors_item img {
    
    width: 100%;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
   -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
   -webkit-transition: all .3s linear .2s;
    transition: all .3s linear .2s;    
    }

.sponsors_item:hover img 
    {
   -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
   -webkit-transition: all .3s linear .2s;
    transition: all .3s linear .2s;     
    }  
    
    
.sponsors_item p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: rgb(73, 109, 131);
    text-align: center!important;
    vertical-align: middle;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 2px;    
    }


@media (min-width:768px) {

.sponsors_set {
    flex-direction:row;
    align-items: flex-start;
    justify-content: space-around!important;
    margin-top:20px;
    margin-bottom:29px;
    }
/* Если элементов будет два, то между ними нужно равномерно распределить место  
.flex-page__partset:last-child {justify-content: space-evenly!important;}     */
   
.sponsors_item {max-width:160px;height:auto;margin:40px 0 20px}
.sponsors_item.partners {width:300px;height:auto;margin:40px 0 20px}    
}

/*============================================================================*/
/* ### ОМС :: Стр.-4:  «УЧАСТНИКИ» Аккордеон для сертификатов  https://html5css.ru/howto/howto_js_accordion.php
/*============================================================================*/ 
 .acc-section {
    width: 100%;
    margin:auto;
    padding:30px 0 0;
    box-sizing: border-box;
    border:0px solid red;
    display:flex;
    flex-direction:column;
    flex-wrap: nowrap;         /* если элементы - контейнеры div не помещаются в одной строке .flex_set - перескакивают на следующую строчку */
    justify-content: center;   /* основная (продольная) ось - группируем блоки в центре .flex_set */  
    align-items: center;   /* поперечная ось - блоки группируются  от верхнего края контейнера .flex_set */
    }

 .accordion {
    background-color: #f1f1f1;
    border:1px solid rgba(73,109,131,0.4);
    color: #444;
    cursor: pointer;
    padding: 18px;
    width:calc(100% - 36px);    /* 18*2 */

    text-align: left;
    outline: none;
    transition: 0.4s;
    margin:5px 0;
    
    font-family:'Open Sans', sans-serif;  
    font-weight: 400;
    font-size: 1rem;
    line-height:1.2rem;
    /*
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;     
    */
    }

.accordion span {display:none;}    

.active, .accordion:hover {
    color: #f1f1f1; 
    background-color: rgba(23,34,60,0.8);
    }


.accordion:after {  
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    }
    
.accordion:hover:after {  
    color: #f1f1f1; 
    }    

.active:after {
    color: #f1f1f1; 
    content: "\2212";
    }

.panel {
    background-color: white;
    height:auto;
    max-height: 0;
    overflow: hidden;
    padding: 0 18px;
    width:calc(100% - 72px);    /* 18*2 + 18*2  за счет  .answer*/
    transition: max-height 0.5s ease-out;
    }
    
 .answer {
    background: transparent;
    padding: 20px 0px 25px;
    font-family:'Open Sans', sans-serif; 

    }
    
.answer li, .answer p{
    color: #444;
    text-align: left;
    font-size: 0.9rem;
    line-height:1.2rem;
    margin-bottom:5px;
    list-style-type: square;
    margin-left:0px;
    font-weight: 400;
    
    }
    
.answer li:first-child {font-weight: 600; list-style-type: none;margin-left:0;}


.text_wrap {display: flex; flex-wrap: wrap; flex-direction:row; justify-content: center; align-item:center;  border:1px solid red}
.text_frame {background-color: #fee5db; padding: 20px 8px; border:1px solid blue; overflow:hidden}   
.text_frame p {font-size:0.75rem; line-height:1rem; padding: 4px; text-align:left; overflow:hidden}  
    
/* ---      MEDIA ЗАПРОСЫ        --- */
@media (min-width:640px) 
{
 .accordion {max-width:1200px;}     /* это заголовок аккордеона  */
 .panel {max-width:1164px;}         /* это тело шириной 800-18*2 за счет .answer*/
 .accordion span {display:inline-block;}
 .answer {padding: 20px 18px 25px;}
 .answer p { }  

 .text_frame {background-color: #fee5db; padding: 20px 8px; border:1px solid blue;}   
 .text_frame p {font-size:0.75rem; line-height:1.2rem; padding: 4px; text-align:left; margin:0}   
}
@media (min-width:960px) 
{
 .accordion {font-size: 1.3rem; line-height:1.4rem;}
 .answer li {font-size: 1.1rem; line-height:1.6rem; text-align:justify; margin-bottom:8px }
 .answer p  {font-size: 1.1rem; line-height:1.6rem;} 
 
 .text_wrap {display: flex; flex-direction:row; justify-content: space-evenly;  border:1px solid red}
 .text_frame {background-color: #fee5db; padding: 20px 8px; border:1px solid blue;}   
 .text_frame p {font-size:0.95rem; line-height:1.2rem; padding: 4px; text-align:left; margin:0}   
}

/*================ ### ОМС :: СТРАНИЦА 4 «УЧАСТНИКИ» =========================*/
/*============================================================================*/

/*============================================================================*/
/* ### ФОРУМ :: Стр.-2: «ИТОГИ»   Флекс-блок для фото с подписями   https://html5book.ru/css3-flexbox/  
/*============================================================================*/ 
.logo-set{                   /* flex-блок для фотографий членов СПР или логотипов: logo-item  */   
  display: flex;             /* элементы - контейнеры div внутри контейнера .flex_set растягиваются по горизонтали, если для них задано свойство flex:1 */
  flex-direction:row;        /* элементы - контейнеры div внутри контейнера .flex_set распределяются по горизонтали */  
  flex-wrap: wrap;           /* если элементы - контейнеры div не помещаются в одной строке .flex_set - перескакивают на следующую строчку */
  justify-content: center;   /* основная (продольная) ось - группируем блоки в центре .flex_set */  
  align-items: flex-start;   /* поперечная ось - блоки группируются  от верхнего края контейнера .flex_set */
  width:100%;
  margin:auto;
  padding-top:30px;           /* border:1px solid red; */
  }
.logo-set-padding{padding-top:30px; }

.logo-item {
  max-width:310px;
  min-width:290px;      
  margin:4px;                /* на ширине смартфоне (до 960) */
  background:transparent;
  box-shadow: 4px 4px 10px 4px rgba(0,0,0,0.25), 1px 1px 1px 1px rgba(0,0,0,0.12); 
}

.logo-item_img-wrap { border-bottom:1px solid #aaa;         /* контейнер для логотипа внутри .logo-item */
                      border-right:1px solid #ccc;
                      }
.logo-item_img-wrap img {width:100%;vertical-align:bottom;}  /* vertical-align:bottom избавляет от непонятного padding в 4 px*/

.logo-item_text-wrap {
    position:relative;              /* for triangle */
    width:inherit;
    height:2.8rem;
    padding:10px 16px;
    background:#f1f1f1; 
    }
    
.logo-item_text-wrap::before, .logo-item_text-wrap::after {
    content: '';                         /* http://htmlbook.ru/blog/treugolniki-cherez-css */
    position: absolute;                  /* Абсолютное позиционирование */
    left: calc(50% - 8px); top: -16px;   /* Положение треугольника */
    border: 8px solid transparent;       /* Прозрачные границы */
    border-bottom: 8px solid #666;       /* Видимая темная граница-треугольник */
   }
   
.logo-item_text-wrap::after {
    top: -15px;                          /* Положение вложенного треугольника */
    border-bottom: 8px solid #f1f1f1;    /* Видимая граница-треугольник совпадает с фоном rgb(211,201,194);*/
   }    
    

.logo-item_text-wrap .logo-title{  /* подпись под новостью */
    font-family:'Open Sans', sans-serif; 
    text-align:center;
    color: #111; 
    font-size:1rem; 
    line-height:1.4rem;
    font-weight:400;
    }

.logo-item_text-wrap .logo-title span {  /* для выделения дат */
    font-size:0.9rem;
    color:#921345; 
    font-weight:600;
    }
    
    
.logo-page-frame {max-width:952px; }   /* ограничение внешней обёртки блока, дополнительный класс для .page_frame */


/* ---      MEDIA ЗАПРОСЫ        --- */
@media (min-width:960px) 
{
.logo-item {margin-bottom:15px;} 
.logo-item_text-wrap .logo-title{font-size:1.1rem; line-height:1.4rem; font-weight:600;}
.logo-set-padding{padding-top:60px; }
}

@media (min-width:1290px)
{
 .logo-page-frame {max-width:1274px; }  /* ограничение внешней обёртки блока, дополнительный класс для .page_frame */
}


/*============================================================================*/
/* ### КОНКУРС :: СТР. 4 «ЖЮРИ»   много боксов во флекс-контейнере 
/*============================================================================*/
.jury-docs-wrap 
    {
    width:100%; 
    padding:30px 0 0;
    border: 0px solid #dd4444;
    }
    
.jury-docs-container                 /* Объединяет карточки команды (фото + имя)  */
    {                           /* justify-content: flex-start; justify-content: space-between; justify-content: space-around;  */
    display: flex;              /* align-items: flex-start; align-items: center; последний имеет смысл при задании высоты контейнера */
    flex-wrap: wrap;          /* элементы - контейнеры div внутри контейнера .box не переносятся на след линию */
    flex-direction:column;      /* элементы - контейнеры div внутри контейнера .box растягиваются по главной оси   */
    justify-content: flex-start;    /* направление выравнивания в контейнере (главная ось) */ 
    align-items: center;    /* поперечная (гор) ось - по центру контейнера */
    padding: 0;                 /* отступы внутри контейнера */
    border: 0px solid #dd4444;
    }

.jury-docs-item                      /* Элемент (либо фото, либо имя)  */
    {
    width:330px;
    height:auto;
    padding:20px 10px 40px;
    background:transparent;
    box-size:border-box;
    display:block;
    border: 0px solid #dd4444;
    }
.jury-docs-item_img  {width:300px;height:auto; margin:auto; margin-bottom:10px;}    
.jury-docs-item_text {width:100%; max-width:300px;margin:auto;}  
.jury-docs-item_text p {
    font-family:'Open Sans', sans-serif;  
    color: rgb(34, 34, 34);
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.3rem;
    text-align: center;
    margin-bottom:5px;

  }

.jury-docs-item_text p b {font-weight: 700!important;}


/* .flex-page__img {width:250px;height:auto; margin-bottom:20px;} */
.jury-docs-item_img img {
    width:100%;
    max-width:300px;
    height:auto;
    overflow:hidden;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    }




/* ---   MEDIA ЗАПРОС --- */ 
   
@media (min-width:640px)         /* 4 ряда по 2 айтема  */
{ 
 .jury-docs-wrap   {padding:40px 0 0;}
 .jury-docs-container {flex-direction:row;justify-content:center; align-items: flex-start;}
 .jury-docs-item {width:calc(33,33% - 20px);}
 .jury-docs-item_img  {margin-bottom:20px;}
}
@media (min-width:960px)      /* два ряда по 4 айтема  */
{
 .jury-docs-container {flex-direction:row;justify-content:space-around;}
 .jury-docs-item_text p {font-size: 1rem;line-height: 1.5rem;}
} 
/*================= КОНКУРС :: СТРАНИЦА «ЖЮРИ» ===============================*/
/*============================================================================*/

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

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