/* Grid */

.row.uniform {
	margin: -2em 0 -1px -2em;
	display: grid;
}

.grid-container {
	display: grid;
	gap: 0.5rem;
	grid-auto-flow: dense; 
	grid-template-columns: repeat(auto-fit, 20rem);
}

.grid-container > * {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Type */

p {
    margin: 0 0 1em 0;
}

h1, h2, h3, h4, h5, h6 {
	color: #ffffff;
	font-weight: 600;
	line-height: 1.65;
	margin: 0 0 0 0;
}

/* Image */

.image.fit {
	display: block;
	margin: 0 0 1em 0;
	width: 100%;
}

/* Spotlights */

/* Changed to add video support */
.spotlights > section > .image video { 
	width: auto;
	max-width: 100%;
	height: 100%; 
	z-index: 2;					
}

/* Banner */

/* Changed to add video background and full-screen */
#banner {
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	background-image: none;
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	padding: 6em 0 2em 0;
	border-bottom: 0 !important;
	cursor: default;
	height: 100vh;
	margin-bottom: -3.25em;
	min-height: 22em;
	position: relative;
	top: -3.25em;
}

#banner video {
	position: absolute; 
	width: auto;
	height: 100vh; 
	z-index: 2;
	background-size: cover;
	top: 0;
	min-height: 30em;
	max-height: 50em;
}

/* Adjust sizes, spans, and other misc things on homepage */
#banner h1 span {
	display: block;
}

#banner h1 span::first-letter {
	font-size: 1.3333em;
	line-height: .75;
	text-decoration: underline;
}

#banner header {
	float: left;
}

#banner > .inner .content {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	margin: 0 0 2em 0;
	position: relative;
	top: 18em;
	left: 5em;
}

#banner > .inner .content p {
	font-size: 1.3333em;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}

#banner.major {
	height: 100vh;
	min-height: 30em;
	max-height: 50em;
}

/* Change different aspects for mobile devices */
@media screen and (max-width: 736px) {

	#banner {
		padding: 5em 0 1em 0 ;
		height: auto;
		margin-bottom: -2.75em;
		max-height: none;
		min-height: 0;
		top: -2.75em;
	}

		#banner h1 {
			font-size: 2em;
		}

		#banner > .inner .content {
			display: block;
			position: static;
		}

			#banner > .inner .content > * {
				margin-left: 0;
				margin-bottom: 2em;
			}

		#banner.major {
			height: 100%;
			min-height: 0;
			max-height: none;
		}

		#banner video {
			max-height: none;
			left: -40em;
		}

}

/* Footer */

	#footer .copyright li:first-child {
		border-left: 0;
		margin-left: 0;
		padding-left: 0;
		color: #ffffff;
	}

/* Collapsible */

	ul[class] {
		margin: 0;
		padding: 0;
	}

	ul[class] li {
		list-style: none;
		padding: 1rem;
	}

	/* [1] 'auto-fit' grid columns, so no media queries required. */
	/* [2] 'dense' packing fills in holes earlier in the grid. */
	.grid {
		display: grid;
		column-gap: 3rem;
		grid-auto-flow: dense; /* [2] */
		grid-template-columns: repeat(auto-fit, 12rem); /* [1] */
		justify-content: left;
	}

	.grid > * {
		align-items: flex-start;
		background: transparent;
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	/* [3] Make fullwidth card span all grid columns. */
	.fullwidth {
		grid-column: 1 / -1;
	}

	.is-hidden {
		display: none;
	}

	.fullwidth,
	.is-selected {
		background: #242943;
	}

/* Other */

.no-wrap {
	white-space: nowrap;
}