/* News Filters */
	.filters
	{
		color: #f2f2f2;

		border-bottom: #1f293a solid 1px;
		display: block;
		margin: 0 auto;
		padding: 45px 0 15px;
		position: relative;

		max-width: 976px;
		width: 100%;
	}

	/* Filter Components */
		.filters .component
		{
			clear: both;
			display: block;
			overflow: hidden;
		}

		.filters .component + .component
		{
			margin-top: 30px;
		}

	/* Filter Group Labels (Headlines) */
		.filters .group-label
		{
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			cursor: pointer;
			transition: color .25s ease;

			font: normal 700 34px/1 "Barlow Condensed", sans-serif;

			box-sizing: border-box;
			display: inline-block;
			padding-right: 55px;
			position: relative;

			outline:none; 
		}

		.filters .group-label:after
		{
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			transform: translateY(-50%);

			color: #f8be21;
			font: normal 400 1.2em/1 "USPIS UI", sans-serif;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			font-variant: normal !important;
			speak: none;
			text-transform: none !important;
			vertical-align: middle;

			display: inline-block;
			position: absolute;
			 top: 50%;
			 right: 0;

			content: "\6a";
			pointer-events: none;
		}

		.filters.collapsed .group-label:after
		{
			content: "\77";
		}

	/* Actual Filters */
		.filters .filter
		{
			background: #09172d;
			border-radius: 20px;
			box-shadow: none;
			cursor: pointer;
			transition: background-color.25s ease, color .25s ease, border-color .25s ease;

			color: #cdcdcd;
			font: normal 400 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
			text-align: center;

			box-sizing: border-box;
			display: inline-block;
			margin: 0 20px 30px 0;
			outline: 0;
			overflow: hidden;
			padding: 10px 30px;
			position: relative;
		}

		.filters .filter.select
		{
			padding: 0;
		}

		.filters .filter.active
		{
			background: #e5e5e5;

			color: #09172d;

			border-color: #e5e5e5;
		}

		.filters.collapsed .filter:not(.select).active
		{
			padding-right: 40px;
			padding-left: 20px;
		}

		.filters.collapsed .filter.active:after
		{
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			transform: translateY(-50%);

			color: #09172d;
			font: normal 400 2em/1 "USPIS UI", sans-serif;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			font-variant: normal !important;
			speak: none;
			text-transform: none !important;
			vertical-align: middle;

			display: inline-block;
			position: absolute;
			 top: 50%;
			 right: 10px;

			content: "\64";
		}

		.filters .filter.select
		{
			text-align: left;
		}

		.filters .filter:not(label)
		{
			border: #fff solid 1px;
		}

		.filters .filter select,
		.filters .filter input
		{
			padding: 10px 30px;

			height: 38px;
			width: 180px;
		}

		.filters .filter .filter-label
		{
			background: #09172d;
			border-radius: 20px;
			transition: background-color.25s ease, color .25s ease;

			text-overflow: ellipsis;
			white-space: nowrap;

			border: #fff solid 1px;
			box-sizing: border-box;
			display: block;
			overflow: hidden;
			padding: 10px 30px;
			position: absolute;
			 top: 0;
			 left: 0;
			 z-index: 1;

			height: 100%;
			width: 100%;

			pointer-events: none;
		}

		.filters .filter.select .filter-label
		{
			padding-right: 45px;
		}

		.filters .filter.select .filter-label:after
		{
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			transform: translateY(-50%);
			transition: color .25s ease;

			color: #f8be21;
			font: normal 400 1.5em/1 "USPIS UI", sans-serif;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			font-variant: normal !important;
			speak: none;
			text-transform: none !important;
			vertical-align: middle;

			display: inline-block;
			position: absolute;
			 top: 50%;
			 right: 25px;

			content: "\77";
			pointer-events: none;
		}

		.filters.collapsed .filter.select.active .filter-label:after
		{
			color: #09172d;
			font-size: 2em;

			top: 50%;
			right: 10px;

			content: "\64";
		}

		.filters .filter.active .filter-label
		{
			background: #e5e5e5;

			color: #09172d;
		}

		.filters .filter.active .filter-label:after
		{
			color: #09172d;
		}

		.filters .filter select
		{
			background: transparent;

			text-align: left;

			border: 0;
			position: relative;
			 z-index: 0;
		}

		.filters.collapsed .filter select
		{
			pointer-events: none;
		}

		.filters .filter select option
		{
			text-align: left;
			color:#000;
		}
	
	/* Special Filter Instances */
		.filters .filter.clear
		{
			background: transparent;
			border-radius: 0;

			color: #cdcdcd;
			font: normal 500 17px/1 "Barlow Condensed", sans-serif;
			text-transform: uppercase;

			border-width: 0;
			box-sizing: border-box;
			display: inline-block;
			margin: 0;
			overflow: hidden;
			padding: 10px 25px 10px 0;
			position: absolute;
			 top: 45px;
			 right: 0;
		}

		.filters .filter.clear:after
		{
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			transform: translateY(-50%);

			color: inherit;
			font: normal 400 1.5em/1 "USPIS UI", sans-serif;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			font-variant: normal !important;
			speak: none;
			text-transform: none !important;
			vertical-align: middle;

			display: inline-block;
			position: absolute;
			 top: 50%;
			 right: 0;

			content: "\64";
		}

		.filters.filtering .filter.clear:after
		{
			color: #f8be21;
		}

	/* Collapsed State */
		.filters.collapsed .component.choices .filter:not(.clear):not(.active)
		{
			display: none;
		}

	/* Hover States */
		@media (hover: hover), all and (-ms-high-contrast: none)
		{
			.filters .group-label:hover,
			.filters .group-label:focus
			{
				color: #f8be21;
			}

			.filters .filter:not(.active):focus,
			.filters .filter:not(.active):hover,
			.filters .filter:not(.active) select:focus + .filter-label,
			.filters .filter:not(.active) select:hover + .filter-label,
			.filters .filter:not(.active) input:focus + .filter-label,
			.filters .filter:not(.active) input:hover + .filter-label
			{
				color: #f8be21;

				border-color: #f8be21;
			}

			.filters .filter.active:focus,
			.filters .filter.active:hover,
			.filters .filter.active select:focus + .filter-label,
			.filters .filter.active select:hover + .filter-label,
			.filters .filter.active input:focus + .filter-label,
			.filters .filter.active input:hover + .filter-label
			{
				background-color: #f8be21;

				border-color: #f8be21;
			}

			.filters .filter.clear:focus,
			.filters .filter.clear:hover
			{
				color: #f8be21;
			}
		}

	/* Tablet, Mobile and Galaxy Fold?*/
		@media only screen and (max-width: 1176px)
		{
			/* Filter Components */
				.filters .component
				{
					padding-right: 30px;
					padding-left: 30px;
				}

				.filters .filter.clear
				{
					right: 30px;
				}
		}
		
	/* Mobile and Galaxy Fold?*/
		@media only screen and (max-width: 767px)
		{	
			/* Filter Components */
				.filters .component
				{
					padding-right: 30px;
					padding-left: 30px;
				}

				.filters .component + .component
				{
					margin-top: 10px;
				}

			/* Filter Group Labels (Headlines) */
				.filters .group-label
				{
					font-size: 26px;
					font-weight: 600;

					display: block;
					padding-top: 15px;
					padding-right: 45px;
					padding-bottom: 15px;
				}

				.filters .group-label:after
				{
					font-size: 1.5em;
				}

			/* Actual Filters */
				.filters .filter
				{
					-webkit-backface-visibility: hidden;
					backface-visibility: hidden;

					font-size: 16px;

					margin: 0 10px 20px 0;
					padding: 10px 20px;
				}

				.filters .filter select,
				.filters .filter input
				{
					font-size: 16px;

					padding: 10px 20px;

					height: 38px;
					width: 134px;
				}

				.filters .filter .filter-label
				{
					padding: 10px 20px;
				}

				.filters .filter.select .filter-label
				{
					padding-right: 45px;
				}
				
				.filters .filter.select .filter-label:after
				{
					right: 20px;
				}
			
			/* Special Filter Instances */
				.filters .filter.clear
				{
					font-size: 18px;
					text-align: left;
					text-transform: uppercase;

					display: flex;
					 justify-content: flex-start;
					margin: 0 0 15px;
					padding: 15px 0;
					position: relative;
					 top: auto;
					 right: auto;
				}

				.filters .filter.clear:after
				{
					transform: none;

					color: #b3b3b3;

					display: inline-block;
					position: relative;
					 top: -4px;
					 right: auto;
				}

				/* Collapsed State */
					.filters.collapsed .component.choices .wrap
					{
						display: flex;
						 align-items: center;
						 flex-flow: row nowrap;
						 justify-content: flex-start;
						overflow: hidden;
						overflow-x: scroll;
						
						max-width: 100%;
					}

					.filters.collapsed .component.choices .filter
					{
						flex-wrap: nowrap;

						margin-bottom: 0;
					}

					.filters.collapsed .component.choices .filter.clear,
					.filters.collapsed .component.choices .filter.active
					{
						display: flex;
						flex: 0 0 auto;
					}
		}