@charset "utf-8";
/*.layout*/ .content > div.content-1,
/*.layout*/ .content > div.content-3, 
/*.layout*/ .content > div.content-1 .content-2,
/*.layout*/ .content > div.content-1 + .tab-wrapper, 
.paragraph--type--interior-content, 
.node--type-interior-page .content-1{
  background:  color-mix(in srgb, var(--dark), var(--black) 20%) !important;
  color: var(--white);
  --bs-accordion-color:var(--white) !important;
  --bs-body-color:var(--white) !important;
  height: 100%;  
  & .accordion{
    --bs-accordion-btn-color:var(--lion-light-blue);
    --bs-body-color:var(--lion-light-blue);
    --bs-accordion-color: var(--white);
    --bs-accordion-bg: var(--dark);
    & .accordion-button.collapsed::after{
      filter:invert;
    }
  }
}
div.content-1 + .tab-wrapper .nav-tabs {
  --bs-nav-link-color: rgba(248, 249, 250, .75);
  --bs-nav-link-hover-color: rgba(248, 249, 250, 1);
}
div.content-1 .font-serif{ color: var(--lion-light-blue) !important}
/*.layout .content > div:nth-child(even) {
    background:  color-mix(in srgb, var(--dark), var(--black) 20%) !important;
}*/
div.content-1 .py-3.border-top.d-flex.align-items-center {
    /*display: none !important;*/
}
.node--type-interior-page .content-1 .grid-item .bg-white ,
/*.layout*/ .content > div.content-1 .grid-item .bg-white ,
/*.layout*/ .content > div.content-3 .grid-item .bg-white {
    background:  color-mix(in srgb, var(--dark), var(--black) 0%) !important;
    color: var(--white);
}
/*.layout .content >*/ div.content-1 a:not(.btn),
/*.layout .content >*/ div.content-3 a:not(.btn){
    --bs-link-color: var(--lion-light-blue);
    --bs-link-hover-color: var(--white);
}
.paragraph--type--interior-content a { --bs-link-color:var(--lion-light-blue);--bs-link-hover-color:var(--white)}
/*.layout .content > div:nth-child(even) .grid-item .bg-white {
    background:  color-mix(in srgb, var(--dark), var(--black) 0%) !important;
}
.layout .content > div:nth-child(even) .grid-item .btn-icon-right-arrow {
    --bs-btn-bg: var(--lion-light-blue);
    --bs-btn-hover-bg:  color-mix(in srgb, var(--lion-light-blue), white 25%) !important;
    --bs-btn-active-bg:  color-mix(in srgb, var(--lion-light-blue), white 50%) !important;
}
.layout .content > div:nth-child(even) .grid-item .bg-white .btn-dark {
    --bs-btn-bg: color-mix(in srgb, var(--dark), black 50%);
    --bs-btn-hover-bg: color-mix(in srgb, var(--dark), black 65%);
    --bs-btn-border-color: color-mix(in srgb, var(--dark), black 65%);
    --bs-btn-active-bg: color-mix(in srgb, var(--dark), black 80%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--dark), black 80%);
}*/
#table_of_contents .btn-action 
 {
    --bs-btn-color: var(--lion-blue);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--lion-blue);
    --bs-btn-hover-bg: rgba(224,224,224, 1);
    --bs-btn-focus-shadow-rgb: 33, 37, 41;
    --bs-btn-active-color: var(--dark);
    --bs-btn-active-bg: rgba(224,224,224, 1);
   
    --bs-btn-bg: rgba(244,244,244, 1);
    padding: .35rem .75rem;
    transition: all .25s;
}
.node--type-interior-page .content-1 h2 {
    font-family: 'Roboto slab';
    color: var(--lion-light-blue);
    margin: -3rem 0 3rem 3rem;
    font-size: 2.5rem;
}
/*.layout*/ .content .content-1 .btn-link.btn-icon-right-arrow ,
/*.layout*/ .content .content-3 .btn-link.btn-icon-right-arrow {
    text-decoration: none;
    --bs-btn-bg: rgba(255,255,255, .75);
    --bs-btn-hover-bg: rgb(255,255,255, 1);
}
/* WD stuff 
.content-1 .grid {--bs-columns: 2 !important;}
.content-1 .grid .grid{--bs-columns: 3 !important;}*/
div#table_of_contents {
  background: color-mix(in srgb, var(--dark), var(--black) 20%);
  top: calc(2 * var(--navbar-height) + 1rem);
  padding:0 1rem !important;
}
#block-penn-college-pagetitle .bg-light ,
#block-pagetitle .bg-light {
    padding: var(--navbar-height) 0 3rem;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--dark), var(--black) 60%), color-mix(in srgb, var(--dark), var(--black) 20%))!important;
    color:white;
}
div.content-1  .responsive-slick .slick-arrow:before, div.content-1  .responsive-slick .slick-dots button:before {
    color: var(--light) !important; text-shadow: none;
}