*, ::after, ::before {
    box-sizing: border-box;
}
*, ::after, ::before, input[type="checkbox"], input[type="radio"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a{
    text-decoration: none;
    color:#fff;
    -o-transition: .3s ease;
    transition: .3s ease;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
}
a.active, a:hover {
    color: #ffcf00 !important;
}

body{
    font-family: 'Roboto', sans-serif;
    letter-spacing: .06em;
    line-height: 20px;
    font: 13px/1.4285714 !important;
    background: #030203;
    color:#fff;
    padding:0;
    margin:0;
}

.container{
    width: 100%;
    max-width:1140px;
    margin:0 auto;
    position:relative;
}
.topbar{
    color: #888;
    text-align: right;
    font-size: 11px;
    height: 20px;
}
.ul{
   margin:0;
   padding:0; 
}
.logo img{
    width:270px;
    float:left;
}
.menu{
    width:calc(100% - 550px);
    display: inline-block;
}
.menu ul{
    min-width:100%;
    text-align:right;
}
.menu ul li {
    list-style-type: none;
    padding:0 5px;margin:0;
    width:auto;
    display: inline-block;
    text-align: center;
}

.menu ul li a{
    color: #b0b0b0;
    text-transform: uppercase;
    font-weight: bolder;
}

.navbar{
    width: 100%;
    border-bottom:2px solid #f3c600;
    background: #404040;
        background: -moz-linear-gradient(top,#404040 0%,#000 42%,#000 100%);
        background: -webkit-gradient(left top,left bottom,color-stop(0%,#404040),color-stop(42%,#000),color-stop(100%,#000));
        background: -webkit-linear-gradient(top,#404040 0%,#000 42%,#000 100%);
        background: -o-linear-gradient(top,#404040 0%,#000 42%,#000 100%);
        background: -ms-linear-gradient(top,#404040 0%,#000 42%,#000 100%);
        background: linear-gradient(to bottom,#404040 0%,#000 42%,#000 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#404040',endColorstr='#000000',GradientType=0);
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index:999999999;
}

.footer{
    font-size: 10px;
    width:100%;
    border-top:2px solid #f3c600;
}
.footer .menu{
    width:calc(100% - 195px);
}
.footer .menu ul li{
    padding:0 10px;
}
.footer .logo img{
    width:195px;
    padding-top:24px;
}

.navigationMain {
    display:none;
}

.w100,.copy{
    width:100%;
}
.copy{
    color: #b0b0b0;
    float:left; margin: 3px 0 15px 0;
    font-size:12px;
}

#lightSlider2{
    margin:0 auto;
    max-width:1000px;
}
#lightSlider ul#slider li, #lightSlider ul#slider li img{
    width:100%;
}

.bottomSlide{
    width:75%;
    margin-bottom:30px;
    padding-top:50px;
}

.notFound{
    width:100%;
    color:#f3c600;
    text-align:center;
    padding:50px 0;
    margin-top:40px;
}
.promosi{
    width:100%;
    padding:50px 15px;
    margin-top:40px;
}
.promo{
    width:100%;
}

.promo ol{
    padding:15px;
    margin:0;
}
.red{
    color:red;
}
.putih{
    color:#fff;
}
.title{
    text-align:center;
    margin-bottom:30px;
}
h1,h2,h3,h4,h5,.emas{
  color:#f3c600;
  line-height: normal;
}
h2{
    font-size:18px;
}
h3{
    font-size:14px;
}
.bottomSlide:before, .listGame:before, .notFound:before, .promosi:before {
    position: absolute;
    content: "";
    background-image: url(/css/line.png);
    background-position: center;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
}

.garis{
    background-image: url(/css/line.png);
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 1px;
    margin:40px auto;
}
.listGame {
    width:100%;
    margin-top:40px;
    padding:15px 0;
    text-align: center;
}

.item-game{
    display:inline-flex;
}

.l-game{
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
}

.l-game:hover{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
}

.game .item-game img{
    -webkit-filter: drop-shadow(1px 1px 0 white) 
                    drop-shadow(-1px -1px 0 white);
    filter:drop-shadow(1px 1px 0 white) 
           drop-shadow(-1px -1px 0 white);
}

.h30{
    height:50px;
    padding:10px 0;
}

.footContact{
    float:right;
}
.footContact span,.h30 span{
    vertical-align: middle;
    font-size:16px;
}

.ml20{
    margin-left:20px;
}
.mt100{
    margin-top:100px;
}
.icon-wa, .icon-tg{
    width:30px;
    height:30px;
    background-repeat: no-repeat;
    -webkit-background-repeat: no-repeat;
    -moz-background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    display: inline-block;
}

.icon-wa{
    background-image: url(/img/wa.png);
}
.icon-tg{
    background-image: url(/img/telegram.png);
}

.wa-fixed{
    position:fixed;
    bottom:15px;
    left:15px;
    z-index: 41;
}

.wa-fixed .icon-wa{
    width:60px;
    height:60px;
    display:block;
    margin-top:15px;
}

.wa-fixed .icon-tg{
    width:60px;
    height:60px;
}

.login-button-container {
    width: 101px;
    position: relative;
    display: inline-block !important;
    font-family: 'Prompt';
    vertical-align: middle;
}

.login-button-container input {
    position: relative;
    resize: none;
    width: 100%;
    padding: 9px 10px;
    display: block;
    background: 0 0;
    border: none;
    outline: 0;
    z-index: 2;
    -o-transition: .3s color ease;
    transition: .3s color ease;
    color: #f3c600;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
.login-button-container input {
    position: relative;
    resize: none;
    width: 100%;
    padding: 9px 10px;
    display: block;
    background: 0 0;
    border: none;
    outline: 0;
    z-index: 2;
    -o-transition: .3s color ease;
    transition: .3s color ease;
    color: #f3c600;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

.login-button-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url(/css/btn_login.png) no-repeat;
    background-size: auto;
    background-size: 100% 100%;
    width: 106px;
    height: 40px;
}

marquee{
    padding:8px 0;
}

@keyframes sprite{from{background-position:0 0%;}to{background-position:0 100%;}}

@media (max-width: 768px) {
    body{
        padding-bottom:100px;
    }
    marquee{
        padding:8px;
    }
    
    .tombol{
        display:block;
        margin-bottom:10px;
    }
    .item-game{
        width:32%;
    }

    .item-game img{
        width:100%;
    }

    .topbar.h30{
        height:87px;
        text-align: center;
    }
    .logo{
        text-align: center;
        padding:5px;
    }
    .logo img{
        width:250px;
        float:none;
    }
    .menu, .wa-fixed {
        display:none;
    }
    .footer{
        display: none;
    }
    .navigationMain {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        background: #404040;
        background: -moz-linear-gradient(top,#404040 0%,#000 42%,#000 100%);
        background: -webkit-gradient(left top,left bottom,color-stop(0%,#404040),color-stop(42%,#000),color-stop(100%,#000));
        background: -webkit-linear-gradient(top,#404040 0%,#000 42%,#000 100%);
        background: -o-linear-gradient(top,#404040 0%,#000 42%,#000 100%);
        background: -ms-linear-gradient(top,#404040 0%,#000 42%,#000 100%);
        background: linear-gradient(to bottom,#404040 0%,#000 42%,#000 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#404040',endColorstr='#000000',GradientType=0);
        overflow-x: auto;
    }

    .navigationMain ul.list-menu {
        list-style: none;
        margin-bottom: 0;
        padding-left: 0;
        display: flex;
        justify-content: center;
    }

    .navigationMain li {
        display: inline-block;
        width: calc((100%)/4);
    }

    .navigationMain li .link-nav.active {
        color: #ffdc00;
    }

    .navigationMain li .link-nav {
        display: block;
        position: relative;
        text-align: center;
        padding: 5px 0;
        color: #fff;
        font-size: 12px;
        white-space: nowrap;
        text-decoration: none;
    }

    .navigationMain li .link-nav.active .img-icon.home {
        background-image: url("home_active.png");
    }
    .navigationMain li .link-nav .img-icon.home {
        background-image: url("home.png");
        left: -2px;
    }

    .navigationMain li .link-nav .img-icon.game {
        background-image: url("livechat.png");
    }
    .navigationMain li .link-nav.active .img-icon.game {
        background-image: url("game_active.png");
    }

    .navigationMain li .link-nav .img-icon.casino {
        background-image: url("live_casino.png");
    }
    .navigationMain li .link-nav.active .img-icon.casino {
        background-image: url("live_casino_active.png");
    }

    .navigationMain li .link-nav .img-icon.promosis {
        background-image: url("manual.png");
    }
    .navigationMain li .link-nav.active .img-icon.promosis {
        background-image: url("manual_active.png");
    }

    .navigationMain li .link-nav .img-icon {
        position: relative;
        top: 5px;
        width: 35px;
        height: 35px;
        background-size: 35px;
        background-position: 0;
        background-repeat: no-repeat;
    }
    .img-icon {
        width: 40px;
        height: 40px;
        display: inline-block;
        background-repeat: no-repeat;
    }

    .navigationMain li .link-nav > span {
        display: block;
    }

}