landing.scss

.videoWrapper {
	background-color:black;
	width:100%;
}

.videoWrapper__inner {
	max-width:60em;
	margin:0 auto;
	position:relative;
}

.videoWrapper__coverImage {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
	background:url(../img/landing/video-cover.jpg) no-repeat center/cover;
}

.videoWrapper__playButton {
	position:absolute;
	top:50%;
	left:50%;
	height:3em;
	width:3em;
	transform:translate(-50%, -50%);
	-webkit-appearence:none;
	border:none;
	border-radius:100%;
	background-color:white;
	outline:none;
	box-shadow:0 0 1em black;


	@include extendedBorder(before, 1em, white, 2, 100%, 100%, true, true)

	&::after {
		content:"";
		width:0;
		display:block;
		margin:0 auto;
		height:0;
		border-left:0.5em solid black;
		border-top:0.433em solid transparent;
		border-bottom:0.433em solid transparent;
	}
}

.videoWrapper__videoParent {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 35px;
  height: 0;
  overflow: hidden;

	iframe {
		position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
	}
}


.landingNav {
	background-color:black;
}

.landingNav__inner {
	width:100%;
	max-width:$page-max-width;
	margin:0 auto;
	overflow:hidden;
}

.landingNav__element {
	display:block;
	float:left;
	height:15em;
	width:16.66666%;
	color:white;
	text-decoration:none;
	transition: width 0.15s $animation-easing-function;
	position:relative;

	span {
		position:absolute;
		top:100%;
		left:0%;
		transform-origin:0% 0%;
		transform:rotate(-90deg);
		white-space:nowrap;
		padding-left:0.25em;
		z-index:2;
		font-weight:bold;
		font-size:1.5em;

		transition:opacity 0.15s $animation-easing-function;
	}
}

.landingNav__elementColorScreen {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
	transition:background-color 0.15s $animation-easing-function;
}


.landingNav__element--red {
	&:hover .landingNav__elementColorScreen {
		background-color:$degrees-color;
	}
	.landingNav__elementColorScreen {
		background-color:transparentize($degrees-color, 0.6);
	}
}
.landingNav__element--orange {
	&:hover .landingNav__elementColorScreen {
		background-color:$concentrations-color;
	}
	.landingNav__elementColorScreen {
		background-color:transparentize($concentrations-color, 0.6);
	}
}
.landingNav__element--yellow {
	&:hover .landingNav__elementColorScreen {
		background-color:$our-work-color;
	}
	.landingNav__elementColorScreen {
		background-color:transparentize($our-work-color, 0.6);
	}
}
.landingNav__element--green {
	&:hover .landingNav__elementColorScreen {
		background-color:$for-students-color;
	}
	.landingNav__elementColorScreen {
		background-color:transparentize($for-students-color, 0.6);
	}
}
.landingNav__element--blue {
	&:hover .landingNav__elementColorScreen {
		background-color:$campuses-color;
	}
	.landingNav__elementColorScreen {
		background-color:transparentize($campuses-color, 0.6);
	}
}
.landingNav__element--purple {
	&:hover .landingNav__elementColorScreen {
		background-color:$about-us-color;
	}
	.landingNav__elementColorScreen {
		background-color:transparentize($about-us-color, 0.6);
	}
}

.quoteModal {
	background-color:#383838;
	padding:3em 0;
	box-shadow:inset 0 0 1em rgba(0,0,0,0.8);
}

.quoteModal__inner {
	max-width:80em;
	margin:0 auto;
	text-align:center;
	h1 {
		color:#76b700;
		font-size:2.5em;
		text-transform:uppercase;
	}
	h3 {
		font-size:1.5em;
		line-height:1.4em;
		color:white;
	}
}