/* Banner */

	#banner {
		-ms-flex-align: center;
		-ms-flex-pack: center;
		@include color(accent2);
		@include vendor('align-items', 'center');
		@include vendor('display', 'flex');
		@include vendor('justify-content', 'center');
		background-image: url('../../images/banner.jpg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		border-top: 0;
		display: -ms-flexbox;
		height: 35rem !important;
		min-height: 35rem;
		overflow: hidden;
		position: relative;
		text-align: center;
		width: 100%;

		> .inner {
			@include vendor('transform', 'scale(1.0)');
			@include vendor('transition', (
				'opacity #{_duration(banner)} ease',
				'transform #{_duration(banner)} ease'
			));
			opacity: 1;
			position: relative;
			z-index: 3;

			> :last-child { 
				margin-bottom: 0; 
			}
		}

		h1 {
			font-size: 4rem;
			margin-bottom: 1rem;
		}

		p {
			font-size: 1.5rem;
		}

		a {
			color: _palette(accent2, fg);
			text-decoration: none;

			&:hover {
				color: _palette(accent2, fg-bold);
			}
		}

		video {
			@include vendor('transform', 'translateX(50%) translateY(50%)');
			bottom: 50%;
			height: auto;
			min-height: 100%;
			min-width: 100%;
			overflow: hidden;
			position: absolute;
			right: 50%;
			width: auto;
		}

		&:before {
			@include vendor('transition', 'opacity 3s ease');
			@include vendor('transition-delay', '#{_duration(banner) * 1.25}');
			background: _palette(accent2,bg);
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0.45;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 1;
		}

		&:after {
			background: linear-gradient(135deg, _palette(accent1,bg) 0%,_palette(accent2,bg) 74%);
			content: ' ';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0.6;
			position: absolute;
			top: 0;
			webkit-linear-gradientidth: 100%;
			width: 100%;
			z-index: 1;
		}

		&.small {
			height: 30vh !important;
			min-height: 30vh;
		}

		@include breakpoint('<=large') {
			video {
				display: none;
			}
		}

		@include breakpoint('<=small') {
			height: auto !important;
			min-height: 0;
			padding: 4rem 2rem 4rem 2rem;

			.inner {
				width: 100%;
			}

			h1 {
				font-size: 1.75rem;
				margin-bottom: 0.5rem;
				padding-bottom: 0;
			}

			p {
				font-size: 1.25rem;
			}

			br {
				display: none;
			}

			.button {
				width: 100%;
			}
		}

		@include breakpoint('<=xsmall') {
			p {
				font-size: 1rem;
			}
		}

		body.is-preload & {
			.inner {
				@include vendor('transform', 'scale(0.99)');
				opacity: 0;
			}

			&:before {
				opacity: 1;
			}
		}
	}