.header .navbar {
    border-top-style: solid;
    border-top-color: var(--header-secondary);
}

.navbar-nav .active a {
    color: #000000 !important;
}

/* ============== header ========= */
.customHeader {
    background-image: url("https://apihoard.webit.com/api/v1/Image/296A68866D3E5C3DB6B7EF82D5D04B21/296A68866D3E5C3DB6B7EF82D5D04B21.jpg?size=1920x1440");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.customHeader img {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.customHeader .socialMedia a {
    color: #ffffff;
}

.customHeader .fa-facebook {
    background-color: #3C5A99;
}

.customHeader .fa-google-plus {
    background-color: #DC4E41;
}

.customHeader .fa-yelp {
    background-color: #EA2D10;
}

.customHeader i {
    height: 50px;
    width: 50px;
    line-height: 55px;
    font-size: 2em;
}

.page-home h1 {
font-size: 2.25rem!important;
}

/* ================ button sectionn =================== */

.buttonSection {
    background-color: var(--color-theme-primary);
}

.buttonSection a {
    color: #ffffff;
}

/* xss: 300px and Up */
@media (min-width: 300px) {
    .buttonSection .btns h4 {
        visibility: visible;
    }

    .buttonSection .btn1 {
        background-image: url("https://apihoard.webit.com/api/v1/Image/290BE3AB39096D2B4A3768283B90349A/290BE3AB39096D2B4A3768283B90349A.jpg?size=1920x1440");
        padding: 10em 0;
    }

    .buttonSection .btn2 {
        background-image: url("https://apihoard.webit.com/api/v1/Image/5D1D62317ED4B02990C815293BEC5783/5D1D62317ED4B02990C815293BEC5783.jpg?size=1920x1440");
        padding: 10em 0;
    }

    .buttonSection .btn3 {
        background-image: url("https://apihoard.webit.com/api/v1/Image/DA74E0C0707E45EBA6C3A28929ED87B9/DA74E0C0707E45EBA6C3A28929ED87B9.jpg?size=1920x1440");
        padding: 10em 0;
    }

    .buttonSection .btn4 {
        background-image: url("https://apihoard.webit.com/api/v1/Image/B1EC35552E3089CDE70CC6BE05773C81/B1EC35552E3089CDE70CC6BE05773C81.jpg?size=1920x1440");
        padding: 10em 0;
    }

    .buttonSection .btn1,
    .buttonSection .btn2,
    .buttonSection .btn3 {
        margin-bottom: 30px;
    }
}

/* sm: 728px and Up */
@media (min-width: 728px) {

    .buttonSection .btn1,
    .buttonSection .btn2 {
        margin-bottom: 30px;
    }

    .buttonSection .btn3 {
        margin-bottom: 0px;
    }
}

/* md: 992px and Up */
@media (min-width: 992px) {
    .buttonSection .btns h4 {
        visibility: hidden;
    }

    .buttonSection .btns:hover {
        background-image: none;
        background-color: #228557 !important;
        transition: .9s ease;
    }

    .buttonSection .btns:hover h4 {
        visibility: visible;
    }

    .buttonSection .btn1 {
        background-image: url("https://apihoard.webit.com/api/v1/Image/2F13B1D351AC1F0E3DCA263473D0E81B/2F13B1D351AC1F0E3DCA263473D0E81B.jpg?size=1920x1440");
        padding: 10em 0;
    }

    .buttonSection .btn2 {
        background-image: url("https://apihoard.webit.com/api/v1/Image/6BF375C32330719AA97B6261C061F46D/6BF375C32330719AA97B6261C061F46D.jpg?size=1920x1440");
        padding: 10em 0;
    }

    .buttonSection .btn3 {
        background-image: url("https://apihoard.webit.com/api/v1/Image/786A0F776DDA7225B9A894ABC45A275E/786A0F776DDA7225B9A894ABC45A275E.jpg?size=1920x1440");
        padding: 10em 0;
    }

    .buttonSection .btn4 {
        background-image: url("https://apihoard.webit.com/api/v1/Image/2CF012755D268CDE95E53EA5B87664B9/2CF012755D268CDE95E53EA5B87664B9.jpg?size=1920x1440");
        padding: 10em 0;
    }
}

/* LG: 1200px and Up */
@media (min-width: 1200px) {

    .buttonSection .btn1,
    .buttonSection .btn2 {
        margin-bottom: 0px;
    }
}

/* MENU PAGES =======================================================  */

.menu-container h3 {
    text-align: center;
    padding: 1rem 0;
    background: #228557;
    color: white;
    font-weight: 400;
    margin-bottom: 1rem;
}

.wb__menudetails {
    position: relative;
    vertical-align: top;
    overflow-x: hidden;
    margin: 0 2%;
}

.wb__menudetails p {
    margin: 1rem 0 2rem;
    padding: 0;
}

.wb__menudetails p:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content: ". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . ";
}

span.left {
    overflow-x: hidden;
    padding: 0 2% 0 0;
    background: #FFFFFF;
    font-size: 1.125em;
}

span.right {
    float: right;
    background-color: #FFF;
    padding: 0 0 0 1%;
    overflow-x: hidden;
    font-size: 1.125em;
}

span.additional:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content: ". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . ";
}

.additional {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 10px 0 0 5px;
}

.additional span.left {
    overflow-x: hidden;
    padding: 0 2% 0 0;
    background: #FFFFFF;
    font-size: 1rem !important;
}

.additional span.right {
    float: right;
    background-color: #FFFFFF;
    padding: 0 0 0 1%;
    overflow-x: hidden;
    font-size: 1rem !important;
}

span.descrip {
    display: block;
    margin-top: 2%;
}

.wb__menudetails img {
    margin: 0 0 2em 0;
}

/* Catering Menu =======*/

.wb__menu h3 {
    text-align: center;
    padding: 1rem 5px;
    background: #cc160b;
    color: #fff;
    font-weight: 400;
    margin-bottom: 1rem;
    text-transform: uppercase
}

.wb__menu .wb__menudetails {
    position: relative;
    vertical-align: top;
    overflow-x: hidden;
    padding: 0 15px
}

.wb__menu .wb__section-description {
    margin-bottom: 1rem;
    text-align: center;
    display: block;
    max-width: 705px;
    margin: 0 auto 1rem
}

.wb__menu .wb__menudetails p {
    margin: .5rem 0 1rem;
    padding: 0;
    overflow-x: hidden
}

.wb__menu .wb__menudetails p:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."
}

.wb__menu .wb__menudetails .additional {
    margin-left: 2%!important;
    margin-top: -15px!important
}

.wb__menu .wb__menudetails .additional span.left {
    overflow-x: hidden;
    padding: 0 2% 0 0;
    background: #fff;
    font-size: 1rem!important
}

.wb__menu .wb__menudetails :not(.additional) span.left {
    font-weight: 700
}

.wb__menu .wb__menudetails .additional span.right {
    float: right;
    background-color: #fff;
    padding: 0 0 0 1%;
    overflow-x: hidden;
    font-size: 1rem!important
}

.wb__menu .wb__menudetails span.left {
    overflow-x: hidden;
    padding: 0 2% 0 0;
    background: #fff;
    font-size: 1.125em
}

.wb__menu .wb__menudetails span.right {
    float: right;
    background-color: #fff;
    padding: 0 0 0 1%;
    overflow-x: hidden;
    font-size: 1.125em
}

.wb__menu .wb__menudetails span.descrip {
    display: block;
    margin-top: 1%;
    margin-left: 4%
}

.wb__menu .wb__menudetails img {
    margin: 0 0 1rem;
    width: 420px
}

.wb__menu.wb__menu-catering .wb__menudetails p:not(.additional):before {
    content: ""
}

.wb__menu-catering h5 {
    color: var(--color-theme-primary);
    text-align: center
}

.wb__menu-catering .wb__cater-options {
    text-align: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch
}

.wb__menu-catering .wb__cater-options .wb__optionbox {
    border: 2px dashed #000;
    padding: 1rem;
    flex-basis: 99%;
    margin: 10px 5px
}

.wb__menu-catering .wb__cater-options .wb__optionbox span {
    display: inline-block;
    font-weight: 700;
    padding: .5rem 1rem;
    margin: 4px 6px
}

.wb__menu-catering .wb__cater-options .wb__optionbox p {
    margin-bottom: 3px
}

@media(min-width: 992px) {
    .wb__menu-catering .wb__cater-options .wb__optionbox {
        flex-basis:32%
    }
}
