.cost-arrow {
	padding-bottom: 5em;
	margin: 4em 0 2em;
	max-width: 95%;

		// TODO for post-demo: Polyfills / backwards compatibility needed for IE & FF
	.bar {
		height: 50px;
		padding-top: 1em;

		.bar-section{
			height: 30px;
			display: block;
			position: relative;
			float: left;
		}

		.bar1,
		.bar4 {
			background: $art-blue;
		}
		.bar2 {
			background: $art-yellow;
		}
		.bar3 {
			background: $art-lime;

			&:after{
				content: "";
				height: 0;
				border-top: 2em solid transparent;
				border-left: 2.5em solid $art-lime;
				border-bottom: 2em solid transparent;
				position: absolute;
				right: -2.2em;
				top: 50%;
				transform: translate(0, -50%);
			}
		}
	}

	.graph-bar{
		float: left;
	}


	// title above bar
	.cost-value {
		position: absolute;
		width: 100%;
		text-align: center;
		bottom: 180%;
		padding: 0 6px 0.5em;
		line-height: 1.1;
		color: $alex-text;
	}

	// numbers above bar
	.section-coverage {
		position: absolute;
		bottom: 130%;
		color: $alex-black;
		font-weight: 700;
		font-size: 1.25em;

		@include small-screen {
			bottom: 117%;
		}
	}

	// Dreamcast TODO: Besides `section-coverage`, this could probably all be flex-based
	.section-annotations {
		float: left;
		position: relative;
		text-align: center;
		height: 100px;

		p {
			width: 100%;
			margin-bottom: 1em;
		}

		// title below bar
		.milestone-name {
			top: 21%;
			left: calc(100% - 40px);
			position: absolute;
			font-weight: 400;
			width: 80px;
		}

		// number below bar
		.milestone-amount {
			position: absolute;
			left: 50%;
			top: 61px;
			color: #333;
			font-weight: 700;
			font-size: 1.25em;

			@include small-screen {
				top: 70px;
			}

			&:after {
				width: 1px;
				background: #000;
				height: 3.5em;
				position: absolute;
				left: calc(50% - 1px);
				top: -99px;
				content: " ";

				@include small-screen {
					top: -104px;
					height: 2.5em;
				}
			}
		}
	}
}