/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Oct 16, 2017, 2:22:56 PM
    Author     : Jawhar
*/

@media only screen and (max-width: 1100px) {

}
@media only screen and (max-width: 1024px) {

}
@media only screen and (max-width: 991px) {
    .container>.navbar-header {
        margin: 0;
        float: left;
    }
    .navbar-nav {
        margin: 0;
    }
    .login-buttons {
        float: right;
    }
    .navbar .navbar-nav > li > a.login {
        margin-right: 0;
    }
    .navbar .navbar-nav > li > a.login:after {
        display: none;
    }
    .navbar .navbar-nav > li > a.register {
        display: none;
    }
    .header-filter:before {
        position: absolute;
        width: 100%;
        height: 100%;
        content: '';
        display: block;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.4);        
    }
    .hero-page .brand h1 {
        color: #fff;
        font-size: 2em;
    }
    .hero-page .brand h3 {
        font-size: 1.2em;
        color: #dedede;        
    }
    .main-search .form-group {
        margin-bottom: 5px;
    }
    .input-group.main-search {
        display: block;
        box-shadow: none;
    }
    .input-group.main-search .form-control:first-child {
        border-radius: 5px;
        padding: 20px;
        -webkit-box-shadow: 0 14px 24px rgba(50, 48, 58, 0.25); 
        box-shadow: 0 14px 24px rgba(50, 48, 58, 0.25); 
    }
    .input-group.main-search .input-group-addon {     
        padding: 12px 50px 10px;
        font-size: 15px;        
        border-radius: 5px 5px 5px 5px;
        -webkit-box-shadow: 0 14px 24px rgba(50, 48, 58, 0.25); 
        box-shadow: 0 14px 24px rgba(50, 48, 58, 0.25); 
        z-index: 0;
    }
    .slick-dots {
        bottom: -5px;
    }
    .slick-dots li {
        width: 30px;
    }
    .slick-dots li button {
        width: 25px;
    }
    .section-how-works {
        padding: 15px 0;
    }
    .section-how-works h1, .section-best-deals h1 {
        text-align: center;       
        font-size: 25px;
        margin-bottom: 30px;
    }
    .section-how-works .steps:after {
        display: none;
    }
    .section-best-deals {
        padding: 30px 0;
    }
    .offer-banner-section {
        padding: 0;
    }
    .offer-banner {
        margin-bottom: 20px
    }
    .download-link {
        margin-top: 60px;        
        position: relative; 
        text-align: center;
    }
    .download-link a {
        max-width: 45%;        
        margin-right: 5px;
    }
    .download-link a img {
        max-width: 100%;
    }
    .download-img img {
        float: none;
        margin: 0 auto;
        display: block;
    }
    footer p {
        text-align: center;
    }
    footer img {
        margin-top: 0px;
    }
    footer {
        padding: 30px 0 30px;
    }
    footer ul li a, footer .copyright {
        padding: 10px 5px;
    }
    .modal-dialog.modal-login {
        width: 314px;
        margin: 10px auto;
        margin-top: 80px;
    }
    .page-header ul.breadcrumbs {
        padding: 15px 0px 15px;   
        text-align: left;
    }
    .page-header h4 {
        padding: 7px 0 20px;
        margin: 0;
        text-align: left;
    }
    .radio.sort input[type=radio]:checked ~ a {
        transition: all 0.3s ease;
        padding: 2px 5px;
        border: 1px solid #d30361;
        border-radius: 50px;
    }    
    .radio.sort a {
        transition: all 0.3s ease;
        padding: 2px 5px;
        border: 2px solid #fdfdfd;
        border-radius: 50px;
    }
    ul.switch {
        display: none;
    }
    .section-filter , .section-featured-offers {
       display: none;
    }
    
    .rest-search-results {
        padding: 5px 0;
    }
    .card.menu-card .payment-options li {
        margin-right: 15px;
    }
    .menu-card, .offer-box {
        margin-bottom: 10px;
    }
    .checkout-details h3 {
        font-size: 20px;
    }
    .checkout-details h2 {
        line-height: 30px;   
        font-size: 25px;    
    }
    .success-details h3 {
        font-size: 15px;
    }
    .success-details i {
        margin-top: -5px;
        font-size: 10px;
    }
    .page-header ul.breadcrumbs li {
        margin-right: 12px;
    }
    .page-header ul.breadcrumbs li:after {
        right: -6px;
    }
    .card.my-account {
        padding: 15px;
    }
    .profile .avatar img {       
        margin: 0 auto;
        -webkit-transform: translate3d(0, -45%, 0);
        -moz-transform: translate3d(0, -45%, 0);
        -o-transform: translate3d(0, -45%, 0);
        -ms-transform: translate3d(0, -45%, 0);
        transform: translate3d(0, -45%, 0);
    }
    .profile .name {
        -webkit-transform: translate3d(0, -45%, 0);
        -moz-transform: translate3d(0, -45%, 0);
        -o-transform: translate3d(0, -45%, 0);
        -ms-transform: translate3d(0, -45%, 0);
        transform: translate3d(0, -45%, 0);
    }
    .profile .name h3, .profile .name h5 {
        margin: 0px 0 0;
        text-align: center;
    }
    .card.my-account .account-details {
        padding: 0;
        padding-top: 30px;
    }
    .card.my-account .account-details .nav-pills li {
        width: 24%;
    }
    .card.my-account .account-details .nav-pills a {
        height: 100px;
        min-width: 50px;
        font-size: 9px;
        text-align: center;
        line-height: 15px;
        padding: 5px;
    }
    .card.my-account .account-details .nav-pills a i {
        margin: 5px 0;
        padding: 0;
        margin-bottom: 12px;
    }
    .account-details table {
        width: 100%;
        overflow-x: scroll;
    }
    .card.menu-card .cost li a {        
        margin-left: 0px;
        width: 100%;
        float: left;
    }
    .menu-item {
        margin-bottom: 18px;
    }
    .menu-item .offer-tag {
        top: initial;
        bottom: -33px;
        width: 100%;
        margin: 15px 0;
    }
    .menu-item .price {
        padding: 10px 5px;
        text-align: right;
        margin: 10px 0;
    }
    .menu-item .add-item {
        padding: 5px 0 3px;
    }
    .menu-item .add-item .btn {
        margin: 0;
        margin-bottom: 10px;
        margin-right: 20px;
        float: right;
    }

    .section-filter.mobile-filter {
        display: block;
    }
    .section-filter.mobile-filter .btn-filter {
        width: 48%;
        cursor: pointer;
    }
    .section-filter.mobile-filter .btn-sort {
        width: 48%;
        cursor: pointer;
        padding: 11px 0;
        border: 1px solid #ddd;       
        color: #2a2a2a;
        text-transform: none;
        font-size: 13px;
        float: right;
    }
    .section-filter.mobile-filter .btn-sort span {
        padding: 0 3px;
    }
    .open > .btn.btn-primary.btn-sort.dropdown-toggle {
        border: 1px solid #d30361;
    }
    .sort-drop {
        right: 20px;
        left: inherit;
        top: 86%;
    }
    .mobile-filter-box {
        display: block;
        position: fixed;
        top: 0;
        right: -10000px;
        background: #fff;
        z-index: 9999;
        height: 100%;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }
    .mobile-filter-box.show {
        right: 0;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }
    .mobile-filter-box .checkbox label {
        width: 100%;
        margin: 6px 0;
    }
    .mobile-filter-box .radio.sort label {
        width: 100%;
        margin: 10px 0; 
        padding: 0;
    }
    .filter-box-title {
        text-align: center;
        background: #d30361;
        color: #fff;
        margin: 0;
        height: 8%;
    }
    .filter-title {
        height: 82%;
        background: #b7b7b7;
        padding: 0;
    }
    .filter-items {
        height: 82%;
    }
    .mobile-filter-box .nav-pills > li.active > a, .mobile-filter-box .nav-pills > li.active > a:focus, .mobile-filter-box .nav-pills > li.active > a:hover {
        background-color: #636363;
        color: #FFFFFF;
        box-shadow: 0 16px 26px -10px rgba(99, 99, 99, 0.43), 0 4px 25px 0px rgba(99, 99, 99, 0.34), 0 8px 10px -5px rgba(99, 99, 99, 0.55);
        border-radius: 0;
    }
    .filter-buttons {
        background-color: #636363;
        text-align: right;
        padding: 0px 30px;
        height: 10%;
        width: 100%;
        float: left;
    }
    .filter-buttons .btn {
        width: 48%;
        cursor: pointer;
    }

    #cart-box.show .cart-height, #cart-box.show .card-content .requirements, #cart-box.show .cart-item  {
        display: block;
    }
    #cart-box .card.checkout.show-button {
        display: inline-block;
    }
    #cart-box {
        position: fixed;
        bottom: -8px;        
        left: 0;
        z-index: 9999;
        margin: 0;
        width: 100%;
        -webkit-box-shadow: 0px 0px 30px rgba(78, 83, 79, 0.41);
        box-shadow: 0px 0px 30px rgba(78, 83, 79, 0.41);
    }
    #cart-box.bottom {
        bottom: 0px;  
    }
    .card.cart {
        border-radius: 0;
    }
    .card.checkout {
        border-radius: 0;
        display: none;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }
    .card.cart .card-content { 
        padding: 0;
        width: 100%;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }
    .card.cart .card-content .cart-title {
        margin: 0;
        font-weight: 600;
        margin-bottom: 0px;
        padding: 10px 60px 10px;
        text-align: left;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }
    .card.cart .card-content .cart-title .count {
        display: block;
        padding: 10px 18px;
        position: absolute;
        background: #d30361;
        color: #fff;
        top: 0;
        left: 0;   
        font-size: 15px;     
    }
    .card.cart .card-content .cart-title .total-price {
        display: block;
        padding: 10px 18px;
        position: absolute;        
        color: #d30361;
        top: 0;
        right: 0;
        font-size: 15px;
    }
    #cart-box .cart-height {
        padding: 0px 12px;
        display: none;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }    
    .card-content .requirements {
        padding: 0px 12px;
        display: none;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }
    .card-content .requirements-text {
         padding: 0px 12px;
    }
    .cart-item {
        padding: 10px 12px;
         display: none;
         -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }
    .menu-item .item-img img {
        border-radius: 5px 0 0 0px;
    }
    .rest-menu-categories .dropdown .btn {
        display: none;
    }
    .rest-menu-categories ul {
        margin: 5px 0 0 0;
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .rest-menu-categories ul::-webkit-scrollbar { 
        display: none; 
    }
    .rest-menu-categories a {
        line-height: 24px;
    }
    .rest-menu-categories a.cate-item:after {
        bottom: -5px;
    }
    .hide-on-mobile {
        display: none;
    }
    .for-mobile {
        display: block;
    }
    .rest-menu-list.mtop {
        margin-top: 0px;
    }   
    .rest-menu-list.mobiletop {
        margin-top: 75px;
    }
    .modal-dialog.modal-food-choice {
        width: 90%;
        margin-bottom: 70px;
    }
    .modal-content.card-popup .radio label {
        width: 100%;
    }

}
@media only screen and (max-width: 350px) {

}
@media (min-width: 768px) {
    .navbar-right {
        float: right !important;
        margin-right: 0px;
    }
}