* {
    margin:0;
    box-sizing:border-box
}

body {
    font-family:Arial,Helvetica,sans-serif;
    background:#000;
    background:url('../../../royalewin/img/slot-v2/bg.jpg') !important;
    background-size:cover !important;
    height: unset;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden
}

a {
    text-decoration:none
}

.row {
    display:flex;
    align-items:center
}

.col {
    display:flex;
    flex-direction:column
}

.slot {
    width:1200px;
    margin:0 auto;
    padding:30px 0;
    align-items:stretch
}

::-webkit-scrollbar {
    width:4px
}

::-webkit-scrollbar-track {
    background:rgba(255,255,255,0.3)
}

::-webkit-scrollbar-thumb {
    background:#e4bd31
}

.slot .slot_nav {
    width:40%;
    margin-right:15px;
    position:relative
}

.slot .slot_nav::after {
    content:"";
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:2px;
    background:linear-gradient(transparent,#e4bd31)
}

.slot .slot_nav h1 {
    color:#fff;
    font-size:20px;
    margin-bottom:30px
}

.slot .slot_nav .more {
    position:absolute;
    bottom:10px;
    left:50%;
    color:#000;
    font-size:14px;
    font-weight:bolder;
    border:3px solid #b8860b;
    justify-content:center;
    padding:7px 12px;
    transform:translateX(-50%);
    background:linear-gradient(45deg,#fcfe57,#edd455);
    border-radius:999px;
    animation:bounce .5s infinite
}

.slot .slot_nav .more img {
    width:12px;
    margin-left:3px;
    filter:brightness(0)
}

.slot .slot_nav .provider_list {
    height:600px;
    overflow-x:hidden;
    overflow-y:auto;
    direction:rtl
}

.slot .slot_nav .provider_list .provider {
    flex-shrink:0;
    width:100%;
    border-radius:5px;
    overflow:hidden;
    filter:grayscale(0.9);
    transition:.2s;
    cursor:pointer;
    padding:0 15px 20px;
    position:relative
}

.slot .slot_nav .provider_list .provider img {
    width:100%
}

.slot .slot_nav .provider_list .provider:hover {
    transform:scale(1.03)
}

.slot .slot_nav .provider_list .provider:hover,.slot .slot_nav .provider_list .provider_active {
    filter:none
}

.slot .lobby {
    width: 60%;
    border: none;
}

.lobby_nav {
    color:#fff;
    border-radius:4px;
    padding: 12px;
    padding-bottom: 15px;
}

.lobby_nav .lobby_nav_item {
    border-radius:30px;
    padding:2px;
    font-size:12px;
    background:linear-gradient(45deg,#fcfe57,#edd455,#f9f6d3);
    margin-right:8px;
    font-weight:700;
    cursor:pointer
}

.lobby_nav .lobby_nav_item:hover,.lobby_nav .lobby_nav_active {
    background:linear-gradient(45deg,#fcfe57,#edd455,#f9f6d3);
    color:#000
}

.games_holder {
    width: 100%;
    height: 620px;
    overflow-y: auto;
    padding-right:15px;
}

.games {
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    grid-gap:12px;
    margin-bottom: 80px;
}

.games .game {
    width:100%;
    background:rgba(0,0,0,0.7);
    -webkit-animation:scale-in-top .5s cubic-bezier(0.25,0.46,0.45,0.94) both;
    animation:scale-in-top .5s cubic-bezier(0.25,0.46,0.45,0.94) both;
    border-radius:5px;
    overflow:hidden;
    position:relative;
    cursor: pointer;
}

.games .game img {
    width:100%;
    height:150px
}

.games .game .game_hover {
    position:absolute;
    height:100%;
    width:100%;
    background:rgba(0,0,0,0.8);
    z-index:2;
    align-items:center;
    transform:translateY(70%);
    transition:.3s;
}

.games .game .game_hover h1 {
    color:#fff;
    font-size:13px;
    padding:15px 20px;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    width:100%;
    text-overflow:ellipsis
}

/*.games .game .game_hover a {*/
    /*padding:5px;*/
    /*border-radius:3px;*/
    /*color:#fff;*/
    /*background:#b37a11;*/
    /*font-size:13px;*/
    /*font-weight:700;*/
    /*width:80%;*/
    /*text-align:center;*/
    /*margin-top:10px*/
/*}*/

/*.games .game .game_hover .play_btn {*/
    /*background:#e4bd31;*/
    /*color:#000*/
/*}*/

/*.games .game:hover .game_hover {*/
    /*transform:none;*/
    /*background:rgba(0,0,0,0.8)*/
/*}*/

@-webkit-keyframes scale-in-top {
    0% {
        -webkit-transform:none;
        transform:none;
        opacity:0
    }
    50% {
        opacity:1
    }
    100% {
        -webkit-transform:none;
        transform:none;
        opacity:1
    }
}

@keyframes scale-in-top {
    0% {
        -webkit-transform:none;
        transform:none;
        opacity:0
    }
    50% {
        opacity:1
    }
    100% {
        -webkit-transform:none;
        transform:none;
        opacity:1
    }
}

@-webkit-keyframes bounce {
    0%,100% {
        bottom:10px
    }
    50% {
        bottom:20px
    }
}

@keyframes bounce {
    0%,100% {
        bottom:10px
    }
    50% {
        bottom:20px
    }
}

.btn_inside {
    background:#000;
    padding:10px 20px;
    border-radius:30px
}

.btn_inside:hover {
    background:linear-gradient(45deg,#fcfe57,#edd455,#f9f6d3);
    padding:10px 20px;
    border-radius:30px
}

.lobby_nav_active .btn_inside {
    background:linear-gradient(45deg,#fcfe57,#edd455,#f9f6d3);
    padding:10px 20px;
    border-radius:30px;
    animation:glow 2s infinite;
    font-weight:bolder
}

@keyframes glow {
    0%,100% {
        box-shadow:0 0 0 0 #ffc600
    }
    50% {
        box-shadow:0 0 15px 7px #ffc600
    }
}

.slot .slot_nav .provider_list .provider img {
    width:100%
}

.new-icon {
    position:absolute;
    width:50px!important;
    right:13px;
    bottom:10px;
    animation:enlarge 1.5s infinite
}

@keyframes enlarge {
    0%,100% {
        transform:scale(1) rotate(25deg);
        filter:none
    }
    50% {
        transform:scale(1.3) rotate(25deg);
        filter:hue-rotate(-20deg) contrast(1.5) drop-shadow(0px 0px 3px orange)
    }
}