@media only screen and (max-width:500px) {
    .p_online_pad .ipt .ipt_name:nth-child(1), .p_online_pad .ipt .ipt_name:nth-child(2){
        width:100% !important;
        font-size:15px !important;
        line-height:20px !important;
        clear:both !important;
    }

    .p_online_pad .ipt .ipt_name input,.p_online_pad .ipt .ipt_name select{
        width:100%;
        max-width: 100% !important;
        font-size:15px !important;
        line-height:20px !important;
        height:30px;
    }
}

@media only screen and (max-width: 979px) {
    .imenu{
        width: 82%;
        margin-left:8%;
        margin-right:8%;
        max-width:98%;
        min-height: 7px;
        float: left;
        margin-top:2%;
        margin-bottom:2%;
    }

    #fp-cart.show{
        z-index: 1;
    }

    textarea#noted{
        font-size: 20px !important;
        line-height: 25px!important;
    }

    .bgh-footer .tmiddle{
        display:block;
        text-align: center;
        float:right;
        padding-right: 10px !important;
    }

    .bgh-footer {
        position: absolute !important;
        bottom:0 !important;
        z-index:1;
    }

    .bgh-footer > div > a.bgh-big-button{
        font-size: 14px !important;
        margin: 2px;
        padding: 5px;
    }

    .bgh-footer  .bgh-div-3, .bgh-footer  .bgh-div-2,.bgh-footer  .bgh-div-4{
        width:auto !important;
        font-size: 12px !important;
    }

    .bgh-div-2 {
        width: 30% !important;
        height: auto;
    }

    #fp-cart{
            position: absolute;
            top: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            background: white;
    }

    #fp-boba {
        position: absolute;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 100%  !important;
        max-height: 100%  !important;
    }

    #fp-cart .bgh-header{
        display:none;
    }

    #fp-cart #bgh-total-cart{
        padding-top:0px !important;
    }

    #bgh-body-cart {
        top: 180px !important;
    }

    #cart-title-phone{
        display:block;
    }

    #fp-product .bgh-footer{

    }

    .bgh-body-container{
        top: 120px !important;
    }

    .bgh-header .fp-logo{
        height:90px !important;
    }

    .bgh-header .fp-logo .fp-title{
        line-height: 40px !important;
        position: absolute  !important;
        padding-left: 10%  !important;
        color: white  !important;
        background: rgba(0, 0, 0, 0.48)  !important;
        width: 60%  !important;
        margin-left: 30%;
        top: 0px !important;
        font-size: 25px  !important;
    }

    .bgh-header .fp-logo .fp-title .fp-title-description{
        font-size: 15px;
        max-height: 80px;
        line-height: 20px;
        overflow-y: scroll;
    }

    .bgh-header .fp-logo img{
        height: 100px !important;
    }

    .on-phone{
        display:block !important;
    }

    .not-phone{
        display:none !important;
    }

    .product-card{
        width:95% !important;
        margin-left:2.5%  !important;
        margin-right:2.5%  !important;
        height: 220px !important;
        padding-top:2px !important;
        margin-top:10px !important;
    }

    .product-card div.product-image{
        width:40% !important;
        margin-right:1% !important;
        float:left;
    }

    .product-card div.product-price, .product-card .product-name, .product-card .product-desc{
        width:50% !important;
        margin-left:1% !important;
        float:left;
    }

    .bgh-menu{
        padding-top: 0px !important;
        height: 120px !important;
    }

    .bgh-menu > div > div{
        max-height: 80px !important;
    }

    .bgh-body{
        padding-bottom: 0 !important;
    }

    .scrolling-wrapper img{
        height: 60px !important;
    }

    div.location-container{
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        height:100%;
        padding:0;
        margin:0;
    }

    .location-container .at-location .smis_form > div{
        width:100% !important;
        padding-left:0 !important;
    }

    div.at-location{
        margin:0 !important;
        padding:0 !important;
    }

    #fp_location_add_form_form{
        width:90%;
        padding-left:5% !important;
        padding-right:5% !important;
    }

    div.location-header{
        padding:0.5% !important;
        margin-top:0.5% !important;
        margin-bottom:0.5% !important;
        width:99% !important;
        clear:both;
    }

    div.location-header > div {
        font-size: 18px !important;
        width:30% !important;
    }

    div.location-note{
        line-height: 40px;
        font-size: 30px;
    }

    div#location-input-container{
        position : absolute;
        top: 110;
        /* bottom: 550px; */
        overflow:
        scroll;
        left:0;
        height: 130x;
        padding-bottom: 10;
        right:0;
        border-top: solid 1px #cdcdcd;
        /* background: red; */
    }

    div.at-location label{
        width:100% !important;
        font-size:20px !important;
        line-height: 30px !important;
        height:20px !important;
        margin-top: 4px;
        margin-bottom: 4px;
        margin-left: 0 !important;
    }
    
    div.at-location input,div.at-location select {
        width:100% !important;
        font-size:20px !important;
        line-height: 30px !important;
        height:35px !important;
        margin-top:5px;
        margin-bottom:5px;
        margin-left: 0 !important;
        max-width:100% !important;
    }

    #fp-membership-offer{
        /* position: relative; */
        bottom: 80px;
        margin-top: 100px !important;
    }
    #fp-membership-offer h1{
        font-size:20px;
        line-height:25px;
    }

     #fp-membership-offer a{
         font-size:15px;
     }

    .fcontainer_fp_location_at_delivery_address .input-append {
        width:100% !important ;
    }

    

    #fp_location_at_delivery_address{
        width:85% !important;
        max-width:96% !important;
    }

    .location-container .at-location .form-container .btn-gps{
        height:25px !important;
        margin-top:5px;
    }

    .location-container .at-location .form-container .btn-gps i{
        line-height:20px !important;
    }

    .payment-title{
        /* display:none !important; */
    }

    .payment-button{
        font-size:25px !important;
    }

    .payment-button-container{
        height:70px !important;
    }

    #fp-payment-container .clear{
        margin-bottom: 0px !important;
    }

    #fp-payment-container{
        padding: 10px !important;
        z-index: 1000000;
    }

    .ipt_name{
        clear:both !important;
        width: 98% !important;
        line-height: 40px !important;
        font-size: 25px;
    }

    .p_online_pad{
        margin-top:10px !important;
    }
    
    .p_online_pad .ipt .ipt_name:nth-child(1){
        width: 98%;
        float: left;
        font-size: 25px;
    }
    
    .p_online_pad .ipt .ipt_name:nth-child(2){
        width:98%  !important;
        float:left  !important;
        font-size:25px !important; 
    }
    
    .p_online_pad .cc{
        width:98%  !important;
        font-size:25px !important; 
    }

    .p_online_pad .ipt .bgh-div-2 .bgh-big-button{
        width: 10px !important;
        height: 20px !important;
        border-radius: 52px !important;
        font-size: 25px !important;
        line-height: 40px !important;
        margin: 5px !important; 
        padding: 5px !important;
    }

    
    .only-phone{
      display:block;  
    }

    .ifooter {
        height: 70px;
    }

    .ibody {
        bottom: 80px;
        top: 130px;
    }

    .ifp-menu{
        padding-top:0px !important;
    }

    .bgh-header div.fp-price div.mnf_checkbox{
        /* width: 40% !important; */
        font-size: 18px !important;
    }

    .bgh-header div.fp-price div.checkbox_pict font{
        font-size: 15px !important;
        line-height:18px !important;
    }

    .bgh-header div.fp-price input.mnf_checkbox{
        width: 25px !important;
    }

    div.block-ckb{
        width: 45% !important;
        padding:1% !important;
        min-height:215px !important;
    }

    .payment-button{
        padding: 10px !important;
        font-size: 18px !important;
        width: 80px !important;
        margin: 5px !important;
    }

    .fp-boba-right, .fp-boba-left{
        top:30 !important;
        opacity: 0.9;
    }

    .fp-price-head > div > div{
        font-size:25px !important;
        line-height: 35px;
    }

    .fp-users-title{
        width: 95% !important;
        padding-left: 5%!important;
        text-align: left !important;
        padding-top: 20px;
        padding-bottom: 10px;
        margin: 0;
        line-height: 30px !important;
    }

    .login-area input{
        width:90%;
        padding-right:10px !important;
        padding-left:10px !important;
        padding-bottom: 5px !important;
        padding-top: 5px !important;
        font-size: 20px !important;
        height: 40px;
        line-height: 40px !important;
    }

    .cart_count a.bgh-big-button{
        width: 100% !important;
    }

    .cart_count{
        max-width: 100% !important;
        min-width: 100px;
        text-align: right;
    }

    .cart_count .bgh-big-button{
        width:100%;
    }

    

    .cart_count{
        font-size: 14px;
    }
}




@media only screen and (min-width: 979px) {
    .only-phone{
        display:none;  
    }

    .bgh-footer .tmiddle{
        display:none;
    }

    #cart-title-phone{
        display:none;
    }

    .on-phone{
        display:none !important;
    }

    .not-phone{
        display:block !important;
    }

    .cart_count{
        display:none !important;
    }


    
}

@media only screen and (min-width: 566px) and (max-width: 979px) {
    .fcontainer_fp_location_at_delivery_address .input-append a{
        width: 11% !important;
    }

    #search-on-home{
        bottom: 80px !important;
    }

    #search-on-home input{
        height: 60px !important;
    }
    .bgh-body-container{
        bottom: 143px !important;
    }
}


@media only screen and (max-width: 566px){
    #title-cart{
        display: block;
        text-align: right;
        font-size: 30px;
        line-height: 50px;
        color: var(--main);
        position: fixed;
        top: 10;
        left: 0;
        right: 0;
        text-align: center;
    }
    #title-cart .image-only{
        position: absolute;
        left: 50%;
        margin-left: -31px;
    }
    .iheader{

        border-bottom:solid 1px #eee;
    }
    
    .iheader, .language-one{
        height: 50px;
    }

    .ibody {
        top: 90px;
    }

    .language-one{
        line-height:50px;
        width: 100px;
        margin-left:10px;
    }

    .language-one .language-title{
        font-size: 15px;
    }

    .fcontainer_fp_location_at_delivery_address .input-append a{
        width: 9% !important;
    }

    .tips-button a{
        font-size: 20px !important;
        margin: 10px !important;
        padding: 10px !important;
    }

    #order_number{
        line-height: 20px !important;
        margin-left: 1% !important; 
        width:90% !important;
        margin-left: 5% !important;
        padding:5px !important;
        font-size:20px !important;
    }

    .button-logout .bgh-big-button, .button-login .bgh-big-button{
        font-size:21px !important;
        line-height: 50px;
        padding-left: 50px;
        padding-right: 50px;
        margin: 40px;
    }

    #search-on-home{
        bottom: 80px !important;
    }

    #search-on-home input{
        height: 60px !important;
    }

    .bgh-body-container{
        bottom: 143px !important;
    }


    /**cart ux**/
    #top-menu{
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow-y: scroll !important;
        white-space: nowrap;
        padding-left: 0px;
        padding-right: 0px;
        position: fixed!important;
        z-index: 10000000000 !important;
        top: 50px;
        bottom: 80px;
        left: 100%;
        right: 0;
        background: white;
        transition: all 0.5s;
        border-left: solid 1px #c3c3c3;
        border-top: solid 1px #c3c3c3;
        border-bottom: solid 1px #c3c3c3;
    }

    #top-menu.show-up{
        left: 50%;
    }

    #top-menu div.card:first-child{
        border-top: none !important;
    }

    #top-menu div.card:last-child{
        margin-bottom: 0px;
    }

    #top-menu > div.card{
        float: left !important;
        width: 100% !important;
        margin-left: 0px !important;
        height: 70px;
        text-align: left;
        margin-right: 10px;
        border-top: solid 1px #dadada;
    }

    #top-menu > div.card> div.bgh-btn{
        white-space: break-spaces;
        font-size: 12px;
        line-height: 20px;
        width: 22.5%;
        float: left;
    }

    #top-menu > div.card:hover > div.bgh-btn, #top-menu > div.card > div.active{
        border: none !important;
        background-color: transparent !important;
        color: white;
    }

    #top-menu > div.card > div.active{
        color: var(--main)  !important;
    }

    #top-menu > div.card:hover{
        background-color: var(--main);
        line-height: 70px;
    }


    #top-menu > div.card > div{
        float:left;
        clear: none;
    }

    #fp-home > a.btn{
        display: none;
    }

    .bgh-body-container {
        top: -80px !important;
    }

    #fp-cart{
        width: 100%;
        margin-left: -100% !important;
        transition: all 0.5s;
    }

    #fp-cart .bgh-footer{
        margin-left:100% !important;
        width: 100%;
        transition: all 0.5s;
    }

    #fp-cart.show{
        margin-left: 0 !important;
    }

    #fp-cart.show .bgh-footer{
        margin-left:0 !important;
    }

    #fp-product .bgh-body-container{
        top:120px !important;
        bottom: 82px !important;
    }

    #fp-cart{
        background: transparent !important;
        z-index: 1;
    }

    #fp-cart .bgh-header{
        width: 80%;
        border-right: 1px solid #dadada;
        background: white;
    }
    #fp-cart #bgh-body-cart{
        width: 80%;
        border-right: 1px solid #dadada;
        background: white;
    }

    #fp-cart #bgh-total-cart{
        width: 75%;
        border-right: 1px solid #dadada;
        background: white;
        height: 100%;
    }

    #bgh-total-cart > div > h3.name{
        font-size: 11px !important;
    }

    #bgh-body-cart > div > h5.price{
        font-size: 15px !important;
    }

    #bgh-body-cart > div > h5.name{
        font-size: 13px !important;
    }

}

@media only screen and (max-width: 850px){
    .reviews-btn > .bgh-big-button {
        width: 10px;
        height: 20px;
        border-radius: 15px;
        border: 1px solid #000000;
        background-color: #ffffff;
        color: #000000;
        font-family: "Circular Std";
        font-size: 15px;
        font-weight: 700;
        font-family: "Segoe UI";
        font-weight: 700;
        line-height: 40px;
        margin: 10px;
        padding: 5px;
    }

    .reviews-btn{
        bottom:10px !important;
    }

    .button-reviews{
        left: 25.5% !important;
    }

    .identity > div{
        font-size: 16px !important;
    }

   
}


@media only screen and (max-width: 401px) {
    
    #bgh-total-cart > div > h3.name{
        width:35% !important;
        font-size:11px  !important;
    }

    #bgh-total-cart > div > h3.price{
        width:50%  !important;
        font-size:13px  !important;
    }

   
}