.nav-scroller, .nav-scroller-wrapper { display: flex;}
.nav-scroller { position: relative; width: 100%;  overflow: hidden; }

.nav-scroller-nav { position: relative; overflow-x: auto;  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
  align-self: center;
  padding-bottom: 30px;
  margin:0 20px;
  margin-bottom: -30px;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  
}

.nav-scroller-content, .nav-scroller-items { display: inline-flex;  align-items: center;  white-space: nowrap;}

.nav-scroller-content { min-height: 44px;  will-change: transform;}
.nav-scroller-content:not(.no-transition) { transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);}

.nav-scroller-item { flex: 1 0 auto;  display: block;  text-align: center;}
.nav-scroller-item:last-child { border-right-color: transparent;}


.nav-scroller-btn { position: absolute; top: 50%;  transform: translateY(-50%);  z-index: 10;  width: 20px;  height: 100%;  padding: 0;  color: #000;  background: #fff;  border: 0px solid #ddd;  transition: color .3s, opacity .3s;  cursor: pointer;  text-indent:-999999px;}
.nav-scroller-btn span{position:relative; display:block;}
.nav-scroller-btn span:before{font-family:'FontAwesome'; content:'\f104'; position:absolute; left:0; right:0; top:0; bottom:0; text-indent:0;}
.nav-scroller-btn.nav-scroller-btn--right span:before{content:'\f105';}

.nav-scroller-btn:hover {color: #666;}
.nav-scroller-btn:focus {outline: 0;}

.nav-scroller-btn:not(.active) { opacity: 1;  pointer-events: none;}
.nav-scroller-btn:not(.active) span{  opacity: 0.5;  pointer-events: none;}

.nav-scroller-icon {  display: inline-block;  position: relative;  top: -0.1em;  width: 1em;  height: 1em;  fill: currentColor;  vertical-align: middle;}

.nav-scroller-btn--left { left: 0;}
.nav-scroller-btn--right {  right: 0;}



.nav-scroller--right .nav-scroller-nav {  margin-left: auto;}

.nav-scroller--snap .nav-scroller-nav {
  -ms-scroll-snap-type: x proximity;
      scroll-snap-type: x proximity;
  scroll-padding: 0 20px;
}

.nav-scroller--snap .nav-scroller-content:not(.no-transition) .nav-scroller-item {
  scroll-snap-align: start;
}

.nav-scroller--snap .nav-scroller-content:not(.no-transition).snap-align-end .nav-scroller-item {
  scroll-snap-align: end;
}
