@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");

* { margin: 0; padding: 0; }

body {
	font-family: Tahoma, Arial, sans-serif;
	font-size: 12px;
	/*line-height: 22px;*/
	line-height: 1.7em;
	color: #666;
	background: #e5e5e5;
}

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-nowrap { white-space: nowrap; }
.text-lowercase { text-transform: lowercase; }
.initialism,
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-muted { color: #666666; }
.text-primary { color: #cc0000; }

.clearfix {
	content: " ";
	height: 0;
	width: 100%;
	overflow: hidden;
	clear: both;
	display: block;
}

.clearfix:before,
.clearfix:after,
.clearfix-after:after,
.clearfix-before:after {
	content: " ";
	height: 0;
	width: 100%;
	overflow: hidden;
	clear: both;
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	/*font-weight: normal !important;*/
	margin: 0;
	padding: 0;
}

hr { margin: 2px 0 0; border: 0; }

ul { list-style: none; }
ul,
p { margin: 0; padding: 0; }

a:link,
a:visited { color: #0066ff; text-decoration: none; }
a:active,
a:hover { color: #009900; text-decoration: underline; }

/**********************************************************/
/* WRAPPER */
/**********************************************************/
.container {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 12px;
}

.wrapper { margin: 0; padding: 0; }

.row {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: relative;
	margin-right: auto;
	margin-left: auto;
}

.col-50 { width: 50%; }

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 { float: left; }

.col-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
.col-4 {
	width: 33.333333%;
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}
.col-5 { width: 41.66666667%; }
.col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.col-7 { width: 58.33333333%; }
.col-8 { width: 66.66666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333333%; }
.col-11 { width: 91.66666667%; }
.col-12 { width: 100%; }

.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
.flex .center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.flex .space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

/* =============================================== */
/* HEADER
/* =============================================== */
.header {
	position: relative;
	padding: 0;
	margin: 0;
	z-index: 999;
	background: #000;
	border-bottom: 0;
}

/* =============================================== */
/* LOGO
/* =============================================== */
.logo {
	display: block;
	text-align: center;
	width: 100%;
	position: relative;
	margin: 0 auto;
}

.logo img { max-width: 100%; height: auto; }

/* =============================================== */
/* TOP NAV
/* =============================================== */
.topnav {
	position: relative;
	text-align: center;
	background: #fff;
	margin: 0 0 10px 0;
}
.topnav ul { list-style: none; display: block; }
.topnav ul li { display: block; }
/* Style the links inside the navigation bar */
.topnav ul li a,
.topnav ul li a:visited {
	display: block;
	color: #000;
	margin: 0;
	padding: 4px 0;
	text-decoration: none;
}
.topnav ul li a:hover {
}

/* ================================================ */
/* INDEX PAGE====================================== */
/* ================================================ */
h1 {
	font-size: 18px;
	font-weight: 700;
	color: #111111;
	margin: 0 0 10px 0;
	padding: 0;
	background: transparent;
	letter-spacing: 0;
}

.sidebar { float: left; margin-right: 10px; width: 230px; }
.content { float: left; width: 880px; }
/* ================================================ */
/* BOX ====================================== */
/* ================================================ */
.about-box { margin: 20px 0; }
.about-box .column { text-align: center; }

/* BOX */
.box {
	display: block;
	margin-bottom: 8px;
	border: 0;
	background: transparent;
	border-radius: 0;
	overflow: hidden;
}
.box h3 { padding: 6px 0; margin: 0; border-bottom: 0; }
.box-title {
	position: relative;
	height: 25px;
	margin: 0;
	padding: 8px 15px;
	font-size: 14px;
	color: #048dc6;
	font-weight: bold;
	border-bottom: 1px solid #d2d2d2;
	background: #e9e9e9;
	background: linear-gradient(
		0deg,
		rgba(233, 233, 233, 1) 0%,
		rgba(255, 255, 255, 1) 50%,
		rgba(255, 255, 255, 1) 100%
	);
}

.bxbody { background: #fff; padding: 10px 12px; margin: 0; }

.bxbody2 {
	background: transparent;
	padding: 8px;
	margin: 0;
	border: 0;
}

.wireframemenu ul { list-style: none; padding: 0px; margin: 0 0 0 0; }

.wireframemenu ul li { padding: 0; margin: 5px 0; }
.wireframemenu ul li a,
.wireframemenu ul li a:visited {
	display: block;
	color: #666;
	padding: 0px 15px;
	font-weight: normal;
	text-decoration: none;
	background: url(images/templatemo_menu_list.png) left center no-repeat;
}

.wireframemenu ul li a:hover { color: #c85d16; }

.wireframemenu .muted { color: #555; font-size: 13px; }

.list_link_4mobile { margin-bottom: 10px; list-style: none; }

.list_link_4mobile .list_link {
	background: transparent;
	padding: 8px 6px;
	border: none;
	display: block;
	border-radius: 0;
	transition: transform 0.2s ease;
}

.list_link_4mobile .list_link:hover { background: transparent; transform: translateX(2px); }

.flex { display: flex; align-items: center; gap: 10px; }

.list_link_left img {
	width: 60px;
	height: 60px;
	border-radius: 0;
	object-fit: cover;
	margin-right: 6px;
}

.list_link_right { color: #111111; font-size: 14px; font-weight: 600; }

.total { color: #666666; }

.text_data { color: #111111; opacity: 0.7; }

.text_load { color: #cc0000; }

/* ================================================ */
/* GAME CSS ======================================= */
/* ================================================ */
.games { display: block; position: relative; }

.wrapperr .games { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.game { width: auto; margin: 0 0 20px 0; }
.game:last-child { margin: 0; }

.game .left {
	float: left;
	width: 150px;
	/* height: 174px; */
	display: block;
	margin: 0 5px 5px 0;
	background-color: #fff;
}

.game img {
	width: 100%;
	height: auto;
	margin: 0 0 10px 0;
	padding: 0;
	display: block;
	border-radius: 10px;
	border: 1px solid #444;
}

.screens {
    position: relative;
    /* display: inline-block; */
    margin: 1px;
    /* border-collapse: collapse; */
    /* background-color: rgb(255, 218, 185); */
    border: 1px dashed;
    text-align: left;
    /* vertical-align: middle; */
    /* letter-spacing: 0pt; */
    /* word-spacing: 0pt; */
    padding: 2px 6px;
}

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

.screens ul li {
	font-weight: normal;
    padding: 0;
    margin: 5px 0;
}
.screens ul li a, .screens ul li a:visited {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    color: #c85d16;
    padding: 0 0 0 16px;
    margin: 0 0 0 5px;
    /* font-weight: normal; */
    text-decoration: none;
    background: url(images/templatemo_menu_list.png) left center no-repeat;
}


.game-title { font-size: 14px; font-weight: 400; letter-spacing: 0.2px; }

.game .right {
    float: left;
    width: 670px;
    padding: 0 15px;
    height: 100%;
    background: #fff;
}

.related-screens {
	margin: 10px 0;
}

.gamepost p.posted {
	/*padding: 2px 5px 2px 5px;*/
	margin: 0 0 5px 0;
	display: block;
	clear: both;
}
.gamepost p.posted a,
.game p.posted a:visited { color: #111111; text-decoration: underline; }
.gamepost p.posted a:hover { color: #111111; text-decoration: none; }
.gamepost p.posteda { width: 100%; }
.gamepost p.posted strong.bold {
	color: #111111;
	font-weight: normal;
	width: 105px;
	display: block;
	float: left;
}

.game h5 {
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 5px 0;
	padding: 0 0 0 24px; background: url(images/jar.png) left center no-repeat; 
}
.game h5 a,
.game h5 a:visited { color: #c85d16; text-decoration: none; }
.game h5 a:hover { color: #cc0000; text-decoration: none; }
.game .readmore {
	text-align: left;
	width: auto;
	float: none;
	background-color: transparent;
	color: #666666;
	padding: 0;
	margin: 8px 0 0 0;
	position: static;
	border-radius: 0;
	font-size: 12px;
	line-height: 22px;
}

.game .readmore a,
.game .readmore a:visited {
	display: inline-block;
	padding: 2px 8px;
	margin: 0 4px 4px 0;
	border: 1px solid #b7bec9;
	background: #ffffff;
	color: #0033cc;
	text-decoration: none;
}

.game .readmore a:first-child,
.game .readmore a:first-child:visited {
	background: #e9f0ff;
	border-color: #9fb1d8;
	color: #002b99;
	font-weight: bold;
}

.game .readmore a:hover,
.game .readmore a:active {
	background: #f2f2f2;
	border-color: #8b95a5;
	color: #009900;
	text-decoration: none;
}

span.jad { border: 1px solid #9fb1d8; color: #666; padding: 2px 3px; }
span.d { border: 1px solid #9fb1d8; color: #cc0000; padding: 2px 3px; }
span.sz { border: 1px solid #9fb1d8; color: black; padding: 2px 3px; }

.game .important {
    text-align: left;
    vertical-align: middle;
    padding: 3px 5px;
    margin: 5px 0 0 0;
    border: 1px dashed rgb(169, 169, 169);
    background-color: rgb(230, 230, 250);
}
.game .important span { color: #ff0000; font-weight: bold; }

/* ================================================ */
/* GAME SINGLE ===================================== */
/* ================================================ */


.game-gallery { margin-top: 20px; max-width: 640px; }
.game-gallery__title { font-size: 20px; margin-bottom: 10px; }
.game-gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.game-gallery__item { margin: 0; }
.game-gallery__item img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}
.game-gallery__item figcaption {
	margin-top: 6px;
	font-size: 12px;
	line-height: 16px;
	color: #666666;
}

.related-games-section { margin-top: 24px; }
.related-games-section h2 { font-size: 20px; margin-bottom: 12px; }
.related-games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

/* ================================================ */
/* FOOTER ===================================== */
/* ================================================ */
.site-footer {
	background: #000;
	color: #fff;
	padding: 10px 0;
	margin-top: 20px;
	border-top: 5px solid #444;
	text-align: center;
}

.footer-top { display: block; }

.footer-brand p { margin-top: 12px; color: #666666; }

.footer-pill {
	display: inline-block;
	margin-top: 12px;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: #111111;
	font-size: 12px;
	letter-spacing: 0;
	text-transform: uppercase;
}

.footer-columns { display: block; }

.category-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.category-header__count { color: #666666; font-size: 13px; }

.category-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.category-card,
.category-card:visited {
	display: block;
	padding: 8px 10px;
	border: 1px solid #d2d7e0;
	background: #ffffff;
	color: #111111;
	text-decoration: none;
}

.category-card:hover {
	border-color: #b8c0cd;
	background: #f7f8fb;
}

.category-card__label {
	display: block;
	font-size: 14px;
	line-height: 18px;
	color: #111111;
}

.category-card__total {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	line-height: 16px;
	color: #666666;
}

.category-empty { color: #666666; }

.footer-col h4 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }

.footer-col ul li { margin-bottom: 8px; }

.footer-col a,
.footer-col a:visited { color: #fff; opacity: 0.85; }

.footer-col a:hover { color: #cc0000; opacity: 1; }

.footer-bottom {
	padding-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
	align-items: center;
}

.footer-legal { display: flex; flex-direction: column; gap: 10px; }

.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }

.footer-links a,
.footer-links a:visited { color: #0033cc; text-decoration: none; font-size: 13px; }

.footer-highlight {
	padding: 0;
	border-radius: 0;
	background: transparent;
	border: 0;
	text-align: left;
}

.footer-highlight span {
	display: block;
	color: #cc0000;
	font-size: 12px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.footer-highlight strong { font-size: 15px; }

.text-end { text-align: right !important; }

/* ================================================ */
/* PAGINATION */
/* ================================================ */
.pagination {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-start;
}

.pagination .page {
	display: inline-block;
	min-width: 28px;
	padding: 3px 8px;
	border-radius: 0;
	border: 1px solid #b7bec9;
	color: #0033cc;
	background: #fff;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
}

.pagination .page:hover {
	border-color: #8b95a5;
	background: #f2f2f2;
	color: #009900;
	text-decoration: none;
}

.pagination .page.current {
	background: #dfe6f3;
	border-color: #9ca8bd;
	color: #111111;
	font-weight: 700;
}

.pagination .page.nav {
	padding-left: 10px;
	padding-right: 10px;
}

@media (min-width: 992px) {
	.topnav ul { display: flex; justify-content: center; gap: 18px; }

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

@media (max-width: 767px) {
	.container { padding: 0; }

	.games { gap: 12px; }

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

	.game { width: 100%; }

	.game a { max-width: none; }

	.game-title { margin-top: 8px; font-size: 13px; line-height: 18px; }

	.game-hero { grid-template-columns: 1fr; }

	.game-hero__media img { max-width: 220px; }

	.game-hero__title { font-size: 24px; }

	.game-hero__desc { font-size: 14px; line-height: 20px; }

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

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

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

	.category-header { flex-direction: column; align-items: flex-start; gap: 2px; }
}