body {
    background-color: #DCDCDC    ;
    background-size : cover      ;  /* Масштабируем фон */
    font-family     : philosopher;
   }
/* -------------- Теги h2, h3, h4, h5, h6. p -------------------------------*/ 
h4 {
    text-align      : left       ;
    padding         : 10px;
    font-size       : 1.4em        ;
    line-height     : 1.3em        ;
    color           : black        ;
}
/* размер комментария для изображения */
._bullhorn{
    background-color: red  ;
    padding         : 5px  ;
    font-size       : 1.3em; /* высота рупора */
    color           : white;
 }
 /* всплывающий комментарий к изображению */
 .comment_img{
    padding         : 5px    ;
    font-size       : 1.2em  ;
    line-height     : 1em    ;
    color           : black  ;
}
 /* Кнопка с тенью    */
.btn{
    background-color: #2F4F4F;
    padding         : 10px   ;
    color           : white  ;
    border-radius   : 15px   ;
    box-shadow      : inset rgba(0,0,0,.5) -3px -3px 4px, inset rgba(255,255,255,.9) 3px 3px 4px;
}
/* переходы по ссылке */
 a{font-family: philosopher; font-size: 1.3em; color: white;}
 a:hover {background-color: blue;}

/* По умолчанию выравнивание в tooltip-inner по центру vedenin, ЧМ-2021 Оберстдорф */
.tooltip-inner {
        background-color: #2F4F4F        ;
        max-width       : 360px          ;
        width           : 360px          ;
        font-family     : philosopher    ;
        text-align      : left           ;
        padding         : 5px            ;
        font-size       : 1.2em          ;
        line-height     : 1.1em          ;
        border          : 2px solid white;
        color           : white          ;
 }
/* -------- CSS видео -------------------*/
.embed-responsive.embed-responsive-16by9 {
	padding-bottom: 63%;
}
.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       ;
}
 /* эффект наведения на изображение - вертикальная черта, текст  */ 
.box{
    background-color: #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 5px 0 10px;
}
.box .box-content:before{
    content : "";
    position: absolute;
    top     : 15px;
    left    : 100%;
    bottom  : 20px;
    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  : 1.3em ;
    font-weight: 500   ;
    -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.3em;
    line-height: 1em  ;
    -webkit-transform: translate3d(0%, 30%, 0);
    transform: translate3d(0%, 30%, 0);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
.box:hover .description{
    opacity: 0.9;
    -webkit-transform: translate3d(0%, 0%, 0);
    transform: translate3d(0%, 0%, 0);
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
    color: white;
}
/*=====================================*/
@media only screen and (max-width:360px){
.box .title{ margin: 10% auto 0; }
}
@media only screen and (max-width:359px){
    .box .description{ margin: 25px auto 0; }
}

@media only screen and (max-width:990px){
.box{ margin-bottom: 30px; }
}