body {
        background-image: url(../image/fon/fon_3.jpg);
        background-color: #DCDCDC    ; /* Цвет фона пока загружается фоновая картинка */
        background-size : cover      ;
        font-family     : philosopher;
 }
.dacha{background-color: #E6E6FA; padding: 10px;}
.img_eleven{
    position     : relative;
    float        : left    ;
    margin-top   : 10px    ;
    margin-left  : 20px    ;
    border       : 1px solid white;    
    border-radius: 10px    ;
 }
 h3 {
    font-size       : 1.4rem;
    line-height     : 1.2rem;
    color           : black ;
 }
 h4 {
    background-color: gray         ;
    text-align      : center       ;
    padding         : 10px 0 10px 0;
    color           : white        ;
 }
 /* для просмотра видео */
.for_video{
    font-style  : normal;
    font-size   : 1.2em ;
    line-height : 1em   ;
    color       : black ;
 }
 /* подписи под фото в highslide-caption */
 .comment_foto{
    background-color: #E7E7E7 ;
    font-family  : philosopher;
    padding      : 5px   ;
    font-size    : 1.4rem;
    line-height  : 1.3rem;
    color        : black ;
 }
 h6 {
    padding-bottom: 1.5rem  ;
    font-size     : 1.2rem;
    color         : white ;
 }
/* рекомендация как использовать миниатюры fancybox */
.comment{
    font-family  : philosopher;
    padding-top  : 10px       ;
    font-size    : 1.2em      ;
    line-height  : 1.1em      ;
    color        : white      ;
 }
 span {
    font-family: philosopher;
    font-style : italic     ;
    font-size  : 1em        ;
    color      : black      ;
 }
.for_so {
    font-family: philosopher;
    font-style : italic     ;
    font-size  : 1em        ;
    color      : black      ;
 }
 .photographer {
        background-color: #DCDCDC    ;
        padding         : 1rem       ;
        font-size       : 1.4rem     ;
        line-height     : 1.3rem     ;
        border-radius   : 10px       ;
        box-shadow:
        inset rgba(0,0,0,.5) -3px -3px 8px,
        inset rgba(255,255,255,.9) 3px 3px 8px,
        rgba(0,0,0,.8) 3px 3px 8px -3px;
        color           : black        ;
 }
 /* для показа названия музыкального произведения, а также комментарий к клипу */ 
.popover{
    background-color: #E7E7E7    ;
    max-width       : 240px      ;
    width           : 240px      ;
    font-family     : philosopher;
}
.tooltip-inner {
    background-color: #2F4F4F        ;
    max-width       : 250px          ;
    width           : 250px          ;
    text-align      : left           ;
    font-family     : philosopher    ;
    padding         : .5rem          ;
    font-size       : 1.4em          ;
    line-height     : 1.3rem         ;
    color           : white          ;
}
/* ============= классы для fancybox ==================== */
.thumb img {
    -webkit-filter: grayscale(0);
    filter: none;
    background-color: #fff;
}
.thumb img:hover {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}
.thumb{
    padding: 0;
}
.item-responsive {
    position: relative; /* относительное позиционирование */
}
.item-responsive:before {
    display: block; /* отображать элемент как блок */
    content: "";    /* содержимое псевдоэлемента   */
    width  : 100%;  /* ширина элемента             */
}
/* два класса ниже определяют высоту элементов в каруселе*/
.item-16by9 {
    padding-top: 56.25%; /* (9:16)*100% */
}
.item-4by3 {
    padding-top: 75%;    /* (3:4)*100%  */
}
.item-responsive > .content {
    position: absolute;  /* абсолютное положение элемента */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
}
.carousel-caption{
    position   : absolute;
    top        : 70%     ;
    font-family:'Times New Roman',arial,sans-serif;
    font-size  : 16pt    ; 
    color      : black   ;
    text-align : center  ;
}
/* -------- 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       ;
}