/* BIKE SHOP STYLESHEET 2021 */

body {
	font-family: 'Open Sans', sans-serif;
}
h1,h2,h3,h4,h5,h6 {
	font-family: 'Ubuntu', sans-serif;
	font-weight: 700;
}
#productform {
	margin: 3rem 0;
}
.grid-container {
	max-width: 80rem;
}
.mainlogo {
	max-height: 150px;
	margin: 1rem 0;
}
.topbar {
	padding: .2rem 0;
	background-color: #47a0cf;
}
.red {
	background-color: #ce1314;
}
.red:hover {
	background-color: #6b090a;
}
.button {
	/* background-color: #ce1314; */
	background-color: #47a0cf;
}
.button:hover {
	background-color: #6b090a;
}
.nomargin {
	margin: 0;
	padding: 0;
}
.header {
	padding: 0;
}
.greytxt {
	color: #a5a5a5;
}
.dgreytxt {
	color: #333;
}
.whitetxt {
	color: white;
}
a.whitetxt:hover {
	color: white;
}
.strong {
	font-weight: 700;
}
.dropdown.menu.vertical > li.opens-right > .is-dropdown-submenu {
	width: 300px;
}
.navbar {
	padding: 0;
	background-color: #333;
}
.footer {
	margin-top: 2rem;
	padding: 6rem 0;
	background-color: #333;
	color: white;
	font-size: .8rem;
}
.footer h3 {
	color: whitesmoke;
	margin-top: 0;
	padding-top: 0;
}
#newnavbar {
  list-style-type: none;
}
#newnavbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: white;
  list-style-type: none;
}
#newnavbar ul > li a {
  color: white;
}
#newnavbar li {
  float: left;
}
#newnavbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
#newnavbar li a:hover {
  color: #45faff;
}

.f-dropdown.mega {
	margin: 0 0px 0 15px;
	width: 97.5% !important;
    max-width: 97.5% !important;
}
.megamenubox {
	background: white;
	padding-bottom: 2rem;
	padding-top: 1rem;
}
.megamenucolumn {
	line-height: 1rem;
}
.megamenucolumn img {
	border-radius:1rem;
}
.megamenucolumn a {
	color: #333;
	line-height: 1.4rem;
}
.megamenucolumn a:hover {
	color: #008CBA;
}
.megamenubox {
	display: none;
}
.mega:hover {
	/*background: url('/images/whitearrow.png') no-repeat center bottom;*/
}
.breadcrumbs {
	margin: 0;
	color: #333;
}

.breadcrumbs a {
	color: #333;
}
.catproductbox {
	padding: 1rem;
	min-height: 300px;
	margin: .5rem 0;
	position: relative;
}
.catlogo {
	position: absolute;
	z-index: 999;
	top: .5rem;
	right: .5rem;
	width: 100px;
	padding: .2rem;
	background: white;
	border-radius: .5rem;
}
.greylink {
	color: #333;
}
.catprodtitle {
	border-top: 1px solid #333;
	font-weight: 700;
	margin-top: .3rem;
	padding: .2rem;
	font-size: .8rem;
}
.catprodprice {
	font-size: .8rem;
	font-weight: 700;
	padding: 0 .2rem;
	float: right;
}
.catprodsaleprice {
	font-size: .8rem;
	font-weight: 700;
	margin-bottom: .3rem;
	padding: .2rem;
	float: right;
	color: #ce1314;
}
.reduced {
	padding: .2rem 3rem;
	background: #ce1314;
	color: white;
	text-align: center;
	font-weight: 700;
	z-index: 999;
	position: absolute;
	bottom: 40%;
	left: 0;
}
.pagination {
	margin-top: 1rem;
}
.megamenubox {
	padding: 2rem;
	 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	z-index: 999999;
	position: absolute;

	width: 97.5% !important;
    max-width: 97.5% !important;
}
.megamenubox a {
	color: #333;
	font-size: .9rem;
}
.descriptiontxt {
	font-size: .9rem;
}
.pricebox {
	background: #333;
	padding: .5rem;
}
.greybutton {
	background: #333;
	font-weight: 700;
	color: white;
}
.greybutton:hover {
	background: #707070;
	font-weight: 700;
	color: white;
}
.shopfunctiontext {
	font-weight: 700;
	font-size: .8rem;
	line-height: 2rem;
	color: black;
	margin-left: 2rem;
}
.filterbox {
	clear: both;
	padding-top: 1rem;
}
.filtersubbox {
	max-height: 300px;
	overflow-x: hidden;
	overflow-y: auto;
}
.pagination .current {
	background: #ce1314;
}
.filtercheckbox {
	float: left;
}
.filterlabel {
	float: left;
	text-align: left;
	padding-left: .5rem;
}
.filterlabel label {
	font-size: .8rem;
}
.floatclear {
	clear: both;
}
.brandlogoProduct {
	width: 150px;
}
.navbarbrands {
	padding: .3rem;
}
#headbasket {
    /* Normal background div state */
    display: none;
    max-width: 240px;
    float: right;
    text-align: center;
    font-size: .9rem;
    z-index: 999;
    position: relative;
}
.basketimage {
	width: 100%;
	max-width: 100px;
}
.sociallink {
	 margin: 0 .5rem;
	 color: #333;
	 font-size:3rem;
}
.footer .sociallink {
	 margin: 0 .5rem;
	 color: #fff;
	 font-size:3rem;
}
.stickygoo {
	display: none;
}
#searchbar {
	display: block;
}
.footer a {
	 color: whitesmoke;
}

#back2Top {
    width: 40px;
    line-height: 40px;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    position: fixed;
    bottom: 50px;
    right: 0;
    background-color: #DDD;
    color: #555;
    text-align: center;
    font-size: 30px;
    text-decoration: none;
}
#back2Top:hover {
    background-color: #ff85a1;
    color: #000;
}
[type='checkbox'] {
	margin-bottom: 0;
}

.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  margin-top: 0;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}
.no-js .top-bar {
  display: none;
}

@media screen and (min-width: 640px) {
  .no-js .top-bar {
    display: block;
  }

  .no-js .title-bar {
    display: none;
  }
}

.bannerrow {
	margin-top:1rem;
}
.bannerbox {
	margin-bottom: 1rem;
}
.filterbutton {
	display: none;
}
.brandname {
	font-size: .7rem;
}
.brandname a {
	font-size: .7rem;
}

.promocodeline {
	background: #0b4a9e;
	color: white;
	font-weight: 700;
	padding: .5rem 0;
}

@media screen and (min-width: 640px) {
.filterbox {
	display: display;
}
.welcometext {
	text-align: left;
}
}

@media screen and (max-width: 1130px) {
.mega:hover {
	background: none;
}
}

@media screen and (max-width: 640px) {
.filterbox {
	display: none;
}
.filterbutton {
	display: block;
}
.welcometext {
	text-align: center;
}
}
.descriptiontxt ul {
	list-style: none;
}
.descriptiontxt ul > li {
 	margin-bottom: .5rem;
}

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 99999; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 1); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  overflow-y: scroll;
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  width: 100%; /* 100% width */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: .5rem;
  right: .5rem;
  font-size: 1rem;
  line-height: 1rem;
  font-weight: 700;
  color: white;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
.callout.success {
	padding: 1rem 2rem;
	background-color: #47a0cf;
	color: white;
}