/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
    -webkit-text-size-adjust: none;
    position: relative;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {margin: 0; padding: 0; box-sizing: border-box;}

html {scroll-behavior: smooth; width: 100vw; overflow-x: hidden;}

body {font-weight: 300; color:white; background-color: #0c1d55; width: 100vw; overflow-x: hidden;}

h1,h2,h3,h4,h5,h6,li,td,p,span,a,input {font-family: "Figtree";}

img {image-rendering:-webkit-optimize-contrast; image-rendering:-o-crisp-edges; image-rendering:-moz-crisp-edges; width: 100%; display: block;}

h1,h2,h3,h4,h5,h6 {font-weight: 900;}

h2 {font-weight: 900; font-size: 14px; line-height: 1.2;}

b {font-weight: 900;}

a {text-decoration: none;}

.desktop {
    display: none !important;
}

@media screen and (min-width: 640px) {
    .desktop {
        display: flex !important;
    }

    .mobile {
        display: none !important;
    }
}

header {
    position: relative;
    background-color: white;
    padding: 14px 0;
}

.header-wrapper  {
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    gap: 10px;
    width: 95vw;
    max-width: 1900px;
    align-items: center;
}

.logo {
    width: 129.5px;
    flex-shrink: 0;
    padding: 4px;
}

header h1 {
    font-size: 20px;
    font-weight: 700;
}

.title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.title h1 {
    font-size: 18px;
    color: black;
    font-weight: 600;
}

nav {
    display: flex;
    gap: 20px;
}

nav a {
    text-transform: uppercase;
    text-decoration: underline;
    font-weight: 700;
    color: black;
    font-size: 12px;
}

:root {
    --cellSpacing: 16;
}

.blank {
    grid-area: blk;
}

.games {
    background-color: #0c1d55;
    padding: 10px 0;
}

.games a {
    display: block;
    width: 100%;
    height: 100%;
}

.games-wrapper {
    width: 95vw;
    max-width: 1900px;
    margin: 0 auto;
    display: grid;
    grid-auto-flow: row dense;
    grid-gap: 10px;
    /* grid-template-columns: 1fr 1fr 1fr; */
    /* grid-template-rows: repeat(auto-fill, 94px); */
}

.games-wrapper {
    grid-template-areas:
    "cg1 rg1 rg1"
    "bg1 rg1 rg1"
    "mg1 sg1 ag1"
    "cg2 cg2 rg2"
    "cg2 cg2 bg2"
    "mg2 sg2 ag2"
    "rg3 bg3 bg3"
    "cg3 bg3 bg3"
    "mg3 sg3 ag3"
    "mg4 mg4 rg4"
    "mg4 mg4 cg4"
    "bg4 sg4 ag4"
    "rg5 sg5 sg5"
    "cg5 sg5 sg5"
    "bg5 mg5 ag5"
    "ag6 ag6 rg6"
    "ag6 ag6 cg6"
    "bg6 mg6 sg6"
    "... ... ..."
    "... ... ..."
    "... ... ..."
    "... ... ..."
    "... ... ..."
    "... ... ..."
    "... ... ..."
    "... ... ..."
    "... ... ..."
    "... ... ..."
    "... ... ..."
    "... ... ..."
    "... ... ...";
}

.game {
    aspect-ratio: 1;
    background-size: cover;
    background-position: center center;
    border-radius: 10px;
}

.game h2 {
    display: none;
}

/*     Footer     */

footer {
    background-color: #000f3f;
    padding-top: 6vw;
}

.logo-orange-green {
    border-top: 1px solid #3e3d3d;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 390px;
    width: 90.698vw;
    margin-top: 40px;
    margin-top: 3.302vw;
    padding: 34px 0 38px;
    padding: 3.907vw 0 3.837vw;
}

.additional-links {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: .5vw;
    text-align: center;
}

.additional-links a {
    font-weight: 400;
    color: white;
    text-decoration: underline;
    font-size: 12px;
    margin-bottom: 4px;
    line-height: 1.2;
    font-weight: 300;
}

.logo-sport-orange {
    width: 102px;
    width: 23.721vw;
}

.logo-casino-green {
    width: 108px;
    width: 25.116vw;
}

.copyright {
    letter-spacing: .5px;
    font-size: 14px;
    font-size: 2.256vw;
    margin-top: 22px;
    margin-top: 3.116vw;
}

@media screen and (min-width: 640px) {
    
.games-wrapper {
    grid-template-areas:
    "sg5 sg5 rg1 rg1 rg1 ... ... ... ... mg1 mg1 mg1 ... sg1 sg1 ag1 ag1"
    "sg5 sg5 rg1 rg1 rg1 cg1 cg1 bg1 bg1 mg1 mg1 mg1 ... sg1 sg1 ag1 ag1"
    "... ... rg1 rg1 rg1 cg1 cg1 bg1 bg1 mg1 mg1 mg1 ag5 ag5 cg2 cg2 cg2"
    "rg2 rg2 bg2 bg2 mg2 mg2 sg2 sg2 sg2 ... ... ... ag5 ag5 cg2 cg2 cg2"
    "rg2 rg2 bg2 bg2 mg2 mg2 sg2 sg2 sg2 ag2 ag2 rg3 rg3 ... cg2 cg2 cg2"
    "... mg3 mg3 sg3 sg3 ... sg2 sg2 sg2 ag2 ag2 rg3 rg3 cg3 cg3 bg3 bg3"
    "... mg3 mg3 sg3 sg3 ... ag3 ag3 rg4 rg4 cg4 cg4 ... cg3 cg3 bg3 bg3"
    "ag4 ag4 ... cg5 cg5 cg5 ag3 ag3 rg4 rg4 cg4 cg4 ... bg5 bg5 rg5 rg5"
    "ag4 ag4 ... cg5 cg5 cg5 ... ... ... ... mg4 mg4 mg4 bg5 bg5 rg5 rg5"
    "bg4 bg4 ... cg5 cg5 cg5 sg4 sg4 mg5 mg5 mg4 mg4 mg4 ... ... ... ..."
    "bg4 bg4 ... ... ... ... sg4 sg4 mg5 mg5 mg4 mg4 mg4 blk blk blk blk";
    }
}



















.game-inside {
    padding: 20px 0;
}

.game-inside-wrapper {
    width: 95vw;
    max-width: 1900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}


.game-inside h2 {
    font-size: 22px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 22px;
}

.game-iframe {
    width: 100%;
    height: 600px;
}


.game-inside h3 {
    font-size: 18px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 16px;
}

.game-other-wrapper {
    margin: 0 auto;
    justify-content: center;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.game-other-game {
    width: 42vw;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center center;
    border-radius: 10px;
}

.game-other-game a {
    display: block;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 640px) {
    .game-inside-wrapper {
        width: 1824px;
        max-width: 98.958vw;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        gap: 2.083vw;
    }

    .game-iframe {
        width: 100%;
    }

    .game-inside h2 {
        font-size: 1.458vw;
        text-align: center;
        font-weight: 600;
        margin-bottom: 1.146vw;
    }

    .game-other-wrapper {
        margin: 0 auto;
        justify-content: flex-start;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 1.042vw;
    }

    .game-other-game {
        width: 10.813vw;
        aspect-ratio: 1;
        background-size: cover;
        background-position: center center;
        border-radius: 0.521vw;
    }

    /*     Footer     */

    footer {
        background-color: #000f3f;
        padding-top: 10px;
    }

    .additional-links {
        margin-bottom: 5px;
        display: flex;
        flex-direction: column;
        gap: .5vw;
        text-align: center;
    }
    
    .additional-links a {
        font-weight: 400;
        color: white;
        text-decoration: underline;
        font-size: 12px;
        margin-bottom: 4px;
        line-height: 1.2;
        font-weight: 300;
    }

    .copyright {
        letter-spacing: .5px;
        font-size: 16px;
        margin-top: 0;
        font-weight: 700;
    }
    
}

@media screen and (min-width: 1920px) {
    .game-inside-wrapper {
        width: 95vw;
        max-width: 1900px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        gap: 40px;
    }

    .game-inside h2 {
        font-size: 28px;
        text-align: center;
        font-weight: 600;
        margin-bottom: 22px;
    }

    .game-other-wrapper {
        margin: 0 auto;
        justify-content: flex-start;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .game-other-game {
        width: 265px;
        aspect-ratio: 1;
        background-size: cover;
        background-position: center center;
        border-radius: 10px;
    }

    /*     Footer     */

    footer {
        background-color: #000f3f;
        padding-top: 10px;
    }

    .additional-links {
        margin-bottom: 5px;
        display: flex;
        flex-direction: column;
        gap: .5vw;
        text-align: center;
    }
    
    .additional-links a {
        font-weight: 400;
        color: white;
        text-decoration: underline;
        font-size: 12px;
        margin-bottom: 4px;
        line-height: 1.2;
        font-weight: 300;
    }

    .copyright {
        letter-spacing: .5px;
        font-size: 16px;
        margin-top: 0;
        font-weight: 700;
    }

}





.games-list-title {
    text-align: center;
    font-size: 22px;
    margin-top: 14px;
    font-weight: 600;
}

.games-list {
    padding: 20px 0;
}

.games-list-wrapper {
    width: 95vw;
    margin: 0 auto;
    max-width: 1900px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.games-list-game {
    width: 42vw;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center center;
    border-radius: 10px;
}

.games-list-game a {
    display: block;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 640px) {
    .games-list-title {
        text-align: center;
        font-size: 2.083vw;
        margin-top: 1.25vw;
        font-weight: 700;
    }

    .games-list-wrapper {
        width: 92vw;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 2.083vw;
    }
    .games-list-game {
        width: 13.542vw;
        aspect-ratio: 1;
        background-size: cover;
        background-position: center center;
        border-radius: 0.521vw;
    }
}

@media screen and (min-width: 1920px) {
    .games-list-title {
        text-align: center;
        font-size: 40px;
        margin-top: 24px;
        font-weight: 700;
    }

    .games-list-wrapper {
        width: 95vw;
        margin: 0 auto;
        max-width: 1900px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 40px;
    }
    .games-list-game {
        width: 260px;
        aspect-ratio: 1;
        background-size: cover;
        background-position: center center;
        border-radius: 10px;
    }
}







@media screen and (max-width: 639px) {
    
    .menu {
        flex-shrink: 0;
        position: relative;
        width: 6.512vw;
        height: 6.512vw;
    }

    .menu-img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 998;
    }

    .menu input {
        display: flex;
        width: 6.512vw;
        height: 3.721vw;
        position: absolute;
        cursor: pointer;
        opacity: 0;
        z-index: 999;
    }

    nav {
        position: absolute;
        width: 100vw;
        height: 111.628vh;
        box-shadow: 0 0 2.326vw #85888C;
        margin: -11.628vw 0 0 -91vw;
        padding: 0 2.326vw 0 0;
        padding-top: 29.07vw;
        background-color: #F0F0F0;
        -webkit-font-smoothing: antialiased;
        transform-origin: 0% 0%;
        transform: translate(100%, 0);
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 5vw;
    }

    nav a {
        font-weight: 600;
        font-size: 5vw;
    }

    .menu input:checked ~ nav {
        transform:none;
    }

}


.text {
	text-align: left;
}

.text h2, .text h1, .text p, .text li {
    color: black;
}

.text h1 {
    font-size: 20px;
    margin-bottom: 15px;
}

.text h2, .text h1, .text h3 {
    font-weight: 700;
}

.text h2 {
	font-size: 15px;
	margin-top: 10px;
}

.text h3 {
	font-size: 18px;
	margin-bottom: 10px;
	margin-top: 10px;
}

.text p, .text li, .text td {
	font-size: 13px;
	margin-top: 4px;
	font-family: "Figtree";
}

.text ol, .text ul {
	list-style: auto;
	padding-left: 16px;
	margin-bottom: 4px;
}

.text ul li {
	list-style: disc;
}

.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 999; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100vh; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
	background-color: #fefefe;
	margin: 20% auto; /* 15% from the top and centered */
	padding: 20px;
	overflow: auto;
	width: 90%; /* Could be more or less, depending on screen size */
	max-width: 600px;
  }
  
@media screen and (min-width: 640px) and (orientation: landscape) {
	.modal-content {
		margin: 5% auto; /* 15% from the top and centered */
	  }
}

  /* The Close Button */
  .close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
  }