@media (max-width: 1289px) {
body.sidebar-open{
overflow: hidden;
}
body.sidebar-open .page{
margin-left: 0;
}
body.sidebar-open .header {

width: 100%;
}
.sidebar-overlay{
display: block;
}
/* ---------- header ---------- */
.header .container{
gap: 12px;
}
.sidebar-toggle{
left: 15px;
}
.header__left{
padding-left: 60px;
}
}
@media (max-width: 1189px) {
/* ---------- hero ---------- */
.hero__item{
min-height: 365px;
}
.hero__item--1:before{
background-size: 800px;
background-position: top -50px right -126px;
}
.hero__item--2:before,
.hero__item--3:before,
.hero__item--4:before{
background-size: 760px;
}
/* ---------- promo-cards ---------- */
.promo-card{
padding: 35px 20px;
}
/* ---------- tournament ---------- */
.tournament__img{
right: -70px;
}
/* ---------- jackpots ---------- */
.jackpots__img{
right: 0;
}
/* ---------- footer ---------- */
.footer__email{
width: 25%;
}
/* ---------- bonus-section ---------- */
.bonus-section__card {
width: calc(33.333333% - 7px);
}
/* ---------- all-games ---------- */
.all-games__col {
width: calc(16.666666% - 9px);
}
}
@media (max-width: 991px) {
/* ---------- filters ---------- */
.filters .container{
flex-wrap: wrap;
}
.filters__categories{
width: 100%;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none;
}
.filters__categories::-webkit-scrollbar{
display: none;
}
.filters__search{
min-width: 0;
}
/* ---------- status page ---------- */
.status-section__select-row{
gap: 12px;
}
.status-section__select-label{
width: 100%;
}
.status-section__select{
width: 100%;
flex: 1 1 100%;
}
.status-table{
overflow-x: auto;
}
.status-table__head,
.status-table__row{
min-width: 860px;
}
/* ---------- hero ---------- */
.hero__item{
min-height: 305px;
padding: 40px 25px 40px 25px;
gap: 30px;
}
.hero__item-title{
font-size: 38px;
margin-bottom: 8px;
}
.hero__item--1:before{
background-size: 550px;
background-position: top -2px right -79px;
}
.hero__item--2:before,
.hero__item--3:before,
.hero__item--4:before{
background-size: 500px;
background-position: top -20px right;
}
/* ---------- promo-cards ---------- */
.promo-cards .container{
flex-direction: column;
gap: 8px;
}
.promo-card{
width: 100%;
min-height: auto;
}
/* ---------- filters ---------- */
.filters__category{
flex-grow: 1;
}
/* ---------- tournament ---------- */
.tournament__box{
padding: 45px 20px;
min-height: auto;
}
.tournament__title{
font-size: 34px;
margin: 0 0 15px 0;
}
.tournament-info .container{
flex-wrap: wrap;
gap: 20px;
}
.tournament-info__date{
max-width: 100%;
}
.tournament-info__left{
flex-grow: 1;
}
/* ---------- lottery ---------- */
.lottery-hero__box{
min-height: 340px;
padding: 40px 25px;
}
.lottery-hero__title{
font-size: 34px;
}
.lottery-info{
flex-wrap: wrap;
align-items: stretch;
}
.lottery-info__date{
flex: 1 1 calc(50% - 5px);
}
.lottery-info__note{
flex: 1 1 calc(33.333% - 7px);
}
.lottery-hero__img{
right: 0;
}
/* ---------- jackpots ---------- */
.jackpots__wrapper{
padding: 40px 20px;
height: auto;
}
.jackpots__box--value{
font-size: 18px;
}
/* ---------- footer ---------- */
.footer__contacts{
flex-direction: column;
gap: 12px;
}
.footer__nav-title{
font-size: 16px;
}
.footer__email{
width: 100%;
}
/* ---------- all-games ---------- */
.all-games__col {
width: calc(25% - 8px);
}
}
@media (max-width: 767px) {
.search__content{
padding: 20px 16px 18px;
}
.search__content--title{
font-size: 28px;
}
.container{
padding: 0 25px;
}
body{
padding-bottom: calc(62px + env(safe-area-inset-bottom));
}
/* ---------- header ---------- */
.header{
padding: 16px 0;
}
.header__left{
padding: 0;
}
.logo img{
max-width: 30px;
}
.logo__text{
font-size: 11px;
}
.logo__text small{
font-size: 4px;
}
.header__right{
gap: 0 5px;
}
.header .btn--sm{
height: 30px;
padding: 0 10px;
border-radius: 5px;
}
.header .btn-logout{
padding: 0 4px;
border-radius: 8px;
}
.sidebar-toggle{
display: none;
}
.header__profile{
display: none;
}
/* ---------- mobile-nav ---------- */
.mobile-nav{
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 55;
display: grid;
grid-template-columns: repeat(5, 1fr);
min-height: calc(60px + env(safe-area-inset-bottom));
padding: 8px 15px calc(8px + env(safe-area-inset-bottom));
background: #212426;
}
.mobile-nav__item{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: color 0.25s ease;
}
.mobile-nav__item.active{
color: #e83838;
}
.mobile-nav__icon{
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: currentColor;
}
.mobile-nav__icon--menu{
position: relative;
width: 18px;
height: 16px;
margin: 0 auto 0;
}
.mobile-nav__icon--menu span{
position: absolute;
left: 0;
width: 18px;
height: 2px;
border-radius: 4px;
background: currentColor;
transform-origin: center;
transition: top 0.25s ease, width 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
}
.mobile-nav__icon--menu span:nth-child(1){
top: 2px;
}
.mobile-nav__icon--menu span:nth-child(2){
top: 7px;
}
.mobile-nav__icon--menu span:last-child{
top: 12px;
width: 10px;
}
.mobile-nav__item.is-active .mobile-nav__icon--menu span:nth-child(1){
top: 7px;
transform: rotate(45deg);
}
.mobile-nav__item.is-active .mobile-nav__icon--menu span:nth-child(2){
opacity: 0;
transform: scaleX(0);
}
.mobile-nav__item.is-active .mobile-nav__icon--menu span:last-child{
top: 7px;
width: 18px;
transform: rotate(-45deg);
}
.mobile-nav__text{
font-weight: 700;
font-size: 8px;
line-height: 1;
white-space: nowrap;
}
/* ---------- sidebar ---------- */
.sidebar{
width: 265px;
height: calc(100dvh - 60px);
}
.sidebar__bottom{
display: flex;
flex-direction: column-reverse;
padding: 0;
order: 1;
}
.sidebar__top{
order: 2;
}
.sidebar__bottom-wrap{
border: none;
padding: 37px 26px 22px 26px;
border-bottom: 1px solid #333;
display: flex;
flex-direction: column-reverse;
}
.sidebar__socials{
margin: 16px 0 0 0;
}
.sidebar__support{
padding: 21px 26px;
}
.sidebar__nav{
padding: 40px 25px;
}
.sidebar__close{
display: none;
}
/* ---------- hero ---------- */
.hero__item{
padding: 30px 22px 18px 22px;
min-height: 330px;
justify-content: space-between;
}
.hero__item-top{
display: flex;
flex-direction: column-reverse;
}
.hero__item-sub{
font-size: 12px;
margin: 0;
}
.hero .btn{
width: 100%;
}
.hero__item-title{
font-size: 22px;
}
.hero__item--1:before{
background-size: 394px;
background-position: bottom 8px center;
}
.hero__item--2:before, .hero__item--3:before, .hero__item--4:before{
background-position: top -20px right -100px;
}
.hero__item--4:before{
background-position: top -20px right -160px;
}
/* ---------- promo-cards ---------- */
.promo-cards{
margin: 8px 0 32px 0;
}
.promo-card__title{
font-size: 12px;
}
.promo-card{
padding: 20px 33px;
min-height: 96px;
display: flex;
align-items: center;
}
.promo-card--jackpots .promo-card__img{
right: 15px;
}
/* ---------- filters ---------- */
.filters__search-icon{
left: auto;
right: 7px;
}
.filters{
margin: 14px 0;
}
.filters__categories{
display: none;
}
.filters .container{
flex-wrap: nowrap;
gap: 6px;
}
.filters__providers,
.select{
width: 43%;
}
/* ---------- status page ---------- */
.status-section{
margin-bottom: 30px;
}
.status-section__select-row{
margin-bottom: 22px;
}
.status-section__select{
width: 53%;
flex: unset;
flex-shrink: 0;
}
.status-content__title,
.status-table__title,
.policy-content .status-content__title{
margin: 0 0 20px 0;
}
.status-content__text p,
.text p{
font-size: 12px;
line-height: 1.55;
}
.policy-content li{
font-size: 12px;
line-height: 1.55;
}
.policy-content__block:not(:last-child){
margin-bottom: 26px;
}
.not-found-section{
margin: 16px 0 30px 0;
}
.not-found{
min-height: 430px;
padding: 50px 0px;
border-radius: 12px;
background: none;
}
.not-found__mark{
width: 197px;
margin-bottom: 20px;
}
.not-found__text{
margin-bottom: 35px;
}
.not-found__btn{
width: 100%;
max-width: 200px;
padding: 0 10px;
}
.status-table{
margin-left: -25px;
margin-right: -25px;
padding: 14px 25px;
border-radius: 0;
}
.status-table__head,
.status-table__row{
min-width: 720px;
}
.status-table__head div,
.status-table__row div{
min-height: 48px;
padding: 10px 12px;
font-size: 13px;
}
.status-table__head div{
font-size: 10px;
}
.status-table--desktop{
display: none;
}
.status-table__title{
margin-bottom: 14px;
font-size: 18px;
}
.status-table__title .status-content__title-icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
font-size: 24px;
line-height: 1;
}
.status-table-mobile{
display: block;
width: 100%;
padding: 17px 19px;
border-radius: 8px;
background: #1c1f22;
}
.status-table-mobile__group--bonus{
margin-top: 16px;
}
.status-table-mobile__head,
.status-table-mobile__row{
display: grid;
gap: 10px;
}
.status-table-mobile__group--main .status-table-mobile__head,
.status-table-mobile__group--main .status-table-mobile__row{
grid-template-columns: 120px minmax(0, 1fr);
}
.status-table-mobile__group--bonus .status-table-mobile__head,
.status-table-mobile__group--bonus .status-table-mobile__row{
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.status-table-mobile__head{
margin-bottom: 10px;
}
.status-table-mobile__row:not(:last-child){
margin-bottom: 10px;
}
.status-table-mobile__head div{
display: flex;
align-items: center;
justify-content: center;
min-height: 34px;
font-weight: 700;
font-size: 12px;
line-height: normal;
text-align: center;
color: #fff;
}
.status-table-mobile__row div{
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
padding: 8px 10px;
border-radius: 6px;
background: #2e3336;
font-weight: 700;
font-size: 14px;
line-height: normal;
text-align: center;
color: #fff;
}
.status-table-mobile__group--main .status-table-mobile__row div:first-child{
justify-content: flex-start;
gap: 7px;
padding: 0 10px;
font-size: 12px;
}
.status-table-mobile .status-badge{
flex: 0 0 20px;
}
/* ---------- games-section ---------- */
.games-section{
margin: 0 0 20px 0
}
.games-section__top{
margin-bottom: 15px;
}
.games-section__title{
font-size: 14px;
gap: 4px;
}
.games-section__arrow{
display: none;
}
.games-section__title svg{
width: 19px;
height: 19px;
}
.games-section__all{
gap: 8px;
height: 30px;
padding: 0 13px;
border-radius: 100px;
font-size: 12px;
line-height: 1;
}
.games-section__all:after{
content: "";
background: url("../img/arrow-right.svg") center top no-repeat;
width: 5px;
height: 8px;
margin-top: 2px;
}
.games-section__slider .swiper-slide{
width: 112px;
}
.provider-section .container,
.win-section .container,
.games-section .container{
padding: 0;
}
.games-section__top ,
.games-section__slider,
.win-section__slider,
.provider-section__slider {
padding: 0 25px;
}
.game-card__actions{
gap: 0 3px;
padding: 4px;
}
.game-card__actions .btn{
padding: 0 4px !important;
height: 24px;
font-size: 9px;
}
/* ---------- tournament ---------- */
.tournament__left{
text-align: center;
max-width: 260px;
margin: 0 auto 0;
}
.tournament__box{
padding: 30px 40px;
min-height: 480px;
background: linear-gradient(0deg, #000 43%, #d80027 100%);
border-radius: 10px;
display: flex;
align-items: flex-end;
}
.tournament__title{
font-size: 22px;
margin-bottom: 18px;
}
.tournament__timer{
margin: 0 0 20px 0;
}
.tournament__timer-item span{
font-size: 24px;
}
.tournament__timer-title{
justify-content: center;
}
.tournament__timer-list{
justify-content: center;
}
.tournament__left .btn{
margin: 0 auto 0;
width: 100%;
}
.tournament__img{
bottom: auto;
top: -10px;
height: auto;
width: 374px;
max-width: inherit;
right: auto;
left: 50%;
transform: translateX(-50%);
display: none;
}
.tournament__img.xs{
display: block;
}
.tournament-info{
margin-bottom: 20px;
}
.tournament-info__left, .tournament-info__right{
flex-wrap: wrap;
}
.tournament-info__label{
width: 100%;
gap: 15px 8px;
}
.tournament-info__label br{
display: none;
}
/* ---------- win-section ---------- */
.win-section .swiper-slide{
width: 99px;
}
/* ---------- jackpots ---------- */
.jackpots__wrapper{
min-height: 530px;
padding: 33px 40px;
display: flex;
align-items: flex-end;
background: linear-gradient(360deg, #000 70%, #5d5d5d 100%);
}
.jackpots .tournament__title{
text-align: center;
}
.jackpots__box--value{
font-size: 12px;
}
.jackpots__box{
margin: 16px 0 21px 0;
}
.jackpots__box--name{
min-width: 50%;
}
.jackpots__wrapper-left{
width: 100%;
max-width: 260px;
margin: 0 auto 0;
}
.jackpots__wrapper-left .btn{
width: 100%;
}
.jackpots__box--item{
border-radius: 8px;
padding: 16px 18px;
}
.jackpots__box--item:not(:last-child) {
margin-bottom: 6px;
}
.jackpots__img{
right: auto;
left: 50%;
transform: translateX(-50%);
bottom: auto;
top: 0;
height: auto;
width: 100%;
max-width: 340px;
}
/* ---------- provider-section ---------- */
.provider-section .swiper-slide{
width: 120px;
}
.provider-card{
min-height: 65px;
border-radius: 8px;
padding: 2px;
}
/* ---------- footer ---------- */
.footer{
overflow: hidden;
padding: 35px 0;
}
.footer__top{
gap: 0 18px;
padding: 0;
}
.footer__logo{
width: 91px;
}
.footer__logo .logo__text{
font-size: 12px;
}
.footer__nav{
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 25px;
align-items: center;
justify-content: center;
text-align: center;
}
.footer__nav-col {
flex-direction: column;
align-items: center;
text-align: center;
}
.footer__contacts{
margin-top: 22px;
}
.footer__support{
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
min-height: 138px;
}
.footer__payments{
flex-wrap: wrap;
border-bottom: 1px solid #333;
padding-bottom: 20px;
order: 1;
}
.footer__socials{
order: 2;
}
.footer__bottom-row{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 23px;
}
.footer__support-btn{
margin: 18px 0 0 0;
height: 34px;
padding: 0 21px;
}
.footer__support-content{
max-width: 131px;
}
.footer__support-text{
line-height: 1.2;
}
.footer__support-person{
width: 100%;
height: 152px;
object-fit: cover;
display: none;
}
.footer__support-person.xs{
display: block;
width: 365px;
height: auto;
right: -105px;
bottom: -88px;
max-width: inherit;
}
.footer__bottom-row.last{
flex-direction: row;
align-items: center;
}
/* ---------- bonus-section ---------- */
.bonus-section__card {
width: 100%;
max-width: 340px;
}
.bonus-section .games-section__top{
padding: 0;
}
/* ---------- lottery ---------- */
.lottery-hero{
margin-bottom: 20px;
}
.lottery-hero__box{
min-height: 480px;
padding: 28px 28px 30px;
background: linear-gradient(0deg, #000 43%, #1a1919 100%);
}
.lottery-hero__content{
flex-grow: 1;
justify-content: space-between;
width: 100%;
align-items: center;
text-align: center;
}
.lottery-hero__title{
font-size: 22px;
margin-bottom: 15px;
}
.lottery-hero__status{
justify-content: center;
}
.lottery-hero__tickets{
justify-content: center;
align-items: flex-end;
margin-top: 30px;
flex-grow: 1;
}
.lottery-hero__img{
top: 50%;
left: 50%;
width: 350px;
max-width: none;
height: auto;
transform: translate(-50% , -50%);
display: none;
}
.lottery-hero__img.xs{
display: block;
}
.lottery-table{
margin-bottom: 24px;
overflow: hidden;
}
.lottery-table__title{
font-size: 18px;
}
.lottery-table__wrap{
padding: 7px 20px;
}
.lottery-table table{
table-layout: fixed;
border-spacing: 5px 10px;
}
.lottery-table__col--place{
width: 40px;
}
.lottery-table__col--player{
width: 28%;
}
.lottery-table__col--tickets{
width: 28%;
}
.lottery-table__col--prize{
width: 34%;
}
.lottery-table th{
font-size: 10px;
}
.lottery-table th,
.lottery-table td{
height: 40px;
padding: 0 10px;
}
.lottery-table td span{
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}
.lottery-info{
padding: 0 25px;
}
.lottery-info__dates,
.lottery-info__notes{
flex-direction: column;
}
.lottery-info__label{
flex-basis: auto;
width: 100%;
font-size: 12px;
}
.lottery-info__label br{
display: none;
}
.lottery-info__date,
.lottery-info__note{
flex-basis: 100%;
min-height: 70px;
}
.lottery-info__date strong{
font-size: 16px;
}
.lottery-info__note{
min-height: 86px;
padding: 16px;
}
/* ------- search ------- */
.filters__search{
padding: 0 30px 0 14px;
}
.search__games .game-card{
width: calc(33.333333% - 6px);
}
.search{
padding: 0;
}
.search__content{
width: 100%;
max-height: 100dvh;
min-height: 100dvh;
margin: 0;
}
/* ------- modal ------- */
.modal__content-right{
display: none;
}
.walletmodal{
padding: 0;
}
.walletmodal .modal__content{
padding: 35px 30px;
}
.walletmodal .modal__nav{
position: relative;
display: flex;
align-items: center;
height: 40px;
margin-bottom: 16px;
z-index: 3;
max-width: 330px;
isolation: isolate;
}
.walletmodal .modal__nav::before{
content: 'Выбор раздела:';
position: absolute;
top: 50%;
left: 0;
color: #fff;
font-weight: 700;
font-size: 12px;
line-height: 1;
transform: translateY(-50%);
}
.walletmodal .modal__nav.open::after{
content: "";
position: absolute;
top: -6px;
left: 108px;
width: 198px;
height: 282px;
background: #1c1f22;
border-radius: 8px;
z-index: 0;
pointer-events: none;
}
.walletmodal .modal__nav--item{
position: absolute;
top: 0;
left: 114px;
display: none;
justify-content: flex-start;
width: 186px;
min-width: 186px;
margin-left: 0;
padding: 0 36px 0 12px;
background: #2e3336;
z-index: 2;
}
.walletmodal .modal__nav--item.active,
.walletmodal .modal__nav.open .modal__nav--item{
display: flex;
}
.walletmodal .modal__nav--item.active{
background: #cc4141;
z-index: 3;
}
.walletmodal .modal__nav--item.active::after{
content: '';
position: absolute;
top: 50%;
right: 12px;
width: 8px;
height: 8px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: translateY(-65%) rotate(45deg);
}
.walletmodal .modal__nav.open .modal__nav--item.active::after{
transform: translateY(-35%) rotate(225deg);
}
.walletmodal__row ,
.walletmodal__bonus ,
.walletmodal__bonus-grid ,
.walletmodal__profile-grid,
.walletmodal__settings-grid{
grid-template-columns: 1fr;
gap: 10px;
}
.walletmodal__col:nth-child(2),
.walletmodal__col-full{
grid-column: auto;
grid-row: auto;
}
.walletmodal__section--deposit,
.walletmodal__section--withdraw,
.walletmodal__section--transfer,{
height: auto;
}
.walletmodal__bonus-history{
height: auto;
}
.walletmodal__bonus-table {
overflow-x: auto;
overflow-y: hidden;
}
.walletmodal__bonus-table-head, .walletmodal__bonus-table-row{
min-width: 660px;
grid-template-columns: 110px 80px 80px 120px 97px 1fr;
}
.walletmodal__bonus-receive{
margin-bottom: 10px;
}
.walletmodal__settings-2fa{
position: relative;
display: block;
min-height: 230px;
padding: 14px 15px 17px 17px;
}
.walletmodal__settings-qr{
position: absolute;
top: 14px;
left: 17px;
width: 117px;
height: 121px;
}
.walletmodal__settings-2fa-content{
padding: 15px 0 0 131px;
}
.walletmodal__settings-2fa-content .walletmodal__section-title{
width: 129px;
margin: 0 0 17px;
line-height: 1.15;
}
.walletmodal__settings-2fa-content p{
width: 174px;
margin: 0;
line-height: 1.15;
}
.walletmodal__settings-2fa-form{
position: absolute;
left: 17px;
right: 15px;
bottom: 17px;
display: grid;
grid-template-columns: 180px 112px;
gap: 6px;
align-items: end;
}
.walletmodal__settings-2fa-form .walletmodal__field{
min-width: 0;
}
.walletmodal__settings-2fa-form .walletmodal__bonus-btn{
width: 112px;
}
.walletmodal__settings-2fa-form .walletmodal__input-text::placeholder{
color: transparent;
}
.walletmodal__settings-2fa-form .walletmodal__input-text{
font-size: 0;
}
.walletmodal__settings-2fa-form .walletmodal__input-wrap::after{
content: 'Введите код';
position: absolute;
top: 50%;
left: 32px;
color: #7d7d7d;
font-weight: 600;
font-size: 10px;
line-height: 1;
transform: translateY(-50%);
pointer-events: none;
}
.modal-top{
display: flex;
justify-content: center;
align-items: center;
gap: 0 5px;
color: #A9A9A9;
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin: 20px auto 0;
}
.walletmodal__history-table{
font-size: 10px;
}
.walletmodal__history-table .walletmodal__bonus-table-head, .walletmodal__history-table .walletmodal__bonus-table-row{
grid-template-columns: 110px 80px 80px 120px 97px 1fr;
}
/* ---------- all-games ---------- */
.all-games .container{
padding: 0 25px;
}
.all-games .games-section__top{
padding: 0;
}
.all-games__grid{
gap: 7px;
}
.all-games__col {
width: calc(33.333333% - 5px);
}
}
@media (max-width: 399px) {
.modal-social__web3 {
min-width: 60px;
}
}