/*--------------------------------------------------------------------------------------
Theme Name: Spicy Restaurant
Description: 100% Responsive, Highly Customizable Restaurant template using bootstrap v3.3.7 frameWork.
Author: GentleHero(mdnasirhridoybd@gmail.com)
Version: 1.0
----------------------------------------------------------------------------------------

* This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.

This files contents are outlined below >>>>

* SEARCH EACH SECTION AS IT COMMENTS, YOU WILL GET THE RIGHT SECTION.
----------------------------------------------------------------------------------------


==== CSS INDEX

    1. General css
        1.1 Import style sheets css
        1.2 Basic css
        1.3 Button Effect css
        1.4 Preloader css
    2. Header css
        2.1 Navigation bar css
        2.2 Mobile side navigation css
        2.3 Slider css
    3. Service css
    4. OfferCard css
        4.1 Mobile view offer card css
    5. Menu css
    6. Testimonial css
    7. Event css
    8. Contact css
        8.1 Form css
        8.2 Reservation css
    9. Footer css
        9.1 First part of footer css
        9.2 Second part of footer css
        9.3 Social Icon Pack css

    10. Responsive css (mobile,tab view code)
        -navbar css
        -mobile side navbar css
        -slider css
        -service css
        -service css
        -offerCard css
        -menuCard css
        -testimonial css
        -contact css
----------------------------------------------------------------------------------------*/


/*--------------------
   1. General css
----------------------*/

/*1.1 Import style sheets*/
@import "normalize.css";
@import "hover.css";
@import "clockpicker.css";
@import "bootstrap.min.css";
@import "font-awesome.min.css";
@import "animate.min.css";
@import "datepicker.css";
@import "font-awesome.min.css";
@import "owl.carousel.min.css";
@import "owl.theme.default.min.css";
@import "sidebar.css";
@import url('https://fonts.googleapis.com/css?family=Dancing+Script:400,700|Lato:400,700|PT+Sans+Narrow:400,700');


/*1.2 Basic css start*/
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4{
    font-family: 'Dancing Script',cursive;
}
.pd5{
    padding:5px;
}
.area-title {
    margin-top: 50px;
    margin-bottom: 60px;
}
.area-title h2 {
    color: #b67e43;
    display: inline-block;
    font-size: 60px;
    letter-spacing: 2px;
    line-height: 0.8;
    margin: 0;
    position: relative;
    text-transform: capitalize;
}
.section-padding {
    padding: 100px 0;
}
.no-padding {
    padding: 0;
}
.no-margin {
    margin: 0;
}
.margin-top {
    margin-top: 40px;
}
.margin-bottom {
    margin-bottom: 40px;
}
section{
    padding-top:3%;
}
/*1.2 Basic code stop*/

/*1.3 Button Effect css start*/
.mainBtn{
    width:auto;
    background-color:#ad7840;
    height: auto;
    color: white;
    display: inline-block;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid #fff;
    padding: 10px;
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: cubic-bezier(.23, 1, .32, 1);
    animation-timing-function: cubic-bezier(.23, 1, .32, 1);
    -webkit-transition: all .6s cubic-bezier(.23, 1, .32, 1);
    transition: all .6s cubic-bezier(.23, 1, .32, 1)
}
.mainBtn:hover{
    color: black;
    background:white;
    border:1px solid #b67e43
}
.mainColor{
    color: #b67e43;
}
.hvr-underline-from-center:before{
    background-color: #b67e43;
    width: auto;
}
.hvr-bounce-to-right:before {
        background: #b67e43;
}
/*1.3 Button Effect css stop*/

/*1.4 Preloader css start*/
.preloader {
    background: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}
.status-mes {
    width: 45px;
    height: 45px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -22px 0 0 -22px;
    font-size: 10px;
    text-indent: -12345px;
    border-top: 8px solid #b67e43;
    border-right: 8px solid #b67e43;
    border-bottom: 8px solid #b67e43;
    border-left: 8px solid #E54C2A;
    border-radius: 50%;
    -webkit-animation: spinner 1000ms infinite linear;
    animation: spinner 1000ms infinite linear;
    z-index: 10000;
}
@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/*-------------------------------------------------------------
   1. General css ended
-------------------------------------------------------------*/


/*------------------------------------------------------------
   2. Header css start
-------------------------------------------------------------*/

/*2.1 Navigation bar start*/
.navbar-default {
    background-color: transparent;
    padding: 20px 0;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.sticky.navbar-default {
    background-color:white !important;
    padding:0 0;
    margin-top:0;
    box-shadow: 0 0 10px 0.3px #b67e43;
}
.navbar-brand {
    padding: 10px 15px;
    height: auto;
}
.navbar-brand img{
    width:auto;
}
.navbar-nav {
    padding-top: 3px;
}
.navbar-nav>li>.dropdown-menu {
    margin-top: 23px;
}
.sticky.navbar .nav>li a{
    color:black;
    padding-top:14px;
}
.navbar .nav>li {
    padding: 0 12px;
    -webkit-transition: padding .4s ease-in-out;
    -moz-transition: padding .4s ease-in-out;
    transition: padding .4s ease-in-out;
}
.navbar .nav>li>a {
    padding: 5px 0;
}
.navbar-default {
    margin-bottom: 0;
    border-color: transparent;
}
.navbar-default .navbar-nav>li>a {
    color:white;
    font-size: 14px;
    line-height: 24px;
    font-weight: 300;
    text-transform: uppercase;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover{
    color:#b67e43;
}
.navbar-toggle {
    padding: 4px 10px;
}
/*Navigation bar  stop*/

/*2.2 Mobile side navigation start*/
.sidebar {
    position: fixed;
    display: block;
    top: 51px;
    bottom: 0;
    z-index: 1000;
    min-height: 100%;
    max-height: none;
    overflow: auto;
    background-color: #1b1b1b;
    padding: 13px 18px 0 0;
}
.sidebar ul {
    padding-left: 0;
}
.sidebar a {
    padding: 8px 0 4px 35px;
    text-decoration: none;
    font-size: 25px;
    color: #ffffff;
    display: block;
    transition: 0.3s;
}
.sidebar li:first-child{
    padding-top: 3em;
}
.sidebar ul li{
    list-style-type: none;
    border-bottom: 1px solid #3f3f3f;
}
.sidebar a:hover{
    color: #f1f1f1;
}

/*Mobile side navigation stop*/

/*2.3 Slider css start here*/
.slider,
.slider>.carousel-inner,
.slider>.carousel-inner>.item {
    overflow: hidden;
    max-height: 645px;
}
.slider {
    position: relative;
}
.slider:active {
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
.slider>.carousel-inner>.item:after {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    content: "";
    position: absolute;
    background: rgba(24, 24, 24, 0.7)
}
.slider>.carousel-inner>.item>img,
.slider>.carousel-inner>.item>a>img {
    width: 100%;
    margin: auto
}
.sliderIndicators>.carousel-indicators {
    top: 0;
    left: 0;
    bottom: 0;
    padding: 0;
    height: 56%;
    right: auto;
    width: 300px;
    margin: auto;
    overflow-y: auto;
    text-align: left;
    overflow-x: hidden;
    white-space: nowrap
}
.sliderIndicators>.carousel-indicators li {
    margin: 0;
    padding: 0;
    width: 150px;
    height: 115px;
    display: block;
    text-indent: 0;
    overflow: hidden;
    background: #fff;
    border: 10px solid #fff;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-transition: all cubic-bezier(.23, 1, .32, 1) .7s;
    transition: all cubic-bezier(.23, 1, .32, 1) .7s
}
.sliderIndicators>.carousel-indicators .active {
    margin: 0;
    padding: 0;
    width: 300px;
    height: 115px;
    background: #fff;
    border: 10px solid #fff
}
.sliderIndicators>.carousel-indicators li img {
    float: left;
    width: 140px;
    position: relative
}
.sliderIndicators>.carousel-indicators li div {
    width: 140px;
    height: 93px;
    display: none;
    overflow-y: auto;
    text-align: left;
    overflow-x: hidden;
    white-space: normal;
    padding: 10px 5px 0 15px;
}
.sliderIndicators>.carousel-indicators li div>a {
    color: #b67e43;
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
    text-transform: capitalize;
    text-shadow: none;
    -webkit-font-smoothing: antialiased;
    font-family: 'Josefin Sans', sans-serif;
    text-decoration: none;
    -webkit-transition: color .6s cubic-bezier(.23, 1, .32, 1);
    transition: color .6s cubic-bezier(.23, 1, .32, 1);
}
.sliderIndicators>.carousel-indicators li div>a:hover {
    color: #414141
}
.sliderIndicators>.carousel-indicators li div>span {
    display: block;
    color: #414141;
    font-size: 12px;
    text-transform: uppercase;
    text-shadow: none;
    -webkit-font-smoothing: antialiased;
    font-family: 'Josefin Sans', sans-serif;
}
.sliderIndicators>.carousel-indicators .active div {
    display: inline-block;
}
.sliderIndicators>.carousel-indicators li div::-webkit-scrollbar {
    width: 4px;
}
.sliderIndicators>.carousel-indicators li div::-webkit-scrollbar-thumb {
    -webkit-border-radius: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.3);
}
.sliderIndicators>.carousel-indicators::-webkit-scrollbar {
    width: 3px;
}
.sliderIndicators>.carousel-indicators::-webkit-scrollbar-thumb {
    -webkit-border-radius: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.2);
}
.sliderText {
    top: 20%;
    right: 2%;
    width: 45%;
    z-index: 2;
    left: auto;
    bottom:1%;
    margin: auto;
    text-align: left;
    position: absolute
}
.sliderText>p,
.sliderText>a {
    color: #fff;
    text-shadow: none;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    font-family: 'Josefin Sans', sans-serif;
}
.sliderText>h1 {
    Color:white;
    font-size: 4.5em;
    font-weight: 700;
    margin-bottom: 20px;
    -webkit-animation-delay: .7s;
    animation-delay: .7s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: cubic-bezier(.23, 1, .32, 1);
    animation-timing-function: cubic-bezier(.23, 1, .32, 1);
}
.sliderText>h1>span {
    color: #b67e43;
    margin-left: 10px
}
.sliderText>p {
    width: 80%;
    color: #fff;
    font-size: 16px;
    position: relative;
    text-transform: none;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: cubic-bezier(.23, 1, .32, 1);
    animation-timing-function: cubic-bezier(.23, 1, .32, 1)
}
.sliderText>a {
    height: auto;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid #fff;
    padding: 5px;
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: cubic-bezier(.23, 1, .32, 1);
    animation-timing-function: cubic-bezier(.23, 1, .32, 1);
    -webkit-transition: all .6s cubic-bezier(.23, 1, .32, 1);
    transition: all .6s cubic-bezier(.23, 1, .32, 1)
}
.sliderText>a:hover {
    color: #fff;
    background: #b67e43;
    border: 1px solid #b67e43
}
/*Slider css stop here*/

/*------------------------------------------------------------
   2. Header css stop
-------------------------------------------------------------*/


/*------------------------------------------------------------
   3. Service css start
-------------------------------------------------------------*/
.serviceBox{
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    margin-bottom: 20px;
    border-top:1px solid rgba(0,0,0,0.12);
    padding:15px 10px 10px 10px;
}
.serviceBox:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.serviceBox .service-icon{
    display: block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: 50%;
    background: #E54C2A;
    text-align: center;
    float: left;
    font-size: 20px;
    color: #fff;
    margin: 0 20px 0 0;
    transition: all 0.3s ease-in-out 0s;
}
.serviceBox .title{
    display: inline-block;
    font-size: 25px;
    color: #E54C2A;
    border-bottom: 3px solid #d9e7ed;
    padding-bottom: 6px;
    margin: 0 0 20px 0;
    transition: all 0.3s ease-in-out 0s;
}
.serviceBox:hover .title{
    border-color: #E54C2A;
}
/*------------------------------------------------------------
   3.Service css stop
-------------------------------------------------------------*/


/*------------------------------------------------------------
   4.OfferCard css start
-------------------------------------------------------------*/
.offerCard-area{
    margin-top: 0;
}
.offerCard-area .price {
    font-family: "Dancing Script", cursive;
    color:#E54C2A;
}
.offerCard-area{
    background: #666 url(../images/offercard.jpeg) center;
    width: 100%;
    height: 650px;
}
.offerCard-area .area-title{
    margin-bottom:-10px
}
.offerCard-area a{
    text-decoration: none;
}
.card1 {
    left: 50%;
    margin-left: -13em;
    z-index: 10;
    transform: rotateZ(-3deg);
    -moz-transform: rotateZ(-3deg);
    -webkit-transform: rotateZ(-3deg);
    transition: all 0.5s ease-out 0.3s;
}
.card2 {
    left: 50%;
    margin-left: -12em;
    z-index: 9;
    transition: all 0.5s ease-out 0.15s;
}
.card3 {
    left: 50%;
    margin-left: -11em;
    z-index: 8;
    transform: rotateZ(3deg);
    -webkit-transform: rotateZ(3deg);
    -moz-transform: rotateZ(3deg);
    transition: all 0.5s ease-out;
}
.start .card {
    left: -100%;
    opacity: 0;
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
}
.card-container {
    position: relative;
    width: 18em;
    margin: 4em auto;
}
.card {
    position: absolute;
    top: 0;
    background: #fff;
    box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.65);
    border-radius: 0;
    padding: 2em;
    width: 20em;
    max-width: 20em;
    -webkit-backface-visibility: hidden;
}
.card a {
    margin: 0 -1.6em;
    display: block;
    width: 120%;
    max-width: 24em;
    position: relative;
    line-height: 1em;
}
.card a:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.offerCard-area .card h1 {
    margin-top: 0;
}
.offerCard-area .card p {
    line-height: 1.75em;
    margin-bottom: 0;
}
.card-container:hover .card,
.card-container.hover .card {
    opacity: 0.9;
    transform: scale(0.95);
    -webkit-transform: scale(0.95);
    margin-left: -12em;
}
.card-container:hover .card:hover,
.card-container.hover .card:hover,
.card-container:hover .card.hover,
.card-container.hover .card.hover {
    opacity: 1;
    z-index: 11;
    transform: scale(1);
    -webkit-transform: scale(1);
}
.card-container:hover .card1,
.card-container.hover .card1 {
    transform: rotateZ(0deg) scale(0.95);
    -webkit-transform: rotateZ(0deg) scale(0.95);
}
.card-container:hover .card2,
.card-container.hover .card2 {
    left: 0;
}
.card-container:hover .card3,
.card-container.hover .card3 {
    left: 100%;
}
.offerCard-area img {
    max-width: 100%;
}

/*4.1 Mobile view offer card css*/
.offer-area{
    padding-top:0;
}
.offerCardMobile-area{
    background: #666 url(../images/offercard.jpeg) center;
    width: 100%;
}
.offerCardMobile-area .cardMobile{
    background: #fff;
    box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.65);
    border-radius: 0;
    padding: 2em;
    margin-bottom:2em;
    width: auto;
    -webkit-backface-visibility: hidden;
}
.offerCardMobile-area .cardMobile img{
    padding:10px 0 10px 0;
}
.offerCardMobile-area .cardMobile a{
    text-decoration: none;
    margin: 0 auto;
    display: block;
    width: 100%;
    max-width: 24em;
    position: relative;
    line-height: 1em;
}
.offerCardMobile-area .cardMobile .price{
    font-family: "Dancing Script", cursive;
    color:#E54C2A;
}
/*------------------------------------------------------------
   4. OfferCard css stop
-------------------------------------------------------------*/


/*------------------------------------------------------------
   5. Menu css start
-------------------------------------------------------------*/
.menuCard{
    border-top:2px solid rgba(0,0,0,0.19);
    border-radius: 15px;
   box-shadow: 0 10px 20px rgba(0,0,0,0.19),
   0 6px 6px rgba(0,0,0,0.23);
}
.menuCard .foodDetails{
    padding-top: 10px;
}
.menuCard .price{
    padding-top: 5px;
}
.menuCard>div>.col-md-8>p{
    float: left;
    padding-top: 5px;
    border-top: 1px dashed #E54C2A;
}

.menu-section .menuCard .row{
    padding: 10px 0 10px 0;
}
.menu-section .menuCard>p{
    border-bottom:1px dotted #b67e43;
}

.menu-section .menuCard .price {
    font-family: "Dancing Script", cursive;
}
.menu-section .menuCard .row:last-child{
    padding-bottom: 20px;
}
.menu-section>.container>.row:last-child{
    padding-top: 15px;
}
/*------------------------------------------------------------
   5. Menu css stop
-------------------------------------------------------------*/


/*------------------------------------------------------------
   6. Testimonial css start here
-------------------------------------------------------------*/
.testimonial-area{
    background-color: rgba(24, 24, 24, 0.7);
    background-image: url("../images/offercard.png");
    background-attachment: fixed;
    margin-top: 15px;
}
.testimonial-area .container{
    padding:10px 0 10px 0;
}
.testimonial-area .customer{
    height:450px;
    background:
            url("../images/customer.jpg") scroll center center;
}
.testimonial-area .col-md-6{
    padding: 0;
}
.testimonial-area .carousel-indicators .active{
    background-color: #b67e43;
}
.testimonial {
    margin: 0 25px;
}
.testimonial .testimonial-content{
    margin: 20px 0 50px 0;
    position: relative;
}
.testimonial .testimonial-content:after{
    content: "";
    width: 20px;
    height: 20px;
    border-top: 20px solid #dca842;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    margin: 0 auto;
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
}
.testimonial .description{
    padding: 25px 35px;
    margin: 0;
    background: #dca842;
    border-radius: 15px;
    font-size: 20px;
    color: #fff;
    position: relative;
}
.testimonial .description:before,
.testimonial .description:after{
    font-family: 'FontAwesome';
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: 8px;
    text-align: center;
    background: #dca842;
    position: absolute;
}
.testimonial .description:before{
    content: "\f10d";
    top: -18px;
    left: 25px;
}
.testimonial .description:after{
    content: "\f10e";
    bottom: -18px;
    right: 25px;
}
.testimonial .testimonial-profile{
    display: table;
    padding: 15px;
    border: 1px solid #fac04a;
    border-radius: 20px;
    margin: 0 auto 22px auto;
    position: relative;
}
.testimonial .pic{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #dca842;
    float: left;
    overflow: hidden;
}
.testimonial .title{
    display: inline-block;
    margin: 0 0 0 30px;
    font-size: 19px;
    font-weight: bold;
    color: #f6bd4b;
    position: relative;
    top: 22px;
}
.testimonial .title:before{
    content: "";
    width: 1px;
    height: 70px;
    background: #dca842;
    position: absolute;
    top: -8px;
    left: -15px;
}
.testimonial .post{
    display: block;
    font-size: 14px;
    font-weight: normal;
    color: #ffffff;
    margin-top: 10px;
}
.testimonial-area .carousel-indicators {
    bottom: -10px;
}
/*------------------------------------------------------------
   6. Testimonial stop here
-------------------------------------------------------------*/


/*------------------------------------------------------------
   7. Event css  start
-------------------------------------------------------------*/
.event-area {
    position: relative;
    background-color: #F7F7F7;
}
.event-area .h1{
    color:black;
}
.event-area .event-col {
    margin-bottom: 50px;
    border: 1px solid #ddd;
    background: #fff;
    padding-bottom: 50px;
}
.event-img {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
}
.event-img img {
    width: 100%;
}
.event-img:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9;
    visibility: hidden;
}
.event-img img {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.event-col:hover .event-img img {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
.event-col:hover .event-img:before {
    visibility: visible;
}
.post-date {
    position: absolute;
    right: 0;
    top: 0;
    border-top:2px solid #E54C2A;
    width: 50px;
    height: auto;
    background: #b67e43;
    text-align: center;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.event-col:hover .post-date {
    background-color: #E54C2A;
    border-top:2px solid #b67e43;
}
.post-date h3 {
    color: #fff;
    font-weight: 400;
}
.post-date h3 span {
    font-size: 14px;
}
.event-col h4 {
    font-size: 18px;
    margin-bottom: 20px;
    text-transform: none;
    margin-left: 10px;
}
.event-col h4 a {
    color: #666666;
    font-weight: 400;
}
.event-col h4 a:hover {
    color: #b67e43;
}
.event-col p {
    color: #999999;
    padding: 10px;
    margin-bottom: 0;
}
.info-bar {
    margin-bottom: 0;
    padding: 5px 10px;
}
.info-bar ul {
    margin: 0;
    padding: 0;
}
.info-bar ul li {
    margin-right: 10px;
    display: inline-block;
}
.info-bar ul li i {
    margin-right: 5px;
    color: #b67e43;
}
.info-bar ul li a {
    color: #999999;
    text-decoration: none;
}
.event-area a.mainBtn{
    border-right: 1px solid #E54C2A;
    text-decoration: none;
}
.event-area .mainBtn {
    width: auto;
}
/*------------------------------------------------------------
   7. Event css stop
-------------------------------------------------------------*/


/*------------------------------------------------------------
   8. Contact css start
-------------------------------------------------------------*/

/*8.1 Form css */
.form-style-1 {
    margin:10px auto;
    max-width: 400px;
    padding: 20px 12px 10px 20px;
    font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-1 li {
    padding: 0;
    display: block;
    list-style: none;
    margin: 10px 0 0 0;
}
.form-style-1 label{
    margin:0 0 3px 0;
    padding:0;
    display:block;
    font-weight: bold;
}
.form-style-1 input[type=text],
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
textarea,
select{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:1px solid #BEBEBE;
    padding: 7px;
    margin:0;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
}
.form-style-1 input[type=text]:focus,
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 textarea:focus,
.form-style-1 select:focus{
    -moz-box-shadow: 0 0 8px #b67e43;
    -webkit-box-shadow: 0 0 8px #b67e43;
    box-shadow: 0 0 8px #b67e43;
    border: 1px solid #b67e43;
}
.form-style-1 .field-divided{
    width: 49%;
}
.form-style-1 .field-long{
    width: 100%;
}
.form-style-1 .field-select{
    width: 100%;
}
.form-style-1 .required{
    color:red;
}
.form-control{
    width: 50%;
    float: left;
}
.datepicker .cell.day.selected, .datepicker .cell.month.selected, .datepicker .cell.year.selected, .datepicker .cell.decade.selected {
    background: #b67e43;
}
.datepicker .cell.day:hover,
.datepicker .cell.month:hover,
.datepicker .cell.year:hover,
.datepicker .cell.decade:hover {
    background: #e4c493;
}
.contacts-widget{
    border: 1px solid  #b67e43;
    padding:20px 0 0 20px;
    background-color: #f5f5f5;
    overflow: hidden;
}
.contacts-widget .a {
    color: #888888;
}
.info-item span {
    color: #CCCCCC;
    font-size: 16px;
    font-weight: 400;
}
.contacts-widget .contacts-info-list > li .info-item {
    color: #888888;
    margin-bottom: 20px;
}
.contact-area{
}
.contact-area .mainBtn {
    width: auto;
}

/*8.2 Reservation css*/
.reserv-wrap{
    padding:30px 30px;
    background: #b67e43;
    -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 0.12) ;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.12);
}
.reserv-info{
    text-align: center;
    border: 1px dashed #eee;
    color: #fff;
    padding:20px 20px;
}
.info-box{
    margin-bottom: 20px;
}
.info-box h4{
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 2px;
}
.info-box p{
    font-size: 18px;
    line-height: 28px;
    color: #eee;
}
.reserv-info h4{
    line-height: 38px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.reserv-info h3 {
    color: #1e1e1f;
    background: #fff;
    padding: 12px 16px;
    display: inline-block;
}
.reserv-info a{
    text-decoration: none;
}
.reserv-info .mainBtn{
    background-color: white;
    color:black;
    font-size: 14px;
}
.reserv-info .mainBtn:hover{
    background-color: #966739;
}
/*------------------------------------------------------------
   8.Contact css stop
-------------------------------------------------------------*/


/*------------------------------------------------------------
   9. Footer css start
-------------------------------------------------------------*/
/*9.1 First part of footer css*/
.footerFst{
    background-color: #f1eee6;
    margin-top: 5em;
}
.footerFst address{
    padding-top: 2em;
}
.footerFst .contact-link li{
    list-style: none;
}
.footerFst .contact-link li a{
    color:#223d61;
    text-decoration: none;
}
.footerFst .contact-link li a:hover{
    color:#b67e43;
}
.footerFst .contact-link li a i{
    font-size: 15px;
    color:#b67e43;
    padding-right: 5px;
}
.footerFst #map{
    height: 15em;
    width: 100%;
    margin-bottom: 5px;
    margin-top: 10px;
}
.footerFst .text-justify{
    margin-top: 1.5em;
}

/*9.2 Second part of footer start*/
.footerSec{
    background-color:#b67e43;
}
.footerSec p{
    color:white;
    margin-top: 20px;
}
.footerSec .col-md-12:first-child a{
    color:black;
    text-decoration: none;
}

.footerSec .col-md-12:first-child a:hover{
    text-decoration: solid;
    color: #4f361d;
}

/*9.3 Social Icon Pack css*/

.footer-social-bookmark ul,
.footer-menu ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.footer-social-bookmark ul li,
.footer-menu ul li {
    display: inline;
}

.footer-social-bookmark ul li a {
    display: inline-block;
    font-size: 25px;
    width: 50px;
    color: black;
}

.footer-social-bookmark a:hover {
    color: #ca3d26;
}

/*------------------------------------------------------------
   9.Footer css stop
-------------------------------------------------------------*/


/*------------------------------------------------------------
   10. Responsive css(mobile,tab view) start here
-------------------------------------------------------------*/

/*navbar css*/
@media (min-width:320px) and (max-width:760px) {
    .area-title h2{
        padding-top: 8px;
        font-size: 45px;
        padding-bottom: 0;
        margin-bottom: -30px;
    }
    .nav>li>a>img {
        max-width: 38px;
        margin-top: -13px;
    }
    .navbar-toggle{
        margin-top: -7px;
    }
    header .navbar-nav {
        margin: -1.5px 2px;
    }
    header .navbar-default{
        margin-top: -10px;
    }
    .navbar-right{
        background-color: white;
    }
    .navbar-default .navbar-nav>li>a {
        color: black;
    }
    .sticky .navbar-brand{
        margin-top: 6px;
    }
    .sticky .navbar-toggle{
        margin-top: 5px;
    }
}
@media (min-width: 762px)and (max-width: 984px) {
    .navbar-default .navbar-nav>li>a {
        font-size: 10px;
    }
    .nav>li>a>img {
        margin-top: -9px;
    }

}

/*mobile side navbar css*/
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 14px;}
}
/*slider css*/
@media only screen and (max-width:480px) {
    .nav>li>a>img {
        max-width: 50px
    }
    .sliderIndicators>.carousel-indicators {
        top:2.5em;
        height: 80%;
        width: 150px
    }
    .sliderIndicators>.carousel-indicators li {
        width: 75px;
        height: 50px;
        border: 3px solid #fff
    }
    .sliderIndicators>.carousel-indicators .active {
        width: 150px;
        height: 50px;
        border: 3px solid #fff
    }
    .sliderIndicators>.carousel-indicators li img {
        width: 75px
    }
    .sliderIndicators>.carousel-indicators li div {
        width: 75px;
        height: 50px;
        padding: 2px
    }
    .sliderIndicators>.carousel-indicators li div>a {
        font-size: 9px;
        margin-bottom: 2px
    }
    .sliderIndicators>.carousel-indicators li div>span {
        font-size: 8px
    }
    .sliderText {
        right: 2%
    }
    .sliderText>h1 {
        font-size: 25px;
        margin-bottom: 3px
    }
    .sliderText>h1>span {
        margin-left: 3px
    }
    .sliderText>p {
        width: 100%;
        font-size: 10px
    }
    .sliderText>a {
        font-size: 10px;
    }
}
@media(min-width:481px) and (max-width:767px) {
    .sliderIndicators>.carousel-indicators {
        height: 80%;
        width: 200px
    }
    .sliderIndicators>.carousel-indicators li {
        width: 100px;
        height: 75px;
        border: 5px solid #fff
    }
    .sliderIndicators>.carousel-indicators .active {
        width: 200px;
        height: 75px;
        border: 5px solid #fff
    }
    .sliderIndicators>.carousel-indicators li img {
        width: 100px
    }
    .sliderIndicators>.carousel-indicators li div {
        width: 100px;
        height: 75px;
        padding: 3px 3px 0 5px
    }
    .sliderIndicators>.carousel-indicators li div>a {
        font-size: 11px;
        margin-bottom: 3px
    }
    .sliderIndicators>.carousel-indicators li div>span {
        font-size: 10px
    }
    .sliderText {
        width: 50%
    }
    .sliderText>h1 {
        font-size: 30px;
        margin-bottom: 3px
    }
    .sliderText>p {
        width: 95%;
        font-size: 14px
    }
    .sliderText>a {
        margin-top: 5px
    }
}
@media(min-width:768px) and (max-width:991px) {
    .sliderIndicators>.carousel-indicators {
        height: 70%
    }
}
@media(min-width: 320px)and (max-width:480px){
    .sliderText{
        top:19px;
    }
}
@media only screen and (max-width: 800px){
    .sliderText {
        top: 16%;
    }
}
/*service css*/
@media (min-width:765px) and (max-width:1000px){
    .serviceBox .title{
        font-size: 15px;
    }
    .serviceBox .description{
        font-size: 14px;
    }
}
/*offerCard css for mobile*/
@media (min-width: 310px) and (max-width:390px){
    .offerCardMobile-area .cardMobile .h1{
        font-size: 20px;
    }
    .offerCardMobile-area .cardMobile p{
        font-size: 12px;
    }

}
@media (min-width: 391px) and (max-width:520px){
    .offerCardMobile-area .cardMobile .h1 {
        font-size: 32px;
    }

    .offerCardMobile-area .cardMobile p{
        font-size: 15px;
    }
}
@media (min-width: 390px) and (max-width:760px) {
    .offerCardMobile-area .cardMobile a:last-child {
        text-decoration: none;
        margin: 0 auto;
    }
}


/*menuCard css*/
@media (min-width: 500px) and (max-width:760px){
    .menuCard:nth-child(2n){
        margin-top:15px;
    }
}
@media (min-width:320px) and (max-width:500px){
    .menuCard .foodDetails {
        margin-left: -25px;
    }
    .menu-section .menuCard div div h4 {
        font-size: 15px;
    }
    .menuCard>div>.col-md-8>p {
        font-size: 12px;
    }
    .menuCard .foodDetails {
        padding-top: 0;
    }

    .menuCard:nth-child(2n){
        margin-top:15px;
    }
}
@media (min-width:600px) and (max-width:700px){
    .menuCard .foodDetails {
        padding-top: 2em;
    }
}
@media (min-width:750px) and (max-width:800px){
    .menuCard .foodDetails {
        padding-top: 2em;
    }
}
/*testimonial css*/
@media (min-width:300px) and (max-width:750px) {
    .testimonial .description {
        font-size: 12px;
    }
}
/*contact css*/
@media (min-width:310px) and (max-width:751px){
    .reserv-wrap {
        margin-top: 10px;
    }
    .contact-area>div>div:last-child {
        position: relative;
        top: 0;
    }
}
@media (min-width:755px) and (max-width:1155px) {
    .reserv-wrap {
        padding: 54px 30px;
    }
}
@media (min-width:1200px) and (max-width:1850px) {
    .reserv-wrap {
        padding: 73px 30px;
    }
}
/*------------------------------------------------------------
    10. Responsive css(mobile,tab support) stop here
-------------------------------------------------------------*/