@font-face {
    font-family: 'citrfontreg';
    src: url('/font/OpenSans-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'citrfontbold';
    src: url('/font/OpenSans-Bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* -- global  -- */
.container, .wrapper {}
.containerWhite {background: #fff;}
.innerWidth {max-width: 1660px;margin: auto; float: none;}
.innerWidthText {max-width: 900px;margin: auto; float: none;}
.innerWidthText p {margin: 32px 0 ;}
.NodeLevel0 > a.active:before, .NodeLevel0 > a.active:after, .noUi-connect, .noUi-tooltip, .basketPip, a.flex-active, .noUi-tooltip, .noUi-connect, .facetSelectedff.checked, .wsPrice, a.flex-active, .social a {background: #030303;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .current, .bannerTitle, .NodeLevel0>a>span, .mainFont, .ctaTitle, .boldfont {font-weight: 700;font-style: normal;}
.NodeLevel0>a {letter-spacing: inherit;line-height: 100%;font-weight: 700;font-size: 16px !important;font-size: smaller;text-transform: uppercase;}
.NodeLevel0 > a:before, .NodeLevel0 > a:after {height: 1px;background: #000000;}
.fixed, .NodeLevel0>.CSSFacetNavModules, .fixed, .NodeLevel0>.CSSFacetNavModules  {max-width: 100%;}
.ctaIcon {color: #000000;}
.fixed, .NodeLevel0>.CSSFacetNavModules, .maxInner { max-width:1920px;}
.zflex-jc {justify-content: center;-webkit-justify-content: center;}

@media screen and (max-width : 320px){.fixed, .NodeLevel0>.CSSFacetNavModules  {max-width: 100%;padding: 0 8px;}}
@media screen and (min-width : 321px) and (max-width : 414px){.fixed, .NodeLevel0>.CSSFacetNavModules  {max-width: 100%;}}
@media screen and (min-width : 415px) and (max-width : 767px){.fixed, .NodeLevel0>.CSSFacetNavModules  {max-width: 100%;}}
@media screen and (min-width : 768px) and (max-width : 1024px){.fixed, .NodeLevel0>.CSSFacetNavModules  {max-width: 100%;}}
@media screen and (min-width : 1025px) and (max-width : 1440px){.fixed, .NodeLevel0>.CSSFacetNavModules  {max-width: 100%;}}
@media screen and (min-width : 1440px) and (max-width : 1920px){.fixed, .NodeLevel0>.CSSFacetNavModules  {max-width: 1920px}}
@media screen and (min-width : 1920px){.fixed, .NodeLevel0>.CSSFacetNavModules  {max-width: 1920px}}


@media screen and (max-width : 1930px){
    .container > .ctrPad32, .fixed > .ctrPad32  { padding: 32px}
}
@media screen and (max-width : 1440px){
    .container > .ctrPad32, .fixed > .ctrPad32  { padding: 16px}
    .NodeLevel0>a {font-size: 12px !important;}
}
@media screen and (max-width : 1024px){
    .container > .ctrPad32, .fixed > .ctrPad32  { padding: 8px}
}

.photo div:after {
    padding-bottom: 75%;
    content: "";
    display: block;
    width: 100%;
}



/* -- header basket  -- */
.logo {max-width: 225px;}
.navIcons {border-bottom: none; padding:0 16px}
.masthead, .masthead .container, .ctrNavigation > .CSSFacetNavModules {position: fixede;}
.masthead {padding: 0;margin: auto;}
.masthead input {background: #fafafa;}
.logoContainer {/* padding:0; */width: 225px;}
.navIcons [class*="icon-"]:active {color: #000000;}
.loginCtr a { color:#b4d0fe}
@media screen and (max-width: 1023px) {
	.logoContainer {padding-left: 16px;width: 150px;}
	.navIcons *[class*="icon-"] {text-align: center;}
	.navIcons {padding:0}
}
.NodeLevel1 > a {
    font-size: 16px;
    text-transform: uppercase;
    opacity: 1;
    width: 100%;
    font-weight: 800;
}
.NodeLevel0[data-nodename*='Sale'] > a  {color: #EC0028;}
.NodeLevel0[data-nodename*='Sale'] > a.active  {color: #EC0028 !important;} 
@media screen and (min-width : 1441px) and (max-width : 1920px){.navIcons {padding: 0;}}
@media screen and (min-width : 1920.1px){.navIcons {
    padding: 0px;
}}
@media screen and (max-width: 1023px) and (min-width: 768px){
    .logo {min-height: 40px;top: 2px;}
    body {padding-top: 48px}
}
@media screen and (max-width: 1024px){
	.NodeLevel0 > a {background: #fafafa;border-bottom: none;border-top: 1px solid #e9e9e9;}
}
.basketPip {background: #000000;right: 10px;}
@media screen and (max-width:1024px)
{
	.basketPip {right: 50%;}
}



/* -- header Dropdown nav  -- */
body {padding-top: 75px;}
html, body {background: #1e1e28;}
.NodeLevel0 > .CSSFacetNavModules, .ctrNavigation {top: 75px;}
.navIcons, .navIcons > div, .navIcons > a, .navIcons *[class*="icon-"], .logoContainer, .logo {height: 75px;line-height: 75px;}
.NodeLevel1 {width: auto;float: none;display: inline-block;vertical-align: top;text-transform: uppercase !important;}
.NodeLevel1 > .CSSFacetNavModules {-moz-column-count: 1;-moz-column-gap: 1;-webkit-column-count: 1;-webkit-column-gap: 1;column-count: 1;}
.masthead .fixed, .TopSubBanner .fixed {padding: 0;}
.TopSubBanner  .container{ background:none}

.NodeLevel1>a {font-size: 14px;letter-spacing: 0;opacity: 1;width: 100%;display: block;margin-bottom: 16px;text-transform: initial;border-bottom: 1px solid #94c11f;text-transform: uppercase;}
.NodeLevel2 > a {position:relative;overflow: hidden;display: block;float: left;margin: 0 0 0.5em 0;line-height: 150% !important;opacity: 1;color: #3c3c3c !important;text-transform: capitalize;}
.NodeLevel2 > a:before {background: #9ac133;}
.NodeLevel0[data-nodename*='Sale'] .NodeLevel2 > a:before {background: #EC0028;}
.NodeLevel2 > a:hover {opacity:1;color: #000000 !important;}
.NodeLevel0 > .CSSFacetNavModules.active {text-align: center;justify-content: center;background: #f3f3f3;}
.NodeLevel0 > a.active {color: #709217 !important;}
.voucherBox { display:none !important}

@media screen and (max-width: 1024px){
    .NodeLevel1 {width: 100%;padding: 8px;}
}

@media screen and (max-width: 1023px) {
	.NodeLevel0 > .CSSFacetNavModules.active {position: relative;top: 0;}
	.ctrNavigation > .CSSFacetNavModules { height:auto}
}
@media screen and (min-width : 1441px) and (max-width : 1920px){
	.NodeLevel0>a {font-size: 16px;line-height: 100%;}
	.NodeLevel1>a, .NodeLevel2>a {font-size: 14px;}
}
@media screen and (min-width : 1920px){
	.NodeLevel0>a {line-height: 100%;}
	.NodeLevel1>a, .NodeLevel2>a {font-size: 14px;}
}

.topBannerStrip {color:#fff;font-size:12px;}

/* -- forms buttons  -- */
button, .button, .dark .button, .dark button, .col-1 .dropdownA2B .a2bButtonGo {
    box-shadow: 0 3px 0 0 rgba(22, 29, 37, 0.1);
    color: #fff;
    }
button:hover, .button:hover, .a2bButtonGo:hover {
    box-shadow: 0 3px 0 0 rgba(22, 29, 37, 0.1);
    background: #000000;
    }
.but {padding: 16px 32px;border: 1px solid #06090d;color: #05070d;text-transform: uppercase;font-size: 14px;letter-spacing: 2px;background: transparent;font-family: 'citrfontbold';display: inline-block;}
.but:hover {border: 1px solid #060a0d;background: #000;color: #ffffff;}

button.ghost-button, a.ghost-button {background: transparent;border: 1px solid #d6d3d3;color: #333;}
button.ghost-button:hover, a.ghost-button:hover {color: white;background: #999;border: 1px solid #999;}
.NodeLevel0>a.active, .NodeLevel0 > a.active > span:after, .footer a:hover, .footer a:hover p, a, .checkList li:before {color: initial;}.NodeLevel0 > a.active:before, .NodeLevel0 > a.active:after, .noUi-connect, .noUi-tooltip, .basketPip, a.flex-active, .noUi-tooltip, .noUi-connect, .facetSelectedff.checked, .wsPrice, a.flex-active, .social a {}
.CCartBut > div:first-of-type > a {
	font-size    :11px
}

.open-slide-menu .NodeLevel0>a:hover {}
@media screen and (max-width: 1023px) {
    .open-slide-menu .NodeLevel0>a:not(.active) {opacity: 1}
    .NodeLevel0>a.active {background: #000000;color: #fff !important;}
.NodeLevel0>a.active:before, .NodeLevel0>a.active:after { background:white}
}

/* CSS Document */
form[action*="facet"] #body-wrapper-overlay ~ *, form[action*="facet"]  #body-wrapper-overlay + div .container, form[action*="collection="]  #body-wrapper-overlay + div .container, .fafbackground {/* background: #FFFFFF */}
.wrapper #FafKnockoutResults .FAFFilters, .FAFResults, .FAF  { background: #FFFFFF !important}
form[action*="facet"]  #body-wrapper-overlay + div .fixed, form[action*="collection="]  #body-wrapper-overlay + div .fixed  { max-width:100%}


/* -- accordian  -- */
.accordianHeader > span.fa-unsorted:before, .accordianHeader > span.fa-unsorted:after {height: 3px;border-radius: 3px;}
.active .accordianHeader > span.fa-unsorted:before, .active .accordianHeader > span.fa-unsorted:after {background: #3e5b3e;}



/* -- Footer  -- */
.footer .container {background: #efefef;}
.footer a:hover, .footer a:hover p  {color: #8da93b;}
.cards {color: #ffffff;background: #2a2a2a;opacity: 1;}
.footer .mainFont {font-size: small;}
.social a{background-color: #ffffff00 !important;}
.social a:hover{filter: invert(0);}
input:active, input:focus, textarea:active, textarea:focus, select:active, select:focus {border: 1px solid #585858;}
.disabled, :disabled, .a2bButtonInactive {opacity: 0.3;cursor: not-allowed !important;background: #bcbcbc !important;color: #fff !important;}
.footer img {max-width: 100%;/* height: 100%; */}
.gutter64 {margin: 0 -32px;}
.gutter64 >li, .gutter64 >a, .gutter64 >div, .gutter64 >span, .gutter64 > img {padding: 0 32px;}
.social a.facebook {background-color: #3b5998 !important;}
.social a.twitter {background-color: #1da1f2 !important;}
.social a.instagram {background-color: #c32aa3 !important;}
.social a.pinterest {background-color: #bd081c !important;}
.social a.youtube {background-color: #ff0000 !important;}
.social a{filter: invert(1);}
.social.social a {
    background-color: transparent !important;
}
.footerNewsletter  {color: #212329;margin: auto;float: inherit;}
.footerLogo img {
    max-width: 145px;
    /* transform: translateX(-50%) translateY(-50%); */
    background: #2d2e33;
    height: auto;
}
#footerEmail { background:#fff}
.citrusDate {margin: 0;}
@media screen and (max-width: 767px)
{
	.footer .mainFont:after {margin: 16px auto}
    .footerBrands a { width:50%}
    .footer .zflex-sb { display: inline; width: 100%;}
    .footer .zflex-sb > div { margin: 0 0 64px 0;}
}
.fafbackground {background: #ffffff;}
.footerNewsletterCTA {padding: 0 3% 0 0;max-width: 380px;}
.footerNewsletter {position:relative;margin-bottom: 0;flex-grow: 1;flex-wrap: wrap;color:#fff;background: #d8d8d8;}
.footerNewsletter .footerNewsletter {}
.footerNewsletter h3 {font-size: 1.5em;}
.footerNewsletter h3{
    font-style: normal;
    margin-bottom: 16px;
    clear: both;
    color: #1e1d3f;
    font-size: medium;
    letter-spacing: inherit;
    text-transform: uppercase;
    margin: 0;
}
.footerNewsletter p{margin: 0;padding:0;display: block;color: #333;min-width: 240px;}
input[type="text"]{-webkit-appearance:none;overflow: hidden;font-size: initial;}
.footerNewsletter.combined {}
.newsletter-footer-submit {
    position: absolute;
    top: 0;
    right: 0;
    color: #1e1e28;
    text-transform: uppercase;
    line-height: 46px !important;
    height: 46px;
    padding: 0 19px;
    background: #efefef;
}
.newsletter-footer-submit:after {
	content: "\e121";
	font-family: feather;
}
.fs-hlgt {font-size:xx-large;color: #2a2a2a!important;padding-top: 16px;font-weight: 700;}
.footerTel { margin: 16px 0}
.footer .external:before {
    font: normal normal normal 14px/1 feather;
    content: "\e068";
    margin-right: 8px;
}


.newsletterFail {background:#ff5858;color:white !important;padding: 8px;}
.newsletterSuccess {background: #82B43C;color:white !important; padding: 8px;}


/*  Top Banner Call to Actions */
.CNCCTA {background: #90c742;color: #ffffff;text-align: right;text-transform:uppercase;letter-spacing: 1px;padding: 0 !important;height: auto;font-size: 11px;border-bottom: none;}
.CNCCTA a, .CNCCTA p {display: inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;vertical-align: bottom;color: #fff;margin-left: 20px;}
#flexsliderCTA .CNCCTA a {flex:1; display: -webkit-box;display: -moz-box;display: box;display: -webkit-flex;display: -moz-flex;display: -ms-flexbox;display: flex;}
.CNCCTA a i {margin: 0 4px 0 0;color: hsla(0, 0%, 100%, 0.5);display: inline-block;}
.CNCCTA a div, .CNCCTA a span, .CNCCTA a p {display:inline-block;padding: 0;margin: 0;width: 100;}
.CNCCTA a:hover {color: #12123e;}
.CNCCTA .flex-direction-nav { display:none}
.CNCCTA li {text-align: center;overflow: hidden;margin-right: 16px;}
.CNCCTA li a {text-align: center;justify-content: center;}
@media screen and (max-width: 768px) {
	.CNCCTA li {/* margin-right: 0px; */}

}

/* header Call to action bar */
.topBanner .container { background:transparent}
.topBanner a {font-size: 12px;text-align: center;padding: 10px;width: 100%;float: left;display: inline-flex;align-content: center;flex-direction: row;justify-content: center;grid-gap: 8px;line-height: 100%;flex-wrap: wrap;align-items: center;text-transform: uppercase;}
.topBanner .btitle {text-transform: uppercase;font-weight: 1000;}
.topBanner .blink {padding: 4px 6px;outline: 1px solid #ffffff80;font-size: 11px;}
.topBanner [class*="theme"] .btitle:before {margin-right:8px;font: normal normal normal 12px/1 feather;color: #fff;}
.topBanner [class*="theme"] span {color: #fff;display: inline-flex;align-items: flex-end;}
.topBanner .theme0 {background: #1D5F9E;}
.topBanner .theme1 {background: #1e1e28;}
.topBanner .theme2 {background: #a82123;}
.topBanner .theme3 {background: #e3e3e3;}
.topBanner .theme4 {background: #2f76ec;}
.topBanner .theme5 {background: #94c11f;}
.topBanner .theme3 span { color:#000}
.topBanner {z-index:1; position:relative}
.topBanner a{display: block;font-size: 12px;padding: 8px 16px;color: #000000;line-height: 100%;justify-content: center;align-items: center;text-align: center;}
.topBanner .btitle {border-bottom: 1px solid #ffffff00;position: relative;display: inline-block;overflow: hidden;font-weight: 700;line-height: 2;}
.topBanner .bmessage {display: none;}
.topBanner .bsubtitle { margin: 0 8px; color: inherit}
.topBanner .blink{margin-left: 6px;position: relative;display: inline-block;overflow: hidden;line-height: 150%;outline: none;position: relative;display: inline-block;padding: 0 1em;overflow: hidden;line-height: 2;font-weight: 700;font-size: 10px;letter-spacing: 1px;border: 1px solid #d4d4d4;background-color: transparent;z-index: 1;text-transform: uppercase;transition: background-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);}
.topBanner .blink:empty, .topBanner .blink:empty:after { display:none !important}
.topBanner .blink:after {top: 0;animation: hover-out 0.4s 1;display: block;position: absolute;height: 100%;background-color: #ffffff;transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);width: 100%;z-index: -1;left: -100%;content: ""}
.topBanner:hover .blink:after {animation: hover-in .25s 1;transform: translateX(100%);}
.topBanner:hover .blink {color: #000;transition: background-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),color 0.2s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);}
@keyframes hover-in {
	0% {
		transform: translateX(0)
	}
	100% {
		transform: translateX(100%)
	}
}

@keyframes hover-out {
	0% {
		transform: translateX(100%);
		opacity: 1
	}
	100% {
		transform: translateX(100%);
		opacity: 0
	}
}  


.Message a {margin: 0 9px 0 0 !important;font-weight: 700;padding: 12px;}
.hdrRewardsTitle {color: #201f4c;}
.slides.thinBanner {margin: 0;}
.backgrounrdsignup.thinBanner {padding: 0;}
.slides.thinBanner li {text-align: center; list-style: none; padding: 10px 0; margin: 0;}
.slides.thinBanner li a {color: #FFFFFF;font-size: 20px; border: 0;}
.slides.thinBanner li a:hover {text-decoration: underline;}
.slides.thinBanner li a h2 {margin: 0; color: #fff;}
.slides.thinBanner li a p {margin: 0;font-size: small;}
.Message a:before {display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;transform: translate(0, 0);margin-right: 4px;opacity: 0.5;width: 16px;}
.mDelivery:before {content: "\f1b2";}
.mReturns:before {content: "\f0ec";}
.mPrice:before {content: "\f0e7";}
.mFinance:before {content: "\f1de";}
.mWarranty:before {content: "\f0a3";}
.mCTW{color: #302f4e !important;padding: 0 8px;}
.mCTW:hover {color: #FFF !important;}
.mCTW:before {content: "\f206";}
@media screen and (max-width: 768px) {
    .Message a {margin: 0 !important;font-weight: 700;padding: 12px;}
} 

/* -- CTA flexslider -- */
.CNCCTA .desktopMessage,
.CNCCTA .desktopMessage a {display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-flow: row nowrap;}
.CNCCTA .desktopMessage a {align-items: center;}
.CNCCTA .desktopMessage a i {font-weight: bold;}
.CNCCTA .desktopMessage a i[class*="fa"]::before {width: 11px;display: block;height: 11px;opacity: 0.5;background-position: center !important;background-repeat: no-repeat !important;}
.CNCCTA .desktopMessage a i.fa-cert::before {content: ""; background: URL("/layout/icon-cert.svg");}
.CNCCTA .desktopMessage a i.fa-bike::before {content: "";background: URL("/layout/icon-bike.svg");width: 20px;height: 15px;}
.CNCCTA .desktopMessage a i.fa-phone::before {content: ""; background: URL("/layout/icon-phone.svg");}
.CNCCTA .desktopMessage a i.fa-map::before {content: ""; background: URL("/layout/icon-map.svg");}

/* -- CTA overflow -- */
.submasthead .container {background: #404042;margin: auto;text-align: center;}
.topCTA {text-align: center;margin: auto;overflow: auto;justify-content: left;-webkit-overflow-scrolling: touch;border-bottom: none;display: inline-flex;max-width: 100%;}
.topCTA a {padding: 12px 0px;font-size: 11px;color: #fff;flex-shrink: 0;text-transform: uppercase;font-family: 'citrfontbold';}
.topCTA a:before { display:none}



/* -- Logo Overides  -- */
.highlight {position:relative;margin: 32px 0;}
.highlight:after {content: '';position: absolute;top: 50%;left: 0;border-top: 1px solid #000000;width: 100%;transform: translateY(-50%);z-index: 0;}
.highlight span {font-size: 20px;background: #ffffff;z-index :1;position: relative;padding: 0 32px 0 0;font-weight: 900;}
.highlight.invert:after {border-top: 1px solid #a8acbe;}
.highlight.invert span {background: #2c2d33;color: #fff;}


.invert, .invert .container {background: #2c2d33;}
.invert * { color: #ffffff;}

#flexsliderCTA {position: relative;}
#flexsliderCTA .flex-direction-nav {display: block;}
#flexsliderCTA .flex-direction-nav li {line-height: 100%;width: auto;display: inline;margin: 0;}
#flexsliderCTA .flex-direction-nav a {padding: 8px;margin: 0;font-size: 0;position: absolute;top: 7px;}
#flexsliderCTA .flex-direction-nav a.flex-disabled {display: none;}
#flexsliderCTA .flex-direction-nav a.flex-prev {float: left;text-align: left;left: 0;}
#flexsliderCTA .flex-direction-nav a.flex-next {float: right;text-align: right;margin: 0;right: 0;}
#flexsliderCTA .flex-direction-nav a.flex-prev::after,
#flexsliderCTA .flex-direction-nav a.flex-next::after {font-size: 12px;display: block;position: absolute;top: 50%;transform: translateY(-50%);font-weight: bold;padding: 14px;}
#flexsliderCTA .flex-direction-nav a.flex-prev::after {content: "<"; left: 0;}
#flexsliderCTA .flex-direction-nav a.flex-next::after {content: ">";right: 0;}
#flexsliderCTA .flex-control-nav {display: none;} 

@media screen and (max-width: 768px) {
	.footerNewsletterCTA {padding: 16px 0;}
}

/* New Basket overides  */
.new-basket-currency { display: none !important;}

/* Hide Click & Collect */
.fafqvdd .add-to-cart-area-3, .cncFooterTxt, [data-toggle="clickandcollect"]{ display: none !important;} 
.quicklookitem-inner-right---clickcollectnotice { display:none}