/* Modifying existing CSS. */
#siteTagline{
  flex-direction: column;
}
.header__signature--siteName #siteTagline a{
  font-weight: 400;
}
.header__mainNav--main > ul > li > a.is-active-page:after {
    /* The underlining of the active page in the top nav is often wrong for some reason.
       Just get rid of it. */
    transform: scaleX(0);
}
.header__mainNav--main > ul > li > a.is-active-page:hover:after {
  transform: scaleX(1);
}
.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;
  }
}
/****************/
/* Custom classes. */
/* 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%;}
}
/****************/
/* Unique styling. */
.content__main iframe{
    width: 100%;
    border-width: 0px;
}
 hr
hr{
  border: 1px solid #8E6F3E;
}
.content__main table{
  /* Tables need to be mobile-compatible WITHOUT any HTML code intervention. That explains some of the strange styling going on here w/ tables. */
  display: block;
  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. */
}
.content__main td, .content__main th{
  padding: 0.5em;
  padding-left: 1em;
  text-align: left;
  border: 1px solid #C4BFC0;
}
.content__main tr:nth-of-type(even){
  background-color: #f0f0f0;
}
.content__main tr:nth-of-type(odd){
  background-color: #FFF;
}
.content__main 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: 300px;}
.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;}

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