/*
 *  Los Scrollos - v1.0.0
 *  Simple jQuery plugins for scrolling overflow content.
 *  https://github.com/azhsetiawan/los-scrollos
 *
 *  Azh Setiawan
 *  Under MIT License
 */

.scrollos-wrapper {
display:block !important;
  position: relative;
  height:60px;
  background:#f9f9f9;
  /*border-bottom:1px solid #d7d7d7;*/
}
.scrollos-wrapper::after {
	content:'';
	position:absolute;
	bottom:0; left:0;
	width:100%; height:1px;
	background-color:#d7d7d7;
	display:block;
}
.scrollos-container {
  position: relative;
  height:100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
  max-width:1300px;
  margin:0 auto;
  background:#f9f9f9;

}

.scrollos-content {
display:table;
height:100%;
  white-space: nowrap;
  position: relative;
  transition: transform .2s ease-in-out;
  margin:0 auto;
}

.scrollos-content:not(.item) {
  font-size: 0;
}

.scrollos-content.-no-transition {
  transition: none;
}
.scrollos-content > .item {
  display: table-cell;
  vertical-align:middle;
  width:216.6666px;
  text-align:center;
}
.scrollos-content > .item a {position:relative;display:inline-block;width:100%;height:100%;font-size:18px;font-weight:500;line-height:60px;color:#383838;text-transform:capitalize;padding:0 10px;border-bottom:1px solid #d7d7d7;}
.scrollos-content > .item a.on,
.scrollos-content > .item:hover {background:#fff;}
.scrollos-content > .item a.on:before,
.scrollos-content > .item a:hover:before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:#005dbd;}
.scrollos-content > .item a.on:after,
.scrollos-content > .item a:hover:after {content:"";position:absolute;bottom:-2px;left:0;width:100%;height:4px;background:#fff;z-index:4;}



@media all and (max-width:1024px) {
.scrollos-nav { 
width:20px;
height:19px;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  border: none;
  opacity: 0;
  visibility: hidden;
}
.scrollos-prev {background:url("/_public/images/common/prev.svg") center / contain no-repeat}
.scrollos-next {background:url("/_public/images/common/next.svg") center / contain no-repeat}
.scrollos-nav:focus {
  outline: none;
}
.scrollos-prev {
  left: 0;
}
.scrollos-next {
  right: 0;
}

div[data-overflowing='both'] ~ .scrollos-nav.scrollos-prev,
div[data-overflowing='both'] ~ .scrollos-nav.scrollos-next,
div[data-overflowing='left'] ~ .scrollos-nav.scrollos-prev,
div[data-overflowing='right'] ~ .scrollos-nav.scrollos-next {
  opacity: 1;
  visibility: visible;
}
}
@media all and (max-width:640px) {
.scrollos-container {width: 88%;}

.scrollos-content > .item a.on:before,
.scrollos-content > .item a:hover:before{bottom:-23px;}

.scrollos-content > .item a.on,
.scrollos-content > .item:hover {background:none;color:#005dbd;}

.scrollos-content > .item a {font-size:15px;}

.scrollos-content > .item a:before,
.scrollos-content > .item a:after{display:none}
}