﻿/* B12 */
/* General */
body { line-height: 1; color: #dcdcdc; font-size: 20px; background-color: #1e1e1e; }
h1, h2, h3 { font-family: 'Heebo-Bold'; }
h1 { font-size: 250%; }
.top-caption { font-size: 100%; }
h2, .grid-rows .grid-row-text h2 { font-size: 225%; }
.home-page .grid-rows .grid-row { background-color: inherit; color: inherit; padding: 65px 0px 230px; display: flex !important; justify-content: center; }
#whatAppButton img { max-width: 90px; }
#stickyButton-2573 { left: 130px; }
#stickyButton-2573 a img { max-width: 90px; }

@media (max-width:767px) {
    #whatAppButton { bottom: 120px; }
    #whatAppButton img { max-width: 70px; }
    #stickyButton-2573 { left: 20px; bottom: 40px; }
    #stickyButton-2573 a img { max-width: 70px; }
}

/* Buttons */
#header #header-center-kdm a, .grid-rows .grid-row-text a.grid-row-button,
.grid-gallery-section a.sec-button { color: #fff; border-radius: 10px; border: 2px solid #f84242; background-color: #f84242; padding: 8px 19px; font-size: 90%; font-family: 'Heebo-Bold'; transition: 0.35s all; }
#header #header-center-kdm a:hover { background: #1e1e1e; border: 2px solid #f84242; color: #fff; }
#header #header-center-kdm a { visibility: visible !important; }
.grid-rows .grid-row-text a.grid-row-button { padding: 10px 19px 10px 53px; position: relative; margin-top: 60px; }
.grid-gallery-section a.sec-button { padding: 5px 19px 5px 53px; position: relative; }
.grid-rows .grid-row-text a.grid-row-button:hover,
.grid-gallery-section a.sec-button:hover { background: #f84242; }
.grid-rows .grid-row-text a.grid-row-button::after,
.grid-gallery-section a.sec-button::after { content: ""; position: absolute; background-repeat: no-repeat; width: 29px; height: 25px; top: 3px; left: 10px; background-image: url(/warehouse/temp/b12-butcher/knife-for-button.svg); transition: 0.3s all; }
.grid-rows .grid-row-text a.grid-row-button:hover::after,
.grid-gallery-section a.sec-button:hover::after { transform: rotate(-40deg); }

/* Header */
#header, .home-page #header:not(.bg), #header.bg { background: #1e1e1e; background-color: #1e1e1e; display: flex; justify-content: space-between; align-items: center; padding: 26px 40px; }
#header #header-left { padding: 0; }
#header #header-left img, #header.bg #header-left img { max-width: unset; }
#header #header-center-kdm, #header.bg #header-center-kdm { font-size: 100%; flex-grow: 1; display: flex; align-items: center; justify-content: space-between; position: relative; left: unset; top: unset; transform: none; padding: 0; }
#header #header-center-kdm .address { margin-right: unset; padding-left: 40px; }
#header #header-center-kdm .address span { font-size: 85%; }
#header #header-right { padding: 0; }
#header .social-links { padding: 0 15px 8px 30px; }
#header .social-links a { font-size: 0; margin-left: 5px; }
#header .social-links a svg { width: 15px; height: 15px; transition: 0.35s all; }
#header .social-links a:hover svg { fill: #f84242; }
#header #header-right .closed { display: none; }
#header .menu-nav { background: transparent; padding: 0; position: relative; }
#header .menu-nav .nav-menu-anim { margin-left: 0; }
#header .menu-nav #nav-toggle::after { content: ""; position: absolute; width: 1px; height: 100%; background: #fff; left: -4px; }
#nav-toggle span, #nav-toggle span:after, #nav-toggle span:before, #nav-toggle-mobile span, #nav-toggle-mobile span:after, #nav-toggle-mobile span:before { width: 27px; }
#nav-toggle span:before, #nav-toggle-mobile span:before { top: -8px; }
#nav-toggle span:after, #nav-toggle-mobile span:after { bottom: -8px; }
#header .submenu { background: #1e1e1e; color: #fff; right: -15px; top: 61px; text-align: right; max-height: 100vh; padding: 30px 45px 60px; width: 255px; }
#header .submenu > li.active { background: transparent; font-family: 'Heebo-Bold'; }
#header .submenu > li:not(.social-mobile) { letter-spacing: 0.36px; font-size: 90%; padding: 20px 0px; border-bottom: 1px solid #6b6b6b; }
#header .submenu .menu-sub { padding-right: 0; }
#header .submenu .has-sub .menu-sub li, #header .submenu .has-sub .menu-sub li { background: transparent; color: #000; }
#header .submenu .menu-sub li a { font-size: 74%; font-family: 'Heebo-regular'; }
#header .submenu .menu-sub li { text-align: right; padding-bottom: 5px; }
#header .submenu > li:focus, #header .submenu > li:hover { background: transparent; font-family: 'Heebo-Bold'; }
#header .submenu .has-sub .menu-sub li:focus, #header .submenu .has-sub .menu-sub li:hover { font-family: 'Heebo-Bold'; }
#header .submenu li.social-mobile { display: none !important; }
#header .submenu > li:first-child { margin-top: 0px; }
#header .menu-nav .open { display: none !important; }

@media (max-width:991px) {
    #header .submenu { top: 56px; }
    #header #header-right { width: 50px; }
}

@media (max-width:767px) {
    #header, .home-page #header:not(.bg), #header.bg { padding: 26px 20px; }
    #header #header-center-kdm a:first-child { font-size: 70%; padding: 6px 15px; }
    #header #header-left img, #header.bg #header-left img { max-width: 90px; }
    #header .submenu { top: 35px; right: -20px; padding: 15px 40px 40px; }
    #header .submenu > li:not(.social-mobile) { font-size: 70%; }
    #header #header-right { padding-left: 40px; }
}
/* Home Gallery */
#home-gallery { position: relative; height: calc(var(--vh)) !important; }
#home-gallery .slider-bg.stellar-bg { height: calc(var(--vh) ) !important; }
#home-gallery::after { content: ''; position: absolute; height: 290px; width: 290px; background: url(/warehouse/temp/b12-butcher/logo-hero.svg); background-repeat: no-repeat; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#home-gallery .scroll-down { display: none; }
#home-gallery > a {z-index: 6;position: absolute;left: 50%;bottom: 40vh;transform: translate(-50%,50%);}
@media (min-height: 900px) {  #home-gallery > a {bottom: 29vh;}  }
@media (max-width:767px) {  #home-gallery > a {bottom: 22vh;}  }

/* Our Story Section */
.home-page .grid-row-section { padding-top: 120px; margin: 0 auto; margin-bottom: 0px; width: 100%; }
.home-page .grid-rows { width: 90%; max-width: 1300px; margin: 0 auto; }
.home-page .grid-rows .grid-row:nth-of-type(odd) { direction: ltr !important; padding-bottom: 175px; }
.home-page .grid-rows .grid-row:nth-of-type(even) { direction: rtl !important; }
.home-page .grid-rows .grid-row-text { width: 77%; }
.home-page .grid-rows .grid-row-cell { vertical-align: top; }
.home-page .grid-rows .grid-row-text h2 { margin-bottom: 40px; padding-right: 40px; position: relative; }
.home-page .grid-rows .grid-row-text h2::after { content: ""; position: absolute; width: 30px; height: 3px; background: #f84242; right: 0; top: 50%; }
.home-page .grid-rows .grid-row-text p { font-size: 80%; line-height: 1.5; }
.home-page .grid-row-cell.flexslider-box { width: 50%; position: relative; }
.home-page .grid-row-cell.flexslider-box::before { content: ""; position: absolute; background-image: url(/warehouse/temp/b12-butcher/bg-for-pic.png); background-repeat: no-repeat; width: 100%; height: 95%; top: -35px; right: -28px; }
.home-page .grid-row .grid-row-cell.grid-row-cell-text { width: 50%; text-align: right; }
.home-page .grid-rows .grid-row:nth-of-type(even) .grid-row-cell-text { text-align: left; }

.gallery-container { width: 100%; margin-bottom: 60px; }
.row { margin-left: 15px; margin-right: 15px; }
.grid-gallery-section .grid { padding: 0; }

@media (max-width:991px) {
    .grid-rows { width: 90%; max-width: 1500px; margin: 0 auto; }
    .home-page .grid-rows { width: 100%; }
    .home-page .grid-rows .grid-row-cell { width: 100%; }
    .home-page .grid-rows .grid-row { flex-direction: column; align-items: center; padding: 30px 30px 60px; }
    .home-page .grid-row .grid-row-cell.grid-row-cell-text { width: 100%; }
    .home-page .grid-rows .grid-row-text { width: 100%; margin-top: 20px; }
    .home-page .grid-rows .grid-row-text h2 { margin-bottom: 20px; font-size: 150%; }
    .home-page .grid-row-section { padding-top: 60px; }
    .home-page .grid-rows .grid-row-text a.grid-row-button { margin-top: 30px; }
    .home-page .grid-rows .grid-row:nth-of-type(odd) { padding-bottom: 60px; }
}

/* Home Products Gallery */
.home-page .grid-gallery-section { background-color: #484848; padding: 230px 0 140px; margin-bottom: 0; }
.home-page .grid-gallery-section::before { content: ""; position: absolute; width: 830px; height: 171px; background-repeat: no-repeat; background-image: url(/warehouse/temp/b12-butcher/illustration-our-product.svg); top: 0px; left: 50%; transform: translate(-50%, -79%); }
.home-page .grid-gallery-section .gallery-cubes { max-width: 1360px; margin: 0 auto; }
.home-page .gridshortWrapper { display: grid; grid-template-columns: 25% 25% 50%; grid-template-rows: 50% 50%; }
.home-page .gridshort-view-item { width: unset; padding: 7px; position: relative; margin: 0; }
.home-page .gridshortWrapper:nth-child(odd) { direction: ltr; }
.home-page .gallery-cubes > div:nth-child(1), .gridshortWrapper .gridshort-view-item:nth-child(1) { grid-column: 3/4; grid-row: 1/3; }
.home-page .gallery-cubes > div:nth-child(2), .gridshortWrapper .gridshort-view-item:nth-child(2) { grid-column: 2/3; grid-row: 1/2; }
.home-page .gallery-cubes > div:nth-child(3), .gridshortWrapper .gridshort-view-item:nth-child(3) { grid-column: 1/2; grid-row: 1/2; }
.home-page .gallery-cubes > div:nth-child(4), .gridshortWrapper .gridshort-view-item:nth-child(4) { grid-column: 2/3; grid-row: 2/3; }
.home-page .gallery-cubes > div:nth-child(5), .gridshortWrapper .gridshort-view-item:nth-child(5) { grid-column: 1/2; grid-row: 2/3; }

@media (max-width:991px) {
    .home-page .grid-gallery-section { padding: 90px 0; }
    .home-page .grid-gallery-section::before { width: 90%; height: 73px; background-image: url(/warehouse/temp/b12-butcher/illustration-our-product-M.svg); top: 0; left: 50%; transform: translate(-50%, -79%); }
    .home-page .gridshortWrapper { display: flex; flex-direction: column; }
    .home-page .gridshort-view-item { padding: 0 15px 15px; }
}

/* Footer */
footer { margin-top: 0; padding: 0; }
#SiteFooter { padding: 0; border-top: 3px solid #484848; }
#SiteFooter .site-credit.alternative { margin: 0; }
#SiteFooter .footer-text-divided { height: 250px; display: flex; padding: 20px 10%; align-items: center; justify-content: space-between; }
#SiteFooter .footer-text-divided > div { padding: 0; }
#SiteFooter .footer-text-middle img { max-width: 158px; }
.footer-text-divided > div.footer-text-left a { padding-right: 15px; }
#SiteFooter .footer-text-left div a { margin-right: 5px; }
.footer-text-divided > div.footer-text-right { display: flex; }
.footer-text-divided > .footer-text-right ul { width: 50%; }
.footer-text-divided > .footer-text-right ul li { list-style: none; font-size: 90%; color: #f6f6f6; }
.footer-text-divided > .footer-text-right ul li:not(:last-child) { margin-bottom: 20px; }
#SiteFooter .footer-address { font-size: 100%; margin-top: 0px; margin-bottom: 15px; }
#SiteFooter .mobile-seperator a { padding: 5px 0; }
#SiteFooter .mobile-seperator { font-size: 90%; }

@media (max-width:991px) {
    .top-caption h1 { font-size: 180%; }
    #SiteFooter .footer-text-divided { padding: 0; height: 220px; }
    #SiteFooter .footer-text-middle img { max-width: 120px; }
    .footer-text-divided > div.footer-text-middle { width: 40%; }
    .footer-text-divided > div.footer-text-right { width: 60%; }
    .footer-text-divided > .footer-text-right ul { padding-right: 20px; }
    .footer-text-divided > .footer-text-right ul li:not(:last-child) { margin-bottom: 10px; }
    .footer-text-divided > .footer-text-right ul:last-of-type { padding-right: 0px; }
}

/* About Page */
.about #GridContent { padding: 80px 0 150px; }
.about #GridPage { padding-top: 0; }
.about #pageview { max-width: 700px; margin: 0 auto; }
.about #text1, .about #text2 { text-align: right; }
.about h4 { font-family: "heebo-bold"; margin: 60px 0 20px; padding-right: 40px; position: relative; }
.about h4::after { content: ""; position: absolute; width: 30px; height: 3px; background: #f84242; right: 0; top: 50%; transform: translateY(-50%); }
.about #text1 p, .about #text2 p, .about #text2 ul li { font-size: 75%; line-height: 1.5; letter-spacing: 0.28px; }
.about #text1 img { padding: 40px 0 10px; }
.about #text2 ul li { margin-bottom: 15px; }
.about #text2 ul { padding-right: 20px; }
.about #text2 ul li::marker { color: #f84242; font-size: 18px; }

@media (max-width:767px) {
    .about #GridContent { padding: 10px 0 90px; }
    .about h4 { margin: 30px 0 20px; }
}

/* Contact Page */
.contact #GridPage { padding-top: 80px; }
.contact #text1 { display: flex; flex-direction: row; max-width: 50%; text-align: right; margin-bottom: 90px; position: relative; justify-content: space-evenly; align-items: flex-start; }
.contact #text1 h4 { font-size: 80%; position: relative; font-family: "heebo-bold"; width: 100%; padding-right: 40px; }
.contact #text1 h4::after { content: ""; position: absolute; width: 30px; height: 3px; background: #f84242; right: 0; top: 50%; transform: translateY(-50%); }
.contact #text1 p { font-size: 75%; }
.contact #text1 ul { padding-right: 0; }

.contact #text1 ul li { list-style: none; line-height: 2; letter-spacing: 0.28px; font-size: 74%; }

.contact .form-container-wide #DynamicFormObject { background-color: #484848; border: none; display: flex; flex-direction: column; align-items: center; padding: 47px 47px 27px; }
.contact #DynamicFormObject:after { display: none; }
.contact .form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText,
.contact .form-container-wide #DynamicFormObject .dynamicFormObjectFields,
.contact .form-container-wide #DynamicFormObject .dynamicFormObjectField.textareaField { width: 100%; }
.contact .form-container-wide #DynamicFormObject .dynamicFormObjectField { width: 33.33%; padding-right: 6px; padding-left: 6px; }
.contact .form-container-wide #DynamicFormObject .dynamicFormObjectSubmit { margin: 0 auto; margin-top: 50px; padding: 0; width: auto; }
.contact .normal-form input, .contact .normal-form textarea { width: 100%; background: #fff; border: none; border-radius: 0; margin-bottom: 10px; font-size: 70%; max-width: 100%; }
.contact #DynamicFormObject .dynamicFormObjectTitleAndText h3.dynamicFormObjectTitle { color: #fff; }
.contact .form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText { font-size: 225%; padding-bottom: 15px; }
.contact .form-container-wide #DynamicFormObject .dynamicFormObjectFields .top-form { font-size: 90%; color: #fff; margin-bottom: 35px; display: inline-block; }
#DynamicFormObject .dynamicFormObjectField .must:before { right: 11px; font-size: 16px; }
.contact #SiteGrid #GridPromo { max-width: 970px; margin-bottom: 110px; }
.contact fieldset { display: flex; flex-wrap: wrap; }
.contact .normal-form textarea { height: 123px; }
#DynamicFormObject input[type=submit] { color: #fff; border-radius: 10px; border: 2px solid #f84242; background-color: #f84242; width: 154px; height: 42px; font-size: 100%; font-family: 'Heebo-Bold'; transition: 0.35s all; }
#DynamicFormObject input[type=submit]:focus, #DynamicFormObject input[type=submit]:hover { background: #1e1e1e; border: 2px solid #f84242; color: #fff; }
label.error, span.error { top: 13px; left: 15px; font-size: 70%; }

@media (max-width:767px) {
    .contact #GridPage { padding-top: 40px; }
    .contact #text1 { margin-bottom: 40px; flex-direction: column; align-items: center; }
    .contact .form-container-wide #DynamicFormObject .dynamicFormObjectField { width: 100%; }
    .contact .form-container-wide #DynamicFormObject { padding: 35px 20px 15px; }
    .contact .form-container-wide #DynamicFormObject .dynamicFormObjectSubmit { margin-top: 30px; }
    .contact .form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText { margin-bottom: 0px; padding-bottom: 5px; }
    .contact .form-container-wide #DynamicFormObject .dynamicFormObjectFields .top-form { margin-bottom: 20px; font-size: 80%; }
    #DynamicFormObject .dynamicFormObjectField .must:before { right: 15px; }
}

/* New Products Page */
.menu #MenuModule #subheadline { margin-top: 50px; }
.menu #MenuModule .menuModuleNav a { background: #fff; font-size: 115%; font-family: 'Heebo-Bold'; display: inline-flex; align-items: center; justify-content: center; transition: 0.35s all; }
.menu #MenuModule .menuModuleNav a.selected { color: #fff; background: #f84242; border: none; }
.menu .menuModuleTextItemTitle { color: #fff; position: relative; padding-right: 40px; max-width: 75%; }
.menu .menuModuleTextItemTitle::after { content: ""; position: absolute; width: 30px; height: 3px; background: #f84242; right: 0px; top: 50%; transform: translateY(-50%); }
.menu .menuModuleTextItemPart:after { border-bottom: 3px solid #484848; width: calc(100% - 40px); }
.menu .menuModuleTextItemPrice { color: #fff; position: relative; background: #f84242; padding: 5px 9px; border-radius: 15px; font-family: "heebo-bold"; font-size: 85%; }
.menu .menuModuleTextItem1, .menuModuleTextItem0 { margin-bottom: 60px; }
.menu .menuModuleTextItemPart { padding-bottom: 15px; }
.menu .menuModuleContentPart { border: none; padding: 0px 50px 50px; }
.menu .menuModuleContentPart:after { display: none; }
.menu .menuModuleTextItemSubjectTitle { padding-top: 30px; }
.menu li.notTable { width: 100%; }
.menu li.notTable .menuModuleTextItemPart:after { width: calc(100% - 20px); }
.menu li.menuModuleTextItem1.notTable .menuModuleTextItemPart, li.menuModuleTextItem0.notTable .menuModuleTextItemPart { padding-left: 20px; }

@media (max-width:991px) and (min-width:768px) {
    .menu #GridWrap #MenuModule .menuModuleNav a { width: 170px; font-size: 95%; }
}

@media (min-width:768px) {
    .menu #MenuModule .menuModuleNav { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); max-width: 970px; width: 100%; }
    .menu #MenuModule .menuModuleNav a { background: #fff; font-size: 115%; font-family: 'Heebo-Bold'; width: 198px; height: 50px; border-radius: 27px; display: inline-flex; align-items: center; justify-content: center; margin-left: 7px; margin-right: 7px; transition: 0.35s all; }
    .menu #MenuModule .menuModuleNav a.selected { color: #fff; background: #f84242; }
    .menu .menuModuleTextItem1 .menuModuleTextItemPart:nth-child(even), .menuModuleTextItem0 .menuModuleTextItemPart:nth-child(even) { padding-right: 0; }
    .menu .menuModuleTextItemPart.test2 .menuModuleTextItemPrice { position: absolute; left: 20px; }
    .menu .menuModuleTextItemPart.test2::after { width: calc(100% - 20px); }

    .menuModuleTextItem1 .menuModuleTextItemPart:nth-child(odd), .menuModuleTextItem0 .menuModuleTextItemPart:nth-child(odd) { padding-left: 40px; }
}

@media (max-width:767px) {
    .menu #GridPage .max-width { width: 100%; }
    .menu .menuModuleContentPart { padding: 30px 25px; margin-bottom: 0px; }
    .menu #MenuModule #subheadline { max-width: 90%; margin: 20px auto 0; }
    .menu #text1 { max-width: 90%; }
    .menu .menuModuleTextItem1, .menuModuleTextItem0 { margin-bottom: 25px; }
    .menu #MenuModule .menuModuleNav { display: flex; position: relative; border-radius: unset; overflow: scroll; justify-content: normal; width: 100%; padding: 0; }
    .menu #MenuModule .menuModuleNav a { width: auto; white-space: nowrap; padding: 10px 15px; border-radius: 0; margin: 0; border-left: 1px solid; border-right: 1px solid; }
    .menu .menuModuleTextItemTitle { max-width: 75%; }
    .menu .menuModuleTextItemPart:after {; width: 100%; }
}
