/* Full width add ot basket areaa*/
.productPageTop {max-width: 100%;}
@media screen and (min-width : 1440px) and (max-width : 1913px) {#firstdetails {padding-right: 32px;}}
@media screen and (min-width : 1914px) { #firstdetails { padding-right: 32px;}}
#prodInfoLeft {width:60%;position: sticky;top: 72px;}
#prodInfoRight {width: 40%;}
@media screen and (max-width: 1024px){
    #prodInfoLeft, #prodInfoRight {width: 100%;position: relative;top: auto;}
}
@media screen and (max-width: 1023.99px) and (min-width: 768px){#prodInfoLeft, #prodInfoRight {width: 100%;position: relative;height: auto;top: unset;}}
.productPageTop .container {background: #ffffff;}
.productPageTop .maxInner {max-width: var(--fixedwidth);}
@media screen and (min-width : 1440px) and (max-width : 1913px) {#firstdetails {padding-right: 32px;}}
@media screen and (min-width : 1914px) {#firstdetails {padding-right: 32px;}}
#prodInfoRight {align-items: center;}
.dropdownA2B {background: #ffffff;padding: 0;}
@media screen and (max-width: 1023.99px) and (min-width: 0px){#prodInfoRight {align-items: center;max-width: 100%;} #firstdetails{padding: 16px 16px 0px  16px;}}

/* Miv modiactions*/
#detailMiv {outline: none;}
#detailMiv .imgCtr:after {padding-bottom: 75%}
.productPageTop, .productPageTop .container {background: #ffffff;}
.MIVicon div, .MIVicon2 a { background:#efefef}
.MIVicon div:hover, .MIVicon2:hover a { background:#2f76ec}
.col-thumbnail {max-width: 75px;}
.col-thumbnail > div[class*='flipme'] {border:1px solid #d9d9d9;background-size: contain !important;}
.col-thumbnail > div[class*='flipme']:hover {border:1px solid #2f76ec}
.add-to-cart-area-button, [onclick*="AddStockNotificationModular"] { background:#e8710a}

/* Brands text added*/
#Brand:before {content:"Brand | "; opacity:0.5}

/* Prices */
.percentOff {color: #EC0028}

/* Override the h1 as Bebus pro is smaller then convention fonts */
.productName {font-size: 1.5em;width: 100%;}
@media screen and (max-width: 767px) {.productName {font-size: 1.25em;}}
@media screen and (max-width: 1920px) and (min-width: 1441px){.productPageTop {padding-right:0px}}



/* Season CTA  */
.season {border-bottom: 1px solid#cccccc;margin-bottom: 32px !important;}
.longDesc { line-height:200%}
.detalCTA {border: 1px solid #dcdcdc;background: #FAFAFA;padding: 32px; overflow: hidden;}
.detailOrder {grid-gap:1em;overflow: unset;}
div.detalCTA > div, div.detalCTA > span {margin-bottom: 0px;}
.singleRow .detalCTA {grid-column: 1/13 !important;}
.iGscPrice {display: block;margin: unset;}
@media screen and (max-width: 767.9px){
    .detalCTA {padding: 16px !important;}
    .ctaMain {padding: 0px !important;}
}


/* sidebar modifications  */
.ctaTitle strong {font-family: 'citrfontreg';font-size: 18px;}
.ctaTitle strong > p {margin: 0 0 0.5rem 0;}
.ctaMessage { line-height:200%}
.ctaMain > div {padding-bottom: 0;}

/* Width override */
.productPageTop .maxInner {max-width:100%;overflow: unset;height: inherit;float: none;}
.productPageTop {max-width:100%;}
.productPageTop .container {margin: auto;float: none;}


/* Colour picker  */
.colourPicker {border: 1px solid #d5d5d5;margin: 8px 0;position:relative;width: 100%;padding: 8px 0;}
.colourPicker:after {content: "Select your colour";position:absolute;top: -11px;background: #fff;padding: 0 18px;font-size: 12px;}
.productColourPicker {order: 0;}
.colourPicker {border: 1px solid #e2e2e2;}


/* add to basket temp fix  */
.newsletterSuccess.colorwhite { background: rgb(54, 126, 25)}

/* add to basket temp fix  */
#trigger-onlineSizer#trigger-onlineSizer:before {content:"";background: url("/layout/smartfit.png");width: 100px;height: 18px;display: inline-block;background-size: contain;background-repeat: no-repeat;background-position: center;position: relative;top: 3px;margin: 0 8px;}
#trigger-onlineSizer#trigger-onlineSizer {background-color: #96bc33;text-align: center;color: #fff;}


/* Call to actions */
.ctadetail {display:flex;flex-wrap: wrap;clear:both;margin-top: 12px;padding-top: 12px;float: left;grid-gap: 16px;}
.ctadetail > a {display:none;width: 50%;position: relative;margin: 0 0 18px 0 ;float: left;color: #000;min-width: 240px;flex-basis: 240px;flex-grow: 1;}
.ctadetail > a:nth-child(odd){ padding-right:16px}
.ctadetail .txtMain {font-weight: bold;color: #000;font-size: 14px;padding: 0 0 0 39px;margin-bottom: 4px;}
.ctadetail .txtSub {font-size: 11px;line-height: 125%; padding: 0 0 0 39px;}
.ctadetail .txtSub span {color: cornflowerblue;border-bottom: 1px solid #d2e2ff;}
.ctadetail .txtSub:before {font-family: feather;content: "\e116";background: cornflowerblue;color: white;border-radius: 11px;padding: 3px;width: 15px;height: 15px;font-size: 8px;margin: 0 5px 0 0;display: inline-block;line-height: 8px;text-align: center;position: absolute;top: 7px;left: 16px;}
.ctadetail .icon {position:absolute;left: 0;top: -3px;}
.ctadetail .icon:before {font-size: 24px;display: inline-block;font-family: feather;font-style: normal;font-weight: 400;font-variant: normal;text-transform: none;speak: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.txtMain span {border-bottom: 1px solid #d1d1d1;}
.help .icon:before {content: "\e076";}
.covid19 .icon:before {content: "\e014";}
.bikeCheck .icon:before {content: "\e023";}
.CycletoWork .icon:before {content: "\e009";}
.TradeIn .icon:before {content: "\e058";}
.Dispatched .icon:before {content: "\e015";}
.Insurance .icon:before {content: "\e012";}
.ctadetail > a:hover .txtSub span { color:blue;}
.product-cta-img.containImg { background-size:contain !important; background-repeat:no-repeat !important}
.product-cta {max-width: 600px;width:100%;margin:0 auto;background:white;padding: 0;}
.product-cta-img {width: 40%;min-height: 400px;text-align:center;background: #333;display: flex;vertical-align: middle;justify-content: center;align-items: center;color: #fff;font-size: 100px;background-size: cover !important;background-position: center !important;display: none;}
.product-cta .zflex-v {width: 100%;padding:32px;}
.product-cta a {color: royalblue;border-bottom: 1px solid #c8d2ee;}
.ctaMain > div {padding: 32px;position: sticky;top: 56px;}
#returnsPane { display:none}
@media screen and (max-width: 767px){
    .product-cta{ max-width: 75%;}
    .product-cta .zflex-s { display: inline;}
    .product-cta-img {width: 100%;min-height: 200px;font-size:24px;}
    .product-cta .zflex-v {width: 100%;padding: 8px;}
    .ctaMain > div {padding: 16px;};
}


/* Colour buttons */
.flex-control-nav li a.flex-active {background: rgb(100 149 237);}
.flex-control-nav li a {background: #000000;}

/* CR overrides */
#CustomerRewardPane {order: -1; color:#000}
#CustomerRewardPane:before {content:"";background: url("/layout/rewards/VIPRewardLarge.png") no-repeat;width: 21px;height: 20px;display: inline-block;float: left;background-size: contain;position: relative;top: 4px;}
#CustomerRewardPane span { font-size:15px; color:#6495ed}
#CustomerRewardPane > div { text-align:left}
#devPromotext { display:none}
.crTextDesc {font-size: 0px;}
#lblPoints { font-weight:700}
#lblPoints:before {content:"Earn ";font-size:15px !important;color:#212121;font-weight: 400;}
#lblPoints:after {content: " in VIP Rewards ";font-size:15px !important;color:#212121;font-weight: 400;}


/* accordian overrides */
.accordianBox {border: 1px solid #dcdcdc;margin-bottom: 16px;padding: 0 32px;background: #fafafa;}
.accordianBox:hover {margin-bottom: 16px;}
.accordianBox:hover, .accordianBox.active  {border: 1px solid #919191;}
.accordianHeader { padding:24px 0}
.active .accordianHeader > span.fa-unsorted:before, .active .accordianHeader > span.fa-unsorted:after {background: #498cbc;}
.accordianBox .maxInnerTitle { max-width:100%}
@media screen and (max-width: 767px){
    .accordianBox {padding: 0 16px;}
    .accordianHeader { padding:16px 0}
}

/*  Delivery  */
.deliveryOption > div {margin:8px;outline: 1px solid #efefef;}
.deliveryOption {padding: 16px;background: #212121;text-align: center;color: #fff;display: flex;flex-basis: 340px;flex-wrap: wrap;justify-content: center;align-items: stretch;grid-gap: 16px;}
.deliveryOption > div {margin: 0;outline: 1px solid #8e8e8e;flex-basis: 275px;padding: 32px;flex-grow: 1;align-content: center;justify-content: center;align-items: center;display: flex;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.deliveryOption > div:hover {outline: 1px solid #8e8e8e;background: #0498e1;}
.deliveryservice {text-transform: uppercase;letter-spacing: 2px;font-size: small;text-transform: uppercase;letter-spacing: 1px;font-size: 10px;padding-top: 16px;}
.deliveryservicOption {text-transform: uppercase;letter-spacing: 2px;font-size: 12px;}
.deliverytextMain {width: 100%;display: block;line-height: 100%;padding:16px 0 8px;font-size: 32px;font-weight: 700;}
.deliverytextSub {width: 100%;display: block;padding: 8px;font-weight: 700;}
.deliverySub {position: absolute;top: 5px;font-size: larger;font-family: 'bebas-kai, sans-serif'; font-size: 40px;}
.deliveryWarning { color:red}
.deliveryTimescale {padding: 0 8px;}
.popular .deliveryTimescale a {margin-top:8px;color: #fff !important;}
.popular >div  {position:relative;border: 2px solid #f9f5f5 !important;background: #2e3136 !important;color: #ffffff;}
.popularFinance >div {border: 2px solid #f9f5f5 !important;background: #2e3136 !important;color: #ffffff;}
.deliveryOptionBike { color: #fff}
.deliveryXmas { background-image:url("/layout/xmas.jpg"); background-size: cover; margin: 16px 0; padding: 16px}
.deliveryXmas h2, .deliveryXmas h2, .deliveryXmas p { color: #FFF}
.deliveryXmas .deliveryOption:hover > div {background: #06551b;color: #fff;}
.deliveryXmas .deliveryOption:hover .deliveryWarning {background: red;color: #fff;}
.xmasBikes .col-20p {  float: initial; display: inline-block;}
#shippingtable {font-family:Arial,Helvetica,sans-serif;text-align:left;padding:0px;margin: auto;}
#shippingtable img { float:left;}
#shippingtable li {overflow:hidden;}
#shippingtable li img{ float:left; margin:4px 10px 0px 0px;}
#shippingtable li:hover, .shippingContent li:hover {background: rgb(236 236 236);color: #212121;}
#shippingtable font.required {font-family:Arial,Helvetica,sans-serif; font-size:12px}
.zone {margin: 28px 0; width: 100%;}
.shippingMap {float:left; margin: 14px 14px 0px 0px; border: none;display: none;}
.shippingContent {float:left;width: 100%;}
.shippingContent li {border-bottom: 1px solid #EFEFEB;list-style: none;padding: 0;height: 1%;overflow: hidden;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: center;font-size: small;}
.shippingContent li.title {border-bottom: 1px solid #B3B3B3;color: #000000;font-weight: 700;}
shippingtable li.title { font-size: 14px !important; line-height: 220%; font-family:'helvetica neue', helvetica, Arial, sans-serif; font-weight:bold; color: #666; clear:both; background-color: #fcfcfc;}
#shippingtable li zone, #shippingtable li country, #shippingtable li costA,  #shippingtable li costB, #shippingtable li costC, #shippingtable li desc, #shippingtable li majorsur  {float:left}
country {width: 40%;float: left;text-align: left;display: block;text-align: left;padding: 8px;float: left;width: 50%;text-align: left;}
country img { float: left; margin: 7px 10px 0 0;}
costA {width: 15%;float: left;padding: 8px;}
costB {width: 31%;padding: 8px;float: left;}
costC {width: 17%;padding: 8px;text-align: right;}
.international costA {width: 15%;float: left;padding: 8px;}
.international costB {width: 25%;padding: 8px;float: left;}
.international costC {width: 15%;padding: 8px;text-align: right;}
.international costD {width: 15%;padding: 8px;text-align: right;}
desc { width: 50% !important; text-align:left; float: left; font-size: smaller;display: none;}
.xmasDelivery .deliveryWarning {background-color: red;color: white;padding: 8px;}
.xmasDelivery > div {outline: 1px solid #bc3737 !important;}


/*  Bike Promise  */
.photo div:after {padding-bottom:75%;content: "";display: block;width: 100%;}
.WBText {padding:32px !important;max-width: 500px;}
.photo > div { height:100%}
.hireCTA i, .pip {font-size: 20px;border: 1px solid #ffffff7d;border-radius: 100%;width: 55px;height: 55px;line-height: 55px;display: inline-block;font-style:normal;font-family: bebas-kai, sans-serif;text-align: center; margin: 0 0 32px}
@media screen and (max-width: 767.9px)
{
    .WBText {margin-top:-60px;padding-bottom: 64px !important;}
    .WBText .pip { background:#212121}
    .steps .photo { order:-1}
    .steps .photo div:after { padding-bottom:33.33%}
}


/*  Shortedn Long description  */
#ModularLongDescription > span::after {content: "Read More";display: inline-block;margin: 10px 0 0 0;cursor: pointer;color: #6495ed;font-size: 14px;font-weight: bold;border-bottom: 1px solid;}
#ModularLongDescription:not(.active) div#longDescription {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;height: 100px;}


/* Brand Focus */
.brandFocus {width: 100%;height: 100%;position: relative;display: flex;}
.brandFocus div:first-child {position:relative;z-index:1;max-width: 410px;padding: 4%;background: #212121;color: #ffff;text-align: center;}
.brandFocus .gradient {flex-grow:1;background: linear-gradient(90deg, rgb(33 33 33) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 100%);position: relative;z-index: 1;}
.brandFocus div:first-child img {margin:auto;display:inline-block;filter: brightness(0) invert(1);max-width:200px;padding: 0 0 32px 0;}
.brandFocus .bgCover { position:absolute; display: block; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; z-index: 0;}


/* Finance Messgges Klana Pill */
#firstdetails > .kl.kl-cta {order: -1;display: flex;flex-flow: row wrap;color: #000;align-items: baseline;font-size: 12px;position: relative;} 
#firstdetails > .kl.kl-cta img {margin-right: 8px;width: 75px;} 
#firstdetails > .kl.kl-cta p {margin: 0;font-size: 12px;} 
#firstdetails > .kl.kl-cta .learn {text-decoration: underline;margin: 0px 8px;color: cornflowerblue;} 
.kl.kl-pop {max-width: 660px;padding: 44px;}
.kl.kl-pop h3 {font-size: 32px; margin: 0;}
.kl.kl-pop ul {padding: 16px 32px 32px 64px; background: #efefef;}
.kl.kl-pop ul li {display: flex;align-content: center;flex-flow: row wrap;justify-content: flex-start;align-items: center;margin-top: 16px;position: relative;}
.kl.kl-pop ul li::before {content: '';width: 15px;height: 15px;background: #343434;border: 2px solid #efefef;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;border-radius: 50%;position: absolute;left: -30px;top: 5px;z-index: 2;}
.kl.kl-pop ul li::after {content: '';width: 2px;position: absolute;top: 18px;left: -24px;z-index: 1;background: #676161;height: 100%;} 
.kl.kl-pop ul li:last-child::after {display: none;}
.kl.kl-pop ul li img {max-width: 60px;padding: 10px 8px;background: #ffb3c7;border-radius: 7px;margin-left: 6px;} 
.kl.kl-pop a { color:cornflowerblue; text-decoration:underline}
.kl.kl-pop a.but {display: block;text-align: center;background: #636363;color: #fff;padding: 10px;font-family: 'citrfontbold';} 
.kl.kl-pop a.but:hover {background: var(--but-bg-color);}


/* Finance Messgges v12 */
#financeTopPanel {position:relative}

/* Add to Baket overrides */
#cart-target, .cc-lookup-service-wrapper {background: #f0f0f5;padding: 16px !important;border-radius: 3px;}
.cc-lookup-service-entrysection[data-ilc=''][data-productid=''] + div { display:none}
.cc-lookup-service-entrysection[data-ilc=''][data-productid='']:before {background: rgb(255 255 255 / 0%);}
#OZ-custombutton {order:1;background: #FAFAFA !important;}
.cc-lookup-service-warningtext {font-family: 'citrfontreg';font-size: 11px;text-align: center;border-top: 1px solid #e0e0e0;padding-top: 8px;margin-top: 4px;color: initial;}
.add-to-cart-area-2:after {font-size: 11px;}


/* Change MIV display  */
#detailMiv {outline: none;margin: 0;border-bottom: none;background: transparent;}
#prodInfoRight {position: sticky;top: 56px;height: 100%;z-index: 6;}
.productPageTop {padding-right: 0;}
.dark { background:#afafaf}
@media screen and (min-width: 1025px) {
	.MIVicon {top: 24px;left: 24px;}
	#brand-logo-area {padding: 16px;}
	#prodInfoLeft {width: 65%;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: flex-start;border-right: 1px solid #ebebeb;}
	#prodInfoRight {width: 35%;}
	#prodInfoLeft #detailMivThumb {max-width: 215px;order: -1;width: auto;height: auto;padding: 24px;flex-flow: row wrap;-webkit-align-items: flex-start;align-items: flex-start;position: sticky;top: 56px;}
	#prodInfoLeft #detailMivThumb > a, #prodInfoLeft #detailMivThumb > div {flex-grow: unset;width: 96px;margin: 4px;}
	#prodInfoLeft #detailMiv {flex:1; height: 100%;padding: 32px;border-left: 1px solid #ebebeb;}
	#prodInfoLeft div[class*="css-image"] {height: auto; background-position: top center !important;}
}
@media screen and (min-width: 1025px) and (max-width: 1440px) {
	.MIVicon {top: 16px;left: 16px;}
	#brand-logo-area  {padding: 8px !important;}
	#detailMiv {padding: 16px !important;border-bottom: none;}
	#prodInfoLeft div[class*="css-image"] {position: sticky; top: 75px;}
	#prodInfoLeft #detailMivThumb {max-width: 198px !important;padding: 16px !important;}
}