/*=============================================================*/
/* Theme: HubFilms
/* Version: 1.0.0
/* Copyright (c) 2021 https://shopthemes.ru/ and https://art-ucoz.ru/
/* Design Autor: Roman Buger
/*=============================================================*/
* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family:'Nunito',sans-serif;font-size:15px;background:#161b28;color: #9aa4bf;line-height:1.5}
a {color:#ffaa00;text-decoration: none;border: none;outline: none;font-weight: 500;transition: all 0.3s ease 0s;}
a:hover {text-decoration:none;}
ul {margin: 0; padding: 0;}
img {max-width: 100%;}
textarea {width:100%;border:1px solid transparent!important;background:#101420;border-radius:12px;color:#a8bbd2;min-height:150px}
.container {max-width:1240px;margin:70px auto 50px;min-height:calc(100vh - 120px)}
.wrap {display:flex;flex-direction:column;min-height:calc(50vh);justify-content:space-between}
.middle_content {display:flex;flex-wrap:wrap;flex:1}
.aside {flex:0 350px;max-width:350px;background-color:#1d2333;box-shadow:0 0 40px 0 rgba(0,0,0,.06);margin-right: 20px;}
.content {flex: 1;}
.section_title {display: flex; align-items: center; font-size: 22px;font-weight: 600;margin: .67em 0;}
.section_title svg {fill: #ffaa00; width: 24px;height: 24px; margin-right: 10px;}

/*=============================================================*/
/* SCROLL TO TOP
/*=============================================================*/
.progress-wrap {position: fixed;right: 50px;bottom: 50px;height: 46px;width: 46px;cursor: pointer;display: block;border-radius: 50px;box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);z-index: 10000;opacity: 0;visibility: hidden;transform: translateY(15px);-webkit-transition: all 200ms linear;transition: all 200ms linear;}
.progress-wrap.active-progress {opacity: 1;visibility: visible;transform: translateY(0);}
.progress-wrap::after {position: absolute;font-family: remixicon !important;content: '\EA72';text-align: center;line-height: 46px;font-size: 24px;color: #ffaa00;left: 0;top: 0;height: 46px;width: 46px;cursor: pointer;display: block;z-index: 1;-webkit-transition: all 200ms linear;transition: all 200ms linear;}
/* .progress-wrap:hover::after {opacity: 0;} */
.progress-wrap::before {position: absolute;font-family: remixicon !important;content: '\EA72';text-align: center;line-height: 46px;font-size: 24px;/* opacity: 0; */color: #ffaa00;left: 0;top: 0;height: 46px;width: 46px;cursor: pointer;display: block;z-index: 2;-webkit-transition: all 200ms linear;transition: all 200ms linear;}
/* .progress-wrap:hover::before {opacity: 1;} */
.progress-wrap svg path {fill: none;}
.progress-wrap svg.progress-circle path {stroke: #ffaa00;stroke-width: 4;box-sizing: border-box;-webkit-transition: all 200ms linear;transition: all 200ms linear;}

/*=============================================================*/
/* HEADER
/*=============================================================*/
.header {background-color:#21283b;border-bottom:1px solid #2f3749;border-radius:15px 15px 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:0 5px}
.header_right {flex:0 0 calc(50% - 100px);justify-content:right;display:flex;align-items:center;padding:0 15px}
.top_nav {display:flex;flex:0 0 calc(50% - 100px);align-items:center}
.top_nav li {list-style:none}
.top_nav a {color:#b8bdca;padding:0 15px;display:inline-flex;align-items:center;flex-wrap:nowrap}
.top_nav a:hover {color:#ffaa00}
.top_nav svg {fill:#ffaa00;width:18px;height:18px;margin-right:10px}
.mob_button {display: none;}

/*=============================================================*/
/* LOGO
/*=============================================================*/
.logo {background-color:#ffaa00;width:100px;height:100px;transform:rotate(45deg);overflow:hidden;display:inline-flex;justify-content:center;align-items:center;position:relative;top:-20px;font-weight:900;color:#131720;border-radius:15px;padding:20px;margin-bottom:-35px;box-shadow:0 0 50px 0 rgba(255,203,0,.3);flex: 0 100px; border: 4px solid transparent;z-index: 10;}
.logo:hover {border-color: #fff;}
.logo div {color:#131720;transform:rotate(-45deg);height:100%;width:100%;text-align:center;font-weight:900;text-transform:uppercase;font-size:30px;line-height:1;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center}
.logo small {display:block;font-size:22px;color:#fff;line-height:1}

/*=============================================================*/
/* SEARCH
/*=============================================================*/
.search {position: relative;}
.search form {border-radius: 10px;}
.search input[type="text"] {width:280px;border-radius:10px;background-color:#101420;border:1px solid #2f3749!important;color:#b8bdca;line-height:1;padding:10px 45px 10px 15px;font-size:12px}
.search button {position:absolute;right:0;top:0;bottom:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;border-radius:0 5px 5px 0}
.search button svg {width:16px;height:16px;fill:#ffaa00;transition:all .3s ease 0s}

/*=============================================================*/
/* PROFILE
/*=============================================================*/
/* .user_panel {margin-left: 20px;} */
.fn_profile {display:flex;flex-wrap:nowrap;align-items:center;color:#b8bdca;margin-left: 15px;font-weight:600}
.fn_profile .fn_ava, .fn_lock {width:35px;height:35px;border-radius:50%;display:inline-flex;background: #161b28;border:1px solid #2f3749;align-items:center;justify-content:center;color:#b8bdca;font-size:16px;position:relative;overflow:hidden}
.fn_profile .fn_ava::before {content:"\F256";font-family:remixicon!important;position:absolute;z-index:0}
.fn_profile .fn_lock::before {content:"\F126";font-family:remixicon!important;color:#ffaa00; z-index:0}
.fn_profile .fn_ava img {width:100%;height:100%;display:block;object-fit:cover;z-index:1}
.fn_profile > span {margin-left: 10px;}
.fn_profile > span.fn_lock {margin-left: 0px;}
.fn_panel_user {display: flex; flex-wrap: wrap; padding: 10px; min-width: 430px;}
.fn_panel_user li {flex: 0 0 50%; max-width: 50%; text-align: center; padding: 10px;}
.fn_panel_user .fn_card {display:block;padding:12px 7px;border-radius:10px;color:#576071;background: #161b28;position:relative;overflow:hidden; width: 100%;border: 1px solid #2f3749;}
.fn_panel_user .fn_card::before {content: ''; height: 1px; position: absolute; left: 0; right: 0; bottom: 0;transition: all 0.3s ease 0s; transform: scale(0);}
/* .fn_panel_user .fn_card:hover::before {background: #ffaa00; transform: scale(1);} */
.fn_panel_user .fn_card div {font-weight:600;color:#b8bdca; transition: all 0.3s ease 0s;}
.fn_panel_user .fn_card [class*="ri-"] {font-size: 24px; color: #576071;transition: all 0.3s ease 0s;}
.fn_panel_user .fn_card:hover [class*="ri-"] {opacity:1;color:#ffaa00}
.fn_panel_user .fn_card:hover div {color:#ffaa00}
.fn_panel_user li.fn_full {flex: 1 100%; max-width: none;}
.fn_panel_user li.fn_full input {background-color:#181e2b;border:1px solid #131720!important;color:#b8bdca}
.fn_panel_user li.fn_full input[type="checkbox"] {border: 1px solid #b7b2b2 !important;}
.fn_panel_user li.fn_full input[type="checkbox"]:checked {border:1px solid #ffaa00 !important}
.dropdown-menu {padding:0;border:1px solid #131720;border-top:none;margin-top:16px;background: #21283b;border-radius:0 0 10px 10px;box-shadow:0 4px 10px rgba(0,0,0,.2);}
.dropdown-menu-right {right:-21px}
.fn_panel_user.login {min-width:300px}
.fn_panel_user.login .rem_me {text-align: left;}
.fn_panel_user.login .rem_me [type="checkbox"] {margin-right: 10px;}
.fn_panel_user.login .input_field {width:100%;}
.login_bottom {display:flex;justify-content:space-between;padding:5px 12px;flex:1}
.login_bottom a {color: #b8bdca;}
.login_bottom a:hover {color: #ffaa00;}

/*=============================================================*/
/* FOOTER
/*=============================================================*/
.footer {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:10px 20px;background:#1d2333;border-radius:0 15px 15px 15px;border-top:1px solid #2f3749;font-size:12px}
.footer img {display:inline-block;border-radius:6px;}

/*=============================================================*/
/* PROMO CAROUSEL
/*=============================================================*/
.promo_section {padding:20px;background:#101420; border-radius: 0 0 15px 0;}
.promo_title_section {font-size:20px;color:#ffaa00;margin-bottom:20px;font-weight:600;border-radius:0 15px 15px 0;display:flex;align-items:center}
.promo_title_section svg {width:24px;height:auto;margin-right:15px;fill:#ffaa00}
.promo_items {height:210px;position:relative}
.promo_poster {height: 100%; width: 100%; position: relative; border-radius: 10px; overflow: hidden;}
.promo_items .promo_poster img {width:100%;height:100%;display:block;object-fit:cover}
.owl-dots {display:flex;justify-content:center;align-items:center}
.owl-carousel button.owl-dot {width:5%;display:block;height:5px;background:#21283b;border-radius:10px;margin:0 10px!important}
.owl-carousel button.owl-dot.active {background:#ffaa00}
.owl-carousel .owl-stage-outer{margin-bottom:20px}
.owl-prev,.owl-next{position:absolute;top:calc(50% - 35px)}
.owl-prev {left:-60px}
.owl-next {right:-60px}
.owl-nav svg {width:50px;height:50px;fill:#ffaa00;padding:8px}
.owl-nav button {line-height:0!important;background:#101420!important}
.owl-nav button.owl-prev {border-radius:25px 0 0 25px}
.owl-nav button.owl-next {border-radius:0 25px 25px 0}

/*=============================================================*/
/* SHORTSTORY
/*=============================================================*/
.shortstory {background-color:#1d2333;box-shadow:0 0 40px 0 rgba(0,0,0,.06);border-radius:15px;margin-bottom:20px}
.shortstory .item_title {font-size:18px;background:#101420;margin:0 -20px 15px auto;padding:10px 20px;border:1px solid #21283b;border-right:0;border-radius:12px 0 0 12px}
.shortstory .item_title a {font-weight: 700;}
.shortstory_bottom {background:#21283b;border-top:1px solid #2f3749;padding:12px 20px;border-radius:0 0 15px 15px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}
.shortstory_left, .shortstory_right {display: flex;}
.icon_section {display:inline-flex;align-items:center;margin-right:15px;font-size:12px;color:#6a7486;border-right:1px solid #2f3749;padding-right:15px}
.icon_section:last-child {border-right: none;}
.icon_section svg {width:16px;height:auto;fill:#6a7486;margin-right:5px}
.shortstory_top {padding:20px}
.short_content {display: flex; flex-wrap: wrap;}
.shortstory .poster {margin-right:20px;flex:0 0 200px;max-width:200px}
.shortstory .poster_bg {padding:20px;background:#101420;border-radius:12px;border:1px solid #21283b}
.shortstory .poster img {display: block; border-radius: 10px;}
.short_descr {flex: 1;display: flex;flex-direction: column;justify-content: space-between;}
.short_text {margin-bottom: 20px;}
.quality {margin-bottom: 15px;}
.quality span {border-radius:10px;background-color:#101420;border:1px solid #21283b;color:#b8bdca;line-height:1;padding:10px 12px;font-size:12px;display:inline-block}
.short_content_bottom {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.categories {display:inline-flex;align-items:center}
.categories svg {width:32px;height:32px;fill:#ffaa00;margin-right:10px;padding:7px;background:#161b28;border-radius:20px;border:1px solid #21283b}
.categories a {font-size:14px}
.btn_more {background:#101420;padding:7px 15px;border-radius:10px;display:inline-flex;align-items:center}
.btn_more:hover {background-color:#ffaa00;box-shadow:0 0 10px 0 rgba(255,203,0,.3);color:#131720}
.btn_more svg {width:18px;height:18px;background-color:#ffaa00;margin-left:10px;border-radius:50px; transition: all 0.3s ease 0s;}
.btn_more:hover svg {background:#161b28; fill: #ffaa00;}

/*=============================================================*/
/* FULLSTORY
/*=============================================================*/
.fullstory {margin: 20px 0;}
.info_section {margin-bottom:20px}
.info_section br {margin-bottom:10px}
.fullstory .shortstory .poster {flex:0 0 250px;max-width:250px}
.fullstory .shortstory_bottom {border-radius:0;border-bottom:1px solid #2f3749}
.full_descr {padding: 20px; hyphens: auto;}
.section_block {background:#1d2333;padding:20px;border-radius:16px;box-shadow: 0 0 40px 0 rgba(0,0,0,.06);margin-bottom:20px}
.full_message {hyphens: auto;}
.section_title_video {background:#101420;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin: -20px -20px 20px;border-radius:16px 16px 0 0;color:#ffaa00;padding:15px}
.section_title_video > * {margin: 0 !important;}
.title_play {display: inline-flex; align-items: center; font-weight: 600; text-transform: uppercase; font-size: 14px;}
.section_title_video svg {width:32px;height:32px;fill:#ffaa00;margin-right:10px;padding:7px;background:#161b28;border-radius:20px;border:1px solid #21283b}
.btns_select {display:flex;align-items:center}
.btns_select ul {display: inline-flex;}
.btns_select ul li {margin-left:5px;list-style:none;display:inline-flex}
.btns_select ul li a {line-height:0;display:inline-flex}
.nav-item svg {margin-right: 0;}
.nav-item .nav-link svg {background:#101420;fill:#ffaa00;border:1px solid #ffaa00}
.nav-item .nav-link.active svg {fill:#131720;background:#ffaa00}
.player_block {margin-bottom: 20px;}
.player_block:last-child {margin-bottom: 0;}
.nav-tabs, .nav-tabs > li > a {border: none;}
.tabs_title_section {display:flex;align-items:center;background:#101420;border-radius:10px 10px 0 0;padding:12px 15px}
.tabs_title_section svg {fill: #ffaa00; margin-right: 10px;}
.videoWrapper {overflow:hidden;border-radius:0 0 10px 10px;background:#000;border:1px solid #131720}
.select_player {background:#101420;border-radius:10px 10px 0 0;padding:12px 15px;}
.select_player li {list-style: none;}
.tab-pane .nav-item .nav-link {background:#181e2b;color:#ffaa00;border:1px solid #ffaa00;border-radius:7px;padding:7px 10px;margin-right:15px;font-weight:600;display:block;line-height:1}
.tab-pane .nav-link.active {background:#ffaa00;color:#131720}

/*=============================================================*/
/* COMMENTS
/*=============================================================*/
.title_section {font-size:20px;display:flex;align-items:center;margin-top:0;margin-bottom:20px}
.title_section svg {margin-right: 10px; fill: #ffaa00;}
.comments_section .title_section span {background:#ffaa00;line-height:1;display:inline-flex;font-weight:700;color:#131720;border-radius:7px;min-width:25px;height:25px;align-items:center;justify-content:center;margin-left:10px;font-size: 14px;}
.no_comments {box-shadow: 0 0 40px 0 rgba(0,0,0,.06);text-align:center;background: #21283b;border-radius:15px;padding:15px;color:#576071;margin-bottom:20px}
.comm_pages {text-align:center;margin-bottom: 20px;}
.comm_form {box-shadow:0 0 40px 0 rgba(0,0,0,.06);background:#1d2333;padding:15px;border-radius:15px}
.add_comm [type="submit"] {background:#ffaa00;color:#131720;border-radius:7px;padding:8px 10px;margin-right:15px;font-weight:600;display:inline-flex;align-items:center;line-height:1;margin-top:15px}
.add_comm [type="submit"] svg {width:16px;height:16px;margin-left:10px}
.comm_item {box-shadow: 0 0 40px 0 rgba(0,0,0,.06);background:#1d2333;border-radius:15px;margin-bottom:20px}
.comm_item_top {display:flex;align-items:center;border-bottom:1px solid #2f3749;padding:7px 10px;justify-content:space-between;background:#21283b;border-radius:16px 16px 0 0}
.comm_item_info {display:flex;align-items:center;flex:1}
.comm_item_info .ava_user {width:30px;height:30px;border-radius:25px;padding:5px;background:#101420;margin-right:10px}
.comm_item_info .ava_user img {display:block;width:100%;height:100%;object-fit:cover;border-radius:25px;}
.comm_item_info .user_name {margin-right: 15px;}
.comm_item_descr {padding:20px;}
.com-order-block {margin-bottom:20px;background:#1d2333;padding:12px 15px;border-radius:16px;}
.com-order-title {margin-right:10px}
.com-order-select {display:inline-block;line-height:1;background:#181e2b;font-weight:700;padding:7px 10px;text-align:center;border-radius:7px;font-size:12px;color:#ffaa00;cursor:pointer}
.com-order-select option {font-family:'Nunito',sans-serif}
.com_answer {display:inline-block;line-height:1;background:#181e2b;font-weight:700;padding:7px 10px;text-align:center;border-radius:7px;font-size:12px;color:#ffaa00}
.com_answer:hover {background:#ffaa00;color:#131720;border:1px solid #ffaa00;}

/*=============================================================*/
/* ASIDE
/*=============================================================*/
.aside_block {margin-bottom:20px}
.aside_title {font-weight:700;font-size:18px;padding:17px 20px}
.aside_title span {color:#ffaa00;}
.title_section_cat {display:flex;align-items:center;margin-bottom:20px;font-weight:700;color:#ffaa00}
.title_section_cat svg {width:32px;height:32px;fill:#ffaa00;margin-right:10px;padding:7px;background:#161b28;border-radius:20px;border:1px solid #21283b}
.cat_aside {display:flex;flex-wrap:wrap;justify-content:space-between}
.cat_aside ul {margin-bottom: 20px;}
.cat_aside li {list-style: none;}
.cat_aside li a {display:block;color:#9aa4bf;padding:3px 5px}
.cat_aside li a:hover {color:#ffaa00;padding-left:7px}
.cat_aside .cat_menu_left {flex:0 0 50%;margin-bottom:0;padding:15px 15px 0 15px}
.cat_aside .cat_menu_left ul {margin-bottom: 0;}
.cat_aside .cat_menu_left li {border-bottom:1px solid #252c3c}
.cat_aside .cat_menu_left li:first-child {border-top:1px solid #252c3c}
.cat_menu_right {flex: 0 0 50%;}
.cat_menu_right ul li {border-bottom:1px solid #161b28}
.cat_menu_right li:first-child {border-top:1px solid #161b28}
.cat_black {background:#101420;border-radius:16px 0 0 16px;padding:15px;border:1px solid #21283b;border-right:0}
.cat_black_content:last-child ul {margin-bottom: 10px;}

/*=============================================================*/
/* INFORMERS
/*=============================================================*/
.recom_aside {display:flex;flex-wrap:wrap;padding:0 10px}
.recom_aside .item {flex:0 0 50%;padding:10px}
.recom_aside .item .poster {height:205px;padding:15px;background:#101420;border-radius:10px;border:1px solid #21283b;position:relative;margin-bottom:5px}
.recom_aside .item .poster img {display:block;width:100%;height:100%;object-fit:cover;border-radius:10px}
.recom_aside .item .poster .year {position:absolute;bottom:30px;right:15px;background:#ffaa00;line-height:1;display:inline-flex;padding:3px 5px;border-radius:7px 0 0 7px}
.recom_aside .item .poster .year a {color:#101420;font-size:12px;font-weight:800}
.recom_aside h4 {padding:0 5px;text-align:center;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical}
.recom_aside h4 a {color:#9aa4bf}
.recom_aside .item:hover h4 a {color:#ffaa00}