html  { min-height:100%; scroll-behavior: smooth; } body { background-color: #000033; font-family:'Roboto',Arial,Helvetica,sans-serif; font-size: 14px; font-weight: 400; margin:0px; min-width:320px; } h1{ font-family:'Montserrat',Arial,Helvetica,sans-serif; font-size: 1.5em; margin: 0; color: #000; text-indent: 2px; } h2{ font-family:'Montserrat',Arial,Helvetica,sans-serif; font-size: 1.2em; margin: 0; color: #000; text-indent: 2px; } .details-show { background-image: url(chevron-open-large.webp); background-position-x: 95%; background-position-y: 3px; background-repeat: no-repeat; background-size: 16px 16px; } @media screen and (min-width: 800px)  { .details-show { background-position-x: 95%; background-position-y: 5px; background-size: 14px 14px; } } h3{ font-family:'Montserrat',Arial,Helvetica,sans-serif; font-size: 1.1em; margin: 0; color: #000; text-indent: 2px; } .actrequiredcolor{ font-size: 1.4em; font-weight: bold; color: #F00; } .actrequired { color: #F00; } h4{ font-family:'Montserrat',Arial,Helvetica,sans-serif; font-size: 1em; margin: 0px; line-height:36px; color: #000; background-color:#add8e6c4; text-indent: 10px; background-image: url(cbopen.png); background-position-x: 97%; background-position-y: 13px; background-repeat: no-repeat; border-bottom:1px solid #fff; cursor:pointer; border-radius:2px; } .filter-default { display:none; } @media screen and (min-width: 800px)  { /*h4 { background-image: url(cbclose.png); line-height:30px; background-position-y: 10px; }*/ .filter-default { display:none; } } hr { background: #f57920; height: 1px; border:none; } a:link,a:visited,a:hover,a:focus,a:active { text-decoration:none; color:#000000; } a[href^=tel]{ color: #ffffff; text-decoration: none; } /* header container and styles */ #header-container { position:fixed; float:left; top:0; width:100%; background-color: #000033; color: #ffffff; height: 35px; display:flex; justify-content: center; z-index:999; } #header { height:35px; overflow: hidden; width:100%; } @media screen and (min-width: 800px)  { #header-container { height: 60px; position:relative; z-index:1; } #header { height:60px; position:relative; max-width:1480px; } } #sub-header-container { display:flex; justify-content: center; height: 32px; float:left; width:100%; background-color: #b9d9eb; color: #000000; margin-top:83px; font-family:Lato, sans-serif; text-align:center; font-size:0.85em; } #sub-header { width:100%; max-width:1480px; display:flex; justify-content: space-around; align-items: center; } .sub-header-item { display:none; } .sub-header-item-text { background-image: url(delivery-van.png); background-size:22px 11px; background-repeat: no-repeat; font-weight:bold; padding-left: 30px; } .sub-header-item-text-2 { background-image: url(shop.webp); background-size:14px 11px; background-repeat: no-repeat; font-weight:bold; padding-left: 22px; } #trustpilot-holder { width:100%; } #trustpilot-widget { width:100%; } .no-show-trustpilot { text-align:center; width:100%; height:100%; display:flex; justify-content: center; align-items: center; } .no-show-trustpilot img { object-fit:contain; width:210px; height:20px; } .no-show-trustpilot-frontpage { text-align:center; width:100%; } .no-show-trustpilot-frontpage img { object-fit:contain; width:100%; height:100%; } @media screen and (min-width: 800px)  { #sub-header-container { margin-top:0; } .sub-header-item { display:block; } #trustpilot-holder { width:300px; } .no-show-trustpilot { width:300px; } #trustpilot-widget { width:300px; } } @media screen and (min-width: 968px)  { #trustpilot-holder { width:500px; } .no-show-trustpilot { width:500px; } #trustpilot-widget { width:500px; } } #mobile-menu {     position: relative; float: left; margin: 0 auto; height: 25px; width: 29px; top: 5px; margin-left:10px; background-position:center; background-repeat: no-repeat; background-size: 100%; background-image:url(menu3.png); } #mobile-menu a { margin: 0px; display: block; width: 100%; height: 100%; } @media screen and (min-width: 800px)  { #mobile-menu {	 visibility:hidden; width:0; } } #logo{ float: left; position: relative; top: 5px; left: 15px; height: 28px; width: 107px; background-image:url(pedal-on-logo-2024.webp); background-position:center; background-repeat: no-repeat; background-size: 100%; } #logo a { margin: 0px; display: block; width: 100%; height: 100%; } @media screen and (min-width: 800px)  { #logo { height: 50px; width: 192px; background-size: 100%; } } .icon { position: relative; float: right; margin: 0 auto; height: 25px; width: 29px; top: 5px; margin-right:4px; background-position:center; background-repeat: no-repeat; background-size: 100%; } .icon a { margin: 0px; display: block; width: 100%; height: 100%; } @media screen and (min-width: 360px)  { .icon { margin-right:10px; } } @media screen and (min-width: 800px)  { .icon { top: 9px; margin-left:10px; } } #phone{background-image:url(phone2.png); } @media screen and (min-width: 800px)  { #phone {	 display:none; width:0; } } #cart {background-image:url(cart2.png); } #cartitems { position:relative; visibility:hidden; left:13px; width:20px; height:20px; font-size:0.9em; color:#ffffff; font-weight:bold; background-color: #f57920; border-radius: 50%; display: flex; justify-content: center; align-items: center; } #login { display:block; } #login img { object-fit:contain; height:100%; width:100%; } #loggedin { background-image:url(circle.png); display:none; } #logout { background-image:url(logout2.png); display:none; } #contact {background-image:url(contact-us.png); } #myaccount { display:block; } #myaccount img { object-fit:contain; height:100%; width:100%; } #telephone { visibility:hidden; background: url(phone2.png); background-repeat: no-repeat; background-size: 18px; background-position: left; padding-left: 20px; } @media screen and (min-width: 800px)  { #telephone { position:absolute; float:right; margin-right:10px; bottom:0; right:0; visibility:visible; font-weight:bold; font-size:1.2em; } } /* header container and styles end */ /* search container and styles */ input#searchsubmit {display: none;} #search-container { position:fixed; top:34px; float:left; width:100%; background-color: #000033; height: 48px; border-style: none; display:flex; justify-content: center; z-index:999; } @media screen and (min-width: 800px)  { #search-container { top:0px; position:relative; height: 1px; background-color: #000033; z-index:9999999; } } input#search-box { background-color: #ffffff; border-radius: 7px; position:relative; width: 300px; height: 28px; background-image: url(search-icon62.png); background-repeat: no-repeat; background-position: right; background-size: 28px 28px; border:none; top: 6px; font-size:1.1em; } @media screen and (min-width: 800px)  { input#search-box { background-color: #ffffff; top:-40px; background-size: 26px 26px; } }	 @media screen and (min-width: 1000px)  { input#search-box { width: 350px; } } /* search container and styles end */ /* drop down menu styles start */ #menu-container { float:left; } #drop_down_menu { position:absolute; float: left; height: 100%; width: 100%; text-align: center; font-weight: bold; font-size:1.3em; font-family:'Montserrat', Arial, Helvetica, sans-serif; color: #fff; padding: 0; margin: 0; margin-top:71px; display:none; z-index:1000; } #drop_down_menu ul { float: left; width: 100%; margin: 0; padding: 0; background-color: #000033; } #drop_down_menu ul li { float: left; width: 100%; line-height: 36px; list-style: none; text-align: left; text-indent: 10px; background-image: url(chevron-open.png); background-position-x: 97%; background-position-y: 14px; background-repeat: no-repeat; border-bottom: 1px solid #fff; } #drop_down_menu ul li a { margin: 0; display: block; width: 100%; height: 100%; } #drop_down_menu ul li a:link,#drop_down_menu ul li a:visited,#drop_down_menu ul li a:focus,#drop_down_menu ul li a:active { color: #fff; text-decoration: none; } #drop_down_menu ul li a:hover{ text-decoration: none; } #menu ul { display: none; float: left; font-size: inherit; width: 100%; height: 100%; text-align: left; } #drop_down_menu ul ul li { width: 100%; font-weight: normal; font-size: 0.9em; color: #fff; text-indent: 15px; background: #fff; border-bottom: 1px solid #ccc; } #drop_down_menu ul ul li a:link,#drop_down_menu ul ul li a:visited,#drop_down_menu ul ul li a:hover,#drop_down_menu ul ul li a:focus,#drop_down_menu ul ul li a:active  { color: #000; background-image:url('chevron-right-black.png'); background-position-x: 97%; background-position-y: 10px; background-repeat: no-repeat; } .menu_sale a:link,.menu_sale a:visited,.menu_sale a:hover,.menu_sale a:focus,.menu_sale a:active{ color: #f00 !important; font-weight: bold; } #drop_down_menu ul ul li.menu-title { background:#8c8b8b; display:block; } .placeholder { display:none; } .menu-title-text { background:#8c8b8b; color:#ffffff; width:100%; } @media screen and (min-width: 800px)  { #menu-container { width:100%; background-color: #000033; height: 32px; display:flex; justify-content: center; } #drop_down_menu { position:relative; height: 32px; max-width:1200px; z-index:999; display:block; background: #003; margin-top:0px; font-size:1em; } #drop_down_menu ul { max-width:1200px; } #drop_down_menu ul li { width:14.28%; line-height:32px; height:32px; z-index:999; position:relative; text-align: center; text-indent: 0px; background: none; border-bottom: none; font-size:0.85em; } #drop_down_menu ul li a:hover { color:#ffffff; text-decoration: none; box-shadow: inset 0 -3px 0 0 #f57920; } #drop_down_menu ul li:hover { color:#ffffff; text-decoration:none; } #drop_down_menu ul li:hover ul { display:block; } #drop_down_menu ul li a:focus { color:#ffffff; text-decoration:none; } #drop_down_menu ul li:focus { color:#ffffff; text-decoration:none; background:#0000ff; } #drop_down_menu ul li a:active { color:#ffffff; text-decoration:none; } #menu ul{ position:absolute; height:auto; left:auto; width:160px; background-color:#ffffff; } .menu-title a:link, .menu-title a:visited { background:#8c8b8b !important; color:#ffffff; } #drop_down_menu ul ul li { position:relative; text-indent:5px; font-size:0.9em; border-bottom:none; text-align:left; width:130px; font-family:'Roboto',Arial,Helvetica,sans-serif; height:28px; line-height:28px; } #drop_down_menu ul ul li a {  margin: 0px;  display: block;  width: 100%;  height: 100%; margin-left:15px; margin-right:15px; } #drop_down_menu ul ul li a:link { color:#000000; text-decoration:none; background:#fff; } #drop_down_menu ul ul li a:visited { color:#000000; text-decoration:none; background:#fff; } #drop_down_menu ul ul li a:hover { color:#000000; text-decoration:none; font-weight:bold; } #drop_down_menu ul ul li a:focus { color:#000000; text-decoration:none; background:#ffffff; } #drop_down_menu ul ul li a:active { color:#000000; text-decoration:none; background:#ffffff; } #drop_down_menu ul ul li.menu-title { width:145px; } #n01 { left:0px !important; height:271px !important; border-bottom: 1px solid #8c8b8b; border-left: 1px solid #8c8b8b; background-color:#ffffff; } #n02 { left:160px !important; height:271px !important; border-bottom: 1px solid #8c8b8b; border-right: 1px solid #8c8b8b; background-color:#ffffff; } #n11 { left:-100px !important; height:239px !important; border-bottom: 1px solid #8c8b8b; border-left: 1px solid #8c8b8b; border-right: 1px solid #8c8b8b; background:#ffffff; } #n12 { left:60px !important; height:239px !important; border-bottom: 1px solid #8c8b8b; background:#ffffff; } #n13 { left:220px !important; height:239px !important; border-right: 1px solid #8c8b8b; border-bottom: 1px solid #8c8b8b; background:#ffffff; } #n21 { left:-160px !important; height:271px !important; border-bottom: 1px solid #8c8b8b; border-left: 1px solid #8c8b8b; background:#ffffff; } #n22 { left:0px !important; height:271px !important; border-bottom: 1px solid #8c8b8b; background:#ffffff; } #n23 { left:160px !important; height:271px !important; border-right: 1px solid #8c8b8b; border-bottom: 1px solid #8c8b8b; background:#ffffff; } #n31 { height:407px !important; left:-220px !important; border-left: 1px solid #8c8b8b; border-bottom: 1px solid #8c8b8b; background:#ffffff; } #n32 { left:-60px !important; height:407px !important; border-bottom: 1px solid #8c8b8b; background:#ffffff; } #n33 { height:407px !important; left:100px !important; border-bottom: 1px solid #8c8b8b; background:#ffffff; } #n34 { height:407px !important; left:260px !important; border-bottom: 1px solid #8c8b8b; border-right: 1px solid #8c8b8b; background:#ffffff; } #n41 { left:-100px !important; height:491px !important; border-left: 1px solid #8c8b8b; border-bottom: 1px solid #8c8b8b; background:#ffffff; } #n42 { left:60px !important; height:491px !important; border-right: 1px solid #8c8b8b; border-bottom: 1px solid #8c8b8b; background:#ffffff; } #n51 { left:-200px !important; height:323px !important; border-left: 1px solid #8c8b8b; border-bottom: 1px solid #8c8b8b; background:#ffffff; } #n52 { left:-40px !important; height:323px !important; border-bottom: 1px solid #8c8b8b; background:#ffffff; } #n53 { left:120px !important; height:323px !important; border-bottom: 1px solid #8c8b8b; border-right: 1px solid #8c8b8b; background:#ffffff; } #n61 { right:0px !important; height:239px !important; border-right: 1px solid #8c8b8b; border-bottom: 1px solid #8c8b8b; border-left: 1px solid #8c8b8b; background:#ffffff; } .placeholder { display:block; } .menu-title-text { margin-left:15px; } @media screen and (min-width: 900px)  { #drop_down_menu ul li { font-size:1em; } }	 }    /*drop down menu styles end */ #bulk-container { width:calc(100% - 10px); background-color: #ffffff; color: #000000; height:100%; min-height: 600px; display:flex; justify-content: center; padding:5px; } #bulk-container a[href^=tel]{ color: #000000; text-decoration: none; } #bulk-content { width:100%; } #cart-content { width:100%; } #section-content{ width:100%; } @media screen and (min-width: 800px) { #bulk-content { max-width:1440px; } #cart-content { max-width:1024px; } #section-content { max-width:1440px; } } #sidebar { display:none; position:relative; width:100%; min-height:800px; height:calc(100% - 23px); background:#ffffff; padding:10px; box-sizing: border-box;  z-index:0; } #section-holder { float:left; height:calc(100% - 23px); width:calc(100%); } #section-results { float:left; width:100%; display: flex; flex-flow:row wrap; align-content:flex-start; } #FilterResultElements { float:left; width:100%; display: flex; flex-flow:row wrap; align-content:flex-start; } @media screen and (min-width: 800px) { #sidebar { position:relative; display: block; float:left; width:200px; min-height:800px; } #section-holder { width:calc(100% - 200px); } } .section, std-product-details { float:left; background: #f8f8f8; text-align: left; width:49.5%; box-sizing: border-box;  padding:5px; border: solid 3px #ffffff; border-radius:8px; } @media screen and (min-width: 551px) { .section { width:33.2%; } } @media screen and (min-width: 840px) { .section { width:24.9%; } } @media screen and (min-width: 1040px) { .section { width:19.9%; } } .section-image { width:100%; height:auto; text-align: center; position:relative; } .section-image img { height:100%; width:100%; max-width: 220px; object-fit:contain; border-radius:5px; } .section-instock { padding:1px 3px 1px 3px; background-color:#07ad19; color: #ffffff; font-weight: bold; font-size:0.9em; font-family:'Montserrat',Arial,Helvetica,sans-serif; justify-content: center; align-items: center; border-radius: 5px; margin-right:3px; border-style:solid; border-width:1px; border-color: #07ad19; } .section-available { padding:1px 3px 1px 3px; background-color:#ffffff; color: #07ad19; font-weight: bold; font-size:0.9em; font-family:'Montserrat',Arial,Helvetica,sans-serif; justify-content: center; align-items: center; border-radius: 5px; border-style:solid; border-width:1px; border-color: #07ad19; margin-right:3px; } .section-nostock { padding:1px 3px 1px 3px; background-color:rgba(131, 131, 131, 1); color: #ffffff; font-weight: bold; font-size:0.9em; font-family:'Montserrat',Arial,Helvetica,sans-serif; justify-content: center; align-items: center; border-radius: 5px; } .sale-tag { border: 0; position: absolute; left: 0; top: 15px; padding:3px 6px 3px 6px; background-color:rgba(255, 0, 0, 0.8); color: #ffffff; font-weight: bold; font-size: 0.8em; font-family:'Montserrat',Arial,Helvetica,sans-serif; justify-content: center; align-items: center; border-radius: 5px; } .new-tag { border: 0; position: absolute; left: 0; top: 15px; padding:3px 6px 3px 6px; background-color:#07ad19; color: #ffffff; font-weight: bold; font-size: 0.8em; font-family:'Montserrat',Arial,Helvetica,sans-serif; justify-content: center; align-items: center; border-radius: 5px; } .pp-tag{ visibility:hidden; border: 0; position: absolute; right: 0; top: 15px; padding:3px 6px 3px 6px; min-width:24px; background-color:rgba(255, 215, 0, 0.8); color: #000000; font-weight: bold; font-size: 0.8em; font-family:'Montserrat',Arial,Helvetica,sans-serif; justify-content: center; align-items: center; border-radius: 5px; } .section-pps { display:inline-block; border: 0; padding:1px 5px 1px 5px; background-color:rgba(255, 215, 0, 0.8); color: #000000; font-size:0.9em; font-family:'Montserrat',Arial,Helvetica,sans-serif; border-radius: 5px; } .sale-tag-copy { border: 0; position: absolute; left: 0; top: 15px; height: 34px; width: 34px; background: #ff0000; color: #ffffff; font-weight: bold; font-size: 0.8em; font-family:'Roboto',Arial,Helvetica,sans-serif; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .new-tag-copy { border: 0; position: absolute; left: 0; top: 15px; height: 34px; width: 34px; background:#00cc33; color: #ffffff; font-weight: bold; font-size: 0.8em; font-family:'Roboto',Arial,Helvetica,sans-serif; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .pp-tag-copy { border: 0; position: absolute; right: 0; top: 15px; height: 34px; width: 34px; background:#FFD700; color: #000000; font-weight: bold; font-size: 0.8em; font-family:'Roboto',Arial,Helvetica,sans-serif; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .section-name { font-family:'Montserrat',Arial,Helvetica,sans-serif; font-size: 0.9em; font-weight: bold; height:32px; overflow:hidden; } .section-price { font-family:'Montserrat',Arial,Helvetica,sans-serif; font-size: 0.9em; font-weight: bold; } .section-offer { font-size: 0.9em; margin-top:3px; } .section-options { font-size: 0.9em; min-height:30px; margin-top:3px; } #show-filters { float:left; width:100%; height:34px; color:#ffffff; font-weight:bold; font-size:1.1em; background-color: #f57920; text-align:center;  box-sizing: border-box;  padding:3px; margin-bottom:5px; border-radius: 5px; display: flex; justify-content: center; align-items: center; } #hide-filters { display: flex; justify-content: center; align-items: center; float:left; width:100%; height:34px; color:#ffffff; font-weight:bold; font-size:1.1em; background-color: #f57920; text-align:center;  box-sizing: border-box;  padding:3px; margin-bottom:5px; border-radius: 5px; } #apply-search-filters { width:100%; height:34px; color:#ffffff; font-weight:bold; font-size:1.1em; font-family:inherit; background-color: #ccc; text-align:center;  box-sizing: border-box;  padding:3px; margin-bottom:5px; border-color:#ccc; border-style:solid; border-radius: 5px; cursor:pointer; display: flex; justify-content: center; align-items: center; } @media screen and (min-width: 800px) { #show-filters { display:none; height:28px; } #hide-filters { display:none; height:28px; } } .filter-by{ display: flex; justify-content: center; align-items: center; float:left; width: 100%; height:34px; color:#000000; font-weight:bold; font-size:1.1em; background-color: #ffffff; text-align:center;  box-sizing: border-box;  padding:3px; margin-bottom:5px; border-style: solid; border-color: #f57920; border-width: 2px; border-radius: 5px; cursor:pointer; } #return-to-results{ display: flex; justify-content: center; align-items: center; width: 100%; height:32px; color:#000000; font-weight:bold; font-size:1.1em; background-color: #ffffff; text-align:center;  box-sizing: border-box;  padding:3px; margin-bottom:5px; border-style: solid; border-color: #f57920; border-width: 2px; border-radius: 5px; cursor:pointer; } #clear-filters { display: flex; justify-content: center; align-items: center; width: 100%; height:32px; color:#000000; font-weight:bold; font-size:1.1em; background-color: #ffffff; text-align:center;  box-sizing: border-box;  padding:3px; margin-bottom:5px; border-style: solid; border-color: #f57920; border-width: 2px; border-radius: 5px; cursor:pointer; } #clear-filters-2 { display: flex; justify-content: center; align-items: center; width: 100%; height:32px; color:#000000; font-weight:bold; font-size:1.1em; background-color: #ffffff; text-align:center;  box-sizing: border-box;  padding:3px; margin-bottom:5px; border-style: solid; border-color: #f57920; border-width: 2px; border-radius: 5px; cursor:pointer; } @media screen and (min-width: 800px) { #return-to-results{ display:none; height:28px; } #clear-filters-2 { display: none; } .filter-by, #apply-search-filters { height:28px; } } /* start filter loading dialog */ .loading-block	{ display: table; height: 100%; width: 100%; overflow: hidden; margin-left: 50%; z-index: 2147483638; } .loading-gif { display: table-cell; vertical-align: middle; } .loading-shadow { display: none; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-repeat: repeat; opacity:0.9; } /* end filter loading dialog */ /* start auto suggestion list */ .sf_suggestion { position: absolute; line-height: 15px; z-index: 2147483637; } .sf_suggestion ul { margin: 1px; padding: 0px; background: #ffffff;  border: 1px solid rgb(51, 51, 51); top: 0; left: 0; } .sf_suggestion li{ margin: 0px; padding: 0px; list-style: none; } .sf_suggestion li a { display: block; text-indent: 5px; text-align: left; padding: 5px; text-decoration: none; } .sf_suggestion li.selected a { background: #cccccc; color: #000000; font-weight: normal; } .sf_suggestion li.notselected a{ color: #000000; font-weight: normal; } /* end auto suggestion list */ .search-show { line-height:24px; } .next, .previous, .current { color:#ffffff; padding-left:3px; padding-right:3px; padding-top:1px; padding-bottom:1px; background-color:#036b8d; border-radius:2px; } .sort_by { background-color: #ffffff; width: 100%; height: 24px; text-align: right; } .sort_by_left { width: 50%; height: 24px; color: #000000; text-align: left; float:left; }	 .sort_by_right { width: 50%; height: 24px; color: #000000; text-align: right; float:left; } .sort_labels { display:inline-block; color: #000 !important; }	 @media screen and (min-width: 520px) { .sort_labels { display:inline-block; }	 }  select { // Additional resets for further consistency background-color: transparent; padding: 0 1em 0 0; margin: 0; font-family: inherit; font-size: inherit; cursor: inherit; line-height: inherit; border:2px solid #add8e6c4;  -webkit-border-radius: 5px; border-radius: 5px;  } /* footer styles */ #footer-container { float:left; width:100%; background-color: #000033; color: #ffffff; height: 100%; display:flex; justify-content: center; } #footer-container li a { margin: 0px; display: block; width: 100%; height: 100%; } #footer-container li a:link,#footer-container li a:visited,#footer-container li a:focus,#footer-container li a:active { color:#ffffff; text-decoration:none; } #footer-container li a:hover { color:#ffffff; text-decoration:underline; } ul.footer-address { list-style-type: none; font-size:0.9em; padding: 0;  margin: 0;  color:#ffffff; } ul.footer-info-list { list-style-image:url(circle-marker.png); font-size:0.9em; padding: 0;  margin-left: 10px;  margin-top:3px; line-height:1.6em; } .footer-info-list li::marker { color: #f57920; } .footer-info-title {	 font-weight: bold; margin-left: 0px; color:#ffffff; } #footer-content { display:flex; justify-content: space-around; flex-wrap: wrap; gap: 10px; padding-top:10px; width:100%; } @media screen and (min-width: 800px) { #footer-content { max-width:1440px; } }  #payment-logos { float:left; width:100%; display:flex; justify-content: center; align-items:center; padding-top:10px; } .pay-logo { width:25%; text-align:center; } .pay-logo img { max-width:40px; object-fit:contain; } /* footer styles end */ /* product styles start */ #breadcrumb { width:100%; text-align: left; font-size: 0.75em; color: #3A3A3A; text-indent: 2px; padding-bottom: 5px; padding-top: 5px; } #breadcrumb a:link, a:visited, a:focus, a:active { color: #3A3A3A; text-decoration: none; } #product-upper { max-width:100%; } #product-upper-left { float:left; width:100%; height:auto; } #product-upper-left img { object-fit:contain; width:100%; height:100%; } #product-image { position:relative; padding-right:10px; } .tag-pp { position: absolute; left: 4%; top: 5%; width:20%; height:26%;	 } .tag-pp img { object-fit:contain; width:100%; height:100%; } .tag-sale-copy { position: absolute; left: 4%; top: 7%; width:15%; height:20%;	 } .tag-sale-copy img { object-fit:contain; width:100%; height:100%; } .tag-sale { position:absolute; top:4%; left:2%; padding:4px 8px 4px 8px; background-color:rgba(255, 0, 0, 0.8); font-size:4vw; font-weight:bold; color:#ffffff; font-family:'Montserrat',Arial,Helvetica,sans-serif; display:flex; align-items:center; border-radius: 5px; } @media screen and (min-width: 800px) { .tag-sale { font-size:2.5vw; } } /* zoom image start */ .enlarge-image{ position: absolute; right:5%; top: 5%; line-height: 10px; text-align: center; vertical-align: bottom; font-weight: bold; font-size: 0.8em; } .enlarge-image img{ height:12px !important; width:12px !important; }	 body.ImageOverlayActive div.ImageOverlay { z-index: 9999; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.7); transition: opacity 100ms; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } .white_content { display: none; position: absolute; top: 100px; width:90%; left:5%; height:auto; border: 3px solid #add8e6c4; border-radius:5px; background-color: white; z-index: 10000; overflow: auto; text-align: center; } .white_content img { height:100%; width:100%; max-width:100%; object-fit:contain; } .close-image { background: transparent; position: absolute; top: 5%; right: 5%; color: #000000; text-align: center; font-weight: bold; font-size: 1.2em; } .close-image img{ width: 20px; height: 20px; } .MenuOverlay { z-index: 1; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.7); transition: opacity 100ms; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } @media screen and (min-width: 800px) { .enlarge-image img{ height:20px !important; width:20px !important; } .close-image img{ width: 40px; height: 40px; }	 } /* zoom image end */ #product-upper-right { float:left; width:100%; } .price{ font-family:'Montserrat',Arial,Helvetica,sans-serif; font-weight:bold; } ul.usplist  { padding-left: 0; margin-left:0; padding-inline-start:0; } .usplist li { background: url(omarker.png) no-repeat 0 8px; padding-left: 12px; line-height: 24px; list-style: none; text-align: left; text-indent: 0; } /* ul.usplist  li:after { content: url('chevron-right.png'); margin-left:6px; width: 20px; height: auto; display: inline-block; } */ .usp{ font-family:'Montserrat',Arial,Helvetica,sans-serif; font-weight:bold; } .usp-pp{ width: calc(100% - 24px); padding-top:4px; padding-bottom:4px; padding-left:12px; padding-right:12px; background-color:#FFD700; border-radius: 5px; } .sad-warning{ width: calc(100% - 24px); padding-top:4px; padding-bottom:4px; padding-left:12px; padding-right:12px; border-color:#FF0000; border-style:solid; border-width: 2px; border-radius: 5px; } .novunasmall { height:14px; width:60px; } .sale{ color: #f57920; } .more { font-style:italic; font-size:0.9em; } #description{ float:left; width:100%; } #description, #specification, #sizing, #geometry, #cycle-to-work, #finance-payments { height:40px; overflow:hidden; } .player{ width: calc(100% - 20px); aspect-ratio: 5 / 3; padding: 0px; margin-left: 10px; margin-right: 10px; margin-top: 5px; margin-bottom: 5px; } .no-show-video { width: calc(100% - 6px); padding-top:3px; padding-bottom:3px; padding-left:3px; padding-right:3px; background-color:#21baec; border-radius: 5px; font-size:1.2em; text-align:center; margin-top:10px; } .video-container { max-width:800px; margin : 0 auto; } @media screen and (min-width: 800px) { .video-wrapper { float:right; width:50%; max-width:600px; } .no-show-video { height:50px; } } @media screen and (min-width: 800px) { #product-upper-left { width:calc(100% - 500px); } #product-upper-right { width:500px; min-width: 50px; } } @media screen and (min-width: 1250px) { #product-upper-left { width:calc(100% - 550px); } #product-upper-right { width:550px; min-width: 50px; } } #specification{ float:left; width:100%; } #warranty{ float:left; width:100%; } #sizing{ float:left; width:100%; } #sizing-content-container { display:flex; flex-wrap:wrap; justify-content:space-around; } #sizing-table { } #acc-sizing-table { overflow-x:auto; display:flex; justify-content:left; } @media screen and (min-width: 800px) { #acc-sizing-table { overflow-x:auto; display:flex; justify-content:center; } } #sizing-info{ margin-top:16px; } #geometry{ float:left; width:100%; } #geometry-content-container { display:flex; flex-wrap:wrap; justify-content:space-around; } #geometry-table { } #geometry-info{ display:flex; justify-content:space-around; } #geometry-info img { object-fit:contain; height:100%; width:100%; } #geometry-image { max-width:500px; } @media screen and (min-width: 800px) { #sizing-table { } #sizing-info{ max-width:50%; margin-top:0; } #geometry-table { } #geometry-info{ }	 } #cycle-to-work { float:left; width:100%; scroll-margin-top:109px; } #finance-payments{ float:left; width:100%; scroll-margin-top:109px; } @media screen and (min-width: 800px) { #cycle-to-work { scroll-margin-top:0px;  } #finance-payments { scroll-margin-top:0px;  } } #cycletowork-logos { float:left; width:100%; display:flex; justify-content: center; align-items:center; } .c2w-logo { width:14.2%; text-align:center; } #cycletowork-logos img { max-width:80%; object-fit:contain; } .our-ref { margin-right:10px; } .variant-name { font-weight:bold; margin-right:10px; } .upc { margin-right:10px; } .image2 { float:left; width:100%; display:flex; justify-content:center; } .image2 img { object-fit: contain; width: 100%; height: 100%; max-width:600px; border-radius:5px; } .tghr { display: table-row; } .tgh1 { font-weight: normal; font-size: 0.7em; text-align: left; width: 12.5%; display: table-cell; } .tgh2 { font-weight: normal; font-size: 0.7em; text-align: left; width: 50%; display: table-cell; } /* product styles end */ /*finance styles start*/ p.finance-smallprint { font-size:0.75em; font-style:italic; } #finance-intro{ width:100%; float: left; } #finance-logo { width:100%; float: left; display:flex; justify-content: center; margin-top:10px; } #finance-logo img { object-fit:contain; height:100%; width:100%; border-radius:5px; } #finance-examples-container { width: 100%; } #finance-examples { width: 95%; overflow-x:auto; } @media screen and (min-width: 400px) { #finance-logo { margin-right:10px; } #finance-examples-container { display:flex; justify-content:center; } } @media screen and (min-width: 800px) { #finance-intro{ width:70%; } #finance-logo { width:calc(30% - 10px); max-width:300px; } #finance-logo img { object-fit:contain; height:100%; width:100%; } } /*finance styles end*/ /*product attributes start*/ .product-options-container { width:100%; float:left; } .product-options { float: left; width:100%; min-width: 310px; max-width: 700px; margin-bottom:15px; } @media screen and (min-width: 800px) { .product-options { width:100%; } } .attribute-list { display:flex; flex-wrap: wrap; padding:0; border-style: solid; border-width: 1px; border-color: #2873b3; border-radius: 7px; width:100%; } .attribute-list-single-product { display:flex; flex-wrap: wrap; padding:0; width:100%; } .option-size { width:30%; box-sizing: border-box; flex-grow: 1; padding: 0.3em 1.2em; overflow: hidden; list-style: none; } .option-size-title { width:30%; box-sizing: border-box; flex-grow: 1; padding: 0.3em 1.2em; overflow: hidden; list-style: none; color:#ffffff; background: #2873b3; -moz-border-top-left-radius: 6px; border-top-left-radius: 6px; font-size:1em; } .option-title { width:70%; box-sizing: border-box; flex-grow: 1; padding: 0.3em 1.2em; overflow: hidden; list-style: none; color:#ffffff; background: #2873b3; -moz-border-top-right-radius: 6px; border-top-right-radius: 6px; font-size:1em; } .option-title-accessory { width:70%; box-sizing: border-box; flex-grow: 1; padding: 0.3em 1.2em; overflow: hidden; list-style: none; color:#ffffff; background: #2873b3; -moz-border-top-right-radius: 6px; border-top-right-radius: 6px; font-size:1em; } .option-title-accessory-single { width:70%; box-sizing: border-box; flex-grow: 1; padding: 0.3em 1.2em; overflow: hidden; list-style: none; color:#ffffff; background: #2873b3; -moz-border-top-left-radius: 6px; border-top-left-radius: 6px; -moz-border-top-right-radius: 6px; border-top-right-radius: 6px; } .title { float: left; display: block; width: 50%;} .size-title { float: left; display: block; width: 50%;}     .instore, .instore-title { float: left; display: block; width: 55%;}    .delivery, .delivery-title { float: left; display: block; width: 45%;}   .in-stock { float: left; display: block; width: 45%;}      .in-stock,.delivery,.instore { font-size:0.9em; } @media screen and (min-width: 800px) { .in-stock,.delivery,.instore { font-size:1em; } }     .ActinicRTS { width:70%; box-sizing: border-box; flex-grow: 1; padding: 0.3em 1.2em; overflow: hidden; list-style: none; } .add-to-cart-holder { clear: left; padding-top: 15px; } fieldset.quantity-box, fieldset.product-prompt { border: 0; top:-9px; position: relative; float: left; } @media screen and (min-width: 800px) { fieldset.quantity-box, fieldset.product-prompt { border: 0; top:-5px; position: relative; float: left; } } } fieldset.quantity-box input[type="number"] { height: 1.6em; margin-top: 0.7em; width: 33px; float: left; top: -8px; position: relative; -moz-appearance: textfield; } .form_input_general	{ height: 1.6em; float: left; top: 5px; position: relative; -moz-appearance: textfield; } fieldset.quantity-box button.quantityButton { display: block; float:left; position: relative; width: 28px; height: 28px; margin: 0.3em 0.5em; border: none; border-radius:5px; background-color:#f57920; font-size:1em; font-weight: bold; color:#ffffff; text-align:center; padding:0; } fieldset.quantity-box button.quantityButton:hover{ background-color:#f54920; transition: 0.15s; } fieldset.quantity-box button.quantityButton:active{ background-color:#f54920; transition: 0.15s; } #pp-component { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #FFD700; width: calc(100% - 18px); padding-left: 18px; font-weight:bold;		 height:30px; } /*product attributes end*/ /*product tables start*/ table.components, table.sizing-table, table.geometry, table.warranty-table, table.opening-times { border-spacing:0; } table.finance,table.shipping-table { font-size:0.8em; border-collapse: collapse; margin: auto;  } table.finance td { border: 1px solid; border-color:#7d3cff; border-collapse: collapse; } table.shipping-table td { border: 1px solid; border-color:#2873b3; border-collapse: collapse; } table.warranty-table td { border: 1px solid; border-color:#7d3cff; border-collapse: collapse; } table.opening-times td { border:0; } table.opening-times td.weekday { font-weight:bold; padding-right:10px; } table.components tr:nth-child(odd),table.sizing-table tr:nth-child(odd),table.geometry tr:nth-child(odd)  { background-color: #add8e6c4; } table.components td { padding:4px; margin-right:4px; } table.components td.component-title { font-weight:bold; } table.sizing-table td,table.geometry td { padding:4px; margin-right:8px; } table.sizing-table td.bicycle-size-table-size { font-weight:bold; } table.sizing-table td.acc-size-table-size { font-weight:bold; } table.warranty-table td.warranty-title { font-weight:bold; padding:4px; } table.geometry td.geoheader { font-weight:bold; } table.finance td.payment-header { font-weight:bold; padding:4px; background-color:#c8b2f3; color:#000000; } table.finance td.payment-data { text-align:center; } table.shipping-table td.shipping-table-header, table.shipping-table td.shipping-table-left { font-weight:bold; padding:4px; background-color:#2873b3; color:#ffffff; } table.shipping-table td.shipping-table-data, table.shipping-table td.shipping-table-header { text-align:center; } /*product tables end*/ /*checkout tables start*/ input[type="number"] { width:25px; } table.checkout, table.checkout-cart { width:100%; max-width:1000px; table-layout:fixed; color:#000000; border-collapse:collapse; } table.checkout-cart { font-size:0.7em; } table.checkout { font-size:0.8em; } @media screen and (min-width: 450px) { table.checkout-cart { font-size:0.8em; } } @media screen and (min-width: 800px) { table.checkout-cart, table.checkout { font-size:0.9em; } } table.checkout th { font-weight:bold; padding:4px; background-color:#2873b3; color:#ffffff; text-align:left; } table.checkout-cart th { font-weight: bold; background-color: #fff; border-top: solid 1px #2873b3; border-bottom: solid 1px #2873b3; padding: 4px; } .mobileHeader  { display: none; } .cart { background-color: #ffffff; border-bottom: solid 1px #2873b3; } .cartheading { background-color: #2873b3; font-weight: bold; color: #ffffff; } .checkout-field-input  { width: auto; } #podium-point-warnings { background-color: #FFD700; font-size: 0.9em; padding: 10px; border-radius:5px; max-width:980px; margin-bottom:6px; } #checkout-warnings { background-color: #FFFFFF; font-size: 0.9em; padding: 10px; border-radius:5px; max-width:974px; border-radius: 5px; border: 3px solid #ff0000; margin-bottom:6px; } #collect-instore-warnings, #podium-point-order-warnings, #podium-point-over-warnings { background-color: #FFFFFF; padding: 10px; border-radius: 5px; border: 3px solid #ff0000; max-width:974px; margin-bottom:6px; } #idPSPinput500  {  height:26px; overflow:hidden; }  .collection-cart { border-radius: 5px; border: 3px solid #ff0000; padding: 10px; } .novuna-cart { border-radius: 5px; border: 3px solid #7d3cff; padding: 10px; } .gci-cart { border-radius: 5px; border: 3px solid #428b3c; padding: 10px; } .cyclescheme-cart { border-radius: 5px; border: 3px solid #1c355e; padding: 10px; } .finance-small { font-size:0.7em; } table#saddleheight.checkout { display:none; } .saddleheight { max-width:400px; } .saddleheight img{ object-fit: contain; width: 100%; height: 100%; } table.checkout th.change  { padding: 0 0; text-align: right; } .checkout-change-button	{ line-height: 13px; height: 20px; width: 86px; margin: 0px 1px 0px 0px; padding: 0px 0px 0px 0px; background-color: #f57920; border-radius:5px; color: #ffffff; font-weight:bold; word-spacing: normal; } .paymentoption { height:24px; } .cart-buttons, .checkout-buttons { display: flex;  flex-wrap: nowrap; justify-content: space-between; float:left; width:100%; } /*checkout tables end*/ /*front page start*/ .front-page-banner { position:relative; float:left; width:calc(100% - 10px); border-style:solid; border-color:#ffffff; border-width:5px; } .front-page-fragment { position:relative; float:left; width:calc(100% - 10px); border-style:solid; border-color:#ffffff; border-width:5px; } .front-page-fragment-title-banner { position:absolute; top:70%; width:88%; height:20%; left:0; background-color:rgba(0, 0, 0, 0.6); font-size:5.6vw; font-weight:bold; color:#ffffff; text-indent:20px; font-family:'Montserrat',Arial,Helvetica,sans-serif; display:flex; align-items:center; } .front-page-fragment-title { position:absolute; top:70%; width:88%; height:20%; left:0; background-color:rgba(0, 0, 0, 0.6); font-size:5.6vw; font-weight:bold; color:#ffffff; text-indent:20px; font-family:'Montserrat',Arial,Helvetica,sans-serif; display:flex; align-items:center; } .front-page-fragment-title-sale { position:absolute; top:70%; width:88%; height:20%; left:0; background-color:rgba(255, 0, 0, 0.8); font-size:5.6vw; font-weight:bold; color:#ffffff; text-indent:20px; font-family:'Montserrat',Arial,Helvetica,sans-serif; display:flex; align-items:center; } .front-page-fragment-text, .front-page-fragment-text-banner { position:absolute; top:10%; right:4%; padding:3px 6px 3px 6px; background-color:rgba(0, 0, 0, 0.6); font-size:4.2vw; font-weight:bold; color:#ffffff; font-family:'Montserrat',Arial,Helvetica,sans-serif; display:flex; align-items:center; border-radius: 5px; } .front-page-fragment-text-new, .front-page-fragment-text-new-banner { position:absolute; top:10%; right:4%; padding:3px 6px 3px 6px; background-color:rgba(7, 173, 25, 1); font-size:4.2vw; font-weight:bold; color:#ffffff; font-family:'Montserrat',Arial,Helvetica,sans-serif; display:flex; align-items:center; border-radius: 5px; } .front-page-fragment-text-sale, .front-page-fragment-text-sale-banner { position:absolute; top:10%; right:4%; padding:3px 6px 3px 6px; background-color:rgba(255, 0, 0, 0.8); font-size:4.2vw; font-weight:bold; color:#ffffff; font-family:'Montserrat',Arial,Helvetica,sans-serif; display:flex; align-items:center; border-radius: 5px; } .front-page-trustpilot { position:absolute; width:100%; height:100%; top:10px; z-index:1; } @media screen and (min-width: 500px) { .front-page-fragment { width:calc(50% - 20px); border-width:10px; } .front-page-banner { width:calc(100% - 20px); border-width:10px; } .front-page-fragment-title, .front-page-fragment-title-sale { font-size:2.8vw; } .front-page-fragment-title-banner  { width:100%; } .front-page-fragment-text, .front-page-fragment-text-new, .front-page-fragment-text-sale { font-size:2.1vw; } .front-page-fragment-text-sale-banner,.front-page-fragment-text-new-banner,.front-page-fragment-text-banner { border-radius:8px; } } @media screen and (min-width: 800px) { .front-page-fragment { width:calc(33.3% - 20px); } .front-page-fragment-title, .front-page-fragment-title-sale { font-size:1.85vw; } .front-page-fragment-text, .front-page-fragment-text-new, .front-page-fragment-text-sale { font-size:1.4vw; } .front-page-fragment-text-sale-banner,.front-page-fragment-text-new-banner,.front-page-fragment-text-banner { border-radius:12px; } .front-page-fragment-title-banner { text-indent:30px; } } @media screen and (min-width: 1200px) { .front-page-fragment { width:calc(25% - 20px); } .front-page-fragment-title, .front-page-fragment-title-sale { font-size:1.45vw; } .front-page-fragment-text, .front-page-fragment-text-new, .front-page-fragment-text-sale { font-size:1.1vw; } .front-page-fragment-text-sale-banner,.front-page-fragment-text-new-banner,.front-page-fragment-text-banner { border-radius:15px; } .front-page-fragment-title-banner { text-indent:40px; } } @media screen and (min-width: 1440px) { .front-page-fragment-title-banner { font-size:80px; } .front-page-fragment-text-banner, .front-page-fragment-text-new-banner, .front-page-fragment-text-sale-banner { font-size:60px; } .front-page-fragment-title, .front-page-fragment-title-sale { font-size:21px; } .front-page-fragment-text, .front-page-fragment-text-new, .front-page-fragment-text-sale { font-size:16px; } } .front-page-fragment img { height: 100%; width: 100%; object-fit: contain; border-radius: 8px; } .front-page-banner img { height: 100%; width: 100%; object-fit: contain; border-radius: 8px; } /*front page end*/ /*fragments start*/ .podium-point-example-right, .podium-point-example-left,.podium-point-example-container { float:left; width:100%; } .example-pp { width: calc(100% - 48px); padding-top: 2px; padding-bottom: 2px; margin-left:12px; padding-left: 12px; padding-right: 12px; background-color: #FFD700; border-radius: 5px; text-align: center; } @media screen and (min-width: 800px) { .podium-point-example-right, .podium-point-example-left { float:left; width:50%; } } .brochure-fragment-podium-points { width:calc(100% - 50px); float: left; border-style:solid; border-radius:10px; border-color:#FFD700; border-width:5px; padding: 20px; margin-bottom:20px; } .brochure-fragment { width:100%; float: left; } .fragment-image-right { width:100%; float: left; } .fragment-right-directions { width:100%; float: left; } .fragment-image-right img { object-fit:contain; width:100%; height:100%; border-radius:5px; } .fragment-image-left { width:100%; float: left; } .fragment-image-left img { object-fit:contain; width:100%; height:100%; border-radius:5px; } .fragment-text-left { width:100%; float: left; } .fragment-text-left { width:100%; float: left; } @media screen and (min-width: 800px) { .fragment-image-right { width:30%; float: right; max-width:600px; } .fragment-right-directions { width:50%; float: right; } .fragment-image-left { width:30%; float: left; max-width:600px; } .fragment-text-left { width:100%; float: left; } .fragment-text-right { width:100%; float: left; } .fragment-image-right img { object-fit:contain; width:calc(100% - 10px); height:calc(100% - 10px); padding:5px; border-radius:10px; } .fragment-image-left img { object-fit:contain; width:calc(100% - 10px); height:calc(100% - 10px); padding:5px; border-radius:10px; } } .brochure-fragment-team { float:left; width:100%; } @media screen and (min-width: 800px) { .brochure-fragment-team { float:left; width:50%; } } .fragment-image-team { float:left; width:calc(100% - 20px); position:relative; border:10px; } .fragment-image-team img { object-fit:contain; height:100%; width:100%; border-radius:5px; } .fragment-text-team { position:absolute; left:0; top:5px; width:200px; height:20px; text-indent:5px; text-align:left; color:#ffffff; background-color:#f57920; display: flex; align-items: center; font-weight:bold; } /*fragments end*/ /* buttons start */ .action-button, .action-button-large{ float:left; font-size: 1em; font-weight:bold; border-radius: 5px; color: #ffffff; background: #f57920; display:inline-block; height: 28px; border: none; text-align:center; padding:0; } .action-button { width: 100px; } .action-button-large { width: 180px; } @media screen and (min-width: 800px) { .action-button, .action-button-large{ width: 180px; margin: 0.3em 0.5em; } } .action-button:hover, .action-button-large:hover { background-color:#f54920; transition: 0.15s; } .action-button:active, .action-button-large:active { background-color:#f54920; transition: 0.15s; }   /* buttons end*/ 