/* ==== FONTS ==== */
@font-face {
    font-family: "Museo";
    font-weight:500;
    src: url("../../assets/fonts/MuseoSans-500font.woff2");
}
@font-face {
    font-family: "Museo";
    font-weight:700;
    src: url("../../assets/fonts/MuseoSans-700font.woff2");
}
@font-face {
    font-family: "Museo";
    font-weight: 900;
    src: url("../../assets/fonts/MuseoSans-900font.woff2");
}


/* ==== 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', CenturyGothic, AppleGothic, 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,
.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.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 */
        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;
        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;
        }
    }
}