@charset "UTF-8";
.container, .creative_link.active:before, .creative_link:hover:before, .description_info a:hover:before, .highlight > div:first-child:hover:after, .increative_link:hover:before, body, html {
    width: 100%
}

.desktop-only div, .game-description__title, .games__info {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.trigger:after, body:before, input[type=text]:after {
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    left: 0;
    z-index: -1
}

.highlight, body {
    position: relative
}

.button span, .header, .maintitle, .trigger {
    z-index: 5
}

.button, iframe {
    max-width: 100%
}

.button, .content__title {
    text-transform: uppercase
}

.button, .maintitle, .title-how-to {
    font-weight: 400;
    letter-spacing: .5px
}

.button, .desktop-only div, .footer, .games, .logo {
    text-align: center
}

.button, .col-190, .drawer, .pointer, .search__helper {
    cursor: pointer
}

.button:before, .fn__closer:after, .trigger:after, input[type=text]:after {
    color: var(--mc1);
    opacity: .15;
    box-shadow: 0 5px 20px
}

.nav_holder a, body, p {
    letter-spacing: 0
}

.button, .nav_holder a, h1, h2, h3, h4, h5, h6 {
    font-family: var(--hff)
}

.fn_flex ul, .fn_pagination li, .footer li:first-child, .nav_holder ul {
    list-style-type: none
}

.subtitle.italic, time {
    font-style: italic
}

.button, .fn__closer, .fn_breadcrumbs a, .nav_holder a, a, a:hover {
    text-decoration: none
}

@font-face {
    font-family: Quicksand;
    src: url("../fonts/Quicksand-Medium.ttf");
    font-display: swap;
    font-weight: 500
}

@font-face {
    font-family: Quicksand;
    src: url("../fonts/Quicksand-SemiBold.ttf");
    font-display: swap;
    font-weight: 600
}

@font-face {
    font-family: Quicksand;
    src: url("../fonts/Quicksand-Bold.ttf");
    font-display: swap;
    font-weight: 700
}

:root {
    --mc0: #dfe315;
    --mc1: #fbff0a;
    --mc2: #00c6c2;
    --hc: #e5e6ee;
    --bc: #aaaebd;
    --color-dark: #000;
    --color-white: #fff;
    --color-highlight: #f7b439;
    --color-highlight-hover: #bd7b01;
    --secondary-color: #ff562a;
    --bg-common: #05595a;
    --grd-gradient-bg: linear-gradient(110deg, #1c222f, #3b4455 100%);
    --common-box-shadow: 0px 0px 10px #ffffff21;
    --common-gradient-color: linear-gradient(90deg, #ff562a, #e53001);
    --pff: Quicksand, sans-serif;
    --hff: Quicksand, sans-serif;
    --buc: cubic-bezier(.25, .1, .25, 1)
}

*, :after, :before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

a, abbr, acronym, address, applet, b, big, blockquote, body, button, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    background: 0 0;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    outline: 0
}

.sprite, img, svg {
    vertical-align: middle
}

.button svg, .svg-icon, .svg-icon__link {
    vertical-align: top
}

.fn__closer.active, .show, article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block
}

ol li, ul li {
    margin-bottom: 5px
}

a, i {
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    border: none
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    margin-bottom: .5rem;
    color: var(--hc);
    line-height: 1.22;
    letter-spacing: 0
}

.subtitle.italic, p {
    margin-bottom: 20px
}

h1 {
    font-size: 25px
}

.title-how-to, h1.maintitle, h2 {
    font-size: 20px
}

h3 {
    font-size: 16px
}

.button, body, h4 {
    font-size: 14px
}

h5, h6 {
    font-size: 12px
}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
    text-decoration: none;
    color: var(--hc)
}

.fn_breadcrumbs a:hover, .footer p a:hover, h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover {
    color: var(--mc1)
}

body, html {
    overflow-x: hidden;
    margin: 0;
    padding: 0
}

body {
    font-family: var(--pff);
    line-height: 1.3;
    font-weight: 500;
    color: var(--bc);
    word-break: break-word;
    background: #072a2c;
    height: auto;
    overflow: visible
}

body::-webkit-scrollbar {
    width: 3px;
    background-color: #000
}

body::-webkit-scrollbar-thumb {
    background-color: var(--mc1);
    border-radius: 4px
}

.footer {
    padding: 12px 24px
}

.footer ul {
    display: flex;
    justify-content: center
}

.footer li {
    margin: 0 0 0 30px;
    list-style: none
}

.header .trigger_logo, .highlight > div:first-child, .info-game > div, .info-game > div:first-child > div, .toastt .content_notification {
    display: flex;
    align-items: center
}

.highlight {
    text-transform: none;
    padding: 0 2px;
    text-wrap: nowrap
}

.highlight > div:first-child {
    align-items: flex-start;
    position: relative;
    text-wrap: nowrap;
    font-size: 16px;
    color: var(--hc);
    letter-spacing: .5px;
    font-family: var(--hff);
    line-height: 1.22
}

.highlight > div:first-child:after {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--mc1);
    transition: .3s
}

.header .trigger:not(:last-child), .header button, .logo, .search {
    margin-right: 20px
}

.header, .header:after {
    top: 0;
    transition: .3s;
    left: 0
}

.header {
    padding: 15px 20px;
    position: absolute;
    right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.container, .small_container {
    padding: 0 20px;
    margin: 0 auto
}

.button, .button span, .line_top, .main, .maintitle, .menu_action, .search, .trigger {
    position: relative
}

.header:after {
    transform: translateY(0);
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: #1b121d;
    background: -moz-linear-gradient(90deg, #252a34 0, #191c21 75%, #252a34 100%);
    background: -webkit-linear-gradient(90deg, #252a34 0, #191c21 75%, #252a34 100%);
    background: linear-gradient(90deg, #252a34 0, #191c21 75%, #252a34 100%)
}

.header .header__main, .heading-control {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.trigger {
    display: block;
    width: 50px;
    height: 50px;
    background-color: #000;
    border-radius: 100%;
    color: #bbb;
    transition: .3s
}

.trigger:after, input[type=text]:after {
    content: '';
    border-radius: 100%;
    transition: .3s
}

.trigger.active span {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

.trigger.active span:before {
    bottom: 0;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.trigger.active span:after {
    width: 0;
    transition: none
}

.trigger span, .trigger span:after, .trigger span:before {
    display: block;
    height: 2px;
    position: absolute;
    background-color: #bbb;
    content: '';
    transition: .3s
}

.button, .fn__closer {
    background-color: #000
}

.trigger span {
    top: 24px;
    width: 24px;
    left: 13px
}

.trigger span:before {
    bottom: 6px;
    width: 24px;
    left: 0
}

.trigger span:after {
    top: 6px;
    width: 16px;
    left: 0
}

.button:hover:before, .col-190:hover:after, .fn__closer:hover:after, .trigger.active:after, .trigger:hover:after, button:disabled {
    opacity: .5
}

.logo {
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.logo a {
    height: 50px;
    color: var(--hc);
    line-height: 100%;
    display: flex;
    align-items: center
}

.logo a img {
    max-height: 100%
}

.searchdiv {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    -webkit-transition: opacity .3s, -webkit-transform .3s;
    transition: transform .3s, opacity .3s, -webkit-transform .3s;
    max-width: 250px;
    margin-left: auto
}

.search input[type=text] {
    font-family: var(--pff);
    background-color: #000;
    color: var(--hc);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, .15);
    font-size: 14px;
    height: 44px;
    width: 100%;
    padding: 0 15px;
    outline: transparent 0;
    transition: .3s
}

.search input[type=text]:focus {
    outline: 0;
    color: var(--hc);
    border-color: var(--mc1)
}

.search input[type=text]:-moz-placeholder, .search input[type=text]:-ms-input-placeholder, .search input[type=text]::-moz-placeholder, .search input[type=text]::-webkit-input-placeholder {
    color: var(--hc)
}

.search__helper {
    position: absolute;
    top: 0;
    right: 0;
    transition: opacity .3s;
    display: flex;
    align-items: center;
    fill: #bbb;
    width: 44px;
    height: 44px;
    justify-content: center;
    margin: 0 !important
}

.search__helper:hover {
    fill: var(--mc1)
}

.search input[type=text]:focus::-webkit-input-placeholder {
    color: transparent
}

.search input[type=text]:focus:-moz-placeholder {
    color: transparent
}

.search input[type=text]:focus::-moz-placeholder {
    color: transparent
}

.search input[type=text]:focus:-ms-input-placeholder {
    color: transparent
}

.main, .main * {
    box-sizing: border-box
}

.main {
    z-index: 2;
    display: flex;
    flex-direction: column
}

.main section {
    padding-top: 80px;
    padding-bottom: 20px;
    transition: .3s
}

.clearfix:after, .clearfix:before, .container:after, .small_container:after, html:after, html:before {
    display: table;
    content: '';
    clear: both
}

.small_container {
    width: 60%
}

.button {
    display: block;
    width: fit-content;
    height: 50px;
    line-height: 50px;
    padding: 0 34px;
    color: var(--hc);
    white-space: nowrap;
    outline: transparent 0;
    border-radius: 16px
}

.btn_icon_content, .btn_more_game a {
    color: var(--color-white);
    background: var(--common-gradient-color)
}

.button svg {
    width: 20px;
    fill: var(--hc);
    height: 40px
}

.button.medium {
    height: 44px;
    line-height: 44px;
    padding: 0 24px
}

.button.small {
    height: 34px;
    line-height: 34px;
    padding: 0 14px
}

.button:hover:after {
    animation-duration: 2s
}

.btn_more_game {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    align-items: center;
    width: 100%
}

.btn_more_game a {
    width: 300px
}

.second-cnt-sc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 8px
}

.btn_icon_content {
    font-size: 14px;
    line-height: normal;
    font-family: inherit;
    font-weight: 600;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    gap: 6px
}

.fn_breadcrumbs a, .subtitle {
    color: var(--bc)
}

.game-description__title {
    font-size: 18px;
    line-height: normal;
    margin: 0;
    width: calc(100% - 120px)
}

.bd-link-sc li {
    display: inline-block;
    padding: 0 15px;
    font-size: 16px;
    position: relative
}

.bd-link-sc li:first-child {
    padding: 0 15px 0 0
}

.bd-link-sc li + li::before {
    content: '>';
    position: absolute;
    left: -5px;
    top: 0;
    font-family: cursive;
    font-size: 20px;
    line-height: 20px;
    opacity: .5
}

.button:before {
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    position: absolute;
    content: '';
    border-radius: 25px
}

.creative_link, .description_info a:not([class]), .increative_link {
    background-image: -moz-linear-gradient(90deg, var(--mc1), var(--mc1) 50%, var(--mc0) 50%);
    background-image: -webkit-linear-gradient(90deg, var(--mc1), var(--mc1) 50%, var(--mc0) 50%);
    background-image: linear-gradient(to right, var(--mc1), var(--mc1) 50%, var(--mc0) 50%);
    background-size: 200% 100%;
    background-position: -100%;
    display: inline-block;
    position: relative;
    cursor: pointer;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: .3s ease-in-out
}

.creative_link {
    background-image: -moz-linear-gradient(90deg, var(--mc1), var(--mc1) 50%, var(--hc) 50%);
    background-image: -webkit-linear-gradient(90deg, var(--mc1), var(--mc1) 50%, var(--hc) 50%);
    background-image: linear-gradient(to right, var(--mc1), var(--mc1) 50%, var(--hc) 50%)
}

.creative_link:before, .description_info a:before, .increative_link:before {
    content: "";
    background: var(--mc1);
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    transition: .3s ease-in-out
}

.desktop-only, .maintitle:before {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0
}

.creative_link.active, .creative_link:hover, .description_info a:hover, .increative_link:hover {
    background-position: 0
}

.hide, .leftnav.ready, .leftnav_closer.ready, .nav_holder .icon, .popinfo.ready, .rightnav.ready, .rightnav_closer.ready {
    display: none !important
}

.content__title {
    margin: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.maintitle {
    margin-bottom: 8px
}

.subtitle {
    text-transform: initial;
    margin: 0;
    font-size: 16px
}

.games:not(.text-center-paging), .popup-content {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    grid-template-rows:minmax(100px, auto);
    grid-auto-flow: dense;
    gap: 8px 8px
}

.col-190 > a.bw-cursor {
    cursor: default
}

.desktop-only {
    color: #fff;
    z-index: 2;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 5px;
    padding-right: 5px
}

.col-190, .col-190 .games__img {
    position: relative;
    border-radius: 14px
}

.desktop-only svg {
    display: inline-block;
    fill: currentcolor;
    height: 24px;
    width: 24px
}

.desktop-only div {
    font-size: 12px;
    width: 100%
}

.col-190 {
    user-select: none;
    transition: transform .6s var(--buc);
    transform-origin: bottom center
}

.categs__info, .games__info {
    padding: 6px;
    color: var(--hc);
    transition: transform .3s var(--buc) .1s, opacity .3s var(--buc) .1s;
    transform: translate(0, 8px);
    -webkit-font-smoothing: antialiased;
    pointer-events: none;
    z-index: 1
}

.col-190:hover {
    transform: scale(1.025);
    transform-origin: bottom center;
    transition-duration: .3s
}

.col-190:hover .games__img video {
    height: 99%
}

.col-190:hover .games__img img {
    height: 99%;
    padding-top: 1px
}

.col-190 .games__img:after {
    content: "";
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #000, rgba(0, 0, 0, .8) 18%, rgba(0, 0, 0, 0) 50%);
    transition: box-shadow .6s var(--buc), opacity .3s var(--buc);
    box-shadow: rgba(0, 0, 0, .24) 0 6px 12px 0;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    contain: strict
}

.col-190:hover .games__img::after {
    opacity: 1
}

.col-190 .games__img {
    transition: transform .6s var(--buc);
    height: 100%
}

.col-190 .games__img img, .col-190 .games__img video {
    border-radius: 14px;
    height: 100%;
    width: 100%
}

img.bw-img {
    -webkit-filter: grayscale(100%) !important;
    filter: grayscale(100%) !important
}

.fixgames img, .games img {
    -webkit-filter: saturate(1.3);
    filter: saturate(1.3);
    object-fit: cover;
    width: 100%;
    height: 100%;
    aspect-ratio: 1.333333
}

.gvideo video {
    position: absolute;
    left: 0;
    top: 0;
    object-fit: fill
}

.categs__info {
    position: absolute;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    align-items: center;
    top: 15px;
    width: 100%;
    text-wrap: pretty
}

.categs__info svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0
}

.games__info {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0
}

.col-190:hover .games__info {
    opacity: 1;
    transform: translate(0, 0)
}

.ajax-loader > .games__img {
    display: flex;
    height: 100%;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center
}

.fn__closer {
    display: none;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    z-index: 6;
    color: #bbb;
    position: fixed;
    top: 26px;
    right: 20px;
    cursor: pointer
}

.leftnav_closer, .rightnav_closer {
    position: fixed;
    z-index: 999;
    bottom: 0;
    background-color: rgba(0, 0, 0, .8);
    transition: .5s;
    cursor: pointer
}

.fn__closer:after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 100%;
    transition: .3s
}

.fn__closer span:after, .fn__closer span:before {
    display: block;
    height: 2px;
    background-color: #bbb;
    width: 24px;
    left: 13px;
    top: 24px;
    position: absolute;
    content: ''
}

.fn__closer span:after {
    transform: rotate(45deg)
}

.fn__closer span:before {
    transform: rotate(-45deg)
}

.nav_holder li:last-child {
    margin-bottom: 0
}

.leftnav, .rightnav {
    width: 370px;
    position: fixed;
    transition: .5s;
    overflow-y: auto;
    bottom: 0;
    top: 0;
    background-color: #130f15;
    z-index: 9999;
    padding: 30px
}

.sprite-3d-games, .sprite-action-games, .sprite-adventure-games, .sprite-board-games, .sprite-casual-games, .sprite-educational-games, .sprite-featured-games, .sprite-flying-games, .sprite-girls-games, .sprite-html5-games, .sprite-mmo-games, .sprite-movie-games, .sprite-multiplayer-games, .sprite-racing-games, .sprite-simulation-games, .sprite-skill-games, .sprite-sports-games, .sprite-thinking-games, .sprite-unblocked-games-66 {
    width: 20px;
    height: 20px
}

.leftnav_closer {
    left: 0;
    top: 0;
    right: 0;
    transform: translateX(102%)
}

.leftnav, .rightnav_closer {
    transform: translateX(-102%);
    left: 0
}

.rightnav_closer {
    top: 0;
    right: 0
}

.leftnav.active, .leftnav_closer.active, .popinfo.active, .rightnav.active, .rightnav_closer.active {
    transform: translateX(0)
}

.rightnav {
    transform: translateX(+102%);
    right: 0
}

.navbox {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.nav_holder {
    overflow: hidden;
    position: relative
}

.nav_holder ul {
    margin: 20px 0;
    transition: .3s;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    padding-bottom: 20px
}

.nav_holder a {
    font-size: 16px;
    line-height: 26px;
    display: block;
    padding: 0 15px
}

.nav_holder li {
    margin-bottom: 13px
}

.leftnav::-webkit-scrollbar, .popinfo::-webkit-scrollbar, .rightnav::-webkit-scrollbar {
    width: 4px;
    background-color: #000
}

.leftnav:-webkit-scrollbar-track, .popinfo:-webkit-scrollbar-track, .rightnav:-webkit-scrollbar-track {
    background: var(--mc1)
}

.leftnav::-webkit-scrollbar-thumb, .popinfo::-webkit-scrollbar-thumb, .rightnav::-webkit-scrollbar-thumb {
    background-color: var(--mc1)
}

.lock-scroll {
    height: 100vh;
    overflow-y: hidden
}

.description_info, .page-description {
    background: var(--bg-common);
    box-shadow: var(--common-box-shadow);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 10px;
    padding: 20px;
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
    transition: height .3s linear;
    position: relative;
    height: fit-content
}

.page-description {
    margin: 24px 0
}

.description_info p {
    margin-bottom: 1rem
}

.description_info .fn_flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap
}

.description_info .fn_flex > div {
    min-width: 300px;
    margin: 0 0 20px;
    padding: 0 30px
}

.fn_flex ul {
    margin: 0;
    padding: 0
}

.description_info p.small {
    border-top: 1px solid rgba(255, 255, 255, .08)
}

.small {
    font-size: 80%
}

.fn_breadcrumbs {
    margin-bottom: 19px
}

.fn_breadcrumbs p {
    margin: 0;
    padding: 0;
    font-size: 18px;
    color: var(--bc)
}

.fn_breadcrumbs .separator {
    margin: 0 9px
}

@media (max-width: 1199.98px) {
    .games {
        align-items: center;
        justify-content: center
    }
}

.light-modal {
    --lm-small-modal: 30vw;
    --lm-large-modal: 50vw;
    --lm-font-size: 14px;
    display: none;
    position: fixed;
    background: rgba(27, 18, 29, .8);
    top: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    right: 0;
    z-index: 9000;
    transition: background 1s;
    font-size: var(--lm-font-size);
    visibility: hidden
}

.light-modal-content {
    background: radial-gradient(#201623, #211e3d);
    width: var(--lm-small-modal);
    border-radius: .2em;
    position: relative;
    max-height: calc(100vh - 150px);
    line-height: 1.4;
    display: flex;
    flex-direction: column
}

.light-modal-content img {
    max-width: 100%;
    border-radius: .2em
}

.light-modal-content.large-content {
    width: var(--lm-large-modal)
}

.light-modal-header {
    padding: 15px;
    background: rgba(0, 0, 0, .2);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.light-modal-heading {
    margin: 0;
    font-size: 1.5em
}

.light-modal-heading + .light-modal-close-icon {
    position: static
}

.light-modal-body {
    padding: 20px;
    overflow: auto;
    max-height: 450px
}

.bb, .carousel, .fixgames, .tag-component {
    overflow: hidden
}

.light-modal-footer {
    padding: 15px;
    background: rgba(0, 0, 0, .2);
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.light-modal-close-btn, .light-modal-close-icon {
    text-decoration: none;
    color: #fff;
    padding: 4px 8px;
    border-radius: .2em;
    background: var(--mc1);
    font-size: 1.5em;
    line-height: 1;
    opacity: 1;
    transition: opacity .2s ease-in-out
}

.light-modal-close-btn:hover, .light-modal-close-icon:hover {
    opacity: .9
}

.light-modal-close-icon {
    position: absolute;
    top: -15px;
    right: -15px
}

.light-modal-close-btn {
    font-size: 1em;
    line-height: 1.4;
    cursor: pointer
}

.light-modal-caption {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    padding: 10px 0;
    background: rgba(0, 0, 0, .2);
    border-radius: .2em;
    width: 100%;
    text-align: center;
    margin-top: 5px
}

.light-modal:target {
    background: rgba(0, 0, 0, .5);
    display: flex;
    visibility: visible
}

.light-modal-navigation .navigation-next, .light-modal-navigation .navigation-prev {
    width: 32px;
    height: 32px;
    border-color: #fff;
    transition: border-color .2s
}

.light-modal-navigation .navigation-next:hover, .light-modal-navigation .navigation-prev:hover {
    border-color: rgba(255, 255, 255, .7)
}

.light-modal-navigation .navigation-next {
    position: absolute;
    right: -50px;
    top: 50%;
    border-bottom: 1px solid;
    border-left: 1px solid;
    transform: rotate(-135deg)
}

.light-modal-navigation .navigation-prev {
    position: absolute;
    left: -50px;
    top: 50%;
    border-bottom: 1px solid;
    border-left: 1px solid;
    transform: rotate(45deg)
}

@media (max-width: 480px) {
    .trigger {
        width: 44px;
        height: 44px
    }

    .trigger span {
        top: 21px;
        width: 22px;
        left: 11px
    }

    .trigger span:before {
        bottom: 6px;
        width: 22px;
        left: 0
    }

    .trigger span:after {
        top: 6px;
        width: 14px;
        left: 0
    }

    .trigger_logo div:nth-child(3) {
        display: none
    }

    .container, .small_container {
        padding: 0 10px
    }

    h1, h2 {
        font-size: 17px
    }

    h2.subtitle, h3, h3.subtitle {
        font-size: 13px
    }

    h4, h5, h6 {
        font-size: 12px
    }

    .description_info .fn_flex > div {
        padding: 0
    }

    .light-modal-navigation .navigation-next {
        right: 5px
    }

    .light-modal-navigation .navigation-prev {
        left: 5px
    }
}

@-webkit-keyframes basic {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes basic {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

.basic {
    -webkit-animation-name: basic;
    animation-name: basic
}

@media (max-width: 1000px) {
    .light-modal {
        --lm-small-modal: 70vw;
        --lm-large-modal: 70vw
    }
}

.btn_search {
    color: #f0f8ff
}

.carousel .swiper-slide {
    width: fit-content !important
}

.carousel .swiper {
    position: relative;
    overflow-y: unset;
    max-width: 100%;
    width: 100%
}

.slider__title {
    color: var(--hc);
    font-size: 20px
}

.link--more {
    color: var(--color-highlight);
    font-size: 16px;
    text-decoration: none;
    font-weight: 700;
    text-transform: lowercase;
    margin-left: 10px
}

.action-button button, .btn_icon {
    color: #fff;
    background-color: transparent
}

.game-description a:not([class]):hover, .link--more:hover, .page-description a:not([class]):hover {
    color: var(--color-highlight-hover)
}

.action-button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: auto
}

.action-button button {
    outline: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 10px;
    transition: background .2s;
    border: 1px solid rgba(255, 255, 255, .15)
}

.badge_number, .parent {
    justify-content: center
}

.details p, .details span {
    color: #878787
}

.action-button button:hover {
    border-color: #fff
}

.action-button button:first-child {
    border-radius: 6px 0 0 6px
}

.action-button button:last-child {
    border-radius: 0 6px 6px 0
}

.action-button button.swiper-button-disabled {
    opacity: .4;
    color: #545454
}

.btn_icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    transition: .3s;
    box-shadow: 0 6px 30px rgba(0, 0, 0, .05)
}

.btn_icon:hover {
    transform: translateY(-3px);
    background: var(--common-gradient-color);
    color: var(--color-white)
}

.favorited {
    color: red
}

.icon_header {
    color: #fff
}

.heart:hover {
    color: #ff253a
}

.badge_number {
    display: flex;
    position: absolute;
    top: -8px;
    right: 10px;
    width: 15px;
    height: 15px;
    background-color: red;
    align-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 12px
}

.hidden, .hiderr, .main-svg-sprite {
    display: none
}

.svg-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    fill: currentColor;
    font-size: 0
}

.svg-icon__link {
    fill: inherit;
    width: inherit;
    height: inherit
}

.notification-success {
    position: sticky;
    bottom: 12px;
    left: 12px;
    width: fit-content;
    border-radius: 10px;
    box-shadow: 0 -6px 74px 0 rgb(0 0 0 / .15);
    animation: 1s forwards show_toastt;
    z-index: 9999
}

.col-favorite img, .gra, .popup-favorite {
    width: 100%;
    height: 100%
}

@keyframes show_toastt {
    0% {
        transform: translateX(-100%)
    }
    40% {
        transform: translateX(10%)
    }
    100%, 80% {
        transform: translateX(20px)
    }
}

.notification-success .toastt {
    border-radius: 10px;
    border-left: 5px solid #2ecc71;
    background: #fff;
    padding: 8px 12px;
    box-shadow: 1px 7px 14px -5px rgb(0 0 0 / .15);
    display: flex;
    align-items: center;
    justify-content: space-between
}

.notification-success .toastt .content_toast {
    display: flex;
    gap: 12px;
    align-items: center
}

.notification-success .toastt.offline {
    border-color: #ccc
}

.content_notification .details {
    margin-left: 15px
}

.details span {
    font-size: 20px;
    font-weight: 500
}

.toastt.offline .content_notification .icon {
    background: #ccc
}

.popup-favorite {
    position: absolute;
    z-index: 9999;
    background: #000000cc;
    padding-top: 40px;
    display: none;
    backdrop-filter: blur(14px)
}

.description_info > img, .pl {
    background-color: rgba(0, 0, 0, .3)
}

.container-popup-favorite {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 20px
}

.popup-title_favourite {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: 22px;
    font-weight: 500
}

.bo, .parent {
    display: grid;
    gap: 8px 8px
}

.parent {
    margin-top: 8px;
    grid-template-columns:repeat(10, 140px);
    grid-template-rows:repeat(9, 105px);
    transition: .3s;
    grid-template-areas:"le pl pl pl pl pl pl ri rr rr" "le pl pl pl pl pl pl ri rr rr" "le pl pl pl pl pl pl ri rr rr" "le pl pl pl pl pl pl ri rr rr" "le pl pl pl pl pl pl ri rr rr" "le pl pl pl pl pl pl ri rr rr" "bo bo bo bo bo bo bo bo rr rr" "bo bo bo bo bo bo bo bo rr rr" "bo bo bo bo bo bo bo bo rr rr" "bl in in in in in in br rr rr" "bl in in in in in in br rr rr" "bl in in in in in in br rr rr"
}

.bo {
    grid-area: bo;
    grid-template-columns:repeat(8, 140px);
    grid-template-rows:repeat(3, 105px);
    grid-template-areas:"b1 bb bb bb bb bb bb b2" "b1 b3 b3 b3 b3 b3 b3 b2" "b1 b3 b3 b3 b3 b3 b3 b2"
}

.bb, .info-game, .infora, .pl {
    display: flex
}

.game-bottom-play, .wrap-games-bottom {
    grid-template-rows:minmax(100px, auto);
    grid-auto-flow: dense
}

.infora, .rr {
    width: 300px;
    position: relative
}

.gra > div {
    z-index: 1
}

.infora {
    text-align: right;
    justify-content: center
}

.pl {
    grid-area: pl;
    border: 1px solid rgba(255, 255, 255, .07);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    flex-direction: column;
    justify-content: flex-end
}

.in, .tag-component {
    border-radius: 14px
}

.pl > div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100%
}

.le {
    grid-area: le
}

.ri {
    grid-area: ri
}

.bb {
    grid-area: bb;
    align-items: center;
    justify-items: center;
    justify-content: center;
    text-align: center;
    position: relative
}

.b1 {
    grid-area: b1
}

.b2 {
    grid-area: b2
}

.b3 {
    grid-area: b3
}

.rr {
    grid-area: rr
}

.bl {
    grid-area: bl
}

.in {
    grid-area: in;
    margin: 0;
    position: relative
}

.br {
    grid-area: br
}

.info-game {
    justify-content: space-between;
    text-wrap: nowrap;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: url('../images/player_bg.png') #059b9a;
    padding: .625rem 0 .625rem .75rem;
    box-shadow: 0 5px 10px #0a0a0a80, inset 0 1px 3px #affffa;
    position: relative;
    width: 100%;
    border-radius: 0 0 12px 12px;
    height: 70px;
    color: var(--color-white)
}

.info-game h1 {
    font-size: 18px
}

.info-game h1.maintitle:before {
    top: 1.2px
}

.info-game > div:first-child > div {
    column-gap: 10px
}

.info-game > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

.info-game > div:last-child {
    background-color: #020606;
    background-image: linear-gradient(90deg, #020606, #0000);
    background-position: bottom;
    background-repeat: repeat-x;
    border-radius: 0 0 12px;
    height: 70px;
    padding: .625rem 1.25rem;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.info-game > div:last-child:before {
    border-color: #0000 #0000 #020606;
    border-style: solid;
    border-width: 0 0 70px 40px;
    bottom: 0;
    content: "";
    height: 0;
    left: -40px;
    position: absolute;
    width: 0
}

.light-modal-body ul {
    margin: 15px 5px 0
}

.light-modal-body ul li {
    list-style: none;
    display: flex;
    column-gap: 20px;
    padding: 5px 0
}

.description_info > img {
    padding: 3px;
    margin: 0 10px 10px 0;
    float: left;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    position: relative
}

.fixgames {
    display: flex;
    gap: 8px 8px;
    flex-direction: column;
    flex-wrap: wrap
}

.fixgames .col-190, .wrap-games-bottom .col-190 {
    max-width: 140px;
    height: 105px;
    background-color: #000;
    width: fit-content
}

.content_rating {
    position: absolute;
    right: 15px;
    top: 15px
}

.content_rating img {
    margin-right: 5px
}

.description_info .fn_cs_steps a {
    font-size: 14px;
    line-height: 14px;
    padding: 8px
}

.description_info .fn_cs_steps a:before {
    content: none
}

.sticky {
    position: sticky;
    top: 81px
}

@media (max-width: 1499.95px) {
    .sc6 .parent {
        grid-template-columns:repeat(9, 140px);
        grid-template-areas:"le pl pl pl pl pl pl rr rr" "le pl pl pl pl pl pl rr rr" "le pl pl pl pl pl pl rr rr" "le pl pl pl pl pl pl rr rr" "le pl pl pl pl pl pl rr rr" "le pl pl pl pl pl pl rr rr" "bo bo bo bo bo bo bo rr rr" "bo bo bo bo bo bo bo rr rr" "bo bo bo bo bo bo bo rr rr" "bl in in in in in in rr rr" "bl in in in in in in rr rr" "bl in in in in in in rr rr"
    }

    .sc6 .b2.fixgames, .sc6 .br.fixgames, .sc6 .ri.fixgames {
        display: none
    }

    .sc6 .bo {
        grid-template-columns:repeat(7, 140px);
        grid-template-areas:"b1 bb bb bb bb bb bb " "b1 b3 b3 b3 b3 b3 b3 " "b1 b3 b3 b3 b3 b3 b3 "
    }
}

@media (max-width: 1358.95px) {
    .sc6 .parent {
        grid-template-columns:repeat(8, 140px);
        grid-template-rows:repeat(8, 105px);
        grid-template-areas:"le pl pl pl pl pl rr rr" "le pl pl pl pl pl rr rr" "le pl pl pl pl pl rr rr" "le pl pl pl pl pl rr rr" "le pl pl pl pl pl rr rr" "bo bo bo bo bo bo rr rr" "bo bo bo bo bo bo rr rr" "bo bo bo bo bo bo rr rr" "bl in in in in in rr rr" "bl in in in in in rr rr" "bl in in in in in rr rr"
    }

    .sc6 .bo {
        grid-template-columns:repeat(6, 140px);
        grid-template-areas:"b1 bb bb bb bb bb " "b1 b3 b3 b3 b3 b3 " "b1 b3 b3 b3 b3 b3 "
    }

    .sc6 .rr {
        display: grid;
        grid-template-columns:repeat(2, 140px);
        grid-template-rows:repeat(14, 105px);
        gap: 8px 8px;
        grid-template-areas:"r2 r2" "ra ra" "ra ra" "ra ra" "ra ra" "ra ra" "ra ra" "r3 r3" "r3 r3" "r3 r3" "r3 r3" "r3 r3" "r3 r3" "r3 r3"
    }

    .sc6 .r2 {
        grid-area: r2
    }

    .sc6 .ra {
        grid-area: ra;
        position: relative;
        align-items: center;
        justify-items: center
    }

    .sc6 .r3 {
        grid-area: r3
    }

    .sc6 .hiderr {
        display: flex
    }
}

@media (max-width: 1208.95px) {
    .sc6 .parent {
        grid-template-columns:repeat(7, 140px);
        grid-template-areas:"pl pl pl pl pl rr rr" "pl pl pl pl pl rr rr" "pl pl pl pl pl rr rr" "pl pl pl pl pl rr rr" "pl pl pl pl pl rr rr" "bo bo bo bo bo rr rr" "bo bo bo bo bo rr rr" "bo bo bo bo bo rr rr" "in in in in in rr rr" "in in in in in rr rr" "in in in in in rr rr"
    }

    .sc6 .b1.fixgames, .sc6 .bl.fixgames, .sc6 .le.fixgames {
        display: none
    }

    .sc6 .bo {
        grid-template-columns:repeat(5, 140px);
        grid-template-areas:"bb bb bb bb bb " "b3 b3 b3 b3 b3 " "b3 b3 b3 b3 b3 "
    }
}

@media (max-width: 1089.95px) {
    .sc6 .parent {
        grid-template-columns:repeat(6, 140px);
        grid-template-areas:"pl pl pl pl pl rr" "pl pl pl pl pl rr" "pl pl pl pl pl rr" "pl pl pl pl pl rr" "pl pl pl pl pl rr" "bo bo bo bo bo rr" "bo bo bo bo bo rr" "bo bo bo bo bo rr" "in in in in in rr" "in in in in in rr" "in in in in in rr"
    }

    .sc6 .rr {
        grid-template-columns:repeat(1, 140px);
        grid-template-rows:repeat(11, 105px);
        grid-template-areas:"r2" "ra" "ra" "ra" "ra" "ra" "ra" "r3" "r3" "r3" "r3"
    }
}

@media (max-width: 929.95px) {
    .sc6 .parent {
        grid-template-columns:repeat(5, 140px);
        grid-template-areas:"pl pl pl pl rr" "pl pl pl pl rr" "pl pl pl pl rr" "pl pl pl pl rr" "bo bo bo bo rr" "bo bo bo bo rr" "bo bo bo bo rr" "in in in in rr" "in in in in rr" "in in in in rr"
    }

    .sc6 .bo {
        grid-template-columns:repeat(4, 140px);
        grid-template-areas:"bb bb bb bb " "b3 b3 b3 b3 " "b3 b3 b3 b3 "
    }
}

@media (max-width: 768px) {
    .header {
        height: 115px;
        padding-bottom: 5px
    }

    .main section {
        padding-top: 116px
    }

    .search {
        width: 100%;
        margin: 0
    }

    .searchdiv {
        position: absolute;
        left: 2rem;
        top: 4.5rem;
        width: calc(100% - 4rem);
        z-index: 65;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition: .3s;
        display: flex;
        align-items: center;
        max-width: 100%
    }

    .search input[type=text] {
        height: 36px;
        font-size: 12px
    }

    .search__helper {
        height: 36px;
        width: 36px
    }

    .game-preview__logo, .sc6 .rr, .trigger_logo div > button span {
        display: none
    }

    .leftnav, .pl, .rightnav, .sc6 .bo {
        width: 100%
    }

    .nav_holder ul {
        text-align: left
    }

    .fn__closer {
        display: block
    }

    .footer ul {
        justify-content: center;
        flex-wrap: wrap
    }

    .random-games {
        display: flex;
        justify-content: right;
        width: 100%
    }

    .sc6 .parent {
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .sc6 .bo {
        display: flex;
        height: 100%;
        flex-direction: column
    }

    .b3.fixgames {
        flex-direction: row;
        justify-content: center
    }

    .pl > div:first-child {
        position: relative;
        height: min(100vh - 193px, 56vw)
    }

    @media (orientation: landscape) {
        .pl > div:first-child {
            height: 33vw
        }
    }
}

.game-bottom {
    width: 1120px;
    padding-left: 220px
}

.game-bottom-play {
    display: grid;
    grid-template-columns:repeat(8, minmax(140px, 1fr));
    gap: 8px 8px
}

.game-bottom-play .col-190 {
    width: fit-content
}

.d_wrap {
    display: flex;
    justify-content: flex-start;
    gap: 12px
}

.width-300 {
    width: calc(100% - 300px)
}

.pd-right__8 {
    padding-right: 8px
}

.text-center-paging {
    padding-top: 24px;
    display: flex;
    justify-content: center
}

.heading {
    margin: 10px 0
}

.page-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 15px;
    background-color: transparent;
    border-radius: 50%
}

.page-item a:hover {
    background: var(--mc0)
}

.page-load-status {
    color: #fff;
    display: none
}

.infinite-scroll-request {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background: #00000087;
    z-index: 44
}

.infinite-scroll-request .loading {
    position: absolute;
    content: "";
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center
}

.page_loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 989;
    background-color: rgba(0, 0, 0, .75)
}

.loading_page {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    margin: 12px auto;
    z-index: 99
}

.loader {
    width: 65px;
    aspect-ratio: 1;
    position: relative
}

.btn--up, .wrap__back-to-top {
    position: fixed;
    right: 10px;
    bottom: 10px
}

.loader:after, .loader:before {
    content: "";
    position: absolute;
    border-radius: 50px;
    box-shadow: 0 0 0 3px inset #fff;
    animation: 2.5s infinite l4
}

.loader:after {
    animation-delay: -1.25s
}

@keyframes l4 {
    0%, 100% {
        inset: 0 35px 35px 0
    }
    12.5% {
        inset: 0 35px 0 0
    }
    25% {
        inset: 35px 35px 0 0
    }
    37.5% {
        inset: 35px 0 0 0
    }
    50% {
        inset: 35px 0 0 35px
    }
    62.5% {
        inset: 0 0 0 35px
    }
    75% {
        inset: 0 0 35px 35px
    }
    87.5% {
        inset: 0 0 35px 0
    }
}

.load-more {
    text-align: center;
    margin-top: 13px
}

#load_more_recommended_games {
    padding: 18px 20% 14px;
    color: #fff;
    border: 1px solid #3e32b8;
    border-bottom: 3px solid #292274;
    background: #09f;
    display: inline-block;
    border-radius: 7px;
    text-decoration: none;
    margin: 12px auto
}

#goToNewGames {
    display: none;
    margin-top: 10px;
    margin-bottom: 10px
}

@media (max-width: 1170px) {
    .d_wrap {
        flex-direction: column
    }

    #comment-area, .infora, .width-300 {
        width: 100%
    }
}

@media (max-width: 500px) {
    .game-preview__logo, .maintitle, .thumb-playgame {
        display: none
    }

    .info-game {
        flex-direction: column
    }

    .info-game > div:first-child {
        align-items: center
    }

    .info-game > div {
        justify-content: center
    }
}

.fn_pagination {
    padding: 0;
    margin: 15px 0;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap;
    -ms-align-items: center;
    align-items: center;
    justify-content: center
}

.fn_pagination a, .fn_pagination span {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: var(--hff);
    font-size: 16px;
    border-radius: 100%;
    color: var(--bc);
    border: 1px solid rgba(255, 255, 255, .07);
    position: relative;
    background-color: rgba(0, 0, 0, .3);
    margin: 5px
}

.fn_pagination a svg {
    display: inline-block;
    fill: currentcolor;
    height: 20px;
    width: 20px
}

.fn_pagination a:hover, .fn_pagination span.active {
    border: 1px solid transparent;
    color: var(--color-white);
    background: var(--common-gradient-color)
}

.fn_pagination a:hover:after, .fn_pagination span.active:after {
    border-radius: 100%
}

.metaportal_fn_404 h2 {
    margin-bottom: 20px;
    font-size: 36px;
    line-height: 1
}

.metaportal_fn_404 {
    padding: 250px 0
}

.metaportal_fn_404 .message_holder {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center
}

.metaportal_fn_404 h1 {
    font-size: 200px;
    font-weight: 900;
    color: #1b0e37;
    letter-spacing: 2px;
    margin-bottom: 2px
}

.metaportal_fn_404 p {
    max-width: 420px;
    margin: 0 auto 22px;
    font-size: 18px;
    line-height: 1.44;
    font-weight: 400
}

.fn__gradient_title {
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
    line-height: 1;
    background: -moz-linear-gradient(90deg, var(--mc1), var(--mc2));
    background: -webkit-linear-gradient(90deg, var(--mc1), var(--mc2));
    background: linear-gradient(to right, var(--mc1), var(--mc2));
    -webkit-background-clip: text;
    -webkit-text-stroke: 4px transparent;
    color: #160f1a;
    filter: drop-shadow(0 5px 20px rgba(204, 0, 255, .15))
}

.fn_cs_steps a {
    color: #b60ae0
}

.fn_cs_steps {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding-bottom: 15px
}

.tag-component {
    border: 1px solid rgba(255, 255, 255, .07)
}

@media (max-width: 1040px) {
    .metaportal_fn_404 {
        padding: 130px 0
    }

    .metaportal_fn_404 h1 {
        font-size: 20vw
    }

    .fn__gradient_title {
        font-size: 40px
    }
}

@media not all and (min-resolution: .001dpcm) {
    .fn__gradient_title {
        background-clip: text;
        -webkit-background-clip: text;
        text-fill-color: transparent;
        display: inline
    }
}

.title-color {
    color: var(--color-highlight)
}

.wrap__back-to-top {
    display: flex;
    width: 100%;
    justify-content: right;
    padding-right: 20px;
    z-index: 99
}

.btn--up {
    width: 36px;
    height: 36px;
    color: var(--color-white);
    background: var(--common-gradient-color);
    border-radius: 14px;
    cursor: pointer;
    transition: .5s cubic-bezier(.51, .92, .24, 1.15);
    animation: 2.5s infinite gelatine;
    z-index: 100;
    display: none
}

.btn--up.show {
    display: block
}

@keyframes gelatine {
    0%, 100% {
        transform: scale(1, 1)
    }
    100%, 20%, 50%, 80% {
        transform: translateY(0)
    }
    25% {
        transform: scale(.9, 1.1)
    }
    40% {
        transform: translateY(-30px)
    }
    50% {
        transform: scale(1.1, .9)
    }
    60% {
        transform: translateY(-15px)
    }
}

.wrap-games-bottom {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px 8px
}

.container-games-bottom {
    padding: 0 70px;
    margin: 0 auto
}

.game-description h2:not([class]), .page-description h2:not([class]) {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-highlight)
}

.game-description h3:not([class]), .game-description h4:not([class]), .game-description h5:not([class]), .page-description h3:not([class]), .page-description h4:not([class]), .page-description h5:not([class]) {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 700;
    color: var(--color-highlight)
}

.game-description p:not([class]), .page-description p:not([class]) {
    font-size: 14px;
    margin-bottom: 10px
}

.game-description ol:not([class]), .game-description ul:not([class]), .page-description ol:not([class]), .page-description ul:not([class]) {
    padding-left: 24px;
    list-style: disc;
    margin: 0 0 12px
}

.game-description ol:not([class]) li, .game-description ul:not([class]) li, .page-description ol:not([class]) li, .page-description ul:not([class]) li {
    list-style: disc;
    margin: 0 0 6px
}

.game-description a:not([class]), .page-description a:not([class]) {
    color: var(--color-highlight);
    text-decoration: underline
}

.show_content {
    position: absolute;
    max-width: calc(100% - 40px);
    width: 100%;
    bottom: 6px;
    display: flex;
    align-items: flex-end;
    z-index: 12;
    background: linear-gradient(0deg, var(--bg-common), transparent);
    height: 50px
}

.ShowMore_button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background: 0 0;
    border: 0;
    outline: 0;
    color: #eee;
    font-size: 14px;
    width: fit-content;
    cursor: pointer;
    font-family: inherit;
    gap: 12px;
    padding: 6px 12px
}

.title-icon {
    margin: 12px 15px;
    display: flex;
    font-size: 20px;
    align-items: center;
    justify-content: space-between
}

.title-page {
    font-size: inherit
}

.category-list {
    margin: 0 0 12px
}

.categories-game {
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    gap: 10px
}

.category-child-container {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px
}

.tag-component a {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 14px;
    padding: 8px;
    color: var(--hc);
    background: var(--grd-gradient-bg);
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: .3s ease-in-out
}

.tag-component a:hover {
    background-size: 200% 100%;
    background-position: -100%
}

select.classic, select.classic:focus {
    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
    background-repeat: no-repeat
}

@keyframes animatedgradient {
    0%, 100% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 50%
    }
}

.line_top:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50px;
    width: calc(100% - 100px);
    height: 5px;
    z-index: 1;
    border-radius: 0 0 10px 10px;
    background-color: #fdcc56;
    background: linear-gradient(45deg, #ffd13a, #ff562a)
}

.back_to_home {
    padding: 12px 16px;
    border-radius: 16px;
    color: var(--color-white);
    background: var(--common-gradient-color)
}

.back_to_home:hover {
    box-shadow: 0 5px 20px var(--mc1)
}

select.classic {
    background-image: linear-gradient(45deg, transparent 50%, #00f 50%), linear-gradient(135deg, #00f 50%, transparent 50%), linear-gradient(to right, #87ceeb, #87ceeb);
    background-position: calc(100% - 17px) calc(1em + 1px), calc(100% - 12px) calc(1em + 1px), 100% 0;
    border: 0;
    padding: 6px 40px 6px 10px;
    border-radius: 6px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none
}

select.classic:focus {
    background-image: linear-gradient(45deg, #fff 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #fff 50%), linear-gradient(to right, gray, gray);
    background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, 100% 0;
    border-color: grey;
    outline: 0
}