@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');

* { transition: all 0.3s; }

body { font-family: 'Nunito', sans-serif; line-height:1.2; font-size:15px; color:#ffffff; background: #000000 url("../img/bg.jpg")no-repeat; background-size: cover; background-position: top center;}

a { text-decoration: none; cursor:pointer; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; }

a:hover, a:focus, button:focus, button:hover { text-decoration: none; outline: none; }

img { max-width:100%;}

.max-container { max-width: 1180px; margin: 0 auto; padding: 0 10px; position: relative; overflow: hidden;}
.top-sec { text-align: center; position: relative; }
.title-wrap { position: relative }
    .title-wrap img { }

.topbg { position:absolute; top:0; left:0; width:100%; height:100%; mix-blend-mode:lighten; background-image:url(../img/effect.gif); background-repeat:repeat-x; background-size:80% auto; }
    .topbg img { max-width:none; width:50%;  }

.stepbox { display:flex; gap:12px; justify-content:center; align-items:center; position:relative; z-index:1 }

.mid-wrapper { position:relative; margin:2% 0; }

.tncbox { position:absolute; right:6%; top:0; width: 10% }

.jackpot { position:relative; display:inline-flex; justify-content:center; align-items:center; max-width:60%; bottom: 155px;}
.jackpot .total { position: absolute; left: 0%; bottom: 14%; width:100%; height:50%; font-size: 46px; font-weight: 700; line-height: normal; text-transform: uppercase; display: flex; align-items: center; justify-content:center}

.gamecon-wrapper { background-image:url(../img/base.png); background-repeat:no-repeat; background-size:cover; background-position:top center; margin:0 0 5%; margin-top: 10%; }
.gamecon { display:flex; flex-direction: column; align-items: center; margin-top: -13%; }
    .gamecon .prizes { width:100%; font-size:24px; color:#fdf3b6; position:relative }

.winner-top { display:flex; gap:0px; justify-content:center; align-items:center; max-width: 90%; }
    .winner-top div { position:relative }
    .winner-top .un {
    position: absolute;
    width: 100%;
    bottom: 27%;
    font-weight: bold;
    font-size: 22px;
}
.winner-top .td { position: absolute; width:100%; bottom:10%; }
    .winner-top span { position:absolute; width:100%; bottom:25%; left:0 }
    .winner-top span.s2 { font-size:18px }

.winner-con { position:relative; display:inline-flex; justify-content:center; align-items:center }
    .winner-con .bbg {  }
    .winner-con .conbox { position:absolute; width:80%; left:10%; top:20%; gap:6%; display:flex; justify-content:center; align-items:start }

.winnerbox { padding:3%; width:80%; margin: 0px auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; }
    .winnerbox .ttitle {  }
        .winnerbox .ttitle img { max-width:60% }
    .winnerbox .ccon { font-size:14px; color:#fdf3b6; display:flex; flex-direction:column; justify-content:start; align-items:center; gap:8px }
        .winnerbox .ccon h5 { font-weight: bold; }
        .winnerbox .ccon div { line-height:34px; }

.rules-wrapper { position:relative }
    .rules-wrapper .ttitle { position:relative; margin-bottom:-4.5%; text-align:center }
        .rules-wrapper .ttitle img { max-width:66% }
    .rules-wrapper .bbg { text-align: center; }
    .rules-wrapper .ccon { color:#4f2100; font-size:16px; position:absolute; top:18%; left:8%; width:82% }
        .rules-wrapper .ccon ul {}
        .rules-wrapper .ccon ul li { padding-bottom:12px }
    .rules-wrapper .ttable { border:2px solid #a47b3b; border-radius:8px; background:rgba(0,0,0,0.5); position:absolute; top:18%; width:76%; left:12%; padding:8px 30px }
        .rules-wrapper .ttable table { width:100% }
        .rules-wrapper .ttable table th,.rules-wrapper .ttable table td { text-align:center; padding:4px }
        .rules-wrapper .ttable table th { font-size:16px; font-weight:bold; color:#ffc10a }
        .rules-wrapper .ttable table td { font-size:14px; color:#fdf3b6 }
        .rules-wrapper .ttable table td small { font-size:10px; display:block }
    .rules-wrapper .gf { position:absolute; bottom:0; z-index:1 }
        .rules-wrapper .gf.g1 { left:0; max-width:20%; }
        .rules-wrapper .gf.g2 { right:0; max-width:16% }

.modal-rules { max-width:980px }
    .modal-rules .modal-content { background-color:transparent; border:0 }

.howimg { padding:0 8% }

@media only screen and (max-width: 980px) {

    .rules-wrapper .ccon { font-size:1.6vw; }
    .rules-wrapper .ccon ul { padding-left:5vw }
    .rules-wrapper .ccon ul li { padding-bottom:1.2vw }
    .stepbox { max-width: 80%; margin: 0px auto;}
    .gamecon-wrapper { background-size: 100% 105%; margin-top: 10%; }
    .tncbox {right: -3%; width: 12%;}
    .jackpot{ bottom: 90px; }
    .winner-top .un { bottom: 24%; font-size: 20px;}
    .winner-top .td { bottom: 6%; font-size: 14px;}

}

@media only screen and (max-width: 700px) {

    .jackpot { max-width:70%; bottom: 30px; }
    .jackpot .total { font-size:6vw }

    .winner-top { gap:0px }
    .gamecon {margin-top: 0%;}
    .gamecon .prizes { font-size:3vw }
    .winner-top span.s2 { font-size:2.4vw }
    .winner-top .un { font-size: 10px; bottom: 13%; }
    .winner-top .td { font-size: 8px; bottom: -3%; }
    .winner-top .mt-5 { margin-top: 0.5rem !important;}
    .winnerbox .ccon h5 { font-size: 12px; }
    .winnerbox .ccon { font-size:2.4vw }
    .winnerbox .ccon div { line-height:4.4vw }
    .gamecon-wrapper { background-size: 100% 104%; margin-top: 5%; }

}

@media only screen and (max-width: 580px) {

}