.phaseBar {
	padding-top: 2.25rem;
}
	.phaseBar-container {
		flex-grow: 1;
	}
	.phaseBar-heading {
		max-width: 42rem;
		margin: 0 auto;
		margin-bottom: 2rem;
	}
	.phaseBar-list {
		display: flex;
		height: 6rem;
		width: 100%;
		align-content: center;
		align-items: center;
		justify-content: center;
		justify-items: center;
	}
	.phaseBar-item {
		display: flex;

		margin-right: -5.25%;
		width: 100%;
		height: 4.7rem;
		flex: 0 1 auto;

		position: relative;
		align-items: center;
		justify-content: center;

		transition: all 0.15s;
		filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2));
	}
		.phaseBar4 {
			margin-right: -6.9%; /* For 4 items */
		}
		.phaseBar5 {
			margin-right: -5.25%; /* For 5 items */
		}
		.phaseBar-selected {
			transform: scale(1.15);
			z-index: 1;

			filter: drop-shadow(3px 4px 5px rgba(0,0,0,.5));
		}
		.phaseBar-selected .phaseBar-text {
			transform: scale(1.15);
		}
		.phaseBar-item:not(:first-child):not(:last-child) .phaseBar-content {
			clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
		}
		.phaseBar-item:first-child .phaseBar-content {
			clip-path: polygon(0 0, 100% 0%, 75% 100%, 0 100%);
			border-bottom-left-radius: 1rem;
			border-top-left-radius: 1rem;
		}
			.phaseBar-item:first-child .phaseBar-text {
				padding-right: 1rem;
			}
		.phaseBar-item:last-child .phaseBar-content {
			clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
			border-bottom-right-radius: 1rem;
			border-top-right-radius: 1rem;
		}
			.phaseBar-item:last-child {
				margin-right: 0;
			}
			.phaseBar-item:last-child .phaseBar-text {
				padding-left: 1rem;
			}
	.phaseBar-content {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		overflow: hidden;
	}
		.phaseBar-overlay {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			z-index: -1;
		}
		.phaseBar-tint {
			background-color: rgba(19,17,33,.15);
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			z-index: -1;
			opacity: .5;
		}
		.phaseBar-img {
			position: absolute;
			background-size: cover;
			filter: blur(2px);
			top: -5px;
			bottom: -5px;
			right: -5px;
			left: -5px;
			z-index: 0;
			opacity: 35%;
		}
		.phaseBar-text {
			position: absolute;
			z-index: 1;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			text-transform: uppercase;
			color: white;
			font-weight: 600;
			font-size: 1rem;
			text-shadow: 0 1px 1px rgba(0,0,0,.4);
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all .15s;
		}
	.phaseBar-description-container {
		display: flex;
		margin-top: 2.5rem;
		margin-bottom: 1rem;
		flex-direction: row;
		align-items: flex-start;
	}
		.phaseBar-button {
			font-size: 3rem;
			color: #8D87C4;
			justify-content: center;
			flex-grow: 1;
			margin-top: .5rem;
		}
		.phaseBar-description {
			max-width: 30rem;
			font-size: 1.1rem;
			font-weight: normal;
		}
	@media (max-width: 800px) {
		.phaseBar-list {
			display: flex;
			flex-direction: column;
			height: 20rem;
			width: 100%;
		}
		.phaseBar-selected {
			transform: scale(1.05);
		}
		.phaseBar-item {
			margin-bottom: .3809rem;
			margin-right: 0;
			max-width: 30rem;
		}
		.phaseBar-description-container {
			min-height: 15rem;
		}
		.phaseBar-description {
			max-width: 20rem;
		}
		.phaseBar-content {
			clip-path: none !important;
		}
		.phaseBar-item:first-child .phaseBar-content {
			border-bottom-left-radius: 0rem;
			border-top-left-radius: 1rem;
			border-top-right-radius: 1rem;
		}
		.phaseBar-item:last-child .phaseBar-content {
			border-bottom-right-radius: 1rem;
			border-bottom-left-radius: 1rem;
			border-top-right-radius: 0rem;
		}
		.phaseBar-item:first-child .phaseBar-text, .phaseBar-item:last-child .phaseBar-text {
			padding: 0;
		}
	}