/* BUBBA Burger Global Styles 2023 */

:root {
    --font-primary: 'Oswald', sans-serif;
    --font-secondary: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    --f-size-1: 65px;
    --f-size-2: 40px;
    --f-size-3: 30px;
    --f-size-4: 26px;
    --f-size-5: 22px;
    --f-size-6: 18px;
    --f-size-7: 16px;
    --f-size-8: 15px;
    --f-size-9: 12px;
    --f-size-10: 11px;
    --f-size-11: 10px;
}

/* Colors */
:root {
    --primary: #900028;
    --secondary: #E9D3AC;
    --tertiary: #FFDFA1;
    --quaternary: #9a9a9ad9;
    --primary-rgba: rgba(144, 0, 40, 1);
    --secondary-rgba: rgba(233, 211, 172, 1);
    --tertiary-rgba: rgba(255, 223, 161, 1);
    --quaternary-rgba: rgba(154, 154, 154, 0.85);
    --primary-rgba-15: rgba(144, 0, 40, 0.15);
    --secondary-rgba-15: rgba(233, 211, 172, 0.15);
    --tertiary-rgba-15: rgba(255, 223, 161, 0.15);
    --quaternary-rgba-15: rgba(154, 154, 154, 0.15);
    --primary-rgba-85: rgba(144, 0, 40, 0.85);
    --secondary-rgba-85: rgba(233, 211, 172, 0.85);
    --tertiary-rgba-85: rgba(255, 223, 161, 0.85);
    --quaternary-rgba-85: rgba(154, 154, 154, 0.85);
    --primary-rgba-30: rgba(144, 0, 40, 0.30);
    --secondary-rgba-30: rgba(233, 211, 172, 0.30);
    --tertiary-rgba-30: rgba(255, 223, 161, 0.30);
    --quaternary-rgba-30: rgba(154, 154, 154, 0.30);
    --white: #FFFFFF;
    --white-rgba-50: rgba(255, 255, 255, 0.5);
    --black: #000000;
    --dark-gray: #2F2C2D;
    --light-gray: #FAFAFA;
    --success: #A0FFA4;
    --danger: #FF5D5D;
    --warning: #FFC400;
    --info: #2196F3;
}

/* Borders */
:root {
    --br-2: 2px;
    --br-3: 3px;
    --br-4: 4px;
    --br-5: 5px;
    --br-6: 6px;
    --br-10: 10px;
    --br-20: 00px;
    --br-30: 30px;
    --br-40: 40px;
    --br-50: 50px;
    --br-60: 60px;
    --br-70: 70px;
    --br-80: 80px;
    --br-90: 90px;
    --br-100: 100px;
}

/* Transitions Time */
:root {
    --tr-1: 0.2s;
    --tr-2: 0.4s;
    --tr-3: 0.6s;
    --tr-4: 0.8s;
    --tr-5: 1s;
}

.img-responsive {
    width: 100%;
}

.img-2023 {
    width: 100%;
    border-radius: var(--br-6);
}

.primary, .primary h1, .primary h2, .primary h3, .primary h4, .primary h5, .primary h6, .primary p, .primary a, .primary ul, .primary li {
    color: var(--primary);
}

.secondary, .secondary h1, .secondary h2, .secondary h3, .secondary h4, .secondary h5, .secondary h6, .secondary p, .secondary a, .secondary ul, .secondary li {
    color: var(--secondary);
}

.tertiary, .tertiary h1, .tertiary h2, .tertiary h3, .tertiary h4, .tertiary h5, .tertiary h6, .tertiary p, .tertiary a, .tertiary ul, .tertiary li {
    color: var(--tertiary);
}

.quaternary, .quaternary h1, .quaternary h2, .quaternary h3, .quaternary h4, .quaternary h5, .quaternary h6, .quaternary p, .quaternary a, .quaternary ul, .quaternary li {
    color: var(--quaternary);
}

.white, .white h1, .white h2, .white h3, .white h4, .white h5, .white h6, .white p, .white a, .white ul, .white li {
    color: var(--white);
}

.black, .black h1, .black h2, .black h3, .black h4, .black h5, .black h6, .black p, .black a, .black ul, .black li {
    color: var(--black);
}

.dark-gray, .dark-gray h1, .dark-gray h2, .dark-gray h3, .dark-gray h4, .dark-gray h5, .dark-gray h6, .dark-gray p, .dark-gray a, .dark-gray ul, .dark-gray li {
    color: var(--dark-gray);
}

.light-gray, .light-gray h1, .light-gray h2, .light-gray h3, .light-gray h4, .light-gray h5, .light-gray h6, .light-gray p, .light-gray a, .light-gray ul, .light-gray li {
    color: var(--light-gray);
}

.primary-background {
    background-color: var(--primary);
}

.secondary-background {
    background-color: var(--secondary);
}

.tertiary-background {
    background-color: var(--tertiary);
}

.quaternary-background {
    background-color: var(--quaternary);
}

.black-background {
    background-color: var(--black);
}

.white-background {
    background-color: var(--white);
}

.dark-gray-background {
    background-color: var(--dark-gray);
}

.light-gray-background {
    background-color: var(--light-gray);
}

.link {
    font-weight: 800 !important;
    color: var(--primary) !important;
    transition: all 0.2s;
}

.link:hover {
    color: var(--dark-gray) !important;
}

.btn {
    padding: 14px 22px;
    border-radius: var(--br-4);
    text-transform: uppercase;
    transition: all 0.2s;
    text-align: center;
    font-family: var(--font-primary);
    display: inline-block;
}

.btn-small {
    padding: 4px 5px !important;
    font-size: var(--f-size-8) !important;
}



.btn-1 {
    color: var(--white);
    background: var(--primary);
}

.btn-1:hover {
    background: var(--dark-gray);
    color: var(--white) !important;
}

.btn-2 {
    color: var(--white);
    background-color: var(--secondary);
}

.btn-2:hover {
    color: var(--white);
    background-color: var(--primary);
}

.btn-3 {
    color: var(--primary);
    background-color: var(--secondary);
}

.btn-3:hover {
    color: var(--white);
    background-color: var(--dark-gray);
}

.full-width {
    width: 100%;
}

.center {
    text-align: center;
    margin: 0 auto;
}

.left_to_center {
    text-align: left;
}

.right_to_center {
    text-align: right;
}

.vertical-align {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.row-flex {
    display: flex;
}

.row-center {
    align-items: center;
}




/* Padding / Margin */
.p-0 {
    padding: 0;
}

.pb-0 {
    padding-bottom: 0px;
}

.pt-0 {
    padding-top: 0px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pt-10 {
    padding-top: 10px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pt-20 {
    padding-top: 20px;
}

.m-0 {
    margin: 0;
}

.mb-0 {
    margin-bottom: 0px;
}

.mt-0 {
    margin-top: 0px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mt-10 {
    margin-top: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mt-40 {
    margin-top: 40px;
}

.m-auto {
    margin: 0 auto;
}

.mw-1000 {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.mw-900 {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.mw-800 {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.mw-700 {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}



/* ------------------ Custom Styles ------------------ */


.d-tablet, .d-mobile {
    display: none;
}

/* Featured Recipe Global Component */

.featured-recipe-global h4, .featured-recipe-global h3 {
    line-height: 1 !important;
}

.featured-recipe-global {
    background-image: url(https://bubbafoods.com/wp-content/uploads/2021/12/hp-recipe-bg-1.png);
    background-position: 50% 50%;
    background-size: 100% 85%;
    background-repeat: no-repeat;
    margin: 60px auto;
    max-width: 1200px;
}

.fr-title {
    text-transform: uppercase !important;
    color: var(--dark-gray);
}

.fr-info {
    margin: 5px auto;
}

.fr-info * {
    text-align: center;
    text-transform: uppercase !important;
    color: var(--dark-gray) !important;
    margin-bottom: 2px !important;
    font-family: var(--font-primary);
    font-weight: 800 !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

.fr-top-header {
    text-transform: initial !important;
    font-size: var(--f-size-5);
}

.fr-title {
    font-size: var(--f-size-4);
}

.fr-top-header,
.fr-title,
.fr-description {
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.fr-info-title,
.fr-info-tag {
    font-size: var(--f-size-9) !important;
}

.fr-info-box {
    background: var(--white-rgba-50);
    border-radius: var(--br-5);
    padding: 10px 15px !important;
}

.fr-info-icon {
    max-width: 45px !important;
}

/* Featured Recipe Global Component */

/* Header 2023 */
.header .mobile-menu {
    left: 15px !important;
    background: var(--secondary) !important;
    border: none !important;
}

.header .btn-mobile-header {
    position: absolute;
    right: 15px !important;
    top: -44px;
    padding: 6px 25px;
    font-weight: 600;
}

.header .btn-mobile-header-menu {
    top: 4px;
}

.header .logo a {
    top: 2px !important
}

/* Header 2023 */

/* Mobile Tags for "Slider" */
.mobile-tags {
    display: flex;
    text-align: center;
    justify-content: space-evenly;
}

.mt-tag {
    font-family: var(--font-primary);
    color: var(--black);
    font-size: var(--f-size-8);
    padding: 5px;
    border-radius: var(--br-4);
    background: transparent;
    text-transform: capitalize !important;
    margin: 0 1px;
    align-self: center;
}

.mt-tag:hover, .mt-tag-activate, .mt-tag:focus, .mt-tag-activate:focus {
    background: var(--primary);
    color: var(--white) !important;
    text-decoration: none !important;

}

/* ------------------ Custom Styles ------------------ */


/*Media Queries*/

@media all and (max-width: 1200px) {



    /* ------------------ Custom Styles ------------------ */

    /* Featured Recipe Global Component */

    .featured-recipe-global {
        max-width: 970px;
        background-size: 100% 100%;
    }

    .fr-full-description {
        max-width: 400px;
    }

    /* Featured Recipe Global Component */

    /* ------------------ Custom Styles ------------------ */



}

@media all and (max-width: 980px) {


    .btn-1, .btn-2, .btn-3 {
        font-size: var(--f-size-7);
    }

    .d-tablet {
        display: block;
    }

    .d-desktop-tablet {
        display: none !important;
    }



    /* ------------------ Custom Styles ------------------ */

    /* Recipes Slider */
    #recipes-slider .splide {
        max-width: calc(100vw - 60px) !important;
        margin: 0 auto;
    }

    #recipes-slider .splide__arrow--prev {
        left: -1.5em !important;
    }

    #recipes-slider .splide__arrow--next {
        right: -1.5em !important;
    }

    /* Recipes Slider */



    /* --------------- */
    .d-tablet {
        display: block;
    }

    .d-desktop-tablet {
        display: none;
    }

    /* --------------- */

    /* Featured Recipe Global Component */

    .featured-recipe-global {
        background-image: none !important;
    }

    .fr-full-description * {
        text-align: center;
    }

    .fr-full-description {
        max-width: 100%;
        text-align: center;
    }

    .fr-featured-image {
        border-radius: var(--br-10);
        max-width: 90%;
        -webkit-box-shadow: 0px 0px 46px -1px rgba(0, 0, 0, 0.55);
        -moz-box-shadow: 0px 0px 46px -1px rgba(0, 0, 0, 0.55);
        box-shadow: 0px 0px 46px -1px rgba(0, 0, 0, 0.55);
        margin: 15px auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;

    }

    .fr-info {
        background-image: url(https://bubbafoods.com/wp-content/uploads/2021/12/hp-recipe-bg-1.png);
        background-position: 50% 50%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 15px 5px;
    }

    .fr-info * {
        text-transform: capitalize !important;
        font-weight: 600 !important;
    }

    .fr-info-box {
        padding-bottom: 0 !important;
        padding-top: 5px !important;
        background: none !important;
    }

    .fr-info-number {
        font-size: var(--f-size-5) !important;
        color: var(--primary) !important;
    }

    .fr-info {
        margin: 2px;
        flex: 1;
    }

    .fr-full-info {
        padding: 0 30px;
    }

    /* Featured Recipe Global Component */

    .btn-full {
        min-width: 100% !important;
    }


    /* ------------------ Custom Styles ------------------ */

}

@media all and (max-width: 767px) {


    .btn-1, .btn-2, .btn-3 {
        font-size: var(--f-size-7);
    }



    .btn-link {
        background: none !important;
        padding: 14px 0 !important;
        color: var(--primary) !important;
        text-decoration: underline;
        font-weight: 800;
        font-size: var(--f-size-7) !important;
        text-transform: capitalize !important;
    }

    .btn-link:hover {
        color: var(--dark-gray) !important;
    }


    .d-mobile {
        display: block;
    }

    .d-desktop-mobile {
        display: none !important;
    }







    /* ------------------ Custom Styles ------------------ */
    /* Recipes Slider */
    #recipes-slider .recipe-card-info .title {
        flex-basis: 64%;
    }

    /* Recipes Slider */

    /* Mobile Heroes */
    .mobile-hero {
        padding: 0 0 40px !important;
        background-position: bottom center !important;
        background-color: transparent !important;
        min-height: 230px !important;
        width: 100%;
    }

    .mobile-hero h1 {
        font-size: var(--f-size-4) !important;
    }

    .mh-2 {
        background-image: url(/wp-content/uploads/2023/06/hero-mobile-background.png) !important;
        padding: 80px 0 60px !important;
    }

    .mh-3 {
        background-image: url(/wp-content/uploads/2023/06/hero-mobile-background-3.png) !important;
        padding: 30px 20px 50px !important;
        min-height: initial !important;
        background-position: left bottom !important;
    }

    .mh-title {
        color: var(--white) !important;
        margin-bottom: 0 !important;
        padding-bottom: 5px !important;
        font-size: var(--f-size-4);
    }

    .mh-image {
        width: 100% !important;
        max-width: 300px !important;
    }

    /* Mobile Heroes */

    /* Footer Issue with mobile Hover */
    .footer-block a:hover .inner-block {
        transform: none !important;
    }

    /* Mobile Footer Component */
    .CookiebotWidget-logo {
        max-width: 50px !important;
    }

    #CookiebotWidget {
        bottom: 100px !important;
    }

    .mobile-footer {
        padding-top: 40px;
    }

    .mobile-footer .row {
        justify-content: space-between;
    }

    .mf-smi {
        max-width: 50px;
    }

    .mf-sl-link {
        flex-basis: 49%;
        text-align: center;
        background-image: url(/wp-content/uploads/2023/05/footer-link-background.svg);
        background-size: cover;
        background-repeat: no-repeat;
        padding: 15px 15px 30px;
        margin: 30px 5px;
    }

    .mf-sl-link img {
        max-width: 50px !important;
        margin: 15px auto !important;
    }

    .mf-sl-link h2 {
        color: var(--white) !important;
        padding: 0 !important;
        margin: 0 auto !important;
        text-align: center;
        font-size: var(--f-size-6);
    }

    .mf-menu {
        text-align: center;
        /* justify-content: space-evenly !important; */
        background-image: url(/wp-content/uploads/2023/05/footer-mobile-background.svg);
        background-repeat: no-repeat;
        background-position: bottom !important;
        margin: 0 !important;
        padding-bottom: 0 !important;
        /* position: fixed; */
        width: 100% !important;
        bottom: 0;
        z-index: 9999;
    }

    .mf-m-item {
        flex-basis: 20%;
        background: var(--secondary);
        border-radius: var(--br-10);
        margin-bottom: 20px;
        padding-bottom: 5px !important;
        padding-top: 10px !important;
        -webkit-box-shadow: 0px 0px 21px -4px rgba(0, 0, 0, 0.15);
        -moz-box-shadow: 0px 0px 21px -4px rgba(0, 0, 0, 0.15);
        box-shadow: 0px 0px 21px -4px rgba(0, 0, 0, 0.15);
    }

    .mf-m-item:hover {
        background: var(--tertiary);
    }

    .mf-m-item img {
        max-width: 20px !important;
    }

    .mf-m-item h6 {
        font-size: var(--f-size-10) !important;
        margin: 5px auto !important;
    }

    /* Mobile Footer Component */


    /* Mobile Home */
    .home-hero {
        background-position: top center !important;
        background-size: 100% 40% !important;
        background-repeat: no-repeat !important;
    }

    .home-hero .home-hero-img {
        padding-top: 15px !important;
    }

    .home-hero h1, .home-hero h1 .bigger {
        font-size: var(--f-size-4) !important;
        color: var(--black) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .home-hero br {
        display: none !important;
    }

    .home-hero .col-md-4:last-child {
        background-image: none !important;
        max-width: 100% !important;
        padding: 0px 20px !important;
        margin-bottom: 0px !important;
    }

    .products-layer {
        background-image: url(/wp-content/uploads/2023/05/mobile-background-1.svg) !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        margin: 0 !important;
        background-size: 100% !important;
        padding: 30px 0;
    }

    .products-layer h2 {
        font-size: var(--f-size-5) !important;
        color: var(--black);
        padding-bottom: 5px !important;
    }

    .products-layer .col-md-3 {
        width: 47% !important;
        margin: 10px auto !important;
        background-size: 175px !important;
    }

    .products-layer .product-title h4 {
        text-transform: uppercase !important;
        font-size: var(--f-size-7) !important;
    }

    /* Mobile Home */

    /* ------------------ Custom Styles ------------------ */

}

@media all and (max-width: 479px) {}