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

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

/*

COLOUR REFERENCES

Yellow: #FFD100
Dark Yellow (gradient bottom): #efcc19
Light Blue : #007bff
Navy Blue: #270070
Red: #EE251A
Off white: #F6F0ED
Darker Off white: #DED9D6
Grey: #DDD8D6
Pink : #D65399
Black: #000

*/

:root {
    --pace: 11px;
    --margin: 33px;
    /* ie9 fix */
    --margin: calc(3 * var(--pace));
    --packshot-gap: calc(2 * var(--pace));

    --page-width: 940px;
}

.width-100 {
    width: 100% !important;
}

figure {
    margin: 0;
    line-height: 1;
}

/* ==== Typography ==== */

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    font-family: "Microbrew Three";
    font-size: 4rem;
}

h1 {
    font-size: 4.5rem;
}

h2 {
    font-size: 3.4rem;
}

h3 {
    font-size: 2.8rem;
}

h4 {
    font-size: 2.4rem;
}

#content h4 {
    font-size: 2.2rem;
}

nav .fa {
    font-size: 2.1rem;
}

.gform_wrapper h3.gform_title,
.product-packshots .pack-details,
h5 {
    font-size: 2rem;
}
/* Emphasis for first header paragraph */
header p:first-of-type,
.has-medium-font-size,
p.lead {
    font-size: 2rem;
}


#content h5 {
    font-size: 1.6rem;
}

.wp-block-group.columns

/* Set all sub headings to the same size */
.nav-item .sub-menu li h5,
.nav-item .sub-menu li h6,
.accordion-section .panel-body,
.accordion-section .panel-title {
    font-size: 1.5rem;
}

footer,
nav.navbar .sub-title,
ul.sub-menu li a,
.menu-widget h6,
.product-packshots .packs .pack .pack-link .cta {
    font-size: 1.4rem;
}

footer h4,
h6 {
    font-size: 1.325rem;
}

.wp-block-button__link,
.btn {
    /* font-size: 1.1rem; */
    font-size: 1.6rem;
}

.recipe-cards .card a span,
small {
    font-size: 1rem;
}

h5+p {
    margin-top: 10px;
}

p {
    margin: 0;
}

p+p {
    margin-top: 10px;
}

/* Split into as many columns as we need */
p.columns {
    /* column-width: var(--text-max-width); */
    -moz-column-fill: auto;
         column-fill: auto;
    -moz-column-span: all;
         column-span: all;
    -moz-column-gap: 33px;
         column-gap: 33px;
    -moz-column-gap: var(--margin);
         column-gap: var(--margin);
    -moz-column-count: 2;
         column-count: 2;
}


/* ==== LAYOUT ==== */
header {
    margin: 0;
}

/* Restrict width to readable length
,
section:first-of-type p,
main > p{
    */
header.centralise>p {
    max-width: 50ch;
    margin: auto;
}

/* Centralise headings */
header.centralise {
    text-align: center;

}

/* Prevent border touching */
header.centralise a,
header.centralise h1,
header.centralise h2,
header.centralise h3,
header.centralise p {
    padding-left: 33px;
    padding-right: 33px;
    padding-left: var(--margin);
    padding-right: var(--margin); 
}

header.centralise h1 {
    font-family: "Microbrew Three";
}

section {
    margin: 0;
    padding: 0;
}

/* FIXME: */
section h1,
section h2 {
    margin: 0 0 15px 0;
}

.product-image {
    width: 100% !important;
    height: auto !important;
}


/* Generic top heading (hidden ones don't take this rule) */
main>header a h1 {
    padding-top: 33px;
    padding-top: var(--margin);
}

main>header:has(a.hidden-title) {}

body>main {
    background-color: white;

    /* Create header fixed clearance */
    margin-top: 62px;
}

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

}

body>footer {
    margin-top: auto;
}

nav ol,
nav ul,
.slab ol,
.slab ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.slab,
.wp-block-group__inner-container {
    padding: 33px;
    padding: var(--margin);
}

h2.download_title {
    font-weight: 500;
}


/* Vertical pacing */
.wp-block-group__inner-container,
.slab.has-top-margin,
.has-top-margin {
    margin-top: 33px;
    margin-top: var(--margin);
    display:block;
}

.wp-block-columns {
    margin-bottom: 0;
    margin-top: 33px;
    margin-top: var(--margin);
}

/* Columned content */
.wp-block-group.columns div {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

/* Column Blocks */
.wp-block-group>*:not(.wp-block-group)>* {
    width: 50%;
    max-width: 50%;
}

.wp-block-column h4,
.wp-block-column p {
    margin-bottom: 10px;
}

@media (min-width: 782px) {

    .wp-block-column:not(:first-child) {
        margin-left: 33px;
        margin-left: var(--margin);
    }
}

/* ==== UTILITIES ============================================ */

/* Accessibly hidden title */
.hidden-title,
.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/*
.hidden-title:not(:focus):not(:active),
.visually-hidden:not(:focus):not(:active) {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}
*/

/* Text modifier - from custom fields */
.no-caps {
    text-transform: unset;
}

p.center {
    text-align: center;
}

/* Hide all wordpress paragraphs that are empty */
p:empty {
    display: none;
}

/* == GLOBALS ================================== */
.content {
    /* padding: 0 var(--margin); */
}

.content>h1,
.content>h2,
.content>p,
.content>.wp-block-columns {
    padding: 0 33px;
    margin-top: 33px;
    padding: 0 var(--margin);
    margin-top: var(--margin);
}

.content>h1,
.content>h2,
.content>ol,
.content>ul,
.content>p {
    max-width: 75ch;
    margin: auto;
    margin-bottom: 33px;
    margin-bottom: var(--margin);
}

.content>h3,
.content>h4,
.content>h5,
.content>h6 {
    margin-top: 33px;
    margin-top: var(--margin);
}

.content>h4 {
    margin-bottom: 33px;
    margin-bottom: var(--margin);
}

.content>.wp-block-columns {}

/* ==== Links ==== */
#recipe-cards a:link:not(.btn),
#recipe-cards a:visited:not(.btn),
#content a:link,
#content a:visited {
    color: #270070;
    text-decoration: none;
}

#recipe-cards a:hover:not(.btn),
#recipe-cards a:focus:not(.btn),
#content a:hover,
#content a:focus {
    text-decoration: underline;
}


/* ==== IMAGES ============================================ */

.standout img {
    border: 12px solid #FFF;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: baseline;
}

.product-features img {
    max-width: 420px;
}

/* Full width image for header */
header img {
    display: block;
    width: 100%;
    height: auto;
}

header figure.cropped img.cropped-bowl {
    max-height: 400px;
    height: auto;
    width: auto;
}

/*
Packshot with in-built funky dropshadow
drop-shadow(offset-x offset-y blur-radius spread-radius color)
*/
img.packshot {
    filter: drop-shadow(0px 6px 9px rgba(50, 50, 0, 0.5));
}

/* Blocks with background image*/
.img-block {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(100vh - 80px);
}

.wp-block-image {}

.wp-block-image img {
    width: 100%;
    height: auto;
}

img.home-hero-block-image {
    width: 100%;
}


/* == VIDEO ============================================ */

figure.is-type-video {
    position: relative;
    width: 90%;
    display: block;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 33px;
    margin-top: var(--margin);
}

figure.is-type-video::before {
    content: '';
    display: block;
    height: 0;
    width: 100%;
    position: relative;
    padding-bottom: calc(100% * 3 / 4);
    z-index: -1;
}

figure.is-type-video::after {
    content: "\f04b";
    color: white;
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-family: FontAwesome;
    font-size: 650%;
    text-align: center;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    display: none;
}

figure.is-type-video.wp-embed-aspect-16-9::before {
    padding-bottom: calc(100% * 9 / 16);
}

figure.is-type-video .wp-block-embed__wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

figure.is-type-video iframe {
    width: 100%;
    height: 100%;
}

@media (min-width: 768px) {

    /* .home-block a.cta { 
        margin-top: auto;
    } */

    figure.is-type-video {
        width: 60%;
    }

}




/* == Anchors =============================================== */
a {}

/* Hide all underlines where not expected */
a:focus,
a:hover,
a:focus,
a:hover {
    text-decoration: none;
}

/* Fake button hidden inside an anchor tag... */
a .btn {}

a:hover .btn,
a:focus .btn {}

/*
Wrapper to hide insides of unless focussed...
If you want the anchor to be clickable, but not look
any different from the expected content
*/
a.hidden-link {
    color: #270070;
}

a.hidden-link:focus,
a.hidden-link:hover {
    color: #270070;
    text-decoration: none;
}

a p {}

a p,
a h1,
a h2,
a h3,
a h4,
a h5,
a h6 {
    color: #270070;
    cursor: text;
}

a:hover,
a:focus {}

/* Now introduce underlines to those elements affected */


/* == DOM CLASS Utils ======================================= */

/* Specific theme colours */
.text-color-red {
    color: #EE251A;
}

.text-color-blue {
    color: #270070;
}

.text-color-yellow {
    color: #FFD100;
}

.text-color-white {
    color: #F6F0ED;
}

.text-color-black {
    color: #000;
}

/* Fancy background */
.gradient {
    background-image: linear-gradient(to bottom, #fff, #fff 30%, #FFD100);
    background-size: cover;
    background-repeat: no-repeat;
}





/* == Index.php Items =========================================== */
.index {
    background-color: #F6F0ED;
}

.items {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each item in the index list */
.items .item {
    padding: 33px;
    padding: var(--margin);
}

/* alternate colours */
.items .item:nth-child(odd) {
    background-color: white;
}

.item .content {
    margin-top: 33px;
    margin-top: var(--margin);
}

.item .content img {
    float: left;
    max-width: 50%;
    margin-right: 33px;
    margin-right: var(--margin);
}


/* == Accordian ======================================= */
.accordion-section {
    padding: 33px 3px;
    padding: var(--margin) 3px;
    border-color: #DDD8D6;
    color: #270070;
}

.accordion-section h5 {
    text-transform: unset;
    padding-bottom: 6px;
}

.accordion-section:nth-child(odd) {
    background-color: #e9e6f0;
}

.accordion-section:nth-child(even) {
    background-color: white;
}

.accordion-section .panel-title {
    margin: 0;
    padding: 5px 0;
}

.accordion-section .panel-body {
    margin: 33px 0 10px 0;
    margin: var(--margin) 0 10px 0;
}

.accordion-section .panel-group {
    border-top: 1px solid #DDD8D6;
}

.accordion-section .panel {
    border-bottom: 1px solid #DDD8D6;
}


.accordion-section a:hover,
.accordion-section a:focus {
    text-decoration: none;
}

/* Opened accordian section */
.accordion-section a[aria-expanded=true] {
    font-weight: bold;
}

.accordion-section a[aria-expanded=false] {
    font-weight: normal;
}

/* Class equivalent */
.accordion-section a.collapsed {}

.accordion-section .panel-body,
.accordion-section .panel-title {
    font-weight: normal;
}

.accordion-section .panel-title a {
    color: inherit;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-transform: initial;
}

.accordion-section .panel-body a {
    font-weight: bold;
    color: #270070;
}

/* Close Icon */
.accordion-section .panel-title a:after {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-size: 2rem;
    content: "\f077";
    color: inherit;
    font-weight: 900;
    /* float: right; */
    margin-top: -0.5rem;
    margin-left: auto;
    transition: transform 200ms ease-out;
}

/* Opened so close
.accordion-section .panel-title a.collapsed:after {
    content: "\f107";
}
*/
.accordion-section .panel-title a.collapsed:after {
    transform: rotate(180deg);
}

.accordion-section>* {
    max-width: 80%;
    margin: auto;
}

@media (min-width: 782px) {

    .accordion-section>* {
        max-width: 70%;
    }
}

/* ==== Flags ==== */
.flag-icon {
    width: 2em;
    line-height: 1.5em
}

/* ==== NAVIGATION ============================= */
.breadcrumbs {}

.breadcrumbs ol {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumbs ol li {
    white-space: nowrap;
}

.breadcrumbs ol li+li {
    margin-left: 10px;
}

.breadcrumbs ol li+li::before {
    content: '>';
    margin-right: 4px;
}

.breadcrumbs ol li a {
    color: #270070;
}

/* ==== HEADER ==== */

/*Position of buttons on background image blocks*/
.img-block .btn.btn-bottom {
    margin-top: calc(100vh - 400px);
}

/* ==== Region Selector ==== */
#region-selector ul.list-inline.flags {
    margin-top: 25px;
}

#region-selector ul.list-inline.flags li {
    padding: 0 5px
}

/* ==== Brand Overview ==== */

/* ==== Get Creative ==== */

/* ==== Your wellbeing ==== */

/* == Product ============================================================== */
.product {}

/* Yellow gradients */
.product-header {
    background: linear-gradient(#ffed99,#ffd100);
    /* background-color: #FFD100;
    background-image: -o-linear-gradient(top, #FFD100, #D8AE16);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFD100), to(#D8AE16));
    background-image: linear-gradient(to bottom, #FFD100, #D8AE16); */
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    padding: calc(2 * 44px) calc(50% + 0 * 33px) calc(4 * 12px) calc(1 * 33px)
    /* padding: calc(2 * 33px) calc(50% + 0 * 33px) calc(4 * 33px) calc(1 * 33px); */
    /* padding: calc(2 * var(--margin)) calc(50% + 0 * var(--margin)) calc(4 * var(--margin)) calc(1 * var(--margin)); */
}

.product-header h1,
.product-header h2,
.product-header p {
    padding: 0;
    margin-left: 0;
    position: relative;
    z-index: 1;
    font-size: 2rem;
}

.product-header h1 {
    font-family: "Microbrew Three";
    font-size: 5rem;
    margin-bottom: 15px;
}

.product .brand-minis h1,
.product .brand-minis p {
    color: #ffffff;
}

/* Serving Suggestion */
.serving-suggestion {
    padding-top: 35px;
    font-size: 12px;
    font-weight: normal !important;
    text-transform: none;
}

/* Lead excerpt */
.product-header p {
    color: #270070;
}

.product-header img {
    /* --gap: calc(33px / 2);

    --gap: calc(var(--margin) / 2);

    order: -1;
    position: absolute;
    z-index: 0;
    top: calc(50% + calc(33px / 2));
    top: calc(50% + var(--gap));
    /* top:0;
    bottom:var(--gap);
    left:50%;*/
    /* left: 75%;

    transform: translateX(-50%) translateY(-50%);
    max-width: 35%;
    max-height: calc(100% - calc(33px / 2) * 2);
    max-height: calc(100% - var(--gap) * 2);

    width: auto;
    height: auto; */
}

.product-header .breadcrumbs {
    margin-bottom: 33px;
    margin-bottom: var(--margin);
    order: -1;

}

.product-description p {}

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

    .product-header img.overflow-bowl {
        position: absolute;
        bottom: -50%;
        right: -200px;
        max-width: 650px;
        width: 180%;
    }

    .ie .product-header {
        max-height: 640px;
        height: auto;
    }

    .product-header {
        overflow: hidden;
    }
}
@media screen and (min-width: 1024px) {
    .product-header img.overflow-bowl {
        bottom: -60%;
        max-width: 850px;
        right: -225px;
    }
    .product-header {
        overflow: hidden;
    }
}
@media screen and (min-width: 1200px) {
    .product-header img.overflow-bowl {
        bottom: -60%;
        max-width: 875px;
        right: -200px;
    }
}

/* Icons */
.product-features {
    background-color: #fdf6cf;
}

.product-features .features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.product-features .features .feature {

    --width: 400px;
    --height: 192px;
    --factor: 0.5;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: calc(var(--width) * var(--factor));
    height: calc(var(--height) * var(--factor));
    /* display: inline-block; */
    overflow: hidden;
    color: transparent;
    width: 50%;
    border: 7px solid transparent;
    box-sizing: border-box;

    display: inline-flex;
    text-align: center;
    justify-content: center;
    align-items: center;

}

.product-features .features .feature span.feature_text {
    width: 90px;
    color: #270070;
    text-align: left;
    transform: translateX(37px);
    display: inline-block;
    font-weight: bold;
    position: relative;
    font-size: 16px;
    line-height: 18px;
}

.product-features .features .feature span.feature_text:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 20px;
    background-image: url('../img/icons/underline-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transform: translateY(100%);
}

/*
Specific features using icons from the assets folder
high-fibre : High Fibre
vegetarian : Suitable For Vegetarians
grains : 365 Grains per Biscuit
protein : Source of Protein
vitamins : High in vitamins and iron
low-fat : Low in fat
wholegrain : 100% wholegrain goodness
low-saturates : Low in saturated fat
low-sugar : Low in sugar
low-salt : Low in Salt
*/
.product-features .features .feature-high-fibre {
    background-image: url('../img/icons/high-fibre.png');
}

.product-features .features .feature-high-protein {
    background-image: url('../img/icons/high-protein.png');
}

.product-features .features .feature-vegetarian {
    background-image: url('../img/icons/vegetarian.png');
}

.product-features .features .feature-grains {
    background-image: url('../img/icons/grains.png');
}

.product-features .features .feature-protein {
    background-image: url('../img/icons/protein.png');
}

.product-features .features .feature-vitamins {
    background-image: url('../img/icons/vitamins.png');
}

.product-features .features .feature-low-fat {
    background-image: url('../img/icons/low-fat.png');
}

.product-features .features .feature-wholegrain {
    background-image: url('../img/icons/wholegrain.png');
}

.product-features .features .feature-low-saturates {
    background-image: url('../img/icons/low-saturates.png');
}

.product-features .features .feature-low-sugar {
    background-image: url('../img/icons/low-sugar.png');
}

.product-features .features .feature-low-salt {
    background-image: url('../img/icons/low-salt.png');
}

.product-features .features .feature-no-palm {
    background-image: url('../img/icons/no-palm.png');
}

.product-features .features .feature-four-ingredients {
    background-image: url('../img/icons/four-ingredients.png');
}


.product-details {
    display: flex;
    background-color: #ffffff;
    flex-flow: row wrap;
    align-content: space-between;
    justify-content: space-between;

}

.product-details>* {
    width: 100%;
}

/* Add space to all elements */
.product-features,
.product-details {
    padding: 33px;
    padding: var(--margin);
}


/* Nutrition Table */
.product-nutrition {}

/* Nutritional data in a table */
.product-nutrition table {
    font-size: 80%;
}

/* Vertical seperator */
.product-nutrition table th+th,
.product-nutrition table td+td {
    border-left: 1px solid #3900a3;
}

.product-nutrition .tablepress thead th {
    border-bottom: 1px solid #3900a3;
}

.product-nutrition .tablepress tbody td, .tablepress tfoot th {
    border-top: 1px solid #3900a3;
}

/* Top row .product-nutrition table tfoot th,  */
.product-nutrition table thead th,
.product-nutrition table thead tr {
    color: #270070;
    background-color: #fff;
}

/* Other rows */
.product-nutrition table tbody tr {
    color: #000;
}

/* Even rows... */
.product-nutrition table tbody .even td {
    background-color: #E6EDFF;
}

.product-nutrition table tbody .odd td {
    background-color: #FFF;
}


.product-features {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
}

.product-features > img {
    margin-bottom: 33px;
    margin-bottom: var(--margin);
}
.product-features ul {
    list-style: none;
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin: 0;
}
.product-features ul li {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    width: auto;
    margin: 5px;
    text-align: center;
}
.product-features ul li img {
    max-width: 60px;
    max-height: 60px;
}

.product-features ul li span {
   font-family: "Microbrew Three";
   color: #33653a;
    font-size: 2rem;
    line-height: 1;
    max-width: 100px;
}

.product-features ul li span bold {
    font-size: 3.5rem;
}

.product-features ul li span p {

}

@media screen and (min-width: 768px) {
    .product-features {
        flex-flow: row nowrap;
        padding-left: 66px;
        padding-left: calc(var(--margin) * 2);
    }
    .product-features > img {
        width: 25%;
        margin-bottom: 0;
    }
    .product-features ul {
        width: 75%;
        justify-content: space-around;
    }
    .product-features ul li img {
        max-width: 75px;
        max-height: 75px;
    }
    .product-features ul li span bold {
        font-size: 4rem;
        font-weight: 800;
    }
    .product-features ul li span p {
        font-size: 2.5rem;
    }
}

@media screen and (min-width:760px) {
    /* .postid-507 .product-nutrition table {
        font-size: 55%;
      }
      .postid-507 .tablepress td, .tablepress th {
        padding: 4px 6px;
        } */
}

.product-breakdown {}

.product-ingredients {}

/* If there is ingredients, we need to push the stockists down a bit */
.product-ingredients,
.product-stockists {
    margin-top: 33px;
    padding-top: 33px;
    margin-top: var(--margin);
    padding-top: var(--margin);
    border-top: 1px solid #DDD8D6;
}

.product-stockists {}

.product-stockists strong {
    margin-top: 33px;
    margin-top: var(--margin);
}

/* This is the allergic ingrdient so boldify and such */
.product-ingredients .allergen {}

/* Allergens headline */
.product-ingredients h6 {
    margin: 0;
    margin-top: 33px;
    margin-top: var(--margin);
    text-transform: initial;
}

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

    .product-header {
        padding-right: 0;
        flex-flow: row nowrap;
    }

    .product-header div.text-container {
        width: 45%;
    }

    .product-header figure {
        width: 55%;
    }
    .product-header figure.cropped {
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 0;

        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }

    .product-ingredients {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .product-details>* {
        max-width: calc(50% - 33px / 2);
        max-width: calc(50% - var(--margin) / 2);
    }
}


@media (min-width: 992px) {

    /* .product-header{
       padding-left: calc( 4 * var(--margin));
       } */
}



/* BLOCK product-link-item */
.product-packshots {
    background-size: cover;
    padding: 33px;
    padding: var(--margin);
    text-align: center;
}

/* Individual Product */
.product-packshots .packs {
    list-style: none;
    margin: 0;
    margin-top: calc(0.5 * 33px);
    margin-top: calc(0.5 * var(--margin));
    padding: 0;
    display: flex;
    flex-direction: row;
    /* Wrap for smaller sizes */
    flex-direction: column;
    align-items: center;
}

/* Individual Product in wide mode */
.product-packshots .packs .pack {
    /* margin: auto; */
    width: 100%;
    height: 100%;

    flex-shrink: 1;
    flex-grow: 1;
    display: block;
}

.product-packshots .packs .pack+.pack {
    margin-left: var(--packshot-gap);
}

/* Pack Shots */
.product-packshots .packs .pack .pack-link {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.product-packshots .packs .pack .pack-link .cta {
    margin-top: auto;
    order: 999;
    padding-left: 9px;
    padding-right: 9px;
    display: inline-block;
    flex-shrink: 1;
    flex-grow: 0;
    min-width: 200px;
    margin-top: 10px;
    box-sizing: border-box;
}

.product-packshots .pack-details {}

/* Actual Packshot */
.packs .pack .wp-post-image {
    margin: auto;
    background-color: transparent;
    
    margin-bottom: var(--packshot-gap);
    width: auto;
    /*  max-height: 152px;*/
    max-height: 225px;
    max-width: 100%;

    flex: 0 0 auto;
}

/* CTA Placement (global) */
.packs .pack .cta {
    display: inline-block;
    margin: auto;
    margin-bottom: 0;
}

/* Hide superflous button copy */
.packs .pack .cta span {
    width: 0;
    overflow: hidden;
    color: transparent;
    display: inline-block;
}

section.stockist-section {
    padding: 33px;
    padding: var(--margin);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    background: #fff;
}

section.stockist-section div.stockist-control {
    width: 100%;
    border-bottom: 1px solid #333;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            /* align-items: center; */
    justify-content: center;
    flex-flow: column nowrap;
}

section.stockist-section div.stockist-control div.stockist-text-container {
    text-align: left;
    order: 2;
}

section.stockist-section div.stockist-control div.stockist-image-container {
    order: 1;
    padding-top: 89px;        
}

section.stockist-section div.stockist-control div.stockist-image-container img {
    max-width: 350px;
    max-height:350px;
    width: auto;
    height: auto;
}

section.stockist-section h2 {
    font-family: "Microbrew Three";
    margin-top: 33px;
    margin-top: var(--margin);
}

section.stockist-section div.stockist-control div.stockist-text-container p.stockist-text {
    max-width: 80ch;
}

section.stockist-section div.stockist-control bold {
    font-weight: bold;
}

section.stockist-section ul.stockists {
    list-style-type: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-flow: row wrap;
    margin: 33px auto;
    margin: var(--margin) auto;
    padding: 0;
}

section.stockist-section ul.stockists li.stockist {
    max-width: 150px;
    margin: 0px 5px;
}

section.stockist-section ul.stockists li.stockist img {
    padding: 10px;
    max-width: 125px;
}

/* PRODUCT PAIRING SECTION */
/* Override Styles */
section.product-pairing.slab {
    padding: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    margin-top: 33px;
    margin-top: var(--margin);
}

section.product-pairing div.item-group {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    width: 100%;
    padding: 33px;
    padding: var(--margin);
    min-height: 300px;
}

section.product-pairing div.item-group figure,
section.product-pairing div.item-group figure img,
section.product-pairing div.pairing-group figure {
    max-width: 225px;
    max-height: 225px;
    width: auto;
    margin: 0;
}

section.product-pairing div.pairing-group figure img {
    max-height: 225px;
    width: auto;
    filter: drop-shadow(0px 6px 9px rgba(50, 50, 0, 0.5));
}
section.product-pairing div.item-group figure img {
    filter: drop-shadow(0px 6px 9px rgba(50, 50, 0, 0.5));
}
section.product-pairing div.item-group figure {
    margin: 33px 0;
    margin: var(--margin) 0;
}
section.product-pairing div.pairing-group {
    height: 300px;
    max-height: 300px;
    min-height: 300px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

section.product-pairing div.text-container h2 {
    font-size: 5rem;
    font-family: "Microbrew Three";
}

@media screen and (min-width: 500px) {
    section.product-pairing div.item-group {
        flex-flow: row nowrap;
    }
    section.product-pairing div.item-group figure {
        margin: 33px;
        margin: var(--margin);
        margin-right: 0;
    }
}

@media screen and (min-width: 768px) {
    section.product-pairing div.item-group {
        padding: 66px;
    }

    section.product-pairing div.item-group,
    section.product-pairing div.pairing-group {
        height: 350px;
        max-height: unset;
        min-height: unset;
    }

    section.stockist-section div.stockist-control div.stockist-text-container p.stockist-copy {
        max-width: 80%;
    }

    section.product-pairing.slab {
        flex-flow: row nowrap;
    }

    section.product-pairing div.item-group {
        width: 50%;
    }

    section.product-pairing div.pairing-group {
        width: 50%;
    }
}

@media screen and (min-width: 900px) {
    section.product-pairing.slab {
        flex-flow: row nowrap;
    }

    section.product-pairing div.item-group {
        align-items: flex-start;
        justify-content: space-around;
    }

    section.product-pairing div.item-group h2 {
        font-size: 4rem;
    }

    section.product-pairing div.item-group .text-container {
        width: 100%;
    }
    section.product-pairing div.item-group figure {
        margin: 0;
    }
    section.product-pairing div.item-group figure img {
        max-width: 275px;
    }
}

@media screen and (min-width: 1023px) {
    section.stockist-section div.stockist-control {
        flex-flow: row nowrap;
    }

    section.stockist-section div.stockist-control div.stockist-text-container {
        order: 1;
        width: 60%
    }

    section.stockist-section div.stockist-control div.stockist-image-container {
        order: 2;
        width: 40%;
    }

    section.stockist-section ul.stockists {
        justify-content: flex-start;
    }

    section.stockist-section ul.stockists li.stockist {
        overflow:hidden;
        max-width: 175px;
        margin: 0px 5px;
    }
}

/* Soya Free Products FAQ */
section.soya-free-products {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../../assets/img/faq_banner.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 60px 33px;
    padding: 60px var(--margin);
    margin-top: 33px;
    margin-top: var(--margin);
}

section.soya-free-products div.text-container {
    text-align: center;
    max-width: 800px;
}

section.soya-free-products div.text-container h2 {
    transform: rotate(-2deg);
    font-family: "Weetabix Font";
    text-transform: unset;
    font-size: 5rem;
    padding: 0;
    margin-bottom: 30px;
    color: white;
}

/* Pack into columns */

@media screen and (min-width: 500) {

    .product-features .features .feature {
        width: 33%;
    }
}

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

    .product-packshots .packs {
        flex-direction: row;
        /* Fit all on one line */
        flex-wrap: nowrap;
        /* Align to bottom */
        justify-content: center;
        align-items: flex-end;
    }

    .packs .pack .wp-post-image {}

    /*.packs .pack .cta span{
        color:inherit;
        width:auto;
        overflow: visible;
    }
    Depending on contents... */

    /*
    These control the width of the elements if there are more than one

    One pack shot in the centre of the screen
    .product-packshots .packs.pack-quantity-1 .pack{
        width:calc(40% - var(--packshot-gap) );
        flex-basis:calc(40% - var(--packshot-gap) );
    }

    .product-packshots .packs.pack-quantity-2 .pack{
        width:calc(40% - var(--packshot-gap) );
        flex-basis:calc(40% - var(--packshot-gap) );
    }
    .product-packshots .packs.pack-quantity-3 .pack{
        width:calc(33.3% - var(--packshot-gap) );
        flex-basis:calc(33.3% - var(--packshot-gap) );
    }
    .product-packshots .packs.pack-quantity-4 .pack{
        flex-basis:calc(25% - var(--packshot-gap) );
        width:calc(25% - var(--packshot-gap) );
    }
    .product-packshots .packs.pack-quantity-5 .pack{
        width:calc(20% - var(--packshot-gap) );
        flex-basis: calc(20% - var(--packshot-gap) );
        }*/

    .product-packshots .packs .pack {
        max-width:25%;
        max-width: calc(25% - var(--packshot-gap));
        width: 100%;
        flex-basis: calc(25% - var(--packshot-gap));
    }

    .product-features .features .feature {
        width: 25%;
    }

    .product-features .features .feature.flexbox-5-elements {
        width: 20%;
    }
}

@media screen and (min-width: 768px) {
    ul.recipe-cards div.recipe-trio-container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-flow: row nowrap;
    }
}


/* ==== RELATED PRODUCTS ================================ */

/* wrapper */
.related-products {
    text-align: center;
    padding-left: 33px;
    padding-right: 33px;
    padding-left: var(--margin);
    padding-right: var(--margin);

    padding-bottom: 66px;
    padding-bottom: calc(var(--margin) * 2);
    margin-top: 33px;
    margin-top: var(--margin);
}

section.related-products h2 {
    font-family: "Microbrew Three";
    font-size: 5rem;
}

section.related-products ul.packs li.pack a.pack-link {
    padding: 0px 5px;
}
@media screen and (min-width: 1200px) {
    section.related-products ul.packs li.pack .wp-post-image {
        max-height: 250px;
    }
}

section.related-products.product-packshots h1 {
    padding: 0;
    font-family: "Microbrew Three";
    font-size: 4rem;
}

section.related-products.product-packshots.slab {
    padding: 33px 33px 132px;
    padding: calc(var(--margin) * 1) var(--margin) calc(var(--margin) * 4);
}

section.related-products.product-packshots div.pack-control {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row nowrap;
}

section.related-products ul.packs.add-slider {
    flex-direction: row;
    justify-content: center;
    position: relative;
    width: 90%;
    margin: 40px auto;
}

section.related-products ul.packs.add-slider ul.slick-dots {
    position: absolute;
    bottom: -80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

section.related-products div.slick-button svg {
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 3000;
}

section.related-products ul.packs.add-slider .slick-slide {
  margin: 0 27px;
}

section.related-products ul.packs.add-slider ul.slick-dots {

}
section.related-products ul.packs.add-slider ul.slick-dots li {
    margin: 0 5px;
}

section.related-products ul.packs.add-slider ul.slick-dots li button {
    font-size: 0;
    height: 25px;
    width: 25px;
    background: #270070;
    box-shadow: unset;
    border: unset;
    border: 2px solid #270070;
    border-radius: 50%;
}
section.related-products ul.packs.add-slider ul.slick-dots li.slick-active button {
    background: transparent;
}


.similar-products {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
}

/* Max of 3 products in a row */
.similar-products .related-product {
    width: 33.3%;
    max-width: 33%;
}

.similar-products .related-product a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    flex-wrap: nowrap;
    height: 100%;
}

.similar-products .related-product a img {
    order: -1;
    margin-bottom: 10px;
    width: auto;
    height: auto;
    /* FIXME: */
    max-width: 200px;
    max-height: 300px;
}

.similar-products.product-quantity-1 .related-product {
    width: calc(40% - var(--packshot-gap));
}

.similar-products.product-quantity-2 .related-product {
    width: calc(40% - var(--packshot-gap));
}

.similar-products.product-quantity-3 .related-product {
    width: calc(33.3% - var(--packshot-gap));
}

.similar-products.product-quantity-4 .related-product {
    width: calc(25% - var(--packshot-gap));
}

.similar-products.product-quantity-5 .related-product {
    width: calc(20% - var(--packshot-gap));
}

/* ==== FAQS PAGE ==== */


/* ==== TEXT PAGE ==== */
#content ol {
    counter-reset: item;
    padding-left: 0;
}

#content ol>li ol {
    padding-left: 2rem;
}

#content ol>li {
    display: block;
    line-height: 1.6em;
    padding: 5px 0;
}

#content ol>li:before {
    content: counters(item, ".") " ";
    counter-increment: item;
}

#content ul>li {
    padding: 10px 0;
}

#content h4 {
    margin: 25px 0;
}

#content .table thead th {
    border-bottom: none;
}




/* ==== HOME ==== */

/*
Each block is vertical unless the screen is wide
enough to show multiple elements side by side
*/
.home-block {

    --padding-top: 4;
    --padding-right: 4;
    --padding-left: 4;
    --padding-bottom: 4;
    --width: 50;

    --image-border: 0;

    display: flex;
    flex-direction: column;
    position: relative;

    padding: 0;
    margin: auto;
    overflow: hidden;
    /* min-height: calc(100vh - 80px); */
}
/* 
.ie .home-block {

    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
} */

.home-block-contents {
    margin-bottom: calc(11px * 4px);
    margin-top: calc(11px * 4px);
    margin-left: calc(11px * 4px);
    margin-right: calc(11px * 4px);


    margin-bottom: calc(var(--pace) * var(--padding-bottom));
    margin-top: calc(var(--pace) * var(--padding-top));
    margin-left: calc(var(--pace) * var(--padding-left));
    margin-right: calc(var(--pace) * var(--padding-right));

    padding: 33px 33px 66px;
    padding: var(--margin) var(--margin) calc(var(--margin) * 2);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    align-items: flex-start;
    justify-content: flex-start;

    position: relative;
    z-index: 1;
    color: inherit;
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    .home-block-contents {
        padding: 33px 33px 66px;
        padding: var(--margin);
    }
}

.wp-block-group__inner-container h3,
.home-block-text {
    margin-bottom: calc(33px / 2);
    margin-bottom: calc(var(--margin) / 2);
}

.home-block.no-button .home-block-contents {}

.home-block-title {}

.home-block-description {}

/* .home-block a.cta {  EB 
    margin-top: -115px;
} */

/* Image wrapper */
.home-block-bg {
    /* display: flex; */
    flex-direction: row;
    max-width: 100%;
    max-height: 100%;
    order: -1;
    margin: 0;
    border: calc(0 * 11px) solid transparent;
    border: calc(var(--image-border) * var(--pace)) solid transparent;
    border-bottom: 0;
    overflow: hidden;
}

.home-block.slab figure.home-block-bg {
    /* order: 1; */
}

/* Don't let it grow too big and bring to top */
img.home-block-image {

    width: auto;
    height: auto;

    /* Need maximum sizes set up */
    max-width: 100%;
    max-height: 100%;

    /* width:auto;
    height:auto; */
    display: block;
}

/* .home-block.text-position-left{
    padding-right:50%;
}
.home-block.text-position-right{
    padding-left:50%;
}
.home-block.text-position-center{

    } */



/*
Button *always* goes on the bottom
and defaults to left alignment
*/
.home-block .cta {
    flex-grow: 0;
    flex-shrink: 0;
    display: inline-block;
    /* This should sit at the bottom middle unless overwritten... */
    justify-self: flex-end;
    margin-top: 16.5px;
    margin-top: calc(var(--margin) / 2);
    /* was  */
}



/* Different positions for the CTA */
.home-block.cta-position-tl {}

/* Top Aligned */
.home-block.image-position-tl img.home-block-image,
.home-block.image-position-tr img.home-block-image {
    margin-bottom: auto;
}

/* Bottom Aligned */
.home-block.image-position-bl img.home-block-image,
.home-block.image-position-br img.home-block-image {
    margin-top: auto;
}

/* Left aligned */
.home-block.image-position-bl img.home-block-image,
.home-block.image-position-tl img.home-block-image {
    margin-right: auto;
}

/* Right aligned */
.home-block.image-position-br img.home-block-image,
.home-block.image-position-tr img.home-block-image {
    margin-left: auto;
}

.home-block.image-position-or figure {
    position: relative;
    height: 350px;

    display: flex;
    align-items: center;
    justify-content: center;
}
.home-block.image-position-ol figure {
    position: relative;
    height: 350px;

    display: flex;
    align-items: flex-start;
}
.home-block.image-position-or img.home-block-image {
    position: absolute;
    width: 529px;
    height: auto;
    max-width: unset;
    max-height: unset;
    right: -140px;
    left: unset;
    top: -150px;
    bottom: unset;
}

.home-block.image-position-ol img.home-block-image {
    position: absolute;
    width: 580px;
    height: auto;
    max-width: unset;
    max-height: unset;
    left: -140px;
    right: unset;
    top: -150px;
    bottom: unset;
}

@media screen and (min-width: 767px) {
    .home-block.image-position-or figure,
    .home-block.image-position-ol figure {
    position: absolute;
    height: 100%;
    align-items: center;
    }
    .home-block.image-position-or figure.home-block-bg img.home-block-image {
        width: 130%;
        right: -30%;
        top: unset;
    }

    .home-block.image-position-ol figure.home-block-bg img.home-block-image {
        width: 160%; /* 130% */
        left: -62%; /* -30*/
        top: unset;
    }
}

/* When there is no image to scale the block to... */
.home-block.no-image .cta {
    margin-top:20px;
    margin-top: var(--packshot-gap);
}

/*
Button colours are handled at the button level
search btn-primary
.home-block.cta-color-yellow{

    } */


/* Growing sizes mean that it no longer stacks */
@media screen and (min-width:767px) {

    .home-block {

        --padding-top: 4;
        --padding-right: 4;
        --padding-left: 4;
        --padding-bottom: 4;
    }

    .home-block-bg {
        position: absolute;
        z-index: 0;
        border: calc(0 * 11px) solid transparent;
        border: calc(var(--image-border) * var(--pace)) solid transparent;
    }

    img.home-block-image {
        max-width: initial;
        max-height: initial;
    }

    /* Variations in the location of the text */

    /* Default : Left aligned */
    .home-block.text-position-left {}


    .home-block.text-position-left .home-block-text {}

    /* Right hand align */
    .home-block.text-position-right {}

    .home-block.text-position-right .home-block-text {}

    .home-block.text-position-right .home-block-contents {
        /* align-items: flex-end; */
    }

    /* Centralise */
    .home-block.text-position-center .home-block-contents {
        align-items: center;
        text-align: center;
    }

    .home-block.text-position-center .home-block-text {
        /* text-align: center; */
    }

    /*
        c : Align Centrally
        tl : Align Top Left
        tr : Align Top Right
        bl : Align Bottom Left
        br : Align Bottom Right
        fw : Flood Width (height auto)
        fh : Flood height (width auto)
        */


    .home-block.image-position-c .home-block-bg {
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        /* object-fit: */
    }

    .home-block.image-position-tl .home-block-bg {
        top: 0;
        left: 0;
        bottom: 0;
        right: auto;
        border-right: 0;
    }


    .home-block.image-position-bl .home-block-bg {
        top: 0;
        left: 0;
        bottom: 0;
        right: auto;
        border-right: 0;
    }

    .home-block.image-position-tr .home-block-bg {
        top: 0;
        left: auto;
        bottom: 0;
        right: 0;
        border-left: 0;
    }

    .home-block.image-position-br .home-block-bg {
        top: 0;
        left: auto;
        bottom: 0;
        right: 0;
        border-left: 0;
    }



    /* actual images */

    .home-block.image-position-c img.home-block-image {
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

    .home-block.image-position-tl img.home-block-image {}

    .home-block.image-position-tr img.home-block-image {}

    /* Top Aligned */
    .home-block.image-position-tl img.home-block-image,
    .home-block.image-position-tr img.home-block-image {
        top: 0;
        bottom: auto;
    }

    /* Bottom Aligned */
    .home-block.image-position-bl img.home-block-image,
    .home-block.image-position-br img.home-block-image {
        top: auto;
        bottom: 0;
    }

    /* Left aligned */
    .home-block.image-position-bl img.home-block-image,
    .home-block.image-position-tl img.home-block-image {
        left: 50%;
        transform: translateX(-50%);
    }

    /* Right aligned */
    .home-block.image-position-br img.home-block-image,
    .home-block.image-position-tr img.home-block-image {
        right: 50%;
        transform: translateX(50%);
    }

    /* Stretch to flood height */
    .home-block img.home-block-image {
        max-width: 100%;
    }

    .home-block.image-stretch img.home-block-image {
        max-height: initial;
        max-width: initial;
        height: 100%;
        width: auto;
    }

    .ie .home-block.text-position-right .home-block-bg {
        width: 50%;
        max-width: calc(100% - 1% * 50);
        right: auto;
        left: 0;
    }

    .home-block.text-position-right .home-block-bg {
        width: 100%;
        max-width:50%;
        max-width: calc(100% - 1% * var(--width));
        right: auto;
        left: 0;
    }

    .home-block.text-position-left .home-block-bg {
        width: 100%;
        max-width:50%;
        max-width: calc(100% - 1% * var(--width));
        left: auto;
        right: 0;
    }

    /*  */
    .home-block.image-position-fw .home-block-bg,
    .home-block.image-position-fh .home-block-bg {
        left: auto;
        right: auto;
        position: relative;
        max-width: 100%;
        max-height: 100%;
    }

    .home-block .home-block-bg img.home-block-image {
        position: absolute;
        -o-object-fit: cover;
           object-fit: cover;
        width: 100%;
    }

    .home-block.image-position-fw .home-block-bg img.home-block-image,
    .home-block.image-position-fh .home-block-bg img.home-block-image {
        position: relative;
    }

    /*
    These needs to flood fill width or height
    meaning that the image itself is responsible for
    scaling the home-block rather the content's within
    */
    .home-block.image-position-fw,
    .home-block.image-position-fh {
        padding: 0;
    }

    /* Reposition contents to flood inside */
    .home-block.image-position-fw .home-block-contents,
    .home-block.image-position-fh .home-block-contents {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* Flood data - image fill width */
    .home-block.image-position-fw img.home-block-image,
    .home-block.image-position-fh img.home-block-image {
        max-width: 100%;
        max-height: 100%;
    }

    /* Flood width but autosize height */
    .home-block.image-position-fw img.home-block-image {
        width: 100%;
        height: auto;
    }

    /* Flood height but scale width proportionally */
    .home-block.image-position-fh img.home-block-image {
        width: auto;
        height: 100%;
    }

    /* If there is no image set, we can't use it to set the height! */
    .home-block.no-image .home-block-contents {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    }

    /* Button alignments */
    .home-block .cta.left {
        align-self: flex-start;
    }

    .home-block .cta.center {
        -ms-grid-row-align: center;
        align-self: center;
    }

    .home-block .cta.right {
        align-self: flex-end;
    }

    .home-block .cta.stretch {
        -ms-grid-row-align: stretch;
        align-self: stretch;
    }


    /* Restrict text width (also bg?) */
    .home-block.text-position-left {}

    .home-block.text-position-left img {}

    .home-block.text-position-left .home-block-contents {
        margin-right: calc((1% * 400px) + 11px * 4px);
        margin-right: calc((1% * var(--width)) + var(--pace) * var(--padding-right));
    }

    .home-block.text-position-right {}

    .home-block.text-position-right .home-block-contents {
        margin-left:50%;
        margin-left: calc((1% * var(--width)) + var(--pace) * var(--padding-left));
    }

    .home-block.text-position-center {}

    .home-block.text-position-center .home-block-text {}
}

/* === HISTORY ================================================= */
ul.history {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    background-color: #F7F0ED;
}

ul.history li {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #F7F0ED;
    align-items: center;
    justify-content: space-evenly;
}

ul.history li p.event {
    width: 90%;
    margin: auto;
}

/* swap image side */
ul.history li:nth-child(even) {
    background-color: #DDD8D6;
    flex-direction: row-reverse;
}

ul.history li:nth-child(odd) {
    background-color: #ffffff;

}



ul.history li img {
    order: -1;
    /* outline:2px solid green; */
    width: 50%;
    padding: 1em;
}



ul.history li:nth-child(even) img {
    /* outline:2px solid pink; */
}

ul.history .year {
    font-size: 1.5em;
}

.historic-text .year {
    color: #f12100;
    text-align: center;
}



/* Dual column design */
@media (min-width: 768px) {

    ul.history li {
        position: relative;
    }

    ul.history li p.event {
        width: 65%;
        margin: inherit;
    }


    .historic-text .year {
        text-align: inherit;
    }

    .historic-text {
        width: 50%;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
    }

    ul.history li::before {
        content: '';
        position: absolute;
        width: 4px;
        background-color: #2c2d76;
        top: 10px;
        bottom: 10px;
        border-radius: 4px;
    }

    ul.history li img {
        padding: 3em;
    }

    ul.history li:nth-child(odd)>div {
        padding-left: 5%;
    }

    ul.history li:nth-child(even)>div {
        text-align: right;
    }

    ul.history li:nth-child(even)>div>h6 {
        margin-right: 10%;
    }

    ul.history li:nth-child(even) p.event {
        margin-left: 25%;

    }

    ul.history .year {
        font-size: 2.3em;
    }

    ul.history li:nth-child(even)::after {
        content: '';
        border-radius: 999px;
        width: 20px;
        height: 20px;
        background-color: #2c2d76;
        position: absolute;
        border: 10px solid #DDD8D6;
        box-sizing: content-box;
    }

    ul.history li:nth-child(odd)::after {
        content: '';
        border-radius: 999px;
        width: 20px;
        height: 20px;
        background-color: #2c2d76;
        position: absolute;
        border: 10px solid #ffffff;
        box-sizing: content-box;
    }
}

/* === CONTACT US =============================================== */

.contact-details {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    background: #FFF;
    padding: 33px;
    padding: var(--margin);
    /* padding: 45px 18%;
    transform: translateX(calc((25em - 50vw)/2));
    width: 100vw;*/
}

.contact-column {
    width: 100%;
}
.gform_heading{
    display: none;
}
fieldset.gfield.gfield--type-checkbox{
    display: flex !important;
    align-items: center;
}
.contact-form .gform_wrapper .top_label input.medium,
.gform_wrapper .top_label select.medium {
    width: calc(80% - 8px) !important;
}

.contact-form .gform_wrapper.gf_browser_chrome ul.gform_fields li.gfield div.ginput_complex span.ginput_left select,
.gform_wrapper.gf_browser_chrome ul.gform_fields li.gfield div.ginput_complex span.ginput_right select,
.gform_wrapper.gf_browser_chrome ul.gform_fields li.gfield input[type=radio],
.gform_wrapper.gf_browser_chrome ul.gform_fields li.gfield select {
    height: 23px;
}

.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
    height: 35px !important;
    width: 100%;
}

.gform_wrapper .left_label textarea.medium,
.contact-form .gform_wrapper .left_label select.medium,
.gform_wrapper input.medium {
    width: 100% !important;
}

.page-id-385 label {
    margin-bottom: 0.3rem;
}

.page-id-385 .gform_wrapper .top_label .gfield_label,
.gform_wrapper legend.gfield_label {
    line-height: 0.3;
}


body .contact-form .gform_wrapper ul li.gfield.address-second-line {
    margin-top: -22px;

}

body .contact-form .gform_wrapper ul li.gfield {
    margin-top: 7px;
}

body .contact-form .gform_wrapper .top_label div.ginput_container {
    margin-top: 0;
}

.map {
    /* flex-basis: 50%; */
    position: relative;
    margin-bottom: 33px;
    margin-bottom: var(--margin);
}

.acf-map {
    width: 100%;
    height: 325px; /* was 450 */
    /* border: transparent solid 1px; */
}

.acf-map img {
    max-width: inherit !important;
}

/* .acf-map div:nth-of-type(1) {
    background: #fff;
} */

.map address {
    position: absolute;
    top: calc(-10px + 2 * 33px);
    left: 33px;

    top: calc(-10px + 2 * var(--margin));
    left: var(--margin);
    margin: 0;
    padding: 10px;
    background-color: #F6F0ED;
}

.contact-info {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}


/* ==== FOOTER ==== */
footer {
    background: #FfD100;
    color: #270070;
    padding: 60px 0;
}

footer div.container {
    max-width: 450px;
    margin: 0 auto;
}

footer a.section-link-wrap {
    width: 100%;
}
footer a.section-link-wrap section.had-yours {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16.5px 0px;
    padding: calc(var(--margin) / 2) 0px;
    margin-bottom: 33px;
    margin-bottom: var(--margin);
    border-bottom: 1px solid #270070;
    text-transform: unset;

    font-family: "Weetabix Font";
}

footer a.section-link-wrap section.had-yours h1 {
    cursor: pointer;
    color: #270070;
    margin: 0;
    text-transform: unset;
    font-size: 5rem;
    font-weight: 400;
    /* margin reset */
}

footer a,
footer a:link,
footer a:visited {
    color: inherit;
}
footer a:hover,
footer a:focus {
    color: white;
}

footer .nav-link {
    padding: 0;
    line-height: 1.8rem;
}

footer .nav-link:focus,
footer .nav-link:hover {
    color: white;
    text-decoration: underline;
}

footer h4 {
    font-weight: 500;
    margin-bottom: 15px;
}

footer div.container div.row {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: unset;
}

footer div.container div.row div.footer-navigation,
footer div.container div.row div.social-container {
    flex-basis: 50%;
}

footer div.container div.row div.right-column {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}

footer ul#menu-footer li {
    font-size: 1.4rem;
    font-weight: bold;
}

footer .fa {
    font-size: 2rem;
}

footer ul.social li+li {
    margin-left: 0.8rem;
}

footer div.right-column div.social-container h4 {
    margin-bottom: 0;
    font-weight: 500;
    text-transform: unset;
    /* font-weight: bolder; */
    font-size: 2rem;
    margin-bottom: 8px;
}

footer div.right-column div.social-container ul.list-inline.social li svg {
    width: 25px;
    height: 25px;
}

@media screen and (min-width: 375px) {
    footer a.section-link-wrap section.had-yours h1 {
        font-size: 6rem;
    }
}
 
@media screen and (min-width: 400px) {
    footer a.section-link-wrap section.had-yours h1 {
        font-size: 7rem;
    }
}

@media screen and (min-width: 450px) {
    footer a.section-link-wrap section.had-yours h1 {
        font-size: 8rem;
    }
}

@media screen and (max-width: 768px) {
    footer ul#menu-footer {
        display: flex;
        flex-flow: column nowrap;
        align-items: flex-start;
        justify-content: flex-start;
    }

    section.hero-banner.image-position-bc {
    background-position: center center!important;
}
section.hero-banner {
    min-height: 40vh;
}
nav .textwidget.custom-html-widget {
    display: none;
}
.wp-block-kadence-column.inner-column-1.kadence-column_a2b7ae-86 > div {
    flex-wrap: wrap;
}
}

img.feature-tick {
    align-self: flex-start;
}





@media screen and (min-width: 768px) {
    footer div.container div.row div.right-column {
        flex-flow: row nowrap;
        flex-basis: 45%;
        align-items: flex-end;

    }
    footer div.container {
        max-width: 800px;
    }

    footer div.container div.row {
        align-items: flex-end;
    }

    footer ul#menu-footer.card-columns {
        -moz-column-count: 2;
             column-count: 2;
    } 
}

/*
==== MEDIA QUERIES =========================================
This is the media query that splits the stacks into
horizontal columns
*/
@media (min-width: 768px) {

    :root {
        --packshot-gap: 20px;
    }

    /* ==== FOOTER ==== */

    footer .card-columns {
        -moz-column-gap: 2rem;
             column-gap: 2rem;
    }

    header.centralise {
        margin-top: 33px;
        margin-top: var(--margin);
    }

    .contact-form {
        flex-basis: 50%;
    }

    .contact-column {
        flex-basis: 40%;
    }
}

/* Prevent growing bigger than allotted */
@media (min-width: 992px) {

    :root {
        --page-width: 992px;
        --packshot-gap: 20px;
    }
}

@media (min-width: 1200px) {

    :root {
        --page-width: 1200px;
    }

    .packs .pack .wp-post-image {
        width: auto;
        max-height: 200px;
        max-width: 80%;
    }
}


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

    /* ==== FOOTER ==== */
    footer {
        padding: 20px 10px;
        font-size: 1.1rem;
    }

    .home-block .cta {
        margin-bottom: -30px;

    }

    ul.sub-menu li a {
        font-size: 1.6rem;
    }

    .has-text-align-center {
        max-width: 88%;
        margin: auto;
    }

    .page-id-378 .has-text-align-center,
    .page-id-11 .has-text-align-center {
        text-align: left;
    }

    .page-id-378 .has-text-align-center {
        margin-left: 0;
    }

    .page-id-11 h3.has-text-align-center {
        margin: 30px auto -40px;
    }

    .kt-row-column-wrap.kt-has-1-columns.kt-gutter-default.kt-v-gutter-default.kt-row-valign-top.kt-row-layout-equal.kt-tab-layout-inherit.kt-m-colapse-left-to-right.kt-mobile-layout-row {
        /* MARGIN: auto -19px; */
        /* CAUSING OVERFLOW ISSUE */
    }

    .page-id-11 a.cta.btn.left {
        margin-right: auto;
    }

    .page-id-11 .wp-block-button {
        justify-content: left;
        margin-left: 40px;
    }

    .page-id-11 section:last-of-type figure {
        order: 2;
    }

    .page-id-11 section:last-of-type article.home-block-contents {
        order: 1;
    }

    ul.similar-products.products-quantity-3 {
        justify-content: center;
    }

    ul.similar-products.products-quantity-3 .pack:not(:first-of-type) {
        display: none;
    }

    .similar-products .related-product {
        width: 100%;
        max-width: 100%;
    }

    .breadcrumbs ol {
        flex-wrap: wrap;
    }

    .single .product-header {
        flex-wrap: wrap;
        padding: 0px;
    }

    .single .product-header div.text-container {
        padding: 33px;
        padding: var(--margin);
    }
    .single .product-header figure.overflow {
        margin: 0;
        position: relative;
        overflow: hidden;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .single .product-header figure.cropped {
        margin: 0;
        position: relative;
        height: 400px;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }
    .single .product-header img.overflow-bowl {
        position: absolute;
        bottom: -200px;
        right: -200px;
        max-width: 650px;
        width: 180%;
    }

    .single .product-header>* {
        max-width: 100%;
    }


}



/* ANIMATIONS =========================================== */

@-webkit-keyframes Menu-In {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes Menu-In {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* == GLOBAL DROP SHADOWS ========================================= */

/* Text shadow (for use on icons for example) */
figure.is-type-video::after {
    text-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);
}

.map address {
    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);
}

/* latest amends 15.05.2020*/


.page-id-1390 h2.has-text-align-center {
    text-transform: unset;
}

/* EB */
.menu-item-1792 a {
    /* make Weetos clickable */
    pointer-events: auto !important;
}

.menu-item-1795,
.menu-item-1796 {
    /* prevent other submenus from appearing when item does not have one */
    visibility: hidden;
}

.menu-item-1792 a::after {
    /* hide submenu arrow */
    display: none;
}

/* Instagram Feed Override */
@media screen and (max-width: 767px) {

    #sb_instagram.sbi_col_10 #sbi_images .sbi_item,
    #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
    #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
    #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
    #sb_instagram.sbi_col_6 #sbi_images .sbi_item,
    #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
    #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
    #sb_instagram.sbi_col_9 #sbi_images .sbi_item {
        width: 50%;
        /* stack 2 by 2 mobile & tablet */
    }
}




/* -------------- 
Paste the contents of this file at the end of custom.css located in wp-content > themes > weetabix > assets > css 
Nutri-score page 
-------------- */
#nutriscore .content>.wp-block-columns {
    padding: 0 10%;
    margin-top: 0;
}

#nutriscore .wp-block-column {
    flex-basis: 100%;
}

#nutriscore .wp-block-column .home-block {
    min-height: 600px;
}

#nutriscore .wp-block-column:nth-child(2n) {
    margin-left: 0;
}

#nutriscore p,
#nutriscore h2 {
    color: #06901f;
}

#nutriscore .home-block.image-position-fw .home-block-contents {
    top: 50%;
    position: absolute;
}

#nutriscore .home-block-text .wp-block-button {
    margin: 0;
}

#nutriscore .home-block-text p {
    width: 100%;
    font-size: calc(12px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

#nutriscore .wp-block-column:nth-child(1) figure {
    -ms-grid-row-align: end;
    align-self: end;
}

#nutriscore .wp-block-column:nth-child(2) figure {
    -ms-grid-row-align: start;
    align-self: start;
}

#nutriscore .wp-block-column:nth-child(2) article {
    margin-top:30px;
    margin-top: calc(var(--pace) * 2);
}

.nsimg {
    width: 40%;
    /* box-shadow: 0px 0px 21px 6px rgba(0,0,0,0.4); */
}


@media (min-width: 576px) {
    #nutriscore .home-block.image-position-fw .home-block-contents {
        top: 55%;
    }
}

@media (min-width: 767px) {
    .home-block.image-position-fw img.home-block-image {
        max-height: 800px;
    }

    #nutriscore .content>.wp-block-columns {
        padding: 0 10%;
        flex-wrap: nowrap;
    }

    #nutriscore .home-block.image-position-fw .home-block-contents {
        top: 50%;
    }

    .ie#nutriscore .home-block.image-position-fw .home-block-contents {
        top: 55%;
    }

    .nsimg {
        width: 45%;
    }

    #nutriscore .home-block-text p {
        width: 115%;
        font-size: 12px;
    }

    .ie#nutriscore .home-block-text p {
        width: 90%;
        font-size: 12px;
    }
}

@media (min-width: 782px) {
    #nutriscore>main>article>div>div.wp-block-columns>div:nth-child(2) {
        margin-left: 0 !important;
    }
}

@media (min-width: 850px) {
    #nutriscore .home-block-text p {
        width: 115%;
        font-size: 13px;
    }
}

@media (min-width: 994px) {
    .nsimg {
        margin-top: 20px;
    }

    #nutriscore .home-block-text p {
        width: 100%;
        font-size: 14px;
    }
}

@media (min-width: 1200px) {
    .nsimg {
        position: relative;
        left: 0;
    }

    #nutriscore .home-block-text p {
        width: 100%;
    }

    .home-block.image-position-fw img.home-block-image {
        max-height: 1000px;
    }

    #nutriscore .home-block.image-position-fw .home-block-contents {
        top: 52%;
    }

    @-moz-document url-prefix() {

        /* firefox only */
        #nutriscore .home-block-text p {
            font-size: 14px;
        }
    }

    /* end firefox style */
}


/* ie amends */

.ie .contact-details {
    margin-top: 30px;
}

body.ie {
    display: block !important;
}

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

    .ie .nav-item:focus-within .nav-link~.sub-menu,
    .ie .nav-item:focus .nav-link~.sub-menu,
    .ie .nav-item:hover .nav-link~.sub-menu {
        display: block !important;
    }
}

.ie ul.history li:nth-child(even)::after {
    margin-left: 50%;
    transform: translateX(-50%);
}

.ie ul.history li:nth-child(odd)::after {
    margin-left: -50%;
    transform: translateX(-50%);
}

.ie .home-block.image-position-fw .home-block-contents,
.ie .home-block-contents {
    top: 33px;
    left: 33px;
}

.ie .home-block .cta.left {
    margin-bottom: 33px;
}

.ie .single .product-features .features .feature {
    width: 200px;
    height: 96px;
}

.ie .home-block-text p {
    /* width: 35%; */
}

.ie nav.navbar ul.navbar-nav li:hover .sub-menu {
    height: auto;
    visibility: visible;
    /* top:60px; */
    width: auto;
    right: auto;
    left: auto;
}

.ie .home-block.image-position-br img.home-block-image {
    /* right: 20%; */
}

.ie .packshot.wp-post-image {
    top: 50%;
}

.ie .navbar {
    z-index: 999;
}

.ie .navbar .sub-menu {
    z-index: 99;
}

/* overview page IE fixes */
.ie.page-id-381 .home-block:first-of-type {
    /* container  */
    height: 350px;
}

.ie.page-id-381 .home-block.text-position-right .home-block-contents {
    /* article (text) */
    margin-left: 50%;
    width: 50%;
    display: inline-block;
}

.ie.page-id-381 .home-block-title,
.ie.page-id-378 .home-block-title {
    width: 95%;
}

.ie.page-id-381 .home-block-text p,
.ie.page-id-378 .home-block-text:nth-of-type(1) p,
.ie.page-id-378 .home-block-text:nth-of-type(3) p {
    width: 90%;
}

/* philosopy page IE fixes */
.ie.page-id-378 .home-block:nth-of-type(1) {
    /* section 1 container  */
    height: 400px;
}

.ie.page-id-378 .home-block.text-position-right .home-block-contents,
.ie.page-id-491 .home-block.text-position-right .home-block-contents {
    /* section 1 article (text) */
    margin-left: 50%;
    width: 50%;
    display: inline-block;
}

.ie.page-id-378 .home-block.text-position-left .home-block-bg,
.ie.page-id-491 .home-block.text-position-left .home-block-bg {
    width: 50%;
}

.ie.page-id-378 .home-block.text-position-left .home-block-text {
    width: 45%;
}

.ie.page-id-378 .home-block.image-position-tl img.home-block-image {
    width: 100%;
    height: 100%;
}

/* .ie.page-id-378 .home-block-text:nth-of-type(2) p {
    width: 40%;
} */

.ie.page-id-378 .home-block:nth-of-type(2) {
    /* section 2 container  */
    height: 600px;
    /* height: 100%; */
}

.ie.page-id-378 .home-block.slab.image-position-tr.text-position-left.text-color-blue.image-stretch.no-button.has-top-margin.cta-position-center.cta-color-blue figure img {
    top: 0;
}

/* Nutrition page IE fixes */
.ie.page-id-491 .home-block {
    /* container  */
    height: 312px;
}

.ie.page-id-491 .home-block-title {
    width: 93%;
}

.ie.page-id-491 .home-block:nth-child(odd) .home-block-description p {
    width: 90%;
}

.ie.page-id-491 .home-block:nth-child(even) .home-block-description .column p {
    width: 15%;
}

.ie.page-id-491 .home-block.image-position-br:nth-of-type(1) img.home-block-image {
    right: 20%;
}

.ie.page-id-491 .home-block.image-position-br img.home-block-image {
    right: 50%;
}

.ie.page-id-491 .home-block-text:nth-of-type(1) p {
    width: 25%;
}

.ie#nutriscore .home-block-description {
    width: 100%;
}

.ie.page-id-491 .home-block.slab.image-position-tl.text-position-right.text-color-blue.image-stretch.no-button.has-top-margin.cta-position-right.cta-color-blue figure img {
    top: 0;
}

/* contact page IE fix */

.ie.page-id-385 .gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type="submit"] {
    padding: 15px;
}

/* product page IE fix */
.ie .product-features .features .feature {
    height: 75px;
}

.ie section.product-pairing.slab {
    width: 100%;
    padding: 0;
    height: 350px;
}

.ie section.product-pairing.slab div.pairing-group {
    max-height: 350px;
    height: 100%;
}
.ie section.product-pairing.slab div.pairing-group figure img {
    height: 100%;
}

.ie section.related-products ul.packs.add-slider,
.ie section.related-recipes ul.recipe-cards {
    align-items: center;
    -ms-flex-align: center;
}

.ie section.related-products ul.packs.add-slider ul.slick-dots,
.ie section.related-recipes ul.recipe-cards ul.slick-dots {
    right: 0;
    left: 50%;
    transform: translate(-50%);
}

.ie section.hero-block article.home-hero-block-contents div.home-block-text > p {
    width: 100%;
    max-width: 80%;
}

.ie div.home-block-contents {
    width: 50%;
}

.ie .home-block-contents div.home-block-text {
    width: 100%;
}


.ie section.home-block.slab figure.home-block-bg  {

}
.ie section.home-block.slab.image-position-or figure.home-block-bg img.home-block-image,
.ie section.home-block.slab.image-position-ol figure.home-block-bg img.home-block-image    {
    max-height: 650px;
    max-width: 130%;
    width: 80%;
    float: none;
    height: auto;
}

.ie section.home-block.slab.image-position-ol figure.home-block-bg img.home-block-image {
    width: 130%;
    width: 130%;
    bottom: 0;
    max-height: 750px;
}

.ie section.home-block.slab.text-position-left article {
    width: 50%;
    align-self: flex-start;
    top: 0px;
    right: 0px;
    left: 0px;
}
.ie section.home-block.slab.text-position-right article {
    width: 50%;
    align-self: flex-end;
    top: 0px;
    right: 0px;
    left: 0px;
}


.ie section.had-yours h1,
.ie footer div.right-column div.social-container h4 {
    text-transform: capitalize;
}

.ie main#recipe-page ul.recipe-cards {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}


.ie main#recipe-page ul.recipe-cards li.card {
    flex-basis: 33%;
    border: none !important;
}

.ie main#recipe-page ul.recipe-cards li.card figure img.card-img-top {
    width: 100%;
    height: 225px;
}


.ie #recipe section.recipe-header figure.message {
    width: 50%;
}
.ie #recipe section.recipe-header figure.recipe-image-container img {
    max-height: none;
    bottom: -200px;
}

.ie #recipe section.recipe-header div#recipe-ingredients {
    background: #fff;
    align-items: baseline;
    padding: 0px;
}


.ie #recipe section#recipeProduct {
    background-size: cover !important;
    background-repeat: no-repeat;
}


.ie #recipe section.related-recipes ul.recipe-cards li.card {
    display: block;
    width: auto;
    height: auto;
    margin: 0 14px;
}

.ie #recipe section.related-recipes ul.recipe-cards li.card img {
    width: auto;
    height: auto;
}

.charity .home-block-text img {
    width: 32%;
    max-height: 50px;
    -o-object-fit: contain;
       object-fit: contain;
    margin-top: -30px;
}

.charity {
    border: 2px solid;
}

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

.cta-position-center h1 {
    text-align: center;
}

@media screen and (min-width: 1024px){
section.hero-banner {
    min-height: 550px;
}
}

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

section.hero-banner {
    min-height: 500px;
}
}

.features-info ul {
    display: flex;
    flex-wrap: wrap;
}

.features-info li span.feature_text {
    max-width: 80px;
}

.features-info li span.main {
    width: 100%;
    text-align: center;
    margin-top: 30px;
}
.features-info li {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: baseline;
    text-transform: uppercase;
    font-weight: 700;
}
.features-info li {
    flex: 1 1;
}

img.feature-tick {
    max-width: 78px;
}

.single .home-block-text.home-block-description{
margin: auto;
    margin-bottom: 33px;
    margin-bottom: var(--margin);
    padding-left: 33px;
    padding-left: var(--margin);
    padding-right: 33px;
    padding-right: var(--margin);
    max-width: 80ch;
    text-align: center;

}

section.specific_products {
    display: flex;
    flex-wrap: wrap;
}

section.specific_products article * {
    flex: 1 1 50%;
}

section.specific_products article .product_details .product-title {
    margin: 0 0 10px 0;
}
section.specific_products article .product_details .product-sub-title {
    font-size: 2rem;
    font-weight: 500;
}
section.specific_products article .product_details .available-size {
    font-weight: 800;
}

section.specific_products article {
    flex: 1 1 50%;
    min-width: 290px;
    display: flex;
}

.sector_div a {
    width: 225px;
}

.sector_div img {
    width: 180px;
    margin-bottom: 20px;
}
.sector_div {
    text-align: center;
}

.wp-block-kadence-rowlayout.alignnone {
    max-width: 88%;
    margin: auto;
}

.fancybox img.download_image {
    width: 60vw;
    max-height: 100%;
    max-width: 70%;
}

.button-bottom {
    text-align: center;
    margin-top: 30px;
}

.fancybox{
    text-align:center;
}

.sector_div img.sector_image,
a.navbar-brand img,
.download_aid img {
    transition-duration: 0.35s;
}

.sector_div:hover img.sector_image {
    transform: scale(1.2);
}

a.navbar-brand:hover img,
.download_aid:hover img{
    transform: scale(1.07);
}

.page-child .hero-banner {
    margin-bottom: 50px;
}

article.home-block-contents.products {
    justify-content: center;
        align-items: center;
}

@media screen and (min-width: 990px) {
    article.home-block-contents.products {
        flex-direction: row;
    }
}

article.home-block-contents.products img {
    width: calc(50% - 20px);
    margin-right: 20px;
 /*   max-width: 440px;*/
    max-height: 220px;
    -o-object-fit: contain;
       object-fit: contain;
    height: auto;
}


.product_details {
    max-width: 300px;

}

.light_text .product_details{
       color: #fff; 
}

article.home-block-contents.products {
    min-height: 380px;
    height:380px;
}

section.want_to_know_more.home-block h1.home-block-text.home-block-title {
    font-size: 7rem;
}

.want_to_know_more .home-block-text.home-block-description {
    margin-bottom: 0;
}

article.home-block-contents.products.centred {
    text-align: center;
}

article.sectors-we-serve-child div.content div.wp-block-image{
    margin: 75px 0 0 0;
}

article.sectors-we-serve-child div.content section.home-block.text-position-center{}
article.sectors-we-serve-child div.content section.home-block article.home-block-contents p:last-of-type {
    margin-bottom: 0;
}
article.sectors-we-serve-child div.content section.home-block article.home-block-contents p:first-of-type {
    margin-bottom:30px;
    margin-bottom: var(--margin);
}

article.sectors-we-serve-child div.content section.home-block.text-position-center article.home-block-contents {
    margin: 0 auto;
}

article.sectors-we-serve-child div.content section.text-position-left figure.home-block-bg {
    display: flex;
    justify-content: center;
}
article.sectors-we-serve-child div.content section.text-position-left figure.home-block-bg img.home-block-image{
    position: relative;
    -o-object-fit: scale-down;
       object-fit: scale-down;
    max-width: 350px;
}


article.sectors-we-serve-child div.content section.product-packshots{
    padding:30px;
    padding: calc(var(--margin)*2) calc(var(--margin));
}
article.sectors-we-serve-child div.content section.product-packshots ul.packs{
    display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: row wrap;
    /* gap: 40px 20px; */
    gap: 60px 40px;
    margin: 0;
    padding: 0;
}
article.sectors-we-serve-child div.content section.product-packshots ul.packs li.pack{
    display: flex;
    justify-content: center;
    margin: 0;
    width: 100%;
    max-width: unset;
}
article.sectors-we-serve-child div.content section.product-packshots ul.packs li.pack a.pack-link{
    /* max-width: 275px; */
    max-width: 250px;
    gap: 30px;
    min-height:350px;
}
article.sectors-we-serve-child div.content section.product-packshots ul.packs li.pack a.pack-link img{
    width: 100%;
    max-height: unset;
    max-width: 100%;
    margin: 0;
}
article.sectors-we-serve-child div.content section.product-packshots ul.packs li.pack a.pack-link h6{
    /* margin: 20px auto 0 auto; */
    margin: 0;
    width: 100%;
}
@media(min-width: 1200px) {
    article.sectors-we-serve-child div.content section.product-packshots{
        padding:30px;
        padding: calc(var(--margin)*2) calc(var(--margin)*3);
    }
}

main.product section.specific_products article.home-block-contents.product-force-fullwidth {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
    gap: 40px;
}

main.product section.specific_products article.home-block-contents picture {
    display: flex;
    align-items: center;
    justify-content: center;
}
main.product section.specific_products article.home-block-contents img {
    margin: 0;
    width: auto;
    max-height: 180px;
    filter: drop-shadow(0px 6px 9px rgba(50, 50, 0, 0.5));
}
main.product section.specific_products article.home-block-contents.product-force-fullwidth div.product_details {
    width: 100%;
    max-width: unset;
}
main.product section.specific_products article.home-block-contents.product-force-fullwidth div.product_details h2 {
    font-size: 2.9rem;
}
@media(min-width: 375px) {
    main.product section.specific_products article.home-block-contents.product-force-fullwidth {
        gap: 40px;
    }
    main.product section.specific_products article.home-block-contents.product-force-fullwidth img {
        -ms-grid-column-align: end;
            justify-self: end;
        max-height: 275px;
    }
}

section.home-block.charity article.home-block-contents div.home-block-description p {
    gap: 10px;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
section.home-block.charity article.home-block-contents div.home-block-description p img {
    -o-object-fit: scale-down;
       object-fit: scale-down;
    max-width: 100px;
    max-height: 100px;
    width: auto;
    margin: 0;
}

ul#mega-menu-4223 div.widget_text.widget-quantity-2.menu-widget,
ul#mega-menu-4223 h5.sub-title.cereals {
    opacity: 0;
}


section.home-block article.home-hero-block-contents,
section.home-block article.home-block-contents {
    margin: 0;
}
section.home-block article.home-hero-block-contents .home-block-text.home-block-description,
section.home-block article.home-block-contents .home-block-text.home-block-description {
    margin: 0 auto;
}
section.home-block article.home-hero-block-contents .home-block-text.home-block-description p:last-of-type,
section.home-block article.home-block-contents .home-block-text.home-block-description p:last-of-type {
    margin: 0;
}
@media screen and (min-width: 768px) {
    section.home-block article.home-block-contents {
        margin-left:30px;
        margin-left: var(--margin);
    }   
} 

@media screen and (min-width: 1024px) {
    section.home-block article.home-block-contents {
        margin-left:45px;
        margin-left: calc(var(--margin) * 1.5);
    }   
} 
/* Overrides */
div.downloads_ h2.download_title {
    display: none;
}

div.downloads_ img.download_image {
    margin-bottom:30px;
    margin-bottom: var(--margin);
}

.align-list-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap;
}

.align-text-center * {
    text-align: center !important;
}


body.single section.hero-banner.custom-product-hero,
body.single section.hero-banner.custom-product-hero div.image-control {
    display: flex;
    align-items: center;
    justify-content: center;
}
body.single section.hero-banner.custom-product-hero {
    padding: 33px 0;
}

body.single section.hero-banner.custom-product-hero div.image-control figure.packshot {
    display: flex;
    -o-object-fit: contain;
       object-fit: contain;
    align-items: center;
    justify-content: center;
    flex-flow: row nowrap;
}
body.single section.hero-banner.custom-product-hero div.image-control figure.packshot img.pack { 
    width: 60%;
    max-width: 250px;
    max-height: 350px;
    filter: drop-shadow(0px 6px 9px rgba(50, 50, 0, 0.5));
}
body.single section.hero-banner.custom-product-hero div.image-control figure.packshot img.repeated {
    transform: scaleX(-1);
}
body.single section.hero-banner.custom-product-hero div.image-control figure.packshot img.background-layer {
    width: 20%;
}

body.single section.specific_products article.home-block-contents {
    height: unset;
}
body.single section.specific_products div.product_details {
    margin-top: 15px;
}
@media screen and (min-width: 990px) {
    body.single section.specific_products div.product_details {
        margin-top: 0px;
    }
}
/* Info Graphics */
section.infographics {
    background: #FFD100;  
    padding: 30px 0; 
    padding: var(--margin) 0;
    margin-top: var(--margin);
}
section.infographics .features-info ul {
    margin-bottom: 0;
    padding: 0;
    gap: calc(var(--margin) / 2);
    width: 100%;
}

section.infographics figure.gda {
    max-width: 275px;
    margin: auto;
}

section.infographics .features-info span.main {
    font-family: "Microbrew Three";
    font-size: 3.5rem;
    line-height: 1;
    font-weight: 400;
}
section.infographics .features-info span.main p {
    font-size: 2rem;
}

section.infographics div.astrix-copy {
    text-align: center;
    font-size: 12px;
    width: 80%;
    margin: 33px auto 0;
}

section.want_to_know_more article {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
}

div.content div.kt-inside-inner-col div.sector_div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

section.home-block.slab.align-text-center article h1 {
    margin-left: auto !important;
    margin-right: auto !important;
}

section.latest_news {
    background-color: #e9e5f1;
    padding:33px;
    padding: var(--margin);
}

section.latest_news .latest_widget {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
}

section.latest_news .latest_widget img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    max-height: 300px;
}


section.latest_news .latest_widget article.news_contents h1 {
    margin-top: 10px;
}
section.latest_news .latest_widget article.news_contents > p {
    margin-bottom: 10px;
}

div.content div.latest-posts div.home-block article {
    margin: 0;
}


/* Text Block */
section.text-block {
    text-align: center;
}

section.text-block h2 {
    margin-bottom: 0;
}

section.text-block .container {
    max-width: 80ch;
    padding:33px;
    padding: var(--margin);
    margin: 0 auto;
}

section.text-block .container h1 {
    font-size: 5rem;
}


@media screen and (min-width: 768px) {
    section.latest_news {
        padding:33px;
        padding: calc(var(--margin) * 2);
    }
    section.latest_news .latest_widget {
        align-items: stretch;
        flex-flow: row nowrap;
    }
    section.latest_news .latest_widget img {
        width: 275px;
        max-height: 275px;
    }
    section.latest_news .latest_widget article.news_contents {
        flex: 1;
        margin-left: 30px;
    }
    div.content div.latest-posts div.home-block figure img {
        height: 100%;
    }
    div.content div.latest-posts div.home-block article {
        margin-left:50%;
        margin-left: calc((1% * var(--width)) + var(--pace) * var(--padding-left));
    }

}

@media screen and (min-width: 1024px) {
    section.latest_news {
        padding:77px;
        padding: calc(var(--margin) * 2.5);
    }
    section.text-block .container h1 {
        font-size: 6rem;
    }
    section.infographics div.features-info {
        display: flex;
        align-items: center;
        flex-flow: row nowrap;
        padding: 0 33px;
        padding: 0 var(--margin);
    }
    section.infographics div.features-info ul {
        flex-flow: row nowrap;
    }
}


/* FROM CUSTOMISE ADDITIONAL CSS - STOP DOING THIS! */

.single h6.cta.btn span {
    display: none;
}
img.packshot.wp-post-image {
    z-index: 9;
}
.breadcrumbs ol a {
    z-index: 99;
    position: relative;
}
.product-header:after{
    background-repeat:no-repeat;
    bottom: 0;
    top: auto;
    background-position: bottom!important;
}

html .page-id-447 a.cta {
    margin: 20px 0 10px;
}

p.stockists {
    max-width: 680px;
    margin: auto;
}

.downloads_ .download_aid > * {
    width: 100%;
}

.downloads_ .download_aid {
    min-width: 250px;
    display: flex;
    justify-content: center;
    flex: 1 1 33%;
    max-width:350px
}
.downloads_ {
    display: flex;
    flex-wrap: wrap;
        justify-content: center;
}
.filters .kt-inside-inner-col div {
    margin: 0 5px;
}

.filters .kt-inside-inner-col {
    display: flex;
    justify-content: center;
}

.facetwp-pager {
    display: flex;
    justify-content: center;
}

.sectors-we-serve-child section.home-block img {
    webkit-filter: drop-shadow(0px 6px 9px rgba(50, 50, 0, 0.5));
    filter: drop-shadow(0px 6px 9px rgba(50, 50, 0, 0.5));
}

.panel.panel-default h6 {
    font-family: 'Lato', CenturyGothic, AppleGothic, sans-serif;
}

.download_aid a:first-of-type {
    min-height: 340px;

}


.postid-3594 img[src="https://weetabixb2b.honeydigital.co.uk/wp-content/uploads/2021/02/Weetabix-Chocolate-2-Biscuits-2021.jpeg"] {
    border: 34px solid transparent;
}

.serving::after,.servingdark::after {
    content: "*serving suggestion";
    position: absolute;
    right: 10px;
    bottom: 10px;
     color: #fff; 
}

.serving, .servingdark {
    position: relative;
}

.servingdark::after{
    color:#27006f;
}

.facetwp-type-fselect .fs-option .fs-option-label {
    white-space: normal!important;
}

.ie *{
    object-fit:cover;
}

ul.stockists-list li{
    overflow:hidden!important;
}

body.ie>main{
    margin-top:0;
}

.postid-3594 article.home-block-contents.products.light_text.product-force-fullwidth img {
    border: 5vh solid transparent;
}

/***Content adjustments to be like other Weetabix sites***/
article .content>p, article .content>ul, article .content>ol{
    margin-bottom: 1rem;
    padding: 0rem 1rem;
    max-width: 65vw;
}

article .content .wp-block-table, article .content table{
    border-collapse: collapse;
    max-width: 65vw;
    margin: 0 auto 16px;
}

article .content .wp-block-table .has-fixed-layout td, article .content .wp-block-table .has-fixed-layout th, article .content table td, article .content table th{
    padding: 0.5rem;
    border: 1px solid;
}