: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: #131313; --text-first: #fafafa; --text-second: #0a0a0a; --first-color: #D4AF37; --second-color: #B26600; --third-color: #996515; --fourth-color: #D4AF37; --fifth-color: #B26600; --g1: #D4AF37; --g2: #B26600; } .logo img { width: 19rem; display: block; margin-left: auto; margin-right: auto; margin-top: 1.9rem; margin-bottom: 1rem; } .rtp-card { background: linear-gradient(0deg, var(--first-color) 0%, var(--fifth-color) 100%); padding: 0.7rem; text-align: center; width: 24rem; max-width: 100%; height: 100%; align-items: center; border-radius: 5px; margin-bottom: 0.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: 0.5rem; position: relative; overflow: hidden; z-index: 1; display: flex; justify-items: center; border-radius: 5px; box-shadow: 1px 0 4px 2px #131313 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: 0.3rem; width: 12rem; font-size: 0.6rem; font-weight: 700; text-transform: capitalize; max-width: 70%; border: 2px solid var(--first-color); background: linear-gradient(0deg, var(--g1) 0%, var(--g2) 100%); color: var(--text-first); } .btn-play:hover { background: linear-gradient(0deg, var(--g2) 0%, var(--g1) 100%); } .pola-wrapper { background: var(--text-second); padding: 0.9rem; width: 14rem; max-width: 100%; border-radius: 5px; position: relative; } .pola-wrapper h4 { font-size: 0.9rem; } .pola-wrapper h5 { font-size: 0.7rem; } .pola-wrapper h4 i, .pola-wrapper h5 i { color: var(--first-color); } .jam-wrapper { background: #131313; border-radius: 50%; padding: 0.6rem; } .table-pola { max-width: 100%; width: 9rem; } .table-pola tr td { text-align: center; font-size: 0.7rem; } .pragmatic-icon, .idn-icon, .pgsoft-icon, .habanero-icon, .ttg-icon, .microgaming-icon, .nolimit-icon, .play-icon { background-repeat: no-repeat !important; position: absolute; width: 3rem; top: 0; height: 2.9rem; left: 0.4rem; z-index: 2; } .pragmatic-icon { background: url(../images/icons/pp.png); } .idn-icon { background: url(../images/icons/idn.png); } .pgsoft-icon { background: url(../images/icons/pg.png); } .habanero-icon { background: url(../images/icons/hb.png); } .ttg-icon { background: url(../images/icons/tg.png); } .microgaming-icon { background: url(../images/icons/mg.png); } .nolimit-icon { background: url(../images/icons/nolimit.png); } .play-icon { background: url(../images/icons/playstar.png); } .icon-providers { position: absolute; display: block; margin-left: auto; margin-right: auto; width: 2rem; top: 0.5rem; right: 0.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 var(--first-color); } .bg-theme { background: var(--bg-color); padding: 0.5rem; } .running-text { background: var(--g1); font-weight: 500; text-transform: uppercase; font-size: 1rem; color: var(--text-first); padding: 0.1rem; } .icon-prov { background: linear-gradient(0deg, var(--first-color) 0%, var(--g2) 100%); display: flex; justify-content: center; position: relative; overflow: auto !important; } .icon-card-bg { cursor: pointer; padding: 0.1rem !important; color: var(--text-first); } .icon-card-bg p { font-size: 0.73rem; font-weight: 700; color: var(--text-first); text-align: center; white-space: nowrap; text-transform: uppercase; } .img-prov { display: block; margin-right: auto; margin-left: auto; } .item-prov { padding: 0 0.5rem; } .btn-credit { background: linear-gradient(to right top, #ffffff, var(--first-color), var(--second-color), var(--fifth-color), #ffffff); box-shadow: 0 0 0 1px var(--first-color), inset 0 2px 0 0 var(--first-color), inset 0 0 0 2px var(--first-color), 3px 3px 3px 1px rgb(0 0 0 / 20%); padding: 0.6rem; color: var(--text-first); border: none; font-weight: 700; border-right: 1px solid var(--first-color); } .btn-credit:hover { background: linear-gradient(0deg, var(--g2) 0%, var(--g1) 100%); } .nav-bottom { position: fixed; bottom: 0; display: flex; z-index: 11; overflow: hidden; width: 100%; border-top: 3px solid var(--second-color); } .item-nav-bottom { background: linear-gradient(0deg, var(--g2) 0%, var(--first-color) 100%); color: var(--text-first); font-weight: 700; text-align: center; font-size: 0.8rem; padding: 0.3rem; } .item-nav-bottom:hover { background: linear-gradient(0deg, var(--first-color) 0%, var(--g2) 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: 0.9rem; } .percent { height: 19px; margin-top: 10px !important; display: flex; overflow: hidden; font-size: 0.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, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: #fff; text-align: center; white-space: nowrap; transition: width 0.6s ease; 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: var(--text-first); color: var(--text-second); } @media (min-width: 1200px) { .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1100px !important; } }