/*--------------------------------------------

Template Name: RedChili | Responsive HTML5 Template
Template URI: https://radiustheme.com/
Description: RedChili | RedChili Responsive HTML5 Template.
Author: Radius Theme
Author URI: https://radiustheme.com/
Version: 1.0

===============================   
          CSS INDEX
===============================

1. Template Default CSS
  1.1 Title Bar Styles
  1.2 Title Styles
  1.3 Button Styles 
  1.4 Owl Controls Area Styles
  1.5 ScrollUp Area Styles
  1.6 Preloader Area Styles
  1.7 Inner Page Bannar Area Styles
  1.8 Pagination Area Styles
2. Header Area Start Here
  2.1 Header Area Common Styles
  2.2 Header 1 Area Styles
  2.3 Header 2 Area Styles
  2.4 Header 3 Area Styles
  2.5 Mobile Menu Area styles
3. Slider Area Start Here
4. About Area Start Here
  4.1 About 1 Styles
  4.2 About 2 Styles
5. About Page Area Start Here
  5.1 About Us Page 1 Area Styles
  5.2 About Us Page 2 Area Styles
6. Tasty Menu Area Start Here
7. Recipe Of The Day Area Styles
8. Recipe Of The Day 2 Area Styles
9. Chefs Area Styles
  9.1 Expert Chefs Area Styles
  9.2 Expert Chefs Box Styles
  9.3 All Chefs Area Styles
  9.4 Single Chef Area Styles
10. Table Reservation Area Styles
  10.1 Table Reservation 1 Area Styles
  10.2 Table Reservation 2 Area Styles
  10.3 Table Reservation 3 Area Styles
  10.4 Table Reservation Page Area Styles
11. Brand Area Styles
12. Client Reviews Area Styles
13. Client Area Styles
14. Award 1 Area Styles
15. Our Recipes Area Styles
16. Recipe Box 2 Area Styles
17. Food Menu Start Here
  17.1 Food Menu 1 Area Styles
  17.2 Food Menu 2 Area Styles
  17.3 Food Menu 3 Area Styles
  17.4 Food Menu 4 Area Styles
  17.5 Food Menu 5 Area Styles
  17.6 Single Menu Area Styles
18. Special Dish Styles
19. Blog Page Area Styles
20. Single Blog Page Area Styles
21. Single Recipe Area Styles
22. 404 Error Page Area Styles
23. Contact Us Page Area Styles
24. Sidebar Area Start Here
  24.1 Sidebar Search Area Styles
  24.2 Sidebar Product Tags Area Styles
  24.3 Sidebar Categories Area Styles
  24.4 Sidebar Archives Area Styles
  24.5 Sidebar Popular Menu Area Styles
  24.6 Sidebar Recent recipes Area Styles
25. Footer Area Styles
26. Cart Page Area styles
27. Checkout Page Area styles
28. Switch Styling Area Styles

--------------------------------------------*/
/*=====================================
1. Template Default CSS  
=======================================*/

/*--------------------------------------
17.4 Food Menu 4 Area Styles
----------------------------------------*/
.food-menu4-area .product_box {
    cursor: pointer;
    border: none;
    width: auto;
    margin-bottom: auto;
}
#product_list_body::-webkit-scrollbar{
    display: none;
}

#product_list_body {
    max-height: 680px !important;
}
.default-btn {
    font-family: 'Oswald', sans-serif;
    color: #ffffff;
    padding: 12px 44px;
    background: #e7272d;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    display: inline-block;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
@media only screen and (max-width: 480px) {
  .food-menu4-area .col-xs-6 {
    width: 100%;
  }
}

.toast {
  opacity: 1 !important;
}

#toast-container>div {
  opacity: 1 !important;
}

.toast-top-center { 
  top: 12px;   
  margin: 0 auto;  
  left: 50%;   
  margin-left: -150px;
}
.food-menu4-area .food-menu4-box {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}
.food-menu4-area .food-menu4-box img {
  width: 269px;
  height: 269px;
}
.food-menu4-area .food-menu4-box span {
  position: absolute;
  z-index: 4;
  display: block;
  right: 0;
  top: 0;
  background: #e7272d;
  height: 40px;
  width: 37%;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  padding: 7px 0;
}
.food-menu4-area .food-menu4-box .food-menu4-box-title {
  text-align: center;
  position: absolute;
  top: 80%;
  height: 100%;
  width: 100%;
  z-index: 3;
  padding-top: 4%;
  background-color: rgba(34, 34, 34, 0.8);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .food-menu4-area .food-menu4-box .food-menu4-box-title {
    top: 78%;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .food-menu4-area .food-menu4-box .food-menu4-box-title {
    top: 82%;
  }
}
@media only screen and (max-width: 479px) {
  .food-menu4-area .food-menu4-box .food-menu4-box-title {
    top: 85%;
  }
}
@media only screen and (max-width: 320px) {
  .food-menu4-area .food-menu4-box .food-menu4-box-title {
    top: 80%;
  }
}
.food-menu4-area .food-menu4-box .food-menu4-box-title h3 {
  font-size: 20px;
  line-height: 1.5;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    margin: 0 0 5px 0;
}
.food-menu4-area .food-menu4-box .food-menu4-box-title h3 a {
  color: #ffffff;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.food-menu4-area .food-menu4-box .food-menu4-box-title h3 a:hover {
  color: #e7272d;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.food-menu4-area .food-menu4-box .food-menu4-box-title p {
  color: #ffffff;
  padding: 0 25px;
}
.food-menu4-area .food-menu4-box:hover .food-menu4-box-title {
  padding-top: 25%;
  top: 0;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .food-menu4-area .food-menu4-box:hover .food-menu4-box-title {
    padding-top: 10%;
  }
}
@media only screen and (max-width: 320px) {
  .food-menu4-area .food-menu4-box:hover .food-menu4-box-title {
    padding-top: 5%;
  }
}
.food-menu4-area .loadmore {
  text-align: center;
}