: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;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase;
}

/* h1 {
  font-size: 6rem;
}

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); */
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
  -webkit-column-span: all;
  -moz-column-span: all;
  column-span: all;
  -webkit-column-gap: 33px;
  -moz-column-gap: 33px;
  column-gap: 33px;
  -webkit-column-gap: var(--margin);
  -moz-column-gap: var(--margin);
  column-gap: var(--margin);
  -webkit-column-count: 2;
  -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: */

.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 {
  padding-bottom: 33px;
  padding-bottom: var(--margin);
  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);
}

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

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

/* Columned content */
.wp-block-group.columns div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  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.copy-template {
  margin: 49.5px auto;
  margin: calc(var(--margin) * 1.5) auto;
  max-width: 950px;
}

.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: 75vw; */
  margin: auto;
  margin-bottom: 33px;
  margin-bottom: var(--margin);
}

.content > h1 {
  font-family: "Microbrew Three";
  font-size: 5rem;
}

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

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

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

/* 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-family: FontAwesome;
  font-size: 650%;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: 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: -o-linear-gradient(top, #fff, #fff 30%, #ffd100);
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#fff),
    color-stop(30%, #fff),
    to(#ffd100)
  );
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  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;
  -webkit-transition: -webkit-transform 200ms ease-out;
  transition: -webkit-transform 200ms ease-out;
  -o-transition: transform 200ms ease-out;
  transition: transform 200ms ease-out;
  transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
}

/* Opened so close
.accordion-section .panel-title a.collapsed:after {
    content: "\f107";
}
*/
.accordion-section .panel-title a.collapsed:after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  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: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ffed99),
    to(#ffd100)
  );
  background: -o-linear-gradient(#ffed99, #ffd100);
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  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;
}

.product-header h1 {
  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);
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: 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;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.product-features .features .feature span.feature_text {
  width: 90px;
  color: #270070;
  text-align: left;
  -webkit-transform: translateX(37px);
  -ms-transform: translateX(37px);
  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;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-line-pack: justify;
  align-content: space-between;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  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 {
}
/* tablepress code */
.tablepress>:where(tbody.row-striping)>:nth-child(even)>*{
  background-color: #E7F1F3 !important;
}

/* Nutritional data in a table */
.product-nutrition table {
  width: 100%;
  font-size: 15px;
}

/* 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: #E7F1F3;
}

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

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

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

.product-features {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
}

.product-features > img {
  margin-bottom: 33px;
  margin-bottom: var(--margin);
}
.product-features ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  margin: 0;
}
.product-features ul li {
  width: auto;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  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: "filson-pro", sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: normal;
  color: #fff;
}

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

.product-features ul li span p {
}

@media screen and (min-width: 768px) {
  .product-features {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    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%;
    -ms-flex-pack: distribute;
    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;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    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: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: end;
    -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  /* Wrap for smaller sizes */
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

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

  -ms-flex-negative: 1;

  flex-shrink: 1;
  -webkit-box-flex: 1;
  -ms-flex-positive: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}

.product-packshots .packs .pack .pack-link .cta {
  margin-top: auto;
  -webkit-box-ordinal-group: 1000;
  -ms-flex-order: 999;
  order: 999;
  padding-left: 9px;
  padding-right: 9px;
  display: inline-block;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  min-width: 200px;
  margin-top: 10px;
  -webkit-box-sizing: border-box;
  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%; */
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  background: #fff;
}

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

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  /* align-items: center; */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
}

section.stockist-section div.stockist-control div.stockist-text-container {
  text-align: left;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}

section.stockist-section div.stockist-control div.stockist-image-container {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  margin-top: 33px;
  margin-top: var(--margin);
}

section.product-pairing div.item-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  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;
  -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));
}
section.product-pairing div.item-group figure 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));
}
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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

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 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    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 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    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 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }

  section.product-pairing div.item-group {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: distribute;
    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 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }

  section.stockist-section div.stockist-control div.stockist-text-container {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    width: 60%;
  }

  section.stockist-section div.stockist-control div.stockist-image-container {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    width: 40%;
  }

  section.stockist-section ul.stockists {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

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

/* Soya Free Products FAQ */
section.soya-free-products {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  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 {
  -webkit-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  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 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    /* Fit all on one line */
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    /* Align to bottom */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    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: calc(25% - var(--packshot-gap)); */
    max-width: calc(25% + var(--packshot-gap));
    width: 100%;
    -ms-flex-preferred-size: calc(25% - var(--packshot-gap));
    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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}

section.related-products ul.packs.add-slider {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

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;
  -webkit-box-shadow: unset;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  margin: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -ms-flex-wrap: nowrap;

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

.similar-products .related-product a img {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  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: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  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-bottom: 33px;
  padding-bottom: var(--margin);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;

  -webkit-box-align: start;

  -ms-flex-align: start;

  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;

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

@media screen and (min-width: 768px) {
  .home-block-contents {
    padding: 33px;
    /* 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; */
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  max-width: 100%;
  max-height: 100%;
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  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 {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: inline-block;
  /* This should sit at the bottom middle unless overwritten... */
  justify-self: flex-end;
  margin-top: auto;
  /* 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: -webkit-box;

  display: -ms-flexbox;

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

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  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%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .home-block.image-position-or figure.home-block-bg img.home-block-image {
    width: 130%;
    right: -30%;
    top: unset;
  }
  .ie .home-block.image-position-or figure.home-block-bg img.home-block-image {
    width: 130%;
    right: -30%;
    top: 0;
  }

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

/* When there is no image to scale the block to... */
.home-block.no-image .cta {
  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 {
    -webkit-box-align: center;
    -ms-flex-align: center;
    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%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-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%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(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: calc(100% - 1% * var(--width));
    right: auto;
    left: 0;
  }

  .home-block.text-position-left .home-block-bg {
    width: 100%;
    max-width: calc(100% - 1% * var(--width));
    left: auto;
    right: 0;
  }
  .ie .home-block.text-position-left .home-block-bg {
    width: 50%;
  }
  /*  */
  .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 {
    -ms-flex-item-align: start;
    align-self: flex-start;
  }

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

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

  .home-block .cta.stretch {
    -ms-flex-item-align: 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: 644px;
    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: 644px;
    margin-left: calc((1% * var(--width)) + var(--pace) * var(--padding-left));
  }

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

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

  /* IE */
  .ie .home-block.text-position-right,
  .ie .home-block.text-position-left {
    width: 100%;
  }
  .ie .home-block.text-position-right .home-block-contents {
    margin-left: 475px;
    width: 50%;
  }
  .ie .home-block figure.home-block-bg {
    width: 50%;
  }

  .ie .home-block.text-position-left .home-block-contents {
    margin-right: 475px;
    width: 50%;
  }
}

/* === HISTORY ================================================= */
ul.history {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #f7f0ed;
}

ul.history li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  background-color: #f7f0ed;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  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;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

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

ul.history li img {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    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;
    -webkit-box-sizing: content-box;
    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;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }
}

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

.contact-details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  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%;
}

.contact-form .gform_wrapper .top_label input.medium,
.gform_wrapper .top_label select.medium {
  width: calc(80% - 8px) !important;
}

.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 {
  line-height: 2;
  height: 2em;
}

.gform_wrapper
  input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not(
    [type="button"]
  ):not([type="image"]):not([type="file"]) {
  line-height: 2;
  height: 2em;
  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 {
  margin: 10px auto;
}

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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

/* ==== 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  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: bolder;
  margin-bottom: 15px;
}

footer div.container div.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: unset;
}

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

footer div.container div.row div.right-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  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: bold;
  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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
}

@media screen and (min-width: 768px) {
  footer div.container div.row div.right-column {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-preferred-size: 45%;
    flex-basis: 45%;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  footer div.container {
    max-width: 800px;
  }

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

  footer ul#menu-footer.card-columns {
    -webkit-column-count: 2;
    -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 {
    -webkit-column-gap: 2rem;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
  }

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

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

  .contact-column {
    -ms-flex-preferred-size: 40%;
    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 {
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    margin-left: 40px;
  }

  .page-id-11 section:last-of-type figure {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }

  .page-id-11 section:last-of-type article.home-block-contents {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  ul.similar-products.products-quantity-3 {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    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 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .single .product-header {
    -ms-flex-wrap: wrap;
    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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .single .product-header figure.cropped {
    margin: 0;
    position: relative;
    height: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: end;
    -ms-flex-pack: 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;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

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

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

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    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 {
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11),
    0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11),
    0 8px 8px rgba(0, 0, 0, 0.11), 0 16px 16px rgba(0, 0, 0, 0.11),
    0 32px 32px rgba(0, 0, 0, 0.11);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11),
    0 4px 4px rgba(0, 0, 0, 0.11), 0 8px 8px rgba(0, 0, 0, 0.11),
    0 16px 16px rgba(0, 0, 0, 0.11), 0 32px 32px rgba(0, 0, 0, 0.11);
}

/* 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 {
  -ms-flex-preferred-size: 100%;
  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-flex-item-align: end;
  -ms-grid-row-align: end;
  align-self: end;
}

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

#nutriscore .wp-block-column:nth-child(2) article {
  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%;
    -ms-flex-wrap: nowrap;
    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 .packs .pacl .wp-post-image {
  max-width: 90% !important;
}

.ie main#recipe-page ul.recipe-cards li.card a {
  width: 100%;
}

.ie figure.home-hero-figure {
  height: 100%;
}

.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%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.ie ul.history li:nth-child(odd)::after {
  margin-left: -50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-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 {
  -webkit-box-align: center;
  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%;
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-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: 130%;
  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%;
  -ms-flex-item-align: start;
  align-self: flex-start;
  top: 0px;
  right: 0px;
  left: 0px;
}
.ie section.home-block.slab.text-position-right article {
  width: 50%;
  -ms-flex-item-align: end;
  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 {
  -ms-flex-preferred-size: 33%;
  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;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  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;
}

.gda {
  width: 10%;
}