/****overide*****/
/*.slide_hero .grid-box.half-space .items .item:first-child{
margin: 0 !important;
}*/
.card-under-hero.active {
    outline: 2px solid #ff6600;
    border-radius: 6px;
    transition: outline 0.3s ease;
}




/*****************
 * Color schemas *
 *****************/
:root{

    --td-primary: #F8CA12; 
    --td-primary-dark:#F28705;
    --td-primary-light:#F2D43D;

    --td-secondary: #2122f2;
    --td-secondary-dark:#0b0aa6;/*#17358C;*/
    --td-secondary-light:#049DBF;

    --td-tertiary: #D1334C;
    --td-tertiary-dark: #C5112E;
    --td-tertiary-light: #E56176;

    --td-success:#44D991;
    --td-success-dark:#24B26D;
    --td-success-light:#77E3AF;

    --td-warning:#FFE601;
    --td-warning-dark:#CCB800;
    --td-warning-light:#FFED4D;

    --td-danger:#E92222;
    --td-danger-dark:#B01212;
    --td-danger-light:#ED4F4F;

    --td-light:#F1EAE4;
    --td-light-dark:#69625D;
    --td-light-extra-white:#ffffff;
    --td-light-extra-white-transparent:rgba(255,255,255,0.5);

    --td-dark:#091023;
    --td-dark-extra-dark:#050914;
    --td-dark-light:#13234E;


}
body.light{
    /*
    --body-background: var(--td-light);
    --font-base-color: var(--td-dark-light);
    --section-title:var(--td-dark-light);
    --section-backgrounded-title:var(--td-primary-dark);
    --section-hero-title:var(--td-light-extra-white);
    --top-rated-color:var(--td-secondary-dark);
    --button-bg: var(--td-light-extra-white);
    --button-color:var(--td-secondary-dark);
    --button-outline-border: var(--td-light-extra-white-transparent);
    --card-color:var(--td-dark-light);
    --card-title-color-hover:var(--td-primary);
    */

    background-color:var(--body-background);
    color:var(--font-base-color);
}
body.dark{
    --body-background: var(--td-dark-extra-dark);
    --font-base-color: var(--td-light-extra-white);
    --section-title:var(--td-primary);
    --section-backgrounded-title:var(--td-primary);
    --section-hero-title:var(--td-primary);
    --top-rated-color:var(--td-secondary);
    --top-rated-big: var(--td-primary-dark);
    --button-bg: var(--td-light-extra-white);
    --button-color:var(--td-dark-light);
    --button-outline-border: var(--td-light-extra-white-transparent);
    --card-color:var(--td-light-extra-white);
    --card-title-color-hover:var(--td-primary);
    --card11-title-color-hover:var(--td-secondary);
    --card-plan-border:var(--td-light-extra-white);
    --card-mini-title: var(--td-secondary-dark);
    --card-mini-title-bg:var(--td-light-extra-white);
    --card-mini-overlay:var(--td-secondary-dark);
    --card-time:var(--td-secondary-dark);
    --card-role: var(--td-light-dark);
    --star-bg: var(--td-light-extra-white);
    --star-color: var(--td-light-extra-white);
    --star-bg-hover: var(--td-primary);
    --star-color-hover: var(--td-primary);
    --link-color: var(--td-light-extra-white);
    --footer-border: var(--td-dark-light);
    --input-background: var(--td-dark-light);
    --input-border:var(--td-light-dark);
    --input-border-focus:var(--td-light-extra-white);
    --input-color:var(--td-light-extra-white);
    --input-placeholder:var(--td-light-extra-white);
    --icon-background: var(--td-light-extra-white);
    --navbox-bg: var(--td-secondary-dark);
    --offscreen-bg: var(--td-secondary-dark);
    --filter-bg:#381fd9;
    --filter-hover-bg:#385cd9;
    --volume-bar-bg: var(--td-light-extra-white);
    --section-hero-search-bg: var(--td-secondary-dark);
    --search-bar-bg:var(--td-light-extra-white);
    --input-placeholder-light:var(--td-dark-light);
    --search-button-bg:var(--td-dark-light);
    --message-info-bg:var(--td-success);
    --message-info-color:var(--td-light-extra-white);
    --message-warning-bg:var(--td-warning);
    --message-warning-color:var(--td-light-extra-white);
    --message-error-bg:var(--td-danger);
    --message-error-color:var(--td-light-extra-white);
    --comment-input-border:var(--td-light-extra-white);
    --content-rating-box: var(--td-dark-light);
    --content-rating-star: var(--td-primary);
    --search-episodes-bg: var(--td-light-extra-white);
    --episodes-title:var(--td-primary);
    --menu-title:var(--td-primary);
    --menu-button-hover:var(--td-secondary);
    --select-background: var(--td-light-dark);
    --modal-bg: var(--td-dark-extra-dark);
    --modal-grf: linear-gradient(180deg, rgba(8, 18, 34, 0.00) 0%, rgba(8, 18, 34, 0.76) 54.77%, #050914 100%);
    --modal-grs: linear-gradient(270deg, rgba(8, 18, 34, 0.00) 39.44%, rgba(8, 18, 34, 0.95) 83.25%);
    --modal-uh: var(--td-primary);
    --modal-badge-bg: var(--td-light-dark);
    --modal-badge: var(--td-light-extra-white);
    --progress-box-bg:rgba(09, 16, 35,0.8);

    background-color:var(--body-background);
    color:var(--font-base-color);
}
.episodes_title{
    color:var(--episodes-title);
    margin-bottom: 33px;
}
section > h2,
section > h3,
section > h4{
    color:var(--section-title);
}
.offscreen{
    background-color:var(--offscreen-bg);
}
.card_1_1,
.card_16_9{
    color:var(--card-color);
}
.volume-level>span{
    background-color:var(--volume-bar-bg);
}
.card_16_9:focus .card-title,
.card_16_9:hover .card-title{
    color:var(--card-title-color-hover);
}
.card_1_1:focus .card-title,
.card_1_1:hover .card-title{
    color:var(--card11-title-color-hover);
}
.card_1_1 .star:before,
.card_16_9 .star:before{
    background-color:var(--star-bg);
}
.card-header .duration{
    background-color:var(--body-background);
    color:var(--input-border);
}
.card-header .progress{
    background-color:var(--section-backgrounded-title);
}
.card-header .progress_box{
    background-color:var(--progress-box-bg);
}
.card_1_1:hover .duration,
.card_1_1:focus .duration,
.card_16_9:hover .duration,
.card_16_9:focus .duration{
    color:var(--font-base-color);
}
.card_1_1:hover .star,
.card_1_1:focus .star,
.card_16_9:hover .star,
.card_16_9:focus .star{
    color:var(--star-color-hover);
}
.card_1_1:hover .star:before,
.card_1_1:focus .star:before,
.card_16_9:hover .star:before,
.card_16_9:focus .star:before{
    background-color:var(--star-bg-hover);
}
.card-time{
    color: var(--card-time);
}
.card_mini h6{
    color:var(--card-mini-title);
    background-color:var(--card-mini-title-bg);
}
.card_mini:after{
    background:var(--card-mini-overlay);
}
.top_rated{
    color: var(--top-rated-big);
}
section.backgrounded h4{
    color: var(--section-backgrounded-title);
}
section.hero_content h6,
section.hero h6{
    color: var(--section-hero-title);
}
.under-hero.with_episodes h6{
    color:var(--section-hero-title);
}
button, input[type="button"], input[type="submit"],
input[type="reset"], .button, select{
    background-color:var(--button-bg);
    color:var(--button-color);
    will-change: background;
    transition: background 0.3s ease;
    border:0;
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover,
input[type="reset"]:hover, .button:hover, select:hover{
    background-color:var(--button-outline-border);
}
select{
    border:1px solid var(--input-border);
}
select:focus{
    border-color:var(--input-border-focus);
}
button.button-outline, input[type="button"].button-outline,
input[type="submit"].button-outline, input[type="reset"].button-outline,
.button.button-outline, select.select-outline{
    background-color:transparent;
    color:var(--button-bg);
    border:1px solid var(--button-outline-border);
    will-change: border-color;
    transition:border-color 0.3s ease;
}
button.button-outline:hover, input[type="button"].button-outline:hover,
input[type="submit"].button-outline:hover, input[type="reset"].button-outline:hover,
.button.button-outline:hover, select.select-outline:hover{
    border-color:var(--button-bg);
}
button .icon:before, input[type="button"] .icon:before, input[type="submit"] .icon:before,
input[type="reset"] .icon:before, .button .icon:before{
    background-color:var(--button-color);
}
button.button-outline .icon:before, input[type="button"].button-outline .icon:before,
input[type="submit"].button-outline .icon:before, input[type="reset"].button-outline .icon:before,
.button.button-outline .icon:before{
    background-color:var(--button-bg);
}
button[disabled], button:disabled,
.button[disabled], .button:disabled,
input[disabled], input:disabled, 
.button-outline[disabled], .button-outline:disabled{
    opacity:0.5 !important;
}
a{
    color: var(--link-color);
}
footer{
    border-top-color: var(--footer-border);
}
.icon:before{
    background-color:var(--icon-background);
}
.category_label{
    background-color:var(--button-bg);
    color:var(--button-color);
    border-color:var(--button-bg);
}
.navbox{
    background: var(--navbox-bg);
}
.offscreen .navbox,
.offscreen .navbox li{
    background: transparent;
}
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="phone"]{
    border-color:var(--input-border);
    color:var(--input-color);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="phone"]:focus{
    border-color:var(--input-border-focus);
}
::placeholder {
    color:var(--input-placeholder);
}
.input_group{
    border-color:var(--input-border);
}
.input_group.focus{
    border-color:var(--input-border-focus);
}
.input_group .icon:before{
    background-color:var(--input-border);
}
.input_group.focus .icon:before{
    background-color:var(--input-border-focus);
}
.card_plan{
    border-color:var(--card-plan-border);
}
.card_plan h4{
    color: var(--font-base-color);
}
.filter{
    background-color:var(--filter-bg);
    will-change: background;
    transition:background 0.3s ease;
}
.filter.active,
.filter:hover{
    background-color:var(--filter-hover-bg);
}
input[type="radio"]+label:before,
input[type="checkbox"]+label:before{
    border-color:var(--input-border-focus);
}
input[type="radio"]+label:after,
input[type="checkbox"]+label:after{
    background-color:var(--section-backgrounded-title);
}
.player_bar{
    background-color: var(--font-base-color);
}
.player_progress{
    background-color: var(--section-backgrounded-title);
}
.info_video h5{
    color: var(--section-backgrounded-title);
}
section.hero_search{
    background-color:var(--section-hero-search-bg);
}
.search_bar{
    background-color:var(--search-bar-bg);
}
.search_bar ::placeholder {
    color:var(--input-placeholder-light);
}
.search_bar input[type="text"] {
    color:var(--input-placeholder-light);
}
.search_button{
    background-color: var(--search-button-bg);
}
.search_button .icon::before{
    background-color:var(--button-bg);
}
.message.info{
    background-color:var(--message-info-bg);
    color: var(--message-info-color);
}
.message.warning{
    background-color:var(--message-warning-bg);
    color: var(--message-warning-color);
}
.message.error{
    background-color:var(--message-error-bg);
    color: var(--message-error-color);
}
body.dark .login_img_box:after{
    background: linear-gradient(180deg, #3DA2FF 1.04%, #FFE710 48.96%, #E548A7 100%);
}
body.dark header{
    background: linear-gradient(180deg, #0B1323 0%, rgba(11, 19, 35, 0.00) 100%);
}
/*
body.dark .card_1_1 .star:before,
body.dark .card_16_9 .star:before{
    background-color:#fff;
}
*/

body.dark section.backgrounded:before{
    background: linear-gradient(180deg, #0B1323 0%, rgba(11, 19, 35, 0.00) 100%);
}
body.dark section.hero_content:before,
body.dark section.hero:before{
    /*background: linear-gradient(270deg, rgba(8, 18, 34, 0.00) 0%, rgba(8, 18, 34, 0.95) 72.35%);*/
    background-image: var(--modal-grs);
}
body.dark section.hero_content:after,
body.dark section.hero:after{
    background-image: var(--modal-grf);
}
body.dark section.hero_category:before{
    background: linear-gradient(180deg, rgba(8, 18, 34, 0.00) 0%, rgba(8, 18, 34, 0.76) 54.77%, #050914 100%);
}
body.dark .hero_content_watching_background:before{
    background: radial-gradient(47.69% 47.69% at 50.00% 52.31%, rgba(6, 11, 19, 0.00) 85.18%, #050914 100%);
}
body.dark .player_controller{
    background: rgba(6, 11, 19, 0.90);
}

body.dark select {
    background-image: url(img/arrow-down-select-black.svg);
}
body.dark select.select-outline {
    background-image: url(img/arrow-down-select.svg);
}
body.light select {
    background-image: url(img/arrow-down-select.svg);
}
body.light select.select-outline {
    background-image: url(img/arrow-down-select-black.svg);
}
option{
    color:#000;
}
.auto_width{
    width:100%;
}
.no-margin{
    margin-bottom:0;
}
select.select-outline.select-with-background{
    background-color:#283348;
    border-color:#283348;
}
select.select-outline.select-with-background:focus{
    border-color:#283348;
}
@media (max-width:1024px) {
    body.dark section.hero_content:before,
    body.dark section.hero:before{
        background: linear-gradient(225deg, rgba(8, 18, 34, 0.00) 0%, rgba(8, 18, 34, 0.95) 75.51%, #081222 97.29%);
    }
    body.dark .hero_mobile::after{
        background: linear-gradient(180deg, #3DA2FF 1.04%, #FFE710 48.96%, #E548A7 100%);
    }
}
/*****************
 * Base settings *
 *****************/
body, html{
    margin:0;
    padding:0;
}
*, *:before, *:after{
    box-sizing: border-box;
    text-decoration:none;
}
body.modal_active,
body.menuAsideOpened,
body.userAsideOpened{
    /*overflow-y:hidden;*/
}
input[type="checkbox"], input[type="radio"]{
    position:fixed;
    top:-200vh;
}
input[type="radio"]+label,
input[type="checkbox"]+label{
    position:relative;
    padding-left:30px;
    padding-top:3px;
    display:inline-block;
    min-height:24px;
}
input[type="radio"]+label:before,
input[type="checkbox"]+label:before{
    content:"";
    display:inline-block;
    width:24px;
    height:24px;
    border-width: 1px;
    border-style: solid;
    position:absolute;
    left:0;
    top:0;
    border-radius:3px;
    cursor:pointer;
}
input[type="radio"]+label:before{
    border-radius:20px;
}
input[type="radio"]+label:after,
input[type="checkbox"]+label:after{
    content:"";
    display:inline-block;
    width:18px;
    height:18px;
    position:absolute;
    left:3px;
    top:3px;
    border-radius:2px;
    transform-origin: center center;
    transform: scale(0);
    transition: transform 0.3s ease;
    will-change: transform;
    cursor:pointer;
}
input[type="radio"]+label:after{
    border-radius:20px;
}
input[type="radio"]:checked+label:after,
input[type="checkbox"]:checked+label:after{
    transform: scale(1);
}
button, input[type="button"], input[type="submit"], input[type="reset"], .button, select{
    border-radius:40px;
    padding:16px 24px;
    display:inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor:pointer;
    outline: 0;
    white-space: nowrap;
}
.atv-block{
    display:block !important;
    width:100%;
}
.atv-margin-big{
    margin:30px 0;
}
.atv-margin{
    margin:20px 0;
}
.atv-margin-small{
    margin:10px 0;
}
button.icon_only, input[type="button"].icon_only, input[type="submit"].icon_only,
input[type="reset"].icon_only, .button.icon_only {
    padding:16px;
}
button.with_icon .icon, input[type="button"].with_icon .icon, input[type="submit"].with_icon .icon,
input[type="reset"].with_icon .icon, .button.with_icon .icon{
    vertical-align:middle;
    width:24px;
    height:24px;
    margin-right:12px;
}
button.with_icon_right .icon, input[type="button"].with_icon_right .icon, input[type="submit"].with_icon_right .icon,
input[type="reset"].with_icon_right .icon, .button.with_icon_right .icon{
    margin-right:0;
    margin-left:12px;
}
button.icon_only .icon, input[type="button"].icon_only .icon, input[type="submit"].icon_only .icon,
input[type="reset"].icon_only .icon, .button.icon_only .icon{
    margin-right:0;
    margin-left:0;
}
select {
    text-indent: 1px;
    text-overflow: '';
    background-position:right 18px center;
    background-size:28px 28px;
    background-repeat:no-repeat;
    padding-right:50px !important;
    transition: border-color 0.3s ease;
    will-change: border-color;
}

select::-ms-expand {
    display: none;
}
p,h1,h2,h3,h4,h5,h6{
    margin:0;
}
main{
    width:76%;
    margin:0 auto;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="phone"]:focus,
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="phone"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display:block;
    width:100%;
    border-width: 1px;
    border-style: solid;
    border-radius:60px;
    padding:10px 26px;
    background-color:transparent;
    outline: 0;
    transition: border-color 0.3s ease;
    will-change: border-color;
}
.form_group{
    margin-bottom:80px;
}
.form_section h6,
.form_group h6{
    margin-bottom:8px;
}
.space_title h6{
    margin-bottom:40px;
}
.profile_pic{
    width:128px;
    height:128px;
    object-fit: cover;
    border-radius: 64px;
}
.pic_settings{
    margin-top:0;
}
.pic_settings .atv_grid_row{
    align-items:center;
    justify-content: space-between;
}
.pic_settings .atv_grid_row .atv_grid_col_50:last-child{
    text-align: right;
}
.input_group{
    border-width: 1px;
    border-style: solid;
    border-radius:60px;
    display:flex;
    align-items: center;
    transition: border-color 0.3s ease;
    will-change: border-color;
}
.input_group input[type="text"]:focus, .input_group input[type="password"]:focus,
.input_group input[type="email"]:focus, .input_group input[type="number"]:focus,
.input_group input[type="phone"]:focus, .input_group input[type="text"],
.input_group input[type="password"], .input_group input[type="email"],
.input_group input[type="number"], .input_group input[type="phone"]{
    border:0;
    border-radius:0;
}
.input_group .icon{
    width:24px;
    height:24px;
    margin:0 26px;
}
.login-form{
    max-width:80%;
    margin-top:auto;
    margin-bottom:auto;
}
.login-form.extended{
    max-width:100%;
}
.login > .atv_grid{
    margin:0
}
.login .login-box{
    min-height:calc(100vh - 88px);
    flex-direction: column;
    display: flex;
}
.login_img_box{
    height:80%;
    width:90%;
    margin:auto;
    border-radius:120px;
    position:relative;
}
.login_img_box:after{
    content: "";
    position: absolute;
    top:0;
    left: 0;
    width:100%;
    height:100%;
    opacity: 0.5;
    border-radius:120px;
}

.login_img_box img{
    height:100%;
    width:100%;
    object-fit: cover;
    border-radius:120px;
}
main.login{
    width:88%;
    margin-left:12%;
}
main.login h1{
    margin-bottom:20px;
}
main.login p{
    margin-bottom:80px;
}
main.login > atv_grid{
    margin: auto 0;
}
.login-form > .atv_grid{
    margin-bottom:70px;
}
.login-form > .atv_grid.mini{
    max-width:80%;
}
.login_img_col{
    display: flex;
    flex-direction: column;
}
.signin_buttons_box{
    display:flex;
    gap:20px;
}
.hero_mobile{
    display:none;
}
.scrollable-box{
    max-height: 100vh;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollable-box::-webkit-scrollbar {
    display: none;
}
.star-rating{
    display:flex;
    align-items: center;
    margin-right:5px;
}
@media (max-width:1024px) {
    .hero_mobile{
        display:block;
        padding:200px 80px 80px 80px;
        background-repeat:no-repeat;
        background-size:cover;
        position: relative;
        border-radius: 0px 0px 40px 40px; 
    }
    .hero_mobile::after{
        content:"";
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        opacity: 0.5;
        border-radius: 0px 0px 40px 40px; 
    }
    .hero_mobile h1{
        position:relative;
        z-index:2;
    }
    .login .login-box{
        min-height:initial;
    }
    .login-form h1{
        display:none;
    }
    .login_img_col{
        display: none;
    }
    main.login{
        width:90%;
        margin:0 auto 0 auto;
    }
    .login-form{
        max-width:100%;
        margin-top:50px;
        margin-bottom:130px;
    }
    .login-form > .atv_grid.mini,
    .login-form > .atv_grid {
        max-width:none;
    }
    .signin_buttons_box{
        flex-direction: column;
    }
    main.login .mob_mini{
        width:77%;
        margin:auto;
    }
    input[type="radio"]+label{
        min-height:20px;
        padding-top:1px;
    }
    input[type="radio"]+label:before{
        width:20px;
        height:20px;
    }
    input[type="radio"]+label:after{
        width:14px;
        height:14px;
    }
    .pic_settings .atv_grid_row .atv_grid_col_50,
    .pic_settings .atv_grid_row .atv_grid_col_50:last-child{
        text-align: center;
    }
    button, input[type="button"], input[type="submit"], input[type="reset"], .button, select{
        padding:15px 22px;
        vertical-align: middle;
    }
    button.with_icon .icon, input[type="button"].with_icon .icon, input[type="submit"].with_icon .icon,
    input[type="reset"].with_icon .icon, .button.with_icon .icon{
        width:20px;
        height:20px;
    }
    .input_group input[type="text"]:focus, .input_group input[type="password"]:focus,
    .input_group input[type="email"]:focus, .input_group input[type="number"]:focus,
    .input_group input[type="phone"]:focus, .input_group input[type="text"],
    .input_group input[type="password"], .input_group input[type="email"],
    .input_group input[type="number"], .input_group input[type="phone"]{
        line-height: 30px;
    }
    .no_text_mob{
        padding:15px !important;
    }
    .no_text_mob .icon{
        margin:0 !important;
    }
    .scrollable-box{
        max-height: initial;
        overflow-y: hidden;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        display:flex;
        gap:24px;
    }
    .scrollable-box::-webkit-scrollbar {
        display: none;
    }
    .atv_aside_col .card_16_9, .atv_aside_col .card_16_9 .card-header, .atv_aside_col .card_16_9 .poster {
        width:280px !important;
    }
    .no-mob{
        display:none;
    }
    .to-col-mob{
        display:flex;
        flex-direction:column;
    }
}
/**************
 * Typography *
 **************/
body, p{
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
}
.display01{
    font-family: 'Montserrat', sans-serif;
    font-size: 320px;
    font-weight: 900;
}
.display02{
    font-family: 'Montserrat', sans-serif;
    font-size: 192px;
    font-weight: 900;
}
h1, .h1{
    font-family: 'Montserrat', sans-serif;
    font-size: 64px;
    font-weight: 500;
}
h2, .h2{
    font-family: 'Montserrat', sans-serif;
    font-size: 56px;
    font-weight: 600;
}
h3, .h3{
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: 500;
}
h4, .h4{
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: 500;
}
h5, .h5{
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 500;
}
h6, .h6{
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
}
button, input[type="button"], input[type="submit"], input[type="reset"], .button, select{
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
}
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="phone"]{
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 32px;
}
.little{
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500; 
}
.card-time{
    font-family: Montserrat;
    font-size: 72px;
    font-weight: 700;
    line-height: 0.5em;
}
.comment_title{
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal; 
}
@media (max-width:1024px) {
    body, p{
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 400;
    }
    .display01{
        font-size: 192px;
        font-weight: 600;
    }
    .display02{
        font-size: 80px;
        font-weight: 900; 
    }
    h1, .h1{
        font-size: 32px;
        font-weight: 500;
    }
    h2, .h2{
        font-size: 32px;
        font-weight: 500;
    }
    h3, .h3{
        font-size: 24px;
        font-weight: 900;
    }
    h4, .h4{
        font-size: 20px;
        font-weight: 700;
    }
    h5, .h5{
        font-size: 18px;
        font-weight: 500;
    }
    h6, .h6{
        font-size: 16px;
        font-weight: 900;
    }
    button, input[type="button"], input[type="submit"], input[type="reset"], .button, select{
        font-size: 14px;
        font-weight: 500;
    }
    .little{
        font-size: 10px;
        font-weight: 500;
    }
    .category_tab .category_label{
        font-size:14px;
    }
    input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="phone"]{
        font-size: 14px;
        line-height: 30px;
    }
    .card-time{
        font-size: 48px;
    }
    .no_text_mob{
        font-size:0 !important;
    }
    h1.menu_card_title{
        font-size: 48px;
        font-weight: 500;
    }
}
/*********************
 * Flex standard gap *
 *********************/
.gap10{gap:10px;}
.gap20{gap:20px;}
.gap30{gap:30px;}
.gap40{gap:40px;}
.gap50{gap:50px;}
.gap60{gap:60px;}
.gap70{gap:70px;}
.gap80{gap:80px;}
.gap90{gap:90px;}
.gap100{gap:100px;}

/**********
 * Header *
 **********/
header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:10px 48px;
    z-index:1;
}

.flex_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo_box{
    display:inline-block;
}
.logo_box img{
    display:block;
    height:98px;
}
.flex_box_spaced{
    margin-left:calc(100vw / 12);
    margin-top:50px;
    display:flex;
    gap: 20px;
    align-items: center;
}

/**********
 * Footer *
 **********/
footer{
    border-top-width:1px;
    border-top-style: solid;
    padding:10px 48px;
}
footer ul{
    padding:0;
    list-style:none;
    margin:0;
}
footer ul li{
    display:inline-block;
    margin: 18px 33px 25px 33px;
}
footer ul li a{
    will-change:color;
    transition: color 0.3s ease;
}
footer ul li a:hover{
    color:var(--top-rated-color);
}
footer ul.social_list li{
    margin: 18px 9px 25px 9px;
}
footer ul.social_list li:first-child,
footer ul li:first-child{
    margin-left:0;
}
footer ul.social_list li:last-child,
footer ul li:last-child{
    margin-right:0;
}
footer ul.social_list li a .icon:before{
    will-change: background;
    transition: background 0.3s ease;
}
footer ul.social_list li a:hover .icon:before{
    background-color:var(--top-rated-color);
}
@media (max-width:1024px) {
    footer ul li{
        display:block;
        margin: 0px 0px 21px 0px;
    }
    footer ul li:first-child{
        margin-top:66px;
    }
    footer ul.social_list li{
        display:inline-block;
    }
    footer .flex_box{
        align-items:flex-end;
    }
}

/********
 * Grid *
 ********/
.atv_container{
    width:83.333%;
    margin-left:auto;
    margin-right:auto;
}
.atv_grid{
    display:flex;
    flex-direction:column;
    gap: 30px;
    margin:30px 0;
}
.atv_grid_row{
    display:flex;
    gap: 30px;
}
.atv_margin_auto{
    margin:auto;
}
.atv_no_margin_top{
    margin-top:0;
}
.atv_margin_top{
    margin-top:100px;
}
.valign_center{
    align-items: baseline;
}
.atv_grid_col_100{ width:100%; }
.atv_grid_col_90{ width:90%; }
.atv_grid_col_80{ width:80%; }
.atv_grid_col_70{ width:70%; }
.atv_grid_col_60{ width:60%; }
.atv_grid_col_50{ width:50%; }
.atv_grid_col_40{ width:40%; }
.atv_grid_col_30{ width:30%; }
.atv_grid_col_20{ width:20%; }
.atv_grid_col_10{ width:10%; }
.no-border{
    border-color: transparent!important;
}
@media (max-width:1024px) {
    .atv_grid_row{
        flex-wrap: wrap;
    }
    .atv_grid_col_90:not(.no-break), .atv_grid_col_80:not(.no-break), .atv_grid_col_70:not(.no-break),
    .atv_grid_col_60:not(.no-break), .atv_grid_col_50:not(.no-break), .atv_grid_col_40:not(.no-break), .atv_grid_col_30:not(.no-break), 
    .atv_grid_col_20:not(.no-break), .atv_grid_col_10:not(.no-break){ 
        width:100%;
    }
    .atv_grid_row.no-break{
        flex-wrap:nowrap;
    }
}
/***************
 * Menu header *
 ***************/
.menuHeader{
    position:absolute;
    width:calc(100% - 96px);
    top:20px;
    z-index:10;
}

@media (max-width:1024px) {
    .menuHeader{
        width:calc(100% - 32px);
        top:32px;
        left:16px;
    }
    .menuHeader .button.button.icon_only{
        padding: 2px;
    }
}
/**************
 * Menu Panel *
 **************/
.atv_grid.menu_panel{
    height:100vh;
    margin:0;
    justify-content: center;
}
.menu_panel .display02{
    color:var(--menu-title);
}
.menu_panel .atv_grid_row{
    height:100%;
}
.menu_panel_left{
    display:flex;
    flex-direction: column;
    justify-content: center;
}
.menu_panel_right{
    max-height: 100vh;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding:150px 0;
}
.menu_panel_right::-webkit-scrollbar {
    display: none;
}
.menu_panel_right .menu_item:nth-child(even){
    text-align:right;
}
.mobile_menu{display:none;}
@media (max-width:1500px) {
    .menu_panel .display02{
        font-size:142px;
    }
}
@media (max-width:1024px) {
    .menu_panel_left{
        display:none;
    }
    .mobile_menu{
        display:flex;
        flex-direction: column;
        justify-content: center;
        width:100%;
    }
    .menu_panel_right{
        overflow-y: hidden;
        overflow-x: auto;
        height:initial;
        padding:0 50px;
        display:flex;
    }
}
/*****************
 * Rating system *
 *****************/
 .rate {
    float: left;
    height: 28px;
    padding: 0px;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:28px;
    height:28px;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:0px;
    color:#ccc;
}
/*
.icon:before{
    content:"";
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;          
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
    display:block;
    width:100%;
    height:100%;
    transition: background-color 0.4s ease;
    will-change: background-color;
}

.icon.icon-subtitles:before{
    -webkit-mask-image: url(img/icons/subtitles.svg);
            mask-image: url(img/icons/subtitles.svg);
}
*/
.rate:not(:checked) > label:before {
    /*content: '★ ';*/
    content:"";
    display:block;
    width:28px;
    height:28px;
    background-image: url(img/icons/star-stroke.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.rate > input ~ label::after {
    display:none !important; 
}
.rate > input ~ label::before {
    border:0 !important; 
    width:28px;
    height:28px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.rate > input:checked ~ label::before {
    background-image: url(img/icons/star-fill.svg); 
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.rate:not(:checked) > label:hover::before,
.rate:not(:checked) > label:hover ~ label::before {
    background-image: url(img/icons/star-fill.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.rate > input:checked + label:hover::before,
.rate > input:checked + label:hover ~ label::before,
.rate > input:checked ~ label:hover::before,
.rate > input:checked ~ label:hover ~ label::before,
.rate > label:hover ~ input:checked ~ label::before {
    background-image: url(img/icons/star-fill.svg); 
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

/********
 * Tabs *
 ********/
.tab_switcher{
    padding:0;
    margin:0;
    display:flex;
    list-style:none;
    gap:10px;
    position:relative;
    margin-bottom:35px;
}

.tab_switcher li{
    position:relative;
    cursor:pointer;
    padding: 0 10px;
    font-size: 18px;
    font-weight: 700;
    color:var(--input-border);
}
.tab_switcher:after,
.tab_switcher li:after{
    content:"";
    height:2px;
    width:100%;
    position:absolute;
    bottom:-8px;
    left:0;
    background-color: var(--input-border);
}
.tab_switcher li.active{
    color:var(--section-title);
}
.tab_switcher li.active::after{
    background-color:var(--section-title);
    z-index:200;
}
.tab_panel{
    display:none;
}
.tab_panel.active{
    display:block;
}
/**************
 * Menu Card  *
 **************/
.menu_card{
    display:inline-block;
    position:relative;
    width:552px;
}
.menu_card_poster{
    text-align:left;
    display: block;
    width:252px;
    position:relative;
    aspect-ratio: 252 / 444;
}
.menu_card_poster:after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border-radius: 70px;
    opacity: 0.5;
    background: var(--angel-tv-gradient, linear-gradient(180deg, #3DA2FF 1.04%, #FFE710 48.96%, #E548A7 100%));
}
.menu_card_poster .poster{
    height:444px;
    aspect-ratio: 252 / 444;
    object-fit: cover;
    border-radius: 70px;
    display:block;
}
.menu_card_title{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 230px;
    max-width:300px;
    text-align:left;
}
@media (max-width:1024px) {
    .menu_card{
        width:380px;
    }
    .menu_card_poster{
        width:166px;
        aspect-ratio: 166 / 363;
        transform: rotate(-4.754deg); 
    }
    .menu_card_poster:after{
        border-radius:72px;
    }
    .menu_card_poster .poster{
        height:363px;
        aspect-ratio: 166 / 363;
        border-radius: 72px;
    }
    .menu_card_title{
        left: 80px;
    }
}
/*************
 * User Menu *
 *************/
.user_menu_logged_in{
    display:flex;
    flex-direction: column;
    gap:16px;
    margin-top:auto;
    margin-bottom:auto;
}
.user_menu_logged_in_button_box{
    margin-bottom:100px;
    margin-top:0;
}
.user_menu_item{
    display:inline-flex;
    align-items: center;
    padding:16px;
    gap:20px;
}
.user_menu_item .icon{
    width:32px;
    height:32px;
}
.box_user_menu_mob{
    display:flex;
    flex-direction: column;
    justify-content: center;
    height:100vh;
    padding:0 16px;
}
.box_user_menu_mob .display02{
    color:var(--menu-title);
    margin-bottom:100px;
}
@media (max-width:1024px) {
    .user_menu_logged_in_button_box{
        margin-bottom:47px;
    }
    .user_menu_logged_in_button_box a{
        display:block;
        text-align:center;
    }
}
/**********
 * Navbox *
 **********/
.navbox{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    padding:12px 28px;
    gap:28px;
    border-radius:42px;
}
.navbox li{
    display:inline-block;
    cursor:pointer;
}
.navbox li .icon{
    width: 28px;
    height: 28px;
}

.navbox li.btnMob{
    display:none;
}
header .navbox li{
    will-change: background;
    transition: background 0.3s ease;
    border-radius:32px;
    padding:8px;
}
header .navbox li:hover{
    background-color:var(--menu-button-hover);
}
@media (max-width:1024px) {
    header .navbox li{
        padding:0;
    }
    .navbox li.btnMob{
        display: inline-block;
    }
}
/*********
 * Modal *
 *********/
.modal{
    background-color:rgba(5, 9, 20, 0.70);
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    justify-content: flex-end;
    align-items: center;
    z-index:-2000;
    opacity:0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    will-change: opacity;
    
}
.modal.active{
    opacity:1;
    z-index:3000;
    pointer-events: auto;
}
.modal_box{
    width:80%;
    max-width:1328px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    background-color:var(--modal-bg);
    margin-top:30px;
    margin-bottom:0px;
    opacity:0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    will-change: opacity;
    position:relative;
}

.modal.active .modal_box{
    opacity:1;
    pointer-events: auto;
}

.modal_contents{
    max-height:calc(100vh - 60px);
    overflow-x:hidden;
    overflow-y:auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
}
.modal_contents::-webkit-scrollbar {
    display: none;
}
.modal_hero{
    position:relative;
    padding:30px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    overflow:hidden;
    background-size: cover;
    background-position: center center;
    margin-bottom:50px;
}
.modal_hero_gradient_first,
.modal_hero_gradient_second{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image: var(--modal-grf);
    background-size:100% 100%;
    background-position:bottom left;
    background-repeat:no-repeat;
}
.modal_hero_gradient_second{
    background-image: var(--modal-grs);
}
.modal_hero_data{
    position:relative;
    z-index:2;
    max-width:650px;
    margin-top:150px;
}
.modal_close_box{
    position:absolute;
    z-index:10;
    text-align:right;
    margin-bottom:50px;
    width:100%;
    padding:30px;
}
.modal_hero_under_title{
    margin: 30px 0;
    padding:0;
    display:flex;
    list-style:none;
    gap:10px;
    color:var(--modal-uh);
    align-items: center;
}
.modal-margin{
    margin-bottom:50px;
}
.modal-margin .items .item{
    margin-right:calc(1em + 1px);
}
.modal_badge{
    background:var(--modal-badge-bg);
    color:var(--modal-badge);
    display:inline-block;
    padding:5px 10px;
    border-radius:20px;
    font-weight: 500;
    font-size:12px;
}
.modal_hero_buttons_box{
    margin-top:30px;
    display:flex;
    gap:15px;
}
.modal_section{
    padding:30px;
    padding-bottom:0px;
    display:flex;
    gap:15px;
}
.modal_section h3{
    color: var(--star-color-hover);
}
.modal .card_16_9,
.modal .card_16_9 .card-header,
.modal .card_16_9 .poster{
    width:340px;
}
.modal .card_16_9 .card-header,
.modal .card_16_9 .poster{
    height:205px;
}
@media (max-width:1024px) {
    .modal_box{
        width:90%;
    }
    .modal_hero_under_title{
        overflow-y: hidden;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .modal_hero_under_title li{
        white-space: nowrap;
    }
    .modal_hero_under_title::-webkit-scrollbar {
        display: none;
    }
}
/**********
 * Switch *
 **********/
.switch_mode{
    border:1px solid var(--button-bg);
}
.switch_mode input[type="radio"]{
    position:fixed;
    top:-200vh;
}
.switch_mode input[type="radio"]+label{
    opacity:0.5;
    transition: opacity 0.3s ease;
    will-change: opacity;
    cursor:pointer;
}
.switch_mode input[type="radio"]:checked+label{
    opacity:1;
}

.switch_mode input[type="radio"]+label.icon:after{
    display:none !important;
}
@media (max-width:1024px) {
    .navbox.switch_mode{
        gap:10px;
        padding:12px;
    }
    .switch_mode input[type="radio"]+label.icon:before{
        left:5px;
        top:4px;
    } 
}
/*************
 * Offscreen *
 *************/
.offscreen{
    height:100%;
    width:100%;
    max-width:720px;
    overflow-x: hidden;
    overflow-y: auto;
    position:fixed;
    top:0;
    right:0;
    padding:0px 48px;
}
@media (max-width:1024px) {
    .offscreen{
        padding:0px;
    }
}
/**************
 * Menu Aside *
 **************/
 #menuAside, #userAside{
    visibility:hidden;
    pointer-events: none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transition: opacity 0.5s ease, visibility 0.01s ease 0.52s;
    will-change: opacity;
    z-index:2999;
    opacity:0;
    background-color:rgba(5, 9, 20, 0.70);
}
body.userAsideOpened #userAside,
body.menuAsideOpened #menuAside{
    opacity:1;
    visibility:visible;
    pointer-events: initial;
    transition: opacity 0.5s ease 0.1s, visibility 0.01s;
}
body.userAsideOpened #userAsideOffscreen,
body.menuAsideOpened #menuAsideOffscreen{
    right:0;
}
/**************
 * Slide grid *
 **************/
.grid-box{
    overflow-x: hidden;
    overflow-y: hidden;
}
.items{
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
}
body.is_mobile .items{
    overflow-x: auto;
}
.grid-box .items *{
    user-select: none;
}
.item {
    display: inline-block;
    margin: 2em 1em;
}
.items .item:first-child{
    margin-left:calc(100vw / 12);
}
.modal-margin .items .item:first-child{
    margin-left:30px;
}
.no-margin .items .item:first-child{
    margin-left:0;
}
@media (max-width:1024px) {
    .items .item:first-child{
        margin-left: 18px;
    }
}
/**************
 * Volume Bar *
 **************/
.volume-box{
    display: flex;
}
.volume-level{
    display: flex;
    justify-content: space-between;
    width:44px;
    height: 24px;
    align-items: flex-end;
    margin:0 16px;
}
.volume-level>span{
    width:4px;
    opacity:0.2;
}
.volume-level>span.volume-active{
    opacity:0.8;
}
.volume-level>span:nth-child(1){
    height:5px;
}
.volume-level>span:nth-child(2){
    height:7px;
}
.volume-level>span:nth-child(3){
    height:11px;
}
.volume-level>span:nth-child(4){
    height:14px;
}
.volume-level>span:nth-child(5){
    height:19px;
}
.volume-level>span:nth-child(6){
    height:24px;
}
/***********
 * Filters *
 ***********/
.filter{
    border-radius:24px;
    display:flex;
    padding:16px 22px;
    gap:12px;
    align-items: center;
}
.filter .icon{
    width:24px;
    height:24px;
}

/****************
 * Category tab *
 ****************/
.category_tab{
    display:inline-block;
    height:220px;
    min-width:300px;
    max-width:500px;
    position:relative;
    margin-top:20px;
    text-decoration: none;
    user-select: none !important;
}
.category_tab .category_label{
    margin:165px 100px 15px 16px;
    padding:6px 12px;
    border-radius:20px;
    height:40px;
    line-height:28px;
    white-space: nowrap;
    display:inline-block;
    user-select: none !important;
}
.category_mask{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    user-select: none !important;
    -webkit-mask-image: url(img/clip.svg);
            mask-image: url(img/clip.svg);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;          
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
    -webkit-mask-clip: content-box;
            mask-clip: content-box;
    z-index:-1;
}
.category_mask::after, .category_mask_bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    user-select: none !important;
}
.category_mask::after{
    content:"";
    opacity:0.8;
}
.category_mask_bg{
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    transition: transform 0.24s ease;
    will-change: transform;
}
.category_tab.yellow .category_mask::after{
    background-color:#FAD942;
}
.category_tab.green .category_mask::after{
    background-color:#42FAB8;
}
.category_tab.pink .category_mask::after{
    background-color:#FA4284;
}
.category_tab.blue .category_mask::after{
    background-color:#4249FA;
}
.category_tab.fluogreen .category_mask::after{
    background-color:#9EFA42;
}
.category_tab:focus .category_mask_bg,
.category_tab:hover .category_mask_bg{
    transform: scale(1.2);
}
.category_tab .poster{
    position:absolute;
    top:-20px;
    right:20px;
    width:100px;
    height:96px;
    border-radius:50px;
    transition: width 0.24s ease;
    will-change: width;
    object-fit: cover;
    user-select: none !important;
}
.category_tab:focus .poster,
.category_tab:hover .poster{
    width:147px;
}
@media (max-width:1024px) {
    .category_tab{
        height:220px;
        min-width:150px;
        max-width:500px;
        margin-top:20px;
    }
    .category_tab .category_label{
        margin:170px 40px 10px 10px;
    }
}
/***************************************
 * Card 16:9 and 1:1 and mini and cast *
 ***************************************/
.card_cast,
.card_1_1,
.card_16_9{
    display:inline-block;
    width:447px;
    text-decoration:none;
}

.card-header{
    width:447px;
    height:251px;
    overflow:hidden;
    position:relative;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.70); 
}
.card-header .duration{
    position:absolute;
    right:22px;
    bottom:16px;
    border-radius:8px;
    transition:color 0.3s ease;
    will-change: color;
    padding:4px 8px;
}
.card-header .progress_box,
.card-header .progress{
    position:absolute;
    left:0;
    bottom:0;
    height:8px;
    width:100%;
}

.card_cast{
    width:180px;
}
.card_cast .card-header{
    height:268px;
    width:180px;
    border-radius:25px;
}
.card_1_1 .card-header{
    height:447px;
    border-radius:25px;
}
.card_16_9.extended{
    display:flex;
    flex-direction: row;
    width:100%;
    gap:20px;
    margin-bottom:30px;
    max-width: 800px;
}
.data-card{
    max-width:calc(100% - 467px);
    display:flex;
    flex-direction: column;
    margin-top:40px;
    margin-bottom:20px;
}
.data-card .description{
    margin-top:auto;
}
.data-card .little{
    color:var(--card-role);
    margin-bottom:5px;
}
.card_16_9 .card-header{
    border-radius:20px;
}
.card_cast .role{
    color:var(--card-role);
}
.card_cast .poster,
.card_1_1 .poster,
.card_16_9 .poster{
    width:447px;
    height:251px;
    object-fit: cover;
    transition:transform 0.4s ease;
    will-change: transform;
}
.card_cast .poster{
    height:268px;
    width:180px;
}
.card_1_1 .poster{
    height:447px;
}
.card-title{
    transition: color 0.4s ease;
    will-change: color;
}
.card_cast:focus .poster,
.card_cast:hover .poster,
.card_1_1:focus .poster,
.card_1_1:hover .poster,
.card_16_9:focus .poster,
.card_16_9:hover .poster{
    transform:scale(1.1);
}
.card-grid{
    display:flex;
    justify-content: space-between;
    margin:8px 0 5px 0;
}
.card_cast .card-grid{
    flex-direction: column;
    justify-content: start;
}
.card-time{
    display:flex;
    justify-content: space-between;
}
.card_1_1 .star,
.card_16_9 .star{
    transition: color 0.4s ease;
    will-change: color;
}
.card_1_1 .star:before,
.card_16_9 .star:before{
    content:"";
    -webkit-mask-image: url(img/icons/star.svg);
            mask-image: url(img/icons/star.svg);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;          
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
    display:inline-block;
    vertical-align: bottom;
    width:22px;
    height:22px;
    transition: background-color 0.4s ease;
    will-change: background-color;
}
.card_mini{
    position:relative;
    width:271px;
    height:159px;
    overflow:hidden;
    display:block;
    border-radius:20px;
}
.card_mini::after{
    position:absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity: 0.6;
    transition:opacity 0.3s ease;
    will-change: opacity;
}
.card_mini:hover::after{
    opacity: 0.3;
}
.card_mini .poster{
    width:271px;
    height:159px;
    object-fit: cover;
    transform-origin: center center;
    transition:transform 0.3s ease;
    will-change: transform;
}
.card_mini:hover .poster{
    transform: scale(1.1);
}
.card_mini h6{
    position:absolute;
    bottom:37px;
    left:31px;
    padding:4px 12px;
    border-radius:10px;
    z-index:1;
}
.atv_aside_col .card_16_9{
    margin-bottom:32px;
}
.atv_aside_col .card_16_9,
.atv_aside_col .card_16_9 .card-header,
.atv_aside_col .card_16_9 .poster{
   width:100%;
   height: auto;
}
.atv_aside_col .card_16_9 .poster{
    aspect-ratio: 16 / 9;
}
@media (max-width:1500px) {
    .card_16_9.extended{
        display:flex;
        flex-direction: column;
        width:447px;
        gap:0;
        margin-bottom:30px;
        margin-left:auto;
        margin-right:auto;
    }
    .data-card{
        max-width:unset;
        width:100%;
        margin-top:10px;
    }
    .data-card .description{
        margin-top:15px;
    }
}
@media (max-width:1024px) {
    .card_1_1{
        width:342px;
    }
    .card_16_9{
        width:280px;
    }
    .card_16_9 .card-header,
    .card_16_9 .poster{
        width:280px;
        height:157px;
    }
    .card_1_1 .card-header,
    .card_1_1 .poster{
        height:342px;
        width:342px;
    }
    .card-header .progress{
        height:4px;
    }
    .card_16_9.extended{
        display:flex;
        flex-direction: column;
        width:280px;
        gap:0;
        margin-bottom:30px;
    }
    .data-card{
        max-width:unset;
    }
}

/*************
 * Card Plan *
 *************/
.card_plan{
    border-radius:40px;
    border-width: 1px;
    border-style: solid;
    padding:20px 24px;
    display:flex;
    margin:20px 0 10px 0;
    align-items: flex-end;
}
.card_plan_content{
    width:calc(100vw / 5);
    height:100%;
    margin:auto;
    display:flex;
    flex-direction: column;
    row-gap: 50px;
}
.card_plan_prices{
    display:flex;
    align-items: center;
    column-gap: 10px;
}
.card_plan h4{
    margin:0;
}
.card_plan .poster{
    width:50%;
    height:235px;
    border-radius:34px;
    object-fit: cover;
}
@media (max-width:1024px) {
    .card_plan{
        flex-direction: column;
        row-gap: 20px;
    }
    .card_plan_content,
    .card_plan .poster{
        width:100%;
    }
}
/*************
 * Coming Up *
 *************/
.coming_up_next_layout{
    display:flex;
    flex-direction:column;
    width:66.666%;
    margin:0 auto 50px auto;
}
.coming_up_next_layout > div:nth-child(odd){
    margin-left: auto;
}
@media (max-width:1024px) {
    .coming_up_next_layout{
        width:90%;
        margin:100px auto 0px auto;
    }
    .coming_up_next_layout > div{
        margin-bottom:100px;
    }
    .coming_up_next_layout > div:nth-child(odd){
        margin-left: unset;
    }
    .coming_up_next_layout > div:nth-child(even){
        margin-left: auto;
    }
}
/*******************
 * Card under-hero *
 *******************/
.card-under-hero{
    display:inline-block;
    width:340px;
    height:205px;
    border-radius:20px;
    overflow:hidden;
}
.card-under-hero .poster{
    display:block;
    height:100%;
    width:100%;
    object-fit: cover;
}
.card-under-hero-title{
    padding-top:5px;
}
@media (max-width:1024px) {
    .card-under-hero{
        width:240px;
        height:144px;
    }
}
/*************
 * Top rated *
 *************/
.top_rated{
    margin-right:30px;
}
.top_rated .poster{
    width:260px;
    height:370px;
    border-radius:25px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.70); 
    object-fit: cover;
    vertical-align: bottom;
    position: relative;
    margin-left: -70px;
    transform: scale(1);
    will-change: transform;
    transition:transform 0.4s ease;
}
.top_rated:hover .poster{
    transform: scale(1.1);
}
@media (max-width:1024px) {
    .top_rated .poster{
        width:192px;
        height:274px;
        margin-left: -30px;
    }
}
/*****************
 * Plan Settings *
 *****************/
.plan_settings{
    list-style: none;
    margin:0;
    padding:0;
}
.plan_settings li{
    margin-bottom:40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.plan_settings li:last-child{
    margin-bottom:0;
}
.plan_settings li div:first-child{
    max-width:70%;
}
.plan_settings li h6{
    margin-bottom:15px;
}
/***********
 * Section *
 ***********/
section{
    padding: 50px 0;
}
section h2,
section h3,
section h4{
    margin-left:calc(100vw / 12);
    position:relative
}
section > h2,
section > h3,
section > h4{
    opacity:0;
    transform:translateY(50px);
    will-change: opacity, transform;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display:inline-block;
}
section > h2.actived,
section > h3.actived,
section > h4.actived{
    opacity:1;
    transform:translateY(0px);
}
section.backgrounded{
    position:relative;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
}

section.backgrounded:before{
    content:"";
    top:0;
    left:0;
    height:100%;
    width:100%;
    position:absolute;
    z-index:0;
}
section.hero_content,
section.hero_category,
section.hero{
    position:relative;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    padding-top:100px;
}
section.hero_content:before,
section.hero:before{
    content:"";
    top:0;
    left:0;
    height:100%;
    width:100%;
    position:absolute;
    z-index:-2;
}
section.hero_content:before{
    z-index:0;
}
section.hero_content:after,
section.hero:after{
    content:"";
    top:0;
    left:0;
    height:100%;
    width:100%;
    position:absolute;
    z-index:-1;
    background-size:100% 100%;
    background-position:bottom;
}
section.hero_content:after{
    z-index:1;
}
section.hero_text_only{
    padding: 200px 0 150px 0;
}
section.hero_content h2,
section.hero h2{
    margin:20px 0 30px 0;
}
section.hero_content p,
section.hero p{
    margin-bottom:100px;
}
section.hero_content .hero_contents{
    z-index:2;
}
section.hero_content .hero_contents,
section.hero .hero_contents{
    position:relative;
    max-width:640px;
    margin:100px 48px;
}

section.hero_content .hero_contents{
    margin:100px 48px 170px 48px;
}

section.hero_category{
    padding-top:200px;
}
section.hero_category:before{
    content:"";
    top:0;
    left:0;
    height:100%;
    width:100%;
    position:absolute;
    z-index:0;
}
section.hero_category .hero_contents{
    position: relative;
}
section.hero_category .hero_contents h1{
    margin-left: calc(100vw / 12);
}
section.under-hero{
    position:relative;
    margin: -137px 0 0 0;
    padding:0;
    z-index:3;margin-left:calc(100vw / 2.5) !important;
}
section.under-hero.with_episodes{
    margin: -187px 0 0 0;
}
.grid-box.half-space .items .item:first-child{
    /*margin-left:calc(100vw / 2.5) !important;*/
}
section.hero_content_watching{
    padding:150px 0;
    position:relative;
}
.hero_content_watching_background{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    opacity:0.11;
}
.hero_content_watching_background:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.hero_search_content{
    max-width:930px;
    margin-left:calc(100vw / 12);
    padding-top:10%;
}
.hero_search_content h1{
    margin-bottom:50px;
}
.hero_button_box{
    display:flex;
    gap:16px;
}
@media (max-width:1024px) {
    .hero_search_content{
        padding-top:40%;
        width:calc(100% - 32px);
        margin:0 auto;
    }
    section.hero_search{
        border-radius: 0 0 40px 40px;
    }
    section h2,
    section h3,
    section h4{
        max-width: none;
        margin-left:84px;
    }
    section.under-hero{
        margin: -100px 0 0 0;
    }
    section.under-hero .items .item:first-child{
        margin-left:84px;
    }
    section.hero_content p,
    section.hero p{
        display:none;
    }
    section.hero_content .hero_contents,
    section.hero .hero_contents{
        position:relative;
        max-width:initial;
        width:calc(100% - 32px);
        margin:250px 16px 100px 16px;
    }
    section{
        margin-bottom:50px;
    }
}
/**************
 * Slide Hero *
 **************/
.slide_hero_contents{
    height:770px;
    position:relative;
}
.slide_hero_contents section.hero{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:0;
    opacity:0;
    pointer-events: none;
    will-change: opacity, background;
    transition: opacity 0.3s ease, background 0.5s ease;
}
.slide_hero_contents section.hero.active{
    opacity:1;
    pointer-events: initial;
}
.slide_hero_contents section.hero h6,
.slide_hero_contents section.hero h2,
.slide_hero_contents section.hero p,
.slide_hero_contents section.hero .hero_button_box{
    filter: blur(20px);
    transform: translateY(50px);
    opacity:0;
    will-change: transform blur opacity;
    transition: filter 0.5s ease, transform 0.5s ease;
}
.slide_hero_contents section.hero h6{
    transition-delay: 0s, 0s;
}
.slide_hero_contents section.hero h2{
    transition-delay: 0.1s, 0.1s, 0.1s;
}
.slide_hero_contents section.hero p{
    transition-delay: 0.2s, 0.2s, 0.2s;
}
.slide_hero_contents section.hero .hero_button_box{
    transition-delay: 0.3s, 0.3s, 0.3s;
}
.slide_hero_contents section.hero.active h6,
.slide_hero_contents section.hero.active h2,
.slide_hero_contents section.hero.active p,
.slide_hero_contents section.hero.active .hero_button_box{
    filter: blur(0);
    transform: translateY(0);
    opacity:1;
}
@media (min-width:1024px) {
    .slide_hero_contents section.hero{
        background-size:120%;
    }
    .slide_hero_contents section.hero.active{
        background-size:100%;
    }
}
@media (max-width:1024px) {
    .slide_hero_contents{
        height:700px;
        position:relative;
    }
}
/**************
 * Search Bar *
 **************/
.search_bar{
    display:flex;
    border-radius:60px;
    padding:12px;
}
.search_bar input[type="text"]{
    border:0;
    border-radius: 0;
    padding:8px 24px;
}
.search_button {
    padding:12px;
    display:block;
    border:0;
}
.search_button .icon{
    width:24px;
    height:24px;
    display:block;
}
.search_reset.with_icon.icon_only{
    padding:12px;
    display:block;
    border:0;
}
.result-box{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 50px;
    margin-left:calc(100vw / 12);
    margin-right:calc(100vw / 12);
    margin-bottom:50px;
}
.search_episodes{
    background-color: var(--search-episodes-bg) !important;
    color:var(--body-background) !important;
    margin-bottom:28px;
    background-image:url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.5 3C11.2239 3 12.8772 3.68482 14.0962 4.90381C15.3152 6.12279 16 7.77609 16 9.5C16 11.11 15.41 12.59 14.44 13.73L14.71 14H15.5L20.5 19L19 20.5L14 15.5V14.71L13.73 14.44C12.5505 15.4468 11.0507 15.9999 9.5 16C7.77609 16 6.12279 15.3152 4.90381 14.0962C3.68482 12.8772 3 11.2239 3 9.5C3 7.77609 3.68482 6.12279 4.90381 4.90381C6.12279 3.68482 7.77609 3 9.5 3ZM9.5 5C7 5 5 7 5 9.5C5 12 7 14 9.5 14C12 14 14 12 14 9.5C14 7 12 5 9.5 5Z" fill="%2369625D"/></svg>');
    background-size:32px 32px;
    background-repeat: no-repeat;
    background-position: center left 16px;
    padding-left:56px !important;
}
.search_episodes::placeholder {
    color:var(--input-border) !important;
}
@media (max-width:1024px) {
    .search_reset.with_icon.icon_only{
        padding:4px;
    }
    .search_button {
        padding:4px;
    }
    .search_bar input[type="text"]{
        padding:0px 12px;
    }
    .result-box{
        gap: 50px;
        margin-left:16px;
        margin-right:16px;
        justify-content: center;
    }
}
/************
 * Messages *
 ************/
.message{
    display:inline-block;
    padding:15px 20px;
    border-radius: 2px 16px 16px 16px; 
}
/**********
 * Player *
 **********/
.player{
    position:relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin:auto;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
}
.player_controller{
    position:absolute;
    bottom:25px;
    width:80%;
    left:10%;
    border-radius: 70px;
    padding:18px 24px;
    display:flex;
    align-items: center;
    gap: 20px;
}

.player_bar{
    position:relative;
    min-width:200px;
    width:100%;
    height:1px;
}
.player_progress{
    position:absolute;
    height:3px;
    width:0;
    top:-1px;
    left:0;
}
.info_video{
    margin:50px 0;
}
.info_video p{
    margin-bottom:20px;
}
@media (max-width:1024px) {
    .episodes_title{
        margin-bottom:0;
    }
    .player{
        width:100vw;
    }
    .atv_container .player{
        margin-left:-8.33vw;
    }
    .player_controller{
        position:absolute;
        bottom:0px;
        width:100%;
        left:0%;
        border-radius: 0px;
        padding:12px 24px;
        display:flex;
        gap: 15px;
        flex-wrap: wrap;
    }
    .player_bar{
        order:0;
        position:absolute;
        top:0;
        left: 0;
        width:100%;
    }
    .player_controller> button:nth-child(1){
        order:0;
        margin-right:auto
    }
    .player_controller> button:nth-child(2){
        order:2;
    }
    .player_controller> button:nth-child(4){
        order:3;
    }
    .volume-box{
        display: none;
    }
}

/************
 * Comments *
 ************/
.atv_comment_new{
    display: flex;
    margin-top:35px;
}
.atv_avatar_box{
    width:64px;
    margin-right:24px;
}
.atv_avatar{
    width:64px;
    height:64px;
    object-fit: cover;
    border-radius:32px;
}
.atv_comment_new_box{
    width:100%;
}
.atv_comment_input{
    border-bottom:1px solid var(--comment-input-border);
    min-height:37px;
    margin-bottom:17px;
}
.atv_button_box{
    display:flex;
    align-items: center;
    gap:17px;
}
.atv_button_box.to_right{
    justify-content: flex-end;
}

.atv_comment_input:focus{
    outline: 0;
}
.comment{
    margin:17px 0;
}
/******************
 * Content rating *
 ******************/
.content_rating_box{
    padding:18px 20px;
    background-color: var(--content-rating-box);
    border-radius:24px;
    margin-bottom:64px;
    align-items: center;
    display:flex;
    justify-content: space-between;
}
.content-rating-col{
    align-items: center;
    display:flex;
}
.text-star{
    color: var(--content-rating-star);
    margin-right:5px;
}
.content_rating_box .icon{
    width:28px;
    height:28px;
    margin-right: 5px;
}
.content_rating_box .icon:before{
    background-color:var(--content-rating-star);
}
/*********
 * Icons *
 *********/
.icon{
    display:inline-block;
    vertical-align: bottom;
    width:64px;
    height:64px;
}
.icon:before{
    content:"";
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;          
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
    display:block;
    width:100%;
    height:100%;
    transition: background-color 0.4s ease;
    will-change: background-color;
}

.icon.small{
    width:32px;
    height:32px;
}
.icon.micro{
    width:24px;
    height:24px;
}


.icon.icon-subtitles:before{
    -webkit-mask-image: url(img/icons/subtitles.svg);
            mask-image: url(img/icons/subtitles.svg);
}
.icon.icon-account-details:before{
    -webkit-mask-image: url(img/icons/account-details.svg);
            mask-image: url(img/icons/account-details.svg);
}
.icon.icon-account-group:before{
    -webkit-mask-image: url(img/icons/account-group.svg);
            mask-image: url(img/icons/account-group.svg);
}
.icon.icon-calendar-star-four-points:before{
    -webkit-mask-image: url(img/icons/calendar-star-four-points.svg);
            mask-image: url(img/icons/calendar-star-four-points.svg);
}
.icon.icon-check-bold:before{
    -webkit-mask-image: url(img/icons/check-bold.svg);
            mask-image: url(img/icons/check-bold.svg);
}
.icon.icon-chevron-down:before{
    -webkit-mask-image: url(img/icons/chevron-down.svg);
            mask-image: url(img/icons/chevron-down.svg);
}
.icon.icon-chevron-left:before{
    -webkit-mask-image: url(img/icons/chevron-left.svg);
            mask-image: url(img/icons/chevron-left.svg);
}
.icon.icon-chevron-right:before{
    -webkit-mask-image: url(img/icons/chevron-right.svg);
            mask-image: url(img/icons/chevron-right.svg);
}
.icon.icon-chevron-up:before{
    -webkit-mask-image: url(img/icons/chevron-up.svg);
            mask-image: url(img/icons/chevron-up.svg);
}
.icon.icon-clock:before{
    -webkit-mask-image: url(img/icons/clock.svg);
            mask-image: url(img/icons/clock.svg);
}
.icon.icon-close:before{
    -webkit-mask-image: url(img/icons/close.svg);
            mask-image: url(img/icons/close.svg);
}
.icon.icon-cookie:before{
    -webkit-mask-image: url(img/icons/cookie.svg);
            mask-image: url(img/icons/cookie.svg);
}
.icon.icon-credit-card-outline:before{
    -webkit-mask-image: url(img/icons/credit-card-outline.svg);
            mask-image: url(img/icons/credit-card-outline.svg);
}
.icon.icon-credit-card:before{
    -webkit-mask-image: url(img/icons/credit-card.svg);
            mask-image: url(img/icons/credit-card.svg);
}
.icon.icon-dark-theme:before{
    -webkit-mask-image: url(img/icons/dark-theme.svg);
            mask-image: url(img/icons/dark-theme.svg);
}
.icon.icon-eye-remove:before{
    -webkit-mask-image: url(img/icons/eye-remove.svg);
            mask-image: url(img/icons/eye-remove.svg);
}
.icon.icon-eye:before{
    -webkit-mask-image: url(img/icons/eye.svg);
            mask-image: url(img/icons/eye.svg);
}
.icon.icon-face-man:before{
    -webkit-mask-image: url(img/icons/face-man.svg);
            mask-image: url(img/icons/face-man.svg);
}
.icon.icon-face-woman:before{
    -webkit-mask-image: url(img/icons/face-woman.svg);
            mask-image: url(img/icons/face-woman.svg);
}
.icon.icon-facebook:before{
    -webkit-mask-image: url(img/icons/facebook.svg);
            mask-image: url(img/icons/facebook.svg);
}
.icon.icon-file-document-outline:before{
    -webkit-mask-image: url(img/icons/file-document-outline.svg);
            mask-image: url(img/icons/file-document-outline.svg);
}
.icon.icon-file-document:before{
    -webkit-mask-image: url(img/icons/file-document.svg);
            mask-image: url(img/icons/file-document.svg);
}
.icon.icon-fire:before{
    -webkit-mask-image: url(img/icons/fire.svg);
            mask-image: url(img/icons/fire.svg);
}
.icon.icon-folder-star:before{
    -webkit-mask-image: url(img/icons/folder-star.svg);
            mask-image: url(img/icons/folder-star.svg);
}
.icon.icon-fullscreen-exit:before{
    -webkit-mask-image: url(img/icons/fullscreen-exit.svg);
            mask-image: url(img/icons/fullscreen-exit.svg);
}
.icon.icon-fullscreen:before{
    -webkit-mask-image: url(img/icons/fullscreen.svg);
            mask-image: url(img/icons/fullscreen.svg);
}
.icon.icon-google:before{
    -webkit-mask-image: url(img/icons/google.svg);
            mask-image: url(img/icons/google.svg);
}
.icon.icon-information-slab-circle:before{
    -webkit-mask-image: url(img/icons/information-slab-circle.svg);
            mask-image: url(img/icons/information-slab-circle.svg);
}
.icon.icon-instagram:before{
    -webkit-mask-image: url(img/icons/instagram.svg);
            mask-image: url(img/icons/instagram.svg);
}
.icon.icon-list:before{
    -webkit-mask-image: url(img/icons/list.svg);
            mask-image: url(img/icons/list.svg);
}
.icon.icon-login-alternative:before{
    -webkit-mask-image: url(img/icons/login-alternative.svg);
            mask-image: url(img/icons/login-alternative.svg);
}
.icon.icon-login:before{
    -webkit-mask-image: url(img/icons/login.svg);
            mask-image: url(img/icons/login.svg);
}
.icon.icon-logout-alternative:before{
    -webkit-mask-image: url(img/icons/logout-alternative.svg);
            mask-image: url(img/icons/logout-alternative.svg);
}
.icon.icon-logout:before{
    -webkit-mask-image: url(img/icons/logout.svg);
            mask-image: url(img/icons/logout.svg);
}
.icon.icon-menu:before{
    -webkit-mask-image: url(img/icons/menu.svg);
            mask-image: url(img/icons/menu.svg);
}
.icon.icon-microphone:before{
    -webkit-mask-image: url(img/icons/microphone.svg);
            mask-image: url(img/icons/microphone.svg);
}
.icon.icon-moon:before{
    -webkit-mask-image: url(img/icons/moon.svg);
            mask-image: url(img/icons/moon.svg);
}
.icon.icon-movie-open:before{
    -webkit-mask-image: url(img/icons/movie-open.svg);
            mask-image: url(img/icons/movie-open.svg);
}
.icon.icon-music:before{
    -webkit-mask-image: url(img/icons/music.svg);
            mask-image: url(img/icons/music.svg);
}
.icon.icon-play-circle:before{
    -webkit-mask-image: url(img/icons/play-circle.svg);
            mask-image: url(img/icons/play-circle.svg);
}
.icon.icon-play:before{
    -webkit-mask-image: url(img/icons/play.svg);
            mask-image: url(img/icons/play.svg);
}
.icon.icon-playlist-check:before{
    -webkit-mask-image: url(img/icons/playlist-check.svg);
            mask-image: url(img/icons/playlist-check.svg);
}
.icon.icon-playlist-plus:before{
    -webkit-mask-image: url(img/icons/playlist-plus.svg);
            mask-image: url(img/icons/playlist-plus.svg);
}
.icon.icon-playlist-star:before{
    -webkit-mask-image: url(img/icons/playlist-star.svg);
            mask-image: url(img/icons/playlist-star.svg);
}
.icon.icon-plus:before{
    -webkit-mask-image: url(img/icons/plus.svg);
            mask-image: url(img/icons/plus.svg);
}
.icon.icon-podcast:before{
    -webkit-mask-image: url(img/icons/podcast.svg);
            mask-image: url(img/icons/podcast.svg);
}
.icon.icon-refresh:before{
    -webkit-mask-image: url(img/icons/refresh.svg);
            mask-image: url(img/icons/refresh.svg);
}
.icon.icon-search:before{
    -webkit-mask-image: url(img/icons/search.svg);
            mask-image: url(img/icons/search.svg);
}
.icon.icon-settings:before{
    -webkit-mask-image: url(img/icons/settings.svg);
            mask-image: url(img/icons/settings.svg);
}
.icon.icon-share:before{
    -webkit-mask-image: url(img/icons/share.svg);
            mask-image: url(img/icons/share.svg);
}
.icon.icon-skip-backward:before{
    -webkit-mask-image: url(img/icons/skip-backward.svg);
            mask-image: url(img/icons/skip-backward.svg);
}
.icon.icon-skip-forward:before{
    -webkit-mask-image: url(img/icons/skip-forward.svg);
            mask-image: url(img/icons/skip-forward.svg);
}
.icon.icon-star-off:before{
    -webkit-mask-image: url(img/icons/star-off.svg);
            mask-image: url(img/icons/star-off.svg);
}
.icon.icon-star:before{
    -webkit-mask-image: url(img/icons/star-fill.svg);
            mask-image: url(img/icons/star-fill.svg);
}
.icon.icon-sun:before{
    -webkit-mask-image: url(img/icons/sun.svg);
            mask-image: url(img/icons/sun.svg);
}
.icon.icon-teddy-bear:before{
    -webkit-mask-image: url(img/icons/teddy-bear.svg);
            mask-image: url(img/icons/teddy-bear.svg);
}
.icon.icon-trailer:before{
    -webkit-mask-image: url(img/icons/trailer.svg);
            mask-image: url(img/icons/trailer.svg);
}
.icon.icon-twitter:before{
    -webkit-mask-image: url(img/icons/twitter.svg);
            mask-image: url(img/icons/twitter.svg);
}
.icon.icon-user-plus:before{
    -webkit-mask-image: url(img/icons/user-plus.svg);
            mask-image: url(img/icons/user-plus.svg);
}
.icon.icon-user:before{
    -webkit-mask-image: url(img/icons/user.svg);
            mask-image: url(img/icons/user.svg);
}
.icon.icon-variety:before{
    -webkit-mask-image: url(img/icons/variety.svg);
            mask-image: url(img/icons/variety.svg);
}
.icon.icon-view-gallery:before{
    -webkit-mask-image: url(img/icons/view-gallery.svg);
            mask-image: url(img/icons/view-gallery.svg);
}
.icon.icon-volume-hight:before{
    -webkit-mask-image: url(img/icons/volume-hight.svg);
            mask-image: url(img/icons/volume-hight.svg);
}
.icon.icon-volume-low:before{
    -webkit-mask-image: url(img/icons/volume-low.svg);
            mask-image: url(img/icons/volume-low.svg);
}
.icon.icon-youtube:before{
    -webkit-mask-image: url(img/icons/youtube.svg);
            mask-image: url(img/icons/youtube.svg);
}