/*!
Theme Name: CCS Student Portfolios
Theme URI: https://hire.ccsdetroit.edu/
Author: College for Creative Studies
Author URI: https://collegeforcreativestudies.edu/
Description: Custom theme for the CCS student exhibition / hire site. Built on Underscores (_s). Requires Advanced Custom Fields, FacetWP, and Frontend Admin.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ccs-student-portfolios
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
*/

:root {
	--primary: #FFD100;
	--darkprimary: #AF990B;
	--secondary: #898989;
	--darksecondary: #000000;
	--lighttext: #fff;
	--lightgrey: #F4F4F4;
	
	--mainBackground: #000;
	--mainBackgroundShade: #0f0f0f;
	--secondaryBackground: #2b2b2b;
	--invertBackground: #fff;
	--invertBackground2: #fff;
	--accentBackground: #FFD100;
	
	--mainText: #fff;
	--secondaryText: #808080;
	--invertText: #000;
	--invertText2: #000;
	--accentText: #FFD100;
}

html {
	font-size: 100%;
	scroll-behavior: smooth;
}

#page {
	overflow: hidden;
}

/* 16px */

* {
	box-sizing: border-box;
}

::selection {
	color: var(--mainBackground);
	background: var(--mainText);
}

::-moz-selection {
	color: var(--mainBackground);
	background: var(--mainText);
}

body {
	position: relative;
	background: var(--mainBackground);
	font-family: 'Interstate','Helvetica', sans-serif;
	font-weight: 300;
	line-height: 1.6;
	color: var(--mainText);
	width: 100%;
	overflow-x: hidden;
}

/* Typography */

p {
	margin-bottom: 1rem;
}

h1,
h2,
h3,
h4,
h5 {
	margin: 3rem 0 1.38rem;
	font-family: 'Interstate','Helvetica', sans-serif;
	font-weight: 800;
	line-height: 1.15em;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child {
	margin: 0rem 0 3rem;
}

h1 {
	margin-top: 0;
	font-size: 3rem;
}

.term-hagopian h1 {
	font-size: 3rem;
}

h2 {
	margin-top: 0;
	font-size: 2.75rem;
	line-height: 1.2em;
}

h3 {
	font-size: 2.369rem;
}

h4 {
	font-size: 1.777rem;
}

h5 {
	font-size: 1.333rem;
}

small,
.text_small {
	font-size: 0.75rem;
}

.large {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
}

p:empty {
	display: none;
}

a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: var(--mainText);

	transition: all 0.3s ease;
}

p a {
	text-decoration: underline;
}

p a.button {
	text-decoration: none;
}

a:hover {
	color: var(--darkprimary);
}

a:active,
a:focus {
	color: var(--primary);
}

a .line {
	position: absolute;
	bottom: 5px;
	left: 0;
	width: 100%;
	height: 1px;
}

.eyebrow {
	display: block;
	font-size: 0.7em;
	font-weight: 600;
	color: var(--secondaryText);
	line-height: 1.4em;
	margin: 0 0 10px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.h4_light {
	font-weight: 100;
}

.facetwp-facet.facetwp-facet-load {
	margin: 50px 0 0;
	text-align: center;
}

.facetwp-load-more {
	padding: 15px 20px 14px;
	margin: 15px 0 0 0;
	 border: 1px solid var(--accentBackground);
	 border-radius: 50px !important;
	 font-size: 11px;
	 font-weight: bold;
	 text-transform: uppercase;
	 letter-spacing: 0.08em;
	 color: var(--mainText);
	 border-radius: 0;
	 background: none;
	 
	 cursor: pointer;
	 
	 transition: background 0.225s ease, color 0.225s ease;
	 -webkit-transition: background 0.225s ease, color 0.225s ease;
}

.facetwp-load-more:hover,
.facetwp-load-more:focus {
	background: var(--accentBackground);
	outline: 0;
	color: var(--invertText2);
	border: 1px solid var(--accentBackground);
}

button.close {
	position: absolute;
	right: 35px;
	background: none;
	border: 0;
	display: flex;
	text-transform: uppercase;
	font-size: 0.7rem;
	font-weight: bold;
	align-items: center;
	
	transition: color 0.225s ease;
	-webkit-transition: color 0.225s ease;
	
	cursor: pointer;
}

button.close:hover,
button.close:focus {
	color: var(--secondaryText);
	outline: 0;
	border:0;
}

button.close svg {
	width: 15px;
	margin: 0 0 0 8px;
}

a.button,
button.button {
	position: relative;
	border: 2px solid var(--mainText);
	color: var(--mainText);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.08em;
	font-weight: bold;
	border-radius: 0;
	background: none;
	outline: 0;
	padding: 10px 18px;
	border-radius: 100px;
	
	cursor: pointer;
	
	transition: color 0.225s ease, background 0.225s ease;
	-webkit-transition: color 0.225s ease, background 0.225s ease;
}

a.button:hover,
button.button:hover {
	background: var(--invertBackground);
	color: var(--invertText);
}

a.button.yellow,
button.button.yellow {
	color: black;
	border-color: #FFD100;
	background: #FFD100;
}

a.button.yellow:hover,
button.button.yellow:hover {
	color: black;
	border-color: white;
	background: white;
}



a.button.yellow.dark-hover:hover {
	color: white;
	border-color: black;
	background: black;
}

a.button.white,
button.button.white {
	color: var(--mainText);
	border-color: var(--invertBackground);
}

a.button.white:hover,
button.button.white:hover {
	background: white;
	color: black;
}

a.button.invert,
button.button.invert {
	color: var(--invertText);
	border-color: var(--invertText);
}

a.button.invert:hover,
button.button.invert:hover {
	background: var(--invertText);
	color: var(--invertBackground);
}

a.button.invert2,
button.button.invert2 {
	color: var(--invertText2);
	border-color: var(--invertText2);
}

a.button.invert2:hover,
button.button.invert2:hover {
	background: var(--invertText2);
	color: vaR(--accentBackground);
}

a.button.button-with-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

a.button.button-with-arrow svg {
	width: 18px;
}

a.button.button-with-arrow:hover svg path {
	stroke: white;
}

.intro-navigation a.button.button-with-arrow:hover svg path {
	stroke: var(--mainBackground)
}

a.button.button-with-arrow.yellow:hover svg path {
	stroke: black;
}

a.button.button-with-arrow.yellow.dark-hover:hover svg path {
	stroke: white;
}

.button-container {
	margin: 3rem 0;
	display: flex;
	justify-content: center;
}

.button .loading {
	position: absolute;
	top: 50%;
	left: 50%;
	
	width: 2rem;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	
	opacity: 0;
	visibility: hidden;
	
	transition: opacity 0.225s ease;
	-webkit-transition: opacity 0.225s ease;
}

.button .loading circle {
	fill: var(--mainText) !important;
	stroke: var(--mainText) !important;
}

.button:hover .loading circle {
	fill: var(--mainBackground) !important;
	stroke: var(--mainBackground) !important;
}

.button.button-loading span.button-text {
	opacity: 0;
	visibility: hidden;
}

.button.button-loading .loading {
	opacity: 1;
	visibility: visible;
}


@media screen and (max-width: 1250px) {
	h1 {
		margin-top: 0;
		font-size: 3.3rem;
	}

	h2 {
		font-size: 2.074rem;
	}

	h3 {
		font-size: 1.728rem;
	}

	h4 {
		font-size: 1.44rem;
	}

	h5 {
		font-size: 1.2rem;
	}

	small,
	.text_small {
		font-size: 0.833rem;
	}
}

@media screen and (max-width: 1050px) {
	html {
		font-size: 90%;
	}
	
	h1 {
		margin-top: 0;
		font-size: 3.2rem;
	}
	
	.large {
		font-size: 1.7rem;
		font-weight: 800;
	}
}

@media screen and (max-width: 800px) {
	html {
		font-size: 85%;
	}
	
	h1 {
		margin-top: 0;
		font-size: 3rem;
	}
	
	.large {
		font-size: 1.4rem;
		font-weight: 800;
	}
	
	button.close {
		right: 15px;
	}
	
	.eyebrow {
		margin: 0 0 6px;
	}
}

@media screen and (max-width: 500px) {
	.large {
		font-size: 1.3rem;
		font-weight: 800;
	}
	
	h1 {
		margin-top: 0;
		font-size: 2.5rem;
	}
}

/* General  */

.contain {
	margin: auto;
	width: 90%;
}

section {
	position: relative;
}

.white {
	background: var(--invertBackground);
	color: var(--invertText);
}

.grey {
	background: var(--secondaryBackground);
}

.yellow {
	background: var(--accentBackground);
	color: var(--invertText);
}

.black {
	background: var(--mainBackground);
	color: var(--mainText);
}

.flexCenter {
	display: flex;
	align-items: center;
	height: 100%;
}

.halfwidth {
	width: 50%;
}

.halfwidth .contain {
	width: 80%;
}

.dark {
	color: var(--mainText);
}

.light {
	color: var(--invertText);
}

.padding {
	padding: 5rem 0;
}

.padding-large {
	padding: 8rem 0;
}

.pdc .padding-large {
	padding: 6.5rem 0;
}

.word,
.word-wrap {
	vertical-align: bottom;
	overflow: hidden;
}

.embed-container { 
	position: relative; 
	padding-bottom: 56.25%;
	overflow: hidden;
	max-width: 100%;
	height: auto;
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.flex-down {
	display: flex; 
	justify-content: flex-end;
	align-items: flex-end;
}

@media screen and (max-width: 768px) {
	.halfwidth {
		width: 100%;
	}

	.halfwidth .contain {
		width: 90%;
	}

	.padding {
		padding: 50px 0;
	}

	.padding-large,
	.pdc .padding-large  {
		padding: 75px 0;
	}

	.flexCenter {
		flex-wrap: wrap;
	}
	
	.flex-down {
		display: flex; 
		justify-content: flex-start;
		align-items: flex-start;
	}
}

@media screen and (max-width: 550px) {
	.padding-large {
		padding: 50px 0;
	}
}

/* Header */

.page-id-4971 header.site-header,
.page-id-4971 footer.site-footer,
.page-id-4971 .footer-extras-container {
	display: none !important;
}

header.site-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	max-width: 100%;
	padding: 0 0;
	text-align: center;
	z-index: 999;
}

.admin-bar header.site-header {
	top: 32px;
}

header.site-header .header-logo {
	display: flex;
	align-items: center;
	
	cursor: pointer;
}

header.site-header .header-logo div {
	position: relative;
	overflow: hidden;
}

header.site-header .header-logo img,
header.site-header .header-logo svg {
	width: 175px;
	z-index: 1;
	position: relative;
	display: block;
	box-sizing: content-box;
	vertical-align: middle;
}

header.site-header .header-logo svg path {
	fill: var(--accentBackground);
}


.header-inner {
	display: grid;
	grid-template-columns: 175px 1fr;
	grid-gap: 35px;
}

.nav-controls {
	display: flex;
	align-items: center;
	
	position: fixed;
	right: 0;
	height: 75px;
}

.site-color-controls {
	position: relative;
	margin: 0 35px 0 0;
	z-index: 1;
	display: none;
}

.site-color-controls ul {
	position: relative;
	display: flex;
	align-items: center;
	
	padding: 0;
	margin: 0;
	list-style: none;
	
	border: 1px solid var(--accentBackground);
	border-radius: 50px;
	background: var(--mainBackground);
}

.site-color-controls .marker {
	position: absolute;
	z-index: 0;
	
	left: 0;
	top: 0;
	border-radius: 50px;
	width: 33.33%;
	height: 100%;
	
	background: var(--accentBackground);
	
	transition: transform 0.3s ease;
	-webkit-transition: transform 0.3s ease;
}

.site-color-controls li {
	position: relative;
	display: flex;
	padding: 8px;
	margin: 0;
	
	z-index: 1;
	
	cursor: pointer;
}

.site-color-controls svg {
	width: 19px;
	max-height: 18px;
	position: relative;
	
	transition: transform 0.225s ease;
	-webkit-transition: transform 0.225s ease;
}

.site-color-controls li:hover svg {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
}

.site-color-controls svg path,
.site-color-controls svg circle {
	fill: var(--accentBackground);
}

.site-color-controls li.active svg path,
.site-color-controls li.active svg circle {
	fill: var(--invertText2);
}

.main-navigation {
	display: flex;
	align-items: center;
	height: 100%;
}

.main-navigation button {
	display: none;
}

.main-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}

.main-navigation ul li {
	position: relative;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 0.1em;
	font-weight: 600;
	margin-right: 20px;
	
	background: var(--accentBackground);
	
	transition: background 0.225s ease;
	-webkit-transition: background 0.225s ease;
	
	box-shadow: 0 0 8px rgb(0 0 0 / 7%);

}

.main-navigation ul li:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--secondaryBackground);
	
	transform: scaleX(0);
	transform-origin: left;
	
	transition: transform 0.225s ease;
	-webkit-transition: transform 0.225s ease;
}

.main-navigation ul li a {
	position: relative;
	z-index: 1;
	padding: 7px 12px;
	color: var(--invertText2);
	
	transition: color 0.225s ease;
	-webkit-transition: color 0.225s ease;
}

.main-navigation ul li:hover:after {
	transform: scaleX(1);
	-webkit-transform: scaleX(1);
}

.main-navigation ul li:hover a {
	color: var(--mainText);
}

@media screen and (max-width: 850px) {
	.main-navigation {
		opacity: 0;
		visibility: hidden;
		
		position: fixed;
		 top: 0;
		 left: 0;
		 width: 100%;
		 height: 100%;
		 display: flex;
		  flex-direction: column;
		  justify-content: space-between;
		 overflow-y: scroll;
		 overflow-x: hidden;
		 background: var(--invertBackground);
		 padding: 70px 0px 50px;
		 align-items: flex-start;
	}
	
	.main-navigation.open {
		opacity: 1;
		visibility: visible;
	}
	
	.menu-main-container  {
		width: 80%;
		margin: 0 auto;
		padding: 50px 0;
	}
	
	.main-navigation ul {
		display: block;
	}
	
	.main-navigation ul li {
		text-transform: none;
		background: none;
		letter-spacing: 0;
		font-size: 42px;
		font-weight: 800;
		text-align: left;
		box-shadow: none;
	}
	
	.main-navigation ul li:after {
		background: var(--mainBackground);
	}
	
	.main-navigation ul li a {
		color: var(--invertText);
		padding: 5px 5px;
	}
	
	.header-inner {
		align-items: center;
		padding-right: 20px;
	}
	
	.nav-controls {
		right: 20px;
	}
	
	.site-color-controls {
		 position: relative;
		 margin: 0 25px 0 0;
	}
	
	.site-color-controls li {
		padding: 7px;
	}
	
	.site-color-controls svg {
		width: 15px;
		max-height: 15px;
	}
}

@media screen and (max-width: 768px) {
	header.site-header .header-logo img,
	header.site-header .header-logo svg {
		width: 140px;
	}
	
	.main-navigation ul li {
		font-size: 36px;
	}
	
	.main-navigation {
		 padding: 70px 0px 35px;
	}
}

@media screen and (max-width: 550px) {
	header.site-header .header-logo img,
	header.site-header .header-logo svg {
		width: 120px;
	}
	
	.main-navigation ul li {
		font-size: 30px;
	}
}

.toggle-menu {
	display: none;
	width: 28px;
	height: 20px;
	
	text-decoration: none;
	border: 0;
	
	cursor: pointer;
	
	z-index: 3;
}

.toggle-menu span:after,
.toggle-menu span:before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
}

.toggle-menu span:after {
	top: 18px;
}

.toggle-menu span {
	position: relative;
	display: block;
}

.toggle-menu span,
.toggle-menu span:after,
.toggle-menu span:before {
	width: 100%;
	height: 2px;
	background-color: var(--accentBackground);
	transition: all 0.3s;
	backface-visibility: hidden;
	border-radius: 2px;
}

.toggle-menu.on span {
	background-color: transparent;
}

.toggle-menu.on span:before {
	transform: rotate(45deg) translate(-1px, 0px);
}

.toggle-menu.on span:after {
	transform: rotate(-45deg) translate(6px, -7px);
}

.toggle-menu.on span:after,
.toggle-menu.on span:before {
	background-color: var(--secondaryBackground);	
}

@media screen and (max-width: 850px) {
	.toggle-menu {
		display: block;
	}
}

.mobile-menu-logo {
	display: none;
	
	width: 80%;
	max-width: 300px;
	margin: 0 auto;
}

.mobile-menu-logo svg {
	max-width: 100%;
}

.mobile-menu-logo svg g {
	fill: var(--invertText);
}

@media screen and (max-width: 850px) {
	.mobile-menu-logo {
		display: block;
	}
}

/* Footer */

footer.padding {
	padding: 75px 0;
}

.footer-inner  {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.footer-logo {
	width: 50%;
	max-width: 350px;
}

.footer-logo svg {
	width: 100%;
}

.footer-logo svg g {
	fill: var(--invertBackground2);
}

.footer-nav a {
	font-size: 14px;
	color: var(--mainText);
	display: inline-block;
	margin-left: 15px;
}

.footer-nav a:first-child {
	margin-left: 0;
}

.footer-nav a:hover {
	color: var(--accentText);
}

.footer-extras-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.footer-extras-container .footer-extras-block.invert {
	background: var(--invertBackground);
	color: var(--invertText);
}

.footer-extras-container .footer-extras-block.accent {
	background: var(--secondaryBackground);
	color: var(--mainText);
}

.footer-extras-container .footer-extras-block.reverse {
	background: var(--accentBackground);
	color: var(--invertText2);
}

.footer-extras-container .footer-extras-block.center {
	text-align: center;
}

.footer-extras-department  {
	grid-column: span 2;
	padding: 3rem 0;
}

.footer-extras-block-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 2rem;
}

.footer-extras-container .contain {
	width: 80%;
}

.footer-extras-container h3 {
	margin: 0 0 20px;
}

.footer-extras-container p {
	max-width: 450px;
}

.footer-extras-header {
	margin: 0 0 25px;
}

.footer-extras-department .footer-extras-header  {
	display: flex;
	align-items: center;
}

.footer-extras-department .footer-extras-header h3 {
	font-size: 3rem;
}

@media screen and (max-width: 750px) {
	.footer-extras-container {
		grid-template-columns: minmax(0, 1fr);
	}
	
	.footer-extras-department {
		grid-column: span 1;
	}
}

@media screen and (max-width: 600px) {
	.footer-logo {
		width: 60%;
		margin: 0 auto 35px;
	}
	
	.footer-nav {
		width: 100%;
		text-align: center;
	}
}

/* Home */

/* Intro */

.intro-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding: 14rem 0 0;
	z-index: 2;
}

.intro-background {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	z-index: 1;
}

.intro-background::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	
	background: linear-gradient(to right, #000000 0%,rgba(0, 0, 0, 0) 35%),linear-gradient(to top, #000000 0%,rgba(0, 0, 0, 0) 50%);
}

.intro-background img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 2;
}

.intro-navigation {
	margin: 7rem 0 4rem;
}

.intro-navigation h4 {
	font-size: 1.35rem;
}

.intro-navigation a.button {
	border: 1px solid var(--accentText);
}

.intro-navigation a.button svg path {
	stroke: var(--mainText);
}

.intro-navigation .intro-navigation-grid div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	
	padding: 0 0 0 2rem;
	border-left: 1px solid var(--secondaryBackground);
}

.intro-navigation .intro-navigation-grid {
	display: flex;
	gap: 3rem;
	
	flex-wrap: wrap;
}

.intro-navigation .eyebrow {
	margin-bottom: 2rem;
}

.hero-text-headline, 
#discover {
	opacity: 0;
}

.hero-text {
	position: relative;	
	padding: 0;
	margin: 0 0 4rem;
	
}

.hero-text-headline,
.hero-text-year {
	position: relative;
	z-index: 2;
}

.hero-text-year span {
	display: block;
	 font-size: 0.8em;
	 font-weight: 600;
	 color: var(--secondaryText);
	 line-height: 1.4em;
	 margin: 0 0 1rem;
	 letter-spacing: 0.05em;
	 text-transform: uppercase;
}

.hero-text video {
	max-width: 100%;
	height: 75vh;
	transform: scale(1.05) translateX(-3%);
	-webkit-transform: scale(1.05) translateX(-3%);
}

.hero-text-logo {
	max-width: 350px;
	margin: 0 0 30px;
}

.hero-text h1 {
	margin: 0;
	line-height: 1em;
	font-size: 72px;
	color: var(--mainText);
}

.hero-text p {
	font-weight: 200;
	font-size: 1.1rem;
	font-family: 'Interstate';
	max-width: 775px;
}

.hero-tagline {
	position: absolute;
	display: flex;
	align-items: center;
	bottom: 0;
	right: 0;
	z-index: 3;
	transform: translate(0,50%);
	padding: 0 0 0 25px;
	background: var(--mainBackground);
}

.hero-tagline h5 {
	font-weight: 600;
	font-size: 1.15rem;
	margin: 0 25px 0 0;
}

.arrow {
	position: relative;
	width: 40px;
	height: 40px;
	border: 1px solid var(--primary);
	border-radius: 100%;
}

.department-blob {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.blob-container {
	position: relative;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	z-index: 0;
}

.blob-container canvas {
	transform: scale(0);
	-webkit-transform: scale(0);
	
	transform-origin: center;
}

.department-blob {
	transition: transform 0.3s ease;
	-webkit-transition: transform 0.3s ease;
}

.blob-container:first-child {
	z-index: 1;
}

.blob-container:last-child {
	z-index: 2;
}

.blob-image-container {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	
	-webkit-clip-path: url(#svgPath);
	 clip-path: url(#svgPath);
	 
	 z-index: 2;
}

.blob-container img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	object-fit: cover;
}

.blob-color-container {
	position: absolute;
	 top: 50%;
	 left: 50%;
	 width: calc(100% + 20px);
	 height: calc(100% + 20px);
	 transform: translate(-50%, -50%);
	 -webkit-transform: translate(-50%, -50%);
	
	-webkit-clip-path: url(#svgPath);
	 clip-path: url(#svgPath);
}

.blob-color-container span {
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--accentBackground);
}


#top-blob-container {
	mix-blend-mode: darken;
	z-index: 3;
}

/* #top-blob-container div.blob {
	mix-blend-mode: lighten;
}

#bottom-blob-container div.blob{
	mix-blend-mode: lighten;
} */

/* #top-blob-container div.blob, 
#bottom-blob-container div.blob {
	background: black;
} */

#top-blob-container svg path {
	fill: white;
}

#bottom-blob-container svg path {
	fill: black;
}

div.blob {
	height: 0;
}

div.blob svg {
	max-width: 100%;
	max-height: 100%;
	margin: 0 auto;
}

div.blob svg path {
	visibility: hidden;
}

div.blob svg path.blob-start {
	visibility: visible;
}

.background-blob {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	//background-color: var(--mainBackground);
}

.department-info {
	position: absolute;
	left: calc(50% + 175px);
	top: 25%;
	width: 300px;
	z-index: 5;
	text-shadow: 0 0 10px rgba(0,0,0,0.25);
}

.department-info a {
	display: block;
	position: relative;
	text-decoration: none;
}

.department-info .department-line {
	position: relative;
	display: block;
	width: 100%;
	height: 2px;
	transform-origin: left;
	background: yellow;
	
	transform: scaleX(0);
	-webkit-transform: scaleX(0);
}

.department-info .overflow {
	display: block;
	width: 100%;
	overflow: hidden;
	margin: 5px 0 0;
}

.department-info .overflow span.department-title {
	display: block;
	font-family: 'Interstate','Helvetica', sans-serif;
	font-weight: 800;
	color: yellow;
	position: relative;
	width: 100%;
	font-size: 18px;
	text-transform: uppercase;
	transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	letter-spacing: 0.03em;
}

/* Home Intro Animation */

@media screen and (min-width: 768px) {
	  .hero-text h1 br {
		  display: block;
	  }
}
 
@media screen and (max-width: 960px) {
	.hero-text h1 {
		 font-size: 52px;  
	}
}

@media screen and (max-width: 700px) {
	#intro {
		padding: 100px 0 0;
	}

	.intro-inner {
		padding: 4rem 0 0;
	}
	
	.hero-text-year span {
		margin: 0 0 1rem;
		font-size: 0.9rem;
	}
	
	.intro-inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
	}
	
	.hero-text h1 {
		 font-size: 42px;  
	}
}

@media screen and (max-width: 550px) {
	.hero-text h1 {
		 font-size: 38px;  
	}	
}

/* Page  */

.page-intro, 
.programs {
	opacity: 0;
}

.page-intro {
	padding: 12rem 0 4rem;
}

.page-intro-inner h1 {
	padding: 0;
	margin: 0;
}

/* Blocks */

.block-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 25px;
}

.programs {
	margin: 0 0 4rem;
}

.programs .block-grid {
	grid-gap: 45px 25px;
}

.block-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.block-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.block-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

.block-grid-5 {
	grid-template-columns: repeat(5, 1fr);
}

@media screen and (max-width: 1200px) {
	.block-grid-5  {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media screen and (max-width: 1050px) {
	.block-grid-5,
	.block-grid-4 {
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20px;
	}
}

@media screen and (max-width: 800px) {
	.block-grid-5,
	.block-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.block-grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.programs .block-grid {
		grid-gap: 15px;
	}
}

@media screen and (max-width: 400px) {
	.block-grid-5,
	.block-grid-4,
	.block-grid-3,
	.block-grid-2 {
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 15px;
	}
	
	.block-grid-5.block-grid-mobile-2,
	.block-grid-4.block-grid-mobile-2,
	.block-grid-3.block-grid-mobile-2 {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 15px;
	}
}

.block {
	position: relative;
	box-sizing: border-box;
}

.block-link, 
.block-inner {
	height: 100%;
	width: 100%;
}

.block-inner {
	display: flex;
	flex-direction: column;
}

.block-image {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: var(--accentBackground);
	box-shadow: 0 0 5px rgb(0 0 0 / 15%);
}

.block .block-image img {
	-webkit-transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
	-moz-transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
	-o-transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
	transition: 0.5s cubic-bezier(0.42, 0, 0, 0.99);
}

.block:hover .block-image img {
	transform: scale(.97);
}

.block-image.award:after {
	content: "";
	position: absolute;
	top: 100%;
	right: 15px;
	width: 75px;
	height: 75px;
	transform: translateY(-75%);
	-webkit-transform: translateY(-75%);
	background: url(assets/award.svg);
	background-size: contain;
	z-index: 1;
}

.block-image.mfa-award:after {
	content: "";
	position: absolute;
	top: 100%;
	right: 15px;
	width: 75px;
	height: 75px;
	transform: translateY(-75%);
	-webkit-transform: translateY(-75%);
	background: url(assets/mfa-award.svg);
	background-size: contain;
	z-index: 1;
}

@media screen and (max-width: 600px) {
	.block-image.award:after,
	.block-image.mfa-award:after  {
		right: 10px;
		width: 50px;
		height: 50px;
	}
}


.block-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.block-image svg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 500px;
	max-width: 80%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

.block-image svg g {
	fill: var(--invertText2);
}

.block-info {
	position: relative;
	padding: 1.2rem 0;
	flex: 1;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.block-info:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--secondaryBackground);
}

.block-info:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	
	transform: scaleX(0);
	-webkit-transform: scaleX(0);
	
	transition: transform 0.3s ease;
	-webkit-transition: transform 0.3s ease;
	transform-origin: left;
	z-index: 1;
	
	background: var(--accentBackground);
}

.block:hover .block-info:before {
	transform: scaleX(1);
	-webkit-transform: scaleX(1);
}

.block-info h3,
.block-info .graduate-headline {
	font-size: 0.9rem;
	line-height: 1.25em;
	font-weight: bold;
	margin: 0;
	
	color: var(--mainText);
}

.block-info-department {
	display: block;
	color: var(--secondaryText);
	font-size: 0.8em;
	font-weight: 500;
	margin: 3px 0 0;
}

.block-info-department span:after {
	content: ", ";
	position: relative;
}

.block-info-department span:last-child:after  {
	content: none;
}

@media screen and (max-width: 550px) {
	.block-info {
		padding: 1rem 0;
	}
}

/* Department */

.department-intro-inner {
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
}

.department-header {
	position: relative;
	padding: 200px 0 75px;
	
	display: flex;
	align-items: flex-end;
	border-bottom: 1px solid var(--secondaryBackground);
}

.department-header-inner {
	max-width: 1000px;
}

.department-header h1 {
	line-height: 1em;
	margin: 5px 0 35px;
	font-size: 4rem;
}

.department-header p {
	font-weight: 300;
}

.department-header a {
	color: var(--mainText);
	font-weight: 700;
}

.video-popup {
	max-width: 100vh;
	width: 100vw;
	padding: 0 35px;
	margin: auto;
}

.embed-container {
	 position: relative;
	 padding-bottom: 56.25%;
	 overflow: hidden;
	 max-width: 100%;
	 height: auto;
}

.embed-container iframe, .embed-container object, .embed-container embed {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
}

.department-header .eyebrow, .department-header .page-title, .department-header .archive-description {
	visibility: hidden;
}

.department-header a.read-more-department {
	display: inline;
	margin: 10px 0 0;
	text-transform: capitalize;
	font-size: 0.95em;
	font-weight: normal;
	color: var(--secondaryText);
}

.department-header a.read-more-department:hover {
	border-bottom: 1px solid;
}

.visit-site {
	margin: 30px 0 0;
}

a.visit {
	display: inline-block;
	color: var(--mainText);
	font-weight: 700;
	border-bottom: 1px solid;
}


a.visit:active,
a.visit:focus {
	color: var(--invertText);
}

.department-featured,
.department-featured-container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.department-featured-container .cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--mainBackground);
}

.department-featured-container .cover, 
.department-featured-container .department-featured {
	transform-origin: left;
	transform: scaleX(0);
	-webkit-transform: scaleX(0);
}

.department-featured-video {
	position: relative;
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
	 object-position: center;
}

.department-featured img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.play-button {
	position: absolute;
	width: 50px;
	bottom: 25px;
	left: 25px;
	
	cursor: pointer;
}

.play-button svg {
	vertical-align: middle;
}

.play-button svg circle {
	transition: all 0.225s ease;
	-webkit-transition: all 0.225s ease;
}

.play-button:hover svg circle {
	fill: var(--primary);
}

@media screen and (max-width: 800px) {
	.department-intro-inner {
		grid-template-columns: 1fr;
		padding: 4rem 0 0;
	}
	
	.department-header {
		position: relative;
		padding: 75px 0;
	}
	
	.department-header {
		order: 2;
	}	
	
	.department-header h1 {
		margin: 5px 0 25px;
		font-size: 2.5rem;
	}
	
	.department-featured-container {
		min-height: 500px;
	}
}

.department-blocks {
	visibility: hidden;
}

.department-blocks h4 {
	margin: 4rem 0 1.5rem;
}

.no-students h3 {
	font-size: 1.5rem;
	 font-weight: 300;
	 margin: 0 0 2rem;
}

.department-info-container {
	display: grid;
	grid-template-columns: 2fr 1fr;
}

.department-info-container h5 {
	font-size: 1rem;
	margin: 0;
}

.department-info-container p {
	font-size: 1rem;
	margin: 5px 0;
}

.department-info-groups {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 25px;
}

.department-info-group.follow h5 {
	margin: 0 0 10px;
}

.department-sponsors .contain {
	width: 75%;
}

@media screen and (max-width: 980px) {
	.department-info-container {
		grid-template-columns: 1fr;
	}
	.department-sponsors .contain {
		width: 90%;
	}
}

@media screen and (max-width: 550px) {
	.department-info-groups {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 15px;
	}
}


/* Discover */

#discover h4 {
	font-size: 1.5rem;
	line-height: 1.4em;
}

.discover-intro {
	padding: 200px 0 50px;
}

.filters {
	/* display: grid;
	grid-template-columns: repeat(4,250px);
	grid-gap: 10px;
	padding: 0 0 50px 0; */
}

.filters-main {
	position: relative;
	z-index: 1;
}

.filters-header {
	display: flex;
	align-items: center;
	margin: 0 0 50px;
}

.filters-header h1 {
	margin: 0 5vw 0 0;
}

.filters-header .filters.main {
	display: flex;
	align-items: stretch;
}

.filters.main,
.facetwp-facet-search {
	flex-grow: 1;
}

.facetwp-icon {
	height: 40% !important;
	top: 30% !important;
	right: 10px !important;
	opacity: 1 !important;
}

.filters-main .facetwp-icon:before {
	background: url('assets/search-icon.png') no-repeat;
	background-size: contain;
	background-position: center;
}

.theme-ccs .filters-main .facetwp-icon:before {
	background: url('assets/search-icon.png') no-repeat;
	background-size: contain;
	background-position: center;
}

.facetwp-dropdown {
	padding: 10px 20px 10px 10px;
	margin: 0 10px 0 0;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 0;
	border: 1px solid var(--accentBackground);
	border-radius: 50px;
	background: var(--mainBackground);
	color: var(--mainText);
	width: 250px;
	outline: none;
	
	transition: all 0.225s ease;
	-webkit-transition: all 0.225s ease;
}


@media screen and (max-width: 980px) {
	.discover-intro {
		padding: 150px 0 50px;
	}
	
	.filters-header {
		display: block;
	}
	
	.filters-header h1 {
		margin: 0 0 25px;
	} 
	
	.filters-header .filters.main {
		display: block;
	}
	
	.filters .facetwp-facet input.facetwp-search {
		padding: 15px;
	}
}

@media screen and (max-width: 600px) {
	.filters-header h1 {
		font-size: 3.5em;
	}
	
	#discover {
		padding: 2rem 0 5rem;
	}
}


.filters-main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 0 0 3rem 0;
}

.filters-mobile-toggle {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 5%;
	background: var(--mainBackground);
	font-weight: bold;
	font-size: 15px;
	cursor: pointer;
}

.filters-main .filters-mobile-toggle span {
	-webkit-transition: transform 0.3s ease;
	transition: transform 0.3s ease;
}

.filters-main.open .filters-mobile-toggle span {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

@media (min-width: 600px) {
	.filters-mobile-toggle {
		display: none;
	}
}

.filters.flex > div:last-child {
	margin: 0 0;
}

.filters {
	display: grid;
	grid-template-columns: repeat(4, minmax(0,1fr));
	flex-grow: 1;
	grid-gap: 15px 20px;
	max-width: 1000px;
	margin: 0 20px 2rem 0;
}

.filters .fs-label-wrap,
.filters .fs-wrap {
	width: 100%;
	position: relative;
}

.filters-group {
	margin: 0 35px 35px 0;
}

.filters .eyebrow {
	margin: 0 0 10px;
	display: block;
	color: var(--mainText);
	font-weight: 700;
}

.filters .facetwp-radio,
.filters .facetwp-radio.checked,
.filters .facetwp-checkbox, 
.filters .facetwp-checkbox.checked {
	background: none;
	background-image: none;
}

.filters .facetwp-radio,
.filters .facetwp-checkbox {
	font-size: 11px;
	font-weight: 700;
	
	padding: 10px 18px;
	color: var(--secondaryText);
	border: 2px solid #EFEFEF;
	border-radius: 30px;
	
	display: inline-block;
	margin: 0 10px 10px 0;
	
	transition: background 0.225s ease;
	-webkit-transition: background 0.225s ease;
}

.filters .facetwp-radio:hover,
.filters .facetwp-checkbox:hover,
.filters .facetwp-radio.checked:hover,
.filters .facetwp-checkbox.checked:hover {
	background: var(--accentBackground);
	border-color: var(--accentBackground);
}

.filters .facetwp-radio.checked,
.filters .facetwp-checkbox.checked {
	background: #EFEFEF;
}

.filters.main .facetwp-type-radio .facetwp-radio {
	height: 100%;
	display: flex;
	align-items: center;
	border: 0;
	background: #F2F2F2;
	border-radius: 0;
	margin: 0 1px;
	padding: 5px 25px;
	text-transform: uppercase;
}

.filters.main .facetwp-type-radio .facetwp-radio.checked {
	background: var(--primary);
}

.filters.main .facetwp-type-radio .facetwp-radio:hover {
	background: var(--primary);	
}

.filters.main .facetwp-type-radio .facetwp-radio:first-child {
	margin-left: 10px;
	display: none;
}

.facetwp-radio[data-value="current-show"]:before,
.facetwp-radio[data-value="students"]:before {
	content: "By";
	margin-right: 5px;
}

.filters.main .facetwp-type-radio .facetwp-radio .facetwp-counter {
	display: none;
}

.facetwp-counter {
	display: none;
	font-weight: 300;
	font-size: 9px;
}

.filters .facetwp-facet {
	opacity: 1 !important;
	margin-bottom: 0;
}

.filters.main .facetwp-facet {
	display: flex;
	align-items: center;
}

.filters.main .facetwp-facet.facetwp-type-radio {
	margin: 0 0 0 10px;
}

.filters .facetwp-color {
	box-shadow: none;
	border-radius: 50%;
}

.filters .facetwp-facet-search .facetwp-input-wrap,
.filters .facetwp-facet input.facetwp-search {
	width: 100%;
	max-width: 100%;
	min-width: auto;
}

.filters .facetwp-facet input.facetwp-search {
	padding: 10px 10px 10px 12px;
	 font-size: 1rem;
	 font-weight: 300;
	 color: var(--mainText);
	 border: 1px solid var(--mainText);
	 border-radius: 50px;
	 background-color: var(--mainBackground);
}

.filters .facetwp-facet input.facetwp-search:focus {
	outline: 0;
}

.facetwp-icon.f-loading:before {
	 background-image: url('assets/loading.png') !important;
	 animation: spin 700ms infinite linear;
}

.filters .facetwp-facet input.facetwp-search::placeholder {
	color: var(--secondaryText);
	font-size: 0.9rem;
}


.filters .facetwp-color.checked::after {
	content: '';
	position: absolute;
	border: 2px solid #fff;
	border-top: 0;
	border-right: 0;
	width: 10px;
	height: 5px;
	transform: rotate(
-45deg
);
	-webkit-transform: rotate(
-45deg
);
	margin: 10px 0 0 9px;
}

.filters button.button,
.filters a.button {
	position: relative;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 0.1em;
	font-weight: 600;
	margin-left: 20px;
	border: 0;
	
	line-height: 1.5em;
	
	cursor: pointer;
	
	color: var(--invertText);
	
	background: var(--invertBackground);
	
	transition: background 0.225s ease;
	-webkit-transition: background 0.225s ease;
}

.filters button.button span,
.filters a.button span {
	position: relative;
	z-index: 1;
}

.filters button.button:after ,
.filters a.button:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--secondaryBackground);
	
	transform: scaleX(0);
	transform-origin: left;
	
	transition: transform 0.225s ease;
	-webkit-transition: transform 0.225s ease;
}

.filters button.button:hover:after ,
.filters a.button:hover:after {
	transform: scaleX(1);
	-webkit-transform: scaleX(1);
}

.filters button.button:hover ,
.filters a.button:hover {
	color: var(--mainText);
}

@media screen and (max-width: 980px) {
	.filters.main .facetwp-type-radio .facetwp-radio {
		margin: 0;
		padding: 20px 25px;
		text-align: center;
		display: block;
	}
	
	.filters.main .facetwp-facet.facetwp-type-radio {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 3px;
		margin: 3px 0 0;
	}
	
	.filters.main .facetwp-type-radio .facetwp-radio[data-value="current-show"] {
		margin-left: 0;
	}
	
	.filters-main {
		display: block;
	}
	
	.filters {
		margin: 0 0 20px;
	}
}

@media screen and (max-width: 860px) {
	.filters {
		display: grid;
		grid-template-columns: repeat(2, minmax(0,1fr));
		margin: 0 0 20px;
	}
}

@media screen and (max-width: 600px) {
	.filters-group {
		margin: 0 0 20px 0;
	}
	
	.filters .filters-group .facetwp-radio, 
	.filters .filters-group .facetwp-checkbox {
		font-size: 9px;
		padding: 9px 16px;
	}
	
	.filters {
		display: grid;
		grid-template-columns: repeat(1, minmax(0,1fr));
		margin: 0 0 2rem;
		padding: 0 5%;
	}
	
	.reset {
		padding: 0 0 2rem;
	}
	
	.filters-main {
		position: relative;
		top: 0;
		z-index: 9;
		padding: 0 0;
		margin: 0 -5%;
		background: var(--mainBackground);
	}
	
	.filters-main .filters,
	.filters-main .reset  {
		display: none;
	}
	
	.filters-main.open .filters {
		display: grid;
	}
	
	.filters-main.open .reset {
		display: block;
	}
	
	
}

.filters .fs-label-wrap {
	background: var(--mainBackground);
	border: 1px solid var(--mainText);
	border-radius: 999px;
	padding: 7px 5px;
	}

.filters .fs-label-wrap .fs-label {
	color: var(--mainText);
	font-size: 0.9rem;
	font-weight: 400;
	padding: 6px 20px 6px 8px;
}

.filters .fs-label-wrap:hover {
	background: var(--mainText);
	cursor: pointer;
	
	transition: color 0.3s ease;
	-webkit-transition: color 0.3s ease;
}

.filters .fs-label-wrap:hover .fs-label {
	color: var(--invertBackground);
}

body.theme-dark .filters .fs-label-wrap:hover .fs-label {
	color: black;
}

body.theme-light .filters .fs-label-wrap:hover .fs-label {
	color: black;
}

body.theme-ccs .filters .fs-label-wrap:hover .fs-label {
	color: white;
}

.filters .fs-arrow {
	border-top: 5px solid var(--mainText);
	right: 12px;
}

body.theme-dark .filters .fs-label-wrap:hover .fs-arrow {
	border-top: 5px solid black;
}

body.theme-ccs .filters .fs-label-wrap:hover .fs-arrow {
	border-top: 5px solid white;
}

.filters .fs-dropdown {
	 width: 100%;
	 position: absolute;
	 background-color: var(--mainBackground);
	 border: 1px solid var(--accentBackground);
	 margin-top: 8px;
	 z-index: 1000;
	 border-radius: 14px;
}

.filters .fs-search input {
	 border: none !important;
	 box-shadow: none !important;
	 outline: none;
	 padding: 10px 0;
	 font-size: 0.9rem;
	 width: 100%;
	 color: var(--invertBackground);
	 background: var(--mainBackground);
}

.filters .fs-no-results,
.filters .fs-option {
	color: var(--invertBackground);
	padding: 6px 8px;
}

.filters .fs-option:hover {
	background-color: var(--invertBackground);
	cursor: pointer;
}

.filters .facetwp-type-fselect .fs-option .fs-option-label {
	 white-space: nowrap;
	 font-size: 0.9rem;
	 padding: 0px 0;
	 color: var(--invertBackground);
}

.filters .fs-option:hover .fs-option-label {
	color: var(--mainBackground);
}

.filters .fs-wrap.single .fs-option.selected {
	 background-color: var(--accentBackground);
}

.filters .fs-wrap.single .fs-option.selected .fs-option-label {
	 color: var(--invertText);
}

/* Base */

section.base .contain {
	max-width: 1440px;
}

section.base .form-contain {
	max-width: 1000px;
}

section.base h1 {
	margin: 30px 0 15px;
}

section.base header {
	padding: 25px 0;
	 margin: 0 0 50px;
	 border-bottom: 1px solid var(--secondaryBackground);
}

.info-sections,
.info-section {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 25px;
}

.info-section {
	padding: 50px 0 0;
	grid-template-columns: 1fr 2fr;
}

.info-section:first-child {
	padding: 0;
}

.info-section-text p:first-child {
	margin-top: 0;
}

.info-section .info-section-subhead h4,
.info-section .info-section-subhead h3 {
	position: sticky;
	top: 35px;
}

@media screen and (max-width: 960px) {
	section.base header {
		padding: 50px 0 0px;
		margin: 0 0 50px;
		border-bottom: 1px solid #D6D6D6;
	}
	
	.info-section {
		grid-template-columns: 1fr;
		grid-gap: 0;
	}
}

@media screen and (max-width: 500px) { 
	.info-sections {
		grid-gap: 0;
	}
}

.faq-inner {
	display: grid;
	grid-template-columns: 1fr 2fr;
}

.faq h2 {
	padding-right: 50px;
}

@media screen and (max-width: 960px) {
	.faq-inner {
		display: grid;
		grid-template-columns: 1fr;
	}
}


.accordion{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
}

.a-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-bottom: 5px;
}

.a-btn{
	margin: 0;
	position: relative;
	padding: 15px 50px 15px 0;
	width: 100%;
	font-weight: 400;
	display: block;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	background: transparent;
	color: var(--mainText);
	border-bottom: 1px solid var(--secondaryText);
	border-radius: 0;
}

.a-btn span{
	display: block;
	position: absolute;
	height: 14px;
	width: 14px;
	right: 20px;
	top: 18px;
}

.a-btn span:after {
	content: '';
	width: 14px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--secondaryText);
	position: absolute;
	top: 6px;
}

.a-btn span:before {
	content: '';
	width: 14px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--secondaryText);
	position: absolute;
	top: 6px;
	transform: rotate(90deg);
	transition: all 0.3s ease-in-out;
}

.a-panel {
	width: 100%;       
	color: var(--mainText);
	transition: all 0.2s ease-in-out;
	opacity: 0;
	height: auto;
	max-height: 0;
	overflow: hidden;
	padding: 0px;
}

.a-container.active .a-btn {
	 color: var(--mainText);	 
}

.a-container.active .a-btn span:before{
	transform: rotate(0deg);
}

.a-container.active .a-panel {               
	 padding: 25px 0px 20px 0px;
	 opacity: 1;
	 max-height: 500px;              
}


/* Error */

.error-404 .page-header {
	padding: 250px 0 150px;
	background: var(--mainBackground);
	color: var(--mainText);
}

@media screen and (max-width: 960px) {
	.error-404 .page-header {
		padding: 200px 0 100px;
	}
}


/* Student Submission Form */

.black-header {
	padding: 150px 0 50px 0;
	background: black;
	color: #fff;
}

.page-description-container {
	max-width: 1000px;
}

.black-header header {
	margin: 0 !important;
	border-bottom: 0 !important;
}

.acf-button,
.upload-files {
	position: relative;
	border: 2px solid black;
	color: black !important;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.08em;
	font-weight: bold;
	border-radius: 100px;
	background: none;
	outline: 0;
	padding: 10px 18px;
	
	transition: color 0.225s ease, background 0.225s ease;
	-webkit-transition: color 0.225s ease, background 0.225s ease;
}

.acf-button:hover {
	background: black;
	color: white;
}

.acf-input .button, 
.upload-files {
	background: black;
	color: white !important;
	border: 1px solid;
}
.acf-input .button:hover,
.upload-files:hover {
	background: white;
	color: black !important;
}

.acf-actions .button-primary {
	width: 100%;
	text-align: center;
}

.acf-field .acf-label {
	margin: 0 0 0 !important;
}

.acf-field .acf-input > p.description {
	font-size: 14px;
	font-style: italic;
	margin: 0 0 10px 0;
	color: var(--secondary);
}

.acf-field .acf-label label {
	margin: 0 !important;
}

.acf-field p.description {
	font-size: 14px;
	font-style: italic;
	margin: 0 0 10px 0 !important;
	font-weight: 100;
	color: var(--secondary);
}

.acf-input-wrap input {
	border-radius: 0;
}

.acf-field input {
	padding: 12px !important;
	font-size: 16px !important;
}

.categorychecklist-holder {
	border-radius: 0 !important;
}

.acf-image-uploader {
	max-width: 250px;
}

.uploads-progress .percent {
	z-index: 10;
	position: relative;
	padding: 0;
	color: #000 !important;
	text-align: center;
	font-size: 14px !important;
	line-height: 1;
	font-weight: 400;
	text-shadow: none !important;
}

.uploads-progress .bar {
	z-index: 9;
	width: 0;
	height: 100%;
	margin-top: -22px;
	border-radius: 0 !important;
	background-color: var(--primary) !important;
	box-shadow: none !important;
}

ul.acf-checkbox-list li {
	font-size: 16px !important;
	line-height: 26px !important;
}

.frontend-admin-message {
	z-index: 20000 !important;
}

/* Marquee  */

.marquee {
	position: relative;
	top: 0;
	left: -50px;
	width: calc(100% + 100px);
	font-size: 1.5rem;
	line-height: 1;
	overflow: hidden;
	font-weight:800;
	/* text-transform: uppercase; */
	color:  var(--invertText2);
}

.marquee a {
	color:  var(--invertText2);
}

.marquee.purple {
	background: #7B61FF;
	transform: rotate(2deg);
	-webkit-transform: rotate(2deg);
}

.marquee.black {
	background: black;
	transform: rotate(-2deg);
	-webkit-transform: rotate(-2deg);
}

.straight .marquee {
	transform: none;
	-webkit-transform: none;
}

@keyframes moveLeft {
  0% {
	transform: translateX(0);
	-webkit-transform: translateX(0);
  }
  100% {
	 transform: translateX(-100%);
	 -webkit-transform: translateX(-100%);
  }
}

.marquee span.title {
	/* this is the shorthand (brief) version of the animation css rule */
  animation: moveLeft 100s infinite;
  
  animation-timing-function: linear;
	/* this will ensure the text stays all on the same line*/
  white-space: nowrap;
	/* our span is inline by default, so here we tell it to be block*/
  display: flex;
  align-items: center;
	/* this will let us add our animation */
  position: relative;
} 

.marquee a {
	position: relative;
	padding: 0 150px 0 0;
	
	-webkit-transition: color 0.225s ease;
	transition: color 0.225s ease;
}

.marquee a:hover {
	color: var(--secondaryBackground)
}

.marquee a:after {
	content: "";
	position: absolute;
	right: 25px;
	top: 50%;
	width: 100px;
	background: var(--invertText2);
	height: 2px;
	
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);

}

@media (min-width: 768px) {
	.marquee {
		font-size: 2rem;
	}
}

@media (min-width: 1440px) {
	.marquee {
		font-size: 3rem;
	}
}

.single-nav {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	grid-gap: 0.5rem;
	padding: 1rem;
}

.single-nav-block a {
	display: block;
	width: 100%;
	height: 100%;
	
	color: var(--mainText);
}

.single-nav-block a > div {
	display: flex;
	align-items: center;
	position: relative;
	padding: 2rem;
	background: var(--mainBackgroundShade);
	width: 100%;
	height: 100%;
	
	-webkit-transition: background 0.225s ease;
	transition: background 0.225s ease;
}

.single-nav-block a > div:hover {
	background: var(--secondaryBackground);
}

.theme-light .single-nav-block a > div:hover {
	background: #f8f8f8;
}

.single-nav-block .eyebrow {
	margin: 0 0 4px;
}

.theme-light .single-nav-block a > div .eyebrow {
	color: black;
}

.single-nav-block .student-name {
	font-size: 1.2rem;
	font-weight: 700;
}

.single-nav-next {
	text-align: right;
}

.single-nav-next a > div {
	flex-direction: row-reverse;
}

.single-nav-next a > div > div {
	margin: 0 1rem 0 0;
}

.single-nav-prev a > div > div {
	margin: 0 0 0 1rem;
}

@media (max-width: 768px) {
	.single-nav {
		grid-template-columns: minmax(0,1fr);
		grid-gap: 0.5rem;
	}
}

/* Events */

.info-section-subhead h3 {
	margin: 0 0 5px;
}

.event-hero-information {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1rem;
	background: var(--secondaryBackground);
	align-items: center;
	margin: 0 0 50px;
}

.event-date-time {
	padding: 2.5rem;
}

.event-date-time div {
	margin: 0 0 1.25rem;
}

.event-date-time div:last-child {
	margin: 0 0;
}

.event-date-title {
	font-size: 24px;
	font-weight: bold;
	color: var(--accentText);
	margin: 0 0 20px;
}

.event-date-time h4 {
	margin: 0 0 0.25rem;
	text-transform: uppercase;
	font-size: 0.7rem;
	font-weight: 300;
	letter-spacing: 0.08em;
}

.event-date-time span {
	font-size: 1rem;
	font-weight: 800;
}

.event-image {
	width: 100%;
	height: 100%;
}

.event-image img {
	position: relative;
	height: 100%;
	width: 100%;
	object-fit: cover;
	vertical-align: middle;
}

.event-location p {
	margin: 0;
}

.event-location p:first-child {
	margin: 1rem 0 0;
}

@media (max-width: 900px) {
	.event-hero-information { 
		grid-template-columns: 1fr;	
		grid-gap: 0;
	}
	
	.event-date-time {
		padding: 2rem;
	}
	
	.info-section-subhead h3 {
		font-size: 28px;
	}
	
	.event-date-title {
		font-size: 18px;
	}
}

/* PDC */

.pdc p,
.pdc ul li {
	font-size: 1.2rem;
}

.pdc p a {
	color: black;
}

.pdc p a:visited {
	color: black;
}

.pdc p a:hover {
	color: var(--primary);
}

.pdc ul {
	padding: 0;
	margin: 0;
	
}

.pdc-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 10vw;
}

.page-template-practicing-design-center .site-color-controls,
.single-pdc .site-color-controls  {
	display: none;
}

@media (max-width: 960px) {
	.pdc-grid {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 3rem;
	}
}

/* PDC Intro */

.pdc-intro-content {
	position: relative;
	padding: 25vh 0 6rem;
	z-index: 1;
}

.pdc-intro-content * {
	color: white;
}

section.base .pdc-intro-content h1 {
	font-size: 4vw;
	line-height: 1em;
	font-weight: 900;
	margin: 0 0 12vh;
}

.pdc-intro-background, 
.pdc-intro-background img, 
.pdc-intro-background video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pdc-intro-background:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.7;
	
	background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

@media (max-width: 1080px) {
	section.base .pdc-intro-content h1 {
		font-size: 7vw;
	}
}

@media (max-width: 800px) {
	section.base .pdc-intro-content h1 {
		font-size: 9vw;
	}
	
	.pdc-about-stats {
		margin: 5rem 0 0 !important;
	}
}

/* PDC About */

.apply-button {
	display: flex;
	align-items: center;
}

.apply-button span {
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0 0 0 1rem;
}

.apply-button > div > span {
	display: block;
}

.apply-button .apply-intro {
	font-weight: normal;
}

.pdc-apply .apply-button {
	margin: 2.5rem 0 0;
}

.pdc-about-stats {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}

.pdc-about-stats li {
	text-align: center;
}	

.pdc-about-stats .number {
	font-size: 96px;
	font-weight: 900;
	color: #FFD100;
	line-height: 1;
}

.pdc-about-stats p {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0.5rem 0;
}

.pdc-about-stats p.description {
	text-transform: none;
	font-weight: 300;
	font-size: 0.9rem;
	max-width: 300px;
	margin: 0;
}

.pdc-about-buttons {
	margin: 2rem 0 0;
}

@media (max-width: 960px) {
	.pdc-about-stats .number {
		font-size: 72px;
	}	
}

/* PDC Mission  */

.pdc-mission p {
	font-size: 2.75vw;
	font-weight: 200;
	line-height: 1.2em;
	max-width: 1150px;
	margin: 2rem 0;
}

/* PDC Stories */

.pdc-stories {
	cursor: grab;
}

.pdc-stories:active {
	cursor: grabbing;
}

.pdc-story-logo {
	width: 175px;
	height: 150px;
	
	margin: 0 0 2rem;
}

.pdc-story-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pdc-story-title {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	margin: 0 0 1rem;
}

.pdc-story-title h4,
.pdc-story-title span {
	font-size: 1rem;
	font-style: normal;
	font-weight: 800;
	line-height: normal;
	margin: 0;
	text-transform: uppercase;
}

.pdc-story-title h4.with-subhead {
	border-right: 1px solid;
	padding-right: 0.75rem;
}

.pdc-story-title span {
	font-weight: normal;
}

.pdc-story-description {
	font-size: 1rem;
}

.my-slider-progress {
	position: relative;
	margin: 5rem 0 0;
	background: #ccc;
}
  
.my-slider-progress-bar {
	background: rgb(77, 77, 77);
	height: 2px;
	transition: width 400ms ease;
	width: 0;
}

.pdc-story-success {
	cursor: pointer;
	margin: 2rem 0 1rem;
	font-size: 1rem;
}

/* Slider */

.splide-gallery {
	margin: 0 0 20px;
	cursor: grab;
}

.splide-gallery:active {
	cursor: grabbing;
}

.splide-gallery img {
	height: 100%;
	max-height: 100%;
	/* border: var(--stroke-width) solid black; */
	/* border-radius: 15px; */
	/* margin: 0 10px; */
}

.splide__pagination {
	bottom: 15vw
}

.splide__pagination__page.is-active {
	 background: black;
	 transform: none;
	 z-index: 1;
}

.splide__pagination__page {
	 background: white;
	 height: 20px;
	 opacity: 1;
	 width: 20px;
}

@media (min-width: 768px) {
	.splide__pagination {
		bottom: 10vw
	}
}

@media (min-width: 992px) {
	.splide__pagination {
		bottom: 7vw
	}
}

.pdc-slider-info-link,
.pdc-slider-info {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.pdc-slider-info-link, 
.pdc-slider-info-link h4, 
.pdc-slider-info-link h6 {
	color: white;
}

.pdc-slider-info {
	display: flex;
	align-items: flex-end;
	padding: 2rem;
}

.pdc-slider-info:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.7;
	background: -moz-linear-gradient(bottom right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%); /* FF3.6-15 */
	background: -webkit-linear-gradient(bottom right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 70%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to top right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	z-index: 0;
}

.pdc-slider-info-inner {
	display: flex;
	gap: 1rem;
	z-index: 1;
}

.pdc-slider-info h4, 
.pdc-slider-info h6 {
	margin: 0;
}

.pdc-slider-info h4 {
	font-size: 1.2rem;
}

/* Inforgraphic */

.pdc-experiential-infographic {
	position: relative;
	margin: 6rem 0 0;
}

.pdc-experiential-infographic ul {
	position: relative;
	list-style: none;
	padding: 0 6vw;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 6vw 8vw;
	z-index: 1;
}

.pdc-experiential-infographic ul li {
	position: relative;
	margin: 0;
	padding: 0;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	
	text-align: center;
}

.pdc-experiential-infographic ul li .infographic-icon {
	width: 80px;
	height: 80px;
	background: white;
}

.pdc-experiential-infographic ul li .infographic-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
} 

.pdc-experiential-infographic ul li h4 {
	font-size: 1rem;
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 0.02em;
	margin: 0;
	background: white;
	padding: 0 1rem;
	display: inline-block;
}

.pdc-experiential-infographic ul li p {
	font-size: 0.9rem;
	font-weight: 300;
	margin: 0.5rem 0 0;
	background: white;
	padding: 0 1rem;
}

.infographic-line {
	position: absolute;
	top: calc(80px + 12px);
	height: calc(100px + 6vw);
	width: 100%;
	border-radius: 50px;
	border: 1px dashed;
	z-index: 0;
}

.infographic-line .circle-arrow {
	position: absolute;
	top: -10px;
	left: 0;
	
	width: 20px;
	height: 20px;
	
	border: 1px solid black;
	background: white;
}

.infographic-line .circle-arrow svg {
	width: 10px;
}

.infographic-line .circle-arrow path {
	stroke: black;
}

.infographic-line .circle-arrow.mid-left {
	left: calc(33% - 10px);
}

.infographic-line .circle-arrow.mid-bottom {
	bottom: -10px;
	top: auto;
}

.infographic-line .circle-arrow.mid-right {
	left: calc(66% - 10px);
}

.infographic-line .circle-arrow.mid-center.mid-left {
	left: -10px;
	top: calc(50% - 10px);
} 

.infographic-line .circle-arrow.mid-center.mid-right {
	right: -10px;
	left: auto;
	top: calc(50% - 10px);
} 

@media (max-width: 960px) {
	
	.infographic-line {
		display: none;
	}
	
	.pdc-experiential-infographic ul {
		grid-template-columns: 1fr 1fr;
		padding: 0 4vw;
		grid-gap: 10vw 8vw;
	}
	
	.infographic-line {
		border-radius: 20px;
	}
	
	.pdc-experiential-infographic ul li p,
	.pdc-experiential-infographic ul li h4 {
		padding: 0 0.5rem;
	}
}

/* PDC Project Page */

.pdc-project-intro {
	margin: 2rem 0 0;
}

.pdc-partner {
	font-size: 0.9rem;
	font-style: normal;
	font-weight: 800;
	line-height: normal;
	margin: -0.5rem 0 1rem;
	text-transform: uppercase;
}

.pdc-project-layout {
	margin: 4rem 0 0;
}

.pdc-project-layout img {
	vertical-align: middle;
}

.embed-container { 
	position: relative; 
	padding-bottom: 56.25%;
	overflow: hidden;
	max-width: 100%;
	height: auto;
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pdc-project-layout .layout {
	padding: 0.5rem 0;
}

.pdc-project-layout .layout-text {
	padding: 4rem 0;
}

.layout-text {
	padding: 4rem 0;
}

.layout-image-inner video {
	max-width: 100%;
}

.pdc-image-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1rem;
}

.pdc-funding-partner {
	text-align: center;
}

.ford-fund-logo {
	width: 80%;
	max-width: 400px;
}

/* DROPDOWN */

#home-student-grid {
	transition: opacity 0.35s ease;
	-webkit-transition: opacity 0.35s ease;
}

#home-student-grid.loading-posts {
	pointer-events: none;
	opacity: 0.5;
}

#ajax-filters {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1rem 1rem;
	width: 100%;

	--filter-control-h: 2.75rem;
}

/* Labelled filter cell: small subhead stacked above the control. */
.filter-field {
	display: flex;
	flex-direction: column;
}

.filter-label {
	display: block;
	margin: 0 0 0.5rem;
	color: #fff;
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Every control shares one fixed height so all pills line up. */
#ajax-filters .search-container,
#ajax-filters .search,
#ajax-filters .dropdown,
#ajax-filters .dropdown-title,
#ajax-filters .reset-filters {
	height: var(--filter-control-h);
	box-sizing: border-box;
}

/* Row 1: search spans three columns; columns 4–5 stay empty. */
#ajax-filters .field-search { grid-column: 1 / 4; grid-row: 1; }

/* Row 2: Programs, Years, Hire, [empty], Reset. */
#ajax-filters .field-program    { grid-column: 1 / 2; grid-row: 2; }
#ajax-filters .field-year       { grid-column: 2 / 3; grid-row: 2; }
#ajax-filters .field-employment { grid-column: 3 / 4; grid-row: 2; }
#ajax-filters .reset {
	grid-column: 5 / 6;
	grid-row: 2;
	display: flex;
	align-items: flex-end; /* align the button with the controls, not the subheads */
}
#ajax-filters .reset-filters { width: 100%; }

.dropdown {
  font-family: Helvetica, sans-serif;
  font-size: 0.8rem;

  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.dropdown-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  width: 100%;
  
  font-family: 'Interstate';
  font-size: 0.8rem;
  font-weight: bold;
  
  padding: 0.5rem 0.75rem;

  border-radius: 100px;
  border: 1px solid #fff;
  background: var(--mainBackground);
  color: #fff;

  cursor: pointer;

  transition: background 0.15s ease, color 0.15s ease;
  -webkit-transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-title:hover {
	background: var(--secondaryBackground);
	color: #fff;
}

.dropdown-title:focus {
	outline: 1px solid #fff;
}

.dropdown-title span {
  line-height: 1;
}

.dropdown .dropdown-arrow {
  width: 20px;
  
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.dropdown.open .dropdown-arrow {
	transform: rotate(0);
	-webkit-transform: rotate(0);
}

.dropdown svg {
  width: 100%;
  stroke-width: 5;
}

.dropdown .dropdown-arrow svg path {
	stroke: #fff;
}

.dropdown-title:hover svg path {
	stroke: white;
}

.dropdown-list-container {
  position: absolute;
  top: calc(100% + 0.5rem);
  width: 100%;
  
  border-radius: 20px;
  border: 1px solid black;
  
  background: white;
  color: black;
  
  opacity: 0;
  visibility: hidden;
  
  transform: translateY(0);
  -webkit-transform: translateY(0);
  
  overflow: hidden;
  
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  -webkit-transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

.dropdown.open .dropdown-list-container {
	opacity: 1;
	visibility: visible;
	transform: translateY(0.5rem);
	-webkit-transform: translateY(0.5rem);
}

.dropdown-list-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
  
  max-height: 240px;
  overflow: auto;
}

.dropdown-list-container li {
   padding: 0.25rem 0.75rem;
   
   cursor: pointer;
   
   transition: background 0.15s ease, color 0.15s ease;
   -webkit-transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-list-container li.hidden,
.dropdown-list-container .no-results.hidden {
	display: none;
}

.dropdown-list-container li:focus {
	outline: none;
	background: #efefef;
	color: black;
}

.dropdown-list-container li:hover {
  background: black;
  color: white;
}

.dropdown input {
	border: none;
	padding: 0.75rem 0.75rem;
	border-bottom: 1px solid black;
	border-radius: 0;
	width: 100%;
	font-size: 0.8rem;
	color: black;
	background: #efefef;
}

.dropdown input:focus, 
.dropdown input:active {
	outline: none;
	background: #d6d6d6;
}

.dropdown select {
	display: none;
}

.search-container {
	position: relative;
	height: auto;
}

.search-button {
	position: absolute;
	right: 4px;
	top: 0;
	height: 100%;
	width: 40px;
	padding: 10px;
	
	cursor: pointer;
	transition: opacity 0.15s ease;
	-webkit-transition: opacity 0.15s ease;
}

.search-button:hover {
	opacity: 0.5;
}

.search-button svg path,
.search-button svg circle {
	stroke: #fff;
}

#ajax-filters .search {
	font-family: 'Interstate';
	font-size: 0.8rem;
	font-weight: bold;
	color: #fff;
	background: var(--mainBackground);
	padding: 0.5rem 0.75rem;
	height: 100%;
	width: 100%;
	min-width: 0;
	border-radius: 100px;
	border: 1px solid #fff;

	transition: background 0.15s ease, color 0.15s ease;
	-webkit-transition: background 0.15s ease, color 0.15s ease;
}

#ajax-filters .search:hover {
	background: var(--secondaryBackground);
}

#ajax-filters .search:focus,
#ajax-filters .search:active {
	outline: 1px solid var(--primary);
}

#ajax-filters .search::placeholder {
	color: #cfcfcf;
	font-weight: normal;
}

/* Reset button — same black / white-border / grey-hover look as the controls. */
#ajax-filters .reset-filters {
	width: 100%;
	border: 1px solid #fff;
	background: var(--mainBackground);
	color: #fff;
}

#ajax-filters .reset-filters:hover {
	background: var(--secondaryBackground);
	color: #fff;
	border-color: #fff;
}

/* Responsive: collapse the 4-column grid. */
@media screen and (max-width: 860px) {
	#ajax-filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	#ajax-filters .field-search,
	#ajax-filters .field-program,
	#ajax-filters .field-year,
	#ajax-filters .field-employment,
	#ajax-filters .reset {
		grid-column: auto;
		grid-row: auto;
	}
	#ajax-filters .field-search { grid-column: 1 / 3; }
	#ajax-filters .reset { align-items: stretch; }
}

@media screen and (max-width: 600px) {
	#ajax-filters {
		grid-template-columns: 1fr;
	}
	#ajax-filters .field-search,
	#ajax-filters .field-program,
	#ajax-filters .field-year,
	#ajax-filters .field-employment,
	#ajax-filters .reset {
		grid-column: 1 / -1;
	}
	/* Collapse behind the mobile Filters toggle. */
	.filters-main #ajax-filters { display: none; }
	.filters-main.open #ajax-filters { display: grid; padding-left: 5%; padding-right: 5%; }
}

.no-students {
	position: relative;
}

.no-students.hidden {
	display: none;
}