:root {
  --main-favicon: url('/content/_site_images/favicon.icopng');
  --main-logo-img: url('/content/_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;
}
/*======================================================================
    GLOBAL - styles | desktop *home page overrides*
========================================================================*/
/*---------------------------------------------------------------------------------------------------
Global Fonts
font-family: "Bricolage Grotesque", sans-serif; (300,400,500,600,700) | (normal)
font-family: "Barlow", sans-serif; (300,400,500,600,700) | (normal,italic)
----------------------------------------------------------------------------------------------------*/
.home {
    --font-header-color: #0B0B0B;
    --font-header-1: normal 500 24px/26px "Bricolage Grotesque", sans-serif;
    --font-header-2: normal 500 30px/32px "Bricolage Grotesque", sans-serif;
    --font-header-3: normal 400 18px/22px "Bricolage Grotesque", sans-serif;
    --font-header-4: normal 400 12px/15px "Barlow", sans-serif;
    --font-header-5: normal 300 16px/20px "Bricolage Grotesque", sans-serif;
    
    --font-body: normal 400 16px/20px "Barlow", sans-serif;
    --font-link: var(--font-body);
    
    --quicklink-color: #4B4B4B; /* TODO */
}
.home .button.alternate, .home a.button-like.alternate {
    --button-bg-color: #001233; /* TODO */
    --button-hover-bg-color: #00318C; /* TODO */
}
/*======================================================================
    Accessibility - styles | Home
=======================================================================*/
/*---------------------------------- Accessibility > High Contrast ----------------------------------*/
body.high-contrast .home {
    
    --quicklink-color: #000000;
}
body.high-contrast .home .alternate {
    /*--font-body-color: #FFFFFF;*/
}
body.high-contrast .home .button.alternate, body.high-contrast .home a.button-like.alternate {
    --button-hover-bg-color: #002158;
    color: var(--font-body-color) !important;
}
/*---------------------------------- Accessibility > Dark Mode ----------------------------------*/
body.dark-mode .home {
    /*--font-body-color: #9D9D9D;*/
}
body.dark-mode .home .full-segment.green-variant {
    --theme-primary-color-1: #FF6BAB;
    --theme-secondary-color-1: 45,62,25;
    --theme-secondary-color-2: 36,51,20;
}
body.dark-mode .home .full-segment.green-variant .segment-heading-row {
    background-color: rgba(var(--theme-secondary-color-1),.78);
}
body.dark-mode .home .full-segment.green-variant .segment-filter {
    --theme-secondary-color-2: 53,73,36;
}
body.dark-mode .home .full-segment.green-variant .segment-content-row {
    background-color: rgba(var(--theme-secondary-color-2),1);
}
body.dark-mode .home .full-segment.green-variant .segment-filter li a {
    color: var(--font-body-color);
}
body.dark-mode .home .full-segment.green-variant .segment-filter li a:hover, body.dark-mode .home .full-segment.green-variant .segment-filter li.active a {
    background-color: rgba(var(--theme-primary-color-3-rgb),1);
}
body.dark-mode .home .full-segment.green-variant .segment-content-row {
    border: .5px solid rgba(var(--theme-primary-color-3-rgb),1);
}
.full-segment.green-variant#for_you_segment .segment-content-row .component-item {
    border-right: .5px solid rgba(var(--theme-primary-color-3-rgb),1);
}

/*---------------------------------- Accessibility > Bigger Text ----------------------------------*/
body.bigger-text .home {
    --font-header-3: normal 400 21px/25px "Bricolage Grotesque", sans-serif; /* +3 */
    --font-header-4: normal 400 15px/18px "Barlow", sans-serif; /* +3 */
    --font-header-5: normal 300 19px/23px "Bricolage Grotesque", sans-serif; /* +3 */
    
    --font-body: normal 400 19px/26px "Barlow", sans-serif; /* +3 */
    --font-link: var(--font-body);
}

/*// header styles overrides //*/
.home h1, .home .h1-like {
    margin: 0 0 10px 0;
    text-decoration: underline;
}
.home h3, .home .h3-like {
    text-decoration: underline;
    text-transform: none;
    margin: 29px 0 17px 0;
}
.home h4, .home .h4-like {
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0 0 15px 0;
}
.home h4 svg, .home .h4-like svg {
    fill: var(--font-header-color);
}
/*// body styles overrides //*/
.home p {
    margin: 0;
    /*opacity: 0.80;*/
}
/*// list styles overrides //*/
.home ul li, .home ol li {
    margin-bottom: 5px;
    opacity: 0.93;
}
/* TODO: delete? */
/*.home ul li {*/
/*    padding-left: 23px;*/
/*}*/
.home ul li:before {
    top: 5px;
}
.home ul li ul {
    margin: 5px 0 0 0;
}
.home ul li ul li ul {
    margin: 5px 0 0 0;
}
.home ol li {
    padding-left: 4px;
}
.home ol li ol {
    margin: 5px 0 0 0;
}
.home ol li ol li ol {
    margin: 5px 0 0 0;
}

/*// general "button" styles //*/
/*.home button, .home a.button-like {*/
/*    margin: 25px 0 0 0;*/
/*    padding: 10px 14px 11px;*/
/*    background-color: var(--button-bg-color);*/
/*    border: none;*/
/*    color: var(--font-button-color);*/
/*    font: var(--font-button);*/
/*    letter-spacing: 0.2px;*/
/*    text-decoration: none;*/
/*    display: inline-block;*/
/*    position: relative;*/
/*    transition: background-color .2s;*/
/*    cursor: pointer;*/
/*}*/
/*.home button:hover, .home a.button-like:hover {*/
/*    background-color: var(--button-hover-bg-color);*/
/*    transition: background-color .3s;*/
/*}*/
/*/ button "secondary" styles /*/
/*.home button.secondary, .home a.button-like.secondary {*/
/*    margin: 25px 0 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);*/
/*}*/
/*.home button.secondary:before, a.button-like.secondary:before {*/
/*    display: none;*/
/*}*/
/*.home button.secondary:hover, a.button-like.secondary:hover {*/
/*    background-color: var(--button-secondary-hover-bg-color);*/
/*}*/
/*/ button "prompt" styles; used for the "Donate" button in the header /*/
.home button.prompt, .home a.button-like.prompt {
    margin: 0 0 0 21px;
    padding: 10px 13px;
    font: var(--font-prompt-button);
}
.home button.prompt:before, .home a.button-like.prompt:before {
    opacity: 0.5;
    transform: none;
    transition: opacity .2s, background-color .2s;
}
.home button.prompt:hover:before, .home a.button-like.prompt:hover:before {
    opacity: 1;
    transition: opacity .3s, background-color .3s;
}

.home .segment-filter li {
    margin: 0;
    padding: 0;
    opacity: 1;
}
.home .full-segment.green-variant .segment-filter li {
    width: 100%;
}
.home .full-segment.green-variant .segment-filter li a {
    padding: 3.5px 6px;
    width: 100%;
    color: var(--theme-primary-color-3);
}
.home .full-segment.green-variant .segment-filter li a:hover, .home .full-segment.green-variant .segment-filter li.active a {
    background-color: rgba(var(--theme-primary-color-3-rgb),.2);
    color: var(--font-body-color);
}
.home .full-segment.green-variant .segment-filter li:last-child a {
    border-radius: 0 0 17px 0;
}

/* New at the Library */
.home .book-item {
    padding: 0;
    background-color: unset;
}
.home .book-item .item-heading {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    font: var(--font-materials-header);
    color: var(--font-body-alt-color);
    text-decoration: underline;
    text-align: center;
    margin: 15px 0 6px 0;
}
.home .book-item .item-author {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font: var(--font-full-segment-author);
    color: var(--font-body-color);
    text-align: center;
    opacity: .7;
}

.programs-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: 58px;
    row-gap: 53px;
}
/* override base styles */
.programs-list h5, .programs-list .h5-like {
    margin: 0 0 8px 0;
    position: relative;
}
.programs-list button.secondary, .programs-list a.button-like.secondary {
    margin-top: 15px;
}
.programs-list .program-item {
    width: calc(50% - 58px);
    padding-left: 20px;
}
.programs-list .program-item .h5-like:before {
    content: "";
    width: 10px;
    height: 22px;
    background-color: var(--theme-primary-color-3);
    display: block;
    position: absolute;
    top: -2px;
    left: -20px;
}

/* Statements list; "Our Vision/Mission" */
.statements-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: 63px;
    row-gap: 50px;
    
    /* override base variables */
    --font-header-3: normal 400 26px/30px "Bricolage Grotesque", sans-serif;
}
/* override base styles */
.statements-list h3, .statements-list .h3-like {
    margin: 0 0 16px 0;
    position: relative;
}
.statements-list .statement-item {
    width: calc(50% - 63px);
    padding-left: 25px;
}
.statements-list .statement-item h3:before {
    content: "";
    width: 10px;
    height: 27px;
    background-color: var(--theme-primary-color-3);
    display: block;
    position: absolute;
    top: 2px;
    left: -25px;
}

/* eResource Item; used in the "Online Database" slider */
/* global style the .eresource-item element *mainly used in the eresources segment on the home page. */
.eresource-item {
    width: 100%;
    text-decoration: none;
}
/* override base styles */
.eresource-item h4, .eresource-item .h4-like {
    margin: 14px 0 0 0;
    transition: color .3s;
}
.eresource-item:hover h4, .eresource-item:hover .h4-like {
    /*color: var(--font-link-color);*/
}
.eresource-item .item-media {
    width: 100%;
    height: 148px;
    /*border: 1px solid #999; TODO: turn this into a var */
    display: block;
}
.eresource-item .item-media .item-media-image {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
    /*background: transparent no-repeat center;*/
    /*background-size: contain;*/
    /*background-color: var(--body-media-bg-color);*/
}
.eresource-item .item-media .item-media-image.default {
    height: 100%;
    display: block;
}
    /* TOSORT */
    /* eresources section */
    .home .eresource-item {
        background-color: unset;
        border: unset;
        padding: 0;
    }
    .home .eresource-item .item-media {
        position: relative;
        border: 1px solid rgba(0,0,0,.2);
        padding: 20px;
        /*background-color: var(--select-bg-color);*/
        background-color: #FFFFFF;
    }
    .home .eresource-item .item-media.has-media .item-media-image {
        position: absolute;
        max-width: calc(100% - 40px);
        max-height: calc(100% - 40px);
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
    }
    .home .eresource-item .item-media .item-media-image.default {
        background-image: url('/content/_site_images/icon_placeholder-mark-eresources.svg');
    }
    .home .eresource-item .item-content {
        text-align: center;
    }
    .home .eresource-item .item-content h3 {
        margin: 15px 0 11px 0;
    }
    .home .eresource-item .item-content p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        opacity: .7;
        font-weight: 300;
    }
    .home a.eresource-item[href*="//"]:not(.skip-offsite):not([href*="http://mechanicsinstitute.digitalbranch.org/"]):after {
        content: unset;
    }

/* Home page bottom bucket */
.full-bucket-segment {
    max-width: 915px;
}
.full-bucket-segment h2, .full-bucket-segment .button-like.primary {
    margin-top: 26px;
}

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ @1140px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media only screen and (max-width: 1140px) {
    /*------------------ Full Segment - styles | @1140 ------------------*/
    .full-segment {
        width: calc(100% - 100px);
    }
    .full-bucket-segment {
        width: calc(100% - 100px);
    }
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ @1023px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media only screen and (max-width: 1023px) {
    /*------------------ Body styles - styles | @1023 ------------------*/
    
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ @950px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media only screen and (max-width: 950px) {
    .full-segment.pillar-variant .segment-heading-row p {
        width: 100%;
    }
    .full-segment.green-variant#for_you_segment .segment-content-row .component-item {
        padding: 36px 30px;
    }
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ @750px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media only screen and (max-width: 750px) {
    .home {
        --font-header-1: normal 500 24px/26px "Bricolage Grotesque", sans-serif;
        --font-header-2: normal 500 27px/32px "Bricolage Grotesque", sans-serif;
        --font-header-3: normal 400 18px/22px "Bricolage Grotesque", sans-serif;
        --font-header-4: normal 400 12px/15px "Barlow", sans-serif;
        --font-body: normal 400 15px/19px "Barlow", sans-serif;
    }
    
    /* @750 - campaign/events/hours/quicklinks edits */
    .campaign {
        width: calc(100% - 30px);
        row-gap: unset;
        margin: 0 auto 75px auto;
    }
    .campaign .overflow-segment.carousel {
        margin-bottom: 20px;
    }
    .overflow-segment.carousel .swiper {
        border-radius: 0 50px 0 0;
    }
    .campaign .upcoming-events, .campaign .hours-quicklinks {
        width: 100%;
    }
    .campaign .hours-quicklinks .hours, .campaign .hours-quicklinks .quicklinks {
        border: .5px solid rgba(var(--theme-primary-color-2-rgb),.35);
        border-top: unset;
        padding: 25px;
    }
    .campaign .upcoming-events {
        padding: 35px 25px;
    }
    
    /* @750 - green variant edits */
    .full-segment.green-variant .segment-heading-row {
        padding: 30px 25px;
    }
    
    /* @750 - for you edits */
    .full-segment.green-variant#for_you_segment .segment-content-row .slider-container .swiper {
        padding-bottom: 58px;
    }
    .full-segment.green-variant#for_you_segment .segment-content-row .slider-container .swiper-wrapper .swiper-slide {
        flex: none;
        justify-content: flex-start;
    }
    .full-segment.green-variant#for_you_segment .segment-content-row .component-item {
        max-width: 340px;
        border: unset;
    }
    
    /* @750 - next read edits */
    .full-segment.green-variant#booklists_segment .segment-content-row {
        padding: 30px 25px;
    }
    .full-segment.green-variant#booklists_segment .segment-content-row .content-elem {
        padding: 0 0 40px 0;
    }
    .full-segment.green-variant#booklists_segment .segment-content-row .swiper-button-prev, .full-segment.green-variant#booklists_segment .segment-content-row .swiper-button-next {
        height: 35px;
        width: calc((100% / 2) - 10px);
        right: 0;
        top: unset;
        bottom: -35px;
    }
    .full-segment.green-variant#booklists_segment .segment-content-row .swiper-button-prev {
        left: 0;
    }
    .full-segment.green-variant#booklists_segment .segment-content-row .swiper-button-prev:before, .full-segment.green-variant#booklists_segment .segment-content-row .swiper-button-next:before {
        left: 19px;
    }
    .full-segment.green-variant#booklists_segment .segment-content-row .swiper-button-prev:after, .full-segment.green-variant#booklists_segment .segment-content-row .swiper-button-next:after {
        right: unset;
        left: 0;
    }
    
    /* @750 - full segment bucket edits */
    .full-bucket-segment {
        width: calc(100% - 30px);
    }
    
    .overflow-segment {
        margin-bottom: 95px;
    }
    
    .full-segment {
        width: calc(100% - 30px);
        margin: 0 auto 75px auto;
    }
    .full-segment.green-variant {
        width: calc(100% - 30px);
    }
    .full-segment .h2-like {
        text-align: center;
    }
    .full-segment .segment-heading-row {
        flex-direction: column;
        justify-content: center;
    }
    .full-segment .segment-heading-row a.button-like.secondary {
        display: none;
    }
    
    .statements-list {
        row-gap: 43px;
    }
    .statements-list .statement-item {
        width: 100%;
    }
    
    .programs-list {
        flex-direction: column;
        column-gap: initial;
        row-gap: 23px;
    }
    .programs-list .program-item {
        width: 100%;
    }
    
    /*======================================================================
        Accessibility - styles | Home
    =======================================================================*/
    /*---------------------------------- Accessibility > Bigger Text ----------------------------------*/
    body.bigger-text .home {
        --font-header-3: normal 400 20px/24px "Bricolage Grotesque", sans-serif; /* +2 */
        --font-header-4: normal 400 15px/18px "Barlow", sans-serif; /* +3 */
        --font-body: normal 400 17px/21px "Barlow", sans-serif; /* +2 */
    }
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ @600px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media only screen and (max-width: 600px) {
    .campaign .overflow-segment.carousel .media-board {
        aspect-ratio: 165/138;
        height: auto;
    }
    .full-bucket-segment {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }
    .full-bucket-segment .bucket-content {
        order: 2;
    }
    .full-bucket-segment .bucket-media {
        order: 1;
    }
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ @500px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media only screen and (max-width: 500px) {
    .full-segment.green-variant .segment-filter {
        width: 100%;
    }
}