body{padding:0;overflow-x:hidden;font-size:16px; line-height: 1.5; color:#fff;background-color: #000000;}
.container{width:1170px;margin:0 auto; }
img,a,p,ul,li,div,input,h1,h2,h3,h4,h5,h6,span,textarea,table,tr,td{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0;padding: 0}
body {font-family: Arial, Helvetica, sans-serif; }
a{text-decoration:none; color:#fff;  }
select,textarea,input,a:hover,a:focus,button{outline:none}
.img_fit{max-width:100%; display:block;}
ul{padding-left:0;list-style-type:none;}
body,p,ul{margin:0;}
.clr{clear:both}
.scroll_fix{overflow-y:hidden} 
table{border-collapse: collapse;width: 100%}
.flex { display:flex; display:-webkit-box;display:-moz-box; display:-ms-flexbox; display: -webkit-flex; flex-wrap: wrap;}
.flex-md{ -webkit-align-items: center;align-items: center;-webkit-justify-content: center; justify-content: center;}  
.flex-center{-webkit-justify-content: center; justify-content: center;}
.flex-bt{  -webkit-align-items: flex-end; align-items: flex-end;}
.flex-space-between{ justify-content: space-between;}
.flex-md-row-reverse { flex-direction: row-reverse ;}
.flex-container { align-content:stretch; align-items:stretch;} 
.flex-1 { flex: 1 0 0%;}
.col-auto { flex: 0 0 auto; width: auto;}
.mr-l{margin-left:auto;}
.col-6 {width: 50%;}
.col-3{width: 33.33%;}  .col-9{width: 66.66%;}  
.col-4 {width: 25%;}  .col-8 {width: 75%;}
.col-45 {width: 45%;} .col-55 {width: 55%;}
.col-1{width: 16.66%} .col-5 {width: 20%;} 
.col-60 {width: 60%;} .col-40 {width: 40%;} 
.col-12 {width: 100%;} .col-10{width:83.33%;}
.col-R{padding-left: 20px;} .col-L{padding-right: 20px;}
a,.mask,li:hover, .btn,nav li>a:after, .thumbimg img,.box {transition: all 0.3s ease;-moz-transition: all 0.3s ease;-webkit-transition:all 0.3s ease;-o-transition: all 0.3s ease;}
.thumbimg:hover img.col-12  {-webkit-transform:scale(1.1);transform:scale(1.1);}
.row{margin: 0 -10px;}
.row>li{padding:10px;} 
hr{border: 0;border-top:1px solid #bfbfbf ;background: none;}
.center-img{margin: 0 auto;}
/*---------------------------------------------------------*/  
header{ padding: 10px 0;  }
.logo {  display:block ;}  
.topnav>li{position: relative; }
.topnav>li>a{padding: 15px; display:block; }   
.topnav li>a:hover{ color: var(--primary-color); } 
.topnav ,.topnav li>a{height: 100%; } 
.topnav li.active>a,.topnav li.active>a:hover{ background: var(--primary-color);color: #000; }
 
nav{background: #232429; }
#nav-icon{ z-index:1000;position:absolute;right:0;top:0; height:50px;width:50px;
  -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer}
#nav-icon span{ background-color: #fff; height:2px;width:60%;border-radius: 9px; opacity: 1;left: 20%;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
#nav-icon span:nth-child(1) {top:15px;}#nav-icon span:nth-child(2) {top:25px;}#nav-icon span:nth-child(3) {top:35px;}
#nav-icon.open span:nth-child(1) {top:25px;-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg);}
#nav-icon.open span:nth-child(2) {opacity: 0;left: -60px;}
#nav-icon.open span:nth-child(3) {top:25px;-webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);}
.scroll_fix #nav-icon span{background-color: #fff;}
.down {left: -20px;right: -20px;  z-index: 3; position: absolute;background: rgba(0, 0, 0 ,0.7);}
.down a { padding:10px  5px; display: block;}  
.down a:hover,.down a.active{background: rgba(0, 0, 0 ,0.2);} 
.down-icon{ position: absolute;right:8px ;top: 15px; }
 
.topnav>li.secnav>a {padding-right: 30px;}

.sns{margin-top: 20px;}
.sns a:hover{opacity:0.6;}
.side_nav{position: fixed;right: 0;bottom: 45%;z-index: 9;}
.side_nav .a2a_kit a{display: block;float: none;margin-bottom: 5px}
.scroll_fix .down { position: relative;left: 0;right: 0;}
 
.all-height{height:100%;}
.top-btn{text-align: right;}
.top-btn .btn{padding: 10px 20px;  }
.top-btn li{padding: 0 5px;}
.btn{padding:10px 5%;text-align: center;margin:5px ;  display:inline-block;  background: #fff; border-radius: 10px;color: #000;} 
.btn:hover { background :  var(--primary-color);  }
.btn-sec{background:var(--secondary-color);color:#fff;} 
.sns-link{background: #111923; border-radius: 50%;padding: 8px; display: inline-block;}
  
.btn-list .btn span{display: block;font-size: 3em;line-height: 1; } 
.btn-list .btn{display: flex;} 

.banner{ background-image: url(../images/banner-bg.webp);background-repeat:  no-repeat;background-position:  center top;
  position: relative; background-size: cover; overflow: hidden;padding:0 0 60px 0;} 
.banner:after{content:'';background: linear-gradient(to bottom,  rgba(19, 14, 27, 0) 0%,rgba(20, 14, 27, 0.8) 78%);
  position: absolute;left: 0;bottom: 0;height: 40%;right: 0;}
  .banner .container{position: relative;z-index: 2;}
.banner-title{font-size:2.8rem; font-weight: bold;  line-height: 1.1;  } 
.banner-block .btn{min-width: 30%;box-shadow:5px 0 15px rgba(0, 0, 0 ,0.4);}  
.box{background: #36373c; border-radius: 20px; }
.box .content{position: relative;z-index: 1;} 


.promo-list .box{overflow: hidden; background: var(--primary-color);color: #000;}
 
.box-title{font-size:1.8rem; font-weight: bold;line-height: 1.2;}
.box-color {border-radius: 20px;padding: 15px; overflow: hidden;position: relative;}
 

.home-game-box{padding-top:5px;height: 100%; }
  
.home-game-blue{background: url(../images/home-game-blue.webp) no-repeat left top #36373c  ;background-size: 100%;  }
.home-game-blue{background-image: url(../images/home-game-blue.webp), url(../images/box-blue.webp) ;
  background-repeat: no-repeat,no-repeat ;
  background-position:  left top, right bottom;
  background-color:  #36373c;
  background-size: 100% , 15%; } 
.box-blue .box-title{color: #54c5d3;}  
.step-list .box-blue::after{content:'';position: absolute;right: 0; bottom: 0;
  width: 0px;height: 0px; border-style: solid;
  border-width: 0 0 60px 60px;
  border-color: transparent transparent #54c5d3 transparent;
  transform: rotate(0deg);
} 
.step-list .box-blue::before{content:'';position: absolute;left: 0; top: 0;
  width: 0px;height: 0px; border-style: solid;
  border-width:60px 60px 0 0 ;
  border-color:#54c5d3 transparent transparent  transparent ;
  transform: rotate(0deg);
} 
 
.home-game-green{background-image: url(../images/home-game-green.webp), url(../images/home-game-green-b.png) ;
  background-repeat: no-repeat,no-repeat ;
  background-position:  left top, right bottom;
  background-color:  #36373c;
  background-size: 100% , 15%; }
.box-green .box-title{color: #3aca33;}
.step-list .box-green::before{content:'';position: absolute;left: 0; top: 0;
  width: 0px;height: 0px; border-style: solid;
  border-width:60px 60px 0 0 ;
  border-color:#3aca33 transparent transparent  transparent ;
  transform: rotate(0deg);
} 
.step-list  .box-green::after{content:'';position: absolute;right: 0; bottom: 0;
  width: 0px;height: 0px; border-style: solid;
  border-width: 0 0 60px 60px;
  border-color: transparent transparent #3aca33 transparent;
  transform: rotate(0deg);
} 

.box-orange .box-title ,.game-orange .box-title{color: #de733c;}
.box-orange::after { content:'';position: absolute;right: 0; bottom: 0;
  width: 0px;height: 0px; border-style: solid;
  border-width: 0 0 60px 60px;
  border-color: transparent transparent #de733c transparent;
  transform: rotate(0deg);
}
.step-list .box-orange::before{content:'';position: absolute;left: 0; top: 0;
  width: 0px;height: 0px; border-style: solid;
  border-width:60px 60px 0 0 ;
  border-color:#de733c transparent transparent  transparent ;
  transform: rotate(0deg);
} 
 
.box-yellow  .box-title ,.game-yellow .box-title {color: #f8b551;}
 .box-yellow::after { content:'';position: absolute;right: 0; bottom: 0;
  width: 0px;height: 0px; border-style: solid;
  border-width: 0 0 60px 60px;
  border-color: transparent transparent #f8b551 transparent;
  transform: rotate(0deg);
} 
.step-list .box-yellow::before{content:'';position: absolute;left: 0; top: 0;
  width: 0px;height: 0px; border-style: solid;
  border-width:60px 60px 0 0 ;
  border-color:#f8b551 transparent transparent  transparent ;
  transform: rotate(0deg);
} 


.box-pink  .box-title ,.game-pink .box-title{color: #fd5b8a;}
.box-pink::after { content:'';position: absolute;right: 0; bottom: 0;
  width: 0px;height: 0px; border-style: solid;
  border-width: 0 0 60px 60px;
  border-color: transparent transparent #fd5b8a transparent;
  transform: rotate(0deg);
} 
.step-list .box-pink::before{content:'';position: absolute;left: 0; top: 0;
  width: 0px;height: 0px; border-style: solid;
  border-width:60px 60px 0 0 ;
  border-color:#fd5b8a transparent transparent  transparent ;
  transform: rotate(0deg);
} 


.box-purple  .box-title,.game-purple .box-title{color: #9455f0;}
 .box-purple::after { content:'';position: absolute;right: 0; bottom: 0;
  width: 0px;height: 0px; border-style: solid;
  border-width: 0 0 60px 60px;
  border-color: transparent transparent #9455f0 transparent;
  transform: rotate(0deg);
} 
.box-purple-re::after { content:'';position: absolute;left: 0; bottom: 0;
  width: 0px;height: 0px; border-style: solid;
  border-width: 60px  0 0 60px;
  border-color: transparent transparent transparent #9455f0 ;
  transform: rotate(0deg);
}
.step-list .box-purple::before{content:'';position: absolute;left: 0; top: 0;
  width: 0px;height: 0px; border-style: solid;
  border-width:60px 60px 0 0 ;
  border-color:#9455f0 transparent transparent  transparent ;
  transform: rotate(0deg);
} 

.box-light  .box-title{color: #c490bf;}
 .box-light::after { content:'';position: absolute;right: 0; bottom: 0;
  width: 0px;height: 0px; border-style: solid;
  border-width: 0 0 60px 60px;
  border-color: transparent transparent #c490bf transparent;
  transform: rotate(0deg);
} 
.step-list .box-light::before{content:'';position: absolute;left: 0; top: 0;
  width: 0px;height: 0px; border-style: solid;
  border-width:60px 60px 0 0 ;
  border-color:#c490bf transparent transparent  transparent ;
  transform: rotate(0deg);
} 


.step-list .box{ height: 100%;}
 
 .point-title{font-size: 1.2em;color:var(--primary-color); font-weight: bold;line-height: 1.1;margin: 10px 0;} 
 .game-title{font-size: 2.5em;color:#ffdb41; font-weight: bold;line-height: 1.1;} 
.game-list .box-gmae{ margin:  0;height: 100%; }
 
 .game-tt{font-size: 2.4em;color: var(--secondary-color); font-weight: bold;line-height: 1.1;}
 .contain{padding: 1.5em;}
 
.game-orange{background-image: url(../images/game-orange-bg1.webp), url(../images/game-orange-bg2.webp) ;
  background-repeat: no-repeat,no-repeat ;
  background-position:  left top, right bottom;
  background-color:  #36373c;
  background-size: 30% , 15%;
} 
.game-yellow{background-image: url(../images/game-yellow-bg1.webp), url(../images/game-yellow-bg2.webp) ;
  background-repeat: no-repeat,no-repeat ;
  background-position: right top , left bottom ;
  background-color:  #36373c;
  background-size: 30% , 15%;
}
.game-pink{background-image: url(../images/game-pink-bg1.webp), url(../images/game-pink-bg2.webp) ;
  background-repeat: no-repeat,no-repeat ;
  background-position: right top , left bottom ;
  background-color:  #36373c;
  background-size: 30% , 15%;
} 
.game-purple{background-image: url(../images/game-purple-bg1.webp), url(../images/game-purple-bg2.webp) ;
  background-repeat: no-repeat,no-repeat ;
  background-position:  left top, right bottom;
  background-color:  #36373c;
  background-size: 30% , 15%;  
}


 footer { padding: 20px 0;color:#a0a0a0;background-color: #2b2b2b}  
 .ft-link{ padding: 15px 0; }
 footer a{color:#a0a0a0 ;padding: 5px;margin-right: 10px  ;display: block;}
 footer hr{border-color: #707070;}
 footer a:hover{color: #fff;}
.copyright{text-align: center;}

.content{padding:15px;}   
 
.home-bg{background:url(../images/home-bg.webp) no-repeat   center ;background-size: cover; }   
.home-bg2{background:url(../images/home-bg2.webp) no-repeat   center ;background-size: cover; } 

.home-img{margin-top: -40px;position: relative;z-index: 1;}
.home-img2 { max-width:120%;margin-right: -20%;}
.home-img3 { max-width:120%;margin-left: -20%;} 
 

.register-bg {background:url(../images/register-bg.webp) no-repeat center  ;}
.esport-bg {background:url(../images/esport-bg.webp) no-repeat center  ;}
.casino-bg{background:url(../images/casino-bg.webp) no-repeat center  ;}
.live-bg {background:url(../images/live-bg.webp) no-repeat center  ;}
.sport-bg {background:url(../images/sport-bg.webp) no-repeat center  ;}
.sabong-bg{background:url(../images/sabong-bg.webp) no-repeat center  ;}
.promo-bg {background:url(../images/promo-bg.webp) no-repeat center  ;}
.down-bg {background:url(../images/down-bg.webp) no-repeat center  ;}
.bank-bg {background:url(../images/bank-bg.webp) no-repeat center  ;}
 
.pagetop{ background-image: url(../images/pagetop.webp) ;background-position:center  bottom;background-size: cover; color: #fff;} 
.page-title{font-size:3.5em;font-weight:bold;display: inline-block; line-height: 1; }
 
  
.main{padding-top: 40px;padding-bottom: 40px; }
.mask{ left: 0; right:0; bottom: 0;position: absolute; padding:10px 15px; color: #fff;font-weight: bold; 
  background:  linear-gradient(135deg,  rgba(255,134,0,1) 0%,rgba(255,134,0,0) 100%); } 
 
 
 
.title { line-height: 1.2; font-size: var(--h2);  font-weight: bold; color: var(--primary-color);}
.table-main{ margin: 15px 0; border-top: 1px solid #333 ; border-left: 1px solid #333 ;background-color: #fff; color: #000; }
.table-main th,.table-main td{padding: 8px;border-right: 1px solid #333;  border-bottom: 1px solid #333; }
.table-main th{background-color: var(--primary-color);color: #000 }
 
 
.tt{ font-weight: bold;color: var(--secondary-color); } 
.tt:before{content:'';background-color: var(--secondary-color);width: 10px;height: 10px;border-radius: 50%;display: inline-block;vertical-align: middle;}
 
 .main-box{background-color:#1a1819;overflow: hidden;}
.main-box .w-main{font-size: 1.2rem;}
 
 
.more{border: 1px solid #fff;color:#fff;padding:5px 30px;display:inline-block;margin-top: 10px;}
 
.border{border-radius: 10px; }
.p {margin:15px 0;} 
.spot>li , .w6{background: url(../images/spot.png) no-repeat left 5px ; padding-left:20px;padding-right:10px; margin:10px 0;}
.spot-w li {background: url(../images/spot-w.png) no-repeat left 5px ; }
.spot {margin: 10px 0;}  
 

/*--------------------------------------------------------*/  
:root {
  --primary-color: #c9f73c;
  --secondary-color:#4c2f83; 
  --white:#fff;
  --h2: 2rem;
}
.h2{font-size: var(--h2);}
.bg-main  { background-color: var(--primary-color); }
 .title,.banner-title,.page-title{font-family:  Arial, Helvetica,  sans-serif;} 
.bg-w{background: #fff;}   
.w-main{color: var(--primary-color);}
.title-sec{color:var(--primary-color);font-weight: bold;}
.w-white{color: var(--white);}  
.bg{background: linear-gradient(135deg,  #4c2f83 0%,#281743 100%); }  
 .bg-b{background-color: #111518;} 
.w-b{color: #000;}  
.bg-grey{background-color:#646464;}  

  

.hidden,.thumbimg{overflow:hidden;}
 nav a,.center {text-align:center;}
.inline,.pagenav a{display:inline-block;}
#nav-icon span,.thumbimg {display: block;}
#nav-icon,.down,.visible-md,.visible-lg{display:none}
nav>a, .inline{vertical-align: middle;}
 .relate, .box, .thumbimg {position:relative;}
#nav-icon span,.topnav li>a:after , .mask,.cover  {position:absolute;}
.bg, .bg-cover{background-position:center;background-size:cover;background-repeat: no-repeat;}
a {cursor: pointer;}
.btn, .w-bold{font-weight: bold;} 
.w2, .tt {font-size:1.6rem;line-height: 1.2;}
.w3 {font-size:1.2rem;}
.num{font-size: 3rem;line-height: 1 ;font-weight: bold; display: inline-block; display: inline-block; background: -webkit-linear-gradient(135deg,#df5d02 20%,#fe8800 80%);
  -webkit-background-clip: text;
  background-clip: text; 
  -webkit-text-fill-color: transparent; }  
 
.mb-3{margin-bottom:2rem ;}  .mb-2{margin-bottom:1.2rem ;} 
.mt-3{margin-top:2rem ;}  .mt-2{margin-top:1.2rem ;}
.py-3{padding:2rem 0;}   .py-2{padding:1.2rem 0;} 
.l1{line-height: 1.1;}  .mt-1{margin-top: -15px;}
.pb-0{padding-bottom: 0!important;}   .pt-0{padding-top: 0;}  
.pb-3{padding-bottom: 2rem;} .pt-3{padding-top: 2rem;}
.pt-2{padding-top: 1.2rem;}
.pr-2{padding-right: 1.2rem;}
.py-2{padding: 20px 0;} .p-2{padding: 20px ;}
.pt-0{padding-top: 0;}
/*-----------------------S----------------------------------*/  
 
@media screen and (min-width:900px) and (max-width:1200px){ 
.container{width:850px;}    
.home-livebet{background: url(../images/mrjackbet-live.jpg) no-repeat -15% center #2a1a49;background-size: 50%;  }
 
 }
@media screen and (min-width:700px) and (max-width:899px){  
.container{width:670px;}   
.home-livebet{background: url(../images/mrjackbet-live.jpg) no-repeat -15% center #2a1a49;background-size:50%;  }
  header{padding-right: 60px;}  

}
@media screen and (min-width:480px) and (max-width:899px){  

  }
   
/*---------------------------------------------------------*/
@media screen and (max-width:1200px){ 
  .col-xl-9{ width:66%;}
  .col-xl-3{ width:33%;}
 .col-xl-6{ width:50%;}
 .col-xl-12{ width:100%;} 
 .pagetitle,.pagetop h2, .btn-list .btn span{font-size:2rem;} 
 
}
 
@media screen and (max-width:899px){
.col-lg-12 { width:100%; padding: 0}	
.col-lg-0{width: 0;}
.col-lg-6 { width:50%; padding: 0}	
.col-lg-9 { width:66.66%; padding: 0}	
.col-lg-3{width:33.33%; padding: 0} 
#nav-icon ,.visible-lg{display:block;}    
 
.topnav li>a{padding: 10px 0;border-bottom: 1px dashed rgba(0,0,0,0.2); color: #fff;} 
.topnav, .down,.topnav li>a::after,.hidden-lg{display:none} 
.topnav{overflow: auto;}
.topnav{height: 100%;position: fixed;left:0;top:0;right:0;z-index:999; padding-top:60px ; background: rgba(22,22,22,0.95)  }
.topnav li {position: relative;}  
.topnav>li{border-top: 1px dashed #2b3849;}  
.banner-title{font-size: 2.2em;line-height: 1;} 
.table-contain{overflow: scroll;}
}
@media screen and (max-width:699px){
.container{width:100%;padding: 0 20px;}	
.main{padding-top:20px;padding-bottom: 20px;  }
 nav a,.col-md-12  {width:100% !important} 
 .col-md-6{width: 50%;}
 .col-md-8{width: 75%;}
 .col-md-3{width: 33.33%;}  
.col-R.col-md-12,.col-L.col-md-12{padding: 0} 
.visible-md{display:block;} 
.hidden-md,.side_nav .a2a_kit{display:none;}  
.title,.banner-title{font-size: 1.5rem;line-height: 1.3;}
 .ft-link {display: block;}
 .mask{padding: 10px;}
 .mt-md-0{margin-top: 0;}   
.side_nav{bottom: 0;} 
 .home-img2 ,.home-img3 {max-width: 100%;margin: 0;} 
 .home-img{margin: 0 auto;}  
 .banner{ background-image: url(../images/banner-bg-sm.webp) ; padding:140px  0 40px 0;}
 .pagetop {padding-top:50px ;text-align: center;}  
.logo{width: 200px;}
 .top-btn{-webkit-align-items: center;align-items: center;-webkit-justify-content: center; justify-content: center;}
 .box-title {  font-size: 1.2rem; } 
 .live-mobile-img{ margin: 0 auto; margin-top: -80px; max-width: 200px;}
} 

@media screen and (max-width:479px){
.col-sm-12{width: 100%}	  
.col-sm-12.col-R{padding: 0;}
.col-sm-6{width: 50%;}
.col-sm-3{width:33.33%;}  
 .col-sm-9{width: 66.66%;}     
 
}