/*---- Don't Copy this Custom Styling ----*/
body {
  font-family: "Montserrat";
  font-size: 0.85rem;
  font-weight: 500;
}

.FilterBox{ background:#F5F5F5; padding:5px 10px; margin:5px auto 30px auto; display:block; width:90%; font-size:14px; font-style:italic; color:#A3A3A3; }
.citys, .years{ border:none; padding:5px 20px; background:#FFF; font-size:16px; color:#A3A3A3; }

/*--- Remove Bootstrap's styling for Nav Class if needed ---*/
#ProductNav .nav, #ProductNav2 .nav {
  display: inherit;
  flex-wrap: inherit;
  padding-left: inherit;
  margin-bottom: inherit;
  list-style: inherit;
}

/*--- Wrap Up ---*/
.ProductNav_Wrapper {
  position: relative;
  padding: 5px 40px; border-radius: 30px; border: 1px #ccc solid;
  box-sizing: border-box;
}

.ProductNav {
  /* Make this scrollable when needed */
  overflow-x: auto;
  /* We don't want vertical scrolling */
  overflow-y: hidden;
  /* For WebKit implementations, provide inertia scrolling */
  -webkit-overflow-scrolling: touch;
  /* We don't want internal inline elements to wrap */
  white-space: nowrap;
  /* If JS present, let's hide the default scrollbar */
  /* positioning context for advancers */
  position: relative;
  font-size: 0;
}
.js .ProductNav {
  /* Make an auto-hiding scroller for the 3 people using a IE */
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /* Remove the default scrollbar for WebKit implementations */
}
.js .ProductNav::-webkit-scrollbar {
  display: none;
}

.ProductNav_Contents {
  float: left;
  transition: transform 0.2s ease-in-out;
  position: relative;
}

.ProductNav_Contents-no-transition {
  transition: none;
}

.ProductNav_Link {
      text-decoration: none;
    color: #A3A3A3;
    font-size: 16px;
    font-weight: 600;
    display: table-cell;
    vertical-align: middle;
    padding: 8px 35px;
    line-height: 1.35;
    background: #F5F5F5;
    margin: 0 4px !important;
    display: inline-block;
    border-radius: 14px;
}

.ProductNav_Link:hover{ color:#A3A3A3; }

.ProductNav_Link[aria-selected=true] {
  color: #ffffff; background: #FF8901;
}

.Advancer {
  /* Reset the button */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  padding: 0;
  border: 0;
  /* Now style it as needed */
  position: absolute;
  top: 0;
  bottom: 0;
  /* Set the buttons invisible by default */
  opacity: 0;
  transition: opacity 0.3s;
}
.Advancer:focus {
  outline: 0;
}
.Advancer:hover {
  cursor: pointer;
}

.Advancer_Left {
  left: 0;
}
[data-overflowing=both] ~ .Advancer_Left, [data-overflowing=left] ~ .Advancer_Left {
  opacity: 1;
}

.Advancer_Right {
  right: 0;
}
[data-overflowing=both] ~ .Advancer_Right, [data-overflowing=right] ~ .Advancer_Right {
  opacity: 1;
}

.Advancer_Icon {
  width: 40px;
  height: 40px; background: #FF8901;
  fill:#ffffff; border-radius:30px ;
}

.ProductNav_Indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100px;
  background-color: transparent !important;
  transform-origin: 0 0;
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}