/* Filter Bar
----------------------------------------------------------*/

#filter-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	color: $color-white;
	background-color: rgba(0,0,0,0.7);
	z-index: 1;
	@include transition(all 0.3s ease-out);
	@include box-shadow(0px 2px 3px 0px rgba(0,0,0,0.2));
	z-index: 15;

	&.fixed {
		position: fixed;
		top: 0;
	}

	> ul {
		list-style: none;
		padding: 0;
		margin: 0;
		font-family: $font-secondary;
		font-size: 11px;
		text-transform: uppercase;
		text-align: center;

		> li {
			display: inline-block;
			margin: 0 8px;
			
			> a {
				padding: 12px 0;
				display: block;
				font-weight: 600;
				@include opacity(0.6);
			}

			&.active, &:hover {
				> a {
					@include opacity(1);
				}
			}
		}
	}
	.selector {
		position: absolute;
		bottom: 0;
		background-color: $color-primary;
		height: 2px;
		@include transition(all 0.2s ease-out);
	}
}

body.sticky-header {
	#filter-bar {
		@include translateY($header-height);
	}
}

.filter-list {
	> * {
		@include transition(all 0.5s ease-out);
	}
	.not-matched {
		@include opacity(0.2);
		pointer-events: none;
	}

}