.tab-nav {
    list-style: none;
    padding: 0;
    white-space: nowrap;
    margin: 0;
    overflow: auto;

    >li {
	    display: inline-block;
	    vertical-align: top;
	    font-size: 14px;
	    box-shadow: inset 0 -2px 0 0 @border-color;

	    @media (max-width: @screen-xs-max) {
			font-size: 11px;
		}
		
		+li {
			margin-left: 0;	
		}

	    >a {
			display: inline-block;
			color: #7a7a7a;
			text-transform: uppercase;
			position: relative;
			width: 100%;
			-webkit-transition: all;
			-moz-transition: all;
			-o-transition: all;
			transition: all;
			-webkit-transition-duration: 250ms;
			transition-duration: 250ms;
			font-weight: 500;

			&:hover, &:focus, &:active {
				text-decoration: none;
				background-color: transparent;
			}

			&:after {
				content: "";
				height: 2px;
				position: absolute;
				width: 100%;
				left: 0;
				bottom: 0;
				-webkit-transition: all;
				-moz-transition: all;
				-o-transition: all;
				transition: all;
				-webkit-transition-duration: 250ms;
				transition-duration: 250ms;
				-webkit-transform: scale(0);
				-ms-transform: scale(0);
				-o-transform: scale(0);
				transform: scale(0);
			}

			@media (min-width: @screen-sm-min) {
				padding: 10px 15px 12px;
			}

			@media (max-width: @screen-xs-max) {
				padding: 10px 8px 12px;
			}
		}

		&.active>a {
			color: #000;

			&:after {
				-webkit-transform:scale(1);
				-ms-transform:scale(1);
				-o-transform:scale(1);
				transform:scale(1);
			}
		}
	}

	&:not([data-tab-color])>li>a:after {
		background: @anchor-color;
	}
}

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
	color: @nav-pills-active-color;
	background-color: transparent;
}

.popular .tab-nav {
	margin-bottom: 10px;
	
	li.active>a {
		color: @nav-pills-active-color;
	}
}

.nav>li>a {
	padding: 10px 10px;
	@media (max-width: @screen-xs-max) {
		padding: 8px 8px;	
	}
}