@media (min-width:368px) {
    .af-user-info .balance-wapper .balance a{
        margin: 0 5px;
    }
}
@media (min-width:400px) {
    .game-list-wrapper{
        grid-template-columns: repeat(3, 1fr);
    }
    .filter-bar-wrapper .filter-bar .filter-list a,
    .filter-bar-wrapper .search-wrapper input{
        font-size: 0.9rem;
    }
    .af-user-info .deposit-wrapper .icon{
        width: 35px;
        height: 35px;
        padding: 7px;
    }
    .af-user-info .balance-wapper .balance a{
        margin: 0 5px;
        font-size: 0.8rem;
    }
}
@media (min-width: 460px) {
    .af-user-info .balance-wapper .logout-icon{
        margin-right: 15px;
        font-size: 1rem;
    }
    .af-user-info .deposit-wrapper a{
        font-size: 0.7rem;
        margin: 0 10px;
    }
    /*partner*/
    #modal-partner .modal-content{
        padding: 25px;
    }
    .partner-logo-wrapper .partner-logo{
        margin: 10px;
        width:calc(25% - 20px);
    }
}
@media (min-width: 560px) {
    .btn,
    .btn a{
        font-size: 1rem;
    }
    .header-wrapper .logo-text{
        font-size: 3vw;
    }
    .game-category-wrapper ul li a img{
        width: 25px;
    }
    .game-category-wrapper ul li{
        padding:10px;
        display: inline-block;
        width: 15%;
        font-size:0.8rem;
        max-width: 100px;
    }
    .af-user-info .balance-wapper{
        width: 50%;
    }
    .footer-content .content-wrapper{
        padding: 15px 30px;
    }
    .footer-content .license-wrapper{
        display: flex;
        justify-content: center;
    }
    .footer-content .license-wrapper .logo{
        padding: 10px 20px;
    }
    .app-description {
        font-size: 1rem;
        color: var(--primary-text2);
        font-weight: 400;
    }
    /*lobby page*/
    .game-list-wrapper{
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 768px) {
    .header-wrapper .logo-text{
        font-size: 4vw;
    }
        /*lobby page*/
    .game-list-wrapper{
        grid-template-columns: repeat(5, 1fr);
    }
}
@media (min-width: 960px) {
    /*header*/
    header{
        background-color: var(--bg-color1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
        height: 80px;
        position: sticky;
        top:0;
        z-index: 10;
    }
    .header-wrapper{
        background: none;
        padding: 0;
        position: initial;
        justify-content: flex-start;
        width: 30%;
    }
    .header-wrapper .logo img{
        width: 150px;
    }
    .header-wrapper .logo-text{
        font-size: 2.5vw;
        margin-left: 15px;
    }
    .game-category-m{
        display: none;
    }
    .notice-wrapper-m{
        display: none;
    }
    .header-wrapper .vip-icon{
        display: none;
    }
    .btn-wrapper{
        margin: 0;
        width: 70%;
        align-items: center;
    }
    button.lang-btn{
        display: flex;
        margin-left: 15px;
    }
    .btn-wrapper .input-wrapper{
        display: flex;
        align-items: center;
    }
    header .input-group{
        margin-left: 10px;
        width: 50%;
        position: relative;
        border-radius: 5px;
    }
    header .input-group:last-child{
        margin-right:10px;
    }
    header .input-group.password .form-control{
        padding-right: 55px;
    }
    header .input-group a{
        position: absolute;
        right:10px;
        top:50%;
        transform: translateY(-50%);
        z-index: 10;
        font-size: 0.8rem;
        color: var(--primary-color3);
        cursor: pointer;
    }
    header .form-control{
        line-height: 50px;
        padding: 0 15px;
        font-size: 0.9rem;
    }
    header .btn,
    header .btn a{
        padding: 0 15px;
        font-weight: 800;
        white-space: nowrap;
    }
    .btn-wrapper .login-btn, 
    .btn-wrapper .login-btn:active, 
    .btn-wrapper .login-btn:focus{
        background-color: var(--primary-color1);
        margin:0;
    }
    .btn-wrapper .register-btn, 
    .btn-wrapper .register-btn:active, 
    .btn-wrapper .register-btn:focus{
        background-color: var(--btn-color2);
        box-shadow: 0px 0px 0px 6px var(--btn-box-shadow);
        -webkit-box-shadow: 0px 0px 0px 6px var(--btn-box-shadow);
        -moz-box-shadow: 0px 0px 0px 6px var(--btn-box-shadow);
        margin: 0;
        margin-left: 15px;
    }
    /*after login header*/
    .af-user-info{
        display: none;
    }
    header .af-user-info-header{
        display: flex;
        align-items: center;
        background-color: var(--bg-color3);
        padding: 5px;
        line-height: 45px;
        border-radius: 15px;
        box-shadow: 3px 3px 10px var(--shadow-color);
        width: 346px;
    }
    .af-user-info-header .currency{
        width: 20px;
        height: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .af-user-info-header .balance{
        flex-grow: 1;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        font-size: 16px;
    }
    .af-user-info-header .balance .amount{
        text-align: center;
        flex-grow: 1;
        font-weight: bold;
    }
    .af-user-info-header .balance i,
    .af-user-info-header .balance svg{
        color:var(--text-color4);
    }
    .af-user-info-header .btn-deposit{
        background: var(--btn-deposit);
        border-radius: 10px !important;
        display: flex;
        align-items: center;
    }
    .af-user-info-header .btn-deposit a{
        line-height: 45px;
        display: block;
        position: relative;
        top:initial;
        left: initial;
        right: inherit;
        transform: none;
        color: var(--btn-text-color1);
        font-size: 1rem;
    }
    .af-user-info-header .btn-deposit img{
        width: 20px;
        margin-right: 10px;
    }
    header .user-id{
        display: flex;
        align-items: center;
        background-color: var(--bg-color3);
        padding: 5px 15px;
        line-height: 40px;
        border-radius: 30px;
        box-shadow: 3px 3px 10px var(--shadow-color);
        width: 200px;
        margin-right: -5px;
        margin-left: 10px;
    }
    header .user-id .profile-icon{
        width: 30px;
        margin-right: 10px;
    }
    header .user-id .user-name{
        flex-grow: 1;
        font-size: 0.9rem;
        text-align: center;
    }
    header .user-id i,
    header .user-id svg{
        font-size: 0.8rem;
        color:var(--text-color4);
    }
    .user-id-wrapper{
        position: relative;
    }
    .user-id-wrapper .dropdown-menu{
        width: 320px;
        text-align: center;
    }
    .user-id-wrapper .dropdown-menu .profile-icon{
        width: 50px;
        margin: 0 auto;
    }
    .user-id-wrapper .dropdown-menu .user-name{
        font-size: 0.8rem;
        margin-top: 5px;
    }
    .user-id-wrapper .dropdown-menu li{
        background-color: var(--bg-color6);
        border-radius: 10px;
        margin: 7px;
        text-align:left;
    }
    .user-id-wrapper .dropdown-menu li a{
        padding: 10px 15px;
        font-size: 0.8rem;
        display: block;
        color: var(--text-color4);
        border-radius: 10px;
    }
    .user-id-wrapper .dropdown-menu li a i,
    .user-id-wrapper .dropdown-menu li a svg{
        font-size: 1.2rem;
        margin-right: 10px;
    }
    .user-id-wrapper .dropdown-menu li a:hover{
        box-shadow: 0 0 5px var(--primary-color1);
    }

    /*side nav*/
    .side-nav{
        top:80px;
        display: block;
        width: 260px;
        transition: all .3s ease;
        padding: 10px 30px 80px 0px;
    }
    .nav-btn{
        width: 30px;
    }
    .side-nav.open .side-nav-wrapper .lang-m{
        display: none;
    }
    .side-nav::-webkit-scrollbar{
        display: none;
    }
    .side-nav .side-nav-wrapper li:after{
        display: none;
    }
    .side-nav.open{
        width: 88px;
        animation: none;
    }
    .side-nav.open .side-nav-wrapper li a,
    .side-nav.open .side-special-nav-wrapper li a{
        justify-content: center;
        padding: 20px 0;
    }
    .side-nav .side-nav-wrapper li a{
        height: 60px;
        line-height: 60px;
        font-size:18px;
        padding-left: 25px;
    }
    .side-special-nav-wrapper ul li a{
        padding-left: 25px;
    }
    .side-nav .side-nav-wrapper li a span,
    .side-nav .side-special-nav-wrapper li a span{
        display: block;
    }
    .side-nav.open .side-nav-wrapper li a span,
    .side-nav.open .side-special-nav-wrapper li a span{
        display: none;
    }
    .side-nav .side-nav-wrapper li .icon,
    .side-nav .side-special-nav-wrapper li .icon{
        width: 25px;
    }
    .side-nav.open .side-nav-wrapper li .icon,
    .side-nav.open .side-special-nav-wrapper li .icon{
        margin-right: 0;
    }
    .side-nav .side-nav-wrapper .lang-m{
        display: none;
    }
    .content-center{
        margin-left: 260px;
    }
    .content-center.open{
        margin-left: 88px;
    }
    .content-wrapper{
        padding: 20px 30px 30px;
        box-sizing: border-box;;
    }
    /*section banner*/
    .banner-lg{
        display: block;
    }
    .banner-sm{
        display: none;
    }
    .swiper-banner .swiper-button-prev,
    .swiper-banner .swiper-button-next{
        display: none;
    }
    .swiper-banner .swiper-pagination{
        display:flex;
        align-items: center;
        justify-content: center;
    }
    /*notice marquee*/
    .notice-wrapper{
        display: flex;
    }
    /*section promo*/
    .promotion-wrapper{
        display:block;
    }
    .section-title{
        font-size: 1.2rem;
        margin: 30px 0 15px 0;
    }
    .title-wrapper .swiper-button-next, 
    .title-wrapper .swiper-button-prev{
        margin:30px 5px 5px;
    }
    /*section sport*/
    .sport-content-wrapper .left .iframe-box-header{
        padding: 15px 20px;
        font-size: 1.2rem;
    }
    .sport-content-wrapper .right .swiper-slide{
        height: 100%;
        align-items: stretch;
    }
    .transaction-wrapper{
        display: flex;
    }
    .download-wrapper{
        display: flex;
    }
    .swiper-provider{
        display: block;
    }
    .seo{
        display: block;
    }
    .seo-text{
        display: block;
    }
    .btn-read-more{
        display:block; 
    }
    footer{
        padding: 0;
    }
    .footer-nav{
        display: none;
    }
    .live-chat-floating{
        right:20px;
        bottom:20px;
        z-index: 10;
    }
    .live-chat-wrapper{
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
    @keyframes blink{
        20%{
            width: 80px;
            height: 80px;
            opacity: 1;
        }
        30%{
            width: 60px;
            height: 60px;
            opacity: 0;
        }
    }
    .app-download{
        display: none;
    }
    .reward {
        position: fixed;
        bottom: 100px;
        right: 16px;
        z-index: 9;
        animation: upDown 1s ease-in-out infinite;
    }
    .reward a {
        display: block;
    }
    @keyframes upDown {
        0%, 100% {
            bottom: 100px;
        }
        50% {
            bottom: 106px; 
        }
    }

    /*lobby page*/
    .filter-bar-wrapper{
        display: flex;
        justify-content: space-between;
    }
    .filter-bar-wrapper .filter-bar{
        width: 33%;
        background-color: var(--bg-filter-bar);
    }
    .filter-bar-wrapper .filter-bar .filter-list a{
        font-size: 1rem;
    }
    .filter-bar-wrapper .search-wrapper{
        width: auto;
        margin-left: 0;
    }
    .filter-bar-wrapper .search-wrapper input{
        width: auto;
        height: 50px;
        line-height: 50px;
        font-size: 1rem;
    }
    .filter-bar-wrapper .search-wrapper i{
        font-size: 1.2rem;
    }
    .filter-bar-wrapper .filter-bar .filter-list{
        width: 33.33%;
        border-radius: 30px;
        margin: 0 5px;
    }
    .filter-bar-wrapper .filter-bar .filter-list.active,
    .filter-bar-wrapper .filter-bar .filter-list:hover{
        background-color: var(--primary-color1);
        color: var(--text-color1);
        border-bottom: none;
    }
    .game-list-wrapper{
        grid-template-columns: repeat(6, 1fr);
    }
    .game-content{
        padding: 25px;
        min-height: 570px;
    }
    .game-content .empty{
        min-height: 570px;
    }
    /*promotion page*/
    .promo-wrapper{
        padding: 25px;
        margin-top: 15px;
        flex-direction: row;
    }
    .promo-wrapper .filter-content{
        margin: 10px 0px 10px 25px;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
    }
    .promo-wrapper .filter-list{
        width: 20%;
        flex-direction: column;
        flex-shrink: 0;
        margin-top: 10px;
    }
    .promo-wrapper .filter-list .filter img{
        display: inline-block;
        margin-right: 10px;
    }
    .promo-wrapper .filter-list .filter{
        padding: 10px 15px;
        text-align: left;
        font-size:1rem;
        display: block;
    }
    .ESP .promo-wrapper .filter-list .filter,
    .RUS .promo-wrapper .filter-list .filter{
        font-size:0.8rem;
    }
    .promo-wrapper .filter-list,
    .ESP .promo-wrapper .filter-list,
    .RUS .promo-wrapper .filter-list{
        width: 150px;
        flex-shrink: 0;
    }
    /*info pages*/
    .content-center-box{
        display: flex;
    }
    .content-center-box .side-nav-sub ul{
        border-radius: 10px;
        background-color: var(--bg-color1);
        display:block;
    }
    .content-center-box .side-nav-sub ul li{
        padding:15px;
        border-bottom:1px solid var(--line-color);
        display:block;
        font-size: 1rem;
        margin: 0;
    }
    .content-center-box .side-nav-sub ul li.active,
    .content-center-box .side-nav-sub ul li:hover{
        border-radius: 0px;
    }
    .content-center-box .side-nav-sub ul li:last-child{
        border-bottom: 0;
    }
    .content-center-box .content-right{
        margin-top: 0;
        margin-left: 20px;
        min-height: 300px;
        flex-grow: 1;
        padding: 30px;
    }
    /* referral */
    .referral-wrapper {
        margin: 0 auto;
    }
    .referral-qr {
        flex-direction: row;
        justify-content: space-between;
        padding: 0 16px 32px;
    }
    .referral-qr-code {
        padding: 16px;
        border-radius: 20px;
    }
    .referral-qr-code > img {
        height: 117px;
    }
    .referral-share-text {
        font-size: 16px;
        text-align: left;
    }
    .referral-qr-share {
        width: calc(100% - 149px);
        padding-left: 32px;
        padding-right: 0;
    }
    .referral-share-link {
        padding: 10px;
    }
    .referral-link {
        padding: 13px 16px;
        border-radius: 10px;
        font-size: 16px;
        width: calc(100% - 190px);
    }
    .referral-btn {
        margin-left: 10px;
    }
    .btn-referral {
        width: 180px;
        font-size: 16px;
        padding: 13px 16px;
        border-radius: 10px;
    }
    .referral-detail {
        padding: 24px 0 32px;
        display: flex;
        flex-direction: row;
        margin: 0 -12px;
    }
    .referral-detail-single {
        flex: 1 0 0%;
        margin: 0 12px 0;
    }
    .referral-detail-top {
        font-size: 18px;
        padding: 10px 16px;
    }
    .statistic-single-top {
        font-size: 14px;
    }
    .btn-referral-detail {
        min-width: 170px;
    }
    .table-referral tr > th {
        font-size: 14px;
    }
    .table-referral tr > td {
        font-size: 14px;
    }   
    /*download pages*/
    .download-page.download-wrapper{
        display:flex;
        padding: 30px 50px;
    }
    .download-page.download-wrapper .left{
        width: 40%;
        padding-left: 20px;
    }
    .download-page.download-wrapper .left .title{
        font-size: 3vw;
        text-align: left;
    }
    .download-page.download-wrapper .left p{
        font-size: 1rem;
        text-align: left;
    }
    .download-page.download-wrapper .right {
        width: 60%;
    }
    .page-header .back{
        left:30px;
    }    
    /*af*/
    .af-side-nav{
        display: block;
        width: 220px;
    }
    .af-box{
        padding: 20px 30px;
        width: calc(100% - 220px);
        margin-top: 20px;
    }
    /*ann*/
    .anncon .tab-content{
        padding:30px 30px 0 30px;
    }
    .ann-title {
        font-size: 22px;
        padding: 15px;
    }
}
@media (min-width: 1300px) {
    /* rewards */
    @keyframes upDown {
        0%, 100% {
            bottom: 100px;
        }
        50% {
            bottom: 116px; 
        }
    }
    .reward img {
        height: 120px;
    }
}
@media (min-width: 1300px) {
    .header-wrapper .logo-text{
        font-size: 2vw;
    }
    .special-nav-wrapper {
        display: flex;
    }
    .header-wrapper{
        width: 100%;
    }
    .btn-wrapper{
        width: 100%;
        max-width: 695px;
    }
    /*section sport*/
    .sport-content-wrapper{
        display: flex;
        align-items: center;
    }
    .sport-content-wrapper .left{
        width: 35%;
        margin: 0;
        height: 359px;
    }
    .sport-content-wrapper .right{
        width: 65%;
        margin-left: 30px;
        height: 359px;
    }
    .transaction-body{
        padding:30px;
    }
    .transaction-list .list-col,
    .transaction-list .header-col{
        font-size: 1rem;
    }
    /*lobby page*/
    .game-list-wrapper{
        grid-template-columns: repeat(7, 1fr);
    }
    .referral-qr {
        width: 65%;
    }
}
@media (min-width: 1400px) {
    .sport-content-wrapper .left{
        width: 40%;
    }
    .sport-content-wrapper .right{
        width: 60%;
    }
}