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;
  vertical-align: baseline;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

img, fieldset, a img {
  border: none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  -webkit-appearance: none;
}

input[type="submit"],
button {
  cursor: pointer;
  background: none;
}

input[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

textarea {
  overflow: auto;
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input, button {
  margin: 0;
  padding: 0;
  border: 0;
}

div, input, textarea, select, button,
h1, h2, h3, h4, h5, h6, a, span, a:focus {
  outline: none;
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

ul, ol {
  list-style-type: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

a {
  text-decoration: none;
}

a,
button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}



/* all element style */
    html,body {
        position: relative;
        height: 100%;
    }

    body {
        background: var(--body-bg);
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 18px;
        color: #000;
        margin: 0;
        padding: 0;
        position:relative;
    }

    * {
        -webkit-transition-duration: 200ms;
        -o-transition-duration: 200ms;
        transition-duration: 200ms;
    }

    a, a:hover, a:focus {
        text-decoration: none;
        outline: 0 solid transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
        color: #100DD1;
        font-weight: 500;
    }

    .txt-center {
        text-align: center;
    }

    .px-2 {
        padding-right: 0.5rem!important;
        padding-left: 0.5rem!important;
    }

    .radius {
        border-radius: var(--radius) !important;
    }

    .icon {
        width: 36px;
        height: 36px;
        fill: red;
        vertical-align: middle;
    }

    .bold {
        font-weight: bold;
    }

    .txtcolor {
        background: var(--card-color);
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(0,0,0,0);
        -webkit-box-decoration-break: clone;
    }

/* swiper style */
    .swiper {
        width: 100%;
        height: 390px;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        overflow: hidden;
    }
    .swiper-slide div {
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        z-index: -1;
        transform: scale(1.5);
        height: 100%;
        width: 100%;
        filter: blur(15px);
    }
    .swiper-slide img {
        /* height: 100%; */
        /* width: 100%; */
        /* object-fit: contain; */
    }

/* icon color */
    .icon-whatsapp {
        fill: #38e057;
    }
    .icon-telegram {
        fill: #2da3db;
    }

/* small card */
    #contact-list{
        display: flex;
    }
    .small-card {
        border: 0 !important;
        -webkit-box-shadow: 0 0.15rem 0.5rem rgb(0 0 0 / 18%);
        box-shadow: 0 0.15rem 0.5rem rgb(0 0 0 / 18%);
        background-color: var(--card-bg);
        padding: var(--card-spacer-y) var(--card-spacer-x);
        display: flex;
        align-items: center;
        margin: 10px;
    }
    .small-card a {
        display: block;
    }

    .small-card span {
        display: block;
        font-size: 18px;
        line-height: 1;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .small-card.active, .small-card:hover, .small-card:focus {
        background-color: var(--card-active-color);
    }

/* isotope style */
    .grid-item {
        padding: 5px;
    }
    .grid-item .small-card {
        /* background-color: ; */
        display: block;
    }
    .grid-item img {
        width: 70%;
    }

/* preloader */
    #preloader{
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 100%;
        z-index: 99999;
        display: flex;
    }
    #preloader:before,
    #preloader:after{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 50%;
        height: 100%;
        z-index: -1;
        background-color: var(--preloader-color);
        -webkit-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    #preloader:after{
        left: auto;
        right: 0;
    }
    #preloader .loader_line{
        margin: auto;
        width: var(--preloader-line-width);
        height: 250px;
        position: relative;
        overflow: hidden;
        -webkit-transition: all 0.8s ease 0s;
        -o-transition: all 0.8s ease 0s;
        transition: all 0.8s ease 0s;
    }
    .loader_line:before{
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: var(--preloader-line-width);
        height: 0%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        background-color: #fff;
        -webkit-animation: lineheight 1000ms ease-in-out 0s forwards;
        -o-animation: lineheight 1000ms ease-in-out 0s forwards;
        animation: lineheight 1000ms ease-in-out 0s forwards;
    }
    .loader_line:after{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: var(--preloader-line-width);
        height: 100%;
        background-color: var(--preloader-line-color);
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
        -webkit-animation: lineround 1200ms linear 0s infinite;
        -o-animation: lineround 1200ms linear 0s infinite;
        animation: lineround 1200ms linear 0s infinite;
        animation-delay: 2000ms;
    }
    @keyframes lineheight{
        0%{
            height: 0%;
        }
        100%{
            height: 100%;
        }
    }
    @keyframes lineround{
        0%{
            -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
            -o-transform: translateY(-100%);
            transform: translateY(-100%);
        }
        100%{
            -webkit-transform: translateY(200%);
            -ms-transform: translateY(200%);
            -o-transform: translateY(200%);
            transform: translateY(200%);
        }
    }
    .preloaded .loader_line:after{
        opacity: 0;
    }
    .preloaded  .loader_line{
        opacity: 0;
        height: 100%!important;
    }
    .preloaded:before,
    .preloaded:after{
        -webkit-animation: preloadedzero 300ms ease-in-out 500ms forwards;
        -o-animation: preloadedzero 300ms ease-in-out 500ms forwards;
        animation: preloadedzero 300ms ease-in-out 500ms forwards;
    }
    @keyframes preloadedzero{
        0%{
            width: 50%;
        }
        100%{
            width: 0%;
        }
    }

/* spin game */
    #spingame {
        transition:all 1s;
    }
    #spingame_filter {
        display: flex;
        justify-content: center;
    }
    #spingame_filter div {
        padding: 5px 20px 5px 20px;
        border-radius: 300px;
        margin-right: 5px;
        margin-bottom: 10px;
        font-size: 18px;
        text-transform: uppercase;
        background: var(--card-color);
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(0,0,0,0);
        -webkit-box-decoration-break: clone;
    }
    #spingame_filter div:hover{
        -webkit-text-fill-color: rgb(255 255 255);
    }
    #spingame_filter div.selected {
        background: var(--card-active-color);
        -webkit-text-fill-color: rgb(255,255,255);
        color: #fff;
    }

/* lucky draw */
    .arrow{
        position: relative;
        left: 0;
        right: 0;
        margin:0 auto;
        top: 20px;
        width: 38px;
        height: 42px;
        border-radius: 50%;
        z-index: 10;
        background: var(--wheel-box-color);
        line-height: 100px;
        filter:drop-shadow(0 3px 5px rgba(0,0,0,0.4));
    }
    .arrow::after {
        position: absolute;
        display: inline-block;
        content: '';
        left: 0;
        right: 0;
        margin:0 auto;
        top: 24px;
        width: 0;
        height: 0;
        overflow: hidden;
        border-width: 40px 18px;
        border-style: solid;
        border-color: transparent;
        border-top-color: var(--wheel-box-color);
    }
    .wheel_box {
        -webkit-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-mask-image: -webkit-radial-gradient(white,black);
        overflow: hidden;
        position: relative;
        left: 0;
        right: 0;
        margin:0 auto;
        width: 600px;
        height: 600px;
        border-radius: 3000px;
        background: var(--wheel-box-color);
        padding: 1%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .5s;
    }
    .wheel_box:after {
        content: '';
        position: absolute;
        width: 1900px;
        height: 300px;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(231, 169, 125, .5), rgba(0, 0, 0, 0));
        transform: rotate(40deg);
        z-index:0;
        animation:wheel_light 1.5s linear infinite;
    }
    @keyframes wheel_light{
        0%{transform: rotate(0deg);}
        100%{transform: rotate(360deg);}
    }
    .wheel{
        width: 100%;
        height: 100%;
        border-radius: 3000px;  
        display: flex;
        align-items: center;
        justify-content: center;
        z-index:1;
    }
    #turntable{
        width: 96%;
        height: 96%;
        position: absolute;
        transition: all 10s cubic-bezier(0,.5,0,1);
    }
    .turntable-btn {
        width: 98px;
        height: 98px;
        border-radius: 50%;
        position: absolute;
        line-height: 98px;
        text-align: center;
        box-shadow: 0 3px 5px rgba(0,0,0,0.6);
        z-index: 300;
        background-image: url('../img/luckydraw/logo.jpg');
        background-repeat: no-repeat;
        background-size:cover;
        animation:smallbig 1s linear infinite;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    @keyframes smallbig{
        0%{transform: scale(1);}
        50%{transform: scale(1.2);}
        100%{transform: scale(1);}
    }
    .turntable-btn-bg {
        content: '';
        width: 158px;
        height: 158px;
        position: absolute;
        border-radius:1000px;
        box-shadow: 0 0px 5px 30px rgba(255,255,255,0.3) inset;
        transform: scale(0);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .turntable-btn-bg:before {
        content: '';
        width: 65px;
        height: 65px;
        border-radius:1000px;
        display: block;
        box-shadow: 0 0px 5px 15px rgba(255,255,255,0.3) inset;
    }
    .item{
        position:absolute;
        left:50%;
        top:1.2%;
        width:10px;
        height:97.6%;
        margin-left:-7px;
        z-index:2;
    }
    .item:before,.item:after{
        content:'';
        display:block;
        width:10px;
        height:10px;
        border-radius:10px;
        background:var(--sport-light-color);
        box-shadow:0 0 8px 1px var(--sport-light-color);
    }
    .item:after{
        position:absolute;
        bottom:0;
    }
    .item:nth-child(1){ transform:rotate(22.5deg); }
    .item:nth-child(2){ transform:rotate(45deg); }
    .item:nth-child(3){ transform:rotate(67.5deg); }
    .item:nth-child(4){ transform:rotate(90deg); }
    .item:nth-child(5){ transform:rotate(112.5deg); }
    .item:nth-child(6){ transform:rotate(135deg); }
    .item:nth-child(7){ transform:rotate(157.5deg); }
    .item:nth-child(8){ transform:rotate(180deg); }
    .item:nth-child(1):before{ animation:load 1s linear 3.2s infinite; }
    .item:nth-child(2):before{ animation:load 1s linear 3.0s infinite; }
    .item:nth-child(3):before{ animation:load 1s linear 2.8s infinite; }
    .item:nth-child(4):before{ animation:load 1s linear 2.6s infinite; }
    .item:nth-child(5):before{ animation:load 1s linear 2.4s infinite; }
    .item:nth-child(6):before{ animation:load 1s linear 2.2s infinite; }
    .item:nth-child(7):before{ animation:load 1s linear 2.0s infinite; }
    .item:nth-child(8):before{ animation:load 1s linear 1.8s infinite; }
    .item:nth-child(1):after{ animation:load 1s linear 1.6s infinite; }
    .item:nth-child(2):after{ animation:load 1s linear 1.4s infinite; }
    .item:nth-child(3):after{ animation:load 1s linear 1.2s infinite; }
    .item:nth-child(4):after{ animation:load 1s linear 1s infinite; }
    .item:nth-child(5):after{ animation:load 1s linear 0.8s infinite; }
    .item:nth-child(6):after{ animation:load 1s linear 0.6s infinite; }
    .item:nth-child(7):after{ animation:load 1s linear 0.4s infinite; }
    .item:nth-child(8):after{ animation:load 1s linear 0.2s infinite; }
    @keyframes load{
        0%{
            background: var(--sport-light-color);
        }
        50%{
            box-shadow:0 0 12px 9px var(--sport-light-light1-color);
            background: var(--sport-light-light2-color);
        }
        100%{
            background: var(--sport-light-color);
        }
    }

/* lucky poker */
    .luckypoker_content{
        display: flex;
    }
    .poker_box{
        width: 910px;
        border-radius: 20px;
        z-index: 2;
        position: relative;
        padding: 30px;
        margin:0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        border: 10px solid black;
        background: url('../img/luckypoker/table.jpg') no-repeat;
        background-size:cover;
    }
    .poker_card {
        display: inline-block;
        background: url('../img/luckypoker/poker0.png') no-repeat;
        height: 200px;
        width: 150px;
        margin: 10px 0;
        background-size:contain;
    }
    .poker_card:hover {
        /* transform: scale(1.1) rotateY(180deg); */
        transform: scale(1.1);
    }

/* lucky match */
    .coin_prize_box{
        width: 860px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }
    .coin_prize1{
        display: inline-block;
        background: url('../img/luckymatch/prize1.png') no-repeat;
        height: 100px;
        width: 170px;
        background-size:contain;
    }
    .coin_prize2{
        display: inline-block;
        background: url('../img/luckymatch/prize2.png') no-repeat;
        height: 100px;
        width: 170px;
        background-size:contain;
    }
    .coin_prize3{
        display: inline-block;
        background: url('../img/luckymatch/prize3.png') no-repeat;
        height: 100px;
        width: 170px;
        background-size:contain;
    }
    .coin_prize4{
        display: inline-block;
        background: url('../img/luckymatch/prize4.png') no-repeat;
        height: 100px;
        width: 170px;
        background-size:contain;
    }
    .coin_top_box{
        background: url('../img/luckymatch/top.png');
        height: 100px;
        width: 860px;
        background-size:contain;
        margin:0 auto;
    }
    .coin_box{
        width: 860px;
        position: relative;
        margin:-86px auto 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .coin_header{
        display: inline-block;
        background: url('../img/luckymatch/coinheader.png') no-repeat;
        height: 100px;
        width: 100px;
        margin: -28px -10px;
        background-size:contain;
    }
    .coins{
        display: inline-block;
        background: url('../img/luckymatch/coin.png') no-repeat;
        height: 100px;
        width: 100px;
        margin: -10px;
        background-size:contain;
        transform-origin: top center;
        animation: swing 2s linear infinite;
    }
    @keyframes swing {
        10% { transform: rotate(6deg); }
        20% { transform: rotate(-2deg); }
        30% { transform: rotate(3deg); }
        40% { transform: rotate(-1deg); }
        50%,100% { transform: rotate(0deg); }
    }
    .coin_win_box{
        display: none;
        background: url('../img/luckymatch/winbox.png') no-repeat;
        height: 280px;
        width: 500px;
        background-size:contain;
        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 30%;
        animation:smallbig 1s linear infinite;
        color: #f9cc4b;
        font-size: 34px;
        font-weight: bold;
        text-align: center;
        line-height: 300px;
    }
    .coins1{
        display: inline-block;
        background: url('../img/luckymatch/coin1.png') no-repeat;
        height: 100px;
        width: 100px;
        margin: -10px;
        background-size:contain;
    }
    .coins2{
        display: inline-block;
        background: url('../img/luckymatch/coin2.png') no-repeat;
        height: 100px;
        width: 100px;
        margin: -10px;
        background-size:contain;
    }
    .coins3{
        display: inline-block;
        background: url('../img/luckymatch/coin3.png') no-repeat;
        height: 100px;
        width: 100px;
        margin: -10px;
        background-size:contain;
    }
    .coins4{
        display: inline-block;
        background: url('../img/luckymatch/coin4.png') no-repeat;
        height: 100px;
        width: 100px;
        margin: -10px;
        background-size:contain;
    }

/* mark alert box */
    .mark{
        display: none;
        opacity: 0;
        transition: all 0.3s ease;
        position:fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-align:center;
        z-index:10;
        background-color: rgba(0,0,0,0.3);
    }
    .alert_text{
        color:var(--spin-color);
    }
    .alert_cfm{
        line-height:50px;
        width: 150px;
        height: 50px;
        color:var(--spin-color);
        background:var(--alert-box-btn-color);
        border-radius:20px;
        display: inline-block;
        cursor: pointer;
    }
    .alert_box{
        display: none;
        background: linear-gradient(var(--alert-box-color), var(--alert-box-color));
        background-position: 90% 80%;
        border:2px solid var(--alert-box-btn-color);
        border-radius:10px;
        margin: 35vh auto 0;
        width: 500px;
        color:white;
        font-size: 28px;
        line-height:80px;
        padding:10px 0;
        font-weight:bold;
    }
    .alert_box input{
        background:rgba(255,255,255,0.6);
        color:var(--spin-color);
        font-weight:bold;
        border-radius:10px;
        border:none;
        outline:none;
        width: 250px;
        height: 40px;
        font-size: 24px;
        display: block;
        text-align: center;
        line-height:40px;
        margin:0 auto;
    }
    .alert_box input::placeholder{
        color:var(--spin-color);
    }
    .alert_box input:focus{
        box-shadow: 0px 0px 5px 2px var(--radial1-color),0px 0px 5px 0px var(--radial1-color) inset;
    }

/* spin game setup */
    .spin_game_content{
        position: relative;
        display: none;

    }
    .spin_game_content_selected{
        display: block;
    }

#de-selector{
    width:40px;
    position:fixed;
    right:0;
    top:160px;
    padding:10px;
    padding-bottom:0;
    z-index:1000;
    background:#ccc;
    border-radius:5px 0 0 5px;
    -moz-border-radius:5px 0 0 5px;
    -webkit-border-radius:5px 0 0 5px;
}

#de-selector .opt{
    width:20px;
    height:20px;
    display:block;
    margin-bottom:10px;
    background:#ffffff;
    border-radius:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    cursor:pointer;
    border:solid 1px rgba(255,255,255,0);
}

#de-selector .opt:hover{
    border-color:#ffffff;
}

#de-selector .opt.tc1{background:#fff;}
#de-selector .opt.tc2{background:#000;}

#logo img {
    width: 200px;
    margin: -20px;
}

@media (max-width: 1000px) {
    .swiper {
        height: 250px;
    }
    a,.small-card span {
        font-size: 22px;
    }
    .grid-item img {
        width: 90%;
    }
    #games-list .small-card{
        margin: 0;
    }
    .container-md {
        max-width: 100%;
        padding: 5px;
    }
    #de-selector{
        transform: scale(1.5);
        transform-origin: right top;
    }
}