/*

COLOUR REFERENCES

Yellow: #FEDD32
Light Blue : #007bff
Navy Blue: #23256E
Red: #EE251A
Off white: #F6F0ED
Darker Off white: #DED9D6
Grey: #DDD8D6
Pink : #D65399
White: #FFFFFF
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;
}

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

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

h1 {
    font-size: 4rem;
}

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

    section{
        margin:0;
        padding: 0;
    }

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

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

    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, */
    .slab + .slab{
        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: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: 60ch;
    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: #23256E;
    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;
}
/* Full width image for header */
header img{
    display: block;
    width:100%;
    height: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;
}

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

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

a p{

}

a p,
a h1,
a h2,
a h3,
a h4,
a h5,
a h6{
    color:#23256E;
    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:#23256E;
}
.text-color-yellow{
    color:#FEDD32;
}
.text-color-white{
    color:#F6F0ED;
}
.text-color-black{
    color:#000;
}

/* Fancy background */
.gradient{
    background-image: linear-gradient(to bottom, #F6F0ED, #F6F0ED 60%, #DED9D6 40%, #F6F1ED);
    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: #23256E;
}
.accordion-section h5{
    text-transform: unset;
    padding-bottom:6px;
}

.accordion-section:nth-child(odd){
    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: #23256E;
}

/* Close Icon */
.accordion-section .panel-title a:after {
    font-family: 'FontAwesome';
    font-style: normal;
    font-size: 2rem;
    content: "\f106";
    color: inherit;
    /* 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: #23256E;
}
/* ==== 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-color:#FEDD32;
    background-image:linear-gradient(to bottom, #FEDD32, #D8AE16);
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    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 {
  font-weight: 900;
}

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



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

.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:calc( 33px * 2);
    margin-bottom:calc( var(--margin) * 2);
    order:-1;

} 

.product-description p{

}

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

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

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

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

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

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

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

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

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





@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-left: calc( 2 * 33px);
     padding-left: calc( 2 * var(--margin));
 }

 .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: space-between;
    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;
    max-width:100%;

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

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

/* 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 */
        align-items: flex-end;
        justify-content: center;
    }

    .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) );
            width:100%;
            flex-basis: calc(25% - var(--packshot-gap) );
        }

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


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

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

.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{
    
    padding:4px;
    
    display: -ms-flexbox;
    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));

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

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

/* 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;
    align-self:center;
    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;
}

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

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

    .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{
        align-self: center;
    }

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

    .home-block .cta.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: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%;
}
.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: 23px;
  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: 400px;
    /* 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: #23256E;
    color: #FFF;
    padding: 60px 0;
}

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

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: 600;
    margin-bottom: 15px;
}

footer .card-columns {
    column-count: 2;
    column-gap: 0;
}


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

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

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

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

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

    footer .card-columns {
        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: 255px;
      max-width: 100%;
  }
}


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

.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: 40px;

}

.single .product-header img {
    --gap: calc( 33px / 2 );
    --gap: calc( var(--margin) / 2 );
    order: 1;
    position: relative;
    z-index: 0;
    top: -50px;
    left: 50%;
    transform: scale(0.6) translateX(-90%);
    max-height: initial;
    width: auto;
    height: auto;
    min-height: 300px;
    max-width: unset;
    min-width: 71px;
    margin-bottom: -120px;
        object-fit: contain;

}

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


}



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

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

/* -------------- 
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{
    align-self: end;
}

#nutriscore .wp-block-column:nth-child(2) figure{
    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%; 
        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,
.ie.page-id-378 .home-block,
.ie.page-id-491 .home-block {
    /* section */
    padding: 4px;
    display: -ms-flexbox;
    flex-direction: column;
    align-items: flex-start;
}

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