@media screen and (min-width: 1919px){
    .garis-reward01 {
        width: 215px;
        left: 140px;
    }
    .garis-reward02 {
        width: 215px;
        left: 385px;
    }
    .garis-reward03 {
        width: 215px;
        left: 630px;
    }
    .garis-reward04 {
        width: 215px;
        left: 875px;
    }
}
@media screen and (max-width: 1440px){
    .card-imvid {
        width: 480px;
        height: 480px;
    }
    .mb-menu-mobile, #mmmnunotif {
        display: none;
    }
    .reward-card {
        margin: 0 20px 0 0;
    }
    .garis-reward01 {
        width: 120px;
        left: 90px;
    }
    .garis-reward02 {
        width: 120px;
        left: 240px;
    }
    .garis-reward03 {
        width: 120px;
        left: 390px;
    }
    .garis-reward04 {
        width: 120px;
        left: 540px;
    }
}
@media screen and (max-width: 1361px){
    .garis-reward01 {
        width: 120px;
        left:75px;
    }
    .garis-reward02 {
        width: 120px;
        left: 210px;
    }
    .garis-reward03 {
        width: 120px;
        left: 340px;
    }
    .garis-reward04 {
        width: 120px;
        left: 475px;
    }
}
@media screen and (max-width: 1160px){
	header {
        padding: 20px;
    }
    .logo {
        width: 200px;
    }
    .logo img {
        width: 100%;
    }
    nav ul li {font-size: 12px; margin: 0 5px;}
    .src-button {
        height: 30px;
    }
    .src-button input {
        height: 25px;
    }
    .src-button i {font-size: 12px;}
    .chart-button {
        width: 30px;
        height: 30px;
    }
    .chart-button i { font-size: 12px;}
    .chart-button span {
        width: 15px;
        height: 15px;
        font-size: 9px;
    }
    .sign-button {
        width: 70px;
        height: 30px;
        font-size: 12px;
    }
    .mobile-menu, .mbl-menu {display: none;}
    .poster p {
        text-align: center;
        width: 85%;
    }
    .my-card {
        width: 300px;
        height: 300px;
    }
    .frg-card {
        margin: 50px 30px 30px 30px;
    }
    .image-garansi {
        width: 50%;
        height: 500px;
    }
    .text-garansi {width: 50%;}
    .image-garansi img {
        width: 100%;
        height: 100%;
    }
    .card-imvid {
        width: 385px;
        height: 385px;
    }
    .mb-menu-mobile, #mmmnunotif {
        display: none;
    }
    .reward-card {
        width: 380px;
    }
    .grnum {
        font-size: 10px;
    }
    .get-reward img {
        width: 50px;
    }
    .get-reward small {
        font-size: 8px;
    }
    .garis-reward {
        width: 228px;
        bottom: 123px;
        left: 55px;
    }
    .garis-reward1 {
        width: 60px;
        bottom: 123px;
        left: 55px;
    }
    .garis-reward2 {
        width: 60px;
        bottom: 123px;
        left: 140px;
    }
    .garis-reward3 {
        width: 60px;
        bottom: 129px;
        left: 225px;
    }
    .garis-reward01 {
        width: 65px;
        left: 60px;
        bottom: 40px;
    }
    .garis-reward02 {
        width: 65px;
        left: 155px;
        bottom: 40px;
    }
    .garis-reward03 {
        width: 65px;
        left: 247px;
        bottom: 40px;
    }
    .garis-reward04 {
        width: 65px;
        left: 340px;
        bottom: 40px;
    }
    .form-input input.wa {
        width: 250px;
    }
    .form-input input.npwp {
        width: 200px;
    }
}
@media screen and (max-width: 1024px){
    .my-card {
        width: 280px;
        height: 280px;
    }
    .card-imvid {
        width: 341px;
        height: 341px;
    }
    .fx-space.foot { width: 1000px; }
    .fx-column {width: 300px;}
    .mb-menu-mobile, #mmmnunotif {
        display: none;
    }
    .minicard span {
        font-size: 10px;
    }
    .stok-tiket {
        margin: 0 15px 20px 0;
    }
    .reward-card {
        width: 500px;
        margin: 0 0 30px 0;
    }
    .garis-reward {
        width: 318px;
        bottom: 123px;
        left: 70px;
    }
    .garis-reward1 {
        width: 90px;
        bottom: 123px;
        left: 70px;
    }
    .garis-reward2 {
        width: 90px;
        bottom: 123px;
        left: 185px;
    }
    .garis-reward3 {
        width: 90px;
        bottom: 123px;
        left: 300px;
    }
    .card-profile.mini {
        position: absolute;
        transform: scale(0.7);
        left: -20px;
    }
    .card-profile.full {
        width: 400px;
        margin-left: 230px;
    }
    .garis-reward01 {
        width: 55px;
        left: 52px;
    }
    .garis-reward02 {
        width: 55px;
        left: 132px;
    }
    .garis-reward03 {
        width: 55px;
        left: 212px;
    }
    .garis-reward04 {
        width: 55px;
        left: 292px;
    }
    .containeslogin {
        width: 80%;
    }
    .leftlogin {
        width: 40%;
    }
    .rightlogin {
        width: 60%;
    }
    .leftlogin p {
        font-size: 14px;
    }
    .form-login, .frm {
        width: 70%;
    }
    .form-login input {
        width: 80%;
    }
}
@media screen and (max-width: 768px){
    .logo {width: 250px;}
	nav {
        position: absolute;
        width: 300px;
        height: 100vh;
        background: rgb(255, 255, 255);
        z-index: 999;
        right: 0;
        top: 100px;
        overflow-y: auto;
        transition: all .3s ease-in-out;
        transform: translateX(100%);
        opacity: 0;
    }
    nav.gold {
        background: rgb(22, 22, 22);
    }
    
    nav.active {
        transform: translateX(0);
        opacity: 1;
    }
    /* nav.gold { background: rgb(22, 22, 22); } */
    nav ul {
        display: none;
    }
    .mobile-menu {
        display: block;
    }
    .mobile-menu.gold .main-menu, .mobile-menu.gold .mobile-drop div {
        color: #fff;
    }
    .main-menu {
        width: 100%;
        padding: 15px 10px;
        display: flex;
        align-items: center;
    }
    .main-menu i {
        margin-right: 5px;
        transform: translateY(-3px);
    }
    .mn {
        transition: .3s all ease-in;
    }
    .main-menu span {
        position: absolute;
        right: 5px;
        
    }
    .mn.si {
        transform: rotate(900deg);
    }
    .mobile-drop {
        width: 100%;
        padding: 5px 5px 5px 38px;
        display: none;
    }
    .mobile-drop div {
        padding: 10px 0;
    }
    .mbl-menu {display: inline; margin-left: 10px;}
    .list-to-menu {
        background-color: transparent;
        border: none;
        outline: none;
        cursor: pointer;
        display: flex;
        padding: 0;
        width: 35px;
        height: 35px;
        justify-content: center;
        align-items: center;
        color: #000;
    }
    .list-to-menu.gold { color: #fff;}

    .list-to-menu:hover {
          border: none;
          outline: none;
    }
    .line {
        fill: none;
        stroke: #000;
        stroke-width: 6;
        transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
          stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .line.gold { stroke: rgba(245, 171, 10, 0.911);}
    .line1 {
        stroke-dasharray: 60 207;
        stroke-width: 6;
    }
    .line2 {
        stroke-dasharray: 60 60;
        stroke-width: 6;
    }
    .line3 {
        stroke-dasharray: 60 207;
        stroke-width: 6;
    }
    .opened .line1 {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
        stroke-width: 6;
    }
    .opened .line2 {
        stroke-dasharray: 1 60;
        stroke-dashoffset: -30;
        stroke-width: 6;
    }
    .opened .line3 {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
        stroke-width: 6;
    }
    .src-button.mini { display: none; }
    .card-container {margin: 0 10px;}
    .my-card {
        width: 230px;
        height: 230px;
    }
    .ns-news h2 { font-size: 12px; margin-bottom: 15px; }
    .ns-news p { font-size: 10px; margin-bottom: 5px; }
    .frg-card {
        height: auto;
        margin: 50px 15px;
    }
    .frg-card div{
        width: 50px;
        height: 50px;
    }
    .frg-card span {
        font-size: 14px;
    }
    .frg-card p {
        font-size: 12px;
    }
    .image-garansi {
        width: 50%;
        height: 300px;
    }
    .text-garansi {
        padding: 0 20px 20px 20px;
    }
    .conten-testi {
        width: 650px;
    }
    .testi-image {
        width: 100px;
        height: 100px;
    }
    .testi-text {
        width: 550px;
    }
    .testi-text p {
        width: 500px;
        text-align: center;
    }
    .testi-text span {
        left: 50%;
        transform: translateX(-50%);
    }
    footer {
        height: 600px;
    }
    .footer-top { height: 550px;}
    .fx-space.foot {
        width: 90%;
    }
    .fxhead {
        height: 50px;
    }
    .fx-column {
        width: 220px;
    }
    .member-nav {
        transform: translateX(-100%);
        opacity: 0;
    }
    .member-nav.active {
        transform: translateX(0);
        z-index: 999;
        opacity: 1;
    }
    .member-konten {
        width: 100%;
        margin-left: 0;
    }
    .burger {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mb-menu-mobile, #mmmnunotif {
        display: none;
    }
    .minicard span {
        font-size: 10px;
    }
    .stok-tiket {
        margin: 0 30px 20px 0;
    }
    .reward-card {
        width: 100%;
    }
    .garis-reward {
        width: 460px;
        bottom: 123px;
        left: 100px;
    }
    .garis-reward1 {
        width: 130px;
        bottom: 123px;
        left: 100px;
    }
    .garis-reward2 {
        width: 130px;
        bottom: 123px;
        left: 265px;
    }
    .garis-reward3 {
        width: 130px;
        bottom: 123px;
        left: 430px;
    }
    .mb-card40 {
        width: 50%;
    }
    .containeslogin {
        width: 95%;
    }
    .fx-center.mt-50 {
        margin-top: 10px;
    }
}
@media screen and (max-width: 550px){
    .containeslogin {
        width: 95%;
        height: 700px;
        flex-direction: column;
    }
    .block {
        margin-top: 0;
    }
    .form-login.mt-50 {
        margin-top: 20px;
    }
    .leftlogin, .rightlogin {
        width: 100%;
    }
    .leftlogin {
        height: 700px;
    }
    .rightlogin {
        height: 400px;
        top: 100px;
    }
    .leftlogin p {
        height: 150px;
        overflow-y: auto;
        margin-top: 450px;
    }
    .leftlogin img {
        width: 200px;
        height: auto;
        object-fit: cover;
    }
    .fx-center.mt-50 {
        margin-top: 0;
    }
    .fx-center.mt-50 h4 {
        font-size: 10px;
    }
    .sosmed-button {
        padding: 0 100px;
    }
    .sosmeds {
        width: 25px;
        height: 25px;
        margin-top: 10px;
    }
    .sosmeds img {
        width: 10px;
        height: 10px;
    }
    .block {
        font-size: 0.7em;
    }
    .forgot-pwd {width: 100%;}
}

@media screen and (max-width: 430px){
    header {
        padding: 0 5px 0 10px;
        height: 60px;
    }
    nav {top: 60px;}
    
    .logo {
        width: 150px;
    }
	.src-button.tabs, .chart-button {
        display: none;
    }
    .mbl-menu {margin-left: 5px;}
    .jumbotron.tabss {margin-top: 60px;}
    .mobile-menu {
        padding: 20px 0;
    }
    .src-button.mini {
        display: block;
        width: 92%;
        margin: 0 5px 5px 10px;
        overflow: hidden;
    }
    .src-button.mini input {
        width: 90%;
        padding-left: 10px;
    }
    .poster {
        padding: 50px 0;
    }
    .poster p, .poster h5 {
        text-align: center;
        width: 95%;
        font-size: 12px;
    }
    .poster h1 {
        font-size: 14px;
    }
    .fx-center.mblcard {
        flex-direction: column;
        align-items: center;
    }
    .card-container {
        margin: 20px 0;
    }
    .my-card {
        width: 290px;
        height: 290px;
    }
    .ns-news h2 { font-size: 14px; margin-bottom: 15px; }
    .ns-news p { font-size: 12px; margin-bottom: 5px; }
    .poster p.pg-pilar {font-size: 16px; margin-top:10px ;}
    .frg-card {
        width: 320px;
        height: 320px;
        margin: 25px 0;
    }
    .frg-card div {
        width: 100px; height: 100px;
    }
    .frg-card span { font-size: 18px;}
    .frg-card p { font-size: 14px;}
    .hrgold {display: none;}
    .logombl img {
        width: 250px;
        margin: 0 0 50px 0;
    }
    .fx-left.mblcolum {
        flex-direction: column;
        align-items: flex-end;
    }
    .image-garansi {
        width: 80%;
        height: 250px;
    }
    .text-garansi {
        width: 100%;
        margin-top: 50px;
    }
    .pilar {font-size: 20px;}
    .tabsnav {
        justify-content: center;
        padding: 0;
    }
    .card-imvid {
        width: 200px;
        height: 200px;
    }
    .card-imvid iframe {
        width: 100%;
        height: 200px;
    }
    .conten-testi {
        flex-direction: column;
        padding-top: 50px;
    }
    .testi-text {
        width: 80%;
    }
    footer {
        height: auto;
    }
    .footer-top {
        height: auto;
    }
    .fx-space.foot {
        flex-direction: column;
    }
    .fx-column {
        width: 100%;
        height: auto;
    }
    .fxhead {height: auto;}
    .fxhead.mbl {
        margin-top: 20px;
    }
    .top-bottom {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .member-konten {
        padding: 0 10px;        
        padding-bottom: 80px;
    }
    .mtn-right {
        display: none;
    }
    .mtn-left {
        width: 100%;
        justify-content: space-between;
    }
    .mb-top-nav {padding: 0 15px;}
    .fx-cloumn h1 {font-size: 20px;}
    .fx-cloumn small {font-size: 10px;}
    .burger-menu {order: 2;}
    .fxcloumn {order: 1;}
    .mb-btn.burger {
        margin-right: 0;
    }
    .mtn-left.active, .mtn-right.active {
        transform: translateX(0);
    }
    .mb-menu-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 99;
    }
    .mb-menu-mobile.dark {
        background: rgb(41, 41, 41);
    }
    .dark .btm-nav {
        color: #e9dfb7;
    }
    .dark .btm-nav.active {
        color: #ffae00;
    }
    #mmmnunotif {
        display: inline;
    }
    .mb-menu-mobile {
        display: flex;
        height: 60px;
        color: rgb(133, 133, 133);
        bottom: 0;
        position: fixed;
        justify-content: space-evenly;
        left: 0;
        right: 0;
    }
    .btm-nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 45px;
        font-size: 9px;
    }
    .btm-nav.active, .btm-nav:hover {
        border-bottom: 2px solid #000;
        color: #000;
    }
    .mb-card.profile {
        flex-direction: column;
    }
    .card-profile, .card-profile.full {
        width: 100%;
    }
    .card-profile.full {
        padding: 30px 0;
    }
    .thumb-poto {
        margin-top: 5px;
    }
    .stok-tiket, .tiket-res, .tiket-bas, .tiket-sup, .stok {
        width: 190px;
        margin: 0 10px 20px 0;
    }
    .garis-reward {
        width: 245px;
        bottom: 123px;
        left: 60px;
    }
    .garis-reward1 {
        width: 60px;
        bottom: 123px;
        left: 60px;
    }
    .garis-reward2 {
        width: 60px;
        bottom: 123px;
        left: 153px;
    }
    .garis-reward3 {
        width: 60px;
        bottom: 123px;
        left: 245px;
    }
    .card-profile.mini {
        width: 100%;
        position: relative;
        transform: scale(1) translateX(20px);
    }
    .card-profile.full {
        width: 100%;
        margin-left: 0;
    }
    .get-reward.mbl span:nth-child(2) {
        margin: 20px 0;
    }
    .card-bonus {
        width: 100%;
    }
    .minimbl {
        font-size: 8px;
    }
    .grnum.up::before {
        bottom: 5px;
    }
    .garis-reward01 {
        width: 45px;
        left: 50px;
        top: 43px;
    }
    .garis-reward02 {
        width: 45px;
        left: 125px;
        top: 43px;
    }
    .garis-reward03 {
        width: 45px;
        left: 199px;
        top: 43px;
    }
    .garis-reward04 {
        width: 45px;
        left: 270px;
        top: 43px;
    }
    .alert-warning, .alert-success, .alert-danger {
        align-items: flex-start;
    }
    .alert-warning strong, .alert-success strong, .alert-danger strong {
        margin-right: 5px;
        width: 120px;
    }
    .mb-card40 {
        width: 100%;
    }
    .mb-body.mbl {
        flex-direction: column;
    }
    .jar {
        transform: scale(0.5);
    }
    .img-reward-logo {
        transform: scale(0.4);
        right:-40px;
        top: -40px;
    }
    .stok small {
        font-size: 12px;
    }
    .stok .smbullet, .stok .smbullet strong {
        font-size: 12px;
    }
    .mb-card.full {
        height: 850px;
    }
    .container-jaringan.level4 {
        padding-bottom: 100px;
    }
    .container-jaringan.level1 .jar{
        transform: translate(-440px, -50px) scale(0.5);
        
    }
    .container-jaringan.level2 .jar:nth-child(1){
        position: absolute;
        left: -170px;
        bottom: -80px;
    }
    .container-jaringan.level2 .jar:nth-child(2){
        position: absolute;
        left: 30px;
        bottom: -80px;
    }
    .container-jaringan.level4 .jar:nth-child(1){
        position: absolute;
        left: -60px;
        top: -150px;
    }
    .container-jaringan.level4 .jar:nth-child(2){
        position: absolute;
        left: 40px;
        top: -150px;
    }
    .container-jaringan.level4 .jar:nth-child(3){
        position: absolute;
        left: 140px;
        top: -150px;
    }
    .container-jaringan.level4 .jar:nth-child(4){
        position: absolute;
        left: 240px;
        top: -150px;
    }
    
    .container-jaringan.level8 .jar:nth-child(1){
        position: absolute;
        left: -30px;
        top: 0;
    }
    .container-jaringan.level8 .jar:nth-child(2){
        position: absolute;
        left: 70px;
        top: 0;
    }
    .container-jaringan.level8 .jar:nth-child(3){
        position: absolute;
        left: 170px;
        top: 0;
    }
    .container-jaringan.level8 .jar:nth-child(4){
        position: absolute;
        left: 270px;
        top: 0;
    }
    .container-jaringan.level8 .jar:nth-child(5){
        position: absolute;
        left: 370px;
        top: 0;
    }
    .container-jaringan.level8 .jar:nth-child(6){
        position: absolute;
        left: 470px;
        top: 0;
    }
    .container-jaringan.level8 .jar:nth-child(7){
        position: absolute;
        left: 570px;
        top: 0;
    }
    .container-jaringan.level8 .jar:nth-child(8){
        position: absolute;
        left: 670px;
        top: 0;
    }
    .hrz1 {
        width: 200px;
        height: 1px;
        background: #000;
        left: 160px;
        top: 240px;
    }
    .hrz2 {
        width: 1px;
        height: 50px;
        background: #000;
        left: 160px;
        top: 240px;
    }
    .hrz3 {
        width: 1px;
        height: 50px;
        background: #000;
        left: 360px;
        top: 240px;
    }
    .hrz4 {
        width: 1px;
        height: 20px;
        background: #000;
        left: 260px;
        top: 220px;
    }
    .hrz5 {
        width: 110px;
        height: 1px;
        background: #000;
        left: 100px;
        top: 10px;
    }
    .hrz6 {
        width: 1px;
        height: 50px;
        background: #000;
        left: 100px;
        top: 10px;
    }
    .hrz7 {
        width: 1px;
        height: 50px;
        background: #000;
        left: 210px;
        top: 10px;
    }
    .hrz8 {
        width: 1px;
        height: 20px;
        background: #000;
        left: 155px;
        top: -10px;
    }
    .hrz9 {
        width: 110px;
        height: 1px;
        background: #000;
        left: 300px;
        top: 10px;
    }
    .hrz10 {
        width: 1px;
        height: 50px;
        background: #000;
        left: 300px;
        top: 10px;
    }
    .hrz11 {
        width: 1px;
        height: 50px;
        background: #000;
        left: 410px;
        top: 10px;
    }
    .hrz12 {
        width: 1px;
        height: 20px;
        background: #000;
        left: 355px;
        top: -10px;
    }
    .container-jaringan.btn-prev{
        width: 100px;
        transform: translate(210px, 30px);
    }
}
@media screen and (max-width: 411px){
    .garis-reward {
        width: 230px;
    }
    .garis-reward1 {
        width: 65px;
        left: 55px;
    }
    .garis-reward2 {
        width: 65px;
        bottom: 123px;
        left: 143px;
    }
    .garis-reward3 {
        width: 65px;
        left: 230px;
    }
    .garis-reward01 {
        width: 40px;
        left: 50px;
    }
    .garis-reward02 {
        width: 40px;
        left: 120px;
    }
    .garis-reward03 {
        width: 40px;
        left: 192px;
    }
    .garis-reward04 {
        width: 45px;
        left: 258px;
    }
    .stok-tiket, .tiket-res, .tiket-bas, .tiket-sup, .stok {
        width: 185px;
    }
}
@media screen and (max-width: 406px){
    .garis-reward {
        width: 220px;
    }
    .garis-reward1 {
        width: 60px;
        left: 55px;
    }
    .garis-reward2 {
        width: 60px;
        bottom: 123px;
        left: 140px;
    }
    .garis-reward3 {
        width: 60px;
        left: 225px;
    }
    .garis-reward01 {
        width: 40px;
        left: 50px;
    }
    .garis-reward02 {
        width: 42px;
        left: 115px;
    }
    .garis-reward03 {
        width: 40px;
        left: 185px;
    }
    .garis-reward04 {
        width: 45px;
        left: 250px;
    }
    .stok-tiket, .tiket-res, .tiket-bas, .tiket-sup, .stok {
        width: 180px;
    }
}
@media screen and (max-width: 391px){
    .garis-reward {
        width: 230px;
        left: 50px;
    }
    .garis-reward1 {
        width: 65px;
        left: 50px;
    }
    .garis-reward2 {
        width: 65px;
        bottom: 123px;
        left: 133px;
    }
    .garis-reward3 {
        width: 65px;
        left: 215px;
    }
    .garis-reward01 {
        width: 50px;
        left: 40px;
    }
    .garis-reward02 {
        width: 47px;
        left: 108px;
    }
    .garis-reward03 {
        width: 50px;
        left: 173px;
    }
    .garis-reward04 {
        width: 50px;
        left: 240px;
    }
    .stok-tiket, .tiket-res, .tiket-bas, .tiket-sup, .stok {
        width: 175px;
    }
}
@media screen and (max-width: 380px){
	.card-imvid {
        width: 180px;
        height: 190px;
    }
    .stok-tiket, .tiket-res, .tiket-bas, .tiket-sup, .stok {
        width: 170px;
        margin: 0 7px 20px 0;
    }
    .get-reward small {
        font-size: 5px;
    }
    .garis-reward {
        width: 205px;
        bottom: 120px;
        left: 55px;
    }
    .garis-reward1 {
        width: 50px;
        bottom: 130px;
        left: 55px;
    }
    .garis-reward2 {
        width: 50px;
        bottom: 130px;
        left: 133px;
    }
    .garis-reward3 {
        width: 50px;
        bottom: 125px;
        left: 215px;
    }
    .stok small {
        font-size: 11px;
    }
    .icn {
        width: 25px;
        height: 25px;
        right: 10px;
        top: 10px;
    }
    .icn.active i {
        font-size: 16px;
    }
    .get-reward.a320 .grnum {
        font-size: 9px;
    }
    .garis-reward1 {
        width: 55px;
        bottom: 118px;
        left: 50px;
    }
    .garis-reward2 {
        width: 55px;
        bottom: 118px;
        left: 130px;
    }
    .garis-reward3 {
        width: 55px;
        bottom: 118px;
        left: 210px;
    }
    .get-reward.mbl .grnum {
        font-size: 7px;
    }
    .circles-open {
        margin: 0;
    }
    .circles-open i {
        font-size: 18px;
    }
    .get-reward.mbl .grnum.up::before {
        top: 0;
    }
    .garis-reward01 {
        width: 40px;
        left: 42px;
        top: 38px;
    }
    .garis-reward02 {
        width: 40px;
        left: 106px;
        top: 38px;
    }
    .garis-reward03 {
        width: 40px;
        left: 170px;
        top: 38px;
    }
    .garis-reward04 {
        width: 40px;
        left: 232px;
        top: 38px;
    }
}
@media screen and (max-width: 325px){
	.card-imvid {
        width: 150px;
        height: 150px;
    }
    .stok-tiket {
        width: 100%;
        margin: 0 0px 10px 0;
    }
    .tiket-res, .tiket-bas, .tiket-sup, .stok {
        width: 100%;
    }
    .reward-card {
        width: 100%;
        margin: 0 0 20px 0;
    }
    .img-reward-logo {
        top: 20px;
    }
    .garis-reward {
        width: 170px;
        left: 45px;
    }
    .get-reward.a320 .grnum {
        font-size: 7px;
    }
    .grnum.up::before {
        bottom: 3px;
    }
    .garis-reward1 {
        width: 40px;
        bottom: 115px;
        left: 45px;
    }
    .garis-reward2 {
        width: 40px;
        bottom: 115px;
        left: 110px;
    }
    .garis-reward3 {
        width: 40px;
        bottom: 115px;
        left: 175px;
    }
    .get-reward.mbl .grnum {
        font-size: 5px;
    }
    .garis-reward01 {
        width: 30px;
        left: 36px;
        top: 38px;
    }
    .garis-reward02 {
        width: 28px;
        left: 90px;
        top: 38px;
    }
    .garis-reward03 {
        width: 28px;
        left: 143px;
        top: 38px;
    }
    .garis-reward04 {
        width: 28px;
        left: 195px;
        top: 38px;
    }
}