/* KINOHYPE clean layout. New kh-* classes, float-based structure. */
.kh-page {
	margin: 0;
	background: #f4f6fa;
	color: #1f2937;
	font-family: BloggerSans, Arial, Helvetica, sans-serif;
}
.kh-page * { box-sizing: border-box; }
.kh-page a { color: inherit; text-decoration: none; }
.kh-page img { max-width: 100%; vertical-align: top; }
.kh-center { width: 1200px; max-width: calc(100% - 30px); margin: 0 auto; }
.clearfix:after { content: ""; display: table; clear: both; }

.kh-site { min-height: 100vh; }
.kh-dropsearch { background: #222734; }
.kh-dropsearch__field { position: relative; padding: 12px 0; }
.kh-dropsearch__field input {
	display: block;
	width: 100%;
	height: 42px;
	padding: 0 120px 0 16px;
	border: 0;
	border-radius: 12px;
	background: #fff;
	color: #1f2937;
}
.kh-dropsearch__field button {
	position: absolute;
	right: 4px;
	top: 16px;
	height: 34px;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: #ffba00;
	color: #111;
	font-weight: 700;
	cursor: pointer;
}

.kh-header {
	background: #fff;
	border-bottom: 1px solid #e8edf4;
	box-shadow: 0 6px 18px rgba(20, 29, 45, .04);
}
.kh-header__inner { height: 78px; }
.kh-header__left { float: left; width: 290px; height: 78px; }
.kh-logo {
	display: inline-block;
	margin-top: 21px;
	font: 700 29px/36px BloggerSans, Arial, Helvetica, sans-serif;
	letter-spacing: .02em;
	color: #161b27;
}
.kh-logo span { color: #ffba00; }
.kh-logo em {
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	border-radius: 7px;
	background: #161b27;
	color: #fff;
	font-style: normal;
	font-size: 14px;
	line-height: 24px;
	vertical-align: 4px;
}
.kh-menu-btn {
	float: left;
	width: 42px;
	height: 42px;
	margin: 18px 14px 0 0;
	padding: 11px 10px;
	border-radius: 12px;
	background: #ffba00;
}
.kh-menu-btn span {
	display: block;
	height: 2px;
	margin: 5px 0;
	border-radius: 2px;
	background: #1f2937;
}
.kh-menu-btn--mobile { display: none; }
.kh-header__search { float: left; width: 565px; padding-top: 17px; }
.kh-search { position: relative; display: block; width: 100%; }
.kh-search input {
	display: block;
	width: 100%;
	height: 44px;
	padding: 0 58px 0 18px;
	border: 1px solid #e5eaf1;
	border-radius: 14px;
	background: #f7f9fc;
	color: #1f2937;
	font-size: 15px;
	line-height: 44px;
}

.kh-search button .svg-inline--fa { display: inline-block; vertical-align: -2px; }
.kh-search-open { display: none; }
.kh-login { float: right; min-width: 210px; height: 78px; padding-top: 17px; text-align: right; }

.kh-hero {
	margin-top: 22px;
	background: #fff;
	border: 1px solid #e7ecf4;
	border-radius: 18px;
	box-shadow: 0 10px 25px rgba(20, 29, 45, .05);
	overflow: hidden;
}
.kh-hero__head {
	min-height: 58px;
	padding: 0 16px 0 22px;
	border-bottom: 1px solid #edf1f6;
}
.kh-hero__title {
	float: left;
	height: 58px;
	font: 700 23px/58px BloggerSans, Arial, Helvetica, sans-serif;
	color: #161b27;
}
.kh-hero .kh-tabs.st-tabs {
	float: right;
	position: static;
	display: block;
	padding-top: 10px;
	background: none;
}
.kh-hero .kh-tabs.st-tabs span {
	float: left;
	display: block;
	min-width: 105px;
	height: 38px;
	margin-left: 8px;
	padding: 0 15px;
	border: 1px solid #e8edf4;
	border-radius: 12px;
	background: #f7f9fc;
	color: #273142;
	font: 700 14px/36px BloggerSans, Arial, Helvetica, sans-serif;
	text-align: center;
	cursor: pointer;
}
.kh-hero .kh-tabs.st-tabs span.current,
.kh-hero .kh-tabs.st-tabs span:hover {
	border-color: #ffba00;
	background: #ffba00;
	color: #111;
}
.kh-slider.owl-carousel { padding: 18px 45px 15px; background: #fff; position: relative; }
.kh-slider .owl-stage-outer { padding: 2px 0 4px; }
.kh-slider .owl-nav div,
.kh-slider .owl-nav button {
	position: absolute;
	top: 84px;
	width: 38px;
	height: 66px;
	border: 1px solid #e8edf4;
	border-radius: 14px;
	background: #fff;
	color: #222;
	box-shadow: 0 8px 20px rgba(20, 29, 45, .08);
	cursor: pointer;
}
.kh-slider .owl-prev { left: -32px; }
.kh-slider .owl-next { right: -32px; }
.kh-slider .owl-nav div:hover,
.kh-slider .owl-nav button:hover { background: #ffba00; border-color: #ffba00; }
.kh-slide {
	display: block;
	float: left;
	width: 138px;
	margin-right: 16px;
	color: #161b27;
}
.kh-slide__poster {
	display: block;
	position: relative;
	width: 138px;
	height: 198px;
	border-radius: 15px;
	background: #edf1f6;
	overflow: hidden;
	box-shadow: 0 8px 18px rgba(20, 29, 45, .10);
}
.kh-slide__poster:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 58px;
	background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
}
.kh-slide__poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.kh-slide__rate {
	position: absolute;
	left: 8px;
	top: 8px;
	z-index: 2;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: #f59e0b;
	color: #fff;
	font: 700 12px/24px BloggerSans, Arial, Helvetica, sans-serif;
}
.kh-slide__rate:before { content: "КХ "; }
.kh-slide__rate.kh-rate--bad { background: #ef4444; color: #fff; }
.kh-slide__rate.kh-rate--mid { background: #f59e0b; color: #fff; }
.kh-slide__rate.kh-rate--good { background: #22a35a; color: #fff; }
.kh-slide__name {
	display: block;
	width: 138px;
	min-height: 38px;
	margin-top: 10px;
	color: #151b26;
	font: 700 15px/1.25 BloggerSans, Arial, Helvetica, sans-serif;
	text-align: left;
	overflow: hidden;
}
.kh-slide__year {
	display: block;
	width: 138px;
	margin-top: 3px;
	color: #8b95a7;
	font: 14px/1.3 BloggerSans, Arial, Helvetica, sans-serif;
	text-align: left;
}
.kh-slide:hover .kh-slide__name { color: #e5a400; }
.kh-mainnav {
	height: 52px;
	border-top: 1px solid #edf1f6;
	background: #fff;
	overflow: hidden;
}
.kh-mainnav__link {
	float: left;
	display: block;
	height: 52px;
	padding: 0 22px;
	border-right: 1px solid #edf1f6;
	color: #1f2937;
	font: 700 15px/52px BloggerSans, Arial, Helvetica, sans-serif;
}
.kh-mainnav__link.active,
.kh-mainnav__link:hover { background: #ffba00; color: #111; }

.kh-layout { margin-top: 24px; }
.kh-sidebar {
	float: left;
	width: 310px;
	background: #fff;
	border: 1px solid #e7ecf4;
	border-radius: 18px;
	box-shadow: 0 10px 25px rgba(20, 29, 45, .04);
	overflow: hidden;
}
.kh-content {
	float: right;
	width: 865px;
}
.kh-sidebox { padding: 20px; border-bottom: 1px solid #edf1f6; }
.kh-sidebox:last-child { border-bottom: 0; }
.kh-sidebox__title {
	margin-bottom: 16px;
	color: #161b27;
	font: 700 20px/1.2 BloggerSans, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}
.kh-sidebox__title .svg-inline--fa { color: #ffba00; margin-right: 7px; }
.kh-sidebox__link {
	float: right;
	margin-top: 3px;
	color: #e5a400;
	font: 700 12px/1.2 BloggerSans, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}
.kh-nav-group { margin-bottom: 17px; }
.kh-nav-group:last-child { margin-bottom: 0; }
.kh-nav-group__title { margin-bottom: 9px; color: #111827; font: 700 16px/1.2 BloggerSans, Arial, Helvetica, sans-serif; }
.kh-nav-list { margin: 0; padding: 0; list-style: none; }
.kh-nav-list li { float: left; width: 100%; }
.kh-nav-list--two li { width: 50%; }
.kh-nav-list a {
	display: block;
	padding: 5px 4px 5px 0;
	color: #4b5565;
	font: 14px/1.25 BloggerSans, Arial, Helvetica, sans-serif;
}
.kh-nav-list a:hover { color: #e5a400; }
.kh-side-tabs.st-tabs {
	position: static;
	display: block;
	margin: 0 0 14px;
	background: none;
}
.kh-side-tabs.st-tabs span {
	float: left;
	display: block;
	height: 32px;
	margin: 0 7px 7px 0;
	padding: 0 11px;
	border: 1px solid #e8edf4;
	border-radius: 10px;
	background: #f7f9fc;
	color: #273142;
	font: 700 13px/30px BloggerSans, Arial, Helvetica, sans-serif;
	cursor: pointer;
}
.kh-side-tabs.st-tabs span.current,
.kh-side-tabs.st-tabs span:hover { border-color: #ffba00; background: #ffba00; color: #111; }
.kh-popular-item { float: left; width: 82px; margin: 0 11px 14px 0; }
.kh-popular-item:nth-child(3n) { margin-right: 0; }
.kh-popular-item a,
.kh-soon-item a { display: block; }
.kh-popular-item__poster,
.kh-soon-item__poster {
	display: block;
	background: #edf1f6;
	overflow: hidden;
}
.kh-popular-item__poster { width: 82px; height: 120px; border-radius: 12px; }
.kh-popular-item__poster img,
.kh-soon-item__poster img { width: 100%; height: 100%; object-fit: cover; }
.kh-popular-item__title {
	display: block;
	margin-top: 7px;
	color: #1f2937;
	font: 13px/1.2 BloggerSans, Arial, Helvetica, sans-serif;
	height: 32px;
	overflow: hidden;
}
.kh-soon-item { float: left; width: 124px; margin: 0 18px 16px 0; }
.kh-soon-item:nth-child(2n) { margin-right: 0; }
.kh-soon-item__poster { width: 124px; height: 178px; border-radius: 13px; }
.kh-soon-item__title {
	display: block;
	margin-top: 8px;
	color: #1f2937;
	font: 14px/1.25 BloggerSans, Arial, Helvetica, sans-serif;
	height: 36px;
	overflow: hidden;
}
.kh-comments-list { margin: 0; padding: 0; list-style: none; }
.kh-comment-item a {
	display: block;
	padding: 0 0 12px;
	margin-bottom: 12px;
	border-bottom: 1px dashed #e4e9f0;
}
.kh-comment-item:last-child a { margin-bottom: 0; border-bottom: 0; }
.kh-comment-item__meta,
.kh-comment-item__title,
.kh-comment-item__text { display: block; }
.kh-comment-item__meta { color: #98a2b3; font-size: 12px; }
.kh-comment-item__title { margin-top: 3px; color: #1f2937; font-weight: 700; }
.kh-comment-item__text { margin-top: 4px; color: #667085; font-size: 13px; line-height: 1.35; }

.kh-filter {
	margin-bottom: 18px;
	padding: 18px;
	background: #fff;
	border: 1px solid #e7ecf4;
	border-radius: 18px;
	box-shadow: 0 10px 25px rgba(20, 29, 45, .04);
}
.kh-filter__col { float: left; width: 31.5%; margin-right: 2.75%; }
.kh-filter__col--last { margin-right: 0; }
.kh-filter:after { content: ""; display: table; clear: both; }
.kh-filter__label { margin-bottom: 8px; color: #111827; font: 700 14px/1.2 BloggerSans, Arial, Helvetica, sans-serif; }
.kh-filter__control { margin-bottom: 16px; }
.kh-filter__control select,
.kh-filter__control input[type="text"] {
	width: 100%;
	min-height: 40px;
	border: 1px solid #e5eaf1;
	border-radius: 12px;
	background: #f8fafc;
}
.kh-check { float: left; width: 100%; margin-bottom: 9px; color: #475467; font-size: 14px; }
.kh-check input { margin-right: 7px; }
.kh-filter__buttons input {
	float: left;
	width: 48%;
	height: 38px;
	border: 0;
	border-radius: 12px;
	background: #ffba00;
	color: #111;
	font-weight: 700;
	cursor: pointer;
}
.kh-filter__buttons input + input { float: right; background: #edf1f6; color: #273142; }
.kh-panel-head {
	margin-bottom: 18px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #e7ecf4;
	border-radius: 16px;
	box-shadow: 0 10px 25px rgba(20, 29, 45, .04);
}
.kh-view { float: left; color: #667085; font-size: 14px; }
.kh-view span { display: inline-block; vertical-align: middle; margin-right: 8px; }
.kh-view a {
	display: inline-block;
	width: 34px;
	height: 34px;
	margin-right: 4px;
	border: 1px solid #e7ecf4;
	border-radius: 10px;
	background: #f8fafc;
	color: #667085;
	line-height: 34px;
	text-align: center;
}
.kh-view a.activetempajax { background: #ffba00; border-color: #ffba00; color: #111; }
.kh-filter-open {
	float: right;
	height: 36px;
	padding: 0 16px;
	border-radius: 12px;
	background: #ffba00;
	color: #111;
	font: 700 14px/36px BloggerSans, Arial, Helvetica, sans-serif;
	cursor: pointer;
}
.kh-speedbar,
.kh-page-title {
	margin-bottom: 18px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #e7ecf4;
	border-radius: 16px;
}

.kh-news-list { margin: 0 -10px; }
.kh-card {
	float: left;
	width: 20%;
	padding: 0 10px;
	margin-bottom: 24px;
}
.kh-card:nth-of-type(5n+1) { clear: left; }
.kh-card__inner {
	background: #fff;
	border: 1px solid #e7ecf4;
	border-radius: 17px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(20, 29, 45, .04);
	transition: transform .2s ease, box-shadow .2s ease;
}
.kh-card__inner:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(20, 29, 45, .08); }
.kh-card__poster {
	display: block;
	position: relative;
	height: 244px;
	background: #edf1f6;
	overflow: hidden;
}
.kh-card__poster:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 65px;
	background: linear-gradient(to top, rgba(0,0,0,.50), rgba(0,0,0,0));
}
.kh-card__poster img { width: 100%; height: 100%; object-fit: cover; }
.kh-card__rate,
.kh-card__episode,
.kh-card__kp {
	position: absolute;
	z-index: 2;
	display: block;
	border-radius: 999px;
	font-weight: 700;
}
.kh-card__rate {
	left: 10px;
	top: 10px;
	height: 25px;
	padding: 0 9px;
	background: #f59e0b;
	color: #fff;
	font-size: 12px;
	line-height: 25px;
}
.kh-card__rate:before { content: "КХ "; }
.kh-card__rate.kh-rate--bad { background: #ef4444; color: #fff; }
.kh-card__rate.kh-rate--mid { background: #f59e0b; color: #fff; }
.kh-card__rate.kh-rate--good { background: #79c142; color: #fff; }
.kh-card__episode {
	left: 10px;
	bottom: 42px;
	padding: 5px 9px;
	background: #22a35a;
	color: #fff;
	font-size: 11px;
	line-height: 1;
}
.kh-card__kp {
	left: 10px;
	right: 10px;
	bottom: 10px;
	height: 25px;
	background: rgba(16, 24, 40, .88);
	color: #fff;
	font-size: 11px;
	line-height: 25px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.kh-card__body { min-height: 108px; padding: 13px 13px 15px; }
.kh-card__title {
	height: 40px;
	margin-bottom: 7px;
	color: #141b29;
	font: 700 16px/1.25 BloggerSans, Arial, Helvetica, sans-serif;
	overflow: hidden;
}
.kh-card__meta { color: #ffba00; font: 700 13px/1.3 BloggerSans, Arial, Helvetica, sans-serif; }
.kh-card__genres {
	height: 34px;
	margin-top: 4px;
	color: #7a8495;
	font: 13px/1.3 BloggerSans, Arial, Helvetica, sans-serif;
	overflow: hidden;
}

.kh-seo-text {
	clear: both;
	margin-top: 10px;
	padding: 24px;
	background: #fff;
	border: 1px solid #e7ecf4;
	border-radius: 18px;
	box-shadow: 0 10px 25px rgba(20, 29, 45, .04);
	color: #4b5565;
	font-size: 15px;
	line-height: 1.55;
}
.kh-seo-text h2 { margin: 0 0 12px; color: #161b27; font-size: 25px; }
.kh-seo-text p { margin: 0 0 13px; }
.kh-seo-text img { float: left; width: 180px; margin: 4px 18px 8px 0; border-radius: 14px; }

@media screen and (max-width: 1220px) {
	.kh-center { width: 1000px; }
	.kh-header__left { width: 260px; }
	.kh-header__search { width: 455px; }
	.kh-sidebar { width: 280px; }
	.kh-content { width: 700px; }
	.kh-card { width: 25%; }
	.kh-card:nth-of-type(5n+1) { clear: none; }
	.kh-card:nth-of-type(4n+1) { clear: left; }
	.kh-card__poster { height: 230px; }
	.kh-popular-item { width: 74px; margin-right: 9px; }
	.kh-popular-item__poster { width: 74px; height: 110px; }
	.kh-soon-item { width: 110px; margin-right: 16px; }
	.kh-soon-item__poster { width: 110px; height: 160px; }
}
@media screen and (max-width: 950px) {
	.kh-center { max-width: calc(100% - 24px); }
	.kh-header__left { width: auto; }
	.kh-header__search, .kh-login, .kh-sidebar, .kh-mainnav.to-mob { display: none; }
	.kh-search-open { display: block;
    float: right;
    margin-top: 10px;
    font-size: 14px;
    background-color: #ffba00;
color: #fff;
border-radius: 12px; }
	.kh-menu-btn { display: none; }
	.kh-menu-btn--mobile { display: block; }
	.kh-content { float: none; width: 100%; }
	.kh-hero .kh-tabs.st-tabs {
		float: none;
		clear: both;
		display: block;
		width: 100%;
		padding: 0 0 12px;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}
	.kh-hero .kh-tabs.st-tabs span {
		float: none;
		display: inline-block;
		vertical-align: top;
		margin: 0 8px 0 0;
	}
	.kh-slider.owl-carousel { padding: 16px 38px 12px; }
	.kh-filter__col { width: 100%; margin-right: 0; }
	.kh-card { width: 25%; }
}
@media screen and (max-width: 760px) {
	.kh-logo { font-size: 24px; }
	.kh-hero__title { width: 100%; height: auto; padding: 16px 0 10px; line-height: 1.2; }
	.kh-slide { width: 126px; margin-right: 13px; }
	.kh-slide__poster { width: 126px; height: 184px; }
	.kh-slide__name, .kh-slide__year { width: 126px; }
	.kh-card { width: 33.333%; }
	.kh-card:nth-of-type(4n+1) { clear: none; }
	.kh-card:nth-of-type(3n+1) { clear: left; }
	.kh-card__poster { height: 220px; }
}
@media screen and (max-width: 560px) {
	.kh-card { width: 50%; }
	.kh-card:nth-of-type(3n+1) { clear: none; }
	.kh-card:nth-of-type(2n+1) { clear: left; }
	.kh-card__poster { height: 235px; }
	.kh-panel-head { padding: 12px; }
	.kh-view, .kh-filter-open { float: none; }
	.kh-filter-open { display: inline-block; margin-top: 10px; }
	.kh-seo-text img { float: none; width: 100%; margin: 0 0 12px; }
}
@media screen and (max-width: 390px) {
	.kh-card__poster { height: 205px; }
	.kh-card__title { font-size: 15px; }
}


/* kh compatibility with existing DLE JS */
.s-slide .kh-sidebar { display: none; }
.s-slide .kh-content { float: none; width: 100%; }
.s-slide .kh-news-list { margin-left: -10px; margin-right: -10px; }

.close-overlay {
	display: none;
	position: fixed;
	z-index: 880;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(16, 24, 40, .52);
}
.side-panel {
	position: fixed;
	z-index: 890;
	left: -350px;
	top: 0;
	width: 320px;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 18px;
	background: #f4f6fa;
	box-shadow: 12px 0 30px rgba(16, 24, 40, .18);
	transition: left .3s ease;
}
.side-panel.active { left: 0; }
.side-panel .kh-mainnav,
.side-panel .kh-sidebox { margin-bottom: 16px; border-radius: 16px; overflow: hidden; }
.side-panel .kh-mainnav { height: auto; border: 1px solid #e7ecf4; }
.side-panel .kh-mainnav__link { float: none; height: 42px; line-height: 42px; border-right: 0; border-bottom: 1px solid #edf1f6; }
.btn-close {
	position: fixed;
	z-index: 900;
	left: 320px;
	top: -46px;
	width: 44px;
	height: 44px;
	border-radius: 0 0 12px 0;
	background: #ffba00;
	color: #111;
	font-size: 18px;
	line-height: 44px;
	text-align: center;
	cursor: pointer;
	transition: top .3s ease;
}
.btn-close.active { top: 0; }