@font-face {
    font-family: "Montserrat-Regular";
    src: url(/themes/default/assets/fonts/Montserrat-Regular.eot?3546b655875724a583a10ee303df7b32);
    src: url(/themes/default/assets/fonts/Montserrat-Regular.eot?3546b655875724a583a10ee303df7b32?#iefix) format("embedded-opentype"),
    url(/themes/default/assets/fonts/Montserrat-Regular.woff?7574949513681a1ad7d1187ed476d5ea) format("woff"), url(/themes/default/assets/fonts/Montserrat-Regular.woff2?636be5d921ff8c415347c4f8bee953e9) format("woff2"),
    url(/themes/default/assets/fonts/Montserrat-Regular.ttf?94bb495fba6077f669ed7bd191acc9af) format("truetype"),
    url(/themes/default/assets/fonts/Montserrat-Regular.svg?f38c856e33f966a9676f24b58e98d84b#Montserrat-Regular) format("svg"),
    url(/themes/default/assets/fonts/Montserrat-Regular.otf?e9a35b0ac0b31b5d1f890654e148c831) format("otf");
}

@font-face {
    font-family: "Montserrat-Medium";
    src: url(/themes/default/assets/fonts/Montserrat-Medium.eot?2f29b346ac5d8e5e54aea92098dd12de);
    src: url(/themes/default/assets/fonts/Montserrat-Medium.eot?2f29b346ac5d8e5e54aea92098dd12de?#iefix) format("embedded-opentype"),
    url(/themes/default/assets/fonts/Montserrat-Medium.woff2?61dda15d9447782680419dcbd4c99edb) format("woff2"), url(/themes/default/assets/fonts/Montserrat-Medium.woff?7c26de5ffe819588160640a46f9006f7) format("woff"),
    url(/themes/default/assets/fonts/Montserrat-Medium.ttf?a281f04d4c8926e7dea14ce0972bed39) format("truetype"),
    url(/themes/default/assets/fonts/Montserrat-Medium.svg?9d13619cada9add3970d6852a67b9c90#Montserrat-Medium) format("svg"),
    url(/themes/default/assets/fonts/Montserrat-Medium.otf?c6fb77cf6d26ca064ef7826c0a5c13fe) format("otf");
}

@font-face {
    font-family: "Montserrat-SemiBold";
    src: url(/themes/default/assets/fonts/Montserrat-SemiBold.eot?9d0ed2f718e2246b7ed6aa9c025a36a4);
    src: url(/themes/default/assets/fonts/Montserrat-SemiBold.eot?9d0ed2f718e2246b7ed6aa9c025a36a4?#iefix) format("embedded-opentype"),
    url(/themes/default/assets/fonts/Montserrat-SemiBold.otf?4f33680f8833fba05bd70ec16a148d99) format("otf"),
    url(/themes/default/assets/fonts/Montserrat-SemiBold.svg?ada5598dd88b923263bed5b0ba6f143a#Montserrat-SemiBold) format("svg"),
    url(/themes/default/assets/fonts/Montserrat-SemiBold.ttf?62b8eee010e3957d425fe0eb87cbca7d) format("truetype"), url(/themes/default/assets/fonts/Montserrat-SemiBold.woff?6839fecc49e176fbb774110a59c19e64) format("woff"),
    url(/themes/default/assets/fonts/Montserrat-SemiBold.woff2?bfa52212203eef1786bea91c161fe448) format("woff2");
}

@font-face {
    font-family: "Montserrat-Bold";
    src: url(/themes/default/assets/fonts/Montserrat-Bold.eot?19a2b729d3180140b40e0368464ecd34);
    src: url(/themes/default/assets/fonts/Montserrat-Bold.eot?19a2b729d3180140b40e0368464ecd34?#iefix) format("embedded-opentype"),
    url(/themes/default/assets/fonts/Montserrat-Bold.otf?8ad1d92ae8be236a20deec2b9ee70ac9) format("otf"), url(/themes/default/assets/fonts/Montserrat-Bold.svg?599cfb5c447aff614de58c8a2cd200ed#Montserrat-Bold) format("svg"),
    url(/themes/default/assets/fonts/Montserrat-Bold.ttf?d0ca82d8ca07ba209aee6ad7de317fa0) format("truetype"), url(/themes/default/assets/fonts/Montserrat-Bold.woff?4a4be41959c5baac097b2151b6852445) format("woff"),
    url(/themes/default/assets/fonts/Montserrat-Bold.woff2?988f04726061e3448278f0ee1eb46eef) format("woff2");
}

:root{
    --maincolor:#66CCFF;
    --lightcolor:#e3e3e3;
    --darkcolor:#1a1a1a;
    --plyr-color-main:#66CCFF;
    --second-color:#2b2a2d;
}
::-moz-selection{background:var(--lightcolor);color:var(--darkcolor);}
::selection{background:var(--lightcolor);color:var(--darkcolor);}
::-webkit-scrollbar{width:15px;}
::-webkit-scrollbar-thumb{background-color:var(--maincolor);}
::-webkit-scrollbar-track-piece{background:var(--darkcolor);}
*{margin:0;}
body{font-family: "Montserrat-Regular", "sans-serif";width:100%;height:auto;background-color:var(--darkcolor);}

header{
    background: var(--darkcolor);
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #2b2a2d;
    padding: 22px 0;
}
h1{
    color:var(--lightcolor);
    font-size:26px;
    padding: 42px 0;
}
h2{
    color:var(--lightcolor);
    font-size:24px;
    padding: 42px 0;
}
h3{color:var(--lightcolor);font-size:20px;}
.mrb42{margin-bottom: 42px;}
.mrb120{margin-bottom: 120px;}
.sidebar{
    display: flex;
    align-items: center;
    flex: 0 0 100%;
    justify-content: center;
}
.sidebar > a > img{
    height:75px;
    width:auto;
}
.logo{
    margin-right:30px;
}
.menu-items{
    display:flex;
    gap:15px;
}
.menu-items > a{
    color:var(--lightcolor);
    text-decoration:none;
    font-size: 19px;
}
.menu-items > a:hover{
    text-decoration:underline;
}
.content{max-width:1240px;margin-left:auto;margin-right:auto;}
.breadcrumbs {
    background: var(--second-color);
    color: var(--lightcolor);
    padding: 13px;
    margin: 13px 0 0 0;
}
.breadcrumbs > span > a{
    text-decoration:none;
    color:var(--lightcolor);
}
.breadcrumbs > span > a:hover {
    text-decoration:underline;
}
.seasons{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}
.season{position:relative;width:calc(25% - 20px);}
.season img{
    width:100%;
    height:100%;
}

.episodes{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}
.episode {
    width:calc(33.3% - 20px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.episode .video-preview, .season .video-preview {
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height:100%;
    z-index: 15;
}
.episode > a {
    text-decoration:none;
    position:relative;
}
.episode a video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    width: 100%;
}
.episode a h5, .season a h5 {
    color: var(--lightcolor);
    font-size: 20px;
    position: absolute;
    bottom: 4px;
    background: rgba(0, 0, 0, 0.42);
    z-index: 7;
    width: 100%;
    text-align: center;
    padding: 13px 0;
}
.season a h5 {bottom:0;}
.episode a img {
    width:100%;
    height:auto;
    transition:all .2s ease-in-out;
    position: relative;
    z-index: 7;
}
.episode a:hover > video {
    z-index: 10;
}
.episode-content h1 {padding: 42px 0 21px 0;}
.seasons.films {
    gap: 0;
    justify-content: space-between;
}
.seasons.films .season{
    display: flex;
    flex: 0 0 32.5%;
}
.seasons.films .season a{}
.seasons.films .season a img{
    height: 220px;
}
.seasons.films .season a .play::before{
    font-size: 88px;
}
.play{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index: 7;
}
.play::before{
    content:'▶';
    font-size:142px;
    color:var(--maincolor);
}
.season-description{background:#2b2a2d; padding: 33px;}
.season-description > p{color:var(--lightcolor);margin-bottom:15px;}
.season-description > h2 {
    padding: 0;
    margin-bottom: 24px;
}
.season-description > p {
    color:var(--lightcolor);
    margin-bottom:15px;
    line-height: 1.6;
    letter-spacing: 0.5px;
}
.season-description > p > a {
    color:var(--maincolor);
    text-decoration:none;
}
.season-description > p > a:hover {
    text-decoration:underline;
}
.footer{
    border-top: 1px solid #2b2a2d;
    padding: 22px 0;
}
.footer-content {
    max-width:1240px;
    margin-left:auto;
    margin-right:auto;
}
.footer-content > p {
    padding: 15px 0;
    color:var(--lightcolor);
}
.footer-seasons{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 15px 0;
}
.footer-seasons > a {
    padding: 13px 0;
    color: var(--lightcolor);
    text-decoration: none;
    display: flex;
}
.footer-seasons > a:hover {
    text-decoration:underline;
}
#copy{text-align:center;}

.episode-main{display:flex;}

.player-wrapper {
    width:50%;
}
.player-wrapper > #player{
    width:100%;
    border:none;
}
.player-wrapper > #player video {

}
.description {
    display:flex;
    flex-direction:column;
    width:50%;
    padding: 0 13px;
}
.description > h2{
    font-size:26px;
    padding: 0;
}
.description > p{
    color:var(--lightcolor);
    margin:10px 0;
}
.description > img{
    width:100%;
    height:auto;
}
.player-wrapper .navigation{margin: 13px 0;}
.player-wrapper .navigation h3{margin-bottom: 13px;}
.navigation-button{display:flex;justify-content:space-between;gap:10px;margin:10px 0 15px 0;flex-wrap:wrap;font-size:14px;}
.navigation-button a.back,
.navigation-button a.next {background:#66ccff1f;padding:10px;background: var(--second-color); color:var(--lightcolor);text-decoration:none;}
.navigation-button > a:hover {background: var(--plyr-color-main); }
.update-main h1{
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    padding: 42px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.update-main .update-image img{
    width: 100%;
    max-width: 100%;
}
.autoplay-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 14px;
    color: var(--lightcolor);
}
.autoplay {
    text-align: right;
    padding: 13px 0 0 0;
}
.autoplay-switch input {
    display: none;
}
.autoplay-switch .slider {
    width: 46px;
    height: 26px;
    background: #ccc;
    border-radius: 20px;
    position: relative;
    transition: background .2s;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.autoplay-switch .slider::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 1px 1px 4px rgba(218,28,16, 0.4);
}
.autoplay-switch input:checked + .slider {
    background: var(--plyr-color-main);
}
.autoplay-switch input:checked + .slider::after {
    transform: translateX(20px);
}
.menu-toggle {
    display: none;
    font-size: 42px;
    cursor: pointer;
    background: var(--second-color);
    color: var(--lightcolor);
    height: 62px;
    width: 62px;
    padding: 3px;
    line-height: 1.4;
    border: none;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}
.menu-close {
    display: none;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
}

@media screen and (max-width: 991px) {
    .content, .footer-content{max-width: 100%;}
    .footer-content{padding: 0 10px;}
    .episode{width:calc(50% - 20px);}
    .season{width:calc(33.3% - 20px);}
    .menu-items{flex-wrap:wrap;justify-content:flex-end;}
    .episode-main{flex-direction:column;}
    .player-wrapper{width:100%;margin:0;}
    h1, h2 {padding: 42px 10px;}
    .episodes, .seasons{gap: 20px !important;justify-content: center !important;padding: 0 13px;}
    .seasons.films .season a img {height: 100%;}
    .seasons.films .season {flex: 0 0 100%;justify-content: center;}
    .episode-main .description{flex-direction:column-reverse;width:100%;margin-top:0;}
    .episode-main .description > h2{margin:0 10px 20px 0;}
    .sidebar {justify-content: space-around;}
    .menu-toggle { display: block; }
    .menu-items {position: fixed;top: 0;right: -100%;width: 80%;max-width: 320px;height: 100vh;background: var(--darkcolor);flex-direction: column;align-items: flex-start;padding: 42px 13px;gap: 13px;box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);transition: right 0.28s ease;z-index: 1100;overflow-y: auto;justify-content: start;}
    .overlay {position: fixed;inset: 0;background: rgba(0,0,0,0.45);opacity: 0;pointer-events: none;transition: opacity 0.28s ease;z-index: 1050;}
    .sidebar.open .menu-items { right: 0; }
    .sidebar.open .overlay { opacity: 1; pointer-events: auto; }
    .menu-items a { display: block; width: 100%; padding: 13px 0; border-bottom: 1px solid var(--second-color); }
    .menu-close {position: absolute;top: 12px;right: 12px;width: 40px;height: 40px;border-radius: 6px;background: transparent;display: inline-flex;align-items: center;justify-content: center;font-size: 26px;color: var(--lightcolor);}
    .menu-close:focus { outline: 2px solid var(--second-color); }
    .episode-content{padding: 0 13px;}
    .episode-content .description{padding: 0;}
}
@media screen and (max-width: 768px) {
    .episode h5{font-size:14px;margin:8px 5px;}
    .episode,.season{width:100%;}
    .footer-seasons > a{flex:0 0 50%;}
}
@media screen and (max-width: 576px) {
    .episode{width:100%;}
    .episode h5{font-size:17px;margin:13px 10px;}
    .play{top:47%;}
    .footer-seasons>a{flex:0 0 100%;justify-content: center;}
}
@media (max-width:414px){
    .navigation-button a.back, .navigation-button a.next {width:100%;text-align: center;}
}