@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root
{
 --site-width: 1280px;

 --color-bg: #f0f0f0;
 --color-black: #111;
 --color-text: #111;
 --color-text-gray: #888;
 --color-main: #bcd9f1;
 --color-secondary: #f60;
 --color-link: #33c;
 --color-link-hover: #f60;
 --color-footer-bg: #888;
 --color-button: #fff;
 --color-header-bg: #bcd9f1;
 --color-blue: #bcd9f1;
 --color-lightblue: #d6ecff;
 --color-orange: #f60;
 --color-green: #161;
 --color-red: #b33;
}

.dark-mode
{
 --color-bg: #111;
 --color-black: #111;
 --color-text: #f8f8f8;
 --color-text-gray: #888;
 --color-main: #bcd9f1;
 --color-secondary: #f60;
 --color-link: #90bae1;
 --color-link-hover: #f60;
 --color-footer-bg: #888;
 --color-blue: #6295c4;
 --color-lightblue: #90bae1;
}

*
{
 box-sizing: border-box;
}

::selection
{
 background-color: var(--color-main);
 color: var(--color-black);
}

.splide__list {height: auto !important;}
.splide__slide img {width: 100%;}

body
{
 margin: 0;
 padding: 106px 0 0 0;
 font-family: 'Open Sans', sans-serif;
 font-size: 1.1rem;
 line-height: 1.4em;
 color: var(--color-text);
 background-color: var(--color-bg);
}

h1, h2, h3, h4
{
 font-family: 'Barlow Condensed', serif;
 line-height: 1.7em;
}

h1
{
 font-size: 4rem;
 font-weight: 700;
 line-height: 1em;
 margin: 0 0 .5em 0;
}

h1.index
{
 font-size: 3rem;
 margin-top: 0;
}

h2
{
 font-weight: 500;
 font-size: 3rem;
}

h3
{
 font-weight: 500;
 font-size: 2rem;
 margin-bottom: .5em;
 line-height: 1.3em;
}

a
{
/* text-decoration: underline dotted;*/
 text-decoration: none;
 color: var(--color-link);
}

a:hover
{
 color: var(--color-link-hover);
}

.cursor-pointer
{
 cursor: pointer;
}

.desktop-only
{
  visibility: visible;
}

.mobile-only
{
 visibility: hidden;
}

article a
{
/* text-decoration: underline;*/
}

article p a:hover
{
 background-color: var(--color-orange);
 color: #fff;
 text-decoration: none;
}

article h3
{
 margin: .5em 0;
}

article ul,
article ol,
ul.list
{
 padding-left: 1.5em;
}

article ul,
ul.list
{
 list-style: none;
}

article ul li::before,
ul.list li::before
{
 content: "\25A0";
 color: var(--color-orange);
 display: inline-block;
 width: 1em;
 margin-left: -1em;
}

.content-keywords li:before
{
 content: "";
}

h1 > a, h2 > a, h3 > a
{
 text-decoration: none;
 color: inherit;
}

h1 > a:hover, h2 > a:hover, h3 > a:hover
{
 color: inherit;
}

p
{
 margin: 1em auto;
}

p, ul, ol, blockquote
{
 line-height: 1.7em;
}

button
{
 cursor: pointer;
}

button:disabled
{
 cursor: default;
}

input, textarea
{
 font-family: 'Open Sans', sans-serif;
 outline: 0;
}

.dark-mode input,
.dark-mode textarea
{
 background-color: #f8f8f8;
}

.clr
{
 clear: both;
}

.center
{
 text-align: center;
}

.right
{
 text-align: right;
}

.left
{
 text-align: left;
}

.float-right
{
 float: right;
}

.float-left
{
 float: left;
}

.small
{
 font-size: .85em;
}

.strong
{
 font-weight: bold;
}

s
{
 text-decoration: line-through;
}

.nomargin
{
 margin: 0;
}

.gray
{
 color: var(--color-text-gray);
}

.button
{
 display: inline-block;
 background-color: var(--color-secondary);
 color: var(--color-button);
 border: 0;
 padding: 10px 30px;
 text-transform: uppercase;
 cursor: pointer;
 outline: 0;
}

.button:hover
{
 opacity: .9;
 color: inherit;
 text-decoration: none;
 color: #000;
}

.button:disabled
{
 background-color: #ccc;
 opacity: 1;
}

.text-button
{
 cursor: pointer;
 display: inline-block;
 font-weight: bold;
 letter-spacing: 0.04em;
 text-decoration: none;
 text-transform: uppercase;
 color: var(--color-secondary);
 padding: 5px;
 border: 0;
 background: none;
 outline: 0;
}

.text-button:hover
{
 background-color: var(--color-text-gray);
 color: #fff;
 text-decoration: none;
}

.text-button-small
{
 font-size: .7rem;
}

#msg
{
 position: absolute;
 top: 0;
 width: 100%;
 height: 80px;
 padding: 20px 10px 10px 10px;
 background-color: #f60;
 color: #fff;
 text-align: center;
 cursor: pointer;
 opacity: .9;
}

#search
{
 position: absolute;
 top: 0;
 width: 100%;
 height: 103px;
 padding: 40px 20px 20px 20px;
 background-color: #f60;
 color: #fff;
 text-align: center;
 -webkit-box-shadow: 0 8px 4px -4px gray;
 -moz-box-shadow: 0 8px 4px -4px gray;
 box-shadow: 0 8px 4px -4px gray;
 z-index: 1000;
 display: none;
}

#search:after
{
 content: '\00d7';
 font-size: 26px;
 position: absolute;
 top: 5px;
 right: 10px;
 cursor: pointer;
}

#search form
{
 display: inline-block;
}

#search input
{
 width: 30em;
 font-size: 1em;
 max-width: 70%;
 padding: 5px;
 border: 0;
 outline: 0;
}

#search select
{
 vertical-align: bottom;
 font-size: 1em;
 padding: 6px 5px;
 border: 0;
 outline: 0;
}

#search button
{
 background-color: transparent;
 border: 0;
 outline: 0;
}

header
{
 width: 100%;
 height: 106px;
 position: fixed;
 top: 0;
 transition: top .5s;
 background-color: var(--color-header-bg);
 border-bottom: 3px solid var(--color-orange);
 margin-bottom: 10px;
 overflow: hidden;
 z-index: 1000;
}

header.hidden
{
 top: -106px;
}

#header-25
{
 font-size: 14px;
 font-weight: bold;
 text-align: center;
 background-color: var(--color-orange);
 color: #fff;
 text-transform: uppercase;
 height: 23px;
}

#header-content
{
 max-width: var(--site-width);
 margin: 0 auto;
 padding: 10px 20px;
}

#menu-h
{
 display: none;
}

#logo
{
 display: inline-block;
 vertical-align: middle;
 width: 120px;
 height: 60px;
 background-image: url(../img/playdome-logo-2023-400x200.png);
 background-repeat: no-repeat;
 background-size: 100%;
}

#header-theme
{
 float: right;
 cursor: pointer;
 display: inline-block;
 width: 24px;
 height: 24px;
 background-color: #333;
 margin-top: 16px;
 -webkit-mask-image: url(../img/icon-theme.svg);
 mask-image: url(../img/icon-theme.svg);
}

#header-search
{
 float: right;
 cursor: pointer;
 display: inline-block;
 width: 24px;
 height: 24px;
 margin-left: 10px;
 margin-top: 16px;
 background-color: #333;
 -webkit-mask-image: url(../img/icon-search.svg);
 mask-image: url(../img/icon-search.svg);
}

#header-profile
{
 float: right;
 cursor: pointer;
 display: inline-block;
 width: 24px;
 height: 24px;
 margin-left: 10px;
 margin-top: 16px;
 background-color: #333;
 -webkit-mask-image: url(../img/icon-profile.svg);
 mask-image: url(../img/icon-profile.svg);
}

#header-profile.logged-in
{
 background-color: var(--color-orange);
}

#header-pm
{
 float: right;
 cursor: pointer;
 display: inline-block;
 width: 24px;
 height: 24px;
 margin-left: 10px;
 margin-top: 16px;
 background-color: #333;
 -webkit-mask-image: url(../img/icon-pm.svg);
 mask-image: url(../img/icon-pm.svg);
}

#header-pm.active
{
 background-color: var(--color-orange);
 animation: pm-pulse 4s ease-in-out infinite;
}

@keyframes pm-pulse
{
 0% {background-color: #333;}
 30% {background-color: var(--color-orange);}
 70% {background-color: var(--color-orange);}
 100% {background-color: #333;}
}

.dark-mode #header-theme
{
 background-color: var(--color-orange);
}

nav#menu
{
 display: inline-block;
 vertical-align: middle;
 font-family: 'Barlow Condensed', sans-serif;
 font-size: 20px;
}

nav#menu > ul
{
 list-style: none;
 line-height: 1em;
}

nav#menu > ul > li
{
 display: inline-block;
 margin-right: 10px;
}

nav#menu a
{
 color: #000;
 text-decoration: none;
 text-transform: uppercase;
}

nav#menu ul li:hover a,
nav#menu ul li.active a
{
 color: var(--color-orange);
 border-bottom: 30px solid var(--color-orange);
}

#content
{
 max-width: var(--site-width);
 margin: 0 auto;
 padding: 0 20px;
}

#left
{
 display: inline-block;
 vertical-align: top;
 width: calc(100% - 440px);
}

#right
{
 display: inline-block;
 vertical-align: top;
 width: 400px;
 margin-left: 40px;
}

#right h3,
#right p
{
 margin: .25em 0;
}

#right h3
{
 color: var(--color-orange);
}

footer
{
 background-color: var(--color-footer-bg);
 padding: 20px 0;
 font-size: .8em;
 line-height: 1em;
}

footer > .wrapper
{
 max-width: var(--site-width);
 margin: 0 auto;
 padding: 0 20px;
 color: #fff;
}

footer a
{
 color: #fff;
 text-decoration: none;
}

footer a:hover
{
 color: var(--color-orange);
 text-decoration: none;
}

.footer-col
{
 display: inline-block;
 vertical-align: top;
 width: 30%;
 margin-right: 3%;
}

.footer-col > ul
{
 list-style: none;
 padding-left: 0;
}

#go-to-top
{
 display: none;
 position: fixed;
 right: 20px;
 bottom: 20px;
 padding: 10px;
 background-color: var(--color-orange);
 border-radius: 50%;
 -webkit-box-shadow: 0 0 10px #888;
 -moz-box-shadow: 0 0 10px #888;
 box-shadow: 0 0 10px #888;
 cursor: pointer;
 z-index: 9999;
}

#go-to-top > img
{
 width: 20px;
 height: 20px;
 display: block;
}

/* index */

.index-promo-big
{
 display: inline-block;
 vertical-align: top;
 width: 100%;
 height: 0;
 padding-top: 30%;
 margin-bottom: 20px;
 position: relative;
 overflow: hidden;
 cursor: pointer;
 background-size: cover;
 background-position: center;
}

.index-promo-big:after
{
 content: "";
 position: absolute;
 display: block;
 width: 100%;
 height: 200px;
 bottom: -50px;
 background-image: linear-gradient(180deg, transparent 0, #000);
}

.index-promo-big:hover:after
{
 bottom: 0px;
}

.index-promo-big > div
{
 position: absolute;
 bottom: 0;
 color: #fff;
 padding: 10px;
 z-index: 1;
}

.index-promo-big > div > p
{
 margin: 0;
}

.index-promo-big > div > h2
{
 margin: 0;
}

#recommended-footer
{
 max-width: var(--site-width);
 margin: 0 auto;
 padding: 10px 20px;
}

#index-promo,
.recommended-content
{
 margin-bottom: 10px;
}

#index-promo > div
{
 display: inline-block;
 margin: 0 1.66666666% 1% 0;
 position: relative;
 width: 23.75%;
 height: 0;
 padding-bottom: 23.75%;
 overflow: hidden;
}

#index-promo > div:nth-child(4n)
{
 margin-right: 0;
}

#index-promo > div > div
{
 position: absolute;
 bottom: 0px;
 width: 100%;
 padding: 0 10px;
 z-index: 1;
 pointer-events: none;
}

#index-promo > div h3
{
 font-size: 22px;
 line-height: 1.3em;
 width: 100%;
 z-index: 1;
 color: #fff;
 margin-top: .25em;
}

#index-promo > div a > picture,
#index-promo > div a > picture > img
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
}

#index-promo > div a
{
 display: block;
 width: 100%;
 height: 100%;
 text-decoration: none;
}

#index-promo-big:after,
#index-promo-small:after,
#index-promo > div a:after
{
 content: "";
 display: block;
 position: absolute;
 width: 100%;
 height: 200px;
 bottom: -50px;
 background-image: linear-gradient(180deg, transparent 0, #000);
}

#index-promo-big:hover:after,
#index-promo-small:hover:after,
#index-promo > div:hover a:after
{
 bottom: 0px;
}

.index-promo-big h2
{
 font-size: 3rem;
 font-weight: bold;
 line-height: 1em;
}

.toplist
{
 list-style: none;
 margin: 0;
 padding: 0;
}

.toplist > li
{
 width: 100%;
 padding: 5px 10px;
 text-align: left;
 background-color: var(--color-blue);
}

.toplist > li:nth-child(2n)
{
 background-color: var(--color-lightblue);
}

.toplist a
{
 display: block;
 color: #000;
 text-decoration: none;
 font-size: .8em;
 line-height: 1.5em;
}

.dark-mode .toplist a:hover
{
 color: #fff;
}

#right-promo > div
{
 display: block;
 width: 100%;
 font-size: .8em;
}

#right-promo img
{
 width: 100%;
 display: block;
}

#right-promo p
{
 margin-top: 0;
}

.recommended-content
{
 margin-top: 20px;
}

.recommended-content > div
{
 display: inline-block;
 margin: 0 2% 2% 0;
 position: relative;
 width: 32%;
 height: 0;
 padding-bottom: 18%;
 overflow: hidden;
}

.recommended-content > div:nth-child(3n)
{
 margin-right: 0;
}

.recommended-content > div > div
{
 position: absolute;
 bottom: 0px;
 width: 100%;
 padding: 0 10px;
 z-index: 1;
 pointer-events: none;
}

.recommended-content > div h3
{
 font-size: 24px;
 line-height: 1.3em;
 color: #fff;
 margin-top: .25em;
}

.recommended-content > div a > picture,
.recommended-content > div a img
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
}

.recommended-content > div a
{
 display: block;
 width: 100%;
 height: 100%;
 text-decoration: none;
}

.recommended-content > div a:after
{
 content: "";
 display: block;
 position: absolute;
 width: 100%;
 height: 200px;
 bottom: -50px;
 background-image: linear-gradient(180deg, transparent 0, #000);
}

.recommended-content > div:hover a:after
{
 bottom: 0px;
}

#right-dev-of-week
{
 position: relative;
 margin: 20px 0;
 width: 100%;
 height: 0;
 padding-bottom: 56.25%;
 background-size: cover;
 overflow: hidden;
}

#right-dev-of-week > div
{
 position: absolute;
 width: 100%;
 left: 0;
 bottom: 0;
 padding: 5px 10px;
 color: #fff;
 z-index: 1;
}

#right-dev-of-week:after
{
 content: "";
 display: block;
 position: absolute;
 width: 100%;
 height: 200px;
 bottom: -50px;
 background-image: linear-gradient(180deg, transparent 0, #000);
}

#right-dev-of-week:hover:after
{
 bottom: 0;
}

dl.forum-latest
{
 margin: 0;
 font-size: .8em;
}

dl.forum-user-latest
{
 margin: 0 0 2em 0;
}

dl.forum-latest > dt
{
 width: 40px;
 display: inline-block;
 vertical-align: top;
}

dl.forum-user-latest > dt
{
 width: 110px;
}

dl.forum-latest > dd
{
 width: calc(100% - 40px);
 display: inline-block;
 vertical-align: top;
 margin: 0;
}

dl.forum-user-latest > dd
{
 width: calc(100% - 110px);
}

#daily-gameguess
{
 background-color: var(--color-orange);
 padding: 10px;
 margin: 20px 0;
 color: #fff;
 text-align: center;
}

#daily-gameguess a
{
 color: #fff;
}

#newsletter-signup
{
 background-color: var(--color-orange);
 padding: 0 10px 10px 10px;
 margin: 10px 0;
 color: #fff;
}

#newsletter-signup input
{
 border: 1px solid #000;
 padding: 5px;
 margin-bottom: 5px;
}

#newsletter-signup .text-button
{
 color: #fff;
}

/* content */

.content-list-item
{
 margin-bottom: 20px;
 overflow: hidden;
}

.content-list-image
{
 display: inline-block;
 vertical-align: top;
 width: 200px;
 height: 200px;
 margin-right: 20px;
 background-size: cover;
 background-position: center;
 position: relative;
}

.game-followed-star
{
 display: inline-block;
 width: 36px;
 height: 36px;
 -webkit-mask-image: url(../img/icon-star-big.svg);
 mask-image: url(../img/icon-star-big.svg);
 background-color: var(--color-orange);
 position: absolute;
 top: 5px;
 left: 5px;
}

.game-followed .content-list-image
{
 border-left: 5px solid var(--color-orange);
}

#game-content .game-followed .content-list-image
{
 border-left: 0;
}

#game-content .game-followed .game-followed-star
{
 display: none;
}

.content-list-category
{
 color: var(--color-secondary);
 font-size: 14px;
 font-weight: bold;
 text-transform: uppercase;
 margin-bottom: .25em;
 line-height: 1em;
}

.pagination
{
 text-align: center;
 margin-bottom: 1em;
}

.pagination a,
.pagination span
{
 display: inline-block;
 margin: 0 3px 5px 3px;
 padding: 0 10px;
 font-size: 12px;
 background-color: var(--color-blue);
 text-decoration: none;
 color: #000;
}

.pagination a.active,
.pagination span.active
{
 background-color: var(--color-secondary);
 color: #fff;
}

.pagination a.wrong,
.pagination span.wrong
{
 background-color: var(--color-red);
 color: #fff;
}

.pagination a.correct,
.pagination span.correct
{
 background-color: var(--color-green);
 color: #fff;
}

.content-list-item > div
{
 display: inline-block;
 width: calc(100% - 220px);
 vertical-align: top;
}

.content-list-item-priority
{
 position: relative;
 width: 100%;
 padding-bottom: 56.25%;
 overflow: hidden;
}

.content-list-item-priority .content-list-image
{
 display: block;
 width: 100%;
 height: 0;
 padding-bottom: 56.25%;
 margin-right: 0;
 position: absolute;
 top: 0;
}

.content-list-item-priority > div
{
 width: 100%;
 position: absolute;
 bottom: 0;
 color: #fff;
 padding: 10px;
 pointer-events: none;
 z-index: 2;
}

.content-list-item-priority:after
{
 content: "";
 display: block;
 position: absolute;
 width: 100%;
 height: 250px;
 bottom: -100px;
 z-index: 1;
 pointer-events: none;
 background-image: linear-gradient(180deg, transparent 0, #000);
}

.content-list-item-priority:hover:after
{
 bottom: 0;
}

.content-list-item-priority > div a
{
 color: #fff;
}

.content-list-item h4
{
 margin: 0;
 font-size: 34px;
 line-height: 1em;
}

.content-list-item a
{
 text-decoration: none;
 color: inherit;
}

a:hover
{
 text-decoration: underline;
}

.content-list-item p
{
 margin: .5em 0;
}

.content-list-item p.small
{
 font-size: 9pt;
}

/* content - articles */

p.content-category
{
 text-transform: uppercase;
 color: var(--color-secondary);
 margin-bottom: 0;
 font-weight: bold;
}

p.content-category a
{
 color: inherit;
}

p.lead
{
 font-family: 'Barlow Condensed', serif;
 font-size: 34px;
 line-height: 1.3em;
 font-weight: normal;
 margin: -.5em 0 .5em 0;
}

#content p.spoiler
{
 position: relative;
 padding-top: 2em;
 color: transparent;
 text-shadow: 0 0 15px rgba(0,0,0,0.5);
}

#content p.spoiler:before
{
 content: "SPOILER! Kattints a megtekintéséhez!";
 font-weight: bold;
 position: absolute;
 top: 0;
 left: 15px;
 color: #000;
 text-shadow: none;
}

.dark-mode #content p.spoiler:before
{
 color: #fff;
}

.dark-mode #content p.spoiler
{
 text-shadow: 0 0 15px rgba(255,255,255,0.8);
}

div.author
{
 margin: 0 0 20px 0;
 font-size: .8em;
 text-transform: uppercase;
}

.content-date:before
{
 content: "|";
 margin: 0 .5em;
}

.headline-image
{
 width: 100%;
 margin: 0 0 1em 0;
 position: relative;
}

.headline-image img
{
 display: block;
 width: 100%;
}

.headline-image a
{
 color: #fff;
}

.video
{
 width: 100%;
 overflow: hidden;
 position: relative;
 padding-bottom: 56.25%;
}

/* ??????
.video:after
{
 display: block;
 content: "";
 padding-bottom: 56.25%;
}
*/

.video > iframe
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

blockquote
{
 margin: 0;
 padding-left: 20px;
 border-left: 5px solid var(--color-secondary);
}

q
{
 font-family: 'Barlow Condensed', serif;
 font-size: 1.6rem;
 line-height: 1.7em;
 text-align: right;
 float: left;
 width: 50%;
 margin: .25em 1em .25em -20%;
 border-right: 5px solid var(--color-secondary);
 padding: .25em 1em .25em 0;
}

q:before, q:after
{
 content: "";
}

.infobox
{
 background-color: var(--color-lightblue);
 border: 2px solid var(--color-orange);
 padding: 1em;
 font-size: .9em;
 text-align: justify;
}

.dark-mode .infobox
{
 background-color: var(--color-blue);
 border: 0;
}

#content-author
{
 background-color: var(--color-blue);
 padding: 10px;
 min-height: 60px;
 margin-bottom: 20px;
}

.dark-mode #content-author
{
 background-color: var(--color-blue);
 color: #000;
}

.dark-mode #content-author a
{
 color: #fff;
}

#content-author:after
{
 clear: both;
}

#content-author > img
{
 display: inline-block;
 float: left;
 margin-right: 10px;
}

#content-author > p
{
 margin: 0;
}

#content-header-social
{
 float: right;
}

#content-header-social ul
{
 list-style: none;
 padding: 0;
 display: inline;
 line-height: 1em;
}

#content-header-social ul > li
{
 display: inline-block;
 margin-left: 4px;
 padding: 8px;
 border-radius: 50%;
}

#content-header-social ul > li:first-child
{
 margin-left: 0;
}

#content-header-social img
{
 display: block;
}

#content-comments > div
{
 clear: both;
 padding-bottom: 10px;
 margin-bottom: 10px;
 font-size: .85em;
 line-height: 1.4em;
 border-bottom: 1px solid #ccc;
}

#content-comments > div:last-child
{
 border-bottom: 0;
}

.content-comment-headline
{
 margin: 0 0 .5em 0;
 line-height: 1.4em;
}

.comments-icon
{
 display: inline-block;
 vertical-align: text-bottom;
 width: 18px;
 height: 18px;
 background-color: #333;
 -webkit-mask-image: url(../img/icon-comments.svg);
 mask-image: url(../img/icon-comments.svg);
}

.like-icon
{
 display: inline-block;
 width: 18px;
 height: 18px;
 background-color: #333;
 -webkit-mask-image: url(../img/icon-thumbup.svg);
 mask-image: url(../img/icon-thumbup.svg);
}

.sort-abc-icon
{
 display: inline-block;
 width: 24px;
 height: 24px;
 margin-left: .5em;
 cursor: pointer;
 background-color: #333;
 -webkit-mask-image: url(../img/icon-sort-abc.svg);
 mask-image: url(../img/icon-sort-abc.svg);
}

.sort-date-icon
{
 display: inline-block;
 width: 24px;
 height: 24px;
 margin-left: .5em;
 cursor: pointer;
 background-color: #333;
 -webkit-mask-image: url(../img/icon-sort-date.svg);
 mask-image: url(../img/icon-sort-date.svg);
}

.dark-mode .comments-icon,
.content-list-item-priority .comments-icon,
.dark-mode .like-icon,
.dark-mode .sort-abc-icon,
.dark-mode .sort-date-icon,
.content-list-item-priority .like-icon
{
 background-color: #eee;
}


.sort-abc-icon.active,
.sort-date-icon.active
{
 background-color: var(--color-orange);
 cursor: default;
}

.content-comments-avatar
{
 width: 40px;
 height: 40px;
 margin-right: 10px;
 border: 1px solid #000;
 float: left;
}

#content-new-comment textarea
{
 width: 100%;
 height: 5em;
 padding: 5px;
 margin-bottom: 5px;
 font-family: 'Open Sans', sans-serif;
 outline: 0;
 resize: vertical;
 transition: height .5s;
}

#content-new-comment textarea.open
{
 height: 10em;
}

ul.share
{
 width: 100%;
 list-style: none;
 padding: 0;
 display: flex;
 line-height: 1em;
}

ul.share li
{
 display: block;
 width: 16.6666666666%;
 text-align: center;
 color: #fff;
 opacity: 1;
}

ul.share li:hover
{
 opacity: .8;
}

ul.share li a
{
 display: block;
 width: 100%;
}

ul.share li img
{
 display: block;
 padding: 10px;
 margin: 0 auto;
}

.share-facebook {background-color: #4267b2;}
.share-twitter {background-color: #1da1f2;}
.share-viber {background-color: #59267c;}
.share-messenger {background-color: #006aff;}
.share-whatsapp {background-color: #25d366;}
.share-email {background-color: #888;}

button.like
{
 background-color: transparent;
 border: 0;
 font-weight: bold;
 vertical-align: middle;
 text-transform: uppercase;
 opacity: .7;
 font-family: 'Barlow Condensed', serif;
 font-size: 20px;
}

.thumbup
{
 display: inline-block;
 vertical-align: bottom;
 width: 24px;
 height: 24px;
 background-color: #333;
 -webkit-mask-image: url(../img/icon-thumbup.svg);
 mask-image: url(../img/icon-thumbup.svg);
}

.star
{
 display: inline-block;
 vertical-align: bottom;
 width: 24px;
 height: 24px;
 background-color: #333;
 -webkit-mask-image: url(../img/icon-star.svg);
 mask-image: url(../img/icon-star.svg);
}

span.pm
{
 display: inline-block;
 vertical-align: bottom;
 width: 24px;
 height: 24px;
 background-color: #333;
 -webkit-mask-image: url(../img/icon-pm.svg);
 mask-image: url(../img/icon-pm.svg);
}

button.like.active > span.thumbup,
button.like.active > span.star
{
 background-color: #f60;
}

.dark-mode .thumbup,
.dark-mode .star
{
 background-color: #ccc;
}

.dark-mode button.like
{
 color: #ccc;
}

button.like > img
{
 height: 25px;
 vertical-align: bottom;
}

button.like:hover
{
 opacity: 1;
}

#content-like-arrow
{
 display: inline-block;
 vertical-align: top;
 font-family: 'Barlow Condensed', serif;
 font-size: 26px;
}

.content-recommendation
{
 width: 80%;
 max-width: 600px;
 margin: 20px auto;
 border: 1px solid #000;
 position: relative;
 overflow: hidden;
 min-height: 150px;
}

.content-recommendation-box
{
 position: absolute;
 top: 0;
 left: 0;
 padding: 0 10px;
 background-color: var(--color-secondary);
 color: #fff;
 font-size: 10px;
 text-transform: uppercase;
 z-index: 2;
}

.content-recommendation-text
{
 position: absolute;
 width: 100%;
 bottom: 0;
 left: 0;
 padding: 10px;
 color: #fff;
 z-index: 1;
 font-size: .8em;
 line-height: 1.2em;
}

.content-recommendation-text h3,
.content-recommendation-text p
{
 margin: 0;
}

.content-recommendation-text h3
{
 line-height: 1.2em;
 margin-bottom: .2em;
}

.content-recommendation:after
{
 content: "";
 display: block;
 position: absolute;
 width: 100%;
 height: 200px;
 bottom: -50px;
 background-image: linear-gradient(180deg, transparent 0, #000);
 pointer-events: none;
}

.content-recommendation:hover:after
{
 bottom: 0px;
}

.content-recommendation img
{
 display: block;
 width: 100%;
}

.content-comment
{
 font-size: .8em;
 font-style: italic;
 margin-bottom: 1em;
}

#gameinfo
{
 margin-top: 20px;
 font-size: .8em;
 background-color: var(--color-blue);
 padding: 10px;
}

#gameinfo h3
{
 margin: 0 0 .25em 0;
}

#gameinfo p
{
 margin: .25em 0;
}

#gameinfo-cover
{
 display: inline-block;
 vertical-align: top;
 width: 190px;
}

#gameinfo-cover img
{
 display: block;
}

#gameinfo-data
{
 display: inline-block;
 vertical-align: top;
 border-left: 5px solid var(--color-secondary);
 padding-left: 10px;
}

.dark-mode #gameinfo-data
{
 color: var(--color-black);
}

.dark-mode #gameinfo-data a
{
 color: var(--color-gray);
}

.dark-mode #gameinfo-data h3,
.dark-mode #gameinfo-data a:hover
{
 color: #fff;
}

.gameinfo-data-withcover
{
 width: calc(100% - 190px);
}

ul.gameinfo-platforms
{
 display: inline-block;
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.gameinfo-platforms > li
{
 display: inline-block;
}

ul.gameinfo-platforms > li:after
{
 content: ",";
 margin-right: .25em;
}

ul.gameinfo-platforms > li:last-child:after
{
 content: "";
 margin-right: 0;
}

#review
{
 display: table;
 width: 100%;
 margin-bottom: 20px;
 font-size: .8em;
}

#review > div
{
 display: table-cell;
 vertical-align: top;
 width: 50%;
 padding: 20px;
}

#review-pro
{
 background-color: var(--color-green);
 color: #fff;
}

#review-con
{
 background-color: var(--color-red);
 color: #fff;
}

#review ul
{
 list-style: none;
 padding: 0;
 margin: 0;
}

#review-pro > ul > li:before
{
 content: url(/img/icon-pro.svg);
 width: 12px;
 height: 12px;
 display: inline-block;
 margin: 0 6px 0 0;
}

#review-con > ul > li:before
{
 content: url(/img/icon-con.svg);
 width: 12px;
 height: 12px;
 display: inline-block;
 margin: 0 6px 0 0;
}

#score-legacy
{
 background-color: var(--color-blue);
 font-size: .8em;
 padding: 20px;
}

#score
{
 display: inline-block;
 vertical-align: top;
 width: 50%;
 font-family: 'Barlow Condensed', serif;
 text-align: center;
}

#score > span
{
 font-size: 5rem;
 line-height: 1em;
 font-weight: 700;
}

#subscore
{
 display: inline-block;
 vertical-align: top;
 width: 50%;
}

#subscore dl
{
 margin: 0;
 padding-left: 20px;
}

#subscore dt
{
 float: left;
 width: 60%;
}

#subscore dd
{
 margin-left: 60%;
 text-align: right;
}

figure
{
 width: 100%;
 margin: 20px 0;
}

figure img
{
 display: block;
 width: 100%;
 cursor: zoom-in;
}

figure.headline-image img
{
 cursor: default;
}

figcaption
{
 font-style: italic;
 font-size: .8em;
 padding-left: .5em;
 border-left: 5px solid var(--color-main);
}

/* user / game */

#user-avatar
{
 display: inline-block;
 border: 1px solid #666;
 margin: 0 5px 0 0;
}

#user-avatar img
{
 display: block;
 width: 45px;
 height: 45px;
}

.form label
{
 display: block;
 margin-bottom: .25em;
}

.form input
{
 width: 100%;
 font-size: inherit;
 padding: 5px;
 margin-bottom: 1em;
}

.form textarea
{
 width: 100%;
 min-height: 3em;
 height: 8em;
 resize: vertical;
 font-size: inherit;
 padding: 5px;
 margin-bottom: 1em;
}

ul#followed-games
{
 list-style: none;
 padding: 0;
}

ul#followed-games > li
{
 display: inline-block;
 position: relative;
 margin: 0 10px 0 0;
 width: 100px;
 height: 100px;
 overflow: hidden;
}

ul#followed-games > li img
{
 width: 100%;
 height: 100%;
}

.followed-remove
{
 position: absolute;
 top: 0;
 right: 0;
 background-color: rgba(0, 0, 0, .5);
 padding: 0 3px;
 color: #f00;
 font-size: 18px;
 font-weight: bold;
}

ul#followed-games > li.more
{
 display: none;
}

ul#followed-games > li strong
{
 display: none;
}
/*
ul#followed-games.list > li
{
 clear: both;
 width: 100%;
 margin-bottom: 5px;
}

ul#followed-games.list > li > a
{
 width: 100%;
 line-height: 1.5em;
 height: 22px;
}

ul#followed-games.list > li > a:hover
{
 background-color: var(--color-blue);
}

ul#followed-games.list > li > a > img
{
 float: left;
 margin-right: 5px;
 width: 20px;
 height: 20px;
}

ul#followed-games.list > li > a > strong
{
 float: left;
 font-size: 16px;
 color: #222;
 font-weight: normal;
}

ul#followed-games.list > li > a > span
{
 float: right;
 top: 0;
 margin: 0;
 background: none;
 color: #222;
 font-size: 16px;
 line-height: 1.5em;
 font-weight: bold;
 text-align: right;
}
*/

/* forum */

.forum-topics,
.forum-list
{
 margin: 1em 0;
 width: 100%;
 border: 1px solid #ccc;
 background-color: var(--color-lightblue);
}

.forum-list
{
 cursor: pointer;
}

.dark-mode .forum-topics,
.dark-mode .forum-list
{
 background-color: var(--color-lightblue);
 border: 1px solid #333;
 color: #000;
}

.forum-topics a,
.forum-list a
{
 color: var(--color-text);
}

.dark-mode .forum-topics a,
.dark-mode .forum-list a
{
 color: #333;
}

.forum-topics > div,
.forum-list > div
{
 display: flex;
 flex-direction: row;
 align-items: stretch;
 font-size: .8em;
}

.forum-topics > div > div,
.forum-list > div > div
{
 padding: 10px;
}

.forum-topics > div:nth-child(2n+1),
.forum-list > div:nth-child(2n+1)
{
 background-color: var(--color-blue);
}

.dark-mode .forum-topics > div:nth-child(2n+1),
.dark-mode .forum-list > div:nth-child(2n+1)
{
 background-color: var(--color-blue);
}

.forum-topics > div:first-child,
.forum-list > div:first-child
{
 font-weight: bold;
}

.forum-topics > div:not(:last-child),
.forum-list > div:not(:last-child)
{
 border-bottom: 1px solid #ccc;
}

.dark-mode .forum-topics > div:not(:last-child),
.dark-mode .forum-list > div:not(:last-child)
{
 border-bottom: 1px solid #333;
}

.forum-topics-name
{
 width: 65%;
 flex-grow: 1;
 cursor: pointer;
}

.forum-topics-lastpost
{
 width: 25%;
 cursor: pointer;
}
.forum-topics-letternum
{
 width: 10%;
 text-align: right;
 cursor: pointer;
}

.forum-topics-admin
{
 text-align: right;
}

.forum-name
{
 width: 55%;
 flex-grow: 1;
}

.forum-lastpost
{
 width: 25%;
}

.forum-topicnum
{
 width: 10%;
 text-align: right;
}

.forum-letternum
{
 width: 10%;
 text-align: right;
}

.forum-post-avatar
{
 display: inline-block;
 vertical-align: top;
 width: 60px;
 height: 60px;
 margin-right: 10px;
}

.forum-post-avatar .small
{
 font-size: .7em;
}

.forum-post
{
 background-color: #f8f8f8;
 display: inline-block;
 position: relative;
 vertical-align: top;
 width: calc(100% - 70px);
 padding: 10px;
 border: 1px solid #ccc;
 margin-bottom: 1em;
 font-size: .8em;
}

.dark-mode .forum-post
{
 background-color: #222;
 border: 1px solid #666;
}

.forum-post-body
{
 overflow: hidden;
}

.forum-signature
{
 margin: 1em 0 0 0;
 padding-top: .5em;
 font-size: .8em;
 position: relative;
}

.forum-signature:before
{
 content: " ";
 width: 5em;
 margin: 0;
 border-bottom: 1px dashed var(--color-text);
 position: absolute;
 top: 0;
}

.forum-post-header
{
 margin-bottom: .5em;
}

.forum-post-admin
{
 position: absolute;
 left: 5px;
 bottom: 5px;
}

.forum-post-date
{
 display: block;
 float: right;
 font-style: italic;
}

.forum-post-usernumofmsg
{
 color: var(--color-text-gray);
}

.forum-post-followup
{
 margin-top: .5em;
 font-size: .8em;
 font-style: italic;
 text-align: right;
}

.forum-new-post
{
 display: inline-block;
 vertical-align: bottom;
 width: 24px;
 height: 24px;
 background-color: #333;
 -webkit-mask-image: url(../img/icon-post-add.svg);
 mask-image: url(../img/icon-post-add.svg);
}

.dark-mode .forum-new-post
{
 background-color: #ccc;
}

.forum-description
{
 background-color: var(--color-blue);
 padding: 10px;
}

.dark-mode .forum-description a
{
 color: #0b4173;
}

.dark-mode .forum-description a:hover
{
 color: #b0d9ff;
}

.forum-spoiler
{
 background-color: var(--color-text-gray);
 color: var(--color-text-gray);
 padding: 5px;
 cursor: help;
}

.forum-spoiler > a
{
 color: var(--color-text-gray);
}

.forum-spoiler > img
{
 opacity: 0;
}

.forum textarea
{
 width: 100%;
 resize: vertical;
}

img.smiley
{
 border: 0;
 width: 12px;
 height: 12px;
}


/* blog */

.blog-list-item
{
 margin-bottom: 20px;
 overflow: hidden;
}

.blog-list-image
{
 display: inline-block;
 vertical-align: top;
 width: 60px;
 height: 60px;
 margin-right: 10px;
}

.blog-list-item > div
{
 display: inline-block;
 vertical-align: top;
 width: calc(100% - 70px);
}

.blog-list-item h4
{
 margin: 0;
 font-size: 24px;
 line-height: 1.2em;
}

.blog-list-item a
{
 text-decoration: none;
 color: inherit;
}

.blog-list-item p
{
 font-size: 11pt;
 margin: 0 0 .5em 0;
}

.blog-list-item p.small
{
 font-size: 9pt;
}

/* game */

ul.content-keywords,
ul.game-platforms,
ul.game-data
{
 list-style: none;
 padding: 0;
}

ul.game-platforms
{
 margin: 0;
}

ul.game-data
{
 margin-top: 0;
}

ul.game-data > li
{
 line-height: 2em;
}

ul.content-keywords > li,
ul.game-platforms > li
{
 display: inline-block;
 margin-right: 5px;
 margin-bottom: 5px;
 padding: 0 10px;
 background-color: var(--color-secondary);
 color: #fff;
 font-size: .8em;
}

ul.game-platforms > li.type
{
 background-color: var(--color-main);
 color: #000;
}

ul.content-keywords > li:last-child,
ul.game-platforms > li:last-child
{
 margin-right: 0;
}

ul.game-platforms a
{
 text-decoration: none;
 color: inherit;
}

ul.game-platforms a:hover
{
 color: #000;
}

ul.content-keywords > li > a
{
 text-decoration: none;
 color: #fff;
}

.search-right-list-item img
{
 clear: both;
 width: 50px;
 height: 50px;
 float: left;
 margin: 0 10px 10px 0;
}

.search-right-list-item p
{
 font-size: .85em;
}

/* company */

#company-logo
{
 float: right;
 width: 200px;
 max-width: 30%;
 margin: 0 0 10px 10px;
}

#company-logo > img
{
 width: 100%;
}

/* gallery */

#gallery-list > div
{
 display: inline-block;
 vertical-align: top;
 width: 32%;
 margin-bottom: 20px;
 margin-right: 2%;
 text-align: center;
 font-size: .8em;
}

#gallery-list > div:nth-child(3n)
{
 margin-right: 0;
}

.gallery-list-image
{
 width: 100%;
 padding-bottom: 56.25%;
 overflow: hidden;
 background-size: cover;
 background-position: center;
}

/* gameguess */

#gameguess-image-container
{
 position: relative;
 width: auto;
 display: table;
 margin: 0 auto;
 max-width: 100%;
}

#gameguess-image
{
 display: block;
 max-width: 100%;
 border: 1px solid #000;
}

input#game-guess
{
 width: 80%;
 margin: 0 auto;
 padding: 7px;
 border: 1px solid var(--color-orange);
}

input#game-guess.correct
{
 background-color: #cfc;
}

#gameguess-hint
{
 display: none;
 position: absolute;
 left: 0;
 bottom: 0;
 padding: 5px 10px;
 background-color: rgba(0, 0, 0, .6);
 color: #fff;
}

#ggmiddle
{
 display: inline-block;
 height: 100%;
 vertical-align: middle;
}

.pagination span.clickable
{
 cursor: pointer;
}

.pagination span.image
{
 font-weight: bold;
}

#countdown
{
 font-size: 1.4em;
}

#guesses > p
{
 margin: 0;
}

#gg-stats > table
{
 width: 600px;
 max-width: 100%;
}

#gg-stats > table tr > td:first-child
{
 width: 1em;
 font-weight: bold;
}

#gg-stats > table tr > td
{
 width: calc(100% - 1em);
}

#gg-stats p
{
 margin-bottom: 0;
}

.gg-stats-bar
{
 display: inline-block;
 background-color: var(--color-green);
 height: 14px;
 vertical-align: baseline;
}

#gg-prev
{
 float: left;
}

#gg-next
{
 float: right;
}

#gameguess-archive
{
 list-style: none;
 padding-left: 0;
 color: var(--color-text-gray);
}

#gameguess-archive span
{
 display: inline-block;
 width: 15px;
 height: 15px;
 margin-right: 5px;
 background-color: var(--color-blue);
}

#gameguess-archive span.ok {background-color: var(--color-green);}
#gameguess-archive span.wrong {background-color: var(--color-red);}
#gameguess-archive span.curr {background-color: var(--color-orange);}

/* notifications */

#notifications
{
 position: fixed;
 top: 20px;
 right: calc((100% - var(--site-width)) / 2 + 20px);
 z-index: 2000;
}

.notification-popup
{
 border: 3px solid var(--color-orange);
 background-color: #fff;
 padding: 20px;
 margin-bottom: 10px;
 position: relative;
 min-width: 20em;
 max-width: 100%;
 text-align: center;
 -webkit-box-shadow: 0 0 10px #888;
 -moz-box-shadow: 0 0 10px #888;
 box-shadow: 0 0 10px #888;
}

.dark-mode .notification-popup
{
 background-color: #333;
}

.notification-popup.error
{
 background-color: var(--color-orange);
 color: #fff;
}

.notification-popup:after
{
 content: '\00d7';
 font-size: 20px;
 position: absolute;
 top: 5px;
 right: 10px;
 color: var(--color-orange);
}

/* pm */

table.pm-list tbody tr:nth-child(2n)
{
 background-color: var(--color-blue);
}

table.pm-list tbody tr:nth-child(2n+1)
{
 background-color: var(--color-lightblue);
}

table.pm-list td
{
 padding: 3px;
}

table.pm-list,
table.pm-list a
{
 color: var(--color-black);
}

/* bugreport */

#bugreport-button
{
 position: fixed;
 left: 20px;
 bottom: 20px;
 padding: 10px;
 background-color: var(--color-orange);
 border-radius: 50%;
 -webkit-box-shadow: 0 0 10px #888;
 -moz-box-shadow: 0 0 10px #888;
 box-shadow: 0 0 10px #888;
 cursor: pointer;
 z-index: 9999;
}

#bugreport-button > img
{
 width: 20px;
 height: 20px;
 display: block;
}

#bugreport
{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background-color: rgba(0, 0, 0, 0.5);
 display: none;
}

#bugreport > div
{
 position: relative;
 background-color: #f8f8f8;
 color: #000;
 padding: 10px;
 width: 80%;
 max-width: 600px;
 margin: 20px auto 0 auto;
 border: 1px solid #000;
 -webkit-box-shadow: 0 0 10px #888;
 -moz-box-shadow: 0 0 10px #888;
 box-shadow: 0 0 10px #888;
 font-size: .8em;
}

#bugreport textarea
{
 display: block;
 width: 100%;
 height: 8em;
 padding: 5px;
 margin-bottom: 10px;
 outline: 0;
}

/* */

#impressum-adaptive
{
 display: inline-block;
 background-image: url(/img/adaptive-media-logo-150-light.png);
 width: 150px;
 height: 48px;
}

.dark-mode #impressum-adaptive
{
 background-image: url(/img/adaptive-media-logo-150-dark.png);
}

/* MQ */

@media screen and (max-width: 1600px)
{
 q {margin: .25em 1em .25em -10%;}
}

@media screen and (max-width: 1450px)
{
 q {margin: .25em 1em .25em 0;}
 #notifications {right: 20px;}
}

@media screen and (max-width: 1200px)
{
 #right {width: 300px;}
 #left {width: calc(100% - 340px);}
 q {font-size: 1.3rem; width: 40%; margin: .25em 1em .25em 0;}
}

@media screen and (max-width: 1140px) and (min-width: 961px)
{
 #index-promo > div > h3 {font-size: 14px;}
}

@media screen and (max-width: 1140px)
{
 .recommended-content > div {margin: 0 2% 1% 0; width: 49%; padding-bottom: 27.5625%;}
 .recommended-content > div:nth-child(3n) {margin-right: 2%;}
 .recommended-content > div:nth-child(2n) {margin-right: 0;}
 #index-promo > div h3 {font-size: 18px;}
}

@media screen and (max-width: 960px)
{
 .index-promo-big {padding-top: 40%;}
 #index-promo > div {width: 49%; margin: 0 2% 1% 0; padding-bottom: 28.125%;}
 #index-promo > div:nth-child(2n) {margin-right: 0;}
 .content-list-image {width: 125px; height: 125px;}
 .content-list-item > div {width: calc(100% - 145px);}
 .content-list-item h4 {font-size: 28px;}
 nav#menu {font-size: 18px;}
 nav#menu .mobile-only {display: none;}
}

@media screen and (max-width: 960px) and (min-width: 800px)
{
 #gameinfo-cover {width: 130px;}
 .gameinfo-data-withcover {width: calc(100% - 130px);}
 #index-promo > div h3 {font-size: 22px;}
 h1.index {font-size: 2.5rem; line-height: 1.2em;}

 .forum-topics-name {width: 75%;}
 .forum-topics > div:not(:first-child) .forum-topics-lastpost {font-size: .8em; line-height: 1.5em;}
 .forum-topics-letternum {display: none;}
 .forum-topics > div:not(:first-child) .forum-lastpost {width: 25%; font-size: .8em;}
 .forum-topicnum, .forum-letternum {display: none;}

 #gallery-list > div {width: 49%;}
 #gallery-list > div:nth-child(3n) {margin-right: 2%;}
 #gallery-list > div:nth-child(2n) {margin-right: 0;}
}

@media screen and (max-width: 800px)
{
 body {padding: 84px 0 0 0;}
 header {height: 84px;}
 h1.index {font-size: 2.5rem; line-height: 1.2em;}
 #header-content {position: relative; height: 60px; padding: 3px 20px;}
 #logo {width: 80px; height: 40px;}
 #left {width: 100%;}
 #right {width: 100%; margin-left: 0; position: static; top: auto;}
 #right-promo > div {display: inline-block; vertical-align: top; width: 49%; margin-right: 2%;}
 #right-promo > div:nth-child(2n) {margin-right: 0;}
 .footer-col {width: 49%; margin-right: 2%;}
 .footer-col:nth-child(2n) {margin-right: 0;}
 .recommended-content > div {margin: 0 2% 1% 0; width: 49%; padding-bottom: 49%;}
}

@media screen and (max-width: 760px)
{
 .desktop-only {visibility: hidden;}
 .mobile-only {visibility: visible;}
 nav#menu {display: none;}
 nav#menu .mobile-only {display: block;}
 #menu-h {display: block; position: absolute; top: 12px; left: 20px; cursor: pointer;}
 nav#menu {position: fixed; left: 0; right: 0; top: 66px; z-index: 1000;}
 nav#menu > ul {padding: 0;}
 nav#menu > ul > li {display: block; width: 100%; margin-right: 0; padding: 10px 20px; background-color: #f60; color: #fff;}
 nav#menu > ul > li > a {display: block; color: #fff;}
 nav#menu > ul > li:hover {background-color: var(--color-blue);}
 nav#menu > ul > li:hover > a {color: #000;}
 nav#menu ul li:hover a, nav#menu ul li.active a {border-bottom: 0; background-color: transparent;}
 #header-theme {position: absolute; float: none; margin-top: 7px; left: 75px;}
 #header-search {position: absolute; float: none; margin-top: 7px; right: 20px;}
 #header-profile {position: absolute; float: none; margin-top: 7px; right: 65px;}
 #header-pm {position: absolute; float: none; margin-top: 7px; right: 110px;}
 #header-content {padding: 10px 20px;}
 #msg, #search {height: 83px; padding: 10px;}
 #search {padding: 23px 10px 0 10px;}
 #logo {position: absolute; top: 10px; left: 50%; margin-left: -50px;}
 .index-promo-big {width: 100%; padding-top: 80%;}
 #index-promo > div {width: 100%; margin: 0 0 10px 0; padding-bottom: 56.25%;}
 #index-promo > div:nth-child(2n) {margin-right: 0;}
 .content-list-item {clear: both; margin-bottom: 20px;}
 .content-list-image {clear: both; width: 100px; height: 100px; float: right; margin: 0 0 10px 10px;}
 .content-list-item-priority .content-list-image {margin: 0 0 10px 0;}
 .content-list-item > div {float: left; width: calc(100% - 110px);}
 .content-list-item-priority div {width: 100%;}
 .content-list-item-priority div p {margin-bottom: 0;}
 #review {display: block;}
 #review > div {display: block; width: 100%;}
 #gameinfo-cover {width: 130px;}
 .gameinfo-data-withcover {width: calc(100% - 130px);}
 #index-promo > div h3 {font-size: 22px;}
 .game-followed .content-list-image {border-left: 0;}
 .content-list-item.game-followed {border-left: 5px solid var(--color-orange); padding-left: 10px;}
 .content-list-item-priority.game-followed {padding-left: 0;}
 .game-followed-star {width: 24px; height: 24px; -webkit-mask-image: url(../img/icon-star.svg); mask-image: url(../img/icon-star.svg);}

 .forum-topics-name {width: 75%;}
 .forum-topics > div:not(:first-child) .forum-topics-lastpost {font-size: .8em; line-height: 1.5em;}
 .forum-topics-letternum {display: none;}
 .forum-topics > div:not(:first-child) .forum-lastpost {width: 25%; font-size: .8em;}
 .forum-topicnum, .forum-letternum {display: none;}
}

@media screen and (max-width: 600px)
{
 div.author > span:before {content: ""; margin: 0;}
 div.author > span {display: block;}
 #content-header-social {float: none;}
 #content-like-arrow {font-size: 18px;}
 h1 {font-size: 2rem; line-height: 1.2em;}
 h1.index {font-size: 2rem; line-height: 1.2em;}
 h2 {font-size: 1.5rem; line-height: 1.2em;}
 h3 {font-size: 1.4rem; line-height: 1.2em;}
 h4 {font-size: 1.2rem; line-height: 1.2em;}
 #search input {width: 60%;}
 #notifications {left: 20px;}
 .recommended-content > div h3 {font-size: 20px;}
 .index-promo-big h2 {font-size: 2rem;}
 #gallery-list > div {width: 49%;}
 #gallery-list > div:nth-child(3n) {margin-right: 2%;}
 #gallery-list > div:nth-child(2n) {margin-right: 0;}
 p.lead {font-size: 26px; line-height: 1.2em;}

 .filter-wide {height: 2.5rem; width: 90%; margin: 0 auto; overflow-x: auto; display: flex; flex-direction: row; align-items: center; box-sizing: border-box; scrollbar-width: none;}
 .filter-wide::-webkit-scrollbar {display: none;}
}

@media screen and (max-width: 480px)
{
 h1.index {font-size: 1.5rem; line-height: 1.2em;}
 #recommended-footer {padding: 10px 0; overflow: hidden;}
 #recommended-footer h3 {padding: 0 10px;}
 .recommended-content > div {margin: 0 0 1% 0; width: 100%; padding-bottom: 56.25%;}
 .content-list-image {width: 80px; height: 80px; margin: 0 0 5px 5px;}
 .content-list-item-priority div {width: 100%;}
 .content-list-item h4 {font-weight: normal;}
 .index-promo-big > div > p {display: none;}
 #index-promo > div > h3 {font-size: 14px;}
 #index-promo > div:hover a:after {bottom: 0px;}

 .content-list-item-priority .content-list-lead {display: none;}
 .content-list-item-priority:after {bottom: 0; height: 150px;}
 .content-recommendation {width: 90%;}
 #content-header-social ul > li {margin-left: 15px;}

 #right-promo > div {display: block; width: 100%; margin: 0 auto; max-width: 400px;}
 #right-promo > div:nth-child(2n) {margin-right: auto;}

 q {width: 90%; margin: 1em;}

 .forum-post-avatar {position: relative; width: 40px; height: 40px; margin-bottom: 10px; border: 1px solid #666;}
 .forum-post-avatar img {width: 100%;}
 .forum-post-avatar p {position: absolute; left: 50px; top: 10px;}
 .forum-post-date {position: absolute; right: 5px; bottom: 100%; margin-bottom: 5px; color: var(--color-text-gray);}
 .forum-post {width: 100%;}
 .forum-name {width: 75%;}
}

/* splide.min.css */
.splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list{display:block}.splide__track--fade>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:transparent}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}

/* swipebox.min.css */
/*! Swipebox v1.3.0 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */html.swipebox-html.swipebox-touch{overflow:hidden!important}#swipebox-overlay img{border:none!important}#swipebox-overlay{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999!important;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#swipebox-container{position:relative;width:100%;height:100%}#swipebox-slider{-webkit-transition:-webkit-transform .4s ease;transition:transform .4s ease;height:100%;left:0;top:0;width:100%;white-space:nowrap;position:absolute;display:none;cursor:pointer}#swipebox-slider .slide{height:100%;width:100%;line-height:1px;text-align:center;display:inline-block}#swipebox-slider .slide:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#swipebox-slider .slide .swipebox-inline-container,#swipebox-slider .slide .swipebox-video-container,#swipebox-slider .slide img{display:inline-block;max-height:100%;max-width:100%;margin:0;padding:0;width:auto;height:auto;vertical-align:middle}#swipebox-slider .slide .swipebox-video-container{background:0 0;max-width:1140px;max-height:100%;width:100%;padding:5%;-webkit-box-sizing:border-box;box-sizing:border-box}#swipebox-slider .slide .swipebox-video-container .swipebox-video{width:100%;height:0;padding-bottom:56.25%;overflow:hidden;position:relative}#swipebox-slider .slide .swipebox-video-container .swipebox-video iframe{width:100%!important;height:100%!important;position:absolute;top:0;left:0}#swipebox-slider .slide-loading{background:url(../img/swipebox/loader.gif) center center no-repeat}#swipebox-bottom-bar,#swipebox-top-bar{-webkit-transition:.5s;transition:.5s;position:absolute;left:0;z-index:999;height:50px;width:100%}#swipebox-bottom-bar{bottom:-50px}#swipebox-bottom-bar.visible-bars{-webkit-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0)}#swipebox-top-bar{top:-50px}#swipebox-top-bar.visible-bars{-webkit-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0)}#swipebox-title{display:block;width:100%;text-align:center}#swipebox-close,#swipebox-next,#swipebox-prev{background-image:url(../img/swipebox/icons.png);background-repeat:no-repeat;border:none!important;text-decoration:none!important;cursor:pointer;width:50px;height:50px;top:0}#swipebox-arrows{display:block;margin:0 auto;width:100%;height:50px}#swipebox-prev{background-position:-32px 13px;float:left}#swipebox-next{background-position:-78px 13px;float:right}#swipebox-close{top:0;right:0;position:absolute;z-index:9999;background-position:15px 12px}.swipebox-no-close-button #swipebox-close{display:none}#swipebox-next.disabled,#swipebox-prev.disabled{opacity:.3}.swipebox-no-touch #swipebox-overlay.rightSpring #swipebox-slider{-webkit-animation:rightSpring .3s;animation:rightSpring .3s}.swipebox-no-touch #swipebox-overlay.leftSpring #swipebox-slider{-webkit-animation:leftSpring .3s;animation:leftSpring .3s}.swipebox-touch #swipebox-container:after,.swipebox-touch #swipebox-container:before{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .3s ease;transition:all .3s ease;content:' ';position:absolute;z-index:999;top:0;height:100%;width:20px;opacity:0}.swipebox-touch #swipebox-container:before{left:0;-webkit-box-shadow:inset 10px 0 10px -8px #656565;box-shadow:inset 10px 0 10px -8px #656565}.swipebox-touch #swipebox-container:after{right:0;-webkit-box-shadow:inset -10px 0 10px -8px #656565;box-shadow:inset -10px 0 10px -8px #656565}.swipebox-touch #swipebox-overlay.leftSpringTouch #swipebox-container:before,.swipebox-touch #swipebox-overlay.rightSpringTouch #swipebox-container:after{opacity:1}@-webkit-keyframes rightSpring{0%{left:0}50%{left:-30px}100%{left:0}}@keyframes rightSpring{0%{left:0}50%{left:-30px}100%{left:0}}@-webkit-keyframes leftSpring{0%{left:0}50%{left:30px}100%{left:0}}@keyframes leftSpring{0%{left:0}50%{left:30px}100%{left:0}}@media screen and (min-width:800px){#swipebox-close{right:10px}#swipebox-arrows{width:92%;max-width:800px}}#swipebox-overlay{background:#0d0d0d}#swipebox-bottom-bar,#swipebox-top-bar{text-shadow:1px 1px 1px #000;background:#000;opacity:.95}#swipebox-top-bar{color:#fff!important;font-size:15px;line-height:43px;font-family:Helvetica,Arial,sans-serif}