/* Custom Styles */
/* add top margin to set chunks apart when they stack on small viewports */
@media screen and (min-width: 20em) and (max-width: 39.9375em) {
	.grid > .grid-item + .grid-item {
		margin-top: 4rem;
	}
}

/* increase top-margin to better set rows of chunks apart on large viewports, starting with the third item to target the second+ "row" for halves, and fourth item for thirds */
.grid.halves > .grid-item:nth-child(n+3), .grid.thirds > .grid-item:nth-child(n+4) {
	margin-top: 4rem;
}

/* this covers when a section isn't set to grids, and each chunk is full-width */
.layout .text + .text {
	margin-top: 4rem;
}

.grid.halves > .grid-item:nth-child(n+3) > .panel, .grid.thirds > .grid-item:nth-child(n+4) > .panel {
	margin-top: -3rem;
}

/* increase max-width to just look better; excludes ul because site nav is row and looks better narrower */
/* Set apart the section title, as it often is adjacent to subsequent headers and doesn't stand out otherwise */
/* Also make the font-size larger at smaller viewports as it doesn't stand out for scanning otherwise */
h2.section-title, h2 {
	margin-bottom: 2.5rem;
}

@media screen and (max-width: 639px) {
	h2.section-title, h2 {
		font-size: 2rem;
	}
}

/* Better set apart other h2s that are in a chunk */
.grid-item h2:first-of-type, .text h2:first-of-type {
	margin-bottom: 2.5rem;
}

/* Give H2 and H3 a top margin to set them apart */
/* include specific adjacent-sibling selectors because the IU Framework overrides these otherwise */
h3, p + h3, ul + h3, ol + h3, ol + h2, ul + h2 {
	margin-top: 4rem;
}

.text + h2, .text + h3 {
	margin-top: 4rem;
}

/* feature headings are h3s and don't really need the space due to pairing with photo */
.feature h3 {
	margin-top: 0;
}

/* .grid-items have a top margin (see above) so don't apply a top margin to the h3 that's the first child of these elements */
.grid-item h3:first-child, .text h3:first-child {
	margin-top: 0;
}

/* top-margin on H3s causes accordions to be spaced apart */
.accordion h3 {
	margin-top: 0;
}

/* h3 following h2 doesn't need margin-top */
h2 + h3 {
	margin-top: 0;
}

/* LiveWhale widget listings shouldn't have a margin-top either */
[class^="lw_item"] h3 {
	margin-top: 0;
}

/* Panels also don't need margin-top */
.panel h3:first-child {
	margin-top: 0;
}

/* Add margin between list elements */
/* exclude .alpha as the sorting for personnel is a ul > li */
#main-content .layout li:not(:first-child) {
	margin-top: 1rem;
}

#main-content .layout div.alpha li {
	margin-top: 0;
}

.feed-item, [class^="lw_item"] {
	border-bottom: none;
}

.feed-item h3, [class^="lw_item"] h3 {
	margin-bottom: 0;
	font-size: 1.4em;
}

.feed-item p.time, [class^="lw_item"] p.time {
	margin-bottom: 0.5rem;
}

.feed-item--small.event .meta, [class^="lw_widget"] .feed-item--small .meta {
	margin-bottom: 0.5rem;
}

.feature img {
	width: 100%;
}

@media screen and (min-width: 768px) {
	.grid-feed .feed, .grid-feed ul.lw_widget_results {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 1rem;
	}
}

@media screen and (min-width: 768px) {
	.grid-feed [class^="lw_item"]:not(.ticker-item):not(:first-child) {
		padding-top: 0;
	}
}

/* Make image on profile page a circle like the profile list */
@media screen and (max-width: 639px) {
	.detail-meta + div img[src*="personnel"] {
		max-width: 70vw;
		display: block;
		margin: 1rem auto;
	}
}

/* @media screen and (min-width: 640px) { */
	.detail-meta + div img[src*="personnel"] {
		border-radius: 50%;
	}
/* } */

form.newsletter-signup input {
	max-width: 400px;
}

p.subtitle {
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Change link color on crimson to white, from stupid blue */
.bg-crimson .text a:not(.button), .crimson .bg-secondary .text a:not(.button) {
	color: #FFF;
}

.interstitial {
	min-height: 40vh;
}

@media screen and (min-width: 768px) {
	.interstitial {
		min-height: 100vh;
	}
}

.interstitial.adjacent.previous + .section {
	padding-top: 0;
}

@media screen and (min-width: 768px) {
	.interstitial.stats {
		display: flex;
	}
}

.interstitial.stats.bottom {
	align-items: flex-end;
}

.interstitial.stats.top {
	align-items: flex-start;
}

#interstitial-home-stats {
	min-height: 100vh;
}

#interstitial-home-stats .layout {
	background: rgba(122, 23, 5, 0.95);
	padding: 1rem;
	text-transform: uppercase;
	text-align: center;
}

@media screen and (max-width: 767px) {
	#interstitial-home-stats .layout {
		margin-top: 100%;
	}
}

@media screen and (min-width: 768px) {
	#interstitial-home-stats .layout {
		padding: 3rem;
	}
}

#interstitial-home-stats .panel::before, #interstitial-home-stats .stat::before, #interstitial-home-stats .bg-image .panel.stat::before {
	background: transparent;
}

#interstitial-home-quote {
	min-height: 70vh;
}

@media screen and (min-width: 768px) {
	#interstitial-home-quote {
		min-height: 100vh;
		display: flex;
		justify-content: center;
	}
}

#interstitial-home-quote .row {
	display: flex;
	align-items: flex-end;
}

@media screen and (max-width: 767px) {
	#interstitial-home-quote .row {
		height: 70vh;
	}
}

#interstitial-home-quote .text {
	padding: 1rem;
	background: rgba(102, 67, 90, 0.95);
	text-align: center;
	font-size: 1em;
	text-transform: uppercase;
	box-shadow: 0 0 60px 40px rgba(0, 0, 0, 0.15);
}

#interstitial-home-quote .text span {
	font-size: 1.5em;
	font-weight: 900;
	display: block;
	letter-spacing: 0.075em;
}

@media screen and (min-width: 768px) {
	#interstitial-home-quote .text {
		display: inline-block;
		padding: 3rem;
		font-size: 1.3em;
	}
}

@media screen and (min-width: 1024px) {
	#interstitial-home-quote .text span {
		font-size: 1.75em;
	}
}

@media screen and (min-width: 1024px) and (min-height: 700px) and (max-height: 1000px) {
	#interstitial-home-quote .text {
		margin-top: 0;
	}
}

#interstitial-about-stats {
	min-height: 100vh;
}

#interstitial-about-stats .panel::before, #interstitial-about-stats .stat::before, #interstitial-about-stats .bg-image .panel.stat::before {
	background: rgba(1, 66, 106, 0.95);
}

/* Custom page and section styles */
#page-home-director .text p {
	font-weight: 900;
	font-size: 1.2em;
}

#page-about-director .letter {
	background: #fff;
	color: #333;
	padding: 1rem;
}

@media screen and (min-width: 768px) {
	#page-about-director .letter {
		padding: 3rem 3rem 2rem 3rem;
	}
}

@media screen and (min-width: 1400px) {
	#section-milo .grid-item {
		margin-left: -12rem;
	}
}

#section-milo .text {
	background: rgba(0, 0, 0, 0.85);
	padding: 1.5rem;
}

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

#page-milo #page-milo-checklist .accordion-content {
	padding-left: 2.5rem;
}

#page-milo #page-milo-checklist ul {
	list-style-type: none;
	font-size: 1.2rem;
}

#page-milo #page-milo-checklist ul li {
	font-size: 1em;
	margin-bottom: 1rem;
}

#page-milo #page-milo-checklist ul li label {
	font-size: inherit !important;
}

#page-milo #page-milo-checklist ul li input {
	margin: 0 1rem 0 -2rem;
}

#page-milo #page-milo-checklist li > ul {
	list-style-type: disc;
}

#section-library-blog article, #section-library-blog .content, #section-library-blog .content p:nth-child(3), #section-library-blog .feed-item .title {
	margin-bottom: 0 !important;
}

#section-library-blog article:not(:first-child) {
	margin-top: 2rem;
}

#section-library-blog h3 {
	margin-top: 0;
}

@media (min-width: 40em) {
	#section-library-blog figure, #section-library-blog img {
		height: 100%;
		width: auto;
	}
	#section-library-blog .float-left.one-third {
		position: absolute;
		height: 100%;
	}
	#section-library-blog .float-left.one-third > figure {
		margin-right: 1.5rem;
	}
}

#section-crm-form {
	background-image: url(/images/bullhorn.svg);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 350px;
}

#section-crm-form .text:first-of-type {
	padding-left: 20rem;
}

@media screen and (max-width: 39.9375em) {
	#section-crm-form .text:first-of-type {
		padding-left: 15rem;
	}
}

#section-crm-form .more {
	background: #FFF;
	padding: 1.5rem;
}

@media screen and (min-width: 768px) {
	#section-crm-form .more {
		padding: 3rem;
	}
}

#section-crm-form .crm-stage:not(:first-child) {
	margin-top: 3rem;
}

#section-crm-form input[type=checkbox] {
	border: solid 2px #1e1e1e;
}

#section-crm-form input[type=checkbox]:hover {
	background: #01426a;
}

#section-crm-form input[type=checkbox]:checked {
	background: #006298;
}

#section-crm-form fieldset.long {
	column-count: 2;
	column-span: none;
}