:root {
    --effect: hover 1s linear infinite;
}

#loading {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.9;
    background-color: #000;
    z-index: 219;
}

#loading-txt {
    font-size: 1.2em;
    text-align: center;
    position: absolute;
    padding-top: 50%
    height: 0
}

#loading-image {
    z-index: 220;
}

#loading-txt p {
    display: inline-block;
    text-transform: uppercase;
    text-align: center;
    font-size: 4em;
    font-family: arial;
    font-weight: 600;
    transform: scale(.5);
    color: #121212;
    -webkit-text-stroke: 2px gray;
}

#loading-txt p:nth-child(1) {
    animation: var(--effect);
}

#loading-txt p:nth-child(2) {
    animation: var(--effect) .125s;
}

#loading-txt p:nth-child(3) {
    animation: var(--effect) .25s;
}

#loading-txt p:nth-child(4) {
    animation: var(--effect) .375s;
}

#loading-txt p:nth-child(5) {
    animation: var(--effect) .5s;
}

#loading-txt p:nth-child(6) {
    animation: var(--effect) .675s;
}

#loading-txt p:nth-child(7) {
    animation: var(--effect) .75s;
}

@keyframes hover {
    0% {
        transform: scale(.5);
        color: #121212;
        -webkit-text-stroke: 2px gray;
    }
    20% {
        transform: scale(1);
        color: pink;
        -webkit-text-stroke: 3px red;
        filter: drop-shadow(0 0 1px black) drop-shadow(0 0 1px black) drop-shadow(0 0 3px red) drop-shadow(0 0 5px red) hue-rotate(10turn);
    }
    50% {
        transform: scale(.5);
        color: #121212;
        -webkit-text-stroke: 2px gray;
    }
}

/*new */
a {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: #fff;
}

html {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #aaadbe;
    background: #000;
}

html::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: rgba(0, 0, 0, 0);
}

html::-webkit-scrollbar-thumb {
    background: #914173;
    border-radius: 1em;
}

html::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0);
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

.fc-stack-icon {
    background-color: #EEE !important
}

@font-face {
    font-family: Righteous;
    font-display: optional;
    src: url(../images/Righteous-Regular.woff2) format('woff2')
}

.css-1f20jmh {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    position: relative;
}

.css-6qu7l6 {
    display: inline-block;
    fill: currentcolor;
    height: 24px;
    width: 24px;
}

.css-qthmdk {
    width: 200px;
    -webkit-transition: visibility 0s, all 0.15s ease-in-out;
    transition: visibility 0s, all 0.15s ease-in-out;
    height: calc(100vh);

@media (max-width: 1200px) {
    .css-qthmdk {
        width: 0
    }
}

z-index:

3
;
background: #000

;
position:fixed

;
top:

60
px

;
left:

0
;
border-right: thin solid #222

;
}
.css-qgh3qe {
    width: 60px;
    transition: visibility 0s ease 0s, all 0.15s ease-in-out 0s;
    height: calc(100vh - 60px);
    background: #0c0d14;
    z-index: 3;
    position: fixed;
    top: 60px;
    left: -200px;
    border-right: 1px solid #28293d;
}

@media (min-width: 1910px) {
    .css-qthmdk {
        width: 200px;
    }
}

.css-qthmdk:hover {
    width: 200px;
}

@media (max-width: 1909.95px) {
    .css-qthmdk, .css-qgh3qe, .gcolumn {
        width: 60px;
    }

    .css-qthmdk:hover [class*='LabelContainer'] {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 1200px) {
    .css-qthmdk {
        width: 0
    }
}

.css-y67g5x {
    width: 100%;
    height: calc(100% - 46px);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-top: 6px;
    padding-bottom: 30px;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.css-y67g5x::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.css-y67g5x::-webkit-scrollbar-thumb {
    border-radius: 30px;
}

.css-y67g5x:hover {
    scrollbar-width: thin;
    scrollbar-color: #aaadbe;
}

.css-y67g5x:hover::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background: rgba(0, 0, 0, 0);
}

.css-y67g5x:hover::-webkit-scrollbar-thumb {
    background: #aaadbe;
    border-radius: 30px;
}

.css-y67g5x:hover::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0);
}

.css-6n1w7f {
    border-radius: 30px;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
    border: none;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    font-weight: 800;
    font-size: 16px;
    box-sizing: border-box;
    padding: 0;
    background: #0000;
    color: #EFF0F7;
    height: 48px;
    width: 48px;
    margin-right: 4px;
}

.css-148wt6v {
    margin: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-width: 0;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.12);
    border-bottom-width: thin;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 16px;
    margin-right: 16px;
}

.css-1hfy2mq {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 46px;
    background: rgba(26, 27, 40, 0.6);
    -webkit-backdrop-filter: blur(12.5px);
    backdrop-filter: blur(12.5px);
    box-shadow: 0px -1px 0 #28293d;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.css-1hxlhbi {
    min-height: calc(100vh);
    padding-left: 200px;
    margin-top: 0;
}

#undertex {
    text-indent: 14px;
    font-size: 0.72em;
    letter-spacing: 0.046em;
    margin-top: -6px;
}

@media (max-width: 1909.95px) {
    .css-1hxlhbi {
        padding-left: 60px;
    }

    .wrpp {
        padding-left: 60px;
        display: flex;
        justify-content: center;
    }
}

/*endnew */
.bigOne picture img {
    width: 100%;
    height: 100%
}

.bigOne, .fourSmall {
    width: 25% !important
}

#featuredTop {
    height: calc(((((100vw - (216px)) / 4)) * 0.5617977528089888) + 48px);
}

body {
    margin: 0;
    font-size: 0.9em;
    font-family: Helvetica, Arial, sans-serif;
    color: #fff;
}

h1, h2 {
    text-align: left;
}

.gamename span {
    font: 600 0.85em/1.1rem 'Arial', cursive;
    display: block;
    white-space: nowrap;
    text-indent: 4px;
}

.h1tag {
    color: #fff;
    font-size: 1.3em
}

.gtags {
    color: #fff;
    font-size: 1.0em;
    padding-top: 1.2%;
}

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

input, textarea {
    color: #000;
    font-size: 10px;
    font-family: arial;
}

input[type="submit"] {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

img.bottom {
    position: absolute;
    bottom: 0px;
    left: 0;
}

.clear {
    font-size: 1px;
    height: 1px
}

div#container {
    position: relative;
    justify-content: center;
}

div#large_box {
    z-index: 105;
}

#formdiv2 {
    margin-left: auto;
    margin-right: auto;
    width: 580px;
    height: 100%;
    text-align: left;
}

.dotted {
    width: 100%;
    z-index: 2;
}

.dotted:hover {
    border: none;
}

.clVisible {
    display: block;
    visibility: visible;
}

.clHidden {
    display: hidden;
    visibility: hidden;
}

.gameVid {
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.gameVidNot {
    display: none;
}

div.love {
    width: 30px;
    display: inline-flex;
}

div.notlove {
    width: 30px;
    display: inline-flex;
}

.headerFirst {
    display: flex;
    flex-direction: row;
    padding-left: 8px;
    align-items: center;
}

#cont_inng {
    background: #000;
    color: #fff;
    padding: 1%
}

.descbox {
    font-size: 1.15em;
    padding: 0 8% 1.2%
}

.descbox h4 {
    margin-block: 1em;
}

#butGo {
    color: #ddd;
    font: 400 1em "Righteous", Helvetica
}

#butGoVid {
    color: #ddd;
    text-shadow: 2px 2px 0 #192c35;
    font: 400 1em "Righteous", Helvetica
}

#paddz a div#butGo, #paddz a div#butGoVid {
    padding-bottom: 1.5%;
}

.gright {
    grid-area: garight;
    display: none;
}

.undergameMore {
    display: none;
    background: #000;
}

.vert_gameright {
    vertical-align: top;
    padding-top: 3px;
    position: sticky;
    top: 55px;
}

/* new */
#butGoFree {
    height: 40px;
    width: 150px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px 8px;
    border: 2px solid #fff;
    font-family: 'Righteous', Helvetica;
    font-size: 1.1em;
    background: #101c22;
}

#butGoFree a {
    position: relative;
    transition: all .45s ease-Out;
    display: block;
    padding: 9px;
}

#butGoFree:hover a {
    color: #074B6B
}

#circle {
    width: 0%;
    height: 0%;
    opacity: 0;
    line-height: 40px;
    border-radius: 50%;
    background: #6fd2ff;
    position: absolute;
    transition: all .5s ease-Out;
    top: 20px;
    left: 70px;
}

#butGoFree:hover {
    border: 2px solid #074B6B;
}

#butGoFree:hover #circle {
    width: 200%;
    height: 500%;
    opacity: 1;
    top: -70px;
    left: -70px;
}

#butGoFreeMob {
    height: 40px;
    width: 70%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px 8px;
    border: 2px solid #fff;
    font-family: 'Righteous', Helvetica;
    font-size: 1.1em;
    margin: 0 auto;
    background: #101c22;
}

#butGoFreeMob a {
    position: relative;
    transition: all .45s ease-Out;
    display: block;
    padding: 9px;
}

#gabHeader {
    z-index: 111;
    position: fixed;
    background-image: none;
    background: #101c22ef;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    width: 100%;
    top: 0;
    left: auto;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 60px;
    min-height: 60px;
    box-shadow: 0 3px 3px -2px rgb(0 0 0 / 20%), 0 3px 4px 0 rgb(0 0 0 / 14%), 0 1px 8px 0 rgb(0 0 0 / 12%);
}

.grid-item_listingYT .gamevido embed {
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: 12;
    border-radius: 12px 12px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 4px 4px 3px #22222299;
    border: 4px solid #192d36;
    transition: all 0.1s cubic-bezier(.65, .05, .36, 1) 0s;
    box-sizing: border-box;
    /* transform: scale(1.2); */
}

.contentTitle {
    display: flex;
    flex-direction: column;
    width: calc(100% - 110px);
    padding-top: 6px;
    background: #000;
    padding-right: 15px;
}

.contentTitle h1 {
    padding-left: 18px;
    font-size: 17px;
}

.contentTop {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    align-items: center;
    padding-right: 32px;
    flex-flow: row wrap;
}

.contentTopSear {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-right: 18px;
    padding-left: 18px;
}

.grid-item_listingYT img {
    border-radius: 6px 6px;
    transition: opacity 0.1s cubic-bezier(0.5, 0, 0.1, 1) 0ms;
}

.videoWrapper {
    position: absolute;
    overflow: hidden;
    top: -150%;
    height: calc(100% * 4);
    width: 100%
}

.cover {
    position: absolute;
    height: calc((534px - (300px * (9 / 16))) / 2);
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
    text-align: center;
}

.css-xgeqm6 {
    position: absolute;
    left: 70%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.wrpp {
    margin-top: 60px !important;
    min-height: calc(100vh);
    width: 100%;
    background: #000;
    display: flex
}

.css-j0n0xf.MuiAutocomplete-root .MuiInput-root .MuiInput-input {
    padding-top: 0;
    padding-left: 4px;
}

.css-j0n0xf .MuiInput-root .MuiInput-input {
    padding: 4px 4px 4px 0;
}

.css-j0n0xf .MuiAutocomplete-inputRoot .MuiAutocomplete-input {
    width: 0;
    min-width: 30px;
}

.css-1pz5at6 .MuiInput-input {
    background: transparent;
    margin-left: 12px;
    outline: 0;
    color: #fff;
    width: 100% !important;
}

.css-j0n0xf .MuiAutocomplete-input {
    border-width: 0;
    box-shadow: 0 0;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    margin-bottom: 17px;
    font-size: 15px;
}

.css-j0n0xf .MuiAutocomplete-input {
    -webkit-box-flex: 1;
    flex-grow: 1;
    text-overflow: ellipsis;
    opacity: 1;
}

.MuiAutocomplete-hasPopupIcon.css-j0n0xf .MuiAutocomplete-inputRoot {
    padding-right: 50px;
}

.css-j0n0xf .MuiInput-root {
    padding-bottom: 1px;
}

.css-j0n0xf .MuiAutocomplete-inputRoot {
    flex-wrap: wrap;
}

.css-2iz2x6 {
    position: absolute;
    right: 0;
    top: calc(50% - 14px);
}

.css-1rq9o8u {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    background-color: #131F25;
    outline: 0;
    border: 0;
    margin: 0 -2px 0 0;
    cursor: pointer;
    user-select: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    opacity: 1;
    text-decoration: none;
    text-align: center;
    flex: 0 0 auto;
    font-size: 1.5rem;
    padding: 2px;
}

.css-kksz1w svg {
    height: 20px;
    width: 20px;
}

button {
    font-family: Helvetica, Arial, sans-serif;
}

.css-j0n0xf.MuiAutocomplete-root {
    border-radius: 11px;
    height: 38px;
    position: relative;
    padding-top: 9px;
    background-color: #131F25;
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
}

.contentDesc {
    text-align: left;
    padding: 2px 39px 5px 20px
}

.contentDesc_bottom {
    text-align: left;
    padding: 20px 12px 11px 12px;
}

/
/
#main_games_box {
    justify-content: center;
}

#playedNowBox {
    padding: 16px;
}

.css-xgeqm6 {
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

@media (min-width: 1082px) {
    .css-xgeqm6 {
        position: absolute;
        left: 50%;
        top: 50%;
        padding: 20px 17px 17px 20px;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 1909.95px) {
    .css-j0n0xf.MuiAutocomplete-root {
        font-size: 14px;
        width: 460px;
    }

    .grid-container {
        display: grid;
        grid-template-areas: 'main' 'footer';
        grid-template-columns: 100%;
        width: 100%
    }
}

@media (max-width: 1509.95px) {
    .css-j0n0xf.MuiAutocomplete-root {
        font-size: 11.2px;
    }
}

@media (max-width: 868.95px) {
    .css-j0n0xf.MuiAutocomplete-root {
        width: 200px;
    }

    #playedNowBox {
        padding: 10px;
    }

    .contentDesc {
        overflow: hidden;
        line-height: 1.1em;
        max-height: calc(5 * 1.1em);
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
    }

    .contentTop {
        padding-right: 16px;
        height: 48.3px
    }
}

@media (max-width: 609.95px) {
    .css-j0n0xf.MuiAutocomplete-root {
        display: none;
    }

    #searchIconic {
        display: flex;
        position: absolute;
        right: 10px;
        top: 17px;
    }
}

@media (min-width: 610px) {
    #searchIconic {
        display: none
    }
}

@media (min-width: 600px) {
    .css-j0n0xf.MuiAutocomplete-root {
        margin-right: calc(10px) !important;
    }
}

@media (min-width: 1280px) {
    .css-j0n0xf.MuiAutocomplete-root {
        width: 460px;
        font-size: 14px;
    }
}

/*endnew */
@media screen and (max-width: 1200px) {
    .wrpp {
        padding: 0
    }

    #padd, #brr {
        display: none;
    }

    #paddz, #brrz {
        display: block;
        background: #000;
        padding: 2% 1.2%;
        color: #fff;
    }

    #cont_inng {
        padding: 2.5% 0 1%
    }

    #thumbor {
        margin: 0 auto
    }
}

@media screen and (min-width: 1201px) {
    #padd, #brr {
        display: block;
    }

    #paddz, #brrz {
        display: none;
        margin-left: 2em
    }

    #padd {
        padding: 5% 4% 0 4%;
    }

    #cont_inng {
        display: flex
    }

    .descbox {
        text-align: left;
    }
}

@media screen and (max-width: 890px) {
    .descbox {
        padding: 0 5% 2%
    }
}

.biggrid {
    grid-column-start: 3;
    grid-column-end: 5;
}

#gfnresp {
    min-height: 280px
}

.bottom_text {
    z-index: 102;
    margin: 0 auto;
    text-align: center;
    color: #FFF;
    height: fit-content;
    display: flex;
    gap: 2%;
    align-items: center;
    padding: 1.8%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.0em
}

.ghead {
    width: 100%;
}

.ghead ins {
    margin: 0.3% 0;
}

.gleft {
    grid-area: menu;
    width: auto
}

.gmiddle {
    grid-area: main;
}

.gcolumn {
    position: sticky;
    z-index: 1000;
}

.gfooter {
    grid-area: footer;
    padding-top: 16px;
    width: calc(100%)
}

.searchRes {
    background-color: #000;
    width: 100%;
    text-align: left;
    padding: 0.1% 1% 1%
}

.grid-container_listing {
    display: grid;
    grid-template-columns:repeat(9, 1fr);
    background-color: #000;
    grid-template-rows: auto;
    padding: 15px;
    width: 100%;
    column-gap: 10px;
    row-gap: 6px;
}

.grid-item_listing, .grid-item_listing-pro {
    border-radius: 6px 6px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.07);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.grid-item_listenFeat {
    border-radius: 6px 6px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.07);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.grid-item_listing .gamevido video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: 7;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
    box-sizing: border-box;
    padding: 3px;
    border: 2px solid #6fd2ff;
    border-radius: 10px 10px;
}

.grid-item_listing picture img, .grid-item_listingFeat picture img {
    transition: all 0.1s ease-in-out;
    aspect-ratio: 336 / 189;
}

.grid-item_listing-pro .gamevido video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: 7;
    border-radius: 6px 6px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: all 0.2s cubic-bezier(.65, .05, .36, 1) 0s;
    box-sizing: border-box;
    padding: 2px;
    border: 2px solid #6fd2ff;
}

.grid-item_listing-pro picture img {
    transition: all 0.1s ease-in-out;
    aspect-ratio: 178 / 100;
    border: 2px solid transparent;
    border-radius: 6px 6px;
}

.h {
    margin-left: 0;
    margin-top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: block;
    position: relative;
    -webkit-transition: -webkit-transform .1s cubic-bezier(.5, 0, .1, 1);
    transition: transform .1s cubic-bezier(.5, 0, .1, 1);
    z-index: 10;
}

a.h:hover [class*='clHidden'] {
    visibility: visible;
    display: block;
}

a.h:hover [class*='clVisible '] {
    visibility: hidden;
    display: hidden
}

a.h:hover .gameVid {
    box-sizing: border-box;
    background-clip: content-box;
    transform: scale(1.15);
    box-shadow: 3px 3px 3px #00000055;
    border: 2px solid #101c22;
}

.pagero {
    transition: all .1s ease-in 0;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    border-radius: 8px;
    padding: 9px;
    background: #101c22;
    width: 34px;
    height: 34px;
    margin: 3px;
}

a.pagero:hover {
    background: rgb(132, 174, 194);
    color: #000;
}

.pageroActive {
    transition: all .1s ease-in 0s;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    border-radius: 8px;
    padding: 9px;
    background: #213945;
    width: 34px;
    height: 34px;
    cursor: default;
    margin: 3px;
}

.grid-item_listing img {
    border-radius: 10px 10px;
    transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1) 0s;
}

.grid-item_listing-pro_cont {
    display: grid;
    grid-template-columns:none;
    width: 100%;
    grid-gap: 2px;
}

.playmorePro {
    max-width: 100%;
    margin-bottom: 0;
    color: #fff;
    background: #101c22;
    padding: 18px;
    text-align: left;
    font-size: 1.2em;
    font-weight: 600;
    border-radius: 4px 4px;
    cursor: default;
}

.custom-width {
    display: inline-block;
}

.foot_grid {
    display: grid;
    grid-template-columns: auto auto auto auto;
    text-align: center;
    border-bottom: 2px solid #913F70;
    height: 49px;
    width: 100%
}

.foot-grid_item {
    background-color: #101c22;
    border-radius: 4px 4px 0 0;
    border-left: 1px solid #000;
    border-top: 1px solid #192d36;
    padding: 12px 8px;
    margin: 3px 3px 0;
}

.foot-grid_item a { /*font-family: 'Righteous', Helvetica;font-size:1.1em;*/
    font-weight: bold
}

.pageneviou {
    background-color: #101c22;
    color: #6fd2ff;
    vertical-align: middle;
    border-radius: 18%;
    text-decoration: none;
    display: inline-block;
    padding: 0.4em 0.8em;
    grid-auto-flow: column;
    box-shadow: 2px 2px 0 #213945
}

.pageneviou:hover {
    box-shadow: none;
}

.pageNums {
    display: flex;
    flex-wrap: wrap;
    padding: 2% 1% 1%;
    font-family: 'Righteous', Helvetica;
    width: 100%;
    justify-content: center;
}

.custom-width {
    width: 100%
}

#main {
    transition: margin-left .5s;
}

.gamename {
    color: #fff;
    background-color: #101c2299;
    border-radius: 0 5px 5px 0;
    position: absolute;
    top: 10px;
    left: 2px;
    transition: opacity 0.4s ease-in;
    opacity: 0;
    transition-delay: 200ms;
    z-index: 12;
    padding: 1.7% 4.5% 2% 1%;
    max-width: 97%;
    overflow: hidden;
}

.bardd78 {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 3;
    border-radius: 6px
}

.bardd78 img {
    z-index: 14;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.barff77 {
    position: absolute;
    background: transparent;
    bottom: 0;
    z-index: 11;
    height: 100%;
    width: 100%;
}

.gamedesc {
    padding: 1.5% 1.7% 7%;
    color: #fff;
}

.pflast {
    width: 100%
}

#large_content_box {
    padding: 1% 3%;
    font-size: 12px
}

.pure-menu-linker {
    padding: 3px 0 0 2px;
    line-height: 1.15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#playvideoButton {
    margin-top: 2em;
}

@media screen and (max-width: 550px) {
    body {
        padding: 0;
        text-align: center;
        color: #fff;
        background: #000
    }

    .advmnt {
        margin-right: 0;
    }

    .advmnt:after {
        display: none;
    }

    #gabHeader {
        justify-content: flex-start
    }

    .wrpp {
        padding-left: 0
    }

    /*bdcn*/
    .game {
        padding-left: 0;
        text-align: center;
    }

    .pure-menu-linker span {
        min-width: 80px;
    }

    .pure-menu-linker svg {
        width: 60%
    }

    .pure-menu-linker {
        gap: 4px
    }
}

@media screen and (max-width: 1982px) {
    .grid-container_listing {
        grid-template-columns: repeat(8, 1fr)
    }
}

@media screen and (max-width: 1750px) {
    .grid-container_listing {
        grid-template-columns: repeat(7, 1fr)
    }
}

@media screen and (max-width: 1460px) {
    .grid-container_listing {
        grid-template-columns: repeat(6, 1fr)
    }
}

@media screen and (max-width: 1320px) {
    #padd {
        padding-bottom: 3%
    }

    .grid-container_listing {
        grid-template-columns: repeat(5, 1fr)
    }
}

@media screen and (max-width: 1078px) {
    .grid-container_listing {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media screen and (max-width: 870px) {
    .grid-container_listing {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media screen and (max-width: 870px) {
    .grid-container {
        grid-template-areas: 'main' 'footer';
        grid-template-columns: auto;
    }

    .foot-grid_item {
        padding: 12px 5px;
        font-size: 0.9em
    }
}

@media screen and (max-width: 550px) {
    .grid-container {
        grid-template-areas: 'main' 'footer';
        padding: 0;
        grid-template-columns: auto;
    }

    .gleft, .gcolumn {
        display: none;
    }
}

@media screen and (max-width: 300px) {
    #GamegabTex {
        display: none
    }
}

@media screen and (max-width: 360px) {
    .pure-menu-linker span {
        min-width: 50px;
    }
}

@media screen and (max-width: 680px) {
    .biggrid {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 3;
    }
}

@media screen and (max-width: 610px) {
    .grid-container_listing {
        grid-template-columns: repeat(2, 1fr)
    }

    .grid-item_listing {
    }

    #main {
        padding: 0
    }
}

@media screen and (max-width: 450px) {
    .gleft {
        display: none
    }

    .grid-container {
        grid-template-areas:  'main' 'footer';
        padding: 0;
    }

    .grid-container_listing {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 2px;
    }

    .biggrid {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 3;
    }

    #gfnresp {
        min-height: 210px
    }

    #main {
        padding: 0
    }
}

.css-1exdxkp {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 200px;
    height: 34px;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: transparent;
    font-size: 14px;
    font-weight: 600;
}

.css-1exdxkp svg {
    width: 60px;
    height: 34px;
    padding: 0 19px;
    text-align: center;
    margin-left: -4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #6fd2ff;
}

.css-1exdxkp .LabelContainer {
    -webkit-transition: visibility 0s, opacity 0.3s, all 0.2s ease-in-out;
    transition: visibility 0s, opacity 0.3s, all 0.2s ease-in-out;
    opacity: 0;
    visibility: hidden;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

@media (min-width: 1910px) {
    .css-1exdxkp .LabelContainer {
        opacity: 1;
        visibility: visible;
    }

    .wrpp {
        padding-left: 200px;
        justify-content: center;
    }

    .grid-container {
        display: grid;
        grid-template-areas: 'main' 'footer';
        grid-template-columns: 100%;
        width: 100%
    }
}

.css-1exdxkp:active {
    color: #6fd2ff;
}

.css-1exdxkp:active svg {
    color: #6fd2ff;
}

@media (hover: hover) {
    .css-1exdxkp {
        border-left-color: #6fd2ff;
    }

    .css-1exdxkp:hover {
        color: #6fd2ff;
    }

    .css-1exdxkp:hover [class*='LabelContainer'], .css-1exdxkp:hover [class*='css-6qu7l6'] {
        -webkit-transform: translate(8px, 0);
        -moz-transform: translate(8px, 0);
        -ms-transform: translate(8px, 0);
        transform: translate(8px, 0);
    }

    .css-1exdxkp [class*='LabelContainer'], .css-1exdxkp:hover [class*='css-6qu7l6'] {
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        color: #6fd2ff;
    }

    .css-1exdxkp svg {
        color: #6fd2ff;
    }
}

.css-1s73xoa {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 200px;
    height: 34px;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: transparent;
}

.css-1s73xoa svg {
    width: 60px;
    height: 34px;
    padding: 0 19px;
    text-align: center;
    margin-left: -4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.css-1s73xoa .LabelContainer {
    -webkit-transition: visibility 0, opacity .3s, all .2s ease-in-out;
    transition: visibility 0, opacity .3s, all .2s ease-in-out;
    opacity: 0;
    visibility: hidden;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

@media (min-width: 1910px) {
    .css-1s73xoa .LabelContainer {
        opacity: 1;
        visibility: visible;
    }
}

.css-1s73xoa:active {
    color: #6fd2ff;
}

.css-1s73xoa:active svg {
    color: #6fd2ff;
}

@media (hover: hover) {
    .css-1s73xoa:hover {
        cursor: pointer;
        color: #6fd2ff;
    }

    .css-1s73xoa:hover [class*='LabelContainer'], .css-1s73xoa:hover [class*='css-6qu7l6'] {
        -webkit-transform: translate(8px, 0);
        -moz-transform: translate(8px, 0);
        -ms-transform: translate(8px, 0);
        transform: translate(8px, 0);
        -webkit-transition: visibility 0s, opacity 0.3s, all 0.2s ease-in-out;
        transition: visibility 0s, opacity 0.3s, all 0.2s ease-in-out;
    }

    .css-1s73xoa:hover [class*='css-6qu7l6'] {
        transition: 0.05s
    }

    .css-1s73xoa:hover svg {
        color: #6fd2ff;
    }
}

.css-1upoo4v {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 200px;
    height: 34px;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: transparent;
    opacity: .3;
}

.css-1upoo4v svg {
    width: 60px;
    height: 34px;
    padding: 0 19px;
    text-align: center;
    margin-left: -4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #6fd2ff;
}

.css-1upoo4v .LabelContainer {
    -webkit-transition: visibility 0s, opacity 0.3s, all 0.2s ease-in-out;
    transition: visibility 0s, opacity 0.3s, all 0.2s ease-in-out;
    opacity: 0;
    visibility: hidden;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

@media (min-width: 1910px) {
    .css-1upoo4v .LabelContainer {
        opacity: 1;
        visibility: visible;
    }
}

.css-1upoo4v:active {
    color: #A48eff;
}

.css-1upoo4v:active svg {
    color: #A48eff;
}

.contentCent {
    width: 100%;
    display: flex;
    padding: 8px 16px 16px 16px;
}

.contentCent_in {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%
}

.contentLeft {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 16px 16px 16px;
    gap: 4px
}

.fourSmall {
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px
}

.burku {
    display: grid;
    flex-flow: row wrap;
    box-sizing: border-box;
    content-visibility: visible;
    padding: 0;
    gap: 7px;
    margin: 0;
    width: 100%;
    grid-template-columns: repeat(1, 1fr);
}

.autocomplete-items {
    position: absolute;
    z-index: 105;
    top: 100%;
    left: 0;
    right: 0;
}

@media (max-width: 329.95px) {
    .grid-item_listing {
        width: calc(100vw - (32px));
    }
}

@media (min-width: 330px) and (max-width: 589.95px) {
    .burku {
        grid-template-columns: repeat(2, 1fr);
    }

    .contentCent {
        padding: 8px 8px
    }

    .grid-item_listing {
        width: calc((100vw - (23px)) / 2);
    }

    .gmiddle {
        width: 100%
    }
}

@media (min-width: 590px) and (max-width: 849.95px) {
    .burku {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-item_listing {
        width: calc((100vw - (46px)) / 3);
    }
}

@media (min-width: 850px) and (max-width: 1079.95px) {
    .burku {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-item_listing {
        width: calc((100vw - (53px)) / 4);
    }
}

@media (min-width: 1080px) and (max-width: 1249.95px) {
    .burku {
        grid-template-columns: repeat(5, 1fr);
    }

// .grid-item_listing {
       width: calc((100vw - (60px)) / 5);
   }
}

@media (min-width: 1250px) and (max-width: 1544.95px) {
    .burku {
        grid-template-columns: repeat(6, 1fr);
    }

// .grid-item_listing {
       width: calc((100vw - (67px)) / 6);
   }
}

@media (min-width: 1545px) and (max-width: 2019.95px) {
    .burku {
        grid-template-columns: repeat(7, 1fr);
    }

// .grid-item_listing {
       width: calc((100vw - (74px)) / 7);
   }
}

@media (min-width: 2020px) {
    .burku {
        grid-template-columns: repeat(8, 1fr);
    }
}

.autocomplete {
    position: relative;
    box-sizing: border-box
}

@media (max-width: 1679px) {
    .gleft {
        display: none
    }
}

img#expando {
    display: none;
    position: absolute;
    z-index: 1;
    -ms-interpolation-mode: bicubic;
}

.wide img#expando, .tall img#expando {
    display: block;
}

.wide img#expando {
    height: auto;
    width: 100%;
}

.tall img#expando {
    height: 100%;
    width: auto;
}

.noPhone {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.oneSmall {
    width: calc(100% / 2);
}

.twoSmall {
    display: grid;
    gap: 4px;
    padding: 2px;
}

.playBoder {
    border: 1px solid #fff;
    display: flex;
    padding: 9px 10px 11px;
    border-radius: 7px;
}

.playBoderLong {
    width: 165px;
    border: 1px solid #bbb;
    padding: 1.2% 1.3%;
    border-radius: 7px;
    margin: 0 auto;
    text-align: center;
}

/*!
Pure v2.0.6 (reduced size)
*/
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

a {
    background-color: transparent
}

b, strong {
    font-weight: bolder
}

code {
    font-family: monospace, monospace;
    font-size: 1em
}

img {
    border-style: none
}

/*! jQuery UI css - v1.13.2 - 2022-07-14
* REDUCED FILE SIZE !
* */
.ui-icon {
    display: inline-block;
    vertical-align: middle;
    margin-top: -.25em;
    position: relative;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat
}

.ui-widget-icon-block {
    left: 50%;
    margin-left: -8px;
    display: block
}

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default
}

.ui-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: 0
}

.ui-menu .ui-menu {
    position: absolute
}

.ui-menu .ui-menu-item {
    margin: 0;
    cursor: pointer;
    list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
}

.ui-menu .ui-menu-item-wrapper {
    position: relative;
    padding: 3px 1em 3px .4em
}

.ui-menu .ui-state-active, .ui-menu .ui-state-focus {
    margin: -1px
}

.ui-menu .ui-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: .2em;
    margin: auto 0
}

.ui-menu .ui-menu-icon {
    left: auto;
    right: 0
}

.ui-button {
    padding: .4em 1em;
    display: inline-block;
    position: relative;
    line-height: normal;
    margin-right: .1em;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; /*overflow:visible*/
}

.ui-button, .ui-button:active, .ui-button:hover, .ui-button:link, .ui-button:visited {
    text-decoration: none
}

.ui-button-icon-only {
    width: 2em;
    box-sizing: border-box;
    text-indent: -9999px;
    white-space: nowrap
}

input.ui-button.ui-button-icon-only {
    text-indent: 0
}

.ui-button-icon-only .ui-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px
}

button.ui-button::-moz-focus-inner, input.ui-button::-moz-focus-inner {
    border: 0;
    padding: 0
}

.ui-tabs {
    position: relative;
    padding: .2em
}

.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0
}

.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 1px .2em 0 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: -1px;
    padding-bottom: 1px
}

.ui-widget {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em
}

.ui-widget .ui-widget {
    font-size: 1em
}

.ui-widget button, .ui-widget input, .ui-widget select, .ui-widget textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em
}

.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5
}

.ui-widget-content {
    border: 1px solid #ddd;
    background: #fff;
    color: #333
}

.ui-widget-content a {
    color: #333
}

.ui-widget-header {
    border: 1px solid #ddd;
    background: #e9e9e9;
    color: #333;
    font-weight: 700
}

.ui-widget-header a {
    color: #333
}

.ui-button, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: 400;
    color: #454545
}

.ui-button, .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button {
    color: #454545;
    text-decoration: none
}

.ui-button:focus, .ui-button:hover, .ui-state-focus, .ui-state-hover, .ui-widget-content .ui-state-focus, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-focus, .ui-widget-header .ui-state-hover {
    border: 1px solid #ccc;
    background: #ededed;
    font-weight: 400;
    color: #2b2b2b
}

.ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited, .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, a.ui-button:focus, a.ui-button:hover {
    color: #2b2b2b;
    text-decoration: none
}

.ui-button.ui-state-active:hover, .ui-button:active, .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active {
    border: 1px solid #003eff;
    background: #007fff;
    font-weight: 400;
    color: #fff
}

.ui-icon-background, .ui-state-active .ui-icon-background {
    border: #003eff;
    background-color: #fff
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #fff;
    text-decoration: none
}

.ui-state-checked {
    border: 1px solid #dad55e;
    background: #fffa90
}

.ui-icon {
    width: 16px;
    height: 16px
}

.ui-icon-document {
    background-position: -32px -96px
}

.ui-icon-document-b {
    background-position: -48px -96px
}

.ui-icon-tag {
    background-position: -240px -96px
}

.ui-icon-home {
    background-position: 0 -112px
}

.ui-icon-search {
    background-position: -160px -112px
}

.ui-icon-link {
    background-position: -240px -112px
}

.ui-icon-close {
    background-position: -80px -128px
}

.ui-icon-key {
    background-position: -112px -128px
}

.ui-icon-clipboard {
    background-position: -160px -128px
}

.ui-icon-image {
    background-position: -208px -128px
}

.ui-icon-video {
    background-position: -224px -128px
}

.ui-icon-script {
    background-position: -240px -128px
}

.ui-icon-info {
    background-position: -16px -144px
}

.ui-icon-play {
    background-position: 0 -160px
}

.ui-icon-circle-close {
    background-position: -32px -192px
}

.ui-corner-all, .ui-corner-left, .ui-corner-top {
    border-top-left-radius: 3px
}

.ui-corner-all, .ui-corner-right, .ui-corner-top, .ui-corner-tr {
    border-top-right-radius: 3px
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left {
    border-bottom-left-radius: 3px
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right {
    border-bottom-right-radius: 3px
}

.ui-widget-shadow {
    -webkit-box-shadow: 0 0 5px #666;
    box-shadow: 0 0 5px #666
}

.ui-autocomplete-row, .ui-widget-content, .ui-widget-content a {
    background: #101c22;
    color: #FFF;
    font-weight: bold;
}

.ui-state-active, .ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active, a.ui-button:active,
.ui-button:active, .ui-button.ui-state-active:hover {
    background: #213945;
    font-weight: bold;
    color: #fff;
    margin: 0;
    border: none;
}

.ui-menu .ui-menu-item-wrapper {
    position: relative;
    padding: 3px 10px 2px 2px;
}

.ui-widget.ui-widget-content {
    border: none;
}

.ui-autocomplete-row:hover {
    background: #6fd2ff;
}

.autoli {
    width: 100%;
    height: 100%;
    justify-items: left;
    display: flex;
}

#ui-id-1, #ui-id-1 ul {
    max-height: 432px;
    margin-top: 106px;
    z-index: 113;
    overflow-y: auto;
    text-align: left
}

#ui-id-1::-webkit-scrollbar {
    width: 6px;
    background: rgba(0, 0, 0, 0);
}

#ui-id-1::-webkit-scrollbar-thumb {
    background: #6fd2ff;
    border-radius: .2em;
}

.ui-menu .ui-menu-item {
    border-bottom: 1px solid #080C0F;
}

html {
    line-height: 1.0;
}

div#large_flash_game_box {
    background-color: #000;
    height: 100%;
    z-index: 125;
}

#likeit, #hateit {
    color: #6fd2ff;
}

#likeit svg:hover g g {
    stroke: #80FF80
}

#hateit svg:hover g g {
    stroke: #ff5c5c
}

.thetopbar_play {
    height: 0;
    z-index: 105;
    text-align: center;
}

#gameholder {
    width: 100%;
    min-height: 231px;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    z-index: 3;
}

.tabsundergame {
    background-color: #101C22;
    color: #6fd2ff;
    margin: 0 auto;
    flex-flow: row nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    user-select: none;
    box-sizing: content-box;
    z-index: 3;
    position: absolute;
    bottom: 0;
    transition: all 0.2s ease-in-out 0s;
    left: 0;
    right: 0;
    height: 45px;
    display: none;
    overflow: hidden;
}

.grid-item_listing-pro .gamevido video {
    width: 178px;
    height: 100px
}

.tags_undergame {
    display: flex;
    margin: 0 auto;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    justify-content: space-evenly;
    -webkit-box-align: center;
    align-items: center;
    user-select: none;
    box-sizing: content-box;
    font-size: 14px;
    width: 100%;
    gap: 5px 0;
    text-align: center;
    padding: 5px 0;
}

.tagElement {
    padding: 8px 17px;
    background: #29414E;
    min-width: 60px;
    border-radius: 11px;
    font-weight: bold
}

.tagElement:hover {
    background: #84aec2;
    color: #101C22;
}

.belowWalkthrough {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    background: #29414E;
    text-indent: 10px;
    height: 34.1px;
    max-width: 1024px
}

.tabsundergam_grid-items {
    padding-left: 1.3%;
    text-align: center;
}

#walkthroughButton {
    vertical-align: middle;
    justify-content: center;
    padding-right: 13px;
    padding-top: 2px;
}

#fullscreenButton {
    padding: 4px 1% 0
}

.ifneeded {
    transition: 0.5s;
    -webkit-font-smoothing: antialiased;
}

#endFullscr {
    display: none;
    position: fixed;
    top: 35px;
    padding: 5px 8px 5px;
    background: #00000099;
    border-radius: 0 50% 50% 0;
}

.grid-container {
    grid-template-areas:
        'main'
        'belowg'
        'belowAr'
        'footer';
    grid-template-columns: 1fr;
}

.gleft {
    display: none
}

.desc {
    display: none;
    grid-area: desc;
    margin-top: 8px;
}

.desc_inner {
    text-align: left;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: column wrap;
    background-color: #101C22 !important;
    border-width: 0;
    border-radius: 10px 10px;
    color: #fff;
    padding-right: 18px;
    padding-left: 18px;
    width: 100%;
    height: 100%;
    padding-bottom: 18px;
    position: relative;
    margin: auto;
    line-height: 1.5;
}

.desc_innerText {
    padding-bottom: 8px;
    padding-right: 8px;
    text-align: justify;
}

.desc_innerFooter {
    background-color: #101C22;
    border-radius: 10px 10px;
    padding: 1%;
    text-align: left;
    display: flex;
    min-height: 30px;
    flex-flow: row nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    user-select: none;
    box-sizing: content-box;
    /* font-family: 'Righteous', cursive; */
    margin-bottom: 12px;
}

.desc_video {
    grid-area: video;
    display: none
}

.desc_video_inner {
    display: none;
    margin-top: 8px
    background-color: #101C22 !important;
    border-width: 0;
    border-radius: 10px 10px 0 0;
    padding-right: 18px;
    width: 100%;
    height: calc(100% - 40px);
    margin: auto;
    line-height: 1.5;
    padding-top: 18px;
}

.galeft {
    display: none;
    grid-area: galeft;
}

.garightau {
    display: none;
    grid-area: garightau;
}

.garightau_alt {
    display: none;
    grid-area: garightau_alt;
}

#game_did {
    margin: 0 auto;
}

#game_did_in {
    height: 100%;
    text-align: center
}

.walkthroughContainer {
    float: right;
    padding: 2% 2.2%;
    margin-top: 0px;
    position: relative;
}

#howto {
    margin-top: 3px;
    display: none
}

.garightau_2x2, .garightau_2x2-content {
    display: none
}

.galeft, .garightau {
    height: fit-content;
}

.undergameMore {
    width: 100%;
    grid-area: belowAr;
    display: grid;
    grid-template-columns: repeat(4, 178px);
    justify-content: space-evenly
}

.underGwagon {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    flex-flow: row;
    text-align: center;
    background: #000;
    align-items: center;
    grid-area: belowg;
    margin: 0 auto
}

.rresp {
    padding-top: 2px
}

#fbb {
    padding-top: 17px;
    width: 102px;
    overflow: hidden
}

@media (max-width: 1199.95px) {
    /* start before all other media */
    .grid-item_listing-pro picture img {
        border: 0;
        width: 178px;
        height: 178px
    }
}

@media (max-width: 364.95px) {
    .undergameMore {
        width: 100%;
        margin-left: 0;
        grid-gap: 4px;
        grid-template-columns: 1fr 1fr;
        justify-content: center;
        padding: 0 4px
    }

    .underGwagon {
        padding: 10px 0;
    }

    .grid-item_listing, .grid-item_listing-pro {
        max-width: calc(50vw - 4px);
    }

    #gameholder {
        width: calc(100vh)
    }

    .dotted {
        width: 100%;
        height: auto;
    }

    /* .grid-item_listing-pro picture img { max-width: 178px; width: 100%; max-height: 100px; height: auto;aspect-ratio: 178 / 100;} */
    .grid-item_listing-pro picture img {
        width: 100%;
        max-height: auto;
        height: auto;
        aspect-ratio: 178 / 100;
    }

    .gmiddle {
        width: calc(100vw);
        max-width: 100%;
        min-height: 231px;
        height: auto;
    }
}

@media (min-width: 365px) and  (max-width: 545.95px) {
    .undergameMore {
        margin-left: 0;
        grid-gap: 4px;
        grid-template-columns: 178px 178px;
        justify-content: space-evenly;
    }

    .underGwagon {
        padding: 10px 0;
    }

    .dotted {
        width: 182px;
        height: 104px;
    }

    .gmiddle {
        width: calc(100vw);
        min-height: 231px;
        height: auto;
    }
}

@media (min-width: 546px)  and  (max-width: 735.95px) {
    .undergameMore {
        margin-left: 0;
        grid-gap: 4px;
        grid-template-columns: repeat(3, 178px);
        justify-content: space-evenly;
    }

    .dotted {
        width: 178px;
        height: 100px;
    }

    .underGwagon {
        padding: 10px 0;
        height: fit-content;
    }

    .gmiddle {
        width: calc(100vw);
        min-height: 231px;
        height: auto;
    }

    #howto {
        margin-top: 3px;
        display: block
    }
}

@media (min-width: 736px)  and  (max-width: 831.95px) {
    .undergameMore {
        margin-left: 0;
        grid-gap: 4px;
        grid-template-columns: repeat(4, 178px);
        justify-content: space-evenly;
    }

    .dotted {
        width: 178px;
        height: 100px;
    }

    .underGwagon {
        padding: 10px 0;
        height: fit-content;
    }

    .gmiddle {
        width: calc(100vw);
        min-height: 231px;
        height: auto;
    }

    #howto {
        margin-top: 3px;
        display: block
    }
}

@media (min-width: 832px) and (max-width: 1199.95px) {
    .gmiddle {
        width: calc(100vw);
        min-height: 231px;
        height: auto;
    }

    .undergameMore {
        margin-left: 0;
        height: 212px;
        overflow: hidden;
        grid-gap: 4px;
    }

    .underGwagon {
        padding: 10px 0;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    #howto {
        margin-top: 3px;
        display: block
    }
}

@media (min-width: 930px) and (max-width: 1199.95px) {
    .undergameMore {
        grid-template-columns: repeat(5, 178px);
    }

    #howto {
        margin-top: 3px;
        display: block
    }
}

@media (min-width: 1201px) and (max-width: 1358.95px) {
    .grid-container {
        display: grid;
        gap: 4px;
        margin-top: 6px;
        grid-template-columns: repeat(6, 183px);
        /* grid-template-rows: repeat(9, 100px); */
        grid-template-areas:
  'galeft main main main main garight'
  'galeft main main main main garight'
  'galeft main main main main garight'
  'galeft main main main main garight'
  'galeft belowg belowg belowg belowg garight'
  'galeft belowg belowg belowg belowg garight'
  'galeft belowAr belowAr belowAr belowAr garight'
  'galeft belowAr belowAr belowAr belowAr garight'
  'galeft belowAr belowAr belowAr belowAr garight'
  'desc desc desc desc desc desc'
  'desc desc desc desc desc desc'
  'desc desc desc desc desc desc'
  'desc desc desc desc desc desc'
  'desc desc desc desc desc desc'
  'desc desc desc desc desc desc'
  'desc desc desc desc desc desc'
  'desc desc desc desc desc desc'
  'footer footer footer footer footer footer';
    }

    .tabsundergame {
        position: absolute;
    }

    #gWagon_wrap {
        width: 100%;
        height: 100%;
    }

    /* .gfooter{padding-top:240px} */
    .undergameMore {
        width: 748px;
        grid-area: belowAr;
        flex-flow: column wrap;
        box-sizing: border-box;
        display: flex;
        gap: 0 6px;
        height: 318px;
        overflow: hidden;
    }

    .underGwagon {
        width: 748px;
        height: 158px
    }

    .grid-item_listing-pro_cont {
        grid-template-columns:none;
        grid-gap: 0;
        justify-content: center;
    }

    .grid-item_listing-pro {
        width: 182px;
        height: 104px;
        margin: 1px 0;
        border-width: 2px;
        padding: 0;
        border-style: solid;
        border-color: transparent;
        box-sizing: border-box;
        display: block;
        position: relative;
    }

    .grid-item_listing-pro picture img {
        border: 0;
        width: 178px;
        height: 100px;
    }

    .gmiddle {
        width: 100%;
        height: 468px;
        margin-top: -4px;
    }

    .gfooter {
        padding-top: 8px;
    }

    .gcolumn {
        width: 60px
    }

    .galeft {
        display: flex;
        flex-flow: row wrap;
        margin-top: -5px
    }

    .gright {
        display: block;
        margin-top: -6px
    }

    .vert_gameright {
        padding-top: 2px;
        top: 58px;
        width: 178px;
        margin: 0 auto;
    }

    .desc {
        display: flex;
        flex-direction: column;
    }

    .desc_video_inner {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center
    }

    #game_did {
        width: 100%;
        height: calc(100% - 45px)
    }

    #howto {
        margin-top: 3px;
        display: block
    }
}

@media (min-width: 1359px) and (max-width: 1559.95px) {
    .grid-container {
        display: grid;
        gap: 4px;
        margin-top: 4px;
        grid-template-columns: repeat(7, 180px);
        /* grid-template-rows: repeat(9,100px); */
        grid-template-areas:
    'galeft main main main main main garight'
    'galeft main main main main main garight'
    'galeft main main main main main garight'
    'galeft main main main main main garight'
    'galeft main main main main main garight'
    'galeft belowg belowg belowg belowg belowg garight'
    'galeft belowg belowg belowg belowg belowg garight'
    'galeft belowAr belowAr belowAr belowAr belowAr garight'
    'galeft belowAr belowAr belowAr belowAr belowAr garight'
    'galeft belowAr belowAr belowAr belowAr belowAr garight'
    'desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc'
    'footer footer footer footer footer footer footer';
    }

    .tabsundergame {
        position: absolute;
    }

    #gWagon_wrap {
        width: 100%;
        height: 100%;
    }

    .undergameMore {
        width: 100%;
        grid-area: belowAr;
        flex-flow: row wrap;
        box-sizing: border-box;
        justify-content: space-evenly;
        overflow: hidden;
        height: 216px;
        display: flex;
        flex-direction: column;
    }

    .grid-item_listing-pro picture img {
        border: 0;
        width: 178px;
        height: 100px
    }

    .grid-item_listing-pro_cont {
        grid-template-columns:none;
        grid-gap: 0;
        justify-content: center;
    }

    .grid-item_listing-pro {
        width: 182px;
        height: 104px;
        margin: 2px;
        border-width: 2px;
        padding: 0;
        border-style: solid;
        border-color: transparent;
        box-sizing: border-box;
        display: block;
        position: relative;
    }

    .undergameMore .grid-item_listing-pro {
    }

    .gcolumn {
        width: 60px
    }

    .vert_gameright {
        padding-top: 3px;
        top: 58px;
    }

    .gmiddle {
        width: 906px;
        height: 532px;
        margin: 4px auto 0 6px;
    }

    .galeft {
        display: block;
        display: flex;
        flex-flow: row wrap;
    }

    .gright {
        display: block;
        padding-left: 4px;
    }

    .desc {
        display: flex;
        flex-direction: column;
    }

    .desc_video_inner {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center
    }

    #game_did {
        width: 100%;
        height: calc(100% - 45px)
    }

    #howto {
        margin-top: 3px;
        display: block
    }
}

@media (min-width: 1560px) and (max-width: 1769.95px) {
    .grid-container {
        display: grid;
        gap: 4px;
        grid-template-columns: repeat(8, 178px);
        /* grid-template-rows: repeat(9,100px); */
        grid-template-areas:
    'galeft main main main main main garight garightau'
    'galeft main main main main main garight garightau'
    'galeft main main main main main garight garightau'
    'galeft main main main main main garight garightau'
    'galeft main main main main main garight garightau'
    'galeft main main main main main garight garightau'
    'galeft belowg belowg belowg belowg belowg garight garightau'
    'galeft belowg belowg belowg belowg belowg garight garightau'
    'galeft belowAr belowAr belowAr belowAr belowAr garight garightau'
    'desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc'
    'footer footer footer footer footer footer footer footer'
    }

    .tabsundergame {
        position: absolute;
    }

    .gmiddle, #gameholder {
        width: 900px;
        height: 640px;
        margin: 0 auto;
        margin-top: 2px;
        margin-left: 4px
    }

    #gWagon_wrap {
        width: 100%;
        height: 100%;
    }

    .undergameMore {
        width: 100%;
        grid-area: belowAr;
        flex-flow: row wrap;
        box-sizing: border-box;
        justify-content: space-evenly;
        grid-template-columns: repeat(5, 178px);
        overflow: hidden;
        height: 104px;
    }

    .underGwagon {
        width: 900px;
        margin-left: 8px;
    }

    .vert_gameright {
        padding-top: 3px;
        top: 58px;
    }

    .grid-item_listing-pro picture img {
        border: 0;
        width: 178px;
        height: 100px
    }

    .grid-item_listing-pro_cont {
        grid-template-columns:none;
        grid-gap: 0;
        justify-content: center;
    }

    .grid-item_listing-pro {
        width: 182px;
        height: 104px;
        margin: 2px;
        border-width: 2px;
        padding: 0;
        border-style: solid;
        border-color: transparent;
        box-sizing: border-box;
        display: block;
        position: relative;
    }

    .gcolumn {
        width: 60px
    }

    .galeft {
        display: block;
        display: flex;
        flex-flow: row wrap;
    }

    .gright {
        display: block;
        padding-left: 4px;
    }

    .garightau {
        display: block;
        display: flex;
        flex-flow: row wrap;
    }

    .desc {
        display: flex;
        flex-direction: column;
    }

    .desc_video_inner {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center
    }

    #game_did {
        width: 100%;
        height: calc(100% - 45px)
    }

    #howto {
        margin-top: 3px;
        display: block
    }
}

@media (min-width: 1770px) and (max-width: 2069.95px) {
    .grid-container {
        display: grid;
        gap: 4px;
        grid-template-columns: repeat(9, 178px);
        grid-template-rows: repeat(9, 100px);
        grid-template-areas:
    'galeft main main main main main main garight garightau'
    'galeft main main main main main main garight garightau'
    'galeft main main main main main main garight garightau'
    'galeft main main main main main main garight garightau'
    'galeft main main main main main main garight garightau'
    'galeft main main main main main main garight garightau'
    'galeft belowg belowg belowg belowg belowg belowg garight garightau'
    'galeft belowg belowg belowg belowg belowg belowg garight garightau'
    'galeft belowAr belowAr belowAr belowAr belowAr belowAr garight garightau'
    'desc desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc desc'
    'footer footer footer footer footer footer footer footer footer';
    }

    .tabsundergame {
        position: absolute;
    }

    .gmiddle, #gameholder {
        width: 1088px;
        height: 620px;
    }

    #gWagon_wrap {
        width: 100%;
        height: 100%;
    }

    .undergameMore {
        width: 100%;
        grid-area: belowAr;
        flex-flow: row wrap;
        box-sizing: border-box;
        justify-content: space-evenly;
        grid-template-columns: repeat(6, 178px);
        overflow: hidden;
        max-height: 104px;
    }

    .rresp {
        width: 1084px;
        height: 196px
    }

    .grid-item_listing-pro_cont {
        grid-template-columns:none;
        grid-gap: 2px;
        justify-content: center;
    }

    .grid-item_listing-pro {
        padding: 0;
        box-sizing: border-box;
        display: block;
        position: relative;
    }

    .grid-item_listing-pro picture img {
        border: 0
    }

    .gcolumn {
        width: 60px
    }

    .galeft {
        display: block;
        display: flex;
        flex-flow: row wrap;
        gap: 2px 2px;
    }

    .garightau {
        display: block;
        display: flex;
        flex-flow: row wrap;
        gap: 2px;
    }

    .gright {
        display: block;
    }

    .desc {
        display: flex;
        flex-direction: column;
    }

    .desc_video_inner {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center
    }

    .walkthroughContainer {
        padding: 1.5% 2%
    }

    #game_did {
        width: 100%;
        height: 100%
    }

    #howto {
        margin-top: 3px;
        display: block
    }
}

@media (min-width: 2070px) and (max-width: 2269.95px) {
    .grid-container {
        display: grid;
        gap: 4px;
        grid-template-columns: repeat(9, 178px);
        grid-template-rows: repeat(9, 100px);
        grid-template-areas:
    'galeft main main main main main main garight garightau'
    'galeft main main main main main main garight garightau'
    'galeft main main main main main main garight garightau'
    'galeft main main main main main main garight garightau'
    'galeft main main main main main main garight garightau'
    'galeft main main main main main main garight garightau'
    'galeft belowg belowg belowg belowg belowg belowg garight garightau'
    'galeft belowg belowg belowg belowg belowg belowg garight garightau'
    'galeft belowAr belowAr belowAr belowAr belowAr belowAr garight garightau'
    'desc desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc desc'
    'desc desc desc desc desc desc desc desc desc'
    'footer footer footer footer footer footer footer footer footer';
    }

    .tabsundergame {
        position: absolute;
    }

    .gmiddle, #gameholder {
        width: 1088px;
        height: 620px;
    }

    #gWagon_wrap {
        width: 100%;
        height: 100%;
    }

    .grid-item_listing-pro picture img {
        border: 0
    }

    .undergameMore {
        width: 100%;
        grid-area: belowAr;
        flex-flow: row wrap;
        box-sizing: border-box;
        justify-content: space-evenly;
        grid-template-columns: repeat(6, 178px);
        overflow: hidden;
        height: 100px;
    }

    .grid-item_listing-pro_cont {
        grid-template-columns:none;
        grid-gap: 4px;
        justify-content: center;
    }

    .grid-item_listing-pro {
        width: 178px;
        height: 100px;
        padding: 0;
        display: block;
        position: relative;
    }

    .gcolumn {
        width: 60px
    }

    .galeft {
        display: block;
        display: flex;
        flex-flow: row wrap;
        gap: 4px;
    }

    .garightau {
        display: block;
        display: flex;
        flex-flow: row wrap;
        gap: 4px;
    }

    .desc {
        display: flex;
        flex-direction: column;
    }

    .gright {
        display: block;
        gap: 4px;
    }

    .desc_video_inner {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center
    }

    .walkthroughContainer {
        padding: 1.5% 2%
    }

    #game_did {
        width: 100%;
        height: calc(100% - 45px)
    }

    #howto {
        margin-top: 3px;
        display: block
    }
}

@media (min-width: 2270px) {
    .grid-container {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(9, 196px);
        grid-template-rows: repeat(9, 113px);
        grid-template-areas:
   'galeft main main main main main main garightau_alt garightau_alt'
   'galeft main main main main main main garightau_alt garightau_alt'
   'galeft main main main main main main garightau_alt garightau_alt'
   'galeft main main main main main main garightau_alt garightau_alt'
   'galeft main main main main main main garightau_alt garightau_alt'
   'galeft main main main main main main garightau_alt garightau_alt'
   'galeft belowg belowg belowg belowg belowg belowg garightau_alt garightau_alt'
   'galeft belowAr belowAr belowAr belowAr belowAr belowAr garightau_alt garightau_alt'
   'desc desc desc desc desc desc desc desc desc'
   'desc desc desc desc desc desc desc desc desc'
   'desc desc desc desc desc desc desc desc desc'
   'desc desc desc desc desc desc desc desc desc'
   'desc desc desc desc desc desc desc desc desc'
   'desc desc desc desc desc desc desc desc desc'
   'desc desc desc desc desc desc desc desc desc'
   'footer footer footer footer footer footer footer footer footer';
    }

    .tabsundergame {
        position: absolute;
    }

    .gmiddle {
        width: 1216px;
        height: 716px;
        margin-top: 4px
    }

    #gameholder {
        width: 1216px;
        height: 716px;
    }

    #gWagon_wrap {
        width: 100%;
        height: 100%;
    }

    .rresp {
        width: 1216px;
        height: 116px
    }

    .undergameMore {
        width: 100%;
        grid-area: belowAr;
        flex-flow: row wrap;
        box-sizing: border-box;
        justify-content: space-evenly;
        grid-template-columns: repeat(6, 196px);
        overflow: hidden;
        height: 104px;
        gap: 4px;
    }

    .grid-item_listing-pro_cont {
        grid-template-columns:none;
        grid-gap: 0;
        justify-content: center;
    }

    .grid-item_listing-pro {
        width: 178px;
        height: 100px;
        margin: 1px;
        padding: 0;
        box-sizing: border-box;
        display: block;
        position: relative;
    }

    .gcolumn {
        width: 60px
    }

    .galeft {
        display: block;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-end;
        gap: 4px
    }

    .garightau {
        display: none;
        flex-flow: row wrap;
    }

    .garightau_alt {
        display: block;
        display: flex;
        flex-flow: row wrap;
        gap: 4px;
        height: max-content;
    }

    .garightau_2x2 {
        display: block;
        flex-flow: row wrap;
        width: 370px;
        height: 313px;
    }

    .garightau_2x2-content {
        display: block;
        width: 370px;
        max-height: 313px;
    }

    .grid-item_listing-pro picture img {
        border: 0
    }

    .desc {
        display: flex;
        flex-direction: column;
    }

    .gright {
        display: none;
        padding-left: 4px;
    }

    .desc_video_inner {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center
    }

    .walkthroughContainer {
        padding: 1.5% 2%
    }

    #gameholder {
        position: relative;
    }

    #game_did {
        width: 100%;
        height: calc(100% - 45px)
    }

    #howto {
        margin-top: 3px;
        display: block
    }
}

@media screen and (max-width: 1199.95px) {
    .grid-container {
        grid-template-areas:
    'main'
    'belowg'
    'belowAr'
    'footer';
        grid-template-columns: 1fr;
    }

    .gright {
        display: none
    }

    div#container {
        width: 100%
    }

    .gfooter {
        z-index: 2
    }

    .desc_innerText {
        padding: 45px 2% 1.4%;
    }

    .gamevido_play::after {
        background-color: rgba(12, 12, 12, 0.7);
    }
}

@media (min-width: 780px) and (max-width: 1200px) {
    .grid-container {
        grid-template-areas:
    'main'
    'belowg'
    'belowAr'
    'desc'
    'footer';
        grid-template-columns: 1fr;
    }

    .desc {
        display: block;
        height: fit-content
    }

    .desc_inner {
        padding: 5px 27px 15px 27px
    }

    .gameImgo_play img {
        min-height: 231px;
        width: 100%;
        object-fit: cover;
        opacity: 0.6;
        aspect-ratio: 800 / 600
    }

    #gameholder {
        width: calc(100%);
        height: auto;
        aspect-ratio: 800 / 600
    }

    .walkthroughContainer {
        float: none;
        display: block;
        margin: 0 auto;
        height: 0;
        text-align: center;
        position: relative;
        top: 0;
        width: 100%;
        padding-bottom: 56.25%;
        padding-left: 0;
        padding-right: 0
    }

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

    .belowWalkthrough {
        width: 100%;
        margin: 0 auto;
        height: 35px;
        position: relative;
        top: 0px;
    }

    .desc_innerFooter, .desc_inner {
        border-radius: 0
    }

    /* .desc { display: flex; flex-direction: column; } */
}

@media screen and (max-width: 779px) {
    .grid-container {
        grid-template-areas:
    'main'
    'belowg'
    'belowAr'
    'desc'
    'footer';
        grid-template-columns: 1fr;
    }

    .desc {
        display: block;
        height: fit-content
    }

    .desc_inner {
        padding: 0.75% 2%;
    }

    .desc_innerFooter {
        padding: 2.5%
    }

    .desc_innerFooter, .desc_inner {
        border-radius: 0
    }

    .walkthroughContainer {
        float: none;
        display: block;
        margin: 2px auto;
        height: 0;
        text-align: center;
        position: relative;
        margin-top: 0;
        width: 100%;
        padding-bottom: 56.25%;
        padding-left: 0;
        padding-right: 0;
        max-width: 1024px
    }

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

    .belowWalkthrough {
        width: 100%;
        margin: 0 auto;
        height: 35px;
        position: relative;
        top: 0;
    }

    #gameholder {
        width: 100%;
        height: auto;
        aspect-ratio: 800 / 600
    }

    .tags_undergame {
        flex-flow: row wrap;
        gap: 12px;
    }

    .gright {
        display: none
    }

    #main {
        padding: 0
    }
}

.rresp {
    width: calc(100vw);
    height: 255px;
    margin: 0 auto;
}

@media only screen and (min-width: 320px) {
    .rresp {
        width: calc(100vw);
        min-width: 320px;
        height: 255px;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 360px) {
    .rresp {
        width: calc(100vw);
        min-width: 360px;
        height: 312px
    }

    #walkthroughButton {
        display: none
    }

    #ytapi {
        padding: 4px 5px 0 0;
        width: 120px;
        overflow: hidden
    }
}

@media only screen and (min-width: 390px) {
    .rresp {
        width: calc(100vw);
        min-width: 386px;
        height: 327px
    }
}

@media only screen and (min-width: 410px) {
    .rresp {
        width: calc(100vw);
        min-width: 404px;
        height: 345px
    }
}

@media only screen and (min-width: 414px) {
    .rresp {
        width: calc(100vw);
        min-width: 410px;
        height: 355px
    }
}

@media only screen and (min-width: 470px) {
    .rresp {
        width: calc(100vw);
        min-width: 466px;
        height: 250px
    }
}

@media only screen and (min-width: 530px) {
    .rresp {
        width: calc(100vw);
        min-width: 526px;
        height: 94px
    }
}

@media only screen and (min-width: 596px) {
    .rresp {
        width: calc(100vw);
        min-width: 592px;
        height: 94px
    }
}

@media only screen and (min-width: 620px) {
    .rresp {
        width: calc(100vw);
        min-width: 616px;
        height: 94px
    }
}

@media only screen and (min-width: 680px) {
    .rresp {
        width: calc(100vw);
        min-width: 676px;
        height: 94px
    }
}

@media only screen and (min-width: 730px) {
    .rresp {
        width: calc(100vw);
        min-width: 726px;
        height: 94px
    }
}

@media only screen and (min-width: 768px) {
    .rresp {
        width: calc(100vw);
        min-width: 764px;
        height: 94px
    }

    #ytapi {
        padding: 4px 1.2% 0 0;
        width: 126px
    }
}

@media only screen and (min-width: 800px) {
    .rresp {
        width: calc(100vw);
        min-width: 796px;
        height: 94px
    }
}

@media only screen and (min-width: 844px) {
    .rresp {
        width: calc(100vw);
        min-width: 840px;
        height: 94px
    }
}

@media only screen and (min-width: 869px) {
    .rresp {
        width: calc(100vw);
        min-width: 865px;
        height: 94px
    }
}

@media only screen and (min-width: 896px) {
    .rresp {
        width: calc(100vw);
        min-width: 892px;
        height: 94px
    }
}

@media only screen and (min-width: 940px) {
    .rresp {
        width: calc(100vw);
        min-width: 936px;
        height: 94px
    }
}

@media only screen and (min-width: 980px) {
    .rresp {
        width: calc(100vw);
        min-width: 976px;
        height: 94px
    }
}

@media only screen and (min-width: 1024px) {
    .rresp {
        width: calc(100vw);
        min-width: 1020px;
        height: 94px
    }

    #ytapi {
        padding: 4px 1.7% 0 0;
        width: 130px;
    }
}

@media only screen and (min-width: 1080px) {
    .rresp {
        width: calc(100vw);
        height: 196px
    }
}

@media only screen and (min-width: 1140px) {
    .rresp {
        width: calc(100vw);
        height: 196px
    }
}

@media only screen and (min-width: 1200px) {
    .rresp {
        width: 748px;
        min-width: 748px;
        height: 158px
    }

    lite-youtube {
        width: 720px
    }
}

@media only screen and (min-width: 1359px) {
    .rresp {
        width: 900px;
        height: 208px
    }
}

@media only screen and (min-width: 1560px) {
    .rresp {
        width: 900px;
        height: 200px
    }
}

@media only screen and (min-width: 1770px) {
    .rresp {
        width: 1084px;
        height: 200px
    }
}

@media only screen and (min-width: 1920px) {
    .rresp {
        width: 1084px;
        height: 200px
    }
}

@media only screen and (min-width: 2270px) {
    .rresp {
        width: 100%;
        height: 108px
    }
}

/* if prerollad */
#splashScreen {
    z-index: 6;
    width: 100%;
    display: none;
    text-align: center;
    flex-direction: column;
    height: 100%;
    background-color: #09181F;
    /* align-items: center; */
    position: absolute;
    justify-content: center;
}

#pregamediv {
    overflow-y: hidden;
    width: 100%;
    height: 100%;
}

#gotoPlayBut {
    margin: 1% auto;
    padding: 2.2% 8%;
    color: #FFF;
    text-align: center;
    border: 0;
    cursor: pointer;
    z-index: 4;
    background-color: #5198ce;
    -webkit-border-radius: 5px 5px;
    -moz-border-radius: 5px 5px;
    border-radius: 5px 5px;
    font-size: 1.3em;
    font-family: 'Righteous', Helvetica;
}

.buttonRum {
    margin: 0 auto;
    padding: 2% 5%;
    width: 100%;
    z-index: 116;
}

#notonthis {
    z-index: 116;
    margin: 0 auto;
    width: 90%;
    cursor: default;
}

#ghtmlname {
    color: #000;
    font-size: 1em;
    padding: 1.5%;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(to left, #0000 17%, #fff7 50%, #0000 83%);
    z-index: 13;
    cursor: default;
}

#blurry {
    position: absolute;
    z-index: 2;
    background-size: cover;
    filter: blur(8px) brightness(1.1);
    width: 100%;
    height: 100%;
    /* calc( 100% - 45px ); */
    /* transform: scale(0.98); */
    overflow: hidden;
}

#adContainer {
    margin: 0 auto;
    width: 100%;
    height: 100%
}

#adsContainer {
    z-index: 5;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#videoElement {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}

#large_flash_game_box {
    grid-area: main;
    overflow: hidden;
    height: calc(100% - 4px)
}

.gamevido_play {
    height: 100%;
}

.gamevido_play video {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.gamevido_play::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(12, 12, 12, 0.8);
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gameImgo_play {
    height: 100%;
    width: 100%;
}

.gameImgo_play img {
    min-height: 231px;
    width: 100%;
    object-fit: cover;
    opacity: 0.6;
    aspect-ratio: 800 / 600
}

.gameImgo_play::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    object-fit: cover
}

.tabsundergame {
    width: 100%
}

#floating-snap-btn-wrapper {
    display: none;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 30%;
    left: 20px;
    width: 40px;
    height: 40px;
}

#endFullscr {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #00000055;
    color: white;
    z-index: 1000;
    box-shadow: 0 2px 12px -1px rgba(0, 0, 0, 0.3);
}

&
.left {

li:nth-child(1) {
    top: 0%;
    left: 300%;
    transition-delay: 0s;
}

li:nth-child(2) {
    top: 0%;
    left: 200%;
    transition-delay: 0.2s;
}

li:nth-child(3) {
    top: 0%;
    left: 100%;
    transition-delay: 0.4s;
}

}
&
.right {

li:nth-child(1) {
    top: 0%;
    left: -300%;
    transition-delay: 0s;
}

li:nth-child(2) {
    top: 0%;
    left: -200%;
    transition-delay: 0.2s;
}

li:nth-child(3) {
    top: 0%;
    left: -100%;
    transition-delay: 0.4s;
}

}
lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    max-width: 1024px;
    margin: 0 auto;
}

lite-youtube::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
    background-position: top;
    background-repeat: repeat-x;
    height: 60px;
    padding-bottom: 50px;
    width: 100%;
    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

/* responsive iframe with a 16:9 aspect ratio*/
lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100% / (16 / 9));
}

lite-youtube > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

/* play button */
lite-youtube > .lty-playbtn {
    display: block;
    width: 68px;
    height: 48px;
    position: absolute;
    cursor: pointer;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
    z-index: 1;
    background-color: transparent;
    /* YT's actual play button svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: none;
}

lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
    filter: none;
}

/* Post-click styles */
lite-youtube.lyt-activated {
    cursor: unset;
}

lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
    opacity: 0;
    pointer-events: none;
}

.lyt-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

#howTo-container {
    margin: 20px;
    padding-bottom: 6px;
    border: 6px solid #2C566Af7;
    border-radius: 10px 10px;
    background: #101C22ee;
    box-shadow: 2px 2px 0 #11111144;
    position: absolute;
    right: 0px;
    bottom: 45px;
    max-width: 65%;
    min-height: 13%;
    min-width: 27%;
    max-height: 82%;
    transition: opacity 250ms ease-in-out 0.9s;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.9s ease-in-out;
    transition: opacity 0.9s ease-in-out;
    opacity: 1
}

#howTo-container h2 {
    margin-block-start: 0px;
    margin-block-end: 8px;
}

#xhowto {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 35px;
    height: 35px;
    background-color: #2C566Af7;
    border-radius: 50%;
    border: 4px solid #2C566Af7;
    z-index: 1;
}

#xhowto_inner {
    background: #2C566Af7;
    color: #000000;
    padding: 0px;
    width: 27px;
    min-width: 27px;
    height: 27px;
    border-radius: 30px;
    transition: all 250ms ease 0s;
    border: none;
    cursor: pointer;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}