@font-face {
    font-family: 'Brandon Grotesque';
    src: url('../../fonts/brandon-grotesque-medium.woff2') format('woff2');
    font-weight: normal;
    font-style: medium;
    font-display: swap;
}

@font-face {
    font-family: 'Brandon Grotesque';
    src: url('../../fonts/brandon-grotesque-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: bold;
    font-display: swap;
}

a,
.panel-body,
body {
    font-family: "Brandon Grotesque" !important;
    font-weight: normal;
}



#logo {
    height: 34px;
}

.main_menu_bg {
    background-color: #293735;
}

h6 {
    font-size: 1.2rem;
}

small,
.small {
    font-size: 90%;
    color: grey;
}

.control-group {
    margin-bottom: 24px;
}

.control-group h6 {
    margin-bottom: 16px;
}


label > span {
    color: #293735;
}


#choose_modal .modal-header {
    height: 50px;
}

#choose_modal .modal-body h4 {
    text-transform: none;
}


#choose_modal .modal-body p {
    color: #000;
    font-family: "Brandon Grotesque" !important;
    font-weight: normal;
}



.get-product {
    margin-top: 50px !important;
}

.post1 {
    max-width: 250px !important;
}

 .top-nav > li > a {
    color: #FFF;
    padding-bottom: 15px;

}

.top-nav > li > a:hover, .top-nav > li > a:focus, .top-nav > li > a:active {
    color: #FDC400;
}

#dm > li > a {
    color: #E05000;
    font-weight: bold;
}

#dm > li > a:hover {
    color: #FFFFFF;
    background-color: #E05000;
}


.title {
    margin-top: 40px;
    
    font-size: 12px;
    color: #293735 !important;
}

.form-control {
    color: black !important;
    font-size: 18px;
}

.control--checkbox {
    border: none !important;
    background-color: #FBF5EE;
}

.control__indicator {
    border: 1px solid #000;
}

.control--checkbox .control__indicator:after {
    border: solid #293735;
    border-width: 0 2px 2px 0;
}

.control input:checked ~ .control__indicator {
    background: none;
}

.control-group label p {
    margin-left: 32px;
}

.form-group label {
    font-weight: normal !important;
    font-size: 18px;
}


#cate {
    margin-top: 24px;
    color: #293735;
    font-weight: normal;
}


#category {
    padding-top: 30px;
}

.post-catering {
    background-color: #23600F;
    padding: 10px 16px;
    color: white;
}

.post-catering h4 {
    color: white !important;
}

.post-catering a {
    color: white !important;
    font-weight: bold;
    text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0px;
    color: #293735;
    font-family: "Brandon Grotesque" !important;
    font-weight: normal !important;
}

h2 {
    font-size: 3em !important;
}

h2 small {
    font-size: 16px;
    line-height: 1.3;
    font-weight: normal;
}

a {
    color: #E05000;


    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #E05000;
}

.separator4 {
    display: none;
}

.text-center {
    text-align: left;
}

.box {
    background-color: #FFF;
}




/*home section*/
.home_menu {
    background-size: cover;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.home_menu .main_home {
    padding-top: 250px;
}

.home_menu .align-center {
    padding-top: 200px;
    text-align: center;
}

.home_menu .align-center2 {
    padding-top: 50px;
    text-align: center;
}


.home_menu .align-center2 a {
    padding: 10px 20px;
    display: inline-block;
    margin: 0 8px !important;
    border: 2px solid #ECEFF1;
    color: #ECEFF1;
}

.home_menu .align-center2 a:hover {
    background: #ECEFF1;
    color: #000;
}

.home_menu .main_home h1 {
    color: #fff;
    padding-bottom: 25px;
    width: 85%;
}

.home_menu .main_home p.subtitle {
    color: #5E9A28;
    padding-bottom: 25px;
    font-weight: 500;
    font-size: 2.5rem;
}

.home_menu .main_home .video_play_icon a {
    width: 175px;
    height: 125px;
    background: #032F3E;
    display: inline-block;
    text-align: center;
    line-height: 140px;
}

.home_menu .main_home .video_play_icon a i {
    color: #fff;
    border: 2px solid #fff;
    padding: 10px;
    font-size: 30px;
    border-radius: 50%;
}

.overlay2 {
    background-color: rgba(0, 0, 0, 0.5);
    height: 300px;
}

.navbar-fixed-top {
    background-color: #fff;
}

#pro {
    height: 160px;
    margin-bottom: 15px;
}

.item-img-box #ft2 {
    width: 100%;
    object-fit: cover;
}

.item-img-box img {
    height: 160px;
}

.item-img-box {
    height: 160px;
    position: absolute;
    left: 0;
}

.item-img-box img {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.item-info {
    height: 100%;
    position: absolute;
    right: 0;
}

.item1 {
    height: 100%;
    border: #fff solid 1px;
    background-color: #fff;
    box-shadow: 1px 1px 9px 0 rgba(0, 0, 0, .175);
}

.item1:hover {
    box-shadow: 2px 2px 9px 0 rgba(0, 0, 0, .275);
    background-color: #f5f5f5;
}

.panel-footer1 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 15px;
}

.emsg {
    color: red;
}



/* buttons */
.btn,
.btn2 {
    color: #000000 !important;
    padding: 11px 48px;
    border: none;
    background-color: #FDC400 !important;
    margin-left: 0px;
    margin-right: 0px;
    border-radius: 0px !important;
    font-family: "Brandon Grotesque" !important;
    font-weight: normal;
    font-size: 18px;
}

/**
.btn:hover {
    border: none;
    background-color: #E3B000 !important;
    color: #000000;
}

.btn:focus {
    border: none;
}
**/

#voucher_btn:hover,#voucher_btn:focus,#voucher_btn:active,
.btn2:hover, .btn2:focus,.btn2:active,
.modal .btn:hover,.modal .btn:active,.modal .btn:focus,
.modal .btn-primary:hover,.modal .btn-primary:focus,.modal .btn-primary:active,
#doorgaan:hover, #doorgaan:active,#doorgaan:focus,
.box-footer .btn-primary:hover,.box-footer .btn-primary:focus,.box-footer .btn-primary:active{
    
    border: none !important;
    background-color: #E3B000 !important;
    color: #000000 !important;
 
}

.box .btn:hover,.box .btn:active,.box .btn:focus,
.box .btn-primary:hover,.box .btn-primary:focus,.box .btn-primary:active{
   
    border: none !important;
    background-color: #E3B000 !important;
    color: #000000 !important;

}

.checkout-btn,
.shopCart .content {
    background-color: #FDC400 !important;
    color: #000000 !important;
}

.shopCart {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.shopCart a {
    color: #000000 !important;
}

#cart {
    background-color: #FDC400;
    color: black !important;
}

#cart i {
    color: black !important;
}

.checkout-btn:hover {
    background-color: #E3B000 !important;
}




.text-muted,
.modal a strong {
    color: #77605C;
}

.text-muted:hover,
.modal a strong:hover {
    color: #E05000;
}

.pull-left .fa {
    padding-right: 8px;
}

.pull-right .btn {
    margin-bottom: 8px;
}

#footer-total div:first-child .btn {
    padding: 11px 16px;
    background-color: #FBF5EE !important;
    margin-left: 5px;
    margin-right: 5px;
}

#footer2 {
    border: none;
}

#bijgerecht {
    background-color: #FDC400 !important;
}


.panel-body {
    text-align: left;
    padding: 15px 0px 0px 0px;
    height: 100%;
}

.panel-body > div {
    padding: 0px
}


#pname b {
    font-size: 20px;-webkit-line-clamp: 1;
    color: #77605C;
    padding-right: 5px;
    font-family: "Brandon Grotesque" !important;
    font-weight: normal;
}

#pdes {
    font-size: 14px;
    color: #293735;
}

#pprice {
    position: absolute;
    bottom: 10px;
}

#pprice b {
    font-size: 16px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    color: #E05000;
}

.pull-left .btn1 {
    padding: 5px 10px;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
}

.pull-right .btn1 {
    display: inline-block;
}


/** 2 type box **/
.item2 {
    margin: 5px;
    border: 1px solid #000;
    height: 260px;
}

.item2 .panel-heading {
    padding: 5px;
}

.item2 .panel-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

.item2 .panel-footer .btn1 {
    padding: 5px 40px;
}

.item2 .panel-footer .btn1:hover {
    background: #000;
}

/** 3 type box for small screen **/
#pro1 {
    height: 80px;
}

.item3 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 5px;
    border-top: 1px dotted #B4A895;
}

.left {
    height: 60px;
    width: 60px;
}

.left img {
    width: 60px;
}

.middle {
    width: 60%;
    text-align: left;
}

.right {
    /**
    text-align: right;
    **/
    display: flex;
    justify-content: center;
    align-items: center;
}


/** category **/
.get_cate a {
    overflow-y: auto;
    overflow-x: hidden;
    list-style: none;
    padding-left: 0;
    font-size: 18px;
}

.get_cate li a {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    line-height: 1;
    font-weight: normal !important;
    display: block;
    text-align: left;
    cursor: pointer;
    padding: 16px 10px;
    margin-bottom: 10px;
    color: black;
}

.get_cate .active:hover,
.get_cate .active:focus {
    color: #E05000 !important;
    text-decoration: none;
}

.get_cate .active {
    
    text-decoration: none !important;
}



.get_cate .active {
    color: black !important;
    border-bottom: 3px solid #FDC400;
}

.get_cate .active:hover {
    color: black !important;
    border-bottom: 3px solid #FDC400;
}

.get_cate {
    margin-bottom: 24px;
    font-size: 18px;
}

.get_cate li a:hover,
.get_cate li a:focus {
    color: #E05000 !important;
}

#gegevens {
    margin-top: 40px;
}


#gegevens .col-sm-12 {
    text-align: left !important;
    background-color: #FBF5EE;
    padding: 16px 20px 20px;
}


.form-group {
    padding-bottom: 15px;
    padding-top: 0px;
    background-color: #FBF5EE;
    padding: 16px 20px 20px 20px;
    margin-bottom: 0px;
}

#doorgaan {
    margin-top: 0px
}


.sections {
    margin-top: 30px;
}

#nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

select {
    /* Here's the code we need */
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 0px;
}

.select-wrapper {
    position: relative;
}

.select-wrapper:after {
    font-family: FontAwesome;
    content: '\f107';
    font-size: 28px;
    position: absolute;
    top: -2px;
    right: 20px;
    color: #434B67;
    pointer-events: none;
}

select::-ms-expand {
    display: none;
}

/**
.alert-info{
   color: #fff;
   background-color: #777;
   border-color: #777;
   margin: 10px;
}
**/
.image-container {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

#promotie p {
    margin-top: 20px;
    font-size: 18px;
    margin-bottom: 20px;
}

#promotie .modal-header {
    border-color: transparent;
    height: 50px;
}

#promotie .modal-body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 40px;
}

#promotie .modal-footer {
    border-color: transparent;
    padding: 40px;
}

.service {
    background: #FBF5EE;
}

.cd-cart-items {
    font-size: 16px;
}

.cd-cart-total p {
    font-size: 18px;
    font-weight: bold;
}

small,
.small,
.cd-button a {
    color: #293735 !important;
}

.cd-button a:hover {
    color: #000000 !important;
}

table tr td a {
    padding: 2px;
    color: #293735;
}

tbody td, tfoot th {
    font-size: 18px !important;
}

#location {
    padding-left: 0px;
}


select,
.form-control {
    color: black;
}

.dmsg {
    color: #E05000;
    font-size: 18px;
}

#gegevens{
        font-size: 18px !important;
    }
.main_service_area #forum {
    padding: 25px;
    
}
@media (max-width: 768px) {
    #promotie .modal-dialog {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    #promotie .modal-content {
        min-height: 100%;
        border-radius: 0;
        border: 0px;
    }

    #promotie p {
        margin-top: 20px;
        font-size: 14px;
    }
    
}


@media(max-width:768px) {
    .middle {
        width: 80%;
        text-align: left;
    }

    .title {
        background-position: 100% 100%;
        margin-top: 0px;
    }
    
    .navbar-brand{
        margin-left: 15px;
    }

    #choose_modal .modal-header {
        height: 0px;
    }

}

@media(max-width:480px) {
    .middle {
        width: 70%;
    }

    .item3 {
        border-top: 0.5px dotted #B4A895;
    }

    .left {
        margin-right: 12px;
    }

    #footer-total div:first-child .btn {
        padding: 11px 10px;
    }

    .btn,
    .btn2 {
        padding: 11px 16px;
    }


}

@media(max-width:480px) {
    .item-img-box img {
        width: 80px;
    }

    .navbar-header .navbar-brand img {
        width: 60%;
    }
    

}


@media (max-width: 480px) {
    .home_menu .align-center2 {
        padding-top: 20px;
    }
}


#sidebar_left{
    
    background: #293735;
}

#sidebar_left .get_cate li a{
    
    color: #fff !important;
}

#sidebar_left .get_cate li a:hover,#sidebar_left .get_cate li a:focus {
    
    color: #E05000 !important;
    
}

#dismiss_left{
    
    color: #fff !important;
    
}

.open #dm > li > a{
    
     font-family: "Brandon Grotesque" !important;
     color: #E05000 !important;
     font-weight: bold;
}

.open #dm > li > a:hover, .open #dm > li > a:focus, .open #dm > li > a:active {
    
    color: #FFFFFF !important;
    background-color: #E05000 !important;
}

@media (max-width: 480px){
#logo {
    height: 20px;
}
.nav>li>a {
    padding-left: 10px;
    padding-right: 10px;
}
}
@media (max-width: 375px){
#logo {
    height: 18px;
}
.nav>li>a {
    padding-left: 7px;
    padding-right: 7px;
}

.top-nav {
    padding: 0px;
}

}

@media (max-width: 320px){
     
 .top-nav {
    margin-right: -10px;
}
 .nav>li>a {
    padding-left: 5px;
    padding-right: 5px;
}
}