/* Modifying existing CSS. */
.accordion__heading-black{
	/* Outline color same as text. */
	 outline-color: #cfb991;
}
.accordion__heading{
	/* Eliminate uneven spacing. */
	 border-bottom: solid 1px #fff;
}
.accordion__item h2 {
	/* Default spacing was a little too much. */
	 margin: .625rem 0px;
}
.content__bio .bio__image img{
	 border: 2px solid black;
	 border-radius: 3px;
	 background-color: black;
}
.button-light:hover, .button-light:active, .button-light:focus{
	/* Remove the "light" option for buttons, so that their text can't become invisible on hover. */
	 color: #000;
}
main#main{
    /* Don't remember why I added this, but it broken tables on mobile */
    overflow-wrap: break-word;
}
.table{
    overflow-wrap: normal;
}
/* Padding-left on the inline SVG is same as the social icons element. */
 .footer__resources__column .vertical{
	 padding-left: 3.25rem;
}
 @media screen and (max-width: 1199px){
	 .footer__resources__column .vertical{
		 padding-left: 2.09rem;
	}
}
/****************/
/* Top nav alterations (our custom tabs) */
 .header__mainNav {
	flex-direction: column;
}
 .header__mainNav--tabs {
	display: flex;
	 flex-direction: column;
	 align-items: center;
	 width: 100%;
	 color: #fff;
	 background: #000;
}
 .header__mainNav--tabs ul {
	display: flex;
	 flex-wrap: wrap;
	 width: 1140px;
	 list-style: none;
	 padding: 0;
	 margin: 0;
}
 .header__mainNav--tabs li {
}
 .header__mainNav--tabs a {
	display: inline-block;
	 padding: 0.6rem 0.95rem;
	 color: #fff;
	 font-size: 1.1rem;
	 font-family: acumin-pro-condensed,"Franklin Gothic",sans-serif;
	 font-weight: 700;
	 text-decoration: none;
}
 .header__mainNav--tabs .is-active-tab {
	color: #000;
	 background: #fff;
}
.header__mainNav--dropdownOuter{
    z-index: 999;
}
 @media (max-width: 1199px) {
	 .header__mainNav--tabs ul {
		width: 940px;
	}
}
 @media (max-width: 990px) {
	 .header__mainNav--tabs ul {
		width: 720px;
	}
}
 @media (max-width: 767px) {
	 .header__mainNav--tabs ul {
		width: 100%;
	}
}
/****************/
/* Custom classes. */
 .hidden {
	display: none;
}
 a.sticky-contact-button {
	width: 100%;
	 position: sticky;
	 -webkit-position: sticky;
	 top: 0px;
	 z-index: 10;
}
 a.sticky-contact-button:hover, a.sticky-contact-button:active {
	background: #fff;
}
/* Select every img that was added NOT using the "place media" function in the templates. */
/* These are rouge images that would burst out the side of the page if left to their own devices. */
/* If someone wants to float an image, they should use the "place media" thingy in the editor. */
/* Specifically, this selects images, in a content group, that are either not directly inside an */
/* .imageContainer, or are direct children of the main .content__group itself. */
 .content__group :not(.imageContainer) > img, .content__group > img, .image-behave{
	 display: block;
	 max-width: 100%;
	 height: auto;
	 margin: 0.35rem 0;
}
/* Must have higher specificity than .content__group image rules. */
 .content__main img.image-frame{
	 box-shadow: 0px 12px 6px -8px rgba(0,0,0,.25);
	 border: 1px solid black;
	 border-radius: 3px;
}
/* Must have higher specificity than .content__group image rules. */
 .content__main img.image-half-width{
	 max-width: 50%;
}
 @media (max-width: 990px){
	 .content__main img.image-half-width{
		 max-width: 100%;
	}
}
.fth-sig{
    max-width: 15%;
}
 .hanging-indent{
	 margin-left: 4em;
	 text-indent: -4em;
}
/* Custom gallery stuff. */
 .cla-gallery{
	 display: flex;
	 flex-wrap: wrap;
}
 .cla-gallery-item{
	 flex-basis: 50%;
	/*background-color: lavender;
	 */
	 padding: 0.5rem;
	 overflow: hidden;
}
 @media (min-width: 990px){
	 .cla-gallery-item{
		 flex-basis: 25%;
	}
}
 .cla-gallery-item a{
	 display: block;
	 width: 100%;
	 max-width: 100%;
	 height: auto;
	 padding: 2px;
	 border: 1px solid #C4BFC0;
	 border-radius: 3px;
}
 .cla-gallery-item img{
	 display: block;
	 width: 100%;
	 max-width: 100%;
	 height: auto;
	 border-radius: 3px;
}
/* Audience page tiles (like on CLA academic index) */
 .row__story__content #academic-areas {
	display: flex;
	 flex-wrap: wrap;
}
 .row__story__content .academic-item {
	flex-basis: 25%;
	 padding: 1rem;
	 min-height: 150px;
	 overflow: hidden;
}
 .row__story__content .academic-item a {
	display: block;
	 width: 100%;
	 height: 100%;
	 background-color: black;
	 padding: 15px;
	 color: white;
	 text-decoration: none;
	 font-weight: 400;
	 text-transform: uppercase;
	 font-family: acumin-pro-condensed;
	 font-size: 1.375rem;
}
 @media (max-width: 992px) {
	 .row__story__content .academic-item {
		flex-basis: 50%;
	}
}
 .row__story {
	padding-bottom: 0;
}
/* "Read more" functionality for p elements */
 .content__main section p.read-more {
	position: relative;
	 height: 60px;
	 overflow: hidden;
}
 .content__main section p.read-more.expanded {
	height: auto;
}
 .content__main section p.read-more .read-more-toggle {
	position: absolute;
	 right: 0;
	 bottom: 0;
	 padding-left: 50px;
	 background: linear-gradient(to right, transparent, #fff 30px);
	 text-decoration: underline;
	 font-weight: bold;
	 cursor: pointer;
}
 .content__main section p.read-more .read-more-toggle:before {
	content: "Read more";
}
 .content__main section p.read-more.expanded .read-more-toggle {
	position: static;
	 padding-left: 10px;
	 background: transparent;
}
 .content__main section p.read-more.expanded .read-more-toggle:before {
	content: "Read less";
}
 .content__main section p.read-more .read-more-toggle:hover {
	text-decoration: none;
}
/****************/
/* Unique styling. */
 .content__main iframe{
	 width: 100%;
	 border-width: 0px;
}
 hr hr{
	 border: 1px solid #8E6F3E;
}

 table.table{
	/* Tables need to be mobile-compatible WITHOUT any HTML code intervention. That explains some of the strange styling going on here w/ tables. */
	/* Note these styles only apply to tables with the class .table, so it doesn't interfere unexpectedly */
	 width: 100%;
	 max-width: 100%;
	 margin-bottom: 2rem;
	 overflow: auto;
	/*box-shadow: 0px 12px 6px -8px rgba(0,0,0,.25);
	 */
	 border-collapse: collapse;
	/*table-layout: fixed;
	 */
	/* Get td to be the same width across all tables on a page. */
	/* This will need to be implemented only on certain sizes. */
}
 .table td, .table th{
	 padding: 0.5em;
	 padding-left: 1em;
	 text-align: left;
	 border: 1px solid #C4BFC0;
}
 .table tr:nth-of-type(even){
	 background-color: #f0f0f0;
}
 .table tr:nth-of-type(odd){
	 background-color: #FFF;
}
 .table tr:nth-of-type(1){
	 background-color: #000;
	 color: #EBD99F;
}
 ol ol{
	 list-style-type: upper-alpha;
}
 ol ol ol{
	 list-style-type: lower-alpha;
}
/* Responsive Table Styles;
 This query will take effect for any screen smaller than 760px and also iPads specifically. */
 .verticalize td:before {
	 display: none;
}
/* Hide the extra headers when not in vertical mode;
 these are set by a script */
 @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
	/* Force table to not be like tables anymore */
	 table.verticalize, .verticalize tbody, .verticalize td, .verticalize tr {
		 display: block;
		 width: 100%;
		 -webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
		 box-sizing: border-box;
		 float: left;
		 clear: left;
	}
	/* Hide table headers (but not display: none;
	 , for accessibility) */
	 .verticalize tbody tr:first-child {
		 position: absolute;
		 top: -9999px;
		 left: -9999px;
	}
	 .verticalize td {
		 border: none;
		 position: relative;
		 padding-left: 50%;
	}
	 .verticalize td:before {
		 display: inline-block;
		 position: absolute;
		 top: 6px;
		 left: 6px;
		 width: 45%;
		 padding-right: 10px;
		 white-space: nowrap;
	}
}
/* Image gallery */
 .image-gallery {
	white-space: nowrap;
	 overflow: auto;
	 scroll-snap-type: x mandatory;
	 margin: 1rem 0;
}
.image-gallery .imageContainer figcaption{
    white-space: initial;
}
 .image-gallery figure {
	display: inline-flex;
	 margin: 0;
	 width: 100%;
	 height: 100%;
	 overflow: hidden;
	 align-items: center;
	 justify-content: center;
	 scroll-snap-align: start;
}
 .image-gallery figure img {
	width: auto !important;
	 height: 400px !important;
}
 .image-gallery::-webkit-scrollbar {
	height: 8px;
}
 .image-gallery::-webkit-scrollbar-thumb {
	background: #000;
	 border-radius: 4px;
}
 .image-gallery::-webkit-scrollbar-track {
	background: #fff;
	 border-radius: 4px;
	 border: 1px solid #000;
}
 .gallery-buttons {
	text-align: center;
}
 .gallery-buttons button {
	padding: .5rem 1rem;
	 margin: 0 1rem 1rem 1rem;
	 cursor: pointer;
	 border: 1px solid #000;
	 background: #fff;
	 color: #000;
	 font-weight: bold;
}
 .gallery-buttons button:hover {
	background: #000;
	 color: #fff;
}
/* Searchable tables */
 .table.searchable {
	table-layout: fixed;
}
 #table-search-inputs, #no-results {
	margin: 1rem 0;
}
 #table-search-inputs {
	display: flex;
	 width: 100%;
	 max-width: 35rem;
}
 #table-search-inputs > * {
	display: block;
	 flex: 0 1 auto;
	 margin: 0 0.5rem 0 0;
	 padding: 0.3rem 0.6rem;
	 border-radius: 0;
	 border: 1px solid #000;
}
 #table-search-inputs input {
	flex: 1 0 auto;
}
 #table-search-inputs button {
	background: #8E6F3E;
	 border-color: #8E6F3E;
	 color: #fff;
}
/* Event calendars */
 .content__main .localist_minicalendar .localist_minicalendar_pager {
	max-width: 500px;
	 margin: auto;
}
 .content__main .localist_minicalendar .localist_minicalendar_pager h1 {
	clear: none;
	 color: #8e6f3e;
}
 .content__main .localist_minicalendar .localist_minicalendar_pager a {
	background: #8e6f3e;
}
 .content__main .localist_minicalendar .localist_minicalendar_pager a:hover {
	background: #6a532f;
}
 .content__main .localist_minicalendar .localist_minicalendar_minicalendar th {
	padding: 0.1rem 0.4rem;
	 background: #000;
	 color: #fff;
}
 .content__main .localist_minicalendar .localist_minicalendar_minicalendar td a:hover {
	background: #8e6f3e;
}
 .content__main .localist_minicalendar .localist_minicalendar_nav {
	margin: 1rem 0;
}
 .content__main .localist-widget-hl {
	margin-top: 1rem;
}
 .content__main .localist-widget-hl .event-list .event {
	padding: 0;
}
 .content__main .localist-widget-hl .event-list .event .event-card {
	height: 21.5rem;
	 margin: 0;
}
 .content__main .localist-widget-hl .event-card img {
	margin: 0;
}
 .content__main .localist-widget-hl .event-list .event-overview .content {
	height: 10.5rem;
	 padding: 0.7rem 1rem;
}
 .content__main .localist-widget-hl .event-card .content p {
	font-size: 1rem;
	 line-height: normal;
	 overflow: hidden;
	 display: block;
	 text-overflow: none;
	 -webkit-line-clamp: none;
}
 @media only screen and (min-width: 62.5em) {
	/* At this size, the widget by default shows 5 events per row. This overrides it to show 3 max, so they're not too small. */
	 .content__main .localist-widget-hl .event-list>li {
		float: left;
		 margin-bottom: 3.125%;
		 width: 31.25%;
	}
}
 @media only screen and (min-width: 62.5em) {
	/* More fixing stuff to avoid five in a row. */
	 .content__main .localist-widget-hl .event-list>li:nth-child(3n+1) {
		clear: left;
	}
	 .content__main .localist-widget-hl .event-list>li:not(:nth-child(3n)) {
		margin-right: 3.125%;
	}
	 .content__main .localist-widget-hl .event-list li:nth-child(5n+1):not(:nth-child(3n+1)) {
		clear: none;
	}
	 .content__main .localist-widget-hl .event-list li:nth-child(2n+1):not(:nth-child(3n+1)) {
		clear: none;
	}
	 .content__main .localist-widget-hl .event-list>li:nth-child(3n) {
		margin-right: 0;
	}
}
 .content__main #lclst_widget_footer {
	display: none;
}
/****************/
/* Full page/screen banners */
#full-page-banner{
	 position: relative;
	 height: 320px;
	 background: no-repeat center center;
	 -webkit-background-size: cover;
	 -moz-background-size: cover;
	 -o-background-size: cover;
	 background-size: cover;
	 box-shadow: inset 0 0 10px black;
}
.full-page-banner-with-overlay:after{
	 content: "";
	 position: absolute;
	 left: 0;
	 right: 0;
	 top: 0;
	 bottom: 0;
	 background: -webkit-gradient(linear,left top,left bottom,from(rgba(27,28,30,0)),color-stop(90%,rgba(27,28,30,0.8)));
	 background: linear-gradient(180deg,rgba(27,28,30,0) 0%,rgba(27,28,30,0.8) 90%);
}
/***********************/
/* Header ident tweaks */
.header__signature--siteName{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.header__signature--siteName #siteTagline a{
    font-family: acumin-pro-condensed;
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: initial;
    margin-top: 0px;
}
#siteTagline{
    margin: initial;
}