<div class="main-message">
	<div class="main-message-img" style="background-image: url('');"></div>

</div>
<div class="cta-wrap">

	<div class="cta-backgrounds">
    <div class="cta-section cta1 skewed"></div>
    <div class="cta-section cta2 skewed"></div>
    <div class="cta-section cta3 skewed"></div>
    <div class="cta-section cta4 skewed"></div>
</div><div class="cta-content">		
  <div class="cta-section animater cta1 js-active">
			<div class="cta-content-inner">
        <h2>Title</h2>
        <p>Content</p>
			</div>
		</div>
  <div class="cta-section animater cta2 js-active">
			<div class="cta-content-inner">
        <h2>Title</h2>
        <p>Content</p>
			</div>
		</div>
		<div class="cta-section animater cta3 js-active">
			<div class="cta-content-inner">
        <h2>Title</h2>
        <p>Content</p>
			</div>
		</div>
				<div class="cta-section animater cta4 js-active">
			<div class="cta-content-inner">
        <h2>Title</h2>
        <p>Content</p>
			</div>
		</div>
		</div>
</div>

@mixin prefix($args) {
	@each $prop,$val in $args {
		-ms-#{$prop}: $val;
		-o-#{$prop}: $val;
		-webkit-#{$prop}: $val;
		-moz-#{$prop}: $val;
		#{$prop}: $val;
	}
}
$ctaColor1: #128774;
$ctaColor2: #0270b4;
$ctaColor3: #d87427;
$ctaColor4: #6c3463;
$darkGray: hsl(0,0%,13%);
$breakpointChangeMainLayout: 800px;

.main-message {
	z-index: 85;
	padding: 2em 2em 10em;
	position: relative;
	text-align: left;
	font-size: 1.2rem;
	color: #fff;

	background-color: hsl(0,0%,15%);

	@media(min-width: $breakpointChangeMainLayout) {		
		box-sizing: border-box;
		height: 89vh;
		padding-left: 10vw;
	}

}

$topBoxShadow1: 0  300px 200px -60px hsla(0, 0%, 0%, .3) inset;
.main-message-img {
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	top:0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 0;
	opacity: 0;
	box-shadow: $topBoxShadow1;
	@include prefix((
		filter: grayscale(100%) brightness(43%)
	));

	transition: 1.5s opacity;

	@media(min-width: $breakpointChangeMainLayout) {		
		background-size: cover;
	}
}


/** 
 * The angled CTA section
 */
$ctaSectionHeight: 500px;

.cta-wrap {
	position: relative;
	z-index: 90;

	* {
		position: relative;
		z-index: 50;
	}

	@media(min-width: $breakpointChangeMainLayout) {
		height: $ctaSectionHeight;
	}
}


.cta-content, .cta-backgrounds {

	overflow: visible;
	height: 100%;

	@media(min-width: $breakpointChangeMainLayout) {
		display: flex;
		flex-wrap: nowrap;
		height: 100%;
	}
}


.cta-section {
	height: $ctaSectionHeight;
	box-sizing: border-box;
	padding: 3em 1.5em 0;
	@include prefix((
		transition: (1.2s transform ease-out)
	));

	// @media(min-width: 600px) {
	// 	padding-top: 5em;
	// }

	@media(min-width: $breakpointChangeMainLayout) {
		width: 25%;
		padding: 1em 2em;
		box-sizing: border-box;
		height: auto;
	}
}

@media(max-width: $breakpointChangeMainLayout) {
	.cta1 { @include prefix(( transform-origin: (100% 0) )) }
	.cta2 { @include prefix(( transform-origin: (-100% 0) )) }
	.cta3 { @include prefix(( transform-origin: (300% 0) )) }
	.cta4 { @include prefix(( transform-origin: (-300% 0) )) }

	.cta2, .cta4 {
		@include prefix(( transform: skewY(-5deg) ));

	}
	.cta1, .cta3 {
		@include prefix(( transform: skewY(5deg) ));

	}
}

.cta-backgrounds {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;

	.cta-section {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;

		// the colored overlays
		&:after {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			content: '';
			display: block;
			height: 100%;
			width: 100%;
			opacity: 1;

			transition: 1.5s opacity;
		}

		&.js-active:after {
			opacity: .8;
		}

	}

	// default backgrounds
	// .cta1 { background-image: url("im/lane.jpg"); }
	// .cta2 { background-image: url("im/science-guys.jpg"); }
	// .cta3 { background-image: url("im/aesop-night-fire.jpg"); }
	// .cta4 { background-image: url("im/column-students.jpg"); }

	.cta1:after {
		background-color: $ctaColor1;
	}
	.cta2:after {
		background-color: $ctaColor2;
	}
	.cta3:after {
		background-color: $ctaColor3;
	}
	.cta4:after {
		background-color: $ctaColor4;
	}

	$angle: 12deg;
	$thirdOfAngle: $angle / 3;

	@media(min-width: $breakpointChangeMainLayout) {

		.cta1 { @include prefix(( transform-origin: (300% 0) )) }
		.cta2 { @include prefix(( transform-origin: (200% 0) )) }
		.cta3 { @include prefix(( transform-origin: (100% 0) )) }
		.cta4 { @include prefix(( transform-origin: (0 0) )) }

		.cta1.skewed,.cta2.skewed,.cta3.skewed {
			@include prefix(( 
				transform: skewY($thirdOfAngle)
			));

			* {
				@include prefix(( transform: skewY(-$thirdOfAngle) ));
			}
		}
		.cta4.skewed {
			@include prefix((
				transform: skewY(-$angle),
			));

			* {
				@include prefix(( transform: skewY($angle) ));
			}
		}
	}

	@media(min-width: $breakpointChangeMainLayout){

		height: 100%;
		// visually hide thin strips where section don't perfectly meet
		background: hsl(0,0%,35%);
		
		// the colored bar which hides the angled bottoms of the cta sections
		&:after {
			display: block;
			content: '';
			background: $darkGray;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 5vw;
			z-index: 95;
		}
	}
}

.cta-content {
	font-size: 1.3rem;

	.cta-section {
		text-align: center;
		color: #fff;
	}

	.cta-section-icon {
		display: block;
		margin: 0 auto 1em;
		max-width: 75px;
	}

	h2 {
		text-transform: uppercase;
		font-size: 1em;
		//font-family: $fontSans;
		font-weight: 600;
		margin-bottom: 0em;
		// prevent the titles from wrapping and throwing off the alignment
		//  of the buttons.
		white-space: pre;
	}
	p {
		border-top: 1px solid hsla(0,0%,100%,.5);
		margin-top: 1em;
		margin-bottom: 2em;
		padding-top: 1em;
		font-size: .9em;
		font-weight: 200;
		line-height: 1.4em;
		text-align: left;
	}

	.cta1 a.cta-button { color: $ctaColor1; }
	.cta2 a.cta-button { color: $ctaColor2; }
	.cta3 a.cta-button { color: $ctaColor3; }
	.cta4 a.cta-button { color: $ctaColor4; }

	a.cta-button:hover {
		color: hsl(0,80%,10%);
	}

	@media(max-width: $breakpointChangeMainLayout) {

		p {
			height: auto;
		}

		.cta2, .cta4 {
			@include prefix(( transform: skewY(-5deg) ));

			.cta-content-inner {
				position: relative;
				z-index: 50;
				@include prefix(( transform: skewY(5deg) ));
			}
		}
		.cta1, .cta3 {
			@include prefix(( transform: skewY(5deg) ));

			.cta-content-inner {
				position: relative;
				z-index: 50;
				@include prefix(( transform: skewY(-5deg) ));
			}
		}
	}

}

@media(min-width: $breakpointChangeMainLayout) {

	.cta-content {
		font-size: 1.1rem;
	}

	.cta-section.animater .cta-content-inner {
		opacity: 0;
		@include prefix((
			transform: translateY(20px)
		));
		transition: .3s;
	}
	.cta-section.animater.js-active .cta-content-inner {
		opacity: 1;
		@include prefix((
			transform: translateY(0)
		));
	}
}

@media(min-width:1200px){
	.cta-content {
		font-size: 1.2rem;
	}
}

.cta-content p {
	@media(min-width:$breakpointChangeMainLayout) {
		height: 10.5em;
	}
	@media(min-width:950px) {
		height: 9em;
	}
	@media(min-width:1024px) {
		height: 8em;
	}
	@media(min-width:1300px) {
		height: 7em;
	}
	@media(min-width:1400px) {
		height: 6.5em;
	}
}