/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/* ==== FONTS ==== */

@font-face {
    font-family: 'Minion Pro';
    src: url('../../assets/fonts/MinionPro-Regular.eot');
    src: url('../../assets/fonts/MinionPro-Regular.eot?#iefix') format('embedded-opentype'),
    url('../../assets/fonts/MinionPro-Regular.woff2') format('woff2'),
    url('../../assets/fonts/MinionPro-Regular.woff') format('woff'),
    url('../../assets/fonts/MinionPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../../assets/fonts/Lato-Regular.eot');
    src: url('../../assets/fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'),
    url('../../assets/fonts/Lato-Regular.woff2') format('woff2'),
    url('../../assets/fonts/Lato-Regular.woff') format('woff'),
    url('../../assets/fonts/Lato-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Microbrew Three';
    src: url('../../assets/fonts/MicrobrewThree.eot');
    src: url('../../assets/fonts/MicrobrewThree.eot?#iefix') format('embedded-opentype'),
    url('../../assets/fonts/MicrobrewThree.woff2') format('woff2'),
    url('../../assets/fonts/MicrobrewThree.woff') format('woff'),
    url('../../assets/fonts/MicrobrewThree.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../../assets/fonts/Lato-Black.eot');
    src: url('../../assets/fonts/Lato-Black.eot?#iefix') format('embedded-opentype'),
    url('../../assets/fonts/Lato-Black.woff2') format('woff2'),
    url('../../assets/fonts/Lato-Black.woff') format('woff'),
    url('../../assets/fonts/Lato-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Weetabix Font';
    src: url('../../assets/fonts/WeetabixTestFont.eot');
    src: url('../../assets/fonts/WeetabixTestFont.eot?#iefix') format('embedded-opentype'),
    url('../../assets/fonts/WeetabixTestFont.woff2') format('woff2'),
    url('../../assets/fonts/WeetabixTestFont.woff') format('woff'),
    url('../../assets/fonts/WeetabixTestFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../../assets/fonts/Lato-Bold.eot');
    src: url('../../assets/fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'),
    url('../../assets/fonts/Lato-Bold.woff2') format('woff2'),
    url('../../assets/fonts/Lato-Bold.woff') format('woff'),
    url('../../assets/fonts/Lato-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



/* ==== GENERAL ==== */

html {
    font-size: 8px;
    /* was 10px  */
    background-color: #fff;
}

body {
    margin: 0;
    padding: 0 calc((100% - 940px) / 2);
    padding: 0 calc((100% - var(--page-width)) / 2);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    font-family: 'Lato', CenturyGothic, AppleGothic, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #270070;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;


    /* Prevent X */
    overflow-x: hidden;
}

html,
body {
    height: 100%;
}

/* main,
main > article{
    display: flex;
    flex-direction: column;
    } */

    h1,
    h2,
    h3,
    strong,
    thead>th,
    .btn {
        font-weight: 400;
    }

    strong{
        font-weight:bold;
    }

    h4,
    h5,
    h6,
    nav.navbar ul.navbar-nav li {
        font-weight: 700;
    }

    .ie .navbar-dark .navbar-nav .nav-link,
    .ie .navbar-nav li a,
    .navbar a .fa {
        color: #270070;
    }

    .product h5 {
        font-weight: 900;
    }


    @media screen and (max-width:767px) {
        .hide-for-small {
            display: none;
        }

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

    @media screen and (min-width:767px) {
        .hide-for-large {
            display: none;
        }
    }


    /* ==== GLOBAL RESET ======================== */
    [hidden] {
        display: none;
    }

    /* ==== BUTTONS ============================ */
    input[type=submit] {
        -webkit-appearance: none;
        border: 0;
    }

    input[type=submit],
    .wp-block-button__link,
    .btn {
        color: #FFF;
        font-weight: 900;
        border-radius: 999px;
        margin: 0;
        padding: 1.3rem 20px;
        min-width: 130px;

    /* Greater letter spacing on white text
    border: 1px solid transparent;
    */
    letter-spacing: 0.08rem;
    line-height: 1;
    word-break: break-word;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
    display: inline-block;
    /* white-space: normal;  don't use it */
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    overflow-wrap: break-word;

    -webkit-transition: 195ms background-color linear, 195ms color linear;

    -o-transition: 195ms background-color linear, 195ms color linear;

    transition: 195ms background-color linear, 195ms color linear;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
.btn:hover,
.btn:focus {
    text-decoration: none;
    -webkit-transition: 40ms background-color linear, 40ms color linear;
    -o-transition: 40ms background-color linear, 40ms color linear;
    transition: 40ms background-color linear, 40ms color linear;
}

.wp-block-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 33px 10px;
    margin: var(--margin) 10px;
    /* was var(--margin) 10px 10px 10px */
}

.wp-block-button .wp-block-button__link {}

.btn:hover,
.btn:focus {
    text-decoration: none;
}

.btn-lg {
    padding: 1rem 5rem;
}

input[type=submit],
a .btn,
a .btn.blue-yellow,
.wp-block-button__link,
.wp-block-button__link:not(:disabled):not(.disabled):active,
.btn.blue-yellow,
.btn.blue-yellow:not(:disabled):not(.disabled):active,
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #270070;
    color: #FFF;
    /* was #FFD100 */
}

input[type=submit]:hover,
input[type=submit]:focus,
a:hover .btn,
a:focus .btn,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.btn.blue-yellow:hover,
.btn-primary-yellow:hover,
.btn.blue-yellow:focus,
.btn-primary-yellow:focus {
    background-color: #FFF;
    color: #270070;
}

a .btn.blue-white,
.blue-white .wp-block-button__link,
.blue-white .wp-block-button__link:not(:disabled):not(.disabled):active,
.btn.blue-white,
.btn.blue-white:not(:disabled):not(.disabled):active,
.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: #270070;
    color: #fff;
}

a:hover .btn.blue-white,
a:focus .btn.blue-white,
.blue-white .wp-block-button__link:hover,
.blue-white .wp-block-button__link:focus,
.btn.blue-white:hover,
.btn-secondary:hover,
.btn.blue-white:focus,
.btn-secondary:focus {
    background-color: #FFF;
    color: #270070;
}

a .btn.red-white,
.red-white .wp-block-button__link,
.red-white .wp-block-button__link:not(:disabled):not(.disabled):active,
.btn.red-white,
.btn.red-white:not(:disabled):not(.disabled):active,
.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: #EE251A;
    color: #fff;
}

a:hover .btn.red-white,
a:focus .btn.red-white,
.red-white .wp-block-button__link:hover,
.red-white .wp-block-button__link:focus,
.btn.red-white:hover,
.btn-secondary:hover,
.btn.red-white:focus,
.btn-secondary:focus {
    background-color: #FFF;
    color: #EE251A;
}


a .btn.red-blue,
.red-blue .wp-block-button__link,
.red-blue .wp-block-button__link:not(:disabled):not(.disabled):active,
.btn.red-blue,
.btn.red-blue:not(:disabled):not(.disabled):active,
.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: #EE251A;
    color: #fff;
}

a:hover .btn.red-blue,
a:focus .btn.red-blue,
.red-blue .wp-block-button__link:hover,
.red-blue .wp-block-button__link:focus,
.btn.red-blue:hover,
.btn-secondary:hover,
.btn.red-blue:focus,
.btn-secondary:focus {
    background-color: #270070;
    color: #FFF;
}



a .btn.yellow-white,
.yellow-white .wp-block-button__link,
.yellow-white .wp-block-button__link:not(:disabled):not(.disabled):active,
.btn.yellow-white,
.btn.yellow-white:not(:disabled):not(.disabled):active,
.btn-tertiary,
.btn-tertiary:not(:disabled):not(.disabled):active {
    background-color: #FFD100;
    color: #270070;
    letter-spacing: 0.03rem;
}

a:hover .btn.yellow-white,
a:focus .btn.yellow-white,
.yellow-white .wp-block-button__link:hover,
.yellow-white .wp-block-button__link:focus,
.btn.yellow-white:hover,
.btn-tertiary:hover,
.btn.yellow-white:focus,
.btn-tertiary:focus {
    background-color: #fff;
    color: #270070;
}

a .btn.grey,
.grey .wp-block-button__link,
.grey .wp-block-button__link:not(:disabled):not(.disabled):active,
.btn.grey,
.btn.grey:not(:disabled):not(.disabled):active,
.btn-quaternary,
.btn-quaternary:not(:disabled):not(.disabled):active {
    background-color: #F6F0ED;
    color: #270070;
    letter-spacing: 0.03rem;
}

a:hover .btn.grey,
a:focus .btn.grey,
.grey .wp-block-button__link:hover,
.grey .wp-block-button__link:focus,
.btn.grey:hover,
.btn-quaternary:hover,
.btn.grey:focus,
.btn-quaternary:focus {
    background-color: #270070;
    color: #F6F0ED;
}



a .btn.outline,
.outline .wp-block-button__link,
.outline .wp-block-button__link:not(:disabled):not(.disabled):active,
.btn-outline-primary,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: #EE251A;
    color: #270070;
}

a .btn.blue-yellow,
.blue-yellow .wp-block-button__link,
.blue-yellow .wp-block-button__link:not(:disabled):not(.disabled):active,
.btn.blue-yellow,
.btn.blue-yellow:not(:disabled):not(.disabled):active,
.btn-tertiary,
.btn-tertiary:not(:disabled):not(.disabled):active {
    background-color: #270070;
    color: #F6F0ED;
    letter-spacing: 0.03rem;
}


a:hover .btn.blue-yellow,
a:focus .btn.blue-yellow,
.blue-yellow .wp-block-button__link:hover,
.blue-yellow .wp-block-button__link:focus,
.btn.blue-yellow:hover,
.btn-tertiary:hover,
.btn.blue-yellow:focus,
.btn-tertiary:focus {
    background-color: #FFD100;
    color: #270070;
}


a:hover .btn.outline,
a:focus .btn.outline,
.outline .wp-block-button__link:hover,
.outline .wp-block-button__link:focus,
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus {
    background-color: #F6F0ED;
    color: #270070;

}

/* ==== SUPER MORNING ==== */
.page-id-532 .cta-color-blue .home-block-contents {
    margin-bottom: 0;
    margin-top: 0;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

#super-mornings>main>article>div>div.wp-block-columns>div:nth-child(2) {
    margin-left: 0 !important;
}

#super-mornings .wp-block-column .home-block {
    min-height: 600px
}

#super-mornings .wp-block-column {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
}

.page-id-532 .cta-color-blue .home-block-description {
    margin-top: -100px;
}

.ie.page-id-532 .cta-color-blue .home-block-description {
    margin-top: -100px;
    width: 100%;
}

.ie.page-id-532 .home-block-text p {
    width: 100%;
}

@media (max-width:779px) and (min-width:563px) {

    .page-id-532 .cta-color-blue .home-block-contents {
        margin-bottom: 0;
        margin-top: -138px;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        position: inherit !important;

    }

}

@media (max-width:1194px) and (min-width:864px) {
    #super-mornings .wp-block-column .home-block {
        min-height: 630px;
    }

}

@media (min-width:1200px) {
    /* .page-id-532 .cta-color-blue .home-block-description p{
    padding-bottom: 20px;
    } */

}

/* ==== RECIPES==== */


#recipe img.packshot.wp-post-image {
    width: 80%;
    margin: auto;
}


@media screen and (min-width:767px) {
    .recipes-ingredients {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    #recipe-ingredients>div.recipes-ingredients-column {
        width: 50%
    }

    #recipe-ingredients>div.recipes-method-column {
        width: 50%
    }
}

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






/* ==== NAV BAR ==== */


/* Bring to very absolute front! */
.navbar-wrapper {
    --height: 62px;
    max-height: 62px;
    --col-out: #270070;
    --col-over: #007bff;
    --col-border: #aaa;
    background-color: #FFD100;

    position: relative;
    z-index: 808;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    position: fixed;
    width: 100%;
    max-width: 940px;
    max-width: var(--page-width);
}

.navbar-brand {
    z-index: 808;
    padding: 6px 5px 0 5px;
}

/* Actual menu wrapper */
nav.navbar {
    background-color: #FFD100;
    height: 62px;
    height: var(--height);
    max-height: 62px;
    width: 100%;
    padding: 0;
    /* margin: 0 20px; */
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
/* Small logo (see media q) */
nav.navbar img {
    width: 100%;
    height: auto;
    margin: 0;
    margin-left: 20px;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

nav.navbar .menu-widget span.subtitle-promo {
    font-weight: 500;
    text-transform: none;
    font-size: 16px;
}

@media screen and (min-width: 768px) {
    nav.navbar {
        width: 100%;
    }
}

nav.navbar .sub-title {
    display: none;
}

/* Don't allow to shrink but allow to grow */
nav.navbar a.navbar-brand {
    min-width: 50px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 90px;
}

/* Allow it to grow */
nav.navbar ul.navbar-nav {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 100%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin-left: auto;
    margin-right: auto;
}

nav.navbar ul.navbar-nav>li {}


nav.navbar ul.navbar-nav li ul.sub-menu li h6,
nav.navbar ul.navbar-nav li ul.sub-menu li ul.menu li {
    text-transform: initial;
}


/* Underline nav item current and hover*/
#menu-main-menu .current-menu-item a,
.nav>li>a:focus,
.nav>li>a:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar-nav a.nav-link {
    padding: 13px 10px;
}

/* All menu text */
nav.navbar .sub-title,
ul.sub-menu li a {
    line-height: 1.5;
}

/* active / focus state for top row only */
/* Bootstrap override for white text on hover */
.navbar-nav li a,
.navbar-dark .navbar-nav .show>.nav-link,
.navbar-dark .navbar-nav .nav-link {
    color: var(--col-out);
    /* font-weight:500; */
}

.sub-menu.wrap li a {
    font-weight: 600;
}

.sub-menu.wrap li a:hover,
.sub-menu.wrap li a:focus,
.menu-widget ul.menu>li:hover>a {
    font-weight: 800;
}

/* Over colours */
.nav-item a:hover,
.nav-item a:focus,
.navbar-nav li:hover>a,
.navbar-nav li a:hover,
.navbar-nav li a:focus,
.navbar-nav .active a,
.navbar-nav li a[aria-current=true],
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #270070;
    color: #270070;
}



/* Sub menu items */
.nav-item {
    /* Do not use relative here as we want the
    absolute position to take the dimensions of
    the entire nav space */
    /* position: relative; */
}

/* Top row */
.nav-item a.nav-link {
    white-space: nowrap;
}


/* sub menu items have dark -> light links */

.nav-item.has-sub-menu {}

/* Dropdown arrow */
.nav-item .sub-toggle {
    visibility: visible;
    -webkit-appearance: none;
}

/* Mega Menu is position relative and inline at hamburger size */
.nav-item .sub-menu {
    position: relative;
    display: none;
}

/* open the sub menu! */

.ie .nav-item>.sub-item {
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.nav-item>.sub-item {
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

/* .nav-item.has-sub-menu.show .sub-menu, */
.nav-item.has-sub-menu.opened .sub-menu {
    display: block;
}

.nav-item .sub-menu .sub-title::after,
.nav-item .sub-menu h6::after {
    content: '>';
    color: inherit;
    margin-left: 0.9rem;
}

/* Hide first on mobile?
.nav-item .sub-menu .menu-widget:first-of-type{
    display:none;
    }*/

    .nav-item .sub-menu .widget_text {}

    .nav-item .sub-menu .widget_media_image {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    /* Sub menu content */
    .nav-item .sub-menu li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 0;
        position: relative;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    /* These are the vertical blocks in the mega menu */
    .nav-item .sub-menu li .menu-widget {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    /* Prevent user selection as no interactive states */
    .nav-item .sub-menu li h6 {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }


    .nav-item .sub-menu li h5,
    .nav-item .sub-menu li h6 {}

    /* This is the mega menu title */
    .nav-item .sub-menu .sub-title {
        position: absolute;
    }

    .nav-item .sub-menu .sub-title::after,
    .nav-item .sub-menu h6::after {
        content: '>';
        color: inherit;
        margin-left: 0.9rem;
    }

    /* First image doesn't have a > Bring image above title */
    .nav-item .sub-menu li .menu-widget h6 {
        /* text-align:center; */

        font-weight: 500;
        margin-top: 1em;
    }

    .nav-item .sub-menu li .menu-widget img {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        margin: 5px auto;
        width: 100%;
        max-width: 250px !important;
        height: auto;
    }

    .menu-item a {
        /* text-transform: uppercase; */
        padding: 4px;
    }

    /* All sub menu items order:-1; margin:auto; */
    ul.sub-menu li a {
        padding: 13px 10px;
    }

    .ie ul.sub-menu li a {
        padding: 5.5px 10px;
    }

    /* Sub menu items */
    .menu-widget .menu-item a {}

    .nav-item .sub-menu .widget_nav_menu {}

    /* .nav-link .submenu-button .dropdown-toggle */


    .nav-item .sub-menu .menu-widget:first-of-type h6 {
        display: none;
    }

    .nav-item .sub-menu .menu-widget:first-of-type h6::after {
        display: none;
        margin-bottom: 0;
    }

    @media screen and (max-width:765px) {

        .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li {
            display: block;
        }

        .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li a {
            width: 100%;
            display: block;
        }

        .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li.menu-item-has-children {}

        .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li.opened ul>li {
            display: block;
        }

        .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li>ul {
            width: 100%;
        }

        .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li>ul>li {
            display: none;
        }

        .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li>ul>li a {
            padding-left: 30px;
        }

    }

    .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li:last-of-type {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .nav-item .sub-menu .sub-title {
        /* visibility: hidden; */
    }

    .nav-item>.sub-menu .menu {
        background-color: white;

    }

/* .nav-item > .sub-menu > li a,
.nav-item > .sub-menu .menu > li a */

a.nav-link,
.nav-item>.sub-menu .menu>li a {
    border-bottom: 1px solid var(--col-border);
    width: 100%;
}

/* social icons on the far right */
nav ul.social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin: 5px 0 20px 0;

    position: absolute;
    right: 33px;
    right: var(--margin);
    top: 0;
}


.show ul.social {
    -webkit-animation: Social-In .9s 1 0s both cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: Social-In .9s 1 0s both cubic-bezier(0.175, 0.885, 0.32, 1.275);
    ;
}

.collapsing ul.social {
    animation: Social-In .4s 1 40ms both reverse cubic-bezier(0.175, 0.885, 0.32, 1.275);
    ;
}

nav ul.social li {
    margin-left: 0.5rem;
}

nav ul.social li+li {
    margin-left: 1rem;
}

nav ul.social li>a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #270070;
}

nav ul.social li a svg.svg-inline--fa {
    width: 25px;
    height: 25px;
}

/* Submenu background  15px 15px 15px*/
.navbar-collapse {
    background-color: #FFD100;
    padding: 0;
    z-index: 1;
    /* flex-grow:1;
    flex-shrink:1;
    flex-basis:auto; */
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    margin-top: -24px;
}

.navbar-wrapper.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* Convoluted Hamburger */

/* Mobile toggle hamburger make it same height as bar */
.navbar .navbar-toggler {
    height: 60px;
    border: none;
    margin-right: 20px;
}

.navbar .navbar-toggler:focus {
    outline: none;
}

.navbar-toggler span {
    display: block;
    background-color: #270070;
    height: 3px;
    width: 25px;
    margin-top: 4px;
    margin-bottom: 4px;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    position: relative;
    left: 0;
    opacity: 1;
    border: none;
}

.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
    -webkit-transition: transform .35s ease-in-out;
    -o-transition: transform .35s ease-in-out;
    -webkit-transition: -webkit-transform .35s ease-in-out;
    transition: -webkit-transform .35s ease-in-out;
    transition: transform .35s ease-in-out;
    transition: transform .35s ease-in-out, -webkit-transform .35s ease-in-out;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    opacity: 0.9;
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
    height: 12px;
    visibility: hidden;
    background-color: transparent;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
    top: -12px;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
    opacity: 0.9;
}

.navbar-nav li.see-more {}


.navbar-nav li.see-more a::after {
    display: none;
}

.about-us .see-more,
.your-wellbeing .see-more,
.menu-widget.widget-quantity-3:nth-of-type(1) {
    display: none;
}


@media screen and (max-width:767px) {
    #mega-menu-36>li>div:nth-child(2) {
        display: none;
    }
}



/* Mega Menu is absolute when large and overlays */
@media screen and (min-width:767px) {
    :root {
        --col-border: #DDD8D6;
    }

    html {
        /* scale font from tablet up */
        font-size: 10px;
    }

    a.nav-link,
    .nav-item>.sub-menu .menu>li a {
        border-bottom: none;
    }

    .navbar-brand {
        padding: 0;
    }

    .navbar-collapse {
        padding: 0;
        background-color: transparent;
        position: static;
        padding: 0 0 0 15px;
        margin-top: 0;
    }

    .menu-item a {
        /* text-transform: uppercase; */
        padding: 0;
    }

    nav.navbar {
        padding: 0 16.5px;
        padding: 0 calc(var(--margin) / 2);
    }


    nav.navbar .sub-title {
        display: inline;
    }

    nav.navbar img {
        display: block;
    }

    /* .navbar-nav > li:hover a, */
    header .nav-item.active>a,
    header .nav-item.no-sub-menu:focus-within .nav-link,
    header .nav-item.no-sub-menu:focus a.nav-link,
    header .nav-item.no-sub-menu:hover a.nav-link,
    header .nav-item.no-sub-menu>a.nav-link:hover,
    header .nav-item.no-sub-menu>a.nav-link:focus,
    header .nav-item.no-sub-menu>a[aria-current=true] {
        -webkit-box-shadow: inset 0px -5px 0px #270070;
        box-shadow: inset 0px -5px 0px #270070;
    }

    .navbar-nav>li+li {
        margin-left: 10px;
    }

    .navbar-nav a.nav-link {
        padding: 0;
    }


    .navbar-nav a.nav-link {}

    /* Top row */
    .navbar-nav>li>a {}

    .navbar-nav>li>a.nav-link {
        padding: 22px 0;
    }


    /* .navbar-nav a.nav-link {
        padding: 20px 0 0 0;
        } */

        nav.navbar ul.navbar-nav {
            -ms-flex-pack: distribute;
            justify-content: space-around;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
        }


        nav.navbar ul.navbar-nav li {
            text-transform: uppercase;
            font-weight: 900;
            font-size: 1.3rem;
            position: static;
        }

        nav.navbar a.navbar-brand {
            margin-top: 6px;
            margin-right: 3px;
            max-width: 50px;
        }

        nav.navbar img {}

        /* Drop down arrow on right hand side */
        /* .nav-item.has-sub-menu::after{ */
            a[aria-haspopup=true]::after {
                content: "";
                display: inline-block;
                width: 0;
                height: 0;
                margin-left: .255em;
                vertical-align: .255em;
                border-top: .3em solid;
                border-right: .3em solid transparent;
                border-bottom: 0;
                border-left: .3em solid transparent;
            }

            .nav-item .sub-menu {
                position: static;
            }

            /* Megamenu widgets align side by side */
            .nav-item .sub-menu li .menu-widget+.menu-widget {
                padding-left: 1rem;
            }

            /* Mega Menu is absolute on large screens */


            .ie .nav-item>#mega-menu-36 {
                width: 100%;
                padding: 30px 30px 30px 130px;
                position: absolute;
                left: 0;
            }

            .nav-item>.sub-menu {

                -webkit-box-orient: horizontal;

                -webkit-box-direction: normal;

                -ms-flex-direction: row;

                flex-direction: row;
                -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
                display: block;

                visibility: hidden;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;

                /* display:none; */
                width: 0;
                height: 0;
                overflow: hidden;
                left: 33px;
                right: 33px;
                left: calc(1 * var(--margin));
                right: calc(1 * var(--margin));
                padding: calc(var(--margin) + 20px) calc(var(--margin) * 4);

                background-color: #fff;
                -webkit-animation: Menu-In 90ms ease-out;
                animation: Menu-In 90ms ease-out;
            }



            .nav-item>.sub-menu .menu {
                /* FIXME: */
                background-color: transparent;
            }

            .nav-item>.sub-menu .menu>li {
                border: none;
            }

            .navbar-nav>li>a {
                display: inline-block;
                padding: 20px 0;
            }

            .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li.see-more>a,
            .navbar-nav li.see-more a {
                /* color: #DDD8D6; */
                color: #270070;
                pointer-events: initial;
            }

            .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li.see-more:hover>a,
            .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li.see-more:focus>a,
            .navbar-nav li.see-more a:hover,
            .navbar-nav li.see-more a:focus {
                color: #270070;
                /* color: var(--col-over); */
            }

            .nav-item .sub-menu .menu-widget:first-of-type h6 {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
            }

            .nav-item>.sub-menu,
            .nav-item .sub-menu .sub-title {}

            .nav-item .sub-menu .sub-title {
                width: calc(33% - var(--margin) * 2 - 21px);
                left: auto;
                top: auto;

                padding: 6px 0 5px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }

            .nav-item.has-sub-menu.show .sub-menu {
                display: none;
            }

            .menu-widget {
                position: relative;
            }

            .menu-widget ul.menu {}

            .menu-widget ul.menu>li {
                cursor: pointer;
            }

            /* Sub menu divider lines */
            .navbar-nav .sub-title:not(:last-of-type),
            .navbar-nav li a.see-more,
            .menu-widget ul.menu li:not(:last-of-type),
            .menu-widget.widget-quantity-1 ul.menu li:not(:last-of-type),
            .menu-widget.widget-quantity-3 ul.menu li:not(:last-of-type),
            .nav-item>.sub-menu .menu>li:not(:last-of-type) {
                border-bottom: 1px solid #DDD8D6;
                border-bottom: 1px solid var(--col-border);
            }



            /* Sub sub menu */
            .menu-widget.widget-quantity-3 ul.menu>li>ul>li {
                /* outline:3px solid pink; */

            }

            .menu-widget.widget-quantity-3 ul.menu>li>ul>li>a {}

    /*
    .menu-widget.widget-quantity-3 ul.menu >li > ul.sub-menu > li > a:hover,
    .menu-widget.widget-quantity-3 ul.menu > li > ul > li > a:focus{

    }

    .menu-widget.widget-quantity-3 ul.menu > li > ul > li > a:hover,
    .menu-widget.widget-quantity-3 ul.menu > li > ul > li > a:focus{

        } */

        ul.sub-menu li a {
            padding: calc(var(--margin) / 6) 0;
        }


        ul.sub-menu>li>a {
            word-wrap: none;
            white-space: nowrap;

        }


        ul.sub-menu>li>a:focus,
        ul.sub-menu>li>a:hover {}

        /* First 3 column of the 3 col menu */
        .menu-widget.widget-quantity-3:nth-of-type(1) {
            display: block;
        }

        /* Second 3 column of the 3 col menu */
        .menu-widget.widget-quantity-3:nth-of-type(2) {
            width: 200%;
        }

        /* First level of the menu */
        .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li {

            display: -webkit-box;

            display: -ms-flexbox;

            display: flex;
        }

        .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li>a {
        }

        .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li>a::after {
            -webkit-transition: opacity 90ms linear, -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: opacity 90ms linear, -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
            -o-transition: opacity 90ms linear, transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: opacity 90ms linear, transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: opacity 90ms linear, transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
            content: '>';
            opacity: 0;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            position: absolute;
            right: 0;
            z-index: 909;
        }

        .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li.default a::after {
            opacity: 1;
            margin-left: 10px;
            /* transition:transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); */
        }

        .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li.default a::after {
            z-index: 303;
        }

        .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li.default:hover a::after,
        .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li.default:focus a::after {
            z-index: 909;
        }


        /* mega menu hidden menus : open first as default! */
        .menu-widget ul.menu>li:first-of-type ul.sub-menu,
        .menu-widget ul.menu>li:focus ul.sub-menu,
        .menu-widget ul.menu>li:focus-within ul.sub-menu,
        .menu-widget ul.menu>li:hover ul.sub-menu {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            background-color: white;
            z-index: 606;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        /* First menu item */
        .menu-widget ul.menu>li:first-of-type ul.sub-menu {}


        /* Sneaky! */
        .menu-widget ul.menu>li ul.sub-menu {
            --chevron: 2rem;
            /* padding-left: calc( var(--chevron)); */
            top: 0;
            position: absolute;
            /* left:calc(100% - var(--chevron) ); width:calc(100% + var(--chevron) );*/
            left: 100%;
            width: 100%;
            height: 100%;
            z-index: 808;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;

            padding-left: 10px;
        }

        /* BLOCKERS : Always open menu item */
        .navbar-nav li:hover.see-more::before,
        .navbar-nav li:focus.see-more::before,
        .menu-widget ul.menu>li ul.sub-menu::before {
            content: '';
            background-color: white;
            width: 2rem;
            height: 2rem;
            position: absolute;
            right: 100%;
            top: 7px;
            display: block;
            z-index: 909;
        }

        .navbar-nav li:hover.see-more::before,
        .navbar-nav li:focus.see-more::before {
            right: 0;
        }


        .menu-widget ul.menu>li.default ul.sub-menu::before {
            display: none;
        }

    /* .menu-widget ul.menu > li ul.sub-menu::before{
        content:'>';
        position: absolute;
        top:0;
        left:0;
        } */

        .menu-widget ul.menu>li:first-of-type ul.sub-menu {
            --chevron: 0px;
        }

        /* Space in a row */
        .nav-item .sub-menu li .menu-widget.widget-quantity-1 {
            max-width: 100%;
        }

        .nav-item .sub-menu li .menu-widget.widget-quantity-2 {
            max-width: 50%;
        }

        .nav-item .sub-menu li .menu-widget.widget-quantity-3 {
            max-width: 33%;
        }

        /* This is the mega menu title */
        .nav-item .sub-menu .sub-title {
            font-weight: 900;
        }

        /* Interactive HOVER based sub menus */
        .nav-item:focus-within .nav-link~.sub-menu,
        .nav-item:focus .nav-link~.sub-menu,
        .nav-item:hover .nav-link~.sub-menu {
            visibility: visible;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            /* width: auto; */
            width: 100%;
            left: 0 !important;
            height: auto;
            overflow: visible;
        }

        nav.navbar ul.social {
            position: static;
            right: auto;
            top: auto;
            margin-bottom: 0;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
            margin: 20px;
        }

        .collapsing ul.social,
        .show ul.social {
            -webkit-animation: none 1s ease-out;
            animation: none 1s ease-out;
        }

        /* Add a bit of space at the top for the heading for mega mode */
        .sub-menu li .menu-widget:first-of-type {
            margin-top: 51px;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
        }
        .sub-menu li .menu-widget:first-of-type img {
            margin: 0;
            filter: drop-shadow(0px 6px 9px rgba(50, 50, 0, 0.5));
            max-height: 120px;
            width: auto !important;

        }
        .sub-menu li h5.sub-title.cereals {
            font-weight: 800;
            border-bottom: 1px solid var(--col-border);
        }
        .sub-menu li h5.sub-title.cereals a {
            font-weight: 800;


        }
        .sub-menu li .menu-widget div.textwidget.custom-html-widget {
            position: relative;
            height: 100%;
            width: 100%;

        }
        .sub-menu li .menu-widget div.textwidget.custom-html-widget p {
            position: absolute;
            bottom: 0;
            padding-right: 15px;
        }

        .nav-item .sub-menu .sub-title::after, .nav-item .sub-menu h6::after {
            margin-left: unset;
            position: absolute;
            right: 0;
        }
    /*
    .menu-widget ul.menu

    As some menus need to be in line with their parent
    their is this mini one which was not in original design */
    .sub-mega-menu.about-us,
    .sub-mega-menu.your-wellbeing {
        left: auto;
        right: auto;
        padding: 0;
    }

    .sub-mega-menu.about-us>li,
    .sub-mega-menu.your-wellbeing>li {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Seperating line */
    .sub-mega-menu.about-us li,
    .sub-mega-menu.your-wellbeing li {
        border-top: 1px solid#DDD8D6;
    }

    .sub-mega-menu.about-us li a,
    .sub-mega-menu.your-wellbeing li a {
        padding: calc(var(--margin) /2) calc(var(--margin) / 4);
    }

    .sub-mega-menu.about-us li .menu-widget,
    .sub-mega-menu.your-wellbeing li .menu-widget {
        margin-top: 0;
    }

    .sub-mega-menu.about-us li a:hover,
    .sub-mega-menu.about-us li a:focus,
    .sub-mega-menu.your-wellbeing li a:hover,
    .sub-mega-menu.your-wellbeing li a:focus {}

    .sub-mega-menu.about-us .sub-title,
    .sub-mega-menu.your-wellbeing .sub-title {
        display: none;
    }


    /* Inner shadow */
    .sub-mega-menu {

        /* inset replaces the navbar shadow */
        -webkit-box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, 0.9),
        0 1px 1px rgba(0, 0, 0, 0.11),
        0 2px 2px rgba(0, 0, 0, 0.11),
        0 4px 4px rgba(0, 0, 0, 0.11),
        0 8px 8px rgba(0, 0, 0, 0.11),
        0 16px 16px rgba(0, 0, 0, 0.11),
        0 32px 32px rgba(0, 0, 0, 0.11);
        box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, 0.9),
        0 1px 1px rgba(0, 0, 0, 0.11),
        0 2px 2px rgba(0, 0, 0, 0.11),
        0 4px 4px rgba(0, 0, 0, 0.11),
        0 8px 8px rgba(0, 0, 0, 0.11),
        0 16px 16px rgba(0, 0, 0, 0.11),
        0 32px 32px rgba(0, 0, 0, 0.11);
    }

    /* Long and sharp */
    nav.navbar,
    .sub-mega-menu.about-us,
    .sub-mega-menu.your-wellbeing {
        min-width: 26ch;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11),
        0 2px 2px rgba(0, 0, 0, 0.11),
        0 4px 4px rgba(0, 0, 0, 0.11),
        0 8px 8px rgba(0, 0, 0, 0.11),
        0 16px 16px rgba(0, 0, 0, 0.11),
        0 32px 32px rgba(0, 0, 0, 0.11);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11),
        0 2px 2px rgba(0, 0, 0, 0.11),
        0 4px 4px rgba(0, 0, 0, 0.11),
        0 8px 8px rgba(0, 0, 0, 0.11),
        0 16px 16px rgba(0, 0, 0, 0.11),
        0 32px 32px rgba(0, 0, 0, 0.11);
    }
}


@media screen and (min-width: 991px) {

    nav.navbar {
        padding: 0 33px;
        padding: 0 calc(var(--margin));
    }

    nav.navbar ul.navbar-nav {
        margin-right: 33px;
        margin-right: var(--margin);
    }

    nav.navbar a.navbar-brand {
      max-width: 120px;
      margin: 0px 0 0;
  }

  nav.navbar img {}

  nav.navbar ul.social {}
}


@-webkit-keyframes Social-In {
    from {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(0%);
        transform: translateX(-50%) translateY(0%);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(-26px);
        transform: translateX(-50%) translateY(-26px);
    }
}


@keyframes Social-In {
    from {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(0%);
        transform: translateX(-50%) translateY(0%);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(-26px);
        transform: translateX(-50%) translateY(-26px);
    }
}

/* ===========
Edge browser fixes
=========== */
@supports (-ms-ime-align:auto) {

    .nav-item:hover .nav-link~.sub-menu,
    .nav-item:hover .nav-link~.sub-menu {
        visibility: visible;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: auto;
        height: auto;
        overflow: visible;
    }

    ul.history li::before {
        left: 50%;
    }

    ul.history li::after {
        left: 50%;
        margin-left: -19px;
    }

    nav.navbar .menu-item-has-children:hover>ul.sub-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        background-color: white;
        z-index: 606;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

/* ---------
Begin IE MQ
--------- */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    body {
        font-size: 13.5px;
    }

    .navbar-dark .navbar-nav .nav-link,
    .navbar-nav li a {
        color: #270070;
    }

    @media screen and (min-width:767px) {
        .menu-widget ul.menu>.menu-item-has-children ul.sub-menu {
            /* weetabix submenu */
            top: 0 !important;
        }
    }
}