@font-face {
	font-family: 'DIN Pro';
	src: local('DIN Pro Light'), local('DINPro-Light'),
		url('../webfonts/DINPro-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'DIN Pro';
	src: local('DIN Pro Regular'), local('DINPro-Regular'),
		url('../webfonts/DINPro-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'DIN Pro';
	src: local('DIN Pro Medium'), local('DINPro-Medium'),
		url('../webfonts/DINPro-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'DIN Pro';
	src: local('DIN Pro Bold'), local('DINPro-Bold'),
		url('../webfonts/DINPro-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'DIN Pro';
	src: local('DIN Pro Black'), local('DINPro-Black'),
		url('../webfonts/DINPro-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
* {background: transparent; margin: 0; padding: 0; outline: none; border: 0; box-sizing: border-box;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
table {border-collapse: collapse; border-spacing: 0;}
input, select {vertical-align: middle;}
article, aside, figure, figure img, hgroup, footer, header, nav, section, main {display: block;}
img {max-width: 100%;}
.clr {clear: both;}
.clearfix:after {content: ""; display: table; clear: both;}

body {font: 14px 'DIN Pro', sans-serif; line-height: normal; padding: 0; margin: 0; min-height: 100%; width: 100%; font-weight: 400;}
a {text-decoration: none;}
a:hover, a:focus {text-decoration: none;}
h1, h2, h3, h4, h5 { font-weight: 700; text-transform: uppercase; }

button, textarea, select, input[type="text"], input[type="password"], input[type="button"], input[type="submit"] 
{appearance: none; -webkit-appearance: none; font-size: 16px; font-family: 'DIN Pro' !important;}

.button, .btn, .pagi-load a, .up-second li a, .usp-edit a, .qq-upload-button, button:not(.color-btn):not([class*=fr]), 
html input[type="button"], input[type="reset"], input[type="submit"], .meta-fav a, .usp-btn a { display: inline-block; text-align: center; padding: 0 20px; height: 40px; line-height: 40px; border-radius: 4px; cursor:pointer; font-size: 14px; text-transform: uppercase;}

input[type="text"], input[type="password"] {height: 40px; line-height: 40px;
border-radius: 4px; border: 0; padding: 0 15px;}
select {height: 40px; border: 0; padding: 0 15px;}
textarea {padding: 15px; overflow: auto; vertical-align: top; resize: vertical;}
select {width: auto;}
input:focus::placeholder, textarea:focus::placeholder {color: transparent}

.img-box, .img-wide, .img-resp, .img-resp-vert, .img-fit {overflow: hidden; position: relative;}
.img-resp {padding-top: 60%;}
.img-resp-vert {padding-top: 140%;}
.img-box img, .img-resp img, .img-resp-vert img {width: 100%; min-height: 100%; display: block;}
.img-resp img, .img-resp-vert img {position: absolute; left: 0; top: 0;}
.img-wide img {width: 100%; display: block;}
.img-fit img {width: 100%; height: 100%; object-fit: cover;}
.nowrap {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.fx-row, #dle-content {display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}
.fx-col {display:-ms-flexbox;display:-webkit-flex;display:flex; 
-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}
.fx-center {-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}
.fx-middle {-ms-flex-align:center;-webkit-align-items:center;align-items:center}
.fx-start, #dle-content {-webkit-justify-content:flex-start;justify-content:flex-start;}
.fx-first {-ms-flex-order: -1;-webkit-order: -1;order: -1;}
.fx-last {-ms-flex-order: 10;-webkit-order: 10;order: 10;}
.fx-1 {-ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; 
	max-width: 100%; min-width: 50px;}
.fx-between {-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}
b, strong, .fw700 {font-weight: 700;}
.icon-left [class*="fa-"], .icon-left .icon {margin-right: 10px;}
.icon-right [class*="fa-"], .icon-right .icon {margin-left: 10px;}
.hidden, #dofullsearch {display: none;}
.anim, .btn, button, .owl-dot, .header-menu > li > a:before, .header-menu a, .sect-link, 
.owl-next, .owl-prev, .footer a, .logo, .login-box a, .btn-login:before, .fdevices [class*=fa], 
.ffav, .ffav a, .ftrailer-btn .far, .frate-up, .frate-down {transition: all .3s;}
.mtitle, .sub-title h1, .form-wrap h1 {margin-bottom: 20px; font-size: 28px; font-weight: 700; text-transform: uppercase;}
#dle-content > *:not(.th-item):not(.collection-item) {width: 100%;}


/* BASIC GRID
----------------------------------------------- */
.wrap {min-width:320px; position: relative; overflow: hidden;}
.wrap-center {max-width:1406px; width: calc(100% - 60px); margin:0 auto; position:relative; z-index:20;}
	.wrap-center:before{content:""}
.header {position: relative; left: 0; top: 0; z-index: 990; width: 100%;}
.header-in {position: static; padding-left: 160px; height: 66px;}
.header.sticky {position: fixed;}
.header.sticky-hide {top: -80px;}
.header.sticky-vis {top: 0;}
.content {}
.header.sticky-hide:not(.sticky-vis) .login-box {display: none;}
.header.sticky .fimg1 {opacity: 0;}

#gotop{position:fixed; width:40px; height:40px; line-height:40px; right:10px; bottom:10px;
z-index:990; display:none; cursor:pointer; font-size:18px; 
border-radius:20px; text-align:center; }

/* HEADER
----------------------------------------------- */
.logo {display: block; width: 240px; height: 66px; line-height: 60px; position: absolute; left: 0; top: 0; 
/*padding-left: 86px;*/ font-size: 30px; font-weight: 900; overflow: hidden; z-index: 101; width: 314px;
    top: 3px;}
 .logo img{    height: 50px; padding: 6px;}   
/*.logo:before {content: ''; width: 66px; height: 66px; position: absolute; left: 0; top: 0; }*/
.header-menu {position: relative; display: flex; justify-content: space-around;}
.header-menu > li {/*padding-right: 45px;*/flex-grow: 1;}
.header-menu > li > a {display: block; height: 66px; line-height: 66px; text-transform: uppercase; position: relative; z-index: 101; text-align: center;}
.header-menu > li > a:before, .btn-login:before {width: 10px; height: 10px; border-radius: 50%; content: ''; pointer-events:none;
position: absolute; bottom: 100%; left: calc(50%); margin-left: -5px; opacity: 0;}
.header-menu > li:hover > a:before, .btn-login.is-active:before {bottom: -5px; opacity: 1;}
.hidden-menu { z-index: 100; position: absolute; left: -60px; top: 99%; width: 920px;  font-size: 16px;
pointer-events: none; opacity: 0; transform: translateY(30px); transition: all .3s; border-radius: 2px;}
.header-menu > li:hover .hidden-menu {pointer-events: auto; opacity: 1; transform: translateY(0px);}
.hm-left {padding: 27px 30px; border-radius: 2px 0 0 2px; font-weight: 500;}
.hm-right {padding: 20px 30px; column-width: 180px;}
.hm-right a {display: inline-block; line-height: 36px; }
.hm-left li {margin-bottom: 5px;}
.col-4 li {width: 25%;}
.col-3 li {width: 29%; display: inherit;text-align: center;}
.col-3 li a{width: 100%;    text-transform: uppercase; padding: 2px 0px;}
.col-3 li a:hover{backdrop-filter: invert(20%);}
.hm-title {margin-bottom: 5px;}
ul + .hm-title {margin-top: 20px;}

.btn-login, .btn-search, .btn-menu {cursor: pointer; width: 66px; height: 66px; line-height: 66px; 
	text-align: center; font-size: 18px; position: absolute; top: 0; right: 0; z-index: 101;}
.btn-login {width: 70px;}
.btn-search {right: 76px;}
.btn-login .far {width: 36px; height: 36px; line-height: 36px; border-radius: 50%; font-size: 16px;}
.btn-login.is-active .far:before {content: "\f00d";}
.search-wrap {width: 100%; max-width: 800px; padding: 30px; position: fixed; z-index: 999; 
	top: 0; left: 50%; transform: translateX(-50%);}
.search-title, .search-close {font-size: 24px; cursor: pointer;}
.search-box {position:relative; margin-top: 30px;}
.search-box input, .search-box input:focus {padding: 0 50px 0 15px; border-radius: 0; box-shadow: none; width: 100%;}
.search-box input:not(:focus)::placeholder {} 
.search-box button {position:absolute; right:5px; top:0px; z-index:10; width: 30px;
background:transparent !important; font-size: 16px !important; padding: 0 !important;}
.mlists{
	    right: 122px;
}
.mlists a{color: #fff;}
.mlists a span.fa-heart{
	    margin-right: 5px !important;
}
/* POPULAR
----------------------------------------------- */
.popular { position: relative; overflow: hidden; margin-top: -66px;}
.popular-in {padding: 126px 376px 60px 0;}
.blurred-bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; filter: blur(10px) grayscale(1);}
.popular:before {content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0.8; z-index: 3;}
.popular:after {content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0.8; z-index: 5;}
.popular-desc {position: absolute; z-index: 9; right: 0; top: 0; bottom: 0; width: 376px;}
.popular-title {font-size: 36px; line-height: 40px; font-weight: 900; text-transform: uppercase;max-height: 200px;
    overflow: hidden;}
.popular-subtitle {    margin-top: 10px;font-weight: 700; font-size: 1.3em;}
.popular-text {font-size: 16px; margin-top: 10px;}
.popular-caption {padding: 26px 30px 0 30px; display: none; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);}


/* SECTION
----------------------------------------------- */
.sect {margin-bottom: 30px;}
.sect-header {margin-bottom: 30px; align-items: flex-end;}
.sect-title {font-size: 28px; font-weight: 700; text-transform: uppercase; }
.sect-carou .sect-title {padding-right: 20px; margin-right: 20px; position: relative;}
.sect-carou .sect-title:after {content: ''; width: 1px; position: absolute; right: 0; top: 8px; bottom: 5px;}
.sect-link {font-weight: 300; position: relative; bottom: 3px;     padding-left: 20px;}
.sect-link .far {margin-left: 20px; font-size: 16px; position: relative; top: 2px;}
.sect-carou:not(.sect-carou-three) .sect-content {margin-left: -3px;}
.sect-carou .sect-header {padding-right: 50px;}
.sect-bg {width: calc(100% + 2000px) !important; 
	margin-left: -1000px; margin-right: -1000px; padding: 30px 1000px;}
.sect-upd {padding-top: 15px; padding-bottom: 15px;}

.upd-item.upd-last{    background: #7d73730f;}
.sect-items {margin: 0 -15px;}
.mb-remove-15 {margin-bottom: -15px;}
.mb-remove-30 {margin-bottom: -30px;}
.sect-compensate-padding-top {margin-top: -30px;}
.login-menu li {border-radius: 5px; width: 48.6%; margin-bottom: 10px; padding: 10px 0 10px 30px;}
.login-menu li .fa {display: none;}
.overlay-box {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%; 
opacity: 0.6; }
.login-box {z-index: 100;  position: absolute; right: 0px; top: 99%; width: 600px; font-size: 16px;
pointer-events: none; opacity: 0; transform: translateY(30px); transition: all .3s; border-radius: 2px;-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
.login-box.is-active {pointer-events: auto; opacity: 1; transform: translateY(0px);}
.login-left {width: 120px; padding: 30px; }
	.sect-satory {
		    flex-wrap: wrap;
	   		 display: flex;
	      flex-wrap: wrap;
  
}
	.sect-satory > .collection-item {
    width: 19% !important;
    margin-right: 10px;
}

	.sat-box{position: relative;}
	.sat-title{
		font-weight: 700;
		    white-space: normal;
	}
	.sat-ibox {
    overflow: hidden;
	}
	.sat-info{
			font-size: 0.8em !important;
		    height: 74px;
    		margin-top: 0px !important;
    		margin-bottom: 10px;
    		border-radius: 0 0 10px 10px!important;
    		padding: 10px;

    		display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
        justify-content: space-between;

	}
	.sat-rating{
		        font-size: 1.6em;
    width: 45px;
	}
	.sat-poster{
		border-radius: 10px 10px 0 0 !important;
	}
	.sat-type{
    display: block;
    position: absolute;
    bottom: 20px;
    right: 10px;
    z-index: 1;
	}
	.sat-type::before {
  font-variant: all-small-caps;
      padding: 2px 8px;
    border-radius: 3px;
}
span.sat-genre {
    max-width: 107px;
    display: block;
}
@media screen and (max-width: 470px){
  .sect-satory .collection-item {
    width: 45%!important;
  }
    .liststyle{
   	margin-top: 147px!important;
  }
  .slight{
  	display: none;
  }
}
.sat-type-id-10:before,
.sat-type-id-2:before,
.sat-type-id-16:before,
.sat-type-id-17:before,
.sat-type-id-14:before,
.sat-type-id-11:before,
.sat-type-id-18:before
 {
  content: "Аниме сериал";
}
.sat-type-id-3:before {
  content: "Аниме фильм";
}
.sat-type-id-4:before {
  content: "Аниме OVA";
}
.sat-type-id-9:before,
.sat-type-id-6:before,
.sat-type-id-7:before,
.sat-type-id-8:before {
  content: "Дорама";
}
.change-main a{
	padding: 0px 10px!important;
	max-width: 100px;
}
.mylists-switch.nlist{
	    display: flex;
    flex-direction: column;
    margin-top: -66px;
    width: 100%;
}
.liststyle{
    display: flex;
    width: 50px!important;
    flex-direction: row-reverse;
    position: absolute;
    right: 15px;
    align-items: center;
   	margin-top: 10px;
  }
  .bottom-nav ~ .bottom-nav .liststyle, .ask_marg_side .liststyle ,.article.liststyle{
  	display: none!important;
  }

  .liststyle a{
  	padding: 5px!important;
  	    font-size: 1.2em!important;
  	    height: auto!important;
  	        line-height: normal!important;
  	        margin-top: 0px!important;
  }
  .liststyle a:not(.nl00,.nl11){
  	    background: none;
  }
.change-old{
	    width: auto;
	    position: absolute;
    right: 0;
}
.slight{
right: 142px;
    top: 24px;
}

.aslight span{
	color: #fff;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
}
  .aslight span:not(.l11,.l22,.l33){
  	    display: none;
  }

