html{
height: 100%;
width: 100%;
margin: 0;
-webkit-overflow-scrolling:touch;
}
body{
margin: 0;
color: #000000;
font-size: 14px;
line-height: 1.2;
font-family: "Montserrat", sans-serif;
position: relative;
width: 100%;
-webkit-overflow-scrolling: touch;
background: #16181a;
min-width: 320px;
}
html.search-lock,
html.modal-lock{
overflow-y: scroll;
scrollbar-gutter: stable;
}
body.search-open,
body.modal-open{
position: fixed;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
}
h1, h2, h3, h4, h5, h6{
margin: 0 0 30px 0;
font-weight: 700;
color: #fff;
line-height: 1.2;
}
h1{
font-weight: 700;
font-size: 42px;
}
h2{
font-size: 38px;
}
h3{
font-size: 32px;
}
h4{
font-size: 28px;
}
h5{
font-size: 24px;
}
h6{
font-size: 20px;
}
p {
font-weight: 400;
font-size: 16px;
color: #fff;
line-height: normal;
margin: 0 0 20px 0;
}
p strong{
font-weight: 500;
}
p a{
text-decoration: underline;
text-decoration-skip-ink: none;
color: #fff;
}
p a:hover{
text-decoration: none;
}
p:last-child{
margin-bottom: 0px;
}
img{
display: block;
max-width: 100%;
}
a {
outline: none;
text-decoration: none;
}
ul{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.activatebg{position:fixed;display:flex;align-items:center;justify-content:center;top:0;bottom:0;left:0;right:0;background:rgb(0 0 0 / .7);width:100%;height:100%;overflow:hidden;z-index:999}
.activatepopup{position:absolute;display:block;width:100%;max-width:304px;margin:auto;background:#282a2d;border-radius:10px;padding:25px 30px;}
.activateh1{display:block;font-size:20px;color:#fff;line-height:26px;text-align:center;margin:0 auto 20px}
.activatepopup p{text-align:center;color:green;font-size: 14px;font-weight: 700}
.activatepopup p b {color:#cc4141; font-weight: 700}
.bonus-section__card-text h3 {
font-size: 18px;
}
.twofablock.restricted p {
font-size: 14px;
}
.twofablock.restricted p a {
color: #cc4141;
}
.nogames {
font-size: 14px;
}
.twofablock {
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 320px;
margin: 45px auto 50px;
justify-content: center;
align-items: center;
text-align: center;
}
.twofablock h1 {
font-size: 24px;
margin: 0 auto 10px;
}
.twofaerr {
width: 100%;
font-size: 14px;
margin: 0 auto 5px;
}
.twofaerr b {
color: #cc4141;
}
.minwidth142 {
min-width: 142px;
}
.baltext {
font-size: 14px;
}
.cursorp {
cursor: pointer;
}
.errorreg {
display: none;
text-align: center;
font-weight: 700;
font-size: 12px;
color: #ff0000;
margin: -10px auto 15px;
}
.cpointer {
cursor: pointer;
}
.disabled,
:disabled,
.disabled,
[disabled] {
cursor: not-allowed !important;
}
.gap10 {
gap: 10px; }
.flexcenter {
display: flex;
justify-content: center;
align-items: center;
}
.walletmodal__settings-qr canvas {width: 144px;height:144px;}
#step1success { display: none; }
#ph_code {
width: auto;
border-radius: 8px;
height: 40px;
transition: 0.2s;
padding: 0 15px;
font-weight: 600;
font-size: 10px;
line-height: 12px;
color: #333;
height: 27px;
max-width: 99px;
margin-right: 10px;
}
.margb10 {
display: block;
margin: 0 0 10px;
}
#ph_error {
display: block;
margin: 10px auto 0;
}
#ph_error b {
font-size: 12px;
color: #cc4141;
}
.acc.otherway {
min-width: 54px;
}
.walletmodal__account-list img {
width: 30px;
height: 30px;
}
.walletmodal__account-list .font12{
font-size: 12px;
}
.walletmodal__profile-date .select__field.input__text.walletmodal__input-text {
padding: 0 5px;
}
.walletmodal__profile-date .ss-values .ss-single {
max-width: 100%;
}
.nohistory,
.norefs {
font-size: 12px;
font-weight: 700;
}
.affstattable,
.myhistorytab {
background: #2e3336;
color: #fff;
font-size: 12px;
border-spacing: 0;
padding: 5px;
width: 100%;
border-radius: 8px;
margin: 10px auto 0;
text-align: center;
}
.myhistorytab th,
.affstattable th,
.myhistorytab td,
.affstattable td {
padding: 5px;
}
.cancelbut {
cursor: pointer;
}
.red {
color: #cc4141;
}
h1.fs {
font-size: 16px;
margin: 10px auto 5px;
}
.freespinstxt {
font-size: 12px;
text-align: center;
margin: 0 auto;
}
.historylimit {
font-size: 12px;
margin: 10px auto 0px;
text-align: center;
color: #cc4141;
font-weight: 700;
}
hr {
width: 100%;
height: 1px;
margin: 10px 0 0;
}
.myhistorytab .status {
display: flex;
gap: 5px;
justify-content: center;
align-items: center;
font-weight: 700;
}
.myhistorytab .status img {
width: 16px;
height: 16px;
}
.games-section__title img {
width: 26px;
height: 26px;
}
/* End Total css ====*/
.games-section__slider , .hero__slider{overflow: hidden;}
.hero__slider .swiper-wrapper {display: flex;}
.hero__slider .swiper-slide{flex: 0 0 100%;width: 100%;}
.hero__item {min-height: 320px;overflow: hidden;}
.hero__item img, .hero__item picture {max-width: 100%;height: auto;display: block;}
.games-section__slider .swiper-slide {width: 157px;}
.__jivoDesktopButton, .__jivoMobileButton {
display: none !important
}
.login {
cursor: pointer;
}
.text h2, .text h3 {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 30px 0;
font-weight: 700;
font-size: 18px;
line-height: normal;
color: #fff;
}
.container{
max-width: 1190px;
margin: 0 auto 0;
padding: 0 15px;
}
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.b-container{
position: relative;
min-height: 100vh;
max-width: 1920px;
margin: 0 auto 0;
padding-top: 78px;
}
/* -------------- language -------------- */
.header__language{
position: relative;
z-index: 25;
flex: 0 0 116px;
width: 116px;
color: #fff;
font-size: 10px;
font-weight: 600;
line-height: 1;
}
.header-language__toggle,
.header-language__option{
display: flex;
align-items: center;
width: 100%;
height: 34px;
padding: 0 10px;
border-radius: 8px;
background: #2e3336;
color: #fff;
font: inherit;
line-height: 1;
text-align: left;
transition: background 0.2s ease, opacity 0.2s ease;
}
.header-language__toggle{
gap: 6px;
}
.header-language__toggle:hover,
.header-language__toggle:focus-visible{
background: #373d41;
}
.header-language__flag{
width: 14px;
height: 14px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 14px;
overflow: hidden;
}
.header-language__code,
.header-language__option-code{
display: none;
}
.header-language__menu > button:first-child {
border-radius: 8px 8px 0 0;
}
.header-language__menu > button:last-child {
border-radius: 0 0 8px 8px;
}
.header-language__menu{
position: absolute;
top: 0;
left: 0;
display: flex;
width: 116px;
height: 132px;
padding: 0;
border-radius: 8px;
background: #2e3336;
flex-direction: column;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.18s ease, visibility 0.18s ease;
}
.header__language.is-open .header-language__menu{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.header__language.is-open .header-language__toggle{
opacity: 0;
}
.header-language__option{
position: relative;
gap: 6px;
height: 34px;
min-height: 34px;
padding: 0 10px;
border-radius: 0;
}
.header-language__option:hover,
.header-language__option:focus-visible,
.header-language__option.is-active{
background: rgba(255, 255, 255, 0.08);
}
.header-language__option:focus-visible{
outline: none;
}
@media (min-width: 1199px){
.games-section__slider .swiper-slide {
width: 157px;
margin-right: 10px;
}
.win-card {
max-width: 122px;
}
}
@media (max-width: 767px){
.header__language{
flex-basis: 55px;
width: 55px;
}
.header-language__toggle{
height: 30px;
gap: 5px;
border-radius: 5px;
}
.header-language__menu > button:first-child {
border-radius: 5px 5px 0 0;
}
.header-language__menu > button:last-child {
border-radius: 0 0 5px 5px;
}
.header-language__flag{
width: 16px;
height: 16px;
flex-basis: 16px;
}
.header-language__label,
.header-language__option-label{
display: none;
}
.header-language__code,
.header-language__option-code{
display: inline;
}
.header-language__menu{
width: 55px;
height: 120px;
border-radius: 5px;
}
.header-language__option{
height: 30px;
gap: 5px;
}
}
/* -------------- page index -------------- */
.page{
flex: 1;
min-width: 0;
transition: 0.3s;
}


/* -------------- sidebar -------------- */
.sidebar{
position: fixed;
top: 0;
left: 0;
width: 280px;
height: 100dvh;
background: #1c1f22;
flex-shrink: 0;
display: flex;
flex-direction: column;
z-index: 60;
transform: translateX(-100%);
transition: 0.3s;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: #4a5156 transparent;
}
.sidebar.active{
transform: translateX(0);
}
.sidebar::-webkit-scrollbar{
width: 4px;
}
.sidebar::-webkit-scrollbar-track{
background: transparent;
}
.sidebar::-webkit-scrollbar-thumb{
background: #4a5156;
border-radius: 20px;
}
.sidebar::-webkit-scrollbar-thumb:hover{
background: #626a70;
}
.sidebar__close{
position: absolute;
top: 20px;
right: 20px;
display: flex;
width: 34px;
height: 34px;
border-radius: 8px;
background: #2e3336;
z-index: 2;
}
.sidebar__close:before,
.sidebar__close:after{
position: absolute;
top: 50%;
left: 50%;
content: "";
width: 14px;
height: 2px;
background: #fff;
border-radius: 2px;
}
.sidebar__close:before{
transform: translate(-50%, -50%) rotate(45deg);
}
.sidebar__close:after{
transform: translate(-50%, -50%) rotate(-45deg);
}
.sidebar__nav{
display: flex;
flex-direction: column;
gap: 20px;
padding: 28px 28px 43px;
}
.sidebar__nav:not(:first-child){
border-top: 1px solid #333;
padding-top: 40px;
}
.sidebar__link{
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 12px;
line-height: 1;
color: #fff;
text-decoration: none;
transition: 0.2s;
}
.sidebar__link:hover,
.sidebar__link.active{
opacity: 0.8;
}
.sidebar__icon{
position: relative;
width: 12px;
height: 12px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.2);
flex-shrink: 0;
}
.sidebar__icon:after{
position: absolute;
top: 50%;
left: 50%;
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: #fff;
transform: translate(-50%, -50%);
}
.sidebar__bottom{
margin-top: auto;
padding-top: 24px;
}
.chatbutton {
cursor: pointer;
}
.sidebar__support{
display: flex;
align-items: center;
gap: 11px;
padding: 20px 28px;
font-weight: 700;
font-size: 12px;
color: #fff;
text-decoration: none;
}
.sidebar__support-icon{
border-radius: 8px;
width: 34px;
height: 34px;
background: #2e3336;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.sidebar__badge{
padding: 4px 10px;
border-radius: 20px;
background: #cc4141;
font-size: 12px;
line-height: 1;
}
.sidebar__bottom-wrap{
border-top: 1px solid #333;
padding: 28px;
}
.sidebar__socials{
display: flex;
align-items: center;
gap: 10px;
margin-bottom:16px;
}
.sidebar__socials a{
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
text-decoration: none;
}
.sidebar__copy{
font-weight: 600;
font-size: 10px;
color: #a9a9a9;
}
.sidebar-overlay{
position: fixed;
top: 0;
left: 0;
z-index: 50;
display: none;
width: 100%;
height: 100%;
backdrop-filter: blur(10px);
background: rgba(20, 20, 21, 0.5);
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
.sidebar-overlay.active{
opacity: 1;
visibility: visible;
}
.sidebar-toggle{
position: fixed;
top: 20px;
left: 22px;
display: flex;
width: 34px;
height: 34px;
border-radius: 8px;
background: #2e3336;
border: 1px solid #2e3336;
align-items: flex-start;
justify-content: center;
flex-direction: column;
padding: 0 8px;
gap: 4px;
flex-shrink: 0;
z-index: 11;
}
.sidebar-toggle span{
width: 100%;
height: 2px;
border-radius: 5px;
background: #fff;
}
.sidebar-toggle span:last-child{
width: 50%;
}
.sidebar-toggle.xs{
display: none;
}
.sidebar-toggle:hover{
border-color: #a9a9a9;
}
.mobile-nav{
display: none;
}
/* -------- header -------- */
.header{
padding: 22px 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
background: rgba(22, 24, 26, 0.6);
backdrop-filter: blur(10px);
transition: transform 0.3s ease, width 0.3s ease;
}
.header .container{
display: flex;
justify-content: space-between;
align-items: center;
}
.logo{
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0 8px;
text-decoration: none;
}
.logo img{
max-width: 41px;
}
.logo__text{
font-weight: 700;
font-size: 16px;
text-transform: uppercase;
color: #fff;
}
.logo__text small{
display: block;
font-size: 9px;
}
.header__right{
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 8px;
}
/* -------------- hero -------------- */
.hero__item{
background: linear-gradient(360deg, #020202 0%, #14161b 100%);
border-radius: 15px;
padding: 55px 15px 42px 48px;
position: relative;
overflow: hidden;
min-height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 44px;
}
.hero__item:before{
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
z-index: 0;
}
.hero__item--1:before{
background: url(../img/slider/1.png) top -85px right -134px no-repeat;
background-size: 993px;
}
.hero__item--2:before{
background: #090a0b url(../img/slider/2.jpg) top -58px right no-repeat;
background-size: 819px;
}
.hero__item--3:before{
background: #090a0b url(../img/slider/3.jpg) top -60px right no-repeat;
background-size: 819px;
}
.hero__item--4:before{
background: #090a0b url(../img/slider/4.jpg) top -28px right no-repeat;
background-size: 819px;
}
.hero__item-sub{
font-weight: 600;
font-size: 16px;
color: #fff;
margin-bottom: 20px;
}
.hero__item-top , .hero .btn{
position: relative;
z-index: 2;
}
.hero__item-title{
font-weight: 700;
font-size: 22px;
color: #fff;
}
/* -------------- promo-cards -------------- */
.promo-cards{
margin: 25px 0;
}
.promo-cards .container{
display: flex;
justify-content: flex-start;
align-items: stretch;
gap: 0 26px;
}
.promo-card{
width: 50%;
display: block;
position: relative;
padding: 35px 45px;
border-radius: 15px;
min-height: 220px;
transition: 0.2s;
text-decoration: none;
}
.promo-card__title{
font-weight: 700;
font-size: 18px;
color: #fff;
position: relative;
z-index: 2;
}
.promo-card__img{
position: absolute;
top: 0;
right: 0;
object-fit: contain;
height: 100%;
}
.promo-card--tournament{
background: linear-gradient(90deg, #000 0%, #cb4141 100%);
}
.promo-card--jackpots{
background: linear-gradient(90deg, #5c5c5c 0%, #000 100%);
}
.promo-card:hover{
filter: brightness(115%);
}
/* -------------- filters -------------- */
.filters{
margin: 25px 0;
}
.filters .container{
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 8px;
}
.filters__categories{
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.filters__category{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 41px;
border-radius: 8px;
padding: 0 12px 0 9px;
border: 0;
background: #2e3336;
font-weight: 600;
font-size: 10px;
color: #fff;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.filters__category.active,
.filters__category:hover{
background: #cc4141;
color: #fff;
}
/* -------------- status page -------------- */
.status-hero .hero__item{
min-height: 400px;
}
.status-promo{
margin-bottom: 18px;
}
.status-filters{
margin: 0 0 24px 0;
}
.status-section{
margin: 0 0 50px 0;
}
.status-section__select-row{
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 28px;
}
.status-section__select-label{
font-weight: 600;
font-size: 10px;
line-height: normal;
color: #fff;
}
.status-section__select{
width: 258px;
flex: 0 0 258px;
}
.status-content{
color: #fff;
}
.status-content__title,
.status-table__title{
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 30px 0;
font-weight: 700;
font-size: 20px;
line-height: normal;
color: #fff;
}
.status-content__title-icon{
flex: 0 0 auto;
height: 20px;
}
.status-content__text,
.text{
max-width: 1160px;
margin-bottom: 28px;
}
.status-content__text p,
.text p{
margin: 0 0 18px 0;
font-weight: 500;
font-size: 14px;
line-height: 1.6;
color: #fff;
}
.status-content__text strong,
.text strong{
font-weight: 700;
}
.status-table-wrap{
max-width: 1160px;
margin: 0 0 28px 0;
}
.status-table{
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 20px;
border-radius: 8px;
background: #1c1f22;
}
.status-table-mobile{
display: none;
}
.status-table__head,
.status-table__row{
display: grid;
grid-template-columns: 1fr 1.28fr 1.12fr 1.12fr;
gap: 8px;
}
.aff .status-table__head,
.aff .status-table__row{
grid-template-columns: repeat(3, 1fr);
}
.status-table__head div,
.status-table__row div{
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
padding: 12px 16px;
border-radius: 6px;
background: #2e3336;
font-weight: 700;
font-size: 18px;
line-height: normal;
text-align: center;
color: #fff;
}
.status-table__head div{
font-size: 12px;
background: none;
}
.status-table__row div:first-child{
justify-content: center;
gap: 12px;
}
.status-badge{
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 22px;
line-height: 1;
}
.status-badge--new,
.status-badge--silver{
color: #ededed;
}
.status-badge--bronze,
.status-table__accent--bronze{
color: #d89b65;
}
.status-badge--gold,
.status-table__accent--gold{
color: #ffd382;
}
.status-badge--diamond,
.status-table__accent--diamond{
color: #9fe2ff;
}
.status-content__text--bottom{
margin-bottom: 0;
}
.policy-section{
margin-bottom: 58px;
}
.policy-section .select{
width: 100%;
max-width: 257px;
flex: unset;
}
.policy-content__block:not(:last-child){
margin-bottom: 34px;
}
.policy-content .status-content__title{
margin-bottom: 32px;
}
.policy-content .status-content__text{
margin-bottom: 0;
}
.policy-content ul{
margin: -4px 0 18px 0;
padding-left: 22px;
}
.policy-content li{
list-style: disc;
margin: 0;
font-weight: 500;
font-size: 14px;
line-height: 1.6;
color: #fff;
}
/* -------------- not found page -------------- */
.not-found-section{
margin: 35px 0 60px 0;
}
.not-found{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 638px;
padding: 70px 24px;
border-radius: 20px;
background: #111112;
text-align: center;
}
.not-found__mark{
display: flex;
align-items: center;
justify-content: center;
width: 240px;
margin: 0 auto 34px;
}
.not-found__mark img{
width: 100%;
max-width: none;
}
.not-found__title{
margin: 0 0 14px 0;
font-weight: 700;
font-size: 18px;
line-height: normal;
color: #fff;
}
.not-found__text{
margin: 0 0 40px 0;
font-weight: 700;
font-size: 12px;
line-height: normal;
color: #fff;
}
.not-found__text a{
color: #cc4141;
text-decoration: none;
}
.not-found__text a:hover{
text-decoration: underline;
}
/* -------------- games-section -------------- */
.games-section{
margin: 0 0 35px 0;
}
.games-section__top{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.games-section__title{
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
font-weight: 700;
font-size: 18px;
line-height: normal;
color: #fff;
}
.games-section__title svg{
color: #fff;
flex-shrink: 0;
}
.games-section__controls{
display: flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
}
.games-section__all,
.games-section__arrow{
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
border: 0;
border-radius: 6px;
background: #2e3336;
font-weight: 700;
font-size: 10px;
text-align: center;
color: #fff;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.games-section__all{
min-width: 56px;
padding: 0 18px;
}
.games-section__arrow{
width: 40px;
padding: 0;
}
.games-section__all:hover,
.games-section__arrow:hover{
background: #cc4141;
}
.games-section__arrow.swiper-button-disabled{
opacity: 0.45;
cursor: default;
pointer-events: none;
}
.games-section__slider,
.provider-section__slider{
overflow: hidden;
}
.games-section__grid{
align-items: stretch;
}
.games-section__slider .swiper-slide{
height: auto;
}
.game-card{
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
aspect-ratio: 120 / 160;
height: 100%;
background: #3c3c3c;
border-radius: 10px;
overflow: hidden;
color: #fff;
text-align: center;
text-decoration: none;
transition: transform 0.2s ease, filter 0.2s ease;
}
.game-card:hover{
transform: translateY(-2px);
filter: brightness(1.08);
}
.game-card::before,
.game-card::after{
position: absolute;
content: "";
pointer-events: none;
}
.game-card::before{
inset: 0;
background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.35), transparent 34%);
opacity: 0.8;
}
.game-card::after{
left: 50%;
top: 24%;
width: 54%;
aspect-ratio: 1;
border-radius: 50%;
background: rgba(255, 255, 255, 0.28);
transform: translateX(-50%);
box-shadow: 0 0 35px rgba(255, 255, 255, 0.28);
}
.game-card__art{
position: absolute;
top: 14%;
left: 50%;
z-index: 1;
width: 64%;
aspect-ratio: 1;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
transform: translateX(-50%);
}
.game-card__art::before,
.game-card__art::after{
position: absolute;
content: "";
border-radius: inherit;
}
.game-card__art::before{
inset: 18%;
background: rgba(0, 0, 0, 0.2);
}
.game-card__art::after{
inset: 34%;
background: rgba(255, 255, 255, 0.82);
}
.game-card__name,
.game-card__provider{
position: relative;
z-index: 2;
}
.game-card__name{
max-width: 100%;
font-weight: 900;
font-size: 20px;
line-height: 0.9;
text-transform: uppercase;
word-break: break-word;
}
.game-card__provider{
margin-top: 8px;
font-weight: 800;
font-size: 7px;
line-height: 1;
text-transform: uppercase;
opacity: 0.85;
}
.game-card__badge{
position: absolute;
top: 9px;
left: -22px;
z-index: 3;
width: 86px;
padding: 3px 0;
background: #fff;
color: #66b6d4;
font-weight: 900;
font-size: 6px;
line-height: 1;
text-transform: uppercase;
transform: rotate(-35deg);
}
.game-card__actions{
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
display: flex;
padding: 9px;
gap: 0 7px;
opacity: 0;
transform: translateY(100%);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.game-card--active .game-card__actions,
.game-card:hover .game-card__actions{
opacity: 1;
transform: translateY(0);
}
.game-card__link{
position: absolute;
inset: 0;
z-index: 0;
display: block;
}
.game-card__play,
.game-card__demo{
padding: 0 14px !important;
border-radius: 6px;
}
.game-card__play,
.game-card__demo{
flex: 1 1 50%;
}
.game-card::before{
z-index: 1;
background: linear-gradient(360deg, #000 0%, rgba(0, 0, 0, 0) 50%, #000 100%);
opacity: 0;
transition: opacity 0.2s ease;
}
.game-card::after{
display: none;
}
.game-card.is-loading::after,
.win-card.is-loading::after,
.provider-card.is-loading::after{
top: 50%;
left: 50%;
z-index: 2;
display: block;
width: 28px;
height: 28px;
border: 3px solid rgba(255, 255, 255, 0.25);
border-top-color: #fff;
border-radius: 50%;
background: none;
box-shadow: none;
transform: translate(-50%, -50%);
animation: game-card-spinner 0.8s linear infinite;
}
.game-card:hover::before{
opacity: 1;
}
.game-card__img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1;
transition: opacity 0.25s ease;
}
.game-card.is-loading .game-card__img,
.win-card.is-loading .win-card__img,
.provider-card.is-loading .provider-card__img{
opacity: 0;
}
.game-card.is-loaded .game-card__img,
.win-card.is-loaded .win-card__img,
.provider-card.is-loaded .provider-card__img{
opacity: 1;
}
@keyframes game-card-spinner{
to{
transform: translate(-50%, -50%) rotate(360deg);
}
}
.game-card__favorite{
position: absolute;
top: 8px;
left: 8px;
z-index: 3;
width: 16px;
height: 16px;
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
color: #fff;
cursor: pointer;
}
.game-card__favorite.active{
color: #cc4141;
}
.game-card:hover .game-card__favorite{
opacity: 1;
transform: scale(1);
}
.game-card:hover .game-card__actions{
opacity: 1;
transform: translateY(0);
}
/* -------------- tournament -------------- */
.tournament{
margin: 0 0 30px 0;
}
.tournament--main{
margin: 25px 0 0;
}
.tournament__box{
background: linear-gradient(90deg, #000 0%, #d80027 100%);
border-radius: 15px;
padding: 45px;
position: relative;
min-height: 400px;
overflow: hidden;
}
.tournament__left{
position: relative;
z-index: 2;
}
.tournament__title{
margin: 0 0 26px;
font-weight: 700;
font-size: 48px;
line-height: 1.18;
color: #fff;
}
.tournament__timer{
margin-bottom: 30px;
color: #fff;
}
.tournament__timer-title{
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 25px;
font-weight: 600;
font-size: 14px;
color: #fff;
}
.tournament__timer-title svg{
flex-shrink: 0;
color: #fff;
}
.tournament__timer-list{
display: flex;
align-items: flex-start;
gap:6px;
}
.tournament__timer-item{
text-align: center;
}
.tournament__timer-item span{
display: flex;
align-items: center;
justify-content: center;
width: 49px;
height: 32px;
padding: 0 8px;
background: #343B45;
-webkit-mask: url("data:image/svg+xml,%3Csvg width='49' height='32' viewBox='0 0 49 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5.33333C0 2.39167 2.44149 0 5.44444 0H43.5556C46.5585 0 49 2.39167 49 5.33333V10.6667C49 11.4 48.3705 11.975 47.6644 12.2167C46.0651 12.7583 44.9167 14.25 44.9167 16C44.9167 17.75 46.0651 19.2417 47.6644 19.7833C48.3705 20.025 49 20.6 49 21.3333V26.6667C49 29.6083 46.5585 32 43.5556 32H5.44444C2.44149 32 0 29.6083 0 26.6667V21.3333C0 20.6 0.629514 20.025 1.33559 19.7833C2.9349 19.2417 4.08333 17.75 4.08333 16C4.08333 14.25 2.9349 12.7583 1.33559 12.2167C0.629514 11.975 0 11.4 0 10.6667V5.33333Z' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg width='49' height='32' viewBox='0 0 49 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5.33333C0 2.39167 2.44149 0 5.44444 0H43.5556C46.5585 0 49 2.39167 49 5.33333V10.6667C49 11.4 48.3705 11.975 47.6644 12.2167C46.0651 12.7583 44.9167 14.25 44.9167 16C44.9167 17.75 46.0651 19.2417 47.6644 19.7833C48.3705 20.025 49 20.6 49 21.3333V26.6667C49 29.6083 46.5585 32 43.5556 32H5.44444C2.44149 32 0 29.6083 0 26.6667V21.3333C0 20.6 0.629514 20.025 1.33559 19.7833C2.9349 19.2417 4.08333 17.75 4.08333 16C4.08333 14.25 2.9349 12.7583 1.33559 12.2167C0.629514 11.975 0 11.4 0 10.6667V5.33333Z' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
font-weight: 700;
font-size: 28px;
line-height: 1;
color: #fff;
}
.tournament__timer-item small{
display: block;
margin-top: 8px;
font-weight: 600;
font-size: 8px;
text-align: center;
color: #a9a9a9;
}
.tournament__img{
position: absolute;
top: 0;
right: -20px;
object-fit: contain;
height: 100%;
}
.tournament__img.xs{
display: none;
}
.lottery-table.tour {
margin: 25px 0 0;
}
.tournament-info{
margin: 25px 0 0;
}
.lottery-info__date.tour {
min-width: 130px;
}
.turfund {
font-size: 24px;
}
.tournament-info .container{
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 30px;
}
.tournament-info__left , .tournament-info__right{
display: flex;
align-items: center;
gap: 10px;
}
.tournament-info__right{
flex-grow: 1;
}
.tournament-info__label{
flex-shrink: 0;
font-weight: 600;
font-size: 14px;
color: #fff;
}
.centerrr {
margin: 25px auto 0;
text-align: center;
}
.tournament-info__card{
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 80px;
padding: 10px 12px;
background: #2e3336;
border: 1px solid #2e3336;
border-radius: 8px;
text-align: center;
}
.tournament-info__date{
max-width: 130px;
}
.tournament-info__card span{
margin-bottom: 7px;
font-weight: 600;
font-size: 10px;
color: #fff;
}
.tournament-info__card strong{
font-weight: 700;
font-size: 18px;
color: #fff;
}
.tournament-info__prize{
background: #16181a;
}
.tournament-info__prize strong{
color: #ffc46f;
}
.tournament-info__card--gold{
border-color: #ffd382;
}
.tournament-info__card--silver{
border-color: #ededed;
}
.tournament-info__card--bronze{
border-color: #df9c6b;
}
.tournament-info__card--gold strong{
color: #ffd382;
}
.tournament-info__card--silver strong{
color: #ededed;
}
.tournament-info__card--bronze strong{
color: #df9c6b;
}
/* -------------- win-card -------------- */
.win-section{
margin-bottom: 38px;
}
.win-section__slider {
overflow: hidden;
}
.win-card{
position: relative;
background: #2e3336;
border-radius: 10px;
overflow: hidden;
}
.win-card::after,
.provider-card::after{
position: absolute;
content: "";
pointer-events: none;
}
.win-card::after,
.provider-card::after{
display: none;
}
.win-card img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
opacity: 1;
transition: opacity 0.25s ease;
aspect-ratio: 120 / 160;
}
.win-card__text{
padding: 12px 10px 16px 10px;
}
.win-card__id{
font-weight: 600;
font-size: 14px;
color: #fff;
margin-bottom: 6px;
}
.win-card__name{
font-weight: 600;
font-size: 10px;
color: #a9a9a9;
margin-bottom: 8px;
}
.win-card__cash{
font-weight: 600;
font-size: 10px;
color: #fff;
}
/* -------------- provider-card -------------- */
.provider-card{
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 88px;
padding: 12px;
background: #2e3336;
border-radius: 10px;
overflow: hidden;
transition: background-color 0.25s ease;
}
.provider-card:hover{
background: #2a2b2b;
}
.provider-card__img{
display: block;
max-width: 100%;
max-height: 60px;
object-fit: contain;
opacity: 1;
transition: opacity 0.25s ease;
}
/* -------------- jackpots -------------- */
.jackpots{
margin: 30px 0;
}
.jackpots__wrapper{
background: linear-gradient(90deg, #000 0%, #5d5d5d 100%);
border-radius: 15px;
height: 420px;
padding: 58px 30px 49px 40px;
position: relative;
}
.jackpots__wrapper-left{
position: relative;
z-index: 2;
}
.jackpots__img{
position: absolute;
top: 0;
right: 37px;
height: 100%;
}
.jackpots__box{
margin: 30px 0;
max-width: 400px;
}
.jackpots__box--item{
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(14px);
background: #2e3336;
border-radius: 10px;
padding: 12px 23px 12px 20px;
color: #fff;
font-weight: 700;
line-height: 1;
}
.jackpots__box--item:not(:last-child){
margin-bottom: 7px;
}
.jackpots__box--name{
font-size: 12px;
position: relative;
min-width: 130px;
}
.jackpots__box--name:after{
position: absolute;
top: 50%;
right: 0;
content: "";
transform: translateY(-50%);
background: #49515d;
width: 1px;
height: 22px;
}
.jackpots__box--value{
font-size: 22px;
text-align: right;
}
/* -------------- footer -------------- */
.footer{
margin-top: 40px;
padding: 0 0 38px;
background: #16181a;
color: #fff;
}
.footer__top{
display: flex;
align-items: center;
gap: 34px;
padding: 0 0 16px;
}
.footer__top::after{
content: "";
flex: 1 1 auto;
height: 1px;
background: #333;
}
.footer__logo{
display: inline-flex;
flex: 0 0 auto;
width: 133px;
height: 36px;
}
.footer__logo img{
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.footer__contacts{
display: flex;
align-items: stretch;
gap: 8px;
margin-top: 36px;
}
.footer__support,
.footer__email{
position: relative;
min-height: 70px;
border-radius: 10px;
background: #2e3336;
}
.footer__support{
display: flex;
align-items: center;
padding: 18px 16px 18px 25px;
flex-grow: 1;
}
.footer__support-person{
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
width: 100%;
height: 107px;
object-position: bottom center;
pointer-events: none;
}
.footer__support-person.xs{
display: none;
}
.footer__support-content{
position: relative;
z-index: 2;
}
.footer__support-title{
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-weight: 700;
font-size: 12px;
line-height: 1;
}
.footer__support-title span{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 47px;
height: 20px;
padding: 0 10px;
border-radius: 10px;
background: #cc4141;
font-size: 12px;
line-height: 1;
}
.footer__support-text{
font-weight: 600;
font-size: 10px;
line-height: 1;
color: #a9a9a9;
}
.footer__support-btn{
position: relative;
z-index: 2;
width: 161px;
height: 34px;
margin-left: auto;
padding: 0 12px;
border-radius: 8px;
font-size: 10px;
}
.footer__email{
display: flex;
flex-direction: column;
justify-content: center;
padding: 18px 24px;
text-decoration: none;
width: 32%;
}
.footer__email span{
margin-bottom: 11px;
font-weight: 600;
font-size: 10px;
line-height: 1;
color: #a9a9a9;
}
.footer__email strong{
font-weight: 700;
font-size: 12px;
line-height: 1;
color: #fff;
}
.footer__nav{
display: flex;
align-items: flex-start;
gap: 80px;
margin: 44px 0;
}
.footer__nav-col{
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer__nav-title{
margin-bottom: 20px;
font-weight: 700;
font-size: 18px;
line-height: 1;
color: #fff;
}
.footer__nav-col a{
font-weight: 600;
font-size: 10px;
line-height: 1;
color: #a9a9a9;
text-decoration: none;
transition: color 0.2s ease;
}
.footer__nav-col a:not(:last-child){
margin-bottom: 24px;
}
.footer__nav-col a:hover{
color: #fff;
}
.footer__bottom{
margin-top: 18px;
padding-top: 26px;
border-top: 1px solid #333;
}
.footer__bottom-row{
display: flex;
justify-content: space-between;
align-items: center;
}
.footer__bottom-row:not(:last-child){
margin-bottom: 35px;
}
.footer__socials{
grid-area: socials;
display: flex;
align-items: center;
gap: 10px;
}
.footer__socials a{
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 8px;
overflow: hidden;
}
.footer__socials img{
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.footer__payments{
grid-area: payments;
display: flex;
align-items: center;
gap: 10px;
}
.footer__payments img{
display: block;
width: 24px;
height: 24px;
object-fit: contain;
}
.footer__payments .footer__payment-mastercard{
width: 31px;
}
.footer__payments .footer__payment-visa{
width: 44px;
height: 13px;
}
.footer__copy{
grid-area: copy;
font-weight: 600;
font-size: 10px;
line-height: 1;
color: #a9a9a9;
}
.footer__age{
grid-area: age;
justify-self: end;
font-weight: 700;
font-size: 18px;
line-height: 1;
color: #a9a9a9;
}
/* -------------- bonus-section -------------- */
.bonus-section{
margin: 32px 0 60px 0;
}
.bonus-section__row{
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px 10px;
}
.bonus-section__card{
width: calc(25% - 8px);
}
.bonus-section__card-img{
position: relative;
overflow: hidden;
margin-bottom: 10px;
border-radius: 15px;
}
.bonus-section__card-img img{
width: 100%;
border-radius: 15px;
}
.bonus-section__card-text{
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px;
color: #fff;
background: rgba(0, 0, 0, 0.78);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.bonus-section__card:hover .bonus-section__card-text{
opacity: 1;
visibility: visible;
}
.bonus-section__card-text h4{
margin: 0 0 8px 0;
font-weight: 700;
font-size: 16px;
line-height: 1.2;
}
.bonus-section__card-text p{
margin: 0;
font-size: 13px;
line-height: 1.35;
}
.bonus-section__card-btns{
display: flex;
justify-content: flex-start;
gap: 10px;
}
.bonus-section__card-btns .btn{
width: 100%;
}
/* -------------- lottery -------------- */
.lottery-hero{
margin: 0 0 30px 0;
}
.lottery-hero__box{
position: relative;
display: flex;
align-items: stretch;
min-height: 400px;
padding: 55px 45px 43px;
overflow: hidden;
border-radius: 15px;
background: linear-gradient(90deg, #000 0%, #1a1919 100%);
}
.lottery-hero__content{
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
color: #fff;
}
.lottery-hero__title{
margin: 0 0 28px;
font-weight: 700;
font-size: 42px;
line-height: 1.14;
color: #fff;
}
.lottery-hero__status{
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 14px;
color: #fff;
}
.lottery-hero__status i{
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #299d78;
}
.lottery-hero__tickets{
display: flex;
align-items: center;
gap: 18px;
margin-top: auto;
font-weight: 700;
font-size: 18px;
color: #fff;
}
.lottery-hero__tickets strong{
font-weight: 700;
}
.lottery-hero__img{
position: absolute;
right: 41px;
bottom: 0;
z-index: 1;
height: 100%;
max-width: 700px;
object-fit: contain;
}
.lottery-hero__img.xs{
display: none;
}
.lottery-table{
margin: 0 0 35px 0;
}
.lottery-table__title{
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 30px;
font-weight: 700;
font-size: 18px;
line-height: 1;
color: #fff;
}
.lottery-table__title svg{
flex: 0 0 auto;
}
.lottery-table__wrap{
padding: 18px 20px;
border-radius: 8px;
background: #1c1f22;
}
.lottery-table table{
width: 100%;
border-collapse: separate;
border-spacing: 10px;
color: #fff;
}
.lottery-table__col--place{
width: 92px;
}
.lottery-table__col--player{
width: 44%;
}
.lottery-table__col--tickets,
.lottery-table__col--prize{
width: 24%;
}
.lottery-table th,
.lottery-table td{
font-weight: 700;
height: 40px;
padding: 0 16px;
font-size: 12px;
border-radius: 6px;
color: #fff;
text-align: center;
vertical-align: middle;
}
.lottery-table th{
height: 26px;
background: transparent;
}
.lottery-table td{
background: #2e3336;
}
.lottery-table td.lottery-table--gold{
color: #ffd382;
}
.lottery-table td.lottery-table--silver{
color: #ededed;
}
.lottery-table td.lottery-table--bronze{
color: #df9c6b;
}
.lottery-info{
display: flex;
align-items: center;
gap: 10px;
margin-top: 30px;
}
.lottery-info__dates,
.lottery-info__notes{
display: flex;
align-items: center;
gap: 10px;
}
.lottery-info__dates{
flex: 0 0 390px;
}
.lottery-info__notes{
flex: 1 1 auto;
}
.lottery-info__label{
flex: 0 0 120px;
font-weight: 600;
font-size: 14px;
line-height: 1.2;
color: #fff;
}
.lottery-info__date,
.lottery-info__note{
display: flex;
flex-direction: column;
justify-content: center;
min-height: 80px;
border-radius: 8px;
background: #2e3336;
color: #fff;
}
.lottery-info__date{
flex: 1 1 0;
padding: 10px 12px;
}
.lottery-info__date span{
margin-bottom: 7px;
font-weight: 600;
font-size: 10px;
}
.lottery-info__date strong{
font-weight: 700;
font-size: 18px;
}
.lottery-info__note{
flex: 1 1 0;
min-height: 118px;
padding: 18px 22px;
font-weight: 700;
font-size: 12px;
line-height: 1.25;
}
/* -------------- all-games -------------- */
.all-games__grid{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 12px 10px;
}
.all-games__col{
width: calc(14.2% - 8px);
}
.btn.btn-top{
height: 40px;
margin: 26px 0 0 auto;
min-width: 83px;
padding: 0 5px;
font-size: 10px;
}