/* autoprefixer grid: autoplace */

/* REM Scaling for responsive design */
html {
    font-size: 17px;
}

@media (max-width: 900px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 400px) {
    html {
        font-size: 13px;
    }
}

/* Modules will scale with document */
.header {
    font-size: 1.5rem;
}

.footer {
    font-size: 0.75rem;
}

.sidebar {
    font-size: 0.85rem;
}

/* Type will scale with modules */
h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.2em;
}

html {
    scroll-behavior: smooth;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

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

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

.clearfix:after {
    clear: both;
}

/* Any text selected on the site will be in HPP red */
::-moz-selection {
    background: #ee3e33; /* WebKit/Blink Browsers */
    color: #fafafa;
}

::selection {
    background: #ee3e33; /* WebKit/Blink Browsers */
    color: #fafafa;
}

::-moz-selection {
    background: #ee3e33; /* Gecko Browsers */
}

#FloatingSidebar, #MiniBasketContainer, #PrintLogo {
    display: none;
}

    #MiniBasketContainer #ViewSampleServiceButtonPanel {
        margin: 0 0.8rem;
    }

html, body {
    margin: 0 auto 0;
    padding: 0;
    font-size: 1rem;
    font-family: 'Open Sans',Helvetica,Arial,sans-serif;
    color: #444;
    width: 100%;
}

hr {
    /*border: solid 1px #444;*/
}

a.backLink {
    text-decoration: underline;
    margin: 0.5rem;
    display: inline-block;
}

.StdSideMargin {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
    cursor: pointer;
}

    a:link {
        color: #ee3e33;
        text-decoration: none;
    }

    a:visited {
        color: #ee3e33;
        text-decoration: none;
    }

    a:hover {
        text-decoration: none;
        color: #08c;
    }


address {
    font-style: normal;
    color: #08c;
}

/*input [type=submit], input[type=button],*/

input[type="file"].DeliveryImageUpload {
    display: none;
}

/* CSS3 buttons emulating original .png versions */
.button {
    color: #fafafa;
    position: relative;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% 'Open Sans', Arial, Helvetica, sans-serif;
    padding: .5rem 2rem .55rem;
    text-shadow: -1px -1px 0 #666, 1px -1px 0 #666, -1px 1px 0 #666, 1px 1px 0 #666;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    border: solid 1px #666;
    border-radius: .5rem;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    background-size: 200% 200%;
    transition: all 0.15s ease-in-out;
    background-position: center top;
}

    .button:visited, .button:link, .button:visited {
        text-decoration: none;
        color: #fafafa;
    }

    .button:hover {
        text-decoration: none;
        background-position: center bottom;
        color: #fafafa;
    }


    .button:active {
        position: relative;
        top: 1px;
    }

    .button::after {
        opacity: 0;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        /*z-index: 1;*/
        width: 100%;
        height: 100%;
        opacity: 0;
        border-radius: .5rem;
        -webkit-box-shadow: inset 0 5px 8px rgba(0,0,0,.5);
        -moz-box-shadow: inset 0 5px 8px rgba(0,0,0,.5);
        box-shadow: inset 0 5px 8px rgba(0,0,0,.5);
        transition: opacity 0.15s ease-in-out;
    }

    button, .button:hover::after {
        opacity: 1;
    }

.button--colour-red {
    background-image: -webkit-gradient(to top, #ee3e33 0%, #ee3e33 50%, #f4817a 100%);
    background-image: -moz-linear-gradient(to top, #ee3e33 0%, #ee3e33 50%, #f4817a 100%);
    background-image: linear-gradient(to top, #ee3e33 0%, #ee3e33 50%, #f4817a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee3e33', endColorstr='#ee3e00');
}

.button--colour-green {
    background-image: -webkit-gradient(to top, #027e11 0%, #027e11 50%, #47C757 100%);
    background-image: -moz-linear-gradient(to top, #027e11 0%, #027e11 50%, #47C757 100%);
    background-image: linear-gradient(to top, #027e11 0%, #027e11 50%, #47C757 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#027e11', endColorstr='#47C757');
}

.button--colour-blue {
    background-image: -webkit-gradient(to top, #3386ee 0%, #3386ee 50%, #7ab0f4 100%);
    background-image: -moz-linear-gradient(to top, #3386ee 0%, #3386ee 50%, #7ab0f4 100%);
    background-image: linear-gradient(to top, #3386ee 0%, #3386ee 50%, #7ab0f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3386ee', endColorstr='#7ab0f4');
}

.button--colour-grey {
    background-image: -webkit-gradient(to top, #666 0%, #666 50%, #aaa 100%);
    background-image: -moz-linear-gradient(to top, #666 0%, #666 50%, #aaa 100%);
    background-image: linear-gradient(to top, #666 0%, #666 50%, #aaa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666', endColorstr='#aaa');
}

/*.button--colour-lightgrey, .button--colour-greyblue, #contactForm input[type="submit"] {
    background-image: linear-gradient(to top, #fafafa 0%, #c0c0c0 50%, #646464 100%);
    background-image: -webkit-gradient(to top, #fafafa 0%, #c0c0c0 50%, #646464 100%);
    background-image: -moz-linear-gradient(to top, #fafafa 0%, #c0c0c0 50%, #646464 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#646464', endColorstr='#c0c0c0');
}

    .button--colour-lightgrey:hover, #contactForm input[type="submit"]:hover:not([disabled]) {
        background-image: linear-gradient(to top, #fafafa 0%, #c0c0c0 50%, #646464 100%);
        background-image: -webkit-gradient(to top, #fafafa 0%, #c0c0c0 50%, #646464 100%);
        background-image: -moz-linear-gradient(to top, #fafafa 0%, #c0c0c0 50%, #646464 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#646464', endColorstr='#c0c0c0');
    }*/

.button--state-selected {
    text-decoration: none;
    background-position: center bottom !important;
    color: #eee !important;
}

    .button--state-selected::after {
        opacity: 1;
    }

.button:disabled {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), color-stop(#8a8a8a), to(#323232));
    background-image: -o-linear-gradient(#fafafa, #8a8a8a, #323232);
    background-image: linear-gradient(#fafafa, #8a8a8a, #323232);
    color: #8a8a8a !important;
    text-shadow: 0px 0px 0 #000, -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333 !important;
}

.button--size-small {
    padding: .2rem 2rem .2rem;
    border-radius: .2rem;
    /*text-shadow: 0px 0px 0 #000, -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333 !important;*/
    white-space: normal;
    white-space: nowrap;
    text-decoration: none;
    font-size: 0.8em;
}

.button--size-medium {
    padding: .3rem 2rem .3rem;
    border-radius: .2rem;
    /*text-shadow: 0px 0px 0 #000, -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333 !important;*/
    white-space: normal;
    white-space: nowrap;
    text-decoration: none;
    font-size: 1em;
}

.button--size-large {
    padding: 1rem 5rem 1rem;
    /*text-shadow: 0px 0px 0 #000, -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333 !important;*/
    white-space: normal;
    white-space: nowrap;
    text-decoration: none;
    font-size: 1em;
}

.button--size-small:after {
    border-radius: .2rem;
}

.button--size-medium:after {
    border-radius: .2rem;
}

.button:disabled, #contactForm input[type="submit"]:disabled, .disabled, .disabled:hover, .button input[type=button]:disabled {
    cursor: not-allowed !important;
    background-color: #646464 !important;
    background-image: none !important;
}

.BasketNumberButtons {
    display: inline;
}

    .BasketNumberButtons div {
        box-sizing: border-box;
        float: left;
        position: relative;
        margin-right: 0.8rem;
    }

        .BasketNumberButtons div a {
            box-sizing: border-box;
            display: block;
            /*margin: 0.1em 0;*/
        }

.ContinueShopping {
    margin-bottom: 2%;
}

.CheckoutNoOfItemsIcon {
    right: -5px;
    /*top: 12px;*/
}

#SubmitButtonCol > input {
    display: block;
    margin: 1rem auto;
    position: relative;
}

#btn_SubmitPayNowSagePay {
    height: 4rem;
}


.BasketNumberButtons::after {
    content: "";
    display: table;
    clear: both;
}

.BoldHPPRed, a:link.BoldHPPRed, a:visited.BoldHPPRed, a:hover.BoldHPPRed, a:active.BoldHPPRed {
    font-weight: bold;
    color: #ee3e33;
}

.HPPRed, a:link.HPPRed, a:visited.HPPRed, a:hover.HPPRed, a:active.HPPRed {
    font-weight: normal;
    color: #ee3e33;
}

#MiniBasketContainer #SampleServiceCheckoutButtonPanel {
    margin-left: 0;
}

#MiniBasketCheckoutLink {
    text-align: left;
    float: left;
    margin-left: 20px;
}

#Container--Shape-HPP {
    width: 150px;
    height: 100px;
    transform: skew(20deg);
    background: #ee3e33;
}

div.SiteAlert {
    margin-top: 0.5rem;
    text-align: center;
    font-weight: bold;
    background-color: #ee3e33;
    color: #fafafa;
}

.WarningBox {
    clear: both;
    font-weight: bold;
    margin: 0.5em auto 0.5rem;
    padding: 0.5rem;
    border: 1px solid yellow;
    background: #FFFFCC;
    max-width: 960px;
    font-size: 1.5rem;
}

#form1 {
    height: 100%;
}

#HeaderWidthContainer {
    border-bottom: solid 1px #ee3e33;
    background-color: #fafafa;
    -webkit-box-shadow: #666 0px 20px 10px -20px inset, 1px 1px 10px #999999;
    box-shadow: #666 0px 20px 10px -20px inset, 1px 1px 10px #999999;
}

#MainContainer {
    height: 100%;
    margin: 0 auto 0;
    padding-bottom: 40px;
}

#MainContainerContent {
    clear: both;
    margin-bottom: 1rem;
    width: 100%;
}

#MainContainerInnerContent {
    max-width: 1024px;
    margin: 20px auto 0;
}

.DashboardHeader {
    margin: 1rem;
}

.DashItems {
    display: grid;
    grid-template-columns: repeat(auto-fill, 160px);
    grid-auto-rows: 1fr;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#NewsRepeater, #SupportPanelIconHolder {
    grid-template-columns: repeat(auto-fill, 300px);
}


#FooterContainer {
    clear: both;
    background-color: #fafafa;
    width: 100%;
    border-top: solid 2px #ee3e33;
    -webkit-box-shadow: 0px 0px 10px 3px #999;
    box-shadow: 0px 0px 10px 3px #999;
    position: relative;
    bottom: 0;
    padding-bottom: 10px;
}

    #FooterContainer a:link {
        color: #ee3e33;
    }

    #FooterContainer a:hover {
        color: #08c !important;
    }

    #FooterContainer a:visited {
        color: #ee3e33;
    }

#FooterCopyrightContainer {
    padding-top: 2rem;
}

/**** Core / Top Menu ****/
#TopHeaderContainer {
    margin: 0 auto 0.5rem;
    z-index: 3;
    position: relative;
}

#HeaderContainer {
    background-color: #fafafa;
    z-index: 3;
}

/* Sepcify Grid Names */
.CTALogo {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: CTALogo;
}

.account {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: account;
}

.CTABasket {
    -ms-grid-row: 1;
    -ms-grid-column: 7;
    grid-area: CTABasket;
}

.CTALogin {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
    grid-area: CTALogin;
}

.MiddleHeaderContainer {
    -ms-grid-row: 1;
    -ms-grid-column: 9;
    width: 100%;
    grid-area: MiddleHeaderContainer;
}

#SearchContainerLeft {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: SearchContainerLeft;
}

#SearchButton {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: SearchButton;
}

#InstantSearch {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: InstantSearch;
}

.InstantSearchItem .Product:hover {
    color: #08c;
}

.InstantSearchPrice .MoneyVAT {
    margin-right: 1%;
}

#copyProdCodeIcon img {
    width: 12px;
    height: 12px;
    margin-left: 1%;
    margin-right: 1%;
    float: right;
}

.CTAContact {
    -ms-grid-row: 1;
    -ms-grid-column: 11;
    grid-area: CTAContact;
}

.CTAContact img {
    height:24px;
}

.CTAMiniMenu {
    -ms-grid-row: 1;
    -ms-grid-column: 13;
    grid-area: CTAMiniMenu;
    -ms-grid-column-align: end;
    justify-self: end;
    -ms-grid-row-align: end !important;
    align-self: end !important;
    position: relative;
    top: 0.5rem;
}

ul#TopHeaderMenu {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 120px 1em 60px 1em 60px 1em 60px 1em 1fr 1em 180px 1em auto;
    grid-template-columns: 120px 60px 60px 60px 1fr 180px auto;
    grid-template-areas: "CTALogo account CTALogin CTABasket MiddleHeaderContainer CTAContact CTAMiniMenu";
    grid-gap: 1rem;
    justify-items: center;
    padding-top: 15px;
    margin: 0 auto;
    padding-left: 0;
    padding-bottom: 0;
}

    ul#TopHeaderMenu li {
        display: block;
        -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
        height: auto;
    }

.account, .CTALogin, .CTABasket {
    text-align: center;
}

ul#TopHeaderMenu .ItemText {
    font-size: 0.8rem;
    font-weight: bold;
}

/*ul#TopHeaderMenu a {
        color: #ee3e33;
        text-decoration: none;
    }

        ul#TopHeaderMenu a:hover {
            color: #08c;
            text-decoration: none;
        }*/

.ItemIcon {
    height: 50px;
    min-width: 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#CTALogo > div {
    height: 60px;
}

.CategoryImages ul li:hover {
    border-color: #ee3e33;
}

/*Nav Icons*/
#CTALogo .ItemIcon {
    position: relative;
    top: -2px;
    width: 116px;
    background-image: url('/images/action/icon-logo.png');
    background-image: none, url('/images/action/icon-logo.svg');
}

#CTARequestAccount .ItemIcon {
    background-image: none, url('/images/action/icon-account-new-nocircle.svg');
}

#CTAMyAccount .ItemIcon {
    background-image: none, url('/images/action/icon-account.svg');
}

#CTACheckout .ItemIcon {
    background-image: none, url('/images/action/icon-basket.svg');
}

#CTACheckoutLabel, .CheckoutNoOfItemsIcon, .CTACheckoutLabel {
    position: absolute;
    color: #fafafa;
    width: 18px;
    height: 18px;
    font-family: 'Open Sans',Helvetica,Arial,sans-serif;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 50%;
    text-align: center;
    z-index: 2;
}

.CTACheckoutLabel--Style-HPP {
    background: -o-radial-gradient(top left, circle, rgba(245,245,245,1) 5%, rgba(238,62,51,1) 50% );
    background: radial-gradient(circle at top left, rgba(245,245,245,1) 5%, rgba(238,62,51,1) 50% );
    border: solid 1px #444;
}

.CTACheckoutLabel--Style-ManuFacturerSamples {
    background: -o-radial-gradient(top left, circle, rgba(245,245,245,1) 5%, rgba(2,126,17,1) 50% );
    background: radial-gradient(circle at top left, rgba(245,245,245,1) 5%, rgba(2,126,17,1) 50% );
    border: solid 1px #444;
}

.CTACheckoutLabel--Style-SampleServiceSamples {
    background: -o-radial-gradient(top left, circle, rgba(245,245,245,1) 5%, rgba(62,62,238,1) 50% );
    background: radial-gradient(circle at top left, rgba(245,245,245,1) 5%, rgba(62,62,238,1) 50% );
    border: solid 1px #444;
}

.CTACheckoutLabel--Style-SampleServiceManufacturerSamples {
    background: -o-radial-gradient(top left, circle, rgba(245,245,245,1) 5%, rgba(2,126,17,1) 50%, rgba(62,62,238,1) 70% );
    background: radial-gradient(circle at top left, rgba(245,245,245,1) 5%, rgba(2,126,17,1) 50%, rgba(62,62,238,1) 70% );
    border: solid 1px #444;
}

#CTACheckoutLabel {
    z-index: 6;
    bottom: -4px;
    right: 2px;
}

#CTALogin .ItemIcon {
    background-image: none, url('/images/action/icon-account-login-nocircle.svg');
}

#CTALogout .ItemIcon {
    background-image: none, url('/images/action/icon-account-logout-nocircle.svg');
}

#CTARequestAccount .ItemIcon, #CTALogin .ItemIcon, #CTAMyAccount .ItemIcon, #CTACheckout .ItemIcon, #CTALogout .ItemIcon {
    position: relative;
}

.GridRepeaterHeader {
    position: sticky;
    top: 39px;
    background-color: #f9f9f9;
    box-shadow: 0px 1px 0px 0px #ee3e33;
    z-index:1; /*was 2*/
}

.MetricFilteringPage:hover, .CurrentPage {
    color: #ee3e33;
    font-weight: bold;
}

.CTAContact {
    display: block;
    top: 8px;
    text-align: center;
    color: #666;
}

    .CTAContact:hover {
        text-decoration: none;
    }

    .CTAContact .ItemIcon {
        width: 180px;
        height: unset;
        background-repeat: no-repeat;
    }


.GoogleMapInfo h4 {
    margin-bottom: 0;
}

.GoogleMap {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    margin-bottom: 1rem;
}

    .GoogleMap iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }

.StandardCheckoutButtonPanel, .ManufacturerSamplesButtonPanel, .SampleServiceCheckoutButtonPanel {
    display: none;
}

#CTAMenu .ItemIcon {
    background-image: url('/images/action/icon-menu.png');
    background-image: none, url('/images/action/icon-menu.svg');
    cursor: pointer;
}

#CTABasketView {
    display: none;
}

#MiniBasketSummary {
    display: none;
}

#EventCalendarContainer {
    font-size: 0.8rem;
    width: 974px;
}

.EventContainer, .ProspectContactFilter {
    font-size: 0.6rem;
}

.SubmitSampleCartProgress {
    font-size: 1.5rem;
    color: #ee3e33;
}

#SearchContainer {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 10fr 3% 1fr;
    grid-template-columns: 10fr 1fr;
    grid-column-gap: 3%;
    grid-template-areas: "SearchContainerLeft SearchButton" "InstantSearch InstantSearch";
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    /*place-self: center;*/
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    outline: none;
    position: relative;
}

#SearchContainerLeft {
    border: solid 1px #c0c0c0;
    font-size: 1.2rem;
    padding: 0;
    height: 30px;
    border-radius: 10px;
    padding-left: 10px;
    min-width: 0;
    outline: none;
    caret-color: #ee3e33;
}

    #SearchContainerLeft input[type=text] {
        text-decoration: none;
        padding-left: 10px;
    }

#SearchContainer input[type=button]#SearchButton {
    background-color: transparent;
    background-image: none, url('/images/action/icon-search.svg');
    height: 25px;
    min-width: 25px;
    max-width: 25px;
    max-height: 25px;
    border: 0 none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-appearance: none;
    outline: none !important;
    cursor: pointer;
}

#InstantSearch {
    z-index: 9999999;
    position: absolute;
    top: 0;
    width: 100%;
}

    #InstantSearch > *:first-child {
        border-top: solid 1px grey;
    }

#SearchContainer .InstantSearchClear input[type=button] {
    background-image: none;
    max-width: 80px;
    max-height: 40px;
    float: left;
    background: #eee;
    text-align: center;
    padding: 0 2%;
    cursor: pointer;
}

.InstantSearchSeparator {
    text-align: center;
    background-color: #fafafa;
    color: #ee3e33;
    font-weight: bold;
    padding: 0.25rem;
    border-left: solid 1px grey;
    border-right: solid 1px grey;
}

.InstantSearchItem {
    background-color: #fafafa;
    border-left: solid 1px grey;
    border-bottom: solid 1px grey;
    border-right: solid 1px grey;
    padding: 0.25rem;
    font-size: 1.25rem;
    display: block;
}

.Category:hover {
    background-color: #ee3e33;
    color: #fafafa;
}

.InstantSearchItem a {
}

.InstantSearchClear {
    padding: 0.25rem;
    background-color: #ee3e33;
    border-left: solid 1px grey;
    border-bottom: solid 1px grey;
    border-right: solid 1px grey;
    clear: both;
    height: 40px;
}

.ProductBoxAddToBasket {
    margin-top: 0.5rem;
}

.AssociatedProductQuantity .Quantity {
    position: relative;
    top: -3px;
}

.MetricSearchButton {
    margin-left: 0.5rem;
}

/**** END OF SEARCH STYLES****/
/**** Navigation Menu ****/

#MenuContainer {
    margin: 0 auto;
    text-align: center;
}

/*#MenuList {
    display: none;
    margin: 0;
    padding: 0;
}

.menuBox {
    display: none;
    margin: 0;
    padding: 0;
    z-index: 2;
}

li.menuBoxLink.Home {
    color: #fafafa;
    min-width: 49px;
    min-height: 49px;
}

li.MenuCategory.Expanded > .menuBox {
    display: block;
}

li.MenuCategory a {
    text-decoration: none;
    display: block;
}

li.MenuCategory > a {
    color: #444;
    padding: 13px 7px;
}

li.MenuCategory:hover a:hover {
    color: #fafafa;
}

li.MenuCategory:hover {
    background-color: #ee3e33;
    color: #fafafa;
    cursor: pointer;
}*/

/* Home Icon on menu styling */
/*.Home > a {
    background-color: #ee3e33;
    background-image: url('/Images/SmallHouse.svg');
    background-size: 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    min-width: 5%;
}

    .Home > a:hover {
        background-image: url('/Images/SmallHouseWhite.svg');
        background-size: 20px;
        background-color: #ee3e33;
        background-repeat: no-repeat;
        min-width: 5%;
    }



li.MenuCategory.Home {
    min-width: 50px;
}



    li.MenuCategory.Home > a, li.MenuCategory.Expanded > a {
        color: #fafafa;
        min-width: 32px;
        min-height: 32px;
        width: 100%;
        height: 48px;
    }

    li.MenuCategory.Home > a {
        -webkit-box-shadow: #c02116 0px 15px 15px -10px inset;
        box-shadow: #c02116 0px 15px 15px -10px inset;
    }*/
/* End of Home icon styling*/

/*.Expanded {
    background-color: #ee3e33;
    color: #fafafa;
}

li.MenuCategory .MenuExpand {
    position: absolute;
    right: 0.5rem;
}

.menuBoxLink a {
    color: #444;
    display: block;
    padding: 0.8em 0.5rem;
}*/

#ViewSampleServiceButtonPanel {
    width: 100%;
}

/*Core Site Elements*/
#MainContainerInnerContent h1 {
    border-bottom: 1px solid #ee3e33;
    padding-left: 0.3rem;
    padding-right: 0.2rem;
    margin-top: 0.2rem;
}

#FooterWidthContainer {
    margin: 20px auto 0;
    max-width: 1024px;
}

#FooterContent {
    margin: 0 2%;
}

#FooterContainer a {
    text-decoration: none;
}

#FooterLeft {
    position: relative;
    float: left;
    width: 50%;
}

#FooterRight {
    position: relative;
    text-align: right;
    float: right;
    width: 50%;
}

#FooterBottom {
    clear: both;
    text-align: center;
    font-size: 0.6rem;
}

.contactSpriteSheet {
    background: url('/Images/action/sprites-footer-icons.svg') no-repeat top left;
    background-size: 32px;
}

#FooterLinks {
    padding: 1em 0;
}

    #FooterLinks > div {
        text-align: center;
        float: right;
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        cursor: pointer;
        margin: 0 0 0 2rem;
    }

        #FooterLinks > div a {
            display: inline-block;
            width: 100%;
            height: 100%;
        }

#FooterFacebook {
    background-position: 0 0;
}

    #FooterFacebook:hover {
        background-position: 0 -33px;
    }

#FooterTwitter {
    background-position: 0 -66px;
}

    #FooterTwitter:hover {
        background-position: 0 -99px;
    }

#FooterCompanyEmail {
    background-position: 0 -132px;
}

    #FooterCompanyEmail:hover {
        background-position: 0 -165px;
    }

#FooterYouTube {
    background-position: 0 -198px;
}

    #FooterYouTube:hover {
        background-position: 0 -231px;
    }

#FooterInstagram {
    background-position: 0 -264px;
}

    #FooterInstagram:hover {
        background-position: 0 -297px;
    }


#StraplineHolder {
    max-width: 950px;
    margin: 2% auto 5%;
    font-size: 1.4rem;
}

ul#FooterNavInfoList {
    margin: 0;
    padding: 0;
    list-style: none;
}

li.FooterInfo {
    display: block;
    float: left;
    width: 33.3%;
    line-height: 3;
    text-align: center;
    padding: 0 20px;
}

.Footer-Telephone{
    font-size: 1.5rem;
}

.Footer-Telephone > * {
    vertical-align:middle;
}

.Footer-Telephone img {
    height:1.5rem;
}


#contactInformation {
    margin-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-between;
    align-items: stretch;
}

#ContactBar {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:2em;
    margin: 2em auto;
    padding:1em;
    text-align: center;
    background: #eef3f8;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#ContactBar > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap:0.5em;
}

#ContactBar > a > img {
    width:75%;
}

@media (min-width: 700px) {
    #ContactBar {
        padding:2em;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 3em;
    }
}

#ConBarOpeningTimes {
    background-size: 22px;
    background-repeat: no-repeat;
    background-image: url(/Images/icon-door-circle.svg);
    padding-left: 30px;
}

    #ConBarOpeningTimes:hover {
        background-image: url(/Images/icon-door-circle-filled.svg);
    }

.DirectionsTo:before {
    content: "";
    float: left;
    width: 16px;
    height: 16px;
    background: url("/Images/Icons/icon_pdf.png") no-repeat;
    display: block;
    margin: 0 6px 0 0;
    position: relative;
    top: 1px;
}

.vcard {
    display: flex;
    /*flex: 1;*/
    flex-direction: column;
    padding: 2%;
    background-color: #fafafa;
    border: 1px solid #fafafa;
    border-radius: 5px;
    flex: 0 0 49%;
    margin-right: 20px;
    margin-bottom: 20px;
}

    .vcard:last-child {
        /*margin-left: 2%;*/
    }

.GoogleMapsHolder {
    margin-top: auto;
}

#Sheffield {
    float: right;
}

/* iPad warning for builder pages */
#OrientationWarning {
    display: none;
}

/* Layouts */
#LeftContainer, #RightContainer {
    width: auto;
    display: block;
    float: none;
}

#LeftMenuContainer, #RightMenuContainer {
    float: none;
}

/* Paging */
.Repeater_PageControls {
    clear: both;
}

.Repeater_RecordsPerPage {
    float: left;
    margin: 0.5rem;
}

.Repeater_Paging {
    float: right;
    margin: 0.5em 0;
}

.NotSelectable {
    color: #999;
    font-weight: normal;
    font-size: 13px;
}

.Repeater_Paging .PagingArrow, .Repeater_Paging .PagingNumber {
    display: inline-block !important;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 2.8;
    font-size: 0.8rem;
    border-left: solid 1px #fafafa;
    border-top: solid 1px #fafafa;
    border-right: solid 1px #fafafa;
    border-bottom: solid 1px #fafafa;
    border-radius: 5px;
}

.Repeater_Paging .PagingArrow {
    background-color: #ee3e33 !important;
    color: #fafafa !important;
}

.Repeater_Paging .Selectable {
    color: #ee3e33;
    background-color: #fafafa;
    cursor: pointer;
}

.Repeater_Paging .PagingCurrentPage {
    background-color: #fafafa;
}

ul#AZLettersUL {
    margin: 0.5rem;
    padding: 0;
}

    ul#AZLettersUL > li {
        list-style-type: none;
        display: inline-block;
        margin: 0.25rem;
    }

#rblExpressSubmitDeliveryAddresses input, #rblExpressSubmitDeliveryAddresses label, #rblExpressSubmitInvoiceAddresses input, #rblExpressSubmitInvoiceAddresses label {
    cursor: pointer;
}


#cbExpressSubmitEnabled {
    cursor: pointer;
}

    #cbExpressSubmitEnabled + label {
        cursor: pointer;
    }

#QuickSubmitDisclaimer {
    font-size: 0.9rem;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#GuideDownloadsList .GuidePDF::after {
    content: url('../Images/pdf.jpg');
}

.PromoSplitLeft, .PromoSplitRight {
    text-decoration: none;
    display: block;
    width: 49%;
}

.PromoSplitLeft {
    float: left;
}

.PromoSplitRight {
    float: right;
}

@media (min-width: 1024px) {

    /* Animated Menu */
    /*.menuBoxLink {
        border-top: solid 1px #ee3e33;
        position: relative;
        font-weight: 700;
        color: #383736;
        outline: 0;
        overflow: hidden;
        background: none;
        z-index: 1;
        cursor: pointer;
    }*/

    /*.hppAnim a {
        color: #383736;
        -webkit-transition: color 0.3s;
        -o-transition: color 0.3s;
        transition: color 0.3s;
    }*/

        /*.hppAnim a:hover {
            color: #fafafa;
            -webkit-transition: color 0.3s;
            -o-transition: color 0.3s;
            transition: color 0.3s;
        }*/

    /*.hppAnim:before {
        content: "";
        position: absolute;
        background: #ee3e33;
        bottom: 50%;
        left: 50%;
        height: 100%;
        width: 0%;
        right: 0;
        top: 0;
        z-index: -1;
        -webkit-transition: left 0.5s cubic-bezier(.39,.58,.57,1), width 0.5s cubic-bezier(.39,.58,.57,1);
        -webkit-transform: skew(-30deg, 0deg);
        -ms-transform: skew(-30deg, 0deg);
        transform: skew(-30deg, 0deg);
        opacity: 0;
        transition: 0.35s ease-in;
        -o-transition: 0.35s ease-in;
        -ms-transition: 0.35s ease-in;
        -moz-transition: 0.35s ease-in;
        -webkit-transition: 0.35s ease-in;
    }*/

    /*.hppAnim:hover:before {
        width: 140%;
        left: -20%;
        opacity: 1;
        transition: 0.35s ease-in;
        -o-transition: 0.35s ease-in;
        -ms-transition: 0.35s ease-in;
        -moz-transition: 0.35s ease-in;
        -webkit-transition: 0.35s ease-in;
    }*/
    /* Animated Menu End*/


    #TopHeaderContainer {
        width: 1000px;
    }

    #MainContainerMenu {
        min-height: 30px;
        width: 100%;
        background-color: #fafafa;
        /*border-bottom: 1px #ee3e33 solid;*/
    }

    #MenuContainer {
        position: relative;
        /* TWO box shadows here (comma seperated), one for the inset top and one for underneath the menu */
        /*-webkit-box-shadow: #666 0px 20px 10px -20px inset, 1px 1px 3px #999999;
        box-shadow: #666 0px 20px 10px -20px inset, 1px 1px 3px #999999;*/
        width: 100%; /* Previously 974 */
        margin: 0 auto;
        background-color: #ddd;
    }

        /* Floated Menu */
        #MenuContainer.Floated {
            position: fixed;
            top: 0;
            margin: 0 auto;
            width: 100%;
            left: 0;
            z-index: 999;
        }

        /*#MenuContainer > #MenuList {
            width: 1000px;
            margin: 0 auto;
            border-bottom: none;
            background: none;
        }*/

    /*li.MenuCategory .MenuExpand {
        display: none;
    }*/

    #CTAMenu {
        display: none;
    }

    .BannerPhone {
        font-size: 1.2rem;
    }

    .BannerPhone > * {
        vertical-align:middle;
    }

    #BannerOpeningTimes {
        font-size: 0.9rem;
        position: relative;
        top: -2px;
    }

    #BannerOpeningTimes {
        color: #08c;
    }

    #CTABasketView {
        display: block;
        clear: both;
        z-index: 5;
    }

    /*#MenuList {
        display: block;
        width: 1000px;
        font-size: 0.98rem;
    }

    li.menuBoxLink {
        font-weight: normal;
        background-color: #fafafa;
        display: block;
        font-size: 1.0rem;
        padding: 0.1em 0;
    }

    li.MenuCategory {
        width: auto;
        font-size: 1.05rem;
        display: block;
        font-weight: normal;
        float: left;
        border-bottom: none;
        height: 48px;
    }

        li.MenuCategory:hover, li.MenuCategory.Expanded {
            background-color: #ee3e33;
            transition: 0.2s ease-in;
            -o-transition: 0.2s ease-in;
            -ms-transition: 0.2s ease-in;
            -moz-transition: 0.2s ease-in;
            -webkit-transition: 0.2s ease-in;
            -webkit-box-shadow: #c02116 0px 15px 15px -10px inset;
            box-shadow: #c02116 0px 15px 15px -10px inset;
        }

            li.MenuCategory.Expanded > .menuBox {
                display: block;
                position: absolute;
                border: 1px solid #c0c0c0;
                border-top: none;
                -webkit-box-shadow: 2px 5px 9px 0px #888;
                box-shadow: 2px 5px 9px 0px #888;
            }*/

    #TopHeaderMenu li:hover #MiniBasketContainer {
        display: block;
    }

    #LeftContainer {
        width: auto;
        overflow: hidden;
    }

    #RightContainer {
        width: auto;
        overflow: hidden;
    }

    #LeftMenuContainer {
        display: block;
        float: left;
        width: 242px;
    }

    #RightMenuContainer {
        display: block;
        float: right;
        width: 242px;
    }
}

@media (max-width: 1023px) {

    /*.menuBoxLink {
        background: #fafafa;
    }

        .menuBoxLink:hover {
            background: #ee3e33 !important;
        }

    #MenuList.MobileShow {
        display: block;
        background: #fafafa;
    }*/

    ul#TopHeaderMenu {
        -ms-grid-columns: 10px 120px 60px 60px 60px 1fr auto;
        grid-template-columns: 10px 120px 60px 60px 60px 1fr auto;
        grid-template-areas: ". CTALogo account CTALogin CTABasket MiddleHeaderContainer CTAMiniMenu";
    }

        ul#TopHeaderMenu li.CTAContact {
            display: none;
        }

    .CTAMiniMenu {
        display: block;
        width: 50px;
        z-index: 10;
    }

    #StraplineHolder {
        border: none !important;
        box-shadow: none !important;
    }

    #ContactBar a > div, #ContactBar > div:hover {
        width: 30%;
    }

    .CTALogo {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }

    .account {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }

    .CTABasket {
        -ms-grid-row: 1;
        -ms-grid-column: 5;
    }

    .CTALogin {
        -ms-grid-row: 1;
        -ms-grid-column: 4;
    }

    .MiddleHeaderContainer {
        -ms-grid-row: 1;
        -ms-grid-column: 6;
    }

    .CTAMiniMenu {
        -ms-grid-row: 1;
        -ms-grid-column: 7;
    }
}

@media (max-width: 700px) {
    #CTALogo {
        position: relative;
        top: 10px;
        margin-bottom: 10px;
    }

    ul#TopHeaderMenu {
        -ms-grid-columns: 1fr 5% 1fr 5% 1fr 5% 1fr 5% 1fr 5% 1fr 5% 1fr 5% 1fr;
        grid-template-columns: repeat(8,1fr);
        -ms-grid-rows: auto 0 auto;
        grid-template-areas: ". CTALogo CTALogo . account CTALogin CTABasket ." "MiddleHeaderContainer MiddleHeaderContainer MiddleHeaderContainer MiddleHeaderContainer MiddleHeaderContainer MiddleHeaderContainer MiddleHeaderContainer CTAMiniMenu";
        grid-gap: 0 5%;
    }

    .MiddleHeaderContainer {
        margin-left: 5%;
    }

    #contactInformation {
        margin-bottom: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-between;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }

    /*.MenuExpand {
        display: none;
    }*/

    li.FooterInfo {
        width: 100%;
    }

    #ContactBar > div, #ContactBar > div:hover {
        width: 100%;
        margin-bottom: 20px;
    }

    #StraplineHolder {
        border: none !important;
        box-shadow: none !important;
        font-size: 1rem;
    }

    #FooterLinks {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        padding: 1em 0;
        flex-direction: row-reverse;
    }

        #FooterLinks > div {
            background-size: 4rem;
            text-align: center;
            width: 4rem;
            height: 4rem;
            min-width: 32px;
            min-height: 32px;
            cursor: pointer;
            padding: 0;
            margin: 0;
        }

            #FooterLinks > div a {
                display: inline-block;
                width: 100%;
                height: 100%;
            }

    #FooterFacebook {
        background-position: 0 0px;
    }

        #FooterFacebook:hover {
            background-position: 0 -66px;
        }

    #FooterTwitter {
        background-position: 0 -132px;
    }

        #FooterTwitter:hover {
            background-position: 0 -198px;
        }

    #FooterCompanyEmail {
        background-position: 0 -264px;
    }

        #FooterCompanyEmail:hover {
            background-position: 0 -330px;
        }

    #FooterYouTube {
        background-position: 0 -396px;
    }

        #FooterYouTube:hover {
            background-position: 0 -462px;
        }

    #FooterInstagram {
        background-position: 0 -528px;
    }

        #FooterInstagram:hover {
            background-position: 0 -594px;
        }

    #FooterLeft {
        width: 100%;
    }

    #FooterRight {
        width: 100%;
        padding-top: 2rem;
        text-align: center;
    }

    li.FooterInfo {
        padding: 0;
        height: 35px;
    }

    .GoogleMapInfo {
        width: 100%;
        float: left;
        margin: 10px 2px;
        align-self: flex-end;
    }

    .vcard {
        width: 100%;
    }

    .CTALogo {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
        -ms-grid-column-span: 3;
    }

    .account {
        -ms-grid-row: 1;
        -ms-grid-column: 9;
    }

    .CTABasket {
        -ms-grid-row: 1;
        -ms-grid-column: 13;
    }

    .CTALogin {
        -ms-grid-row: 1;
        -ms-grid-column: 11;
    }

    .MiddleHeaderContainer {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 13;
    }

    .CTAMiniMenu {
        -ms-grid-row: 3;
        -ms-grid-column: 15;
    }

    .PromoSplitLeft, .PromoSplitRight {
        width: 100%;
        float: none;
        margin: 0.5em 0;
    }
}

@media (max-width: 400px) {
    .CTABasket {
        margin-right: 15%;
    }

    ul#TopHeaderMenu {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas: "CTALogo CTALogo account CTALogin CTABasket" "MiddleHeaderContainer MiddleHeaderContainer MiddleHeaderContainer MiddleHeaderContainer CTAMiniMenu";
    }

    #ContactBar a > div, #ContactBar > div:hover {
        width: 100%;
        margin-top: 20px;
    }

    /*.MenuExpand {
        display: none;
    }*/

    li.FooterInfo {
        width: 100%;
    }

    #ContactBar > div, #ContactBar > div:hover {
        width: 100%;
        margin-bottom: 20px;
    }

    .CTALogo {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
    }

    .account {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }

    .CTABasket {
        -ms-grid-row: 1;
        -ms-grid-column: 5;
    }

    .CTALogin {
        -ms-grid-row: 1;
        -ms-grid-column: 4;
    }

    .MiddleHeaderContainer {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
    }

    .CTAMiniMenu {
        -ms-grid-row: 2;
        -ms-grid-column: 4;
        -ms-grid-column-span: 2;
    }
}

@media (max-width: 320px) {

    ul#TopHeaderMenu {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas: ". CTALogo CTALogo CTALogo ." "MiddleHeaderContainer MiddleHeaderContainer MiddleHeaderContainer MiddleHeaderContainer MiddleHeaderContainer" "account CTALogin CTABasket . CTAMiniMenu";
    }

    .MiddleHeaderContainer {
        margin: 3% 10%;
        min-width: 0;
    }
}

/* NEW 2023 MENU STYLES*/
#MenuSystem {
    display: none;
    /*font-family: 'Century Gothic','Roboto','Open Sans',Helvetica,Arial,sans-serif;*/
    /*font-family: 'Century Gothic','Open Sans',Helvetica,Arial,sans-serif;*/
    font-family: 'Open Sans',Helvetica,Arial,sans-serif;
}

#MenuSystem, .MenuPageItems, .MenuSectionItems {
    margin:0;
    padding:0;
}

.MenuPageItems {
    display:none;
}

.MenuPage, .MenuSection, .MenuItem {
    display: block;
    margin: 0 auto;
}

.MenuPage a {
        display:block;
        cursor: unset;
    }

.MenuPage a[href], a.MenuPageTitle  {
    cursor: pointer;
}

.MenuPageTitle, .MenuSectionTitle, .MenuItem a {
    color: #444;
    padding: 13px 7px;
    display: block;
}

.MenuPage.Open > .MenuPageTitle, .MenuPageTitle:hover,.MenuSection a[href]:hover, .MenuItem a[href]:hover {
    background-color: #ee3e33;
    color: #ffffff;
}

.MenuPage.Open .MenuPageItems {
    display:block;
}

.MenuSectionTitle {
    text-transform: uppercase;
    color: #ee3e33;
    font-weight: 300;
}

.MenuSectionTitle:hover {
    color: #ee3e33;
}

/*.MenuItem.RequireLogin a::after {
    content: '\00a0🔒';
    white-space: nowrap;
}*/

@media (max-width: 1023px) {
    #MenuSystem.MobileShow {
        display: block;
        background: #fafafa;
    }
}

@media (min-width: 1024px) {
    #MainContainerMenu {
        border-bottom:none;
    }

    #MenuContainer {
        background-color: #ee3e33;
        color: #ffffff;
        box-shadow:none;
    }

    #MenuSystem {
        position: relative;
        display: grid;
        grid-gap: 1em;
        grid-auto-flow: column;
        max-width: 1250px;
        margin: 0 auto;
        width: 100%;
        user-select: none;
        padding: unset;
        justify-content: center;
    }

    .MenuPageTitle {
        font-size: 1.25em;
        display: inline-block;
        padding: 0.25em 1em;
        font-weight: 300;
        margin-top: 0.25em;
        border-radius: 0.5em 0.5em 0 0;
        color: #ffffff;
    }

    .MenuPage.Open > .MenuPageTitle, .MenuPageTitle:hover{
        background-color: #ffffff;
        background-color: rgba(255,255,255,0.98);
        color: #ee3e33;
    }

    .MenuPage {
        display: block;
        /*margin: 0 1em;*/
    }

    .MenuPage ul {
        margin:0;
        list-style:none;
    }

    .MenuPage > .MenuPageItems {
        display: none;
    }

    .MenuPage.Open > .MenuPageItems {
        display: block;
    }

    .MenuPageItems {
        position: absolute;
        left: 0;
        right: 0;
        padding: 1em;
        columns: 5;
        background-color: #ffffff;
        background-color: rgba(255,255,255,0.97);
        padding: 1em;
        margin: 0;
        border: solid 2px #ee3e33;
        border-top: none;
        border-radius: 0 0 10px 10px;
        z-index: 2;
        text-align: center;
        box-shadow: rgba(0,0,0,0.4) 10px 10px 10px -5px;
    }

    .MenuPageItems[data-sectioncount="4"] {
        columns: 4;
    }

    .MenuPageItems[data-sectioncount="3"] {
        columns: 3;
    }

    .MenuPageItems[data-sectioncount="2"] {
        columns: 2;
    }

    .MenuPageItems[data-sectioncount="1"] {
        columns: 1;
    }

    .MenuSection {
        display: block;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .MenuSectionTitle {
        padding: 0.25em;
        font-size: 1.2em;
        border-radius: .25em;
        text-align:left;
    }

    .MenuSectionItems {
        padding:0;
    }

    .MenuItem {
        display: block;
        text-align: left;
    }

    .MenuItem a{
        margin: 0.25em;
        padding: 0.25em;
        border-radius:.25em;
        color: #444;
        font-weight:300;
    }

    .MenuItem a[href]:hover {
        background-color: #ee3e33;
        color: #ffffff;
        transition: all 0.5s;
    }

}