body {
    font-family     : philosopher;
    background-color: #2F4F4F    ;      /*    Цвет фона #2F4F4F             */
    background-size : cover      ;      /*    Масштабируем фон              */
 }
 /*div.card {border:  2px solid blue;} только для карусели, если понадобится */

 /* -------------- Теги h2, h3, h4, h5, h6. p -------------------------------*/ 
 h3 {
    text-align : center       ; 
    padding    : 10px 0 5px 0 ;
    font-size  : 1.4em        ;
    line-height: 1.3em        ;
    color      : white        ;
 }
 /* Карта сайта. новости */
 h4 {
    text-align : left  ; 
    padding    : 0 0 0 10px;
    font-size  : 1.2em ;
    line-height: 1.2em ;
    color      : white ;
 }
 .user_map {
    text-align : left  ; 
    padding    : 0 10px 0 10px;
    font-size  : 1.2em ;
    line-height: 1.2em ;
    color      : white ;
 }
 /* подсказка, нужно зарегистрироваться чтобы
  подать заявки на соревнования, для размещения новости на сайте */
 .attention {
    font-size  : 1.3em;
    line-height: 1.2em;
    color      : black;
 }
 /* для показа иконок fontawesome */ 
 .fontawesome {
    font-size       : 1.1em   ; /* определяет высоту  иконки fontawesome */
    color           : blue    ;
 }
 /* стрелка в качестве привлечения внимания */
span.arrow{
    font-size       : 1.1em;    /* высота стрелки */
    color           : red  ;    /* цвет стрелки   */
 }
 /* закрыть модальное окно */
 .for_VideoModal {font-size: 1em; color: white;}
 /* черный ящик */
 .for_popup{
    text-align : left       ;
    font-family: philosopher;
    padding    : 3px 7px 3px 3px;
    font-size  : 1.2em      ;
    line-height: 1.1em      ;
    color      : black      ;
  }
 /* Кнопка с тенью  */
.bump{
    background-color: #2F4F4F;
    padding         : 5px    ;
    border-radius   : 15px   ;
    color           : white  ;
    box-shadow      : inset rgba(0,0,0,.5) -3px -3px 4px, inset rgba(255,255,255,.9) 3px 3px 4px;
 }
 /* Классы для image */
.img_adm {
        position      : relative     ;
        float         : right        ;
        border        : 1px solid white;
        border-radius : 5px          ;
 }
 .img_obe{
    position     : relative;
    float        : left    ;
    margin-left  : 1.5rem  ;
    margin-right : 1.5rem  ;
 }
 .img_blackbox{
    position     : relative;
    float        : left    ;
    margin-right : 5px     ;
 }
 .img_emblema{ 
    position     : relative;
    float        : left    ;
    margin-top   : 0       ;
    border       : 1px solid white;    
    border-radius: 10px    ;
 }
.img_thumb{
    position     : relative;
    float        : left    ;
    margin-top   : 10px    ;
    margin-left  : 10px    ;
    border       : 2px solid white;    
    border-radius: 5px     ;
 }
 .img_functionality{
    position     : relative;
    float        : left    ;
    margin       : 10px;
    border-radius: 5px     ;
 }
 /* столбцы таблицы */
 td{font-size: 1.1em; border: 1px solid black;}
 .ivent {
    background-color: gray  ;
    width           : 5%    ;
    text-align      : left  ;
    font-size       : 1.3em ;
    color           : white ;
 }
 /* -------- Ссылки из NavBar, модальные окна кнопка Закрыть  -----------*/
 a{font-family: philosopher; font-size: 1.3em; color: white;}
 a:hover {background-color: white; color: black;}
 /* --------- Ссылки из раздела познавательной части сайта ---------------*/
 .details{
        background-color: #000080;
        text-decoration : none   ;
        font-family     : philosopher;
        padding         : 5px    ;
        margin-left     : 10px   ;
        font-style      : italic ;
        font-size       : 1.2em  ;
        color           : white  ;
 }
 .for_navbar{
    font-family     : philosopher      ;
    text-align      : left             ;
    text-decoration : none             ;
    padding         : 10px;
    font-size       : 1.5em            ;
    color           : black            ;   
 }
 /* пользовательский цвет навигационной панели */
 .navbar-custom {
    background-color: #E6E6FA;
    box-shadow:
        inset rgba(0,0,0,.5) -3px -3px 4px,
        inset rgba(255,255,255,.9) 3px 3px 4px,
        rgba(0,0,0,.8) 3px 3px 8px -3px;
    color      : black;
    padding-bottom: 1.5rem;
 }
.for_Carousel {
    background-color: white ;
    padding         : 5px 5px 5px 10px;
    font-style      : italic;
    font-size       : 1.3em ;
    line-height     : 1.2em ;
    color           : black ;
 }
/* для комментария миниатюр в карточках */
.comment{
        margin-left  : 7px  ;
        margin-right : 5px  ;
        font-size    : 1.3em;
        line-height  : 1.2em;
        color        : white;
 }
.for_modal_header{
    background-color: blue ;
    padding         : 5px  ;
    color           : white;
 }
 /* класс для унификации кнопок */
.my_button {
    margin-left : 5px  ; /* если использовать иконку */
    margin-right: 5px  ;
    font-size   : 1.2em;
 }
.nautilus { 
    font-family: nautilus;
    font-style : italic  ; 
    font-size  : 1.2em   ; 
    color      : black   ;
 }
 /* По умолчанию выравнивание в tooltip-inner по центру vedenin, ЧМ-2021 Оберстдорф */
.tooltip-inner {
        background-color: black          ;
        max-width       : 230px          ;
        width           : 230px          ;
        font-family     : philosopher    ;
        text-align      : left           ;
        padding         : .3rem          ;
        line-height     : 1.3rem         ;
        font-size       : 1.3rem         ;
 }
 /* Фон для видео mp4 */
.for_poster {background-color: gray; border: 1px solid white;}
 /* Атрибуты всплывающей панели Popover - обучающие диагностические сообщения      */
 .popover{
    max-width    : 450px;
    width        : 450px;
    margin-left  : 20pt ;
    border       : 1px solid black;
 }
 /* -----  jumbotron ------- */
 .jumbotron{
    background-color: #E7E7E7;
    padding-bottom  : 1.3em  ;
    margin-left     : 1rem   ;
    margin-right    : 1rem   ;
    box-shadow:
        inset rgba(0,0,0,.5) -3px -3px 4px,
        inset rgba(255,255,255,.9) 3px 3px 4px,
        rgba(0,0,0,.8) 3px 3px 8px -3px;
    color      : black;
 }
 .for_jumbotron {
    text-align      : center;
    padding-top     : 1rem  ;
    font-size       : 1.5em ;
    line-height     : 1.1em ;
    color           : black ;
 }
 /*      разделительная черта <hr/>      */
 .end_section{
    width     : 50%  ;
    margin    : auto ; /* по центру */
    border-top: 4px solid #2F4F4F;
 }
 /*=== стрелки для листания карусели ====*/
 .fa-arrow-left,
 .fa-arrow-right {
        background-color: blue  ;
        padding         : 10px  ;
        margin-bottom   : 10px  ;
        color           : white ;
        font-size       : 1.5rem;
 }
 /* для читабельности разделов сайта */ 
 .text_twopart_site{
        text-align : left ;
        font-size  : 1.6em;
        color      : black;
 }
 /* любознательность вам в попутчики */
 .text_recognize_site{
        font-style    : italic;
        text-align    : center;
        font-size     : 1.4em ;
        line-height   : 1em   ;
        color         : black ;
 }
 .new_section{
    border-top   : 2px solid white;
    border-bottom: 2px solid white;
}
 /*  Функциональная часть главной страницы  */
 .add_functional{
        background-color: white;
        margin-left     : 1rem ;
        margin-right    : 1rem ;
        padding-bottom  : 1rem ;
        border-radius   : 10px ;
 }
 /*  Сервисный раздел сайта    */
.add_service{
        background-color: #DCDCDC;
        background-size : cover  ;
        margin-left     : 8px    ; /* отступ раздела слева  */
        margin-right    : 10px   ; /* отступ раздела справа */
        border          : 1px solid white;
 }

 /*  Познавательная часть первой страницы    */
.add_recognize{
        background-image: url(../image/fon/fon_3.jpg);
        background-size : cover;
        margin-left     : 5px  ;
        margin-right    : 5px  ;
        padding         : 0 5px 0 5px;
        border          : 1px solid white;
 }
 /* размер комментария для изображения */
._bullhorn{
    background-color: red  ;
    padding         : 5px  ;
    font-size       : 1.1em; /* высота рупора */
    color           : white;
 }
 .comment_img{
    padding         : 5px    ;
    font-size       : 1.3em  ;
    line-height     : 1em    ;
    color           : black  ;
}
 /* эффект наведения на изображение - вертикальная черта, текст  */ 
 /*    Стиль 2 на этой странице - Тредбан Большунова, Бородавко  */
.box{
    background: #000    ;
    position  : relative;
    box-shadow: 0 0 5px #c2bdbd;
    overflow  : hidden  ;
}
.box img{
    width   : 100%;
    height  : auto;
    opacity : 1   ;
    -webkit-transition: all 0.35s ease 0s;
    transition: all 0.35s ease 0s;
}
.box:hover img{
    opacity: 0.4;
}
.box .box-content{
    width   : 100%;
    height  : 100%;
    color   : #fff;
    position: absolute;
    bottom  : 0;
    padding : 10px 50px;
}
.box .box-content:before{
    content : "";
    position: absolute;
    top     : 15px;
    left    : 100%;
    bottom  : 20px;
    border-left: 4px solid rgba(255, 255, 255, 0.8);
    opacity : 0;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-transition: all 0.5s ease 0.6s;
    transition: all 0.5s ease 0.6s;
}
.box:hover .box-content:before{
    left   : 20px;
    opacity: 1   ;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
.box .title,
.box .description{
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
}
.box-content .title{
    font-size  : 1em;
    font-weight: 400;
    text-transform: uppercase;
    -webkit-transform: translate3d(30%, 0%, 0);
    transform: translate3d(30%, 0%, 0);
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.box:hover .title{
    opacity: 1;
    -webkit-transform: translate3d(0%, 0%, 0);
    transform: translate3d(0%, 0%, 0);
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.box-content .description{
    font-size  : 1.2em;
    line-height: 1.1em;
    -webkit-transform: translate3d(0%, 30%, 0);
    transform: translate3d(0%, 30%, 0);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
.box:hover .description{
    opacity: 1;
    -webkit-transform: translate3d(0%, 0%, 0);
    transform: translate3d(0%, 0%, 0);
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
    color: white;
}
 /* Within style tags in your html file */
.item-responsive > .content {
    position: absolute; /* абсолютное положение элемента */
                        /* положение элемента */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    }
/* begin Masonry */
.grid-item {
    width : 200px;
    float : left ;
    border-radius: 5px;
}
.grid-item--width2 { width: 200px; }
.grid-item--width3 { width: 520px; }
.grid-item--width4 { width: 780px; }

.grid-item--height2 { height: 430px; }
.grid-item--height3 { height: 200px; }
.grid-item--height4 { height: 350px; }

/* Within style tags in your html file */
.grid:after {
  content: ''   ;
  display: block;
  clear  : both ;
}
.grid-sizer,
.grid-item {width: 33.333%;}
/* -------- CSS видео -------------------*/
.embed-responsive.embed-responsive-16by9 {
	padding-bottom: 56.25%;
}
.embed-responsive.embed-responsive-4by3 {
	padding-bottom: 75%;
}
.embed-responsive{
	position: relative;
	display : block   ;
	height  : 0       ;
	padding : 0       ;
	overflow: hidden  ;
	width   : 100%    ;
}
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object{
	position: absolute;
	top     : 0       ;
	bottom  : 0       ;
	left    : 0       ;
	width   : 100%    ;
	height  : 100%    ;
	border  : 0       ;
}
.grid-item img {
      display  : block;
      max-width: 100% ;
      border   : 1px solid white;
}
/* End Masonry */

 /* два класса item-16by9, .item-4by3 определяют высоту элементов в каруселе, адаптивное видео для audio*/
.item-16by9 {
    padding-top: 56.25%; /* (9:16)*100% */
 }
.item-4by3 {
    padding-top: 75%;    /* (3:4)*100%  */
 }
 /* -------- CSS видео -------------------*/
.embed-responsive.embed-responsive-16by9 {
	padding-bottom: 56.25%;
 }
.embed-responsive.embed-responsive-4by3 {
	padding-bottom: 75%;
 }
.embed-responsive{
	position: relative;
	display : block   ;
	height  : 0       ;
	padding : 0       ;
	overflow: hidden  ;
	width   : 100%    ;
 }
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object{
	position: absolute;
	top     : 0       ;
	bottom  : 0       ;
	left    : 0       ;
	width   : 100%    ;
	height  : 100%    ;
	border  : 0       ;
 }
.grid-item img {
      display  : block;
      max-width: 100% ;
      border   : 1px solid white;
}
/* End Masonry */

/* To change the amount of columns on larger devices, uncomment the code below */
@media (max-width: 575px) {
  .grid-sizer,
  .grid-item {
    width: 100%;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .grid-sizer,
  .grid-item {
    width: 50%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .grid-sizer,
  .grid-item {
    width: 33.333%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .grid-sizer,
  .grid-item {
    width: 25%;
  }
}
@media (min-width: 1200px) {
  .grid-sizer,
  .grid-item {
    width: 20%;
  }
}
@media only screen and (max-width: 990px){
.box{ margin-bottom: 20px; }