.c5 .video-heading.has_triangle:before {
	width: 21px;
	height: 21px;
	left: -10px;
}


/* C5 Video */
.video-heading {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px;
	position: relative;
}

.video-heading p {
	/* Can I put this is conditionally only if there is a CTA? */
	padding: 0 15px 15px 15px;
	text-align: center;
}

.half.youtube-video {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-basis: 70%;
}

.video-responsive {
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	height: 0;
}

.video-responsive iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
}

.youtube .video-heading h3 {
	text-align: center;
	color: var(--color-evergreen);
}

.youtube .half.video-heading {
	background-color: #f4f4f4;
	margin: 0 0 0 15px;
}

.c5.youtube.fullWidthVideo {
	flex-direction: column;
}

.c5.youtube.fullWidthVideo .half.video-heading {
	margin: 0 0 0 0;
}

.c5.youtube.fullWidthVideo .video-heading.has_triangle:before {
	display: none;
}

.cta-box {
	margin: 0 auto;
}

.cta-box a {
	text-decoration: none;
	border: solid 3px var(--color-lime);
	padding: 15px 30px;
	color: var(--color-evergreen);
	background-color: var(--color-lime);
	font-weight: 400;
	transition: background-color 300ms;
}

.cta-box a:hover {
	background-color: #fff;
	transition: background-color 300ms;
}

@media (max-width: 900px) {
	.c5.youtube {
		flex-direction: column;
	}

	.youtube .half.video-heading {
		margin: 15px 0 0 0;
	}

	.c5 .video-heading.has_triangle:before {
		content: '';
		width: 18px;
		height: 18px;
		transform: rotate(45deg);
		position: absolute;
		top: -8px;
		left: 48%;
		background-color: #fff;
	}

	.video-heading p {
		text-align: center;
	}
}

@media (max-width: 400px) {
	.video-heading {
		padding: 15px 15px 30px 15px;
	}
}

/* End C5 video */