body{
  margin: 0px;
  --bg: #000;
  --menu: #000;
  --card: #111;
  --card2: #111;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  background-size: 100%;
  --color : #FDAB10;
  background: var(--bg);
  background-attachment: fixed;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  background-size: 100% 100%;
}

*{
box-sizing: border-box;
}
#app-v-page{
  height: 100%;
  width: 100%;
  font-family: 'Rajdhani', sans-serif;
  color: #fff;
  padding-bottom: 80px;
}
#app-v-page>.container{
padding: 20px;
}
#preloader{
position: fixed;
left: 0px;
width: 100%;
height: 100%;
top: 0px;
z-index: 999;
}
#preloader svg{width: auto !important; height: auto !important;position: absolute; left: 50%; transform: translate(-50%,-50%) scale(0.7); top: 50%;}
.outer,
.inner {
fill: none;
stroke: var(--color);
stroke-width: 8;
}

.outer{
opacity: .4;
}

.inner {
stroke-dasharray: 70 2000;
}

.container{
width: 900px;
margin: 0 auto;
}

div#app-v-page.is-fixed {
padding-top: 70px;
}

div#app-v-page.is-fixed header {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
background: #00000060;
backdrop-filter: blur(4px);
z-index: 999;
}
div#app-v-page.is-fixed header .logo{
left: 50%;
position: relative;
transform: translateX(-50%);
}

div#app-v-page.is-fixed header .links,
div#app-v-page.is-fixed header .social{
display: none;
}
header{
height: 70px;
background: var(--menu);
backdrop-filter: blur(0px);
display: flex;
transition: all ease 0.4s;
align-items: center;
}

header .logo{
width: 100px;
transform: translateX(0%);
left: 0%;
transition: all ease 0.4s;
}
header .logo img{
width: 100%;
}
header .links{
display: flex;
margin: 0px;
padding: 0px !important;
}
header .links a{
font-weight: bold;
font-size: 14px;
margin: 0 5px;
display: flex;
align-items: center;
justify-content: center;
background: var(--card);
padding: 7px 12px;
border-radius: 10px;
position: relative;
z-index: 1;
}
header .links a:before {
border-radius: 10px;
content: '';
width: 100%;
position: absolute;
left: 0px;
bottom: 0px;
z-index: -1;
height: 100%;
background: linear-gradient(90deg, transparent 0%, #39ff0053 100%);
}
header .links li:nth-child(2) a:before{
background: linear-gradient(90deg, transparent 0%, #a66300 100%);
}
header .links li:nth-child(3) a:before{
background: linear-gradient(90deg, transparent 0%, #ff000053 100%);
}
header .links a img{
margin-right: 10px;
}
header .links a small{
text-transform: uppercase;;
}
header .links a p{
margin: 0;
}
header .container{
display: flex;
align-items: center;
justify-content: space-between;
}
header .social{
display: flex;
align-items: center;
}

.discord{background: #5522FF;}
.telegram{background: #2277FF;}
.skype{background: #2244FF;}
.twitch{background: #3100D6;}
.instagram{background: #FF22BB;}
.youtube{background: #FF2222;}

header .social .social-button{
display: flex;
align-items: center;
margin-left: 10px;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
padding: 10px 15px;
border-radius: 10px;
z-index: 1;
position: relative;
flex-direction: column;
justify-content: center;
}
header .social .social-button:before {
border-radius: 10px;
content: '';
width: 100%;
position: absolute;
left: 0px;
bottom: 0px;
z-index: -1;
height: 100%;
background: linear-gradient(180deg, transparent 0%, #00000053 100%);
}
header .social .social-button svg{
margin-bottom: 5px;
width: 16px;height: 16px;
fill: #fff;
}
header .social .social-button path,
header .social .social-button svg{
fill: #fff;
}

svg{
width: 24px;
height: 24px;
}
li{list-style: none;}
a{
text-decoration: none;
color: #fff;
}

/* GRID */

.row{
display: flex;
flex-wrap: wrap;
margin: 0px -10px;
}
.col{
padding: 0 10px;
}
.row.banner1 .col { width: 100%;}
.row.banner2 .col { width: 50%;}
.row.banner3 .col { width: 33.3333%;}
.row.banner4 .col { width: 25%;}
.row.banner5 .col { width: 20%;}
.row.banner6 .col { width: 16.6666%;}
.row.banner7 .col { width: 14.285714285714286%;}

.normal .item{
background: var(--card);
border: 2px solid var(--site-color);
padding: 15px;
height: 170px;
margin: 10px 0;
cursor: pointer;
border-radius: 10px;
display: flex;
overflow: hidden;
z-index: 1;
position: relative;
color: #fff;
align-items: center;
justify-content: space-between;
flex-direction: row;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
.normal .item:before{
content: '';
width: 100%;
position: absolute;
left: 0px;
bottom: 0px;
opacity: .1;
z-index: -1;
height: 100%;
background: linear-gradient(90deg, transparent 50%, var(--site-color) 100%);
}
#app-v-page.mobile .normal .item{
  flex-direction: column;
}
.vip-slider.normal .item .text,
.vip-slider.normal .item .text *{
  font-size: 20px !important;
}
.normal .item .text span{
font-size: 16px;
font-weight: bold;
color: var(--site-color);
white-space: nowrap;
}
.normal .item .text{
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
height: 45px;
color: #fff;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 70%;
}
.normal .item .button{
background: var(--site-color);
text-align: center;
font-size: 12px;  
border-radius: 10px;
height: 35px;
font-weight: bold;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 5px;
}

.normal .item .top img{
width: 100px;
height: 50px;
object-fit: contain;
object-position: left;
}



  @-webkit-keyframes ticker {
    0% {
      transform: translate3d(0, 0, 0);
      visibility: visible;
    }
    100% {
      transform: translate3d(-100%, 0, 0);
    }
  }
  @keyframes ticker {
    0% {
      transform: translate3d(0, 0, 0);
      visibility: visible;
    }
    100% {
      transform: translate3d(-100%, 0, 0);
    }
  }
  .strip{
      position: relative;
      width: 100%;
      overflow: hidden;
      height: 55px;
      margin: 0px;
  }
  .row.strip h1 {
    left: 0px;
    position: absolute;
    z-index: 999;
    backdrop-filter: blur(10px);
    background: var(--card);
    padding: 5px 35px 5px 15px;
    top: 0px !important;
    margin: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    clip-path: polygon(0 0, 100% 0, 83% 100%, 0% 100%);
  }
  
  .row.strip h1 svg {
    fill: #fff;
    margin-right: 5px;
  }
  .ticker-wrap {
    bottom: 0;
    width: 100%;
    position: absolute;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 100%;
    background: var(--card);
    padding-left: 100%;
    left: 0px;
    box-sizing: content-box;
  }
  .ticker-wrap .ticker:hover{
    animation-play-state: paused;
  }
  .ticker-wrap .ticker {
    white-space: nowrap;
   display: flex;
    padding-right: 100%;
    box-sizing: content-box;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker;
    animation-name: ticker;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
  }
  .ticker-wrap .ticker__item {
    padding: 0 2rem;
    color: white;
    font-size: 15px !important;
    color: white;
    display: flex;
  }
  .ticker-wrap .ticker__item a{
      display: flex;
      overflow: hidden;
      align-items: center;
      display: flex;
      background: #00000029;
      padding: 5px 15px;
      position: relative;
      border-radius: 35px;
      margin: 0 10px;
  }
  .ticker-wrap .ticker__item a .button{
      background: var(--site-color);
      text-align: center;
      border-radius: 10px;
      height: 35px;
      font-size: 14px;
      font-weight: bold;
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 15px;
  }
  .ticker-wrap .ticker__item a:before {
      content: '';
      width: 100%;
      position: absolute;
      left: 130px;
      bottom: 0px;
      z-index: -1;
      height: 100%;
      background: linear-gradient(90deg, transparent 0%, var(--site-color) 100%);
  }
  


.vip .item{
background: var(--card);
border: 2px solid var(--site-color);
padding: 20px;
margin: 10px 0;
border-radius: 10px;
display: flex;
overflow: hidden;
z-index: 1;
position: relative;
cursor: pointer;
flex-direction: column;
}
.vip .item .vip-img {
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
}
.vip .item:before{
content: '';
width: 100%;
position: absolute;
left: 0px;
bottom: 0px;
z-index: -1;
height: 100%;
background: linear-gradient(90deg, transparent 0%, var(--site-color) 100%);
}
.vip .item .text{
text-transform: uppercase;
font-size: 14px;
line-height: 16px;
font-weight: bold;
}
.vip .item .text small{
font-weight: 500;
opacity: .5;
}
.vip .item .button{
background: var(--site-color);
text-align: center;
border-radius: 10px;
height: 35px;
font-size: 12px;
font-weight: bold;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 5px;
}

.vip .item .left img{
object-position: left;
width: 135px;
height: 50px;
object-fit: contain;
}


.vip .item .vip{
width: 70px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--site-color);
font-weight: bold;
right: 20px;
top: 25px;
position: absolute;
}

.vip .item svg{
width: 16px;
height: 16px;
position: relative;
top: -1px;
margin-right: 3px;
}
.vip .item path{
fill: var(--site-color);
}




.diamond .item{
background: var(--card);
border: 2px solid var(--site-color);
padding: 20px 30px;
margin: 10px 0;
border-radius: 10px;
display: flex;
overflow: hidden;
z-index: 1;
position: relative;
cursor: pointer;
align-items: center;
justify-content: space-between;
}


.diamond .item .content{
display: flex;
align-items: center;
}

.diamond .item .icon{
margin-right: 20px;
height: 60px;
}
.diamond .item .icon img{
width: 60px;
width: 60px;
}
.diamond .item:before{
content: '';
width: 100%;
position: absolute;
right:  -50%;
bottom: 0px;
z-index: -1;
height: 100%;
background: linear-gradient(90deg, transparent 0%, var(--site-color) 100%);
}
.diamond .item .text{
text-transform: uppercase;
font-size: 16px;
line-height: 20px;
font-weight: bold;
white-space: nowrap;
}
.diamond .item .text small{
font-weight: 500;
opacity: .5;
}
.diamond .item .button{
background: var(--site-color);
text-align: center;
border-radius: 10px;
height: 45px;
font-size: 14px;
font-weight: bold;
width: 130px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 5px;
}

.diamond .item .left img{
width: 140px;
height: 50px;
object-fit: contain;
}


.diamond .item .diamond{
width: 70px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--site-color);
font-weight: bold;
right: 20px;
top: 25px;
position: absolute;
}

.diamond .item svg{
width: 16px;
height: 16px;
position: relative;
top: -1px;
margin-right: 3px;
}
.diamond .item path{
fill: var(--site-color);
}

@media (max-height:620px){
.fix-side .top,.fix-side .bottom{
  display: none;
}
}
.fix-side{
position: fixed;
width: 160px;
background: var(--card);
height: 80%;
top: 0px;
bottom: 0;
transform: translateY(-50%);
top: 50%;
margin-top: 20px;
border-radius: 10px;
display: flex;
z-index: 999;
align-items: center;
justify-self: center;
border: 1px solid var(--site-color);
}

.fix-side:before{
border-radius: 10px;
content: '';
width: 100%;
position: absolute;
left: 0px;
bottom: 0px;
z-index: -1;
height: 50%;
background: linear-gradient(180deg, transparent 0%, #00000053 100%);
}
.fix-side.left{left: 20px;}
.fix-side.right{right: 20px;}

.fix-side .bottom img,
.fix-side .top img{
width: 80px;
}

.fix-side .top{
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
}
.fix-side .bottom{
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
}

.fix-side .vip{
width: 70px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--site-color);
font-weight: bold;
}
.fix-side .center{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
}
.fix-side .center .stars img{
transform: rotate(0deg);
height: auto;
width: 60px;
}
.fix-side .center .promo{
text-align: center;
font-size: 20px;
font-weight: bold;
line-height: 20px;
margin-bottom: 10px;
width: 70%;
}
.fix-side .center .promo span{
font-size: 24px;
color: var(--site-color);
}
.fix-side .center img{
width: 170px;
transform: rotate(-90deg);
height: 230px;
object-fit: contain;
}
.fix-side svg{
width: 16px;
height: 16px;
position: relative;
top: -1px;
margin-right: 3px;
}
.fix-side path{
fill: var(--site-color);
}

.fix-side .button{
background: var(--site-color);
text-align: center;
border-radius: 10px;
height: 35px;
font-size: 14px;
font-weight: bold;
width: 70%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 5px;
}

#swiper, #swiper img{
border-radius: 10px;
overflow: hidden;
}


.bottom-fixed{
width: 860px;
height: 90px;
z-index: 99;
background: var(--card);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
position: fixed;
bottom: 0px;
left: 50%;
padding: 0px 40px;
border: 1px solid #ccc;
border-bottom: 0px;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-between;
}

.bottom-fixed:before{
content: '';
width: 100%;
position: absolute;
left: 0px;
bottom: 0px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
z-index: -1;
height: 100%;
background: linear-gradient(90deg, transparent 0%, #00000053 100%);
}

.bottom-fixed .center,
.bottom-fixed .logo{
position: relative;
top: 5px;
}
.bottom-fixed .button{
position: fixed;
right: 10px;
cursor: pointer;
top: 10px;
}
.bottom-fixed .center{
text-align: center;
font-size: 12px;
line-height: 20px;
}
.bottom-fixed .center h1{
font-size: 25px;
margin: 0px;
}
.bottom-fixed .center p{
font-size: 20px;
margin: 5px;
text-transform: uppercase;
font-weight: 900;
}
.bottom-fixed a{
padding: 12px 7px;
width: 120px;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
border-radius: 10px;
font-size: 12px;
}
.bottom-fixed .button svg{
width: 30px;
height: 30px;
stroke: #fff;
}

@media (max-width:996px) {
  .diamond .item .text{
    white-space: normal !important;
    width: 160px !important;
  }
.bottom-fixed{
  width: 100% !important;
}
.bottom-fixed p{
  font-size: 12px !important;
}
.bottom-fixed img{
  width: 80px !important;
}
}

.overlay{
animation: fadeIn 1s alternate forwards;
opacity: 0;
position: fixed; width: 100%; height: 100%; background: #000000a3; left: 0px; top: 0px; z-index: 999999; backdrop-filter: blur(10px);
}





.notify-fixed{
width: 300px;
height: auto;
border-radius: 10px !important;
z-index: 9999999;
background: var(--card);
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 0 var(--site-color);
padding: 20px 20px;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
animation: fadeIn 1s alternate forwards;
opacity: 0;
}

.notify-fixed:before{
content: '';
width: 100%;
position: absolute;
left: 0px;
bottom: 0px;
border-radius: 10px !important;
z-index: -1;
height: 100%;
background: linear-gradient(90deg, transparent 0%, #00000053 100%);
}

.notify-fixed .center,
.notify-fixed .logo{
position: relative;
top: 5px;
}
.notify-fixed .button{
position: absolute;
right: 10px;
cursor: pointer;
top: 10px;
}
.notify-fixed .center{
text-align: center;
font-size: 12px;
align-items: center;
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.notify-fixed .center h1,.notify-fixed .center p{
font-size: 18px;
font-weight: 900;
margin: 0px 2px !important;
}
.notify-fixed img{
width: 170px;
}
.notify-fixed a{
    width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}
.notify-fixed .button.primary{
  position: static;
padding: 7px 7px;
width: 170px;
color: #000;
font-weight: bold;
text-decoration: none;
text-align: center;
border-radius: 10px;
font-size: 17px;
}
.notify-fixed .button svg{
width: 24px;
height: 24px;
stroke: #fff;
}
@keyframes fadeIn {
from{
  opacity: 0;
}
to{
  opacity: 1;
}
}
@keyframes boxShadow {
from{
  box-shadow: 0px 0px 0;
}
to{
  box-shadow: 0px 0px 30px;
}
}
#app-v-page.mobile #swiper, #app-v-page.mobile #swiper img{
border-radius: 0px;
}
#app-v-page.mobile #swiper{
margin: -5px;
margin-bottom: 0px;
}
#app-v-page.mobile .row.diamond .col{
width: 100% !important;
flex-basis: 100% !important;
}
#app-v-page.mobile .row.diamond .item{
padding: 10px 15px;
}
#app-v-page.mobile .container{
width: 100% !important;
}
#app-v-page.mobile .fix-side{
display: none;
}
#app-v-page.mobile .row.banner4 .col {
width: 50%;
}

#app-v-page.mobile .row.banner7 .col {
width: 33.333333%;
}
#app-v-page.mobile .normal .item{
height: 180px;
margin: 5px 0;
padding: 10px 10px ;
}
#app-v-page.mobile .normal .item .text{
font-size: 13px;
}
#app-v-page.mobile .normal .item .text span{
font-size: 13px;
}
#app-v-page.mobile .normal .item .button{
width: 100% !important;
}
#app-v-page.mobile header .links a {
margin: 5px 0;
}
#app-v-page.mobile header .links a p{
font-size: 12px;
}
#app-v-page.mobile header .links a small{
display: none;
}
#app-v-page.mobile .col{
padding: 0 5px;
}
#app-v-page.mobile .normal .item .top img{
width: 80px;
height: 30px;
}
#app-v-page.mobile .item .button{
width: 90px !important;
}
#app-v-page.mobile .vip .item .vip{
right: 13px;
top: 10px;
position: absolute;
font-size: 12px;
width: 50px;
height: 22px;
transform: scale(0.8) !important;
}
#app-v-page.mobile .vip .item .vip-img{
top: 80px;
transform: none;
}
#app-v-page.mobile .vip .item .vip-img img{
width: 55px;
}

#app-v-page.mobile .vip .item .left img{
width: 80px;
height: 30px;
object-fit: contain;
}
.diamond .item .icon svg{
width: 40px;
height: 75px;
}
#app-v-page.mobile .diamond .item .left img{
width: 130px;
height: 40px;
}
#app-v-page.mobile .vip .item{
padding: 10px 15px;
border-radius: 20px;
}
#app-v-page.mobile .vip .item .text{
font-size: 13px !important;
}
#app-v-page.mobile .vip .item .text{
height: 40px;
}
#app-v-page.mobile header{
height: 160px;
}
#app-v-page.mobile header .container{
flex-direction: column;
}
#app-v-page.mobile header .social .social-button{
font-size: 0px;
}
#app-v-page.mobile header .social .social-button svg{ 
margin: 0px;
}
#app-v-page.mobile.is-fixed header{
height: 50px !important;
background: #0f174e !important;
}
#app-v-page.mobile.is-fixed header .container{
flex-direction: row !important;
}



@media(max-width:1400px){
.vip .item .text{
  font-size: 11px !important;
}
.vip .item .vip{
  transform: scale(0.6);
  right: 0px;
}
.container{
  width: 910px;
}
.row.banner7 .col{
  width: 20%;
}
}
@media(max-width:1200px){
.bottom-fixed{ 
  zoom: 80%;
  padding-left: 15px !important;
  bottom: -5px;
}
.fix-side{
  display: none;
}
}


#app-v-page .footer-c {
margin-top: 20px;
display: flex;
width: 100%;
justify-content: space-between;
}
#app-v-page .footer-c .licence {
display: flex;
font-size: 11px;
align-items: center;
justify-content: center;
}
#app-v-page .footer-c .licence img {
margin-left: 10px;
width: inherit !important;
height: 40px;
margin-top: -5px;
}
#app-v-page .footer-c .cpyrght {
display: flex;
font-size: 11px;
opacity: 0.5;
color: #fff;
align-items: center;
justify-content: center;
text-decoration: none;
}
#app-v-page .footer-c .cpyrght img {
margin-left: 10px;
width: inherit !important;
height: 15px;
}

#app-v-page.mobile header .links{
margin: 5px 0 !important;
padding: 0 5px !important;
}


@media (max-width:1400px){
  .vip .item .vip-img img {
    width: 40px;
    }
}

#app-v-page.mobile .vip .item{

}
#app-v-page.mobile .vip .item .vip-img{
  top: 5px !important;
  right: 5px !important;
}
#app-v-page.mobile .vip .item .vip-img img{
  width: 30px !important;
}
#app-v-page.mobile .vip .item small{
  display: none;
}
.vip .item {
  padding: 5px 20px !important;
  zoom: 100% !important;
  border-radius: 21px !important;
}

.vip .item .vip-img img {
  width: 40px !important;
}

.vip .item .vip-img {
  top: 10px !important;
  transform: none !important;
  right: 10px !important;
}

.vip .item .button {
  position: absolute !important;
  right: 0px !important;
  bottom: 0px !important;
  padding: 0px !important;
  width: 80px !important;
  height: 23px !important;
}