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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
  box-sizing:border-box;
  -webkit-tap-highlight-color: transparent;
}
html {
-webkit-text-size-adjust: none;
}
:focus {/* remember to define focus styles! */
outline: 0;
}
img{
border-style: none!important;
outline:0!important;
outline:none!important;
white-space:no-wrap;
border:none!important;
}
ol, ul {
margin: 0;
padding: 0px 0px 10px 40px;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, address {
display: block;
}
embed, iframe, object {
max-width: 100%;
}
img{
  max-width:100%;
}
a{
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;
}

ul,ol{
  padding:0;
  margin:0;
}
html,body{
  height:100vh;
}
/** dice section starts **/
.dice_container {
  position: static;
  display: flex;
  top: 200px;
  width:36px;
  height: 36px;
  align-items: center;
  overflow:hidden;
}
.dice_container img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.dice {
  position: relative;
  width: 36px;
  height: 36px;
  transform-style: preserve-3d;
  transition: transform .1s;
}

.rolling_dice{
  animation: rollDice .30s ease infinite;
}
@keyframes rollDice {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: inset 2px 2px #fff;
}

.dice-one {
  position: static;
  left: 150px; 
}

.dice-two {
  position: static;
  left: -50px;
  
}

.exch_dice_section_cnt .side {
  position: absolute;
  background-color: #ff0027;
  border-radius:5px;
  width: 36px;
  height: 36px;
  border: 1px solid #ff0027;
  text-align: center;
  line-height: 2em;
  
}

.exch_dice_section_cnt .side:nth-child(1) {
  transform: translateZ(3.1em); }

.exch_dice_section_cnt .side:nth-child(6) {
  transform: rotateY(90deg) translateZ(3.1em); }

.exch_dice_section_cnt .side:nth-child(3) {
  transform: rotateY(-90deg) translateZ(3.1em); }

.exch_dice_section_cnt .side:nth-child(4) {
  transform: rotateX(90deg) translateZ(3.1em); }

.exch_dice_section_cnt .side:nth-child(5) {
  transform: rotateX(-90deg) translateZ(3.1em); }

.exch_dice_section_cnt .side:nth-child(2) {
  transform: rotateY(-180deg) translateZ(3.1em); }

.show-1 {
  transform: rotateX(720deg) rotateZ(-720deg); }

.show-6 {
  transform: rotateX(-900deg) rotateZ(1080deg); }

.show-3 {
  transform: rotateY(-450deg) rotateZ(-1440deg); }

.show-4 {
  transform: rotateY(810deg) rotateZ(720deg); }

.show-5 {
  transform: rotateX(-810deg) rotateZ(-1080deg); }

.show-2 {
  transform: rotateX(450deg) rotateZ(-720deg); }

.two-1, .three-1, .four-1, .five-1, .six-1 {
  top: 20%;
  left: 20%; 
}

.four-3, .five-3, .six-4 {
  top: 20%;
  left: 80%; }

.one-1, .three-2, .five-5 {
  top: 50%;
  left: 50%; }

.four-2, .five-2, .six-3 {
  top: 80%;
  left: 20%; }

.two-2, .three-3, .four-4, .five-4, .six-6 {
  top: 80%;
  left: 80%; }

.six-2 {
  top: 50%;
  left: 20%; }

.six-5 {
  top: 50%;
  left: 80%; 
}
/** Dice Section Ends **/
:root {
  --primary--landing--btnColor:linear-gradient(180deg, #139FFF 0%, #0E6BAB 70.86%);
  --primary--landing--btnBoxShadow: 5px 5px 5px 0px #111, -4px -4px 10px 0px #3C3C3C;
  --primary--landing--btnTextShadow:1px 2px 2px rgba(0, 0, 0, 0.30);
  --landing--FontFamily:'Montserrat', sans-serif;
  --landing--Alternate--FontFamily:'Lato', sans-serif;
  --whiteColor:#fff;
  --siteColor:#139FFF;
  --errorColor:#CE0100;
  --sitePadding:0 80px;
  --goldColor:#139FFF;
  --dicesection-border:linear-gradient(137deg, #232323 0.98%, #139FFF 61%, #232323 97.01%), #D9D9D9;
}
body{
  word-wrap: break-word;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
  font-family:var(--landing--FontFamily);
  -webkit-tap-highlight-color: transparent;
}
body.landing_bets_opened,
html.landing_bets_opened{
  overflow:hidden;
}
.kheloexch_landing_page{
  background: rgba(17, 17, 17, 1);
  height:100%;
}
.kheloexch_landing_in {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.landing_bdy_cnt {
  flex: 1;
  display: flex;
  flex-direction: column;
  background:rgba(17, 17, 17, 1);
}
.landing_container{
  max-width:1440px;
  width:100%;
  padding:var(--sitePadding);
  margin:0 auto;
}
.kheloexch_header_section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding:20px 0;
  border-bottom: 1px solid #212121;
}
.kheloexch_header_section .landing_container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
a.lan_join_now{
  border-radius: 30px;
  background: var(--primary--landing--btnColor);
  box-shadow: var(--primary--landing--btnBoxShadow);
  width: 140px;
  height: 48px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  text-shadow:var(--primary--landing--btnTextShadow);
  font-family: var(--landing--Alternate--FontFamily);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  color: var(--whiteColor);
  margin:0;
  text-transform: uppercase;
}
.kheloexch_landing_cnt{
  margin-top:43px;
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom:25px;
}
.landing_cnt_top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.exchcnt_top_section p{
  font-family: var(--landing--FontFamily);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: var(--siteColor);
}
.exchcnt_top_section h2{
  font-family: var(--landing--FontFamily);
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 64px; 
  color: var(--whiteColor);
  margin:10px 0;
}
.exchcnt_top_section a{
  text-align: center;
  font-family: var(--landing--FontFamily);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
  color: var(--whiteColor);
}
.kheloexch_landing_lft {
  flex: 1;
  position:relative;
}
.kheloexch_landing_lft.rgt {
  max-width: 580px;
  width:100%;
  flex: unset;
  text-align: center;
}

img.exch_girl {
  /* width: 53%; */
  position: relative;
  z-index: 2;
}
.landing_curve_image {
  position: absolute;
  top: 45px;
  left: -40px;
  right: 0;
  z-index: 1;
}
.exch_dice_section{
  margin-top:38px;
  max-width:453px;
  width:100%;
}
.game {
  position: relative;
  width: auto;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: center;
  background: #131314;
  box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.15), 0px 14px 34px 0px rgba(255, 255, 255, 0.05) inset;
}
.game:after {
  content: "";
  background: linear-gradient(98deg, rgba(214, 214, 255, 0.08) 0%, rgba(207, 218, 255, 0.00) 100%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.exch_dice_section_cnt{
  max-width: 333px;
  width: 100%;
  height: 100px;
  border-radius: 8px;
  border: 1px solid #000;
  background:var(--dicesection-border);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding: 2px;
}
/* .exch_dice_section_cnt:after{
  content:"";
  background:url(../images/dice-stroke.svg);
  background-size: contain;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:-1;
} */
.exch_dice_lists{
  margin-top:12px;
}
.exch_dice_lists ul{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:30px;
}
.exch_dice_lists ul li {
    width: 23.3%;
    height: 84px;
    border-radius: 8px;
    background: linear-gradient(98deg, rgba(214, 214, 255, 0.08) 0%, rgba(207, 218, 255, 0.00) 100%);
    box-shadow: 0px 4px 12px 0px rgba(33, 33, 33, 0.40), 0px 4px 10px 0px rgba(92, 92, 92, 0.15) inset;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    cursor:pointer;
    position:relative;
    padding:2px;
}
.exch_dice_lists ul li .dice_list_in{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width:100%;
    height:100%;
    padding: 2px 16px;
    border-radius: 8px;
    background: #131314;
    box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.15), 0px 14px 34px 0px rgba(255, 255, 255, 0.05) inset;
    position:relative;
    z-index:2;
}
.exch_dice_lists ul li .dice_list_in:after{
  content: "";
  background: linear-gradient(98deg, rgba(214, 214, 255, 0.08) 0%, rgba(207, 218, 255, 0.00) 100%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index:-1;
}
.exch_dice_lists ul li.dice_activated{
  background: var(--dicesection-border);
}

/* .exch_dice_lists ul li:nth-child(-n+4) {
  cursor:not-allowed;
  pointer-events: none;
} */
.exch_dice_lists ul li p{
  font-family: var(--landing--FontFamily);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: var(--whiteColor);
}
.exch_dice_lists ul li p.points_sec{
  font-weight:600;
}
.exch_dice_lists ul li p.times_sec{
  font-size: 12px;
  color: #5F5F5F;
}
.exch_dice_lists ul li p.times_sec span{
  margin-left:4px;
}
.bet_border{
  display:none;
}
/* .exch_dice_lists ul li.dice_activated:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  background:url(../images/bet-border.svg);
} */
/* .bet_border{
  position:absolute;
  left:0;
  right:0;
  top:0;
  width:100%;
  height:100%;
  opacity:0;
}
.bet_border svg{
  width:100%;
  height:100%;
}
.bet_border svg rect {
  height: 83px;
  y: -6;
}
li.dice_activated .bet_border{
  opacity:1;
} */
.exch_dice_lists #roll{
  border-radius: 26px;
  background: var(--primary--landing--btnColor);
  box-shadow: 5px 5px 5px 0px #111, -4px -4px 10px 0px #3C3C3C;
  transition: .3s;
  width:100%;
  height:48px;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.30);
  font-family: var(--landing--Alternate--FontFamily);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  color: var(--whiteColor);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}
.exch_dice_lists #roll.disabled{
  pointer-events: none;
  cursor: default;
}
.kheloexch_landing_footer{
  padding:20px 0px;
  background:#1A1A1A;
  margin-top:-1px;
  position: relative;
  z-index: 20;
}
.landing_footer_in {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  justify-content: center;
  align-items:center;
  gap: 60px;
}
.landing_footer_lft{
  flex:1;
}
.landing_footer_lft p{
  text-align: center;
  font-family: var(--landing--FontFamily);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px; 
  color: var(--whiteColor);
}
.landing_footer_rgt{
  display: flex;
  justify-content: space-between;
  text-align: center;
  gap: 60px;
}
.footer_rgt_clmn {
  flex: 1 1 auto;
  display:flex;
  flex-wrap:wrap;
  flex-direction: column;
  gap:8px;
}
.footer_rgt_clmn p{
  text-align: center;
  font-family: var(--landing--FontFamily);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  color: var(--whiteColor);
}
.footer_rgt_clmn ul{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  list-style: none;
  justify-content: center;
}
.footer_rgt_clmn.landing_social_sec ul{
  gap:8px;
}
.disclaimer_text_m{
  text-transform: uppercase;
}
.footer_rgt_clmn{
  margin-bottom: 10px;
}
.footer_flex_winmatch{
  display: flex;
  flex-direction: column;
}
.landing_app_sec ul li {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap:10px;
  border-radius: 8px;
  /* border: 0.5px solid #232323; */
  background: linear-gradient(98deg, rgba(214, 214, 255, 0.08) 0%, rgba(207, 218, 255, 0.00) 100%);
  position:relative;
  text-align:left;
}
.landing_app_sec ul li a{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap:10px;
  width: 100%;
  height: 100%;
  padding:7px 16px;
  position:relative;
  z-index:20;
}
.app_borders{
  position:absolute;
  top:0;
  left:0;
  right:0;
  width:100%;
  height:100%;
}

.app_borders svg{
  width:100%;
  height:100%;
}
.app_borders svg rect{
    height: 99%;
    y: 0;
}
.landing_app_sec ul li:last-child .app_borders svg rect{
  height: 100%;
  y: 0;
}
.footer_rgt_clmn .app_rgt p{
  font-family: var(--landing--FontFamily);
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: var(--whiteColor);
  text-align:left;
}
.footer_rgt_clmn .app_rgt h6{
  font-family: var(--landing--FontFamily);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: var(--whiteColor);
}
.footer_rgt_clmn h5{
  font-family: var(--landing--FontFamily);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
  color: var(--whiteColor);
}
.dice_error_section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items:center;
  margin-top:12px;
  gap:4px;
}
.dice_error_icon {
  display: flex;
  flex-wrap:wrap;
}
.dice_error_txt p{
  font-family: var(--landing--FontFamily);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color:var(--errorColor);
}
.lost_chances_pop,
.success_chances_pop{
  position:fixed;
  top:0;
  width:100%;
  height:100%;
  /* background: rgba(0, 0, 0, 0.85); */
  background:rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  z-index:200;
  font-size: 30px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.landing_popup_in{
  max-width:710px;
  width:94%;
  border-radius: 36px;
  background: #1A1A1A;
  padding:80px 40px 70px 40px;
  text-align:center;
  position:relative;
}

.landing_popup_in h2{
  font-family: var(--landing--Alternate--FontFamily);
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: var(--goldColor);
}
.landing_popup_in p{
  font-family: var(--landing--Alternate--FontFamily);
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: var(--whiteColor);
  margin: 10px 0 5px 0; 
}
.landing_popup_in small{
  font-family: var(--landing--Alternate--FontFamily);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color:var(--goldColor);
  display:flex;
  justify-content: center;
}
.landing_popup_in a{
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: var(--primary--landing--btnColor);
  box-shadow: 5px 5px 5px 0px #111, -4px -4px 10px 0px #3C3C3C;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.30);
  font-family: var(--landing--Alternate--FontFamily);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: var(--whiteColor);
  margin:30px auto 0;
  position:relative;
  z-index:2;
  text-transform:uppercase;
}
.landing_pop_close{
  position:absolute;
  top:20px;
  right:20px;
}
.landing_pop_close a{
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 100px;
  border: 0.5px solid #444;
  background: linear-gradient(136deg, #2C2B2B 17.8%, #0E0E0E 79.27%);
  box-shadow: 2px 2px 8px 0px #070707, -2px -2px 8px 0px #292929;
  margin:0;
}

/* .landing_bet_pop span{
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--primary--landing--btnColor);;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  color:#000;
  cursor:pointer;
} */
@media(max-width:1280px){
  :root{
    --sitePadding: 0 20px;
  }
}
@media(max-width:1159px){
  .kheloexch_landing_lft.rgt {
    max-width: 457px;
  }
  .landing_footer_rgt {
    gap: 14px;
  }
}
@media (min-width:1061px) and (max-width:1280px){
  .exchcnt_top_section h2 {
    font-size: 40px;
    line-height: 50px;
  }
}
@media(max-width:1060px){
  .exchcnt_top_section h2{
    font-size: 37px;
    line-height: 50px;
}
}

.exchlanding_main::-webkit-scrollbar{
	width: 6px;
}
  

.exchlanding_main::-webkit-scrollbar-track{
	border-radius: 0;
	background: #111;
}


.exchlanding_main::-webkit-scrollbar-thumb{
	border-radius: 18px;
	background: var(--primary--landing--btnColor);
}
@media(min-width:961px){
  .mobile_vector{
    display:none;
  }
}
@media(max-width:960px){
  .kheloexch_header_section {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(17, 17, 17, 1);
  }
  .desktop_vector{
    display:none;
  }
  .kheloexch_landing_cnt{
    margin-top:22px;
  }
  .landing_cnt_top,
  .landing_footer_in{
    flex-direction: column;
    position:relative;
  }
  .landing_footer_in{
    gap:16px;
  }
  
  .kheloexch_landing_lft.rgt{
    order:1;
    margin-top:0!important;
    z-index:2;
    /* position:absolute;
    top:0!important; */
  }
  
  .kheloexch_landing_lft{
    display: flex;
    flex-direction: column;
    order:2;
    text-align: center;
    position:relative;
    z-index:20;
    box-shadow: 0px 10px 25px 32px rgba(17, 17, 17, 1);
  }
  .landing_terms_condition{
    order:3;
  }
  .exch_dice_section{
    margin-left:auto;
    margin-right:auto;
  }
  .exchcnt_top_section h2 {
    font-size: 27px;
    line-height: 34px;
}
.exch_dice_lists #roll{
  margin-bottom:32px;
}
.kheloexch_landing_footer{
  background:rgba(17, 17, 17, 1);
  padding-top:0;
}
.exch_dice_lists ul li{
  height:auto;
}

.exch_dice_lists ul li .dice_list_in{
  padding-top:10px;
  padding-bottom:10px;
}
.exch_dice_section {
  margin-top: 10px;
  background:rgba(17, 17, 17, 1);
}
.landing_curve_image {
  left: -54px;
}
.landing_curve_image img{
  width:100%;
}
.landing_popup_in {
  padding:43px 10px 30px 10px;
}
}
@media(max-width:566px){
  .landing_footer_rgt{
    flex-direction: column;
  }
}
@media(max-width:545px){
  .landing_curve_image {
    left: -30px;
}
.exch_dice_lists ul {
  justify-content:center;
}
.exch_dice_lists ul li{
  width: 22.7%;
}
/* .kheloexch_logo_section img {
  width: 140px;
} */
a.lan_join_now {
  width: 116px;
  height: 36px;
}

.landing_popup_in h2 {
  font-size: 28px;
}
.landing_popup_in p {
  font-size: 17px;
}
.landing_popup_in small {
  font-size: 16px;
  line-height: 26px;
}
.landing_popup_in a {
  width: 153px;
  height: 40px;
  margin:9px auto 0;
}
.landing_pop_close a {
  width: 30px;
  height: 30px;
  margin-top:0;
}
.landing_pop_close a svg{
  width:12px;
  height:12px;
}
.landing_pop_close {
  top: 9px;
}
}
@media(max-width:365px){
:root {
    --sitePadding: 0 10px;
}
.exch_dice_lists ul li{
  width: 22.5%;
  gap:5px;
}
.exch_dice_lists ul li .dice_list_in{
  gap:5px;
  padding: 4px 10px;
}
.exch_dice_lists ul li p{
  font-size:12px;
}
.exchcnt_top_section h2 {
  font-size: 16px;
  line-height: 27px;
}
.exchcnt_top_section p {
  font-size: 20px
}
.dice_error_txt p {
  font-size: 12px;
}
}
@media(max-width:320px){
  .exch_dice_lists ul li {
    width: 21.9%;
}
.exch_dice_lists ul li p {
  font-size: 10px;
}
.exch_dice_section_cnt {
  height: 30vw;
}
a.lan_join_now {
  width: 100px;
  height: 31px;
}
.landing_curve_image {
  top: 10px;
}
.exchcnt_top_section p {
  font-size: 13px;
}
.exchcnt_top_section h2 {
  font-size: 13px;
  line-height: 19px;
}
.exch_dice_section {
  margin-top: 0px;
}
}

/** Dice Before Rotaion **/
:root {
  --face-size: 36px;
  
  
  background-color: rgba(175, 175, 175, 0.25);
}
#perspective {
  position: relative;
  perspective: 2000px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  z-index: 2;
}

/* Create spin animation */

@keyframes spin {
  from {
      transform: rotateX(0deg) rotateY(0deg);
  }
  
  to {
      transform: rotateX(360deg) rotateY(720deg);
  }
}

/* Position dice on page */

#die-1 {
  left: 100px;
  top: 100px;
  animation-direction: alternate-reverse;
}

#die-2 {
  left: 300px;
  top: 200px;
  
  animation-direction: reverse;
}
#die-3 {
  animation-direction: alternate-reverse;
}
/* Set die style */

.die {
  position: static;
  
  width: 36px;
  height: 36px;
  
  transform-style: preserve-3d;
  
  
  background: linear-gradient(45deg, rgba(243, 30, 29, 0.00) 59.22%, #950202 100%), linear-gradient(45deg, #950202 0%, rgba(243, 30, 29, 0.00) 35.95%), radial-gradient(50% 50% at 50% 50%, #DB6260 0%, #F43635 100%);
}

.before_die .die{
  animation: spin 2s linear .1s infinite;
}

/* .die:hover {
  animation-play-state: paused;
} */

/* Set die face style */

.face {
  position: absolute;
  font-size: 40px;
  width: var(--face-size);
  height: var(--face-size);
  text-align: center;
  line-height: var(--face-size);
  transform-style: preserve-3d;
  background: linear-gradient(45deg, rgba(243, 30, 29, 0.00) 59.22%, #950202 100%), linear-gradient(45deg, #950202 0%, rgba(243, 30, 29, 0.00) 35.95%), radial-gradient(50% 50% at 50% 50%, #DB6260 0%, #F43635 100%);
  /* border: 5px solid #FFF; */
}

/* Position face 1 and dots */

.face-1 {
  transform: translateZ(calc(var(--face-size) / -2)) rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.face-1 > .dot {
  position:static;
  transform:none;
}

/* Position face 2 and dots */

.face-2 {
  transform: translateX(50%) rotateY(90deg);
}

.face-2 > .dot:nth-child(1) {
  left: 25%;
  top: 50%;
}

.face-2 > .dot:nth-child(1) {
  left: 25%;
  top: 50%;
}

.face-2 > .dot:nth-child(2) {
  left: 75%;
  top: 50%;
}

/* Position face 3 and dots */

.face-3 {
  transform: translateX(-50%) rotateY(-90deg);
}

.face-3 > .dot:nth-child(1) {
  left: 25%;
  top: 25%;
}

.face-3 > .dot:nth-child(2) {
  left: 50%;
  top: 50%;
}

.face-3 > .dot:nth-child(3) {
  left: 75%;
  top: 75%;
}

/* Position face 4 and dots */

.face-4 {
  transform: translateY(50%) rotateX(90deg);
  top:0;
}

.face-4 > .dot:nth-child(1) {
    left: 15px;
    top: 14px;
}

.face-4 > .dot:nth-child(2) {
    left: auto;
    top: 14px;
    right: 8px;
}

.face-4 > .dot:nth-child(3) {
  left: 15px;
  top: auto;
  bottom: 8px;
}

.face-4 > .dot:nth-child(4) {
    left: auto;
    top: auto;
    right: 8px;
    bottom: 8px;
}

/* Position face 5 and dots */

.face-5 {
  transform: translateY(-50%) rotateX(-90deg);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.face-5 > .dot:nth-child(1) {
  left: 25%;
  top: 30%;
}

.face-5 > .dot:nth-child(2) {
  left: auto;
  top: 30%;
  right: 3px;
}

.face-5 > .dot:nth-child(3) {
  left: 33%;
  top: 90%;
}

.face-5 > .dot:nth-child(4) {
  left: auto;
  top: 87%;
  right: 3px;
}

.face-5 > .dot:nth-child(5) {
  left: 64%;
  top: 56%;
}

/* Position face 6 and dots */

.face-6 {
  transform: translateZ(calc(var(--face-size) / 2));
}
.face-6 {
  display: flex;
  flex-wrap: wrap;  
  justify-content: space-between;
  gap: 0px 9px;
  padding: 0 5px;
  align-items: center;
  border:unset;
  top:0;
}
.face-6 .dot{
  position: static;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
  transform: none;
  box-shadow: inset 2px 2px #fff;
  margin: 0;
}
.face-6 > .dot:nth-child(1) {
  left: 25%;
  top: 25%
}

#die-3 .face-6 > .dot:nth-child(1){
  position: absolute;
  bottom: 5px;
  top: auto;
  left: 5px;
}
#die-3 .face-6 > .dot:nth-child(2){
    position: absolute;
    bottom: auto;
    top: 4px;
    left: auto;
    right: 5px;
}

.face-6 > .dot:nth-child(2) {
  left: 75%;
  top: 25%
}

.face-6 > .dot:nth-child(3) {
  left: 25%;
  top: 50%
}

.face-6 > .dot:nth-child(4) {
  left: 75%;
  top: 50%
}

.face-6 > .dot:nth-child(5) {
  left: 25%;
  top: 75%
}

.face-6 > .dot:nth-child(6) {
  left: 75%;
  top: 75%
}

/* Set dot style */

.dot {
  position: absolute;
  
  width: 8px;
  height: 8px;
  
  border-radius: 50%;
  
  background-color: #fff;
  
  transform: translate(-50%, -50%);
}
/** Dice Before Rotaion **/

.bets_pop_opened{
  overflow:hidden;
}
.success_animation_sec {
  position: absolute;
  top: -50%;
  right: 0;
  left: 0;
}
/** Scroll Top **/
.landing_scrollto_dicesection {
  position: fixed;
  margin: auto;
  left: auto;
  right: 11px;
  top: 55%;
  /* top: 80px; */
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 9999;
}
.landing_scrollto_dicesection.hide_scroll{
  display: none !important;
}
#mouse-scroll span {
  display: block;
  width: 9px;
  height: 9px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: 2px solid var(--siteColor);;
  border-bottom: 2px solid var(--siteColor);;
  margin: 0 0 3px 2px;
}
#mouse-scroll .mouse {
  height: 61px;
  width: 14px;
  border-radius: 10px;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  border: 2px solid var(--siteColor);
  top: 170px;
  display: flex;
  align-items: center;
}
#mouse-scroll .down-arrow-1 {
  margin-top: 6px;
}
#mouse-scroll .down-arrow-1, 
#mouse-scroll .down-arrow-2, 
#mouse-scroll .down-arrow-3 {
  --webkit-animation: mouse-scroll 1s infinite; 
    animation: mouse-scroll 1s infinite
}
#mouse-croll .down-arrow-1 {
   -webkit-animation-delay: .1s;
   animation-delay: .1s; 
   -webkit-animation-direction: alternate;
   animation-direction: alternate;
}
#mouse-scroll .down-arrow-2 {
  -webkit-animation-delay: .2s; 
  animation-delay: .2s; 
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
#mouse-scroll .down-arrow-3 {
   -webkit-animation-delay: .3s;
   animation-delay: .3s;
   -webkit-animation-direction: alternate;
   animation-direction: alternate;
}

#mouse-scroll .mouse-in {
  height: 70%;
  width: 2px;
  display: flex;
  margin: 0;
  background: var(--siteColor);;
  position: relative;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
#mouse-scroll .mouse-in {
 -webkit-animation: animated-mouse 1.2s ease infinite;
 animation: animated-mouse 1.2s ease infinite;
}

@-webkit-keyframes animated-mouse {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
     opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@keyframes animated-mouse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes mouse-scroll {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  } 
}
@keyframes mouse-scroll {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@media(min-width:961px){
  .mobile_vector{
    display:none;
  }
  .landing_scrollto_dicesection,
  .landing_scrollto_dicesection.hide_scroll{
    display:none!important;
  }
}
/** Scroll Top **/
@media(max-width:480px){
  .kheloexch_landing_lft.rgt{
    padding:0 24px;
  }
  .exchcnt_top_section{
    padding:0 15px;
  }
}
@media(max-width:320px){
  #mouse-scroll .mouse {
    width: 11px;
  }
  #mouse-scroll span {
    width: 7px;
    height: 7px;
  }
}
.exch_dice_lists ul li.disabled{
  pointer-events: none;
  cursor:default;
}