:root {
--color-primary: #ffce54;
--color-secondary: #ffce54;
--bg-nav:  #10101b;
--color-nav: #fff;
--bg-body: #000;
--color-body: #ffff;
--bg-body-login: #26263d;
--bg-footer: #0e161a;
--color-footer: #fff;
--color-footer-hover: #fff;
}


/* 
////
//// Easing general purpose
////
--------------------------------------------------------------*/
.easeOut { -webkit-transition-property: all; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
/* 
////
//// Default Font
////
--------------------------------------------------------------*/
html, body { height: 100%; min-height: 100%; }
body { font-family:  "Jost", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 400; }
strong { font-weight: 600; }
.genC1 { color: var(--color-primary)!important; }
.genC2 { color: var(--color-secondary)!important; }
.genPad1 { padding-top: 7.6rem; padding-bottom: 7.6rem;}
#fullWrp { margin: 0 auto; min-height: 100%; background: var(--bg-body); position: relative;  }
svg path,svg shape,svg linearGradient { shape-rendering: geometricPrecision; }
.FntTTB { font-family: "PT Sans Narrow", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 700;  }
.FntCal { font-family: "Cal Sans", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans!important;  font-weight: 400!important;   }

.genTitle1 { font-family: "PT Sans Narrow", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 700; font-size: 150px; -webkit-text-stroke: 2px #fff; text-stroke: 2px #fff; color: rgba(0,0,0,0.0); text-transform: uppercase; letter-spacing:  -0.01em; }
.genTitle2 { font-family: "PT Sans Narrow", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 700; font-size: 48px; text-shadow: 0 0 0.35em rgba(0,0,0,0.4); padding: 0.3em 0; }
.genTxt1 { font-size: 24px; line-height: 1.5em; }
@media all and (max-width: 1184px) {
.genTitle1 { font-size: 102px; }
.genTitle2 { font-size: 34.5px; }
.genTxt1 { font-size: 17.5px; }
}
@media all and (max-width: 767px) {
.genTitle1 { font-size: 12.29vw; }
.genTitle2 { font-size: 4.5vw; }
.genTxt1 { font-size: 3.2vw; }
}
/* logo 
-----------------------------*/
#mainLogo { float: left; }
#mainLogo a { display: block; background: url(../images/main_logo_2x.png) no-repeat left center; background-size: contain!important; width: 190px; height: 62px; white-space: nowrap; text-indent: -8000px; margin-left: 0; }
@media all and (max-width: 1024px) {
#mainLogo a  {  background-size: contain; }
}
@media all and (max-width: 480px) {
#mainLogo a { max-width: 25.1rem; height: 45px;}
}
/* Main Header
--------------------------------------------------------------*/

#mainHdr { z-index: 12; background: var(--bg-nav); }
.introHeader {position: absolute; left: 0; top: 0;  width: 100%; background: none!important; }
#mainHdr  .ctr { padding: 0 20px; margin: 0 auto; position: relative; display: flex; justify-content: space-between; align-items: center;   }
#mainHdr { padding: 5px  0;  }
.nav-hamburger  { display: none!important; }	
#mainLogo { margin: 0; display: block; float: left; position: relative;  z-index:  10;  }
#mainMemNav { display: block; margin: 0 ; float: right;  margin-right: 0; margin-left: auto;  }
#mainMemNav .site-nav { display: flex; justify-items: flex-start; padding: 18px 0 18px 0;   }
#mainMemNav .site-nav li { display: inline; white-space: nowrap; font-size: 18px; line-height: 47px; padding: 0px 22px; font-weight: 400; letter-spacing: 0; letter-spacing: 0.01em;  }
#mainMemNav .site-nav li:last-child { padding: 0; }
#mainMemNav .site-nav li a { color: #fff; position:relative; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline;  text-transform: capitalize;  font-size: 1em!important; }

@media all and (min-width: 1240px) {
#mainHdr  .ctr { padding: 0 3rem; }
}
@media all and (max-width: 1024px) {
#mainHdr { padding: 5px 0;  }
#mainMemNav .site-nav {  padding: 10px 0 10px 0;   }
}
@media (max-width: 572px) {
#mainMemNav .site-nav li { font-size:11px; padding: 0px 12px 0 0; }
}
/* Main Top 
--------------------------------------------------------------*/
#mainTopCats  { padding: 40px 60px 0 60px; }
#mainTopCats .FrmCtr2 { display: flex; align-items: stretch; max-width: none!important; margin: 0 -10px; padding: 0;  }
#mainTopCats .FrmCtr2 .mainOnline {  margin: 0 5px 10px 5px ; max-width: 55.9em;  background: #212233;  border-radius: 10px;  color: #fff;  padding: 3em 2.6em; }
#mainTopCats .FrmCtr2 .mainOnline .ln1 { font-size: 2.6em; }
#mainTopCats .FrmCtr2 .mainOnline .ln2 { font-size: 2em; line-height: 1.5em; padding: 0.8em 0; }
#mainTopCats .FrmCtr2 .mainOnline .ln3 { font-size: 2em; }
#mainTopCats .FrmCtr2 .mainCats {   display: grid; grid-template-columns:repeat(6, 1fr);  flex-grow: 1;  }
#mainTopCats .FrmCtr2 .mainCats .itm {  margin: 0 5px 10px 5px ; padding: 1.5em 2em;   color: #fff; background: #212233; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: flex; justify-content: center; flex-direction: column; }
#mainTopCats .FrmCtr2 .mainCats .itm .catIco { display: flex; align-items: center;  max-width: 5.6em!important; height: 5.6em; }
#mainTopCats .FrmCtr2 .mainCats .itm .catIco img { max-width: 5.6em!important; max-height: 5.6em!important; }
#mainTopCats .FrmCtr2 .mainCats .itm .catTitle { font-size: 1.87em; margin-top: 0.6em; display: block; line-height: 1.1em; }
@media all and (max-width: 1400px) {
#mainTopCats .FrmCtr2 .mainOnline,  #mainTopCats .FrmCtr2 .mainCats .itm { font-size: 0.71vw; }
}
@media all and (max-width:  900px) {
#mainTopCats { padding: 30px 30px 0 30px; }
#mainTopCats .FrmCtr2 { flex-direction: column; }
#mainTopCats .FrmCtr2 .mainOnline,  #mainTopCats .FrmCtr2 .mainCats .itm  { max-width: 100%; font-size: 10px; }
}
@media all and (max-width:  767px) {
#mainTopCats .FrmCtr2 .mainOnline,  #mainTopCats .FrmCtr2 .mainCats .itm   { font-size: 1.3vw; }
}
@media all and (max-width:  619px) {
#mainTopCats { padding: 20px 30px 0 30px; }
#mainTopCats .FrmCtr2 .mainCats {   grid-template-columns:repeat(4, 1fr); }
#mainTopCats .FrmCtr2 .mainOnline,  #mainTopCats .FrmCtr2 .mainCats .itm   { font-size: 1.6vw; }
}
@media all and (max-width: 572px) {
#mainTopCats { padding: 26px 30px 0 30px; }
}
/* 
////
//// Game Row
////
--------------------------------------------------------------*/
.itmLstWrp { padding: 40px 60px 0 60px; }
.itmLstWrp .title { font-size: 24px; padding-bottom: 0.4em; color: var(--color-body); font-family: "Cal Sans", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans;  font-weight: 400; text-transform: capitalize; padding-top: 0.25em; letter-spacing: 0.0025em;  } 
 .itmLstWrp +  .itmLstWrp { padding-top: 10px; }
 .itmLst {  margin: 0  -5px; width: auto!important; position: relative; padding-bottom: 15px; overflow: hidden;  padding-top: 5px; }
 .tmbWrp { display: block; position: relative; border-radius: 10px;    }
 .tmbWrp:focus,  .tmbWrp:active,   .lstItm .active {  box-shadow:   0 0 6px  -3px var(--color-primary); }
 .itmTitle { position: absolute; top: auto;  line-height: 1em;  display: none; text-overflow: ellipsis; text-align: center;   right: 5px;  left: 5px; font-size: 15px; font-weight: 500; flex-wrap: wrap; z-index: 1;bottom: 7px; justify-content: flex-start;  align-items: end;height: 2.6em;margin: 0; padding: 0 15px 3px 15px;  letter-spacing: -0.01em; }
 .itmTitle a { color: #000; text-shadow: 0.5px 1px 0 rgba(255,255,255,0.4); display: flex; width: 100%;  height: 100%; justify-content: flex-start; align-items: end;  }
 .lstItm:hover .itmTitle  { display: flex; }
 .gameLst .lstItm {  padding: 5px; box-sizing: border-box; position: relative;  }
 .gameLstRec .tmbWrp:after { content: ' '; display: block; padding-top: 55.05%;}
 .gameLstSq .tmbWrp:after { content: ' '; display: block; padding-top: 100%; }
 .itmLstWrp .lstItm .tmb { display: flex; justify-content: center; align-items: center; background-size: cover!important; background-position: center top!important; background-repeat: no-repeat;  position: absolute; left: 0; top: 0; right: 0; bottom: 0;  border-radius: 10px;  }
 .itmLstWrp .lstItm:hover .tmb {box-shadow: inset 0 -62px 20px -30px  var(--color-secondary);   }
 .tmbWrp .tmb:before { content: ' ';  border-radius:  200px; width: 2em; height: 2em;  line-height: 2em; display: flex; justify-content: center; align-items: center; background: #fff; font-size: 22px; background: #fff url("../images/arrow_right.svg") no-repeat center center;  background-size: auto 1.15em; opacity: 0;  box-shadow: 0.15em 0.15em 0.6em -0.05em rgba(0,0,0,0.9) ;   }
 .goldPkg .tmb:after { content: ' '; position: absolute; left: -2.32%; top: -4.8%;  background: url(../images/main_gold_seal.svg) no-repeat left top; background-size: contain; display: block;  padding-top:39.2857%; width: 39.2857%; z-index: 10;  }
 .platinumPkg .tmb:after { content: ' '; position: absolute; left: -2.32%; top: -4.8%;  background: url(../images/main_platinum_seal.svg) no-repeat left top; background-size: contain; display: block;  padding-top:39.2857%; width: 39.2857%; z-index: 10;  }
 .tmbWrp:focus .tmb:before,  .tmbWrp:active .tmb:before,  .lstItm:hover .tmb:before,   .lstItm .active .tmb:before { opacity: 1; }

@media all and (min-width:  1025px) {
 .gameLstRec .lstItm { width: 336px; }
 .gameLstSq .lstItm { width: 200px; }

}
@media all and (max-width:  1024px) {
 .gameLst .itmTitle { font-size: 1.56vw }
 .itmLst {  padding-bottom: 1rem; }
}
@media all and (max-width:  900px) {
 .gameLstSq .itmTitle { font-size: 1.77vw }
 .itmLstWrp { padding: 30px 30px 0 30px; }
 .itmLst { margin: 0  -40px;  }
}
@media all and (max-width:  767px) {
 .gameLstRec .itmTitle { font-size: 2.4vw }
}
@media all and (max-width:  619px) {
 .gameLstSq  .itmTitle { font-size: 2.58vw }
 .itmLstWrp { padding: 20px 30px 0 30px; }
 .itmLst { margin: 0  -40px;  }
}

@media all and (max-width: 572px) {
.itmLstWrp .title  { font-size: 18px;  }
 .itmLstWrp { padding: 26px 30px 0 30px; }
 .gameLst .lstItm { padding: 5px; box-sizing: border-box;  }
 .tmbWrp:focus,  .tmbWrp:active,  .lstItm .active {  box-shadow: 0 0 4px  -2px var(--color-primary); }
 .gameLstRec .itmTitle  { font-size: 1.9rem; }
 .itmTitle  { font-size: 1.9rem; right: 5px; left: 5px; }
}
@media all and (max-width:  420px) {
 .gameLstSq .itmTitle { font-size: 3.8vw }
}

/* Static
--------------------------------------------------------------*/
.staticGamesLst { margin: 0 -10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.staticXlGamesLst { margin: 0 -10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(336px, 1fr)); }
.staticGamesLst .lstItm  { max-width: none; width: auto;  }
@media all and (min-width:  1026px ) {
.staticXlGamesLst .goldPkg .tmb:after, .staticXlGamesLst .platinumPkg .tmb:after { left: -1.70%; top: -3.53%; padding-top:28.94285%; width: 28.94285%;  }
}
@media all and (max-width:  1025px ) {

}
@media all and (max-width: 768px) {
.staticGamesLst { display: flex; flex-wrap: wrap;  }
.staticGamesLst .lstItm  { width: 50%; }
}
@media all and (max-width: 572px) {
.staticGamesLst .itmTitle { margin-top: 5px;   }
.staticGamesLst { margin: 0 -5px;  }
}

/* Main Footer
--------------------------------------------------------------*/
#mainFtr  { color: var(--color-footer); font-weight: 400;  text-align: center; text-transform: none;  }
#mainFtr .FrmCtr3 { max-width: 100%; }
#ftrNav { display: block; font-size: 15px; margin-bottom: 1.8rem; }
#ftrNav li { display: inline;  } 
#ftrNav li a { color: var(--color-footer); margin: 0 1.2em 0 0; }
#ftrNav li a:hover {   text-decoration: underline;   }
#mainFtr .logo { width: 265px; margin-bottom: 3.4rem;   }
#mainFtr .copy { font-size: 15px; line-height: 1.75em; padding-bottom: 0; }
#mainFtr a[href ^= 'tel:'], #mainFtr a.c1 { color: #488ae4; }
@media all and (min-width: 1023px) {
#mainFtr  {  padding: 0 40px; text-align: left;   }
}
@media all and (max-width: 1023px) {
#ftrNav li a { margin: 0 0.5em; } 
#mainFtr .logo { width: 164px; }

}
@media all and (max-width: 1023px) {
#ftrNav { margin: 0 auto 0.6em auto; max-width: 28em;  }
#ftrNav li { line-height: 1.4em; }
#ftrNav li a { margin: 0 0.5em; } 
#ftrNav li span { display: none; }
}

@media all and (max-width: 420px) {
#ftrNav { font-size: 3.5vw; }
#mainFtr .copy { font-size: 3.5vw; }
}

/* 
////
//// Login
////
--------------------------------------------------------------*/
#loginCont  { background: var(--bg-body-login); display: flex; justify-content: center; align-items: center; padding: 6rem 0; min-height: calc(100vh - 448px); }
#loginCont  .loginForm { background: #000; padding: 16px; color: #fff;max-width: 356px; margin: 0 auto;  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);  -moz-box-shadow:  0px 0px 10px rgba(0,0,0,0.3);   -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.3); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
#loginCont  .title { font-size: 20px; text-align: center; padding:4px 0 20px 0;  font-weight: bold;  }
#loginCont p { position: relative; }
#loginCont p label { font-size: 16px; line-height: 1.5em; }
#loginCont p input { background: none #fbfbfb!important; color: #000!important; font-size: 16px!important;  height: 2.54em!important; }
#loginCont .msg {font-size: 12px; line-height: 1.2em; width: 100%; display: block; padding: 0 0 10px 0; text-align: center;  }
#loginCont .keep label { padding-left: 0; font-size: 13px; text-align: left; line-height: 1.2em; width: auto; display: block; padding: 0.5em 0; }
#loginCont .keep label input { float: left; width: 1em!important; height: 1em!important; display: block; margin-right: 0.4em; vertical-align: top; position: relative; top: -0.1em;  }
#loginCont p label.error, #loginCont p small.error  { float: left; font-size: 11px; padding: 2px 0 0 0;  color: #fa2700;  }
#loginCont .creat { padding-left: 0; font-size: 13px; line-height: 1.2em; width: 100%; display: block; padding: 0.5em 0; text-align: center;  }
#loginCont .creat a { color: rgba(255,255,255,0.75) }
#loginCont .creat a:hover { color: #fff; }
#loginCont p.tos { text-align: center; font-size: 11px; line-height: 1.2em; width: 100%; display: block; padding: 0; color: rgba(255,255,255,0.75) }
@media all and (max-width: 1024px) {
#loginCont { min-height: calc(100vh - 368px); }
}
@media all and (max-width: 1024px) {
#loginCont { min-height: calc(100vh - 368px); }
}
@media (max-width: 479px) {
#loginCont { min-height: calc(100vh - 48.8rem); }
#loginCont  .title { font-size: 18px; text-align: center; padding:3px 0 19px 0;   }
}

/* 
////
//// Privacy & tos
////
--------------------------------------------------------------*/
#innerCont  { background: var(--bg-body-login); color: var(--color-body); display: flex; justify-content: center; align-items: center; padding: 6rem 0; min-height: calc(100vh - 448px); }
@media all and (max-width: 1024px) {
#innerCont { min-height: calc(100vh - 368px); }
}
@media all and (max-width: 1024px) {
#innerCont { min-height: calc(100vh - 368px); }
}
@media (max-width: 479px) {
#innerCont { min-height: calc(100vh - 48.8rem); }
}
/* Tos Phone Header
--------------------------------------------------------------*/
.tosHdr #mainLogo { flex-grow: 1; }
.tosHdr #mainLogo a {  max-width: 24.6rem; }
#mainNav .tosNav li { font-size: 12px!important; line-height: 30px; }
#mainNav .tosNav li a { font-family:   "Poppins", Georgia, Times, "Times New Roman", serif;  font-weight: 400; }
#mainNav .tosNav li svg { width: 1.6em; height:  30px; vertical-align:  top; }
@media all and (max-width: 1200px) {
#mainNav .tosNav  { flex-direction: column; text-align: right;  padding-left: 15px;  }
#mainNav .tosNav li { font-size: 13px!important; padding: 0; line-height: 20px;  letter-spacing: -0.025em; }
#mainNav .tosNav li svg  { height: 20px; }
}
@media (max-width: 479px) {
#mainNav .tosNav li { font-size: 11px!important; line-height: 16px; }
#mainNav .tosNav li svg  { height: 16px; }
}
@media (max-width: 394px) {
#mainNav .tosNav li { font-size:  2.65vw!important; line-height: 1.77em;  }
#mainNav .tosNav li svg { height: 1.77em; }
}