.main-page {}

.desktop .main-page .header {
    width: 1920px;
    height: 124px;
    background-image: url(../images/main/upper-bg.png);
    position: fixed;
    left: 0;
    top: 0;
}

.desktop .main-page .header .login {
    color: #5E6570;
    font-family: Luckiest Guy;
    font-size: 30px;
    letter-spacing: 1.5px;
    width: 408px;
    height: 60px;
    line-height: 60px;
    float: left;
    padding-left: 150px;
    text-shadow: 1px 2px 1px #969696;
}

.desktop .main-page .header .jackpots {
    width: 804px;
    height: 93px;
    background-image: url(../images/main/jackpot-bg.png);
    background-position: 0 -10px;
    float: left;
}

.desktop .main-page .header .jackpots .jackpot {
    width: 759px;
    height: 64px;
    margin: 8px 23px;
    position: absolute;
    transition: opacity 1500ms;
    display: flex;
    justify-content: center;
    align-items: center;
}

.desktop .main-page .header .jackpots .jackpot .name {margin-top: 6px;margin-right: 31px;}
.desktop .main-page .header .jackpots .jackpot .name img {}
.desktop .main-page .header .jackpots .jackpot .amount {
    text-shadow: 1px 2px 4.5px rgba(245, 216, 32, 0.50);
    font-family: Quicksand;
    font-size: 46px;
    color: #f9c880;
    text-shadow: 1px 2px 4.5px rgba(245, 216, 32, 0.50);
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-family: 'Kanit', sans-serif;
    margin-top: -3px;
}

.desktop .main-page .notify-container {
    width: 1920px;
    height: 1080px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.desktop .main-page .notify {
    color: #fff;
    font-size: 51px;
    /* min-width: 600px; */
    text-align: center;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 15.69%, rgba(0, 0, 0, 0.90) 50.47%, rgba(0, 0, 0, 0.80) 82.92%, rgba(0, 0, 0, 0.00) 100%);
    padding: 15px 30px;
    z-index: 1;
    height: 60px;
    line-height: 60px;
    position: absolute;
    z-index: 9999;
}

/* .main-page .header .jackpots .jackpot:nth-child(2) {margin-top: -72px;} */
/* .main-page .header .jackpots .jackpot:nth-child(3) {margin-top: -72px;} */

.desktop .main-page .header .jackpots .jackpot.orange {background-image: url(../images/main/jackpot-orange.png);}
.desktop .main-page .header .jackpots .jackpot.blue {background-image: url(../images/main/jackpot-blue.png);}
.desktop .main-page .header .jackpots .jackpot.purple {background-image: url(../images/main/jackpot-purple.png);}

.desktop .main-page .header .version {
    color: #5E6570;
    font-family: Luckiest Guy;
    font-size: 30px;
    letter-spacing: 1.5px;
    width: 408px;
    height: 60px;
    line-height: 60px;
    float: right;
    padding-right: 150px;
    text-align: right;
    text-shadow: 1px 2px 1px #969696;
}

.desktop .main-page .game-container {
    /* margin-top: 124px; */
    display: table;
    margin: 0 auto;
}

.desktop .main-page .tabs-container {
    display: table;
    margin: 0 auto;
}

/* .main-page .tabs-container .tabs hr {
    position: absolute;
    width: 1200px;
    background: #000;
    border-color: #000;
    margin-top: 59px;
} */

.desktop .main-page .tabs-container .tabs {
    width: 1137px;
    height: 93px;
    border-radius: 32px;
    border: 5px solid rgba(169, 102, 0, 0.50);
    background: linear-gradient(180deg, #FB9F00 0%, #FB9F00 0%, #C64E00 49.65%, #FF4409 100%);
    box-shadow: 0px 10px 2px 2px rgba(255, 255, 255, 0.50) inset, 0px 4px 5px 3px rgba(0, 0, 0, 0.40), 0px -5px 4px 0px rgba(0, 0, 0, 0.25) inset;
    margin-top: 140px;
}

.desktop .main-page .tabs-container .tabs .tab-active {
    width: 271px;
    height: 119px;
    border-radius: 32px;
    border: 5px solid #2AC15A;
    background: linear-gradient(180deg, #00BC3C 0%, #00B93F 0%, #9AD9A3 49.65%, #00D700 100%);
    box-shadow: 0px 10px 2px 2px rgba(255, 255, 255, 0.50) inset, 0px 4px 5px 3px rgba(0, 0, 0, 0.40), 0px -5px 4px 0px rgba(0, 0, 0, 0.25) inset;
    position: absolute;
    z-index: 1;
    margin-top: -17px;
    transition: margin 300ms;
}

.desktop .main-page .tabs-container .tabs .tab-active.inactive {display: none;}

.desktop .main-page .tabs-container .tabs .tab-active.favorites {margin-left: 29px;}
.desktop .main-page .tabs-container .tabs .tab-active.fishing {margin-left: 298px;}
.desktop .main-page .tabs-container .tabs .tab-active.slot {margin-left: 582px;}
.desktop .main-page .tabs-container .tabs .tab-active.table {margin-left: 846px;}

.desktop .main-page .tabs-container .tabs .tab.fishing {margin-top: -15px;}
.desktop .main-page .tabs-container .tabs .tab.favorites {margin-top: 3px;margin-left: 33px;}
.desktop .main-page .tabs-container .tabs .tab.slot {margin-top: -20px;}
.desktop .main-page .tabs-container .tabs .tab.table {margin-top: -3px;}

.desktop .main-page .tabs-container .tabs .tab {
    width: 260px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 13px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
.desktop .main-page .tabs-container .tabs .tab .image {
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}

.desktop .main-page .tabs-container .tabs .tab .image img {}

.desktop .main-page .tabs-container .tabs .tab .tab-name {
    float: left;
    color: #FFF;
    text-shadow: 0px 3px 0px #424344;
    font-family: Luckiest Guy;
    font-size: 29px;
    letter-spacing: 1.45px;
    margin-left: 10px;
}

.desktop .main-page .game-container .games {
    width: 339px;
    display: table;
    float: left;
}

.desktop .main-page .game-container .game {
    width: 292px;
    height: 299px;
    float: left;
    margin: 11px;
    cursor: pointer;
}

.desktop .main-page .game-container .game .border {
    width: 292px;
    height: 299px;
    background-image: url(../images/main/game-border.png);
    position: absolute;
}

.desktop .main-page .game-container .games.vertical .game .border {
    width: 292px;
    height: 626px;
    background-image: url(../images/main/game-border-vertical.png);
    position: absolute;
}

/* .main-page .game-container .game:first-child {
    margin-top: 26px !important;
}

.main-page .game-container .game:last-child {
    margin-top: -24px;
}

.main-page .game-container .games.vertical .game:first-child, .main-page .game-container .games.vertical .game:last-child {
    margin-top: 0 !important;
} */

.desktop .main-page .game-container .games.vertical .game {width: 317px;height: 626px;}
.desktop .main-page .game-container .games.vertical {
    width: 339px;
}

.desktop .main-page .game-container .game .image {
    margin-left: 14px;
    margin-top: 7px;
}


.favorites-plug .game .image img {
    border-radius: 35px;
    width: 264px;
    height: 267px;
}

.desktop .main-page .game-container .game .image img {
    border-radius: 35px;
}

.desktop .main-page .game-container .game .favorite {
    width: 59px;
    height: 52px;
    position: absolute;
    margin-left: 248px;
    margin-top: 49px;
    cursor: pointer;
}

.desktop .main-page .game-container .game .favorite .status {
    width: 59px;
    height: 52px;
    background-image: url(../images/main/icons/favorite.png);
    transition: background 300ms;
}

.desktop .main-page .game-container .game .favorite .status.active {
    background-image: url(../images/main/icons/favorite-active.png);
    transition: background 300ms;
}

.desktop .main-page .game-container .game .favorite .fav-border {
    width: 59px;
    height: 52px;
    background-image: url(../images/main/icons/favorite-border.png);
    position: relative;
    margin-top: -52px;
}

.desktop .main-page .game-container .games.vertical .game .image img {
    /* margin-left: -27px; */
    /* margin-top: -29px; */
}

.desktop .main-page .bottom {
    width: 1920px;
    height: 125px;
    background-image: url(../images/main/down-bg.png);
    position: fixed;
    left: 0;
    bottom: 0;
}

.desktop .main-page .bottom .user {
    display: table;
    margin-top: 12px;
    margin-left: 28px;
    float: left;
}

.desktop .main-page .bottom .user .avatar {
    width: 103px;
    height: 103px;
    background-image: url(../images/main/avatar-block.png);
    float: left;
    margin-top: 5px;
}

.desktop .main-page .bottom .user .avatar img {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    margin-left: 11px;
    margin-top: 7px;
}

.desktop .main-page .bottom .user .balance {
    width: 262px;
    height: 113px;
    background-image: url(../images/main/balance-block.png);
    float: left;
}
.desktop .main-page .bottom .user .balance span {
    display: block;
    margin-left: 89px;
    margin-top: 40px;
    width: 152px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    color: #fff;
    font-size: 26px;
}

.desktop .main-page .bottom .center {
    width: 438px;
    height: 155px;
    position: absolute;
    left: 750px;
    bottom: 0;
    background-image: url(../images/main/user-center-background.png);
    display: flex;
    justify-content: center;
}

.desktop .main-page .bottom .center .main-animation {
    width: 206px;
    height: 155px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -41px;
}
.desktop .main-page .bottom .center .main-animation canvas {
    /* transform: scale(0.35); */
}

.desktop .main-page .bottom .bonuses-section {
    display: table;
    float: left;
    height: 140px;
    margin-top: -15px;
}
.desktop .main-page .bottom .bonuses-section .bonus {
    width: 120px;
    height: 140px;
    display: flex;
    align-items: center;
    flex-direction: column;
    float: left;
    cursor: pointer;
}
.desktop .main-page .bottom .bonuses-section .bonus .icon {
    width: 120px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.desktop .main-page .bottom .bonuses-section .bonus .icon img {
    /* display: none; */
}
.desktop .main-page .bottom .bonuses-section .bonus .name {
    color: #FFF;
    text-shadow: 0px 3px 0px #424344;
    font-family: Luckiest Guy;
    font-size: 29px;
    font-style: normal;
    letter-spacing: 1.45px;
    height: 40px;
    line-height: 40px;
}

.desktop .main-page .bottom .left {
    width: 750px;
    float: left;
}

.desktop .main-page .bottom .right {
    width: 713px;
    float: right;
    display: flex;
    justify-content: center;
    margin-right: 20px;
}

.desktop .main-page .bottom .right .bonuses-section .bonus:first-child {
    margin-right: 150px;
}

.desktop .main-page .slick-slider {
    width: 1695px;
    height: 626px;
    margin: 0 auto;
}

.desktop .main-page .slick-list {
    width: 1695px;
    height: 626px;
    overflow: hidden;
}

.desktop .main-page .slick-slide {
    width: 339px;
    height: 626px;
    float: left;
}

.desktop .main-page .favorites-plug {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1781px;
    height: 645px;
}

.desktop .main-page .favorites-plug .plug-text {
    color: #FFF;
    text-align: center;
    text-shadow: 2px 2px 0px #3F484C;
    font-family: Luckiest Guy;
    font-size: 64px;
    letter-spacing: 3.2px;
    margin-top: 35px;
}

.desktop .main-page .favorites-plug .finger {
    width: 345px;
    height: 345px;
    background-image: url(../images/main/finger.png);
    background-size: 100%;
    position: absolute;
    z-index: 1;
    margin-top: -215px;
    margin-left: 494px;
}