@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,500;1,500&display=swap');
@import url("https://use.typekit.net/aaa8dhr.css");
@import url("https://use.typekit.net/qyx8loz.css"); /* Kings InterHigh 2024 Refresh ***/

/*** Font weights for "Brown"
Thin: 300
Light: 400 (Normal)
Regular: 500
Medium: 700 (Bold)
Bold: 800 (Rarely used)
***/

/*** Font weights for "Adobe Garamond Pro"
Regular: 400
Semibold: 600
Bold: 700
***/

/*** Font Declarations ***/

@font-face {
    font-family: "Brown";
    src: url('../../fonts/BrownLLWeb-Thin.eot');
    src: url('../../fonts/BrownLLWeb-Thin.eot?#iefix') format('embedded-opentype'),
    url("../../fonts/BrownLLWeb-Thin.woff2") format("woff2"),
    url("../../fonts/BrownLLWeb-Thin.woff") format("woff"),
    url('../../fonts/BrownLLWeb-Thin.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "Brown";
    src: url('../../fonts/BrownLLWeb-ThinItalic.eot');
    src: url('../../fonts/BrownLLWeb-ThinItalic.eot?#iefix') format('embedded-opentype'),
    url("../../fonts/BrownLLWeb-ThinItalic.woff2") format("woff2"),
    url("../../fonts/BrownLLWeb-ThinItalic.woff") format("woff"),
    url('../../fonts/BrownLLWeb-ThinItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: "Brown";
    src: url('../../fonts/BrownLLWeb-Light.eot');
    src: url('../../fonts/BrownLLWeb-Light.eot?#iefix') format('embedded-opentype'),
    url("../../fonts/BrownLLWeb-Light.woff2") format("woff2"),
    url("../../fonts/BrownLLWeb-Light.woff") format("woff"),
    url('../../fonts/BrownLLWeb-Light.ttf') format('truetype');
    font-weight: 400;
    font-style:  normal;
}
@font-face {
    font-family: "Brown";
    src: url('../../fonts/BrownLLWeb-LightItalic.eot');
    src: url('../../fonts/BrownLLWeb-LightItalic.eot?#iefix') format('embedded-opentype'),
    url("../../fonts/BrownLLWeb-LightItalic.woff2") format("woff2"),
    url("../../fonts/BrownLLWeb-LightItalic.woff") format("woff"),
    url('../../fonts/BrownLLWeb-LightItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;

}
@font-face {
    font-family: "Brown";
    src: url('../../fonts/BrownLLWeb-Regular.eot');
    src: url('../../fonts/BrownLLWeb-Regular.eot?#iefix') format('embedded-opentype'),
    url("../../fonts/BrownLLWeb-Regular.woff2") format("woff2"),
    url("../../fonts/BrownLLWeb-Regular.woff") format("woff"),
    url('../../fonts/BrownLLWeb-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "Brown";
    src: url('../../fonts/BrownLLWeb-Italic.eot');
    src: url('../../fonts/BrownLLWeb-Italic.eot?#iefix') format('embedded-opentype'),
    url("../../fonts/BrownLLWeb-Italic.woff2") format("woff2"),
    url("../../fonts/BrownLLWeb-Italic.woff") format("woff"),
    url('../../fonts/BrownLLWeb-Italic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: "Brown";
    src: url('../../fonts/BrownLLWeb-Medium.eot');
    src: url('../../fonts/BrownLLWeb-Medium.eot?#iefix') format('embedded-opentype'),
    url("../../fonts/BrownLLWeb-Medium.woff2") format("woff2"),
    url("../../fonts/BrownLLWeb-Medium.woff") format("woff"),
    url('../../fonts/BrownLLWeb-Medium.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Brown";
    src: url('../../fonts/BrownLLWeb-MediumItalic.eot');
    src: url('../../fonts/BrownLLWeb-MediumItalic.eot?#iefix') format('embedded-opentype'),
    url("../../fonts/BrownLLWeb-MediumItalic.woff2") format("woff2"),
    url("../../fonts/BrownLLWeb-MediumItalic.woff") format("woff"),
    url('../../fonts/BrownLLWeb-MediumItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: "Brown";
    src: url('../../fonts/BrownLLWeb-Bold.eot');
    src: url('../../fonts/BrownLLWeb-Bold.eot?#iefix') format('embedded-opentype'),
    url("../../fonts/BrownLLWeb-Bold.woff2") format("woff2"),
    url("../../fonts/BrownLLWeb-Bold.woff") format("woff"),
    url('../../fonts/BrownLLWeb-Bold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: "Brown";
    src: url('../../fonts/BrownLLWeb-BoldItalic.eot');
    src: url('../../fonts/BrownLLWeb-BoldItalic.eot?#iefix') format('embedded-opentype'),
    url("../../fonts/BrownLLWeb-BoldItalic.woff2") format("woff2"),
    url("../../fonts/BrownLLWeb-BoldItalic.woff") format("woff"),
    url('../../fonts/BrownLLWeb-BoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}


/*** Globals ***/

:root {
    --text-black: #2a2a2a;
}


html {
    font-size: 16px;
}

body {
    font-family: 'Brown', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

p,
.pstyle,
ul,
ul li,
ol,
ol li {
    font-family: 'Brown', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #666666;
}

ul,
ul li,
ol,
ol li {
    color: var(--text-black);
    font-weight: 500;
}

b, strong {
    font-weight: 600; /* medium */
}

i, em {
    font-style: italic;
}

p.accent,
.pstyle.accent{
    font-size: 0.875rem;
    line-height: 1.125rem;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
    margin-bottom: 0.625rem;
    font-weight: 700;
    color: var(--grey-mid);
}

p.banner-accent,
.pstyle.banner-accent{
    font-size: 1.125rem;
    line-height: 1.125rem;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
    margin-bottom: 0.938rem;
}

p.caption, .pstyle.caption, small {
    font-family: 'Brown', sans-serif;;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
}

ul,
ol {
    padding-left: 0;
    margin-left: 1.875rem;
}

blockquote {
    font-family: 'STIX Two Text', serif;
    font-size: 1.375rem;
    line-height: 1.75rem;
    font-weight: 600;
    font-style: normal !important;
}

div.content-area a:not(.button) {
    text-decoration: underline !important;
    color: var(--text-black);
}
div.content-area a:not(.button):hover,
div.content-area a:not(.button):active {
    text-decoration: underline !important;
    color: var(--text-black);
}

p:not(.accent) + h2,
p:not(.accent) + .h2style,
ul + h2,
ul + .h2style{
    margin-top: 3rem;
}
p:not(.accent) + h3,
p:not(.accent) + .h3style,
ul + h3,
ul + .h3style{
    margin-top: 2.75rem
}
p:not(.accent) + h4,
p:not(.accent) + .h4style,
ul + h4,
ul + .h4style{
    margin-top: 2.5rem;
}
p:not(.accent) + h5,
p:not(.accent) + .h5style,
ul + h5,
ul + .h5style{
    margin-top: 2.5rem;
}
p:not(.accent) + h6,
p:not(.accent) + .h6style,
ul + h6,
ul + .h6style{
    margin-top: 2.5rem;
}

/*** SAMSUNG SMART FRIDGE / SMEG KETTLE / HOTPOINT HOOVER BREAKPOINT ***/
@media(min-width:992px) and (max-width:1366px) {

}

@media(max-width: 991px) {
    p.banner-accent, .pstyle.banner-accent {
        font-size: 1rem;
    }
}

.v2021_TERM_TABLE .header-term-table h2, .v2021_TERM_TABLE .header-term-table h4 {
    color: #fff;
}

/*** Global Pill ***/
div.pill {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    padding: 10px 20px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 30px;
}
@media(max-width: 767.98px) {
    div.pill {
        margin-bottom: 20px;
        font-size: 15px;
        padding: 8px 17px;
    }
}
div.pill { /* new pill color 2026 */
    background-color: #D6F6E2;
    color: #0F411C;
}

/********* 2024 Fonts Update **********/

/*** These styles are active on all viewports... ***/

h1.serif,
.h1style.serif,
h2.serif,
.h2style.serif,
h3.serif,
.h3style.serif,
h4.serif,
.h4style.serif,
h5.serif,
.h5style.serif,
h6.serif,
.h6style.serif,
a.serif,
p.serif {
    font-family: 'STIX Two Text', serif;
}

h1.sans-serif,
.h1style.sans-serif,
h2.sans-serif,
.h2style.sans-serif,
h3.sans-serif,
.h3style.sans-serif,
h4.sans-serif,
.h4style.sans-serif,
h5.sans-serif,
.h5style.sans-serif,
h6.sans-serif,
.h6style.sans-serif,
a.sans-serif,
p.sans-serif {
    font-family: 'Brown', sans-serif;
}

h1.doodle,
.h1style.doodle,
h2.doodle,
.h2style.doodle,
h3.doodle,
.h3style.doodle,
h4.doodle,
.h4style.doodle,
h5.doodle,
.h5style.doodle,
h6.doodle,
.h6style.doodle,
a.doodle,
p.doodle {
    font-family: "pf-reminder", sans-serif;
    font-weight: 400;
}

p.large { /* p.large not used anymore */
    /*font-size: 18px;*/
    /*line-height: 28px;*/
}

/****** 2026 Update ******/

/* heading fonts */
 h1,
 h1.alt,
 .h1,
 .h1style,
 .h1style.alt,

 h2,
 h2.alt,
 .h2,
 .h2style,
 .h2style.alt,

 h3,
 h3.alt,
 .h3,
 .h3style,
 .h3style.alt,

 h4,
 h4.alt,
 .h4,
 .h4style,
 .h4style.alt,

 h5,
 h5.alt,
 .h5,
 .h5style,
 .h5style.alt,
div.h5style > p,

h6,
h6.alt,
.h6,
.h6style,
.h6style.alt {
    font-family: "STIX Two Text", serif;
    font-weight: 400; /* Regular */
     color: var(--text-black);
}


/* font weights */
h1,
h1.alt,
.h1,
.h1style,
.h1style.alt {
    font-weight: 500; /* Medium */
}

h2,
h2.alt,
.h2,
.h2style,
.h2style.alt {
    font-weight: 400; /* Regular */
}


h3,
h3.alt,
.h3,
.h3style,
.h3style.alt {
    font-weight: 400; /* Regular */
}

h4,
h4.alt,
.h4,
.h4style,
.h4style.alt {
    font-weight: 400; /* Regular */
}

h5,
h5.alt,
.h5,
.h5style,
.h5style.alt,
div.h5style > p {
    font-weight: 400; /* Regular */
}

h6,
h6.alt,
.h6,
.h6style,
.h6style.alt {
    font-weight: 400; /* Regular */
}


/*** Desktop Specific Heading Styles ***/
@media(min-width: 1600px) {
     h1,
     h1:not(.alt),
     .h1style,
     .h1style:not(.alt){
        font-size: 60px;
        line-height: 72px;
        margin-bottom: 30px;
    }
     h1.alt,
     .h1style.alt,
     .h1.alt {
        font-size: 72px;
        line-height: 90px;
        margin-bottom: 30px;
    }
     h2,
     h2:not(.alt),
     .h2style,
     .h2style:not(.alt) {
        font-size: 48px;
        line-height: 60px;
        margin-bottom: 30px;
    }
     h3,
     h3:not(.alt),
     .h3style,
     .h3style:not(.alt) {
        font-size: 36px;
        line-height: 44px;
        margin-bottom: 30px;
    }
     h4,
     h4.alt,
     h4:not(.alt),
     .h4style,
     .h4style.alt,
     .h4style:not(.alt) {
        font-size: 30px;
        line-height: 38px;
        margin-bottom: 20px;
    }
     h5,
     h5:not(.alt),
     .h5style,
     .h5style:not(.alt),
     div.h5style > p {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 15px;
    }
     h6,
     h6:not(.alt),
     .h6style,
     .h6style:not(.alt),
     div.h6style > p {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 15px;
    }
}

/*** Tablet / Laptop ***/
@media(max-width: 1599.98px) {
    p,
    .pstyle {
        font-size: 16px;
        line-height: 24px;
    }
    h1,
    h1:not(.alt),
    .h1style,
    .h1style:not(.alt){
        font-size: 40px;
        line-height: 48px;
        margin-bottom: 30px;
    }
    h1.alt,
    .h1style.alt,
    .h1.alt {
        font-size: 50px;
        line-height: 60px;
        margin-bottom: 30px;
    }
    h2,
    h2:not(.alt),
    .h2style,
    .h2style:not(.alt) {
        font-size: 32px;
        line-height: 38px;
        margin-bottom: 20px;
    }
    h3,
    h3:not(.alt),
    .h3style,
    .h3style:not(.alt) {
        font-size: 27px;
        line-height: 33px;
        margin-bottom: 20px;
    }
    h4,
    h4.alt,
    h4:not(.alt),
    .h4style,
    .h4style.alt,
    .h4style:not(.alt) {
        font-size: 23px;
        line-height: 28px;
        margin-bottom: 15px;
    }
    h5,
    h5:not(.alt),
    .h5style,
    .h5style:not(.alt),
    div.h5style > p {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 15px;
    }
    h6,
    h6:not(.alt),
    .h6style,
    .h6style:not(.alt),
    div.h6style > p {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 15px;
    }
}

/*** Mobile ***/
@media(max-width: 991.98px) {
    p,
    .pstyle {
        font-size: 15px;
        line-height: 20px;
    }
    h1,
    h1:not(.alt),
    .h1style,
    .h1style:not(.alt){
        font-size: 34px;
        line-height: 41px;
        margin-bottom: 20px;
    }
    h1.alt,
    .h1style.alt,
    .h1.alt {
        font-size: 42px;
        line-height: 52px;
        margin-bottom: 20px;
    }
    h2,
    h2:not(.alt),
    .h2style,
    .h2style:not(.alt) {
        font-size: 30px;
        line-height: 36px;
        margin-bottom: 15px;
    }
    h3,
    h3:not(.alt),
    .h3style,
    .h3style:not(.alt) {
        font-size: 25px;
        line-height: 30px;
        margin-bottom: 15px;
    }
    h4,
    h4.alt,
    h4:not(.alt),
    .h4style,
    .h4style.alt,
    .h4style:not(.alt) {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 15px;
    }
    h5,
    h5:not(.alt),
    .h5style,
    .h5style:not(.alt),
    div.h5style > p {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 15px;
    }
    h6,
    h6:not(.alt),
    .h6style,
    .h6style:not(.alt),
    div.h6style > p {
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 15px;
    }
}