@charset "utf-8";

/*@import 'design23/variables.css';*/
/*@import 'design23/resets.css';*/
/*@import 'design23/kff-styles.css';*/
/*@import 'design23/buttons.css';*/
/*@import 'design23/header.css';*/
/*@import 'design23/slider.css';*/
/*@import 'design23/forms.css';*/

:root {
    /* Colors */

    /* === KFF OLD colours ===
	.primary-blue			{color:#273a86;}
	.dark-blue				{color:#1b285f;}
	.medium-blue			{color:#d4d8e7;}
	.light-blue				{color:#e9ebf3;}
	.primary-orange			{color:#f05f20;}
	.secondary-green		{color:#28afb0;}
	.text-grey				{color:#666666;}
	.text-red				{color:#e51c20;}
    */

    /* new */
    --main-text-color: #001E3D;
    --color-new-kff-primary-blue: #0087C6;
    --new-kff-blue-tint: #007AB2;
    --new-kff-blue-light-tint: #E6F3F9;
    --kff-green: #74AF27;
    --kff-green-tint: #689E23;
    --kff-green-link: #90BF52;
    --dark-blue-tint: #99A5B1;
    --black-color-262626: #262626;
    --white-color-ffffff: #ffffff;
    --menu-bg-color-f4f5f6: #F4F5F6;

    --color-primary-blue: var(--color-new-kff-primary-blue); /* #273a86 => #0087C6; */


    --color-dark-blue: var(--main-text-color); /*#1b285f;*/
    --color-medium-blue: #d4d8e7;
    --color-light-blue: #e9ebf3;

    --color-primary-orange-second: var(--color-new-kff-primary-blue); /*#e94700;*/
    --color-primary-orange-main: var(--color-new-kff-primary-blue); /* #f05f20 => #0087C6*/
    --color-primary-green: #23e51c;
    --color-secondary-green: #28afb0;
    --text-color-grey: #666666;
    --text-color-red: #e51c20;
    --color-purple-4d2a67: #4d2a67;
    --color-blue-52619e: #52619e;
    --color-grey-858384: #858384;
    --color-light-gray: #f5f5f5;
    --color-tawny-cloud: var(--color-new-kff-primary-blue); /* #f9bfa6; */

    --border-color-blue: var(--color-blue-52619e);

    /* button colors */
    --btn-primary-blue-color: var(--color-new-kff-primary-blue);

    --btn-kff-green-color: var(--kff-green);
    --btn-green-color: var(--kff-green);
    --btn-hover-green-color: var(--kff-green-tint);
    --btn-active-green-color: var(--kff-green-tint);


    --btn-blue-color: var(--btn-primary-blue-color); /*#17286f;*/
    --btn-blue-gradient-start: var(--btn-primary-blue-color); /*#17286f;*/
    --btn-blue-gradient-end: var(--btn-primary-blue-color); /*var(--color-blue-52619e);*/
    --btn-hover-blue-color: var(--btn-primary-blue-color); /*#12205f;*/
    --btn-hover-blue-gradient-start: var(--btn-primary-blue-color); /*#12205f;*/
    --btn-hover-blue-gradient-end: var(--btn-primary-blue-color); /*#445392;*/
    --btn-active-blue-color: var(--btn-primary-blue-color); /*#445392;*/
    --btn-active-blue-gradient-start: var(--btn-primary-blue-color); /*#445392;*/
    --btn-active-blue-gradient-end: var(--btn-primary-blue-color); /*#12205f;*/

    --btn-orange-color: var(--color-new-kff-primary-blue); /*#db4b0d;*/
    --btn-orange-gradient-start: var(--color-new-kff-primary-blue);/*#db4b0d;*/
    --btn-orange-gradient-end: var(--color-new-kff-primary-blue);/*#f37f4d;*/
    --btn-hover-orange-color: var(--color-new-kff-primary-blue);/*#d74405;*/
    --btn-hover-orange-gradient-start: var(--color-new-kff-primary-blue);/*#d74405;*/
    --btn-hover-orange-gradient-end: var(--color-new-kff-primary-blue);/*#f27139;*/
    --btn-active-orange-color: var(--color-new-kff-primary-blue);/*#e26f3e;*/
    --btn-active-orange-gradient-start: var(--color-new-kff-primary-blue);/*#e26f3e;*/
    --btn-active-orange-gradient-end: var(--color-new-kff-primary-blue);/*#c8430a;*/

    --btn-grey-color: #cfcfcf;
    --btn-grey-gradient-start: #cfcfcf;
    --btn-grey-gradient-end: #f5f5f5;
    --btn-hover-grey-color: #c5c5c5;
    --btn-hover-grey-gradient-start: #c5c5c5;
    --btn-hover-grey-gradient-end: #ebebeb;
    --btn-active-grey-color: #ebebeb;
    --btn-active-grey-gradient-start: #ebebeb;
    --btn-active-grey-gradient-end: #c5c5c5;

    --border-color-c4c4c4: #c4c4c4;
    --input-text-color: #444444;
    --text-color-a9b0cf: #A9B0CF;
    --text-color-444: #444444;

    --disabled-color: #8295a8;
    --breadcrumb-color: #8295a8;

    --border-grey-color: #D9DDE0;

    --error-color: #de4949;
    --required-indicator-color: var(--error-color);
    --success-color: #3c763d;


    --cookie-banner-background: #f1f1f1;
    --cookie-close-btn-color: #444444;

    --color-honeycomb-cream: #ffefe6;
    --account-page-warning-orange-bg-color: var(--new-kff-blue-light-tint);
    --account-page-warning-orange-border-color: var(--color-primary-blue);
    --account-page-warning-blue-bg-color: #273A861A;
    --account-page-warning-blue-border-color: var(--text-color-a9b0cf);
    --account-page-warning-grey-bg-color: #F5F5F5;
    --account-page-warning-grey-color: var(--color-grey-858384);

    --promotions-section-button-hover-bg-color: #bec4db;
    --promotions-section-button-hover-border-color: #bec4db;

    --best-sellers-border-color: #5a4099;
    --best-sellers-bg-color: #5a4099;

    --overlay-button-hover-bg-color: var(--color-purple-4d2a67);


    --color-red: #FF0000;
    --color-black: #000000;
    --color-silver: #e1e1e1;
    --color-celestial-silver: #d7d7d7;
    --color-sapphire: #00377F;
    --color-midnight-gray: #333132;
    --color-minty-green: #00AD6F;

    --color-red-db484e: #db484e;


    --sale-ribbon-top-color: var(--color-red-db484e);
    --sale-ribbon-bottom-color: #a9262a;
    --sale-ribbon-text-bg-color: var(--color-red-db484e);

    --offcanvas-dropdown-view-all-color: var(--color-minty-green);
    --offcanvas-dropdown-heading-color: var(--color-midnight-gray);

    --outstanding-invoices-border-color: #CCCCCC;

    --reviews-header-border-color: #e7e7e7;
    --review-box-border-color: #e7e7e7;
    --review-customer-color: #8397a1;

    --checkmark-border-color: #A2B0BA;

    --border-color-recently-viewed: #989d87;
    --text-color-recently-viewed: #4a4842;

    --nav-heading-color: var(--color-midnight-gray);

    --table-orders-lines-body-color: #585858;

    --status-green-color: #36b61d;
    --status-red-color: #d32525;

    --list-products-box-border-color: #a9dfdf;
    --product-image-border-color: #d7e8b1;
    --product-thumb-border-color: #e7e7e7;
    --product-item-image-background-color: #f4f5f9;
    --productopt-border-color: #BDCFE0;
    --productopt-text-color: #20449a;

    --sequential-border-color: #ECEEEF;

    --account-button-hover-bg-color: #A3C2BD;

    --form-contactus-input-error-border-color: #e76433;
    --form-contactus-button-color: #425363;
    --form-contactus-help-text-color: #c40017;
    --form-contactus-error-color: #e76433;

    --modal-content-bg-color: #fefefe;
    --modal-content-border-color: #888888;

    --color-opaque-midnight: #00000029; /* BG with alpha  */
    --color-smokey-gray: #00000033; /* BG with alpha  */

    --white-transparent-50: rgba(255, 255, 255, 0.5);
    --white-transparent-60: rgba(255, 255, 255, 0.6);
    --white-transparent: rgba(255, 255, 255, 0.9);
    --box-shadow-color-00: rgba(0, 0, 0, 0);
    --box-shadow-color-10: rgba(0, 0, 0, 0.1);
    --box-shadow-color-20: rgba(0, 0, 0, 0.2);
    --box-shadow-color-30: rgba(0, 0, 0, 0.3);
    --box-shadow-color-40: rgba(0, 0, 0, 0.4);
    --box-shadow-color-60: rgba(0, 0, 0, 0.6);
    --box-shadow-color-80: rgba(0, 0, 0, 0.8);
    --box-smokey-gray: rgba(50, 50, 50, 0.35);
    --featured-product-blue-transparent: rgba(0, 135, 198, 0.9); /*rgba(39, 58, 134, 0.9);*/
    --slider-gradient-background: linear-gradient(0deg, var(--box-shadow-color-80) 0%, var(--box-shadow-color-00) 50%);
    --loyalty-gradient-color: linear-gradient(0deg, var(--box-shadow-color-60) 0%, var(--box-shadow-color-00) 50%);;


    /* Font/text values */
    --font-family-poppins: Poppins;
    --font-style-normal: normal;
    --font-weight-300: 300px;
    --font-weight-medium: medium;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-24: 24px;
    --character-spacing-0: 0px;
    --line-spacing-24: 24px;
    --line-spacing-28: 28px;
}


.main-text-color {
    color: var(--main-text-color);
}

.primary-blue {
    color: var(--color-primary-blue);
}

.dark-blue {
    color: var(--color-dark-blue);
}

.medium-blue {
    color: var(--color-medium-blue);
}

.light-blue {
    color: var(--color-light-blue);
}


.primary-orange {
    /* color: var(--color-primary-orange-main) !important; */
}

.primary-green {
    color: var(--color-primary-green);
}

.secondary-green {
    color: var(--color-secondary-green);
}

.text-grey {
    color: var(--text-color-grey);
}

.text-red {
    color: var(--text-color-red);
}

.text-white {
    color: var(--white-color-ffffff);
}

a.text-white {
    color: var(--white-color-ffffff);
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}


/* fix to make Bootstrap 3 columns the same height - see https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height#22892773 */
.equal {
    -webkit-flex-wrap: wrap;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
}

.equal:before,
.equal:after {
    display: none;
}


html {
    height: 101%;
    overflow-y: scroll;
}

/*--------------- KFF STYLES Start -----------------*/

body {
    width: 100%;
    min-width: 320px;
    color: var(--main-text-color);
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    font-family: 'Poppins', sans-serif;
    text-align: left;
}

.modal-open {
    overflow: initial;
}
/*.modal-open {*/
/*    height: 100%;*/
/*}*/

ol, ul {
    margin: 0 0 20px 0;
    list-style: none;
}

img {
    max-width: 100%;
}

h1 {
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
}

h2 {
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
    font-style: normal;
    font-weight: 500;
    font-size: 26px;
}

h3 {
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
    font-weight: 500;
    font-size: 22px;
}

h4 {
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
    font-weight: 400;
    font-size: 18px;
}

h5 {
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
    font-weight: 300;
    font-size: 16px;
}


.small-text {
    font-size: 12px;
}

.page-title span {
    color: var(--color-primary-orange-second);
    font-size: 12px;
}

p.outstanding_balance {
    margin-bottom: 50px;
    font-size: 22px
}

p.outstanding_balance span {
    color: var(--color-primary-orange-second);
    font-weight: bold;
}

.gdpr_text {
    font-size: 12px !important;
    line-height: 12px !important;
}

.no-margin {
    margin: 0 !important;
}

p, h1, h2, h3, h4, h5 {
    margin-bottom: 20px;
    line-height: 1.5;
}

a:link, a:visited, a:active {
    outline: 0;
    color: var(--color-primary-blue);
    font-weight: 400;
    text-decoration: normal;
    text-align: center;
}

a:hover {
    color: var(--color-primary-blue);
    text-decoration: underline;
    opacity: 0.9;
}

a.white:link, a.white:visited, a.white:active {
    /* color: var(--white-color-ffffff); */
}

a.white:hover {
    color: var(--white-color-ffffff);
}

a img:hover {
    text-decoration: none;
    opacity: 0.9;
}


/* Links force to white */

button,
a.button,
input[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    outline: none;

    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    cursor: pointer;

    transition: background-color 0.2s;
}
input[type="submit"] {
    height: 50px;
    min-width: 150px;
    padding-right: 50px;
    padding-left: 50px;
    border-radius: 3px;

}

button.no_style {
    margin: 0;
    padding: 0;
    background-color: var(--white-color-ffffff);
    box-shadow: none;
    font-weight: normal;
    font-size: 16px;
}

a.button:hover {
    text-decoration: none;
}

button.blue,
a.button.blue,
input[type="submit"].blue {
    background-image: -webkit-linear-gradient(
            bottom,
            var(--btn-blue-gradient-start),
            var(--btn-blue-gradient-end)
    );
    background-image: -ms-linear-gradient(
            bottom,
            var(--btn-blue-gradient-start),
            var(--btn-blue-gradient-end)
    );
    background-image: linear-gradient(
            bottom,
            var(--btn-blue-gradient-start),
            var(--btn-blue-gradient-end)
    );

    background-color: var(--btn-blue-color);
    color: var(--white-color-ffffff);
    text-decoration: none;
}

button.blue:hover,
a.button.blue:hover,
input[type="submit"].blue:hover {
    background-image: -webkit-linear-gradient(
            bottom,
            var(--btn-hover-blue-gradient-start),
            var(--btn-hover-blue-gradient-end)
    );
    background-image: -ms-linear-gradient(
            bottom,
            var(--btn-hover-blue-gradient-start),
            var(--btn-hover-blue-gradient-end)
    );
    background-image: linear-gradient(
            bottom,
            var(--btn-hover-blue-gradient-start),
            var(--btn-hover-blue-gradient-end)
    );
    background-color: var(--btn-hover-blue-color);
}

button.blue:active,
a.button.blue:active,
input[type="submit"].blue:active {
    background-image: -webkit-linear-gradient(
            bottom,
            var(--btn-active-blue-gradient-start),
            var(--btn-active-blue-gradient-end)
    );
    background-image: -ms-linear-gradient(
            bottom,
            var(--btn-active-blue-gradient-start),
            var(--btn-active-blue-gradient-end)
    );
    background-image: linear-gradient(
            bottom,
            var(--btn-active-blue-gradient-start),
            var(--btn-active-blue-gradient-end)
    );
    background-color: var(--btn-active-blue-color);
}

#headerbac {
  padding: 0px 10px 0px 10px;
  float: right;
  margin-left: 15px;
  height: 35px;
}

.baccta{
	padding: 0px 10px 0px 10px;
	height: 35px;
	width: 200px;
	display: inline-block !important;
	line-height: 35px !important;
	margin-bottom: 20px;
}

button.orange,
a.button.orange,
input[type="submit"].orange {
    background-color: var(--btn-green-color);
    color: var(--white-color-ffffff);
}

button.orange:active,
a.button.orange:active,
input[type="submit"].orange:active,
button.orange:hover,
a.button.orange:hover,
input[type="submit"].orange:hover {
    background-color: var(--btn-hover-green-color);
    color: var(--white-color-ffffff);
}

button.grey,
a.button.grey,
input[type="submit"].grey {
    background-image: -webkit-linear-gradient(
            bottom,
            var(--btn-grey-gradient-start),
            var(--btn-grey-gradient-end)
    );
    background-image: -ms-linear-gradient(
            bottom,
            var(--btn-grey-gradient-start),
            var(--btn-grey-gradient-end)
    );
    background-image: linear-gradient(
            bottom,
            var(--btn-grey-gradient-start),
            var(--btn-grey-gradient-end)
    );
    background-color: var(--btn-grey-color);
    color: var(--text-color-grey);
}

button.grey:hover,
a.button.grey:hover,
input[type="submit"].grey:hover {
    background-image: -webkit-linear-gradient(
            bottom,
            var(--btn-hover-grey-gradient-start),
            var(--btn-hover-grey-gradient-end)
    );
    background-image: -ms-linear-gradient(
            bottom,
            var(--btn-hover-grey-gradient-start),
            var(--btn-hover-grey-gradient-end)
    );
    background-image: linear-gradient(
            bottom,
            var(--btn-hover-grey-gradient-start),
            var(--btn-hover-grey-gradient-end)
    );
    background-color: var(--btn-hover-grey-color);
}

button.grey:active,
a.button.grey:active,
input[type="submit"].active {
    background-image: -webkit-linear-gradient(
            bottom,
            var(--btn-active-grey-gradient-start),
            var(--btn-active-grey-gradient-end)
    );
    background-image: -ms-linear-gradient(
            bottom,
            var(--btn-active-grey-gradient-start),
            var(--btn-active-grey-gradient-end)
    );
    background-image: linear-gradient(
            bottom,
            var(--btn-active-grey-gradient-start),
            var(--btn-active-grey-gradient-end)
    );
    background-color: var(--btn-active-grey-color);
}

button.outline {
    /*border: 2px solid var(--color-medium-blue);*/
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

input[type="text"].outline {
    padding: 20px 10px;
    border: 0;
    /*border-top: 2px solid var(--color-medium-blue);*/
    /*border-bottom: 2px solid var(--color-medium-blue);*/
    line-height: normal;
    text-align: center;
    text-align: center;
}

input[type="text"].outline.big {
    width: 65px;
}

button.small, a.small, input[type="text"].small, input[type="submit"].small {
    height: 50px;
    /*padding: 10px 2px;*/
    padding: 0;
    font-size: 14px;
    line-height: 14px;
}

input[type="submit"].small, a.small {
    margin-bottom: 20px;
}

input[type="submit"].button-account {
    background-color: var(--btn-green-color);
    color: var(--white-color-ffffff);
    text-align: center;
}

/*====================================================
		Header
======================================================*/
/*HEADER TOP*/
.header-kff-top {
    display: flex;
    align-items: center;
    background-color: #0087C5;
    color: var(--white-color-ffffff);
    height: 35px;
}

.header-kff-top ul {
    display: flex;
    justify-content: end;
    margin-bottom: 0;
    padding: 5px 0;
    font-size: 12px;
}

.header-kff-top a {
    font-weight: normal;
    font-variant: normal;
    font-style: normal;
    font-size: 12px;
    font-family: var(--font-family-poppins);
    color: var(--white-color-ffffff);
    /*text-decoration: underline;*/
}

.header-kff-top a.white {
    text-decoration: underline;
	line-height: 33px;
}

.header-kff-top a i {
    color: var(--white-color-ffffff);
    text-decoration: none;
}

.header-kff-top i,
.header-kff-top a i {
    position: relative;
    top: 2px;
    font-size: 16px;
    color: var(--white-color-ffffff);
}

.header-kff-top a:hover {
    /*color: var(--color-primary-orange-main);*/
    text-decoration: none;
}

.header-kff-top a.account_links {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .header-kff-top {
        /* padding: 7px 0; */
    }

    .header-kff-top .list-inline {
        text-align: center;
    }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ start of search form ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.search_form #search_text {
    width: 100%;
    /* max-width: 50%; */
    /* height: 44px; */
    /* padding: 0 50px 0 20px; */
    /* border: 1px solid var(--border-color-blue); */
    background-color: var(--white-color-ffffff);
    color: var(--color-primary-blue);
    font-size: 16px;
    line-height: 30px; /* 44px; */
    display: inline-block;
    margin-right: -50px;
    background-color: var(--menu-bg-color-f4f5f6);
    color: var(--main-text-color);
    font-size: 16px;
    border: 0;
}


.search_form #search_text::-webkit-input-placeholder {
    color: var(--color-primary-blue); /* Chrome/Opera/Safari */
}

.search_form #search_text::-moz-placeholder {
    color: var(--color-primary-blue); /* Firefox 19+ */
}

.search_form #search_text:-ms-input-placeholder {
    color: var(--color-primary-blue); /* IE 10+ */
}

.search_form #search_text:-moz-placeholder {
    color: var(--color-primary-blue); /* Firefox 18- */
}

.search_form #submit_search i {
    color: var(--main-text-color);
    font-size: 20px;
    font-family: 'Font Awesome 5 Light';
    font-weight: 200;
}

@media only screen and (max-width: 991px) {
    .search_form #search_text {
        border: none;
    }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  end of search form  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ start of mobile header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media only screen and (min-width: 992px) {
    .header-mobile-kff,
    .search-mobile {
        display: none !important;
    }

    .header-desktop-kff > .container:first-child {
        /* display: block; */
    }
}

@media only screen and (max-width: 991px) {
    .header-mobile-kff,
    .search-mobile {
        display: block;
    }

    .header-desktop-kff > .container:first-child,
    .header_bottom {
        display: none;
    }

    .search-mobile #search_text_mobile {
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        padding-top: 15px;
        padding-bottom: 15px;
        border: none;
        /* border-bottom: 1px solid var(--color-primary-blue); */
        border-radius: 0;
        color: var(--color-primary-blue);
        font-size: 16px;
        line-height: 20px;
    }

    .search-mobile #search_text_mobile::-webkit-input-placeholder {
        color: var(--color-primary-blue); /* Chrome/Opera/Safari */
        font-size: 16px;
        line-height: 22px;
    }

    .search-mobile #search_text_mobile::-moz-placeholder {
        color: var(--color-primary-blue); /* Firefox 19+ */
        font-size: 16px;
        line-height: 20px;
    }

    .search-mobile #search_text_mobile:-ms-input-placeholder {
        color: var(--color-primary-blue); /* IE 10+ */
        font-size: 16px;
        line-height: 20px;
    }

    .search-mobile #search_text_mobile:-moz-placeholder {
        color: var(--color-primary-blue); /* Firefox 18- */
        font-size: 16px;
        line-height: 20px;
    }
}

.header-mobile-kff {
    position: relative;
    /* min-width: 375px; */
    height: 90px;
    /* padding: 20px 0; */
    background: var(--white-color-ffffff);
    color: var(--main-text-color);
    text-align: center;
}

.header-mobile-kff a.mobile-menu {
    /* display: block; */
    /* position: absolute; */
    /* top: 50%; */
    /* left: 0; */
    width: 65px;
    padding: 20px;
    /* transform: translateY(-50%); */
    text-align: center;
}

.header-mobile-kff a.mobile-menu i {
    color: var(--main-text-color);
    font-size: 30px;
}

.header-mobile-kff a.phone-icon {
    /* position: absolute; */
    /* top: 50%; */
    /* left: 85px; */
    /* width: 65px; */
    padding: 3px;
    /* transform: translateY(-50%); */
    text-align: center;
}

.header-mobile-kff a.phone-icon i {
    font-size: 24px;
}

.header-mobile-kff a.mini-basket {
    position: absolute;
    top: 50%;
    right: 0;
    width: 85px;
    padding: 10px;
    transform: translateY(-50%);
    text-align: center;
}

.header-mobile-kff a.mini-basket i {
    font-size: 18px
}

.header-mobile-kff a.mini-basket .total-line {
    color: var(--main-text-color);
    font-size: 14px;
}

.header-mobile-kff a.mini-basket .value-line {
    color: var(--main-text-color);
    font-size: 8px
}

.header-mobile-kff a.favourites-icon {
    /* position: absolute; */
    /* top: 50%; */
    /* right: 105px; */
    /* width: 45px; */
    /* padding: 20px 10px; */
    /* transform: translateY(-50%); */
    text-align: center
}

.header-mobile-kff a.favourites-icon i {
    font-size: 24px
}

.search_form_mobile {
    position: relative;
}

@media (max-width: 491px) {
    .header-mobile-kff a.phone-icon {
        /* left: 40px; */
    }

    .header-mobile-kff a.favourites-icon {
        right: 85px;
    }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  end of mobile header  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/*HEADER*/
.header-desktop-kff {
    position: relative;
    background-color: var(--white-color-ffffff);
    box-shadow: 0px 2px 8px  #00000021;
}

.header-kff #mobile_menu, .header-kff #mobile_phone {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    display: none;
    z-index: 2;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.header-desktop-kff .header-logo {
    width: 135px;
    /* padding: 10px; */
    text-align: center;
    justify-content: center;
}

.header-desktop-kff .header-logo img {
    width: 119px;
    max-height: fit-content;
}

.header-desktop-kff .search-container {
    position: relative;
    width: calc(100% - 615px);
    height: 100px;
    margin: 0 40px;
    float: left;
}

.header-desktop-kff .search-container .search_form #search_text {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}


.header_links {
    width: 400px;
    height: 100px;
    /* padding: 40px; */
    /* float: right; */
    font-size: 16px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: end;
}

.header_links a {
    display: flex;
    /* margin-left: 30px; */
    color: var(--main-text-color);
    /* line-height: 12px; */
    height: 100%;
    align-items: center;
}

.header_links a i {
    color: var(--main-text-color);
}

.header_bottom {
    height: 2px;
    background-color: var(--color-primary-orange-main);
}

@media (max-width: 991px) {
}


/* Suggestions Search Header */

#suggestions {
    display: none;
    z-index: 1001;
    position: absolute;
    top: 100%;
    /* top: calc(100% - 10px); */
    /* right: 0; */
    width: 200%; /* 50% */
    max-width: 760px;
    /* min-width: 444px; */
    max-height: 580px;
    /* border: 1px solid var(--color-primary-blue); */
    background-color: var(--white-color-ffffff);
    /* box-shadow: 0 0 8px var(--color-primary-blue); */
}

.suggestions-search {
    z-index: 1002;
    max-height: 540px;
    overflow-y: auto;
    background: var(--white-color-ffffff);
}

.suggestions-search a {
    text-decoration: none;
}

.suggestions-search a:hover {
    opacity: 1;
}

.search-dropdown {
    overflow-x: hidden;
    border-bottom: 1px solid var(--menu-bg-color-f4f5f6);
    color: var(--main-text-color);
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
}

.search-dropdown span {
    text-decoration: underline;
}

.search-dropdown:hover {
    color: var(--color-primary-orange-main);
}

.search-dropdown .row {
    display: table;
    width: calc(100% + 30px);
}

.search-dropdown div[class*="col-"] {
    display: table-cell;
    float: none;
    vertical-align: middle;
}

.search-dropdown img {
    margin: 0 0 0 auto;
}

.search-dropdown .image {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.search-close {
    height: 40px;
    background-color: var(--color-primary-blue);
    color: var(--white-color-ffffff);
    font-weight: 600;
    font-size: 14px;
    line-height: 40px;
    text-decoration: none;
    cursor: pointer;
}

/*====================================================
		End of Header
======================================================*/


.slider {

}

.slider-content {
    position: relative;
    /* height: 900px; */
    object-fit: cover;
}

.slider-text-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}

.slider-image {
    z-index: 1;
    position: relative;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    /* max-height: 800px; */
    /* object-fit: cover; */
}


.slider-image-gradient::after {
    display: block;
    z-index: 10;
    position: relative;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    height: 200%;
    background: var(--slider-gradient-background);
    content: "";
}


.slider_box {
    z-index: 20;
    position: absolute;
    bottom: 61px;
    left: 0;
    width: 100%;
    text-align: center;
}

.slider_line1 {
    color: var(--white-color-ffffff);
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: -13px;
}

.slider_line2 {
    color: var(--white-color-ffffff);
    font-size: 50px;
    line-height: 98px;
    text-align: center;
    font-weight: 500;
}

.slider_cta {
    color: var(--color-primary-orange-main);
    font-weight: 500;
    font-size: 18px;
    text-align: center;
}

.home-side-box {
    z-index: 10;
    position: relative;
}


.home-side-box-contents {
    z-index: 2;
    position: absolute;
    bottom: 35px;
    left: 0;
    width: 100%;
    padding: 0 20px;
    color: var(--white-color-ffffff);
    text-align: center;
}

.home-side-box-contents .heading {
    font-weight: normal;
    font-size: 25px;
    line-height: 30px;
}

.home-side-box-contents .heading-small {
    font-size: 14px;
}


/*--------------- KFF STYLES End -----------------*/

.cms_edit {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 100px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: 9px;
    border: 2px solid var(--border-color-c4c4c4);
    color: var(--input-text-color);
    font-size: 14px;
    line-height: 18px;
    text-align: left;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: 9px;
    border: 2px solid var(--border-color-c4c4c4);
    color: var(--input-text-color);
    font-size: 14px;
    line-height: 18px;
    text-align: left;
}

input[type="checkbox"] {
    width: auto;
}

input[type="submit"] {
    cursor: pointer;
}

textarea {
    width: 100%;
    min-height: 150px;
}

.standard-form label,
.standard-form input,
.standard-form textarea,
.standard-form select {
    margin: 0 0 10px 0;
}

.standard-form label {
    display: block;
}

.label-checkbox {
    font-size: 12px;
}

.label-checkbox input {
    display: inline-block;
    margin: 0;
    vertical-align: bottom;
}

.no-float {
    float: none !important
}

.hover:hover {
    -moz-opacity: 0.8;
    -webkit-opacity: 0.8;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    opacity: 0.8;
    transition: 0.5s ease;
}

.clearfix:before, .clearfix:after {
    display: table;
    content: " "
}

.clearfix:after {
    clear: both
}

.clearfix {
    *zoom: 1;
}

.no-display {
    display: none;
}

.disabled {
    color: var(--disabled-color);
}

.text-center {
    text-align: center;
}

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
    width: 100%;
    max-width: 1300px;
    /* border: 1px dotted RED; */
}

.page-title {
    margin: 0 0 30px 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--border-grey-color);
    font-weight: 500;
}

.login_page .page-title {
    cursor: pointer;
}

.login_page .login_hidden {
    display: none;
}

.login_page .login_hidden a {
    text-decoration: underline;
}

.login_page .login_buttons {
    margin-bottom: 50px;
}

.login_page .login_buttons div[class*="col-"] {
    padding-bottom: 20px
}

.login_page .login_buttons form {
    display: inline;
}

.login_page .login_buttons button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 40px 20% 50px 20%;
    border: 1px solid var(--border-grey-color);
    border-radius: 3px;
    background-color: var(--white-color-ffffff);
    box-shadow: none;
    color: var(--color-primary-blue);
    font-weight: 500;
    font-size: 28px;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
}

.login_page .login_buttons button:hover {
    -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    box-shadow: 1px 1px 6px var(--color-opaque-midnight);
}

.login_page .login_buttons button h3 {
    margin-top: 10px;
    margin-bottom: 0;
    font-weight: 500;
    line-height: 24px;
}

.login_page .login_buttons button span {
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
}

.login_page .login_buttons button > .button-text {
    font-size: 0;
    line-height: 24px;
}

@media (max-width: 991px) {
    .login_page .login_buttons button {
        padding: 30px 10% 40px 10%;
    }
}

@media (max-width: 767px) {
    .login_page .login_buttons button:hover {
        -webkit-transform: scale(1, 11);
        transform: scale(1, 1);
    }

    .login_page .login_buttons button {
        position: relative;
        padding: 20px;
        font-size: 0; /* Removes space between elements on some browsers */
        text-align: left;
    }

    .login_page .login_buttons button > .button-text {
        -webkit-transform: translateY(-50%);
        position: absolute;
        top: 50%;
        width: 75%;
        float: left;
        transform: translateY(-50%);
    }

    .login_page .login_buttons button > .button-icon {
        width: 15%;
        float: right;
        font-size: 30px;
        text-align: right;
    }

    .login_page .login_buttons button h3 {
        margin: 0;
        font-size: 22px;
        line-height: 24px;
    }

    .login_page .login_buttons button > .button-text-mobile-padding {
        padding-top: 5px;
    }
}

.login_page .login_buttons button i {
    color: var(--color-primary-orange-main);
}

.login_page .login_buttons button:hover {
    text-decoration: none;
    opacity: 0.9;
}

.login_page #login_new p {
    font-size: 18px;
}

.page-title-small {
    margin: 0 0 20px 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--border-color-c4c4c4);
}

.error {
    color: var(--error-color);
}

.error-box {
    margin: 5px;
    color: var(--error-color);
}

.success {
    color: var(--success-color);
}

.success-box {
    margin: 5px;
    color: var(--success-color);
}


iframe {
    width: 100%;
    max-width: 100%;
}

.breadcrumb {
    margin: 0 0 15px 0;
    padding: 0;
    overflow: hidden;
    color: var(--breadcrumb-color);
    font-weight: normal;
    font-size: 11px;
    line-height: 18px;
    list-style: none;
}

.breadcrumb li {
    float: left;
}

.breadcrumb li a {
    color: var(--breadcrumb-color);
    font-weight: normal;
    font-size: 11px;
}

.see-more-link {
    color: var(--color-purple-4d2a67) !important;
    font-weight: 600;
    font-size: 10px;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

.see-more-link:after {
    margin: 0 0 0 3px;
    content: "\f101";
    font-family: "FontAwesome";
}

.back-link {
    color: var(--color-purple-4d2a67) !important;
    font-weight: 600;
    font-size: 10px;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

.back-link:before {
    margin: 0 3px 0 0;
    content: "\f100";
    font-family: "FontAwesome";
}

/*====================================================
		Cookie bar css
======================================================*/
#cookie_banner {
    display: none;
    z-index: 44499;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 10px;
    background: var(--cookie-banner-background);
}

#cookie_close_btn {
    float: right;
    color: var(--cookie-close-btn-color);
    cursor: pointer;
}

#cookie_banner p {
    margin: 0;
}

button[disabled], html input[disabled],
.payment-disabled {
    cursor: no-drop;
}

.payment-button {
    width: 100%;
    margin: 10px 0;
}

/*====================================================
		Pagination css
======================================================*/
.pagination-bar {
    width: 100%;
    padding: 0 0 25px 0;
    overflow: hidden;
    color: #333;
    font-size: 12px;
}

.pagination-bar .count {
    float: left;
    line-height: 24px;
}

.pagination-bar .pages {
    float: right;
    line-height: 24px;
}

.pagination-bar .pages ul {
    list-style: none;
}

.pagination-bar .pages ul li {
    margin: 0 0 0 10px;
    float: left;
}

.mix-bar {
    width: 100%;
    padding: 0;
    float: left;
}

.group-wrp {
    display: inline-flex;
    width: 100%;
}

#sortby_wrp {
    display: inline-flex;
    width: 100%;
}

#sortby_wrp i {
    margin: 0 10px 0 0;
    font-size: 26px;
    line-height: 30px;
    vertical-align: text-top;
}

#sortby_wrp > label {
    margin: 0 10px 0 0;
    color: var(--color-primary-blue);
    font-size: 14px;
    line-height: 30px;
    vertical-align: text-top;
}

#sortby_wrp > select {
    width: auto;
    max-width: 135px;
    height: 30px;
    padding: 0 3px;
    border: 1px solid var(--border-color-c4c4c4);
    font-size: 12px;
    vertical-align: text-top;
    cursor: pointer;
}

#sortby_wrp .grid_style {
    width: 100%;
    min-width: 115px;
    margin-left: 24px;
}

#sortby_wrp .grid_style a {
    color: var(--text-color-a9b0cf);
}

#sortby_wrp .grid_style_selected i {
    color: var(--main-text-color);
}

#sortby_filter > option {
    padding: 0 5px;
}

#sortby_wrp > .filter-btn {
    display: flex;
    justify-content: right;
    width: 70px;
    height: 30.8px;
    color: var(--main-text-color);
    font-size: 14px;
    line-height: 30.8px;
    cursor: pointer;
}

#sortby_wrp > .filter-btn > i {
    margin: auto 0 auto 5px;
    font-size: 14px;
}

@media (min-width: 768px) {
    .group-wrp {
        flex-grow: 1;
        width: auto;
    }

    .mix-bar {
        margin-top: 30px;
    }

    #sortby_wrp .grid_style {
        margin-left: 30px;
    }

    #sortby_wrp > .filter-btn {
        display: none;
    }
}

.showing {
    font-size: 14px;
}

.showing_clear {
    display: none;
}

.pagenav {
    display: inline-flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    height: 30.8px;
    margin: 20px auto 0px auto;
    font-size: 14px;
    line-height: 30.8px;
}

.pagenav a, .pagenav span {
    display: block;
    margin: 0 5px 0 5px;
    color: var(--main-text-color);
}

.pagenav a {
    text-decoration: none;
}

.pagenav a:hover {
    text-decoration: underline;
}

.pagenav a.nextprev {
    font-weight: normal
}

.pagenav .disabled {
    display: block !important;
    color: #999;
}

.pagenav .pagenav_pages {
    display: flex;
    max-width: 230px;
    margin-left: auto;
}

.pagenav .pagenav_pages .page-num {
    display: none;
}

.pagenav .page-num-wrp {
    display: inline-flex;
}

.pagenav .page-num-before .page-num:last-child {
    display: block;
}

.pagenav .page-num-after .page-num:first-child {
    display: block;
}

@media (min-width: 825px) {
    .mix-bar {
        display: inline-flex;
    }

    .pagenav {
        margin: auto;
    }

    .pagenav .showing {
        margin: auto;
    }
}

@media (min-width: 925px) {
    .pagenav .page-num-after .page-num:nth-child(2) {
        display: block;
    }

    .pagenav .showing {
        flex-grow: 1;
        margin-right: 50px;
        text-align: right;
    }
}

a.displayAll {
    margin: 0 10px 0 2px
}

span.displayAll {
    margin: 0 10px 0 2px
}

.no-results {
    font-size: 18px;
    text-align: center;
}

.no-results i {
    margin-bottom: 5px;
    font-size: 34px;
}

/*================================================================================
						start of home page hero
================================================================================*/
.slider-wrapper {
    position: relative;
    /* height: 100%; */
    /* height: 800px; */
    margin: 0;
}

#prevBtn a {
    position: absolute;
    top: 175px;
    left: -25px;
    width: 50px;
    height: 50px;
    background-image: url(/img/prev.png)
}

#nextBtn a {
    position: absolute;
    top: 175px;
    right: -25px;
    width: 50px;
    height: 50px;
    background-image: url(/img/next.png)
}

#prevBtn a:active {
    left: -26px;
}

#nextBtn a:active {
    right: -26px;
}

/*================================================================================
							Navigation
================================================================================*/


.header_line {
    border-top: 1px solid var(--color-blue-52619e);
}

.nav-container {
    /*margin: 0;*/
    /*font-weight: 400;*/
}

.nav {
    display: inline-block;
    margin: 0 auto;
}

.nav a {
    color: var(--main-text-color);
    text-decoration: none;
    line-height: 16px;
    font-weight: 500;
    font-variant: normal;
    font-style: inherit;
    font-size: 13px;
    font-family: var(--font-family-poppins);
    letter-spacing: 0;
}

.nav > li {
}

.nav > li > a {
    display: block;
    /* padding: 0 15px; */
    /*border-right: 1px solid var(--color-blue-52619e);*/
    line-height: 60px;
}

.nav > li:last-child > a {
    border-right: 0;
}

ul.nav.nav-wrp {
    height: 44px;
}

.dropdown-wrp {

    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    display: none;
    z-index: 10;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 234px; /* (1170/5) */
    padding: 27px;

    border-bottom: 4px solid var(--color-primary-blue);
    background: var(--white-color-ffffff);
    transition: all 200ms ease-in-out;
}

.nav > li:hover, .nav > li.active {
}

.nav > li:hover a, .nav > li.active a {
    /* color: var(--color-new-kff-primary-blue) !important; */
}

.nav > li:hover i, .nav > li.active i {
    color: var(--color-new-kff-primary-blue) !important;
}

.nav > li.active > .dropdown-wrp,
.nav > li.active > .mega-dropdown-wrp {
    display: block;
}

.nav .non-mega {
    position: relative;
}

.dropdown-wrp .dropdown-list + .dropdown-list {
    margin-top: 15px;
}

.dropdown-wrp.mega-dropdown-wrp .dropdown-list + .dropdown-list {
    margin-top: 0;
}

.dropdown-wrp .dropdown-list > li > a {
    display: inline-block;
    margin: 0 0 10px 0;
    color: var(--color-primary-blue);
}

.nav .heading {
    margin: 0 0 10px 0;
    color: var(--color-primary-blue);
    font-weight: normal;
    font-size: 18px;
    text-transform: uppercase;
}

/* mega menu */
.mega-dropdown-wrp {
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    padding: 30px 0;
}

.mega-dropdown-wrp.reverse {
    right: 0;
}

.mega-dropdown-wrp > .container > .dropdown-list {
    width: 16.66666667%;
    padding: 0 10px;
    float: left;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .nav > li > a {
        padding: 0 7px;
        font-size: 13px;
    }
}

@media (min-width: 992px) {
    .nav > li {
    }

    .mega-dropdown-wrp {
        padding-bottom: 15px;
    }

    .mega-dropdown-wrp > .container > .dropdown-list {
        padding: 0 5px 15px;
    }

    .dropdown-wrp .dropdown-list > li > a {
        display: block;
        margin-bottom: 7px;
        font-size: 13px;
        line-height: 14px;
    }

    .dropdown-wrp .dropdown-list > li > a:hover {
        color: var(--color-primary-orange-main);
    }

    .nav .heading {
        margin-bottom: 7px;
        font-weight: bold;
        font-size: 15px;
        line-height: 16px;
    }
}

@media (max-width: 991px) {
    .nav-container {
        text-align: center;
    }
}

@media (min-width: 992px) {
    .nav-container .nav.nav-wrp > li {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* width: var(--nav-el-width); */
    }

    .nav-container .nav.nav-wrp > li > a {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 60px;
        line-height: 1;
    }


    .header-menu {
        background: var(--menu-bg-color-f4f5f6);
    }

    .header-menu-desktop-nav-ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        /* justify-content: space-between; */
        /* float: left; */
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .nav-container .nav.nav-wrp > li > a {
        font-size: 12px;
    }
}


/*================================================================================
							offcanvas CSS
================================================================================*/
#offcanvas_menu_close_wrp {
    display: none;
}

/*================================================================================
							Page CSS
================================================================================*/

.link-more-info {
    float: right;
    font-weight: normal;
    font-size: 12px;
}

.side-links li {
    margin: 7px 0 0 0;
}

.side-links ul ul {
    padding: 0 0 0 20px;
}

.archive-links li {
    margin: 10px 0 0 0;
}

.archive-links li a {
    color: var(--text-color-444);
    text-decoration: none;
}

.archive-links ul ul {
    margin: 0 0 10px 0;
    padding: 0 0 0 20px;
}

/* blog results */
.posts-list li {
    margin: 0 0 25px 0;
    padding: 0 0 25px 0;
    border-bottom: 1px solid var(--border-color-c4c4c4);

}

.posts-list .link-text {
    margin: 0;
}

.posts-list .post-img {
    max-width: 200px; /*added by Maks*/
    margin: 0 20px 0 0;
    float: left;
    border-bottom: 2px solid var(--text-color-a9b0cf);


}

.post-img-box {
    max-width: 100%;
    margin: 0 0 10px 10px;
    float: right;
}

.blog-post-box h3 {
    margin: 0 0 5px 0;
}

.blog-post-box p {
    font-size: 12px;
}

.newsletter-form input[type="submit"] {
    float: right;
}

/* bx-slider overwrite */
.bx-wrapper .bx-viewport {
    left: 0;
    border: 0;
    box-shadow: none;
}

.bx-wrapper .bx-prev {
    left: -30px;
    background-image: url(images/custom_controls.png);
}

.bx-wrapper .bx-next {
    right: -30px;
    background-image: url(images/custom_controls.png);
}


.related-product-list li,
.section-product-list li {
    width: 100%;
    max-width: 270px;
}

.related-product-list .display-frame,
.section-product-list .display-frame {
    position: relative;
    height: 300px;
    padding: 10px;
    border: 1px solid var(--border-color-c4c4c4);
}

.related-product-list .display,
.section-product-list .display {
    margin: 0;
    background-position: 50% 50%;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.related-product-list .display img,
.section-product-list .display img {
    visibility: hidden;
}

.display-frame .sale-ribbon {
    z-index: 11;
    position: absolute;
    right: -10px;
    padding: 0;
    color: var(--white-color-ffffff);
    text-transform: uppercase;
}

.display-frame .sale-ribbon:before {
    position: absolute;
    left: -15px;
    border-top: 15px solid var(--sale-ribbon-top-color);
    border-bottom: 15px solid var(--sale-ribbon-top-color);
    border-left: 15px solid transparent;
    content: " ";
}

.display-frame .sale-ribbon:after {
    position: absolute;
    right: -10px;
    bottom: -10px;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid var(--sale-ribbon-bottom-color);
    content: " ";
}

.display-frame .sale-ribbon span {
    display: block;
    padding: 0 15px;
    background-color: var(--sale-ribbon-text-bg-color);
    line-height: 30px;
}


.display-frame .overlay-button {
    visibility: hidden;
    z-index: 6;
    position: absolute;
    top: 45%;
    right: 0;
    left: 0;
    text-align: center;
}

.display-frame .overlay-button a.button {
    -webkit-transition: all 50ms ease-out 0s;
    -moz-transition: all 50ms ease-out 0s;
    -o-transition: all 50ms ease-out 0s;
    transition: all 50ms ease-out 0s;
}

.display-frame .overlay-button a.button:hover {
    background-color: var(--overlay-button-hover-bg-color);
    color: var(--white-color-ffffff);
}

.display-frame .display-frame-overlay {
    -webkit-transition: all .2s ease-out 0s;
    -moz-transition: all .2s ease-out 0s;
    -o-transition: all .2s ease-out 0s;
    visibility: hidden;
    z-index: 5;
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    left: 1px;
    background-color: transparent;
    filter: alpha(opacity=70);
    opacity: 0.7;
    transition: all .2s ease-out 0s;
}

.display-frame:hover .display-frame-overlay {
    background: var(--white-color-ffffff);
}

.display-frame:hover .display-frame-overlay,
.display-frame:hover .overlay-button {
    visibility: visible;
}

.display-frame .manu-text {
    margin: 0 0 5px 0;
    font-size: 12px;
    text-align: center;
}

.display-frame .prod-text {
    margin: 0;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
}

.frame-price,
.frame-add {
    min-height: 58px;
    padding: 20px 5px;
    float: left;
    text-align: center;
}

.frame-options {
    width: 100%;
    height: 60px;
    float: left;
    overflow: hidden;
    border-right: 1px solid var(--border-color-c4c4c4);
    border-bottom: 1px solid var(--border-color-c4c4c4);
    border-left: 1px solid var(--border-color-c4c4c4);
}

.frame-price {
    width: 35%;
    height: 100%;
    color: var(--color-purple-4d2a67);
    font-size: 14px;
    line-height: 18px;
    font-family: Arial, sans-serif;
}

.frame-price.frame-price-sale {
    padding: 10px 3px;
    background-color: var(--color-red-db484e);
    color: var(--white-color-ffffff);
}

.frame-price.frame-price-sale .rrp-value {
    display: block;
    font-size: 12px;
    text-decoration: line-through;
}


.frame-add {
    width: 65%;
    height: 100%;
    height: 100%;
    border-left: 1px solid var(--border-color-c4c4c4);
    color: var(--text-color-444);
    font-size: 12px;
    line-height: 18px;
}

a.add-to-basket {
    color: var(--text-color-444);
    text-decoration: none;
    text-transform: uppercase;
}

a.add-to-basket:hover {
}

button.add-to-basket {
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--text-color-444);
    font-size: 12px;
    line-height: 18px;
    text-transform: uppercase;
    cursor: pointer;
}


.page-img-box {
    margin-bottom: 30px;
}

.page-img-box .caption {
    padding: 20px;
    border: 1px solid var(--border-color-c4c4c4);
    border-top: 0;
    font-style: italic;
    font-size: 12px;
}


/* search */
.search-results-list li {
    width: 100%;
    margin: 0 0 10px 0;
    float: left;
}

/*================================================================================
						start of side menu
================================================================================*/
.store-side-menu {
    display: none;
    width: 100%;
}

.dynamic-menu {
    width: 100%;
    margin: 15px 0 0 0;
    float: left;
}

.dynamic-menu:first-child {
    margin: 0;
}

.dynamic-menu-title {

position: relative;

width: 100%;

margin: 0 0 0 0;

padding: 15px 20px;

overflow: hidden;

background-color: var(--new-kff-blue-light-tint);

color: var(--main-text-color);

font-size: 16px;

line-height: 1;

text-align: left;

cursor: pointer;
}

.dynamic-menu-title:after {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transition: -webkit-transform 0.4s linear 0s;
    -moz-transition: -moz-transform 0.4s linear 0s;
    -o-transition: -o-transform 0.4s linear 0s;
    position: absolute;
    top: 50%;

    right: 20px;

    width: 16px;
    height: 16px;
    transform: translateY(-50%);

    content: "\f055";

    color: var(--text-color-a9b0cf);
    font-size: 20px;
    font-family: "Font Awesome 5 Solid";
    transition: transform 0.4s linear 0s;
}

.dynamic-menu-title.open {
    background-color: var(--color-primary-blue);
    color: var(--white-color-ffffff);
}

.dynamic-menu-title.open:after {
    content: "\f056";
    color: var(--white-color-ffffff);
}

/*.dynamic-arrow-move{
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg);
	-o-transform:rotate(-180deg);
	-ms-transform:rotate(-180deg);
	transform:rotate(-180deg);
} */
.dynamic-menu-options {
    display: none;
    width: 100%;
    margin: 0;
    float: left;
    list-style: none;
}

.dynamic-menu-open {
    display: block;
}

.dynamic-menu-sticky {
    position: sticky;
    top: 30px;
}

.dm-opt {
    width: 100%;
    margin: 0;
    padding: 15px 20px;
    float: left;
    border-bottom: 1px solid var(--color-medium-blue);
    background-color: var(--new-kff-blue-light-tint);
    color: var(--main-text-color);
    font-size: 12px;
    line-height: 16px;
    text-align: left;
}

.dm-opt.active {
    background-color: var(--color-light-blue);
    color: var(--color-medium-blue);
}

.dm-opt > label {
    width: 100%;
    float: left;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

@media (min-width: 768px) {
    .dynamic-menu-sticky-only-desktop {
        position: sticky;
        top: 30px;
    }

    .store-side-menu {
        display: block;
    }
}


/* Maks_css_addition START*/
/* Purple Pineapple START */
.title_padding {
    padding-top: 40px;
}

.PurplePinapple-Image div img {
    margin: auto;
}

.PurplePinapple-Image div:last-child img {
    max-width: 300px;
}

.best-sellers {
    margin-bottom: 20px;
    border: 2px solid var(--best-sellers-border-color);
}

.best-sellers h1 {
    height: 50px;
    margin-bottom: 0;
    background-color: var(--best-sellers-bg-color);
    color: var(--white-color-ffffff);
    text-align: center;
}

.best-sellers .best-sellers-content {
    padding: 15px 30px;
}

.section_end {
    margin-bottom: 10px;
    padding-top: 10px;
}

/* Purple Pineapple END */

/* Recipe section Start */
.button_pdf {
    padding: 10px;
}

a.view_recipe_btn {
    margin: 20px 0;
}

.directions {
    padding-bottom: 20px;
    padding-left: 10px;
    list-style: none;
}

.directions li {
    margin-bottom: 10px;
    color: var(--text-color-grey);
}

p span.fa-chevron-right {
    padding-right: 10px;
}

.ingredients_list {
    padding-bottom: 10px;
}

.ingredients_list p {
    margin-bottom: 10px;
}

.ingredients_list .button {
    padding: 4px 10px;
}

.ingredients_list table td {
    padding: 5px 0;
}

.ingredients_list form {
    margin-right: 10px;
}

/* Recipe section End*/
.grey-p p {
    color: var(--text-color-grey);
}

.labelText {
    color: var(--color-primary-blue) !important;
}

.back-link-orange {
    padding-top: 20px;
}

.link-orange a {
    color: var(--color-primary-orange-main);
    cursor: pointer;
}

.img-center img {
    margin-right: auto;
    margin-left: auto;
}

h1 .share_this {
    float: right;
}

.share_this {
    font-size: 14px;
}

.share_this i {
    padding-left: 5px;
    color: var(--color-primary-orange-main);
}

.pagenav .count {
    padding-top: 10px;
    padding-right: 20px;
    float: left;
}

.pagenav .pages {
    /*float: right;*/
    display: inline-flex;
}

.vertical-flex {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.name-and-title * {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.name-and-title {
    margin-top: 5px;
    margin-bottom: 40px
}

.chef {
    margin-top: 0px !important;
}

.chefs-quote {
    position: relative;
    margin-bottom: 20px;
    padding: 30px;
    border: 1px solid var(--color-primary-orange-main);
    font-size: 18px;
}

.chefs-quote *, img {
    /* border:1px solid red !important; */
    vertical-align: -webkit-baseline-middle;
}

#left-quote {
    z-index: 2;
    position: absolute;
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
    background-color: white;
    text-align: center;

}

#right-quote {
    z-index: 2;
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 40px;
    height: 40px;
    background-color: white;
    text-align: center;
}

.open a {
    color: white;
}

/* Alterbnating Columns */
.ac-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.flip {
    justify-content: flex-start;
    background-position-x: right;
}

.ac-image {
    width: 100%;
    height: 500px;
    background-size: contain;
    background-repeat: no-repeat;
}

.ac-text {
    z-index: 2;
    position: absolute;
    width: 600px;
    padding: 30px;
    float: right;
    background-color: var(--color-light-blue);
}

@media only screen and (max-width: 380px) {
    /* .bannerImage{
		min-height:160px !important;
	} */
    .bannerImage h1 {
        zoom: 60%;
    }

    .count {
        display: none;
    }

    .pagenav {
        float: left;
    }

    .pages {
        padding: 0;
    }
}

@media only screen and (min-width: 381px) and (max-width: 576px) {
    /* .bannerImage{
		min-height:200px !important;
	} */
    .bannerImage h1 {
        zoom: 80%;
    }
}

@media only screen and (max-width: 767px) {
    /*.best-sellers div[class*="col-"]{
		text-align:center;
		padding-top:20px;
	}
	.best-sellers div[class*="col-"] img{
		margin-left:auto;
		margin-right:auto;
	}
	.best-sellers .row{
		padding-left:10px;
		padding-right:10px;
	}*/
    .ac-image {
        zoom: 0.6;
    }

    .name-and-title {
        text-align: center;
    }
}

@media only screen and (max-width: 1200px) {
    .ac-container {
        display: grid;
        align-items: center;
        justify-content: center;
    }

    .ac-image {
        width: 100%;
        height: 500px;
        background-position: center;
        background-size: cover;
    }

    .ac-text {
        position: relative;
        top: -40px;
        width: 80vw;
        margin: 0 20px;
    }
}

@media only screen and (max-width: 992px) {
    .name-and-title {
        text-align: center;
    }

    .showing_clear {
        display: block;
        clear: both;
    }
}

@media only screen and (max-width: 768px) {
    .vertical-flex {
        display: block;
    }
}

@media only screen and (min-width: 1201px) {
    .ac-container {
        margin-bottom: 40px;
    }
}


/* M_css_addition END*/

.dm-opt input[type="checkbox"] {
    width: auto;
    float: right;
    border: 0;
    cursor: pointer;
}

.dynamic-menu-options .dm-opt:last-child {
    border-bottom: 0;
}

.section-nav {
    display: none;
    width: 100%;
    float: left;
    font-weight: normal;
}

.nav-lvl-0 {
    display: block;
}

li.nav-selected {
    font-weight: bold;
}

.nav-opened > ul > li {
    display: block;
}

.sub-section-nav {
    padding: 0 0 0 20px;
}


/*================================================================================
								DEFAULT STORE CSS
================================================================================*/
.sections-row {
    text-align: center;
}

.section-box {
    display: inline-block;
    text-align: center;
}

.section-box img {
    visibility: hidden;
}

.section-box .display {
    margin: 0 0 25px 0;
    background-position: 50% 50%;
    background-size: auto 90%;
    background-repeat: no-repeat;
}

.section-box .display a {
    display: inline-block;
}

.section-product-list {
    margin: 0 0 0 -30px;
}

.section-product-list li {
    width: 33.33333333333333%;
    max-width: 300px;
    padding: 0 0 30px 30px;
    float: left;
}

.section-product-list .display-frame {
    height: 240px;
}

.related-product-list {
    margin: 0 0 0 -30px;
}

.related-product-list li {
    width: 25%;
    max-width: 300px;
    padding: 0 0 30px 30px;
    float: left;
}

.related-product-list .display-frame {
    height: 240px;
}

.bannerImage {
    min-height: 50px;
    background-size: 0;
}

.bannerImageOverlay {
    margin: 10px auto 30px 0;
    color: var(--color-primary-blue);
    font-size: 28pt;
}

@media (max-width: 814px) {
    .bannerImageOverlay {
        /*width: 144px;*/
        /*height: 85px;*/
        /*padding-top: 23px;*/
        /*padding-left: 21px;*/
        min-height: 85px;
        background-color: var(--color-primary-blue);
        color: var(--white-color-ffffff);
        font-size: 18pt;
        width: fit-content;
        padding: 23px 21px;
    }
}

@media (min-width: 814px) {
    .bannerImage {
        position: relative;
        min-height: 250px;
        background-position: center center;
        background-size: cover;

        background-size: auto;

        background-repeat: no-repeat;
    }

    .bannerImageOverlay {
        position: absolute;
        bottom: 0;
        margin: 0;
        padding: 20px;
        background-color: var(--color-primary-blue);
        color: var(--white-color-ffffff);
        font-size: 14pt;
    }
}

@media (min-width: 1200px) {
    .bannerImageOverlay {
        padding: 30px;
    }

    .page-container {
        margin: 20px 35px 20px 35px;
    }
}

@media screen and (max-width: 480px) {
    .page-container {
        margin: 20px 5px 20px 5px;
    }
}

.standard-ul {
    padding-left: 30px;
    list-style: bullet;
    list-style-type: circle;
}

.standard-ul li {

}

/*================================================================================
					start of product page
================================================================================*/
.overlayContainer, .srOverlayContainer {
    z-index: 9;
    position: absolute;
    top: 0;
    right: 0px;
}

.product-page-title {
    color: blue;
}

.overlayContainer img {
    max-width: 120px;
    max-height: 120px;
}


.product-display .bonus-points-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 153px;
    height: 35px;
    background-image: url('/img/bonus-points-cut.png');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.75;
}
.product-display {
    /*float:left;
	width:100%;
	min-height:320px;
	margin:0 20px 0 0;*/

    margin-bottom: 30px;
}

.main-img-wrp {
    position: relative;
    /*min-height:160px;*/
    width: 100%;
    overflow: hidden;
    /*float:left;*/
    text-align: center;
    /*border:1px solid var(--border-color-c4c4c4);
	padding:20px;*/
}

.product-display .short-desc {
    font-weight: bold;
}

/*#product_gallery{
	width: 100%;
	height: 100px;
	padding:0;
}*/
.product-thumb {
    width: 70px;
    height: 90px;
    margin: 10px 10px 10px 0;
    padding: 10px;
    float: left;
    overflow: hidden;
    border: 1px solid var(--product-thumb-border-color);
    text-align: center;
}

.product-thumb img {
    max-height: 100%;
    overflow: hidden;
    cursor: pointer;
}

.product-thumb-last {
    margin: 10px 0 10px 0;
}

.product-details {
    width: 100%;
    padding: 10px;
    float: right;
    border: 1px solid var(--border-color-c4c4c4);
    background-color: var(--color-silver);
}

.product-details-list,
.product-details-list ul {
    width: 100%;
    padding: 0;
    float: left;
    list-style: none;
}

.product-details-list li ul li {
    width: 50%;
    float: left;
    text-align: right;
}

.product-details-list li ul li:first-child {
    text-align: left;
}

.product-details-list > li {
    width: 100%;
    margin: 3px 0;
    float: left;
}

.product-details .price {
    color: var(--color-purple-4d2a67);
    font-size: 30px;
    font-family: Arial, sans-serif;
    text-align: center;
}

.product-details .price .currency {
    font-size: 0.8em;
}

.product-details .rrp-price {
    display: inline-block;
    width: 100%;
    color: var(--color-red-db484e);
    font-size: 20px;
    text-decoration: line-through;
}

.product-details .rrp-price .value {
    text-decoration: line-through;
}

.product-details .price-terms {
    margin: 0;
    font-size: 12px;
    line-height: 14px;
}

.product-details .quantity {
    line-height: 30px;
}

.option-quantity {
    width: 60px;
    height: 30px;
    border: 1px solid var(--border-color-c4c4c4);
    font-size: 14px;
    text-align: center;
}

#addToBasket {
    width: 100%;
    /*margin:10px 0 0 0;*/
}

.ui-widget-header {
    background-color: var(--border-color-c4c4c4);
    color: var(--color-black);
}

.product-tags-list {
    width: 100%;
    margin: 0 0 0 -30px;
    float: left;
    line-height: 18px;
}

.product-tags-list > li {
    width: 50%;
    padding: 0 0 10px 30px;
    float: left;
}

.product-tags-list li ul li {
    width: 50%;
    float: left;
}

.product-tags-list li ul li:first-child {
    font-weight: 600;
}

.product-tags-list li.clearfix {
    clear: both;
}

.social-wrp {
    width: 100%;
    margin: 0 0 20px 0;
    float: left;

}

.product-rating {
    display: inline-block;
    height: 16px;
    float: left;
    line-height: 16px;
}

.addthis-container {
    display: inline-block;
    width: 150px;
    float: right;
}

.addthis-container a.addthis_button {
    float: right;
}

.product-price {
    margin-bottom: 10px;
    color: var(--color-sapphire);
    font-weight: bold;
    font-size: 14px;
}

.product-sale-price {
    width: 100%;
    margin: 0;
    float: left;
    color: var(--color-red);
    font-weight: bold;
    font-size: 14px;
    text-decoration: line-through
}

.product-status {
    width: 100%;
    float: left;
}

.product-code {
    margin: 0 0 10px 0;
    float: left;
    color: var(--color-sapphire);
}

.product-status-title {
    width: 110px;
    float: left;
}

.status-green {
    color: var(--status-green-color);
}

.status-red {
    color: var(--status-red-color);
}

.product-option {
    margin: 0 0 15px 0;
}

select.productOpt {
    width: 187px;
    height: 28px;
    margin-top: 7px;
    border: 2px solid var(--productopt-border-color);
    color: var(--productopt-text-color);
    font-weight: bold;
    font-size: 12px;
    text-align: center;
}


select.productOpt option {
    padding: 0 7px 0 5px;
}

.product-add-basket {
    width: 100%;
    float: left;
}

.option-bar {
    width: 100%;
    height: 35px;
    float: left;
}

.option-value {

}

.option-label {
    display: inline-block;
    width: 100px;
    margin: 0 10px 0 0;
    color: var(--color-sapphire);
    font-size: 14px;
}

.option-quantity {
    font-size: 16px;
    text-align: center;
}

#frmTotalTxt {
    margin: 0 0 0 50px;
}

#frmTotal {
    margin: 0 0 0 10px;
    font-size: 20px;
}

#product_tab {
    float: left;
}

.product_tab {
    height: 45px;
    margin: 0 5px 0 0;
    padding: 0 20px;
    float: left;
    border: 2px solid var(--color-celestial-silver);
    border-bottom: 0;
    border-radius: 20px 20px 0px 0px;
    background-color: var(--white-color-ffffff);
    font-size: 14px;
    line-height: 45px;
    cursor: pointer;
}

.tab_selected {
    border: 0px solid var(--color-celestial-silver);
    border-radius: 20px 20px 0px 0px;
    background-color: var(--color-sapphire);
    color: var(--white-color-ffffff);
}

.product_tab_content {
    width: 500px;
    margin-top: 45px;
    padding: 20px;
    border: 2px solid var(--color-celestial-silver);
    color: var(--color-sapphire);
}

.reviews-header {
    width: 100%;
    margin: 0 0 30px 0;
    padding: 20px 0;
    float: left;
    border-bottom: 1px solid var(--reviews-header-border-color);
    line-height: 25px;
}

#rh_title {
    margin: 0 10px 0 0;
    float: left;
}

#rh_overall {
    display: inline-block;
    height: 25px;
    float: left;
    font-size: 14px;
}

#rh_overall .stars {
    margin: 3px 10px 0 0;
}

#rh_link {
    width: auto;
    float: right;
    font-size: 15px;
    text-align: center;
}

.leave-review-wrp {
    position: relative;
    top: -5px;
    width: 155px;
    float: right;
    text-align: right;
}

.leave-review-wrp a.yellowButton {
    font-size: 15px;
}

#leaveReviewMsg {
    width: 100%;
    float: left;
}

.review-box {
    width: 100%;
    margin: 0 0 30px 0;
    padding: 0 0 5px 0;
    float: left;
    border-bottom: 1px solid var(--review-box-border-color);
}

.review-title {
    width: 100%;
    float: left;
    font-size: 20px;
}

.review-rating {
    width: 100%;
    margin: 5px 0;
    float: left;
}

.review-customer {
    width: 100%;
    margin: 0 0 20px 0;
    float: left;
    color: var(--review-customer-color);
}


.review-desc {
    width: 100%;
    margin: 0 0 20px 0;
    float: left;
}


.related-product-img {
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.related-product-img img.img-bg {
    filter: alpha(opacity=0);
    opacity: 0;
}

/* Decimal round up messages*/
#roundMessage {
    display: block;
    margin: 0;

    padding-left: 115px;
}

/* Product inter site back links */
.back_links {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Product message */
.product-message {
    margin-bottom: 20px;
}

.product-message > p:last-child {
    margin-bottom: 0;
}


/* =============================================================
	CHECKOUT CSS
   ============================================================= */
.wrapper-checkout {
}

.checkout-buttons {
    float: right;
}

.checkout-button {
    display: inline-block;
    margin: 10px;
    font-size: 14px;
}

@media screen and (max-width: 480px) {
    .checkout-button {
        width: calc(100% - 20px);
    }

    .checkout-buttons {
        float: none;
    }
}

.editaddress {
    padding: 2px 10px;
    font-size: 16px;
}

.deladdresseditbtn, .deladdresseditbtncancel, .billaddresseditbtn, .billaddresseditbtncancel {
    float: right;
}

/* checkout account */
.full-box {
    width: 100%;
    height: auto;
    min-height: 270px;
    padding: 10px;
    float: left;
}

.registered-login {
    max-width: 700px;
    margin: 0 auto;
}

.account-box {
    min-width: 32%;
    height: auto;
    min-height: 270px;
    padding: 10px;
    float: left;
}

.account-box-title {
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
}

.new-customer {
    margin: 0 2%;
}

.account-form-atom {
    margin: 15px 0 0 0;
}

.required-indicator {
    color: var(--required-indicator-color);
}

.account-form-label {
    display: block;
    width: 100%;
    height: auto;
    margin: 5px 0 5px 0;
}

.account-form-input {
    display: block;
    width: 100%;
    background-color: var(--white-color-ffffff);
}

.account-form-button,
a.account-form-button {
    -webkit-box-shadow: 1px 1px 2px 0px var(--box-smokey-gray);
    -moz-box-shadow: 1px 1px 2px 0px var(--box-smokey-gray);
    padding: 20px 25px;
    border: 1px solid var(--color-silver);
    box-shadow: 1px 1px 2px 0px var(--box-smokey-gray);
}

a.account-form-button:hover {
    background-color: var(--account-button-hover-bg-color);
    color: var(--white-color-ffffff);
    text-decoration: none;
}

.account-form-atom input[type="submit"] {
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: inline-block;
    position: relative;
    border-radius: 11px;
    color: var(--white-color-ffffff);
    background-color: var(--btn-green-color);
    /* box-shadow: 0 1px 5px var(--box-shadow-color-10); */
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.account-form-atom input[type="submit"]:active,
.account-form-atom input[type="submit"]:hover {
    /*box-shadow: 0 5px 15px var(--box-shadow-color-30);*/
    background-color: var(--btn-hover-green-color);

}

.account-form-atom input[type="submit"]::after {
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    box-shadow: 0 5px 15px var(--box-shadow-color-30);
    content: "";
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}


.account-form-atom input[type="submit"]:hover::after {
    opacity: 1;
}

/* checkout register */
.newaccount-form-atom {
    display: block;
    margin: 15px 0;
}

.newaccount-form-label {
    display: inline-block;
    width: 20%;
}

.newaccount-form-input {
    display: inline-block;
    width: 40%;
    background-color: var(--white-color-ffffff);
}

/* checkout delivery */
.prev-address-picker {
    display: block;
    margin: 10px 0;
}

.prev-address-entry {
    display: block;
    padding: 5px 0;
    cursor: pointer;
}

.prev-address-entry:hover {
    background-color: var(--color-silver);
}

.address-form {
    display: block;
    margin: 10px 0;
}

.address-form-section {
    margin: 0 0 25px 0;
}

.address-form-atom {
    display: block;
    margin: 10px 0;
}

.address-form-label {
    display: inline-block;
    width: 40%;
}

.address-form-input {
    display: inline-block;
    width: 40%;
    background-color: var(--white-color-ffffff);
}

.checkout-form-select {
    min-width: 40%;
}

.checkout-form-select option {
    padding: 0 10px 0 5px;
}

/* checkout-review */
.checkout-review-content {
    width: 100%;
    margin: 10px 0;
    float: left;
    line-height: 16px;
}

.checkout-review-side {
    width: 50%;
    padding: 0 0 0 15px;
    float: left;
}

.review-address-side {
    padding: 0 15px 0 0;
}

.checkout-review-mini {
    margin: 0 0 20px 0;
}

.checkout-header {
    margin-bottom: 20px;
    padding: 5px 15px;
    border: 1px solid var(--color-silver);
}

.checkout-header h3 {
    display: inline-block;
    margin: 15px 0;
}

.checkout-review-mini p {
    margin: 0;
    padding: 0 5px;
    font-weight: bold;
}

.rb-tr {
    width: 100%;
    margin: 0 0 5px 0;
    float: left;
    border-bottom: 1px solid var(--color-silver);
}

.rb-total-tr {
    width: 100%;
    margin: 0 0 5px 0;
    float: left;
}

.rb-th {
    margin: 10px 0 5px 0;
    border: 1px solid var(--color-silver);
    font-weight: bold;
}

.rb-td {
    width: 10%;
    padding: 5px;
    float: left;
    overflow: hidden;
    text-align: center;
}

.rb-td-right {
    width: 10%;
    padding: 5px;
    float: left;
    text-align: right;
}

.rb-product {
    width: 38%;
    text-align: left;
}

.rs-narrow {
    width: 8%;
}

.rs-narrow input {
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    line-height: 1;
}

.rb-total-td {
    width: 20%;
    margin: 0 0 0 70%;
    padding: 5px;
    float: left;
    font-weight: bold;
    text-align: left;
}

.rb-grand-total {
    background-color: var(--color-silver);
}

#finalreview .rb-product {
    width: 60%;
}

/** basket **/
.promo-form-atom {
    display: block;
    margin: 10px 0;
}

.promo-form-label {
    display: inline-block;
    width: 20%;
}

.promo-form-input {
    display: inline-block;
    width: 40%;
    background-color: var(--white-color-ffffff);
}

.submit-promo {
    margin: 0 0 0 10px;
}

.basket_form input[type="image"] {
    margin: 0 5px;
    vertical-align: text-top;
}

.basket_form input[type="text"] {
    max-width: 50px;
    margin: 0 5px;
    text-align: center;
}

/* VOUCHERS */

.voucher-message-form {
    display: none;
}

.voucher-textarea {
    display: block;

    width: 200px;
    min-width: 200px;
    min-height: 100px;
    margin-bottom: 10px;
}

.btn-remove-voucher-message, .add-voucher-message, .vocuher-text {
    padding: 0;
    border: none;
    background-color: transparent;
    color: #acc7e2 !important;
    font-weight: bold;
    font-size: 12px;
    line-height: 18px;
    font-family: "Arial", "Helvetica", sans-serif;
    text-decoration: none;
    text-transform: none;
}

.edit-voucher-message {
    text-decoration: underline !important;
}

/* END VOUCHERS */


/*================================================================================ start of recently_viewed products ================================================================================*/
.recently_viewed {
    position: relative;
    width: 100%;
    min-height: 170px;
    margin: 20px 0;
    padding: 6px;
    border: 1px solid var(--border-color-recently-viewed);
}


.recently_viewed p {
    margin: 2px 0
}

.recently_viewed a {
    color: var(--text-color-recently-viewed);
    font-size: 14px;
    text-decoration: none;
}

.recently_viewed a:hover {
    color: var(--text-color-recently-viewed);
    text-decoration: underline;
}

#sliderRecentlyViewed {
    margin: 20px 0;
}

#sliderRecentlyViewed div {
    width: 145px;
    height: 155px;
    margin: 0 5px;
    float: left;
    text-align: center
}

a.prev {
    display: block;
    position: absolute;
    top: 100px;
    left: 5px;
    width: 20px;
    height: 20px;
    background: url(/img/recent_items_arrow_prev.png) no-repeat transparent
}

a.next {
    display: block;
    position: absolute;
    top: 100px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: url(/img/recent_items_arrow_next.png) no-repeat transparent
}

a.prev span, a.next span {
    display: none;
}

/*================================================================================ start of styles used for wysisyg page ================================================================================*/
.wysisyg-page ol {
    margin-bottom: 20px;
    counter-reset: item
}

.wysisyg-page li {
    display: block
}

.wysisyg-page li:before {
    content: counters(item, ".") " ";
    counter-increment: item
}

.wysisyg-page li li {
    margin-left: 20px
}


/*================================================================================ start of ckeditor styles ================================================================================*/
.cke_show_borders {
    margin: 2px;
    background: var(--white-color-ffffff)
}


.stage2 {
    display: none;
    font-size: 12px
}


/* Choose Account */
.account-form-wrapper {
    margin-top: 30px;
}

.account-page input[type="text"],
.account-page input[type="password"] {
    padding: 12px 20px;
    border: 2px solid var(--border-grey-color);
    color: var(--color-grey-858384);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.account-page label {
    margin-bottom: 10px;
    color: var(--color-primary-blue);
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
}

.account-form-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    z-index: 1;
    position: relative;
    padding: 12px 20px;
    border: 2px solid var(--border-grey-color);
    color: var(--color-grey-858384);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}


.account-select-wrapper {
    position: relative;
}

.account-select-wrapper::after {
    z-index: 10;
    position: absolute;
    top: 2px;
    right: 10px;
    content: "\25BE";
    color: var(--color-primary-orange-main);
    font-size: 24px;
    line-height: 50px;
    pointer-events: none;
}

.account-form-wrapper .account-form-label {
    margin-bottom: 10px;
    color: var(--color-primary-blue);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.account-form-wrapper input[type="submit"] {
    margin-top: 15px;
}

.account-info-text {
    color: var(--color-grey-858384);
}

/* Account Details */
.account-details-wrapper > .row {
    margin-bottom: 10px;
}

.account_details_conatainer h4,
.account_details_conatainer label {
    font-weight: 500;
}

.account-breadcrumbs {
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 12px;
    line-height: 13px;
}

.account-breadcrumbs a {
    font-weight: 500;
}

.account-breadcrumbs a:hover {
    text-decoration: none;
}

.account-breadcrumbs i {
    color: var(--color-primary-orange-main);
}

.account-breadcrumbs a > h6 {
    margin-left: 5px;
}

.account-breadcrumbs a > span,
.account-breadcrumbs a > h6 {
    float: left;
}

.account_details_conatainer h4 {
    margin-bottom: 10px;
}

.account-page .account-form-atom {
    margin: 0 0 30px 0;
}

.account-form-atom input.button-account {
    font-size: 18px;
    line-height: 28px;
    min-width: 150px;
    /* height: 50px; */
}

@media only screen and (max-width: 991px) {
    .account-details-changepassword {
        margin-top: 60px;
    }
}

@media (max-width: 767px) {


    .account-form-atom input.button-account {
        /* width: 100%; */
        display: block;
        margin: 0 auto;
    }

    .account-form-atom input.button-account.mobile-no-x-padding {
        padding-right: 10px;
        padding-left: 10px;
    }
}


/* Account your orders */
.account-orders-table-wrapper {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid var(--border-grey-color);
    border-radius: 3px;
}

.account-orders-table-wrapper .account-orders-table-header {
    padding: 9px 15px;
    background-color: var(--color-light-blue);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
}

.account-orders-table-wrapper .account-orders-table-header > span:first-child {
    margin-right: 30px;
}

.account-orders-table-wrapper .account-orders-table-body-main {
    padding: 20px 0;
}

.account-orders-table-wrapper .table-row-cell-heading {
    margin-bottom: 5px;
}

.account-orders-table-wrapper .table-row-cell-totalvalue {
    font-weight: 500;
}

.account-orders-table-wrapper .table-row-cell-value {
    font-weight: 300;
}

.account-orders-table-wrapper .account-table-expand-button {
    width: calc(100% - 15px);
}

.account-orders-table-wrapper a.account-table-expand-button:hover,
.account-orders-table-wrapper a.account-table-expand-button:active {
    box-shadow: none;
    text-decoration: none;
}

.table-orders-lines-body > .row {
    display: block;
    margin: 10px 0;
    padding: 12px 0;
    background-color: var(--color-light-gray);
}

.table-orders-lines-header {
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--color-midnight-gray);
    font-weight: 500;
    font-size: 14px;
}

.table-orders-lines-body {
    color: var(--table-orders-lines-body-color);
    font-size: 12px;
}

.order-lines-wrapper {
    display: block;
    margin-top: 20px;
    margin-bottom: 10px;
}

.table-orders-lines-body a {
    color: var(--color-primary-blue);
    font-weight: 300;
    line-height: 18px;
    text-decoration: underline;
}

.account-orders-table-body-main .primary-orange {
    font-weight: 500;
}

.account-orders-table-body-main .button-account {
    padding-right: 20px !important;
    padding-left: 20px !important;
}

@media (max-width: 991px) {
    .account-orders-table-wrapper {
        margin-bottom: 20px;
    }

    .table-orders-lines-body a {
        font-weight: 500;
    }

    .account-orders-table-wrapper .account-orders-table-body-main {
        padding-bottom: 0;
    }

    .account-orders-table-wrapper .account-table-expand-button {
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        width: 100%;
        margin-top: 20px;
        border: none;
        border-top: 1px solid var(--border-grey-color);
        border-radius: 0;
    }

    .account-orders-table-wrapper .table-row-cell-totalvalue,
    .account-orders-table-wrapper .table-row-cell-value {
        text-align: right;
    }

    .account-orders-table-header span:nth-child(2) {
        float: right;
    }

    .order-line-row {
        margin-bottom: 8px;
        line-height: 24px;
    }

    .account-orders-table-wrapper .button-account {
        margin-top: 20px;
    }

    .account-orders-table-body-main .table-order-value {
        margin-top: 15px;
    }
}


/*
==============================================================================================

============================================================================================== */


.reviewContainer {
    clear: both;
}

#reviewForm {
    clear: both;
}

#reviewProcessing, #reviewMessage {
    display: none;
    margin-bottom: 30px;
    clear: both;
}

#raty {
    display: inline-block;
    height: 20px;
    margin-top: 3px;
    margin-bottom: 10px;
}

#reviewForm label {
    width: 130px;
    float: left;
}

#reviewForm input[type="text"], #reviewForm input[type="email"], #reviewForm textarea {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}

#reviewForm input, #reviewForm textarea {
    margin-bottom: 10px;
}

#reviewForm input[type="text"], #reviewForm input[type="email"] {
    width: 280px;
}

#reviewForm textarea {
    width: 280px;
    height: 120px;
}


/*
==============================================================================================
	Media Queries CSS
============================================================================================== */
@media screen and (max-width: 1240px) {
    .bx-wrapper .bx-prev {
        left: 0;
    }

    .bx-wrapper .bx-next {
        right: 0;
    }
}

@media screen and (max-width: 1023px) {
    .product-details-list > li > ul > li {
        width: 100%;
        margin: 0 0 10px 0;
    }

    .home-side-box-contents .heading {
        font-size: 15px;
        line-height: 20px;
    }

    .home-side-box-contents .heading-small {
        font-size: 12px;
    }
}

@media screen and (max-width: 960px) {
    .footer-nav > li {
        max-width: none;
    }

    #footer_nav {
        width: 100%;
    }

    #footer_nav > li {
        width: 25%;
        padding: 0 10px;
        text-align: center;
    }

    #footer_contact {
        width: 100%;
    }

    #footer_contact > li {
        float: none;
        text-align: center;
    }

    #footer_bottom {
        margin-top: 20px;
    }

    .frame-price,
    .frame-add {
        width: 50%;
        font-size: 14px;
    }

    .frame-add span {
        display: none;
    }

}


/* sequential mobile MENU*/
/* hide all sequential mobile navs by default */
.nav.sequential-mobile {
    display: none;
}

/* but display just the first on mobile */
@media (max-width: 991px) {
    .nav.sequential-mobile.open {
        display: block;
    }

    .nav.sequential-mobile a.parent-view-all {
        color: var(--color-minty-green) !important;
    }

    /* sequential mobile MENU with mega menus as mega menus */
    .nav.sequential-mobile.open .mega-menu-item a {
        padding-left: 48px !important;
    }

    .nav.sequential-mobile.open .mega-menu-item a.mega-menu-item-heading {
        padding-left: 15px !important;
        line-height: 26px !important;
    }

    #offcanvas_menu .nav.sequential {
        display: none;
    }
}

/* sequential desktop MENU*/
.sequential-dropdown-wrp {
    display: none;
    z-index: 20;
    position: absolute;
    top: calc(100% - 44px);
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    /* border-top: 2px solid var(--color-primary-orange-main); */
    transition: all 200ms ease-in-out;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
}

.nav.sequential > li.open,
.nav.sequential > li.open a {
    /* color: var(--main-text-color); */
}

.nav.sequential > li.open > .sequential-dropdown-wrp {
    display: block;
}

.nav.sequential > li > .heading > a {
    border: 0;
}

.nav.sequential > li.has-dropdown > a > i {
    color: var(--color-new-kff-primary-blue);
}

.nav.sequential > li.open.has-dropdown > a > i {
    color: var(--color-new-kff-primary-blue);
}

.nav.sequential .dropdown-wrp .dropdown-list > li > a {
    margin-bottom: 0;
}

/* overwriting the simple-dropdown to work with clicks on sequential menu */
/* and reusing the dropdown-wrp styles for this one */
.nav.sequential > li.simple-dropdown {
    position: relative;
}

.nav.sequential > li.simple-dropdown:hover > .dropdown-wrp {
    display: none;
}

.nav.sequential > li.simple-dropdown.open > .dropdown-wrp {
    display: block;
    z-index: 20;
    padding: 20px 0;
    border-top: 2px solid var(--color-primary-orange-main);
    border-bottom: none;
}

.nav.sequential > li.simple-dropdown a.parent-view-all {
    color: var(--color-minty-green);
}


/*sequential dropdown*/
.sequential-dropdown {
    -ms-flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    float: left;
    background: var(--white-color-ffffff);
    box-shadow: 0px 3px 6px var(--color-opaque-midnight);
}

.sequential-dropdown ul {
    display: none;
    padding: 20px 0;
    border-right: 1px solid var(--sequential-border-color);
}

.sequential-dropdown ul.open {
    display: block;
}

.sequential .dropdown-wrp > ul > li > a {
    color: var(--color-primary-blue);
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
}

.sequential .dropdown-wrp > ul > li > a.parent-view-all {
    color: var(--color-primary-orange-main) !important;
    font-weight: 500;
    font-size: 14px;
    line-height: 26px;
}

.sequential .dropdown-wrp > ul > li > a:not(.parent-view-all):hover {
    background-color: var(--color-primary-orange-main);
    color: var(--white-color-ffffff);
}

.sequential .simple-dropdown .dropdown-wrp {
    box-shadow: 0px 3px 6px var(--color-opaque-midnight);
}

.sequential-dropdown ul li a,
.dropdown-wrp .dropdown-list > li > a {
    display: block;
    position: relative;
    padding: 7px 48px 7px 20px;
    border-bottom: 0;
    color: var(--color-primary-blue);
    font-weight: 400;
    text-align: left;
    /*height: 30px;*/
}

.sequential-dropdown ul li a:hover {
    border-bottom: 0;
    /* background-color: var(--color-primary-orange-main); */
    color: var(--white-color-ffffff);
}

.sequential-dropdown ul li a.open {
    background-color: var(--color-primary-orange-main);
    color: var(--white-color-ffffff);
}

.sequential-dropdown ul li a.parent-view-all {
    color: var(--color-primary-orange-main);
    font-weight: 500;
}

.sequential-dropdown ul li a.parent-view-all:hover {
    /* color: var(--color-new-kff-primary-blue); */
}

.sequential-dropdown ul li a:after {
    position: absolute;
    top: 2px;
    right: 20px;
    content: "\f054";
    color: var(--color-primary-orange-main);
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    font-family: "Font Awesome 5 Regular";
}

.sequential-dropdown ul li a.open:after,
.sequential-dropdown ul li a:hover:after {
    color: var(--white-color-ffffff);
}


.sequential-desktop-menu {
    width: 25%;
    float: left;
}

.sequential-desktop-menu .level-1 {
    margin-left: 0;
}

.sequential-desktop-menu .level-2 {
    margin-left: 25%;
}

.sequential-desktop-menu .level-3 {
    margin-left: 50%;
}

.sequential-desktop-menu .level-4 {
    margin-left: 75%;
}

@media (max-width: 991px) {

    .nav-container {
        text-align: left;
    }

    #offcanvas {
        display: none;
        z-index: 999;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
    }

    #offcanvas.offcanvas-show {
        display: block;
    }

    #offcanvas_menu {
        z-index: 1000;
        position: absolute;
        top: -44px;
        right: 100%;
        width: 100%;
        border-top: 2px solid var(--color-primary-orange-main);
        background: var(--white-color-ffffff);
    }

    #offcanvas_menu::before {
        z-index: 1000;
        position: absolute;
        top: -10px;
        left: 20px;
        border-right: 10px solid transparent;
        border-bottom: 10px solid var(--color-primary-orange-main);
        border-left: 10px solid transparent;
        content: "";
    }

    #offcanvas_menu .nav {
        padding: 0;
        /*sequential mobile change - remove start */
        /*display:block;*/
        /*sequential mobile change - remove end */
    }

    /*sequential mobile change - add start */
    #offcanvas_menu .nav.accordion {
        display: block;
    }

    /*sequential mobile change - add end*/
    .nav-container #offcanvas_menu .nav .heading {
        margin: 0;
        color: var(--nav-heading-color);
        font-weight: 400;
        font-size: 18px;
    }


    .nav-container #offcanvas_menu .nav .has-dropdown.opened > a > .heading {
        color: var(--white-color-ffffff);
    }

    .nav-container #offcanvas_menu .nav li {
        position: relative;
        width: 100%;
    }

    .nav-container #offcanvas_menu .nav li.active {
        color: var(--color-primary-orange-main);
    }

    .nav-container #offcanvas_menu .dropdown-list,
    .nav-container #offcanvas_menu .dropdown-wrp {
        min-width: 0;
    }

    .nav-container #offcanvas_menu .nav-image-elem {
        display: none;
    }

    .nav-container #offcanvas.offcanvas-show .nav li {
        margin: 0 0 0 0;
        border-bottom: 1px solid var(--border-grey-color);
    }

    .nav-container #offcanvas.offcanvas-show .nav li:hover {
        background-color: transparent;
        color: var(--white-color-ffffff);
    }

    .nav-container #offcanvas.offcanvas-show .nav li > a,
    .nav-container #offcanvas.offcanvas-show .nav li > a:hover {
        position: relative;
        width: 100%;
        padding: 16px 20px;
        border: 0;
        color: var(--main-text-color);
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        background: var(--white-color-ffffff);
        text-align: left;
    }

    .nav-container #offcanvas.offcanvas-show .nav li > a:after,
    .nav-container #offcanvas.offcanvas-show .nav li > .heading > a:after {
        position: absolute;
        top: 15px;
        right: 20px;
        content: "\f054";
        color: var(--color-primary-orange-main);
        font-weight: 400;
        font-size: 18px;
        font-family: "Font Awesome 5 Regular";
    }

    .nav-container #offcanvas.offcanvas-show .nav li.has-dropdown > a:after,
    .nav-container #offcanvas.offcanvas-show .nav li.has-dropdown > .heading > a:after {
        content: "\f067";
    }

    .nav-container #offcanvas.offcanvas-show .nav li.has-dropdown.opened,
    .nav-container #offcanvas.offcanvas-show .nav li.has-dropdown.opened:hover {
        background-color: var(--color-midnight-gray);
    }

    .nav-container #offcanvas.offcanvas-show .nav li.has-dropdown.opened > a {
        color: var(--white-color-ffffff);
    }

    .nav-container #offcanvas.offcanvas-show .nav li.has-dropdown.opened > a:after {
        content: "\f068";
        color: var(--white-color-ffffff);
    }

    .nav-container #offcanvas.offcanvas-show .nav li > .heading {
        padding: 15px 30px 15px 15px;
    }

    .nav-container #offcanvas.offcanvas-show .nav li:hover > .dropdown-wrp,
    .nav-container #offcanvas.offcanvas-show .nav li:hover > .mega-dropdown-wrp {
        display: none;
    }

    .nav-container #offcanvas.offcanvas-show .dropdown-wrp {
        position: static;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .nav-container #offcanvas.offcanvas-show .dropdown-wrp .container {
        padding-right: 0;
        padding-left: 0;
    }

    .nav-container #offcanvas.offcanvas-show .dropdown-wrp .dropdown-list {
        width: 100%;
        padding: 0;
    }

    .nav-container #offcanvas.offcanvas-show .dropdown-wrp .dropdown-list > li {
        border-top: 2px solid var(--border-grey-color);
        border-bottom: 0;
        background-color: var(--color-light-gray);
    }

    .nav-container #offcanvas.offcanvas-show .dropdown-wrp .dropdown-list > li > a {
        margin: 0;
        font-weight: 400;
        text-transform: none;
    }

    .nav-container #offcanvas.offcanvas-show .dropdown-wrp.mega-dropdown-wrp .dropdown-list > li > a {
        padding-left: 48px;
    }

    .nav-container #offcanvas.offcanvas-show .dropdown-wrp .dropdown-list > li.view-all > a {
        padding-left: 15px;
        color: var(--offcanvas-dropdown-view-all-color);
    }

    .nav-container #offcanvas.offcanvas-show .dropdown-wrp .dropdown-list > li > .heading {
        padding: 0;
    }

    .nav-container #offcanvas.offcanvas-show .dropdown-wrp .dropdown-list > li > .heading > a {
        display: block;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 48px;
        padding-left: 15px;
        border: 0;
        color: var(--offcanvas-dropdown-heading-color);
        font-weight: 500;
        text-transform: capitalize;
    }


    .nav-container #offcanvas.offcanvas-show .dropdown-wrp .dropdown-list > li > .heading span {
        padding: 0;
        border: 0;
    }

    .nav-container #offcanvas.offcanvas-show .dropdown-wrp > .dropdown-list > li > a {
        margin: 0;
        font-weight: normal;
        text-transform: none;
    }

    .nav-container #offcanvas.offcanvas-show .dropdown-wrp .dropdown-list + .dropdown-list {
        margin-top: 0;
    }

    .nav-container #offcanvas.offcanvas-show .nav li.icon > a {
        padding-left: 60px;
    }

    .nav-container #offcanvas.offcanvas-show .nav li.icon > a:before {
        position: absolute;
        top: 9px;
        left: 15px;
        width: 30px;
        height: 30px;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        content: "";
        font-size: 16px;
    }

    #menu_close_button_mobile {
        cursor: pointer;
    }

    #offcanvas.offcanvas-show .nav li.close-button,
    #offcanvas.offcanvas-show .nav li.close-button:hover {
        background-color: var(--color-primary-blue);
        font-size: 14px;
        line-height: 26px;
        text-align: center;
        cursor: pointer;
    }

    #offcanvas.offcanvas-show .nav li.close-button > a,
    #offcanvas.offcanvas-show .nav li.close-button > a:hover {
        color: var(--white-color-ffffff);
        background: var(--color-new-kff-primary-blue);
        text-align: center;
    }

    #offcanvas.offcanvas-show .nav li.close-button > a:after {
        content: "";
    }

    /* sequential mobile MENU additions*/
    /*close button*/
    a.sequential_menu_mobile_close_button {
        padding: 15px 20px !important;
        font-size: 14px !important;
        line-height: 26px !important;
        cursor: pointer;
    }

    /*child button*/
    .sequential_menu_mobile_child_button {
        cursor: pointer;
    }

    /*back button*/
    .sequential_menu_mobile_back_button {
        padding: 13px 20px !important;
        cursor: pointer;
    }

    .nav-container #offcanvas.offcanvas-show .nav li > a.sequential_menu_mobile_back_button:after,
    .nav-container #offcanvas.offcanvas-show .nav li > .heading > a.sequential_menu_mobile_back_button:after {
        top: 11px;
    }

    #offcanvas.offcanvas-show .nav li.back-button,
    #offcanvas.offcanvas-show .nav li.back-button:hover {
        background-color: var(--color-primary-orange-main);
        color: var(--white-color-ffffff);
        text-align: center;
    }

    #offcanvas.offcanvas-show .nav li.back-button > a,
    #offcanvas.offcanvas-show .nav li.back-button > a:hover {
        color: var(--white-color-ffffff);
        font-size: 16px;
        line-height: 32px;
        background: var(--color-new-kff-primary-blue);
        text-align: center;
    }

    #offcanvas.offcanvas-show .nav li.back-button > a:after {
        right: auto;
        left: 20px;
        content: "\f053";
        color: var(--white-color-ffffff);
    }
}

/* sequential mobile MENU*/
/* hide all sequential mobile navs by default */
.nav.sequential-mobile {
    display: none;
}

/* but display just the first on mobile */
@media (max-width: 991px) {
    .nav.sequential-mobile.open {
        display: block;
    }

    .nav.sequential-mobile a.parent-view-all {
        color: var(--color-primary-orange-main) !important;
    }

    /* sequential mobile MENU with mega menus as mega menus */
    .nav.sequential-mobile.open .mega-menu-item a {
        padding-left: 48px !important;
    }

    .nav.sequential-mobile.open .mega-menu-item a.mega-menu-item-heading {
        padding-left: 15px !important;
        line-height: 26px !important;
    }

    #offcanvas_menu .nav.sequential {
        display: none;
    }
}

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

    #ftb_copy,
    #ftb_contact {
        width: 100%;
        margin: 5px 0 0 0;
        float: none;
        text-align: center;
    }

    .related-product-list li {
        width: 33.33333333333333%;
    }

    /* checkout */
    .rb-total-tr .rb-td-right {
        width: 50%;
        text-align: right;
    }

    .rb-total-td {
        width: 50%;
        margin: 0;
    }

    .rb-td-right.responsive,
    .rb-td,
    .rs-narrow {
        width: 15%;
    }

    #finalreview .rb-product,
    .rb-product {
        width: 40%;
    }

    .checkout-review-side {
        width: 100%;
        padding: 0;
    }

    .slider_heading {
        margin-top: 4%;
        color: white;
        font-weight: bold;
        font-size: 29px;
        text-transform: uppercase;
    }

    .slider_message {
        color: white;
        font-weight: 300;
        font-size: 30px;
        line-height: 40px;
    }

    .slider_call_to_action {
        margin-top: 2%;
        margin-bottom: 4%;
        color: white;
        font-size: 15px;
    }

    .home-side-box-contents .heading {
        font-size: 35px;
        line-height: 40px;
    }

    .home-side-box-contents .heading-small {
        font-size: 20px;
    }

}

@media screen and (max-width: 620px) {
    #footer_nav {
        display: none;
    }

}

@media screen and (max-width: 580px) {
    .related-product-list,
    .section-product-list {
        margin: 0 0 0 -10px;
    }

    .related-product-list li,
    .section-product-list li {
        width: 50%;
        padding: 0 0 10px 10px;
    }

    .address-form-label {
        width: 100%;
        margin: 0 0 10px 0;
    }

    .address-form-input {
        width: 70%;
    }


}

@media screen and (max-width: 480px) {
    .fancy {
        font-size: 24px;
    }

    .fancy:before {
        border: 0;
    }

    .product-tags-list > li {
        width: 100%;
    }
}

@media screen and (max-width: 479px) {
    #finalreview .rb-td-right.responsive,
    #finalreview .rb-td {
        width: 25%;
    }

    #finalreview .rb-product {
        width: 50%;
    }
}

@media screen and (max-width: 360px) {
    .wrapper {
        padding: 0 10px;
    }

}

/*
==============================================================================================
	KFF Styles
============================================================================================== */

/* PADDING COL 5px */
.row.padding-5 {
    margin-right: -5px;
    margin-left: -5px;
}

.row.padding-5 > div[class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

/*LISTS*/
.list-inline li a.button {
    display: block;
}

.list-right {
    margin-right: -5px;
    margin-left: 0;
    text-align: right;
}

.list-inline.s0 {
    margin-left: -0px;
}

.list-inline.s0 > li {
    padding-right: 0px;
    padding-left: 0px;
}

.list-right.s0 {
    margin-right: -0px;
}

.list-inline.s10 {
    /* margin-left: -10px; */
}

.list-inline.s10 > li {
    /* padding-right: 10px; */
    padding-left: 10px;
}

.list-right.s10 {
    /* margin-right: -10px; */
}

.list-inline.s20 {
    margin-left: -20px;
}

.list-inline.s20 > li {
    padding-right: 20px;
    padding-left: 20px;
}

.list-right.s20 {
    margin-right: -20px;
}

.list-add-basket-buttons {
    width: 100%;
    margin-bottom: 15px;
}



.list-add-basket-buttons li {
    width: 33.33333333%;
}

.list-add-basket-buttons button.small,
.list-add-basket-buttons a.small,
.list-add-basket-buttons input[type="text"].small,
.list-add-basket-buttons input[type="submit"].small {
    height: 46px;
}

.list-add-basket-buttons button.small {
width: 100%;
padding-bottom: 1px;
}


/*FOOTER BOTTOM*/
.footer-kff-bottom {
    background-color: var(--color-primary-blue);
    color: var(--white-color-ffffff);
}

.footer-kff-bottom ul {
    margin-bottom: 0;
    padding: 10px 0;
}

@media (max-width: 767px) {
    .footer-kff-bottom {
        padding-top: 10px;
        text-align: center;
    }

    .footer-kff-bottom ul:not(.footer-sm-links) {
        padding: 0;
    }

    .footer-kff-bottom ul:not(.footer-sm-links) li {
        width: 100%;
        padding-bottom: 10px;
        text-align: center;
    }

    .footer-kff-bottom ul.footer-sm-links {
        text-align: center;
    }
}

/*FOOTER*/
.footer {
    margin-top: 40px;
    background-color: var(--menu-bg-color-f4f5f6);
    color: var(--main-text-color);
}

/* this removes the margin from all subsequent div's of class 'footer' */
.footer ~ .footer {
    margin-top: 0;
}

.footer ul {
    margin-bottom: 0;
    padding: 30px 0;
}

.footer ul:not(.list-inline) .heading {
    margin-bottom: 7px;
    color: var(--main-text-color);
    text-transform: uppercase;
}

.footer ul:not(.list-inline) li {
    margin-bottom: 7px;
}

.footer-separator {
    height: 2px;
    background-color: var(--color-blue-52619e);
}

.footer a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}

@media (max-width: 767px) {
    .footer {
        text-align: center;
    }

    .footer-links-orders {
        padding-top: 30px;
        padding-bottom: 15px;
    }

    .footer-links-orders ul {
        padding: 0;
    }

    .footer-links-orders ul li {
        width: 100%;
        margin-bottom: 15px;
        text-align: center;
    }
}

/*GRID*/
.account_page {
    margin: 40px 0 40px 0;
}

@media (max-width: 767px) {
    .account_page {
        margin: 30px 0 40px 0;
    }
}

.account_page_warning {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    margin: 20px 0 0 0;
    padding: 20px 30px 20px 30px;
    border-radius: 3px;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
}

.account_page_warning p strong {
    font-size: 20px;
}

.account_page_warning p:last-child {
    margin-bottom: 0;
}

.account_page_warning a {
    font-weight: 500;
}

.account_page_warning.account_page_warning_orange {
    border: 1px solid var(--account-page-warning-orange-border-color);
    background-color: var(--account-page-warning-orange-bg-color);
    color: var(--color-primary-orange-second);
}

.account_page_warning.account_page_warning_blue {
    border: 1px solid var(--account-page-warning-blue-border-color);
    background-color: var(--account-page-warning-blue-bg-color);
    color: var(--color-primary-blue);
}

.account_page_warning.account_page_warning_grey {
    padding: 30px;
    border: none;
    background-color: var(--account-page-warning-grey-bg-color);
    color: var(--account-page-warning-grey-color);
    text-align: left;
}

.account_page_warning.account_page_warning_grey p {
    font-weight: normal;
}

.account_page_warning.account_page_warning_grey > p {
    margin-bottom: 0;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 24px;
}

.account_page_warning.account_page_warning_grey > p.small-text {
    margin-bottom: 30px;
    font-size: 11px;
    line-height: 18px;
}

.account_page_warning span {
    font-weight: bold;
}

.account_page_warning strong {
    font-weight: bold;
}

.account_page_warning a {
    color: var(--color-primary-orange-second);
    text-decoration: underline;
}

.account_page_warning a:hover {
    color: var(--color-primary-orange-second);
    text-decoration: none;
}


/* Account View Page */
.account-element-spacer {
    margin-bottom: 40px;
}

@media (max-width: 767px) {
    .account-element-spacer {
        margin-bottom: 30px;
    }
}

.account-tiles-wrapper .equalHeight {
    -webkit-flex-wrap: wrap;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.account-tiles-wrapper .equalHeight > [class*='col-'] {
    -webkit-flex-direction: column;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
}

.account-tiles-wrapper .equalHeight > [class*='col-']:before,
.account-tiles-wrapper .equalHeight > [class*='col-']:after,
.account-tiles-wrapper .equalHeight:before,
.account-tiles-wrapper .equalHeight:after {
    display: none;
}

.account-pod-wrapper > a > div {
    height: calc(100% - 30px);
    padding: 0 !important;
}

.pod-wrapper.account-pod-wrapper > a > div:first-of-type {
    margin-bottom: 30px;
}

.loyalty-account-pod.pod-wrapper.account-pod-wrapper .pod-inner {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 50;
    top: 50%;
    bottom: auto;
    left: 30px;
    transform: translateY(-50%);
}

.loyalty-account-pod.pod-wrapper > a > div::after {
    z-index: 1;
    background: var(--loyalty-gradient-color);
}

@media (min-width: 768px) {
    .account-row-force-height,
    .account-row-force-height .pod-cell-2 {
        min-height: 285px;
    }
}

.pod-wrapper .pod-inner p.pod-loyalty-message {
    margin-bottom: 0;
    color: var(--white-color-ffffff);
    font-weight: 400;
}

@media (max-width: 991px) and (min-width: 768px) {
    .pod-wrapper.account-pod-wrapper > a > div {
        display: block;
        width: 100%;
        float: left;
    }

    .pod-wrapper.account-pod-wrapper > a > div.pod-cell-2 {
        margin-right: 0;
    }
}

@media (max-width: 767px) {
    .pod-wrapper.account-pod-wrapper > a > div {
        height: 100%;
        padding: 120px 0 !important;
    }

    .account-tiles-wrapper .equal {
        display: block;
    }

    .pod-wrapper.account-pod-wrapper {
        margin-top: 20px;
    }

    .pod-wrapper.account-pod-wrapper > a > div:first-of-type {
        margin-bottom: 20px;
    }
}


.account-tiles-button {
    display: block;
    width: 100%;
    height: 100%;
    margin-bottom: 30px;
    padding: 33px 10px;
    border: 1px solid var(--border-grey-color);
    border-radius: 3px;
    background-color: var(--white-color-ffffff);
    box-shadow: none;
    text-align: center;
    transition: 0.3s;
}

.account-tiles-button:hover {
    text-decoration: none;
}

.account-tiles-button:hover {
    -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    box-shadow: 1px 1px 6px var(--color-opaque-midnight);
}

.account-tiles-button > .account-tile-icon {
    margin-bottom: 10px;
}

.account-tiles-button > .account-tile-icon > i,
.account-tiles-button > .account-tile-icon > span.loyalty-points {
    color: var(--color-primary-orange-main);
    font-size: 24px;
    line-height: 24px;
}

.account-tiles-button > .account-tile-text {
    color: var(--color-primary-blue);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

a.button-blue,
button.button-blue {
    padding: 15px 10px;
    border: 1px solid var(--text-color-a9b0cf);
    border-radius: 3px;
    background: none;
    box-shadow: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    text-decoration: none;
    transition: 0.3s;
}

.account-featured-wrapper .account-form-atom input[type="submit"] {
    font-size: 12px;
}

.account-form-atom a.button:hover,
a.button-blue:hover,
button.button-blue:hover {
    box-shadow: 0 5px 15px var(--box-shadow-color-30);
}

.account-featured-wrapper .popular-categories-image {
    margin-bottom: 17px;
    border: none !important;
    border-bottom: 2px solid var(--text-color-a9b0cf) !important;

}

.account-featured-wrapper p:not(.price) {
    margin-bottom: 0;
    color: var(--color-grey-858384);
}

.pack-row {
    margin-bottom: 5px;
}

@media (max-width: 767px) {
    .account-page .page-container {
        margin-right: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left: 0;
    }
}

/* Account nutritional preferences */
.account-nutritional-wrapper {
    margin-top: 60px;
}

.account-nutritional-preferences {
    display: inline-block;
    width: 100%;
    margin-top: 25px;
    border-top: 1px solid var(--border-grey-color);
}

.account-nutritional-wrapper p {
    color: var(--color-grey-858384);
    font-size: 14px;
    line-height: 24px;
}

.preferences-group .preferences-header {
    padding: 20px 0;
}

.preferences-header-border {
    border-bottom: 1px solid var(--border-grey-color);
}

.preferences-group .preferences-header:hover {
    cursor: pointer;
}

.preferences-group .preferences-header > span {
    color: var(--color-primary-blue);
    font-size: 18px;
    line-height: 27px;
}

.preferences-group .preferences-header > .preferences-header-text {
    float: left;
    font-weight: 500;
}

.preferences-group .preferences-header > .preferences-header-icon {
    float: right;
}

.preferences-group .preferences-body {
    display: inline-block;
    padding: 10px 0 20px 0;
}

.preferences-button-wrapper {
    margin-top: 40px;
}

/* Customize the label (the container) */
.account-checkbox-label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    display: block;
    position: relative;
    margin-bottom: 12px;
    padding-left: 35px;
    font-size: 22px;
    cursor: pointer;
    user-select: none;
}

.account-checkbox-label input {
    position: absolute;
    width: 0;
    height: 0;
    cursor: pointer;
    opacity: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 23px;
    height: 23px;
    border: 1px solid var(--checkmark-border-color);
    background-color: var(--white-color-ffffff);
}


@media (hover: hover) {
    .account-checkbox-label:hover input ~ .checkmark {
        border: none;
        background-color: var(--color-primary-orange-main);
        opacity: 0.9;
    }
}

.account-checkbox-label:hover input ~ .checkmark:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    display: block;
    top: 5px;
    left: 8px;
    width: 5px;
    height: 10px;
    transform: rotate(45deg);
    border: solid white;
    border-width: 0 3px 3px 0;
}

.account-checkbox-label input:checked ~ .checkmark {
    border: none;
    background-color: var(--color-primary-orange-main);
}

.checkmark:after {
    display: none;
    position: absolute;
    content: "";
}

.account-checkbox-label input:checked ~ .checkmark:after {
    display: block;
}

.account-checkbox-label .checkmark:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    top: 5px;
    left: 8px;
    width: 5px;
    height: 10px;
    transform: rotate(45deg);
    border: solid white;
    border-width: 0 3px 3px 0;
}

.preferences-select-all {
    margin-bottom: 40px;
}

.account-checkbox-selectall {
    color: var(--color-primary-blue);
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
}

.account-checkbox-text {
    color: var(--color-grey-858384);
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
}


.section {
    padding: 20px 0;
}

.homepage-section {
    /* padding: 50px 0; */
}

.separator {
    height: 2px;
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: var(--color-medium-blue);
}

.container .section:last-child {
    border-bottom: 0;
}

/*HOME STYLES*/
.home-intro {
    width: 60%;
    margin: 0 auto;
    text-align: center;
}

.home-intro a {
    position: relative;
    color: var(--color-primary-orange-main);
    font-size: 14px;
}

.home-intro h2 {
    font-weight: 500;
    font-size: 24px;
    line-height: 24px;
}

.home-intro p {
    font-weight: 300;
    font-size: 16px;
}

.home-intro p > a {
    font-weight: 500;
    font-size: 14px;
    line-height: 28px;
}

@media (max-width: 991px) {
    .home-intro {
        width: 100%;
    }
}

/* 4 col pages block - home page */
.homepage-pages-4col-wrapper {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: -10px;
    padding: 29px 0 0 0;
}

.homepage-pages-4col-wrapper > div[class*="col-"] {
    position: relative;
}

.homepage-pages-4col-wrapper .homepage-page-wrapper {
    /* display: inline-block; */
    /* margin-top: -100px; */
    /* text-align: left; */
}

.homepage-pages-4col-wrapper .homepage-page-wrapper > a:hover {
    text-decoration: none;
    cursor: pointer;
}

.homepage-pages-4col-wrapper .homepage-page-wrapper > a img:hover {
    opacity: 1;
}

.homepage-pages-4col-wrapper .homepage-page-wrapper h2 {
    font-weight: 500;
    font-size: 24px;
    line-height: 7px;
    text-align: center;
}

.homepage-pages-4col-wrapper .homepage-page-wrapper p {
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: var(--main-text-color);
    text-align: center;
}

.homepage-pages-4col-wrapper .homepage-page-wrapper img {
    margin-bottom: 28px;
    /* box-shadow: 3px 5px 5px var(--color-opaque-midnight); */
    border-radius: 15px;
}

.sameHeightWrapper {
    -webkit-flex-wrap: wrap;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}

.sameHeightCol {
    -webkit-flex-direction: column;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    float: none;
}


@media (max-width: 1299px) {
    .homepage-pages-4col-wrapper {
        background-position: center center;
        background-size: cover;
    }
}

@media (max-width: 991px) {
    .homepage-pages-4col-wrapper {
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
        background: none;
    }

    .homepage-pages-4col-wrapper .homepage-page-wrapper {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .homepage-page-wrapper h2 {
        margin-bottom: 5px;
    }

    .homepage-page-wrapper p {
        margin-bottom: 20px;
        font-size: 12px;
        line-height: 16px;
    }
}

@media (max-width: 767px) {
    .homepage-pages-4col-wrapper .homepage-page-wrapper h2 {
        font-size: 18px;
        line-height: 22px;
    }

    .homepage-pages-4col-wrapper .homepage-page-wrapper p {
        font-size: 12px;
        line-height: 16px;
    }

}

/* Homepage element pods */
.pod-wrapper > a > div {
    position: relative;
    background-position: center center !important;
    background-size: cover !important;
}

.pod-wrapper > a > div::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black);
    background: linear-gradient(0deg, var(--box-shadow-color-80) 0%, var(--box-shadow-color-00) 50%);
    content: "";
}

.left-pod-wrapper > a > div {
    padding: 250px 0;
}

.right-pod-wrapper > a > div {
    padding: 120px 0;
}

.right-pod-wrapper > a > div:first-child {
    margin-bottom: 20px;
}

.pod-wrapper .pod-inner {
    position: absolute;
    bottom: 30px;
    left: 40px;
}

.pod-wrapper .pod-inner h3 {
    z-index: 10;
    position: relative;
    margin-bottom: 0;
    padding-right: 40px;
    color: var(--white-color-ffffff);
    font-weight: 300;
    font-size: 40px;
    line-height: 48px;
}

.pod-wrapper.right-pod-wrapper .pod-inner h3 {
    font-size: 30px;
    line-height: 32px;
}

.pod-wrapper .pod-inner p {
    z-index: 10;
    position: relative;
    color: var(--color-primary-orange-main);
    font-weight: 600;
    font-size: 14px;
    line-height: 28px;
}

.pod-wrapper .pod-inner p.pod-cta {
    margin-bottom: 0;
    font-weight: 400;
}

@media (max-width: 991px) and (min-width: 768px) {
    .left-pod-wrapper {
        margin-bottom: 20px;
    }

    .left-pod-wrapper > a > div,
    .right-pod-wrapper > a > div {
        padding: 170px 15px;
    }

    .right-pod-wrapper > a > div {
        display: inline-block;
        width: calc(50% - 10px);
        float: none;
    }

    .right-pod-wrapper > a > div.pod-cell-2 {
        margin-right: 10px;
    }

    .right-pod-wrapper > a > div.pod-cell-3 {
        margin-left: 6px;
    }

    .pod-wrapper .pod-inner h3 {
        font-size: 32px;
        line-height: 36px;
    }

    .pod-wrapper.right-pod-wrapper .pod-inner h3 {
        font-size: 26px;
        line-height: 30px;
    }

    .pod-wrapper .pod-inner {
        bottom: 20px;
        left: 20px;
    }
}

@media (max-width: 767px) {
    .pod-wrapper .pod-inner {
        bottom: 20px;
        left: 20px;
    }

    .pod-wrapper .pod-inner h3,
    .pod-wrapper.right-pod-wrapper .pod-inner h3 {
        padding-right: 20px;
        font-size: 22px;
        line-height: 28px;
    }

    .left-pod-wrapper > a > div,
    .right-pod-wrapper > a > div {
        padding: 125px 0;
    }

    .pod-wrapper:not(:last-child) {
        margin-bottom: 20px;
    }
}


/* Homepage popular categories */
.popular-categories-heading {
    position: relative;
    text-align: center;
}

.popular-categories-heading h3 {
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
}

.popular-categories-heading h2::before,
.popular-categories-heading h3::before {
    position: absolute;
    bottom: 50%;
    left: 0;
    width: calc(50% - 150px);
    border-bottom: 1px solid var(--color-primary-orange-main);
    content: "";
}

.popular-categories-heading h2::after,
.popular-categories-heading h3::after {
    position: absolute;
    right: 0;
    bottom: 50%;
    width: calc(50% - 150px);
    border-bottom: 1px solid var(--color-primary-orange-main);
    content: "";
}

.popular-categories-heading h2::before,
.popular-categories-heading h2::after {
    width: calc(50% - 180px);
}

.popular-categories-wrapper {
    width: 100%;
}

.popular-categories-wrapper > div {
    /* margin-bottom: 40px; */
}

.popular-categories-wrapper a:hover {
    text-decoration: none;
}

.popular-categories-wrapper {
    text-align: center;
    /* gap: 10px; */
    /* margin-bottom: 40px; */
}

.popular-categories-wrapper .popular-categories-image {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    /* border: 1px solid var(--border-grey-color); */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
}

.popular-categories-wrapper .popular-categories-image::after {
    display: block;
    padding-bottom: 100%;
    content: "";
}

.popular-categories-wrapper h4 {
    font-weight: 500;
    text-align: center;
}

@media (max-width: 767px) {
    .popular-categories-heading h3::after,
    .popular-categories-heading h3::before {
        border: none;
    }

    .popular-categories-heading h3 {
        margin-bottom: 0;
    }

    .popular-categories-wrapper > div {
        margin-bottom: 20px;
    }

    .popular-categories-wrapper .popular-categories-image {
        margin-bottom: 10px;
    }
}

/* News articles - home page */
.homepage-news-articles-wrapper {
    display: block;
    position: relative;
    width: 100%;
    padding: 80px 0;
    background-image: URL('/img/homepage_news_background.jpg');
    background-position: center 30%;
    background-repeat: no-repeat;
}

.homepage-news-articles-wrapper h2 {
    /* margin-bottom: 35px; */
    /* margin-top: -10px; */
    font-weight: 400;
}

.homepage-news-articles-wrapper .news-article-panel {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 35px 45px 8px 45px;
    background-color: var(--white-transparent-60);
    border-radius: 10px;
    backdrop-filter: blur(7px);

    /* box-shadow: 3px 3px 6px var(--box-shadow-color-30); */
    /* opacity: 0.3; */
    /* backdrop-filter: blur(17px); */
    /*-webkit-backdrop-filter: blur(17px);*/
    /* filter: brightness(1.40); */
}

.homepage-news-articles-wrapper .article-category p {
    margin-bottom: 7px;
    color: var(--main-text-color);
    font-weight: 300;
    font-size: 12px;
    line-height: 34px;
    text-transform: uppercase;
}

.homepage-news-articles-wrapper h3 {
    font-weight: 400;
    font-size: 24px;
}

.homepage-news-articles-wrapper p {
    color: var(--main-text-color);
    font-weight: 300;
    font-size: 16px;
}

.homepage-news-articles-wrapper .article-readmore {
    color: var(--color-primary-blue);
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
}

.homepage-news-articles-slider .slick-track {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex !important;
}

.homepage-news-articles-slider .slick-slide {
    height: inherit !important;
}

.homepage-news-articles-slider .slick-dots li > button {
    border: none;
    box-shadow: none;
}

.homepage-news-articles-slider .slick-dots {
    bottom: -50px;
}

.homepage-news-articles-slider .slick-dots li {
    margin: 0 1px;
}

.homepage-news-articles-slider .slick-dots li > button::before {
    color: var(--white-color-ffffff);
    font-size: 12px;
    opacity: 1;
}

.homepage-news-articles-slider .slick-dots li:not(.slick-active) > button:hover::before {
    color: var(--color-primary-orange-main);
    opacity: 0.5;
}

.homepage-news-articles-slider .slick-dots li.slick-active > button::before {
    color: var(--color-primary-orange-main);
}

.news-articles-all-link {
    display: inline-block;
    margin-top: 15px;
}

@media (max-width: 767px) {
    .homepage-news-articles-wrapper {
        padding: 40px 0;
        background-size: cover;
    }

    .homepage-news-articles-wrapper h2 {
        margin-bottom: 20px;
    }
}

/*FEATURED PRODUCT BOX - home page*/
.featured-product {

    position: relative;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.featured-product .title {
    position: absolute;
    bottom: 0;
    width: 100%;

    padding: 15px;

    background-color: var(--featured-product-blue-transparent);
    color: var(--white-color-ffffff);
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
}


@media (min-width: 768px) {
    .featured-product .title .title-text {
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
}

.featured-product .sale-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 35%;
    height: 35%;

    background-image: url('/img/flash_sale.svg');
    background-repeat: no-repeat;
}

.best-sellers-product .title {
    background-color: rgb(90, 64, 153, 0.9);
}

/*GRAPHIC BANNERS - home page*/
.graphic-banner {
    height: 400px;
    background-position: center center;
    background-size: cover;

    background-repeat: no-repeat;
}

/*FEATURED LINK BOX - home page (bottom)*/
.featured-link .link-graphic {
    position: relative;
    height: 80px;
    display: block;
}

.featured-link .link-graphic .link-circle {

    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    transform: translate(-50%, -50%);
    border: 2px solid var(--color-primary-orange-main);
    border-radius: 50%;
}

.featured-link .link-graphic .link-icon {

/* position: absolute; */

/* top: 50%; */

/* left: 50%; */

/* max-width: 104px; */

height: 150px;

/* transform: translate(-50%, -50%); */

background-position: center center;

background-size: contain;

background-repeat: no-repeat;

height: 1;

auto;
}

.featured-link .link-graphic .link-icon.icon-text {
    width: 100%;
    height: 91px;
}

.featured-link .link-title {
    font-size: 24px;
}

.featured-link .link-subtitle,
.featured-link .link-subtitle > a {
    color: var(--color-primary-orange-main);
    font-size: 16px;
    text-align: left;
}

@media (max-width: 767px) {
    .featured-link .link-title {
        text-align: left;
    }

    .featured-link .link-subtitle,
    .featured-link .link-subtitle > a {
        text-align: left;
    }
}

/*SLICK - home page slider */
@media (max-width: 991px) {
    .homepage-slider-section {
        padding-top: 0 !important;
    }
}

@media (max-width: 991px) {
    .homepage-slider-section .slider-wrapper {
        /* margin-right: -15px; */
        /* margin-left: -15px; */
    }
}

.homepage-slider-section {
    /* padding-top: 30px; */
    /* height: 100%; */
}

.slick-home-slider .slick-prev::before, .slick-home-slider .slick-next::before {
    color: var(--white-color-ffffff);
    font-size: 30px;
    font-family: "Font Awesome 5 Light";
    opacity: 1;
}

.slick-home-slider .slick-prev::before {
    content: "\f060";
}

.slick-home-slider .slick-next::before {
    content: "\f061";
}

.slick-home-slider .slick-prev, .slick-home-slider .slick-next {
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: 0;
    box-shadow: none;
}

.slick-home-slider .slick-prev {
    left: 25px;
}

.slick-home-slider .slick-next {
    right: 25px;
}

.slick-home-slider .slick-dots li > button {
    border: none;
    box-shadow: none;
}

.slick-home-slider .slick-dots {
    bottom: 8px;
}

.slick-home-slider .slick-dots li {
    margin: 0 1px;
}

.slick-home-slider .slick-dots li > button::before {
    color: var(--border-grey-color);
    font-size: 12px;
    opacity: 1;
}

.slick-home-slider .slick-dots li:not(.slick-active) > button:hover::before {
    color: var(--color-primary-blue);
    opacity: 0.5;
}

.slick-home-slider .slick-dots li.slick-active > button::before {
    color: var(--color-primary-blue);
}

/*SLICK - product page slider*/
.slick-product-slider {
    margin-top: 30px;
    padding: 0 80px;
}

.slick-product-slider img {
    padding: 0 10px;
}

.slick-product-slider .slick-prev::before, .slick-product-slider .slick-next::before {
    color: var(--color-primary-blue);
    font-size: 24px;
    font-family: "Font Awesome 5 Regular";
    opacity: 1;
}

.slick-product-slider .slick-prev::before {
    content: "\f060";
}

.slick-product-slider .slick-next::before {
    content: "\f061";
}

.slick-product-slider .slick-prev, .slick-product-slider .slick-next {
    z-index: 3;
    width: 80px;
    height: 80px;
    border-radius: 0;
    box-shadow: none;
}

.slick-product-slider .slick-prev {
    left: 0;
}

.slick-product-slider .slick-next {
    right: 0;
}

/*PRODUCT INFO - product page*/

.product-info {
    position: relative;
}

.product-info h1 {
    margin-bottom: 10px;
    padding-right: 34px;
    line-height: 1.2;
}

.product-info .product-favourites {
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 34px;
}

.product-info .product-favourites button {
    width: 34px;
    height: 34px;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    color: var(--color-primary-blue);
    font-size: 20px;
}

.product-info .price {
    font-size: 26px;
}

.product-info .price span {
    font-size: 18px;
}

.product-info .price a {
    color: var(--color-primary-orange-main);
}

.product-info .rrp-price {
    margin-bottom: 0px;
    font-size: 20px;
    text-decoration: line-through;
}

/**/
p.catch_weight {
    font-weight: bold;
}

p.catch_weight span {
    display: inline-block;
    width: 35px;
    text-align: center;
}

/*add to basket*/
.list-add-to-basket {
    margin-bottom: 10px;
}

.list-add-to-basket > li {
    margin-bottom: 10px;
}

/*PRODUCT DATA TABLE - product page*/
.product-data {
    display: table;
    width: 100%;
    margin-bottom: 5px;
}

.product-data .data-key {
    display: table-cell;
    width: 33.33333333%;
    min-width: 135px;
    padding: 10px 20px;
    background-color: var(--color-light-blue);
    vertical-align: top;
}

.product-data .data-value {
    display: table-cell;
    width: 66.66666667%;

    padding: 10px 20px;
    border-bottom: 2px solid var(--color-light-blue);
    vertical-align: middle;
}

/*PRODUCTS BOX - product page - related/viewed*/
.list-products-box .box-title {
    margin-top: 40px;
    padding: 10px 20px;
    font-size: 16px;
    text-align: center;
}

.list-products-box .box-content {
    padding: 30px;
    border-width: 0 2px 2px;
    border-style: solid;
}

.list-products-box.orange .box-title {
    background-color: var(--color-primary-orange-main);
    color: var(--white-color-ffffff);
}

.list-products-box.orange .box-content {
    border-color: var(--color-new-kff-primary-blue);
}

.list-products-box.green .box-title {
    background-color: var(--color-secondary-green);
    color: var(--white-color-ffffff);
}

.list-products-box.green .box-content {
    border-color: var(--list-products-box-border-color);
}


.list-products-box .box .product-image {

    position: relative;
    margin-bottom: 10px;

    border-bottom: 2px solid var(--product-image-border-color);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}


.list-products-box .box .product-image .sale-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 35%;
    height: 35%;

    background-image: url('/img/flash_sale.svg');
    background-repeat: no-repeat;
}

.list-products-box .box .product-image .double-points-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 145px;
    height: 30px;
    background-image: url('/img/double-points.png');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.65;
}

.list-products-box .box .product-image .bonus-points-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 153px;
    height: 35px;
    background-image: url('/img/bonus-points-cut.png');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.65;
}

.list-products-box .box .name {
    margin-bottom: 5px;
    font-size: 16px;
}

.list-products-box .box .price {
    margin-bottom: 0;
    font-size: 16px;
}

.list-products-box .box .rrp-price {
    margin-bottom: 0;
    font-size: 14px;
    text-decoration: line-through;
}

/*TABS - product page*/
.tab-content {
    margin-top: -1px;
    padding: 30px;
    border: 2px solid var(--color-light-blue);
}

.tab-content > .tab-pane {
    display: none;
}

.tab-content > .active {
    display: block;
}

.tabs-desktop .nav-tabs {
    display: block;
    margin-top: 40px;
    border: 0;
}

.tabs-desktop .nav-tabs > li {
    margin-top: 0;
    margin-right: 10px;
}

.tabs-desktop .nav-tabs > li > a {
    margin: 0;
    padding: 15px 20px;
    border: 0;
    outline: 0;
    background: var(--color-light-blue);
    color: var(--color-primary-blue);
    line-height: normal;
    text-decoration: none;
    text-align: left;
}

.tabs-desktop .nav-tabs > li > a:hover,
.tabs-desktop .nav-tabs > li.active > a,
.tabs-desktop .nav-tabs > li.active > a:focus,
.tabs-desktop .nav-tabs > li.active > a:hover {
    background: var(--color-primary-blue);
    color: var(--white-color-ffffff);
}

.nav-tabs > li:hover, .nav-tabs > li.active {
    background: none;
}

.tabs-responsive .headers-list {
    margin: 0;
}

.tabs-responsive .headers-list > li {
    position: relative;
    margin: 0;
}

.tabs-responsive .headers-list > li.heading > a {
    display: block;
    position: relative;
    margin: 0;
    padding: 15px 83px 15px 30px;
    outline: 0;
    background-color: var(--color-primary-blue);
    color: var(--white-color-ffffff);
    text-decoration: none;
    text-align: left;
}

.tabs-responsive .headers-list > li.heading > a:after {

    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);

    -webkit-transition: all 350ms ease;
    -moz-transition: all 350ms ease;
    -ms-transition: all 350ms ease;
    -o-transition: all 350ms ease;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    content: "\f106";
    font-family: "Font Awesome 5 Light";
    transition: all 350ms ease;
}

.tabs-responsive .headers-list > li.heading span {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 73px;
    height: 43px;
    cursor: pointer;
}

.tabs-responsive .headers-list > li.heading span:after {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);

    -webkit-transition: all 350ms ease;
    -moz-transition: all 350ms ease;
    -ms-transition: all 350ms ease;
    -o-transition: all 350ms ease;
    position: absolute;
    top: 50%;
    right: 30px;
    margin-right: 0;
    float: right;
    transform: translateY(-50%);
    content: "\f106";
    color: var(--white-color-ffffff);
    font-family: "Font Awesome 5 Light";
    text-align: center;
    transition: all 350ms ease;
}

.tabs-responsive .headers-list > li.heading.close-list > a {
    background-color: var(--color-light-blue);
    color: var(--color-primary-blue);
}

.tabs-responsive .headers-list > li.heading.close-list > a:after {
    content: "\f107";
}

.tabs-responsive .headers-list > li.heading.close-list span:after {
    content: "\f107";
}

.tabs-responsive .headers-list > li.heading > ul {
    padding: 20px 30px;
}

.tabs-responsive .headers-list > li.heading > ul li {
    margin: 5px 0;
}

.tabs-responsive .headers-list > li.heading > ul li a {
    text-decoration: none;
}

@media (min-width: 992px) {
    .tabs-desktop {
        display: block;
    }

    .tabs-responsive {
        display: none;
    }
}

@media (max-width: 991px) {
    .tabs-desktop {
        display: none;
    }

    .tabs-responsive {
        display: block;
    }
}

/* PRODUCT ITEM - section page */

.product-item {
    margin-bottom: 40px;
}

.product-item .item-image {
    position: relative;
    margin-bottom: 15px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--product-item-image-background-color);
}

.product-item .item-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;

}

.product-item .item-image .sale-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;

    background-image: url('/img/flash_sale.svg');
    background-repeat: no-repeat;
}


.product-item .item-image .bonus-points-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 153px;
    height: 35px;
    background-image: url('/img/bonus-points-cut.png');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.75;
}

.product-item .item-favourites {
    position: absolute;
    top: 0;
    left: 0;

    width: 50px;
    height: 50px;
}

.product-item .item-favourites button {
    width: 50px;
    height: 50px;

    padding: 0;
    background-color: transparent;
    box-shadow: none;
    color: var(--color-primary-blue);

    font-size: 20px;
}

.product-item h3 {
    margin-bottom: 10px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.2;
}

.product-item p.no-margin strong {
    margin-bottom: 7px;
    font-size: 16px;
}

.product-item .price {
    margin-bottom: 10px !important;
    font-size: 20px;
}

.product-item .rrp-price {
    margin-bottom: 0px;
    font-size: 18px;
    text-decoration: line-through;
}

.product-item .item-data {
    display: table;
    width: 100%;
    font-size: 12px;
}

.product-item .item-data:last-of-type {
    margin-bottom: 7px
}

.product-item .item-data .data-key {
    display: table-cell;
    width: 50%;
    padding-right: 15px;
    vertical-align: top;
}

.product-item .item-data .data-value {
    display: table-cell;
    width: 50%;
    padding-left: 15px;
    vertical-align: middle;
}

.product-item .item-actions {
    margin-top: 15px;
    overflow: hidden;
}

.product-item .item-actions a {
    color: var(--color-primary-orange-main);
}

.product-item input[type="submit"].small, .product-item-list input[type="submit"].small {
    margin: 0;
    padding: 0;
    font-size: 12px;
    border-radius: 11px;
    min-width: 50px;
}

@media (min-width: 768px) {
    .product-item {
        margin-bottom: 60px;
    }

    .product-item h3 {
        font-size: 22px;
    }

    .product-item .price {
        font-size: 22px;
    }

    .product-item .item-data {
        font-size: inherit;
    }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* PRODUCT ITEM - section page - list view */
.product-item-list {
    margin-bottom: 40px;
}

.product-item .item-image {
    position: relative;
    margin-bottom: 15px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--product-item-image-background-color);
}


.product-item-list .item-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
}

.product-item-list .item-image .sale-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background-image: url('/img/flash_sale.svg');
    background-repeat: no-repeat;
}

.product-item-list .item-image .bonus-points-badge {
    position: absolute;
    bottom: 0;
    left: 15px;
    width: 153px;
    height: 35px;
    background-image: url('/img/bonus-points-cut.png');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.75;
}

.product-item-list .item-favourites {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
}

.product-item-list .item-favourites button {
    width: 50px;
    height: 50px;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    color: var(--color-primary-blue);
    font-size: 20px;
}

.product-item-list h3 {
    margin-bottom: 10px;
    overflow: hidden;
    line-height: 1.2;
}

.product-item-list p.no-margin strong {
    margin-bottom: 7px;
    font-size: 16px;
}

.product-item-list .price {
    font-size: 22px;
}

.product-item-list .rrp-price {
    margin-bottom: 0px;
    font-size: 18px;
    text-decoration: line-through;
}

.product-item-list .item-data {
    display: table;
    width: 100%;
}

.product-item-list .item-data:last-of-type {
    margin-bottom: 15px
}

.product-item-list .item-data .data-key {
    display: table-cell;
    width: 50%;
    padding-right: 15px;
    vertical-align: top;
}

.product-item-list .item-data .data-value {
    display: table-cell;
    width: 50%;
    padding-left: 15px;
    vertical-align: middle;
}

.product-item-list .item-actions {
    margin-top: 20px;
    overflow: hidden;
}

.product-item-list .item-actions a {
    color: var(--color-primary-orange-main);
}

.product-item-border-only-mobile {
    border-bottom: 2px solid var(--color-medium-blue);
}

@media (min-width: 768px) {
    .product-item-list {
        margin-bottom: 0;
    }

    .product-item-border-only-mobile {
        border-bottom: none;
    }
}

/*LIST WITHOUT IMAGES*/
.product-item-list.no-images {
    margin-bottom: 0;
}

.product-item-list.no-images .item-data-wrp {
    margin-bottom: 15px;
}

.product-item-list.no-images .item-actions {
    margin-top: 0;
}

.product-item-list.no-images h3 a:link,
.product-item-list.no-images h3 a:visited,
.product-item-list.no-images h3 a:active {
    font-weight: 500;
}

@media (min-width: 992px) {
    .product-item-list.no-images .item-actions {
        text-align: right;
    }
}

@media (max-width: 992px) {
    .product-item-list.no-images .item-data-wrp {
        margin-bottom: 10px;
    }
}

@media (min-width: 768px) {
    .product-item-list.no-images .prices-list-no-images {
        text-align: right;
    }
}

@media (max-width: 767px) {
    .product-item-list.no-images form {
        margin-top: 20px;
    }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/*SECTION BANNER - section page*/
.section-banner {

    position: relative;
    height: 318px;
    margin-bottom: 15px;
    background-position: center center;
    background-size: cover;

    background-repeat: no-repeat;
}

.section-banner .title {
    position: absolute;
    bottom: 0;

    max-height: 100%;

    padding: 20px 50px;

    background-color: rgb(39, 58, 134, 1);
    color: var(--white-color-ffffff);
    font-size: 26px;
    line-height: 1.2;
}

/* RECIPE SEARCH - GT */
.recipe-search {
    position: relative;
    margin-bottom: 40px;
}

.recipe-search #search_text {
    width: 100%;
    padding: 10px 35px 10px 10px;
    border: none;
    border: 2px solid var(--color-medium-blue);

    background-color: transparent;
    color: var(--color-primary-blue);
}

.recipe-search #search_text::-webkit-input-placeholder {
    color: var(--color-primary-blue); /* Chrome/Opera/Safari */
}

.recipe-search #search_text::-moz-placeholder {
    color: var(--color-primary-blue); /* Firefox 19+ */
}

.recipe-search #search_text:-ms-input-placeholder {
    color: var(--color-primary-blue); /* IE 10+ */
}

.recipe-search #search_text:-moz-placeholder {
    color: var(--color-primary-blue); /* Firefox 18- */
}

.recipe-search #submit_search {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 0;
    width: 34px;
    height: 100%;
    padding: 0;
    transform: translateY(-50%);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    color: var(--color-primary-orange-main);
    text-align: center;
}


/* Account View page - Jez */
.account_details_conatainer {
    margin-bottom: 0;
}

.chorus_orders .orderlines {
    display: none;
    margin-bottom: 20px;
    padding: 10px;
    background-color: var(--color-honeycomb-cream);
    font-size: 12px;
}

.chorus_orders i {
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    transition: all 200ms linear;
}

.chorus_orders i.rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.chorus_orders hr {
    margin: 5px 0;
}

@media (max-width: 768px) {
    .text-xs-right {
        text-align: right;
    }
}

.export_preferences p {
    font-weight: bold;
}

.export_preferences p span {
    margin-left: 15px;
}

.export_preferences p span i {
    margin: 0 3px;
    cursor: pointer;
}

/* Contact Us form */
form.contact_us {
    margin-bottom: 40px;
}

form.contact_us label {
    margin-bottom: 10px;
}

form.contact_us input[type="text"] {
    width: 100%;
    padding: 9px;
    border: 2px solid var(--border-color-c4c4c4);
    font-size: 14px;
    line-height: 18px;
}

form.contact_us select {
    width: 100%;
    height: 36px;
    padding: 0 9px;
    border: 2px solid var(--border-color-c4c4c4);
}

form.contact_us textarea {
    padding: 9px;
    border: 2px solid var(--border-color-c4c4c4);
}

form.contact_us .g-recaptcha {
}

form.contact_us input[type="text"].inputError,
form.contact_us select.inputError,
form.contact_us textarea.inputError {
    border: 2px solid var(--form-contactus-input-error-border-color);
}

form.contact_us button {
    width: 100%;
    color: var(--form-contactus-button-color) !important;
    font-weight: bold;
    font-size: 18px;
}

form.contact_us button img {
    height: 18px;
}

form.contact_us .help-text {
    margin-bottom: 20px;
    color: var(--form-contactus-help-text-color);
}

form.contact_us #form-error {
    display: none;
    margin-bottom: 20px;
    color: var(--form-contactus-error-color);
}


form.contact_us .account_field {
    display: none;
}

#back_to_top {
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    display: none;
    z-index: 999999;
    position: fixed;
    bottom: 0;
    left: 70%;
    width: 60px;
    margin: 0;
    border: 1px solid var(--white-color-ffffff);
    border-bottom: none;
    border-radius: 5px 5px 0px 0px;
    background-color: var(--color-primary-blue);
    color: var(--white-color-ffffff);
    font-size: 25px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}

/* ~~~~~~~~~~ start of modal overlay for checkout ~~~~~~~~~~ */
/* modal background */
#modal {
    display: none; /* Hidden by default */
    z-index: 1; /* Sit on top */
    position: fixed; /* Stay in place */
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    padding-top: 100px; /* Location of the box */
    overflow: auto; /* Enable scroll if needed */
    background-color: var(--color-black); /* Fallback color */
    background-color: var(--box-shadow-color-40); /* Black w/ opacity */
}

/* modal content */
#modal-content {
    position: relative;
    width: 80%;
    margin: auto;
    padding: 0;
    border: 1px solid var(--modal-content-border-color);
    background-color: var(--modal-content-bg-color);
}


/* ~~~~~~~~~~  end of modal overlay for checkout  ~~~~~~~~~~ */

.nav-bg-image {
    width: 100%;
    height: 80px;
    background-position: center center;

    background-size: cover;
    background-repeat: no-repeat;
}

/* favourites */

#favouritesModal {

}

#favouritesModal .button {
    padding: 10px 15px;
    box-shadow: none;
    line-height: 20px;
    width: fit-content;
    float: right;
    margin-left: 20px;
}

/* ~~~~~~~~~~ OneTrust Cookies styles ~~~~~~~~~~ */
.footer #ot-sdk-btn.ot-sdk-show-settings, #ot-sdk-btn.optanon-show-settings {
    margin: 0 auto;
    padding: 0;
    border: 0;
    background-color: transparent;
    box-shadow: none;
    font-weight: normal;
    font-size: 14px;
    color: var(--color-primary-blue);
}

.footer #ot-sdk-btn.ot-sdk-show-settings:hover, #ot-sdk-btn.optanon-show-settings:hover {
    background-color: transparent;
    color: var(--btn-kff-green-color);
    text-decoration: none;
}


/* Account Invoices Table */
.outstanding-invoices-wrapper {
    margin-top: 30px;
}

.outstanding-invoices-wrapper h3 {
    margin-bottom: 10px;
}

.outstanding-invoices-wrapper .account-orders-table-wrapper {
    display: inline-block;
    width: 100%;
}

.outstanding-invoices-wrapper .account-orders-table-wrapper .account-orders-table-header {
    font-weight: 500;
    font-size: 14px;
}

.outstanding-invoices-wrapper .outstanding-invoices-table-row {
    padding: 8px 15px;
}

.outstanding-invoices-wrapper div.outstanding-invoices-table-row:not(:last-child) {
    border-bottom: 1px solid var(--outstanding-invoices-border-color);
}


@media (max-width: 991px) {
    .outstanding-invoices-wrapper .outstanding-invoices-mobile-label {
        width: 50%;
        float: left;
        font-weight: 500;
        text-align: left;
    }

    .outstanding-invoices-wrapper .outstanding-invoices-mobile-value {
        width: 50%;
        float: right;
        text-align: right;
    }


    .outstanding-invoices-wrapper div.outstanding-invoices-table-row {
        padding: 15px;
    }
}

/* Recipe landing NEW */
#recipe-landing-page .footer {
    margin-top: 0;
}

.bg-regular {
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.recipe-landing-intro {
    margin-top: 30px;
}


.recipe-section {
    padding: 60px 0;
}

.recipe-section h2 {
    margin-bottom: 10px;
}

.recipe-categories h2 {
    margin-bottom: 35px;
}

.recipes-grey-background {
    background-color: var(--color-light-gray);
}

.recipes-landing-recent-item {
    margin: 30px 0;
}

.recipes-landing-recent-item img {
    border-bottom: 3px solid var(--color-primary-orange-main);
    box-shadow: 3px 3px 5px var(--color-smokey-gray);
}

.recipes-landing-box-item h4 {
    margin-top: 20px;
    font-weight: 500;
}

.recipes-landing-categories-wrapper {
    text-align: center;
}

.recipes-landing-categories-wrapper .recipe-category-button {
    display: inline-block;
    margin: 0 10px 20px 10px;
    padding: 20px 30px;
    border: 2px solid var(--color-light-blue);
    border-radius: 3px;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
}

.recipes-landing-categories-wrapper .recipe-category-button:hover {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    background-color: var(--color-light-blue);
    text-decoration: none;
    transition: 0.3s;
}

.recipe-categories .recipe-viewall-button {
    margin-top: 30px;
    margin-bottom: 30px;
}

h1.recipe-landing-title {
    margin: 0;
    padding: 7px 0;
}

input.recipe-landing-search {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    width: 100%;
    padding: 18px 20px;
    border: none;
    border-radius: 0;
    background-color: var(--color-light-blue);
    color: var(--color-primary-blue);
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
}

input.recipe-landing-search::placeholder {
    padding-top: 5px;
    color: var(--color-primary-blue);
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    opacity: 1;
}

input.recipe-landing-search:-ms-input-placeholder {
    color: var(--color-primary-blue);
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    opacity: 1;
}

input.recipe-landing-search::-ms-input-placeholder {
    color: var(--color-primary-blue);
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    opacity: 1;
}

.recipe-landing-search-wrapper button {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 15px;
    padding: 20px;
    transform: translateY(-50%);
    border: none;
    background-color: transparent;
    box-shadow: none;
    color: var(--color-primary-orange-main);
    font-size: 20px;
    line-height: 20px;
}

.recipe-section a:hover {
    text-decoration: none;
}

/* Recipes landing hero slick */
.recipe-hero {
    padding-bottom: 60px;
}

.recipe-landing-slick .slider-text-content {
    top: 0;
    padding: 40px;
}

.recipe-landing-slick .slider-text-content .slider_box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 2;
    top: 40px;

    left: 40px;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    padding: 0 60px;
    background-color: var(--white-transparent);
}

.recipe-landing-slick .slider-text-content .slider_box .slider_line1 {
    margin-bottom: 20px;
    color: var(--color-primary-blue);
    font-weight: 500;
    font-size: 28px;
    line-height: 42px;
    text-align: left;
    text-transform: none;
}

.recipe-landing-slick .slider-text-content .slider_box .slider_line2 {
    color: var(--color-primary-blue);
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    text-align: left;
}

.recipe-landing-slick .slider-text-content .slider_box .slider_cta {
    margin-top: 30px;
    text-align: center;
}

.recipe-landing-slick .slider-text-content .slider_box .slider_cta > a {
    display: inline-block;
    padding: 15px 45px;
    border-radius: 11px;
}

.recipe-landing-slick .slick-dots {
    z-index: 5;
    position: absolute;
    right: 0;
    bottom: 5px;
    left: 0;
}

.recipe-landing-slick .slick-dots li {
    margin: 0 2px;
}

.recipe-landing-slick .slick-dots li button {
    -webkit-box-shadow: none;
    background-color: transparent;
    box-shadow: none;
}

.recipe-landing-slick .slick-dots li button::before {
    -webkit-box-shadow: none;
    background-color: transparent;
    box-shadow: none;
    color: var(--white-color-ffffff);
    font-size: 12px;
    line-height: 12px;
    opacity: 1;
}

.recipe-landing-slick .slick-dots li button:hover::before {
    color: var(--color-primary-blue);
    opacity: 0.6;
}


.recipe-landing-slick .slick-dots li.slick-active button::before {
    color: var(--color-primary-blue);
    font-size: 12px;
    line-height: 12px;
    opacity: 1;
}

.recipe-landing-slick.slick-dotted.slick-slider {
    margin-bottom: 0;
}


/* Popular recipes slick */
.recipe-popular-section {
    background-image: URL(/img/popular_categories_background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.recipe-popular-section h2 {
    margin-bottom: 40px;
}

.recipe-landing-popular-slick .slick-slide {
    padding: 0 18px;
}

.recipe-landing-popular-slick {
    position: relative;
    margin-right: -18px;
    margin-left: -18px;
}

.recipe-landing-popular-slick h4 {
    margin-top: 20px;
    margin-bottom: 0;
    font-weight: 500;
    text-align: center;
}

.recipe-landing-popular-slick .slick-arrow {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    z-index: 3;
    position: absolute;
    top: 50%;
    padding: 15px 20px;
    transform: translateY(-50%);
    background-color: var(--color-primary-blue);
    color: var(--white-color-ffffff);
    font-size: 20px;
    line-height: 20px;
}

.recipe-landing-popular-slick .slick-arrow.slick-arrow-right {
    right: 0;
}

.recipe-landing-popular-slick .slick-arrow:hover {
    cursor: pointer;
}

.recipe-landing-popular-slick img {
    border-bottom: 3px solid var(--color-primary-orange-main);
    box-shadow: 3px 3px 5px var(--color-smokey-gray);
}

@media (min-width: 768px) and (max-width: 991px) {
    .recipe-landing-slick img {
        max-height: 400px;
    }
}


@media (max-width: 1199px) {
    .recipe-landing-slick img {
        min-height: 400px;
    }
}


@media (max-width: 991px) {
    .recipe-landing-slick img {
        min-height: auto;
    }

    .recipe-landing-popular-slick {
        margin-right: -5px;
        margin-left: -5px;
    }

    h1.recipe-landing-title {
        text-align: left;
    }

    .recipe-popular-section h2 {
        margin-bottom: 40px;
    }

    .recipe-landing-search-wrapper {
        margin-bottom: 10px;
    }

    .recipe-landing-slick .slider-text-content {
        display: block;
        position: static;
        width: 100%;
        padding: 30px 20px 0 20px;
    }

    .recipe-landing-slick .slider-text-content .slider_box {
        display: block;
        position: static;
        max-width: 100%;
        padding: 0;
    }

    .recipe-landing-slick .slider-text-content .slider_box .slider_line1 {
        text-align: center;
    }

    .recipe-landing-slick .slider-text-content .slider_box .slider_line2 {
        text-align: center;
    }

    .recipe-landing-slick .slider-text-content .slider_box .slider_cta {
        text-align: center;
    }

    .mobile-no-padding {
        padding: 0;
    }

    .recipe-section h2 {
        margin-bottom: 30px;
    }

    .recipes-landing-recent-item {
        margin: 20px 0;
    }

    .recipe-landing-slick .slick-dots {
        display: none;
        bottom: auto;
    }
}

@media (max-width: 767px) {
    h1.recipe-landing-title {
        margin-bottom: 20px;
        text-align: center;
    }

    .recipe-section h2 {
        margin-bottom: 20px;
    }

    .recipes-landing-categories-wrapper {
        padding-right: 15px;
        padding-left: 15px;
    }

    .recipes-landing-categories-wrapper .recipe-category-button {
        width: 100%;
        margin: 5px;
    }

    .recipe-categories .recipe-viewall-button a {
        display: block;
        width: 100%;
    }

    .recipe-landing-popular-slick {
        width: 100%;
        margin: 0;
        overflow-x: auto;
        white-space: nowrap;
    }

    .recipe-landing-popular-slick h4 {
        white-space: normal;
    }

    .recipe-popular-section .slider {
        padding-right: 20px;
    }

    .recipe-landing-popular-slick a {
        display: inline-block;
        width: 75%;
        max-width: 250px;
        vertical-align: top;
    }

    .recipe-popular-section h2 {
        text-align: left;
    }

    .recipe-popular-wrapper {
        padding-right: 0;
    }

    .recipe-categories .recipe-viewall-button {
        margin-bottom: 0;
    }
}


/* Promotions landing page */
.promotions-top-section-wrapper {
    padding: 20px 0 30px 0;
    background-image: URL(/img/brick_background.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.promotions-top-section-wrapper h1 {
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .promotions-top-section-wrapper {
        padding-top: 0;
    }

    .promotions-top-section-wrapper h1 {
        margin-bottom: 20px;
    }
}

.promotions-section-image-wrapper {
    -webkit-box-shadow: 0px 3px 6px 3px var(--color-opaque-midnight);
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    box-shadow: 0px 3px 6px 3px var(--color-opaque-midnight);
}

.promotions-section-image-wrapper:hover {
    opacity: 0.9;
}

.promotions-top-section-items {
    text-align: center;
}

.promotions-top-section-items > div[class*="col-"] {
    display: inline-block;
    width: 32%;
    float: none;
    vertical-align: top;
}

.promotions-top-section-items a:hover {
    text-decoration: none;
    opacity: 0.8;
}

.promotions-section-text-wrapper {
    margin-top: 20px;
}

.promotions-section-text-wrapper h3 {
    margin-bottom: 15px;
}

.promotions-section-text-wrapper p {
    font-size: 14px;
    line-height: 24px;
}

.promotions-section-text-wrapper p:last-child {
    margin-bottom: 0;
}

.promotions-section-guide-download {
    margin-top: 40px;
}

.promotions-section-guide-download i {
    color: var(--color-primary-orange-main);
}

.promotions-section-guide-download .button {
    line-height: 24px;
}

@media (min-width: 768px) and (max-width: 991px) {
    .promotions-section-guide-download .button {
        display: block;
        max-width: 400px;
        margin: 0 auto;
    }
}

.promotions-bottom-section-wrapper {
    background-image: URL(/img/brick_background.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.promotions-section {
    padding: 60px 0;
}

.promotions-bottom-section-wrapper img {
    width: 100%;
    height: auto;
}

.promotions-bottom-section-first-cell {
    padding: 0 12px;
}

.promotions-bottom-section-second-cell {
    padding: 0 18px;
}

.promotions-adverts-stack-first {
    margin-bottom: 15px;
}

.promotions-adverts-stack-second {
    margin-top: 15px;
}

.promotions-bottom-section-third-cell {
    margin-top: 30px;
}

.promotions-section-heading h2 {
    margin-bottom: 40px;
    text-align: center;
}

.promotions-featured-loadmore-wrapper {
    margin-top: 30px;
}

.promotions-section .popular-categories-wrapper > div[class*="col-"] {
    margin-bottom: 40px;
}

.promotions-section .popular-categories-wrapper p:not(.price) {
    margin-bottom: 0;
    color: var(--color-grey-858384);
}

.promotions-section .popular-categories-wrapper p.price {
    font-weight: 500;
}

.promotions-section .popular-categories-wrapper .account-form-atom {
    margin-top: 20px;
}

.promotions-section .popular-categories-wrapper .account-form-atom input.orange {
    border-radius: 3px;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
}

.promotions-section .popular-categories-wrapper .account-form-atom a.button {
    height: auto;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 14px;
    line-height: 24px;
}

.promotions-bottom-section-extra > .row > div[class*="col-"] {
    margin-top: 30px;
}

.promotion-categories-section {
    background-image: URL(/img/promotions-categories-background.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}


.popular-categories-wrapper > a.promotions-section-button {
    -webkit-box-shadow: none;
    display: inline-block;
    margin: 10px;
    border: 2px solid var(--text-color-a9b0cf);
    border-radius: 3px;
    box-shadow: none;
    white-space: nowrap;

}

.popular-categories-wrapper > a.promotions-section-button:hover {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    border: 2px solid var(--promotions-section-button-hover-border-color);
    background-color: var(--promotions-section-button-hover-bg-color);
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s;
}

@media (max-width: 991px) {
    .promotions-bottom-section-first-cell,
    .promotions-bottom-section-second-cell {
        padding: 0 15px;
    }

    .promotions-bottom-section-first-cell,
    .promotions-bottom-section-second-cell,
    .promotions-bottom-section-third-cell {
        margin: 0;
    }

    .promotions-bottom-section-wrapper .promotions-bottom-section-first-cell img,
    .promotions-bottom-section-wrapper .promotions-bottom-section-second-cell img,
    .promotions-bottom-section-wrapper .promotions-bottom-section-third-cell img {
        margin-top: 30px;
        margin-bottom: 0;
    }

    .promotions-bottom-section-wrapper > .promotions-section {
        padding-top: 30px;
    }
}

@media (max-width: 767px) {
    .promotions-top-section-items > div[class*="col-"] {
        width: 100%;
        margin-bottom: 40px;
    }

    .promotions-section-guide-download {
        margin-top: 20px;
    }

    .popular-categories-wrapper > a.promotions-section-button {
        width: 100%;
        margin: 5px 0;
    }

    .promotions-featured-loadmore-wrapper {
        margin-top: 0;
    }

    .popular-categories-heading.promotions-section-heading h2::before,
    .popular-categories-heading.promotions-section-heading h2::after {
        border: none;
    }
}


.account-tile-action {
    margin-top: 10px;
}

.inline-buttons-spacing {
    margin-right: 20px;
}

.section .sectionAd {
    padding: 30px 0 20px 0;
}

.homeAd {
    padding: 30px 0 0 0;
}

.promotionsAd {
    padding: 20px 0 20px 0;
}

.section .sectionAd img,
.section .sectionAdResults img,
.homeAd img,
.promotionsAd img {
    width: 100%;
    height: auto;
}

.section .sectionAdResults {
    padding: 25px 0 45px 0;
}


@media (max-width: 767px) {
    .section .sectionAd {
        padding: 20px 0 15px 0;
    }

    .section .sectionAdResults {
        padding: 5px 0 25px 0;
    }

    .modal-header .close {
        height: 24px;
    }
}

@media (max-width: 991px) {
    .homeAd {
        margin-right: -15px;
        margin-left: -15px;
        padding-top: 0;
        padding-bottom: 10px;
    }

    .promotionsAd {
        margin-right: -15px;
        margin-left: -15px;
        padding-top: 0;
        padding-bottom: 10px;
    }
}

/* Homepage Newsletter Modal */
#homepageNewsletterModal .modal-body h2 {
    display: none;
}

#homepageNewsletterModal .modal-body > .row > div {
    width: 100% !important;
    margin: 0 auto !important;
}

/* Loyalty activation */
.loyalty-activate-wrapper .loyalty-account-button {
    padding-right: 30px !important;
    padding-left: 30px !important;
}

.loyalty-activate-wrapper h1 {
    margin-bottom: 10px;
}

.loyalty-activate-wrapper p {
    margin-bottom: 30px;
}

.loyalty-button {
    display: block;
    width: 100%;
    height: 180px;
    margin: 10px auto;
    border: 1px solid var(--border-grey-color);
    border-radius: 3px;
    background-color: var(--white-color-ffffff);
    box-shadow: none;
    color: var(--color-primary-blue);
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
}

.loyalty-button:hover {
    transform: scale(1.05, 1.05);
    box-shadow: 1px 1px 6px var(--color-opaque-midnight);
    text-decoration: none;
    opacity: 0.9;
}

.loyalty-button-ico {
    width: 90px;
    margin: auto auto 10px;
}

@media (min-width: 768px) {
    .loyalty-button {
        margin: auto;
    }
}

/* Checkout Brochure */
.checkout-review-brochure-row {
    margin-bottom: 20px;
    padding: 10px;
    background-color: var(--color-light-gray);
}

.checkout-review-brochure-row label {
    font-weight: 400;
}

/* Alternating columns 2021 */
.alternating-columns-2021 > .row {
    margin-bottom: 40px;
}

.alternating-columns-2021 .page-leader {
    z-index: 1;
    position: relative;
    margin-bottom: 40px;
}

.alternating-columns-2021 .page-leader::after {
    display: block;
    z-index: 10;
    position: relative;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-black);
    background: linear-gradient(0deg, var(--box-shadow-color-80) 0%, var(--box-shadow-color-00) 80%);
    content: "";
}

.alternating-columns-2021 .page-leader h1 {
    z-index: 20;
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 500px;
    transform: translate(-50%, -50%);
    color: var(--white-color-ffffff);
    font-weight: 700;
    font-size: 46px;
    line-height: 56px;
}

.alternating-columns-2021 .page-leader img {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .alternating-columns-2021 .page-leader h1 {
        max-width: 650px;
        font-size: 32px;
        line-height: 42px;
    }
}

.alternating-columns-2021 img {
    width: 100%;
}

@media (min-width: 768px) {
    .alternating-columns-2021 > .row > .col-sm-4 {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.alternating-columns-2021 iframe {
    width: 100vw;
    height: 35.25vw; /*16:9*/
}

@media (max-width: 767.98px) {
    .alternating-columns-2021 img {
        margin-bottom: 10px;
    }
}

@media (max-width: 1600px) {
    .alternating-columns-2021 iframe {
        width: 100%;
        height: 56.25vw; /*16:9*/
    }
}

/* MODAL FILTER */
#storeFilterMenu .modal-dialog {
    margin: 0;
}

#storeFilterMenu .modal-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    border: none;
    border-radius: 0;
}

#storeFilterMenu .modal-header {
    display: inline-flex;
    width: 100%;
    height: 70px;
    padding: 20px;
    border-bottom: 1px solid var(--border-grey-color);
}

#storeFilterMenu .modal-title {
    color: var(--color-primary-blue);
    font-weight: 500;
    font-size: 22px;
}

#storeFilterMenu .modal-header-close {
    margin-left: auto;
    font-size: 30px;
    cursor: pointer;
}

#storeFilterMenu .modal-header-close i {
    display: flex;
}

#storeFilterMenu .modal-body {
    padding: 0;
}

#storeFilterMenu .filter-item {
    padding: 0 16px 0 16px;
    border-bottom: solid 1px var(--border-grey-color);
}

#storeFilterMenu .filter-item-header {
    display: flex;
    width: 100%;
    min-height: 60px;
    color: var(--color-primary-blue);
    font-weight: 500;
    font-size: 16px;
    line-height: 60px;
}

#storeFilterMenu .filter-item-header i {
    margin-left: auto;
    transform: rotate(0deg);
    line-height: 60px;
    transition: 0.2s ease-in-out;
}

#storeFilterMenu .filter-item-header.collapsed i {
    transform: rotate(180deg);
}

#storeFilterMenu .filter-item-collapse {
    margin-bottom: 10px;
    padding-bottom: 26px;
}

#storeFilterMenu .filter-item-collapse label {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    color: var(--color-grey-858384);
    font-size: 14px;
    line-height: 20px;
}

#storeFilterMenu .filter-item-collapse input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--color-primary-blue);
}

#storeFilterMenu .filter-item-collapse .filter-name {
    margin: auto 5px auto 20px;
    font-weight: 400;
}

#storeFilterMenu .filter-item-collapse .filter-count {
    color: var(--color-black);
    font-weight: 300;
    font-size: 10px;
}

#storeFilterMenu .modal-close {
    width: 100%;
    height: 50px;
    margin-top: auto;
    border-radius: 0;
    background-color: var(--color-primary-blue);
    color: var(--white-color-ffffff);
    font-size: 14px;
}

/* BOOTSTRAP > 4 */
.d-none {
    display: none;
}

@media (min-width: 768px) {
    .d-l-block {
        display: block;
    }
}

.nav-btns:first-child {
    margin-top: 20px;
}

.nav-btns a {
    padding: 5px 10px;
    background: lightgray;
    color: var(--color-dark-blue);
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
}

.nav-btns a:first-child {
    margin-right: 10px;
}

/*sequential menu image*/
.sequential-dropdown {
    position: relative;
}

.sequential-desktop-menu {
    z-index: 1;
    background-color: var(--white-color-ffffff);
}

.sequential-desktop-menu.sequential-image {
    display: block;
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: calc(25% + 1px);
    border-left: 1px solid var(--sequential-border-color);
}

.sequential-desktop-menu.sequential-image.double {
    width: calc(50% + 1px);
}

.sequential-desktop-menu.sequential-image .sequential-image-wrp {
    padding: 0 20px;
}


/* 2023 - redesign */
/* bootstrap fix */
.header-desktop-kff > .header-kff-new:before,
.header-desktop-kff > .header-kff-new:after,
.header-menu > .container:before,
.header-menu > .container:after {
    display: none;
}

.header-desktop-kff-new .header-kff-new {
    height: 110px;
}

.header-kff-new {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-kff-new > div {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 30%;
    align-items: center;
}

.header-kff-new > div:first-child {
    justify-content: flex-start;
}

.header-kff-new > div:last-child {
    justify-content: flex-end;
}

.header-menu > .container {
    padding: 0;
}

.header-menu-second-row {
    width: 100%;
    height: 44px;
    display: none;
}

.header-menu-search-row {
    display: none;
    width: 100%;
    height: 88px;
    justify-content: center;
    align-items: center;
}

.header-menu-search-row > div.header-menu-search-form {
    height: 44px;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--menu-bg-color-f4f5f6);
}

.header-menu-search-row > div.header-menu-search-form > form {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-kff-left-block{
    position: relative;
}
.header-kff-left-block .header-menu-search-form{
    width: 100%;
}
.show-menu-second-row {
    display: block;
}

.show-menu-search-row {
    display: flex;
    padding: 0;
}

.header_links a i {
    font-size: 28px;
    font-weight: 300;
    font-family: 'Font Awesome 5 Light';
}

.header-kff-left-block a {
    color: var(--main-text-color);
    font-size: 15px;
    font-weight: 500;
}

.header-kff-left-block a i {
    padding-right: 7px;
    font-size: 18px;
    font-family: 'Font Awesome 5 Light';
}

.header-kff-right-block a {
    margin: 0 15px 0 15px;
}

.header-kff-right-block a:first-child {
    margin-left: 0;
}

.header-kff-right-block a:active,
.header-kff-right-block a:focus,
.header-kff-right-block a:hover {
    text-decoration: none;
}

.basket-icon-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.basket-icon-group-badge {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    font-size: 11px;
    color: var(--white-color-ffffff);
    background: var(--main-text-color);
    display: inline-block;
    padding-top: 0.15em;
    position: relative;
    border-radius: 1rem;
    left: -10px;
    bottom: 5px;
    height: 20px;
}

.header-menu-search-row .search_form #search_text {
    width: 100%;
    height: 44px;
    border: 0;
    background-color: var(--menu-bg-color-f4f5f6);
    color: var(--main-text-color);
    font-size: 16px;
    line-height: 44px;
    display: inline-block;
    margin-right: 0px;
}

/*.search_form #submit_search {*/
.search_form #submit_search {
    display: inline-block;
    height: 24px;
    width: 30px;
    background-color: transparent;
    box-shadow: none;
}

.header-menu-search-row .search_form #submit_search {
    background-color: transparent;
    box-shadow: none;
    position: relative;
    display: inline-flex;
    right: 15px;
    text-align: right;
    width: 40px;
    padding: 0;
    margin: 0;
    justify-content: flex-end;
    align-items: center;
}

.header-mobile-kff {
    color: var(--main-text-color);
}

.header-mobile-kff-new .header-kff-center-block a img {
    width: 100px;
}

.header-mobile-kff i {
    font-size: 24px;
    font-weight: 300;
    font-family: 'Font Awesome 5 Light';
    color: var(--main-text-color);
}

input#search_text_mobile::placeholder,
input#search_text::placeholder {
    color: var(--main-text-color) !important;
}

.search-mobile .search_form_mobile #search_text_mobile {
    width: 100%;
    height: 44px;
    background-color: var(--menu-bg-color-f4f5f6);
    color: var(--main-text-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 44px;
    display: inline-block;
    /* margin-right: -76px; */
}

.search-mobile .search_form_mobile #submit_search {
    position: absolute;
    display: flex;
    right: 15px;
    text-align: right;
    width: 40px;
    padding: 0;
    margin: 0;
    justify-content: flex-end;
    align-items: center;
}

.search_form_mobile {
    display: flex;
    align-items: center;
}

.header-menu-second-row .header-menu-desktop-nav-ul li {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.header-menu-desktop-nav-ul-li-pipe {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: var(--main-text-color);
    opacity: 0.11;
}

.header-menu-desktop-nav-ul > li.has-dropdown:hover > a,
.header-menu-desktop-nav-ul > li.has-dropdown > a:active,
.header-menu-desktop-nav-ul > li.has-dropdown.active > a,
.header-menu-desktop-nav-ul > li.has-dropdown.open > a {
    color: var(--color-new-kff-primary-blue) !important;
}

.nav-container #offcanvas.offcanvas-show .nav li > a:hover {
    font-weight: 400;
    opacity: 1;
}

.sequential-dropdown ul li:hover a,
.dropdown-wrp .dropdown-list > li:hover > a {
    color: var(--color-new-kff-primary-blue);
}

.sequential-dropdown ul li a,
.sequential-dropdown ul li a:after {
    color: var(--main-text-color);
}

.sequential-dropdown ul li a:hover,
.sequential-dropdown ul li a:hover:after {
    color: var(--color-new-kff-primary-blue);
}

.sequential-dropdown ul li a.open,
.sequential-dropdown ul li a.open:hover,
.sequential-dropdown ul li a.open:after,
.sequential-dropdown ul li a.open:hover:after {
    color: var(--white-color-ffffff);
}

.header-menu-second-row li a:hover {
    color: var(--color-new-kff-primary-blue);
}

.search-dropdown .row div:first-child {
    width: 30%;
}

.search-dropdown .row div:last-child {
    text-align: left;
}

.search-dropdown .row div:first-child img {
    max-width: 54%;
    max-height: fit-content;
    display: inline-flex;
}

.search-dropdown p {
    padding: 15px;
    font-weight: 200;

}

/* Slider */
.homepage-slider-section .slider_cta {
    display: inline-flex;
    height: 45px;
    border-radius: 11px;
    color: var(--white-color-ffffff);
    background: var(--btn-kff-green-color);
    justify-content: center;
    align-items: center;
    padding: 0 50px 0 50px;
    font-weight: 400;
}

.homepage-slider-section .slider_cta i {
    margin-left: 22px;
}

.homepage-slider-section .slider-text-content:before{
    content: "";
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
    height: 350px;
    display: block;
    z-index: 1;
    position: relative;
}

.homepage-home-intro-wrapper .homepage-section {
    padding: 60px 0 0px 0;
}

.homepage-slider-wrapper {
    max-width: 100vw;
}

.homepage-slider-wrapper .homepage-section {
    padding: 0;
}

.homepage-4col-pages-wrapper a{
    text-align: left;
}

.homepage-4col-pages-wrapper .homepage-section {
    padding: 0;
}

.homepage-pages-4col-wrapper {
    background-color: var(--menu-bg-color-f4f5f6);
}

.homepage-4col-pages-wrapper::before,
.homepage-4col-pages-wrapper:after {
    content: "";
    z-index: -1;
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
}

.homepage-4col-pages-wrapper::before {
    height: 78px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 767 78"> <path fill="%23f4f5f6" d="m0,24.03s204.81-54.07,392.16,0c187.35,54.07,374.84,0,374.84,0v53.97H0V24.03Z"/></svg>') top center no-repeat;
    background-size: cover;
}

.homepage-4col-pages-wrapper:after {
    height: 71px;
    background: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 767 71"> <path fill="%23f4f5f6" d="m0,0h767v46.61s-212.65-39.43-394.55,0C190.55,86.03,0,65.82,0,65.82V0Z"/></svg>') bottom center no-repeat;
    background-size: cover;
}

.homepage-4col-pages-wrapper::after svg,
.homepage-4col-pages-wrapper::before svg {
    width: 100%;
    height: 100%;
    fill: var(--menu-bg-color-f4f5f6);
}

.homepage-pages-4col-wrapper .equal {
    justify-content: space-between;
    gap: 10px;
}

.homepage-pages-4col-wrapper .equal > div {
    padding: 0;
}

.homepage-pages-4col-wrapper .equal > div.col-xs-6 {
    padding: 0;
    width: 48%;
}

.homepage-element-pod-new {
    gap: 10px;
    margin-bottom: 48px;
}

.homepage-element-pod-new-item {
    border-radius: 10px;
    background-size: cover;
    margin-bottom: 10px;
    padding: 0;
}

.homepage-element-pod-new-item a {
    text-align: left;
}

.homepage-element-pod-new-item-inner {
    display: block;
    width: 100%;
    height: 0;
    border-radius: 15px;
    background-size: cover;
    flex-direction: column;
    padding-bottom: 79%;
    background-repeat: no-repeat;
}

.homepage-element-pod-new-item-inner:before{
    content: "";
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
    height: 40%;
    /* padding-top: 68px; */
    bottom: 0px;
    display: block;
    width: 100%;
    z-index: 1;
    position: absolute;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.homepage-element-pod-new-h3 {
    z-index: 3;
    position: absolute;
    padding: 0;
    bottom: 44px;
    left: 25px;
    line-height: 21px;
    font-weight: 400;
    font-variant: normal;
    font-style: normal;
    font-size: 24px;
    font-family: var(--font-family-poppins);
    letter-spacing: 0;
    color: var(--menu-bg-color-f4f5f6);
    white-space: break-spaces;
    width: calc(100% - 60px);
}

.homepage-element-pod-new-pod-cta {
    z-index: 3;
    position: absolute;
    margin: 0;
    padding: 0;
    left: 25px;
    bottom: 29px;
    font-weight: 400;
    font-variant: normal;
    font-style: normal;
    font-size: 16px;
    font-family: var(--font-family-poppins);
    letter-spacing: 0;
    color: var(--kff-green-link);
    width: calc(100% - 60px);
}

.homepage-popular-categories-wrapper .popular-categories-wrapper > div {
    margin: 0;
    padding: 10px;
}

.popular-categories-h4 {
}

.popular-categories-heading-new {
    text-align: center;
    padding-bottom: 12px;
}

.popular-categories-heading-new h3 {
    margin: 0;
    padding-bottom: 20px;
    color: var(--main-text-color);
    font-weight: 400;
    font-size: 30px;
    line-height: 28px;
}

/* Careers section */
.homepage-careers-wrapper {
    padding: 0;
    margin: -30px 0 0;
}

.homepage-careers-wrapper .homepage-news-articles-wrapper .container {
    margin-top: -6px;
}

.homepage-careers-wrapper .homepage-news-articles-wrapper .homepage-careers-all-link-div {
    margin-bottom: 7px;
    text-align: right;
}

.homepage-careers-all-link-div {
    padding-top: 15px;
}

.homepage-careers-header {
    font-size: 36px;
    font-weight: 400;
    color: var(--white-color-ffffff);

}

.homepage-careers-wrapper .homepage-news-articles-slider{
    margin-left: 10px;
}

.homepage-careers-wrapper .slick-track > div {
    padding: 0 0 0 15px;
    margin-left: 3px;
}

.homepage-careers-wrapper .slick-track > div:first-child {
    padding: 0;
}

.homepage-careers-wrapper .slick-track > div:last-child {
    padding: 0;
}

a.homepage-careers-all-link {
    font-size: 15px;
    font-weight: 400;
    color: var(--white-color-ffffff);
}

.homepage-link-graphic-wrapper .featured-link {
    width: 100%;
    max-height: 300px;
    border-radius: 10px;
    background-color: var(--menu-bg-color-f4f5f6);
    margin-bottom: 20px;
}

.homepage-link-graphic-wrapper .featured-link:after {
    padding-bottom: 100%;
    content: "";
    display: block;
}


.footer-kff-bottom a {
    color: var(--white-color-ffffff);
}

.footer-logo-block {
    text-align: center;
}

.footer-logo {
    max-width: 200px;
    margin: 40px auto;
    display: block;
}

.footer-info-block {
    min-width: 225px;
}

.featured-link .link-graphic {
    margin-top: 41px;
}

.featured-link > div.homepage-link-graphic-right {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100%;
    /* margin-top: 79px; */
}

.featured-link > div.homepage-link-graphic-left {
     height: 200px;
     display: block;
     margin-bottom: 16px;
}

.featured-link .link-title {
    font-size: 24px;
    text-align: center;
}

.footer-wrapper a{
    color: var(--color-primary-blue);
}

.footer-wrapper a:hover{
    color: var(--btn-kff-green-color);
    text-decoration: none;
    opacity: 1;
}

.checkout-button-block{
    display: flex;
    justify-content: center;
    align-items: center;
}

a.checkout-button{
    background-color: var(--color-primary-blue);
    color: var(--white-color-ffffff);
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    width: 100%;
    max-width: 300px;
    margin: 20px 0 0 20px;
    white-space: nowrap;
}

a.green-checkout-button{
    background-color: var(--btn-kff-green-color);
    color: var(--white-color-ffffff);
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    width: 100%;
    max-width: 300px;
    margin: 20px 0 0 20px;
}

.basket-delete-btn{
    display: inline-flex;
}

.slick-dotted.slick-slider {
    margin-bottom: 0px;
}

ul.list-add-to-basket  li ul li{
    min-width: 48px;
}

.list-add-basket-buttons li,
ul.list-add-to-basket  li ul li{
    border: 2px solid var(--color-medium-blue);
}

.list-add-basket-buttons li:first-child,
ul.list-add-to-basket  li ul li:first-child{
    border-right: none;
}

.list-add-basket-buttons li:last-child,
ul.list-add-to-basket  li ul li:last-child{
    border-left: none;
}

ul.list-add-to-basket li ul,
ul.list-add-basket-buttons
{
    display: inline-flex;
    align-items: start;
}
ul.list-add-basket-buttons li,
ul.list-add-to-basket li ul li{
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
}
ul.list-add-to-basket li input[type="submit"]{
    margin-bottom: 1px;
}
ul.list-add-to-basket li ul li #intQuantity{
    height: 46px;
    width: 50px;
}
ul.list-add-to-basket li ul li button{
    padding: 0;
}
ul.list-add-to-basket li ul li i{
    font-size: 14px;
}

.popular-categories-wrapper a:link,
.popular-categories-wrapper a:visited,
.popular-categories-wrapper a:active {
    text-align: left;
}

#basketModal .modal-title {
    color: var(--main-text-color);
}

.page-container .checkout-buttons{
    float: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    align-content: center;
}

.pod-wrapper .pod-inner p.pod-cta {
    text-align: left;
}

button.green,
a.button.green,
input[type="submit"].green {
    background-color: var(--btn-green-color);
    color: var(--white-color-ffffff);
    text-decoration: none;
}

button.green:hover,
a.button.green:hover,
input[type="submit"].green:hover {
    background-color: var(--btn-hover-green-color);
}

button.green:active,
a.button.green:active,
input[type="submit"].green:active {

    background-color: var(--btn-active-green-color);
}

.account_page_warning .account-form-atom input.button-account {
    height: auto;
    padding: 10px 50px;
}

.account-page div.section div h3 span.primary-orange{
    color: var(--btn-primary-blue-color);
}

.checkout-review-side input[type="submit"] {
    background-color: var(--btn-green-color);
    color: var(--white-color-ffffff);
    text-decoration: none;
}

.checkout-review-side input[type="submit" i]:disabled {
    background-color: var(--disabled-color);
    color: var(--white-color-ffffff);
    border: 0;
}

.popular-categories-wrapper .featured-product-title{
    height: 60px;
}

.blog-payload .posts-list li a.button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s;
    height: 50px;
    min-width: 150px;
    width: fit-content;
    padding-right: 50px;
    padding-left: 50px;
    border-radius: 3px;
}

.checkout-basket-delete-title h4,
.checkout-basket-quantity-title h4{
    margin: 0;
    height: 50px;
    display: flex;
    align-items: center;
}

.header_warning_container{
    margin-right: 15px;
    margin-left: 15px;
}

@media (min-width: 768px) {

    .homepage-home-intro-wrapper .homepage-section {
        padding-top: 80px;
    }

    .homepage-4col-pages-wrapper {
        margin-top: 60px;
    }

    .homepage-section {
        padding-top: 80px;
    }

    .homepage-element-pod-new {
        margin-bottom: 0;
    }
    .homepage-element-pod-new-item {
        margin-bottom: 0;
    }

    .header-kff-right-block a:last-child {
        margin-right: 0;
    }

    .homepage-element-pod-new {
        display: flex;
    }

    .homepage-4col-pages-wrapper::before {
        height: 78px;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 78"><path fill="%23f4f5f6" d="m0,32.48s765.81-73.08,1308.91,0c543.1,73.08,1251.09,0,1251.09,0v45.52H0v-45.52Z"/></svg>') top center no-repeat;
        background-size: cover;
    }

    .homepage-4col-pages-wrapper:after {
        height: 71px;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 71"> <path fill="%23f4f5f6" d="m0,0h2560v40.4s-811.28,68.85-1316.53,0C738.22-28.45,0,58.19,0,58.19V0Z"/></svg>') bottom center no-repeat;
        background-size: cover;
    }

    .footer {
        margin-top: 60px;
    }

    .footer-wrapper .col-sm-2 {
        width: 15%;
    }

    .footer-wrapper .col-sm-2:last-child {
        margin-right: 10px;
    }

    .footer-logo-and-info-group{
        width: 38%;
        padding: 0;
        float: left;
    }
    .footer-wrapper .footer-logo-block {
        width: 100%;
        float: left;
    }

    .footer-wrapper .footer-info-block {
        width: 100%;
        float: left;
    }
    .footer-wrapper .footer-info-block ul{
        width: 220px;
        margin: 0 auto;
    }

    .footer button.ot-sdk-show-settings {
        text-align: left;
    }

    .footer #ot-sdk-btn.ot-sdk-show-settings, #ot-sdk-btn.optanon-show-settings {
        margin: 0;
    }
}

@media (max-width: 767px) {
	.care-bac{
		padding-bottom:15px;
	}
	
    button,
    a.button,
    input[type="submit"] {
        height: 50px;
        padding-right: 45px;
        padding-left: 45px;
        font-size: 16px;

    }

    .account-orders-table-body-main div.table-order-value {
        margin-bottom: 20px;
    }

    .homepage-element-pod-new-item:last-child {
        margin-bottom: 0;
    }

    .homepage-link-graphic-wrapper .featured-link {
        height: 109px;
    }

    .featured-link > div.homepage-link-graphic-left {
        height: 109px;
        display: block;
    }

    .featured-link .link-graphic .link-icon {
        max-width: 78px;
        height: 85px;
    }

    .featured-link .link-graphic{
        margin-top: 10px;
    }
    .featured-link .link-title{
        margin-top: -4px;
    }
    .featured-link > div.homepage-link-graphic-right {
        align-items: flex-start;
    }

    .homepage-4col-pages-wrapper {
        margin-top: 40px;
    }

    .slider_box {
        bottom: 50px;
    }

    .slider_line1 {
        margin-bottom: 9px;
    }

    .slider_line2 {
        margin-bottom: 27px;
        font-size: 35px;
        font-weight: 400;
        line-height: 30px;
    }

    .slider_cta {
        height: 50px;
        font-size: 16px;
        padding: 0 45px 0 45px;
    }

    .homepage-section {
        padding-top: 60px;
        padding-bottom: 0;
    }

    .homepage-news-articles-slider .slick-dots {
        bottom: -35px;
    }
    .homepage-careers-wrapper .homepage-news-articles-wrapper .homepage-careers-all-link-div {
        margin-top: -43px;
        margin-bottom: 16px;
        text-align: left;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .slider_box {
        bottom: 45px;
    }
    .slider_line2 {
        font-size: 40px;
        line-height: 75px;
    }
}

@media (max-width: 991px) {
    .page-container .checkout-buttons,
    .checkout-button-block{
        justify-content: center;
        flex-wrap: wrap;
        column-gap: 20px;
    }

    .page-container .checkout-buttons a.checkout-button,
    .checkout-button-block a.checkout-button {
        margin: 0 0 20px 0;
    }

    .show-menu-search-row,
    .show-menu-second-row,
    .header-menu-search-row,
    .header-menu-second-row {
        display: none;
    }

    .header-kff-top ul {
        justify-content: center;
    }

    .header-kff-right-block a {
        margin: 0 5% 0 5%;
    }

}

@media (min-width: 992px) {
    .homepage-pages-4col-wrapper .equal > div.col-md-3 {
        padding: 0;
        width: 23%;
    }

    .container .tabs-desktop .nav > li {
        float: left;
    }
}


@media (min-width: 1200px){
    .account-breadcrumbs {
        margin-top: 0;
    }

    .footer-wrapper .col-sm-2 {
        width: 14%;
    }
    .footer-logo-and-info-group{
        width: 43%;
    }

    .footer-wrapper .footer-logo-block {
        width: 55%;
    }

    .footer-wrapper .footer-info-block {
        width: 40%;
    }

}

.product-item-list .item-image{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* Jquery 3 fixes - start */
.nav > li {
    position: static;
}
.nav > li > a{
    padding: 0;
}
.nav > li > a:focus, .nav > li > a:hover{
    background-color: transparent;
}
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover{
    background-color: transparent;
}
/* Jquery 3 fixes - end */

.product-pdp-icons-wrp{
    display: inline-flex;
    margin-top: 10px;
    margin-bottom: 20px;
    justify-content: flex-start;
    align-items: center;
}

.product-pdp-icons-wrp img{
    width: 32px;
    height: 32px;
    margin-right: 10px;
}
/*
* APP Banner
*/
.appHeaderPromo{
    font-family: Arial,"ChevinDB",Helvetica, Sans-Serif;
    background: var(--menu-bg-color-f4f5f6);
    color: var(--main-text-color);
    padding: 5px;
    line-height: 1;
    display: none;
}
.appHeaderPromo > div{
    display: inline-block;
    vertical-align: middle;
}
.appHeaderPromo h3{
    color: var(--main-text-color);
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 5px 0;
    padding: 0;
    line-height: 1;
}
.appHeaderPromo p{
    color: var(--main-text-color);
    font-size: 11px;
    margin: 0 0 5px 0;
    padding: 0;
}
.appHeaderPromo a{
    color: var(--main-text-color);
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}
.appHeaderPromo .closeContainer{
    width: 5%;
    margin: 5px;
    text-align: center;
    font-size: 1.2em;
}
.appHeaderPromo .imgContainer{
    width: 20%;
    margin: 5px;
}
.appHeaderPromo .imgContainer{
    border-radius: 15px;
    width: 70px;
    margin: 5px 10px 5px 5px;
    background: transparent url("/img/kff-app.webp") no-repeat 50% 50%;
    min-height: 70px;
    height: auto;
    background-size: contain;
}
.appHeaderPromo .contentContainer{
    width: 50%;
}
.appHeaderPromo .linkContainer{
    width: 12%;
    text-align: center;
}
.appHeaderPromo .linkContainer a{
    color: var(--color-primary-blue);
    font-size: 16px;
    text-decoration: none;
}
.appHeaderPromo .linkContainer a:hover{
    color: var(--color-primary-blue);
    text-decoration: none;
}

.button-green {
    display: inline-block;
    position: relative;
    height: 50px;
    min-width: 150px;
    margin-top: 15px;
    border-radius: 11px;
    color: var(--white-color-ffffff);
    background-color: var(--btn-green-color);
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
}
.button-green:hover,
.button-green:active{
    background-color: var(--btn-hover-green-color);
}

form.contact_us .button-green {
    color: var(--white-color-ffffff) !important;
    width: initial !important;
}


/* Switch TWEAKS */

.switch__header-container {
    position: relative;
}

.switch__header-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

.switch__body-container{
	color: #000000;
	text-align: center;
	padding-top:10px;
	padding-bottom:10px;
}
/* Switch TWEAKS */

/* ABOUT TWEAKS */
.about__header-container{
    background-color: #0375ab;
    padding-top: 70px;
    text-align: center;
    position: relative;
    background-image: url('/img/about/about_header_mobile.png');
    background-repeat: no-repeat;
	background-size: cover;
    background-position: center
}
.about__header-container{
    padding-bottom: 144px;
}
.about__section-container--grey{
    padding-bottom: 104px;
}
.about__section__content p{
    margin-bottom: 0;
}
.about__section__content p + p{
    margin-top: 20px;
}
@media (min-width: 990px){
    .about__header-container{
        background-image: url('/img/about/about_header_desktop.png');
    }
}

.about__section-container .container{
    padding-top: 70px;
    padding-bottom: 90px;
}
.about__section-container--white .container{
    padding-top: 40px;
    padding-bottom: 70px;
}
@media (min-width: 990px){
    .about__section-container .container{
        padding-top: 144px;
        padding-bottom: 144px;
    }
    .about__section-container--white .container{
        padding-top: 90px; /* compensate for wave */
        padding-bottom: 144px;
    }
}
.about__section-container--grey{
    background-color: #F4F5F6;
    position: relative;
}
.about__section-container--white{
    background-color: #FFF;
}

.about__header-container h1{
    font-size: 35px;
    color: #FFF;
    line-height: 38px;
    margin-bottom: 14px;
    font-family: 'Poppins', sans-serif;
}
.about__section-container h2{
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 10px;
    font-weight: 500;
}
.about__section-container p{
    font-size: 14px;
    line-height: 20px;
}
.about__intro{
    font-size: 16px;
    line-height: 24px;
    color: #FFF;
    margin-bottom: 0;
    font-family: 'Poppins', sans-serif;
    max-width: 850px;
    margin: 0 auto;
}
a.about__button{
    padding: 10px 45px;
    font-size: 16px;
    margin-top: 44px;
    color: #FFF;
}
a.about__button:visited{
    color: #FFF;
}
a.about__button:hover, .about__button:hover{
    text-decoration: none;
    color: #EEE;
}

.about__full-image{
    margin: 0 auto;
}
.about__full-image img{
    width: 100%;
    height: auto;
    max-width: 666px;
    border-radius: 15px;
}
.about__long-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0 auto;
}
.about__long-image{
    width: 100%;
    height: auto;
    max-width: 237px;
    border-radius: 15px;
}
.about__section__content{
    width: 100%;
}

.about__section-container--white .container{
    flex-direction: column-reverse;
}

@media (min-width: 990px){
    .about__header-container h1{
        font-size: 45px;
        line-height: 28px;
        margin-bottom: 28px;
    }
    .about__section-container h2{
        margin-bottom: 12px;
    }
    .about__button{
        padding: 13px 50px;
        font-size: 16px;
    }
    .about__long-container{
        gap: 17px;
        margin: none;
        margin-left: auto;
    }
    .about__section__content{
        max-width: 412px;
    } 
    .about__section-container--white .container{
        flex-direction: initial;
    }
    .about__full-image{
        margin: 0;
    }
}

.about__section-container--white::before,
.about__section-container .container::before,
.about__section-container .container::after{
    content:none;
}

.about__section-container .container{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    gap: 36px;
}
.about__section-container--grey .container{
    gap: 48px;
}
@media (min-width: 990px){
    .about__section-container .container{
        gap: 24px;
        align-items: center;
    }

    .about__section-container--grey .container{
        /* gap: 143px; */
    }
    .about__section-container .container{
        flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
    }
}
@media (min-width: 1000px){
    .about__section-container .container{
        gap: 111px;
    }
}

.about__header-container::after,
.about__section-container--grey::after {
    content: "";
    z-index: 2;
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
}


.about__header-container::after,
.about__section-container--grey::after {
    position: absolute;
    bottom: -1px; /* Line issue for Romy, wasn't happening on my end */
    height: 90px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 767 78"> <path fill="%23FFFFFF" d="m0,24.03s204.81-54.07,392.16,0c187.35,54.07,374.84,0,374.84,0v53.97H0V24.03Z"/></svg>') top center no-repeat;
    background-size: cover;
}

@media (min-width: 990px){
    .about__header-container::after,
    .about__section-container--grey::after {
        height: 139px;
    }
}
@media (min-width: 2200px){
    .about__header-container::after,
    .about__section-container--grey::after {
        height: 180px;
    }
}
/* END ABOUT TWEAKS */


/* SECTOR STUFF */
.sector-landing__intro{
    padding: 38px 0;
    text-align: center;
    max-width: 940px;
    margin: 0 auto;
    color: #001E3D;
}
.sector-landing__intro h1{
    font-size: 28px;
    line-height: 45px;
    color: #001E3D;
    margin-bottom: 26px;
}
.sector-landing__intro__content{
    font-size: 16px;
    line-height: 24px;
    color: #001E3D;
}

.sector-landing__intro__content p{
    margin-bottom: 0;
}
.sector-landing__intro__content p + p{
    margin-top: 20px;
}

a.sector-landing__card{
    background: #F4F5F6;
    border-radius: 18px;
    box-shadow: 0px 3px 6px #00000029;
    /* border: 1px solid #F4F5F6; */
    margin-bottom: 38px; /*42px;*/
    position: relative;
    display: block;
    text-align: left !important;
    text-decoration: none !important;
    width: 100%;
}
a.sector-landing__card:hover{
    text-decoration: none !important;
}
a.sector-landing__card:hover span{
    text-decoration: underline !important;
}


.sector-landing__card__image{
    border-radius: 18px 18px 0 0;
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.sector-landing__card__content{
    padding: 25px 27px;
}

.sector-landing__card__content h2{
    font-size: 24px;
    line-height: 38px;
    color: #001E3D;
    margin-bottom: 10px;
    font-weight: 500;
}
.sector-landing__card__content__content{
    font-size: 14px;
    line-height: 24px;
    color: #001E3D;
    margin-bottom: 44px;
}

.sector-landing__card__more{
    /* margin-top: 44px; */
    display: block;
    text-align: left;
    position: absolute;
    bottom: 25px;
    /* mobile padding-bottom */
}

@media (min-width: 990px){
    .sector-landing__intro{
        padding: 60px 0 76px 0;
    }
    .sector-landing__intro h1{
        font-size: 34px;
        line-height: 28px;
        color: #001E3D;
        margin-bottom: 24px;
    }

    .sector-landing__card__content{
        padding: 32px 34px;
    }
}


/* Sector page */
.sector-container{
    /* max-width: 1078px; */
    /* box-sizing: content-box; */
    max-width: 1108px;
}
.sector-container::before, .sector-container::after{
    content: none;
}

.sector__header{
    display: flex;
    display: -webkit-flex;
    flex-direction: column-reverse;
    margin-bottom: 42px;
}
.sector__header__content__container{
    width: 100%;
}
.sector__header__content, .sector__header__image{
    padding: 0;
}
.sector__header__content{
    padding: 33px 22px;
    background-color: #F4F5F6;
    margin: 0 auto;
}
.sector__header__image{
    width: 100%;
}
.sector__header__image img{
    width: 100%;
}

.sector__header__back{
    padding-top:20px;
}

@media (min-width: 990px){
    .sector__header{
        flex-direction: initial;
        margin-bottom: 108px;
        align-items: center;
        background-color: #F4F5F6;
    }

    .sector__header__content, .sector__header__image{
        /* flex: 50%; */
    }
    .sector__header__content{
        max-width: 523px;
        margin-left: auto;
        margin-right: 127px;
    }
    .sector__header__image img{
        max-width: 800px;
    }
}
@media (min-width: 1200px){
    .sector__header__content{
        max-width: 523px;
        margin-left: auto;
        margin-right: 127px;
    }
}

.sector__secondary{
    display: flex;
    display: -webkit-flex;
    flex-direction: column-reverse;
    gap: 32px;
    margin-bottom: 45px;
}

.sector__secondary__image, .sector__secondary__content{
    flex: 50%;
}

.sector__secondary__image img{
    width: 100%;
}
.sector__secondary__content{

}
.sector__secondary__content h2{
    font-size: 24px;
    line-height: 38px;
    font-weight: 500;
}
.sector__secondary__content p{
    line-height: 24px;
}

@media (min-width: 990px){
    .sector__secondary{
        flex-direction: initial;
        margin-bottom: 98px;
    }
}


.sector-wysiwyg{
    color: #001E3D;
}

.sector-wysiwyg h2{
    color: #001E3D;
    font-size: 24px;
    line-height: 38px;
    font-weight: 500;
}
.sector-wysiwyg blockquote{
    margin: 42px 32px;
    color: #0087C6;
    border-left: 2px solid #0087C6;
    padding: 18px;
    font-size: 20px;
    line-height: 28px;
}

@media (min-width: 990px){
    .sector-wysiwyg blockquote{
        margin: 65px 140px;
    }
}

.other-sectors{
    margin-top: 60px;
    border-top: 1px solid #99A5B1;
    padding-top: 34px;
    margin-bottom: 60px;
}

.other-sectors .slick-list{
    padding-left: 0 !important;
}

.other-sectors .slick-slide{
    padding: 0 !important;
    padding-right: 12px !important;
    display: flex;
    /* flex-direction: column; */
}
@media (min-width: 990px){
    .other-sectors .slick-slide{
        padding: 0 !important;
        padding-right: 30px !important;
    }
}

@media (min-width: 990px){
    .other-sectors{
        margin-top: 114px;
        padding-top: 74px;
        margin-bottom: 100px;
    }
    .other-sectors .slick-slider{
        position: initial; /* Prevent arrows getting position based on this on desktop */
    }
}

/* arrows */
.other-sectors .container{
    position: relative;
}
.other-sectors .header2{
    padding-top: none;
    margin-bottom: 26px;
}
.other-sectors .slick-arrow{
    position: absolute;

    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    /* height: 54px;
    width: 54px; */
    padding: 10px 17px;
    color: #0087C6;

    font-size: 21px;
    background: #FFF;
    border: 1px solid #0087C6;
    border-radius: 9999px;
    box-shadow: 0px 3px 6px #00000029;

    cursor: pointer;
}
.other-sectors .slick-arrow--left{
    display: none !important;
    right: 100px; /* right arrow + gap + 15px container padding */
}
@media (min-width: 990px){
    .other-sectors .slick-arrow{
        box-shadow: none;
        top: 12px;
        transform: none;
    }
    .other-sectors .slick-arrow--left{
        display: block !important;
    }   
    .other-sectors .header2{
        padding-top: 20px;
        margin-bottom: 64px;
    }
}

/* Height match fix for bootstrap */
.sectors-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-wrap: wrap;
  }
.sectors-row > [class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    /* flex-direction: column; */
}

/* Same fix for slick */
#OtherSectors .slick-track
{
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display:         flex !important;
}

#OtherSectors .slick-slide
{
    height: auto !important;
}

#OtherSectors .slide{
    height: 100%;
}

/* END SECTOR STUFF */

/* BLOG STUFF */
.desktop{ display: none; }
.mobile{ display: block; }
@media (min-width: 990px){
    .desktop{ display: block; }
    .mobile{ display: none; }
}


.sectionDescription{
    margin-top: 10px;
}
.sectionDescription p{
    margin-bottom: 0;
    display: inline;
}
.sectionDescription p > p{
    margin-top:20px;
    display: inline-block;
}
.sectionDescription *:last-child{
	margin-bottom: 0;
	text-align: center;
}
.readmore__toggle{
	color: var(--color-primary-blue);
	cursor: pointer;
	margin-left: 10px;
    display: inline;
}
.readmore__toggle:hover{
	text-decoration: underline;
}


/**
* Checkout Promo Products Section
 */
.checkout-promo-products {
    margin: 40px 0;
    padding: 30px 0;
}

.checkout-promo-products .section-title {
    margin-bottom: 20px;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    color: var(--main-text-color);
}

.checkout-promo-products .section-description {
    margin-bottom: 30px;
    text-align: center;
    color: var(--text-color-grey);
}

.checkout-promo-slick {
    position: relative;
    margin: 0 -15px;
}

.checkout-promo-slick .product-item {
    margin: 0 15px;
}

/* Slick arrows for checkout promo slider */
.checkout-promo-slick .slick-arrow {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    z-index: 3;
    position: absolute;
    top: 50%;
    padding: 15px 20px;
    transform: translateY(-50%);
    background-color: var(--color-primary-blue);
    color: var(--white-color-ffffff);
    font-size: 20px;
    line-height: 20px;
}

.checkout-promo-slick .slick-arrow.slick-arrow-right {
    right: 0;
}

.checkout-promo-slick .slick-arrow.slick-arrow-left {
    left: 0;
}

.checkout-promo-slick .slick-arrow:hover {
    cursor: pointer;
}

/* Dots for checkout promo slider */
.checkout-promo-slick .slick-dots {
    bottom: -40px;
}

.checkout-promo-slick .slick-dots li button {
    border: none;
    box-shadow: none;
}

.checkout-promo-slick .slick-dots li button::before {
    color: var(--border-grey-color);
    font-size: 12px;
    opacity: 1;
}

.checkout-promo-slick .slick-dots li:not(.slick-active) button:hover::before {
    color: var(--color-primary-blue);
    opacity: 0.7;
}

.checkout-promo-slick .slick-dots li.slick-active button::before {
    color: var(--color-primary-blue);
}

/* Modal styling for checkout promo */
#checkoutPromoModal .modal-body {
    padding: 30px;
}

#checkoutPromoModal .checkout-promo-slick {
    margin: 0;
}

#checkoutPromoModal .checkout-promo-slick .product-item {
    margin: 0 10px;
}

@media (max-width: 767px) {
    .checkout-promo-slick .slick-prev,
    .checkout-promo-slick .slick-next {
        display: none !important;
    }

    .checkout-promo-products .section-title {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .featured-link .link-title {
        text-align: left;
    }
}
.careBanner{
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    margin-bottom: 16px !important;
}
.careBanner .slick-dots{
    position: absolute;
    bottom: 0;
}
.careTiles{
    margin-top: 24px;
    margin-bottom: 24px;
}
.careTiles .sector-landing__card{
    margin-bottom: 12px !important;
}
.careBannerTitle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    background: black; 
    font-size: 32px;
    font-weight: bold;
}
.careBannerImage{
    width: 100%;
    max-width: 1300px;
    max-height: 400px;
    object-fit: cover;
}
.careBannerItem{
    position: relative;
}
.link-icon{
    background-image: url('/img/icons/recipes.svg');
}
.sector__secondary--care{
    background-color: #F4F5F6;
}

.careTiles .sector-landing__card__content h2{
    font-size: 22px !important;
}

.sector__secondary--care .sector__secondary__content .vertical-centre{
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
    flex-direction: column;
}

@media (max-width: 768px){
    .careTiles .sector-landing__card{
        margin-bottom: 22px !important;
    }
}
@media (max-width: 990px){
    .sector__secondary--care{
        padding-top: 20px;
        gap: 0px !important;
    }
}

.sector-card-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
	transform: translateZ(0);
}

.sector-landing__card__overlay {
    position: absolute;
    top: 20px;
    right: -30px;
    z-index: 20;
    background-color: #309ed1;
    color: #fff;
    transform: rotate(45deg);
    width: 120px;
    text-align: center;
    font-weight: bold;
    pointer-events: none; 
	text-transform: uppercase;
}