.preload * {

  -webkit-transition: none !important;

  -moz-transition: none !important;

  -ms-transition: none !important;

  -o-transition: none !important;

}

::-webkit-scrollbar {

  width: 12px;

  background-color: transparent;

}

::-webkit-scrollbar:hover {

  background-color: rgba(0, 0, 0, 0.09);

}

::-webkit-scrollbar-thumb:vertical {

  background: rgba(0, 0, 0, 0.5);

  -webkit-border-radius: 100px;

  background-clip: padding-box;

  border: 2px solid transparent;

  min-height: 10px;

}

::-webkit-scrollbar-thumb:vertical:active {

  background: rgba(0, 0, 0, 0.61);

  -webkit-border-radius: 100px;

}

@font-face {

  font-family: Torus;

  src: url(../font/torus-bold-latin.ttf);

  font-weight: 200;

  font-display: swap;

}

@font-face {

  font-family: Torus;

  src: url(../font/torus-semibold-latin.ttf);

  font-weight: 100;

  font-display: swap;

}

@font-face {

  font-family: Proxima Nova;

  src: url(../font/proxima-nova-regular-latin.ttf);

  font-weight: 100;

  font-display: swap;

}

@font-face {

  font-family: Proxima Nova;

  src: url(../font/proxima-nova-bold-latin.ttf);

  font-weight: 600;

  font-display: swap;

}

@font-face {

  font-family: Icons;

  src: url(../font/vedede_icons.woff);

  font-weight: 700;

  font-display: block;

}

:root {

  --denim-blue: #002b50;

  --denim-pink: #330000;

  --background: #0e64c0;

  --grey-3: #7e91ab;

  --grey-5: #bac9de;

  --grey-7: #f0f5fc;

  --grey-9: #f9fbff;

  --aking-blue: #009cff;

  --aking-hover: #0097f5;

  --pure-white: #fff;

  --yellow: #ffd400;

  --maxPageWidth: 1144px;

  --maxGameWidth: 1031px;

  --cellSize: 100px;

  --cellSpacing: 16px;

  --navShadow: 0 6px 32px 0 rgba(0, 0, 0, 0.24);

  --bezier: cubic-bezier(0.25, 0.1, 0.25, 1);

  --gameInfoHeight: 64px;

  --borderRadius: 20px;

}

*,

*:before,

*:after {

  -webkit-box-sizing: inherit;

  box-sizing: inherit;

  margin: 0;

  padding: 0;

}

*:before,

*:after {

  font-family: icons;

}

img,

a {

  -webkit-user-drag: none;

  -khtml-user-drag: none;

  -moz-user-drag: none;

  -o-user-drag: none;

  user-drag: none;

}

img {

  max-width: 100%;

  height: auto;

}

input[type="search"]::-webkit-search-decoration,

input[type="search"]::-webkit-search-cancel-button,

input[type="search"]::-webkit-search-results-button,

input[type="search"]::-webkit-search-results-decoration {

  -webkit-appearance: none;

}

html {

  background: var(--background);

  box-sizing: border-box;

  color: var(--denim-blue);

  font: 400 16px/24px Proxima Nova, sans-serif;

  overflow-y: scroll;

  overflow-x: hidden;

}

body {

  margin: 0;

  padding: 0 !important;

  width: 100%;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  -webkit-overflow-scrolling: touch;

  -webkit-text-size-adjust: 100%;

  width: 100%;

  text-rendering: optimizeSpeed;

}

h1,

h2 {

  font: 200 24px Torus, sans-serif;

}

a {

  text-decoration: none;

  color: var(--aking-blue);

}

a:hover {

  text-decoration: underline;

}

.sticky {

  position: sticky !important;

  top: 16px !important;

}

.Bg {

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  bottom: 0;

  z-index: -1;

}

.app-root {

  width: 100%;

  height: 100%;

  max-width: var(--maxPageWidth);

  position: relative;

  margin-left: auto;

  margin-right: auto;

}

.De {

  grid-template-areas: "menu-spacer menu-spacer item-trending-0 item-trending-0 item-trending-0 item-trending-8 item-trending-8 item-trending-3 item-trending-3 .........." "item-trending-5 item-trending-5 item-trending-0 item-trending-0 item-trending-0 item-trending-8 item-trending-8 item-trending-3 item-trending-3 .........." "item-trending-5 item-trending-5 item-trending-0 item-trending-0 item-trending-0  item-trending-6 item-trending-6 item-trending-1 item-trending-1 item-trending-1" "item-trending-4 item-trending-4 item-trending-7 item-trending-7 .......... item-trending-6  item-trending-6 item-trending-1 item-trending-1 item-trending-1" "item-trending-4 item-trending-4 item-trending-7 item-trending-7 .......... .......... .......... item-trending-1 item-trending-1 item-trending-1" "item-trending-2 item-trending-2 item-trending-2 item-trending-9 item-trending-9 item-trending-10 item-trending-10 item-trending-11 item-trending-11 .........." "item-trending-2 item-trending-2 item-trending-2 item-trending-9 item-trending-9 item-trending-10 item-trending-10 item-trending-11 item-trending-11 .........." "item-trending-2 item-trending-2 item-trending-2 .......... .......... .......... .......... .......... .......... ..........";

}

.oe {

  display: grid;

  grid-template-columns: repeat(10, var(--cellSize));

  grid-template-rows: repeat(auto-fill, var(--cellSize));

  grid-gap: var(--cellSpacing);

  grid-auto-flow: row dense;

  justify-content: center;

  padding: 0;

}

.oe::before {

  content: "";

  display: block;

  grid-column-start: span 2;

}

.me {

  position: relative;

  padding: 16px 0 0;

}

.cSt {

  display: flex;

  width: 100%;

  height: 100%;

  justify-content: center;

  flex-direction: column;

  align-items: center;

  position: relative;

  transition: transform 0.6s var(--bezier);

  will-change: transform;

}

.cSt:hover {

  transform: scale(1.02) translateY(-4px);

  transition-duration: 0.3s;

}

.cSt:after {

  content: "";

  opacity: 0;

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(transparent 25%, rgba(0, 0, 0, 0.3));

  z-index: 2;

  transition: opacity 0.3s var(--bezier);

  z-index: 21;

  pointer-events: none;

}

.cSt:after {

  border-radius: var(--borderRadius);

}

.cSt:hover:after {

  opacity: 1;

}

.cSt:hover .Pab {

  opacity: 0.96;

}

.g0 {

  grid-area: item-trending-0;

}

.g1 {

  grid-area: item-trending-1;

}

.g2 {

  grid-area: item-trending-2;

}

.g3 {

  grid-area: item-trending-3;

}

.g4 {

  grid-area: item-trending-4;

}

.g5 {

  grid-area: item-trending-5;

}

.g6 {

  grid-area: item-trending-6;

}

.g7 {

  grid-area: item-trending-7;

}

.g8 {

  grid-area: item-trending-8;

}

.g9 {

  grid-area: item-trending-9;

}

.g10 {

  grid-area: item-trending-10;

}

.g11 {

  grid-area: item-trending-11;

}

.Gn {

  visibility: visible;

  pointer-events: none;

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  padding: 6px;

  color: #fff;

  text-align: center;

  font-size: 16px;

  line-height: 24px;

  font-weight: 600;

  z-index: 22;

  transition: transform 0.3s var(--bezier) 0.1s, opacity 0.3s var(--bezier) 0.1s;

  will-change: transform;

}

.cSt:not(:hover) .Gn {

  transform: translateY(8px);

  opacity: 0;

}

.bVs {

}

.cSt:hover .Gn,

.cSt:hover .wpp-post-title {

  opacity: 1;

  transform: translateZ(0);

}

.Tf {

  display: flex;

  min-width: var(--cellSize);

  min-height: var(--cellSize);

  position: relative;

}

.Tf .Gn,

.Tf .wpp-post-title {

  font-size: 12px !important;

  line-height: 15px !important;

}

.Pa {

  width: 100%;

  height: 100%;

  border-radius: var(--borderRadius);

  transition: transform 0.6s var(--bezier);

}

.Pab {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  opacity: 0.5;

  border-radius: var(--borderRadius);

  box-shadow: 0 6px 12px 0 rgb(0 0 0/45%);

  pointer-events: none;

}

.menu {

  width: calc(var(--cellSize) * 2 + var(--cellSpacing));

  height: 64px;

  position: absolute;

  max-width: inherit;

  top: 30px;

  background: #fff;

  box-shadow: var(--navShadow);

  overflow: hidden;

  border-radius: 50px;

  display: flex;

  z-index: 999;

  transition: width, height 0.25s ease;

  will-change: transform;

}

.menu.oPs .logo {

  display: none;

}

.menu .logo {

  width: 100%;

  height: 100%;

  flex-basis: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  padding-left: 15px;

  z-index: 1;

}

.menu .logo a {

  display: flex;

  width: 100%;

  align-items: center;

  justify-content: center;

  transition: transform 0.3s ease;

  will-change: transform;

}

.menu .logo a:hover {

  transform: scale(1.05);

}

.gP .logo {

  width: 60%;

}

.menu .logo svg {

  width: 120px;

  height: 25px;

}

.menu .nav-items {

  width: 80px;

  height: 100%;

}

.menu .nav-items ul {

  list-style: none;

  display: flex;

  align-items: center;

  width: 100%;

  height: 100%;

  position: relative;

}

.menu .nav-items ul li {

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

  flex: 1;

  height: 100%;

  cursor: pointer;

}

..menu .nav-items ul li::after {

  content: "";

  border-right: 2px solid var(--grey-7);

  height: 100%;

  position: absolute;

  top: 0;

  right: 0;

  left: 0;

}

.menu .nav-items ul li:last-child::after {

  display: none;

}

.menu .nav-items ul li:hover {

  background-color: var(--grey-7);

}

.menu .nav-items ul li img {

  width: 24px;

}

.menu .nav-items ul li svg {

  width: 22px;

}

.menu .nav-items ul li svg path {

  fill: var(--grey-3);

}

.nTp {

  position: relative;

  display: flex;

  justify-content: space-between;

  max-width: var(--maxPageWidth);

  margin: 40px auto 0;

  padding: 0;

}

.nTp.mT {

  margin: 136px auto 0;

  max-height: calc(100vh - 181px);

}

.snTp {

  flex-direction: unset !important;

  align-items: unset !important;

}

.osY {

  overflow-y: auto;

}

.blocks {

  margin-right: 8px;
  position: relative;

}

.gTa {

  grid-template-areas: "head-spacer head-spacer head-spacer .......... .........." "item-trending-1 item-trending-1 item-trending-2 item-trending-2 .........." "item-trending-1 item-trending-1 item-trending-2 item-trending-2 .........." "item-trending-3 item-trending-3 item-trending-4 item-trending-4 .........." "item-trending-3 item-trending-3 item-trending-4 item-trending-4 ..........";

}

.nGs {

  display: grid;

  grid-template-columns: repeat(5, var(--cellSize));

  grid-template-rows: repeat(auto-fill, var(--cellSize));

  grid-gap: var(--cellSpacing);

  grid-auto-flow: row dense;

  padding: 0;

}

.nGs::before,

.cGs::before {

  content: "";

  display: block;

  grid-column-start: span 3;

}

.cTa {

  grid-template-areas: " head-spacer     head-spacer     head-spacer     ..........      ..........      ..........      ..........      ..........      ..........      ..........      " " item-trending-1 item-trending-1 item-trending-2 item-trending-2 item-trending-3 item-trending-3 item-trending-4 item-trending-4 item-trending-5 item-trending-5 " " item-trending-1 item-trending-1 item-trending-2 item-trending-2 item-trending-3 item-trending-3 item-trending-4 item-trending-4 item-trending-5 item-trending-5 ";

}

.cGs {

  display: grid;

  grid-template-columns: repeat(10, var(--cellSize));

  grid-template-rows: repeat(auto-fill, var(--cellSize));

  grid-gap: var(--cellSpacing);

  grid-auto-flow: row dense;

  padding: 0;

}

.head-title {

  width: calc(var(--cellSize) * 3 + var(--cellSpacing) * 2);

  height: var(--cellSize);

  position: absolute;

  top: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 10px 16px;

  background: hsla(0, 0%, 100%, 0.5);

  box-shadow: 0 6px 12px 0 rgb(0 0 0/24%);

  border-radius: var(--borderRadius);

}

.head-title h2 {

  font-size: 28px;

  color: var(--denim-pink);

  line-height: 20px;

  display: flex;

  align-items: baseline;

  text-align: center;

}

.tGs {

  display: grid;

  grid-template-columns: repeat(10, var(--cellSize));

  grid-template-rows: repeat(auto-fill, var(--cellSize));

  grid-gap: var(--cellSpacing);

  grid-auto-flow: row dense;

  padding: 0;

}

.tGs::before {

  content: "";

  display: block;

  grid-column-start: span 2;

}

.tGs .head-title {

  width: calc(var(--cellSize) * 2 + var(--cellSpacing) * 1);

}

.tGrd {

  grid-template-areas: "head-spacer head-spacer head-spacer .......... .......... .......... .......... .......... .........." "........... ........... ........... .......... .......... .......... .......... .......... ..........";

}

.about {

  width: 100%;

  position: relative;

  margin: 0 0 24px;

  padding: 18px 24px;

  background: #fff;

  box-shadow: 0 6px 12px 0 rgb(0 0 0/24%);

  z-index: 10;

}

.about .sTitle {

  font-size: 9px;

  letter-spacing: 1px;

  color: var(--grey-3);

  text-transform: uppercase;

  font-weight: 600;

  margin: 0;

  padding: 0;

}

.about h1 {

  font-size: 20px;

}

.about h3 {

  font-size: 18px;

}

.about p {

  font-size: 16px;

}

.about ul,

p,

h2,

h3,

ol {

  display: block;

  margin-block-start: 1em;

  margin-block-end: 1em;

  margin-inline-start: 0;

  margin-inline-end: 0;

}

.about ul,

.about ol {

  padding-inline-start: 40px;

}

.about .tags {

  padding-inline-start: 0;

  list-style: none;

  display: flex;

  align-items: center;

  width: 100%;

  flex-wrap: wrap;

}

.about .tags li {

  margin: 4px 4px 0 0;

}

.about .tags a {

  width: 100%;

  min-height: 34px;

  display: flex;

  align-items: center;

  justify-content: space-around;

  padding: 3px 10px;

  border: 2px solid var(--grey-5);

  border-radius: 100px;

  color: var(--grey-5);

  font-weight: 700;

  text-transform: uppercase;

  transition: border-color 0.2s var(--bezier), color 0.2s var(--bezier);

  will-change: border-color, color;

}

.about .tags a:hover {

  text-decoration: none;

  border-color: var(--aking-blue);

  color: var(--aking-blue);

}

.about .tags .imgp {

  padding: 3px 10px 3px 3px;

}

.about .tags a img {

  border-radius: 50%;

  margin-right: 3px;

}

.about .tags p {

  padding: 0;

  margin: 0;

  font-size: 13px;

  line-height: 1px;

}

.ftVideo {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  width: 100%;

  height: 100%;

  border-radius: var(--borderRadius);

  opacity: 0;

  z-index: 20;

  object-fit: cover;

}

.csT {

  opacity: 0;

}

.csT .ssb {

  pointer-events: none;

}

.csT .search-tab {

  transform: translateX(calc(-100% - 32px));

}

.search-tab {

  background-color: var(--background);

  width: 35%;

  height: 100%;

  position: fixed;

  z-index: 1002;

  left: 0;

  top: 0;

  bottom: 0;

  box-shadow: 0 12px 16px 0 rgb(0 0 0/50%);

  padding: 53px 30px 0;

  transition: transform 0.25s;

  will-change: transform;

}

.search-tab .input {

  display: flex;

  width: 93%;

  height: 64px;

  border-radius: var(--borderRadius);

  box-shadow: var(--navShadow);

}

.search-tab .input .icon {

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #fff;

  height: 100%;

  flex-basis: 12.36%;

  border-right: solid 2px var(--grey-7);

  border-bottom-left-radius: 16px;

  border-top-left-radius: 16px;

}

#mobile-back svg {

  padding: 0 6px 0 20px;

  width: 100%;

  height: 100%;

}

.search-tab .input .searchin {

  flex-basis: 80%;

  appearance: none;

  outline: none;

  border: 0;

  font: 200 21px Torus, sans-serif;

  color: var(--denim-blue);

  padding: 0 0 0 16px;

}

.search-tab .input .searchin::placeholder {

  color: var(--grey-5);

}

.search-tab .input .actions {

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #fff;

  height: 100%;

  flex-basis: 10%;

  border-bottom-right-radius: 16px;

  border-top-right-radius: 16px;

}

.search-tab .input .close-search {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  position: absolute;

  right: -32px;

  border: 0;

  background-color: #fff;

  outline: none;

  cursor: pointer;

  box-shadow: 0 6px 12px 0 rgb(0 0 0/24%);

  transition: all 0.6s var(--bezier);

}

.search-tab .input .close-search:hover {

  transform: scale(1.02) translateY(-4px);

  transition-duration: 0.3s;

  box-shadow: 0 12px 12px 0 rgb(0 0 0/20%);

}

.close-search::before {

  content: "\e900";

  font-size: 18px;

  display: block;

  transform: rotate(180deg);

  color: var(--grey-3);

}

.search-tab h2 {

  margin-top: 1.5em;

}

.search-tab .gL {

  display: flex;

  flex-wrap: wrap;

}

.search-tab .gL:first-child {

  margin-left: 0;

}

.j {

  width: 94px;

  height: 94px;

  margin: 0 16px 16px 0;

}

.jb {

  width: 293px;

  height: 293px;

  margin: 0;

  margin-bottom: 16px;

}

.search-icon::before {

  content: "\e901";

  font-size: 24px;

  color: var(--grey-3);

  display: block;

}

.x-icon {

  display: none;

  cursor: pointer;

}

.x-icon::before {

  content: "\e902";

  font-size: 21px;

  color: var(--grey-3);

  display: block;

}

.menu .input {

  display: none;

}

.sbb.c {

  pointer-events: none;

  opacity: 0;

}

.sbb {

  position: fixed;

  top: 0;

  left: 0;

  bottom: 0;

  z-index: 997;

  right: 0;

  background-color: rgba(0, 0, 0, 0.5);

  transition: opacity 0.25s;

}

.oPs {

  width: inherit;

  z-index: 9999;

  height: 64px;

  transition: all 0.4s;

}

.rT .oPs {

  width: var(--maxPageWidth);

  max-width: var(--maxPageWidth);

  z-index: 9999;

  height: 64px;

  transition: all 0.4s;

}

.menu.oPsw .input {

  width: 100%;

  height: 100%;

  display: flex;

}

.oPsw .input .icon {

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  border-right: solid 2px var(--grey-7);

  width: 159px;

}

.oPsw .input .icon img {

  height: 50%;

  opacity: 0;

}

.oPsw .input .searchin {

  flex-basis: 90%;

  font-family: torus;

  font-size: 23px;

  outline: none;

  border: 0;

  padding-left: 15px;

  color: var(--denim-blue);

}

.oPsw .input input::placeholder {

  color: var(--grey-5);

}

.oPsw .input .actions {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 64px;

}

.sM {

  position: sticky;

  visibility: hidden;

  width: 100%;

  background-color: var(--background);

  padding: 32px 30px;

  top: 74px;

  border-radius: 8px;

  transform: translateY(calc(-100% - 32px));

  display: flex;

  align-items: center;

  z-index: 998;

  will-change: transform;

  color: var(--denim-pink);

}

.sM.o {

  visibility: visible;

  transform: translateY(0);

  pointer-events: all;

  transition: all 0.3s ease;

  will-change: transform;

}

.sT {

  position: fixed;

  top: 0;

  width: inherit;

  max-width: inherit;

  min-height: 100vh;

  height: 100%;

  clip-path: inset(80px -1px);

  z-index: 998;

  pointer-events: none;

}

.sgP.sT {

  clip-path: inset(56px -1px);

}

.sgP .sM {

  top: 54px;

}

.sGF {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

}

.sM .sc {

}

.sM .sc:first-child {

  flex: 1;

  height: 100%;

  align-self: flex-start;

}

.oL {

  position: fixed;

  overflow-y: scroll;

  width: 100%;

}

.fW {

  max-width: 98%;

}

.rT {

  transition: all 0.2s ease;

}

.dPe {

  pointer-events: none;

}

.game {

  display: flex;

  width: 100%;

  height: 100%;

  justify-content: space-between;

  padding: 16px 0 0;

}

.contanier {

  display: flex;

  flex-direction: column;

  order: -1;

}

.middleAd {

  position: absolute;

  background-color: #000;

  width: 100%;

  height: calc(100% - var(--gameInfoHeight));

  display: flex;

  justify-content: center;

  align-items: center;

  opacity: 1;

  z-index: 10;

}

.mAd {

  width: 336px;

  height: 280px;

}

.gamePlay-bg {

  width: 100%;

  height: 100%;

  filter: url(blur.svg#blur);

  -ms-filter: blur(45px);

  -webkit-filter: blur(45px);

  filter: blur(45px);

}

.gamePlay-icon {

  cursor: pointer;

  border-radius: 90px;

  border: solid 1px #fff;

  box-shadow: 0 0 22px #666;

  width: 180px;

  height: 180px;

}

.gamePlay-button {

  margin-top: 10px;

  width: 180px;

  height: 55px;

  line-height: 45px;

  text-align: center;

  font-size: 28px;

  font-weight: 700;

  background: #6f0;

  background: -webkit-linear-gradient(#66ff00, #336601);

  border-radius: 10px;

  color: #fff;

  border: solid 4px #fff;

  text-shadow: 1px 1px #505050;

  cursor: pointer;

}

.gamePlay-button:hover {

  background: #77952b;

}

.adinfo {

  position: absolute;

  width: 100%;

  height: 50px;

  bottom: 25px;

  display: flex;

  align-items: center;

  justify-content: flex-end;

}

.count {

  color: #fff;

  padding: 10px;

}

button.skip {

  height: 100%;

  width: 120px;

  display: none;

  border: 2px solid var(--grey-7);

  border-right: 0;

  font-size: 16px;

  background: 0 0;

  color: var(--grey-7);

  cursor: pointer;

  opacity: 0.7;

  transition: opacity 0.2s var(--bezier);

  will-change: opacity;

}

button.skip:hover {

  opacity: 1;

}

.progress {

  position: absolute;

  bottom: 0;

  width: 100%;

  height: 5px;

  background-color: var(--grey-5);

}

.bar {

  width: 0%;

  height: 100%;

  background-color: var(--yellow);

}

.pbA {

  animation: bar 25s linear forwards;

}

@keyframes bar {

  0% {

    width: 0%;

  }

  100% {

    width: 100%;

  }

}

.gameplay {

  position: relative;

  display: flex;

  flex-direction: column;

  width: var(--maxGameWidth);

  height: 680px;

  max-height: 680px;

  box-shadow: 0 6px 12px 0 rgb(0 0 0/24%);

  margin-bottom: 16px;

  overflow: hidden;

}

.iframe {

  background-color: #000;

  width: 100%;

  height: 100%;

  border: 0;

  outline: 0;

  overflow: hidden;

}

.fs {

  position: fixed !important;

  z-index: 999 !important;

  box-shadow: none !important;

  left: 0 !important;

  top: 0 !important;

  bottom: 0 !important;

  width: 100vw !important;

  height: 100vh !important;

  max-height: 100% !important;

}

.gameInfo {

  background-color: #fff;

  width: 100%;

  min-height: var(--gameInfoHeight);

  height: var(--gameInfoHeight);

  display: flex;

  justify-content: space-between;

}

.gameInfo .w {

  height: 100%;

  max-width: 400px;

  display: flex;

  align-items: center;

  padding: 12px;

  flex-direction: row;

}

.gameInfo .w img {

  margin-right: 12px;

  border-radius: 8px;

  box-shadow: 0 4px 8px 0 rgb(0 0 0/24%);

}

.gameInfo .w h2 {

  font-size: 21px;

}

.wR {

  flex-direction: row-reverse !important;

  flex: none !important;

}

.cB {

  cursor: pointer;

  background: 0 0;

  border: 0;

  outline: 0;

  -webkit-box-sizing: content-box;

  box-sizing: content-box;

  webkit-appearance: none;

  -moz-appearance: none;

  -webkit-appearance: none;

  appearance: none;

  display: flex;

  align-items: center;

  justify-content: center;

}

.ficon {

  width: 25px;

  height: 25px;

  position: relative;

  margin-left: 30px;

  cursor: pointer;

}

.ficon::before {

  content: "";

  font-size: 24px;

  position: absolute;

  bottom: 0;

  pointer-events: none;

  color: var(--grey-3);

}

.fullscreen::before {

  content: "\e903";

  font-size: 22px;

  bottom: auto;

}

.fullscreen:checked.fullscreen::before {

  content: "\e904";

}

.share::before {

  content: "\e905";

  display: inline-block;

  margin: auto 0;

}

.controls::before {

  content: "\e906";

  font-size: 35px;

  bottom: auto;

}

.controls:checked.controls::before {

  content: "\e907";

}

.oeS {

  display: grid;

  grid-template-columns: repeat(2, var(--cellSize));

  grid-template-rows: repeat(auto-fill, var(--cellSize));

  grid-gap: var(--cellSpacing);

  grid-auto-flow: row dense;

  justify-content: center;

  padding: 0;

}

.DeS {

  grid-template-areas: "item-trending-1 item-trending-1" "item-trending-1 item-trending-1" "item-trending-2 item-trending-2" "item-trending-2 item-trending-2";

}

.oeR {

  display: grid;

  grid-template-columns: repeat(9, var(--cellSize));

  grid-template-rows: repeat(2, var(--cellSize));

  grid-gap: var(--cellSpacing);

  grid-auto-flow: row dense;

  justify-content: center;

  padding: 0;

}

.DeR {

  grid-template-areas: ".......... .......... .......... .......... .......... .......... .......... .......... .........." ".......... .......... ad-728 ad-728 ad-728 ad-728 ad-728 ad-728 ad-728";

}

.DeRAd {

  grid-template-areas: "ad-728 ad-728 ad-728 ad-728 ad-728 ad-728 ad-728 ad-728 ad-728";

}

.ads {

  background: hsla(0, 0%, 100%, 0.5);

  position: relative;

}

.ads::after {

  content: "Advertisement";

  font: 400 9px/2 Arial, sans-serif;

  text-transform: uppercase;

  text-align: center;

  opacity: 0.7;

  height: 20px;

  letter-spacing: 1px;

  color: var(--denim-pink);

  width: 100%;

  position: absolute;

  bottom: -20px;

  left: 0;

}

.ad728 {

  grid-area: ad-728;

}

.cAd {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  height: 100%;

}

.cAd .ads:first-child {

  margin-bottom: 57px;

}

.s1o {

  order: -2;

}

.s1 {

  width: 160px;

  margin-top: 80px;

}

.s2 {

  width: 300px;

}

.s3 {

  width: 100%;

}

.s4 {

  width: 100%;

  max-width: var(--maxPageWidth);

  margin: 40px auto;

}

.size1 {

  width: 160px;

  height: 600px;

}

.size2 {

  width: 300px;

  height: 600px;

}

.size3 {

  width: 300px;

  height: 250px;

}

.size4 {

  width: 100%;

  height: 90px;

  margin-bottom: 0 !important;

}

.size5 {

  width: 100%;

  height: 206px;

  margin-bottom: 0 !important;

}

.p,

.p:after {

  position: fixed;

  right: 0;

  left: 0;

}

.p {

  z-index: -1;

  top: 0;

  height: 100vh;

  transform: translateZ(0);

}

.r {

  top: -50vh;

  bottom: 0;

  overflow: hidden;

}

.r {

  position: absolute;

  z-index: 1;

  right: 0;

  left: 0;

}

.t,

.u {

  position: absolute;

  z-index: 2;

  top: 0;

  bottom: 0;

  left: 0;

}

.u {

  display: none;

  right: 0;

  left: auto;

}

.r > * {

  transform: translateY(50vh);

}

.rsMP {

  margin: 0;

  padding: 0;

}

.footer {

  width: var(--maxPageWidth);

  min-height: 35px;

  height: 100%;

  position: relative;

  margin: 0 auto;

  margin-bottom: 10px;

}

.footer .list {

  width: 100%;

  height: 100%;

  display: flex;

  list-style: none;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

}

.footer .list li:first-child a {

  margin: 0;

}

.footer .list a {

  color: var(--denim-pink);

  margin: 0 0 0 20px;

  padding: 0;

  white-space: pre;

  font-size: 16px;

  font-weight: 600;

}

.TSP {

  align-items: center;

  grid-row-start: span 1;

  grid-column-start: span 2;

  background-color: #fff;

  will-change: transform;

}

.TSP:hover {

  text-decoration: none;

  transform: scale(1.05) translate3d(0, -4px, 0);

  transition-duration: 0.3s;

}

.Ti {

  border-radius: var(--borderRadius);

  width: var(--cellSize);

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

}

.tTx {

  display: flex;

  align-items: center;

  width: 100%;

  max-width: calc(var(--cellSize) + var(--cellSpacing));

  justify-content: space-between;

  padding: 0 5px;

  color: var(--denim-blue);

  font: 700 12px/20px Proxima Nova, sans-serif;

  letter-spacing: 1px;

  text-transform: uppercase;

}

.tTx span {

  color: var(--grey-3);

}

.TSP .name {

  padding-right: 5px;

}

.TSP.ta {

  display: flex;

}

.wpcf7 label {

  font: 200 19px/24px Torus, sans-serif;

}

.wpcf7-form-control {

  font: 16px/24px Proxima Nova, sans-serif;

  border-radius: 8px;

  border: 1px solid var(--grey-5);

  margin: 12px 0 0;

  height: 44px;

  padding: 0 15px;

  resize: vertical;

  appearance: none;

}

.wpcf7-textarea {

  min-height: 200px;

  padding: 10px 15px;

  resize: none;

}

.wpcf7-submit {

  background-color: var(--aking-blue);

  border: 3px solid var(--aking-blue);

  border-radius: 100px;

  position: relative;

  min-height: 50px;

  padding: 0 24px;

  color: #fff;

  font-family: Torus;

  font-size: 19px;

  min-width: 135px;

  display: flex;

  justify-content: space-evenly;

  align-items: center;

  cursor: pointer;

  transition: border, background-color 0.1s ease;

  appearance: none;

}

.wpcf7-submit:hover {

  background-color: var(--aking-hover);

  border: 3px solid var(--aking-hover);

}

.wpcf7-not-valid-tip {

  font-size: 15px !important;

}

.wpcf7 form .wpcf7-response-output {

  margin: 0 !important;

  padding: 0 !important;

  border: 0 !important;

}

.wpcf7-text:focus,

.wpcf7-textarea:focus {

  outline: 0;

  border-radius: 8px;

  border: solid 2px var(--aking-blue);

}

.breadcrumbs a,

.breadcrumb_last {

  font-size: 9px;

  letter-spacing: 1px;

  color: var(--grey-3);

  text-transform: uppercase;

  font-weight: 600;

  margin: 0;

  padding: 0;

}

.breadcrumbs span > ::after {

  content: "\e908";

  font-size: 7px;

  margin-left: 5px;

  display: inline-block;

}

.breadcrumbs span:last-child::after {

  content: none;

}

.wpp-post-title {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  padding: 6px;

  color: #fff;

  text-align: center;

  font-size: 16px;

  line-height: 24px;

  font-weight: 600;

  z-index: 3;

  transition: transform 0.3s var(--bezier) 0.1s, opacity 0.3s var(--bezier) 0.1s;

  transform: translateY(8px);

  opacity: 0;

  will-change: transform;

  z-index: 22;

  pointer-events: none;

  height: auto !important;

}

.wpp_featured,

.wp-post-image {

  width: 100%;

  height: 100%;

  border-radius: var(--borderRadius);

  transition: transform 0.6s var(--bezier);

}

.cSt a {

  width: 100%;

  height: 100%;

}

.ratings {

  width: 100%;

  height: 35px;

  margin-top: 1rem;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

}

.ratbg {

  padding: 0 8px;

  background: var(--grey-7);

  margin-right: 5px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  line-height: 22px;

  font-weight: 700;

  color: var(--grey-3);

  text-transform: uppercase;

}

.num {

  border-radius: 50%;

  min-width: 35px;

  font-size: 13px;

  height: 35px;

  margin: 0;

}

.total {

  max-width: 70px;

  background: 0 0;

  line-height: 1.3;

}

.share-btn {

  background-color: var(--grey-3);

  border: 0;

  outline: none;

  border-radius: 100px;

  position: relative;

  min-height: 34px;

  color: #fff;

  font-family: Torus;

  font-size: 15px;

  min-width: 85px;

  cursor: pointer;

  display: flex;

  justify-content: space-evenly;

  padding: 7px;

  transition: background-color 0.2s var(--bezier);

}

.share-btn:hover {

  background-color: var(--aking-blue);

}

.votes {

  display: flex;

  flex: 0.5;

  justify-content: flex-start;

  opacity: 0;

}

.votes .fb {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  position: relative;

  width: 50px;

  cursor: pointer;

}

.votes .like.current .thumb,

.votes .like.current .vote_num,

.votes .dislike.current .thumb,

.votes .dislike.current .vote_num {

  color: var(--aking-blue);

}

#like:hover .thumb,

#like:hover .vote_num,

#dislike:hover .vote_num,

#dislike:hover .thumb {

  color: var(--aking-blue);

}

.like::after {

  content: "";

  background: var(--grey-7);

  display: block;

  width: 2px;

  height: 23px;

  position: absolute;

  right: -1.5px;

}

.thumb {

  display: flex;

  justify-content: center;

  align-items: center;

  color: var(--grey-3);

  transform: rotate(180deg);

  font-size: 18px;

  transition: color 0.1s ease-out;

}

.like .thumb::before {

  content: "\e907";

}

.dislike .thumb::before {

  transform: rotate(180deg);

  content: "\e907";

}

.current.dislike .thumb::before {

  transform: rotate(180deg);

  content: "\e906";

}

.current.like .thumb::before {

  content: "\e906";

}

.vote_num {

  position: relative;

  cursor: pointer;

  font-size: 12px;

  line-height: 15px;

  flex-direction: column;

  justify-content: center;

  color: var(--grey-3);

  transition: color 0.1s ease-out;

  user-select: none;

}

.vsH {

  visibility: hidden;

}

.vsV {

  visibility: visible;

}

.opH {

  opacity: 0;

}

.shake {

  animation: shake 3s linear 2s infinite running;

}

@keyframes shake {

  0% {

    transform: translate(0) rotate(0);

  }

  2% {

    transform: translate(1px, 1px) rotate(0deg);

  }

  4% {

    transform: translate(-1px, -2px) rotate(-1deg) scale(0.996);

  }

  6% {

    transform: translate(-3px) rotate(1deg);

  }

  8% {

    transform: translate(3px, 2px) rotate(0deg) scale(0.992);

  }

  12% {

    transform: translate(1px, -1px) rotate(1deg);

  }

  14% {

    transform: translate(-1px, 2px) rotate(-1deg) scale(1);

  }

  16% {

    transform: translate(-3px, 1px) rotate(0deg);

  }

  19% {

    transform: translate(3px, 1px) rotate(-1deg) scale(1.02);

  }

  21% {

    transform: translate(-1px, -1px) rotate(1deg);

  }

  23% {

    transform: translate(1px, 2px) rotate(0deg) scale(0.995);

  }

  25% {

    transform: translate(1px, -2px) rotate(-1deg) scale(1);

  }

  28% {

    transform: translate(0) rotate(0);

  }

  100% {

    transform: translate(0) rotate(0);

  }

}

.game .yarpp-related-none {

  display: none;

}

.game .contanier .yarpp-related-none {

  display: block;

}

#Loading {

  animation-name: spinner;

  animation-duration: 0.4s;

  animation-iteration-count: infinite;

  animation-timing-function: linear;

  display: flex;

}

@keyframes spinner {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(1turn);

  }

}

.sticky-footer {

  width: 100vw;

  background: hsla(0, 0%, 100%, 0.5);

  bottom: 0;

  padding-top: 2px;

  position: fixed;

  left: 0;

  right: 0;

  z-index: 9999999;

}

.sticky-wrapper {

  position: relative;

  width: 100%;

  margin: 0 auto;

  height: 90px;

}

.R {

  display: flex;

  align-items: center;

  justify-content: center;

  border: none;

  box-shadow: 0 4px 8px 0 rgb(0 0 0/24%);

  border-radius: 50%;

  background: #fff;

  cursor: pointer;

  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out,

    transform 0.2s ease-out;

}

.ne {

  position: absolute;

  right: 24px;

  top: 5px;

  width: 36px;

  height: 36px;

  background: #fff;

}

.paginate {

  display: flex;

  width: var(--maxPageWidth);

  justify-content: center;

  margin: 40px auto 0;

}

.paginate .page-numbers {

  width: auto;

  min-width: 36px;

  min-height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0 13px;

  border-radius: 100px;

  color: #fff;

  background: var(--grey-3);

  font-weight: 700;

  text-transform: uppercase;

  transition: border-color 0.2s var(--bezier), color 0.2s var(--bezier);

  will-change: border-color, color;

  font-size: 13px;

  line-height: 1px;

  margin: 0 4px;

  cursor: pointer;

}

.paginate .page-numbers:hover {

  text-decoration: none;

  background: var(--aking-blue);

}

.paginate .current {

  text-decoration: none;

  background: var(--aking-blue);

}

.paginate .next::after {

  content: "\e908";

  font-size: 10px;

  margin-left: 5px;

  line-height: 0;

}

.paginate .prev::before {

  content: "\e908";

  font-size: 10px;

  margin-right: 5px;

  line-height: 0;

  transform: rotate(180deg);

}

.GnT {

  transition: none !important;

}

.similar {

  position: absolute;

  width: 130px;

  height: calc(100% - var(--gameInfoHeight));

  background: hsla(0, 0%, 100%, 0.5);

  backdrop-filter: blur(3px);

  z-index: 5;

  display: none;

  opacity: 0;

  transition: transform 0.25s;

  will-change: transform;

}

.sop {

  opacity: 1;

}

.similar .collapse {

  width: 30px;

  height: 40px;

  position: absolute;

  right: -30px;

  top: 50%;

  transform: translateY(-50%);

  bottom: 0;

  border-top-right-radius: 16px;

  border-bottom-right-radius: 16px;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: -1;

  outline: none;

  border: 0;

  appearance: none;

  cursor: pointer;

  background: #fff;

  box-shadow: 0 16px 32px rgb(0 0 0/24%);

  border-radius: 0 16px 16px 0;

  overflow: hidden;

}

.similar .collapse:hover {

  background-color: var(--grey-7);

}

.similar .collapse::after {

  content: "\e900";

  color: var(--aking-blue);

  font-size: 15px;

  display: flex;

  transform: rotate(180deg);

  transition: transform 0.25s;

  will-change: transform;

}

.sClosed {

  transform: translateX(-130px);

}

.similar.sClosed .collapse::after {

  content: "\e900";

  color: var(--aking-blue);

  font-size: 15px;

  display: flex;

  transform: rotate(0);

}

.similar .sgames {

  overflow-y: overlay;

  width: 100%;

  height: 100%;

  padding-top: 16px;

}

.similar .sgames .DeS {

  grid-template-areas: "item-trending-1" "item-trending-1" "item-trending-2" "item-trending-2";

  justify-content: center;

  margin-top: 0;

}

.similar .sgames .oeS {

  grid-template-columns: repeat(1, var(--cellSize));

}

.similar .sgames .g1 {

  grid-area: unset;

}

.mobile-leaderboard {

  width: 320px;

  max-width: 320px;

  position: absolute;

  margin: 0 auto;

  left: 0;

  right: 0;

  display: flex;

}

.mlt {

  top: 0;

}

.mlb {

  bottom: var(--gameInfoHeight);

}

.nGtG {

  position: relative;

  display: flex;

  width: 100%;

  height: 100%;

  justify-content: space-between;
  flex-wrap: wrap;

}

.shag {

  width: calc(var(--cellSize) * 2 + var(--cellSpacing));

  height: 50px;

  position: fixed;

  max-width: inherit;

  bottom: 50px;

  background: var(--aking-blue);

  box-shadow: var(--navShadow);

  overflow: hidden;

  border-radius: 50px;

  display: flex;

  z-index: 999;

  transition: width, height 0.25s ease;

  will-change: transform;

  transform: translate(

    calc(var(--maxPageWidth) - calc(var(--cellSize) * 2 + var(--cellSpacing)))

  );

  align-items: center;

  justify-content: center;

  font-size: 21px;

  font-family: torus;

  color: #fff;

  opacity: 0;

}

#agLink {

  visibility: hidden;

}

.hide {

  animation: hide 0.25s forwards;

}

.show {

  animation: show 0.25s forwards;

}

.mobile-link {

  display: flex;

  z-index: 999;

  width: 150px;

}

@keyframes hide {

  0% {

    opacity: 1;

  }

  100% {

    opacity: 0;

    visibility: hidden;

  }

}

@keyframes show {

  0% {

    visibility: visible;

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

@media (max-width: 1920px) {

  #mSM a:nth-of-type(1n + 12) {

    display: none;

  }

  #MostPlayed .g5 {

    grid-area: unset;

  }

}

@media (min-width: 1840px) and (max-width: 1920px) {

  #rSM a:nth-of-type(1n + 11) {

    display: none;

  }

}

@media (min-width: 1540px) and (max-width: 1840px) {

  #rSM > a {

    display: flex;

  }

  #rSM a:nth-of-type(1n + 13) {

    display: none;

  }

}

@media (max-width: 1840px) {

  #mSM > a {

    display: flex !important;

  }

  #mSM a:nth-of-type(1n + 18) {

    display: none !important;

  }

  .gameplay {

    width: 912px;

  }

  .oeR {

    display: grid;

    grid-template-columns: repeat(8, var(--cellSize));

    grid-template-rows: repeat(2, var(--cellSize));

  }

  .DeR {

    grid-template-areas: ".......... .......... .......... .......... .......... .......... .......... .........." ".......... ad-728 ad-728 ad-728 ad-728 ad-728 ad-728 ad-728";

  }

}

@media (max-width: 1660px) {

  #mSM a:nth-of-type(1n + 15) {

    display: none !important;

  }

  .gameplay {

    width: 796px;

  }

  .oeR {

    display: grid;

    grid-template-columns: repeat(7, var(--cellSize));

    grid-template-rows: repeat(2, var(--cellSize));

  }

  .DeR {

    grid-template-areas: ".......... .......... .......... .......... .......... .......... .........." "ad-728 ad-728 ad-728 ad-728 ad-728 ad-728 ad-728";

  }

}

@media (max-width: 1540px) {

  .oeS {

    display: grid;

    grid-template-columns: repeat(1, var(--cellSize));

  }

  .DeS {

    grid-template-areas: ".........." ".........." ".........." ".........." ".........." "..........";

  }

  #rSM .g1,

  #rSM .g2 {

    display: flex;

    min-width: var(--cellSize);

    min-height: var(--cellSize);

    position: relative;

    grid-area: unset;

  }

  #rSM .g1 .Gn,

  #rSM .g2 .Gn {

    font-size: 12px !important;

    line-height: 15px !important;

  }

}

@media (max-width: 1400px) {

  #rSM {

    display: none;

  }

  .oeS {

    display: grid;

    grid-template-columns: repeat(7, var(--cellSize));

  }

  .DeS {

    margin-bottom: 16px;

    grid-template-areas: ".......... .......... .......... .......... .......... .......... .........." ".......... .......... .......... .......... .......... .......... ..........";

  }

  .game .yarpp-related-widget {

    display: none;

  }

  .game .contanier .yarpp-related-widget {

    display: block;

  }

  .DeR {

    grid-template-areas: "ad-728 ad-728 ad-728 ad-728 ad-728 ad-728 ad-728" ".......... .......... .......... .......... .......... .......... ..........";

  }

}

@media (min-width: 1400px) and (max-width: 1540px) {

  #rSM a:nth-of-type(1n + 10) {

    display: none;

  }

}

@media (min-width: 1160px) and (max-width: 1400px) {

  #rSM > a {

    display: flex;

  }

  #rSM a:nth-of-type(1n + 15) {

    display: none;

  }

}

@media (max-width: 1300px) {

  #rTop {

    display: none;

  }

  .cAd.s2 {

    width: 160px;

  }

  .size2 {

    width: 160px;

  }

}

@media (min-width: 1200px) and (max-width: 1920px) {

  #Tags > a {

    display: flex;

  }

  #Tags a:nth-of-type(1n + 10) {

    display: none;

  }

}

@media (min-width: 1024px) and (max-width: 1200px) {

  #Tags > a {

    display: flex;

  }

  #Tags a:nth-of-type(1n + 11) {

    display: none;

  }

  #NewGames > a {

    display: flex;

  }

  #NewGames a:nth-of-type(1n + 18) {

    display: none;

  }

}

@media (min-width: 768px) and (max-width: 1200px) {

  .t0 {

    grid-area: tag-trending-0;

  }

  .t0 .Ti {

    height: 100%;

    width: 100%;

    object-fit: cover;

  }

  .t0 .tTx {

    padding: 0 10px;

    font-size: 14px;

    max-width: calc(var(--cellSize) * 2 + var(--cellSpacing));

  }

}

@media (max-width: 1200px) {

  :root {

    --maxPageWidth: 1029px;

  }

  .g12 {

    grid-area: item-trending-12;

  }

  .g13 {

    grid-area: item-trending-13;

  }

  .g14 {

    grid-area: item-trending-14;

  }

  .oe {

    grid-template-columns: repeat(9, var(--cellSize));

  }

  .De {

    grid-template-areas: "menu-spacer     menu-spacer     item-trending-0 item-trending-0 item-trending-0 item-trending-8 item-trending-8 item-trending-3 item-trending-3" "item-trending-5 item-trending-5 item-trending-0 item-trending-0 item-trending-0 item-trending-8 item-trending-8 item-trending-3 item-trending-3" "item-trending-5 item-trending-5 item-trending-0 item-trending-0 item-trending-0 item-trending-6 item-trending-6 item-trending-1 item-trending-1" "item-trending-4 item-trending-4 item-trending-7 item-trending-7 ............... item-trending-6 item-trending-6 item-trending-1 item-trending-1" "item-trending-4 item-trending-4 item-trending-7 item-trending-7 ............... item-trending-10 item-trending-10 item-trending-11 item-trending-11" "item-trending-2 item-trending-2 item-trending-2 item-trending-9 item-trending-9 item-trending-10 item-trending-10 item-trending-11 item-trending-11" "item-trending-2 item-trending-2 item-trending-2 item-trending-9 item-trending-9   item-trending-13 item-trending-13 item-trending-14 item-trending-14" "item-trending-2 item-trending-2 item-trending-2 item-trending-12 item-trending-12 item-trending-13 item-trending-13 item-trending-14 item-trending-14" "............... ............... ............... item-trending-12 item-trending-12 ................ ................ ................ ................";

  }

  .ng {

    grid-template-columns: repeat(4, var(--cellSize));

    grid-template-areas: "head-spacer head-spacer head-spacer .......... " "item-trending-1 item-trending-1 item-trending-2 item-trending-2 " "item-trending-1 item-trending-1 item-trending-2 item-trending-2 " "item-trending-3 item-trending-3 item-trending-4 item-trending-4 " "item-trending-3 item-trending-3 item-trending-4 item-trending-4 ";

  }

  .sM {

    padding: 50px 15px;

  }

  .tGrd {

    grid-template-areas: " head-spacer head-spacer head-spacer          .......... .......... .......... .......... .......... " " tag-trending-0 tag-trending-0 tag-trending-0 .......... .......... .......... .......... .......... " " tag-trending-0 tag-trending-0 tag-trending-0 .......... .......... .......... .......... .......... ";

  }

  .tGs {

    grid-template-columns: repeat(9, var(--cellSize));

  }

  .tGs .head-title {

    width: calc(var(--cellSize) * 3 + var(--cellSpacing) * 2);

  }

  .tGs::before {

    content: "";

    display: block;

    grid-column-start: span 3;

  }

  .cGs {

    grid-template-columns: repeat(9, var(--cellSize));

  }

  .cTa .g5 {

    grid-area: unset;

  }

  .cTa {

    grid-template-areas: " head-spacer     head-spacer     head-spacer     ..........      ..........      ..........      ..........      ..........      ..........       " " item-trending-1 item-trending-1 item-trending-2 item-trending-2 item-trending-3 item-trending-3 item-trending-4 item-trending-4 ..........       " " item-trending-1 item-trending-1 item-trending-2 item-trending-2 item-trending-3 item-trending-3 item-trending-4 item-trending-4 ..........       ";

  }

}

@media (min-width: 1200px) {

  .u {

    display: initial;

  }

}

@media (max-width: 1160px) {

  #rSM a:nth-of-type(1n + 13) {

    display: none;

  }

  .fW {

    max-width: 99%;

  }

  .gameplay {

    width: 681px;

  }

  .oeR {

    display: grid;

    grid-template-columns: repeat(6, var(--cellSize));

    grid-template-rows: repeat(2, var(--cellSize));

    justify-content: normal;

  }

  .DeR {

    grid-template-areas: "ad-728 ad-728 ad-728 ad-728 ad-728 ad-728" ".......... .......... .......... .......... .......... ..........";

  }

  .oeS {

    display: grid;

    grid-template-columns: repeat(6, var(--cellSize));

    justify-content: normal;

  }

  .DeS {

    margin-top: 15px;

    grid-template-areas: ".......... .......... .......... .......... .......... .........." ".......... .......... .......... .......... .......... ..........";

  }

}

@media (min-width: 1025px) {

  .gP {

    width: 160px;

    top: 24px;

  }

}

@keyframes play {

  0%,

  70%,

  100% {

    transform: translate3d(-50%, -50%, 0) scale(1);

  }

  90% {

    transform: translate3d(-50%, -50%, 0) scale(1.2);

  }

}

@media (min-width: 768px) and (max-width: 1024px) {

  :root {

    --maxPageWidth: 754px;

    --cellSize: 94px;

  }

  #MostPlayed .g5 {

    grid-area: item-trending-5;

  }

  #NewGames > a {

    display: flex;

  }

  #NewGames a:nth-of-type(1n + 19) {

    display: none;

  }

  .g12,

  .g13,

  .g14 {

    grid-area: unset;

  }

  .t1 {

    grid-area: tag-trending-1;

  }

  .t1 .Ti {

    height: 100%;

    width: 100%;

    object-fit: cover;

  }

  .t1 .tTx {

    padding: 0 10px;

    font-size: 14px;

    max-width: calc(var(--cellSize) * 2 + var(--cellSpacing));

  }

  .oe {

    grid-template-columns: repeat(7, var(--cellSize));

  }

  .De {

    grid-template-areas: " menu-spacer     menu-spacer     item-trending-0 item-trending-0 item-trending-0   item-trending-1 item-trending-1 " " item-trending-3 item-trending-3 item-trending-0 item-trending-0 item-trending-0   item-trending-1 item-trending-1 " " item-trending-3 item-trending-3 item-trending-0 item-trending-0 item-trending-0   item-trending-6 item-trending-6 " " item-trending-4 item-trending-4 item-trending-5 item-trending-5 ............... item-trending-6 item-trending-6 " " item-trending-4 item-trending-4 item-trending-5 item-trending-5 ............... ................ ................ " " item-trending-8 item-trending-8 item-trending-2 item-trending-2 item-trending-2 item-trending-7 item-trending-7 " " item-trending-8 item-trending-8 item-trending-2 item-trending-2 item-trending-2 item-trending-7 item-trending-7 " " item-trending-9 item-trending-9 item-trending-2 item-trending-2 item-trending-2 ................ ................ " " item-trending-9 item-trending-9 item-trending-10 item-trending-10 item-trending-11 item-trending-11 ................ " " ............... ............... item-trending-10 item-trending-10 item-trending-11 item-trending-11 ................ ";

  }

  .nGs {

    grid-template-columns: repeat(4, var(--cellSize));

  }

  .gTa {

    grid-template-areas: " .......... .......... .......... .......... " " item-trending-1 item-trending-1 item-trending-2 item-trending-2 " " item-trending-1 item-trending-1 item-trending-2 item-trending-2 " " item-trending-3 item-trending-3 item-trending-4 item-trending-4 " " item-trending-3 item-trending-3 item-trending-4 item-trending-4 " " item-trending-5 item-trending-5 .......... .......... " " item-trending-5 item-trending-5 .......... .......... ";

  }

  .ng {

    grid-template-columns: repeat(3, var(--cellSize));

    grid-template-areas: "head-spacer head-spacer .......... " ".......... .......... .......... " ".......... .......... .......... " ".......... .......... .......... " ".......... .......... .......... ";

  }

  .size4 {

    width: 100%;

    height: 90px;

    margin-bottom: 10px !important;

  }

  .gaP {

    grid-area: game-name;

    position: relative;

  }

  .mob-game-cont {

    grid-area: game-cont;

  }

  .mob-game-cont::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(transparent 18%, rgba(0, 0, 0, 0.4));

    transition: opacity 0.3s var(--bezier);

    z-index: 2;

    pointer-events: none;

    border-radius: var(--borderRadius);

  }

  .playbutton {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate3d(-50%, -50%, 0);

    background-color: #fff;

    color: var(--denim-blue);

    font-family: Torus;

    font-weight: 200;

    font-size: 23px;

    text-align: center;

    border-radius: 100px;

    border: 0;

    outline: none;

    min-width: 112px;

    min-height: 69px;

    padding: 0 24px;

    z-index: 99;

    box-shadow: 0 6px 12px 0 rgb(0 0 0/24%);

    will-change: transform;

    animation: play 4s ease-in-out infinite both;

    display: flex;

    align-items: center;

    justify-content: center;

  }

  .playbutton::after {

    content: "\e900";

    font-size: 13px;

    margin-left: 5px;

    align-self: center;

    margin-top: 5px;

  }

  .oeS {

    display: grid;

    grid-template-columns: repeat(7, var(--cellSize));

    grid-template-rows: repeat(auto-fill, var(--cellSize));

    grid-gap: var(--cellSpacing);

    grid-auto-flow: row dense;

    justify-content: center;

  }

  .DeS {

    margin-top: 16px;

    grid-template-areas: "header header game-name game-name game-name       item-trending-1 item-trending-1" "game-cont game-cont game-cont game-cont game-cont item-trending-1 item-trending-1" "game-cont game-cont game-cont game-cont game-cont item-trending-2 item-trending-2" "game-cont game-cont game-cont game-cont game-cont item-trending-2 item-trending-2" "game-cont game-cont game-cont game-cont game-cont item-trending-3 item-trending-3" "game-cont game-cont game-cont game-cont game-cont item-trending-3 item-trending-3" "ad-728 ad-728 ad-728 ad-728 ad-728 ad-728 ad-728";

  }

  .oeS::before {

    content: "";

    display: block;

    grid-column-start: span 2;

  }

  .sM {

    padding: 50px 30px 25px;

    align-items: flex-start;

  }

  .tGrd {

    grid-template-areas: " head-spacer head-spacer head-spacer          .......... .......... .......... .......... " " tag-trending-0 tag-trending-0 tag-trending-0 .......... .......... .......... .......... " " tag-trending-0 tag-trending-0 tag-trending-0 .......... .......... .......... .......... " " tag-trending-1 tag-trending-1 tag-trending-1 .......... .......... .......... .......... " " tag-trending-1 tag-trending-1 tag-trending-1 .......... .......... .......... .......... ";

  }

  .tGs {

    grid-template-columns: repeat(7, var(--cellSize));

  }

  .cGs .g5 {

    grid-area: item-trending-5;

  }

  .cGs {

    grid-template-columns: repeat(7, var(--cellSize));

  }

  .cTa {

    grid-template-areas: " head-spacer head-spacer head-spacer item-trending-2 item-trending-2 item-trending-3 item-trending-3  " " .......... .......... .......... item-trending-2 item-trending-2 item-trending-3 item-trending-3 " " item-trending-1 item-trending-1 item-trending-4 item-trending-4 item-trending-5 item-trending-5 .......... " " item-trending-1 item-trending-1 item-trending-4 item-trending-4 item-trending-5 item-trending-5 .......... ";

  }

}

@media (min-width: 320px) and (max-width: 767px) {

  :root {

    --maxPageWidth: 313px;

    --cellSize: 94px;

    --cellSpacing: 15px;

  }

  .nTp {

    flex-direction: column;

    align-items: center;

  }

  .nGtG {

    justify-content: center;

    flex-direction: column;

    align-items: center;

  }

  .size4 {

    width: 100%;

    height: 90px;

    margin-bottom: 10px !important;

  }

  .g2,

  .g3,

  .g4,

  .g5,

  .g6,

  .g7,

  .g8,

  .g9,

  .g10,

  .g11,

  .g12,

  .g13,

  .g14 {

    grid-area: unset;

  }

  .g2 .Gn,

  .g3 .Gn,

  .g4 .Gn,

  .g5 .Gn,

  .g6 .Gn,

  .g7 .Gn,

  .g8 .Gn,

  .g9 .Gn,

  .g10 .Gn,

  .g11 .Gn,

  .g12 .Gn,

  .g13 .Gn,

  .g14 .Gn {

    font-size: 12px !important;

    line-height: 15px !important;

  }

  #NewGames > a {

    display: flex;

  }

  #NewGames a:nth-of-type(1n + 22) {

    display: none;

  }

  #MostPlayed > a {

    display: flex;

  }

  #MostPlayed a:nth-of-type(1n + 10) {

    display: none;

  }

  .oe {

    grid-template-columns: repeat(3, var(--cellSize));

  }

  .De {

    grid-template-areas: " menu-spacer     menu-spacer     ............... " " item-trending-0 item-trending-0 ............... " " item-trending-0 item-trending-0 ............... " " ............... ............... ............... " " ............... ............... ............... " " ............... item-trending-1 item-trending-1 " " ............... item-trending-1 item-trending-1 ";

  }

  .nGs {

    grid-template-columns: repeat(3, var(--cellSize));

  }

  .gTa {

    grid-template-areas: " head-spacer head-spacer head-spacer " " item-trending-1 item-trending-1 .......... " " item-trending-1 item-trending-1 .......... " " .......... .......... .......... ";

  }

  .ng {

    grid-template-columns: repeat(3, var(--cellSize));

    grid-template-areas: " head-spacer head-spacer head-spacer" " .......... .......... .......... " " .......... .......... .......... " " .......... .......... .......... " " .......... .......... .......... ";

  }

  .blocks:nth-child(2) {

    margin-top: 32px;

  }

  .oeS .g2,

  .oeS .g3 {

    grid-area: unset;

  }

  .oeS .head-title {

    width: calc(var(--cellSize) * 2 + var(--cellSpacing) * 1);

  }

  .oeS {

    display: grid;

    grid-template-columns: repeat(3, var(--cellSize));

    grid-template-rows: repeat(auto-fill, var(--cellSize));

    grid-gap: var(--cellSpacing);

    grid-auto-flow: row dense;

    justify-content: center;

  }

  .DeS {

    margin-top: 16px;

    grid-template-areas: "header header  .........      " "game-name game-name  ........." "game-cont game-cont game-cont" "game-cont game-cont game-cont" "game-cont game-cont game-cont" "ad-728 ad-728 ad-728" "......... ......... ........." "item-trending-1 item-trending-1 ........." "item-trending-1 item-trending-1 .........";

  }

  .oeS::before {

    content: "";

    display: block;

    grid-column-start: span 2;

  }

  .gaP {

    grid-area: game-name;

    position: relative;

  }

  .mob-game-cont {

    grid-area: game-cont;

  }

  .mob-game-cont::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(transparent 18%, rgba(0, 0, 0, 0.4));

    transition: opacity 0.3s var(--bezier);

    z-index: 2;

    pointer-events: none;

    border-radius: var(--borderRadius);

  }

  .playbutton {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate3d(-50%, -50%, 0);

    background-color: #fff;

    color: var(--denim-blue);

    font-family: Torus;

    font-weight: 200;

    font-size: 20px;

    text-align: center;

    border-radius: 100px;

    border: 0;

    outline: none;

    min-width: 112px;

    min-height: 69px;

    padding: 0 24px;

    z-index: 99;

    box-shadow: 0 6px 12px 0 rgb(0 0 0/24%);

    will-change: transform;

    animation: play 4s ease-in-out infinite both;

    display: flex;

    align-items: center;

    justify-content: center;

    white-space: nowrap;

  }

  .playbutton::after {

    content: "\e900";

    font-size: 13px;

    margin-left: 5px;

    align-self: center;

    margin-top: 5px;

  }

  .sT {

    left: 0;

    width: 100%;

    max-width: 100%;

    clip-path: none;

  }

  .oPs {

    left: 0;

    width: 95%;

    max-width: 100%;

    align-items: center;

    justify-content: center;

    border-top-left-radius: 0;

    border-bottom-left-radius: 0;

    flex-direction: row;

  }

  .sM {

    flex-direction: column;

    align-items: flex-start;

    overflow: scroll;

    border-radius: 0;

    height: 100%;

    padding: 80px 15px;

  }

  .oPsw .input .searchin {

    font-size: 19px;

  }

  .oPsw .input .actions {

    width: 65px;

  }

  .jb {

    max-width: 204px;

    max-height: 204px;

    margin: 0;

    margin-bottom: 16px;

  }

  .search-icon::before {

    font-size: 20px;

  }

  .menu.oPs .logo {

    display: none;

  }

  .rAP {

    max-width: 100%;

  }

  .trAP {

    transition: all 0.4s;

  }

  .menu {

    transition: all 0.4s ease;

  }

  .sM {

    transform: translateX(calc(-100% - 32px));

    transition: all 0.3s ease;

    will-change: transform;

  }

  .sM.o {

    transform: translateX(0);

  }

  .priority {

    order: -1;

  }

  .footer .list {

    justify-content: space-between;

  }

  .footer .list li a {

    margin: 0;

  }

  .wpcf7-form-control {

    width: 100%;

  }

  .head-title h2 {

    font-size: 24px;

  }

  .TSP {

    grid-column-start: span 3;

  }

  .tTx {

    max-width: 100%;

    padding: 0 10px;

  }

  .tGs {

    grid-template-columns: repeat(3, var(--cellSize));

  }

  .tGrd {

    grid-template-areas: " head-spacer head-spacer head-spacer " " .......... .......... .......... " " .......... .......... .......... ";

  }

  .cGs .g1,

  .cGs .g2,

  .cGs .g3,

  .cGs .g4,

  .cGs .g5 {

    grid-area: unset;

  }

  .cGs {

    grid-template-columns: repeat(3, var(--cellSize));

  }

  .cTa {

    grid-template-areas: " head-spacer head-spacer head-spacer " " .......... .......... ..........    ";

  }

}

.s99 {

  display: none;

}

.loader {

  margin: 7px auto;

  border: 12px solid #f3f3f3;

  border-radius: 50%;

  border-top: 12px solid #2e8e9a;

  width: 30px;

  height: 30px;

  animation: load 2s linear infinite;

}

@keyframes load {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}