/* definitions for all sites */
html {
	--crimson: #990000;
	--dark-crimson: #7A1705;
	--majestic: #66435A;
	--dark-majestic: #512A44;
	--midnight: #006298;
	--dark-midnight: #01426A;
	--limestone: rgb(173, 167, 164);
	--dark-limestone: rgb(134, 125, 120);
	--gray: #EDEBEB;
	--mahogany: #4A3C31;
}

/* includes button color overrides to make them look better, and link color overrides so they don't look like garbage */
.bgo-crimson {
	background-color: var(--crimson) !important;
}

.bgo-crimson .button {
	color: var(--crimson);
	background: #FFF;
}

.bgo-crimson .button:hover {
	background: var(--crimson);
	color: #FFF;
}

.bgo-dark-crimson {
	background-color: var(--dark-crimson) !important;
}

.bgo-dark-crimson .button {
	color: var(--dark-crimson);
	background: #FFF;
}

.bgo-dark-crimson .button:hover {
	background: var(--dark-crimson);
	color: #FFF;
}

.bgo-dark-crimson a:link {
	color: #FFF;
}

.bgo-majestic {
	background-color: var(--majestic) !important;
}

.bgo-majestic .button {
	color: var(--majestic);
	background: #FFF;
}

.bgo-majestic .button:hover {
	background: var(--majestic);
	color: #FFF;
}

.bgo-dark-majestic {
	background-color: var(--dark-majestic) !important;
}

.bgo-dark-majestic .button {
	color: var(--dark-majestic);
	background: #FFF;
}

.bgo-dark-majestic .button:hover {
	background: var(--dark-majestic);
	color: #FFF;
}

.bgo-midnight {
	background-color: var(--midnight) !important;
	color: #FFF;
}

.bgo-midnight .button {
	color: var(--midnight);
	background: #FFF;
}

.bgo-midnight .button:hover {
	background: var(--midnight);
	color: #FFF;
}

.bgo-dark-midnight {
	background-color: var(--dark-midnight) !important;
	color: #FFF;
}

.bgo-dark-midnight .button {
	color: var(--dark-midnight);
	background: #FFF;
}

.bgo-dark-midnight .button:hover {
	background: var(--dark-midnight);
	color: #FFF;
}

.bgo-mahogany {
	background-color: var(--mahogany);
}

.bgo-mahogany .button {
	color: var(--mahogany);
	background: #FFF;
}

.bgo-mahogany .button:hover {
	background: var(--mahogany);
	color: #FFF;
}

.bgo-dark-limestone {
	background-color: var(--dark-limestone);
}

.bgo-dark-limestone .button {
	color: var(--dark-limestone);
	background: #FFF;
}

.bgo-dark-limestone .button:hover {
	background: var(--dark-limestone);
	color: #FFF;
}

.button.dark-crimson {
	background: var(--dark-crimson);
	color: #FFF;
}

.button.dark-crimson:hover {
	color: var(--dark-crimson);
	background: #FFF;
}

.button.majestic {
	background: var(--majestic);
	color: #FFF;
}

.button.majestic:hover {
	color: var(--majestic);
	background: #FFF;
}

.button.dark-majestic {
	background: var(--dark-majestic);
	color: #FFF;
}

.button.dark-majestic:hover {
	color: var(--dark-majestic);
	background: #FFF;
}

.button.midnight {
	background: var(--midnight);
	color: #FFF;
}

.button.midnight:hover {
	color: var(--midnight);
	background: #FFF;
}

.button.dark-midnight {
	background: var(--dark-midnight);
	color: #FFF;
}

.button.dark-midnight:hover {
	color: var(--dark-midnight);
	background: #FFF;
}

.button.dark-limestone {
	background: var(--dark-limestone);
	color: #FFF;
}

.button.dark-limestone:hover {
	color: var(--dark-limestone);
	background: #FFF;
}

.button.mahogany {
	background: var(--mahogany);
	color: #FFF;
}

.button.mahogany:hover {
	color: var(--mahogany);
	background: #FFF;
}

.ho-h2-crimson h2 {
	color: var(--crimson) !important;
}

.ho-h3-crimson h3 {
	color: var(--crimson) !important;
}

.ho-h4-crimson h4 {
	color: var(--crimson) !important;
}

.ho-h2-dark-crimson h2 {
	color: var(--dark-crimson) !important;
}

.ho-h3-dark-crimson h3 {
	color: var(--dark-crimson) !important;
}

.ho-h4-dark-crimson h4 {
	color: var(--dark-crimson) !important;
}

.ho-h2-midnight h2 {
	color: var(--midnight) !important;
}

.ho-h3-midnight h3 {
	color: var(--midnight) !important;
}

.ho-h4-midnight h4 {
	color: var(--midnight) !important;
}

.ho-h2-dark-midnight h2 {
	color: var(--dark-midnight) !important;
}

.ho-h3-dark-midnight h3 {
	color: var(--dark-midnight) !important;
}

.ho-h4-dark-midnight h4 {
	color: var(--dark-midnight) !important;
}

.ho-h2-majestic h2 {
	color: var(--majestic) !important;
}

.ho-h3-majestic h3 {
	color: var(--majestic) !important;
}

.ho-h4-majestic h4 {
	color: var(--majestic) !important;
}

.ho-h2-dark-majestic h2 {
	color: var(--dark-majestic) !important;
}

.ho-h3-dark-majestic h3 {
	color: var(--dark-majestic) !important;
}

.ho-h4-dark-majestic h4 {
	color: var(--dark-majestic) !important;
}

/* Accessibility fixes for background colors and text sizes */
.midnight .bg-secondary {
	background-color: var(--dark-midnight) !important;
}

.midnight .bg-secondary .button {
	color: var(--dark-midnight) !important;
	background: #FFF !important;
}

.midnight .bg-secondary .button:hover {
	background: var(--dark-midnight) !important;
	color: #FFF !important;
}

.midnight .bg-secondary a:link:not(.button), .midnight .bg-secondary a:not(.button):hover {
	color: #FFF !important;
}

/* Override crimson background color to dark-crimson because crimson is garish and white-on-crimson is harder to read */
.crimson, .bg-crimson {
	background-color: var(--dark-crimson) !important;
}

.quote blockquote p {
	font-size: 2rem;
}

.responsive {
	width: 100%;
	height: auto;
}

.responsive.limited {
	max-width: 400px;
}

img.circle {
	display: flex;
	width: 175px;
	height: auto;
	margin: 0 auto 1rem auto;
	border-radius: 50%;
}

@media screen and (min-width: 768px) {
	img.circle {
		width: 200px;
	}
}

img.circle.small {
	width: 150px;
}

img.left {
	margin: 1.5rem auto;
	display: block;
}

@media screen and (min-width: 768px) {
	img.left {
		float: left;
		margin: 0 3rem 1rem 0;
	}
	img.left.circle {
		shape-outside: circle(50%);
	}
}

img.right {
	margin: 1.5rem auto;
	display: block;
}

@media screen and (min-width: 768px) {
	img.right {
		float: right;
		margin: 0 0 1rem 3rem;
	}
	img.right.circle {
		shape-outside: circle(50%);
	}
}

.pullquote {
	padding: 1.5rem;
	font-weight: 900;
	font-size: 1em;
	background: #EDEBEB;
}

@media screen and (min-width: 768px) {
	.pullquote:not(.with-image) {
		max-width: 300px;
	}
	.pullquote:not(.with-image).left {
		float: left;
		margin: 1rem 2rem 1rem 0;
	}
	.pullquote:not(.with-image).right {
		float: right;
		margin: 1rem 0 1rem 2rem;
	}
}

.pullquote.with-image img {
	margin-bottom: 0;
}

@media screen and (min-width: 768px) {
	.pullquote.with-image img {
		width: 130px;
	}
}

@media screen and (min-width: 1200px) {
	.pullquote.with-image img {
		width: 200px;
	}
}

@media screen and (min-width: 1200px) {
	.pullquote.left {
		float: left;
		margin: 1rem 2rem 1rem 0;
	}
	.pullquote.right {
		float: right;
		margin: 1rem 0 1rem 2rem;
	}
	.pullquote.with-image {
		max-width: 650px;
	}
}

.video-wrapper {
	position: relative;
	height: 0;
}

.video-wrapper.sixteen-nine {
	padding-bottom: 56.25%;
	padding-top: 25px;
}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 767px) {
	article.profile.feed-item {
		padding-bottom: 0;
	}
	article.profile.feed-item .media {
		width: 33%;
	}
	article.profile.feed-item .media + div.content {
		width: 66%;
	}
	article.profile.feed-item p.sub-title {
		margin-bottom: 10px;
	}
}

@media screen and (min-width: 1025px) {
	.page-needs-navigation-space #content {
		padding-bottom: 12rem;
	}
	.page-needs-navigation-space.nine #content {
		padding-bottom: 9rem;
	}
	.page-needs-navigation-space.twelve #content {
		padding-bottom: 12rem;
	}
	.page-needs-navigation-space.sixteen #content {
		padding-bottom: 16rem;
	}
	.page-needs-navigation-space.twenty #content {
		padding-bottom: 20rem;
	}
}

/* Fixes Framework issue where if a previous section is collapsed, the attached section won't have any top padding */
.section.collapsed.bg-none + .section:not(.bg-none),
.section.collapsed.bg-crimson + .section:not(.bg-crimson),
.section.collapsed.bg-gray + .section:not(.bg-gray),
.section.collapsed.bg-secondary + .section:not(.bg-secondary) {
	padding-top: 56px;
}

/* Shared Section Styles */
@media screen and (max-width: 413px) {
	#iidc-section-about .grid-item:nth-child(2) .button {
		padding: 0.5em 0.25em;
	}
}

.eppley {
	margin-bottom: 3rem;
}

#iidc-section-library {
	background: url(/images/backgrounds/books.svg) repeat-x bottom left/400px, var(--dark-limestone);
	padding-bottom: 20rem;
}

@media screen and (max-width: 39.9375em) {
	#iidc-section-library {
		padding-bottom: 15rem;
	}
}

#iidc-section-library .text {
	padding: 1.5rem;
	background: #FFF;
}

@media screen and (min-width: 768px) {
	#iidc-section-library .text {
		padding: 3rem;
	}
}

.skirt h2 {
	font-size: 1.4em !important;
	margin: 0 0 1rem 0 !important;
}

.skirt h2:not(:first-child) {
	margin-top: 2.5rem !important;
}

.skirt h3 {
	font-size: 1.2em;
	margin: 2rem 0 1rem 0;
}

.skirt p {
	font-size: 1em;
}

.skirt span {
	display: block;
}

.skirt span:not(:first-child) {
	margin-top: 0.5rem;
}

.skirt ul:not(.social) {
	list-style-type: disc;
	margin: 1rem 0 1rem 1rem;
}

.skirt ul:not(.social) li:not(:first-child) {
	margin-top: 0.5rem;
}

.skirt ul:not(.social) li::marker {
	color: rgba(255, 255, 255, 0.4);
}

.skirt address {
	color: inherit;
}

.skirt a:not(.button), .skirt a:link:not(.button), .skirt a:visited:not(.button) {
	color: #FFF;
	border-bottom: solid 1px rgba(255, 255, 255, 0.2);
}

.skirt a:not(.button):hover, .skirt a:link:not(.button):hover, .skirt a:visited:not(.button):hover {
	border-bottom: solid 1px rgba(255, 255, 255, 0.6);
}

.skirt a.button {
	color: #4A3C31;
}

.skirt .social a, .skirt .social a:link, .skirt .social a:visited {
	border-bottom: none;
}