/* CSS Variables Do Not Work in Media Queries */
.full-width-nav .primary-brand-bar .brand-tier-three,
.full-width-nav .mobile-brand-tier-three {
  font-weight: var(--font-weight-bold);
}

.full-width-nav .mobile-brand-bar {
  display: none; /* this is Penn State branding - not necessary */
}
.full-width-nav .primary-brand-bar .brand-cta.tierOne .header-logo {
  height: 48px;
}
@media (min-width: 1080px) {
  .full-width-nav .primary-brand-bar .brand-cta.tierOne .header-logo {
    height: 48px;
  }
}
@media (min-width: 1440px) {
  .full-width-nav .primary-brand-bar .brand-cta.tierOne .header-logo {
    height: 48px;
  }
}
.full-width-nav .primary-brand-bar .brand-tier-three {
  font-size: var(--h5);
}
@media (min-width: 768px) {
  .full-width-nav .primary-brand-bar .brand-tier-three {
    font-size: var(--h3);
  }
}

.full-width-nav .mobile-brand-tier-three {
  display: flex;
  font-size: var(--font-size-lg);
}
@media (min-width: 768px) {
  .full-width-nav .mobile-brand-tier-three {
    display: none;
  }
}
.full-width-nav .mobile-brand-tier-three::before {
  content: "";
  background-image: url(/assets/uploads/globals/wpsu_logo_100px.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 82px;
  height: 24px;
  display: inline-flex;
  margin-right: var(--spacing-x-small);
}

.component-quick-facts .facts-content div h3 {
  font-size: var(--display-5);
  padding-top: 0;
}

mark.highlight {
  cursor: help;
  color: inherit;
  background-color: var(--ps-keystone-yellow-50);
  font-style: italic;
  border-bottom: 2px solid transparent;
}

mark.highlight:hover {
  border-bottom: 2px solid var(--ps-keystone-yellow-200);
}

.reverse mark.highlight {
  background-color: var(--ps-keystone-yellow-600);
  border-bottom: 2px solid transparent;
}

.reverse mark.highlight:hover {
  border-bottom: 2px solid var(--ps-keystone-yellow-200);
}

.section-head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0;
}
.section-head h2::after {
  display: none;
}

.preview-cards {
  display: grid;
  width: 100%;
}

.preview-cards-wrap.preview-cards-wrap-rows .preview-cards .block-content p {
  font-size: var(--font-size-base);
  padding-top: var(--spacing-4);
}

.preview-cards-wrap.preview-cards-wrap-rows .preview-cards {
  grid-gap: var(--grid-gap-x-small);
}

.container-content-builder .container .col figure:last-child {
  padding-bottom: var(--spacing-4);
}

.channel-listing-resources .preview-cards-wrap.preview-cards-wrap-rows .preview-cards .card-row:hover .block-content h3 {
  text-decoration: none;
}

.preview-cards-wrap.preview-cards-wrap-rows .preview-cards .block-content h3 {
  font-size: var(--h5);
  padding-top: var(--spacing-4);
}

.channel-listing-resources .preview-cards-wrap.preview-cards-wrap-rows .preview-cards .card-row {
  background-color: white;
}

.channel-listing-resources a:link,
.channel-listing-resources a:visited {
  color: var(--link-color);
}

.channel-listing-resources a:link:hover,
.channel-listing-resources a:visited:hover {
  text-decoration: underline;
}

.channel-listing-resources .card-row ul.list-inline {
  padding-left: 0;
}
.channel-listing-resources .card-row ul.list-inline li {
  padding: var(--spacing-minimum) var(--spacing-x-small) var(--spacing-minimum) 0;
}

.channel-listing-resources figcaption {
  color: var(--link-color);
}
.channel-listing-resources figcaption:hover {
  text-decoration: underline;
}

.channel-listing-resources .preview-cards-wrap.preview-cards-wrap-rows .card-row:hover {
  background-color: rgb(255, 255, 255);
  opacity: 0.9;
}

a.more-from-section-link {
  padding: var(--spacing-x-small) var(--spacing-small);
  transition: var(--transition-base);
  color: var(--black);
  font-size: var(--small-1);
  border: 1px solid var(--color-primary-accent);
  background-color: white;
}
a.more-from-section-link:hover {
  background-color: rgb(255, 255, 255);
  opacity: 0.9;
}

.channel-listing-resources a:link, .channel-listing-resources a:visited {
  color: white;
}

.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
  z-index: 3;
  color: var(--white);
  cursor: default;
}

.footer-wrap {
  background-image: none;
}

footer {
  grid-template: none;
  padding-bottom: var(--spacing-medium-large);
}
footer .course-logos {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  flex-direction: column;
  position: relative;
}
@media (min-width: 576px) {
  footer .course-logos {
    flex-direction: row;
  }
}
footer .course-logos a {
  margin: var(--spacing-small);
}
footer .course-logos img {
  height: 56px;
  width: auto;
}

.footer-general-contact p {
  margin-left: 0;
}

.text-slider-wrap .text-slider .slick-next, .text-slider-wrap .text-slider .slick-prev {
  background-color: var(--bg-color-primary-button);
}

.bg-light-salmon {
  background-color: var(--ps-discovery-salmon-150);
}

.bg-lg-light-purple {
  background-color: var(--ps-perpetual-purple-100);
}

.bg-lg-yellow {
  background-color: var(--ps-keystone-yellow-350);
}

.bg-lg-light-yellow {
  background-color: var(--ps-keystone-yellow-150);
}

.bg-lg-blue {
  background-color: var(--ps-sky-blue-500);
}

.bg-light-blue {
  background-color: var(--ps-sky-blue-150);
}

.theme-clean-modern .bg-light-blue {
  background-color: var(--ps-sky-blue-50);
}

.bg-lg-green {
  background-color: var(--ps-future-green-500);
}

.bg-light-green {
  background-color: var(--ps-future-green-150);
}

.bg-lg-orange {
  background-color: var(--ps-invent-orange-350);
}

.bg-lg-light-orange {
  background-color: var(--ps-invent-orange-150);
}

.bg-lg-red {
  background-color: var(--ps-discovery-salmon-500);
}

.bg-lg-light-red {
  background-color: var(--ps-discovery-salmon-350);
}

.bg-black {
  background-color: var(--color-lg-blue-800);
}

.container-grid-builder .bg-pattern {
  z-index: 1;
}
.container-grid-builder .bg-pattern.background-pattern-bubbles {
  background-image: url(../../uploads/accents/bubbles40.svg);
  background-position: center;
  background-size: 10%, 10%;
  background-repeat: repeat;
  filter: opacity(0.05);
}

.container-grid-builder.reverse .bg-pattern.background-pattern-plus {
  background-image: url("data:image/svg+xml,%3Csvg id='patternId' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='a' patternUnits='userSpaceOnUse' width='75' height='75' patternTransform='scale(0.75) rotate(0)'%3E%3Crect x='0' y='0' fill='hsla(0,0%25,100%25,1)'/%3E%3Cpath d='M3.25 10h13.5M10 3.25v13.5' transform='translate(30,0)' stroke-linecap='square' stroke-width='1' stroke-opacity='0.25' stroke='%23a7aab0' fill='none'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='800%25' height='800%25' transform='translate(0,0)' fill='url(%23a)'/%3E%3C/svg%3E");
}