/* CSS Document */

/* Table of Contents
-----------------------------
1. Mobile
2. iPad
3. large desktop
4. Other
*/

/* 1. Mobile responsive css 767px
-----------------------------------*/
#mobile-menu{display: none;}

@media (min-width: 1200px){
    .container {  max-width: 1170px;}
}

@media (max-width:1199px) {

    body{min-width: inherit;}    

    /*----   header   ----*/
    /* mobile menu */
    #mobile-menu, #mobile-menu .menu-trigger{display: block;}
    #mobile-menu .menu-trigger{display: block;width: 50px;height: 50px;position: fixed;-ms-touch-action: manipulation;touch-action: manipulation;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-image: none;white-space: nowrap;z-index: 9999;right: 20px;top: 20px;-webkit-transition: all 0.5s ease;transition: all 0.5s ease; background-color:#820205;}
    #mobile-menu .menu-trigger.open{left: calc(100% - 50px);background:#000;}
    #mobile-menu .menu-trigger span, #mobile-menu .menu-trigger span:after, #mobile-menu .menu-trigger span:before{background: #fff;height: 2px;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;} 
    #mobile-menu .menu-trigger span{position: absolute;display: block;width: 20px;left: 50%;top: 50%;transform: translate(-50% , -50%);-webkit-transform: translate(-50% , -50%);-moz-transform: translate(-50% , -50%)}
    #mobile-menu .menu-trigger span:after, #mobile-menu .menu-trigger span:before{content: '';position: absolute;left: 0;width: 100%;}
    #mobile-menu .menu-trigger span:before{top: -6px;}
    #mobile-menu .menu-trigger span:after{bottom: -6px;}
    #mobile-menu .menu-trigger.open span{background-color: rgba(0,0,0,.0)}
    #mobile-menu .menu-trigger.open span:before{top: 0;transform: rotate(45deg);-webkit-transform: rotate(45deg);background: #fff;}
    #mobile-menu .menu-trigger.open span:after{top: 0;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);background: #fff;}
    #mobile-menu .mob-navbar{background:rgba(0, 0, 0, 0.85);position: fixed;top: 0;width: calc(100% - 50px);height: 100%;left: -100%;-webkit-box-sizing: border-box;box-sizing: border-box;z-index: 99999;overflow-y: auto;-webkit-overflow-scrolling: touch;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;margin-right: 50px;}
    #mobile-menu .mob-navbar.open{left: 0;}
    #mobile-menu  ul ul{display: none;background:#000;}
    #mobile-menu  ul ul ul{background:rgb(71, 71, 68)}
    #mobile-menu  ul ul ul ul{background:rgb(60, 60, 56)}
    #mobile-menu  li{border-bottom:1px solid rgba(255, 255, 255, 0.10);list-style: none;position: relative;display: block;margin: 0;}
    #mobile-menu  li:last-child{border-bottom-width: 0;padding-bottom: 0;}
    #mobile-menu  em{display: block;position: absolute;top: 0;right: 0;width: 30px;height: 39px;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}
    #mobile-menu  em:before, #mobile-menu  em:after{content: '';position: absolute;top:50%;margin-top: -1px;left: calc(50% - 8px);width: 16px;height: 2px;background: #fff;}
    #mobile-menu  em:after{transform: rotate(-90deg);-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}
    #mobile-menu  em.toggled:after{transform: rotate(0);-moz-transform: rotate(0);-webkit-transform: rotate(0);}
    #mobile-menu  em.level-two:before{content: '';position: absolute;width: 0;height: 0;border-style: solid;border-width: 6px 6px 0 6px;border-color: #fff transparent transparent transparent;background-color: transparent;left: 50%;top: 50%;transform: translate(-50% , -50%);-webkit-transform: translate(-50% , -50%);-moz-transform: translate(-50% , -50%);margin: 0;}
    #mobile-menu  em.level-two:after{display: none;}
    #mobile-menu  em.level-two.toggled{transform: rotate(-180deg);-moz-transform: rotate(-180deg);-webkit-transform: rotate(-180deg)}
    #mobile-menu  li a{color: #fff;padding: 9px 0px 9px 15px;display: block;margin-right: 30px;text-transform: uppercase;line-height: 20px;font-size: 15px;font-weight: 700;letter-spacing: 0.06em;}    
    #mobile-menu  li a:hover{ text-decoration: none;}
    #mobile-menu  li li a{text-transform: none;padding-left: 20px;}
    #mobile-menu  li li li a{padding-left: 25px;margin-right: 0;}
    #mobile-menu  li li li li a{padding-left: 30px;margin-right: 0;}
    #mobile-menu  li a.active{color:#ECE4D8;}
    .scroll-hidden{overflow: hidden;height: 100%;}

    /*--------- home page ------------*/
    .desktop_nav, #navigation, #header .head-right{ display: none;}
    .wel_sec .wel_heading h1{ font-size: 36px;}
    .wel_sec .wel_heading h1 br{ display: none;}
    .wel_sec .wel_img{max-width: 425px; right: -105px;}
    .home-banner .banner-title{ font-size: 45px;}
    .ourmenu_sec h2{ font-size: 36px; margin-bottom: 25px;}
    .ourmenu_sec h2 br{ display: none;}
    .ourmenu_sec .ourmenu-left{ padding-left: 40px;padding-top: 40px; padding-bottom: 140px;}
    .ourmenu_sec .ourmenu-image1{max-width: 218px; left: -55px; bottom: 30px}
    .ourmenu_sec{ padding-bottom: 140px;}
    .boxes_three .boxes-blk h3{ font-size: 30px;}
    .boxes_three .boxes-blk h3 strong{ font-size: 22px;}
    .boxes_three .fulltext_blk{ padding: 40px 0;}
    .boxes_three .fulltext_blk h4{ font-size: 45px; margin-bottom: 20px;}
    .boxes_three .fulltext_blk p{ font-size: 30px;}
    .testimonils_sec .testimonils-r{ padding: 0 50px;}
    .testimonial-slide{ padding-top: 50px;}
    .testimonial-slide h5{ font-size: 36px; margin-bottom: 30px;}
    .testimonial-slide p{ font-size: 20px; line-height: 34px;}
    #header .logo{ width: 200px;}
    #header .logo img{ max-width: inherit;}
    .other_menu{ background-color: #820205; margin-top: 10px;}
    
    /*--------- Private Dining page ------------*/
    .boxes-two .boxes-blk h2{ font-size: 30px;}
    .boxes-two .boxes-blk p{ font-size: 20px;}
    .inner_con h1{ font-size: 55px;}
    
    /*--------- Menu page ------------*/
    .menu_sec .menusec-img{ max-width: 60%;}
    .menu_sec .menucontent_img{ max-width: 60%;}
    
    /*--------- Menu Detail page ------------*/
    .menulist-blk h4{ font-size: 30px;}
    
}

@media (max-width:991px) {
    .desktop_nav, #navigation, #header .head-right{ display: none;}
    .wel_sec .wel_heading h1{ font-size: 30px;}
    .wel_sec .wel_heading h1 br{ display: none;}
    .wel_sec .wel_img{max-width: 425px; right: -105px;}    
    .ourmenu_sec h2{ font-size: 26px; margin-bottom: 20px;}
    .ourmenu_sec h2 br{ display: none;}
    .ourmenu_sec .ourmenu-left{ padding-left: 20px;padding-top: 30px; padding-bottom: 140px;}
    .ourmenu_sec .ourmenu-image1{max-width: 198px;left: -5px; bottom: 150px;}
    .ourmenu_sec{ padding-bottom: 140px;}
    .boxes_three .boxes-blk h3{ font-size: 24px;}
    .boxes_three .boxes-blk h3 strong{ font-size: 16px; margin-bottom: 5px;}
    .boxes_three .fulltext_blk{ padding: 40px 0;}
    .boxes_three .fulltext_blk h4{ font-size: 30px; margin-bottom: 10px;}
    .boxes_three .fulltext_blk p{ font-size: 18px;line-height: 1.6;}
    .testimonils_sec .testimonils-r{ padding: 0 50px;}
    .testimonial-slide{ padding-top: 50px;}
    .testimonial-slide h5{ font-size: 30px; margin-bottom: 20px; line-height: 1.4;}
    .testimonial-slide p{ font-size: 18px; line-height: 30px;}
    #header .logo{ width: 200px;}
    #header .logo img{ max-width: inherit;}
    .home-banner .banner-title{ font-size: 30px;}
    .wel_sec .wel_heading{ padding: 30px 10px;}
    .wel_sec .about-btn{ margin: 20px 0;}
    #footer .footer-c h6{ font-size: 30px;}
    #footer .footer-l{ padding-bottom: 10px;}
    #footer .footer-l, #footer .footer-c{ padding-top: 40px;}
    #footer .footer-r{ margin-top: 40px;}
    
    /*--------- Private Dining page ------------*/
    .inner_con{ top: 0; margin-bottom: 0; z-index: 9;}
    .inner_con .container{ padding-top: 40px; padding-bottom: 40px; background: none;}
    .inner_con h1{ font-size: 40px;}
    .boxes-two .col-md-6{ margin-top: 10px; margin-bottom: 10px;}
    .boxes_three .col-md-4:nth-child(2){ margin-top: 15px; margin-bottom: 15px;}
    .inner-banner.home-banner .banner-img{ min-height: inherit; padding-bottom: 25%;}
    
    /*--------- Menu page ------------*/
    .menu_sec .menusec-img{ max-width: 50%;}
    .menu_sec .menucontent_img{ max-width: 30%;}
    .menu_sec .menusec-content .menusec-blk h2{ font-size: 30px; line-height: 1.4;}
    .menu_sec .menusec-content .menusec-blk h2 strong{ font-size: 22px;}
    .menu_sec .menusec-content .menusec-blk .btn{ font-size: 16px; padding: 12px 20px; margin: 10px 0;}
    .menu_sec .menusec-content .menusec-blk{ padding: 30px;}
    .menusec-inner .menusec_row{ padding-top: 60px; padding-bottom: 60px;}
    .menusec-inner .menusec_row:first-child{ padding-bottom: 80px;}
    .menu_cat ul li{ padding: 4px;}
    .menu_cat ul li a{ padding: 10px 20px; font-size: 14px;}
    
    /*--------- Menu Detail page ------------*/
    .menulist_row .row:after{ transform: none; -webkit-transform: none; position: static; height: 34px; width: 100%; background: url(../images/border-line1.png) center no-repeat; }
    
    /*--------- Career page ------------*/
    .career_sec .accordion{ padding: 30px 40px;}
    .career_sec .accordion .card h5 button[type="button"]{ font-size: 30px; padding: 25px 50px;}
}

@media (max-width:767px) {
    .ourmenu_sec .ourmenuimg_l{ left: auto; right: 0; bottom: 30px;}
    .ourmenu_sec .ourmenu-image{ margin-top: 0; max-width: 85%;}
    .ourmenu_sec .ourmenu-image1{ left: 20px; bottom: -70px;}
    #footer .col-md-4:nth-child(2){ border-top: #374752 solid 5px; border-bottom: #374752 solid 5px; border-left: none; border-right: none;}
    #footer .footer-r{ margin-bottom: 20px; text-align: center;}
    #footer .footer-r .social-icons{ margin: 20px 0;}    
    #footer .footer-r .social-icons a{ margin: 0 5px;}
    #header .logo img{ max-width: 100%;}
    #header .logo{ width: auto; max-width: 150px; margin-left: 20px; padding: 15px 0 10px 0;}
    #header{ height: auto;}
    .joinclub_blk a{ padding: 5px 15px; font-size: 14px;}
    .home-banner .banner-title{ font-size: 20px; margin-bottom: 15px;}
    .home-banner .banner-btn{ padding: 8px 20px; font-size: 14px;}
    .wel_sec .wel_heading h1{ font-size: 24px;}
    .wel_sec p{ margin: 0 0 20px;}
    .wel_sec .wel_img{max-width: 245px;right: -35px; bottom: -80px;}
    #mobile-menu .menu-trigger{ right: 15px; top: 15px;}
    .home-banner .slick-dots{ bottom: 10px;}
    
    /*--------- Private Dining page ------------*/
    .boxes-two .boxes-blk h2{ font-size: 24px; margin-bottom: 15px;}
    .boxes-two .boxes-blk p{font-size: 16px; line-height: 30px;}
    .boxes-two .boxes2_imgleft{ left: -30px; bottom: -10px; max-width: 200px;}
    .boxes-two .boxes2_imgright{right: -45px; top: 0; max-width: 200px;}
    .inner_con h1{ font-size: 30px;}
    .inner_con .container{ padding-top: 30px; padding-bottom: 30px;}
    .textblock{ padding: 10px 0;}
    .boxes_three{ margin-top: 160px;}
    .boxes-two .boxes-blk .btn{height: 55px; line-height: 46px;}
    .boxes-two .boxes-blk{ padding: 30px 10px;}
    
    /*--------- Menu page ------------*/
    .menu_sec .menusec-content .menusec-img1{ position: static; margin: 20px 0;}
    .menu_sec .menusec-content .menusec-blk{ margin: 0 auto; display: block;}
    .menu_sec .menusec-img{ display: block; max-width: 100%; top: -80px; left: -80px;}
    .menu_sec .menusec-content .menusec-blk h2{ font-size: 24px;}
    .menu_sec .menusec-content .menusec-blk h2 strong{ font-size: 18px;}
    .menu_sec .menusec-content .menusec-blk p{ font-size: 16px; line-height: 26px;}
    .menusec-inner .menusec_row:nth-child(even) .menusec-img{ right: -80px;}
    .menusec-inner .menusec_row:first-child{ padding-top: 80px;}   
    
    /*--------- Menu Detail page ------------*/
    .menulist-blk h4{ font-size: 24px; margin-bottom: 10px;}
    .menulist-blk p{ font-size: 14px; line-height: 24px;}
    .menulist_row h3{ font-size: 30px;}
    
    /*--------- Career page ------------*/
    .career_sec .accordion{ padding: 20px; text-align: left;}
    .career_sec .accordion .card h5 button[type="button"]{ font-size: 18px; background-size: 20px; padding: 15px 30px 15px 10px; text-align: left;}
    .career_sec .accordion .card .card-body{ padding: 20px 10px; background-position: left top;}
    .career_sec .accordion .card .card-body .apply_btn{ max-width: 160px; height: 54px; line-height: 45px; text-align: center; margin: 0;}
    .career_sec .accordion .card .card-body p{ font-size: 14px;}
    
    /*--------- Contact page ------------*/
    .contact_sec .contact_form{ padding: 30px;}
    .contact_detail{ padding: 30px;}
    .contact_detail h3{ font-size: 24px; height: auto !important;}
    .contact_detail p{ font-size: 16px; line-height: 28px; margin-bottom: 15px;}
    .contact_sec .contact_form h2{ font-size: 24px; margin-bottom: 20px;}
    .contact_sec .contact_form input[type="text"], .contact_sec .contact_form input[type="email"], .contact_sec .contact_form input[type="tel"], .contact_sec .contact_form select{ height: 50px; padding: 5px 15px; font-size: 14px;}
    .contact_sec .contact_form textarea{ margin: 0 0 15px; font-size: 14px; padding: 10px 15px; height: 120px;}
    .contact_map iframe{ height: 350px;}
    .contact_sec{padding: 0 15px;}
    .contact_sec .contact_form .col-md-12 select{ margin: 0 auto 15px;}
    
    /*--------- Reservations page ------------*/
    .reservations_sec input[type="text"], .reservations_sec input[type="email"], .reservations_sec input[type="tel"], .reservations_sec select{ margin-bottom: 15px; height: 50px;}
    h2{ font-size: 30px;}
    .reservations_sec h3{ font-size: 24px; margin-bottom: 20px;}
    /*.reservations_sec form{ padding: 20px;}*/
    .reservations_sec .form_container{ padding: 20px;}
    .reservations_sec input[type="text"], .reservations_sec input[type="email"], .reservations_sec input[type="tel"], .reservations_sec select{ font-size: 14px; padding: 5px 15px;}
    .reservations_sec #datetimepicker2, .reservations_sec #datetimepicker1{ background-size: 24px; background-position: 94% center;}
    .reservations_sec textarea{ font-size: 14px; height: 120px; padding: 10px 15px;}
    .reservations_sec .select:after{ background-size: 30px; right: 10px;}

    /*.reservations_sec .make_reservation form{ margin-bottom: 40px;}*/
    .reservations_sec .make_reservation .form_container{ margin-bottom: 40px;}

    /*.reservations_sec .contact_reservation form{ padding: 20px;}*/
    .reservations_sec .contact_reservation .form_container{ padding: 20px;}
    
    .star-rating{ margin: 10px auto;}
    .star-rating > label{ font-size: 20px;}
    .star-rating > fieldset:not(:checked) > label{ font-size: 160%;}
    
    .menulist-blk .menu_item_price{ font-size: 24px; margin: 10px 0 20px;}
    
    .pum-container .pum-content form input[type="email"]{ width: 100%;}
    .pum-container .pum-content form input[type="submit"]{ width: 100%; margin: 10px 0; max-width: 100%;}
    .pum-container .pum-content p{ font-size: 14px;}
    .pum-container .pum-content {padding: 40px 15px 15px;}
    .formmore_btn { margin-top: 0px; }
    
    .rtb-booking-form form fieldset .rtb-text, .rtb-booking-form form fieldset .rtb-select{ width: 100% !important; margin: 10px 0;}
    .rtb-booking-form form fieldset legend{ font-size: 30px;}
    .rtb-booking-form form fieldset .rtb-textarea textarea{ height: 120px;}
    .rtb-booking-form form fieldset .rtb-textarea{ margin: 0;}
}


/* 2. iPad responsive css 768px to 1024px
-----------------------------------------*/
@media (min-width:768px) and (max-width:991px) {

    /* default  */
    body{min-width: inherit;}
    
    /*--------- Contact page ------------*/
    .contact_sec .contact_form{ padding: 50px 50px 15px;}
    .contact_detail{ padding: 60px;}
    .contact_detail h3{ font-size: 30px;}
    .contact_detail p{ font-size: 20px; line-height: 34px; margin-bottom: 30px;}
    .contact_sec .contact_form h2{ font-size: 32px; margin-bottom: 30px;}
    
    /*--------- Reservations page ------------*/
    /*.reservations_sec form{ padding: 20px 30px;}*/
    .reservations_sec .form_container{ padding: 20px 30px;}

    /*.reservations_sec .contact_reservation form{ padding: 30px;}*/
    .reservations_sec .contact_reservation .form_container{ padding: 30px;}

    .reservations_sec input[type="text"], .reservations_sec input[type="email"], .reservations_sec input[type="tel"], .reservations_sec select{ font-size: 14px; padding: 5px 15px;}
    .reservations_sec #datetimepicker2, .reservations_sec #datetimepicker1{ background-size: 24px; background-position: 94% center;}
    .reservations_sec textarea{ font-size: 14px;}
    .reservations_sec .row{ margin-left: -10px; margin-right: -10px;}
    .reservations_sec .col-md-4, .reservations_sec .col-md-6, .reservations_sec .col-md-12{ padding-left: 10px; padding-right: 10px;}
    .reservations_sec .select:after{ background-size: 30px; right: 10px;}
    
    
}


@media (min-width:1201px) and (max-width:1399px) {  
    #navigation ul li{padding: 33px 3px;}    
    .desktop_nav{ margin-right: 10px;}
    #header .phone{ margin: 5px;}
    #header .head-right{ margin-right: 10px; text-align: center;}
    #header .logo{ margin-left: 20px;}
}

@media (min-width:1400px) and (max-width:1750px) {  
    #navigation ul li{padding: 33px 10px;}    
    .desktop_nav{ margin-right: 10px;}
    #header .head-right{ margin-right: 20px;}
    #header .phone{ margin-right: 10px;}
}


/* 4. Other media-query
------------------------------------------------*/
@media (max-width:480px){
    .ourmenu_sec .ourmenu-image{ max-width: 100%;}
    .ourmenu_sec .ourmenu-image1{ position: static; display: inline-block; vertical-align: top; margin: 20px 0;}
    .ourmenu_sec .col-md-7{ text-align: center;}
    .ourmenu_sec{ padding-bottom: 30px;}
    .testimonils_sec .testimonils-r{ padding: 0 20px;}
    .testimonial-slide{ padding-top: 20px;}
    .testimonial-slide h5{ font-size: 20px; margin-bottom: 15px;}
    .testimonial-slide p{ font-size: 14px; line-height: 26px;}
    .testimonial-slide .slick-dots{ margin: 20px 0;}
    .menulist_row .menulist-img_lt, .menulist_row .menulist-img_rt, .menulist_row .menulist-img_lb, .menulist_row .menulist-img_rb{ display: none;}
    
    .rtb-booking-form{ padding: 80px 20px 40px;}
    .rtb-booking-form form fieldset legend{ font-size: 24px;}
    .rtb-booking-form form fieldset{ padding: 40px 10px 30px; margin-bottom: 80px !important;}
    .rtb-booking-form form fieldset input, .rtb-booking-form form fieldset select{ height: 50px; font-size: 14px;}
    .rtb-booking-form form fieldset label{ font-size: 14px; margin-bottom: 3px !important;}
    .rtb-booking-form form fieldset .rtb-text, .rtb-booking-form form fieldset .rtb-select{ margin: 5px 0;}
}