/*==================================================
FONTS & ICONS
==================================================*/

@font-face {
    font-family: 'segoeui_r';
    src: url('../font/segoeui_r.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'icons';
    src:  url('../font/icons.eot?9q9ajm');
    src:  url('../font/icons.eot?9q9ajm#iefix') format('embedded-opentype'),
        url('../font/icons.ttf?9q9ajm') format('truetype'),
        url('../font/icons.woff?9q9ajm') format('woff'),
        url('../font/icons.svg?9q9ajm#icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"]
{
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-whatsapp:before {
  content: "\e908";
  color: #25d366;
}
.icon-messenger:before {
  content: "\e905";
  color: #00b2ff;
}
.icon-note-list:before {
  content: "\e91b";
}
.icon-pause:before {
  content: "\e911";
}
.icon-play:before {
  content: "\e912";
}
.icon-stop:before {
  content: "\e913";
}
.icon-email:before {
  content: "\e906";
}
.icon-add:before {
  content: "\e90c";
}
.icon-add-box:before {
  content: "\e90d";
}
.icon-add-c:before {
  content: "\e90e";
}
.icon-add-o:before {
  content: "\e90f";
}
.icon-create:before {
  content: "\e90a";
}
.icon-file:before {
  content: "\e914";
}
.icon-file-img:before {
  content: "\e915";
}
.icon-arrow_d:before {
  content: "\e901";
}
.icon-arrow_l:before {
  content: "\e902";
}
.icon-arrow_r:before {
  content: "\e903";
}
.icon-arrow_u:before {
  content: "\e904";
}
.icon-mouse:before {
  content: "\e917";
}
.icon-view:before {
  content: "\e918";
}
.icon-phone:before {
  content: "\e907";
}
.icon-person:before {
  content: "\e916";
}
.icon-delete:before {
  content: "\e90b";
}
.icon-remove-o:before {
  content: "\e910";
}
.icon-date:before {
  content: "\e919";
}
.icon-list:before {
  content: "\e91c";
}
.icon-warning:before {
  content: "\e91a";
}
.icon-check:before {
  content: "\e900";
}
.icon-calendar:before {
  content: "\e953";
}
.icon-locked:before {
  content: "\e98f";
}
.icon-unlocked:before {
  content: "\e990";
}
.icon-trophy:before {
  content: "\e99e";
}
.icon-cross:before {
  content: "\ea0f";
}
.icon-exit:before {
  content: "\ea14";
}
.icon-facebook:before {
  content: "\ea91";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-youtube:before {
  content: "\ea9d";
}
.icon-home:before {
  content: "\e91e";
}
.icon-group:before {
  content: "\e91d";
}
.icon-table:before {
  content: "\e909";
}

/*================================================*/










/*==================================================
MAIN THEME
==================================================*/

:root
{
    --margin: 40px;
    --padding: 20px;
    --mega-text: 72px;
    --super-text: 32px;
    --big-text: 24px;
    --main-text: 16px;
    --second-text: 13px;
    --third-text: 11px;
    --icon: 16px;
    --btn: 20px;
    --nav: 20px;
    --nav-icon: 20px;
    --border-radius: 15px;
    --border-radius-round: 50px;

    --main-color: #FEDE00;
    --second-color: #01435E;
    --third-color: #000;
    --fourth-color: #eee;
    --background: #fff;
    --selected-text: #000;
    --selected-bg: rgba(0, 0, 0, 0.50);
    --scroll-margin: inset 0 0 10px 10px #008923;

    --green: #008923;
    --yellow: #fede00;
    --red: #e01919;
    --gray: #999;

    --transition: 0.25s;
}

/*================================================*/










/*==================================================
CONTENT
==================================================*/

html, body
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
    overflow: hidden;
}

body
{
    display: grid;
    grid-template-areas: 
    "bar"
    "logo"
    "main"
    "footer";
    grid-template-columns: auto;
    grid-template-rows: auto auto 1fr auto;

    font-size: var(--main-text);
    font-family: segoeui_r;
    color: var(--second-color);
    background-color: var(--background);
    background-image: url(../img/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /*transition: var(--transition);*/
}

input, textarea, select, .input
{
    width: 100%;
    height: 100%;
    padding: 0 0 0 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: var(--main-text);
    color: var(--second-color);
    font-family: segoeui_r;
    background: transparent;
    outline: none;
    border: none;
    resize: none;
    box-sizing: border-box;
}

input[type="date"]::-webkit-calendar-picker-indicator
{
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    opacity: 0;
}

::placeholder
{
    color: var(--second-color);
}

::selection
{
	/*color: var(--theme-selected-text);*/
	background: var(--selected-bg);
}

a
{
    color: var(--second-color);
    text-decoration: none;
}

figure
{   
    margin: 0;
}

img
{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
}





header
{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

#logo
{
    max-width: 240px;
    width: auto;
    height: auto;
    margin: var(--padding) auto;
}

#header-btn
{
    margin: var(--margin);
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 20px;
}

.header-icon
{
    font-size: 24px;
}

nav
{
    width: auto;
    height: auto;
    margin: var(--margin);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.banner-container
{
    margin: var(--margin);
    position: sticky;
    top: 0;
    z-index: 2;
}

.banner-img
{
    max-width: 640px;
    width: 100%;
    height: auto;
    margin: auto;
    box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.15);
}

.grid-bar
{
    grid-area: bar;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.grid-header
{
    grid-area: header;
    flex-shrink: 0;
}

.grid-logo
{
    grid-area: logo;
    display: flex;
    justify-content: flex-start;
    flex-shrink: 0;
}

.grid-social
{
    grid-area: social;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    right: 0;
    z-index: 2;
    flex-shrink: 0;
}

.grid-nav
{
    grid-area: nav;
    flex-shrink: 0;
}

.grid-subnav
{
    grid-area: subnav;
    flex-shrink: 0;
    justify-self: center;
}

.grid-main
{
    grid-area: main;
}

.grid-footer
{
    grid-area: footer;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-shrink: 0;
}

.grid-cols-3
{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-areas: 
    "subnav"
    "main"
    "footer";
    grid-template-rows: auto 1fr auto;
}

.grid-game
{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-areas: 
    "media playernumbers"
    "media playertable";
    grid-template-columns: 50% auto;
    grid-template-rows: 0.75fr auto;
    grid-gap: 40px;
    justify-content: center;
}

.grid-media
{
    grid-area: media;
    margin: 0 !important;

    background-color: #ef5231 !important;
    background-image: url(../img/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.grid-media-border
{
    width: auto !important;
    padding: 10px !important;
    /*border: 2px solid #fff;*/
    border-radius: var(--border-radius);
    background-color: var(--main-color);
}

.grid-banner
{
    grid-area: banner;
}

.grid-player-table
{
    grid-area: playertable;
}

.grid-player-numbers
{
    grid-area: playernumbers;
}

.game-numbers-container
{
    /*max-height: 110px;*/
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 15px 0px rgba(0, 0, 0, 0.15);
}

.game-played-numbers
{
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto, 1fr);
    grid-gap: 0;
    justify-content: center;
    align-items: center;
    overflow: hidden scroll;
}

.grid-col-auto
{
    grid-column: none;
}

.game-table-container
{
    max-width: 480px;
    margin: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    color: #fff;
    border-radius: 10px;
    /*background-image: url(../img/table-bg.png);*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow: 0 10px 15px 0px rgba(0, 0, 0, 0.15);
}

.game-table
{
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    grid-gap: 0;
    justify-content: center;
    align-items: center;
}

.game-played-num, .game-table-num
{
    width: 32px;
    height: 32px;
    margin: 2.5px;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    align-self: center;
    font-family: segoeui_r;
    font-weight: bold;
    color: #fff;
    font-size: var(--main-text);
    background: linear-gradient(to top, #f6cd53, #fff);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.75);
}

.game-table-num
{
    color: #999;
    background: linear-gradient(to top, #f9ab00, #fede00);
}

.game-played-num-bg, .game-table-num-bg
{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--second-color);
    border-radius: 2.5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.game-table-num-bg
{
    background: #fff;
}

.table-limit
{
    max-width: 280px;
}

.flex-scroll-h
{
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /*transition: var(--transition);*/
}

.flex-scroll-h::before, .flex-scroll-h::after
{
    content: '';
    padding: 0 5px 0 5px;
}

.nav-item
{
    margin: 5px;
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: var(--nav);
    transition: var(--transition);
}

.nav-item:hover, .nav-active
{
    cursor: pointer;
    font-size: calc(var(--nav) * 2);
}

main
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    /*transition: var(--transition);*/
}

.main-img
{
    max-width: 180px;
    width: 100%;
    height: auto;
    /*transition: var(--transition);*/
}

.subnav
{
    margin: var(--margin);
    display: flex;
    position: relative;
    z-index: 1;
    background: var(--third-color);
}

.subnav-item, .adminnav-item
{
    margin: 5px;
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: var(--nav);
    color: var(--fourth-color);
    transition: color var(--transition);
}

.subnav-item:hover, .subnav-active, .adminnav-item:hover, .adminnav-active
{
    cursor: pointer;
    color: var(--main-color);
}

footer
{
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.footer-items
{
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.footer-icon
{
    margin-right: 20px;
    font-weight: bold;
}





.screen
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    /*transition: var(--transition);*/
}

#index, #admin
{
    justify-content: center;
}

.scroll
{
    width: 100%;
    height: 100%;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
}

#index > .scroll, #admin > .scroll
{
    height: auto;
}


.flex-row
{
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /*transition: var(--transition);*/
}

.flex-col
{
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    /*transition: var(--transition);*/
}

.flex-row-left
{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.post-container
{
    max-width: 760px;
    margin: auto;
    padding: var(--margin) var(--margin) 30px var(--margin);
    font-size: var(--big-text);
    font-family: segoeui_r;
    text-align: justify;
}

.post-block
{
    max-width: 640px;
    margin: 0 auto var(--padding) auto;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.post-block:last-child
{
    margin-bottom: 0;
}

.post-title
{
    padding: 10px;
}

.post-text
{
    width: 100%;
    text-align: left;
    padding: var(--padding);
}

.post-gallery
{
    max-width: 760px;
    margin: auto;
    padding: var(--margin) var(--margin) 30px var(--margin);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    grid-gap: 20px;
}

.post-album
{
    text-align: center;
    color: var(--fourth-color);
    background: var(--second-color);
    border: 5px solid var(--second-color);
    box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.20);
    overflow: hidden;
}

.post-list
{
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    overflow: hidden;
}

.post-list:last-child
{
    text-align: right;
    border-bottom: none;
}

.post-list-item
{
    padding: 10px;
    text-align: left;
}

.yellow
{
    background-color: var(--main-color);
}

.blue
{
    background-color: var(--second-color);
}

.red
{
    background-color: var(--red);
}

.gray
{
    background-color: #999;
}

.green-color
{
    color: var(--green);
}

.yellow-color
{
    color: var(--yellow);
}

.red-color
{
    color: var(--red);
}

.white-color
{
    color: var(--fourth-color);
}

.black-color
{
    color: var(--third-color);
}

.gray-color
{
    color: #999;
}

.green
{
    background: var(--green);
}

.grid-numbers
{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(48px, 64px));
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

.game-number
{
    width: 54px;
    height: 54px;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    align-self: center;
    font-family: segoeui_r;
    font-weight: bold;
    font-size: var(--super-text);
    border: 5px solid var(--fourth-color);
    border-radius: var(--border-radius);
}

.game-number-active
{
    color: var(--main-color);
    border-color: var(--main-color);
}

.played-number-active
{
    color: #008923;
    background: linear-gradient(to top, #008923, #008923);
}





.mega-title
{
    font-size: var(--mega-text);
    font-weight: bold;
}

.super-title
{
    font-size: var(--super-text);
    font-weight: bold;
}

.big-title
{
    font-size: var(--big-text);
    font-weight: bold;
}

.main-title
{
    font-size: var(--main-text);
    font-weight: bold;
}

.second-title
{
    font-size: var(--second-text);
    font-weight: bold;
}

.third-title
{
    font-size: var(--third-text);
    font-weight: bold;
}

.mega-text
{
    font-size: var(--mega-text);
}

.super-text
{
    font-size: var(--super-text);
}

.big-text
{
    font-size: var(--big-text);
}

.main-text
{
    font-size: var(--main-text);
}

.second-text
{
    font-size: var(--second-text);
}

.third-text
{
    font-size: var(--third-text);
}





.icon-normal
{
    padding: 5px;
}

.icon-l
{
    margin-left: 10px;
}

.icon-r
{
    margin-right: 10px;
}

.center
{
    text-align: center;
}

.left
{
    text-align: left;
}

.margin
{
    margin: var(--margin);
}

.margin-auto
{
    margin-left: auto !important;
    margin-right: auto !important;
}

.width100
{
    width: 100%;
}

.width50
{
    width: 50%;
}


.sticky
{
    position: sticky;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.padding
{
    padding: var(--padding);
}

.padding-d
{
    padding-bottom: var(--padding);
}

.action-btn, .subaction-btn
{
    transition: border 0.25s;
}

.subaction-btn
{
    border: 2px solid transparent;
}

.action-btn:hover
{
    cursor: pointer;
    border-color: var(--main-color);
}

.subaction-btn:hover
{
    cursor: pointer;
    border-color: rgba(0, 0, 0, 0.10);
}

.btn, .btn-confirm, .btn-bingar, .btn-small, .btn-o
{    
    margin: var(--padding);
    padding: 10px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--btn);
    font-weight: bold;
    color: var(--second-color);
    background: linear-gradient(to top, #FEDE00, #FEDE00);
    border: 2px solid #FEDE00;
    border-radius: var(--border-radius-round);
    /*transition: var(--transition);*/
}

.btn-confirm
{
    color: #000;
    background: linear-gradient(to top, #FEDE00, #fff);
}

.btn-bingar
{
    color: var(--main-color);
    border-color: #008923;
    background: linear-gradient(to top, #000, #008923);
}

.btn-o
{
    width: auto;
    padding: 10px 20px;
    color: var(--main-color);
    background: transparent;
}

.live-btn
{
    padding: 0 2.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold;
    background-color: var(--red);
    border: 1.5px solid var(--red);
}

.btn-small
{
    padding: 5px;
}

.offline-btn
{
    padding: 0 2.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--gray);
    font-weight: bold;
    border: 1.5px solid var(--gray);
}

.square-btn
{
    height: 100%;
    padding: var(--padding);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--super-text);
    border-radius: var(--border-radius);
    /*transition: var(--transition);*/
}

.btn:hover, .btn-o:hover
{
    cursor: pointer;
    color: #000;
    background: linear-gradient(to top, #FEDE00, #fff);
    border: 2px solid #FEDE00;
}

.form
{
    max-width: 360px;
    width: 100%;
    margin: var(--padding) auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-field
{
    width: 100%;
    height: 48px;
    margin: 10px;
    padding: 0 var(--padding);
    background: var(--fourth-color);
    border: 2px solid transparent;
    border-radius: var(--border-radius-round);
    transition: border var(--transition);
}

.form-field-error
{
    border-color: var(--red);
}

#filefield
{
    display: none;
}

#file-img
{
    padding: 5px;
    border: 2px solid rgba(255, 255, 255, 0.10);
}

.small-icon
{
    color: var(--second-color);
}

.small-icon[name="password-toggle"]
{
    padding: 10px 0 10px 10px;
}

.map
{
    height: 360px;
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.15);
}

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

.video-container
{
    overflow: hidden;
    position: relative;
    width:100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-container::after
{
    padding-top: 56.25%;
    display: block;
    content: '';
}

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





table
{
    width: 100%;
    border-collapse: collapse;
}

th
{
    font-size: var(--second-text);
}

th, td
{
    padding: 10px;
}

tr
{
    border-bottom: 1px solid #ddd;
}

tr:last-child
{
    border-bottom: none;
}

.td-right
{
    text-align: right;
}

/*================================================*/










/*==================================================
POPUPS
==================================================*/

.popup
{
    width: 100%;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background: rgba(255, 255, 255, 0.75);
}

.popup-container
{
    max-width: 960px;
    max-height: 960px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    display: grid;
    grid-template-areas: 
    "header"
    "main"
    "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    background: var(--green);
    box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.popup-content
{
    width: auto;
    height: auto;
    margin: var(--padding);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden scroll;
    -webkit-overflow-scrolling: touch;
    /*transition: var(--transition);*/
}

.popup-header
{
    /*margin: var(--padding);*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 0;
    right: 0;
    z-index: 2;
    color: #fff;
    font-weight: bold;
}

.popup-info
{
    width: 100%;
    margin: auto;
    color: #fff;
}

.popup-icon
{
    padding: var(--padding);
}

.popup-footer
{
    margin: var(--padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    font-weight: bold;
    text-align: center;
}

.popup-blue
{
    color: var(--fourth-color);
    background: var(--second-color);
}

.popup-green
{
    color: var(--fourth-color);
    background: var(--green);
}

#popup-table
{
    padding: 20px;
    background: var(--green);
}

/*================================================*/










/*==================================================
WEBKIT SCROLL
==================================================*/

::-webkit-scrollbar
{
    width: 10px;
    height: 0;
}

::-webkit-scrollbar-thumb
{
    border: 4px solid transparent;
    border-radius: 25px;
    box-shadow: var(--scroll-margin);
}

::-webkit-scrollbar-track
{
    
}

*
{
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.25) transparent;
}

/*================================================*/










/*==================================================
RESPONSIVE
==================================================*/

@media (max-width: 1440px)
{
    :root
    {
        --margin: 20px;
        --padding: 10px;
        --mega-text: 54px;
        --super-text: 20px;
        --big-text: 16px;
        --main-text: 13px;
        --second-text: 11px;
        --third-text: 9px;
        --icon: 16px;
        --nav: 16px;
        --nav-icon: 20px;
    }

    .post-container, .post-gallery
    {
        max-width: 600px;
    }

    .grid-game
    {
        grid-gap: 20px;
    }
}

@media (max-width: 1280px)
{
    :root
    {
        --margin: 20px;
        --padding: 10px;
        --super-text: 20px;
        --big-text: 16px;
        --main-text: 13px;
        --second-text: 11px;
        --third-text: 9px;
        --icon: 16px;
        --btn: 16px;
        --nav: 16px;
        --nav-icon: 20px;
    }

    #logo
    {
        max-width: 180px;
    }

    .nav-item
    {
        margin: 2.5px;
    }

    .post-container
    {
        max-width: 480px;
    }

    .game-number
    {
        width: 48px;
        height: 48px;
        margin: 5px;
    }

    .btn
    {
        padding: 10px 30px;
    }

    .btn-bingar, .btn-small
    {
        padding: 10px;
        font-size: 16px;
    }
}

@media (max-width: 1080px)
{
    :root
    {
        --margin: 20px;
        --padding: 10px;
        --mega-text: 42px;
        --super-text: 20px;
        --big-text: 16px;
        --main-text: 13px;
        --second-text: 11px;
        --third-text: 9px;
        --btn: 16px;
    }

    #logo
    {
        max-width: 120px;
    }

    nav
    {
        margin: 0 auto;
        flex-direction: row;
        justify-content: flex-start;
        overflow: scroll hidden;
    }

    .nav-item
    {
        flex-shrink: 0;
    }

    .nav-item:hover, .nav-active
    {
        font-size: var(--nav);
        color: var(--main-color);
        background: var(--second-color);
    }

    .subnav
    {
        margin: 10px;
    }

    .grid-logo
    {
        position: relative;
    }

    .grid-social
    {
        position: relative;
    }

    .grid-nav
    {
        position: relative;
    }

    .grid-main
    {

    }

    .grid-footer
    {
        position: relative;
    }

    .btn-bingar
    {
        margin-left: 5px;
        margin-right: 5px;
        padding: 5px 7.5px;
        font-size: 12px;
        border-width: 2px;
    }

    .btn-small
    {
        font-size: 13px;
        border-width: 2px;
    }
}

@media (max-width: 640px)
{
    :root
    {
        --margin: 20px;
        --padding: 10px;
        --mega-text: 32px;
        --super-text: 16px;
        --big-text: 16px;
        --main-text: 13px;
        --second-text: 11px;
        --third-text: 9px;
        --btn: 20px;
        --nav: 13px;
    }

    nav
    {
        margin: 0 var(--margin);
    }

    .square-btn
    {
        margin: 0;
        padding: var(--margin);
        --border-radius: 10px;
    }

    .grid-numbers
    {
        grid-gap: 10px;
    }

    .grid-banner
    {
        margin: var(--margin);
        position: sticky;
        z-index: 2;
    }

    .grid-game
    {
        grid-template-areas: 
        "media"
        "playernumbers"
        "playertable";
        grid-template-columns: 0.9fr;
        grid-template-rows: 1fr auto auto;
        grid-gap: 10px;
        justify-content: center;
    }

    .game-numbers-container .main-title
    {
        display: none;
    }

    .game-played-numbers
    {
        width: 100%;
        justify-content: flex-start;
        grid-auto-flow: column;
        overflow: scroll hidden;
    }

    #juego .banner-container
    {
        margin: auto;
        margin-top: 10px;
    }

    #juego .banner-container img
    {
        display: none;
    }
}

@media (max-width: 320px)
{
    
}