/* ==== FONTS ==== */
@font-face {
    font-family: "Museo";
    font-weight: 500;
    src: url('../../assets/fonts/MuseoSans-500.eot');
    src: url('../../assets/fonts/MuseoSans-500.eot?#iefix') format('embedded-opentype'),
        url('../../assets/fonts/MuseoSans-500.woff2') format('woff2'),
        url('../../assets/fonts/MuseoSans-500.woff') format('woff'),
        url('../../assets/fonts/MuseoSans-500.ttf') format('truetype');
}

@font-face {
    font-family: "Museo";
    font-weight: 700;
    src: url('../../assets/fonts/MuseoSans-700.eot');
    src: url('../../assets/fonts/MuseoSans-700.eot?#iefix') format('embedded-opentype'),
        url('../../assets/fonts/MuseoSans-700.woff2') format('woff2'),
        url('../../assets/fonts/MuseoSans-700.woff') format('woff'),
        url('../../assets/fonts/MuseoSans-700.ttf') format('truetype');
}

@font-face {
    font-family: "Museo";
    font-weight: 900;
    src: url('../../assets/fonts/MuseoSans-900.eot');
    src: url('../../assets/fonts/MuseoSans-900.eot?#iefix') format('embedded-opentype'),
        url('../../assets/fonts/MuseoSans-900.woff2') format('woff2'),
        url('../../assets/fonts/MuseoSans-900.woff') format('woff'),
        url('../../assets/fonts/MuseoSans-900.ttf') format('truetype');
}


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

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

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: 'Museo', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #23256E;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

html,
body {
    height: 100%;
}

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

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

/* 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 {
    color: #23256e;
}

.product h5 {
    font-weight: 900;
}



/* ==== 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: 1rem 18px;
    min-width: 130px;

    /* Greater letter spacing on white text
    border: 1px solid transparent;
    */
    letter-spacing: 0.08rem;
    line-height: 1;
    word-break: break-word;
    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;

    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;
    transition: 40ms background-color linear, 40ms color linear;
}

.wp-block-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    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: #23256E;
    color: #FFF;
    /* was #FEDD32 */
}

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: #23256E;
}




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: #23256E;
    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: #FEDD32;
    color: #23256E;
    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: #23256E;
}

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: #23256E;
    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: #23256E;
    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: #23256E;
}

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: #23256E;
    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: #FEDD32;
    color: #23256E;
}


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: #23256E;

}

/* ==== SUPER MORNING ==== */
.page-id-532 .cta-color-blue .home-block-contents {
    margin-bottom: 0;
    margin-top: 0;
    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 {
    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;
        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: flex;
        justify-content: space-between;
    }

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

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







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


/* Bring to very absolute front! */
.navbar-wrapper {
    --height: 62px;

    --col-out: #23256E;
    --col-over: #007bff;
    --col-border: #aaa;

    position: relative;
    z-index: 808;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

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

/* Actual menu wrapper */
nav.navbar {
    background-color: #FEDD32;
    height: 62px;
    height: var(--height);
    width: 100%;
    padding: 0;
    /* margin: 0 20px; */
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

/* Small logo (see media q) */
nav.navbar img {
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
    box-sizing: border-box;
}

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

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

/* Allow it to grow */
nav.navbar ul.navbar-nav {
    flex-grow: 1;
    justify-content: space-between;
    align-items: stretch;
}

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 {
    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; */
}

/* 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: #007bff;
    color: var(--col-over);
}

/* 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;
    flex-direction: column;
}

.nav-item>.sub-item {
    display: -ms-flexbox;
    flex-direction: column;
}

.nav-item.has-sub-menu.show .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: flex;
    flex-direction: column-reverse;
}

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

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

/* Prevent user selection as no interactive states */
.nav-item .sub-menu li h6 {
    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 {
    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;
}

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

.menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li:last-of-type {
    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: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 5px 0 20px 0;

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


.show ul.social {
    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;
}

/* Submenu background  15px 15px 15px*/
.navbar-collapse {
    background-color: #FEDD32;
    padding: 0;
    z-index: 1;
    /* flex-grow:1;
    flex-shrink:1;
    flex-basis:auto; */
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-top: -20px;
}

.navbar-wrapper.show {
    display: flex;
}

/* Convoluted Hamburger */

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

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

.navbar-toggler span {
    display: block;
    background-color: #23256E;
    height: 3px;
    width: 25px;
    margin-top: 4px;
    margin-bottom: 4px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-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;
    -moz-transition: transform .35s ease-in-out;
    -o-transition: transform .35s ease-in-out;
    transition: transform .35s ease-in-out;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-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);
    -moz-transform: rotate(-135deg);
    -o-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,
.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-wrapper {
        position: sticky;
        top: 0;
    }

    .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 calc(var(--margin) / 2);
    }


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

    nav.navbar img {
        display: block;
    }

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

    .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: 20px 0;
    }


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

    nav.navbar ul.navbar-nav {
        justify-content: space-around;
        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 {

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

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

        /* display:none; */
        width: 0;
        height: 0;
        overflow: hidden;

        left: calc(1 * var(--margin));
        right: calc(1 * var(--margin));

        padding: var(--margin) calc(var(--margin) * 4);

        background-color: #fff;
        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;
        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: #007bff;
        color: var(--col-over);
    }

    .nav-item .sub-menu .menu-widget:first-of-type h6 {
        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;
        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: flex;
    }

    .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li>a {
        pointer-events: none;
        user-select: none;
    }

    .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li>a::after {
        transition: opacity 90ms linear, transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
        content: '>';
        opacity: 0;
        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,
    .menu-widget.widget-quantity-3:nth-of-type(2) ul.menu>li:hover>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: flex;
        background-color: white;
        z-index: 606;
        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;
        flex-direction: column;
        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: flex;
        width: auto;
        height: auto;
        overflow: visible;
    }

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

    .collapsing ul.social,
    .show ul.social {
        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;
    }

    /*
    .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#mega-menu-449,
    .sub-mega-menu#mega-menu-545 {
        left: auto;
        right: auto;
        padding: 0;
    }

    .sub-mega-menu#mega-menu-449>li,
    .sub-mega-menu#mega-menu-545>li {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Seperating line */
    .sub-mega-menu#mega-menu-449 li,
    .sub-mega-menu#mega-menu-545 li {
        border-top: 1px solid#DDD8D6;
    }

    .sub-mega-menu#mega-menu-449 li a,
    .sub-mega-menu#mega-menu-545 li a {
        padding: calc(var(--margin) /2) calc(var(--margin) / 4);
    }

    .sub-mega-menu#mega-menu-449 li .menu-widget,
    .sub-mega-menu#mega-menu-545 li .menu-widget {
        margin-top: 0;
    }

    .sub-mega-menu#mega-menu-449 li a:hover,
    .sub-mega-menu#mega-menu-449 li a:focus,
    .sub-mega-menu#mega-menu-545 li a:hover,
    .sub-mega-menu#mega-menu-545 li a:focus {}

    .sub-mega-menu#mega-menu-449 .sub-title,
    .sub-mega-menu#mega-menu-545 .sub-title {
        display: none;
    }


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

        /* inset replaces the navbar shadow */
        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#mega-menu-449,
    .sub-mega-menu#mega-menu-545 {
        min-width: 26ch;
        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: 100px;
        margin: 12px 20px 0 0;
    }

    nav.navbar img {}

    nav.navbar ul.social {}
}


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

    to {
        opacity: 1;
        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: 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: flex;
        background-color: white;
        z-index: 606;
        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: #23256e;
    }

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