@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v10/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
    font-display: fallback;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2) format('woff2');
    font-display: fallback;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
    font-display: fallback;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    font-display: fallback;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
    font-display: fallback;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

@font-face {
    font-family: 'nlifecms';
    font-style: normal;
    font-weight: normal;
    src: url('/css/game_25/fonts/nlifecms.woff2') format('woff2'), url('/css/game_25/fonts/nlifecms.ttf') format('truetype'), url('/css/game_25/fonts/nlifecms.woff') format('woff');
    font-display: block;
}

body {
    --info: #78BE39;
    --warning: #F79131;
    --error: #E20D1B;
    --accent: #F43590;
    --accent-rgb: 244,53,144
}

html {
    --background: #FFF;
    --background-rgba: 255,255,255;
    --line: #EEE;
    --line-hard: #DDD;
    --text-color-normal: #000;
    --text-color-quote: #555;
    --text-color-soft: #666;
    --text-color-softer: #AAA;
    --soft-bg: #DDD;
    --bg-offset: #F8F8F8;
    --bg-highlight: #F3F3F3;
    --bg-avatar: #e2e2e2;
    --border-input: #DDD;
    --border-focus: #999
}

body.dark,html.dark {
    --background: #111;
    --background-rgba: 17,17,17;
    --line: #333;
    --line-hard: #444;
    --text-color-normal: #FFF;
    --text-color-quote: #CCC;
    --text-color-soft: #AAA;
    --text-color-softer: #999;
    --soft-bg: #444;
    --bg-offset: #222;
    --bg-highlight: #333;
    --border-input: #333;
    --border-focus: #666;
    --bg-avatar: #999
}

.content {
    --negative-space: -10px;
    --text-spacer: 20px
}

.accent {
    color: var(--accent)
}

.accent-hover:hover {
    color: var(--accent)
}

.accent-border {
    border-color: var(--accent) !important
}

.text a,.forums .text a,.accent,.forums .unread a,.forums .unread .item-title .icon,.forums .unread .forum-title .icon {
    color: var(--accent)
}

.accent-bg,.ccmsForm .fm-fieldset legend,.ccmsForm .button:hover,.accent-bg-hover:hover {
    background-color: var(--accent)
}

#header {
    color: #FFF
}

#header .menubar {
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
    -o-box-shadow: 0 0 15px rgba(0,0,0,0.5);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,0.5)
}

#body,.content {
    background: var(--background);
    color: var(--text-color-normal)
}

.inset {
    max-width: 968px;
    margin: 0 auto
}

.header .inset,#footer .inset,.content-only .inset {
    max-width: 1260px;
    width: auto
}

.header-wrap {
    position: relative;
    z-index: 20000
}

#template {
    position: relative
}

#toolbar a {
    float: left;
    color: #FFF
}

#header {
    text-align: center;
    background: inherit
}

#header a {
    text-decoration: none
}

#header ul {
    text-align: left
}

.site-title {
    font-size: 100%;
    display: inline-block;
    max-width: 265px;
    line-height: 65px;
    vertical-align: bottom;
    padding: 15px 15px 15px 0
}

.site-title a {
    display: inline-block;
    height: 100%;
    line-height: 100%;
    vertical-align: middle;
    color: #FFF
}

.site-title img,.site-title svg {
    max-width: 160px;
    max-height: 50px;
    vertical-align: middle;
}

body.noscroll {
    overflow: hidden
}

@media screen and (min-width: 1200px) {
    .content-only .content {
        width:1000px;
        margin: 0 auto;
        padding-top: 30px
    }
}

@media screen and (min-width: 850px) {
    #body {
        padding:10px;
        display: grid;
        gap: 12px
    }

    #content {
        grid-column: 1
    }

    .with-sidebar #content {
        width: 920px;
        grid-column: 1
    }

    #page-sidebar.with-sticky .sidebar-wrap {
        position: sticky;
        bottom: 0;
        align-self: flex-end;
        width: 100%
    }
}

.cols.standard .col-2 > .insert:first-child {
    margin-bottom: 30px
}

@media screen and (min-width: 1301px) {
    #body {
        padding:16px 16px 15px 12px
    }
}

@media screen and (max-width: 899px) {

    .site-title {
        display: block;
        margin-left: 70px;
        margin-right: 70px;
        text-align: center;
        max-width: none;
        padding: 0 10px;
        height: 70px;
        line-height: 70px
    }

    .site-title a {
        display: inline
    }
}

article,aside,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

h1,h2,h3,h4,h5,h6,p,blockquote,ul,li,ol,dl,dt,dd,form,body,html,article,aside,figure,footer,header,hgroup,menu,nav,section {
    margin: 0;
    padding: 0;
    font-size: 100%
}

abbr {
    text-decoration: none
}

html {
    height: 100%
}

body {
    font-size: 100%;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    background: #CCC
}

ul {
    text-align: left;
    list-style-type: none
}

ul li {
    display: inline
}

.breadcrumbs a {
    color: var(--text-color-soft);
    font-weight: bold;
    text-decoration: none
}

.breadcrumbs a:hover {
    text-decoration: underline
}

.paginate li {
    padding-right: 4px
}

.paginate li span {
    vertical-align: middle
}

.paginate .current-page,.paginate a {
    display: inline-block;
    padding: 5px 8px;
    color: var(--accent);
    min-width: 15px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    margin: 4px 0
}

.paginate a {
    text-decoration: none
}

.paginate a:hover {
    color: #FFF;
    text-decoration: none
}

.paginate .active {
    color: #FFF
}

.paginate .accent-border {
    border-width: 2px;
    border-style: solid
}

.paginate .ui-page-jump form {
    bottom: 100%;
    left: 0;
    right: 0;
    position: absolute;
    padding: 5px;
    background: var(--soft-bg);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);
    -o-box-shadow: 0 0 5px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 0 5px rgba(0,0,0,0.1)
}

.paginate .ui-page-jump form label {
    font-weight: bold;
    padding-bottom: 5px;
    display: block
}

.paginate .ui-page-jump form div {
    display: flex;
    font-size: larger
}

.paginate .ui-page-jump form div input {
    flex-grow: 1;
    width: 100%;
    text-align: center;
    border: none;
    outline: none
}

.paginate .ui-page-jump form div button {
    color: #FFF;
    border: none;
    font-weight: bold;
    padding: 5px 8px;
    text-transform: uppercase;
    font-family: inherit;
    cursor: pointer
}

.hide-nofollow a[rel=nofollow] {
    display: none !important
}

.scrollbars,.menu,.submenu,.submenu-wrap,.search-results .items {
    -webkit-overflow-scrolling: touch
}

.scrollbars::-webkit-scrollbar,.menu::-webkit-scrollbar,.submenu::-webkit-scrollbar,.submenu-wrap::-webkit-scrollbar,.search-results .items::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

.scrollbars::-webkit-scrollbar-track,.menu::-webkit-scrollbar-track,.submenu::-webkit-scrollbar-track,.submenu-wrap::-webkit-scrollbar-track,.search-results .items::-webkit-scrollbar-track {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    background: transparent;
    zoom:1;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000);
    background: rgba(0,0,0,.1)
}

.scrollbars::-webkit-scrollbar-thumb,.menu::-webkit-scrollbar-thumb,.submenu::-webkit-scrollbar-thumb,.submenu-wrap::-webkit-scrollbar-thumb,.search-results .items::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    background: transparent;
    zoom:1;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
    background: rgba(0,0,0,.2)
}

.scrollbars::-webkit-scrollbar-thumb:window-inactive,.menu::-webkit-scrollbar-thumb:window-inactive,.submenu::-webkit-scrollbar-thumb:window-inactive,.submenu-wrap::-webkit-scrollbar-thumb:window-inactive,.search-results .items::-webkit-scrollbar-thumb:window-inactive {
    background: transparent;
    zoom:1;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000);
    background: rgba(0,0,0,.1)
}

.menu a {
    color: #FFF
}

@media screen and (min-width: 980px) {

    #header #controller-bar {
        position: absolute;
        top: 15px
    }
}

@media screen and (max-width: 1100px) {
    .site-title {
        padding:10px 10px 6px 10px;
        box-sizing: border-box
    }

    .site-title a {
        display: block
    }

    .menu {
        display: block;
        text-align: left;
        white-space: normal
    }

    .menu li {
        padding: 0;
        display: inline
    }

    .menu > li > a {
        display: flex;
        align-items: center;
        height: auto;
        padding: 10px;
        text-align: left
    }

    .menu > li > a .icon {
        display: inline-block;
        font-size: inherit
    }

    .menu > li > a .label {
        flex-grow: 1
    }

    .header .header-bar {
        text-align: center;
        display: block !important
    }
}

@media screen and (min-width: 1100px) {
    div.template #header .menubar .menu > li > a {
        padding-left:15px;
        padding-right: 15px
    }
}

@media screen and (min-width: 900px) {
    .template #header {
        position:relative;
        text-align: left
    }

    .template #header .header-bar {
        display: block !important;
        text-align: left;
        white-space: nowrap;
        box-sizing: border-box
    }

    .template #header .ui-toggle-menu {
        display: none
    }

    .template #header .ui-userinfo:hover p.subtitle {
        color: inherit
    }

    .template #header .site-title {
        padding: 18px 15px 17px 15px
    }

    .template #header .menubar {
        display: inline!important;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        -o-box-shadow: none;
        -ms-box-shadow: none
    }

    .template #header .menubar .menu {
        display: inline-block;
        height: 100px
    }

    .template #header .menubar .menu > li {
        display: inline-block;
        padding: 10px 0
    }

    .template #header .menubar .menu > li > a {
        display: inline-block;
        height: 60px;
        padding: 12px 15px 8px;
        transition: background 0.1s ease;
        -moz-transition: background 0.1s ease;
        -webkit-transition: background 0.1s ease;
        -o-transition: background 0.1s ease;
        -ms-transition: background 0.1s ease;
        border-right: 1px solid rgba(255,255,255,0.1);
        text-align: center;
        line-height: 150%
    }

    .template #header .menubar .menu > li > a .icon {
        font-size: 32px;
        min-height: 32px;
        min-width: 32px;
        vertical-align: middle;
        display: block
    }

    .template #header .menubar .menu > li > a .label {
        display: block;
        padding-top: 5px;
        font-weight: bold;
        font-size: 90%;
        vertical-align: middle
    }

    .template #header .menubar .menu li:last-child .main-menu-item {
        border-right: none
    }

    .template #header .menubar .menu .no-icon .label {
        padding-left: 0
    }

    .template #header .menubar .menu .no-icon .icon {
        font-size: 16px;
        padding-left: 5px
    }

    .template #header .menubar .menu .has-submenu a.selected {
        padding-bottom: 6px;
        border-bottom: 3px solid #FFF
    }

    .template #header .menubar .main-menu-item {
        text-transform: uppercase;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px
    }

    .template #header .menubar .menu > li > a:hover,.template #header .menubar .menu > li > a.active,.template #header .menubar .menu > li.active > a {
        background: #f43590;
    }

    .template #header .menubar .has-submenu:first-child .submenu-wrap li {
        border-right: 1px solid rgba(255,255,255,0.1)
    }

    .template #header .menubar .has-submenu:first-child .submenu-wrap a {
        color: #FFF
    }

    .template #header .menubar .has-submenu.active .main-menu-item {
        position: relative
    }

    .template #header .menubar .has-submenu.active .main-menu-item:after {
        content: "";
        position: absolute;
        margin-top: 5px;
        top: 100%;
        left: 47%;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 5px 5px 5px;
        border-color: transparent transparent #ffffff transparent
    }

    .template #header .menubar .submenu-wrap li {
        display: inline-block;
        border-right: 1px solid rgba(0,0,0,0.1);
        margin: 6px 0 6px 0
    }

    .template #header .menubar .submenu-wrap a {
        color: var(--accent);
        font-weight: bold;
        padding: 6px 10px;
        display: inline-block;
        border-right: none;
        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -o-border-radius: 2px;
        -ms-border-radius: 2px;
        transition: background 0.15s ease;
        -moz-transition: background 0.15s ease;
        -webkit-transition: background 0.15s ease;
        -o-transition: background 0.15s ease;
        -ms-transition: background 0.15s ease
    }

    .template #header .menubar .submenu-wrap a .icon {
        margin-right: 4px
    }

    .template #header .menubar .submenu-wrap a:hover {
        background: var(--accent);
        color: #FFF
    }

    .template #header .menubar .submenu-wrap li:last-child {
        border-right: none
    }

}



@media screen and (max-width: 899px) {
    .template #header .site-title {
        height:66px
    }

    .template #header .menubar {
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        -o-box-shadow: none;
        -ms-box-shadow: none;
        display: none
    }



    .template #header #quick-search {
        display: block;
        padding: 0;
        border-top: 4px solid rgba(0,0,0,0.3);
        border-bottom: 4px solid rgba(0,0,0,0.3)
    }

    .template #header #quick-search .controls {
        background: transparent;
        zoom:1;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
        background: rgba(0,0,0,0.4);
        box-shadow: 0 0 10px inset rgba(0,0,0,0.2);
        -moz-box-shadow: 0 0 10px inset rgba(0,0,0,0.2);
        -webkit-box-shadow: 0 0 10px inset rgba(0,0,0,0.2);
        -o-box-shadow: 0 0 10px inset rgba(0,0,0,0.2);
        -ms-box-shadow: 0 0 10px inset rgba(0,0,0,0.2);
        position: relative
    }

    .template #header #quick-search .controls .icon {
        position: absolute;
        right: 17px;
        top: 15px
    }

    .template #header #quick-search .controls .textbox {
        text-align: left;
        font-weight: bold;
        font-size: 14px;
        color: #FFF;
        height: 50px;
        padding: 10px 17px
    }

    .template #header #quick-search .controls .textbox::placeholder {
        color: #DDD;
        opacity: 0.75;
        filter: alpha(opacity = 75);
        zoom:1
    }


    .template #header #quick-search-results .search-results .items {
        position: fixed;
        top: 178px;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: auto
    }

    .template #header #quick-search-results .search-results .items .search-item .image {
        width: 40%;
        padding-right: 10px
    }

    .template #header #quick-search-results .search-results .items .search-item .image img {
        vertical-align: bottom
    }

    .template #header #quick-search-results .search-results .items .search-item .item-heading span {
        display: block
    }

    .template #header .header-bar {
        position: relative;
        z-index: 9000;
        min-height: 66px;
        border-bottom: 4px solid rgba(0,0,0,0.2)
    }

    .template #header .header-bar .avatar img {
        vertical-align: bottom;
        width: 100%;
        height: 100%
    }

    .template #header .header-bar .ui-mobile-actions {
        display: block;
        position: static
    }

    .template #header .header-bar .ui-mobile-actions .icon {
        font-size: 32px
    }

    .template #header .header-bar .ui-mobile-actions > li:hover {
        background: none !important
    }

    .template #header .header-bar .ui-mobile-actions .ui-toggle-menu {
        padding: 17px 17px;
        height: 32px
    }

    .template #header .header-bar .ui-mobile-actions li {
        padding: 9px 10px;
        display: inline-block;
        height: 48px
    }

    .template #header .header-bar .ui-mobile-actions li:first-child {
        float: left
    }

    .template #header .header-bar .ui-mobile-actions li:last-child {
        float: right
    }

    .template #header.enabled {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        -o-box-shadow: none;
        -ms-box-shadow: none
    }

    .template #header.enabled .header-bar {
        border-bottom: none
    }

    .template #header.enabled .menu {
        position: fixed;
        top: 124px;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: auto;
        font-size: 90%;
        display: flex;
        flex-direction: column
    }

    .template #header.enabled .menu .has-submenu.active > a {
        background: transparent;
        zoom:1;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);
        background: rgba(255,255,255,0.1)
    }

    .template #header.enabled .menu > li > a {
        border-bottom: 2px solid rgba(255,255,255,0.1);
        padding: 10px 15px;
        position: relative;
        border-right: none
    }

    .template #header.enabled .menu > li > a .icon {
        font-size: 24px;
        margin-right: 5px;
        min-width: 24px;
        text-align: center
    }

    .template #header.enabled .menu > li > a .label {
        padding: 7px 5px 3px 5px;
        font-size: inherit;
        font-weight: bold
    }

    .template #header.enabled .menu > li > a.active:after {
        content: "";
        position: absolute;
        right: 0;
        top: 42%;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 5px 5px 0;
        border-color: transparent #ffffff transparent transparent
    }

    .template #header.enabled .menu .submenu-wrap li {
        display: block
    }

    .template #header.enabled .menu .submenu-wrap .section {
        padding: 25px 15px 15px 15px;
        border-bottom: 2px solid rgba(0,0,0,0.1)
    }

    .template #header.enabled .menu .submenu-wrap a {
        display: flex;
        align-items: center;
        color: var(--accent);
        padding: 15px 15px;
        border-bottom: 2px solid rgba(0,0,0,0.1)
    }

    .template #header.enabled .menu .submenu-wrap a .icon {
        margin-right: 5px
    }

    .template #header.naked .header-bar {
        border-bottom: none;
        min-height: 70px;
        background: linear-gradient(0, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)
    }

    .template #header.naked .header-bar:after {
        background: none !important
    }
}

#header .ui-user-notifications-list > li {
    padding: 0 !important
}

#header .ui-user-notifications-list a {
    display: block !important;
    font-weight: bold !important;
    padding: 15px 30px 15px 15px !important
}

#header .ui-user-notifications-list a .label {
    display: block
}

.ui-bookmark-list li {
    display: block;
    position: relative;
    padding: 15px
}

.ui-bookmark-list li img {
    background: #EEE;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    display: inline-block
}

.ui-bookmark-list li a {
    display: block !important;
    padding: 0 !important;
    border-bottom: none !important
}

.ui-bookmark-list li a.headline .category {
    border-right: 1px solid #CCC;
    padding-right: 5px;
    margin-right: 5px;
    text-transform: uppercase;
    color: var(--accent)
}

.ui-bookmark-list li a.headline .title {
    color: inherit
}

.ui-bookmark-list li a.headline:hover .title {
    text-decoration: underline
}

.ui-bookmark-list li a.headline:visited .title,.ui-bookmark-list li a.headline:visited .category {
    color: #666
}

#footer {
    padding: 15px 25px 0 25px;
    text-align: center;
    color: #FFF;
    background-position: top center;
    background-repeat: repeat
}

#footer .inset {
    padding-bottom: 25px
}

#footer a {
    font-weight: bold;
    text-decoration: none
}

#footer a:hover {
    text-decoration: underline
}

#footer ul.list {
    clear: both;
    margin: 15px 0;
    display: block;
    background: transparent;
    zoom:1;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
    background: rgba(255,255,255,0.15);
    padding: 0px;
    line-height: 125%;
    text-align: center
}

#footer ul.list li {
    display: inline
}

#footer ul.list li a {
    display: inline-block;
    color: #FFF;
    padding: 4px 10px;
    border-left: 2px solid rgba(255,255,255,0.4);
    margin: 4px 0;
    cursor: pointer
}

#footer ul.list li:first-child a {
    border-left: none
}

#footer ul.friends {
    margin: 0
}

#footer ul.friends li:nth-child(2) a {
    border-left: none
}

#footer .copyright {
    clear: both;
    font-size: 90%;
    padding: 25px;
    line-height: 150%
}

#footer .copyright a {
    color: #FFF
}

#footer .copyright,#footer .more,#footer .list,#footer .social,#footer .list-heading,#footer .button,#footer .alphabet {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    -moz-text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    -webkit-text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    -o-text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    -ms-text-shadow: 1px 1px 2px rgba(0,0,0,0.3)
}

#footer .trending-articles .items {
    padding-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

#footer .trending-articles .item {
    background: #FFF;
    padding: 10px;
    text-align: left;
    color: #666;
    display: block;
    flex-grow: 1;
    width: 300px;
    box-sizing: border-box;
    position: relative
}

#footer .trending-articles .item a {
    color: inherit;
    text-decoration: none
}

#footer .trending-articles .item a:hover .accent {
    text-decoration: underline
}

#footer .trending-articles .item .heading {
    line-height: 125%;
    display: block;
    height: 80px;
    line-height: 20px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4
}

#footer .trending-articles .item .heading:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0
}

#footer .trending-articles .item img {
    float: left;
    margin-right: 10px;
    background: #EEE;
    vertical-align: bottom
}

#footer .trending-articles .more a {
    color: #FFF;
    display: block;
    transition: background 0.2s ease;
    -moz-transition: background 0.2s ease;
    -webkit-transition: background 0.2s ease;
    -o-transition: background 0.2s ease;
    -ms-transition: background 0.2s ease;
    padding: 10px
}

#footer .trending-articles .more a:hover {
    background: #FFF;
    color: var(--accent);
    text-decoration: none;
    text-shadow: none;
    -moz-text-shadow: none;
    -webkit-text-shadow: none;
    -o-text-shadow: none;
    -ms-text-shadow: none
}

body > img[width="1"] {
    position: absolute;
    left: -1px;
    top: -1px
}

.flash p {
    margin: 10px;
    padding: 10px;
    color: #FFF;
    font-size: 120%;
    font-weight: bold;
    cursor: pointer
}

.flash p a {
    text-decoration: underline !important;
    color: #FFF
}

.flash p strong {
    font-size: 120%
}

.flash p.info {
    background: var(--info)
}

#controller-bar {
    position: absolute;
    top: 0;
    right: 0
}

#controller-bar li {
    display: block;
    position: relative;
    height: 70px;
    float: left;
    transition: background 0.2s ease;
    -moz-transition: background 0.2s ease;
    -webkit-transition: background 0.2s ease;
    -o-transition: background 0.2s ease;
    -ms-transition: background 0.2s ease
}

#controller-bar li:hover {
    zoom:1;
    background: rgba(255,255,255,0.05)
}

#controller-bar a {
    color: #FFF
}

#controller-bar .ui-userinfo p.subtitle {
    padding-top: 5px;
    margin-right: 55px;
    font-size: smaller;
    color: #d5d5d5;
    font-weight: bold
}

#controller-bar .ui-userinfo a:hover {
    text-decoration: underline
}

#controller-bar .avatar img,#controller-bar .avatar svg {
    width: 46px;
    height: 46px;
    border-radius: 23px;
    -moz-border-radius: 23px;
    -webkit-border-radius: 23px;
    -o-border-radius: 23px;
    -ms-border-radius: 23px
}


img.lazy {
    transition: opacity 0.6s ease-out, transform 1.2s ease-out;
    -moz-transition: opacity 0.6s ease-out, transform 1.2s ease-out;
    -webkit-transition: opacity 0.6s ease-out, transform 1.2s ease-out;
    -o-transition: opacity 0.6s ease-out, transform 1.2s ease-out;
    -ms-transition: opacity 0.6s ease-out, transform 1.2s ease-out;
    will-change: opacity, visibility
}

img.lazy.is-visible {
    opacity: 1;
    filter: alpha(opacity = 100);
    zoom:1;visibility: visible
}

#quick-search {
    display: none;
    transition: background 0.2s ease;
    -moz-transition: background 0.2s ease;
    -webkit-transition: background 0.2s ease;
    -o-transition: background 0.2s ease;
    -ms-transition: background 0.2s ease;
    box-sizing: border-box;
    zoom:1;
    background: linear-gradient(90deg, rgb(199 65 129) 0%, rgb(34 187 209) 100%);
    padding: 1rem 0;
    white-space: nowrap
}

#quick-search .controls {
    position: relative;
    max-width: 1280px;
    background: #FFF;
    box-sizing: border-box;
    margin: 0 auto;
    background: linear-gradient(to bottom, rgba(200,200,200,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 35%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 )
}

#quick-search a {
    padding: 13px;
    color: #777
}

#quick-search a:hover {
    background: none;
    color: #FFF
}

#quick-search label {
    display: none
}

#quick-search .textbox {
    background: none;
    border: none;
    outline: none;
    height: 40px;
    padding: 10px;
    font-size: 16px;
    color: #111;
    width: 100%;
    box-sizing: border-box;
    text-align: center
}

@media screen and (min-width: 900px) {
    #quick-search {
        position:absolute;
        top: 100px;
        left: 0;
        right: 0;
        z-index: 101
    }

    #quick-search .icon {
        position: absolute;
        right: 10px;
        top: 10px;
        color: var(--accent)
    }

}

#quick-search.enabled {
    display: block
}


.container {
    margin-bottom: 25px
}

.container nav.ui-views .panels li a {
    display: inline-block;
    padding: 10px 13px;
    border-bottom: 1px solid var(--line);
    margin-bottom: -1px;
    font-weight: bold;
    color: var(--text-color-soft);
    text-decoration: none;
    transition: color 0.2s ease, border 0.2s ease;
    -moz-transition: color 0.2s ease, border 0.2s ease;
    -webkit-transition: color 0.2s ease, border 0.2s ease;
    -o-transition: color 0.2s ease, border 0.2s ease;
    -ms-transition: color 0.2s ease, border 0.2s ease
}

.container nav.ui-views .panels li a:hover {
    color: var(--accent)
}

.container .ui-listing-group-date .items {
    padding-bottom: 20px
}

.container .items {
    padding-top: 15px
}

.container .item {
    border-color: var(--line);
    position: relative
}

.container .item a {
    text-decoration: none
}

.container .item a:hover {
    text-decoration: underline
}

.container .item .heading a:hover {
    text-decoration: none
}

.container .item .heading a:hover .title {
    text-decoration: underline
}

.container .item .image {
    background-color: var(--line);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    transition: background-image 0.3s ease;
    -moz-transition: background-image 0.3s ease;
    -webkit-transition: background-image 0.3s ease;
    -o-transition: background-image 0.3s ease;
    -ms-transition: background-image 0.3s ease
}

.container .item .image img,.container .item .cover img {
    vertical-align: top
}

.container .item .image .img,.container .item .cover .img {
    display: block;
    width: 100%
}

.container .item .image .label,.container .item .cover .label {
    position: absolute;
    z-index: 115;
    top: 10px;
    right: 0;
    color: #FFF
}

.container .item .heading {
    font-size: 24px
}

.container .item .title {
    font-weight: bold;
    line-height: 125%
}

.container .item .description a {
    color: var(--text-color-softer)
}

.container .item .list {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-color-softer);
    font-size: 90%;
    line-height: 150%
}

.container .item .list a {
    color: inherit
}

.container .item .list li {
    border-left: 1px solid var(--line);
    padding: 0 7px;
    white-space: nowrap
}

.container .item .list li:first-child {
    padding-left: 0;
    border-left: none
}

.container .item .list a:hover {
    color: var(--text-color-soft)
}

.container .item .category {
    transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: none;
    -ms-transition: none;
    font-weight: bold
}

.container .item .ui-tools a {
    font-size: 20px;
    display: inline-block;
    padding: 5px;
    vertical-align: bottom;
    color: var(--text-color-softer);
    text-decoration: none
}


.container .item .category {
    font-size: 90%;
    padding-right: 10px;
    border-right: 1px solid var(--line);
}

.container .item .title {
    color: var(--text-color-normal)
}

.container .item .image .img {
    display: block;
    height: 100%
}

.container .item .cover {
    position: relative
}

.container .item .cover .img {
    display: block
}

.container .item .cover .img img {
    max-width: 100%;
    width: auto;
    height: auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    border-radius: 12px;
}

.container .item .image:hover .img:before {
    box-shadow: inset 0 0 25px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.5);
    -o-box-shadow: inset 0 0 25px rgba(0,0,0,0.5);
    -ms-box-shadow: inset 0 0 25px rgba(0,0,0,0.5)
}

.container .item .image .label,.container .item .cover .label {
    background: rgba(var(--accent-rgb),0.8);
    padding: 5px 15px;
    font-weight: bold
}


.container .item-game .image {
    position: relative
}

.container .style-list .item {
    display: block
}


@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}


.ui-listing-filters h2.heading {
    color: var(--text-color-soft);
    padding: 10px;
    border-bottom: 1px solid var(--line);
    font-weight: bold
}

.ui-listing-filters .ui-listing-filters-body {
    padding-top: 15px;
    background: var(--background)
}

.ui-listing-filters .heading .icon:last-child {
    float: right
}

.filters-disabled .ui-listing-filters-body {
    display: none
}

.filters-disabled .ui-listing-filters h2 {
    background: var(--bg-highlight)
}

.ui-listing-filter {
    padding-bottom: 15px
}

.ui-listing-filter h3.heading {
    padding: 10px;
    color: var(--text-color-soft);
    font-weight: bold;
    font-size: 15px;
    border-bottom: 1px solid var(--line)
}

.ui-listing-filter h3.heading:hover {
    cursor: pointer;
    background: var(--bg-offset)
}

.ui-listing-filter .ui-filter-search {
    border: 1px solid var(--line);
    padding: 5px 10px;
    color: var(--text-color-soft);
    box-sizing: border-box;
    width: 100%;
    outline: none;
    font-size: inherit;
    font-family: inherit;
    background: none;
    color: inherit
}


.ui-listing-filters .fm-fieldset legend,.ui-listing-filters .fm-checkboxgroup legend {
    font-weight: bold;
    font-size: smaller;
    padding: 5px;
    color: var(--text-color-soft);
    width: 100%;
    background: var(--bg-offset);
    box-sizing: border-box
}

.ui-listing-filters .fm-checkbox label {
    cursor: pointer
}

.ui-listing-filters .fm-checkbox label:hover {
    color: var(--text-color-normal)
}

.ui-listing-filters ul.tools li {
    display: block;
    padding: 5px 10px
}

.ui-listing-filters ul.tools a {
    font-family: sans-serif;
    font-size: smaller;
    color: var(--text-color-soft);
    text-decoration: none
}

.ui-listing-filters ul.tools a:hover {
    color: var(--text-color-normal)
}

.ui-listing-filter-collapse legend {
    display: none
}

@media screen and (min-width: 900px) {



    .container .style-list .item-high.item-1 .item-wrap {
        border-right: 1px solid var(--line)
    }

    .container .style-list .item-high.item-2 .item-wrap {
        padding: 0 0 0 15px
    }


    .container .style-list .item-medium {
        display: block;
        overflow: auto;
        border-top: 1px solid var(--line)
    }

    .container .style-list .item-medium .image {
        float: left;
        margin-right: 20px
    }

    .container .style-list .item-medium:first-child {
        padding-top: 0
    }

    .container .style-list .item:first-child {
        border-top: none
    }

    .container .style-list .item-low .info {
        margin-left: 142px
    }

    .container .style-list .item-low .heading {
        font-size: 19px;
        padding-bottom: 5px;
        line-height: 140%
    }

    .container .style-list .item-low .image {
        margin-top: 5px;
        width: 130px;
        height: 95px;
        float: left;
        overflow: hidden
    }

    .container .style-list .item-low .image .label {
        top: 0
    }

    .container .style-list .item-low .list {
        display: none
    }

    .container .style-tile.cols-3 .item,.container .style-tile.cols-4 .item {
        text-align: center
    }

    .container .style-tile.cols-3 .item ul,.container .style-tile.cols-4 .item ul {
        text-align: inherit
    }

    .container .style-tile.cols-3 .item .heading,.container .style-tile.cols-4 .item .heading {
        font-size: 18px
    }

    .container .style-tile.cols-3 .item .description,.container .style-tile.cols-4 .item .description {
        font-size: smaller
    }

    .container .style-tile.cols-3 .item .image img,.container .style-tile.cols-4 .item .image img {
        width: 100%;
        height: auto
    }

    .container .cols-3 .item-content {
        width: 33.3%;
        display: inline-block;
        vertical-align: top
    }

    .container .cols-3 .item-content:nth-child(-n+3) {
        border-top: none;
        padding-top: 0
    }

    .container .cols-4 .item.item-content {
        /*width: 32%;*/
        display: inline-block;
        vertical-align: top
    }

    .container .cols-4 .item.item-content:nth-child(-n+4) {
        border-top: none;
        padding-top: 0
    }

    .container .style-cover .item {
        background: var(--background);
        text-align: center
    }

    .container .style-cover .item .item-wrap {
        padding: 10px 10px 20px 10px
    }

    .container .style-cover .item ul {
        text-align: inherit
    }

    .container .style-cover .item .cover {
        height: 200px;
        line-height: 200px
    }

    .container .style-cover .item .cover img {
        height: auto;
        max-width: 90%;
        vertical-align: middle;
        width: 90%;
        aspect-ratio: 1 / 1;
        border-radius: 12px;
    }

    .container .style-cover .item .heading {
        font-size: 16px
    }

    .container .style-tile .item .subtitle,.container .style-cover .item .subtitle,.container .style-reviews .item .subtitle {
        color: var(--accent);
        font-size: smaller;
        border-left: 1px solid rgba(0,0,0,0.1);
        padding-left: 3px
    }

    .container .style-tile .item .release-dates li,.container .style-cover .item .release-dates li,.container .style-reviews .item .release-dates li {
        display: block
    }

    .container .style-reviews .item-content {
        padding: 20px 15px;
        box-sizing: border-box;
        border-top: 1px solid var(--line);
        text-align: center
    }

    .container .style-reviews .item-content .heading {
        font-size: 20px;
        padding-bottom: 5px
    }

    .container .style-reviews .item-content .cover {
        padding: 10px 0
    }

    .container .style-podcasts .item-content {
        width: 33%;
        box-sizing: border-box;
        padding: 30px 15px
    }

    .container .style-features .item-content {
        width: 33%;
        vertical-align: top;
        display: inline-block;
        box-sizing: border-box;
        padding: 30px 15px 30px 0
    }

    .container .style-features .item-content:first-child {
        padding-top: 0;
        border-top: none
    }

    .container .style-features .item-content:first-child,.container .style-features .item-content:nth-child(7n+1) {
        width: 100%;
        display: block;
        overflow: auto;
    }

    .container .style-features .item-content:first-child .heading,.container .style-features .item-content:nth-child(7n+1) .heading {
        font-size: 28px
    }

    .container .style-features .item-content:first-child .image,.container .style-features .item-content:nth-child(7n+1) .image {
        width: 450px;
        float: left
    }

    .container .style-features .item-content:first-child .info,.container .style-features .item-content:nth-child(7n+1) .info {
        margin-left: 465px;
        padding: 0
    }

    .container .style-list .item-high .image {
        overflow: hidden
    }

    .container .style-list .item-high .image img {
        width: 100%;
        height: auto
    }

    .container .style-tile .item .heading,.container .style-list .item-high .heading {
        padding: 5px 0;
        font-size: 28px
    }

    .container .style-tile .item .info,.container .style-list .item-high .info {
        padding: 5px 5px 0 5px
    }

    .container .style-list .item-medium .heading {
        padding-bottom: 5px;
        font-size: 26px
    }

    .container .style-list .item-medium .info {
        max-height: 158px;
        overflow: hidden
    }

    .container .style-list .item-medium .list {
        position: absolute;
        bottom: 30px;
        left: 265px;
        right: 0;
        margin-top: 5px
    }

    .container .style-list .item-medium .list a {
        color: #878787
    }

    .container .style-featured .item:first-child .heading {
        font-size: 175%
    }

    .container .style-featured .item:first-child .label {
        font-size: 125%;
        padding: 5px 20px
    }
}

.container .style-simple .item-content {
    background: var(--bg-offset)
}

.container .style-simple .item {
    display: block;
    margin-bottom: 15px;
    overflow: auto;
}

.container .style-simple .item .image {
    width: 150px;
    float: left;
    margin-right: 10px
}

.container .style-simple .item .info {
    margin-left: 160px;
    line-height: 110px
}

.container .style-simple .item .info .info-wrap {
    line-height: 100%;
    display: inline-block;
    vertical-align: middle;
    padding-right: 10px
}

.container .style-simple .item .heading {
    font-size: 16px;
    padding-top: 10px;
    padding: 5px 0 5px 0;
    word-break: break-word
}

.container .style-simple .item .list {
    display: none
}

.container .style-simple .item:last-child {
    margin-bottom: 0
}

@media screen and (max-width: 899px) {

    .with-filters:not(.filters-enabled) .ui-listing-filter {
        display: none
    }

    .ui-listing-filters h2.heading {
        background: var(--bg-highlight)
    }

    .filters-enabled .ui-listing-filters-body {
        background: var(--bg-offset);
        padding: 10px
    }

    .container .items .item {
        display: block
    }

    .container .items .item .image {
        position: relative
    }

    .container .items .item .image img {
        width: 100%;
        height: auto
    }

    .container nav.ui-views .panels li a {
        white-space: nowrap;
        margin-bottom: 0
    }

    .container .style-features .item,.container .style-video .item {
        padding: 20px 0 10px 0;
        display: block
    }

    .container .style-features .item {
        border-top: 1px solid var(--line)
    }

    .container .style-list .item-content,.container .style-list .item-high,.container .style-reviews .item-content,.container .style-reviews .item-high,.container .style-cover .item-content,.container .style-cover .item-high {
        display: block;
        clear: both;
        overflow: auto;
        padding: 1rem 0;
        border-bottom: 1px solid var(--line);
    }

    .container .style-list .item-content .image,.container .style-list .item-content .cover,.container .style-list .item-high .image,.container .style-list .item-high .cover,.container .style-reviews .item-content .image,.container .style-reviews .item-content .cover,.container .style-reviews .item-high .image,.container .style-reviews .item-high .cover,.container .style-cover .item-content .image,.container .style-cover .item-content .cover,.container .style-cover .item-high .image,.container .style-cover .item-high .cover {
        margin-top: 5px;
        width: 40%;
        max-width: 300px;
        height: auto;
        float: left;
        text-align: center
    }

    .container .style-list .item-content .image .label,.container .style-list .item-content .cover .label,.container .style-list .item-high .image .label,.container .style-list .item-high .cover .label,.container .style-reviews .item-content .image .label,.container .style-reviews .item-content .cover .label,.container .style-reviews .item-high .image .label,.container .style-reviews .item-high .cover .label,.container .style-cover .item-content .image .label,.container .style-cover .item-content .cover .label,.container .style-cover .item-high .image .label,.container .style-cover .item-high .cover .label {
        top: 0
    }

    .container .style-list .item-content .heading,.container .style-list .item-high .heading,.container .style-reviews .item-content .heading,.container .style-reviews .item-high .heading,.container .style-cover .item-content .heading,.container .style-cover .item-high .heading {
        padding: 0 0 5px 0;
        font-size: 16px;
        line-height: 150%
    }

    .container .style-list .item-content .subtitle,.container .style-list .item-high .subtitle,.container .style-reviews .item-content .subtitle,.container .style-reviews .item-high .subtitle,.container .style-cover .item-content .subtitle,.container .style-cover .item-high .subtitle {
        color: var(--accent);
        font-size: smaller;
        border-left: 1px solid rgba(0,0,0,0.1);
        padding-left: 3px
    }

    .container .style-list .item-content .release-dates,.container .style-list .item-high .release-dates,.container .style-reviews .item-content .release-dates,.container .style-reviews .item-high .release-dates,.container .style-cover .item-content .release-dates,.container .style-cover .item-high .release-dates {
        font-size: smaller;
        line-height: 150%
    }

    .container .style-list .item-content .release-dates .region,.container .style-list .item-high .release-dates .region,.container .style-reviews .item-content .release-dates .region,.container .style-reviews .item-high .release-dates .region,.container .style-cover .item-content .release-dates .region,.container .style-cover .item-high .release-dates .region {
        color: #999;
        font-size: 90%
    }

    .container .style-list .item-content .release-dates li,.container .style-list .item-high .release-dates li,.container .style-reviews .item-content .release-dates li,.container .style-reviews .item-high .release-dates li,.container .style-cover .item-content .release-dates li,.container .style-cover .item-high .release-dates li {
        display: block
    }
}

.block {
    margin-bottom: 30px
}

.block .widget-header {
    background: var(--bg-offset);
    border-bottom: 1px solid var(--line)
}

.block .widget-header p {
    padding: 10px;
    font-weight: bold
}

.block .widget-header .actions {
    float: right;
    padding: 6px 7px 0 0
}

.block .widget-header .actions a {
    display: inline-block;
    padding: 3px 12px;
    border: 3px solid #FFF;
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
    font-size: 90%;
    margin-left: 8px
}

.block .widget-header .actions a:hover {
    background: #FFF;
    color: var(--accent)
}

.block footer .more a {
    display: block;
    text-align: center;
    padding: 10px;
    color: var(--text-color-soft);
    font-weight: bold;
    text-decoration: none;
    transition: background 0.1s ease;
    -moz-transition: background 0.1s ease;
    -webkit-transition: background 0.1s ease;
    -o-transition: background 0.1s ease;
    -ms-transition: background 0.1s ease
}

.block footer .more a:hover {
    background: var(--accent);
    color: #FFF
}

.block footer .more a .icon {
    font-size: larger;
    vertical-align: text-top;
    padding: 0 5px
}

.block footer .more-2 a,.block footer .more-3 a,.block footer .more-4 a,.block footer .more-5 a {
    display: inline-block;
    box-sizing: border-box;
    border-right: 1px solid rgba(0,0,0,0.05)
}

.block footer .more-2 li:last-child a,.block footer .more-3 li:last-child a,.block footer .more-4 li:last-child a,.block footer .more-5 li:last-child a {
    border-right: none
}

.block footer .more-2 a {
    width: 50%
}

.block footer .more-3 a {
    width: 33.3%
}

.block footer .more-4 a {
    width: 25%
}

.block footer .more-5 a {
    width: 20%
}

@media screen and (max-width: 899px) {
    .block footer .more-3 a,.block footer .more-4 a,.block footer .more-5 a {
        width:50%
    }
}

.block .widget-header p,.block .widget-header h1,.block .widget-header h2 {
    color: #FFF;
    border: none;
    padding: 10px 15px;
    margin: 0
}

.block .widget-header p a,.block .widget-header h1 a,.block .widget-header h2 a {
    color: #FFF;
    text-decoration: none
}

.block .widget-header p a:hover,.block .widget-header h1 a:hover,.block .widget-header h2 a:hover {
    text-decoration: underline
}

.block.number-list .item .heading {
    margin-left: 50px
}

.block.podcast .container {
    margin-bottom: 0
}

@keyframes shake {
    10%,90% {
        transform: translate3d(-1px, 0, 0)
    }

    20%,80% {
        transform: translate3d(2px, 0, 0)
    }

    30%,50%,70% {
        transform: translate3d(-4px, 0, 0)
    }

    40%,60% {
        transform: translate3d(4px, 0, 0)
    }
}

.social-links ul li {
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
    text-align: center;
    padding-top: 10px
}

.social-links ul li a {
    display: block;
    padding: 15px 0px;
    background: #1da1f2;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    line-height: 24px
}

.social-links ul li a .icon {
    display: inline-block;
    width: 74px;
    font-size: 64px;
    vertical-align: middle
}

.social-links ul li:nth-child(2),.social-links ul li:nth-child(4) {
    padding-left: 10px
}

#featured-home .widget-header {
    display: none
}

.block.number-list .item {
    line-height: 125%;
    transition: background 0.25s ease;
    -moz-transition: background 0.25s ease;
    -webkit-transition: background 0.25s ease;
    -o-transition: background 0.25s ease;
    -ms-transition: background 0.25s ease
}

.block.number-list .item .heading {
    font-size: 12pt;
    min-height: 2em;
    font-weight: bold
}

.block.number-list .item .title {
    color: var(--text-color-normal);
    text-decoration: none;
    padding: 12px 10px 12px 0;
    display: block
}

.block.number-list .item .category {
    text-transform: uppercase;
    border-right: 1px solid var(--line-hard);
    padding-right: 5px
}

.block.number-list .item:nth-child(even) {
    background: var(--bg-offset)
}

.block.number-list .item:hover {
    background: var(--bg-highlight)
}

#listing-featured-reviews .try-swiper .items,#listing-videos .try-swiper .items {
    padding: 0
}

#listing-featured-reviews .try-swiper .item:not(:first-child),#listing-videos .try-swiper .item:not(:first-child) {
    position: absolute;
    left: -9999px
}

.block .swiper-container {
    position: relative;
    overflow: hidden
}

@media screen and (max-width: 899px) {

    .container .try-swiper .item:not(:first-child) {
        position: absolute;
        left: -9999px
    }

    .container .style-featured .item .heading,.container .style-slide .item .heading {
        font-size: 150%
    }

    .container .style-featured .item .label,.container .style-slide .item .label {
        font-size: 125%;
        padding: 5px 20px
    }

    .container .style-featured .item .info,.container .style-slide .item .info {
        padding-top: 50px
    }

}

.block.posts .item {
    padding: 10px;
    border-bottom: 1px solid var(--line);
}

.block.posts .item .info {
    line-height: 60px;
    margin-left: 70px
}

.block.posts .item .info .info-wrap {
    line-height: 100%;
    display: inline-block;
    vertical-align: middle
}

.block.posts .item .info strong {
    color: var(--text-color-soft)
}

.block.posts .item .info .heading {
    padding-bottom: 2px;
    line-height: 120%;
    font-weight: bold
}

.block.posts .item .title {
    color: var(--text-color-normal);
    text-decoration: none
}

.block.posts .item .title:hover {
    text-decoration: underline
}

.block.posts .item .image {
    width: 60px;
    padding-right: 10px;
    float: left
}

.block.posts .item .image img {
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -o-border-radius: 30px;
    -ms-border-radius: 30px
}

.block.posts .item:nth-child(even) {
    background: var(--bg-offset)
}

.block.events .item .heading {
    padding-bottom: 2px;
    line-height: 120%;
    font-weight: 700
}

.images-avatar img {
    background: var(--bg-avatar)
}

#game-overview .buttons a,.overview .buttons a {
    color: var(--accent)
}

#game-overview .cover,.overview .cover {
    float: right;
    margin-top: 1px;
    background: transparent;
    zoom:1;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000);
    background: rgba(0,0,0,0.1);
    padding: 8px
}

#game-overview .cover img,.overview .cover img {
    vertical-align: bottom
}

#game-overview .item,.overview .item {
    padding: 8px 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: smaller;
    color: #FFF
}

#game-overview .item .definition-items li,.overview .item .definition-items li {
    display: block
}

#game-overview .item a,.overview .item a {
    text-decoration: none;
    color: #FFF
}

#game-overview .item a:hover,.overview .item a:hover {
    text-decoration: underline
}

#game-overview .item .credit li,.overview .item .credit li {
    flex-grow: 1
}

#game-overview .item .credit a,.overview .item .credit a {
    display: block;
    background: transparent;
    zoom:1;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);
    background: rgba(0,0,0,0.3);
    font-weight: bold;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -o-text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -ms-text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -o-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -ms-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    text-decoration: none
}

#game-overview .item .credit a:hover,.overview .item .credit a:hover {
    background: #FFF;
    color: var(--accent);
    text-shadow: none;
    -moz-text-shadow: none;
    -webkit-text-shadow: none;
    -o-text-shadow: none;
    -ms-text-shadow: none
}

#game-overview .item .credit.eshop a,.overview .item .credit.eshop a {
    background: #F79131
}

#game-overview .item .credit.eshop a:hover,.overview .item .credit.eshop a:hover {
    background: #FFF;
    color: #F79131
}

#game-overview .buttons li,.overview .buttons li {
    padding: 10px 0 0 0;
    display: block
}

#game-overview .buttons a,.overview .buttons a {
    display: block;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    text-align: center;
    color: var(--accent);
    font-weight: bold;
    padding: 10px;
    text-decoration: none !important;
    font-size: 125%;
    transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -webkit-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    -ms-transition: background 0.3s ease;
    background: #FFF
}

#game-overview .buttons a code,.overview .buttons a code {
    display: inline-block;
    zoom:1;
    background: rgba(0,0,0,0.05);
    padding: 2px 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px
}

#game-overview .buttons a .icon,.overview .buttons a .icon {
    vertical-align: middle
}

#game-overview .buttons a:hover,.overview .buttons a:hover {
    background: #F79131 !important;
    color: #FFF
}

.ccmsForm input,.ccmsForm textarea {
    font-family: inherit;
    font-size: inherit
}

.ccmsForm textarea {
    padding: 10px;
    line-height: 150%;
    width: 100%
}

.ccmsForm .fm-tabbed .fm-tabs .current a {
    background: var(--accent)
}

span.icon:before,time.icon:before,a.icon:before {
    font-family: 'nlifecms' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}


.icon-search:before {
    content: "\f002"
}

.icon-bars:before {
    content: "\f05e"
}

.icon-caret-down:before {
    content: "\f0d7"
}

.icon-caret-up:before {
    content: "\f0d8"
}

.icon-caret-left:before {
    content: "\f0d9"
}

.icon-cross:before {
    content: "\e937"
}

.insert.centered div,.insert.centered iframe,.for-mobile div,.for-mobile iframe {
    margin: 0 auto 0 auto
}

.insert.with-label > div:before,#portrait .insert > div:before,.container .item-insert > div:before {
    content: "Advert";
    display: block;
    padding: 5px;
    text-align: center;
    color: var(--text-color-softer);
    font-size: smaller;
    text-transform: uppercase
}


.container .item-insert div {
    margin: 0 auto
}

.skin iframe,.skin-long iframe {
    background: none
}

.skin.with-hero .content-wrapper .inset,.skin-long.with-hero .content-wrapper .inset {
    width: auto
}

.article .article-header .insert-mobile-sticky > div {
    position: sticky;
    top: 20px
}

.article .insert-extended.insert-label.for-mobile > div {
    top: 35px
}

.insert.spaced > div,.spaced > div {
    position: sticky;
    top: 150px
}

@media screen and (min-width: 850px) {

    .skin-long .cols.standard .col-2 .for-desktop {
        margin-bottom: 15px
    }

    .skin-long section.block {
        clear: both
    }
}

#sticky_leaderboard #sticky_leader_close .icon {
    vertical-align: middle;
    font-weight: 700;
    font-size: 22px
}

#sticky_leaderboard #sticky_leader_close .icon:before {
    content: "\f00d"
}

body {
    --accent-bg: linear-gradient(90deg, rgba(244,53,144,1) 0%, rgba(2,223,254,1) 100%)
}

#template {
    background: none
}

@keyframes spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

html.dark,#header {
    --background: #012231;
    --soft-bg: #042F42;
    --bg-offset: #042F42;
    --bg-highlight: #042F42
}

html.dark .page {
    background-color: #012231
}

.page {
    background-color: #EEE
}

@media screen and (min-width: 900px) {
    html.dark .page {
        background-position: top center
    }

    .page {
        background-position: top center
    }
}

body {
    background: var(--background)
}

body.noscroll {
    touch-action: none;
    overflow: hidden;
    overscroll-behavior: none
}

article.article .section-title .tags a {
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px
}

#header {
    z-index: 20000;
    background: var(--accent);
    background: var(--accent-bg);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5)
}

html.scanlines .header-bar:after,html.scanlines .header-bar .bg:after,html.scanlines .fancybox-content:before,html.scanlines .hero-wrap .background:before,html.scanlines .style-coverflow .swiper-slide:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    z-index: -1
}

.header-wrap .ui-menus > .accent-bg {
    background: none !important
}

.site-title img,.site-title svg {
    filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.3))
}

@media screen and (min-width: 900px) {
    .hero .hero-title .image {
        background:transparent;
        zoom:1;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccf43590,endColorstr=#ccf43590);
        background: rgba(244,53,144,0.8);
        padding: 10px
    }

    .header .header-bar {
        max-width: 968px;
        margin: 0 auto;
        min-height: 100px;
        display: inline-block
    }
}

.block .widget-header {
    border-bottom: none
}

.block .widget-header h1,.block .widget-header h2,.block .widget-header p {
    background-color: var(--accent);
    background: var(--accent-bg);
    color: #FFF;
    text-transform: uppercase;
    font-size: 17px
}

.block .widget-header h1 span,.block .widget-header h1 .accent,.block .widget-header h2 span,.block .widget-header h2 .accent,.block .widget-header p span,.block .widget-header p .accent {
    color: inherit !important
}

.block .widget-header h1 > .icon,.block .widget-header h2 > .icon,.block .widget-header p > .icon {
    float: right;
    font-size: 125%
}

.article-text .text p,.article-text .text > ul,.article-text .text > ol {
    font-size: 17px;
    line-height: 175%
}

.article-text .text blockquote p {
    font-size: 18px
}

.article .title .tags a {
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px
}

.article .article-header .insert-label.for-mobile .default > span,.article .body-text .insert-label.for-mobile .default > span {
    zoom:1;
    background: rgba(255,255,255,0.05)
}

@media screen and (max-width: 899px) {

    .site-main #header.fixed .header-bar {
        background: var(--accent-bg);
        z-index: 20001
    }

    .header-bar {
        z-index: 20001
    }

    .header-bar:after {
        height: 66px
    }

    .body-text {
        font-size: 115%
    }

    article.article section.title {
        padding: 10px 10px 20px 10px
    }

    article.article section.title h1.title {
        line-height: 125%;
        font-size: 150%;
        padding: 10px 0
    }

    .article-text .text p {
        font-size: inherit;
        line-height: 170%
    }

    .container .style-list {
        padding: 0 0 20px 0
    }

    .container .style-list .item-content .image {
        width: 100%;
        max-width: none;
        float: none
    }

    .container .style-list .item-content .info {
        margin-left: 0;
        padding: 10px 0 0 0
    }

    .container .style-list .item-content .heading {
        font-size: 150%
    }

    .container .style-list .item-content .list {
        padding-top: 10px;
        overflow: auto;
        text-overflow: initial;
        width: 100%
    }
}

.swiper-container {
    position: relative;
    overflow: hidden;
    --swiper-pagination-bullet-inactive-color: #FFF;
    --swiper-pagination-color: var(--accent)
}

@media screen and (min-width: 900px) {
    .header-fixed #header {
        position:fixed;
        top: 0;
        left: 0;
        right: 0
    }

    .header-fixed #template {
        padding-top: 140px
    }
}

@keyframes reveal-from-left {
    0% {
        opacity: 0;
        filter: alpha(opacity = 0);
        zoom:1;transform: translateX(50%)
    }

    100% {
        opacity: 1;
        filter: alpha(opacity = 100);
        zoom:1;transform: translateX(0)
    }
}

@keyframes reveal-from-right {
    0% {
        opacity: 0;
        filter: alpha(opacity = 0);
        zoom:1;transform: translateX(-50%)
    }

    100% {
        opacity: 1;
        filter: alpha(opacity = 100);
        zoom:1;transform: translateX(0)
    }
}

.container .style-list .item .info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-flow: column;
    justify-content: center;
    width: 100%;
}

.container .style-list .item .heading {
    padding: 0
}

.container .style-list .item .comments > *:not(:first-child) {
    border-left: 1px solid var(--line);
    padding-left: 10px;
    margin-left: 10px
}

.container .style-list .item .comments a {
    color: inherit;
    font-weight: bold
}

.container .style-list .item .comments a:hover {
    color: var(--accent);
    text-decoration: none
}

@media screen and (min-width: 900px) {
    .container .style-list .item-medium .item-wrap,.container .style-list .item-high .item-wrap {
        display:flex;
        align-items: center
    }

    .container .style-list .item-medium .item-wrap .image,.container .style-list .item-high .item-wrap .image {
        float: none
    }

    .container .style-list .item-medium .list,.container .style-list .item-high .list {
        position: static
    }

    .container .style-list .item-medium .info,.container .style-list .item-high .info {
        max-height: none;
        max-width: 100%
    }

    .container .style-list .item-medium .info .list,.container .style-list .item-high .info .list {
        width: 100%
    }

    .container .style-list .item-high .item-wrap {
        flex-wrap: wrap
    }

    .container .style-list .item-high .image {
        width: 100%
    }

    .container .style-list .item-medium .heading,.container .style-list .item-high .heading {
        font-size: 28px
    }
}

@media screen and (min-width: 900px) {

    article.article .body-text {
        clear: both
    }

    .body-text dl {
        display: grid;
        grid-template-columns: min-content auto
    }

    .body-text dl dt {
        grid-column: 1;
        min-width: 160px
    }

    .body-text dl dd {
        grid-column: 2;
        padding-left: 30px
    }

    .ui-topics-list ul {
        margin-right: -15px
    }

    .ui-topics-list ul li {
        float: left;
        width: 48%;
        margin: 0 15px 15px 0
    }

    .block.featured .container {
        margin-bottom: 0
    }
}

@media screen and (max-width: 1300px) {

    #header #menu {
        text-align: center
    }
}

@media screen and (max-width: 899px) {
    #footer {
        padding: 1px 0 0 0
    }

    #footer .trending-articles .item {
        display: none
    }

    #footer .textbox {
        max-width: 50%
    }

    #submenus .submenu .inset {
        padding: 15px
    }

    #submenus .submenu .inset ul {
        padding: 0 10px
    }

    #submenus .submenu .inset ul:first-child {
        padding-top: 10px
    }

    #submenus .submenu .inset ul:last-child {
        padding-bottom: 10px
    }

    .inset {
        width: auto
    }

    #header.fixed .header-bar {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 1002
    }

    #quick-search-results p.actions {
        display: none
    }

    #controller-bar {
        display: none
    }

    .content {
        padding: 10px
    }

    .content .article section.text .picture .swiper-container {
        padding: 0;
        box-sizing: border-box
    }

    .content .article section.text iframe {
        max-width: 100%
    }

    .comments#reply form#comment textarea {
        padding-right: 35px
    }

    .comments#reply .select-user img {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -o-border-radius: 4px;
        -ms-border-radius: 4px
    }

    .block:last-child {
        margin-bottom: 0
    }
}

article.article section.title {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 10px
}

article.article section.title .title {
    font-size: 200%;
    line-height: 125%
}

article.article section.title .title a {
    text-decoration: none;
    color: inherit
}

article.article section.title .title a.accent:hover {
    text-decoration: underline
}

.article-text p {
    padding-bottom: var(--text-spacer);
    margin-top:1rem;
}

.article-text a {
    text-decoration: none
}

.article-text a:hover {
    text-decoration: underline
}

.article-text ul {
    padding: 0 10px 15px 20px
}

.article-text ol {
    padding: 0 10px 15px 30px
}

.article-text ul,.article-text ol {
    line-height: 150%
}

.article-text ul li,.article-text ol li {
    display: list-item;
    padding-bottom: 10px
}

.article-text ul ul,.article-text ul ol,.article-text ol ul,.article-text ol ol {
    padding: 10px 0 0 20px
}

.article-text ul li {
    list-style-type: disc
}

.article-text ol li {
    list-style-type: decimal
}

.article-text ol li ol li {
    list-style-type: lower-alpha
}

.article-text ul.paginate li {
    display: inline
}

.article-text table {
    border: 1px solid var(--line);
    background: var(--background);
    border-collapse: collapse;
    margin: 0 auto var(--text-spacer) auto
}

.article-text table th {
    background: var(--bg-highlight);
    padding: 10px 15px;
    font-size: 90%
}

.article-text table td {
    border: 1px solid var(--line);
    padding: 10px
}

.article-text table td p {
    padding-bottom: 10px;
    font-size: inherit !important
}

.article-text table td p:last-child {
    padding-bottom: 0
}

.body-text {
    line-height: 150%
}

.body-text h3 {
    border-bottom: 2px solid var(--line);
    margin-bottom: 10px
}

.body-text h4,.body-text h5,.body-text h6 {
    margin-bottom: 10px
}

.body-text dl {
    padding-bottom: 15px
}

.body-text dl dt {
    padding-top: 5px;
    font-weight: bold
}

.body-text dl dt:after {
    content: ":"
}

.body-text dl dd {
    padding-top: 5px
}

.body-text dl dd p {
    font-weight: bold;
    padding-bottom: 0 !important
}

.body-text dl dd ul {
    padding: 0
}

.body-text dl dd ul li {
    list-style-type: none;
    padding: 0
}

.body-text dl dd p:not(:first-child) {
    padding-top: 10px
}

.body-text h2 {
    font-size: 180%;
    padding: 10px;
    border-bottom: 2px solid var(--line);
    margin-bottom: 15px;
    margin-top: var(--text-spacer);
    line-height: 125%
}

.body-text h3 {
    font-size: 150%;
    line-height: 125%;
    padding: 10px 0 15px 0
}

.body-text h4,.body-text h5,.body-text h6 {
    line-height: 125%;
    font-size: 125%;
    padding: 10px 0 10px 0
}

.body-text hr {
    background: var(--line);
    height: 2px;
    border: none;
    padding: 0 25px;
    margin-top: 15px;
    margin-bottom: 30px
}

.body-text .ctrl span {
    display: none
}

@media screen and (min-width: 900px) {
    .article section.title h1.title {
        font-size:300%
    }
}

@media screen and (max-width: 899px) {
    .article section.title h1.title {
        line-height:110%
    }

    .body-text dl dd {
        padding-left: 5px
    }
}

.block .article section.title {
    margin: 0;
    padding: 10px 0
}

.article-page .body-text {
    padding-top: 15px
}

.article-page .heading {
    clear: both
}

.error-page .body p {
    padding-top: 15px;
    line-height: 150%
}

.error-page .title[data-code] h1:after {
    content: "(" attr(data-code) ")";
    font-size: 50%;
    color: var(--text-color-softer);
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle
}

.error-page .error-message .actions {
    float: right
}

.error-page .error-message p {
    line-height: 125%;
    padding-bottom: 15px
}

.article-page .article-text > .text > p:first-child {
    font-size: 120%;
    line-height: 150%;
    font-weight: bold
}

.container .items{
    display:grid;
}

.game-list{
    display:grid;
    gap:1rem;
}

@media screen and (max-width: 900px) {
    .container .items{
        grid-template-columns: repeat(1,minmax(0,1fr));
    }
}

@media screen and (min-width: 900px) {
    .container .items{
        grid-template-columns: repeat(4,minmax(0,1fr));
    }

    .game-list{
        grid-template-columns: repeat(4,minmax(0,1fr));
    }

    .with-filters:not(.filters-disabled) .ui-listing-filters {
        width: 185px;
        float: left;
        position: sticky;
        top: 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 900px) {
    .cover img{
        width:170px;
        aspect-ratio: 1 / 1;
    }

    .game-list{
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}

@media screen and (min-width: 568px) and (max-width: 768px) {
    .cover img{
        width:140px;
        aspect-ratio: 1 / 1;
    }

    .game-list{
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

}

@media screen and (max-width: 568px) {
    .container .items{
        grid-template-columns: repeat(1,minmax(0,1fr));
    }

    .game-list{
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .item-wrap{
        display: flex;
        align-items: center;
    }

    .cover{
        width: 100%;
        float: none!important;
        margin-right: 1rem;
    }

    .cover img{
        width:110px;
        aspect-ratio: 1 / 1;
    }

    .desc-preview{
        display:-webkit-box!important;
    }

}

.desc-preview{
    font-size: 14px;
    color: #a6a5a5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none;
}

.title{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.cover img{
    border-radius: 12px;
}

.info{
    overflow:hidden;
}

.main-menu-item img{
    width:32px;
    height:32px;
    margin: auto;
}

.heading img{
    width:16px;
    height:16px;
    margin-right:5px;
}

.game-item-main{
    display:flex;
    align-items:center;
    justify-content: center;
    flex-flow: column;
    background: #333131;
    padding: 5px 10px;
}

.game-item-img img{
    width: 100%;
    aspect-ratio: 4 / 2.25;
    border-radius: 12px;
    border: none;
}

.game-item-title{
    color: #fff;
    margin: 5px auto;
    font-weight: 1000;
    width: 100%;
}

a{
    text-decoration: auto;
}

.style-list{
    margin-top: 1rem;
}

.alike-list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1rem 0;
    gap: 1rem;
}

.alike-item a img{
    width:100%;
    height:100%;
    aspect-ratio: 4 / 2.25;
    border-radius: 10px;
}

@keyframes btnScale {
    0% {
        transform: scale(.92);
    }
    100% {
        transform: scale(1.08);
    }
}

.play-btn{
    animation: btnScale 1s ease-in-out infinite alternate;
    padding: 1rem;
    background: #f43590;
    width: 100%;
    max-width: 300px;
    margin: 2rem auto 1rem;
    border-radius: 12px;
    border: none;
}

.play-btn a{
    font-weight:1000;
    font-size:2rem;
    line-height: 2rem;
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-info-img{
    width:100%;
    /*max-width:300px;*/
    max-height:250px;
    border-radius:10px;
}

@media screen and (max-width: 680px) {
    .alike-list{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media screen and (min-width: 768px) {
    .info-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media screen and (max-width: 768px){
    .style-list{
        padding:0!important;
    }

    .play-btn{
        margin: .5rem auto;
    }

    .margin-0{
        margin: 0;
    }
}

.alike-item{
    position:relative;
}

.alike-title{
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: #fff;
    background: rgba(117, 115, 115, 0.4);
    position: absolute;
    bottom: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    border-radius: 0px 0px 10px 10px;
}


.width-100{
    width:100%;
    text-align:center;
}

.accent-hover{
    font-weight: bold;
    line-height: 125%;
    color: var(--text-color-normal);
}

.color-a{
    color: #abaaaa;
}


.desc-info{
    display: -webkit-box;
    -webkit-line-clamp: 12;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}