:root{
    --smaller-font: 0.7rem;
    --small-font: 0.87rem;
    --normal-font: 1rem;
    --medium-font: 1.1rem;
    --large-font: 1.7rem;
    --x-large-font: 2rem;
    --bg-color: #360644;
    --text-first: #fafafa;
    --text-second: #360644;
    --first-color: #fff900;
    --second-color: #fff900;
    --third-color: #fff900;
    --fourth-color: #fff900;
    --fifth-color: #fff900;
    --g1: #a512fa;
    --g2: #e9ab00
}
body{
    background:var(--bg-color);
    color:var(--text-first)
}
.logo img{
    width:19rem;
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-top:1.9rem;
    margin-bottom:1rem
}

.rtp-card{
    background:linear-gradient(to bottom, #5a046c 0%, #6b05a0 50%, #a512fa 100%);
    padding:.7rem;
    text-align:center;
    width:24rem;
    max-width:100%;
    height:100%;
    align-items:center;
    border-radius:5px;
    margin-bottom:.7rem;
    position:relative;
    z-index:1
}
.rtp-card-img{
    max-width:100%;
    width:29rem;
    display:block;
    margin-left:auto;
    margin-right:auto;
    border-radius:5px
}
.place-img-rtp{
    width:100%;
    padding:.5rem;
    position:relative;
    overflow:hidden;
    z-index:1;
    display:flex;
    justify-items:center;
    border-radius:5px;
    box-shadow:1px 0 4px 2px #b400ff inset
}
.place-img-rtp:hover{
    cursor:pointer
}
.btn-play{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:10;
    border:none;
    border-radius:5px;
    padding:.3rem;
    width:12rem;
    font-size:.6rem;
    font-weight:700;
    text-transform:capitalize;
    max-width:70%;
    border:2px solid #a200ff;
    background:linear-gradient(0deg,var(--g1) 0%,#5a046c 100%);
    color:var(--text-first)
}
.btn-play:hover{
    background:linear-gradient(0deg,#5a046c 0%,var(--g1) 100%)
}
.pola-wrapper{
    background:var(--text-second);
    padding:.9rem;
    width:14rem;
    max-width:100%;
    border-radius:5px;
    position:relative
}
.pola-wrapper h4{
    font-size:.9rem
}
.pola-wrapper h5{
    font-size:.7rem
}
.pola-wrapper h4 i,.pola-wrapper h5 i{
    color:var(--first-color)
}
.jam-wrapper{
    background:#131313;
    border-radius:50%;
    padding:.6rem
}
.table-pola{
    max-width:100%;
    width:9rem
}
.table-pola tr td{
    text-align:center;
    font-size:.7rem
}
.top-game,.hot-game{
    background-repeat:no-repeat!important;
    position:absolute;
    width:3rem;
    top:0;
    z-index:2;
    height:2.9rem;
    left:.4rem
}
.top-game{
    background:url(../images/top.gif)
}
.hot-game{
    background:url(../images/hot.gif)
}
.icon-providers{
    position:absolute;
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:2rem;
    top:.5rem;
    right:.5rem
}
.icon-providers img{
    width:1.7rem
}
.slider,.swiper{
    width:50rem;
    max-width:100%
}
.slider{
    padding:1rem
}
.slider-img{
    width:40rem;
    max-width:100%;
    display:block;
    margin-left:auto;
    margin-right:auto
}
.slider-wrapper{
    background:linear-gradient(0deg,var(--text-second) 0%,var(--text-second) 100%);
    height:100%;
    border-bottom:1px dashed #a200ff;
}
.running-text{
    background:var(--g1);
    font-weight:500;
    text-transform:uppercase;
    font-size:1rem;
    color:#ffffff;
    padding:.1rem
}
.icon-prov{
    background:linear-gradient(to bottom, #5a046c 0%, #6b05a0 50%, #a512fa 100%);
    display:flex;
    justify-content:center;
    position:relative;
    overflow:auto!important
}
.active, .item-prov:hover{
    background:linear-gradient(to bottom, #a512fa 0%, #6b05a0 50%, #5a046c 100%);
    color:#ffffff;
    border:none;
    font-weight:700;
    border-right:1px solid #a200ff;
}
.icon-card-bg{
    cursor:pointer;
    padding:.1rem!important;
    color:var(--text-second)
}
.icon-card-bg p{
    font-size:.73rem;
    font-weight:700;
    color:var(--text-second);
    text-align:center;
    white-space:nowrap;
    text-transform:uppercase
}
.img-prov{
    display:block;
    margin-right:auto;
    margin-left:auto
}
.item-prov{
    padding:0 .4rem;
    border-right: 1px solid #a200ff;
    border-left: 1px solid #a200ff;
}
.btn-credit{
    background:linear-gradient(to bottom, #5a046c 0%, #6b05a0 50%, #a512fa 100%);
    padding:.6rem;
    color:#ffffff;
    border:none;
    font-weight:700;
    border-right:1px solid #a200ff;
    border-left: 1px solid #a200ff;
}
.btn-credit:hover{
    background:linear-gradient(to bottom, #a512fa 0%, #6b05a0 50%, #5a046c 100%);
}
.nav-bottom{
    position:fixed;
    bottom:0;
    display:flex;
    z-index:11;
    overflow:hidden;
    width:100%;
    border-top:3px solid #a200ff;
}
.item-nav-bottom{
    background:linear-gradient(to bottom, #5a046c 0%, #6b05a0 50%, #a512fa 100%);
    color:#ffffff;
    font-weight:700;
    text-align:center;
    font-size:.8rem;
    padding:.3rem
}
.item-nav-bottom:hover{
    background:linear-gradient(to bottom, #a512fa 0%, #6b05a0 50%, #5a046c 100%);
    cursor:pointer
}
.item-nav-bottom p{
    margin:0;
    padding:0;
    margin-bottom:0
}
.btn-up{
    display:none;
    position:fixed;
    bottom:3.8rem;
    right:0;
    z-index:99;
    font-size:.9rem
}
.percent{
    height:19px;
    margin-top:10px!important;
    display:flex;
    overflow:hidden;
    font-size:.75rem;
    background-color:#e9ecef;
    position:relative;
    z-index:1;
    border-radius:5px;
    width:100%;
    margin:0 auto;
    position:relative
}
.percent p{
    z-index:15;
    position:absolute;
    text-align:center;
    width:100%;
    font-size:13px;
    top:-15px;
    font-weight:700;
    transform:translateY(14px);
    color:#000
}
.percent-bar{
    background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size:1rem 1rem;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction:column;
    flex-direction:column;
    -ms-flex-pack:center;
    justify-content:center;
    overflow:hidden;
    color:#fff;
    text-align:center;
    white-space:nowrap;
    transition:width .6s ease;
    -webkit-animation:progress-bar-stripes 2s linear infinite;
    animation:progress-bar-stripes 1s linear infinite;
    z-index:10
}
.good{
    background-color:#ffc107
}
.great{
    background-color:#28a745
}
.bad{
    background-color:#dc3545
}
.content-home{
    padding:1rem;
    margin-bottom:4rem;
    background:#360644;
    color:#fff;
}
@media(min-width:1200px){
    .container,.container-lg,.container-md,.container-sm,.container-xl{
        max-width:1100px!important
    }
}