/* Modifying existing CSS. */
#siteTagline{
  flex-direction: column;
}
.header__signature--siteName #siteTagline a{
  font-weight: 400;
}
.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;
}
.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;
}
/* 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;}
@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;}
/* 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{
  float: none;
  max-width: 11rem;
}
/* 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%;}
}
/* "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 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; height: 400px;}
.image-gallery figure a{font-size: 1.2rem; line-height: 3em;}
.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 #lclst_widget_footer {display: none;}

/****************/