﻿@font-face {
    font-family: 'FontAwesome5FreeSubset';
    font-style: normal;
    font-weight: 900;
    font-display: auto;
    src: url("../../_global/fonts/subset-FontAwesome5Free-Solid.eot");
    src: url("../../_global/fonts/subset-FontAwesome5Free-Solid.eot?#iefix") format("embedded-opentype"), url("../../_global/fonts/subset-FontAwesome5Free-Solid.woff2") format("woff2"), url("../../_global/fonts/subset-FontAwesome5Free-Solid.woff") format("woff"), url("../../_global/fonts/subset-FontAwesome5Free-Solid.ttf") format("truetype"), url("../../_global/fonts/subset-FontAwesome5Free-Solid.svg#fontawesome") format("svg");
}


.pageGlobalMessage {
    font-family: 'Century Gothic',Arial;
    width: 100%;
    box-sizing: border-box;
    color: white;
    font-size: 11pt;
    background-color: #179d1e;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
    text-align: center;
}






/* Used by Translate control */
.globalVisible {
    visibility: visible;
}

.globalHidden {
    visibility: hidden;
    height: 0px;
    position: absolute;
}

.translateSpacer {
    height: 5px;
}
/* change to this style so customer login and translate buttons work */

.customerLoginTranslateWrapper {
    padding-left: 2px;
    padding-right: 2px;
}

    .customerLoginTranslateWrapper .productMenuSearchBox {
        border-top-style: none;
        border-right-style: none;
        border-left-style: none;
        border-bottom-style: none;
        height: auto;
        margin-top: 0px;
        padding-top: 0px;
    }

.productMenuSearchBox {
    display: inline-block;
    text-decoration: none;
    margin-right: 0px;
}

.productMenuCategory a {
    color: inherit;
    text-decoration: none;
}

    .productMenuCategory a:hover {
        color: inherit;
        text-decoration: underline;
    }

.customerLoginTranslateWrapper .productMenuSearchBox:hover {
    text-decoration: underline;
}

.errorMessage a {
    color: inherit;
}

.productMenuPayPal {
    height: 50px;
}

    .productMenuPayPal img {
        width: 130px;
        height: auto;
        filter: alpha(opacity=70);
        opacity: 0.7;
    }

        .productMenuPayPal img:hover {
            filter: alpha(opacity=100);
            opacity: 1.0;
        }

    .productMenuPayPal .productMenuSearchBox {
        border: none;
        background-color: inherit;
    }

.productMenuLinks .productMenuSearchTitle {
    margin-bottom: 5px;
}

.productMenuNationalLink {
    font-size: 9pt;
    padding-top: 5px;
    padding-bottom: 5px;
}


/* Product Details page */

.productDetailsFeatures ul {
    margin-bottom: 3px;
}


.productDetailsProductModifiers table {
    border-collapse: collapse;
    cellpadding: 0;
}

    .productDetailsProductModifiers table td {
        padding-bottom: 8px;
        padding-left: 0px;
    }

        .productDetailsProductModifiers table td:nth-child(2) {
            padding-left: 8px;
        }

.productDetailsFeatures ul li {
    padding-bottom: 8px;
 }

    .productDetailsFeatures ul li:first-letter {
        text-transform: uppercase;
    }


.productDetailsPrices input[type="radio"] {
    margin-left: 0px;
    padding-left: 0px;
    margin-bottom: 10px;
}

.productDetailsMoreImages {
    display: inline;
    letter-spacing: -1px
}

.productDetailsMoreImagesWrapper img {
    height: 82px;
    width: 82px;
}

.productDetailsMoreImages a {
}

.productDetailsZoomImage {
    float: right;
}

.popUpImageText {
}

.modalPopup {
    text-align: right;
}

.productDetailsEnlarge {
    display: inline-block;
    font-size: 75%;
    margin-bottom: 20px;
}

.productDetailsPinIt {
    display: block;
    float: right;
}


.productDetailsMoreImage {
    height: 82px;
    width: 82px;
    margin-right: 5px;
    margin-top: 5px;
    display: inline-block;
}


    .productDetailsMoreImage:hover {
        background-color: black;
        background-image: url('../Images/productDetailsHover.jpg');
        background-position: center;
        background-repeat: no-repeat;
    }

.productDetailsMoreImagesWrapper a:hover img {
    opacity: 0.4;
    filter: alpha(opacity=40);
    -webkit-transition: background-color 1s, opacity 1s; /* For Safari 3.1 to 6.0 */
    transition: background-color 1s, opacity 1s;
}

.productDetailsProductCode {
    display: none;
}

.productDetailsBuy {
    display: inline-block;
}

.productDetailsModifierTextBox, .productDetailsModifierList {
    font-size: inherit;
    font-family: inherit;
    border-style: solid;
    border-width: 1px;
    border-color: inherit;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 4px;
    padding-right: 3px;
    border-radius: 3px;
    margin-bottom: 5px;
    filter: alpha(opacity=80);
    opacity: 0.8;
}

.productDetailsModifierTextBox {
    width: 200px;
}

.productDetailsModifierList {
    width: 208px;
}

.productDetailsModifierList {
    padding-left: 0px;
}

    .productDetailsModifierTextBox:focus, .productDetailsModifierList:focus {
        filter: alpha(opacity=100);
        opacity: 1.0;
    }

.productDetailsPleaseCall {
    font-weight: bold;
}

/* News Story */
.storyHeader {
    clear: both;
    padding-top: 10px;
    border-bottom: #C0C0C0 1px solid;
}

.storyTitle {
    display: block;
    margin-top: 8px;
}

    .storyTitle h2 {
        font-size: 14pt;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }

.storyDate {
    display: block;
    font-size: 8pt;
    padding-bottom: 5px;
}

.storyContent {
    display: block;
}

    .storyContent img {
        margin-left: auto;
        margin-right: auto;
        display: block;
        padding-left: 15px;
        padding-right: 15px;
    }

.storyFooter {
    clear: both;
}





/* News Story / Blog new style */
.storyWrapperWrapper2 {
    text-align: center;
    background-color: inherit;
    margin-top:70px;
}

.storyWrapperWrapperOneStory2 {}

.storyWrapperWrapper2 img, .storyWrapperWrapperOneStory2 img{
    max-width: 100%;
}
    .storyWrapper2 {
    width: 300px;
    height: 450px;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 80px;
    position: relative;
    overflow:hidden;
    background-color: inherit;
}

.storyHeader2 {
    clear:none ;
    padding-top: 0px;
    border-bottom:none ;
}

.storyImage2 {
    text-align:center;
}

    .storyImage2 img {
        max-height: 250px;
        max-width: 300px;
        object-fit: cover;
        padding-bottom: 20px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }


.storyTitle2 {
    display: inline;
    margin-top: 0px;
    text-align: center;

}

.storyTitle2 a{
    text-decoration:none;
}

.storyTitle2 h2 {
    padding-top: 0px;
    padding-bottom: 15px;
    letter-spacing: initial;
    line-height: initial;
    text-transform:lowercase;
    font-size:12pt;
}

.storyTitle2 h2:first-letter {
    text-transform: uppercase;
}

.storyDate2 {
    display: block;
    font-size: 8pt;
    padding-bottom: 5px;
    text-align: center;
}

.storyContent2 {
    display: block;
    text-align: justify;
    overflow: hidden;
    height: auto;
    clear: both;
    text-transform: lowercase;
}

.storyContent2:first-letter {
        text-transform: uppercase;
    }

    .storyContent2 a {
        text-decoration: none;
        color: inherit;
    }
    .storyContent2 a:visited {
        text-decoration: none;
        color: inherit;
    }
    .storyContent2 a:hover {
        text-decoration: none;
    }
        .storyMore2 {
    display: block;
    width:100%;
    text-align: right;
    position: sticky;
    bottom: -1px;
 }

    .storyMore2 a, .storySummaryPrev a, .storySummaryMore a {
        display: inline-block;
        color: darkslategray;
        text-decoration: none;
        background-color: #eee;
        padding: 15px;
    }
        .storyMore2 a:hover, .storySummaryPrev a:hover, .storySummaryMore a:hover {
            color: black;
            text-decoration: underline;
        }
    .storyFooter2 {
    clear: both;
}






/* Story Summary - used on footer */
    .storySummaryWrapper {
    display: block;
    float: right;
}

.storySummaryTitle {
}

    .storySummaryTitle h2 {
        font-size: 10pt;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }

    .storySummaryTitle a:hover {
        text-decoration: underline;
    }

.storySummaryDate {
    display: block;
}

.storySummaryPrevMore{
    margin-top:20px;
}

.storySummaryPrev {
}


.storySummaryMore {
    float:right;
}



/* Animation */
.animationPanelAnimationType1 {
    height: 5px;
    padding-top: 40px;
    display: block;
}

.animationPanelAnimationType2 {
}

.animationPanelAnimationType3 {
    height: 20px;
    margin-top: 10px;
    display: block;
}

    .animationPanelAnimationType3 .animationItem {
        width: 690px;
    }

.animationItem {
    visibility: hidden;
    position: absolute;
    width: 100%; /* required by ie6 */
    width: auto;
}


/*  Auto products animation */
.animationPanelproducts {
    width: 350px;
    float: right;
    height: 380px; /* add 30px to prevent IE6 messing up underneath */
    margin-right: 0px;
    margin-left: 20px;
}

.productsSlideShowBox {
    /* _display:none;   hack so ie6 does not display */
    position: absolute;
    top: 270px;
    left: 0px;
    filter: alpha(opacity=50);
    opacity: 0.5;
    margin-bottom: 0px;
    padding-bottom: 0px;
    background-color: #404040;
    width: 350px;
    height: 80px;
}


.productsSlideShowText {
    position: absolute;
    top: 275px;
    color: white;
    font-size: 12pt;
    font-weight: normal;
    padding-bottom: 0px;
    width: 335px;
    text-align: right;
    padding-bottom: 0px;
    line-height: 1.3em;
    padding-right: 15px;
}

    .productsSlideShowText a {
        color: White;
    }

    .productsSlideShowText h2 {
        color: white;
        font-size: 16pt;
        font-family: 'Times New Roman';
        font-weight: normal;
        margin-bottom: 0px;
        padding-bottom: 3px;
        padding-top: 3px;
        padding-right: 15px;
        width: 335px;
        text-align: right;
        height: 40px;
    }

        .productsSlideShowText h2 a {
            text-decoration: none;
            color: White;
        }



.smallText {
    font-size: smaller;
}


.submit {
    background: transparent;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #00F;
    border-left: 0;
    color: #00F;
    display: inline;
    margin: 0;
    padding: 0;
}

*:first-child + html .submit { /* hack needed for IE 7 */
    border-bottom: 0;
    text-decoration: underline;
}

* html .submit { /* hack needed for IE 5/6 */
    border-bottom: 0;
    text-decoration: underline;
    padding-left: 0px;
}

.checkoutCancelOrder {
    float: right;
    padding-right: 20px;
}

    .checkoutCancelOrder a {
        text-decoration: none;
    }

        .checkoutCancelOrder a:hover {
            text-decoration: underline;
        }

/* seasonal promotional banners */

/* switch off in ie6 */
* html .bannerPromoChristmasOnBlack {
    display: none;
}

.bannerPromoChristmasOnBlack {
    position: relative;
    top: 0px;
    left: 550px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    width: 140px;
    height: 0px;
    color: white;
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    line-height: 1.3em;
}

.bannerPromoText {
    position: relative;
    top: -20px;
}

.bannerPromoChristmasOnBlackORIG {
    position: absolute;
    top: 0px;
    left: 550px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    width: 140px;
    height: 20px;
    color: white;
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    line-height: 1.3em;
}

/* Page Sub Menu */
.contentSubMenu {
}

.contentSubMenuHeader {
}

.contentSubMenu a {
    text-decoration: none;
}

    .contentSubMenu a:visited {
        text-decoration: none;
    }

    .contentSubMenu a:hover {
        text-decoration: underline;
    }

.subMenuSelected {
    font-weight: bold;
}

.subMenuLevel0 {
    padding: 3px;
    font-size: 110%;
    background-color: #E2E2E2;
}

.subMenuLevelAlt0 {
    padding: 3px;
    font-size: 110%;
    background-color: #E2E2E2;
}


.subMenuLevel1 {
    padding-left: 10px;
    line-height: 22px;
    background-color: #C0C0C0;
    margin-bottom: 1px;
}

.subMenuLevelAlt1 {
    padding-left: 10px;
    line-height: 22px;
    background-color: #C0C0C0;
    margin-bottom: 1px;
}


.subMenuLevel2 {
    margin-left: 15px;
}

.subMenuLevelAlt2 {
    margin-left: 15px;
}


.subMenuLevel3 {
    margin-left: 30px;
}

.subMenuLevelAlt3 {
    margin-left: 30px;
}

.subMenuLevel4 {
    margin-left: 40px;
}

.subMenuLevelAlt4 {
    margin-left: 40px;
}


.productMenuSearchDropDown a {
    text-decoration: none;
}

.productMenuLinks {
    margin-top: 0px;
    padding-top: 0px;
}

    .productMenuLinks .productMenuSearchBox {
        height: 14px;
        border: none;
        background-color: inherit;
        position: relative;
        top: -5px;
    }

    .productMenuLinks .productMenuSearchButton {
        padding-left: 4px;
        position: static;
        top: 0px;
    }

    .productMenuLinks a {
        text-decoration: none;
    }

        .productMenuLinks a:hover {
            text-decoration: underline;
        }

    .productMenuLinks img {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }

    .productMenuLinks a:hover img {
        filter: alpha(opacity=100);
        opacity: 1;
    }

.productMenuShare {
    padding-top: 0px;
}

    .productMenuShare .productMenuSearchBox {
        display: inline;
        top: 0px;
    }

    .productMenuShare .productMenuSearchButton {
        padding-left: 1px;
    }



.socialShare {
    background-color: White;
    border-bottom: #808080 1px solid;
    border-top: #808080 1px solid;
    border-left: #808080 1px solid;
    border-right: #808080 1px solid;
    z-index: 9; /* ensures displays on top */
}

    .socialShare h2 {
        background-color: #C0C0C0;
        color: Black;
        padding-left: 5px;
        font-size: 10pt;
        height: 18px;
        margin-bottom: 0px;
        padding-top: 3px;
    }

.socialShareClose {
    float: right;
}

.socialShare li {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.socialLinksLarge a img {
    filter: alpha(opacity=60);
    opacity: 0.6;
    padding-right: 4px;
}

.menuSmartphoneSocialLinks {
    padding-left: 5px;
}

.footerSocialLinks .socialLinksLarge {
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

    .footerSocialLinks .socialLinksLarge a img {
        padding-right: 8px;
        filter: alpha(opacity=100);
        opacity: 1;
        padding-top: 10px;
    }

.socialLinksLarge a:hover img {
    filter: alpha(opacity=100);
    opacity: 1;
}

.pageBanner .socialLinksLarge {
    position: absolute;
    top: 10px;
    left: 804px;
    width: 144px;
}

    .pageBanner .socialLinksLarge img {
        float: right;
    }

.adminpage .pageBanner .socialLinksLarge {
    display: none;
}

.menuDisplayFull {
    float: right;
    padding-right: 5px;
    padding-top: 5px;
}


/*  clickable categories */


.productSubCatSummary {
    width: 780px;
    height: 310px;
}

.subCategorySummaries h1 {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 5px;
    padding-top: 0px;
    border-bottom: none;
}

.subCategorySummaries a {
    text-decoration: none;
}

    .subCategorySummaries a:visited {
        text-decoration: none;
    }

.productSubCatSummaryMore .productSummaryImage {
    text-align: left;
}

.productSubCatSummaryMore a {
    text-decoration: none;
}

.productSubCatSummaryMore h1 {
    background-color: inherit;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 15px;
    padding-bottom: 15px;
    height: 80px;
    font-size: 18pt;
    word-wrap: break-word;
    line-height: 1em;
    font-weight: normal;
}

.productSubCatSummaryMore .productSummaryImage {
    background-color: #E2E2E2;
}

div.productSubCatSummaryMore a {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 10; /* raises anchor tag above everything else in div */
}

.productSubCatSummaryMoreInner {
    padding-top: 30px;
    padding-left: 10px;
    padding-right: 10px;
}

.productSubCatSummaryMoreMore {
    float: right;
}

.productDetailsSubCatUpsell {
    margin-top: 10px;
    width: 370px;
}

    .productDetailsSubCatUpsell h1 {
        text-align: left;
    }

.productSummaryUpsell, .productSummaryUpsellMore {
    display: inline-block;
    background: rgba(153, 153, 153, 0.2);
    padding: 0px;
    margin-bottom: 3px;
    width: 360px;
}

.productSummaryUpsellMore {
    height: 30px;
}

.productSummaryUpsellMorePrompt {
    display: inline-block;
    margin-top: 5px;
    margin-left: 110px;
    font-weight: bold;
}

    .productSummaryUpsellMorePrompt:hover {
        text-decoration: underline;
        color: inherit;
    }

.productSummaryUpsellCheck {
    margin-left: 5px;
    position: relative;
    top: 3px;
}

.productSummaryUpsell img {
    height: 60px;
    width: 60px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    margin-left: 5px;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    -webkit-transition-delay: 0.5s ease-in-out; /* Safari */
    transition-delay: 0.3s;
    border-radius: 4px;
}



.productSummaryUpsellNameAndPrice {
    display: inline-block;
    width: 240px;
    vertical-align: middle;
}

.productSummaryUpsellName a {
    text-decoration: none;
}

    .productSummaryUpsellName a:hover {
        text-decoration: underline;
        color: inherit;
    }

/* featured products page */
.featuredProducts {
    text-align: center;
}

    .featuredProducts .productSummaryOuter {
        display: inline-block;
    }

    .featuredProducts .productSummaryFeatured {
        float: none;
        display: inline-block;
    }



/*   Basket   */
.checkoutBasket a {
    text-decoration: none;
}

    .checkoutBasket a:hover {
        text-decoration: underline;
    }

.basketBorderBottom td {
    border-bottom: 1px solid;
    border-color: #E3E1E1;
}

.checkoutBasketGrandTotal {
    font-weight: bold;
    font-size: 120%;
}

.checkoutSelectDate {
    padding-left: 0px;
    padding-bottom: 30px;
}

    .checkoutSelectDate table {
    }

    .checkoutSelectDate a {
        text-decoration: none;
    }

.checkoutBasket table {
    border: 6px solid;
    border-color: #E3E1E1;
    border-collapse: separate;
    border-left: 0;
    border-radius: 10px;
    border-spacing: 0px;
}


.checkoutBasket th:first-child, .checkoutBasket td:first-child {
    border-left: 6px solid;
    border-color: #E3E1E1;
}

.checkoutBasket thead:first-child .checkoutBasket tr:first-child .checkoutBasket th:first-child, .checkoutBasket tbody:first-child .checkoutBasket tr:first-child .checkoutBasket td:first-child {
    border-radius: 10px 0 0 0;
}


.basketOrderItemsConsignmentName, .basketOrderItemsQuantity, .promoCode {
    border-style: solid;
    border-width: 1px;
    border-color: inherit;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 3px;
    font-family: inherit;
    font-size: inherit;
}

.checkoutContinueShopping a img {
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.checkoutContinueShopping a:hover img {
    filter: alpha(opacity=100);
    opacity: 1.0;
}

.checkoutCheckout {
}

    .checkoutCheckout:hover {
        filter: alpha(opacity=100);
        opacity: 1.0;
    }


/* Checkout Billing*/
.checkoutBillingHidden {
    display: none;
    height: 0px;
    max-height: 0px;
}

.checkoutBillingShowAnimation {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    -webkit-animation-name: showBilling; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    animation-name: showBilling;
    animation-duration: 2s;
    animation-iteration-count: 1;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes showBilling {
    from {
        max-height: 0px;
    }

    to {
        max-height: 1000px;
    }
}

@keyframes showBilling {
    from {
        max-height: 0px;
    }

    to {
        max-height: 1000px;
    }
}

.checkoutBillingShow {
    height: 100%;
}

.checkoutHeaderHover {
    display: block;
}

    .checkoutHeaderHover:hover {
        outline: 1px solid gray;
    }




.checkoutPaymentGatewayChoice {
}

    .checkoutPaymentGatewayChoice .paymentGatewayChoice {
        margin-left: 185px;
    }

    .checkoutPaymentGatewayChoice img {
        position: relative;
        top: 11px;
        margin-bottom: 5px;
    }


.checkoutInset h1 {
    line-height: 1.2em;
}

.checkoutBasketInstructions {
    margin-top: 15px;
    margin-left: 20px;
    margin-right: 20px;
}

.checkoutTextBox, .checkoutHalfTextBox, .checkoutTextBoxMultiRow, .checkoutPaymentShortTextBox, .checkoutPaymentTextBox, .checkoutPaymentDropDown, .checkoutPaymentDropDownNoWidth, .calendarPostcode {
    font-size: 10pt;
    font-family: inherit;
    border-style: solid;
    border-width: 1px;
    border-color: inherit;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 3px;
    margin-bottom: 5px;
    filter: alpha(opacity=80);
    opacity: 0.8;
}

    .checkoutTextBox:focus, .checkoutTextBoxMultiRow:focus, .checkoutPaymentShortTextBox:focus, .checkoutPaymentTextBox:focus, .checkoutPaymentDropDown:focus, .checkoutPaymentDropDownNoWidth:focus, .calendarPostcode:focus {
        filter: alpha(opacity=100);
        opacity: 1.0;
    }

.checkoutPromptHidden {
    visibility: hidden;
}


textarea.checkoutTextBoxMultiRow {
    font-family: inherit;
}

.checkoutSendNewPasssword {
    font-size: 10pt;
}

.checkoutGiftMessageWarning, .checkoutGiftMessageWarningMobile {
    position: relative;
    top: -10px;
    background-color: yellow;
    color: black;
    border-radius: 5px;
}

.checkoutGiftMessageWarningMobile {
    top: 0px;
}



/* Search results for contact search (BFA) */
.searchResult {
    float: left;
    width: 300px;
    height: 200px;
}

    .searchResult h2 {
        font-size: 12pt;
    }

.searchResultsMap {
    float: right;
    width: 300px;
    height: 440px;
}


/* Cutesoft Gallery Control  */

#dng_comments {
    display: none;
}

.GalleryInformaion {
    display: none;
}

#dng_photo {
    background-color: inherit;
}



/* checkout progress bar */

.checkoutSteps {
    color: inherit;
}

    .checkoutSteps ul {
        margin-left: 0px;
        padding-left: 0px;
    }

        .checkoutSteps ul .notDone {
            filter: alpha(opacity=55);
            opacity: 0.55;
        }

        .checkoutSteps ul li {
            display: inline;
            padding-right: 4px;
            padding-left: 5px;
        }

            .checkoutSteps ul li:first-child {
                padding-left: 0px;
            }

        .checkoutSteps ul .checkoutStepsDivider {
            border-bottom: 1px solid;
            position: relative;
            top: -8px;
            padding-left: 12px;
            padding-right: 12px;
        }

        .checkoutSteps ul li a {
            color: inherit;
            text-decoration: none;
        }

            .checkoutSteps ul li a:hover {
                text-decoration: underline;
                color: inherit;
            }

            .checkoutSteps ul li a:visited {
                color: inherit;
            }

.checkoutRetrieve {
    min-height: 25px;
}

.checkoutSendPasswordLink {
    text-decoration: underline;
}

/* Other Checkout Pages*/
.checkoutHalfTextBox {
    width: 100px !important;
}



/* Braintree payement page  */

.braintreeWrapper {
    position: relative;
    width: 550px;
    margin-left: 150px;
    margin-top: 30px;
}

.braintreeAmount {
    margin-top: 20px;
    margin-left: 150px;
}

.braintreeWrapperSmartphone {
}

.braintreepopupwrapper {
    width: 100%;
}

.braintreepopupcontainer {
    margin: auto;
    width: 400px;
    background-color: white;
}

.braintreeHiddenButton {
    display: none;
    margin-bottom: 20px;
}

/*  Clearwater  */
.errorMessageClearwater {
    background-color: #FFFF40;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    color: Black;
}

.clearwaterWrapper {
    text-align: center;
    background-color: #f0f2f5;
    width: 450px;
    margin: 0 auto;
    padding: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: gray;
    border-radius: 5px;
}

.clearwaterSmartphoneWrapper {
    text-align: center;
    width: 100%;
    padding-bottom: 10px;
    padding-top: 10px;
    background-color: #f0f2f5;
    margin-bottom: 10px;
}

.clearwaterAmount {
    width: 325px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    font-family: Arial;
    font-size: medium;
}



.checkoutDivider {
    overflow: hidden;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 5px;
    margin-right: 5px;
}

.checkoutDivider:before,
.checkoutDivider:after {
    background-color: #000;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}

.checkoutDivider:before {
    right: 0.5em;
    margin-left: -50%;
}

.checkoutDivider:after {
    left: 0.5em;
    margin-right: -50%;
}

.checkoutHidden {
    display: none;
}


.stripeWrapper {
    text-align: center;
    max-width: 500px;
    margin: 15px auto 0px auto;
}

.stripeAddressWrapper, .stripeWalletWrapper {
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
    padding: 14px 8px 0px 8px;
    border-width: 1px;
    border-style: solid;
    border-color: #ededed;
    border-radius: 5px;
    background-color: white;
}

.stripeWalletWrapper {
    margin-top: 20px;
    padding-bottom: 15px;
}

.checkoutSpinner {
    /* display: inline-block; */
    width: 20px;
    height: 20px;
    width: 85px;
}

    .checkoutSpinner:after {
        content: " ";
        display: block;
        width: 20px;
        height: 20px;
        margin: 0px 90px 0px 0px;
        border-radius: 50%;
        border: 6px solid black;
        border-color: gray white gray white;
        animation: checkoutSpinner 1.2s linear infinite;
    }

@keyframes checkoutSpinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.checkoutSpinnerMobile {
    margin: 0 auto;
    text-align: center;
}



/* Gallery 2      */

.gallery2WrapperOuter, .contentsGallery2WrapperOuter {
}

.gallery2Wrapper, .contentssGallery2Wrapper {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.gallery2Pic {
}

    .gallery2Pic img {
        width: 280px;
        height: 280px;
    }

.shopColumn2of2 .gallery2Pic img {
    width: 235px;
    height: 235px;
}

.contentsGallery2Label {
    width: 266px; /* img width less 14 padding*/
}

.shopColumn2of2 .contentsGallery2Label {
    width: 221px; /* img width less 14 padding*/
}


.gallery2PicWrapper {
    margin-left: 5px;
    margin-bottom: 5px;
    display: inline-block;
}

    .gallery2PicWrapper:hover {
        background-color: black;
        background-image: url('../Images/gallery2Hover.jpg');
        background-position: center;
        background-repeat: no-repeat;
    }

.gallery2Wrapper a:hover img {
    opacity: 0.4;
    filter: alpha(opacity=40);
    -webkit-transition: background-color 1s, opacity 1s; /* For Safari 3.1 to 6.0 */
    transition: background-color 1s, opacity 1s;
}

.gallery2More {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #636363;
    padding-top: 0px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: white;
    text-decoration: none;
}

    .gallery2More:hover {
        background-color: #404040;
        -webkit-transition: background-color 10.5; /* For Safari 3.1 to 6.0 */
        transition: background-color 0.5s;
    }

    .gallery2More:before {
        font-family: Arial;
        content: "+";
        font-size: 40px;
        font-weight: bold;
        position: relative;
        top: 7px;
        padding-right: 10px;
        color: #00FF00;
    }

.contentsGallery2Label {
    background-color: #636363;
    color: white;
    display: block;
    padding: 7px;
    overflow: hidden;
}

.contentsGallery2Heading {
    display: block;
    font-size: 13pt;
    color: white;
    height: 20px;
    overflow: hidden;
}

.smartphoneGallery2Wrapper {
}

.smartphoneGallery2Pic {
    display: inline-block;
    width: 50%;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

    .smartphoneGallery2Pic img {
    }







/* checkout0 page */
#Calendar1 {
    margin-right: 10px;
}

.calendarDisabled {
    color: grey;
    background-color: #FFC5C5;
}

.calendarEnabled {
    background-color: #31c231;
}

    .calendarEnabled a {
        color: white;
        padding-right: 3px;
        padding-left: 3px;
    }

.calendarToday {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 20px;
}

.calendarPostcodeBox {
    margin-left: 150px;
}

.calendarDontKnow {
    font-size: 75%;
    margin-left: 150px;
    display: inline-block;
    margin-top: 10px;
}


.calendarCollect {
}

.smartphoneEnterPostcodeHidden {
    visibility: hidden;
    height: 0px;
    margin-left: 15px;
}

.smartphoneEnterPostcode {
    visibility: visible;
    height: 100%;
    margin-left: 15px;
}

.smartphonePostcode {
    font-size: 16px;
}

.collectionTimes {
    margin-top: 3px;
    color: #333333;
    background-color: white;
    font-size: inherit;
}



/* contact form*/

.contactFormField, .contactFormMessageBox {
    border-style: solid;
    margin-bottom: 10px;
    border-width: 1px;
    border-color: initial;
    padding: 7px;
    border-radius: 5px;
    font-family: inherit;
    font-size: inherit;
}

    .contactFormField:focus, .contactFormMessageBox:focus {
        border-color: grey;
    }

.contactFormPrompt {
    font-size: 10pt;
    padding-right: 10px;
    padding-top: 7px;
    min-height:1px;
}

.contactFormCheckBox {
    margin-top: 7px;
    position: relative;
    left: -5px;
}


#Captch1_imgCaptcha, #Captch1_btnGetNew {
    padding-left: 20px;
}


/* Product Menu*/

.productMenuSearchDropDown, .productMenuSearchBox, .productMenuSearchLink {
    border-style: solid;
    margin-top: 5px;
    border-width: 1px;
    border-color: inherit;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 3px;
    font-family: inherit;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

    .productMenuSearchDropDown:focus, .productMenuSearchBox:focus, .productMenuSearchBox:hover, .productMenuSearchDropDown:hover, .productMenuSearchLink:hover {
        filter: alpha(opacity=100);
        opacity: 1.0;
    }



.productMenuSearchLink {
    margin-top: 0px;
    margin-bottom: 5px;
    background-color: inherit;
    cursor: pointer;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: inherit;
    height: 21px;
    width: 21px;
}

.productMenuSearchDropDown {
    padding-top: 0px;
    padding-bottom: 0px;
    height: 21px;
}

.productMenuSocialLikes, .twitter-share-button {
    visibility: hidden;
    height: 0px;
}

.sortDropDown {
    border-style: solid;
    border-width: 1px;
    border-color: inherit;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 3px;
    font-family: inherit;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

    .sortDropDown:hover {
        filter: alpha(opacity=100);
        opacity: 1.0;
    }


/* google translate - for both product menu and checkout pages */

.goog-te-gadget-simple {
    position: relative;
    top: -3px;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

    .goog-te-gadget-simple:hover {
        filter: alpha(opacity=100);
        opacity: 1.0;
    }

.goog-te-menu-value span {
    display: none;
}

.goog-te-menu-value::before {
    content: "Translate";
}

/* Peak Time Trading*/

.peakTimeHeader {
    font-family: 'century gothic', Arial;
    background-color: #ffea00;
    color: black;
    padding: 10px;
    margin: 5px;
    line-height: 1.8ex;
    font-size: 10pt;
}

    .peakTimeHeader a {
        color: black;
        text-decoration: underline;
    }

        .peakTimeHeader a:hover {
            color: black;
        }

    .peakTimeHeader h2 {
        font-family: 'century gothic', Arial;
        color: black;
        font-size: 12pt;
        margin-bottom: 5px;
        display: inline-block;
        font-weight: bold;
        margin-right: 20px;
        line-height: 2ex;
    }

    .peakTimeHeader p {
        font-family: 'century gothic', Arial;
        margin: 0px;
        padding: 0px;
        padding-top: 5px;
        padding-bottom: 5px;
        display: inline-block;
        margin-right: 10px;
    }

/* Drop down menu */

.menu .topMenuTopLevel {
    position: relative;
    z-index: 1000;
}

    .menu .topMenuTopLevel li {
        display: inline-block;
    }


.topMenuHoverWrapper, .topMenuShopHoverWrapper {
    overflow: hidden;
    max-height: 0;
    position: absolute;
    z-index: 100;
    transition: max-height 0.5s;
}

.topMenuShopHoverWrapper {
    left: 0px;
    width: 100%;
}

.menu li:hover .topMenuHoverWrapper, .menu li:hover .topMenuShopHoverWrapper {
    max-height: 2000px;
    display: block;
    transition: max-height 0.5s ease-in;
}


.topMenuDepth2, .topMenuShopDepth2 {
    text-align: left;
    background: rgba(255,255,255, 0.95);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 10px;
    margin-top: 20px;
    min-width: 150px;
    max-width: 200px;
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,.5);
    margin-bottom: 10px; /* allow room for shadow */
    margin-right: 10px;
    margin-left: 3px;
    border: 1px solid lightgray;
    border-radius: 3px;
}

.topMenuShopDepth2 {
    max-width: 100%;
    width: calc(100%-20px);
    columns: 120px 6;
    height: auto;
    margin-left: 10px;
}

.topMenuShopCatWrapper {
    display: block;
    margin-bottom: 20px;
    break-inside: avoid;
}

.topMenuHoverWrapper .topMenuDepth2 a, .topMenuShopHoverWrapper .topMenuShopDepth2 a {
    background-color: inherit;
    color: black;
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
    text-decoration: none;
    text-transform: none;
    opacity: 0.9;
}

    .topMenuHoverWrapper .topMenuDepth2 a:visited, .topMenuShopHoverWrapper .topMenuShopDepth2 a:visited {
        color: black;
    }

.topMenuDepth3 a:before {
    content: '- '
}

.topMenuDepth3, .topMenuShopDepth3 {
    margin-left: 0px;
}

.topMenuDepth4 {
    margin-left: 10px;
}

.topMenuDepth5 {
    margin-left: 20px;
}

.topMenuDepth6 {
    margin-left: 25px;
}

.topMenuDepth7 {
    margin-left: 30px;
}

.topMenuDepth8 {
    margin-left: 35px;
}

.topMenuDepth2 .topMenuDropDownTitle, .topMenuShopDepth2 .topMenuDropDownTitle, .topMenuShopDepth2 .topMenuShopHomeLink {
    font-weight: bolder;
    opacity: 1;
    border-bottom: 1px solid;
    margin-left: 0px;
    padding-bottom: 3px;
    margin-bottom: 4px;
}

.topMenuShopDepth2 .topMenuShopHomeLink {
    margin-bottom: 20px;
}

    .topMenuShopDepth2 .topMenuShopHomeLink:before {
        content: url(/favicon.ico);
        vertical-align: middle;
        padding-right: 5px;
    }

.topMenuHoverWrapper .topMenuDepth2 a:hover, .topMenuShopHoverWrapper .topMenuShopDepth2 a:hover {
    text-decoration: underline;
}

.topMenuDropDown1::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.topMenuMobileDropDown {
    display: none;
}

/* disables menu top menu item click on tablet so works as hover */
@media (pointer: coarse) {
    .topMenuDropDown1 {
        pointer-events: none;
    }
}



.sortOuter {
}

.sortOuterNoProdMenu {
    margin-bottom: 5px;
}

    .sortOuterNoProdMenu .searchOuter {
        float: right;
    }

    .sortOuterNoProdMenu .searchReveal {
        float: right;
        margin-right: 20px;
        margin-left: 20px;
        position: relative;
    }

        .sortOuterNoProdMenu .searchReveal .sortSearchIcon::after {
            top: 5px;
        }

    .sortOuterNoProdMenu .searchHidden {
        visibility: hidden;
        display: inline-block;
        opacity: 0.1;
    }

    .sortOuterNoProdMenu .searchHiddenDisplay {
        visibility: visible;
        display: inline-block;
        transition: background-color 1s, opacity 1s;
    }

    .sortOuterNoProdMenu .search, .sortOuterNoProdMenu .searchByPrice {
        display: inline-block;
        position: relative;
        top: -2px;
        margin-right: 0px;
        margin-top: 0px;
    }

    .sortOuterNoProdMenu .sortSearchBox {
        display: inline-block;
        float: right;
        position: relative;
        top: 2px;
        margin-right: 0px;
        height: 22px;
        width: 226px;
        font-size: 15px;
        padding-top: 1px;
        padding-bottom: 2px;
        padding-left: 7px;
        margin-top: 0px;
    }

    .sortOuterNoProdMenu .sortSearchDropDown {
        float: right;
        font-size: 15px;
        width: 235px;
        height: auto;
        padding: 4px;
        position: relative;
        top: 2px;
    }

    .sortOuterNoProdMenu .sortProducts {
        margin-right: 0px;
    }

    .sortOuterNoProdMenu .sortDropDown {
        font-size: 15px;
        width: auto;
        height: auto;
        padding: 4px;
    }

    .sortOuterNoProdMenu a {
        text-decoration: none;
    }

    .sortOuterNoProdMenu .sortSearchLink {
        float: right;
        border: none;
        display: inline-block;
        position: relative;
        left: -34px;
        margin-right: -34px;
        top: -1px;
        height: 24px;
        width: 30px;
        padding-left: 0px;
        padding-right: 0px;
        margin-bottom: 0px;
        padding-top: 2px;
        z-index: 10;
    }

    .sortOuterNoProdMenu .sortSearchIcon::after, .getAddressSearchButon .searchIcon::after {
        content: "\f002";
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font-size: 18px;
        font-family: "FontAwesome5FreeSubset";
        font-weight: 900;
        position: relative;
        top: 6px;
    }

.getAddressSearchButon .searchIcon::after {
    font-size: 12px;
    top: 0px;
}

    .smallMenu {
    position: relative;
    top: -90px;
    float: right;
    margin-right: 20px;
}

.smallMenuBasket::before, .smallMenuBasketEnabled::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 22px;
    font-family: "FontAwesome5FreeSubset";
    font-weight: 900;
    position: relative;
    line-height: 28px;
}


.smallMenuBasket::before, .smallMenuBasketEnabled::before {
    content: "\f291";
}

.smallMenuBasket, .smallMenuBasketEnabled {
    display: inline-block;
    padding-top: 1px;
    height: 29px;
    width: 30px;
    background-color: white;
    border: 1px solid #bcbcbc;
    color: #bcbcbc;
    text-align: center;
}

.smallMenuBasketEnabled {
    border: 1px solid #545454;
    color: #545454;
}


.smallMenu a {
    text-decoration: none;
}

.smallMenuQty {
    display: inline-block;
    position: relative;
    top: -30px;
    left: -15px;
    background-color: #31C231;
    color: white;
    width: 15px;
    height: 15px;
    line-height: 16px;
    border-radius: 10px;
    border: 1px solid #31C231;
    font-size: 12px;
    padding-right: 0px;
    text-align: center;
}

/*Subscription Code*/

.subscriptionBanner img {
    width: 100%;
}

.subscriptionHowItWorks {
    width: 100%;
    text-align: center;
    height: 282px;
}

.subscriptionHowItWorksBox {
    width: 32%;
    margin: 0px auto;
    float: left;
}

.subscriptionHowItWorksImage {
}

.subscriptionHowItWorksText {
    height: 70px;
}


/* GetAddress.IO postcode lookup */
/* styling is also used by mobile */
.getAddress_autocomplete_suggestion_show_all{
   padding-top:10px;
   padding-bottom:10px;
   text-align:center;
}

.getAddress_autocomplete_suggestion {
    padding-bottom: 5px;
    color: black;
    font-size: 10pt;
}
.getAddressSearchButon {
    cursor: pointer;
    border-width: 1px;
    border-style: solid;


    border-radius: 3px;
    filter: alpha(opacity=80);
    opacity: 0.8;
    padding-top: 3px;
    padding-bottom: 3px;
}
    .getAddressSearchButon:hover {
        filter: alpha(opacity=100);
        opacity: 1.0;
    }





@media only screen and (max-width: 470px) {
    .smartphoneGallery2Pic {
            display: block;
            text-align: center;
            width: 100%;
        }


        .checkoutTextBox, .checkoutTextBoxMultiRow, .checkoutPaymentShortTextBox, .checkoutPaymentTextBox, .productDetailsModifierTextBox, .productDetailsModifierList {
            font-size: 16px;
        }
    }

