/* Reset and Base Styling */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
	background-color: #051b38;
}

/* Header Styling */
.header {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header .brand {
    font-size: 1.5rem;
    font-weight: bold;
    background: linear-gradient(90deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header .search-box {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 500px;
    margin: 0 20px;
}

.header .search-box input {
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 20px 0 0 20px;
    outline: none;
	background: darkgrey;
    color: black;
}

.header .search-box button {
    background-color: #ff7e5f;
    border: none;
    padding: 8px 15px;
    color: #fff;
    border-radius: 0 20px 20px 0;
    cursor: pointer;
}

.header .search-box button:hover {
    background-color: #feb47b;
}

.header .nav-links {
    display: flex;
}

.header .nav-links a {
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.header .nav-links a:hover {
    background-color: #444;
}

/* Navigation Sidebar */
.nav-right {
    position: fixed; 
    top: 60px;
    left: 0;
    background-color: #333;
    color: #fff;
    padding: 10px;
    z-index: 1000;
    width: 60px;
    transition: width 0.3s ease;
    max-height: calc(100% - 60px);
}
.nav-right.expanded {
    width: 200px;
	overflow-y: auto;
	
}
.nav-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-right ul li {
    margin: 10px 0;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}
.nav-right ul li a img{
	transition: transform 0.3s ease;
    box-sizing: border-box;
    border: 1px solid gray;
	border-radius: 8px;
}

.nav-right ul li i {
    font-size: 20px;
    margin-right: 10px;
}

.nav-right ul li span {
    display: none;
    white-space: nowrap;
	padding-left:10px;
}

.nav-right.expanded ul li span {
    display: inline-block;
}

.nav-right i#navToggle {
    font-size: 25px;
    margin-bottom: 15px;
    cursor: pointer;
}

.nav-right ul li a {
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
}

.nav-right ul li a:hover {
    color: #ffcc00;
}
#nav_toggle_mobile {
	display:none;
}
/* Section Post */
.main-box {
	margin-top: 10px;
	display: flex;
    flex-direction: column;
    gap: 20px;
}
.main-box .main-grid {
	
	grid-template-columns: repeat(10, 167px);
    grid-template-areas:
        ". . game game game game game game . ."
        ". . game game game game game game adr2 adr2"
        ". . game game game game game game adr2 adr2"
        ". . game game game game game game adr adr"
        ". . game game game game game game adr adr"
        ". . adu adu adu adu adu . adr adr"
        ". . . . . . . . adr adr"
        ". . . . . . . . adr adr"
        "gd gd gd gd gd gd gc gc gc gc"
        "gd gd gd gd gd gd gc gc gc gc"
        "gd gd gd gd gd gd gc gc gc gc"
        "sl sl sl sl sl sl sl sl sl sl";
	display: grid;
    gap: 10px;
    margin: 0 10px;
    justify-content: center;
    grid-auto-flow: dense;
    grid-auto-rows: minmax(126px, auto);
	padding-bottom: 30px;	
}
.main-box .main-grid .game-box {
	grid-area: game;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    scroll-margin-top: 100px;
}
.main-box .main-grid .game-box .game-wrapper {
    position: relative;
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0c1a32;
    overflow: hidden;
}
.main-box .main-grid .game-box .game-header {
    background-color: #0c1a32;
    align-items: center;
    /* display: flex;
	justify-content: flex-end; */
    width: 100%;
    padding: 0 0 0 10px;
    height: 50px;
    flex-shrink: 0;
	color: #e2ecfd;
	padding: 10px 0px;
    font-size: large;
}
.game-ad-container {
    display: flex;
    gap: 2px;
    align-items: center;
    position: relative;
}
.game-ad-right-1 {
    /* justify-content: flex-end; */
	grid-area: adr;
}
.game-ad-label-container {
    display: flex;
    width: 10px;
    height: 100%;
    overflow: hidden;
    align-items: center;
    justify-content: center; 
}
.game-ad-label {
    font-size: 9px;
    opacity: .7;
	color: #e2ecfd;
}
.game-ad-label.rotate {
    transform: rotate(-90deg);
}
.game-ad-1 {
    width: 300px;
    height: 600px;
    flex-shrink: 0;
}
.game-ad-right-2 {
    display: flex;
	grid-area: adr2;
}
.game-ad-2 {
    width: 300px;
    height: 250px;
}
.game-ad-under-1 {
    justify-content: center;
	grid-area: adu;
}
.game-ad-3 {
    width: 728px;
    height: 90px;
    flex-shrink: 0;
}
.game-item, .grid-list-item {
    width: 160px;
    height: 126px;
	position: relative;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
    cursor: pointer;
    border-radius: 6px;
    background-color: #131f31;
	border-radius: 5px;
    overflow: hidden;
}
.game-item:hover , .grid-list-item:hover {
    transform: scale(1.05);
}
.game-item img, .grid-list-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.game-item h5, .grid-list-item h5 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 1rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-item:hover h5, .grid-list-item:hover h5 {
    opacity: 1;
}

.description-box {
	grid-area: gd;
	position: relative;
    overflow: hidden;
    padding-bottom: 30px;
	line-height: 1.65rem;
    color: #9fadc5;
    font-weight: 550;
	background-color: #091729;
    padding: 10px 20px;
    font-size: 0.875rem;
    width: -webkit-fill-available;
    height: 100%;
    border-radius:5px;
}
.description-box h1 {
	margin-bottom: 1.5rem;
    margin-top: 1.5rem;
	color: #e2ecfd;
	font-weight: 900;
    font-size: 1.3rem;
}
.description-box .description-wrapper {
	display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    line-height: 1;
}
.description-box .description-wrapper .description-column{
	display: flex;
    flex-direction: column;
    gap: 15px;
}
.description-box .description-wrapper .description-column.left {
    width: 100%;
    flex-shrink: 1;
}
.description-box .description-wrapper .description-column.right {
    width: 200px;
    height: 140px;
}
.description-box .description-wrapper .description-column.right img{
	border-radius:5px;
}
.description-stats {
    display: flex;
    gap: 15px;
    background-color: rgba(255, 255, 255, .05);
    padding: 10px;
    align-items: center;
    border-radius: 6px;
}
.description-stats-item {
	display: flex;
    gap: 7px;
    align-items: center;
    justify-items: center;
}
.description-stats-item-text {
	display: flex;
    flex-direction: column;
    gap: 5px;
}
.description-stats-item-text-title {
	font-weight: 700;
}
.description-stats-item-text-subtitle {
	font-size: 0.8125rem;
}
.description-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px 0;
    font-size: 0.8125rem;
}
.description-info-item {
	display: flex;
    gap: 10px;
    align-items: center;
}
.description-info-item-title {
    width: 100px;
    flex-shrink: 0;
}
.description-info-item-content {
    color: #e2ecfd;
}
.description-info-item-content a {
    color: #ffdb2d;
    font-weight: 650;
	text-decoration: none;
}
.description-info-item-content a::after {
    content: ",";
}
.description-info-item-content a:last-child::after {
    content: "";
}
.full-width {
    width: 100%;
    border-top: 1px solid #a3b0c6;
    opacity: .1;
    margin: 30px 0;
}
.description-box h2 {
	color: #e2ecfd;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
	font-weight: 800;
    font-size: 1rem;
}
.comment-box {
	grid-area: gc;
}
.comment-container {
	position: sticky;
    align-self: start;
    top: 74px;
    height: auto;
	line-height: 1.65rem;
    color: #9fadc5;
    font-weight: 550;
	background-color: #091729;
    padding: 10px 20px;
    font-size: 0.875rem;
    width: -webkit-fill-available;
    border-radius: 6px;
}
.comment-header {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}
.comment-header .title {
    display: flex;
    align-items: center;
}
.comment-header .title img {
    margin-right: 5px;
    margin-top: 6px;
}
.comment-header .title h3 {
    color: #e2ecfd;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
	font-weight: 700;
    font-size: 0.9rem;
}
.library-box {
	grid-area: sl;
	background-color: #091729;
}
.library-wrapper {
	gap: 10px;
    position: relative;
	margin-left: -6px;
	display: flex;
	overflow: hidden;
    border-radius: 6px;
    padding: 20px;
}
.section-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.half-section-wrapper {
    width: calc(50% - 10px);
}
.section-wrapper .section-header {
    margin-left: 6px;
	display: flex;
    align-items: center;
	padding: 10px 0px;
    gap: 8px;
	color: #e2ecfd;
}
.section-wrapper .section-header .section-header-title {
    font-size: 1.125rem;
    font-weight: 850;
}
.section-wrapper .grid-list-container {
	position: relative;
}
.section-wrapper .grid-list-container {
	position: relative;
}
.section-wrapper .grid-list-container .grid-list {
    gap: 10px;
	list-style: none;
    padding: 0;
    margin: 0;
    background-color: #051b38;
    display: flex;
    flex-wrap: wrap;
}
/* Section Header Styling */
.section-header {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
    justify-content: space-between;
	padding-left: 70px;
	padding-top: 10px;
}

.section-header i {
    font-size: 1.5rem;
    color: #ffcc00;
}
.section-header .subtext {
    margin-left: auto;
    font-size: 0.9rem;
    color: #bbb;
    display: none;
}
.section-header .section-left {
	gap: 10px;
	display: flex;
    flex-direction: column;
}
.section-header .section-left .section-title{
	display: flex;
    gap: 15px;
    align-items: center;
}
.section-header .section-left .section-title h1{
	margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
	color: #e2ecfd;
}
.section-header .section-left .section-title h2{
	margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
	color: #e2ecfd;
}
.section-header .section-left p {
	line-height: 1.65rem;
    color: #9fadc5;
    font-weight: 550;
    font-size: 0.875rem;
    margin: 0;
}
.section-header .section-right {
	display: flex;
    flex-direction: row;
    flex-shrink: 0;
    gap: 5px;
}
.section-header .section-right .section-group-button {
	display: flex;
    align-items: center;
    gap: 5px;
}
.section-header .section-right .section-group-button .section-button {
	color: #e2ecfd;
    padding: 5px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    border: 2px solid transparent;
    border-radius: 6px;
	background-color: transparent;
}
.section-header .section-right .section-group-button button.selected {
    background-color: rgba(3, 34, 77, 1);
    border: 2px solid #0451b5;
}
/* Game List Container */
.game-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #051b38;
    display: flex;
    flex-wrap: wrap;
    padding-left: 60px;
}

.game-list li {
    width: 167px;
    height: 126px;
    margin: 10px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
    box-sizing: border-box;
	border: 1px solid gray;
}

.game-list li:hover {
    transform: scale(1.05);
}

.game-list li a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    position: relative;
}

.game-list li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.game-list li h5 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 1rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-list li:hover h5 {
    opacity: 1;
}

.section-description {
	margin-top: 10px;
	padding-left: 70px;
    padding-right: 30px;
}
.section-description .section-container {
    gap: 30px;
	line-height: 1.65rem;
    color: #9fadc5;
    font-weight: 550;
	position: relative;
    background-color: #091729;
    padding: 10px 20px;
    font-size: 0.875rem;
    width: -webkit-fill-available;
    height: 100%;
    border-radius: 6px;
}
.section-description .section-container h2 {
	color: #e2ecfd;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
	font-weight: 800;
    font-size: 1rem;
}
.section-description .section-container p {

}
.slick-arrow:before {
    top: 15px;
    background-size: 40px;
    left: 6px;
}
.slick-arrow {
    height: 64px;
    width: 32px;
    border-radius: 16px;
    top: calc(50% - 32px);
}
.slick-next:before, .slick-prev:before
 {
	content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 50px;
    background: url(https://ae01.alicdn.com/kf/H3a2170950d3848dd85531682a4dc5ef21.png) no-repeat;
}
.slick-next-default , .slick-prev-default 
{
  position: absolute;
  height: 64px;
    width: 32px;
    border-radius: 16px;
    top: calc(50% - 32px);
  transform: translateY(-50%);
  z-index: 99;
  background: rgba(0, 0, 0, .25);
  color: #fff;
  border: none;
  cursor: pointer;
  display: block; /* Initially hidden */
  justify-content: center;
  font-size: 0;
    line-height: 0;
}

.slick-prev {
  left: 10px;
}

.slick-next {
  right: 10px;
}

.slick-prev.show,
.slick-next.show {
  display: flex;
}
/* Footer Styling */
.footer {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

.footer .nav-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}

.footer .nav-links a {
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.footer .nav-links a:hover {
    color: #ffcc00;
}

.footer .social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}

.footer .social-links a {
    color: #fff;
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.footer .social-links a:hover {
    color: #ff7e5f;
}

.footer .copyright {
    font-size: 0.9rem;
    color: #bbb;
}
.pagaintaion {
	padding:20px;
}
.page-link {
	font-size:large;
}
.game-iframe-item {
    align-items: center;
    display: flex;
    gap: 8px;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: Helvetica, Arial, sans-serif;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) 0 0 / 300% 300%;
    animation: pluto-gradient 60s ease 0s infinite normal none running;
}
.game-iframe-item .title {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}
.game-iframe-item img {
    border-radius: 12px;
    box-shadow: 0 4px 6px #1312308f;
    margin-top: 8px;
}
.game-iframe-item .play-button {
    background: #34d834;
    border: none;
    border-radius: 10px;
    box-shadow: inset 0 2px 4px #ffffff60, inset 0 -3px 3px #00000031, 0 8px 15px #061d6280;
    color: #0b2167;
    font-size: 18px;
    font-weight: 700;
    height: 50px;
    margin-top: 32px;
    padding: 0 30px;
    text-transform: uppercase;
    width: 200px;
}
#game-play {
	width:100%;
	height:100%;
}
#game-iframe{
	display:none;
}
.game-iframe {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 0;
}
.fullscreen {
    align-items: center;
    border: none;
    color: #fff;
    float: right;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    justify-content: center;
    padding: 0;
    transition: all 0.3s ease-in-out;
}
.breadcrumb {
  white-space: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 0px;
  margin-bottom: 0px;
}
.breadcrumb p:not(:first-child):before {
  content: "";
  border: solid #6f6f6f;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin: 0 8px 0 2px;
}
.breadcrumb p {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.breadcrumb p:not(:last-child) a,
a.is-link {
  color: #1a73d6;
}
.custom-page {
	color: #e2ecfd;
	padding: 20px;
}
@media only screen and (max-width: 1920px) and (min-width: 1821px) {
	.main-box .main-grid {
		grid-template-columns: repeat(10, 167px);
		grid-template-areas: ". . game game game game game game . ." 
		". . game game game game game game adr2 adr2" 
		". . game game game game game game adr2 adr2" 
		". . game game game game game game adr adr" 
		". . game game game game game game adr adr" 
		". . . . . . . . adr adr" 
		". . adu adu adu adu adu . adr adr" 
		". . . . . . . . adr adr" 
		"gd gd gd gd gd gd gc gc gc gc" 
		"gd gd gd gd gd gd gc gc gc gc" 
		"gd gd gd gd gd gd gc gc gc gc" 
		"sl sl sl sl sl sl sl sl sl sl" ;	
	}
	.main-box .main-grid .game-box {
		width: calc(167px * 6 + 10px * 5);
		height: calc(126px * 5 + 10px * 4);
        
	}
}
@media only screen and (max-width: 1820px) and (min-width: 1643px) {
	.main-box .main-grid {
		grid-template-columns: repeat(9, minmax(167px, 0fr));
        grid-template-areas: ". . game game game game game . ." 
		". . game game game game game adr2 adr2" 
		". . game game game game game adr2 adr2" 
		". . game game game game game adr adr" 
		". . . . . . . adr adr" 
		". . adu adu adu adu adu adr adr" 
		". . . . . . . adr adr" 
		". . . . . . . adr adr" 
		"gd gd gd gd gd gc gc gc gc" 
		"gd gd gd gd gd gc gc gc gc" 
		"gd gd gd gd gd gc gc gc gc" 
		"sl sl sl sl sl sl sl sl sl" ;	
	}
	.main-box .main-grid .game-box {
		width: calc(167px * 5 + 10px * 4);
		height: calc(126px * 4 + 10px * 3);
        
	}
}
@media only screen and (max-width: 1642px) and (min-width: 1476px) {
	.main-box .main-grid {
		grid-template-columns: repeat(8, minmax(167px, 0fr));
        grid-template-areas: ". game game game game game . ." ". game game game game game adr2 adr2" ". game game game game game adr2 adr2" ". game game game game game adr adr" ". . . . . . adr adr" ". adu adu adu adu adu adr adr" ". . . . . . adr adr" ". . . . . . adr adr" "gd gd gd gd gd gc gc gc" "gd gd gd gd gd gc gc gc" "gd gd gd gd gd gc gc gc" "sl sl sl sl sl sl sl sl" ;
	}
	.main-box .main-grid .game-box {
		width: calc(167px * 5 + 10px * 4);
		height: calc(126px * 4 + 10px * 3);
        
	}
}
@media only screen and (max-width: 1475px) and (min-width: 1331px) {
	.main-box .main-grid {
		grid-template-columns: repeat(8, 150px);
         grid-template-areas: ". game game game game game adr2 adr2" ". game game game game game adr2 adr2" ". game game game game game adr2 adr2" ". game game game game game adr adr" ". . . . . . adr adr" ". adu adu adu adu adu adr adr" ". . . . . . adr adr" ". . . . . . adr adr" "gd gd gd gd gd gc gc gc" "gd gd gd gd gd gc gc gc" "gd gd gd gd gd gc gc gc" "sl sl sl sl sl sl sl sl" ;
	}
	.main-box .main-grid .game-box {
		width: calc(150px * 5 + 10px * 4);
		height: calc(113px * 4 + 10px * 3);
        
	}
	.game-ad-right-1, .game-ad-right-2{
         display: flex;
    }
	.game-item {
		width: 150px;
		height: 113px;
	}
}
@media only screen and (max-width: 1330px) and (min-width: 1177px){
	.main-box .main-grid {
		grid-template-columns: repeat(7, 150px);
        grid-template-areas: "game game game game game . ." 
		"game game game game game adr2 adr2" 
		"game game game game game adr2 adr2" 
		"game game game game game adr adr" 
		". . . . . adr adr" 
		"adu adu adu adu adu adr adr" 
		". . . . . adr adr" 
		". . . . . adr adr" 
		"gd gd gd gd gc gc gc" 
		"gd gd gd gd gc gc gc" 
		"gd gd gd gd gc gc gc" 
		"sl sl sl sl sl sl sl" ;
	}
	.main-box .main-grid .game-box {
		width: calc(150px * 5 + 10px * 4);
		height: calc(113px * 4 + 10px * 3);
	}
	.game-ad-under-1{
         display: none;
    }
	.game-ad-right-1, .game-ad-right-2{
         display: flex;
    }
	.game-item {
		width: 150px;
		height: 113px;
	}
}
@media only screen and (max-width: 1176px) and (min-width: 1016px) {
	.main-box .main-grid {
		grid-template-columns: repeat(6, 150px);
        grid-template-rows: auto;
         grid-template-areas: "game game game game adr2 adr2" "game game game game adr2 adr2" "game game game game . ." ". . . . . ." ". . . . . ." ". . . . . ." "gd gd gd gd adr adr" "gd gd gd gd adsky adsky" "gd gd gd gd adsky adsky" "gc gc gc gc adsky adsky" "sl sl sl sl sl sl" ;
	}
	.main-box .main-grid .game-box {
		width: calc(150px * 4 + 10px * 3);
		height: calc(113px * 3 + 10px * 2);
	}
	.game-ad-under-1{
         display: none;
    }
	.game-item {
		width: 100%;
		height: 100%;
	}
}
@media only screen and (max-width: 1015px) and (min-width: 751px){
	.main-box .main-grid {
		grid-template-columns: repeat(5, minmax(100px, 1fr));
        grid-template-rows: auto;
        grid-template-areas: "game game game game game" 
		"game game game game game" 
		"game game game game game" 
		". . . . ." 
		". . . . ." 
		". . . . ." 
		"gd gd gd gd gd" 
		"gc gc gc gc gc" 
		"sl sl sl sl sl" ;
	}
	.main-box .main-grid .game-box {
		width: 100%;
        height: 100%;
        min-height: calc(75px * 3 + 10px * 2);
        min-width: calc(100px * 4 + 10px * 3);
        max-height: calc(100vh - 37px);
	}
	.game-ad-right-1, .game-ad-right-2, .game-ad-under-1{
         display: none;
    }
	.game-item {
		width:100%;
		height:100%;
	}
	#nav_toggle_mobile  {
		display:block;
	}
	.nav-right {
		display:none;
	}
}
@media only screen and (max-width: 750px) {
	.main-box .main-grid {
		grid-template-columns: repeat(3, minmax(100px, 1fr));
        grid-template-rows: auto;
        grid-template-areas: "game game game" "game game game" "game game game" ". . ." ". . ." ". . ." "gd gd gd" "gc gc gc" "sl sl sl" ;
	}
	.main-box .main-grid .game-box {
		width: 100%;
        height: 100%;
        min-height: calc(100px * 3 + 10px * 2);
        min-width: calc(75px * 3 + 10px * 3);
        max-height: calc(100vh - 37px);
	}
	.game-ad-right-1, .game-ad-right-2, .game-ad-under-1{
         display: none;
    }
	.game-item {
		width:100%;
		height:100%;
	}
	.nav-right {
		display:none;
	}
	#nav_toggle_mobile  {
		display:block;
	}
}
@media screen and (max-height: 600px) and (max-width: 1329px) {
	
}
@media screen and (width: 1024px) {
	
}
@media (min-width: 768px) {
    .section-header .subtext {
        display: inline-block;
    }
}