/* Global styling --------------------------------------------------------------- */ .dividingSpace { margin-top: 6%;} .unpickStyles ol, .unpickStyles ul {list-style: initial; margin:16px 16px 16px 32px !important;}wrapper .unpickStyles b, .unpickStyles strong {font-weight: 900;} .unpickStyles a { color:dodgerblue; text-decoration: underline;} img { height: auto;} .bannerInvert .bannerTxtCtrGrid { background:#0000005e} /* Locations / Store pages --------------------------------------------------------------- */ #map_wrapper, .storeWalkaround > iframe{height:65vh;} #map_canvas {height: 65 !important;flex-grow: 1;} .storesMap {grid-gap: 0px;justify-content: center;background: #efefef;align-items: center;padding: 8px;} .storesMap > div {max-width: 100%;-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;/* height: 65vh; *//* flex-wrap: wrap; */display: flex;padding: 0;/* column-count: 2; */flex-direction: column;gap: 8px;} .storesMap > div a:hover {outline: 1px solid #bdbdbd;} .storesMap > div a:hover .mpin { background:firebrick} .storesMap > div:hover p, .stores > div:hover h3 {color:#fff } .storesMap > div:nth-of-type(3n){border-right:none} .storesMap img {width:100%;min-height:50px;} .stores {display: flex;flex-wrap: wrap;grid-gap: 8px;margin: 8px 0;justify-content: center;} .stores > div {padding: 32px;width: auto;flex-grow: 1;flex-basis: 320px;max-width: 475px;background: #efefef;-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;} .stores > div:hover {background:#212121; } .stores > div:hover p, .stores > div:hover h3 {color:#fff } .stores > div:nth-of-type(3n){border-right:none} .stores img {width:100%;min-height:50px;} .storesLocation {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-wrap: wrap;color: #666;font-size: 10px;text-transform: uppercase;letter-spacing: 1px;} .storesLocation p {margin: 21px 0 3px 0;} .storesLocation span {font-size: medium;text-transform: capitalize;letter-spacing: 0;} .tableizer-table {width: 100%;overflow: hidden;} .tableizer-table tr {grid-gap:16px;position:relative;width: 100%;text-align: left;border-bottom: 1px solid #bebebe;display: inline-flex;} .tableizer-table tr td {padding:8px 0;: 1px solid #000;} .tableizer-table tr th { padding:8px 0; font-size:smaller} .tableizer-table tr td:first-child {flex-grow: 1;} .tableizer-table tr td:nth-child(2), .tableizer-table tr th:nth-child(2) {flex-grow:1;text-align: left;} .shopBlur .photo { overflow:hidden} .shopBlur .photo > div { filter: blur(5px); transform: scale(1.3);} .shopBlur .bannerViewGrid { font-weight:700} .bannerViewGrid.shopOpen {display: inline !important;border-color: #185e8d;color: #ffffff;background: #185e8d;} .bannerViewGrid.shopClosed {display: inline !important;border-color: #a01919;color: #ffffff;background: #a01919;} @media screen and (max-width: 767.9px){ .stores > div {padding: 8px;max-width: 100%;} .stores h3 {background:#000;padding: 11px;margin: 0;color: #fff;} .stores img {width:100%;max-width:100px;min-height: auto;height: auto;float: left;padding: 0 16px 0 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; width: fit-content;margin: auto;} .deliveryOption > div { flex-direction: column;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; max-width: 300px;} .deliveryOption h3 { color: #fff;} .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(33 33 33);color: #ffffff !important;} #shippingtable li.title:hover, .shippingContent li.title:hover {background: initial !important;color: initial !important;} #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 --------------------------------------------------------------- */ .deliveryOption.xmasDelivery .deliveryWarning {background-color: #9c2621;color: white;padding: 4px 16px;font-size: 12px;text-transform: uppercase;letter-spacing: 0.03rem;} .deliveryOption.xmasDelivery > div {outline: 1px solid #3f3f3f;} .deliveryOption.xmasDelivery > div:hover { background: #000000; outline: 1px solid #1e1e1e; } /* Hire pages --------------------------------------------------------------- */ .storesHire > div {margin: 0px;background: #212121;text-align: center;padding: 0px 0px 50px;float: none;display: inline-block;color: #fff;vertical-align: top;flex-basis: 325px;} .storesHire > div:nth-of-type(3n){border-right:none;} .storesHire img {margin-bottom: 21px;width:100%;min-height: 175px;position: relative;object-fit: cover;} .storesHire h3:before {font: normal normal normal 14px/1 FontAwesome;display: inline-block;color: #fffff242;z-index: 1;left: 0;content: "\f14a";font-size: 19px;margin: 8px;} .storesHire h3 {color:#fff;position: relative;} .comingSoon { position:relative} .comingSoon:before {content: "Comming soon";background: #252729;color: #f57a7a;padding: 8px 16px;position: absolute;z-index: 1;font-size: 14px;text-transform: uppercase;} .comingSoon a {opacity:0.5;-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */filter: grayscale(100%);} .comingSoon .button {visibility: hidden;} .hireMobileLink {font-family: 'bebas-kai, sans-serif'; position: relative; } .hireMobileLink:before {content:"New";padding: 2px 4px;border-radius: 2px;font-size: 11px;font-family: bebas-kai, sans-serif;background: #fd4c4c;letter-spacing: 1px;margin-right: 8px;top;color: #fff;right: -8px;} .comingSoon .button:before {visibility: visible;content: "Unavailable";-webkit-appearance: none;border: none;border-radius: 3px;/* color: #fff !important; */cursor: pointer;display: inline-block;font-size: 12px;font-weight: 400;height: auto;letter-spacing: 2px;line-height: 25px;text-align: center;text-transform: uppercase;-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-ms-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out;text-decoration: none;font-weight: 700;text-align: center;width: 100;display: block;} .bookformContainer { max-width: 640px; margin: auto; float:none} .bookformContainerCTA h3, .bookformContainerCTA i { margin: 0} .bookformContainerCTA i {background:#fff;padding: 12px;margin: 0 16px 0 0;border-radius: 100%;font-size: 12px;} .bftel { color: #0ed6c5} .bfemail { color: #f76f6f} /* Hire Table */ .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;z-index: 2;position: relative;} /* ----- New Finance Calculator ----- */ .fncPage {background: #f4f6fc} .fncBox {background: #ffffff;border: 1px solid #e3e7f3;border-radius: 5px;} .fncInput {border: none;background: #f9faff !important;border: 1px solid #e0e7ff !important;border-radius: 5px !important;height: 40px;padding: 0 8px;display: inline-block;position: relative;width: 100%;} .fncInput:focus, .fncInput:active, .fncInput:hover {border: none;background: #f9faff !important;border-color: #a4b8ff !important;outline: none;box-shadow: none !important;color: #163abd !important;} .fncButton {border: none;background: #416488;border-radius: 5px;color: #fff;text-align: center;height: 40px;line-height: 40px;width: 100%;display: block;margin-top: 8px;} .mindepositFail .titleacc:before {font: normal normal normal 14px/1 FontAwesome;content: "\f00d";background: red;padding: 8px;color: white;border-radius: 100%;width: 30px;height: 30px;display: inline-block;text-align: center;margin-right: 8px;} .fncSticky {position: sticky; top:130px; padding-right: 32px} @media screen and (max-width: 1024px){.fncSticky {position:relative;padding-right: 0px;top: 0;}} .productAccordian {width: 100%;text-align: left;border-collapse: separate;table-layout: fixed;} .productAccordian th {text-align:left;padding: 0 16px;font-size: smaller;user-select: none;} .productAccordian th:hover { cursor:pointer} .productAccordian th.acn:after {font: normal normal normal 12px/1 FontAwesome;content: "\f078";color: #416488;padding-left:8px;} .productAccordian th.dec:after { font: normal normal normal 12px/1 FontAwesome; content: "\f077"; color:#2e5bff; padding-left:8px} .productAccordian tr {margin-bottom: 16px;display: table;table-layout: fixed;width: 100%;border-spacing: 0 8px;} .productAccordian td {padding: 4px 16px;} .fncTerm:after {content:" Months"} .fncMonthCost:before, .fncDeposit:before, .fncTotalPayable:before {content:"\00a3"} .highAPR {color: #457fbb;} .lowAPR {color: #2b9653;} .errorMinDeposit { background:#fff8f8} .errorMinDeposit td {color:#ba7575} .errorMinDeposit td.fncMonthCost, .errorMinDeposit td.fncDeposit, .errorMinDeposit td.fncTotalPayable { font-size:0; color:#eb0f0f} .errorMinDeposit td.fncMonthCost:before {font-size: 14px; content: "Minimum \00a3" attr(data-deposit) " deposit required";} .errorMinDeposit td.fncDeposit, .errorMinDeposit td.fncTotalPayable { display:none} .errorMinBasketValue {background:#fff8f8;border: 1px solid #f3e0e0;} .errorMinBasketValue td {color: #c15c5c;} .errorMinBasketValue td.fncMonthCost, .errorMinBasketValue td.fncDeposit, .errorMinBasketValue td.fncTotalPayable, .errorMinBasketValue td.buy { font-size:0; color:#eb0f0f} .errorMinBasketValue td.buy {opacity: 0;} .errorMinBasketValue td.fncMonthCost:before {font-size: 14px; content: "Minimum \00a3" attr(data-minval) " basket value";} .errorMinBasketValue td.fncDeposit, .errorMinBasketValue td.fncTotalPayable { display:none} [class*="CC48-9.9"] {border: 1px solid #d5d398;position:relative;overflow:hidden;background: #fdfdf6;} [class*="CC48-9.9"] .fncMonthCost:after{content:"popular";margin: 0;color: rgb(33 33 33);font-size: 9px;line-height: 100%;letter-spacing: 1px;position: absolute;padding: 5px 32px;text-align: center;background: #f8ec01;top: 10px;right: -34px;text-transform: uppercase;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);} .noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box} .noUi-target{position:relative;direction:ltr} .noUi-base{width:100%;height:100%;position:relative;z-index:1;background: #e0e7ff;border-radius: 18px;} .noUi-connect{position:absolute;right:0;top:0;left:0;bottom:0} .noUi-origin{position:absolute;height:0;width:0} .noUi-handle{position:relative;z-index:1} .noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:top .3s,right .3s,bottom .3s,left .3s;transition:top .3s,right .3s,bottom .3s,left .3s} .noUi-state-drag *{cursor:inherit!important} .noUi-base,.noUi-handle{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} .noUi-horizontal{height: 10px;} .noUi-horizontal .noUi-handle{width: 25px;height: 25px;left: -12.5px;top: -8px;outline:0;box-shadow: 0 3px 6px -3px #0000006e;} .noUi-vertical{width:18px} .noUi-vertical .noUi-handle{width:28px;height:34px;left:-6px;top:-17px} .noUi-target{border-radius:4px;margin-top: 50px;} .noUi-connect{background: #416488;border-radius: 18px;-webkit-transition:background 450ms;transition:background 450ms;} .noUi-draggable{cursor:ew-resize} .noUi-vertical .noUi-draggable{cursor:ns-resize} .noUi-handle{border: 3px solid #416488;border-radius: 100%;background:#fff;cursor:default;outline:0;} .noUi-active{box-shadow: 0 3px 6px -3px #bbb;} .noUi-handle:after,.noUi-handle:before{display:block;position:absolute;height:14px;width:1px;background:#e8e7e6;left:14px;top:6px;} .noUi-handle:after{left:17px} .noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px} .noUi-vertical .noUi-handle:after{top:17px} [disabled] .noUi-connect{background:#b8b8b8} [disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed} .noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box} .noUi-pips{position:absolute;color:#999} .noUi-value{position:absolute;white-space:nowrap;font-size: 9px;text-align:center;} .noUi-value-sub{color:#ccc;font-size:10px} .noUi-marker{position:absolute;background: #e4e8f9;} .noUi-marker-large,.noUi-marker-sub{background: #e0e7ff;} .noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%} .noUi-value-horizontal{-webkit-transform:translate3d(-50%,50%,0);transform:translate3d(-50%,50%,0)} .noUi-marker-horizontal.noUi-marker{margin-left:-1px;width: 1px;height:5px;} .noUi-marker-horizontal.noUi-marker-sub{height:10px} .noUi-marker-horizontal.noUi-marker-large{height:15px} .noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%} .noUi-value-vertical{-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);padding-left:25px} .noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px} .noUi-marker-vertical.noUi-marker-sub{width:10px} .noUi-marker-vertical.noUi-marker-large{width:15px} .noUi-tooltip{display:block;position:absolute;border-radius:3px;background: #416488;color:#fdfdfd;padding: 1px 8px;text-align:center;white-space:nowrap;} .noUi-tooltip:before {content:"\00a3";font-size: smaller;padding-right: 3px;} .noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform: translate(-50%,-5px);left:50%;bottom: 120%;} .noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%} #fncSlider .noUi-handle:after, #fncSlider .noUi-handle:before, #fncSliderDep .noUi-handle:after, #fncSliderDep .noUi-handle:before { display:none !important} .loaderFinance {border: 5px solid #ffffff; /* Light grey */border-top: 5px solid #416488; /* Blue */border-radius: 50%;width: 50px;height: 50px;animation: spin 0.7s linear infinite;position: absolute;position: absolute;left: 50%;margin-left: -50px;top: 133px;margin-top: -50px;} @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* finance */ .deliveryOption > div {outline: 1px solid #5d5d5d;} .deliveryOption > div:hover {outline:1px solid #c5c5c5;background: #416488;color: #fff;} .financeOption:hover > div, .financeOption:hover .financetextMain {background: #416488;color: #fff;} .financeUk {text-align: center;background: #f4f6fc;color:#416488} .financeUk > div {outline: 1px solid #cfd5e9;} .buy a {border: none;background: #416488;border-radius: 5px;color: #fff;text-align: center;height: 40px;line-height: 40px;width: 100%;display: block;} .dpd a {color: #666;margin: 8px;} .financeservice {text-transform: uppercase;letter-spacing: 1px;font-size: 10px;padding-top: 16px;} .financeservicOption {text-transform: uppercase;letter-spacing: 2px;font-size: 12px;} .financetextMain {width: 100%;display: block;line-height: 100%;padding:16px 0 8px;font-size: 30px;font-weight: 800;} .financetextMain span {font-size: 24px;} .financetextMain2 {font-family: 'bebas-kai, sans-serif';width: 100%;display: block;line-height: 100%;padding:16px 0 8px; font-size: 24px;} .financetextMain2 span {font-size: 40px;display: block;} .financetextMain2:before {content:"";border-top:1px solid #a0a0a0;width: 100px;display: inline-block;padding-top: 32px;margin: auto;} .financetextSb {font-family: 'bebas-kai, sans-serif';width: 100%;display: block;padding: 8px;} .financeSub {position: absolute;top: 5px;font-size: larger;font-family: 'bebas-kai, sans-serif';} .financeTimescale {padding: 0 16px;} .financeApply {display: flex;position: relative;grid-gap: 2em;justify-content: space-between;} .financeApply:after {content: "";position: absolute;width: 100%;height: 1px;background: #41649766;top: 26px;z-index: 0;} .financeApply > div {text-align:center;} .financeApply > div:first-of-type{ text-align:left} .financeApply > div:last-of-type{ text-align:right} .financeApply > div:hover span { background:#416488; color:#fff} .financeApply span {background: #fff;position: relative;z-index: 2;width: 50px;height: 50px;line-height: 50px;border-radius: 25px;display: inline-block;border: 1px solid #b9b9b9;text-align: center;} .financeApply p {font-size: 14px;} @media screen and (max-width: 767.9px){ .financeApply {flex-direction: column;} .financeApply:after {content: "";position: absolute;width: 1px;height: 100%;background: #41649766;top: 26px;left: 26px;z-index: 0;} .financeApply > div {width: 100%;text-align: left !important;position: relative;padding: 0 0 0 74px;} .financeApply span {position: absolute;left: 0px;} .productAccordian td {padding: 0px 8px;} #rdDpst, .fncDeposit { display:none} } /* VIP Messages */ .VIPBanner img {margin: 16px;} .bannerTxtCtrGrid {} .bannerDescGrid {max-width: 650px;font-size: 16px;margin-bottom: 0px;} .bannerTitleGrid {} .bannerViewGrid {color: #ffffff;border: 1px solid #ffffff;padding: 4px 8px;font-size: 10px;letter-spacing: 1px;margin-top: 8px;text-transform: uppercase;} .bannerViewGrid:hover { background:#fff; color:#000} .VIPBanner:hover .bannerViewGrid {background: #498cbc;color: #fff;padding: 4px 16px;border: 1px solid #498cbc;} @media screen and (max-width: 767.9px) { .VIPBanner img {width: 50px;} .VIPBanner .bannerDescGrid {font-size: 14px;} .VIPBanner .bannerTitleGrid {font-size: 16px;-webkit-line-clamp: inherit;} .VIPBanner .photo div:after { padding-bottom: 100vh !important; } } /* Black Fridaty Messages */ .bf a:hover .bannerViewGrid {background: #498cbc;color: #fff;padding: 4px 16px;border: 1px solid #498cbc;} .bf > div { display:flex; flex-wrap:wrap} .bf > div > a {flex-direction:column;width:100%;flex-basis: 425px;flex-grow:1;} /* Bike Promise */ .WBText {padding:32px !important;max-width: 500px;} @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%} } /* Bike Promise */ .workshop {background: #404041;margin: 0;} .workshop img {width:15px} .workshopTable > div {margin: 0 0 1px 0;} .workshopTable > div {display: flex;} .workshopTable > div > div {padding:8px;background:#ededed;margin: 0 0 0 8px;} .workshopTable > div > div:nth-child(1) {width:60%;margin: 0;text-align: left;} .workshopTable > div > div:nth-child(2) {width:15%} .workshopTable > div > div:nth-child(3) {width:15%} .workshopTable > div > div:nth-child(4) {width:15%} .workshopTable > div > div:nth-child(5) {width:15%} .workshopTable > div:nth-child(1) {margin: 0 0 8px 0px;} .workshopTable > div:hover:nth-child(1) div { background:} .workshopTable .llkeblue { background:#16c0f3 !important} .workshopTable .bronze { background:#a97b53!important} .workshopTable .silver { background:#a19f9a!important} .workshopTable .gold { background:#fbb160!important} .workshopTable .platinum { background:#95a3ab!important} .workshopTable .mrg-top-8 { margin:8px 0 0 0} .workshopTable .textL { font-weight: 700;color: #fff; font-size:larger; text-transform:uppercase} .workshopTable .bgNone { background:transparent !important} .workshopTable .text-right {text-align: right !important;} .workshop .textWhite, .workshop .textWhite a { color:#fff} .textWhite a:before { filter:invert(1)} .workshopTable > div:hover div {background:#fff;} @media screen and (max-width: 767.9px) { .workshopTable > div > div {padding: 6px 3px;} .workshopTable > div > div:nth-child(1) {width: 172px;margin: 0;text-align: left;} .workshopTable > div > div:nth-child(2), .workshopTable > div > div:nth-child(3), .workshopTable > div > div:nth-child(4), .workshopTable > div > div:nth-child(5) {width:20%} .workshopTable > div > div {margin: 0 0 0px 1px;font-size: 10px;} .workshopTable .textL {font-weight: normal;color: #fff;font-size: 10px;text-transform:uppercase} } /* Site Map */ .siteMap .NodeLevel0 {} .siteMap .NodeLevel0 > div {display: inline-flex;flex-wrap: wrap;grid-gap: 32px;} .siteMap .NodeLevel0 > a {background: none;padding: 8px 0;border-bottom: 1px solid #000;} .siteMap .NodeLevel0 > a span {font-family: unset;} .siteMap .NodeLevel0 > .CSSFacetNavModules {position: relative;top: auto;display: -webkit-box !important;display: -moz-box !important;display: -ms-flexbox !important;display: -webkit-flex !important;display: flex !important;width: 100%;padding-left: 0 !important;padding-right: 0 !important;max-height: initial !important;padding: 0 0 16px 0;background: white;z-index: initial;opacity: 1 !important;} .siteMap .NodeLevel1 {width: auto !important;} .siteMap .NodeLevel1 > a {} .siteMap .NodeLevel2 {} .siteMap .NodeLevel2 > a {width: 100%;} .siteMap .NodeLevel2 > a:hover {color: #212121 !important;} .Vacancies #CSContentRepeater_lblError { font-size: 0px} .Vacancies #CSContentRepeater_lblError:before {content:"Currently no vacancies at this time";font-size: initial;background: #fff3f3;padding: 16px;display: block;text-align: center;color: red;} .Vacancies {display:flex;flex-wrap:wrap;grid-gap: 16px;} .Vacancies li{border-top: 1px solid #dedede;padding: 46px 0;list-style:none;float: left;flex-basis: 600px;flex-grow: 1;} .Vacancies .blogSnipImg{display: none;order: -1;} .Vacancies h2{width: 100%;margin: 16px 0;order: -1;position: relative;} .Vacancies h2 a { color:#444} .Vacancies p{padding: 0;font-size: 14px;} .Vacancies p strong {font-size:0} .Vacancies p strong:before {content:"Job posted on";font-size: initial; font-weight:normal} .Vacancies p {background: #efefef;order: -1;padding: 8px;} .Vacancies .Recent {padding: 0;height: auto;overflow: unset;} .Vacancies .Recent > div {flex-direction: column;display: flex;} .Vacancies .blogSnipText {padding:0;display: block;float: left;overflow: unset;order: 0;} .Vacancies .Recent .blogSnipText a {position:relative;padding: 0;} @media screen and (max-width: 767.9px) { .Vacancies li:nth-child(odd){ padding-right:0px} } /* grid layout --------------------------------------------------------------- */ .gridCSS {display: grid; grid-gap: 0.2em; grid-template-columns: repeat(2,1fr);grid-gap: 3em;} [class*="gridBanner"] > div {display: grid;padding: 0.2em 0;grid-gap: 0.2em;} [class*="gridBanner"] > div > a {position: relative; width: 100%; height: 100%} [class*="gridBanner"] > div > a:hover .bannerView {background: #2b3266;} .modernizr-no-cssgrid [class*="gridBanner"] > div { display: block} .layout1 > div {grid-template-columns: repeat(4,1fr); -ms-grid-columns: 1fr 1fr 1fr 1fr; padding-bottom: 0 } .layout1 > div > a:nth-child(1) {grid-column: 1/3;grid-row: 1/3;} .layout2 > div {grid-template-columns: repeat(3,1fr); -ms-grid-columns: 1fr 1fr 1fr 1fr } .layout2 > div > a:nth-child(1) {grid-column: 2/3;grid-row: 1/3;} .layout3 > div {grid-template-columns: repeat(3,1fr); -ms-grid-columns: 1fr 1fr 1fr 1fr; padding: 1em 0; grid-gap: 1em; } .layout3 > div > a:nth-child(1) {grid-column: 2/3;grid-row: 1/3;} .layout4 > div {grid-template-columns: repeat(4,1fr);padding: 1em 0; grid-gap: 1em; } .layout4 > div > a:nth-child(1) {grid-column: 2/3;grid-row: 1/3;} .layout4 > div > a:nth-child(3) {grid-column: 4/3;grid-row: 1/3;} .layout5 > div {grid-template-columns: repeat(5,1fr);padding: 1em 0;grid-gap: 1em;} .layout5 > div > a:nth-child(1) {grid-column: 1 / span 2;grid-row: 1/3;} .layout5 > div > a:nth-child(2) {grid-row: 1/3;} .layout6 > div {grid-template-columns: repeat(3,1fr);padding: 1em 0;grid-gap: 1em;} .layout6 > div > a:nth-child(1) {grid-column: 3;} .layout6 > div > a:nth-child(2) {grid-column: 2/3;grid-row: 3;} .layout6 > div > a:nth-child(3) {grid-column: 1;grid-row: 3;} .layout6 > div > a:nth-child(4) {grid-column: 1/3;grid-row: 1/3;} .layout6 > div > a:nth-child(5) {grid-row: 1/3;grid-column: 3;} .layout6 > div > a:nth-child(6) {grid-column: 1/3;} .layout6 > div > a:nth-child(7) {grid-column: 3;} .layout6 > div > a:nth-child(8) {grid-column: 3;} .layout7 > div {grid-template-columns: repeat(3,1fr);padding: 1em 0;grid-gap: 1em;} .layout8 > div {grid-template-columns: repeat(4,1fr);padding: 1em 0;grid-gap: 1em;} .layout8 > div > a:nth-child(1) {grid-column: 1 / span 2;grid-row: 1/3;} .layout8 > div > a:nth-child(2) {grid-row: 1/3;} /* Large Mobile Phones --------------------------------------------------------------- */ @media screen and (max-width: 767.9px) { [class*="gridBanner"] > div { grid-template-columns: 1fr; -ms-grid-columns: 1fr; padding: 0.5em 0; grid-gap:0.5em;} [class*="gridBanner"] > div > a {grid-column: auto !important;grid-row: auto!important;} } /* iPads (portrait and landscape) --------------------------------------------------------------- */ @media screen and (min-width : 768px) and (max-width : 1023.9px) { [class*="gridBanner"] > div { grid-template-columns: 1fr 1fr; -ms-grid-columns: 1fr 1fr; padding: 0.5em 0; grid-gap:0.5em;} [class*="gridBanner"] > div > a {grid-column: auto !important;grid-row: auto!important;} } /* Bike servicing */ .servicingCTA ul {position:relative;padding: 0;margin: 32px;} .servicingCTA ul:before {content: "";border-left: 1px solid #454545;width: 1px;height: 100%;position: absolute;z-index: 0;} .servicingCTA .pip {position: relative;margin: 64px 32px;background: #dedede;filter: invert(1);border: 1px solid #8a8a8a7d;} .servicingCTA .pip img {opacity:0.3;width: 18px;} .servicingCTA h4 {position: relative;margin: 0;border: 1px solid #8a8a8a7d;padding: 32px;background:#212121;} .servicingCTA h4 span {display:block;font-size: 24px;margin-bottom: 8px;} /* Covid Messages */ .tempClosing {background: #ffeaea;color: #8b1313;font-size: 20px;} .tempClosing {background: url("/images/important-info-essential-retail-24-03-blog.jpg") center;color: #8b1313;font-size: 20px;} .tempClosing > div {background-color: #841a03e8;max-width: 100%;} .Appointments > div {background: #035084e8;color: #8b1313;font-size: 20px;} .tempClosingContainer {margin: 32px auto;max-width: 700px;float: none;color: #fff;text-align: center;padding: 32px !important;font-size: smaller;} .tempClosingContainer img {margin: 16px auto;max-width: 900px;float: none;color: #fff;text-align: center;padding: 32px !important;font-size: smaller;} .tempClosing a { color:#fff} /* readytoride */ .readytoride {position: relative;background: #efefef;border: 1px solid #c6c6c6;padding: 64px;} /* force Accodian to show */ .showAccordian .accordianHeader { display: none !important;} .showAccordian .accordianCtn { display: inline !important;} .showAccordian .maxInnerTitle { padding: 32px} .showAccordian .accordianBox { border: none;} .llke:not(.delivery) { display:none} .accordianBox.active .accordianCtn {display: block !important;} .newAcc .accordianHeader {font-family: citrfontreg;} .maxInnerTitle a { color: cornflowerblue; text-decoration: underline;} .storeIMG > div {position: relative;grid-gap: 2px;} .storeIMG > div > a:first-of-type {grid-column: span 2; grid-row: span 2;} .storeIMG span {height: 100%;width: 100%;display: block;background-size: cover !important;background-position: center !important;} .storeIMG span:before {content: "";width: 40px;height: 40px;background: url(/layout/icons/plus-solid.svg);background-size: 18px;background-repeat: no-repeat;background-position: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 1;background-color: #ffffff;border-radius: 100%;transition: all 0.3s ease-in-out;transform-origin: center center;} .storeIMG a:hover span:before {background-color: #FFC500;} .gBGcover .photo span { width: 100%; height: 100%; display: block; background-repeat: no-repeat !important; background-size: cover !important;} @media screen and (max-width: 1024px) { .storeIMG > div > a:first-of-type {grid-column: auto; grid-row: auto;} } .contactDetail {display: flex;align-content: center;justify-content: center;gap: 64px;line-height:130%;flex-wrap: wrap;} .contactDetail > div {display: flex;gap: 18px;} .contactDetail img { background: #fdfdfd; width: 40px; height: 40px; padding: 10px; border-radius: 25px;} .contactDetail strong {display: block;} .map {display:flex;position: relative;z-index: 8;} .mapInfo {padding: 32px;color: #fff;text-align: left;width: 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;} .mapInfo > div > div {display:flex;gap: 18px;margin-bottom:16px;align-items: flex-start;} .mapInfo > div > div:last-of-type{ margin-bottom:0} .mapInfo li { list-style:none} @media screen and (max-width: 1024px) { .map { flex-wrap:wrap} .mapInfo { width:100%} } .features a {position:relative;flex-basis: 220px;height: 320px;} .features .bg {position:absolute;width:100%;left: 0;top: 0;object-fit: cover;height: 100%;} .features .cta {position:absolute;z-index: 1;background: #3e975d;color: #fff;top: 16px;right: 16px;font-size: 10px;display:flex;gap: 4px;padding: 2px 12px 2px 6px;text-transform: uppercase;border-radius: 20px;} .features .cta img {width: 14px;filter: invert(1);} .features .text {position: absolute;z-index: 1;bottom: 0;width: 100%;height: 50%;left: 0;padding: 16px;background-image: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 73%));color: #fff;display: flex;align-items: flex-start;justify-content: flex-end;flex-direction: column;align-content: center;} .features .text p {margin:0;font-size: 14px;max-width: 75%;margin-bottom: 8px;} .features .text span {font-weight: 800;font-size: 11px;display: inline-flex;align-content: center;text-transform: uppercase;} .features .text span:after {transition: all 0.3s ease-in-out;content:"";background: url(/layout/icons/arrow-right-solid.svg) center center no-repeat;background-size: contain;width: 18px;height: 18px;display: inline-block;margin-left: 8px;filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(353deg) brightness(118%) contrast(119%);} .features a:hover .text span:after {margin-left: 16px;} .featuresList {display:flex;border-top: 1px solid #efefef;grid-gap: 32px; display: none !important;} .featuresList .title {width:30%;text-align: left;} .featuresList .title h4 { padding:0; margin:0} .featuresList .options {column-count: 3; margin: auto; flex-grow:1} .featuresList a {width:100%;display:flex;margin: 0 0 16px 0;gap:8px;align-items: stretch;align-content: flex-start;flex-direction: row;} .featuresList a:before {content: "";width: 23px;background: url('/layout/icons/check-circle.svg');background-size: 20px;background-repeat: no-repeat;background-position: left top;} @media screen and (max-width: 1024px) { .featuresList { display:inline;} .featuresList .title { width:100%; margin-bottom:16px} .featuresList .options {column-count: 2; margin: auto; flex-grow:1} } .featuresAll {display:flex;flex-wrap: wrap;} .featuresAll > div {width: 16.66%;text-align:center;padding: 32px 0px;} .featuresAll .cta {width:100%;display:block;height: 50px;} .featuresAll .cta img {height:100%;object-fit: contain;;width: 90px;height: 40px;} .featuresAll .text {font-weight: 800;font-size:18px;margin: 16px 0;display: block;} .featuresAll p { margin:0 0 8px 0} .featuresAll a {font-weight: 800;font-size: 11px;display: inline-flex;align-content: center;text-transform: uppercase;} .featuresAll a:after {transition: all 0.3s ease-in-out;content:"";background: url(/layout/icons/arrow-right-solid.svg) center center no-repeat;background-size: contain;width: 18px;height: 18px;display: inline-block;margin-left: 8px;filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(353deg) brightness(118%) contrast(119%);} .featuresAll > div:hover a:after {margin-left: 16px;} @media screen and (max-width: 1024px) { .featuresAll > div {width:100%;} } .storeImg, .storeImg div[class*="css-image"] { height:75vh !important; position: relative; overflow: hidden} #map_canvas {height: auto !important;} .storeImg .bannerView { display: none} .markers { width: 100%; max-width: 1440px; margin: 0 auto;float: inherit;} .markers a {padding-bottom: 32px;font-size: smaller;width: 100%;display: inline-block;margin: auto;padding: 32px 32px 32px 64px;position: relative;outline: 1px solid #dfdfdf;/* margin: 8px; */background: #fff;} .mpin {background: #212121;color: #fff;width:25px;height: 25px;border-radius: 100%;margin-right: 8px;text-align: center;line-height: 25px;float: left;position: absolute;left: 16px;-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;} .mname {text-transform: uppercase;font-weight: 800;font-family: inherit !important;} /* Livewrite blog article */ .mainButtons {display: flex;flex-wrap: wrap;list-style: none !important;gap: 16px;margin-bottom: 32px;justify-content: center;} .mainButtons li {border: 1px solid #adadad;padding: 8px 16px;border-radius: 4px;} .mainButtons li {color: cornflowerblue; text-decoration: none;color: #000;} .mainButtons li a {text-decoration: none;color: inherit;} .mainButtons li:hover {background-color: #212121; color: #fff;} .mainButtons li p {margin: 0;text-transform: uppercase;font-size: 12px;letter-spacing: 0.03em;} .sgtable table { text-align: justify; border-collapse: collapse; width: 100%; padding: 0 !important; overflow: auto; -webkit-overflow-scrolling: touch; margin: 32px 0px 64px 0px;} .sgtable th, .sgtable tr, .sgtable td { padding: 10px 16px; margin: 0; border: 1px solid #e6e7f1; background: #fff} .sgtable th { color: #222; text-align: left; font-weight: bold; font-size: larger; line-height: 200%;} .sgtable table tr:last-of-type td{ border-bottom: none } .sgtable table p { margin: 0px;} .sgtable a { color: inherit;text-decoration: none;} @media screen and (max-width: 767px) { .sgtable th, .sgtable tr, .sgtable td {padding: 5px 8px !important;text-align: left;} } /* Cycle schemes additional info */ .cyclescheme-info-page .wrapper > div > div:nth-child(2) > div > div:after { content:"Please note that all Sale Bikes include a service surcharge through Cyclescheme purchases, please get in contact for further details."} /* sunday */ .sundayCover { display: inline-flex; flex-wrap: wrap; gap: 16px; justify-content: center; } .sundayCover > div {flex-basis: 310px;background: #fff;border-radius: 8px;padding: 21px;flex-grow: 1;filter: drop-shadow(0px 3px 4px #00000015);} .sundayCover img {width: 35px;background: #7b2496;padding: 8px;filter: invert(1);border-radius: 30px;} .sundayCover img.unavailable {filter: grayscale(100%) invert(1);} .sundayCover b { display:block; padding:16px} .sundayCover p { opacity:0.7} /* why Choose */ .whychoose > div {background: #383838;} .whychoose img { background:#fff} /* compare page */ #comparetgt > div > .imgCtr:before { display: none; } /* Virtual Assistance */ .overlayIMG { position:relative } .overlayIMG .fg { position: relative; z-index:1 } .overlayIMG .bg { position:absolute; width: 100%; height: 100%; left: 0; z-index:0 } .innnerwidth { max-width:400px; margin:auto; h2, p{ text-wrap:balance } } .voucherBronze { } .voucherBronze .display { background: #a1681e; border-radius: 16px; display: flex; justify-content: center; align-items: center; padding: 32px; color: #fff; flex-direction: column; gap: 16px; } .voucherBronze img { filter:invert() } .voucherBronze h2 { padding:0; margin:0; font-size: clamp(1rem, 3vw, 2.5rem); line-height: 100%; } .voucherBronze h3 { text-transform:uppercase; opacity:0.8; font-size: clamp(0.7rem, 1.5vw, 1rem); margin: 0; letter-spacing: 2px; } .voucherBronze, .voucherSundays{ background: #e7e7e7; border-radius: 16px; padding: 32px; flex-direction: column; gap: 16px; } .voucherSundays .display img { width:100%; height:100%; border-radius: 8px; object-fit: cover; } .voucherBronze, .voucherSundays { text-wrap:balance}