@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Anton|Noto+Serif|Nunito+Sans|Open+Sans|Open+Sans+Condensed:300|PT+Sans|PT+Serif|Play|Roboto+Mono|Russo+One');

/*** Стили относящиеся к модальному окну и содержанию ***/
.popup h1,
.popup h2,
.popup h3,
.popup h4,
.popup h5,
.popup h6 {
 text-align: justify; 
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 hyphens: auto;
 color: #183352;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
font-weight: bold;
line-height: 1.282;
}
.popup h1 { /* заголовок */
font-size:48px;
color: #000;
font-family: 'Open Sans', sans-serif;
text-align: left;
padding-top: 10px;
padding-left: 0px;
}
.popup h2 { /* заголовок */
font-size: 36px;
color: #000;
font-family: 'Open Sans', sans-serif;
text-align: left;
padding-top: 10px;
padding-left: 0px;  
}
.popup h3 { /* заголовок */
font-size: 24px;
color: #000;
font-family: 'Open Sans', sans-serif;
text-align: left;
padding-top: 10px;
padding-left: 0px;  
}
.popup h4 { /* заголовок */
font-size: 16px;
color: #000;
font-family: 'Open Sans', sans-serif;
text-align: left;
padding-top: 10px;
padding-left: 0px; 
}
.popup h5 { /* заголовок */
font-size: 14px;
color: #000;
font-family: 'Open Sans', sans-serif;
text-align: left;
padding-top: 10px;
padding-left: 0px;  
}
.popup h6 { /* заголовок */
font-size: 12px;
color: #000;
font-family: 'Open Sans', sans-serif;
text-align: left;
padding-top: 10px;
padding-left: 10px;  
}

/* Хедер модального окна  */
.avatar {
    position: relative;
    float: left;
    margin: 10px 0px 0px 0px;
    background:url(../images/avatar.png) no-repeat;
    background-size: 22px; 
    width: 22px;
	height: 22px;
    border: 1px solid #4a76a8; 
    border-radius: 5px 5px 5px 5px; 
    -webkit-border-radius: 5px 5px 5px 5px;  
    -moz-border-radius: 5px 5px 10px 5px; 
}

.avatext {
    position: relative;
    float: left;
    left: 56px;
    top: -3px;
    color: #183352 !important;
    font-size: 14px;
    font-weight: normal;
    text-shadow: none !important;
    font-family: 'Open Sans', sans-serif;
}

.nextdiv {
    position: relative;
    float: right;
    left: 0px;
    top: 0px; margin: -8px 0px 0px 0px;
}
.nexttext {
    color: #183352 !important;
    font-size: 13px;
    text-shadow: none !important;
    font-family: tahoma, arial, verdana, sans-serif, Lucida Sans;
    font-size: 13px;
    line-height: 1.182;
}

.scriptdate {
    position: relative;
    float: left;
    margin: 16px -51px;
    color: #58595a !important;
    font-size: 11px;
    font-weight: normal;
    text-shadow: none !important;
    font-family: 'Open Sans', sans-serif;
}
.fooleft {
    position: relative;
    float: left;
    margin: 0 2px;
    color: #183352 !important;
    font-size: 12px;
    font-weight: normal;
    text-shadow: none !important;
    font-family:tahoma, arial, verdana, sans-serif, Lucida Sans;
}

.button_herofilm {
    position: relative;
    float: right;
    margin: 12px 0;
}
.button_storyfilm {
    position: relative;
    float: right;
    margin: 12px 10px;
}
.button_ideafilm {
    position: relative;
    float: right;
    margin: 12px 0px;
}

.fooright{
    position: relative;
    float: right;
    margin: 0 0;
}

/* Базовые стили слоя затемнения и модального окна  */
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
visibility: hidden;
/* фон затемнения */
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
position: fixed; /* фиксированное поцизионирование */
cursor: default; /* тип курсара */
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}
.overlay:target {
visibility: visible;
opacity: 1;
}

/* стили модального окна */
.popup {
top: 0;
right: 0;
left: 50%;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
z-index: 10000;
margin: 0 auto;
width: 58% !important;
min-width: 240px;
max-width: 100%;
/* фиксированное позиционирование, окно стабильно при прокрутке */
position: fixed;
padding-top: 20px;
padding-bottom: 0px;
padding-left: 20px;
padding-right: 20px;
background:#fff; /* Цвет содержимого */
    border: 1px solid #d9e0e7;
    border-radius:2px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-sizing: border-box; 
    box-shadow:0 0.1px  0.3px #d9d8e3;

/* трансформация */
-webkit-transform: translate(-50%, -150%);
-ms-transform: translate(-50%, -150%);
-o-transform: translate(-50%, -150%);
transform: translate(-50%, -150%);
/* анимируем трансформацию */
-webkit-transition: transform 0s ease-out;
-moz-transition: transform 0s ease-out;
-ms-transition: transform 0s ease-out;
-o-transition: transform 0s ease-out;
transition: transform 0s ease-out;
}
/* активируем мод. окно */
.overlay:target+.popup {
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* формируем кнопку закрытия */
.close {
position: absolute;
padding: 0;
top: -6px;
right: -28px;
width: 28px;
height: 28px; 
text-align: center;
text-decoration: none;
font-weight: bold;
line-height: 20px;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: '\2715';
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 22px; 
}

.close:hover {

}
.popup p {
margin: 0px;
padding-bottom: 15px; padding-top: 5px; padding-right: 5px; padding-left: 5px;
}
/* планшет */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.popup {
		width: 95%;
	}
}
/* смарт */
@media only screen and (min-width: 320px) and (max-width: 767px) {
	.popup {
		width:85%;
	}
}
/* изображения внутри окна */
.popup img {
display: block;
border: none;
width: 100%;
height: auto;
}
/* миниатюры слева/справа */
.pic-left, 
.pic-right {
    width: 30%;
    height: auto;
}
.pic-left {
    float: left;
    margin: 15px 15px 15px 0;
}
.pic-right {
    float: right;
    margin: 15px 0 5px 15px;
}
/* встроенные элементы м-медиа, фреймы */
/* адаптивный блок видео */
.video { 
position: relative; 
padding-bottom: 56.25%;  
height: 0; 
overflow:hidden; 
} 
.video iframe, 
.video object,  
.video embed {
position: absolute; 
top: 0; 
left: 0; 
width: 99%;
height: 99%; 
}
.video { 
position: relative; 
padding-bottom: 56.25%; 
height: 0;  
overflow-y: auto;
overflow-x: hidden;
} 

.overflow { 
position: relative; 
padding-bottom: 56.25%; 
height: 0;  
overflow-y: auto;
overflow-x: hidden;padding-top: 10px !important;
}