@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

:root {
  --main-logo-img: url('/content/20/_site_images/site_logo.png');
  --main-logo-sizing: auto;
  --background-1: #FFFFFF;
  --dark-background-1: #000025;
  --background-2: #FCFCFC;
  --dark-background-2: #292929;
  --background-3: #F4F4F4;
  --dark-background-3: #1E1E1E;
  --header-1: #678D98;
  --dark-header-1: #FFFFFF;
  --header-2: #343479;
  --dark-header-2: #7171A1;
  --small-headers: #000000;
  --dark-small-headers: #FFFFFF;
  --paragraph: #000000;
  --dark-paragraph: #FFFFFF;
  --links: #678D98;
  --power-color-1-foreground: #FFFFFF;
  --power-color-1: #343479;
  --power-color-2-foreground: #ffffff;
  --power-color-2: #668a38;
  --power-color-3-foreground: #000000;
  --power-color-3: #678d98;
  --power-color-4-foreground: #000000;
  --power-color-4: #c2ac80;
  --power-color-5-foreground: #FFFFFF;
  --power-color-5: #5b4a42;
  --power-color-6-foreground: #000000;
  --power-color-6: #658A38;
  --power-color-7-foreground: #000000;
  --power-color-7: #678d98;
  --secondary-architecture: #010852;
  --dark-secondary-architecture: #A4A9E1;
  --image-placeholder-color: orange;
  --primary-header-font: 600 24px/32px 'Rubik', 'Verdana',sans-serif;
  --primary-header-font-variant: uppercase;
  --secondary-header-font: 600 20px/26px 'Roboto Slab', 'Arial',sans-serif;
  --secondary-header-font-variant: uppercase;
  --small-header-font: 500 15px/17px 'Roboto Slab', 'Arial',sans-serif;
  --small-header-font-variant: uppercase;
  --nav-text-font: 300 12px/14px 'Rubik', 'Arial',sans-serif;
  --paragraph-font: 300 14px/17px 'Rubik', 'Arial',sans-serif;
  --secondary-button-fonts: 400 13px/15px 'Rubik', 'Verdana',sans-serif;
}
/*======site-specific css======*/

	a[href*="//"]:not(.skip-offsite):not([href*="https://milibrary.org/"]):after {
		content: "";
		width: 11px;
		height: 11px;
		margin: 0 0 0 3px;
		mask-image: url('/content/_theme_images/icon_external-link.svg');
		mask-repeat: no-repeat;
		mask-size: cover;
		display: inline-block;
		position: relative;
		z-index: 10;
	}
	.dark-mode a[href*="//"]:not(.skip-offsite):not([href*="https://milibrary.org/"]):after{
		
	}
/*======end site-specific css======*/
/********//*======================================================================
    GLOBAL - styles | desktop
========================================================================*/
/*---------------------------------------------------------------------------------------------------
Global Fonts
font-family: "Baskervville", serif; (400) | (normal,italic)
font-family: "Libre Baskerville", serif; (400,700) | (normal,italic)
font-family: "Sarabun", sans-serif; (100,200,300,400,500,600,700,800) | (normal,italic)
----------------------------------------------------------------------------------------------------*/
* {
    box-sizing: border-box;
}
html {
    /*scroll-behavior: smooth;*/
    /*overflow-x: hidden;*/

    /*// theme variables //*/
    --theme-primary-color-1: #EAEAF1;
    --theme-primary-color-2: #EDC531;
    --theme-primary-color-3: #5D8047;/* was #668D4E */
    --theme-primary-color-4: #76520E;
    --theme-secondary-color-1: #A60321;
    --theme-secondary-color-2: #001233;
    /*--theme-secondary-color-3: #1C1C1C;*/
    --theme-secondary-color-3: #000816;
    /*--theme-secondary-color-4: #EAEAEA;*/
    --theme-secondary-color-4: #F4F4F4;
    --theme-secondary-color-5: #EBEBEB;
    --theme-default-color: #C8C8C8;
    
    --site-logo-container-width: 425px;
    --site-logo-height: auto;

    /* font shorthand example (convenient for setting font variables)... */
    /* font: ['font-style'] ['font-variant'] ['font-weight'] ['font-size']/['line-height'] ['font-family'] */
    /*// header variables //*/
    --font-header-1: normal 400 36px/42px "Libre Baskerville", serif;
    --font-header-2: normal 400 28px/33px "Libre Baskerville", serif;
    --font-header-3: normal 400 23px/27px "Libre Baskerville", serif;
    --font-header-4: normal 400 20px/25px "Libre Baskerville", serif;
    --font-header-5: normal 400 16px/22px "Libre Baskerville", serif;
    --font-header-color: #0C0C0C;
    /*// header > assets variables //*/
    --font-color-site-navigations: #000000;
    --font-panels-subheader: normal 400 14px/16px "Libre Baskerville", serif;
    --font-panels-access-option: normal 400 14px/16px "Sarabun", sans-serif;
    --panel-list-options-color: var(--font-color-site-navigations);
    --font-color-panels-access-option: var(--theme-primary-color-3);
    --font-main-navigation: normal 700 14px/15px "Libre Baskerville", serif;
    --font-main-navigation-dropdown: normal 400 15px/15px "Sarabun", sans-serif;
    --font-utility-navigation: normal 300 13px/15px "Sarabun", sans-serif;
    --font-utility-navigation-dropdown: normal 300 14px/15px "Sarabun", sans-serif;
    --font-top-search-input: normal 300 18px/20px "Sarabun", sans-serif;
    --font-subheader: normal 300 14px/16px "Sarabun", sans-serif;
    --alert-announcement-color: var(--theme-primary-color-2);
    --alert-emergency-color: var(--theme-secondary-color-1);
    --alert-closing-color: #8D63A5;

    /*// font body variables //*/
    --font-body: normal 300 18px/25px "Sarabun", sans-serif;
    --font-body-color: #4B4B4B;
    --font-body-alt-color: #0D0D0D;
    --font-body-intro-color: #4B4B4B;
    --font-body-intro: normal 300 20px/27px "Sarabun", sans-serif;
    --font-body-attribution: normal 300 16px/23px "Sarabun", sans-serif;
    --font-link: var(--font-body);
    --font-link-color: #455F35;/* was #668D4E */
    --font-ordered-list-marker: normal 600 18px/25px "Sarabun", sans-serif;
    --font-ordered-list-marker-color: rgba(69,95,53,.7);/* was rgba(102,141,78,0.7) */
    --font-select: normal 400 14px/22px "Sarabun", sans-serif;
    --font-color-select: #4C4C4C;
    --select-bg-image: url('/content/_theme_images/icon_select-downarrow.svg') no-repeat calc(100% - 7px) center;
    --select-bg-color: #fff;
    --preload-cover-bg-color: var(--theme-secondary-color-4);
    --font-form-label: 600 18px/22px "Sarabun", sans-serif;
    --font-acc-container: 600 18px/25px 'Sarabun', sans-serif;
    --font-pullquote: 400 22px / 32px 'Libre Baskerville';
    --font-pullquote-author: 500 18px/25px 'Sarabun';
    --font-pullquote-author-title: 400 16px/21px 'DM Sans';

    /*// button variables //*/
    --font-button: normal 400 14px/16px "Sarabun", sans-serif;
    --font-prompt-button: normal 400 13px/16px "Sarabun", sans-serif;
    --font-button-color: #FFFFFF;
    --button-bg-color: #5D8047;/* was #668D4E */
    --button-hover-bg-color: #81B362;
    --font-secondary-button-color: #455F35;/* was #668D4E */
    --button-secondary-bg-color: #ECF0E9;
    --button-secondary-hover-bg-color: #ECF5E4;
    
    --body-bg-color: #FCFCFC;
    --body-barrens-bg-color: var(--theme-primary-color-1);
    --body-barrens-border-color: #ccc;
    --body-barrens-border-opacity: 0;

    /*// wedge variables //*/
    --wedge-height: 22px;
    --wedge-margin: 0 0 30px 0;
    --wedge-color: var(--theme-primary-color-3);
    
    /*// overflow segment //*/
    --font-overflow-segment-perk-header: normal 400 25px/35px "Libre Baskerville", serif;
    --font-overflow-segment-benefit-body: normal 400 15px/17px "Sarabun", sans-serif;
    --font-overflow-segment-donation-heading: normal 400 28px/30px "Baskervville", serif;
    --font-overflow-segment-donation-details: normal 400 15px/18px "Sarabun", sans-serif;
    --overflow-segment-width: calc(100% + 55px);
    --overflow-segment-maximum-width: 1490px;
    --overflow-segment-offset: -25px;
    --overflow-segment-media-max-width: 50%;
    --overflow-segment-media-ratio: 1.1 / 1;
    --overflow-segment-gradient-color-1: #001D52;
    --overflow-segment-gradient-color-2: var(--theme-secondary-color-2);
    /*--overflow-segment-transform: translateX(var(--overflow-segment-offset));*/
    
    /*// full segment //*/
    --font-full-segment-filter-item: normal 400 14px/16px "Sarabun", sans-serif;
    --font-full-segment-author: normal 400 13px/14px "Sarabun", sans-serif;
    --font-event-list-month: normal 400 14px/16px "Sarabun", sans-serif;
    --font-event-list-day: normal 400 20px/20px "Libre Baskerville", serif;
    --font-event-list-details: normal 400 16px/18px "Sarabun", sans-serif;
    --font-materials-header: normal 600 14px/15px "Sarabun", sans-serif;
    --font-materials-favorite: normal 400 10px/12px "Sarabun", sans-serif;
    --font-materials-favorite-color: #FFFFFF;
    --font-staff-item-info: normal 300 14px/16px "Sarabun", sans-serif;
    --font-staff-discussion-question: normal 600 20px/26px "Sarabun", sans-serif;
    --font-book-item-author: normal 300 14px/18px "Sarabun", sans-serif;

    /*// "discover by" variables //*/
    --discover-by-bg-color: #EBF0E9;
    
    /*// "chess overlay" variables //*/
    --font-game-players: normal 300 14px/16px "Sarabun", sans-serif;
    
    /*// left sidebar variables //*/
    --font-return-to-link: normal 400 14px/18px "Sarabun", sans-serif;
    --font-context-navigation-heading: normal 400 18px/20px "Baskervville", serif;
    --font-context-navigation-list-item: normal 300 14px/18px "Sarabun", sans-serif;
    
    /* `swiperjs` overrides - https://swiperjs.com/ */
    --swiper-pagination-bottom: 0;
    --swiper-pagination-bullet-size: 13px;
    --swiper-pagination-bullet-horizontal-gap: 0;
    --swiper-pagination-bullet-border-radius: 0;
    --swiper-pagination-color: rgba(255,255,255,0.34);
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-inactive-color: rgba(255,255,255,0);
    --swiper-pagination-bullet-border-color: #FFFFFF;
    
    --brand-border-color: #000;
}
@media only screen and (max-width: 1490px) {
    html {
        --overflow-segment-maximum-width: 100vw;
        --overflow-segment-offset: calc(((100vw - 1440px) / 2) * -1); 
    }
}
@media only screen and (min-width: 1440px) {
    html {
        --body-barrens-border-opacity: 1;
    }
}
@media only screen and (max-width: 1440px) {
    html {
        --overflow-segment-width: 100%;
        --overflow-segment-maximum-width: none;
        --overflow-segment-offset: 0; 
        /*--overflow-segment-transform: translateX(var(--overflow-segment-offset));*/
    }
}
:root{
    /*lightmode */
    --desktop-light-logo:  var( --main-logo-img, "/_theme_images/default_logo.jpg");
    --tablet-light-logo: var( --main-logo-tablet-img, var(--desktop-light-logo) );
    --mobile-light-logo: var( --main-logo-mobile-img, var(--tablet-light-logo) );
    
    /*darkmode*/
    --desktop-dark-logo:  var(--main-logo-darkmode-img);
    --tablet-dark-logo: var( --main-logo-tablet-darkmode-img, var(--desktop-dark-logo) );
    --mobile-dark-logo: var( --main-logo-mobile-darkmode-img, var(--tablet-dark-logo) );
    
    /*default to lightmode (eeeeeeewwwwwww) */
    --desktop-logo:  var( --desktop-light-logo);
    --tablet-logo: var( --tablet-light-logo, var(--desktop-logo) );
    --mobile-logo: var( --mobile-light-logo, var(--tablet-logo) );
    
    
    
    --current-logo-image: var(--desktop-logo);
    --current-logo-width: 252px;
    --current-logo-height: 160px;
    
    
    --image-placeholder-icon-color: white;
    
    --san-serif-font:  "DM Sans";
    --serif-font:  "Aleo";
}

/*======================================================================
    Accessibility - styles
=======================================================================*/
/*---------------------------------- Accessibility > Dark Mode ----------------------------------*/
body.dark-mode {
    /*switch to darkmode!*/
    --desktop-logo:  var( --desktop-dark-logo, var(--desktop-light-logo));
    --tablet-logo: var( --tablet-dark-logo, var(--tablet-light-logo, var(--desktop-logo) ) );
    --mobile-logo: var( --mobile-dark-logo, var(--mobile-light-logo, var(--tablet-logo)  ) );
    
    /*think we need to override since it probably will point to lightmode desktop otherwise*/
    --current-logo-image: var(--desktop-logo);
    --image-placeholder-icon-color: #aaaaaa;
}
/* dark mode updates: */
body.dark-mode {
    color-scheme: dark;
    --main-logo-img: url('/content/20/_site_images/site_logo-dm.png');
    
    --theme-secondary-color-2: #0A2D6E;
    --theme-secondary-color-3: #141C2A;
    --theme-secondary-color-4: #1E1E1E;
    --theme-secondary-color-5: #EBEBEB;
    --theme-default-color: #373737;
    --font-header-color: #F3F3F3;
    --font-color-site-navigations: #FFFFFF;
    --panel-list-options-color: #FFFFFF;
    --font-body-color: #C9C9C9;
    --font-body-alt-color: #F2F2F2;
    --font-body-intro-color: #999999;
    --font-link-color: #8BB375;
    --font-ordered-list-marker-color: rgba(139,179,117,.9);
    --select-bg-color: #000000;
    --button-bg-color: #577E3F;
    --button-hover-bg-color: #486F30;
    --font-secondary-button-color: #9CC08C;
    --button-secondary-bg-color: #202D1A;
    --button-secondary-hover-bg-color: #14210F;
    --body-bg-color: #030303;
    --overflow-segment-gradient-color-1: #000439;
    --overflow-segment-gradient-color-2: #090924;
    --discover-by-bg-color: #11160F;
    
    --body-barrens-bg-color: #3D3D3D;
    --body-barrens-border-color: #1F1F1F;
}
body.dark-mode header .main-navigation ul.nav-list li.dropdown-included:first-of-type {
    --list-theme-color: #4669AA;
}
body.dark-mode header .main-navigation ul.nav-list li.dropdown-included:nth-of-type(6) {
    --list-theme-color: #4669AA;
}
body.dark-mode .home {
    --font-header-color: #F4F4F4;
    --quicklink-color: #B4B4B4;
}
body.dark-mode .home .button.alternate, body.dark-mode .home a.button-like.alternate {
    --button-bg-color: #002B4D;
}
body.dark-mode .overflow-segment.secondary-color-scheme {
    --overflow-segment-gradient-color-1: #2C4C19;
    --overflow-segment-gradient-color-2: #1D360F;
}
body.dark-mode .overflow-segment.tertiary-color-scheme {
    --overflow-segment-gradient-color-1: #7C0000;
    --overflow-segment-gradient-color-2: #570000;
}
body.dark-mode .authors-list {
    --font-header-color: #B1B1B1;
    --font-body-color: #A8A8A8;
}
body.dark-mode .engagement-list {
    --font-header-color: #B1B1B1;
    --font-body-color: #A8A8A8;
}
body.dark-mode .archives-component {
    --font-header-color: #B1B1B1;
    --font-body-color: #A8A8A8;
}
body.dark-mode .overflow-segment.bare {
    --font-header-color: #F3F3F3;
    --font-body-color: #B4B4B4;
}
/*body.dark-mode .content-board .details svg path {*/
/*    fill: #B4B4B4;*/
/*}*/
/*---------------------------------- Accessibility > Bigger Text ----------------------------------*/
body.bigger-text {
    --font-panels-subheader: normal 400 17px / 19px "Libre Baskerville", serif; /* +3 */
    --font-panels-access-option: normal 400 17px / 19px "Sarabun", sans-serif; /* +3 */
    --font-main-navigation: normal 700 16px / 17px "Libre Baskerville", serif; /* +3 */
    --font-main-navigation-dropdown: normal 400 18px / 18px "Sarabun", sans-serif; /* +3 */
    --font-utility-navigation: normal 300 16px / 18px "Sarabun", sans-serif; /* +3 */
    --font-utility-navigation-dropdown: normal 300 17px / 18px "Sarabun", sans-serif; /* +3 */
    --font-subheader: normal 300 17px / 19px "Sarabun", sans-serif; /* +3 */
    --font-select: normal 400 17px / 25px "Sarabun", sans-serif; /* +3 */
    --font-button: normal 400 17px / 19px "Sarabun", sans-serif; /* +3 */
    --font-prompt-button: normal 400 16px / 19px "Sarabun", sans-serif; /* +3 */
    --font-overflow-segment-benefit-body: normal 400 18px / 20px "Sarabun", sans-serif; /* +3 */
    --font-overflow-segment-donation-details: normal 400 18px / 21px "Sarabun", sans-serif; /* +3 */
    --font-full-segment-filter-item: normal 400 17px / 19px "Sarabun", sans-serif; /* +3 */
    --font-full-segment-author: normal 400 16px / 17px "Sarabun", sans-serif; /* +3 */
    --font-event-list-month: normal 400 17px / 19px "Sarabun", sans-serif; /* +3 */
    --font-materials-header: normal 600 17px / 18px "Sarabun", sans-serif; /* +3 */
    --font-staff-item-info: normal 300 17px / 19px "Sarabun", sans-serif; /* +3 */
    --font-book-item-author: normal 300 17px / 21px "Sarabun", sans-serif; /* +3 */
    --font-return-to-link: normal 400 17px / 21px "Sarabun", sans-serif; /* +3 */
    --font-context-navigation-list-item: normal 300 17px / 21px "Sarabun", sans-serif; /* +3 */
}
body.bigger-text .home {
    --font-body: normal 400 18px / 23px "Sarabun", sans-serif; /* +1 */
    --font-quicklink: normal 300 18px / 19px "Sarabun", sans-serif; /* +3 */
}
body.bigger-text .authors-list {
    --font-link: normal 300 16px / 18px "Sarabun", sans-serif; /* +2 */
}
body.bigger-text .calendar-region {
    --font-calendar-date: normal 400 16px / 18px "Sarabun", sans-serif; /* +2 */
    --font-calendar-event: normal 400 16px / 20px "Libre Baskerville", serif; /* +2 */
    --font-calendar-event-time: normal 400 16px / 17px "Sarabun", sans-serif; /* +2 */
}
body.bigger-text .calendar-day-event .event-details {
    --font-body: normal 300 16px / 18px "Sarabun", sans-serif; /* +2 */
}
body.bigger-text .staff-list {
    --font-body: normal 400 16px / 18px "Sarabun", sans-serif; /* +2 */
}
body.bigger-text footer {
    --font-header-5: normal 400 16px / 20px "Libre Baskerville", serif; /* +2 */
    --font-body: normal 400 16px / 21px "Sarabun", sans-serif; /* +2 */
    --font-link: normal 400 16px / 20px "Sarabun", sans-serif; /* +1 */
}
body.bigger-text footer .footer-sitemap {
    --font-link: normal 500 16px / 20px "Sarabun", sans-serif; /* +1 */
}
body.bigger-text footer .footer-sitemap nav.footer-credits {
    --font-link: normal 400 15px / 19px "Sarabun", sans-serif; /* +3 */
}
body.bigger-text footer .footer-details .hours .hours-list li .disclaimer {
    padding-left: calc(8px + var(--footer-hours-list-min-cell-size));
}
/*---------------------------------- Accessibility > High Contrast ----------------------------------*/
body.high-contrast h1, body.high-contrast .h1-like, body.high-contrast h2, body.high-contrast .h2-like, body.high-contrast h3, body.high-contrast .h3-like, body.high-contrast h4, body.high-contrast .h4-like, body.high-contrast h5, body.high-contrast .h5-like { /* added to query */
    font-weight: 700 !important;
    color: var(--font-body-color) !important;
}
body.high-contrast p, body.high-contrast a, body.high-contrast button, body.high-contrast ul li, body.high-contrast ol li, body.high-contrast div, body.high-contrast span, body.high-contrast label { /* added to query */
    font-weight: 600 !important;
    color: var(--font-body-color) !important;
}
body.high-contrast {
    --theme-primary-color-3: #74A259;
    --font-body-color: #000000;
    --font-body-intro-color: #000000;
    --font-button-color: #000000;
    --button-bg-color: #74A259;
    --button-secondary-bg-color: #DDE2DA; /* ECF0E9 -> CDD3CA */
    --swiper-pagination-color: rgba(255, 255, 255, 1);
}
body.high-contrast header .utility-navigation ul.nav-social-list {
    column-gap: 10px;
}
body.high-contrast footer a.button-like {
    --font-body-color: #000000;
}
body.high-contrast .overflow-segment.secondary-color-scheme {
    --overflow-segment-gradient-color-1: #3E5F2B;
    --overflow-segment-gradient-color-2: #304821;
}
body.high-contrast .authors-list,body.high-contrast .engagement-list, body.high-contrast .archives-component, body.high-contrast .overflow-segment.bare {
    --font-header-color: #000000;
    --font-body-color: #000000;
}
body.high-contrast header .utility-navigation ul.panel-options li:before, body.high-contrast header .utility-navigation ul.nav-list li .list-dropdown ul li a, body.high-contrast header .utility-navigation ul.nav-social-list li a, body.high-contrast .overflow-segment.banner .content-board .details, body.high-contrast .staff-list p, body.high-contrast .staff-component .staff-discussion .discussion-question {
    opacity: 1;
}
body.high-contrast figcaption {
    font-weight: 600;
}
body.high-contrast .basic-overlay .overlay-content .overlay-close-icon:before, body.high-contrast .basic-overlay .overlay-content .overlay-close-icon:after {
    width: 2px;
    background-color: var(--font-body-color);
}
body.high-contrast .discover-filters .current-filters .expand-filters:before, body.high-contrast .calendar .calendar-title .cal-arrow, body.high-contrast .discover-filters ul li label input:checked ~ .checkmark svg g, body.high-contrast .staff-component svg path, body.high-contrast a:after {
    background-color: var(--font-body-color);
    fill: var(--font-body-color);
}
body.high-contrast .discover-filters.eresources .tagged-list label, body.high-contrast .discover-filters ul li label {
    color: var(--font-body-color);
    font-weight: 600;
}
body.high-contrast .gallery-overlay .close-button:before {
    background-color: var(--font-body-color);
}
body.high-contrast img, body.high-contrast .books-slider .swiper-slide .book .book-media, body.high-contrast .section .column-two .column-item.blog.slim .blog-media, body.high-contrast .section .section-content .content-columns .column.newsletter .newletter-media, body.high-contrast .section .column-two .column-item .booklists .book .book-media .media-front, body.high-contrast .section .column-two .column-item.reserve .reserve-media, body.high-contrast .section .column-two .column-item.booklist .item-booklist .media, body.high-contrast .bucket .bucket-media, body.high-contrast .upcoming-event-image {
    opacity: 0.7;
}
/*---------------------------------- Accessibility > Desaturate ----------------------------------*/
body.desaturate img, body.desaturate .books-slider .swiper-slide .book .book-media, body.desaturate .section .column-two .column-item.blog.slim .blog-media, body.desaturate .section .section-content .content-columns .column.newsletter .newletter-media, body.desaturate .section .column-two .column-item .booklists .book .book-media .media-front, body.desaturate .section .column-two .column-item.reserve .reserve-media, body.desaturate .section .column-two .column-item.booklist .item-booklist .media, body.desaturate .bucket .bucket-media, body.desaturate .upcoming-event-image {
    filter: grayscale(1);
}
body.desaturate {
    filter: grayscale(1);
}
/*---------------------------------- Accessibility > Highlight Links ----------------------------------*/
body.highlight-links a {
	background-color: #F0DF00 !important;
	color: #121212 !important;
}
body.highlight-links a > * {
	color: #121212 !important;
}
body.highlight-links {
    --font-link-color: #121212;
    --button-color: #121212;
    --button-bg-color: #F0DF00;
    --button-secondary-bg-color: #F0DF00;
    --button-secondary-hover-bg-color: #FCEC00;
}
body.highlight-links ul.nav-list li .link-backdrop, body.highlight-links header .utility-navigation ul.nav-list li .link-backdrop {
    display: none;
}

/*the thing to use as the initial load/bg of various image locations, that also serves as a fallback/placeholder for cases where there are no images*/
.placeholder-image {
    /*--image-placeholder-color from theme customization*/
    background-color: --image-placeholder-color;
}

h1, .h1-like {
    margin: 0 0 25px 0;
    color: var(--font-header-color);
    font: var(--font-header-1);
    --font-link: var(--font-header-1);
}
h2, .h2-like {
    margin: 31px 0 15px 0;
    color: var(--font-header-color);
    font: var(--font-header-2);
    --font-link: var(--font-header-2);
}
h3, .h3-like {
    margin: 25px 0 10px 0;
    color: var(--font-header-color);
    font: var(--font-header-3);
    --font-link: var(--font-header-3);
}
h4, .h4-like {
    margin: 22px 0 12px 0;
    color: var(--font-header-color);
    font: var(--font-header-4);
    --font-link: var(--font-header-4);
}
h5, .h5-like {
    margin: 22px 0 10px 0;
    color: var(--font-header-color);
    font: var(--font-header-5);
    --font-link: var(--font-header-5);
}
hr {
    width: 100%;
    height: 1px;
    margin: 15px 0;
    background-color: var(--hr-color);
    border: none;
}
input{
    font-family: inherit;  
}
p a.button-like {
    margin-right: 25px;
}
p {
    margin: 10px 0;
    color: var(--font-body-color);
    font: var(--font-body);
}
p.intro {
    margin: 0 0 30px 0;
    color: var(--font-body-intro-color);
    font: var(--font-body-intro);
}
p.attribution {
    opacity: 0.6;
    font: var(--font-body-attribution);
}
a {
    color: var(--font-link-color);
    font: var(--font-link);
    /*text-decoration: none;*/
    transition: color .3s;
}
a:after {
    background-color: var(--font-link-color);
}
a.skip-offsite:after {
    display: none;
}
form button.loader {
    border: none;
}
/*// general list styles //*/
ul, ol {
    margin: 10px 0 29px 0;
    color: var(--font-body-color);
    font: var(--font-body);
}
ul li, ol li {
    margin: 0;
    margin-bottom: 9px;
}
ul li:last-of-type, ol li:last-of-type {
    margin-bottom: 0;
}
/*/ unordered list styles /*/
ul {
    padding: 0;
    list-style-type: none;
}
ul li {
    padding-left: 26px;
    position: relative;
}
ul li:before {
    content: "";
    width: 12px;
    height: 12px;
    background-color: var(--font-link-color);
    position: absolute;
    top: 6px;
    left: 0;
}
ul li ul {
    margin: 9px 0 0 0;
}
ul li ul li:before {/* correct for 0.5px screens */
    width: 11px;
    height: 11px;
    background-color: var(--button-secondary-bg-color);
    border: 1px solid var(--font-link-color);
}
ul li ul li ul {
    margin: 9px 0 0 0;
}
ul li ul li ul li:before {
    width: 12px;
    height: 12px;
    background-color: var(--font-link-color);
    border: none;
}
/*/ ordered list styles /*/
ol {
    padding: 0 0 0 19px;
}
ol li {
    padding-left: 7px;
}
ol li::marker {
    width: 19px;
    color: var(--font-ordered-list-marker-color);
    font: var(--font-ordered-list-marker);
    display: inline-block;
}
ol li ol {
    margin: 10px 0 0 0;
    list-style: lower-alpha;
}
ol li ol li:last-of-type {
    margin: 0;
}
ol li ol li ol {
    margin: 10px 0 0 0;
    list-style: lower-roman;
}
/*// general "button" styles //*/
button, a.button-like {
    margin: 0 0 0 21px;
    padding: 10px 13px;
    background-color: var(--button-bg-color);
    border: none;
    color: var(--font-button-color);
    font: var(--font-prompt-button);
    letter-spacing: 0.2px;
    text-decoration: none;
    display: inline-block;
    position: relative;
    transition: background-color .2s;
    cursor: pointer;
}
button[disabled] {
    opacity: 0.4;
    pointer-events: none;
}
button:hover, a.button-like:hover {
    background-color: var(--button-hover-bg-color);
    transition: background-color .3s;
}
button:before, a.button-like:before {
    content: "";
    width: 10px;
    height: 100%;
    background-color: var(--button-bg-color);
    opacity: 0.5;
    display: block;
    position: absolute;
    top: 0;
    left: -15px;
    transition: opacity .2s, background-color .2s;
}
button:hover:before, a.button-like:hover:before {
    opacity: 1;
    transition: opacity .3s, background-color .3s;
}
button:hover:before, a.button-like:hover:before {
    background-color: var(--button-hover-bg-color);
    transform: translateY(0);
    transition: background-color .3s, transform .3s ease-out;
}
/*/ button "primary" styles /*/
a.button-like.primary:after {
    background-color: var(--font-button-color);
}
/*/ button "secondary" styles /*/
button.secondary, a.button-like.secondary {/* correct for 0.5px screens */
    margin: 0 8px 0 0;
    padding: 9px 13px 10px;
    background-color: var(--button-secondary-bg-color);
    border: 1px solid var(--font-secondary-button-color);
    color: var(--font-secondary-button-color);
}
button.secondary:before, a.button-like.secondary:before {
    display: none;
}
button.secondary:hover, a.button-like.secondary:hover {
    background-color: var(--button-secondary-hover-bg-color);
}
/* overwrite buttons spacing for body content */
p a.button-like, p a.button-like.secondary {
    margin-bottom: 10px;
}
p a.button-like.primary {
    margin-left: 15px;
}

img {
    max-width: 100%;
    height: auto;
}
.img_right_25 {
    float: right;
    width: 25%;
    margin: 20px 0 20px 25px;
    clear: right;
}
.img_right_50 {
    float: right;
    width: 50%;
    margin: 20px 0 20px 35px;
    clear: right;
}
.img_right_native {
    float: right;
    max-width: 100%;
    width: auto;
    /*margin: 20px 0 20px 35px;*/
    clear: right;
}
.img_left_25 {
    float: left;
    width: 25%;
    margin: 20px 25px 20px 0;
    clear: left;
}
.img_left_50 {
    float: left;
    width: 50%;
    margin: 20px 35px 20px 0;
    clear: left;
}
.img_left_native {
    float: left;
    max-width: 100%;
    width: auto;
    /*margin: 35px 35px 35px 0;*/
    clear: left;
}
.img_full_styled {
    width: 100%;
    float: none;
    margin: 15px auto;
}
.img_full_styled img {
    width: 100%;
}
.img_native_block {
    max-width: 100%;
    /*margin: 35px 0;*/
}

figcaption {
    margin: 0;
    opacity: 0.8;
    font-size: 16px;
    font-weight: 300;
    line-height: normal;
    text-align: center;
}
figcaption p {
    margin: 0;
    font-size: 16px;
    line-height: normal;
}
.desktop-small, .tablet, .mobile {
display: none;
}
.desktop {
display: block;
}
#is_desktop_small, #is_tablet, #is_mobile {
position: absolute;
}
.hidden {
display: none;
}
.darkmode {
display: none;
}

.default {
    /*background: url('/content/_site_images/icon_placeholder-mark.svg') var(--theme-default-color) no-repeat center;*/
    /*/content/_site_images/icon_placeholder-mark-eresources.svg*/
    background: var(--theme-default-color) no-repeat center;
}
.default-book-icon {
    background-image: url('/content/_site_images/icon_placeholder-mark.svg');
}
.has-image {
    background: transparent no-repeat center;
    background-size: cover;
}
.align-center {
    text-align: center;
}

/*/ custom divider element /*/
.wedge {
    width: 100%;
    height: var(--wedge-height);
    margin: var(--wedge-margin);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.wedge:before, .wedge:after {
    content: "";
    width: 50%;
    height: 1px;
    background-color: var(--wedge-color);
    display: block;
    position: absolute;
}
.wedge:before {
    top: 0;
    left: 0;
}
.wedge:after {
    bottom: 0;
    right: 0;
}
.wedge .wedge-center {
    width: 1px;
    height: 100%;
    background-color: var(--wedge-color);
    display: block;
}

/* Style Guide Assets */
body {
    --font-style-guide: italic 400 36px/38px "Baskervville", serif;
    --font-color-style-guide: rgba(100,100,100,1);
    --style-guide-divider-grad: linear-gradient(to right, rgba(100,100,100,0) 0, rgba(100,100,100,1) 25%, rgba(100,100,100,1) 75%, rgba(100,100,100,0) 100%);
}
body.dark-mode {
    --font-color-style-guide: rgba(200,200,200,1);
    --style-guide-divider-grad: linear-gradient(to right, rgba(200,200,200,0) 0, rgba(200,200,200,1) 25%, rgba(200,200,200,1) 75%, rgba(200,200,200,0) 100%);
}
.guide-divider {
    width: 100%;
    margin-top: 100px;
    color: var(--font-color-style-guide);
    font: var(--font-style-guide);
    transition: color .3s;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.guide-divider:first-of-type {
    margin-top: 0;
}
.guide-divider:after {
    content: "";
    width: 100%;
    height: 1px;
    margin: 8px 0 20px 0;
    background: var(--style-guide-divider-grad);
    display: block;
    transition: background .3s;
}
.style-button-options {
    width: 100%;
    margin: 8px 0;
    display: flex;
    column-gap: 5px;
    align-items: flex-end;
}
.style-button-options a {
    margin-right: 25px;
}

/* home page favorited branches and audiences states */
.favorited:after,
.preferred-favorite:after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--favorited-star-icon);
    background-size: cover;
    display: block;
    top: 2px;
    left: -16px;
    /*background-color: orange;*/
    /*clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);*/
}

form {
margin-top: 70px;
max-width: 813px;
}
.register-form-two {
    margin-top: unset;
}
form fieldset {
margin: 0;
padding: 0;
border: none;
}
form fieldset[data-name="check_box"], form fieldset[data-name="new_element"] {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
}
form .field-row {
display: flex;
margin-bottom: 20px;
}
form .field-row .field-container {
flex-grow: 1;
margin-right: 10px;
}
form .field-row .field-container label {
width: 100%;
display: block;
}
form .field-row .field-container label .txt, form .field-row .field-container fieldset .txt {
    font: var(--font-form-label);
    margin-bottom: 5px;
}
form .field-row .field-container label:has( input[type="checkbox"]), form .field-row .field-container label:has( input[type="radio"]) {
    display: flex;
    gap: 5px;
    width: max-content;
}
.success-message {
    width: 100%;
    margin: 32px 0px;
    padding: 40px 37px;
    background-color: var(--theme-secondary-color-4);
    border-left: 15px solid var(--theme-primary-color-2);
}
.success-message h2, .success-message .h2-like,  {
    margin: 0;
}
input, input[type="text"], input[type="email"], input[type="password"], textarea {
    width: 100%;
    margin: 5px 0 10px 0;
    padding: 5px;
    background-color: var(--select-bg-color);
    border: 1px solid var(--brand-border-color);
    border-radius: 5px;
    color: var(--font-body-color);
    font: var(--font-button);
    display: block;
}
input[type="file"] {
    background-color: unset;
}
input[type="file" i]::-webkit-file-upload-button {
    font: var(--font-button);
    background-color: var(--button-secondary-bg-color);
    border: 1px solid var(--font-secondary-button-color);
    color: var(--font-secondary-button-color);
    padding: 9px 13px 10px;
    cursor: pointer;
}
input[type="file" i]::-webkit-file-upload-button:hover {
    background-color: var(--button-secondary-hover-bg-color);
}
textarea {
font-family: 'DM Sans', serif;
}
input[type="checkbox"], input[type="radio"] {
width: initial;
}
select {
    padding: 5px;
    border: 1px solid var(--brand-border-color);
    background-color: var(--select-bg-color);
    border-radius: 5px;
    color: var(--font-body-color);
    font: var(--font-button);
    position: relative;
}
select:before {
    position: absolute;
    content: '';
}
select.sort-by {
    width: 150px;
    margin-left: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
}
form input[type="submit"] {
/*font: var(--small-header-font);*/
font-weight: 400;
color: var(--power-color-1-foreground);
background-color: var(--power-color-1);
border: unset;
padding: 6px 20px;
border-radius: 20px;
text-transform: capitalize;
width: fit-content;
}

/* pullquote */
.pullquote {
    width: 100%;
    margin: 0;
    padding: 50px 100px 60px 100px;
    background-color: var(--theme-secondary-color-4);
    border: 1px solid var(--theme-default-color);
    color: var(--font-body-color);
    font: var(--font-pullquote);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}
.pullquote:before, .pullquote:after {
    content: "";
    display: block;
    position: absolute;
}
.pullquote:before {
    width: 24px;
    height: 20px;
    background: url('data:image/svg+xml,<svg width="23.714px" height="19.241px" viewBox="0 0 23.714 19.241" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M23.714,1.917 C21.5366667,3.57366667 19.9865,5.1475 19.0635,6.6385 C18.1405,8.1295 17.679,9.77433333 17.679,11.573 C18.2943333,11.1943333 19.0043333,11.005 19.809,11.005 C20.8976667,11.005 21.7851667,11.3718333 22.4715,12.1055 C23.1578333,12.8391667 23.501,13.774 23.501,14.91 C23.501,16.188 23.0631667,17.2293333 22.1875,18.034 C21.3118333,18.8386667 20.1403333,19.241 18.673,19.241 C15.3123333,19.241 13.632,17.0163333 13.632,12.567 C13.632,11.3836667 13.774,10.2831667 14.058,9.2655 C14.342,8.24783333 14.8035,7.25383333 15.4425,6.2835 C16.0815,5.31316667 16.9453333,4.31916667 18.034,3.3015 C19.1226667,2.28383333 20.4716667,1.18333333 22.081,0 L23.714,1.917 Z M10.082,1.917 C7.90466667,3.57366667 6.3545,5.1475 5.4315,6.6385 C4.5085,8.1295 4.047,9.77433333 4.047,11.573 C4.66233333,11.1943333 5.37233333,11.005 6.177,11.005 C7.26566667,11.005 8.15316667,11.3718333 8.8395,12.1055 C9.52583333,12.8391667 9.869,13.774 9.869,14.91 C9.869,16.188 9.43116667,17.2293333 8.5555,18.034 C7.67983333,18.8386667 6.50833333,19.241 5.041,19.241 C1.68033333,19.241 0,17.0163333 0,12.567 C0,11.3836667 0.142,10.2831667 0.426,9.2655 C0.71,8.24783333 1.1715,7.25383333 1.8105,6.2835 C2.4495,5.31316667 3.31333333,4.31916667 4.402,3.3015 C5.49066667,2.28383333 6.83966667,1.18333333 8.449,0 L10.082,1.917 Z" fill="%23668D4E"></path></g></svg>') no-repeat center;
    background-size: contain;
    top: 50px;
    left: 55px;
}
.pullquote:after {
    width: 9px;
    height: calc(100% + 2px);
    background-color: var(--font-link-color);
    top: -1px;
    left: -1px;
}
.pullquote .pullquote-author {
    margin: 20px 0 0 0;
    color: var(--font-body-color);
    font: var(--font-pullquote-author);
}
.pullquote .pullquote-author:before {
    content: "";
    width: 37px;
    height: 5px;
    margin: 0 15px 4px 0;
    background-color: var(--font-body-color);
    display: inline-block;
}
.pullquote .pullquote-author:after {
    content: '';
    position: absolute;
    width: 66px;
    height: 66px;
    bottom: 0;
    left: 50px;
    border-radius: 40px;
    background-color: var(--brand-alternate-color-3);
}
.pullquote .pullquote-author-title {
    font: var(--font-pullquote-author-title);
    color: var(--font-body-color);
}

/* FORM */
form h3 {
    margin: 0;
}
input, input[type="text"], input[type="email"], input[type="password"], textarea {
    margin: 15px 0 0 0;
    border-radius: 0;
    border: 1px solid var(--theme-default-color);
}
input[type="file"] {
    border: unset;
}
fieldset[data-name="checkboxes"], fieldset[data-name="radios"] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
fieldset[data-name="checkboxes"] legend, fieldset[data-name="radios"] legend {
    width: 100%;
    font-weight: 600;
    margin-bottom: 5px;
}
input[type="checkbox"], input[type="radio"] {
    margin: 2px 0 0 0;
}
form .field-row .field-container label.select {
    display: flex;
    flex-direction: column;
}
select {
    border-radius: 0;
    border: 1px solid var(--theme-default-color);
}
hr {
    height: 10px;
    clip-path: polygon(0% 0%, calc(50% + .5px) 0%, calc(50% + .5px) calc(100% - 1px), 100% calc(100% - 1px), 100% 100%, calc(50% - .5px) 100%, calc(50% - .5px) 1px, 0% 1px);
    background-color: var(--font-link-color);
}
form button.submit-button {
    margin: 0 8px;
    padding: 9px 13px 10px;
    background-color: var(--button-secondary-bg-color);
    border: 1px solid var(--font-secondary-button-color);
    color: var(--font-secondary-button-color);
    text-transform: capitalize;
}
form button.submit-button:before, form button.submit-button:after {
    content: unset;
}

.strike-through{
    text-decoration: line-through;
}

.byte_content_embargo {
    background-color: #FF8800 !important;
    box-shadow: 0 0 3px #ccc !important;
}
.byte_content_postpone {
    display: none !important;
}
img.byte_img_embargo {
    box-shadow: 5px 5px 1px 2px #FF8800, 5px 5px 3px 2px #ccc !important;
}
img.byte_img_review {
    display: none !important;
}

/*======================================================================
    HEADER - styles | desktop
=======================================================================*/
header {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 30;
    /* JS - z index of header was overlapping overlays, and this seemed to fix it */
    transition: padding .3s ease-out;
}
/* override base styles for this section */
header a {
    text-decoration: none;
}
header ul {
    margin: 0;
    padding: 0;
}
header ul li ul {
    margin: 0;
    padding: 0;
}
header ul li {
    margin: 0;
    padding: 0;
}
header.close-notices {
    padding: 0;
}
header .header-panels {
    width: 100%;
    /*max-width: 1280px;*/
    position: relative;
    z-index: 5;
}
header .header-panels .close-icon {
    /* opacity: 0; */
    display: block;
    position: absolute;
    top: 15px;
    right: 30px;
    z-index: 15;
    /* pointer-events: none; */
    /* transition: opacity 0s; */
}
header .header-panels .close-icon svg g {
    fill: var(--font-body-color);
}
header .header-panels .panel {
    width: 100%;
    padding: 30px;
    background-color: var(--body-bg-color);
    background-color: var(--discover-by-bg-color);
    border: 1px solid var(--theme-primary-color-3);
    opacity: 0;
    pointer-events: none;
    transform: translateY(5px);
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .2s, transform .2s;
}
header .header-panels .panel.show-panel {
    opacity: 1;
    pointer-events: all;
    position: relative;
    transform: translateY(0);
    transition: opacity .3s .1s, transform .3s;
}
header .header-panels .panel:has( .alert-messages) {
    padding: 20px 30px;
}
header .header-panels .panel .h3-like {
    margin: 0 0 20px 0;
    display: block;
}
header .header-panels .panel .access-options {
    width: 100%;
    display: flex;
    column-gap: 15px;
    align-items: flex-start;
}
header .header-panels .panel .access-options select {
    border: 1px solid var(--theme-primary-color-3);
    background: var(--select-bg-image);
    background-color: var(--select-bg-color);
    border-radius: initial;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: var(--font-color-select);
    font: var(--font-select);
}
header .header-panels .panel .access-options .access-section {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 5px;
}
header .header-panels .panel .access-options .access-section .subheader {
    width: 100%;
    color: var(--font-color-site-navigations);
    font: var(--font-panels-subheader);
    display: block;
}
header .header-panels .panel .access-options .access-section .option {
    color: var(--font-color-panels-access-option);
    display: flex;
    align-items: center;
    column-gap: 4px;
}
header .header-panels .panel .access-options .access-section .option .icon {
    width: 22px;
    height: 22px;
    background-color: var(--body-bg-color);
    border: 1px solid var(--theme-primary-color-3);
    color: var(--theme-primary-color-3);
    font: var(--font-panels-access-option);
    font-weight: 700;/* overwrites `font` set weight */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .3s, color .3s;
}
header .header-panels .panel .access-options .access-section .option.active .icon {
    background-color: var(--theme-primary-color-3);
    color: #fff;/* TODO: turn this into a var */
}
header .header-panels .panel .access-options .access-section .option p {
    margin: 0;
    color: var(--font-color-panels-access-option);
    font: var(--font-panels-access-option);
}
header .header-panels .panel .access-options .access-section .option.mobile {
    display: none;
}
header .header-panels .panel .access-options .access-section .option.active .option.mobile {
    background-color: var(--theme-primary-color-3);
    color: var(--font-button-color);
}
header .header-panels .panel .alert-messages {
    width: calc(100% - 38px);
    margin: 0;
    padding: 0 0 2px 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}
header .header-panels .panel .alert-messages .swiper-slide {
    padding: 0 0 0 15px;
    display: flex;
    justify-content: flex-start;
    overflow: visible;
}
header .header-panels .panel .alert-message {
    color: var(--font-body-color);
    font-size: 14px;
    line-height: 15px;
    position: relative;
}
header .header-panels .panel .alert-message:before {
    content: "";
    width: 7px;
    height: calc(100% + 1px);
    background-color: var(--body-media-bg-color);
    display: block;
    position: absolute;
    top: 0;
    left: -15px;
}
header .header-panels .panel .alert-message.closing:after {
    background-color: var(--alert-closing-color);
}
header .header-panels .panel .alert-message.emergency:after {
    background-color: var(--alert-emergency-color);
}
header .header-panels .panel .alert-message.announcement:after {
    background-color: var(--alert-announcement-color);
}
header .header-panels .panel .alert-message.closing:before {
    background-color: var(--alert-closing-color);
}
header .header-panels .panel .alert-message.emergency:before {
    background-color: var(--alert-emergency-color);
}
header .header-panels .panel .alert-message.announcement:before {
    background-color: var(--alert-announcement-color);
}
header .header-panels .panel .alert-message a {
    text-decoration: underline;
}
header .header-panels .panel .alert-svg {
    position: relative;
    top: 6px;
}
header .header-wrapper {
    width: 100%;
    background-color: var(--theme-secondary-color-4);
    display: flex;
    position: relative;
    z-index: 10;
}
header .skip-navigation {
    opacity: 0;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 35;
    pointer-events: none;
    transition: opacity .2s;
}
header .skip-navigation:focus {
    opacity: 1;
    pointer-events: all;
}
header .site-logo {
    width: var(--site-logo-container-width);
    margin: 38px 0 0 0;
    padding: 28px 32px 0 28px;
    /*background-color: rgba(0,0,255,0.1);*/
    background-color: var(--body-bg-color);
    display: block;
}
header .site-logo .site-logo-link {
    display: block;
}
header .site-logo .site-logo-link img {
    content: var(--main-logo-img);
    max-width: 100%;
    max-height: var(--site-logo-height);
}
header .site-navigations {
    width: calc(100% - 425px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: initial;
    /*margin-right: 25px;*/
    
    /*background-color: rgba(255,0,0,0.1);*/
}
header .ham-menu {
    width: 45px;
    flex-direction: column;
    position: relative;
    z-index: 100;
}
header .ham-menu .line {
    width: 100%;
    height: 3px;
    margin-bottom: 8px;
    border-radius: 15px;
    background-color: var(--power-color-2);
    opacity: 1;
    display: inline-block;
    transition: background-color .3s ease-out, opacity .2s ease-out, transform .3s ease-out;
}
header .ham-menu .line:nth-child(2) {
    background-color: var(--power-color-3);
}
header .ham-menu .line:nth-child(3) {
    background-color: var(--power-color-5);
}
header.open-menu .ham-menu .line {
    margin-bottom: 0;
    position: absolute;
    top: 11px;
}
header.open-menu .ham-menu .line:first-of-type {
    transform: rotate(45deg);
    top: 11px;
}
header.open-menu .ham-menu .line:nth-of-type(2) {
    transform: rotate(-45deg);
    top: 11px;
}
header.open-menu .ham-menu .line:last-of-type {
    opacity: 0;
}
header ul.nav-list li {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    position: initial;
}
header ul.nav-list li:before {
    display: none;
}
header ul.nav-list li a.list-toggle {
    display: block;
    transform: scaleY(-1);
    transition: transform .3s;
}
header ul.nav-list li.show-dropdown a.list-toggle {
    transform: scaleY(1);
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ Main Navigation \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
header .main-navigation {
    width: 100%;
    padding: 20px 29px 0 0;
    /*padding-right: 86px;*//* 40px (to align with utility) + 36px (width of search button) + 10px (spacing between nav and search icon) */
    background-color: var(--body-bg-color);
    position: initial;
}
header .main-navigation ul.nav-list {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: initial;
}
header .main-navigation ul.nav-list li:hover, header .main-navigation ul.nav-list li:focus-within {
    z-index: 101;
}
header .main-navigation ul.nav-list li.dropdown-included:first-of-type {--list-theme-color: var(--theme-secondary-color-2);}
header .main-navigation ul.nav-list li.dropdown-included:nth-of-type(2) {--list-theme-color: var(--theme-primary-color-2);}
header .main-navigation ul.nav-list li.dropdown-included:nth-of-type(3) {--list-theme-color: var(--theme-primary-color-3);}
header .main-navigation ul.nav-list li.dropdown-included:nth-of-type(4) {--list-theme-color: var(--theme-primary-color-4);}
header .main-navigation ul.nav-list li.dropdown-included:nth-of-type(5) {--list-theme-color: var(--theme-secondary-color-1);}
header .main-navigation ul.nav-list li.dropdown-included:nth-of-type(6) {--list-theme-color: var(--theme-secondary-color-2);}
header .main-navigation ul.nav-list li.dropdown-included:nth-of-type(7) {--list-theme-color: var(--theme-secondary-color-3);}
header .main-navigation ul.nav-list li a {
    padding: 12px 8px;
    padding-left: 13px;
    color: var(--font-color-site-navigations);
    font: var(--font-main-navigation);
    text-decoration: none;
    display: block;
    position: relative;
    z-index: 10;
}
header .main-navigation ul.nav-list li a.list-toggle {
    display: none;
}
header .main-navigation ul.nav-list li .link-name {
    text-align: center;
    display: block;
    position: relative;
    z-index: 5;
}
header .main-navigation ul.nav-list li .link-name:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--list-theme-color);
    display: none;
    position: absolute;
    bottom: -13px;
    left: 0;
    z-index: 1;
}
header .main-navigation ul.nav-list li.active .link-name:after {
    display: block;
}
header .main-navigation ul.nav-list li .link-backdrop {
    width: 100%;
    height: 100%;
    background-color: var(--theme-secondary-color-4);
    border: 1px solid var(--list-theme-color);
    border-left-width: 5px;
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform: scaleY(0);
    transform-origin: 50% 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
header .main-navigation ul.nav-list li:hover .link-backdrop, header .main-navigation ul.nav-list li:focus-within .link-backdrop {
    opacity: 1;
    transform: scaleY(1);
    transition: opacity .3s .1s, transform .3s;
}
header .main-navigation ul.nav-list li .link-backdrop:after {
    content: "";
    width: 100%;
    height: 6px;
    background-color: var(--theme-secondary-color-4);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    transition: bottom .2s;
}
header .main-navigation ul.nav-list li:hover .link-backdrop:after, header .main-navigation ul.nav-list li:focus-within .link-backdrop:after {
    bottom: -3px;
    transition: bottom .2s .1s;
}
header .main-navigation ul.nav-list .list-dropdown {
    width: calc(100% - 60px);
    margin: 0 auto;
    padding: 21px;
    background-color: var(--theme-secondary-color-4);
    border: 1px solid var(--list-theme-color);
    border-left-width: 5px;
    opacity: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: absolute;
    top: 100%;
    left: 30px;
    z-index: 5;
    transform: translateY(-5px);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}
header .main-navigation ul.nav-list li:hover .list-dropdown, header .main-navigation ul.nav-list li:focus-within .list-dropdown {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s .2s, transform .3s .1s;
    pointer-events: all;
}
header .main-navigation ul.nav-list li .list-dropdown ul {
    width: calc(100% - 347px);
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 20px;
    align-items: flex-start;
}
header .main-navigation ul.nav-list li .list-dropdown ul li {
    width: calc(33% - 20px);
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity .2s, transform .2s;
}
header .main-navigation ul.nav-list li:hover .list-dropdown ul li, header .main-navigation ul.nav-list li:focus-within .list-dropdown ul li {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s .4s, transform .3s .4s;
}
header .main-navigation ul.nav-list li:hover .list-dropdown ul li:nth-of-type(2),
header .main-navigation ul.nav-list li:focus-within .list-dropdown ul li:nth-of-type(2) {
    transition: opacity .3s .45s, transform .3s .45s;
}
header .main-navigation ul.nav-list li:hover .list-dropdown ul li:nth-of-type(3),
header .main-navigation ul.nav-list li:focus-within .list-dropdown ul li:nth-of-type(3) {
    transition: opacity .3s .5s, transform .3s .5s;
}
header .main-navigation ul.nav-list li:hover .list-dropdown ul li:nth-of-type(4),
header .main-navigation ul.nav-list li:focus-within .list-dropdown ul li:nth-of-type(4) {
    transition: opacity .3s .55s, transform .3s .55s;
}
header .main-navigation ul.nav-list li:hover .list-dropdown ul li:nth-of-type(5),
header .main-navigation ul.nav-list li:focus-within .list-dropdown ul li:nth-of-type(5) {
    transition: opacity .3s .6s, transform .3s .6s;
}
header .main-navigation ul.nav-list li:hover .list-dropdown ul li:nth-of-type(6),
header .main-navigation ul.nav-list li:focus-within .list-dropdown ul li:nth-of-type(6) {
    transition: opacity .3s .65s, transform .3s .65s;
}
header .main-navigation ul.nav-list li:hover .list-dropdown ul li:nth-of-type(7),
header .main-navigation ul.nav-list li:focus-within .list-dropdown ul li:nth-of-type(7) {
    transition: opacity .3s .7s, transform .3s .7s;
}
header .main-navigation ul.nav-list li:hover .list-dropdown ul li:nth-of-type(8),
header .main-navigation ul.nav-list li:focus-within .list-dropdown ul li:nth-of-type(8) {
    transition: opacity .3s .75s, transform .3s .75s;
}
header .main-navigation ul.nav-list li .list-dropdown ul li a {
    width: 100%;
    padding: 21px;
    background-color: var(--theme-secondary-color-4);
    border: 1px solid var(--list-theme-color);
    font: var(--font-main-navigation-dropdown);
    display: flex;
    align-items: center;
    column-gap: 16px;
    transition: background-color .2s;
}
header .main-navigation ul.nav-list li .list-dropdown ul li a:hover,
header .main-navigation ul.nav-list li .list-dropdown ul li a:focus {
    background-color: var(--body-bg-color);
    transition: background-color .3s;
}
header .main-navigation ul.nav-list li .list-dropdown ul li a .nav-child-media {
    width: 70px;
    height: 70px;
    background-color: var(--theme-secondary-color-5);
    display: flex;
    align-items: center;
    justify-content: center;
}
header .main-navigation ul.nav-list li .list-dropdown ul li a .nav-child-media svg {
    display: block;
}
header .main-navigation ul.nav-list li .list-dropdown ul li a .nav-child-name {
    width: calc(100% - 70px);
    display: block;
}
header .main-navigation ul.nav-list li .list-dropdown .dropdown-media {
    max-width: 347px;
    width: 100%;
    height: 242px;
    background-color: var(--theme-default-color);
    border-right: 5px solid var(--list-theme-color);
    opacity: 0;
    display: block;
    transform: translateY(-5px);
    transition: opacity .2s, transform .2s;
}
header .main-navigation ul.nav-list li:hover .list-dropdown .dropdown-media, header .main-navigation ul.nav-list li:focus-within .list-dropdown .dropdown-media {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s .4s, transform .3s .4s;
}
/* 'search-toggle'; nested in the main nav */
header .main-navigation ul.nav-list li.search-option {
    width: 36px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background-color .2s, border-color .2s;
    
    --list-theme-color: var(--theme-primary-color-3);
}
header .main-navigation ul.nav-list li.search-option a {
    width: 100%;
    padding: 12px 0;
    
    --list-theme-color: var(--theme-primary-color-3);
}
header .main-navigation ul.nav-list li.search-option .option-icons {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;
}
header.search-showing .main-navigation ul.nav-list li.search-option .option-icons .search-icon {/* 'hide' the normal search icon; if the search element has the "show-search" status */
    display: none;
}
header .main-navigation ul.nav-list li.search-option .option-icons .close-icon {/* by default, 'hide' the close icon (X) */
    display: none;
}
header.search-showing .main-navigation ul.nav-list li.search-option .option-icons .close-icon {/* 'show' the close icon; if the header has the "show-search" status */
    display: block;
}
header .main-navigation ul.nav-list li.search-option .option-backdrop {
    width: 100%;
    height: 100%;
    background-color: var(--body-bg-color);
    border: 1px solid var(--list-theme-color);
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform: scaleY(0);
    transform-origin: 50% 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
header.search-showing .main-navigation ul.nav-list li.search-option .option-backdrop {
    opacity: 1;
    transform: scaleY(1);
    transition: opacity .3s .1s, transform .3s;
}
header .main-navigation ul.nav-list li.search-option .option-backdrop:after {
    content: "";
    width: 100%;
    height: 6px;
    background-color: var(--body-bg-color);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    pointer-events: none;
    transition: bottom .2s;
}
header.search-showing .main-navigation ul.nav-list li.search-option .option-backdrop:after {
    bottom: -3px;
    transition: bottom .2s .1s;
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ Utility Navigation \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
header .utility-navigation {
    width: 100%;
    padding: 16px 29px 19px;
    display: flex;
    column-gap: 19px;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 1003;
}
header .utility-navigation.mobile-version {
    display: none;
}
header .utility-navigation .mobile-menu {
    width: 24px;
}
header .utility-navigation .mobile-menu .menu {
    width: 100%;
    display: flex;
    row-gap: 6px;
    flex-direction: column;
    position: relative;
}
header .utility-navigation .mobile-menu .menu .line {
    width: 100%;
    height: 1px;
    background-color: var(--panel-list-options-color);
    display: block;
}
header .utility-navigation .mobile-menu .menu .line:last-of-type {
    margin: 0;
}
/* highlight user options */
header .utility-navigation ul.panel-options {
    height: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    column-gap: 20px;
    align-items: flex-start;
}
header .utility-navigation ul.panel-options li {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    position: relative;
}
header .utility-navigation ul.panel-options li.active {
    --panel-list-options-color: var(--theme-primary-color-3);
}
header .utility-navigation ul.panel-options li.disabled {
    opacity: 0.3;
    pointer-events: none;
}
header .utility-navigation ul.panel-options li:before {
    content: "";
    width: 0;
    height: 0;
    background-color: transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--font-color-site-navigations);
    border-radius: initial;
    opacity: 0.2;
    display: block;
    position: absolute; 
    top: -16px;
    left: calc(50% - 6px);
    transition: border-color .3s, opacity .3s;
}
header .utility-navigation ul.panel-options li:hover:before {
    opacity: 0.55;
}
header .utility-navigation ul.panel-options li.active:before{
    border-top-color: var(--theme-primary-color-3);
    opacity: 1;
}
header .utility-navigation ul.panel-options li a {
    padding-top: 2px;
    color: var(--font-color-site-navigations);
    font: var(--font-utility-navigation);
    opacity: 0.75;
    display: flex;
    align-items: center;
}
header .utility-navigation ul.panel-options li a:hover, header .utility-navigation ul.panel-options li.active a {
    opacity: 1;
    transition: opacity .3s;
}
header .utility-navigation ul.panel-options li.alert a {
    width: 20px;
    height: 17px;
    background: var(--alert-icon) no-repeat center;
    background-size: 100%;
    display: block;
}
header .utility-navigation ul.nav-list {
    margin: 0;
    list-style-type: none;
    display: flex;
    /*column-gap: 19px;*/
    justify-content: flex-end;
}
header .utility-navigation ul.nav-list li {
    position: relative;
}
header .utility-navigation ul.nav-list li.dropdown-included:after {
    content: "";
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--font-color-site-navigations);
    position: absolute;
    top: calc(50% - (5px / 2) + 2px);
    right: 12px;
    pointer-events: none;
}
header .utility-navigation ul.nav-list li a {
    padding: 10px 12px;
    color: var(--font-color-site-navigations);
    font: var(--font-utility-navigation-dropdown);
    text-decoration: none;
    opacity: 1;
    display: flex;
    align-items: center;
    position: relative;
}
header .utility-navigation ul.nav-list li a.list-toggle {
    display: none;
}
header .utility-navigation ul.nav-list li a:before {
    content: "";
    width: 0;
    height: 1px;
    background-color: var(--theme-primary-color-3);
    opacity: 0;
    display: block;
    position: absolute;
    bottom: 5px;
    left: 10px;
    transition: width .2s, opacity .2s;
    pointer-events: none;
}
header .utility-navigation ul.nav-list li a:after {
    background-color: var(--font-color-site-navigations);
}
header .utility-navigation ul.nav-list li:hover a:before {
    width: calc(100% - 20px);
    opacity: 1;
    transition: width .3s, opacity .3s;
}
header .utility-navigation ul.nav-list li.dropdown-included a {/* we increase the padding of list-item(s) with the "dropdown-included" class to make room for the down arrow pesudo element on the right of the text */
    padding-right: 23px;
}
header .utility-navigation ul.nav-list li .list-dropdown {
    width: 100%;
    padding: 9px 0;
    background-color: var(--theme-secondary-color-4);
    border: 1px solid var(--theme-primary-color-3);
    border-left-width: 5px;
    /*opacity: 0;*/
    position: absolute;
    top: 100%;
    left: 0;
    /*z-index: 99;*/
    transition: opacity .2s, box-shadow .2s;
    pointer-events: none;
}
header .utility-navigation ul.nav-list li:hover .list-dropdown, header .utility-navigation ul.nav-list li:focus-within .list-dropdown {
    box-shadow: 0 2px 4px #00000025;
    opacity: 1;
    pointer-events: all;
    transition: opacity .2s .1s, box-shadow .3s .6s;
}
header .utility-navigation ul.nav-list li:last-of-type .list-dropdown {
    margin-right: 30px;
}
header .utility-navigation ul.nav-list li .list-dropdown ul:after {
    border: .5px solid var(--power-color-3);
    top: -1px;
}
header .utility-navigation ul.nav-list li .list-dropdown ul li a {
    width: 100%;
    padding: 5px 15px;
    opacity: 0.7;
    display: block;
    transition: opacity .3s;
}
header .utility-navigation ul.nav-list li .list-dropdown ul li a:hover {
    opacity: 1;
}
header .utility-navigation ul.nav-list li .list-dropdown ul li a:before {
    display: none;
}
header .utility-navigation ul.nav-social-list {
    margin: 0;
    display: flex;
    column-gap: 6px;
}
header .utility-navigation ul.nav-social-list li {
    text-align: center;
    display: flex;
}
header .utility-navigation ul.nav-social-list li:before {
    display: none;
}
header .utility-navigation ul.nav-social-list li a {
    opacity: 0.5;
    color: var(--font-color-site-navigations);
    font-size: 20px;
    line-height: 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: opacity .3s;
}
header .utility-navigation ul.nav-social-list li a:hover {
    opacity: 1;
}
header .utility-navigation ul.nav-social-list li a[href*="//"]:not(.skip-offsite):not([href*="https://www.milibrary.org/"]):not([href*="https://encore.milibrary.org/"]):after {
    display: none;
}
header .utility-navigation ul.nav-list li .list-dropdown {
    width: 250px;
    opacity: 0;
    left: calc(50% - 125px);
    transform: translateY(-15px);
    transition: opacity .2s, box-shadow .2s, transform .2s;
}
header .utility-navigation ul.nav-list li:hover .list-dropdown, header .utility-navigation ul.nav-list li:focus-within .list-dropdown {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s .1s, box-shadow .3s .2s, transform .3s;
}
header .utility-navigation ul.nav-list li .list-dropdown ul:after {
    /* TODO: remove this style from main */
    display: none;
}
header .utility-navigation ul.nav-list li.dropdown-included:after {
    z-index: 5;
}
header .utility-navigation ul.nav-list li .link-name {
    display: block;
    position: relative;
    z-index: 5;
}
header .utility-navigation ul.nav-list li .link-backdrop {
    width: calc(100% + 30px);
    height: calc(100% + 20px);
    background-color: var(--header-list-bg-color);
    border-radius: 18px;
    opacity: 0;
    display: block;
    position: absolute;
    top: -10px;
    left: -15px;
    z-index: 1;
    transform: scaleX(0);
    transform-origin: 50% 50%;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ Top Searchbar \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
.top-search-input {
    width: calc(100% - 58px);
    position: absolute;
    top: 100%;
    left: -999vh;
    z-index: 1;
    transition: left 0s .4s;
}
.top-search-input.show-search {
    left: 29px;
    transition: none;
}
.top-search-input a.button-like.secondary {
    margin: 0;
}
.top-search-input .onsite-search {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 21px;
    background-color: var(--body-bg-color);
    border: 1px solid var(--theme-primary-color-3);
    border-left-width: 5px;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}
.top-search-input.show-search .onsite-search {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s .2s, transform .3s .1s;
    pointer-events: all;
}
.top-search-input .onsite-search fieldset {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity .2s, transform .2s;
}
.top-search-input.show-search .onsite-search fieldset {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s .4s, transform .3s .4s;
}
.top-search-input .onsite-search .onsite-search-icon {
    width: 70px;
    height: 70px;
    background-color: var(--theme-secondary-color-4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.top-search-input .onsite-search .onsite-search-label {
    width: 0px;
    height: 0px;
    text-indent: calc(-100vh + -9999px);
    display: block;
}
.top-search-input .onsite-search .onsite-search-input-container {
    width: calc(100% - 175px);
}
.top-search-input .onsite-search .onsite-search-input-container .onsite-search-input {
    margin: 0;
    padding: 12px 0;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #A1A1A1;
    border-radius: initial;
    color: var(--font-color-site-navigations);
    font: var(--font-top-search-input);
    position: relative;
    z-index: 10;
}
.top-search-input .onsite-search .onsite-search-input-container .onsite-search-input:focus {
    outline: none;
}
.top-search-input .onsite-search .onsite-search-input-container .onsite-search-input::placeholder {
    opacity: 0.5;
}
.top-search-input .search-results {
    width: 100%;
    padding: 34px 10px 10px 10px;
    display: none;
    flex-direction: column;
}
.top-search-input .search-results .title {
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
}
/*for tree mode*/
.top-search-input .search-results .onsite-search-catalog-results .category.title {
    flex: 0 0 100%;
    padding: 0 10px;
}
.search-results .result .cover-img {
    max-width: 35px;
    max-height: 70px;
    object-fit: cover;
    flex: 0 0 auto;
}   
.search-results .result .info-wrapper {
    flex: 1 1 0;
}
.search-results .result .title {
    font-weight: bold;
}
.search-results .result .author {
    font-style: italic;
}
.search-results .result .tag {
    margin: 0;
    display: inline-flex;
    gap: 3px;
    border-radius: 5px;
    padding: 0px 5px;
    align-items: center;
    border: 1px solid var(--brand-border-color);
    background-color: var(--brand-alternate-color-3);
}
.top-search-input .search-results .result .tag{
    font-size: .75em;
    font-weight: 300;
    opacity: .75;
}
.top-search-input .search-results .title i {
    margin: 0 5px 0 0;
}
.top-search-input .search-results .result {
    margin: 0 0 5px 0;
    padding: 0 10px;
    font-size: 12px;
    line-height: 14px;
    display: block;
}
.top-search-input .search-results .catalog .result, .top-search-input .search-results .supplementary .result{
    display: flex;
    flex-direction: row;
    gap: 5px;   
}
.top-search-input .search-results .full-result-link:after{
    content: none; !important
}
.top-search-input .search-results .onsite-search-results, .top-search-input .search-results .onsite-search-catalog-results, .top-search-input .search-results .onsite-search-supplementary-results{
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
@keyframes search-spinner {
0%   {transform: rotate(0deg);}
25%  {transform: rotate(90deg);}
50% {transform: rotate(180deg);}
75%  {transform: rotate(270deg);}
100% {transform: rotate(360deg);}
}
.top-search-input .search-results .result-category {
    flex-basis: 50%;
}
.top-search-input .search-results .result-category.direct-results {
    flex-basis: 100%;
}
.top-search-input .search-results .result-category.direct-results .result {
    margin-top: 0px;
    padding: 11px 17px 10px 17px;
    display: inline-block;
}
.top-search-input .search-results .result-category.direct-results .result .icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    display: inline-block;
    vertical-align: bottom;
}
.top-search-input .search-results .result-category.direct-results .result .icon svg {
    max-width: 100%;
    max-height: 100%;
}
.top-search-input .search-results .result-category .result {
    margin: 10px;
}
.top-search-input .search-results .onsite-search-results:before, .top-search-input .search-results .onsite-search-catalog-results:before , .top-search-input .search-results .onsite-search-supplementary-results:before {
    content: "";
    width: 10px;
    height: 10px;
    margin: 0 10px;
    border: 1px solid var(--hr-color);
    border-bottom: 1px solid var(--font-link-color);
    border-radius: 50%;
    display: none;
    transform-origin: 50% 50%;
    animation: search-spinner 1s infinite;
}
.top-search-input .search-results .onsite-search-results:after, .top-search-input .search-results .onsite-search-catalog-results:after, .top-search-input .search-results .onsite-search-supplementary-results:after{
    font-size: 10px;
    line-height: 12px;
    display: none;
    position: absolute;
    top: 0px;
    left: 25px;
}
.top-search-input .search-results .onsite-search-results:after {
    content: "Searching Site";
}
.top-search-input .search-results .onsite-search-catalog-results:after {
    content: "Searching Online Catalog";
}
.top-search-input .search-results .onsite-search-supplementary-results:after {
    content: "Searching EBSCO";
}
.top-search-input.searching-site .search-results .onsite-search-results:before, .top-search-input.searching-catalog .search-results .onsite-search-catalog-results:before, .top-search-input.searching-supplementary .search-results .onsite-search-supplementary-results:before, .top-search-input.searching-site .search-results .onsite-search-results:after, .top-search-input.searching-catalog .search-results .onsite-search-catalog-results:after, .top-search-input.searching-supplementary .search-results .onsite-search-supplementary-results:after {
    display: inline-flex;
}
.top-search-input .search-results .onsite-search-results-title {
    margin: 15px 0 5px 0;
    padding: 5px 10px;
    background-color: var(--bucket-section-bg-color);
    display: flex;
    justify-content: space-between;
}
.top-search-input .search-results .no-results {
    width: calc(100% - 20px);
    margin: 0 10px;
    font-size: 14px;
    line-height: 16px;
}
.top-search-input .search-results .onsite-search-results-title:first-of-type {
    margin: 0;
}
/* search edits */
.top-search-input.search-open.active .search-results, .top-search-input.search-open.searching-site .search-results, .top-search-input.search-open.searching-catalog .search-results {
    display: inline-block;
}
.top-search-input.searching-site .search-results .no-results.site, .top-search-input.searching-catalog .search-results .no-results.catalog, .top-search-input.searching-site .onsite-search-results .result-category, .top-search-input.searching-catalog .onsite-search-catalog-results .result-category, .top-search-input.searching-supplementary .onsite-search-supplementary-results .result-category{
    display: none;
}
.top-search-input .onsite-search-results .result-category .title {
    margin-bottom: 8px;
    display: flex;
    gap: 4px;
    align-items: center;
    font-size: 15px;
    font-style: italic;
    line-height: 17px;
    font-weight: 500;
}
.top-search-input .summary {
    font-size: 12px;
    font-weight: 300;
    max-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-height: 18px;
    color: var(--font-body-color);
}
.top-search-input .onsite-search-results .result-category .result{
    margin-bottom: 8px;
    font: var(--paragraph-font);
}
.top-search-input .onsite-search-results .result-category .result strong{
    font-weight: 600;
}
.top-search-input .onsite-search-results a{
    text-decoration: none;  
    color: var(--font-link-color);
    /*font: var(--small-header-font);*/
    font-size: 14px;
}
.top-search-input .onsite-search-results a.strike-through{
    text-decoration: line-through;  
}
.top-search-input .onsite-search-results .cancelled{
    font-size: 1em;
    margin-right: 3px;
}
header.show-mobile-menu .top-search-input.active .search-results, .top-search-input.show-search.active .search-results, .top-search-input.show-search.searching-site .search-results, .top-search-input.show-search.searching-catalog .search-results, .top-search-input.show-search.searching-supplementary .search-results{
    display: flex;
}
.top-search-input .onsite-search-results.active{
    display: flex;
    /*flex-direction: column;*/
}
.top-search-input.show-search.searching-site .direct-results.result-category {
    display: none;
}
/*======================================================================
    BODY - styles | desktop
========================================================================*/
body {
    margin: 0;
    padding: 0;
    background-color: var(--body-barrens-bg-color);
    color: var(--font-body-color);
    font: var(--font-body);
    position: relative;
    overflow-x: hidden;
}
body:before {/* this pesudo element acts as a border for when the user's viewport is larger than the max (1440px)*/
    content: "";
    width: 100%;
    max-width: 1442px;
    height: 100%;
    background-color: var(--body-barrens-border-color);
    opacity: var(--body-barrens-border-opacity);
    display: block;
    position: absolute;
    top: 0;
    left: calc(50% - (1442px / 2));
    z-index: 1;
    pointer-events: none;
    transition: opacity .3s;
}
.main-content {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 0 175px 0;
    background-color: var(--body-bg-color, #FCFCFC);
    position: relative;
    z-index: 25;
}
.main-content.overlay-active {
    z-index: 35;
}
/* Page Content; nested in the "main-content", this element houses the page's...left sidebar, body content, and right sidebar(if present) */
.main-content .page-content {
    width: 100%;
    min-height: 400px;/* prevents the context navigation from being broken on pages that don't have any content set. */
    display: flex;
}
/* Page Content "home page" overrides; ensures the content isn't flexed */
.main-content.home .page-content {
    display: block;
}

/*======================================================================
    BODY - styles | desktop
========================================================================*/
/*----------------- Left Sidebar - styles | desktop -----------------*/
.left-sidebar {
    width: 100%;
    max-width: 235px;
    margin-top: -56px;/* offset top; 30px (banner bottom margin) + 26px offset into banner */
    padding-left: 52px;
    position: relative;
    z-index: 10;
}
.left-sidebar:has( .event-preview-image) {
    max-width: 324px;
}
.left-sidebar.no-offset {/* this status is printed only when the page banner is not printed */
    margin-top: 0;
    padding-top: 50px;
}
/* override base styles */
.left-sidebar ul {
    margin: 0;
}
.left-sidebar ul li {
    margin: 0;
    padding-left: 0;
}
.left-sidebar a.return-to {
    font: var(--font-return-to-link);
    text-underline-offset: 3px;
    /* position: relative; */
}
/*
TODO! determine if this is worth using over a "<" key
.left-sidebar a.return-to:before {
    content: "";
    margin-right: 5px;
    width: 6px;
    height: 10px;
    background-color: var(--button-bg-color);
    display: inline-block;
    clip-path: polygon(0% 50%, 83.33% 0%, 100% 10%, 33.33% 50%, 100% 90%, 83.33% 100%);
}
.left-sidebar a.return-to:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--button-bg-color);
    position: absolute;
    display: block;
    bottom: -1px;
    left: 0;
}
*/
.left-sidebar .event-preview-image {
    aspect-ratio: 1.6/1;
}
.left-sidebar .context-navigation {
    width: 100%;
    max-width: 183px;
    padding: 17px 20px 22px;
    background-color: var(--theme-secondary-color-4);
    position: relative;
    z-index: 5;
}
.left-sidebar .context-navigation a {
    color: var(--font-body-alt-color);
    text-decoration: none;
    display: block;
}
.left-sidebar .context-navigation .nav-heading {
    margin-bottom: 12px;
    font: var(--font-context-navigation-heading);
    position: relative;
}
.left-sidebar .context-navigation .nav-heading:before {
    content: "";
    width: 7px;
    height: 20px;
    background-color: var(--theme-primary-color-3);
    display: none;
    position: absolute;
    top: 0;
    left: -20px;
}
.left-sidebar .context-navigation .nav-heading.active:before {
    display: block;
}
.left-sidebar .context-navigation ul.nav-list {
    width: 100%;
}
.left-sidebar .context-navigation ul.nav-list li {
    width: 100%;
    position: relative;
}
.left-sidebar .context-navigation ul.nav-list li:before {
    content: "";
    width: 7px;
    height: 23px;
    background-color: var(--theme-primary-color-3);
    display: none;
    position: absolute;
    top: 4px;
    left: -20px;
}
.left-sidebar .context-navigation ul.nav-list li.active:before {
    display: block;
}
.left-sidebar .context-navigation ul.nav-list li a {
    padding: 5px 0;
    font: var(--font-context-navigation-list-item);
    opacity: 0.75;
    transition: opacity .3s;
}
.left-sidebar .context-navigation ul.nav-list li a:hover {
    opacity: 1;
}
.left-sidebar .context-navigation ul.nav-list li.dropdown-toggle a {
    width: 31px;
    height: 31px;
    margin: 24px 0 0 0;
    background-image: url('/content/_theme_images/icon_button_arrow.svg');
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    transform: rotate(90deg);
}
/* show-all edits */
.left-sidebar .context-navigation ul.nav-list.show-all li {
    display: inline-block;
}
.left-sidebar .context-navigation ul.nav-list.show-all li.dropdown-toggle a {
    transform: rotate(-90deg);
}
/* multi edits */
.left-sidebar .context-navigation.multi a.nav-heading:first-of-type {
    padding: 0;
    font: var(--secondary-header-font);
}
.left-sidebar .context-navigation.multi .nav-heading.active:before {
    top: 17px;
}
.left-sidebar .context-navigation.multi .nav-heading.active:first-of-type:before {
    top: -3px;
}
/* fixed edits */
.left-sidebar .context-navigation.fixed {
    position: fixed;
    top: 50px;
}
.left-sidebar .context-navigation.clip-to-bottom {
    position: absolute;
    top: auto;
    bottom: 70px;
}
.return-to-top-segment {
    width: 100%;
    max-width: 235px;
    display: block;
    position: fixed;
    bottom: 40px;
    z-index: 1;
}
.return-to-top-segment.clip-to-bottom {
    position: absolute;
    /* bottom: -364px; */
    bottom: 0;
}
.return-to-top-segment a.button-like.return-to-top-button {
    width: 100%;
    max-width: 183px;
    margin: 0;
    opacity: 0;
    display: flex;
    column-gap: 8px;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    transition: opacity .2s;
}
.return-to-top-segment.reveal a.button-like.return-to-top-button {
    opacity: 1;
    pointer-events: all;
    transition: opacity .3s;
}
.return-to-top-segment a.button-like.return-to-top-button svg {
    transform: translateY(-1px);
}
/*----------------- Page Body - styles | desktop -----------------*/
.page-body {
    width: calc(100% - 285px);
    max-width: 936px;
    margin: 0 auto;
    padding-top: 50px;
    position: relative;
    z-index: 5;
}
.page-body:has( .single-event) {
    max-width: 847px;
}
.page-body.no-sidebar {
    max-width: 1179px;
    width: calc(100% - 70px);
}
/*----------------- Page Body > Assets - styles | desktop -----------------*/
/* Overflow Segment; mainly used facilitate sections on the home page and the page banners */
.overflow-segment {
    width: var(--overflow-segment-width);
    max-width: var(--overflow-segment-maximum-width);
    margin: 0 auto;
    margin-bottom: 120px;/* ensure theres atleast enough margin to match the `content-board's` translate offset; this will prevent lower sections from getting covered */
    display: flex;
    transform: translateX(var(--overflow-segment-offset));
    
    /* override base variables */
    --font-header-color: #FFFFFF;
    --font-body-color: #FFFFFF;
    --wedge-height: 9px;
    --wedge-margin: 0 0 21px 0;
    --wedge-color: #FFFFFF;
}
/* different color schemes */
.overflow-segment.secondary-color-scheme {
    --overflow-segment-gradient-color-1: #52733F;
    --overflow-segment-gradient-color-2: #445C35;
}
.overflow-segment.tertiary-color-scheme {
    --overflow-segment-gradient-color-1: var(--theme-secondary-color-1);
    --overflow-segment-gradient-color-2: #80041B;
}
/* override base styles */
.overflow-segment h1, .overflow-segment .h1-like {
    opacity: 0.95;
}
.overflow-segment h3, .overflow-segment .h3-like {
    opacity: 0.95;
}
.overflow-segment .wedge {
    opacity: 0.95;
}
.overflow-segment .media-board {
    width: 100%;
    max-width: var(--overflow-segment-media-max-width);
    background: no-repeat center;
    background-size: cover;
    aspect-ratio: var(--overflow-segment-media-ratio);
    position: relative;
    transform: translateY(15px);
    transition: transform .3s .3s;
}
.overflow-segment.element-initialized .media-board {
    transform: translateY(0);
}
.overflow-segment .media-board:before {
    content: "";
    width: 100%;
    height: 100%;
    opacity: 1;
    background-color: var(--overflow-segment-gradient-color-1);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity .3s .3s;
}
.overflow-segment .media-board.element-initialized:before {/* fade-out the media's pesudo cover after the image has been loaded */
    opacity: 0;
}
/* .overflow-segment .media-board.default:before {
    background: url('/content/_site_images/icon_placeholder-mark.svg') var(--theme-default-color) no-repeat center;
} */
.overflow-segment .media-board .swiper {
    width: 100%;
    height: 100%;
}
.overflow-segment .media-board .swiper .swiper-wrapper .media-slide {
    width: 100%;
    height: 100%;
    background: no-repeat center;
    background-size: cover;
    aspect-ratio: var(--overflow-segment-media-ratio);
}
.overflow-segment .media-board .swiper .swiper-pagination {
    bottom: 30px;
}
.overflow-segment .media-board .swiper .swiper-pagination .swiper-pagination-bullet {
    border: 1px solid var(--font-header-color);
    opacity: 0;
    transition: opacity .3s;
    transition-delay: .3s;
}
.overflow-segment.element-initialized .media-board .swiper .swiper-pagination .swiper-pagination-bullet {
    opacity: 1;
}
.overflow-segment .content-board {
    width: calc(100% - var(--overflow-segment-media-max-width));
    padding: 35px 0;
    padding-left: 15px;/* used to accommodate this block's pesudo `left-border` (:before) */
    background-image: linear-gradient(to right, var(--overflow-segment-gradient-color-1) 0%, var(--overflow-segment-gradient-color-2) 100%);
    /*border-left: 15px solid var(--theme-primary-color-2);*/
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(15px);
    position: relative;
    transition: transform .3s .3s;
}
.overflow-segment.element-initialized .content-board {
    transform: translateY(30px);
}
.overflow-segment .content-board:before {
    content: "";
    width: 15px;
    height: 100%;
    background-color: var(--theme-primary-color-2);
    box-shadow: 5px 0 9px rgba(0,0,0,0.22);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.overflow-segment .content-board .details {
    width: 100%;
    max-width: 420px;
}
/* Overflow Segment > Benefits List; used as a smaller horizontal list of items */
.overflow-segment .content-board .details .benefits-list {
    width: 100%;
    display: flex;
    column-gap: 28px;
    row-gap: 28px;
    flex-wrap: wrap;
}
/* override base styles */
.overflow-segment .content-board .details .benefits-list p {
    opacity: 0.8;
    font: var(--font-overflow-segment-benefit-body);
    text-align: center;
}
.overflow-segment .content-board .details .benefits-list .benefit-item {
    width: calc(33% - 28px);
    display: flex;
    flex-direction: column;
    row-gap: 11px;
    align-items: center;
}
.overflow-segment .content-board .details .benefits-list .benefit-item .item-icon {
    width: 50px;
    height: 50px;
    border: 1px solid var(--theme-primary-color-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Overflow Segment > Donation List; used as a medium horizontal list of items */
.overflow-segment .content-board .details .donation-list {
    width: 100%;
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 26px;
    row-gap: 35px;
}
.overflow-segment .content-board .details .donation-list .donate-option {
    width: calc(50% - 13px);
}
.overflow-segment .content-board .details .donation-list .donate-option .option-heading {
    margin: 0 0 10px 0;
    color: var(--theme-primary-color-2);
    font: var(--font-overflow-segment-donation-heading);
    display: flex;
    column-gap: 10px;
    align-items: center;
}
.overflow-segment .content-board .details .donation-list .donate-option p {
    font: var(--font-overflow-segment-donation-details);
}
/* Overflow Segment > Info Line; used to center svg next to text */
.overflow-segment .content-board .details .info-line {
    margin: 0 0 5px 0;
    /*font: var(--font-staff-item-info);*/
    display: flex;
    column-gap: 3px;
    align-items: center;
}
.overflow-segment .content-board .details .info-line .info-icon {
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* "carousel" variant variables/styles - for `overflow segment` section */
.overflow-segment.carousel {
    --overflow-segment-media-max-width: 60%;
    --overflow-segment-media-ratio: 1.55 / 1;
}
.overflow-segment.carousel .content-board .details {
    max-width: 327px;
    padding-bottom: 13px;/* this padding accounts for the pagination underneath */
}
.overflow-segment.carousel .content-board .details .h1-like {
    max-height: 134px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.overflow-segment.carousel .content-board .details p {
    max-height: 134px;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.overflow-segment.carousel .swiper {
    width: 100%;
    padding: 0 0 30px 0;
    margin: 0;
}
.overflow-segment.carousel .swiper .swiper-wrapper {}
.overflow-segment.carousel .swiper .swiper-wrapper .swiper-slide {
    width: 100%;
    display: flex;
}
.overflow-segment.carousel .swiper .swiper-pagination {
    /*width: calc(100% - var(--overflow-segment-media-max-width));*/
    max-width: 327px;
    opacity: 0;
    line-height: 0;
    text-align: initial;
    display: flex;
    column-gap: 9px;
    justify-content: flex-start;
    bottom: 90px;
    /*left: calc(100% - (var(--overflow-segment-media-max-width) / 2));*/
    left: calc(var(--overflow-segment-media-max-width) + (((100% - var(--overflow-segment-media-max-width) - 327px)) / 2) + (15px / 2));
    /*right: calc((var(--overflow-segment-content-width) - 357px) / 2);*/
    transform: translateY(-15px);
    transition: opacity .3s .3s, transform .3s .3s;
    /*background-color: red;*/
}
.overflow-segment.carousel.element-initialized .swiper .swiper-pagination {
    opacity: 1;
    transform: translateY(0);
}
.overflow-segment.carousel .swiper .swiper-pagination .swiper-pagination-bullet {
    opacity: 0;
    transition: opacity .3s;
    transition-delay: .3s;
}
.overflow-segment.carousel .swiper .swiper-pagination .swiper-pagination-bullet:nth-of-type(2) {transition-delay: .4s;}
.overflow-segment.carousel .swiper .swiper-pagination .swiper-pagination-bullet:nth-of-type(3) {transition-delay: .5s;}
.overflow-segment.carousel .swiper .swiper-pagination .swiper-pagination-bullet:nth-of-type(4) {transition-delay: .6s;}
.overflow-segment.carousel .swiper .swiper-pagination .swiper-pagination-bullet:nth-of-type(5) {transition-delay: .7s;}
.overflow-segment.carousel .swiper .swiper-pagination .swiper-pagination-bullet:nth-of-type(6) {transition-delay: .8s;}
.overflow-segment.carousel .swiper .swiper-pagination .swiper-pagination-bullet:nth-of-type(7) {transition-delay: .9s;}
.overflow-segment.carousel .swiper .swiper-pagination .swiper-pagination-bullet:nth-of-type(8) {transition-delay: 1s;}
.overflow-segment.carousel .swiper .swiper-pagination .swiper-pagination-bullet:nth-of-type(9) {transition-delay: 1.1s;}
.overflow-segment.carousel .swiper .swiper-pagination .swiper-pagination-bullet:nth-of-type(10) {transition-delay: 1.2s;}
.overflow-segment.carousel.element-initialized .swiper .swiper-pagination .swiper-pagination-bullet {
    opacity: 1;
}
/* "banner" variant variables/styles - for `overflow segment` section */
.overflow-segment.banner {
    margin-bottom: 30px;
    
    /* override base variables */
    --font-header-1: normal 400 50px/51px "Baskervville", serif;
    --overflow-segment-media-max-width: 880px;
    --overflow-segment-media-ratio: 2.38 / 1;
}
/* override base styles */
.overflow-segment.banner h1, .overflow-segment.banner .h1-like {
    margin: 0;
}
.overflow-segment.banner .content-board .details {
    max-width: 327px;
    opacity: 0.7;
}
.overflow-segment.banner .media-banner {
    width: 100%;
    height: 318px;
    position: relative;
}
.overflow-segment.banner .media-banner.default {
    height: 100px;
    background-image: linear-gradient(to right, var(--overflow-segment-gradient-color-1) 0%, var(--overflow-segment-gradient-color-2) 100%);
    background-size: 100%;
}
.overflow-segment.banner .media-banner:before {
    content: "";
    width: 15px;
    height: 100%;
    background-color: var(--theme-primary-color-2);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}
/* "bare" variant variables/styles - for `overflow segment` section; mainly used on the staff member pages */
.overflow-segment.bare {
    align-items: flex-start;
    
    /* ovverride base variables */
    --font-header-color: #0C0C0C;
    --font-body-color: #4B4B4B;
    --overflow-segment-gradient-color-1: var(--theme-secondary-color-4);
    --overflow-segment-gradient-color-2: var(--theme-secondary-color-4);
    --overflow-segment-media-ratio: 1 / 1;
}
/* override base styles */
.overflow-segment.bare h2, .overflow-segment.bare .h2-like {
    margin: 0 0 19px 0;
}
.overflow-segment.bare .content-board {
    padding: 40px 0;
    padding-left: 10px;
}
.overflow-segment.bare .content-board:before {
    width: 10px;
    box-shadow: none;
}
.overflow-segment.bare .content-board .details {
    max-width: 380px;
}

/* Perks List; used as a medium vertical list of items (by default) */
.perks-list {
    width: 100%;
    margin-top: 38px;
}
.perks-list .perk-item {
    width: 100%;
    margin-bottom: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.perks-list .perk-item:last-of-type {
    margin-bottom: 0;
}
.perks-list .perk-item .item-icon {
    width: 70px;
    height: 70px;
    border: 1px solid var(--theme-primary-color-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.perks-list .perk-item .item-info {
    width: calc(100% - 98px);
}
.perks-list .perk-item .item-info .item-info-heading {
    margin: 0 0 3px 0;
    font: var(--font-overflow-segment-perk-header);
    display: block;
}
/* Perks List > Row Variant; this changes the direction of which the perk items are flexed */
.perks-list.row-variant {
    display: flex;
    flex-wrap: wrap;
    column-gap: 63px;
    align-items: flex-start;
    justify-content: center;
}
.perks-list.row-variant .perk-item {
    width: calc(33% - 63px);
    flex-direction: column;
    justify-content: center;
}
.perks-list.row-variant .perk-item .item-icon {
    margin-bottom: 25px;
    border-color: var(--theme-primary-color-3);
}
.perks-list.row-variant .perk-item .item-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.perks-list.row-variant .perk-item .item-info .item-info-heading {
    margin: 0 0 5px 0;
    text-align: center;
}
.perks-list.row-variant .perk-item .item-info p {
    margin: 0;
    text-align: center;
}

/* Authors List; displays in tile form multiple authors */
.authors-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: 50px;
    row-gap: 33px;
        
    
    --font-header-color: #4E4E4E;
    --font-header-4: normal 400 19px/24px "Libre Baskerville", serif;
    --font-body: normal 400 16px/18px "Sarabun", sans-serif;
    --font-body-color: #505050;/* was #878787 */
    --font-link-color: var(--font-header-color);
    --font-link: normal 300 14px/16px "Sarabun", sans-serif;
}
/* override base styles */
.authors-list h4, .authors-list .h4-like {
    margin: 0 0 6px 0;
    text-align: center;
}
.authors-list p {
    margin: 0;
    text-align: center;
}
.authors-list .author-item {
    width: calc((100% - 100px) / 3);
    padding: 23px 10px 28px;
    background-color: var(--theme-secondary-color-4);
    border-left: 15px solid var(--theme-primary-color-3);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.authors-list .author-item .item-media {
    /* width: 190px; */
    /* height: 190px; */
    width: 100%;
    height: auto;
    max-width: 190px;
    margin: 0 0 12px 0;
    border-radius: 50%;
    display: block;
    position: relative;
    aspect-ratio: 1/1;
}
.authors-list .author-item .item-media:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--theme-primary-color-3);
    border-radius: 50%;
    display: block;
    position: absolute;
    transition: opacity .3s .3s;
}
.authors-list .author-item .item-media.element-initialized:before {
    opacity: 0;
}
.authors-list .author-item .item-books {
    width: 100%;
    margin: 21px 0 0 0;
    display: flex;
    column-gap: 22px;
    justify-content: center;
}
.authors-list .author-item .item-books .book {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-content: center;*/
}
.authors-list .author-item .item-books .book .book-media {
    width: 57px;
    height: 88px;
    margin: 0 0 10px 0;
    box-shadow: -3px 7px 13px rgba(0,0,0,0.23);
    display: block;
    position: relative;
}
.authors-list .author-item .item-books .book .book-media:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--theme-primary-color-3);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .3s .3s;
}
.authors-list .author-item .item-books .book .book-media.element-initialized:before {
    opacity: 0;
}
.authors-list .author-item .item-books .book a {
    text-align: center;
}

/* Engagement List; atleast three column layout highlighting user call to actions */
.engagement-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    
    --font-header-color: #4E4E4E;
    --font-body-color: #505050;/* was #878787 */
}
/* override base styles */
.engagement-list h3, .engagement-list .h3-like {
    margin: 0 0 10px 0;
    text-align: center;
}
.engagement-list p {
    margin: 0;
    text-align: center;
}
.engagement-list a.button-like.secondary {
    margin: 20px 0 0 0;
}
.engagement-list .engagement-item {
    width: calc(33% - 30px);
    padding: 25px 15px 38px;
    background-color: var(--theme-secondary-color-4);
    border-left: 10px solid var(--theme-primary-color-3);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.engagement-list .engagement-item svg {
    margin: 0 0 19px 0;
}

/* Fixed Prompt; a fixed element that houses a 'prompt' styled button */
.fixed-prompt {
    width: 100%;
    max-width: 1440px;
    padding: 0 30px 30px 0;
    opacity: 0;
    display: flex;
    justify-content: flex-end;
    position: fixed;
    bottom: 0;
    left: calc(50% - (1440px / 2));
    z-index: 50;
    pointer-events: none;
    transition: opacity .3s;
}
.fixed-prompt.reveal {
    opacity: 1;
    pointer-events: all;
}

/* Basic Overlay; */
.overlay-content {
    display: none;
}
.basic-overlay {
    width: 100%;
    height: 100%;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    animation: fade-in-basic-overlay .3s forwards;
    
    --body-bg-color: var(--theme-secondary-color-4);
}
.basic-overlay.hide-overlay {
    animation: fade-out-basic-overlay .3s forwards;
}
.basic-overlay .overlay-background {
    width: 100%;
    height: 100%;
    background-color: var(--theme-secondary-color-3);
    opacity: 0.25;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.basic-overlay .overlay-content {
    width: 80%;
    max-width: 1171px;
    padding: 0 50px;
    padding-left: 60px;
    background-color: var(--theme-secondary-color-4);
    display: block;
    position: relative;
    z-index: 5;
    transform: translateY(15px);
    transition: transform .3s;
    animation: move-up-basic-overlay-content .3s forwards;
}
.basic-overlay.hide-overlay .overlay-content {
    animation: move-higher-up-basic-overlay-content .3s forwards;
}
.basic-overlay .overlay-content:before {
    content: "";
    width: 10px;
    height: 100%;
    background-color: var(--theme-primary-color-2);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.basic-overlay .overlay-content .overlay-close-icon {
    opacity: 0.75;
    font-size: 13px;
    line-height: 15px;
    text-decoration: none;
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 10;
    transition: opacity .3s;
}
.basic-overlay .overlay-content .overlay-close-icon:hover {
    opacity: 1;
}
.basic-overlay .overlay-content .overlay-close-icon:before,
.basic-overlay .overlay-content .overlay-close-icon:after {
    content: "";
    width: 1px;
    height: 14px;
    background-color: var(--theme-primary-color-3);
    display: block;
    position: absolute;
    top: 1px;
    left: -10px;
}
.basic-overlay .overlay-content .overlay-close-icon:before {
    transform: rotate(46deg);
}
.basic-overlay .overlay-content .overlay-close-icon:after {
    transform: rotate(-46deg);
}
/* Basic Overlay > Animations */
@keyframes fade-in-basic-overlay {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fade-out-basic-overlay {
  0%   {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes move-up-basic-overlay-content {
  0%   {transform: translateY(15px);}
  100% {transform: translateY(0);}
}
@keyframes move-higher-up-basic-overlay-content {
  0%   {transform: translateY(0);}
  100% {transform: translateY(-15px);}
}
/* ===== CHESS GAME INTERFACE ===== */
/* Viewer Layout - now works within overlay */
.viewer-layout {
    flex: 1;
    overflow: hidden;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
}
/* Game Sidebar */
.game-sidebar {
    max-height: 100%;
    padding: 1rem;
    background-color: var(--theme-secondary-color-4);
    border-bottom: 1px solid var(--body-barrens-border-color);
    overflow-y: auto;
}
.game-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Game Main Content */
.game-main {
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.game-item {
    padding: 0.75rem;
    background-color: var(--body-bg-color, #FCFCFC);
    border: 1px solid var(--body-barrens-border-color);
    /*font-size: 0.875rem;*/
    cursor: pointer;
    transition: all 0.2s ease;
}
.game-item:hover {
    background-color: var(--button-hover-bg-color);
    /*border-color: #adb5bd;*/
    color: var(--font-button-color);
    /*transform: translateY(-1px);*/
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.1);*/
}
.game-item:focus {
    /*outline: none;*/
    background-color: var(--button-hover-bg-color);
    /*border-color: #007bff;*/
    color: var(--font-button-color);
    /*box-shadow: 0 0 0 3px rgba(0,123,255,0.25);*/
}
.game-item:focus:not(:hover) {
    transform: none;
}
.game-item.active {
    background-color: var(--button-bg-color);
    color: var(--font-button-color);
    border-color: var(--button-bg-color);
    /*box-shadow: 0 2px 8px rgba(0,123,255,0.3);*/
}
.game-item.active:focus {
    /*box-shadow: 0 2px 8px rgba(0,123,255,0.3), 0 0 0 3px rgba(255,255,255,0.5);*/
}
.game-item-header {
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.game-item-header span:first-of-type {
    font: var(--font-header-5);
}
.game-item-players {
    font: var(--font-game-players);
}
.game-item-players div {
    margin-bottom: 4px;
}
.game-item-players div:last-of-type {
    margin-bottom: 0;
}
.game-result {
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: bold;
    /*border-radius: 3px;*/
}
.game-result.white-win {
    background-color: #28a745;
    color: white;
}
.game-result.black-win {
    background-color: #343a40;
    color: white;
}
.game-result.draw {
    background-color: #6c757d;
    color: white;
}

/* Game Main Content */
.game-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.game-main .game-header h3 {
    margin: 0 0 0.5rem 0;
    color: #212529;
    font-size: 1.25rem;
}
.game-main .game-header p {
    margin: 0.25rem 0;
    color: #495057;
    font-size: 0.875rem;
}
.game-main .chess-interface {
    /*display: grid;*/
    display: flex;
    grid-template-columns: 1fr 300px;
    /*gap: 2rem;*/
    gap: 1rem;
    align-items: start;
}
.game-main .chess-interface .chess-board-container {
    /*width: min(400px, calc(100% - 2rem));*/
    width: calc(100% - 300px);
    max-width: 100%;
    height: auto;
    max-height: 100%;
    min-height: 400px;
    padding: 1rem;
    background-color: var(--theme-secondary-color-4);
    border: 1px solid var(--body-barrens-border-color);
    /*flex-shrink: 1;*/
    display: flex;
    row-gap: 10px;
    flex-direction: column;
    align-items: center;
    /*justify-content: center;*/
    /*aspect-ratio: 1 / 1;*/
    overflow: hidden;
}
.game-main .chess-interface .chess-board-container .chess-board {
    width: min(400px, 100%);
    height: min(400px, 100%);
    aspect-ratio: 1 / 1;
    border: 2px solid #333;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    background-color: #fff;
    max-width: 100%;
    max-height: 100%;
}
.game-main .chess-interface .chess-board-container .chess-board .chess-square {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 0;
    min-width: 0;
}
.game-main .chess-interface .chess-board-container .chess-board .chess-square.light {
    background-color: #f0d9b5;
}
.game-main .chess-interface .chess-board-container .chess-board .chess-square.dark {
    background-color: #b58863;
}
.game-main .chess-interface .chess-board-container .chess-board .chess-square.highlight {
    background-color: #ffffcc !important;
    box-shadow: inset 0 0 8px rgba(255, 235, 59, 0.8);
}
.game-main .chess-interface .chess-board-container .chess-board .chess-square.last-move {
    background-color: #ffeb3b !important;
    opacity: 0.7;
}
.game-main .chess-interface .chess-board-container .chess-board .chess-square.from-square {
    background-color: #4caf50 !important;
    opacity: 0.8;
}
.game-main .chess-interface .chess-board-container .chess-board .chess-square .chess-piece {
    user-select: none;
	font-size: 40px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
.game-main .chess-interface .chess-board-container .chess-board .chess-square .chess-piece.white {
    color: white;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.8), 
                 -1px -1px 1px rgba(0,0,0,0.8),
                 1px -1px 1px rgba(0,0,0,0.8),
                 -1px 1px 1px rgba(0,0,0,0.8);
}
.game-main .chess-interface .chess-board-container .chess-board .chess-square .chess-piece.black {
    color: #333;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
}
.game-main .chess-interface .chess-board-container .move-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 400px;
}
.game-main .chess-interface .chess-board-container .move-navigation #move-counter {
    min-width: 80px;
    margin: 0 1rem;
    /*color: #495057;*/
    font-weight: 600;
    text-align: center;
	flex-grow: 1;
}
.game-main .chess-interface .chess-board-container .move-navigation button {
    margin: 0;
}
.game-main .chess-interface .game-controls {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
/*
.nav-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.2s ease;
    min-width: 40px;
}
.nav-btn:hover {
    background-color: #0056b3;
}
.nav-btn:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}
*/
.game-main .chess-interface .game-controls .move-list-container {
    width: 300px;
    max-height: 400px;
    background-color: var(--theme-secondary-color-4);
    border: 1px solid var(--body-barrens-border-color);
    padding: 1rem;
    overflow-y: auto;
}
.game-main .chess-interface .game-controls .move-list-container h3 {
    margin: 0 0 10px 0;
    /*color: var(--font-button-color);*/
}
.game-main .chess-interface .game-controls .move-list-container .move-list {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    max-height: 300px;
    overflow-y: auto;
}
.game-main .chess-interface .game-controls .move-list-container .move-list .move-pair {
    margin-bottom: 0.25rem;
    color: var(--font-body-color);
    display: flex;
}
.game-main .chess-interface .game-controls .move-list-container .move-list .move-pair .move-number {
    font-weight: bold;
    /*color: #495057;*/
    width: 30px;
    flex-shrink: 0;
}
.game-main .chess-interface .game-controls .move-list-container .move-list .move-pair .move-item {
    margin-right: 8px;
    padding: 2px 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.game-main .chess-interface .game-controls .move-list-container .move-list .move-pair .move-item:hover {
    background-color: var(--button-secondary-bg-color);
}
.game-main .chess-interface .game-controls .move-list-container .move-list .move-pair .move-item.current {
    background-color: var(--button-bg-color);
    color: var(--font-button-color);
}
.game-main .chess-interface .game-controls .move-list-container .move-list .move-pair .move-item.played {
    background-color: var(--button-secondary-bg-color);
}
.game-main .chess-interface .game-controls .move-list-container .move-list .move-pair .move-item.unplayed {
    /*color: #adb5bd;*/
}
/* Moves with annotations (NAGs) styling */
.game-main .chess-interface .game-controls .move-list-container .move-list .move-pair .move-item.move-with-annotation {
    position: relative;
    font-weight: 500;
}
.game-main .chess-interface .game-controls .move-list-container .move-list .move-pair .move-item.move-with-annotation::after {
    content: '•';
    color: #0056b3;
    font-size: 0.8em;
    margin-left: 2px;
    vertical-align: super;
}
/* Enhanced tooltip styling for better visibility */
.game-main .chess-interface .game-controls .move-list-container .move-list .move-pair .move-item.move-with-annotation[title]:hover::before {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 4px;
    pointer-events: none;
    opacity: 0;
    animation: fadeIn 0.2s ease-in forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Load Button Styling */
button[data-filename] {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button[data-filename]:hover {
    background-color: #0056b3;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

button[data-filename]:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Overlay Styles */
.viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
}
.viewer-overlay .overlay-backdrop {
    width: 100%;
    height: 100%;
    background-color: var(--theme-secondary-color-3);
    opacity: 0.25;
    position: fixed;
    top: 0;
    left: 0;
    backdrop-filter: blur(4px);
}
.viewer-overlay .overlay-content {
    width: 95%;
    height: 90%;
    max-width: 1200px;
    margin: 2.5% auto;
    background-color: var(--body-bg-color, #FCFCFC);
    /*border-radius: 12px;*/
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.viewer-overlay .overlay-header {
    width: 100%;
    padding: 1rem 1.5rem;
    background-color: var(--theme-secondary-color-4);
    border-bottom: 1px solid var(--body-barrens-border-color);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.viewer-overlay .overlay-header-content {
    flex: 1;
}
.viewer-overlay .overlay-header h2 {
    margin: 0;
    /*color: #495057;*/
    /*font-size: 1.25rem;*/
}
.viewer-overlay .close-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: transparent;
    color: var(--font-header-color);
    font-size: 28px;
    /*display: flex;*/
    display: block;
    /*align-items: center; */
    justify-content: center;
}
.viewer-overlay .close-btn:before {
    display: none;
}
.viewer-overlay .close-btn:hover {
    background-color: #e9ecef;
    color: #495057;
}
.viewer-overlay .close-btn:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}
.viewer-overlay .viewer-layout {
    flex: 1;
    overflow: hidden;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
}


/* Archives Component; has a `featured` element while having a column on the side with two other elements */
.archives-component {
    width: 100%;
    display: flex;
    justify-content: space-between;
    
    --font-header-color: #4E4E4E;
    --font-body-color: #505050;/* was #878787 */
}
.archives-component h4 {
    margin: 0 0 12px 0;
}
.archives-component h5 {
    margin: 0 0 5px 0;
}
.archives-component p {
    margin: 0;
}
.archives-component .featured-archive {
    width: calc(60% - 26px);
    position: relative;
}
.archives-component .featured-archive:before {
    content: "";
    width: calc(100% - 10px);
    height: 100%;
    background-color: var(--theme-secondary-color-4);
    border-left: 10px solid var(--theme-primary-color-2);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.archives-component .featured-archive p:first-of-type {
    margin: 0 0 14px 0;
}
.archives-component .featured-archive .media {
    width: 100%;
    aspect-ratio: 1.42 / 1;
    display: block;
    position: relative;
    z-index: 5;
}
.archives-component .featured-archive .media:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--theme-primary-color-2);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .3s .3s;
}
.archives-component .featured-archive .media.element-initialized:before {
    opacity: 0;
}
.archives-component .featured-archive .details {
    width: 100%;
    padding: 40px 43px 70px;
    position: relative;
    z-index: 5;
}
.archives-component .archives-list {
    width: 40%;
}
.archives-component .archives-list .archives-item {
    width: 100%;
    margin: 0 0 26px 0;
}
.archives-component .archives-list .archives-item:last-of-type {
    margin: 0;
}
.archives-component .archives-list .archives-item .item-media {
    width: 100%;
    aspect-ratio: 1.62 / 1;
    display: block;
    position: relative;
}
.archives-component .archives-list .archives-item .item-media:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--theme-primary-color-2);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .3s .3s;
}
.archives-component .archives-list .archives-item .item-media.element-initialized:before {
    opacity: 0;
}
.archives-component .archives-list .archives-item .item-details {
    width: 100%;
    padding: 26px 20px;
    background-color: var(--theme-secondary-color-4);
    border-left: 10px solid var(--theme-primary-color-2);
}

/* Special Collection Item; simple column element with centered assets */
.collection-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* override base styles */
.collection-item h3, .collection-item .h3-like {
    margin: 0 0 10px 0;
    text-align: center;
}
.collection-item p {
    margin: 0;
    text-align: center;
}
.collection-item .item-media {
    width: 100%;
    margin: 0 0 20px 0;
    aspect-ratio: 1 / 1;
    display: block;
}
.collection-item .timeframe {
    margin: 0 0 10px 0;
    opacity: 0.4;
    color: var(--font-body-alt-color);
    font: var(--font-event-list-details);
    text-align: center;
    display: block;
}

/* eResource Item; usually nested in a slider element */
.eresource-item {
    width: calc(100% - 10px);
    padding: 35px;
    background-color: var(--theme-secondary-color-4);
    border-left: 10px solid var(--theme-secondary-color-2);
    
    --preload-cover-bg-color: var(--theme-secondary-color-2);
}
.eresource-item h4 {
    margin: 0 0 15px 0;
}
.eresource-item p {
    margin: 0;
}
.eresource-item a.button-like.secondary {
    margin: 20px 0 0 0;
}
.eresource-item .item-media {
    width: 100%;
    margin: 0 0 17px 0;
    aspect-ratio: 1.58 / 1;
    display: block;
}


.preload-cover {
    position: relative;
}
.preload-cover:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--preload-cover-bg-color);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: opacity .3s .3s;
}
.preload-cover.element-initialized:before {
    opacity: 0;
}

/* turn the .segment-filter global */
.segment-filter {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
    align-items: center;
    justify-content: center;
}
.segment-filter:has( .skeleton-placeholder) {
    background-color: gray;
}
.segment-filter li {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 14px;
}
.segment-filter li:before {
    display: none;
}
.segment-filter li.favorited:after, .segment-filter li.preferred-favorite:after {
    top: -1px;
    left: 0px;
}
.segment-filter li.disabled {
    opacity: 0.25;
    pointer-events: none;
}
.segment-filter li a {
    padding: 2px 10px;
    background-color: transparent;
    color: var(--font-link-color);
    font: var(--font-full-segment-filter-item);
    text-decoration: none;
    display: block;
    transition: background-color .2s;
}
.segment-filter li a:hover, .segment-filter li.active a {
    background-color: var(--button-secondary-bg-color);
    color: var(--font-header-color);
    transition: background-color .3s, color .3s; /* replaces existing css */
}
.segment-filter li.skeleton-placeholder a, .segment-filter li.skeleton-placeholder a.active {
    background-color: gray !important;
    color: gray !important;
}

.full-segment {
    width: 100%;
    max-width: 1011px;
    margin: 0 auto 125px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.full-segment.lineage {/* edits for the `What's Inside` verison of the Full Segment Element */
    margin: 70px auto 0 auto;
}
/* override base styles */
.full-segment .h2-like {
    margin: 0;
}
.full-segment .segment-heading-row {
    width: 100%;
    margin: 0 0 23px 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 20px;
    align-items: center;
    position: relative;
    z-index: 20;
}
.full-segment .segment-heading-row p {
    margin: 0;
}
.full-segment .segment-heading-row a.button-like.secondary {
    margin: 0 0 0 auto;
    transform: translateY(20px);
}
.full-segment .segment-heading-row.text-included a.button-like.secondary {
    transform: translateY(0);
}
.full-segment .segment-content-row {
    width: 100%;
    position: relative;
}
.full-segment .segment-content-row .content-elem {/* by default, these .content-elem elements are hidden; until they're given the "show" state */
    width: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: translateY(15px);
    transition: opacity .3s, transform .3s;
    pointer-events: none;
}
.full-segment .segment-content-row .content-elem.show {/* reveal the .content element when it has the "show" state */
    opacity: 1;
    position: relative;
    transform: translateY(0);
    transition: opacity .4s .1s, transform .4s;
    pointer-events: all;
}
.full-segment .segment-content-row .content-elem .segment-subheader {
    width: 100%;
    margin: 0 0 30px 0;
    font: var(--font-subheader);
    text-transform: uppercase;
    display: block;
}
/* full-segment skeleton styles */
.full-segment.has-skeleton {
    --skeleton-opacity: 0;
    --skeleton-transition: opacity .3s;
}
.full-segment.skeleton-active {
    --skeleton-opacity: 1;
    --skeleton-transition: opacity .3s;
}
.full-segment.has-skeleton .segment-heading-row:after, .full-segment.has-skeleton .personal-item .item-media:after, .full-segment.has-skeleton .personal-item .item-content .h3-like:after, .full-segment.has-skeleton .personal-item .item-content p:after, .full-segment.has-skeleton .personal-item .item-content a.button-like:after, .full-segment.has-skeleton .personal-item .quicklinks-paths a.path:after, .full-segment.has-skeleton .personal-item .item-content .booklist-books .book:after, .full-segment.has-skeleton .eresource-item .item-media:after, .full-segment.has-skeleton .eresource-item .item-content .h3-like:after, .full-segment.has-skeleton .eresource-item .item-content h4:after, .full-segment.has-skeleton .eresource-item .item-content p:after, .full-segment.has-skeleton .eresource-item .item-content .eresource-buttons:after, .full-segment.has-skeleton .upcoming-events .featured-event .event-media:after, .full-segment.has-skeleton .upcoming-events .featured-event .event-content .details h4:after, .full-segment.has-skeleton .upcoming-events .featured-event .event-content p:after, .full-segment.has-skeleton .upcoming-events .featured-event .event-content .event-buttons:after, .full-segment.has-skeleton .upcoming-events .basic-events .event:after, .full-segment.has-skeleton .segment-filter:after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(211,211,211,1);
    opacity: var(--skeleton-opacity);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    transition: var(--skeleton-transition);
}
.full-segment.has-skeleton .segment-filter:after {
    opacity: 0;
}
.full-segment.has-skeleton.skeleton-rearranging-filters .segment-filter:after {
    opacity: 1;
}
/* make element has relative positioning for the skeleton */
.full-segment.has-skeleton .personal-item .item-media, .full-segment.has-skeleton .personal-item .item-content .h3-like, .full-segment.has-skeleton .personal-item .item-content p, .full-segment.has-skeleton .personal-item .quicklinks-paths a.path, .full-segment.has-skeleton .eresource-item .item-content .h3-like, .full-segment.has-skeleton .eresource-item .item-content h4, .full-segment.has-skeleton .eresource-item .item-content p, .full-segment.has-skeleton .upcoming-events .featured-event .event-content .details h4, .full-segment.has-skeleton .upcoming-events .featured-event .event-content p, .full-segment.has-skeleton .upcoming-events .featured-event .event-content .event-buttons, .full-segment.has-skeleton .upcoming-events .basic-events .event, .full-segment.has-skeleton .segment-filter {
    position: relative;
}
/* when the segment has the 'segment-initialized'; always show the filter row(segment-heading-row) */
.full-segment.segment-initialized .segment-heading-row:after {
    opacity: 0;
    transition: none;
}
.full-segment.reveal-segment-content .segment-content-row .content-elem {
    opacity: 0;
    animation: reveal-for-you-content .3s ease-out forwards;
}
@keyframes reveal-for-you-content {
0%   {
        opacity: 0;
        transform: translateY(15px);
    }
100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* "pillar-variant" styles for the `Full Segment` */
.full-segment.pillar-variant {}
.full-segment.pillar-variant a.button-like {
    margin-top: 43px;
}
.full-segment.pillar-variant .segment-heading-row {
    row-gap: initial;
    justify-content: center;
}
.full-segment.pillar-variant .segment-heading-row p {
    width: calc(100% - 140px);
    margin-bottom: 27px;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
    text-align: center;
}
/* "perks" */

/* global style for the swiper.js sliders - https://swiperjs.com/ */
.slider-container {
    position: relative;
}
/* unique booklist style of the container - we force the container to the left because of the extra padding needed for this slider */
.slider-container:before {
    content: "";
    width: 50px;
    height: 50px;
    border: 1px solid var(--body-media-bg-color);
    border-bottom: 1px solid #000;
    border-radius: 50%;
    opacity: 0;
    display: block;
    transform-origin: 50% 50%;
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    z-index: 25;
    pointer-events: none;
    animation: search-spinner .75s infinite linear;
    transition: opacity .3s;
}
body.resizing .slider-container:before {
    opacity: 1;
}
.slider-container .swiper {
    width: calc(100% - 20px);
    margin: 0;
    padding: 0 20px;
    opacity: 1;
    transition: opacity .3s;
}
body.resizing .slider-container .swiper {
    opacity: .4;
}
.swiper-fade .swiper-slide {
    opacity: 0;
    pointer-events: none;
}
.swiper-fade .swiper-slide-active {
    opacity: 1;
    pointer-events: all;
}
/* book-themed sections */
.slider-container.materials .item-media-image.default {
    background-image: url('/content/_site_images/icon_placeholder-mark.svg');
}
/* skeleton unique styles */
.swiper-slide.skeleton-placeholder .item-media:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: gray;
}
.swiper-slide.skeleton-placeholder .item-heading, .swiper-slide.skeleton-placeholder .item-author {
    background-color: gray;
    color: gray;
}
/* unique sizing for different types of swipers */
.slider-container.booklists .swiper {/* used in the Book Lists segment (needs extra padding so that the book's box-shadow won't get cut-off) */
    width: calc(100% - 140px);
    margin: 0 auto;
    padding: 0;
}
.slider-container .swiper-wrapper .swiper-slide {
    width: auto;
    min-height: 180px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    order: 1;
}
.slider-container .swiper-wrapper .swiper-slide.favorited {
    order: 0;
}
.slider-container .swiper-wrapper .swiper-slide.favorited:after {
    left: 0px;
}
.slider-container .swiper-wrapper .swiper-slide.favorited .list-heading {
    margin-left: 17px;
}
.slider-container .swiper-button-prev, .slider-container .swiper-button-next {
    width: 36px;
    height: 100%;
    margin: 0;
    background-image: linear-gradient(to right, var(--body-bg-color) 0%, transparent 100%);
    top: 0;
    bottom: auto;
}
.slider-container .swiper-button-next {
    background-image: linear-gradient(to left, var(--body-bg-color) 0%, transparent 100%);
}
.slider-container .swiper-button-prev.swiper-button-disabled, .slider-container .swiper-button-next.swiper-button-disabled {
    opacity: 1;
}
.slider-container .swiper-button-prev {
    left: 0;
    right: auto;
}
/* unique positioning for different types of swipers */
.slider-container .swiper-button-next {
    left: auto;
    right: 0;
}
.slider-container .swiper-button-prev:before, .slider-container .swiper-button-next:before {
    content: "";
    width: 18px;
    height: 14px;
    background: url('/content/_theme_images/icon_slider-arrow.svg') no-repeat center;
    background-size: cover;
    display: block;
    position: absolute;
    top: calc(50% - 6px);
    left: calc(50% - 10px);
    z-index: 10;
    transition: opacity .3s;
}
.slider-container .swiper-button-prev:before {
    left: calc(50% - 8px);
    transform: scaleX(-1);
}
.slider-container .swiper-button-prev:after, .slider-container .swiper-button-next:after {
    content: "";
    width: 36px;
    height: 36px;
    background-color: var(--body-bg-color);
    border: 1px solid var(--font-link-color);
    display: block;
    position: absolute;
    top: calc(50% - 18px);
    z-index: 5;
    transition: opacity .3s;
}
.slider-container .swiper-button-prev:after {
    left: 0;
}
.slider-container .swiper-button-next:after {
    right: 0;
}
.slider-container .swiper-button-prev.swiper-button-disabled:before, .slider-container .swiper-button-next.swiper-button-disabled:before, .slider-container .swiper-button-prev.swiper-button-disabled:after, .slider-container .swiper-button-next.swiper-button-disabled:after {
    opacity: 0.35;
}
.swiper .swiper-pagination {
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 9px;
}
.swiper .swiper-pagination .swiper-pagination-bullet {
    border: 1px solid transparent;
    border-color: var(--swiper-pagination-bullet-border-color);
}

/* place .discover-filters styles here */
.discover-filters .personalize-option .tooltip, .discover-filters .apply-favorites .tooltip {
    left: auto;
    right: -20px;
    top: calc(100% + 9px);
}
.discover-filters .personalize-option .tooltip:after, .discover-filters .apply-favorites .tooltip:after {
    width: 100%;
    height: 18px;
    left: 0;
    top: -9px;
}
.discover-filters .personalize-option .tooltip:before, .discover-filters .apply-favorites .tooltip:before {
    transform: rotate(45deg);
    left: auto;
    right: 22px;
    top: -6px;
}
/* filters container */
.discover-filters {
    margin: 25px 0 50px 0;
    position: relative;
}
.discover-filters .current-filters {
    padding: 17px 30px;
    background-color: var(--button-secondary-bg-color);
    border: 1px solid var(--font-ordered-list-marker-color);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 13px;
    position: relative;
}
.discover-filters .current-filters .h3-like {
    width: fit-content;
    margin: 0;
    text-decoration: none;
    cursor: pointer;
}
.discover-filters .current-filters .tagged-list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.discover-filters .current-filters .tagged-list .tag {
    padding: 0 8px 2px 25px;
    background-color: var(--body-bg-color);
    border: 1px solid rgba(102,141,78,.44);/* TODO: setup with vars */
    cursor: pointer;
}
.discover-filters .current-filters .tagged-list .tag a {
    position: relative;
    font: 400 14px/14px 'Sarabun';/* TODO: setup with vars */
    text-decoration: none;
}
.discover-filters .current-filters .tagged-list .tag a:before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: var(--font-link-color);
    top: 4px;
    left: -17px;
    position: absolute;
    clip-path: polygon(10% 0%, 50% 40%, 90% 0%, 100% 10%, 60% 50%, 100% 90%, 90% 100%, 50% 60%, 10% 100%, 0% 90%, 40% 50%, 0% 10%);
}
.discover-filters .current-filters .tagged-list .tag a.favorited {
    padding-right: 17px;
}
.discover-filters .current-filters .tagged-list .tag a.favorited:after {
    left: auto;
    right: 0;
}
.discover-filters .current-filters .expand-filters {
    width: 40px;
    height: 40px;
    background-color: var(--select-bg-color);
    /*background-image: var(--button-icon);*/
    background-repeat: no-repeat;
    background-position: calc(50% + 1.5px) calc(50% - .5px);
    background-size: 8px;
    border: .5px solid var(--button-bg-color);
    border-radius: 20px;
    display: inline-block;
    position: relative;
    transition: transform .5s;
    cursor: pointer;
}
.discover-filters .current-filters .expand-filters:before {
    content: "";
    width: 10px;
    height: 6px;
    background-color: var(--button-bg-color);
    position: absolute;
    top: calc(50% - 3px);
    left: calc(50% - 5px);
    clip-path: polygon(10% 0%, 50% 66.67%, 90% 0%, 100% 16.67%, 50% 100%, 0% 16.67%);
}
.discover-filters.expanded .current-filters .expand-filters {
    transform: rotate(180deg);
}


.discover-filters .current-filters a.personalize-button .tooltip {
    top: unset;
    bottom: 30px;
    left: -110px;
}
.discover-filters .current-filters a.personalize-button .tooltip:before {
    transform: rotate(-135deg);
    top: unset;
    bottom: -6px;
    left: calc(50% - 5.5px);
}
.discover-filters .current-filters a.personalize-button .tooltip:after {
    top: unset;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 25px;
}
.discover-filters[open] .current-filters:before {
    transform: rotate(180deg);
}
.discover-filters .expandable-section {
    padding: 16px 30px 30px 30px;
    border: 1px solid var(--font-ordered-list-marker-color); /* replaces existing code */
    display: none;
    border-top: unset;
    position: relative;
    transition: margin .5s, opacity .5s, max-height .5s;
}
.discover-filters.expanded .expandable-section {
    width: 100%;
    margin-top: 0;
    max-height: 300px;
    opacity: 1;
    display: block;
    pointer-events: all;
}
.discover-filters .tags {
    max-height: 243px;
    display: flex;
    gap: 25px;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.discover-filters.blogs .tags { /* TODO: JS - come back and set a limit here that doesn't look dumb */
    max-height: 184px;
}
.discover-filters .tags .tag-list {
    position: relative;
    flex: 1 1 0px;
}
.discover-filters.blogs .tags .tag-list.branches {
    flex: 2 1 0px;
}
.discover-filters .dates h4 {
    margin: 0;
    font: 600 16px/23px 'DM Sans';
}
.discover-filters .dates .after-before, .discover-filters .dates .after-before label {
    display: flex;
    align-items: center;
    gap: 10px;
}
.discover-filters.eresources .tagged-list .tag {
    padding: 0;
}
.discover-filters.eresources .tagged-list .tag label:before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: var(--font-link-color); /* replaces existing css */
    position: absolute;
    top: 8px;
    left: 8px;
    clip-path: polygon(11.54% 0%, 50% 38.46%, 88.46% 0%, 100% 11.54%, 61.54% 50%, 100% 88.46%, 88.46% 100%, 50% 61.54%, 11.54% 100%, 0% 88.46%, 35.46% 50%, 0% 11.54%);
}
.discover-filters.eresources .tagged-list label {
    padding: 6px 8px 7px 25px; /* replaces existing css */
    display: flex;
    color: var(--font-link-color);
    font: 400 14px/14px 'Sarabun';
    position: relative;
    cursor: pointer;
}
.discover-filters.eresources .tagged-list label input {
    margin: 0;
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}
.discover-filters.eresources .tagged-list label .checkmark svg g {
    fill: transparent;
}
.discover-filters.eresources .tags .tag-list.subjects {
    flex: 6 1 0px;
}
.discover-filters .tags .tag-list .h4-like {
    margin: 0 0 15px 0;
    font: 400 16px/22px 'Libre Baskerville';/* TODO: setup with var */
}
.discover-filters .tag-scroll {
    max-height: 221px;
    /*overflow: scroll;*/
    overflow-y: auto;
    overflow-x: hidden;
}
.discover-filters.blogs .tag-scroll {
    padding-bottom: 0px;
}
.eresources-section .discover-filters .tag-scroll {
    max-height: 131px;
}
.discover-filters ul li:last-child {
    padding: 0;
}
.tag-list .audience-filter {
    align-items: unset;
    justify-content: unset;
}
.discover-filters ul {
    margin: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.discover-filters ul li {
    padding: 0;
    margin: 0;
}
.discover-filters ul li:before {
    content: unset;
}
.discover-filters ul li label {
    padding: 6px 8px 7px 27px;
    background-color: var(--body-bg-color);
    border: 1px solid rgba(102,141,78,.44);/* TODO: setup with vars */
    color: var(--theme-primary-color-3);
    font: var(--font-button);
    display: flex;
    gap: 5px;
    cursor: pointer;
}
.discover-filters ul.letters-list li label {
    border-radius: 0;
}
.discover-filters ul.letters-list li label:has( input:checked) {
    border-bottom: 2px solid var(--font-body-color);
    font-weight: 900;
}
.discover-filters ul li.favorited:after {
    left: unset;
    right: 9px;
    top: 4px;
}
.discover-filters ul li.favorited label {
    padding-right: 27px;
}
.discover-filters ul li.favorited label:after {
    left: unset;
    right: 10px;
    top: 5px;
}
.discover-filters ul li label input {
    margin: 0;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.discover-filters ul li label .checkmark {
    width: 12px;
    height: 12px;
    border: 1px solid rgba(102,141,78,.44);
    top: 10px;
    left: 8px;
    position: absolute;
}
.discover-filters ul li label input:checked ~ .checkmark {
    background-color: rgba(102, 141, 78, .18);/* TODO: setup with var */
}
.discover-filters ul li label input:checked ~ .checkmark svg g {
    fill: var(--button-bg-color);
}
.discover-filters ul li label .checkmark svg {
    margin: 0 0 4.5px 1px;
}
.discover-filters ul li label .checkmark svg g {
    fill: transparent;
}

/* place .pagination styles here */
.content-pagination {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.all-books .content-pagination {
width: 100%;
}
.content-pagination.hide {
    display: none;
}
.content-pagination > * {
    font: 400 16px / 23px 'DM Sans';
    color: var(--font-body-color);
    opacity: .5;
    min-width: 14px;
    text-align: center;
}
.content-pagination a.active {
    opacity: 1;
    font-weight: 700;
}
.content-pagination a.link-prev, .content-pagination a.link-next {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    background-color: var(--body-bg-color);
    border: 1px solid var(--tag-border-color);
    margin-right: 16px;
    opacity: 1;
}
.content-pagination a.link-next {
    transform: rotate(180deg);
    margin: 0 0 0 16px;
}
.content-pagination a.link-next.disabled, .content-pagination a.link-prev.disabled {
    opacity: .5;
    pointer-events: none;
}
.content-pagination a.link-prev:before, .content-pagination a.link-next:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 18px;
    left: 14px;
    top: 11px;
    clip-path: polygon(9px 0px, 10px 1px, 2px 9px, 10px 17px, 9px 18px, 0px 9px);
    background-color: #9BB9B7;
}

/* Material Bio (New at the library) styles */
.material-item {
    width: 100%;
    max-width: 119px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.material-item .item-media {
    width: 100%;
    height: 182px;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.material-item .item-media .item-media-image {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    box-shadow: -3px 7px 13px rgba(0,0,0,0.23);
}
.material-item .item-media .item-media-image.default {/* "default" is used as a placeholder if the material item doesn't come with an image */
    width: 100%;
    height: 100%;
    /*background-color: rgba(155,185,183,0.4);*/
    display: block;
}
.material-item .item-media .item-favorite {
    width: 100%;
    padding: 13px 0;
    background-color: var(--overflow-segment-gradient-color-2);
    border-left: 6px solid var(--theme-primary-color-2);
    color: var(--font-materials-favorite-color);
    font: var(--font-materials-favorite);
    display: flex;
    column-gap: 4px;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
}
.material-item .item-heading {
    width: 100%;
    max-height: 34px;
    margin: 0 0 5px 0;
    padding: 0 0 2px 0;
    color: var(--font-body-alt-color);
    font: var(--font-materials-header);
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .3s;
}
.material-item:hover .item-heading {
    color: var(--font-link-color);
}
.material-item .item-author {
    width: 100%;
    max-height: 34px;
    font: var(--font-full-segment-author);
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--font-body-color);
}

/* Root Pillars Segment; a three column section, that has a   */
.root-pillars-segment {
    width: 100%;
    margin: 55px 0 75px 0;
    opacity: 0.8;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    transition: opacity .3s;
}
.root-pillars-segment.in-spotlight {
    opacity: 1;
}
/* override base style */
.root-pillars-segment h2, .root-pillars-segment .h2-like {
    margin: 0;
}
.root-pillars-segment h3, .root-pillars-segment .h3-like {
    margin: 0 0 10px 0;
}
.root-pillars-segment p {
    margin: 0;
}
.root-pillars-segment .segment-heading-row {
    width: 100%;
    padding: 0 0 25px 0;
}
.root-pillars-segment .segment-content-row {
    width: 100%;
    position: relative;
}
.root-pillars-segment .content-pillar {
    width: 100%;
    max-width: none;
    display: flex;
    /*row-gap: 76px;*/
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    z-index: 5;
}
.root-pillars-segment .content-pillar:last-of-type {
    padding-top: 245px;
}
.root-pillars-segment .content-pillar .pillar-item {
    /*width: 100%;*/
    width: calc(50% - 88px);
    opacity: 0.5;
    position:  relative;
    transition: opacity .3s;
}
.root-pillars-segment .content-pillar .pillar-item:nth-of-type(odd) {
    /*top: -122px;*/
    margin-top: -122px;
}
.root-pillars-segment .content-pillar .pillar-item:nth-of-type(even) {
    /*top: 122px;*/
    margin-top: 122px;
}
.root-pillars-segment .content-pillar .pillar-item:first-of-type {
    top: auto;
    margin-top: 0;
}
.root-pillars-segment .content-pillar .pillar-item:nth-of-type(2) {
    /*top: 244px;*/
    margin-top: 244px;
}
/*.root-pillars-segment .content-pillar .pillar-item:nth-of-type(3) {*/
/*    top: -122px;*/
/*}*/
/*.root-pillars-segment .content-pillar .pillar-item:nth-of-type(4) {*/
/*    top: 122px;*/
/*}*/
.root-pillars-segment .content-pillar .pillar-item.highlighted,
.root-pillars-segment .content-pillar .pillar-item:hover {
    opacity: 1;
}
.root-pillars-segment .content-pillar .pillar-item .item-media {
    width: 100%;
    max-width: 320px;
    height: 314px;
    display: block;
    position: relative;
}
.root-pillars-segment .content-pillar .pillar-item .item-media:before,
.root-pillars-segment .content-pillar .pillar-item .item-media:after {
    content: "";
    background-color: var(--theme-primary-color-2);
    display: block;
    position: absolute;
}
.root-pillars-segment .content-pillar .pillar-item .item-media:before {
    width: 88px;
    height: 1px;
    top: calc(50% - (1px / 2));
    right: -148px;
}
.root-pillars-segment .content-pillar .pillar-item .item-media:after {
    width: 100%;
    height: 100%;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .3s .1s;
}
.root-pillars-segment .content-pillar .pillar-item.element-seen .item-media.element-initialized:after {
    opacity: 0;
}
/*
.root-pillars-segment .content-pillar:last-of-type .pillar-item .item-media:before {
    left: -108px;
}
*/
.root-pillars-segment .content-pillar .pillar-item:nth-of-type(even) .item-media:before {
    left: -88px;
}
.root-pillars-segment .content-pillar .pillar-item .item-details {
    width: 100%;
    max-width: 320px;
    margin: -33px 0 0 auto;
    padding: 33px 38px;
    opacity: 0;
    background-color: var(--theme-secondary-color-4);
    position: relative;
    transform: translateX(-15px);
    transition: opacity .3s .2s, transform .3s .2s;
}
.root-pillars-segment .content-pillar .pillar-item.element-seen.element-initialized .item-details {
    opacity: 1;
    transform: translateX(0);
}
.root-pillars-segment .content-pillar .pillar-item .item-details:before {
    content: "";
    width: 10px;
    height: 100%;
    background-color: var(--theme-primary-color-2);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.root-pillars-segment .content-pillar .pillar-item .item-details a.button-like.secondary {
    margin: 26px 0 0 0;
}
.root-pillars-segment .content-pillar .pillar-item .item-details .item-gallery {
    width: 100%;
    margin: 22px 0 0 0;
    display: flex;
    column-gap: 6px;
    row-gap: 6px;
}
.root-pillars-segment .content-pillar .pillar-item .item-details .item-gallery .media {
    width: 56px;
    aspect-ratio: 1.37 / 1;
}
.root-pillars-segment .root-pillar {
    width: 100%;
    max-width: 176px;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    top: 0;
    left: calc(50% - (176px / 2));
    z-index: 1;
}
.root-pillars-segment .root-pillar:before {
    content: "";
    width: 1px;
    height: calc(100% - 108px);
    background-color: var(--theme-primary-color-2);
    display: block;
    position: absolute;
    bottom: 0;
    left: calc(50% - (1px / 2));
    z-index: 5;
}
.root-pillars-segment .root-pillar .pillar-marker {
    width: 65px;
    height: 99px;
    /*background-color: var(--theme-primary-color-2);*/
    opacity: 0;
    display: block;
    position: relative;
    z-index: 10;
    transition: opacity .2s, top .3s;
}
.root-pillars-segment.in-spotlight .root-pillar .pillar-marker {
    opacity: 1;
    transition: opacity .3s .2s, top .3s;
}
.root-pillars-segment .root-pillar .jsgif canvas {
    width: 100%;
}
.root-pillars-segment .root-pillar .pillar-checkpoint {
    width: 65px;
    height: 99px;
    /*background-color: var(--theme-secondary-color-4);*/
    background-color: var(--body-bg-color, #FCFCFC);
    /*opacity: 0.50;*/
    display: block;
    position: absolute;
    z-index: 1;
}
.root-pillars-segment .root-pillar .pillar-checkpoint:before {
    content: "";
    width: calc(100% + 86px);
    height: 1px;
    background-color: var(--theme-primary-color-2);
    opacity: 0;
    display: block;
    position: absolute;
    top: calc(50% - (1px / 2));
    left: calc(-100% - 86px);
    z-index: 1;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: opacity .2s, transform .2s;
}
.root-pillars-segment .root-pillar .pillar-checkpoint:nth-of-type(odd):before {
    transform-origin: 0 50%;
    left: auto;
    right: calc(-100% - 86px);
}
.root-pillars-segment .root-pillar .pillar-checkpoint.point-seen:before {
    opacity: 1;
    transform: scaleX(1);
    transition: opacity .3s .1s, transform .3s;
}
/* "no-media" edits for .pillar-item */
.root-pillars-segment .content-pillar .pillar-item.no-media:after {
    content: "";
    width: 100%;
    /*height: 314px;*/
    height: 244px;
    background-color: var(--theme-primary-color-1);
    opacity: 0;
    display: block;
    pointer-events: none;
}
.root-pillars-segment .content-pillar .pillar-item.no-media:first-of-type:before {
    display: none;
}
.root-pillars-segment .content-pillar .pillar-item.no-media .item-media {
    display: none;
    opacity: 0;
    position: absolute;
    top: 0;
    pointer-events: none;
}
.root-pillars-segment .content-pillar .pillar-item.no-media .item-details {
    margin: 0;
}
.root-pillars-segment .content-pillar .pillar-item .item-media:before,
.root-pillars-segment .content-pillar .pillar-item .item-media:after {
    content: "";
    background-color: var(--theme-primary-color-2);
    display: none;
    position: absolute;
}
.root-pillars-segment .content-pillar .pillar-item .item-media:before {
    width: 88px;
    height: 1px;
    top: calc(50% - (1px / 2));
    right: -148px;
}

/* global styles for the .personal-item elements *used mainly in the "For You" segment on the home page */
.personal-items {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
column-gap: 29px;
row-gap: 29px;
}
.personal-item {
width: calc(30% - 29px);
max-width: 374px;
background-color: var(--body-bg-color);
border: 0.5px solid var(--brand-border-color);
border-radius: 40px;
overflow: hidden;
}
.personal-item.forced-area {
width: 100%;
}
.personal-item.sandbox {/* adding the "sandbox" class to this element should give you free rein to any content without the default styles getting in the way*/
max-width: 374px;
background-color: transparent;
border: none;
border-radius: initial;
overflow: initial;
}
.personal-item .item-media {
width: 100%;
height: 192px;
display: block;
}
.personal-item .item-media.has-image {
background: var(--body-media-bg-color) no-repeat center;
background-size: 95%;
}
.personal-item .item-content {
width: 100%;
padding: 22px 25px;
}
.personal-item .item-content .h3-like {
margin-top: 0;
}
.personal-item .item-content p {
color: var(--font-offset-color);
font-size: 16px;
line-height: 19px;
}
.personal-item .item-content p.detail {
margin: 0 0 5px 0;
display: flex;
font-size: 15px;
line-height: 18px;
column-gap: 8px;
align-items: center;
}
.personal-item .item-content p.detail .detail-icon {
width: 15px;
display: flex;
align-items: center;
}
.personal-item .item-content a.button-like {
margin: 15px 0 0 0;
}
.personal-item .item-content .item-buttons {
position: relative;
}
.personal-item .item-content .booklist-books {
width: 100%;
margin: 0 0 25px 0;
display: flex;
flex-wrap: wrap;
column-gap: 10px;
row-gap: 10px;
}
.personal-item .item-content .booklist-books .book {
width: 100px;
height: 157px;
position: relative;
}
.personal-item .item-content .booklist-books .book.has-image {
background: transparent no-repeat center;
background-size: 100%;
}
.personal-item .item-content .booklist-books .book.blank {
background-color: var(--blank-book-bg-color);
opacity: 0.3;
pointer-events: none;
}
.personal-item .quicklinks-paths {
width: 100%;
display: flex;
flex-direction: column;
row-gap: 18px;
}
.personal-item .quicklinks-paths a.path {
width: 100%;
margin: 0;
padding: 25px 23px;
background-color: var(--body-bg-color);
border: 0.4px solid var(--brand-border-color);
border-radius: 35px;
color: var(--font-body-color);
font-size: 23px;
line-height: 24px;
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;/* used to hide the edges of any skeleton pesudo elements */
}
.personal-item .quicklinks-paths a.path svg {
display: block;
transform: translateX(0);
transition: transform .3s;
}
.personal-item .quicklinks-paths a.path:hover svg {
transform: translateX(5px);
}

/* global styles for the upcoming events segment; this is manily used on the home page */
.upcoming-events {
    width: 100%;
}
.upcoming-events .featured-event {
    width: 100%;
    display: flex;
    align-items: center;
}
.upcoming-events .featured-event .event-media {
    width: 100%;
    max-width: 725px;
    min-height: 455px;
    border: 0.4px solid var(--brand-border-color);
    border-radius: 5px;
    position: relative;
    z-index: 5;
    overflow: hidden;
}
.upcoming-events .featured-event .event-media.has-image {
    background: var(--body-media-bg-color) no-repeat center;
    background-size: 95%;
    /*background-size: cover;*/
}
.upcoming-events .featured-event .event-content {
    width: calc(100% - 700px);
    margin: 0 43px 0 102px;
    position: relative;
    z-index: 1;
}
.upcoming-events .featured-event .event-content p {
    margin-bottom: 19px;
    color: var(--font-body-color);
}
.upcoming-events .featured-event .event-content p.detail {
    margin-bottom: 5px;
    color: var(--font-offset-color);
    font-size: 15px;
    line-height: 18px;
    display: flex;
    align-items: center;
    column-gap: 8px;
}
.upcoming-events .featured-event .event-content p.detail .detail-icon {
    width: 15px;
    display: flex;
    justify-content: center;
}
.upcoming-events .featured-event .event-content a.button-like {
    margin-top: 24px;
}
.upcoming-events .featured-event .event-content .details {
    position: relative;
    z-index: 5;
}
.upcoming-events .featured-event .event-content .details h4 {
    margin-top: 0;
}
.upcoming-events .basic-events {
    width: 100%;
    margin: 58px 0 0 0;
    display: flex;
    column-gap: 30px;
    align-items: flex-start;
    position: relative;
    z-index: 10;
}
.upcoming-events .basic-events .event {
    width: 100%;
    max-width: 374px;
    padding: 30px;
    background-color: var(--body-bg-color);
    border: 0.4px solid var(--brand-border-color);
    border-radius: 20px;
    overflow: hidden;
}
.upcoming-events .basic-events .event .h3-like {
    margin: 0 0 11px 0;
    padding: 0 0 0 22px;
    font-family: 'Aleo', serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 24px;
    display: block;
    position: relative;
}
.upcoming-events .basic-events .event .h3-like:before {
    content: "";
    width: 12px;
    height: 12px;
    background-color: var(--font-link-color);
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 5px;
    left: 0;
}
.upcoming-events .basic-events .event p {
    margin-bottom: 15px;
    color: var(--font-offset-color);
    font-size: 16px;
    line-height: 19px;
}
.upcoming-events .basic-events .event p.detail {
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 18px;
    display: flex;
    align-items: center;
    column-gap: 5px;
}
.upcoming-events .basic-events .event p.detail .detail-icon {
    width: 15px;
    display: flex;
    justify-content: center;
}
.upcoming-events .basic-events .event a.button-like {
    margin-top: 10px;
}

.events-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    row-gap: 35px;
    /*row-gap: 60px;*/
    justify-content: space-between;
    
    /* override base variables */
    --font-header-4: normal 400 17px/23px "Libre Baskerville", serif;
    --font-body: normal 400 17px/22px "Sarabun", sans-serif;
}
/* override base styles */
.events-list .event-item h4, .events-list .event-item .h4-like {
    margin: 0 0 8px 0;
    transition: color .3s;
}
.events-list .event-item:hover h4, .events-list .event-item:hover .h4-like {
    color: var(--font-link-color);
}
.events-list .event-item p {
    margin: 0;
    opacity: 1;
}
.events-list .event-item {
    width: calc(50% - 20px);
    color: var(--font-body-intro-color);
    text-decoration: none;
    display: flex;
    column-gap: 18px;
    align-items: flex-start;
    position: relative;
}
.events-list .event-item .item-date {
    width: 52px;
    height: 52px;
    border: 1px solid var(--theme-default-color);
    display: flex;
    row-gap: 5px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.events-list .event-item .item-date .month {
    font: var(--font-event-list-month);
}
.events-list .event-item .item-date .day {
    font: var(--font-event-list-day);
}
/* dual date variant of the event > .item-date */
.events-list .event-item .item-dual-dates {
    width: 104px;
    height: 52px;
    border: 1px solid var(--theme-default-color);
    display: flex;
    row-gap: 5px;
    align-items: center;
    justify-content: center;
    position: relative;
}
.events-list .event-item .item-dual-dates:before {
    content: " - ";
    width: 8px;
    height: 100%;
    line-height: 50px;
    text-align: center;
    position: absolute;
    top: 0;
    left: calc(50% - 4px);
    pointer-events: none;
}
.events-list .event-item .item-dual-dates .item-date {
    border: none;
}
.events-list .event-item .item-content {
    width: calc(100% - 70px);
    position: relative;
}
.events-list .event-item .item-content .details {
    font: var(--font-event-list-details);
}
.events-list .event-item .item-content .options {
    width: 100%;
    margin: 8px 0 0 0;
}
/*
.events-list .event-item .item-content .options {
    width: 100%;
    opacity: 0;
    position: absolute;
    bottom: -45px;
    left: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.events-list .event-item:hover .item-content .options {
    padding-top: 8px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
    transition: opacity .3s .1s, transform .3s;
}
.events-list .event-item .item-content .options a.button-like {
    margin: 0 4px 0 0;
}
.events-list .event-item .item-content .options a.button-like:last-of-type {
    margin-right: 0;
}
*/
.events-list .event-item .item-clickable-area {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
/* 'offset-list' edits */
.events-list.offset-list {}
.events-list.offset-list .event-item {}
.events-list.offset-list .event-item:first-of-type {
    margin-top: -20px;
}
.events-list.offset-list .event-item .item-content {}
.events-list.offset-list .event-item .item-content .details {
    margin: 0 0 8px 0;
    opacity: 0.6;
}
.events-list.offset-list .event-item .item-content .options {
    margin: 15px 0 0 0;
    display: none;
    opacity: 0.5;
    transition: opacity .3s;
}
.events-list.offset-list .event-item:hover .item-content .options {
    opacity: 1;
}
.events-list.offset-list .event-item.show-options .item-content .options {
    display: flex;
}
.events-list.offset-list .event-item .item-content .options a.button-like {
    margin: 0 5px 0 0;
}
/* 'show-options' edits */
.events-list .event-item.show-options:hover h4 {
    color: var(--font-header-color);
}
.events-list .event-item.show-options .item-clickable-area {
    display: none;
}


.special-upcoming-events {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /*align-items: center;*/
    justify-content: space-between;
    
    --swiper-pagination-color: rgba(184,184,184,0.34);
    --swiper-pagination-bullet-inactive-color: rgba(184,184,184,0);
    --swiper-pagination-bullet-border-color: #CFCFCF;
}
.special-upcoming-events .events-banner {
    width: 50%;
    aspect-ratio: 1.64 / 1;
    position: relative;
}
.special-upcoming-events .events-banner:before {
    content: "";
    width: 10px;
    height: 100%;
    background-color: var(--theme-primary-color-2);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.special-upcoming-events .events-content {
    width: calc(50% - 30px);
    padding: 6px 0 0 0;
}
.special-upcoming-events .events-content .subheader {
    width: 100%;
    margin: 0 0 21px 0;
    color: var(--font-body-alt-color);
    font: var(--font-subheader);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;
}
.special-upcoming-events .events-content .slider-container {
    width: 100%;
}
.special-upcoming-events .events-content .slider-container .swiper {
    width: 100%;
    padding: 0 0 30px 0;
}
.special-upcoming-events .events-content .slider-container .swiper .swiper-pagination {
    justify-content: flex-start;
}
.special-upcoming-events .events-content .events-list {
    /*width: calc(50% - 30px);*/
    column-gap: initial;
    row-gap: 17px;
}
.special-upcoming-events .events-content .events-list .event-item {
    width: 100%;
    column-gap: 17px;
}

/* global style for a list of books for a specific booklist; mainly used on the home page in the "Book Lists" segment */
/* Books List; used in the full segment section(s), shown mostly on the booklists deeper level page. */
.books-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 30px;
    
    /* override base variables */
    --preload-cover-bg-color: var(--theme-secondary-color-1);
}
/* override base styles (h5, p, button) */
.books-list h5, .books-list .h5-like {
    margin: 15px 0 3px 0;
}
.books-list p {
    margin: 0;
    font: var(--font-book-item-author);
}
.books-list a.button-like.secondary {
    margin: 5px 0 0 0;
}
.books-list .book-item {
    width: 100%;
    /*max-width: 155px;*/
    max-width: 163px;
    padding: 15px;
    padding-left: 25px;
    background-color: var(--theme-secondary-color-4);
    text-decoration: none;
    position: relative;
}
.books-list .book-item.unclickable {
    cursor: initial;
}
.books-list .book-item:before {
    content: "";
    width: 10px;
    height: 100%;
    background-color: var(--theme-secondary-color-1);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.books-list .book-item .item-cover {
    width: 100%;
    aspect-ratio: 0.69 / 1;
    position: relative;
    transition: box-shadow .2s, transform .2s;
}
.books-list .book-item .item-cover p {/* override base styles */
    
}
.books-list .book-item .item-cover .cover-media {
    width: 100%;
    height: 100%;
    display: block;
}
.books-list .book-item .item-cover .cover-details {
    display: none;
}
/* "flippable" edits for Books List > Item > Cover; enables the cover to flip to reveal it's details */
.books-list .book-item .item-cover.flippable .cover-media {
    position: relative;
    transition: transform .2s;
}
.books-list .book-item .item-cover.flippable:hover .cover-media {
    transform: scaleX(-1);
    transition: transform .3s;
}
.books-list .book-item .item-cover.flippable .cover-details {
    width: 100%;
    height: 100%;
    background-color: var(--body-bg-color);
    padding: 0 8px;
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(-1);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}
.books-list .book-item .item-cover.flippable:hover .cover-details {
    opacity: 1;
    transform: scaleX(1);
    transition: opacity .3s .1s, transform .3s;
    pointer-events: all;
}
.books-list .book-item .item-cover.flippable .cover-details p {
    max-height: 100%;
    padding: 8px 0;
    text-align: center;
    position: relative;
    overflow-y: auto;
}
.books-list .book-item .item-cover.flippable .cover-details:before, .books-list .book-item .item-cover.flippable .cover-details:after {
    content: "";
    width: 100%;
    height: 8px;
    display: block;
    position: absolute;
    left: 0;
    z-index: 1;
    pointer-events: none;
}
.books-list .book-item .item-cover.flippable .cover-details:before {
    background-image: linear-gradient(to bottom, var(--body-bg-color) 0%, transparent 100%);
    top: 0;
}
.books-list .book-item .item-cover.flippable .cover-details:after {
    background-image: linear-gradient(to top, var(--body-bg-color) 0%, transparent 100%);
    bottom: 0;
}


.book-list {
max-width: 425px;
width: 100%;
min-width: 175px;
}
.most-recent .book-list {
    flex-basis: calc((100% - 50px) / 2);
}
.most-recent .book-list:nth-child(n+3) {
    flex-basis: calc((100% - 100px) / 3);
}
.book-list .book-list-books {
width: 100%;
margin: 0 0 20px 0;
display: flex;
flex-wrap: wrap;
column-gap: 12px;
row-gap: 10px;
align-items: flex-start;
}
.book-list .book-list-books .book {
width: 112px;
height: 175px;
position: relative;
z-index: 1;
transform: scale(1);
transform-origin: 50% 50%;
transition: transform .2s;
}
.book-list .book-list-books .book:hover {/* expand the book on hover */
    transform: scale(1);
    z-index: 10;
    transition: transform .3s;
}
.book-list .book-list-books .book.blank {/* placeholder book; in case the booklist has less then 6 books showing */
    background-color: var(--button-secondary-bg-color);
    opacity: 0.3;
    pointer-events: none;
}
.book-list .book-list-books .book .book-link-area {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.book-list .book-list-books .book .book-link-area:after {
opacity: 0;
position: absolute;
top: 0;
right: 0;
transform: scale(.75);
transition: opacity .0s;
}
.book-list .book-list-books .book:hover .book-link-area:after {
opacity: 1;
transition: opacity .3s .1s;
}
.book-list .book-list-books .book .book-media {
    width: 100%;
    height: 100%;
    display: block;
    transition: box-shadow .2s, transform .2s;
    position: relative;
    z-index: 1;
}
.book-list .book-list-books .book .book-media.has-image {
background: transparent no-repeat center;
background-size: cover;
}
.book-list .book-list-books .book .book-media.default {
    background-image: url('/content/_site_images/icon_placeholder-mark.svg');
}
.book-list .book-list-books .book:hover .book-media {
box-shadow: -3px 7px 0 rgba(0,0,0,0);
transform: scaleX(-1);
transition: box-shadow .3s, transform .3s;
}
.book-list .book-list-books .book .book-info {
/* width: 100%; */
/* height: 100%; */
padding: 5px;
background-color: var(--theme-secondary-color-4);
box-shadow: -3px 7px 0 rgba(0,0,0,0);
opacity: 0;
display: flex;
align-items: center;
position: absolute;
/* top: 0; */
/* left: 0; */
z-index: 1;
pointer-events: none;
overflow: hidden;
transform: scaleX(-1);
transform-origin: 50% 50%;
transition: box-shadow .2s, transform .2s;


    width: calc(100% + 1px); /* replaces existing css */
    height: calc(100% + 1px); /* replaces existing css */
    top: -.5px; /* replaces existing css */
    left: -.5px; /* replaces existing css */
}
.book-list .book-list-books .book:hover .book-info {
    box-shadow: unset; /* cancels existing css */
    opacity: 1;
    pointer-events: all;
    transform: scaleX(1);
    transition: box-shadow .3s, transform .3s;
    justify-content: center;
}
.book-list .book-list-books .book .book-info p {
max-height: 156px;
margin: 0;
opacity: 0;
color: var(--font-offset-color);
font-size: 11px;
line-height: 13px;
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
transition: opacity .2s;
overflow: hidden;
}
.book-list .book-list-books .book:hover .book-info p {
opacity: 1;
transition: opacity .3s .1s;
}
.book-list .book-list-subheader {
margin: 0 0 10px 0;
font-size: 15px;
line-height: 20px;
display: block;
position: relative;
}
.book-list .book-list-subheader:before {
content: "";
width: 12px;
height: 12px;
margin: 0 8px 0 0;
background-color: var(--tag-border-color);
display: inline-block;
position: relative;
}
.book-list .h3-like {
    margin-top: 0;
    /*font: 400 22px/27px 'Libre Baskerville';*/
}
.booklist-books .description {
    overflow: hidden;
    margin-bottom: 50px;
}
.booklist-books .booklist .books-list .booklist-item .book .book-media, .booklist-books .booklist .books-list .booklist-item .book:hover .book-info {
    box-shadow: unset;
}
.booklist .books-list .book:hover {
    transform: scale(1);
}
/* global styles for booklists; mainly used on the booklists page */
.featured-filter {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.featured-filter h2 {
    margin: 0;
}
.featured-filter label {
    position: relative;
    font: 400 16px/22px 'Libre Baskerville';
}
.featured-filter label:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 6px;
    right: 6px;
    top: calc(50% - 3px);
    z-index: 1;
    background-color: var(--font-link-color);
    clip-path: polygon(10% 0%, 50% 66.67%, 90% 0%, 100% 16.67%, 50% 100%, 0% 16.67%);
}

/* book lists */
.book-lists {
display: none;
}
.book-lists.featured.active {
display: block;
}
.book-lists .featured-filter {
    align-items: flex-end;
}
.book-lists .featured-filter h2 {
    margin-bottom: 15px;
}
.book-lists .featured-filter hr {
    margin-top: 0;
    height: 21px;
}
.booklist .books-list .book:hover {
    transform: unset;
}
.featured-books, .all-books {
display: none;
}
.featured-books.selected, .all-books.selected {
display: block;
}
.all-books .original-results {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.all-books .original-results .book-list {
flex-basis: calc((100% - 80px) / 3);
}
.featured-books > div {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}
.featured-title {
margin: 50px 0 25px 0;
}
.book-lists .featured-list {
display: flex;
gap: 40px;
}
.book-lists .featured-list .book-list {
flex-basis: calc((100% - 80px) / 3);
}
.book-list .book-list-books .book {
flex-basis: calc((100% - 24px) / 3);
aspect-ratio: 128 / 200;
height: auto;
}
.book-list .book-list-books .book .book-info {
align-items: initial;
overflow: scroll;
}
.book-list .book-list-books .book .book-info .overflow {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: max-content;
min-height: 100%;
}
.book-list .book-list-books .book .book-info p.title {
    width: 100%;
    max-height: 34px;
    margin-bottom: 5px;
    font: var(--font-materials-header); /* replaces existing css */
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.book-list .book-list-books .book .book-info p.author {
    width: 100%;
    max-height: 34px;
    margin-bottom: 5px;
    font: var(--font-full-segment-author);
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.book-list .book-list-books .book .book-info a {
    text-decoration: none;
    color: var(--font-body-color);
}
.book-list .book-list-books .book .book-info a:hover {
    color: var(--font-link-color);
}
/* global styles for booklist books; mainly used on the booklit books page */
/* booklist/booklist_books page */
.booklist .books-list {
display: flex;
flex-wrap: wrap;
gap: 25px;
}
.booklist .books-list .intro {
width: 100%;
}
.booklist .books-list .book {
position: relative;
width: calc((100% - 100px) / 5);
aspect-ratio: 2/3;
height: auto;
z-index: 1;
transform: scale(1);
transform-origin: 50% 50%;
transition: transform .2s;
}
.booklist .books-list .book:hover {
transform: scale(1.2);
z-index: 10;
transition: transform .3s;
}
.booklist .books-list .book .book-link-area {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
}
.booklist .books-list .book .book-media {
display: block;
position: relative;
width: 100%;
height: 100%;
/*background-color: #DEE5E5;*/
box-shadow: -3px 7px 13px rgba(0,0,0,0.23);
z-index: 1;
transition: box-shadow .2s, transform .2s;
}
.booklist .books-list .book:hover .book-media {
box-shadow: -3px 7px 0 rgba(0,0,0,0);
transform: scaleX(-1);
transition: box-shadow .3s, transform .3s;
}
.booklist .books-list .book .book-media.default {
    background-image: url('/content/_site_images/icon_placeholder-mark.svg');
}
.booklist .books-list .book .book-info {
    width: calc(100% + 1px);
    height: calc(100% + 1px);
    padding: 10px;
    background-color: var(--body-media-bg-color);
    box-shadow: -3px 7px 0 rgba(0, 0, 0, 0);
    opacity: 0;
    display: flex;
    position: absolute;
    top: -.5px;
    left: -.5px;
    z-index: 1;
    pointer-events: none;
    transform: scaleX(-1);
    transform-origin: 50% 50%;
    transition: box-shadow .2s, transform .2s;
    overflow: scroll;
}
.booklist .books-list .book:hover .book-info {
box-shadow: -3px 7px 23px rgba(0,0,0,0.23);
opacity: 1;
pointer-events: all;
transform: scaleX(1);
transition: box-shadow .3s, transform .3s;
}
.booklist .books-list .book .book-info .overflow {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: max-content;
min-height: 100%;
}
.booklist .books-list .book .book-info p {
display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
max-height: 156px;
margin: 0;
opacity: 0;
color: var(--font-offset-color);
font-size: 11px;
line-height: 13px;
text-align: center;
transition: opacity .2s;
overflow: hidden;
}
.booklist .books-list .book .book-info p.title {
font: 600 15px/18px 'Aleo';
color: var(--font-body-color);
margin-bottom: 5px;
}
.booklist .books-list .book .book-info p.author {
margin-bottom: 5px;
}
.booklist .books-list .book:hover .book-info p {
opacity: 1;
transition: opacity .3s .1s;
}


/* filtered booklists */
.book-lists.filtered {
flex-wrap: wrap;
gap: 40px;
}
.book-lists.filtered.active {
display: flex;
}
.book-lists.filtered .results {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.book-lists.filtered .book-list {
display: inline-block;
flex-basis: calc((100% - 80px) / 3);
flex-direction: column;
}
.book-lists.filtered .book-list.hide {
display: none;
}
.filtered-results .content-pagination a, .book-lists.filtered .content-pagination a {
cursor: pointer;
}
/* Booklist Books; this is the status we attach to the main-content to override specific styles on the deeper booklist page */
/* --TOREADD --*/
.booklist-books .all-booklist-books {
    margin-top: 50px;
}
.booklist-books .booklist .books-list {
    gap: 30px; /* replaces existing css */
}
.booklist-books .booklist .books-list .booklist-item {
    width: calc((100% - 120px) / 5);
    background-color: var(--background-3);
    border-left: 8px solid var(--theme-secondary-color-1);
    padding: 15px;
}
.booklist-books .booklist .books-list .booklist-item .book {
    width: 100%;
    margin-bottom: 15px;
}
.booklist-books .booklist .books-list .booklist-item .book .book-info {
    background-color: var(--select-bg-color);
}
.booklist-books .booklist .books-list .booklist-item .title {
    font: 400 16px/21px 'Libre Baskerville';
    text-decoration: none;
    color: var(--font-body);
    margin: 0 0 3px 0;
}
.booklist-books .booklist .books-list .booklist-item a.title {
    cursor: pointer;
}
.booklist-books .booklist .books-list .booklist-item a.title:hover {
    color: var(--font-link-color);
}
.booklist-books .booklist .books-list .booklist-item .author {
    font: 300 14px/18px 'Sarabun';
    margin: 0;
}


.eresources-section {
width: 100%;
}
.eresources-section .filters {
background-color: var(--body-bg-color);
border-radius: 34px;
border: 1px solid var(--brand-border-color);
padding: 20px 30px;
margin-top: 25px;
}
.eresources-section .eresource-types {
width: 100%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
gap: 15px 25px;
margin: 0 0 20px 0;
}
.eresources-section .eresource-types li {
margin: 0; 
position: relative;
padding: 0;
}
.eresources-section .eresource-types li:before {
display: none;
}
.eresources-section .eresource-types li a {
background-color: transparent;
color: var(--font-link-color);
font-size: 14px;
line-height: 14px;
font-weight: 400;
text-decoration: none;
cursor: pointer;
padding-left: 20px;
position: relative;
}
.eresources .eresources-section .eresource-types li a {
padding-left: 0;
}
.page-content .body .booklists .column-two {
margin-top: 25px;
width: unset;
}
/* global styles for eresources; mainly used on the eresources page */
.eresources-section .eresource-types li a svg {
position: absolute;
left: 0;
top: 0;
}
.eresources-section .eresource-types li a:hover, .eresources-section .eresource-types li.active a {
border-bottom: 2px solid var(--filter-underline-color);
}
.eresources-section .eresource-types li a:after {
display: none;
}
.eresources-section .eresource-types li.active a {
pointer-events: none;
}
.eresources-section h5 {
margin: 0;
font: 600 16px/23px 'DM Sans';/* TODO: attach to var */
}
.eresources-section .letters-list {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
}
.eresources-section .letters-list li {
margin: 0;
padding: 0;
opacity: .25;
pointer-events: none;
}
.eresources-section .letters-list li.active {
opacity: 1;
pointer-events: all;
}
.eresources-section .letters-list li:last-of-type {
margin: 0;
}
.eresources-section .letters-list li:before {
display: none;
}
.eresources-section .letters-list li label {
    padding: 0;
    background-color: transparent;
    border: unset;
    font: var(--font-button);
    font-weight: 500;
    color: var(--font-body-color);
    text-transform: uppercase;
}
.eresources-section .letters-list li label .checkmark {
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}
.eresources-section .letters-list li a {
font: 500 15px/15px 'DM Sans';
color: var(--font-link-color);
opacity: 0.3;
pointer-events: none;
cursor: pointer;
text-decoration: none;
}
.eresources-section .letters-list li.active a {
opacity: 1;
pointer-events: all;
}
.eresources-section .letters-list li a:hover, .eresources-section .letters-list li.toggled a {
color: var(--power-color-3);
}
.eresources-section .letters-list li a:after {
display: none;
}
.eresources-section .eresource-entities {
width: 100%;
display: none;
flex-wrap: wrap;
gap: 25px;
}
.eresources-section .eresource-entities.active {
display: flex;
}
.eresources-section .eresource-entities .eresource {
    width: calc((100% - 50px) / 3);
    padding: 35px;
    background-color: var(--theme-secondary-color-4);
    border-left: 10px solid var(--theme-secondary-color-2);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
.eresources-section .eresource-entities .eresource.active {
display: flex;
}
.eresources-section .eresource-entities .eresource .eresource-media {
    width: 100%;
    margin: 0;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 30/19.1;
}
.eresources-section .eresource-entities .eresource .eresource-media.default {
    background-image: url('/content/_site_images/icon_placeholder-mark-eresources.svg');
}
.eresources-section .eresource-entities .eresource .eresource-media.placeholder.default {
background-size: auto;
}
.eresources-section .eresource-entities .eresource .eresource-media.placeholder {
display: block;
width: 100%;
height: auto;
}
.eresources-section .eresource-entities .eresource .eresource-name {
color: var(--font-body-color);
text-decoration: none;
width: 100%;
margin: 17px 0 15px 0;
padding: 0;
font: 400 18px/23px 'Libre Baskerville'; /* TODO: setup with var */
}
.eresources-section .eresource-entities .eresource .eresource-buttons {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 0;
}
.eresources-section .eresource-entities .eresource .eresource-buttons a {
    margin: 0;
}
.eresources-section .eresource-entities .eresource .eresource-description {
width: 100%;
padding: 0;
margin: 0 0 20px 0;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
display: -webkit-box;
display: -moz-box;
font: 300 16px/23px 'Sarabun'; /* TODO: setup as var */
color: var(--font-offset-color);
}
.eresources-section .eresource-entities p.no-results {
display: none;
}
.eresources-section .eresource-entities p.no-results.show {
display: inline-block;
}

/* global styles for blogs; mainly used on the blog page */
.blog-post .left-sidebar {
max-width: 350px;
}
.blog-post .body {
width: calc(100% - 400px);
margin-top: 69px;
}
.blog-posts {
width: 100%;
}
.blog-posts.landing-page {
margin: 0;
}
.blog-posts .original-results.hide, .blog-posts .filtered-results.hide {
display: none;
}
.blog-posts .post {
width: 100%;
margin: 0 0 50px 0;
display: flex;
align-items: flex-start;
gap: 35px;
}
.blog-post-label, .blog-info .date {
opacity: 1;
letter-spacing: 0.2px;
font: var(--paragraph-font);
}
.blog-post-blurb {
letter-spacing: 0.2px;
opacity: 1;
-webkit-font-smoothing: antialiased;
}
.blog-posts .post .post-media {
width: 50%;
/*max-width: 506px;*/
/*max-width: 440px;*/
height: 250px;
margin: 0;
box-sizing: border-box;
background-repeat: no-repeat;
background-size: auto;
background-position: center;
display: block;
position: relative;
}
.blog-posts .post .post-media .media {
width: 100%;
height: 100%;
background-size: cover;
background-position: top center;
border-radius: 5px;
display: block;
/*position: absolute;*/
top: 0;
left: 0;
}

.blog-posts .post .post-media.placeholder {
background-color: var(--power-color-1);
background-image: url(/content/_theme_images/logo_wht.svg);
background-position: center;
background-size: 40%;
width: 50%;
border-radius: 5px;
}
.blog-posts .post .post-content {
/*flex: 1;*/
width: 50%;
}
.blog-posts.recommended-reads .post .post-media {
width: calc(50% - 100px);
}
.blog-posts.recommended-reads .post .post-media .media {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.blog-posts.recommended-reads .post .post-content {
width: calc(50% + 100px);
}
.blog-posts .post .post-title {
max-width: none;
margin: 0;
display: block;
font: 600 27px / 32px 'Aleo';
color: var(--font-body-color);
letter-spacing: 0;
text-decoration: none;
}
.blog-posts .post .post-info {
margin: 15px 0 0 0;
display: flex;
flex-direction: column;
}
.blog-posts .post .post-info span {
position: relative;
font: 400 16px/19px 'DM Sans';
color: var(--font-offset-color);
padding: 0;
margin: 0;
}
.blog-posts .post .post-info span.author:before {
background-image: url('/content/_theme_images/icon_pen.svg');
}
.blog-posts .post .post-description {
margin: 10px 0 15px 0;
font: 400 18px/23px 'DM Sans';
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-posts .post .button-like.third-about {
width: 100%;
}
.blog-posts .post .post-about {
width: 100%;
max-width: 250px;
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
background-color: var(--body-bg-color);
border: 1px solid var(--brand-border-color);
border-radius: 20px;
padding: 30px;
float: right;
margin: 0 0 35px 35px;
}
.blog-posts .post .post-about .heading {
margin: 0 0 6px 0;
/*color: #484848;*/
display: block;
font: 600 20px/22px 'Aleo';
}
.blog-posts .post .post-about .author, .blog-posts .post .post-about .date {
position: relative;
padding: 0 0 0 20px;
margin-top: 5px;
font: 400 16px / 20px 'DM Sans';
color: var(--font-offset-color);
}
.blog-posts .post .post-about .author svg {
position: absolute;
left: 0;
top: 2px;
}
.blog-posts .post .post-about .author a {
font-weight: 500;
}
.blog-posts .post .post-about .date:before {
background-image: url('/content/_theme_images/icon_calendar.svg');
}
.blog-posts .post .post-about .tags {
margin: 14px 0 0 0;
}
.blog-posts .post .post-about .tags .tag-heading {
margin: 0 0 10px 0;
color: #4C4C4C;
font: var(--small-header-font);
display: block;
}
.blog-posts .post .post-about .tags ul.tag-list {
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 0;
}
.blog-posts .post .post-about .tags ul.tag-list li {
margin: 0 7px 7px 0;
padding: 0;
}
.blog-posts .post .post-about .tags ul.tag-list li:before {
display: none;
}
.blog-posts .post .post-about .tags ul.tag-list li a.tag {
box-sizing: border-box;
border-radius: 16px;
text-decoration: none;
display: inline-block;
font: 400 15px/15px 'DM Sans';
color: var(--font-link-color);
padding: 5px 10px;
background-color: var(--body-bg-color);
border: 1px solid var(--tag-border-color);
}
.blog-posts .post .post-about .tags ul.tag-list li a.tag:after {
display: none;
}
/* - odd edits - */
.blog-posts .post:nth-child(2n+1) .post-media {
margin: 0;
order: 1;
}
.blog-posts .post:nth-child(2n+1) .post-content {
order: 0;
}
/* - first of type edits - */
.blog-posts .post.first {
margin: 0 0 50px 0;
display: block;
}
.blog-posts .post.first .post-media {
max-width: none;
height: 350px;
width: 100%;
margin: 0;
}
.blog-posts .post.first .post-content {
width: 100%;
}
.blog-posts .post.first .post-title {
margin: 14px 0 0 0;
font: var(--primary-header-font);
color: var(--header-1);
}
/* - main edits - */
.blog-posts .post.main {
display: block;
}
.blog-posts .post.main .post-media {
width: 350px;
position: absolute;
left: -400px;
top: 5px;
}
.blog-posts .post.main .post-content {
margin: 0;
display: inline-block;
align-items: flex-start;
justify-content: space-between;
width: 100%;
}
/* - blog filters - */
.blog-posts .post.hide {
display: none;
}
/* - blog tags / blog authors - */
.blog-tag .left-sidebar {
max-width: 250px;
}
.blog-tag .body {
width: calc(100% - 320px);
}
/* - blog post page - */
.blog-post .alignright, .fusion-alignright {/* from previous site - things for the old wordpress import */
    display: inline;
    float: right;
    margin: 15px 0 15px 15px;
}

.blog-post .blog-posts .post .post-about .author a, .blog-posts .post .post-about .date a {
color: var(--font-offset-color);
}
.blog-post .blog-posts p.no-results.hide {
display: none;
}
.blog-post .related-posts .posts-list {
display: flex;
gap: 30px;
}
.blog-post .related-posts .posts-list .post {
margin: 0;
padding: 0;
flex-direction: column;
gap: 0;
}
.blog-post .related-posts .posts-list .post:before {
content: unset;
}
.blog-post .related-posts .posts-list .post .img {
width: 100%;
height: 200px;
border-radius: 40px 40px 0 0;
}
.blog-post .related-posts .posts-list .post .text {
background-color: var(--body-bg-color);
border: 1px solid var(--brand-border-color);
border-top: unset;
border-radius: 0 0 40px 40px;
padding: 20px 20px 30px 20px;
}
.blog-post .related-posts .posts-list .post .text h3 {
font: 500 23px/24px 'Aleo';
margin-bottom: 5px;
}
.blog-post .related-posts .posts-list .post .text .date {
display: flex;
gap: 5px;
}
.blog-post .related-posts .posts-list .post .text p {
font: 400 16px/19px 'DM Sans';
color: var(--font-offset-color);
margin-bottom: 10px;
}

/* Staff List; shows the staff item(s) in it's respective `subtype` */
.staff-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: 28px;
    row-gap: 35px;
    
    /* override base variables */
    --font-header-5: normal 400 17px/23px "Libre Baskerville", serif;
    --font-body: normal 400 14px/16px "Sarabun", sans-serif;
    --preload-cover-bg-color: var(--theme-primary-color-2);
}
/* override base styles */
.staff-list h5, .staff-list .h5-like {
    margin: 0 0 5px 0;
}
.staff-list p {
    margin: 0 0 13px 0;
    opacity: 0.5;
    color: var(--font-body-alt-color);
    letter-spacing: 0.25px;
}
.staff-list a.button-like.secondary {
    margin: 15px 0 0 0;
}
.staff-list .staff-item {
    width: calc(25% - 21px);
    position: relative;
    overflow: hidden;
}
.staff-list .staff-item:before {
    content: "";
    width: calc(100% - 10px);
    height: 100%;
    background-color: var(--theme-secondary-color-4);
    border-left: 10px solid var(--theme-primary-color-2);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.staff-list .staff-item .item-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    position: relative;
    z-index: 5;
}
.staff-list .staff-item .item-details {
    width: 100%;
    padding: 20px;
    padding-left: 30px;
    position: relative;
    z-index: 5;
}
.staff-list .staff-item .item-details .item-info {
    margin: 0 0 5px 0;
    opacity: 1;
    font: var(--font-staff-item-info);
    letter-spacing: initial;
    display: flex;
    column-gap: 3px;
    align-items: flex-start;
    overflow-wrap: anywhere;
}
.staff-list .staff-item .item-details .item-info .info-icon {
    width: 16px;
    padding-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Staff Component; used to showcase a specific staff record's information */
.staff-component {
    width: 100%;
    
    /* override base variables */
    --overflow-segment-width: 100%;
    --overflow-segment-offset: 0;
}
/* overrride base styles */
.staff-component h1, .staff-component .h1-like {
    margin: 0 0 8px 0;
}
.staff-component .subheader {
    width: 100%;
    margin: 0 0 22px 0;
    color: var(--font-body-alt-color);
    font: var(--font-subheader);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;
}
.staff-component .staff-discussion {
    width: 100%;
    margin: 0 0 32px 0;
}
.staff-component .staff-discussion p {
    margin: 0;
}
.staff-component .staff-discussion:last-of-type {
    margin: 0;
}
.staff-component .staff-discussion .discussion-question {
    margin: 0 0 15px 0;
    opacity: 0.7;
    color: var(--font-body-alt-color);
    font: var(--font-staff-discussion-question);
}

.lib-overlay {
width: 100vw;
height: 100vh;
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.lib-overlay.active {
display: block;
min-height: 300px;
}
.overlay-content .already-registered-note{
    border: 1px solid red;
    padding: 5px;
    border-radius: 5px;
}
.overlay-content .already-registered-note i {
    color: red;
}
.lib-overlay .overlay-content a.back-button {
width: 31px;
height: 31px;
background-image: url('/content/_theme_images/icon_button_arrow.svg');
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 21px;
left: 21px;
z-index: 20;
transform: rotate(180deg);
transition: opacity .3s;
}
.lib-overlay .overlay-content a.back-button:after {
display: none;
}
.lib-overlay .overlay-content.step-one a.back-button {
opacity: 0.4;
pointer-events: none;
}
.lib-overlay .overlay-content.step-three a.back-button {
opacity: 0;
pointer-events: none;
}
.lib-overlay a.button-like {
margin: 10px 0 0 0;
}
.lib-overlay a.close-icon {
display: block;
position: absolute;
top: 25px;
right: 25px;
width: 25px;
height: 25px;
z-index: 20;
background-color: transparent;
}
.lib-overlay a.close-icon:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
clip-path: polygon(calc(0%) calc(0% + 1px), calc(0% + 1px) calc(0%), calc(50%) calc(50% - 1px), calc(100% - 1px) calc(0%), calc(100%) calc(0% + 1px), calc(50% + 1px) calc(50%), calc(100%) calc(100% - 1px), calc(100% - 1px) calc(100%), calc(50%) calc(50% + 1px), calc(0% + 1px) calc(100%), calc(0%) calc(100% - 1px), calc(50% - 1px) calc(50%));
background-color: #000000;
}
.lib-overlay input[type="text"], .lib-overlay input[type="password"], .lib-overlay input[type="email"] {
width: 100%;
margin: 0 0 10px 0;
padding: 5px 13px;
box-sizing: border-box;
border: 1px solid #CFCFCF;
border-radius: 5px;
font: var(--paragraph-font);
display: block;
}
.lib-overlay input[type="text"]::placeholder {
color: #999999;
}
.lib-overlay .password-input {
width: 100%;
position: relative;
}
.lib-overlay .password-input .show-hide-password {
position: absolute;
top: 5px;
right: 0;
}
.lib-overlay .password-input.password-shown .show-hide-password {
top: 0;
}
.lib-overlay .password-input .show-hide-password .hide-password, .lib-overlay .password-input.password-shown .show-hide-password .show-password {
display: none;
}
.lib-overlay .password-input.password-shown .show-hide-password .hide-password {
display: inline-block;
}
.lib-overlay .password-input .show-hide-password .hide-password, .lib-overlay .password-input .show-hide-password .show-password {
padding: 5px 10px;
border-radius: 5px;
color: #999;
}
.lib-overlay form .success-message {
display: none;
}
.lib-overlay form.form-submitted .success-message {
display: block;
}
.lib-overlay form.form-submitted input, .lib-overlay form.form-submitted label, .lib-overlay form.form-submitted .password-input, .lib-overlay form.form-submitted .custom-radio, .lib-overlay form.form-submitted button, .lib-overlay form.form-submitted a.button-like {
display: none;
}
.lib-overlay .additional-form-fields {
width: 100%;
margin: 0 0 20px 0;
}
.lib-overlay .additional-form-fields .add-new-field {
font: var(--small-header-font);
text-decoration: none;
}
.lib-overlay .additional-form-fields .add-new-field:before {
content: "";
width: 20px;
height: 20px;
margin: 0 8px 0 0;
background-image: url('/content/_theme_images/icon_plus.svg');
background-repeat: no-repeat;
background-size: cover;
opacity: 0.8;
display: inline-block;
position: relative;
top: 4px;
transition: opacity .3s;
}
.lib-overlay .additional-form-fields .add-new-field:after {
display: none;
}
.lib-overlay .additional-form-fields .add-new-field:hover:before {
opacity: 1;
}
.lib-overlay .overlay-bkgd {
width: 100%;
height: 100%;
background-color: #00000065;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
}
.lib-overlay .overlay-content {
max-width: 863px;
width: calc(100vw - 20px);
/* JS - changed the height to max and added a percent-based value and top values so it works better in shorter screens */
max-height: 709px;
height: calc(100vh - 20px);
padding: 50px;
box-sizing: border-box;
background-color: var(--background-1);
border: 0.5px solid var(--secondary-architecture);
display: block;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
z-index: 5;
/* overflow: scroll; */
flex-direction: column;
margin: 0;
font: var(--paragraph-font);
}
.lib-overlay .overlay-content .overlay-step {
width: 100%;
height: 100%;
padding: 38px 38px 51px 38px;
padding: clamp(10px, 3.5%, 35px) ;
box-sizing: border-box;
background-color: var(--background-3);
border: 0.5px solid #A3A3A3;
display: none;
position: relative;
z-index: 15;
overflow: auto;
}
.lib-overlay .overlay-content.step-one .overlay-step.one, .lib-overlay .overlay-content.step-two .overlay-step.two, .lib-overlay .overlay-content.step-three .overlay-step.three {
display: block;
}
.lib-overlay .overlay-content .overlay-columns {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
position: relative;
z-index: 15;
}
.lib-overlay .overlay-content .column.form {
width: 100%;
max-width: 363px;
display: flex;
flex-direction: column;
}
.lib-overlay .overlay-content .column a.button-like {
margin: 15px 0 0 0;
}
.lib-overlay .overlay-content .column a.button.dropdown, .lib-overlay .overlay-content .column a.button-like.dropdown {
margin: 0;
}
.lib-overlay .overlay-content .column .form-flex {
width: 100%;
display: flex;
justify-content: space-between;
}
.lib-overlay .overlay-content .column .form-text-fields {
display: flex;
flex-direction: column;
}
.lib-overlay .overlay-content .column .form-half-field {
width: 48%;
display: inline-block;
}
.lib-overlay .overlay-content .column .form-field-remove {
padding: 29px 0 0 5px;
box-sizing: border-box;
display: inline-block;
}
.lib-overlay .overlay-content .column .form-radio-option {
display: flex;
position: relative;
}
.lib-overlay .overlay-content .column .form-radio-option input {
width: 16px;
height: 16px;
margin: 0 6px 0 0;
opacity: 0;
}
.lib-overlay .overlay-content .column .form-radio-option .custom-radio {
width: 16px;
height: 16px;
background-color: var(--background-1);
border: 1px solid var(--font-offset-color);
border-radius: 3px;
display: block;
position: absolute;
top: calc(50% - 10px);
left: 0;
}
.lib-overlay .overlay-content .column .form-radio-option .custom-radio:before {
content: "";
width: 8px;
height: 8px;
background-color: var(--background-1);
border-radius: 3px;
opacity: 0.8;
display: block;
position: absolute;
top: calc(50% - 4px);
left: calc(50% - 4px);
}
.lib-overlay .overlay-content .column .form-radio-option input:checked ~ .custom-radio {
background-color: #2196F3;
}
.lib-overlay .overlay-content .column.sign-in {
width: 100%;
max-width: 361px;
padding: 30px;
box-sizing: border-box;
background-color: var(--background-1);
border-top: 5px solid #2489AF;
display: flex;
flex-direction: column;
}
.lib-overlay .overlay-content .column.sign-in.alt {
padding: 13px;
border-top: 5px solid #2489AF;
}
.lib-overlay .overlay-content .column.sign-in.hidden {
display: none;
}
.lib-overlay .overlay-content .column.sign-in .sign-in-content {
padding: 18px 20px;
box-sizing: border-box;
}
.lib-overlay .overlay-content .column.sign-in h4 {
margin: 0 0 15px 0;
}
.lib-overlay .overlay-content .column.sign-in a.button-like, .lib-overlay .overlay-content .column.sign-in button {
margin: 15px 0 12px 0;
}
.lib-overlay .overlay-content .column.sign-in a.button-like.social {
margin: 0;
}
.lib-overlay .overlay-content .column.form.center {
max-width: 417px;
margin: 0 auto;
align-items: center;
}
.lib-overlay .overlay-content .column.form.center form {
width: 100%;
}
.lib-overlay .overlay-content .column.form.center form {
width: 100%;
}
.lib-overlay .overlay-content .column.sign-in.center {
max-width: 417px;
/* margin: 22px 0 0 0; */
margin: 22px auto 0 auto;
padding: 16px 21px;
}
.lib-overlay .overlay-content .column.center {
margin: 22px 0 0 0;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.lib-overlay ul li {
font: var(--paragraph-font);
}
.lib-overlay .disclaimer {
margin: 0 0 5px 0;
color: #707070;
font: var(--paragraph-font);
display: block;
}
/* edits for the bucket version of the lib-overlay */
.lib-overlay.bucket-overlay .overlay-content {
max-height: 300px;
padding: 40px 30px;
background-color: var(--body-offset-bg-color);
border: 1px solid var(--brand-border-color);
border-radius: 40px;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
font: inherit;
}
.lib-overlay.bucket-overlay .overlay-bkgd {
background-color: var(--body-offset-bg-color);
}
.lib-overlay.bucket-overlay a.close-icon:before {
display: none;
}

/*---------------------------------- Body > Page Element(s) -----------------------------------*/
/* -- Page Element: Accordion; has been reworked for this theme's layout, opting to use the more semantic html element `details`  -- */
.acc-container {
    margin-top: 50px;
}
.acc-container details {
    margin-bottom: 25px;
}
.acc-container details summary {
    position: relative;
    /* padding: 10px 20px; */
    padding: 10px 67px 10px 20px;
    background-color: var(--select-bg-color);
    border: 1px solid var(--theme-default-color);
    font: var(--font-acc-container);
    list-style: none;
    cursor: pointer;
}
.acc-container details summary:before {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    right: 20px;
    top: 10px;
    background-image: url('data:image/svg+xml,<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Pages" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Group-21" stroke="%23668D4E"><rect id="Rectangle" transform="translate(14, 14) rotate(90) translate(-14, -14)" x="0.5" y="0.5" width="27" height="27" rx="13.5"></rect><polyline id="Path-8" stroke-linecap="round" transform="translate(14, 14) rotate(90) translate(-14, -14)" points="12.1287617 10.2575234 15.8712383 14 12.1287617 17.7424766"></polyline></g></g></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: transform .5s;
}
.acc-container details[open] summary:before {
    transform: rotate(180deg);
}
.acc-container details .details-content {
    padding: 10px 20px 20px 20px;
    background-color: var(--body-bg-color);
    border: 1px solid var(--theme-default-color);
    border-top: unset;
}
/* -- Page Element: Alternating Image with Text; ... -- */
.alternate-image-text {
    margin-top: 75px;
}
.alternating-image-plus-text-block {
    gap: 50px;
    margin-top: 40px;
}
.alternating-image-plus-text-block > div, .alternating-image-plus-text-block.right-alignment > div {
    margin: 0;
}
.alternating-image-plus-text-block > div, .alternating-image-plus-text-block > img {
    width: 50%;
}
/* -- Page Element: wysiwyg across; ...  -- */
.wysiwygs-across {
    width: 100%;
    margin: 75px 0 60px 0;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.wysiwygs-across h2 {
    margin: 0 0 40px 0;
}
.wysiwygs-across .wysiwyg h3 {
    margin-top: 0;
    font: 400 20px/24px 'Libre Baskerville'
}
.wysiwygs-across .wysiwygs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.wysiwygs-across .wysiwygs .wysiwyg {
    flex: 0 1 auto;
    position: relative;
    overflow: hidden;
}
/* "call-to-action" variant edits (Page Element: wysiwyg across) */
.wysiwygs-across.call-to-action {
    margin: 30px 0 40px 0;
}
.wysiwygs-across.call-to-action .wysiwygs {
    padding: 30px 30px;
    background-color: var(--body-bg-color);
    border: 1px solid rgba(26,70,76,.27);
    border-radius: 40px;
}
.wysiwygs-across.call-to-action .wysiwygs .wysiwyg {
    flex: 1 1 0px;
}
.wysiwygs-across.call-to-action .wysiwygs .wysiwyg:not(:last-child) {
    padding-right: 5px;
    border: unset;
}
.wysiwygs-across.call-to-action h3 {
    margin-top: 0;
    font: 500 22px/24px 'DM Sans';
}
.wysiwygs-across.call-to-action .wysiwygs .divider {
    width: 1px;
    background-color: var(--hr-color);
}
.wysiwygs-across.call-to-action .wysiwygs .divider:last-child {
    display: none;
}
/* unique colmun sizes */
.wysiwygs-across .wysiwygs.column-1-across {
    grid-template-columns: repeat(1, 1fr);
}
.wysiwygs-across .wysiwygs.column-2-across {
    grid-template-columns: repeat(2, 1fr);
}
.wysiwygs-across .wysiwygs.column-3-across {
    grid-template-columns: repeat(3, 1fr);
}
.wysiwygs-across .wysiwygs.column-4-across {
    grid-template-columns: repeat(4, 1fr);
}
.wysiwygs-across .wysiwygs.column-5-across {
    grid-template-columns: repeat(5, 1fr);
}
.wysiwygs-across .wysiwygs.column-6-across {
    grid-template-columns: repeat(6, 1fr);
}
.wysiwygs-across .wysiwygs.column-7-across {
    grid-template-columns: repeat(7, 1fr);
}
.wysiwygs-across .wysiwygs.column-8-across {
    grid-template-columns: repeat(8, 1fr);
}
.wysiwygs-across .wysiwygs.column-9-across {
    grid-template-columns: repeat(9, 1fr);
}
.wysiwygs-across .wysiwygs.column-10-across {
    grid-template-columns: repeat(10, 1fr);
}
/* -- Page Element: galleries; TODO: ensure these styles have been reviewed after galleries are back and working  -- */
.image-container {
    position: relative;
}
.photo-container {
    float: left;
    position: relative;
    overflow: hidden;
}
.image-thumb {
    position: relative;
    background-color: #eee;
}
.gallery-wrapper {
position: relative;
margin-top: 100px;
}
.gallery-wrapper .gallery-slider-container {
margin: 20px auto 0px auto;
top: 0px;
left: 0px;
height: 500px;
visibility: visible;
margin-bottom: 15px;
position: relative;
overflow-x: hidden;
overflow-y: visible;
}
.gallery-slider-window {
position: absolute;
left: 0;
height:100%;
transition: transform 1s ease-in-out;
}
.gallery-wrapper .gallery-slide {
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 100%;
position: relative;
cursor: pointer;
z-index: 10;
}
.gallery-wrapper .gallery-arrow {
position: absolute;
top: calc(50% - 20px);
left: 25px;
bottom: 0px;
cursor: pointer;
height: 40px;
padding: 0px 5px;
z-index: 11;
font-size: 40px;
width: 40px;
display: flex;
color: inherit;
align-items: center;
margin: 0px;
border-radius: 0;
/*border: 1px solid var(--tag-border-color);*/
border: 1px solid var(--button-color);
background-color: var(--button-secondary-bg-color);
}
.gallery-wrapper .gallery-arrow.right {
left: unset;
right: 25px;
}
.gallery-wrapper .gallery-arrow:before, button.swiper-slide:before, .gallery-wrapper .thumbnail-arrow:before {
content: unset;
}
.gallery-wrapper .swiper-button-next:after, .gallery-wrapper .swiper-button-prev:after {
font-size: 20px;
/*color: var(--tag-border-color);*/
color: var(--button-color);
font-weight: 100;
}
.gallery-arrow i {
position: relative;
margin-top: -20px;
}
.gallery-nav-left {
left: 0;
}
.gallery-nav-right {
right: 0;
}
.slide_before {
left: -100%;
}
.slide_after {
left: 100%;
}
.slider-preview-line {
height: 130px;
width:	100%;
max-width: 940px;
padding: 15px 60px;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin-bottom: 25px;
display: flex;
}
.gallery-wrapper .gallery-thumbnail {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
opacity: .75;
background-color: unset;
border-radius: 5px;
width: 100px;
height: 100px;
transition: all .25s ease-in-out;
outline: unset;
border: unset;
}
.gallery-thumbnail:hover, .gallery-thumbnail.active {
opacity: 1;
transform: scale(1.15);
}
.gallery-thumb-left {
left: 0;
}
.gallery-thumb-right {
right: 0;
}
.gallery-wrapper .thumbnail-arrow {
position: absolute;
cursor: pointer;
height: 40px;
padding: 0px 5px;
z-index: 8;
font-size: 25px;
display: flex;
justify-content: center;
align-items: center;
margin: 0px;
top: 50%;
bottom: 0px;
width: 40px;
color: inherit;	
background-color: rgb(253, 252, 248, .5);
border-radius: 0;
border: 1px solid var(--tag-border-color);
left: 0;
}
.gallery-wrapper .thumbnail-arrow.right {
left: unset;
right: 0;
}
.thumbnail-arrow i {
position: relative;
margin-top: 0px;
}
.slider-preview-container {
height:100%;
display: flex;
}
.gallery-slider-view-window {
width: 100%;
}
.gallery-grid {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(3, 1fr);

    --cell-size: 350px;
}
.gallery-grid .gallery-grid-image {
    padding-top: 75%;/*4:3 ratio*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-flex;
    cursor: pointer;
}
.slider-caption {
position: absolute;
bottom: 0;
height: auto;
width: 100%;
padding: 5px 10px;
display: block;
}

.gallery-overlay-bg {
    margin: 0;
    width: calc(100vw - 100px);
    height: calc(100vh - 100px);
    background-color: var(--select-bg-color);
    border-left: 10px solid var(--theme-primary-color-2);
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -50%);
}
.gallery-overlay {
    width: 100vw;
    height: 100vh;
    padding: 22px;
    background-color: rgba(0,0,0,.25);
    padding: 50px; /* replaces existing css */
    top: 0px;
    left: 0px;
    z-index: 10000;
    cursor: pointer;
    display: none;
    justify-content: center;
    position: fixed;
}
.gallery-overlay.open {
display: flex;
}
.gallery-overlay figure {
    width: calc(100vw - 100px);
    height: calc(100vh - 100px);
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.gallery-overlay figure figcaption {
background-color: white;
border-radius: 5px;
padding: 5px;
font-size: 20px;
width: 100%;
text-align: center;
margin-top: 10px;
}
.gallery-overlay figure figcaption span {
font-size: 16px;
}
.gallery-overlay img {
display: inline-flex;
vertical-align: middle;
max-width: 100%;
max-height: calc(100% - 50px);
box-sizing: border-box;
}
.gallery-overlay .close-button {
    width: auto;
    height: fit-content;
    margin: 0;
    padding: 0 0 0 14px;
    background-image: url('/content/_theme_images/icon_button_close.svg');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: unset;
    color: var(--font-link-color);
    font: 300 13px/15px 'Sarabun';
    position: relative;
    top: 45px;
    right: 50px;
    z-index: 100000;
}
.gallery-overlay .close-button:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    top: 4px;
    left: 0px;
    background-color: var(--font-link-color);
    clip-path: polygon(9% 0%, 50% 41%, 91% 0%, 100% 9%, 59% 50%, 100% 91%, 91% 100%, 50% 59%, 9% 100%, 0 91%, 41% 50%, 0% 9%);
    transform: unset;
}
.gallery-overlay .close-button i {
display: none;
}
.image-container > .picrow > .photo-container > figure > a > img {
/* margin: 0!important; */
}
.gallery-overlay > .photo-caption > .caption, .gallery-overlay figcaption {
display: block;
font-size: 16px;
}
.gallery-overlay > .photo-caption > .credit {
display: block;
font-size: 16px;
}
.gallery-overlay > .photo-caption {
position: absolute;
padding: 5px;
text-align: left;
}

.source-segment {
    width: 100%;
    margin: 0 auto 100px;
}
.source-segment .booklist-source {
    width: 100%;
    padding: 10px;
    padding-left: 20px;
    background-color: var(--theme-primary-color-1);
    position: relative;
}
.source-segment .booklist-source:before {
    content: "";
    width: 10px;
    height: 100%;
    background-color: var(--theme-secondary-color-1);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.source-segment .booklist-source .source-books {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    row-gap: 5px;
    justify-content: space-between;
}
.source-segment .booklist-source .source-books .book {
    width: calc(33% - 5px);
    aspect-ratio: 0.69 / 1;
}


.tournament-filters {
    width: 100%;
    margin: 0 0 15px 0;
}
.tournament-filters label {
    display: block;
}
.tournament-filters ul {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 8px;
}
.tournament-filters ul li {
    margin: 0;
    padding: 0;
}
.tournament-filters ul li:before {
    display: none;
}
.tournament-list {
    width: 100%;
}
.tournament-list h3, .tournament-list .h3-like {
    margin: 0;
}
.tournament-list .tournament-item {
    width: 100%;
    margin: 0 0 25px 0;
    padding: 25px;
    padding-left: 40px;
    background-color: var(--theme-secondary-color-4);
    opacity: 0;
    transform: translateY(-10px);
    position: absolute;
    pointer-events: none;
    transition: none;
}
.tournament-list .tournament-item:last-of-type {
    margin: 0;
}
.tournament-list .tournament-item:before {
    content: "";
    width: 15px;
    height: 100%;
    background-color: var(--theme-primary-color-4);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.tournament-list .tournament-item.show-item {
    opacity: 1;
    transform: translateY(0);
    position: relative;
    pointer-events: all;
    transition: opacity .3s, transform .3s;
}
.tournament-list .tournament-list-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.tournament-list .tournament-list-item:before {
    top: calc(50% - 6px);
}
.tournament-list .tournament-list-item:after {
    content: "";
    width: calc(100% - 35px);
    height: 2px;
    background: linear-gradient(to right, var(--font-body-color) 50%, rgba(255, 255, 255, 0) 0%) repeat-x bottom;
    background-size: 8px 2px;
    opacity: 0.65;
    display: block;
    position: absolute;
    top: calc(50% - 1px);
    left: 35px;
    z-index: 1;
}
.tournament-list .tournament-list-item .item-date {
    max-width: calc(100% - 300px);
    padding-right: 10px;
    background-color: var(--body-bg-color, #FCFCFC);
    display: block;
    position: relative;
    z-index: 5;
}
.tournament-list .tournament-list-item .item-buttons {
    padding-left: 10px;
    background-color: var(--body-bg-color, #FCFCFC);
    display: block;
    position: relative;
    z-index: 5;
}
.tournament-info {
    width: 100%;
    margin: 32px 0; 
    padding: 40px 37px;
    background-color: var(--theme-secondary-color-4);
}
/* override base styles */
.tournament-info h2, .tournament-info .h2-like {
    margin: 0 0 24px 0;
}
.tournament-info .info-lists {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.tournament-info .info-lists ul {
    width: calc(50% - 21px);
    margin: 0;
    padding: 0;
}
.tournament-info .info-lists ul li {
    margin: 0;
    padding: 15px 0;
    border-bottom: 1px solid var(--theme-default-color);
}
.tournament-info .info-lists ul li:first-of-type {
    padding-top: 0;
}
/*.tournament-info .info-lists ul:last-of-type li:last-of-type {*/
/*    border: none;*/
/*}*/
.tournament-info .info-lists ul li:before {
    display: none;
}
.tournament-datapoint {
    display: inline-block;
}
.tournament-datapoint:after {
    content: ", ";
    margin-left: -3px;
    display: inline-block;
}
.tournament-datapoint:last-of-type:after {
    content: unset;
}


/*---------------------------------- Body > Bucket(s) -----------------------------------*/
/* -- Bucket: Full Bucket Segment; takes up the full width of the body w/ a content + image area horizontally flexed -- */
/*     - has similiar styles as the `.full-segment` element */
.full-bucket-segment {
    width: 100%;
    max-width: 1011px;
    margin: 0 auto 125px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    --preload-cover-bg-color: var(--theme-primary-color-3);
}
.full-bucket-segment:last-of-type {
    margin-bottom: 0;
}
/* override base styles */
.full-bucket-segment h2, .full-bucket-segment .h2-like {
    margin: 0 0 16px 0;
    position: relative;
}
.full-bucket-segment .bucket-content {
    width: 100%;
    max-width: 415px;
    padding-left: 25px;
}
.full-bucket-segment .bucket-content h3:before {
    content: "";
    width: 10px;
    height: 30px;
    background-color: var(--theme-primary-color-3);
    display: block;
    position: absolute;
    top: -1px;
    left: -25px;
}
.full-bucket-segment .bucket-content .social-list {
    margin: 0;
    display: flex;
    column-gap: 9px;
    
}
.full-bucket-segment .bucket-content .social-list li {
    padding: 0;
    text-align: center;
    display: flex;
}
.full-bucket-segment .bucket-content .social-list li:before {
    display: none;
}
.full-bucket-segment .bucket-content .social-list li a {
    opacity: 0.5;
    color: var(--font-body-alt-color);
    font-size: 23px;
    line-height: 23px;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: opacity .3s;
}
.full-bucket-segment .bucket-content .social-list li a:hover {
    opacity: 1;
}
.full-bucket-segment .bucket-content .social-list li a svg {
    width: 20px;
    height: 20px;
}
.full-bucket-segment .bucket-media {
    width: 100%;
    max-width: 445px;
    aspect-ratio: 1/1;
    position: relative;
}
.full-bucket-segment .bucket-media .bucket-media-image {
    width: 100%;
    display: block;
}
.full-bucket-segment .bucket-media .bucket-media-image.default {
    height: 445px;
}
/* "page-body" edits; these styles are for the secondary/tertiary page(s) */
.page-body .full-bucket-segment {
    width: 100%;
    margin: 75px 0 0 0;
    padding: 30px;
    background-color: var(--theme-secondary-color-4);
    border-left: 10px solid var(--theme-primary-color-3);
    align-items: flex-start;
    
    --font-header-2: var(--font-header-3);
}
.page-body .full-bucket-segment .bucket-media {
    max-width: 215px;
    display: none;
}
.page-body .full-bucket-segment.has-media .bucket-media {
    display: block;
}
.page-body .full-bucket-segment .bucket-content {
    width: 100%;
    max-width: none;
    padding-left: 0;
}
.page-body .full-bucket-segment.has-media .bucket-content {
    width: calc(100% - 275px);
}
.page-body .full-bucket-segment .bucket-content h3:before {
    display: none;
}

/* freeform bucket */
.freeform-bucket-segment {
    width: 100%;
    max-width: 1011px;
    margin-top: 40px;
    margin: 0 auto 125px auto;
}
.page-body .freeform-bucket-segment {
    margin-top: 40px;
}

/* -- Bucket: Alert Block; it's our 'overlay' bucket -- */
.alert-block {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    pointer-events: none;
    transition: opacity .25s;
}
.alert-block.active {
    pointer-events: all;
    opacity: 1;
}
.alert-block.hidden {
    display: none;
}
.alert-block .alert-block-bkgd {
    width: 100%;
    height: 100%;
    background-color: var(--theme-secondary-color-3);
    opacity: 0.3;
    display: block;
}
.alert-block .alert-block-content {
    max-width: 720px;
    min-width: 720px;
    padding: 25px 75px 50px 50px;
    background-color: var(--background-1);
    border-left: 10px solid var(--theme-primary-color-2);
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1000;
    transform: translate(-50%, -50%);
}
.alert-block .alert-block-content p {
    margin-bottom: 10px;
    font: var(--font-body);
}
.alert-block .alert-block-content ol {
    margin-bottom: 10px;
    padding: 0 0 0 35px;
}
.alert-block .alert-block-content .close-icon {
    position: absolute;
    top: 25px;
    right: 25px;
    font: 300 13px/15px 'Sarabun';
    text-decoration: none;
    display: flex;
    align-items: baseline;
    gap: 3px;
}
@media only screen and (max-width: 800px) {
    .alert-block .alert-block-content {
        width: calc(100% - 60px);
        min-width: unset;
        max-height: calc(100% - 25px);
        overflow: scroll;
    }
    .alert-block .alert-block-content .close {
        position: fixed;
        top: 21px;
        right: 43px;
    }
}
@media only screen and (max-width: 450px) {
    .alert-block .alert-block-content {
        width: calc(100% - 20px);
        padding: 35px 20px 15px 15px;
        top: 15px;
        left: 10px;
        overflow: scroll;
    }
    .alert-block .alert-block-content .close {
        top: 15px;
        right: 17px;
    }
    .alert-block .alert-block-content p {
        font: var(--paragraph-font);
    }
    .alert-block .alert-block-content ol li {
        font: var(--secondary-button-fonts);
    }
}

.body iframe {
max-width: 100%;
}
.body.no-sidebar{
    width: 100%;   
}
.body p.full-width {
max-width: none;
}
.body img {
border-radius: 5px;
}
.main-content.tertiary .body:not(.no-right-sidebar) {
/* width: calc(100% - 700px); */
/* width: calc(100% - 610px); */
width: calc(100% - 571px);
flex: 1;
}
.main-content.calendar .body, .main-content.search-page .body {
width: 100%;
}
.body bs_editable {
max-width: 587px;
}
.body bs_editable img {
max-width: 100%;
height: auto;
}

.lineage-container {
    width: 100%;
    display: flex;
    column-gap: 30px;
    row-gap: 30px;
    flex-wrap: wrap;
}
/* override base styles */
.lineage-container h4, .lineage-container .h4-like {
    margin: 0;
}
.lineage-container p {
    margin: 5px 0 15px 0;
}
.lineage-container button.secondary, .lineage-container a.button-like.secondary {
    margin: 0;
}
.lineage-container .lineage-item {
    width: calc(33% - 15px);
    max-width: 292px;
}
.lineage-container .lineage-item .item-media {
    width: 100%;
    height: 186px;
    margin: 0 0 15px 0;
    background-repeat: no-repeat;
    display: block;
    position: relative;
}
.lineage-container .lineage-item .item-media:before, .lineage-container .lineage-item .item-media:after {
    content: "";
    height: 100%;
    background-color: var(--theme-primary-color-2);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.lineage-container .lineage-item .item-media:before {
    width: 10px;
}
.lineage-container .lineage-item .item-media:after {
    width: 100%;
    opacity: 1;
    transition: opacity .3s .3s;
    pointer-events: none;
}
.lineage-container .lineage-item .item-media.element-initialized:after {
    opacity: 0;
}

/* TODO: move to global */
.body .styled_rounded {
box-sizing: border-box;
display: inline-block;
position: relative;
z-index: 5;
}
.body .styled_rounded img {
width: 100%;
display: block;
position: relative;
z-index: 10;
}

.bucket {
width: 100%;
margin: 75px 0 0 0;
padding: 30px;
background-color: var(--theme-secondary-color-4);
border-left: 10px solid var(--theme-primary-color-2);

display: flex;
align-items: flex-start;
}
.bucket.has-image {
    gap: 60px;
}
.bucket .h2-like {
margin: 0 0 8px 0;
font-size: 24px;
line-height: 26px;
}
.bucket .subheader {
margin-bottom: 12px;
padding-left: 20px;
font-size: 15px;
line-height: 20px;
display: block;
position: relative;
}
.bucket .subheader:before {
content: "";
width: 12px;
height: 12px;
background-color: var(--tag-border-color);
display: block;
position: absolute;
top: calc(50% - 6px);
left: 0;
}
.bucket p {
margin: 18px 0;
color: var(--font-offset-color);
font-size: 16px;
line-height: 19px;
}
.bucket p.detail {
margin: 0;
display: flex;
column-gap: 10px;
align-items: center;
}
.bucket p.detail .detail-icon {
width: 15px;
height: 15px;
display: block;
}
.bucket.has-image .bucket-content {
    width: auto;
    flex: 1;
}
.bucket .bucket-media {
max-width: 350px;
margin: 0 15px 0 0;
display: none;
}
.bucket.has-image .bucket-media {
    width: 320px;
    height: 216px;
    display: block;
}
/* edits action version for the standard bucket */
.bucket.action p {
margin-top: 0;
}
/* edits home version for the standard bucket */
.main-content.home .bucket.action {
position: relative;
max-width: 1180px;
width: 100%;
margin: auto;
padding: 0 25px;
background-color: transparent;
border: none;
border-radius: initial;
display: flex;
align-items: center;
justify-content: center;

}
.main-content.home .bucket.action .h2-like {
margin: 0 0 12px 0;
font-size: 30px;
line-height: 32px;
position: relative;
z-index: 10;
}
.main-content.home .bucket.action p {
/*max-height: 42px;*/
display: -webkit-box;
-webkit-line-clamp: 8;
-webkit-box-orient: vertical;
position: relative;
z-index: 10;
overflow: hidden;
}
.main-content.home .bucket.action .bucket-media {
width: 100%;
max-width: 700px;
height: auto;
margin: 0;
border: 0.4px solid var(--brand-border-color);
border-radius: 5px;
display: block;
position: relative;
z-index: 5;
}
.main-content.home .bucket.action .bucket-media.default {
min-height: 455px;
}
.main-content.home .bucket.action .bucket-content {
width: 100%;
max-width: 246px;
margin: 0px 0 0 70px;
position: relative;
z-index: 1;
}
/* edits for 'event' version for the upcoming events bucket */
.main-content.home .bucket.event {
width: calc(100% - 30px);
max-width: 1100px;
margin: 30px auto 0 auto;
}
.bucket.event .subheader {
    margin-bottom: 15px;
    padding: 0;
    font: var(--font-utility-navigation);
    letter-spacing: .25px;
    text-transform: uppercase;
}
.bucket.event .h4-like {
    margin: 0 0 10px 0;
    font: 400 18px/22px 'Libre Baskerville';/* TODO: setup as var */
}
.bucket.event p {
    margin: 0 0 25px 0;
    font: 300 16px/22px 'Sarabun';/* TODO: setup as var */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* ride-sidebar */
.right-sidebar .bucket {
width: 100%;
margin: 0 0 21px 0;
flex-direction: column;
}
.right-sidebar .bucket .bucket-content .bucket-heading {
margin: 15px 0 5px 0;
}
.right-sidebar .bucket img {
margin: 0 0 10px 0;
}
.right-sidebar .bucket .bucket-content {
width: 100%;
}
/* home top-right column(.more-events) edits */
.more-events .bucket {
width: 100%;
margin: 0 0 18px 0;
padding: 25px 25px 15px 25px;
box-sizing: border-box;
border: 1px solid var(--secondary-architecture);
background-color: var(--background-1);
display: inline-block;
transition: padding .3s;
position: relative;
}
.more-events .bucket:before {
content: "";
width: 1px;
height: 20px;
background-color: var(--secondary-architecture);
display: block;
position: absolute;
top: -21px;
left: 50%;
z-index: 1;
}
.more-events .bucket img {
margin: 0 0 2px 0;
}
.more-events .bucket .bucket-media {
width: 351px;
/*height: 119px;*/
height: 141px;
margin: 0 0 5px 0;
transition: width .3s, height .3s;
}
.more-events .bucket .bucket-content {
width: 100%;
}
.more-events .bucket .bucket-content .bucket-heading {
margin: 0;
font: var(--secondary-header-font);
font-weight: 400;
letter-spacing: initial;
display: block;
}

.right-sidebar {
width: 100%;
max-width: 250px;
margin-right: 50px;
}
.right-sidebar .placeholder-item {
width: 100%;
height: 250px;
display: block;
}
.sidebar-item {
width: 100%;
box-sizing: border-box;
border-top: 1px solid var(--secondary-item);
margin-bottom: 50px;
}
.sidebar-item .h3-like {
margin: 20px 0 0 0;
font: var(--secondary-header-font);
text-transform: var(--secondary-header-font-variant);
}
.sidebar-item:last-of-type {
    margin: 0;
}
.sidebar-item .post {
width: 100%;
margin: 25px 0;
}
.sidebar-item .post:last-of-type {
margin-bottom: 25px;
}
.sidebar-item .post:last-of-type {
border-bottom: none;
}
.sidebar-item .post .heading, .sidebar-item .heading {
font: var(--small-header-font);
margin: 5px 0 5px 0;
color: var(--power-color-3);
display: block;
}
.sidebar-item .post .date {
font: var(--small-header-font);
font-size: 14px;
margin: 0;
}
.upcoming-event-image {
    height: 120px;
    width: 100%;
    background-color: var(--power-color-1);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.upcoming-event-image.photo {
    background-color: var(--body-bg-color);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.sidebar-item .post p {
margin: 5px 0 8px 0;
font: var(--paragraph-font);
}
.my-events-bucket .my-events {
    padding-top: 15px;
}

/* the table element (TODO: move to base styles) */
table {
    width: calc(100% + 45px);
    margin: 30px 0 40px 0;
    padding-right: 45px;
    border: unset;
    border-spacing: unset;
    display: block;
    overflow: auto;
}
table caption {
    margin-bottom: 10px;
}
table thead {
    border: unset;
}
table thead tr th {
    padding: 10px 13px;
    background-color: var(--theme-secondary-color-4);
    border: unset;
    border-top: 1px solid var(--theme-default-color);
    border-left: 1px solid var(--theme-default-color);
    font-weight: 600;
    text-align: left;
}
table thead tr th:last-child {
    border-right: 1px solid var(--theme-default-color);
}
table td {
    padding: 10px 13px;
    background-color: var(--select-bg-color);
    border: unset;
    border-top: 1px solid var(--theme-default-color);
    border-left: 1px solid var(--theme-default-color);
}
table tr:last-child td {
    border-bottom: 1px solid var(--theme-default-color);
}
table tr td:last-child {
    border-right: 1px solid var(--theme-default-color);
}

/* events embed page element */
.upcoming-events-embed {
width: 100%;
margin: 50px 0;
}
.upcoming-events-embed .day-section {
width: 100%;
margin: 0 0 30px 0;
padding: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
position: relative;
}
.upcoming-events-embed .day-section .section-date {
width: 75px;
height: 75px;
border-radius: 50%;
background-color: var(--body-bg-color);
border: 1px solid var(--brand-border-color);
font: 600 20px / 22px 'DM Sans';
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.upcoming-events-embed .day-section .section-events {
width: calc(100% - 100px);
display: flex;
flex-wrap: wrap;
/*align-items: flex-start;*/
column-gap: 15px;
row-gap: 15px;
}
.upcoming-events-embed .day-section .section-events .event {
width: calc(50% - 15px);
padding: 20px 25px;
background-color: var(--body-bg-color);
border-radius: 40px;
border: 1px solid var(--brand-border-color);
display: block;
position: relative;
}
.upcoming-events-embed .day-section .section-events .event .h3-like {
margin: 0 0 5px 0;
font-size: 20px;
line-height: 22px;
}
.upcoming-events-embed .day-section .section-events .event .event-info {
margin: 5px 0 10px 0;
font: 400 16px / 18px 'DM Sans';
color: var(--font-offset-color);
}
.upcoming-events-embed .day-section .section-events .event .event-info .date:after {
content: " | ";
}
.upcoming-events-embed .day-section .section-events .event .event-info .location {
margin: 5px 0 0 0;
display: flex;
column-gap: 5px;
align-items: center;
}

/* booklists embed page element */
.booklists-embed {
    width: 100%;
    /*margin-top: 40px;*/
    margin: 0px auto 125px;
}
.booklists-embed .embed-top-panel {
width: 100%;
margin: 0 0 25px 0;
padding: 17px 30px;
background-color: var(--body-bg-color);
border: 1px solid var(--brand-border-color);
border-radius: 20px;
}
.booklists-embed .embed-top-panel ul {
margin: 0;
display: flex;
flex-wrap: wrap;
column-gap: 15px;
row-gap: 15px;
}
.booklists-embed .embed-top-panel ul li {
margin: 0;
padding: 0 0 3px 0;
}
.booklists-embed .embed-top-panel ul li:before {
/*display: none;*/
width: 100%;
height: 3px;
background-color: var(--brand-border-color);
border-radius: initial;
opacity: 0;
top: auto;
bottom: 0;
transform: scaleX(0);
transform-origin: 0 50%;
transition: opacity .2s, transform .2s;
}
.booklists-embed .embed-top-panel ul li:hover:before, .booklists-embed .embed-top-panel ul li.active:before {
opacity: 1;
transform: scaleX(1);
transition: opacity .3s, transform .3s;
}
.booklists-embed .embed-top-panel ul li a {
    text-decoration: none;
}
.booklists-embed .embed-content {
width: 100%;
position: relative;
}
.booklists-embed .embed-content .embed-item {
opacity: 0;
position: absolute;
top: -100vh;
transform: translateY(-15px);
pointer-events: none;
transition: opacity 0s;
}
.booklists-embed .embed-content .embed-item.active {
opacity: 1;
position: relative;
top: 0;
transform: translateY(0);
pointer-events: all;
transition: opacity .3s, transform .3s;
}
.booklists-embed .book-list .book-list-books .book {
height: 175px;
flex-basis: initial;
aspect-ratio: initial;
}

/* eresource embed page element */
.eresources-embed {
width: 100%;
margin: 50px 0;
}
.eresources-embed .eresource-entities {
width: 100%;
display: flex;
flex-wrap: wrap;
column-gap: 15px;
row-gap: 15px;
}
.eresources-embed .eresource-entities .eresource-item {
/*max-width: 275px;*/
max-width: 215px;
align-items: initial;
}
.eresources-embed .eresource-entities .eresource-item h4 {
margin: 0 0 5px 0;
}
.eresources-embed .eresource-entities .eresource-item p {
font-size: 15px;
line-height: 17px;
}
.eresources-embed .eresource-entities .eresource-item .item-content {
padding: 13px;
}
.eresources-embed .eresource-entities .eresource-item .item-content .eresource-buttons {
gap: 5px;
}

/* blog posts embed page element */
.blog-posts-embed {
width: 100%;
margin: 50px 0;
}
.blog-posts-embed .personal-items {
align-items: initial;
column-gap: 15px;
row-gap: 15px;
}
.blog-posts-embed .personal-items .personal-item {
width: 100%;
/*max-width: 215px;*/
max-width: 440px;
}
.blog-posts-embed .personal-items .personal-item h4 {
margin: 0 0 5px 0;
}
.blog-posts-embed .personal-items .personal-item .item-media {
height: 275px;
}
.blog-posts-embed .personal-items .personal-item .item-media.has-image {
background-size: cover;
}
.blog-posts-embed .personal-items .personal-item .item-content {
padding: 13px;
}
.blog-posts-embed .personal-items .personal-item .item-content p {
font-size: 15px;
line-height: 17px;
}
.blog-posts-embed .personal-items .personal-item .item-content .date {
color: var(--font-offset-color);
font: 400 15px / 17px "DM Sans";
display: flex;
column-gap: 5px;
align-items: center;
}

/* pathfinder styles */
.source-container {
    margin: 50px 0 0 0;
    --source-skeleton-opacity: 1;
}
.source-container.sources-hydrated {
    --source-skeleton-opacity: 0;
}
.source-container .swiper-slide {
margin-right: 35px;
}
.source-container .h3-like:before, .source-container h4:before, .source-container p:before, .source-container .item-media:before, .source-container .date:before, .source-container .source-event .event-info:before, .source-container .personal-item .item-content .booklist-books .book:before, .source-container .personal-item .item-content .item-buttons:before, .source-container .source-event .event-buttons:before, .source-container .eresource-item .item-content .eresource-buttons:before {
content: "";
width: 100%;
height: 100%;
background-color: rgba(211,211,211,1);
opacity: var(--source-skeleton-opacity);
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 15;
pointer-events: none;
transition: opacity .3s;
}
.source-container h3, .source-container h4 {
position: relative;
}
.source-container p {
position: relative;
}
/*.source-container .eresource-item {*/
/*max-width: 300px;*/
/*}*/
.source-container .blog-source {
width: 100%;
/*max-width: 440px;*/
max-width: 370px;
background-color: var(--body-bg-color);
border: 0.5px solid var(--brand-border-color);
border-radius: 40px;
overflow: hidden;
}
.source-container .blog-source h4 {
margin: 0 0 5px 0;
}
.source-container .blog-source p {
color: var(--font-offset-color);
font-size: 15px;
line-height: 17px;
}
.source-container .blog-source a.button-like {
margin: 15px 0 0 0;
}
.source-container .blog-source .item-media {
width: 100%;
display: block;
height: 275px;
position: relative;
}
.source-container .blog-source .item-media.has-image {
background-size: cover;
}
.source-container .blog-source .item-content {
padding: 13px;
}
.source-container .blog-source .item-content .date {
margin: 0 0 8px 0;
color: var(--font-offset-color);
font: 400 15px / 17px "DM Sans";
display: flex;
column-gap: 5px;
align-items: center;
position: relative;
}
.source-container .skeleton {
min-height: 20px;
background-color: #000;
}
.source-container .error-message {
margin: 20px 0;
padding: 5px 25px;
background-color: var(--body-offset-bg-color);
border-radius: 15px;
display: inline-block;
text-align: center;
}
.source-container .error-message.warning {
background-color: rgba(141,99,165,0.25);
border: 1px solid #8D63A5;
font-weight: 600;
}
.source-container .source-event {
width: 100%;
padding: 20px 25px;
background-color: var(--body-bg-color);
border-radius: 40px;
border: 1px solid var(--brand-border-color);
display: flex;
column-gap: 0.5em;
position: relative;
}
.source-container .source-event .event-date {
width: 75px;
height: 75px;
border-radius: 50%;
background-color: var(--body-bg-color);
border: 1px solid var(--brand-border-color);
font: 600 20px / 22px 'DM Sans';
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.source-container .source-event .event-content {
width: calc(100% - (75px + 0.5em));
}
.source-container .source-event .h3-like {
margin: 0 0 5px 0;
font-size: 20px;
line-height: 22px;
position: relative;
}
.source-container .source-event p {}
.source-container .source-event .event-info {
margin: 5px 0 10px 0;
font: 400 16px / 18px 'DM Sans';
color: var(--font-offset-color);
position: relative;
}
.source-container .source-event .event-info .date::after {
content: " | ";
}
.source-container .source-event .event-buttons {
position: relative;
}

.upcoming-events-embed .section-events .event-buttons a:nth-child(2) {
    display: none;
}

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

/* masonry test */
.masonry-wrapper {
position: relative;
transition: opacity .25s ease-in-out;
opacity: 0;
display: none;
}
.masonry-wrapper.obscure {
opacity: 0;
}
.masonry-wrapper.loaded {
opacity: 1;
}
.masonry {
position: relative;
display: grid;
}
.masonry-item {
position: relative;
display: block;
width: 33.3333333333%;
opacity: 1;
transition: opacity .25s ease-in-out;
}
.masonry-item:hover {
opacity: .75;
}
.masonry-item img {
display: flex;
max-width: 100%;
max-height: 100%;
width: 100%;
}

.gallery-loader {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;	
margin-top: 10px;		
}
.gallery-loader div {
    margin-top: 17px;	
}
@keyframes l {
    from {
        transform: rotate(0deg);
    } to {
        transform: rotate(360deg);
    }
}

/* search page */
.search-page-search .search-page-form .top-search {
    width: calc(100% - 200px);
    max-width: 354px;
    margin: 0;
    padding: 4px 5px;
    box-sizing: border-box;
    background-color: var(--background-2);
    border: 1px solid #979797;
    border-radius: 4px;
    color: #00000070;
    font: var(--paragraph-font);
}
.search-page-search .search-page-form .search {
    border: none;
    margin: 0;
    padding: 5px 18px;
    box-sizing: border-box;
    border-radius: 20px;
    background-color: var(--power-color-1);
    color: var(--power-color-1-foreground);
    font: var(--small-header-font);
    font-weight: 400;
    text-decoration: none;
}
.search-page-search .search-page-form .search-results-count {
    font: var(--paragraph-font);
}

.alternating-image-plus-text-block {
    display: flex;
    flex-flow: row-reverse;
    margin-top: 60px;
}
.alternating-image-plus-text-block:first-of-type {
    margin-top: 30px;
}
.alternating-image-plus-text-block.left-alignment {
    flex-flow: row;
}
.alternating-image-plus-text-block>div {
    /*width: 50%;*/
    width: 55%;
    margin-left: 40px;
    align-self: center;
}
.alternating-image-plus-text-block>img {
    /*width: 50%;*/
    width: 45%;
    align-self: center;
}
.alternating-image-plus-text-block.right-alignment>div {
    margin-right: 40px;
    margin-left: 0px;
}
.alternating-image-plus-text-block>div h3 {
    margin-top: 0;
}
@media screen and (max-width: 39.9375em) {
    .alternating-image-plus-text-block {
        display: block;
    }
    .alternating-image-plus-text-block>img {
        width: 100%;
    }
    .alternating-image-plus-text-block>div {
        width: 100%;
        margin: 15px 0 0 0;
    }
}

/*======================================================================================================
    FOOTER STYLES - desktop TODO: move styles to global
======================================================================================================*/
/*/// footer variables TODO:move these to be with the rest ///*/
html {
    --footer-logo: url('/content/_site_images/site_logo-footer.png');
    --footer-hours-list-min-cell-size: 40px;
    --footer-hours-list-max-cell-size: 80px;
}
footer {
    width: 100%;
    max-width: var(--overflow-segment-maximum-width);
    margin: 0 auto;
    margin-top: -40px;
    position: relative;
    z-index: 25;
    
    /* overwrite `base` variables */    
    --font-header-5: normal 400 14px / 18px "Libre Baskerville", serif;
    --font-header-color: #fff;
    --font-body-color: #fff;
    --font-body: normal 400 14px/19px "Sarabun", sans-serif;
    --font-link: normal 400 15px/19px "Sarabun", sans-serif;
    --font-link-color: #EDC531;
    --wedge-height: 11px;
    --wedge-margin: 40px 0 46px 0;
    --wedge-color: #80838A;
}
/* overwrite `base` styles */
footer h4, footer .h4-like {
    margin: 0 0 8px 0;
}
footer h5, footer .h5-like {
    margin: 0;
    opacity: 0.9;
}
footer p {
    margin: 0;
}
footer a {
    transition: opacity .3s;
}
footer button.prompt, footer a.button-like.prompt {
    margin: 0 0 0 15px;
}
footer ul {
    margin: 0;
    padding: 0;
}
footer ul li ul {
    margin: 0;
    padding: 0;
}
footer ul li {
    margin: 0;
    padding: 0;
}
footer ul li:before {
    display: none;
}
footer .footer-wrapper {
    width: 100%;
    display: flex;
}
footer .footer-details {
    width: 100%;
    max-width: 357px;
    padding: 30px 45px;
    background-color: var(--theme-secondary-color-2);
    display: flex;
    flex-direction: column;
    row-gap: 45px;
    align-items: flex-start;
}
footer .footer-details .site-logo {
    width: 100%;
    display: block;
}
footer .footer-details .site-logo img {
    content: var(--footer-logo);
    max-width: 100%;
}
footer .footer-details .address p {
    opacity: 0.74;
}
footer .footer-details .address .direction-options {
    width: 100%;
    margin: 11px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 18px;
    row-gap: 8px;
}
footer .footer-details .address .direction-options a {
    opacity: 0.85;
}
footer .footer-details .address .direction-options a:hover {
    opacity: 1;
}
footer .footer-details .hours {}
footer .footer-details .hours .hours-list {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
footer .footer-details .hours .hours-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
}
footer .footer-details .hours .hours-list li span {
    display: block;
}
footer .footer-details .hours .hours-list li .filler, footer .footer-details .hours .hours-list li .day {
    width: var(--footer-hours-list-min-cell-size);
}
footer .footer-details .hours .hours-list li .heading {
    width: var(--footer-hours-list-max-cell-size);
}
footer .footer-details .hours .hours-list li .hour {
    width: var(--footer-hours-list-max-cell-size);
    opacity: 0.6;
}
footer .footer-details .hours .hours-list li .disclaimer {
    width: 100%;
    padding-left: calc(30px + var(--footer-hours-list-min-cell-size));
    opacity: 0.6;
}
footer .footer-details .social-list {
    margin: 0;
    display: flex;
    column-gap: 9px;
}
footer .footer-details .social-list li {
    text-align: center;
    display: flex;
}
footer .footer-details .social-list li a {
    opacity: 0.5;
    color: var(--font-body-color);
    font-size: 23px;
    line-height: 23px;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: opacity .3s;
}
footer .footer-details .social-list li a[href*="//"]:not(.skip-offsite):not([href*="http://milibrary.org/"]):not([href*="https:encore.milibrary.org"]):after {
    display: none;
}
footer .footer-details .social-list li a:hover {
    opacity: 1;
}
footer .footer-details .social-list li a svg {
    width: 20px;
    height: 20px;
}
footer .footer-sitemap {
    width: calc(100% - 357px);
    margin-top: 35px;
    padding: 49px 50px 41px;
    background-color: var(--theme-secondary-color-3);
    
    /* overwrite `base` variables */    
    --font-link: normal 500 15px/19px "Sarabun", sans-serif;
}
/* overwrite `base` styles */
footer .footer-sitemap h5, footer .footer-sitemap .h5-like {
    opacity: 1;
}
footer .footer-sitemap a {
    color: var(--font-body-color);
    text-decoration: none;
}
footer .footer-sitemap a:after {
    background-color: var(--font-body-color);
}
footer .footer-sitemap nav {
    width: 100%;
}
footer .footer-sitemap nav ul.nav-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: 45px;
    row-gap: 40px;
}
footer .footer-sitemap nav ul.nav-list li {
    width: 100%;
    max-width: 172px;
}
footer .footer-sitemap nav ul.nav-list li a {
    opacity: 0.8;
}
footer .footer-sitemap nav ul.nav-list li a:hover {
    opacity: 1;
}
footer .footer-sitemap nav ul.nav-list li .link-text {
    opacity: 0.7;
    font: var(--font-link);
}
footer .footer-sitemap nav ul.nav-list li .list-dropdown {
    width: 100%;
    margin-top: 7px;
}
footer .footer-sitemap nav ul.nav-list li .list-dropdown ul {
    display: flex;
    flex-direction: column;
    row-gap: 3px;
}
footer .footer-sitemap nav ul.nav-list li .list-dropdown ul li a {
    opacity: 0.6;
    font: var(--font-body);
}
footer .footer-sitemap nav ul.nav-list li .list-dropdown ul li a:hover {
    opacity: 1;
}
footer .footer-sitemap nav.footer-credits {
    margin-top: 50px;
    --font-link: normal 400 12px/16px "Sarabun", sans-serif
}
footer .footer-sitemap nav.footer-credits ul.nav-list {
    flex-wrap: initial;
    column-gap: initial;
    row-gap: initial;
    justify-content: space-between;
}
footer .footer-sitemap nav.footer-credits ul.nav-list li {
    width: auto;
    max-width: none;
}
footer .footer-sitemap nav.footer-credits ul.nav-list li:last-of-type {/* needed for "Site by Byte" list-item */
    display: flex;
    align-items: center;
    column-gap: 3px;
}

/*======================================================================================================
    MEDIA QUERIES
======================================================================================================*/
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 2x screens \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/* these are styles for mainly mac users (allows pixel amounts to go as low as 0.5px)*/
/*@media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {}*/

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ @1440px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media only screen and (max-width: 1440px) {
    header .header-panels {
        left: 0;
    }
    .fixed-prompt {
        left: 0;
    }
}

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ @1280px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media only screen and (max-width: 1280px) {
    /*------------------ Global - styles | @1280 ------------------*/
    html {
        --site-logo-container-width: 380px;
        --site-logo-height: auto;
        
        --font-main-navigation: normal 700 13px/14px "Libre Baskerville", serif
    }
    /*------------------ Header - styles | @1280 ------------------*/
    
    header .site-logo {
        padding: 28px 28px 0 28px;
    }
    header .site-navigations {
        width: calc(100% - 380px);
    }
    header .main-navigation {
        padding-right: 15px;
    }
    header .main-navigation ul.nav-list li a {
        padding: 12px 6px;
        padding-left: 11px;
    }
    header .main-navigation ul.nav-list .list-dropdown {
        width: calc(100% - 30px);
        left: 15px;
    }
    header .main-navigation ul.nav-list li.search-option {
        height: 37px;
    }
    header .utility-navigation {
        padding-right: 15px;
    }
    .top-search-input {
        width: calc(100% - 30px);
    }
    .top-search-input.show-search {
        left: 15px;
    }
    .left-sidebar {
        padding-left: 35px;
    }
    
    .overflow-segment.banner {
        /* override base variables */
        --overflow-segment-media-max-width: calc(100% - 400px);
    }
}

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ @1140px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media only screen and (max-width: 1140px) {
    /*------------------ Global - styles | @1140 ------------------*/
    html {
        --site-logo-container-width: 315px;
        
        --font-main-navigation: normal 700 12px/13px "Libre Baskerville", serif;
        --font-utility-navigation-dropdown: normal 300 12px/13px "Sarabun", sans-serif;
    }
    /*------------------ Header - styles | @1140 ------------------*/
    header .site-navigations {
        width: calc(100% - var(--site-logo-container-width));
    }
    header .main-navigation {
        padding-right: 10px;
    }
    header .main-navigation ul.nav-list .list-dropdown {
        width: calc(100% - 20px);
        left: 10px;
    }
    header .main-navigation ul.nav-list li.search-option {
        height: 37px;
    }
    header .utility-navigation {
        padding-right: 10px;
    }
    header .utility-navigation ul.panel-options {
        display: none;
    }
    .top-search-input {
        width: calc(100% - 20px);
    }
    .top-search-input.show-search {
        left: 10px;
    }
    
    /*------------------ Body - styles | @1140 ------------------*/
    .overflow-segment.banner {
        /* override base variables */
        --overflow-segment-media-ratio: 1.76 / 1;
    }
    
    .root-pillars-segment .content-pillar .pillar-item {
        width: calc(50% - 65px);
    }
    .root-pillars-segment .content-pillar .pillar-item .item-media {
        width: 100%;
        height: auto;
        aspect-ratio: 1.02 / 1;
    }
    .root-pillars-segment .content-pillar .pillar-item:nth-of-type(even) .item-media {
        margin-left: auto;
    }
    .root-pillars-segment .content-pillar .pillar-item .item-details {
        margin: 0;
    }
    .root-pillars-segment .content-pillar .pillar-item:nth-of-type(even) .item-details {
        margin-left: auto;
    }
    
    .staff-list .staff-item {
        width: calc(33% - 21px);
    }
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ @1023px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media only screen and (max-width: 1023px) {
    /*------------------ Global - styles | @1023 ------------------*/
    html {
        --site-logo-height: 57px;
    }
    .desktop {
        display: none;
    }
    .tablet {
        display: block;
    }
    .default {
        background-size: 45px;
    }

    .wysiwygs-across.call-to-action h3 {
        font: 500 20px/22px 'DM Sans';
    }
    .wysiwygs-across.call-to-action .wysiwygs {
        padding: 30px 20px;
    }
    /*------------------ Header - styles | @1023 ------------------*/
    header {
        /*padding: 15px;*/
        background-color: transparent;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 35;
        transition: background-color .3s;
    }
    /*
    body.page-scrolled header {
        background-color: var(--blob-bg-color);
    }
    header.show-mobile-menu {
        background-color: var(--blob-bg-color);
    }
    */
    header .header-panels .panel {
        padding: 22px 15px;
    }
    header .header-panels .panel .access-options {
        column-gap: 25px;
    }
    header .header-panels .notice-hour .branch-item .change-week {
        opacity: .25;
        max-width: 300px;
        
    }
    header .header-panels .notice-hour .branch-item .change-week * {
        flex: unset;
    }
    header .header-wrapper {
        max-height: 68px;
        padding-top: 14px;
        align-items: center;
        flex-wrap: wrap;
        /*overflow-x: hidden;*/
        /*overflow-y: scroll;*/
        
    }
    header.show-mobile-menu .header-wrapper {
        max-height: initial;
        /*overflow-y: scroll;*/
    }
    header .header-wrapper:before, header .header-wrapper:after {
        content: "";
        width: 100%;
        opacity: 0;
        display: block;
        position: absolute;
        left: 0;
    }
    header .header-wrapper:before {
        height: 25px;
        background-color: var(--theme-secondary-color-4);
        transform: none;
        top: calc(100% - 25px);
        z-index: 10;
        transition: height .2s, opacity .2s;
    }
    body.page-scrolled header .header-wrapper:before {
        opacity: 1;
        transition: height .3s, opacity .3s;
    }
    body header.show-mobile-menu .header-wrapper:before {
        height: 100vh;
        opacity: 1;
        transition: height .3s, opacity .3s;
    }
    header .header-wrapper:after {
        height: 10px;
        box-shadow: 0 0 5px rgba(0,0,0,0.25);
        top: calc(100% - 10px);
        z-index: 5;
        transition: opacity .2s;
    }
    body.page-scrolled header .header-wrapper:after {
        opacity: 1;
        transition: opacity .2s .2s;
    }
    body header.show-mobile-menu .header-wrapper:after {
        opacity: 0;
        transition: opacity .2s;
    }
    header .site-logo {
        margin: 0;
        padding: 10px 15px 0;
        position: relative;
        z-index: 15;
    }
    header .site-logo img {
        width: auto;
    }
    header .site-navigations {
        width: calc(100% + 30px);
        height: calc(100vh - 77px);
        max-height: calc(100vh - 60px);
        padding: 0 0 30px 0;
        background-color: var(--blob-bg-color);
        opacity: 0;
        align-items: flex-start;
        position: absolute;
        top: 100%;
        left: -15px;
        z-index: 15;
        overflow-x: hidden;
        overflow-y: scroll;
        transform: translateY(-15px);
        pointer-events: none;
        transition: opacity .3s, transform .3s;
    }
    body.resizing header .site-navigations {
        transition: none;
    }
    header.show-mobile-menu .site-navigations {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
        transition: opacity .3s, transform .3s;
    }
    header ul.nav-list li {
        
    }
    header ul.nav-list li a.list-toggle {
        width: 25px;
        height: 23px;
        display: flex;
        align-items: center;
        justify-content: center;
        /*background-color: rgba(255,0,0,0.5);*/
    }
    header ul.nav-list li .list-dropdown ul li {
        opacity: 1;
    }
    header .header-panels .panel .access-options .access-section {
        flex-direction: column;
        row-gap: 5px;
    }
    header .header-panels .panel .access-options .access-section .option {
        margin: 0;
    }
    header .header-panels .panel .access-options .access-section button.option {
        display: none;
    }
    /*--------- Header > Utility Navigation - styles | @1023 ---------*/
    header .utility-navigation {
        padding: 7px 15px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        order: 3;
    }
    header .utility-navigation ul.panel-options {
        column-gap: 15px;
    }
    header .utility-navigation ul.panel-options li {
        padding: 0;
    }
    header .utility-navigation ul.panel-options li:before {
        top: -25px;
    }
    header .utility-navigation ul.panel-options li.mobile-menu:before {
        display: none;
    }
    header .utility-navigation ul.nav-list {
        width: 100%;
        padding: 0;
        flex-direction: column;
        column-gap: initial;
    }
    header .utility-navigation ul.nav-list li {
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    header .utility-navigation ul.nav-list li a {
        padding: 10px 15px;
    }
    header .utility-navigation ul.nav-list li .list-dropdown ul li a {
        padding: 5px 10px;
    }
    header .utility-navigation ul.nav-list li.dropdown-included:after {
        display: none;
    }
    header .utility-navigation ul.nav-list li.dropdown-included .link-backdrop {
        display: none;
    }
    header .utility-navigation ul.nav-list li a {
        padding: 5px 15px;
    }
    header .utility-navigation ul.nav-list li a:before {
        display: none;
    }
    header .utility-navigation ul.nav-list li a.list-toggle {
        padding: 0;
        display: flex;
    }
    header .utility-navigation ul.nav-list li .list-dropdown, header .utility-navigation ul.nav-list li:hover .list-dropdown, header .utility-navigation ul.nav-list li:focus-within .list-dropdown {
        width: calc(100% - 30px);
        margin-top: 0;
        padding: 0;
        opacity: 0;
        border: none;
        border-left: 5px solid var(--theme-primary-color-3);
        box-shadow: none;
        position: absolute;
        top: -9999px;
        left: auto;
        transform: none;
        transition: none;
        pointer-events: none;
    }
    header .utility-navigation ul.nav-list li.show-dropdown .list-dropdown {
        margin: 10px auto 12px;
        opacity: 1;
        position: relative;
        top: auto;
        transition: margin .3s, opacity .3s;
        pointer-events: all;
    }
    header .utility-navigation ul.nav-list li .list-dropdown ul li a {
        padding: 3px 10px;
    }
    header .utility-navigation ul.nav-social-list {
        margin: 24px 0 0 0;
        padding-left: 15px;
    }
    header .utility-navigation a.button-like.prompt {
        margin: 28px 0 0 30px;
    }
    /*--------- Header > Main Navigation - styles | @1023 ---------*/
    header .main-navigation {
        width: 100%;
        padding: 0 15px 9px;
        order: 2;
        right: auto;
    }
    header .main-navigation ul.nav-list {
        padding: 0;
        flex-direction: column;
        align-items: flex-start;
    }
    header .main-navigation ul.nav-list li {
        width: 100%;
        padding: 0;
        /*border-bottom: 0.4px var(--brand-border-color);*/
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;
    }
    header .main-navigation ul.nav-list li.search-option {
        display: none;
    }
    header .main-navigation ul.nav-list li.active .link-name:after {
        display: none;
    }
    header .main-navigation ul.nav-list li a {
        padding: 10px 15px;
    }
    header .main-navigation ul.nav-list li .link-backdrop {
        display: none;
    }
    header .main-navigation ul.nav-list li a.list-toggle {
        padding: 0;
        display: flex;
    }
    header .main-navigation ul.nav-list .list-dropdown, header .main-navigation ul.nav-list .list-dropdown:hover .list-dropdown, header .main-navigation ul.nav-list li:focus-within .list-dropdown {
        margin-top: 0;
        padding: 10px;
        box-shadow: none;
        opacity: 0;
        flex-direction: column;
        row-gap: 18px;
        position: absolute;
        top: -9999px;
        left: auto;
        pointer-events: none;
        transition: margin 0s, opacity 0s;
    }
    /*header ul.nav-list li.show-dropdown .list-dropdown {*/
    header .main-navigation ul.nav-list li.show-dropdown .list-dropdown {
        margin: 10px auto 14px;
        opacity: 1;
        position: relative;
        top: auto;
        pointer-events: all;
        transform: initial;
        transition: margin .3s, opacity .3s;
    }
    header .main-navigation ul.nav-list li .list-dropdown ul {
        width: 100%;
        column-gap: initial;
        row-gap: 10px;
        justify-content: space-between;
    }
    header .main-navigation ul.nav-list li .list-dropdown ul li, header .main-navigation ul.nav-list li:hover .list-dropdown ul li, header .main-navigation ul.nav-list li:focus-within .list-dropdown ul li {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .3s .4s, transform .3s .4s;
    }
    header .main-navigation ul.nav-list li .list-dropdown ul li {
        width: calc(50% - 5px);
        padding: 0;
    }
    header .main-navigation ul.nav-list li .list-dropdown ul li a {
        padding: 10px;
    }
    header .main-navigation ul.nav-list li .list-dropdown .dropdown-media, header .main-navigation ul.nav-list li:hover .list-dropdown .dropdown-media, header .main-navigation ul.nav-list li:focus-within .list-dropdown .dropdown-media {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .3s .4s, transform .3s .4s;
        display: none;
    }

    .top-search-input {
        width: 100%;
        margin: 0;
        padding: 28px 15px 18px;
        background-color: var(--body-bg-color);
        opacity: 0;
        position: relative;
        top: auto;
        left: auto;
        z-index: 15;
        transform: translateY(-5px);
        transition: opacity .2s, transform .2s;
        order: 1;
        pointer-events: none;
    }
    header.show-mobile-menu .top-search-input {
        opacity: 1;
        /*position: relative;*/
        /*left: auto;*/
        transform: translateY(0);
        transition: opacity .3s, transform .3s;
        pointer-events: all;
    }
    .top-search-input .onsite-search {
        padding: 0;
        background-color: transparent;
        border: none;
        opacity: 1;
        transform: none;
    }
    .top-search-input .onsite-search fieldset {
        opacity: 1;
        transform: none;
    }
    .top-search-input .search-toggle {
        display: none;
    }
    .top-search-input .onsite-search .onsite-search-icon {
        display: none;
    }
    .top-search-input .onsite-search .onsite-search-input, .top-search-input .onsite-search .onsite-search-button {
        opacity: 1;
        transform: none;
        pointer-events: none;
    }
    .top-search-input .onsite-search .onsite-search-input-container .onsite-search-input {
        padding: 0;
        padding-bottom: 5px;
    }
    header.show-mobile-menu .top-search-input .onsite-search .onsite-search-input, header.show-mobile-menu .top-search-input .onsite-search .onsite-search-button {
        pointer-events: all;
    }
    .top-search-input .onsite-search .onsite-search-input {
        max-width: none;
        background-color: var(--body-bg-color);
    }
    .top-search-input .search-results {
        padding: 10px 0 0 0;
    }
    
    header .utility-navigation.mobile-version {
        width: calc(100% - var(--site-logo-container-width));
        padding: 0;
        padding-right: 15px;
        opacity: 1;
        display: flex;
        align-items: flex-end;
        position: relative;
        transform: translateY(-7px);
        order: 0;
        pointer-events: all;
        z-index: 105;
    }
    header .utility-navigation.mobile-version ul.panel-options {
        display: flex;
    }
    header .utility-navigation .mobile-menu .menu {
        min-height: 17px;
        position: relative;
    }
    header .utility-navigation .mobile-menu .menu .line {
        transition: opacity .2s, transform .2s;
    }
    header.show-mobile-menu .utility-navigation .mobile-menu .menu .line {
        margin: 0;
        position: absolute;
        top: 9px;
        transition: opacity 0s, transform .3s;
    }
    header.show-mobile-menu .utility-navigation .mobile-menu .menu .line:first-of-type {
        transform: rotate(45deg);
    }
    header.show-mobile-menu .utility-navigation .mobile-menu .menu .line:nth-of-type(2) {
        transform: rotate(-45deg);
    }
    header.show-mobile-menu .utility-navigation .mobile-menu .menu .line:nth-of-type(3) {
        opacity: 0;
    }

    /*----------------- Body - styles | @1023 -----------------*/
    .main-content {
        padding-top: 68px;
        overflow-x: hidden;
    }
    .main-content.home {/* tomove: home.css */
        overflow: hidden;
    }
    .main-content .page-content {
        /*padding: 18px 0 0 0;*/
        flex-direction: column;
    }
    
    .page-body {
        width: calc(100% - 70px);
    }
    .page-banner {
        margin-bottom: 75px;
        flex-direction: column;
        row-gap: 25px;
    }
    .page-banner h1 {
        text-align: center;
    }
    .page-banner p {
        text-align: center;
    }
    .page-banner .banner-content {
        max-width: none;
    }

    .branch-favorites-section .information {
        width: calc(100% - 30px);
        height: 100vh;
        padding: 0 35px 0 35px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .branch-favorites-section.show-overlay .information {
        padding: 35px 35px 120px 35px;
    }
    .branch-favorites-section .information .close-icon {
        position: fixed;
        right: 60px;
    }
    .branch-favorites-section .information .check-groups {
        flex-direction: column;
    }
    .branch-favorites-section .information .branches {
        width: 100%;
        margin: 0 0 25px 0;
        padding: 0 0 25px 0;
        border: none;
        border-bottom: 1px solid var(--hr-color);
        flex: initial;
    }
    .branch-favorites-section .information .explanation {
        /*width: calc(100% - (30px + 110px));*/
        width: calc(100% - 30px);
        padding: 15px;
        background-color: var(--body-bg-color);
        border: 0.4px solid var(--brand-border-color);
        border-top: none;
        border-radius: 0 0 70px 70px;
        position: fixed;
        bottom: 0;
        left: 15px;
    }
    .branch-favorites-section .information .explanation:before {
        content: "";
        width: 100%;
        height: 25px;
        background-image: var(--personalize-explanation-gradient);
        display: block;
        position: absolute;
        top: -25px;
        left: 0;
        z-index: 1;
        pointer-events: none;
    }
    .branch-favorites-section .information .explanation p, .branch-favorites-section .information .explanation a.button-like {
        position: relative;
        z-index: 5;
    }

    .slider-container {
        width: 100%;
        margin-left: 0;
    }
    .slider-container.booklists {
        margin-left: 0;
    }
    .slider-container .swiper {
        width: 100%;
        margin-left: 0;
    }
    .slider-container.materials .swiper {
        padding: 0 21px;
    }
    .slider-container.booklists .swiper {
        width: calc(100% - 140px);
        margin: 0 auto;
        padding: 0;
    }
    .slider-container.booklists .swiper-button-prev {
        left: 0;
    }
    .slider-container.branches .swiper-button-prev, .slider-container.branches .swiper-button-next {
        height: 50%;
        top: 50%;
        transform: translateY(-50%);
    }

    .full-segment {
        max-width: calc(100% - 30px);
        margin: 0 auto 125px;
        padding: 0;
    }
    
    .events-list .event-item:hover h4, .events-list .event-item:hover .h4-like {
        color: var(--font-header-color);
    }
    .events-list.offset-list .event-item .item-content .options {
        opacity: 1;
        display: block;
    }
    .events-list .event-item .item-clickable-area {
        display: none;
    }

    .upcoming-events .featured-event {
        flex-direction: column;
        align-items: unset;
    }
    .upcoming-events .featured-event .event-content {
        width: 100%;
        max-width: 725px;
        margin: 25px 0 0 0;
    }
    .upcoming-events .featured-event .event-content a.button-like {
        background-color: var(--button-secondary-bg-color);
    }
    .upcoming-events .featured-event .event-content a.button-like:before {
        background-color: var(--button-secondary-bg-color);
    }

    .book-lists.filtered .book-list {
        flex-basis: calc((100% - 40px) / 2);
    }

    .personal-item {
        width: 100%;
        max-width: 311px;
    }
    .personal-item .item-content .booklist-books .book {
        width: 80px;
        height: 137px;
    }

    .blog-posts .post {
        flex-direction: column;
        gap: initial;
        row-gap: 15px;
    }
    .blog-posts .post .post-media {
        order: 0;
    }
    .blog-posts .post:nth-child(2n+1) .post-media {
        order: 0;
    }
    .blog-posts .post .post-content {
        width: 100%;
        order: 1;
    }
    .blog-posts.landing-page .post .post-content {
        /*max-width: 440px;*/
    }
    .blog-posts .post:nth-child(2n+1) .post-content {
        order: 1;
    }
    .blog-posts .post.main .post-media {
        width: auto;
        max-width: none;
        /*height: auto;*/
        margin: 0 0 10px 0;
        position: relative;
        top: auto;
        left: auto;
    }
    .blog-posts .post .post-about {
        max-width: none;
        margin: 0 0 15px 0;
        float: none;
    }
    .blog-post .left-sidebar {
        max-width: 250px;
        order: 0;
    }
    .blog-post .body {
        margin-top: 0;
        width: calc(100% - 275px);
        order: 1;
    }
    .blog-post .related-posts .posts-list {
        flex-wrap: wrap;
        gap: initial;
        column-gap: 15px;
        row-gap: 15px;
    }
    .blog-post .related-posts .posts-list .post {
        max-width: 350px;
    }
    
    .viewer-overlay .overlay-content {
        width: 98%;
        height: 95%;
        margin: 1% auto;
    }
    .viewer-overlay .viewer-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .game-main .chess-interface .chess-board-container .chess-board {
        width: min(350px, 100%);
        height: min(350px, 100%);
        max-width: calc(100% - 2rem);
        max-height: calc(100% - 2rem);
    }
    .game-sidebar {
        max-height: 200px;
        order: -1;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }
    .game-list {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }
    .game-item {
        min-width: 200px;
        flex-shrink: 0;
    }

    .lineage-container .lineage-group {
        flex-direction: column;
        row-gap: 25px;
    }
    .lineage-container .lineage-group .group-media.default {
        height: 250px;
    }
    .lineage-container .lineage-group .group-items {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        column-gap: 15px;
        align-items: flex-start;
    }
    .lineage-container .lineage-group .group-items .item {
        max-width: 316px;
        margin: 0 0 15px 0;
    }

    .bucket {
        flex-direction: column;
        row-gap: 15px;
    }
    .bucket .bucket-media {
        max-width: 100%;
        margin: 0;
    }
    .bucket.has-image .bucket-content {
        width: 100%;
    }
    /* tomove */
    .main-content.home .bucket.action {
        width: calc(100% - 30px);
        margin: 30px 0 0 15px;
        padding: 0;
    }
    .main-content.home .bucket.action .bucket-content {
        max-width: 700px;
        margin: 0;
    }

    .secondary.staff .page-content .body {
        display: flex;
        flex-direction: column;
    }
    .main-content.staff .staff-segment {
        width: calc(100% - 5px);
        padding-bottom: 50px;
    }
    .main-content.staff .staff-questions {
        position: relative;
        top: unset;
        left: unset;
        width: calc(100% - 5px);
        flex-direction: column;
        align-items: center;
        gap: 80px;
        margin-top: 100px;
        /*margin-bottom: -350px;*/
        order: 2;
    }
    .main-content.staff .staff-questions .question {
        height: unset;
        transform: translate(0,0);
    }
    .main-content.staff .staff-fav-books {
        position: relative;
        height: 330px;
        width: auto;
        top: unset;
        right: unset;
        margin: auto;
        order: 1;
    }

    /* - blog posts page - */
    .blog-posts .post .post-media {
        width: 100%;
    }
    /* individual blog post */
    .blog-post .blog-posts .post.main .post-media {
        aspect-ratio: 3/2;
        height: auto;
    }

    /* recommended-reads page */
    .blog-posts.recommended-reads .post .post-media {
        width: 100%;
    }
    .blog-posts.recommended-reads .post .post-media.default {
        width: 50%;
    }
    .blog-posts.recommended-reads .post .post-media .media {
        background-position: left center;
    }
    .blog-posts.recommended-reads .post .post-content {
        width: 100%;
    }
    
    /*----------------- Left Sidebar - styles | @1023 -----------------*/
    .left-sidebar {
        margin-top: 25px;
        order: 1;
    }
    

    footer {}
    footer .footer-wrapper {
        
    }
    footer .footer-hours {
        padding: 35px 30px 12px 30px;
    }
    footer .footer-info {
        max-width: none;
        margin-top: -30px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        position: relative;
        top: auto;
        left: auto;
    }
    footer .footer-nav ul.footer-right-side {
        margin: 0;
    }
} /* end 1023px */

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ @950px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media only screen and (max-width: 950px) {
    .overflow-segment {
        flex-direction: column;
        align-items: center;
    }
    .overflow-segment .media-board {
        max-width: 640px;
    }
    .overflow-segment .content-board {
        width: 100%;
        max-width: 640px;
        padding: 27px 30px;
        padding-left: 45px;
    }
    .overflow-segment .content-board .details {
        max-width: none;
        padding: 0 40px;
    }
    .overflow-segment.element-initialized .content-board {
        transform: none;
    }
    /* @950 - carousel edits */
    .overflow-segment.carousel .swiper .swiper-wrapper .swiper-slide {
        flex-direction: column;
        align-items: center;
    }
    .overflow-segment.carousel .content-board .details {
        max-width: none;
    }
    
    .engagement-list {
        flex-wrap: wrap;
        row-gap: 30px;
    }
    .engagement-list .engagement-item {
        width: calc(50% - 15px);
    }
}

@media only screen and (max-width: 750px) {
    /*------------------ Base - styles | @750 ------------------*/
    html {
        /*// header variables //*/
        --font-header-1: normal 400 26px/30px "Libre Baskerville", serif;
        --font-header-2: normal 400 22px/27px "Libre Baskerville", serif;
        --font-header-3: normal 400 18px/23px "Libre Baskerville", serif;
        --font-header-4: normal 400 16px/21px "Libre Baskerville", serif;
        --font-header-5: normal 400 14px/19px "Libre Baskerville", serif;
        /*// header > assets variables //*/
        /*--font-panels-subheader: normal 400 14px/16px "Libre Baskerville", serif;*/
        /*--font-panels-access-option: normal 400 14px/16px "Sarabun", sans-serif;*/
        /*--font-main-navigation: normal 700 14px/15px "Libre Baskerville", serif;*/
        /*--font-main-navigation-dropdown: normal 400 15px/15px "Sarabun", sans-serif;*/
        /*--font-utility-navigation: normal 300 13px/15px "Sarabun", sans-serif;*/
        /*--font-utility-navigation-dropdown: normal 300 14px/15px "Sarabun", sans-serif;*/
        /*--font-top-search-input: normal 300 18px/20px "Sarabun", sans-serif;*/
        /*--font-subheader: normal 300 14px/16px "Sarabun", sans-serif;*/
        /*// font body variables //*/
        --font-body: normal 300 16px/22px "Sarabun", sans-serif;
        --font-body-intro: normal 300 18px/22px "Sarabun", sans-serif;
        --font-ordered-list-marker: normal 600 16px/22px "Sarabun", sans-serif;
        /*--font-select: normal 400 14px/22px "Sarabun", sans-serif;*/
        /*// button variables //*/
        --font-button: normal 400 14px/16px "Sarabun", sans-serif;
        --font-prompt-button: normal 400 13px/16px "Sarabun", sans-serif;
        /*// wedge variables //*/
        --wedge-height: 22px;
        --wedge-margin: 0 0 30px 0;
        /*// overflow segment //*/
        --font-overflow-segment-perk-header: normal 400 25px/35px "Libre Baskerville", serif;
        --font-overflow-segment-benefit-body: normal 400 15px/17px "Sarabun", sans-serif;
        --font-overflow-segment-donation-heading: normal 400 28px/30px "Baskervville", serif;
        --font-overflow-segment-donation-details: normal 400 15px/18px "Sarabun", sans-serif;
        /*// full segment //*/
        --font-full-segment-filter-item: normal 400 14px/16px "Sarabun", sans-serif;
        --font-full-segment-author: normal 400 13px/14px "Sarabun", sans-serif;
        --font-event-list-month: normal 400 14px/16px "Sarabun", sans-serif;
        --font-event-list-day: normal 400 20px/20px "Libre Baskerville", serif;
        --font-event-list-details: normal 400 16px/18px "Sarabun", sans-serif;
        --font-materials-header: normal 600 14px/15px "Sarabun", sans-serif;
        --font-materials-favorite: normal 400 10px/12px "Sarabun", sans-serif;
        --font-staff-item-info: normal 300 14px/16px "Sarabun", sans-serif;
        --font-staff-discussion-question: normal 600 20px/26px "Sarabun", sans-serif;
        --font-book-item-author: normal 300 14px/18px "Sarabun", sans-serif;
        --font-form-label: 600 16px/22px "Sarabun", sans-serif;
        --font-acc-container: 600 16px/22px 'Sarabun', sans-serif;
        --font-pullquote: 400 15px / 22px 'Libre Baskerville';
        --font-pullquote-author: 500 16px/20px 'Sarabun';
        --font-pullquote-author-title: 400 15px/20px 'DM Sans';
        /*// left sidebar variables //*/
        --font-return-to-link: normal 400 14px/18px "Sarabun", sans-serif;
        --font-context-navigation-heading: normal 400 18px/20px "Baskervville", serif;
        --font-context-navigation-list-item: normal 300 14px/18px "Sarabun", sans-serif;
    }
    
    .desktop, .tablet {
        display: none;
    }
    .mobile {
        display: block;
    }
    
    .pullquote {
        padding: 65px 24px 30px 34px;
    }
    .pullquote:before {
        top: 30px;
        left: 34px;
    }
    
    /*------------------ Body - styles | @750 ------------------*/
    .page-body .full-bucket-segment {
        /*width: calc(100% - 30px);*/
        width: 100%;
        margin: 75px auto 0;
    }
    
    /* "banner" variant variables/styles - for `overflow segment` section */
    .overflow-segment.banner {
        /* override base variables */
        --font-header-1: normal 400 26px/30px "Baskervville", serif;
    }
    
    .branch-information-section .information .event-info .info-top {
        margin: 0 0 6px 0;
    }
    .branch-information-section .information .info-top a.personalize-button {
        margin: 0 11px;
    }
    .branch-information-section .information .event-info .info-top a.button-like {
        margin: 0;
    }
    
    .root-pillars-segment {}
    .root-pillars-segment .content-pillar {
        padding-top: 124px;
        flex-direction: column;
        row-gap: 45px;
    }
    .root-pillars-segment .content-pillar .pillar-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .root-pillars-segment .content-pillar .pillar-item:nth-of-type(2) {
        margin: 0;
    }
    .root-pillars-segment .content-pillar .pillar-item:nth-of-type(odd) {
        margin: 0;
    }
    .root-pillars-segment .content-pillar .pillar-item:nth-of-type(even) {
        margin: 0;
    }
    .root-pillars-segment .content-pillar .pillar-item:nth-of-type(even) .item-media {
        margin: 0;
    }
    .root-pillars-segment .content-pillar .pillar-item:nth-of-type(even) .item-details {
        margin: 0;
    }
    .root-pillars-segment .root-pillar:before {
        height: 100%;
    }
    .root-pillars-segment .root-pillar .pillar-marker {
        opacity: 0.5;
        position: initial;
    }
    .root-pillars-segment .root-pillar .pillar-checkpoint {
        display: none;
    }
    /* @750 no-media edits */
    .root-pillars-segment .content-pillar .pillar-item.no-media:after {
        display: none;
    }
    
    .archives-component {
        flex-direction: column;
        
    }
    .archives-component .featured-archive {
        width: 100%;
        margin: 0 0 25px 0;
    }
    .archives-component .featured-archive .details {
        padding: 22px 28px;
    }
    .archives-component .archives-list {
        width: 100%;
    }
    .archives-component .archives-list .archives-item {
        margin: 0 0 25px 0;
    }
    .archives-component .archives-list .archives-item .item-details {
        padding: 22px 28px;
    }
    
    .staff-list {
        column-gap: initial;
        justify-content: space-between;
    }
    .staff-list .staff-item {
        width: calc(50% - 10px);
    }
    
    .events-list {
        flex-direction: column;
        row-gap: 25px;
    }
    .events-list .event-item {
        width: 100%;
        column-gap: 14px;
    }
    .events-list.offset-list .event-item:first-of-type {
        margin-top: 0;
    }

    .authors-list {
        column-gap: 30px;
    }
    .authors-list .author-item {
        width: calc((100% - 30px) / 2);
    }

    .eresources-section .letters-list li {
        width: calc((100% - 130px) / 13);
    }

    .book-lists .featured-filter {
        flex-direction: column;
        align-items: flex-start;
    }
    .book-lists .featured-filter hr {
        margin-top: 15px;
    }

    .wysiwygs-across .wysiwygs.column-4-across,
    .wysiwygs-across .wysiwygs.column-5-across,
    .wysiwygs-across .wysiwygs.column-6-across,
    .wysiwygs-across .wysiwygs.column-7-across,
    .wysiwygs-across .wysiwygs.column-8-across,
    .wysiwygs-across .wysiwygs.column-9-across,
    .wysiwygs-across .wysiwygs.column-10-across {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery-overlay.open {
        display: block;
    }
    .gallery-overlay-bg {
        height: calc(100vh - 150px);
    }
    .gallery-overlay figure {
        margin: 0;
        width: calc(100vw - 100px);
        height: calc(100vh - 150px);
        background-color: var(--select-bg-color);
        border-left: 10px solid var(--theme-primary-color-2);
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 100;
        transform: translate(-50%, -50%);
        padding: 50px;
    }
    .gallery-overlay .close-button {
        position: absolute;
        top: 95px;
        right: 80px;
    }
    
    .game-main .chess-interface .chess-board-container {
        width: 100%;
    }
    .game-main .chess-interface .game-controls {
        width: 100%;
    }
    .game-main .chess-interface .game-controls .move-list-container {
        width: 100%;
    }
}

@media only screen and (max-width: 750px) {
    .img_right_25, .img_right_50, .img_right_native, .img_left_25, .img_left_50, .img_left_native, .img_full_styled {
        float: none;
        width: auto;
        max-width: 100%;
        margin: 10px 0;
    }
    .img_native_block {
        max-width: 100%;
        margin: 0;
    }
    img {
        max-width: 100%;
    }

    header .header-panels .close-icon {
        right: 15px;
    }
    header .header-panels .panel .alert-messages .swiper-slide {
        padding: 0 30px;
    }
    header .header-panels .panel .access-options {
        flex-direction: column;
        row-gap: 15px;
    }
    header .header-panels .panel .access-options .access-section {
        flex-direction: row;
        column-gap: 15px;
    }
    header .header-panels .panel .access-options .access-section .h3-like {
        margin: 0;
    }
    header .header-panels .panel .access-options .access-section .option .icon {
        display: none;
    }
    header .header-panels .panel .access-options .access-section .option p {
        display: none;
    }
    header .header-panels .panel .access-options .access-section .option.mobile {
        display: inline-block;
    }

    .page-content {
        flex-direction: column;
        /*row-gap: 50px;*/
    }
    .left-sidebar {
        /*margin-top: 50px;*/
        order: 1;
    }
    .left-sidebar .context-navigation {
        margin-top: 50px;
    }
    .return-to-top-segment, .return-to-top-segment.clip-to-bottom {
        position: relative;
        bottom: -80px;
    }
    .return-to-top-segment a.button-like.return-to-top-button {
        opacity: 1;
        pointer-events: all;
    }
    .body {
        width: 100%;
        order: 0;
    }
    
    .overflow-segment.banner .media-banner {
        height: 175px;
    }
    
    .booklist-books .body {
        order: 2;
        width: 100%;
        margin-top: 25px;
    }
    .booklist .books-list .book {
        width: calc((100% - 75px) / 4);
    }
    .blog-tag .body {
        width: 100%;
    }
    .page-content .body:has( .discover-filters.expanded) {
        z-index: 20;
    }


    .page-banner .banner-media {
        width: 95vw;
        height: 95vw;
        min-width: initial;
        min-height: initial;
    }
    table {
        width: 100vw !important;
        max-width: unset;
        margin: 30px 0 40px -35px;
        padding: 0 35px;
        overflow-x: scroll;
    }

    .full-segment {
        max-width: none;
        margin: 0 auto 91px;
    }
    .full-segment .segment-heading-row {
        row-gap: 14px;
    }
    /* @750 pillar-variant edits */
    .full-segment.pillar-variant .segment-heading-row {
        align-items: center;
        justify-content: center;
    }
    .full-segment.pillar-variant .segment-heading-row .h2-like {
        width: 100%;
        margin: 0 0 5px 0;
        text-align: center;
    }
    .full-segment.pillar-variant .segment-heading-row a.button-like {
        margin: 10px auto 0 auto;
    }
    
    .eresources-section .eresource-entities .eresource {
        width: calc(50% - 25px);
        padding: 15px;
    }

    .upcoming-events .featured-event .event-media.default {
        min-height: 300px;
    }
    .upcoming-events .basic-events {
        margin: 30px 0 0 0;
        column-gap: initial;
        row-gap: 15px;
        flex-direction: column;
        align-items: center;
    }
    .upcoming-events .basic-events .event {
        max-width: none;
    }
    .blog-post .body {
        width: 100%;
    }
    .blog-posts .post.main .post-media {
        height: 300px;
    }
    .tertiary.blog-post h1 {
        margin-top: 25px;
    }
    
    .most-recent .book-list:nth-child(n+3) {
        flex-basis: calc((100% - 100px) / 2);
    }
    
    .tournament-list .tournament-list-item {
        margin: 0 0 15px 0;
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .tournament-list .tournament-list-item:last-of-type {
        margin: 0;
    }
    .tournament-list .tournament-list-item:before {
        top: 6px;
    }
    .tournament-list .tournament-list-item:after {
        display: none;
    }
    .tournament-list .tournament-list-item .item-date {
        max-width: none;
        width: 100%;
        padding: 0;
    }
    .tournament-list .tournament-list-item .item-buttons {
        padding: 0;
    }
    
    .tournament-info {}
    .tournament-info .info-lists {
        flex-direction: column;
    }
    .tournament-info .info-lists ul {
        width: 100%;
    }
    .tournament-info .info-lists ul li:first-of-type {
        padding: 15px 0;
    }
    .tournament-info .info-lists ul:first-of-type li:first-of-type {
        padding: 15px 0;
    }

    .lineage-container {
        column-gap: initial;
        row-gap: 15px;
        justify-content: space-between;
    }
    .lineage-container .lineage-item {
        width: calc(50% - 7px);
    }

    /* - individual staff - */
    .main-content.staff .page-content {
        padding-bottom: 200px;
    }
    .main-content.staff .staff-questions {
        margin-bottom: unset;
    }

    /* @750 - footer */
    footer h4, footer .h4-like {
        text-align: center;
    }
    footer .footer-wrapper {
        flex-direction: column;
    }
    footer .footer-details {
        max-width: none;
        align-items: center;
    }
    footer .footer-details .site-logo {
        width: auto;
        display: inline-block;
    }
    footer .footer-details .site-logo img {
        max-width: 257px;
    }
    footer .footer-details .address p {
        text-align: center;
    }
    footer .footer-sitemap {
        width: 100%;
        margin-top: 0;
    }
}

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ @600px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media only screen and (max-width: 600px) {
    /*------------------ Global - styles | @1023 ------------------*/
    html {
        --site-logo-container-width: 250px;
        --site-logo-height: 30px;
    }
    /*------------------ Header - styles | @600 ------------------*/
    header .header-wrapper {
        max-height: 59px;
    }
    header .utility-navigation.mobile-version {
        width: calc(100% - 250px);
        padding-right: 8px;
    }
    header .utility-navigation ul.panel-options {
        column-gap: 12px;
    }
    header .utility-navigation ul.panel-options li:before {
        top: -20px;
    }
    
    .eresources-section .eresource-entities .eresource {
        width: 100%;
    }
    
    .engagement-list {
        row-gap: 15px;
    }
    .engagement-list .engagement-item {
        width: 100%;
    }
    
    .page-body .full-bucket-segment {
        padding: 15px;
        flex-direction: column;
        row-gap: 15px;
    }
    .page-body .full-bucket-segment .bucket-content {
        order: 1;
    }
    .page-body .full-bucket-segment.has-media .bucket-content {
        width: 100%;
    }
    .page-body .full-bucket-segment .bucket-media {
        order: 0;
    }
    
    .viewer-layout {
        gap: 0.5rem;
    }
    .viewer-layout .overlay-content {
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
    }
    .viewer-overlay .overlay-header {
        padding: 0.5rem 1rem;
    }
    .viewer-overlay .overlay-header h2 {
        height: 20px;
        overflow-x: hidden;
        margin: 0;
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }
    .viewer-overlay .overlay-header h3 {
        font-size: 0.8rem;
    }
    .viewer-overlay .close-btn {
        font-size: 1.5rem;
        width: 28px;
        height: 18px;
    }
    .viewer-overlay .close-btn:before {
        content: '';
        height: unset;
    }
    .game-sidebar {
        padding: 0.75rem;
        max-height: 150px;
    }
    .game-item {
        min-width: 180px;
        padding: 0.5rem;
    }
    .game-main {
        padding: 0.5rem;
    }
    .game-main .chess-interface .chess-board-container {
        width: 100%;
    }
    .game-main .chess-interface .chess-board-container .chess-board .chess-square {
        aspect-ratio: 1 / 1;
        font-size: min(1.8rem, 3.5vw);
    }
    .game-main .chess-interface {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .game-main .chess-interface .chess-board-container {
        order: 1;
        align-self: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        overflow: hidden;
        padding: 0.5rem;
        box-sizing: border-box;
    }
    .game-main .chess-interface .game-controls {
        order: 2;
    }
    .game-main .chess-interface .chess-board-container .chess-board {
        width: min(90vw - 2rem, 400px);
        height: min(90vw - 2rem, 400px);
        max-width: calc(100vw - 4rem);
        max-height: calc(100vw - 4rem);
        margin: 0 auto;
    }
    .game-main .chess-interface .chess-board-container .chess-board .chess-square {
        font-size: 1.8rem;
    }
    .game-main .chess-interface .chess-board-container .move-navigation {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    /*
    .game-main .chess-interface .game-controls .move-list-container .move-list .move-pair .move-number {
        font-weight: bold;
        width: auto;
        flex-shrink: 0;
        margin-right: 0.25rem;
    }
    .game-main .chess-interface .game-controls .move-list-container .move-list .move-pair .move-item {
        cursor: pointer;
        padding: 1px 3px;
        margin-right: 0;
        transition: background-color 0.2s ease;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    */
    .game-main .chess-interface .chess-board-container .chess-board {
        max-width: none;
        max-height: none;
    }
    
    .perks-list.row-variant {
        flex-direction: column;
        row-gap: 20px;
    }
    .perks-list.row-variant .perk-item {
        width: 100%;
    }

    .authors-list {
        column-gap: 0;
    }
    .authors-list .author-item {
        width: 100%;
        max-width: 300px;
    }
    
    .left-sidebar {
        max-width: none;
    }
    .left-sidebar .context-navigation {
        max-width: none;
    }
        
    .wysiwygs-across.call-to-action .wysiwygs .wysiwyg {
        flex: initial !important;
    }
    .wysiwygs-across.call-to-action .wysiwygs .divider {
        width: 100%;
        height: 1px;
    }
    .wysiwygs-across .wysiwygs.column-3-across, .wysiwygs-across .wysiwygs.column-4-across, .wysiwygs-across .wysiwygs.column-5-across, .wysiwygs-across .wysiwygs.column-6-across, .wysiwygs-across .wysiwygs.column-7-across, .wysiwygs-across .wysiwygs.column-8-across, .wysiwygs-across .wysiwygs.column-9-across, .wysiwygs-across .wysiwygs.column-10-across {
        grid-template-columns: repeat(2, 1fr);
    }
    

    .personal-item .item-content .booklist-books .book {
        width: calc(33% - 6px);
        height: 31vw;
    }

    .featured-books > div, .book-lists .featured-list {
        flex-direction: column;
    }
    .book-lists.filtered {
        gap: 20px;
    }
    .all-books .original-results .book-list {
        flex-basis: calc((100% - 40px) / 2);
    }
    .books-list {
        column-gap: 20px;
        row-gap: 20px;
    }
    .books-list .book-item {
        max-width: calc((100% - 20px) / 2);
    }
    
    
    .staff-list .staff-item {
        width: 100%;
    }

    .upcoming-events-embed .day-section {
        flex-direction: column;
        row-gap: 15px;
    }
    .upcoming-events-embed .day-section .section-events {
        width: 100%;
    }

    .lineage-container .lineage-group .group-items .item {
        max-width: none;
    }
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ @450px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media only screen and (max-width: 450px) {
    .wysiwygs-across .wysiwygs.column-2-across, .wysiwygs-across .wysiwygs.column-3-across, .wysiwygs-across .wysiwygs.column-4-across, .wysiwygs-across .wysiwygs.column-5-across, .wysiwygs-across .wysiwygs.column-6-across, .wysiwygs-across .wysiwygs.column-7-across, .wysiwygs-across .wysiwygs.column-8-across, .wysiwygs-across .wysiwygs.column-9-across, .wysiwygs-across .wysiwygs.column-10-across {
        grid-template-columns: repeat(1, 1fr);
    }
    .all-books .original-results .book-list {
        flex-basis: 100%;
    }
    
    .chess-board {
        width: min(95vw - 2rem, 350px);
        height: min(95vw - 2rem, 350px);
        max-width: calc(100vw - 3rem);
        max-height: calc(100vw - 3rem);
        margin: 0 auto;
    }
    .chess-square {
        font-size: 1.5rem;
    }
    .game-item {
        min-width: 160px;
        font-size: 0.8rem;
    }
    .game-item-header {
        font-size: 0.75rem;
    }
    .move-list-container {
        padding: 0.5rem;
    }
    .move-list-container h3 {
        font-size: 0.85rem;
        margin-bottom: 0.4rem;
    }
    .move-list {
        max-height: 100px;
        font-size: 0.75rem;
        gap: 0.2rem;
    }
    .move-number {
        font-size: 0.7rem;
        margin-right: 0.2rem;
    }
    .move-item {
        font-size: 0.75rem;
        padding: 1px 2px;
    }
    .move-navigation {
        max-width: 100%;
    }
    .nav-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
        min-width: 30px;
    }
    #move-counter {
        min-width: 70px;
        font-size: 0.8rem;
    }
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ @350px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media only screen and (max-width: 350px) {
    /*------------------ Global - styles | @1023 ------------------*/
    html {
        --site-logo-container-width: 221px;
        --site-logo-height: 26px;
    }
    /*------------------ Header - styles | @350 ------------------*/
    header .header-wrapper {
        max-height: 55px;
    }
    header .utility-navigation.mobile-version {
        width: calc(100% - 221px);
    }
    header .utility-navigation ul.panel-options li:before {
        top: -18px;
    }
}