/*
 * Global Rules
 **/

.spacer{
    height: 100vh;
}

.spacer-small{
    height: 40vh;
}

:root{
    --red: #C8102E;
    --darkRed: #8E0A1F;
    --darkBlue: #003056;
    --lightDarkBlue: #004B86;
    --darkerBlue: #002645;
    --paleBlue: #EBEEF1;
    --yellow: #FFC700;
    --paleYellow: #FFDC61;
    --orange: #F47820;
    --green: #64A70B;
    --lightGreen: #72C00C;
    --cornflower: #4DA0D2;
    --lightCornflower: #7CB7DA;
    --lilac: #8264AB;
    --darkLilac: #5D477B;
    --aqua: #3FC1CB;

    --siteBg: #fff;

    --fontFamily: "basic-sans", "Avenir", sans-serif;
    --fontFamilyHeavy: "avenir-next-lt-pro-condensed", "basic-sans", "Avenir", sans-serif;
    
    --fontDisplay: 250px; 
    --fontExtraLarge: 150px; 
    --fontLarge: 40px; 
    --fontMedium: 36px;
    --fontSmall: 24px;
    --fontExtraSmall: 20px; 
    --fontExtraExtraSmall: 18px; 
    
    --lineHeight: 1.5;

    --extraExtraWideSize: 1440px;
    --extraWideSize: 1240px;
    --wideSize: 1200px;
    --contentSize: 1080px;
    --smallSize: 950px;

    --sitePadding: 48px;
}
@media screen and (max-width: 991px){

    :root{
        --fontDisplay: 190px; 
        --fontExtraLarge: 90px; 
        --fontLarge: 30px; 
        --fontMedium: 28px;
        --fontSmall: 20px;
        --fontExtraSmall: 18px; 
        --fontExtraSmall: 16px; 
    }
}
@media screen and (max-width: 768px){

    :root{
        --fontDisplay: 70px; 
        --fontExtraLarge: 60px; 
        --fontLarge: 20px; 
        --fontMedium: 24px;
        --fontSmall: 16px;
        --fontExtraSmall: 12px; 
        --fontExtraExtraSmall: 16px; 

        --sitePadding: 20px;
    }
}

html,
body{
    color: var(--darkBlue);
    font-family: var(--fontFamily);
    font-size: var(--fontExtraExtraSmall);
    font-weight: 500;
    line-height: var(--lineHeight);
    /* overflow-x: hidden; */
}

html{
    overflow-x: hidden;
}

body{
    overflow-x: initial;
}

html *{
    box-sizing: border-box;
}

a {
    text-decoration: none;
    transition: all 0.3s ease-in;
}

a.link-over-dark-bg {
    color: var(--yellow);
}

a.link-over-dark-bg:hover {
    color: var(--paleYellow);
}

strong{
    font-weight: 900;
}

img{
    display: block;
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p{
    margin-top: 0px!important;
}

h1,
.faux-h1{
    margin-bottom: 32px;
    font-family: var(--fontFamilyHeavy);
    font-size: var(--fontExtraLarge);
    font-weight: 900;
    line-height: 1
}

h2,
.faux-h2 {
    margin-bottom: 20px;
    font-family: var(--fontFamilyHeavy);
    font-size: var(--fontLarge);
    font-weight: 900;
    line-height: 1.1;
}

h3,
.faux-h3{
    margin-bottom: 20px;
    font-family: var(--fontFamilyHeavy);
    font-size: var(--fontMedium);
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: -0.56px;
}

h4,
.faux-h4{
    margin-bottom: 20px;
    font-size: var(--fontSmall);
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: -0.48px;
}

h5,
.faux-h5{
    margin-bottom: 24px;
    font-size: var(--fontExtraSmall);
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: -0.48px;
}

p{
    margin-bottom: 14px;}

.font-display{
    font-family: var(--fontFamilyHeavy);
    font-size: var(--fontDisplay);
    font-weight: 900;
    line-height: .77;
    margin-bottom: 75px;}
    

.font-small{
    font-size: var(--fontExtraExtraSmall);
    line-height: 1.3;}

.font-extra-bold{
    font-weight: 900;}

@media screen and (max-width: 768px){
    h2,
    .faux-h2 {
        margin-bottom: 12px;
    }
}


.desktop-hide{}
    @media screen and (min-width: 991px){
        .desktop-hide{
            display: none!important;}
    }

.desktop-no-mar-bot{}
    @media screen and (min-width: 991px){
        .desktop-no-mar-bot{
            margin-bottom: 0px!important;}
    }

/*
 * Commonly used Elements
 **/

.alignfull {
    margin-right: calc(var(--sitePadding) * -1);
    margin-left: calc(var(--sitePadding) * -1);
    padding-left: var(--sitePadding);
    padding-right: var(--sitePadding);
}

.buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.buttons.center{
    justify-content: center;
}

.button{
    display: block;}
    .button.bg-white .button__link{
        background-color: #fff;}
        .button.bg-white .button__link:hover,
        .button.bg-white .button__link:focus,
        .button.bg-white .button__link:focus-visible{
            background-color: #eee;}
    .button.bg-cornflower .button__link{
        background-color: var(--cornflower);}
        .button.bg-cornflower .button__link:hover,
        .button.bg-cornflower .button__link:focus,
        .button.bg-cornflower .button__link:focus-visible{
            background-color: var(--lightCornflower);}

.button__link{
    display: block;
    padding: 14px 32px;
    border-radius: 100px;
    background-color: var(--yellow);
    color: var(--darkBlue);

    font-family: var(--fontFamilyHeavy);
    font-size: var(--fontExtraSmall);
    font-weight: 700; 
    line-height: 1.1;
    text-align: center;}
    .button__link:hover,
    .button__link:focus,
    .button__link:focus-visible{
        background-color: var(--paleYellow);}

    .button.has-border .button__link{
        border: 3px solid var(--siteBg);}

.circle{
    position: absolute;}
    .circle.has-border {
        border: 12px solid var(--siteBg);
        border-radius: 100%;}
    .circle.has-image img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 100%;
        object-fit: cover;}
    .circle .inner{
        padding-bottom: 100%;
        border-radius: 100%;}
    .circle.bg-red .inner{
        background-color: var(--red);}
    .circle.bg-green .inner{
        background-color: var(--green);}
    .circle.bg-orange .inner{
        background-color: var(--orange);}
    .circle.bg-lilac .inner{
        background-color: var(--lilac);}
    .circle.bg-aqua .inner{
        background-color: var(--aqua);}
    .circle.bg-yellow .inner{
        background-color: var(--yellow);}
    .circle.bg-cornflower .inner{
        background-color: var(--cornflower);}
    .circle.bg-darkBlue .inner{
        background-color: var(--darkBlue);}
    .circle.bg-paleBlue .inner{
        background-color: var(--paleBlue);}

    @media screen and (max-width: 991px){
        .circle{}
            .circle.has-border {
                border-width: 10px;}
    }

.wrap{
    max-width: var(--contentSize);
    width: 100%;
    margin-left: auto;
    margin-right: auto;}
    .wrap.small{
        max-width: var(--smallSize);}
    .wrap.wide{
        max-width: var(--wideSize);}
    .wrap.extra-wide{
        max-width: var(--extraWideSize);}
    .wrap.extra-extrawide{
        max-width: var(--extraExtraWideSize);}

/*
 * Fixed Donate
 **/

.fixed-donate{
    position: fixed;
    z-index: 10;
    top: 78px;
    right: 12px;}

    @media screen and (max-width: 991px){
        .fixed-donate{
            top: 60px;}
    }

/*
 * Header
 **/

.site-header{
    position: sticky;
    z-index: 20;
    left: 0;
    top: 0;
    width: 100%;
    background-color: var(--siteBg);
    transition: all 0.3s ease-in;}

    .site-header__top{
        padding: 0px 9px 0px 24px;}
        .site-header__inner{
            padding: 14px 0px;
            display: flex;
            align-items: center;
            gap: 20px;

            justify-content: space-between;
            position: relative;
            margin-left: auto;
            margin-right: auto;
            max-width: 1920px;
            width: 100%;}

        .site-header__logo{
            max-width: 300px;
            width: 100%;}

        .site-header__nav{}
            .site-header__nav ul{
                padding: 0px;
                margin: 0px;
                list-style-type: none;
                display: flex;
                column-gap: 32px;
                align-items: center;
                justify-content: flex-end;}
            .site-header__nav .nav-item{}
                .site-header__nav .nav-item a{
                    color: var(--darkBlue);
                    font-size: var(--fontExtraSmall);
                    font-weight: 700;
                    line-height: 1.1;} 

        .site-header__timeline-nav{
            position: relative;}
            .site-header__timeline-nav ul{
                top: 0;
                left: 0;
                width: 100%;
                padding: 0px;
                margin: 0px;
                list-style-type: none;
                display: flex;
                align-items: center;}
            .site-header__timeline-nav .nav-item{
                width: 25%;}

                .site-header__timeline-nav .nav-item.active a{
                    padding-right: 24px;}
                    .site-header__timeline-nav .nav-item.active a > span{
                        width: 100%;
                    }
                    .site-header__timeline-nav .nav-item.active a svg{
                        opacity: 0;}

                .site-header__timeline-nav .nav-item a{
                    position: relative;
                    display: block;
                    padding: 18px 40px 18px 24px;
                
                    color: #fff;
                    font-size: var(--fontExtraSmall);
                    font-weight: 900;
                    line-height: 1.2;
                    }
                    .site-header__timeline-nav .nav-item a > span{
                        display: block;
                        width: 0;
                        text-align: center;
                        white-space: nowrap;
                        transition: all 0.5s ease-in;}
                    .site-header__timeline-nav .nav-item a svg{
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        right: 24px;
                        transition: all 0.3s ease-in;}

                    .site-header__timeline-nav .nav-item.bg-lilac a{
                        background-color: var(--lilac);}
                        .site-header__timeline-nav .nav-item.bg-lilac a:hover {
                            background-color: var(--darkLilac);}

                    .site-header__timeline-nav .nav-item.bg-cornflower a{
                        color: var(--darkBlue);
                        background-color: var(--cornflower);}
                        .site-header__timeline-nav .nav-item.bg-cornflower a path{
                            fill: var(--darkBlue);}
                        .site-header__timeline-nav .nav-item.bg-cornflower a:hover{
                            background-color: var(--lightCornflower);}

                    .site-header__timeline-nav .nav-item.bg-green a{
                        color: var(--darkBlue);
                        background-color: var(--green);}
                        .site-header__timeline-nav .nav-item.bg-green a path{
                            fill: var(--darkBlue);}
                        .site-header__timeline-nav .nav-item.bg-green a:hover{
                            background-color: var(--lightGreen);}

                    .site-header__timeline-nav .nav-item.bg-darkBlue a{
                        background-color: var(--darkBlue);}
                        .site-header__timeline-nav .nav-item.bg-darkBlue a:hover{
                            background-color: var(--lightDarkBlue);}

    .site-header.has-scrolled{
        position: fixed;}
        .site-header.has-scrolled .site-header__timeline-nav ul{}

    @media screen and (max-width: 1199px){
        .site-header__logo{
            max-width: 240px;}

        .site-header__nav{}
            .site-header__nav ul{
                column-gap: 30px;}
    }

    @media screen and (max-width: 991px){
        .site-header__logo{
            max-width: 220px;}

        .site-header__nav{}
            .site-header__nav ul{
                column-gap: 20px;}
    }

    @media screen and (max-width: 768px){

        .site-header__top{
            padding: 0px 9px;}

        .site-header__logo{
            max-width: 145px;}

        .site-header__nav{}
            .site-header__nav ul{ 
                column-gap: 6px;}
            .site-header__nav .nav-item{}
                .site-header__nav .nav-item a{
                    padding: 11px 11px;} 


        .site-header__timeline-nav{}
            .site-header__timeline-nav .nav-item{}
                .site-header__timeline-nav .nav-item.active a{
                    padding-right: 12px;}
                .site-header__timeline-nav .nav-item a{
                    padding: 13px 25px 13px 12px;}
                    .site-header__timeline-nav .nav-item a svg{
                        right: 12px;
                        width: 13px;
                        height: 13px;}
                .site-header__timeline-nav .nav-item .mobile-hide{
                    display: none;}
    }

    @media screen and (max-width: 479px){
        .site-header__logo{
            max-width: 126px;}

        .site-header__nav ul{ 
            flex-wrap: wrap;} 
            .site-header__nav .nav-item.mobile-full {
                display: flex;
                justify-content: flex-end;
                width: 100%;
            }
               
            .site-header__nav .nav-item.button{
                flex-basis: 48%;}
    }


/*
 * Main
 **/

.site-main{
    position: relative;
    z-index: 1;}

    .site-main >*{
        padding-left: var(--sitePadding);
        padding-right: var(--sitePadding);
        width: 100%;}

/*
 * Timeline Content
 **/

#timeline-content{
    /* padding-left: 0px;
    padding-right: 0px; */
    position: relative;}

    #timeline-content .era-section{
        position: relative;
        min-height: 60vh;}
        #timeline-content .era-section > *:not(.timeline-bar,.timeline-bar-anchor){
            position: relative;
            z-index: 2;}
        #timeline-content .era-section > *:last-child{
            margin-bottom: 0px;}


    #timeline-content .era-section .branch path{
        stroke: var(--sectionColor)}

/*
 * Timeline Bar & Anchors
 **/

.timeline-bar-invis{
    height: calc(100% + 10px);
}

.timeline-bar{
    height: 0; 
    /* height: calc(100% + 10px); */
    max-height: calc(100% + 10px);}
    
    @media screen and (max-width: 991px){
        .timeline-bar{
            height: calc(100% + 10px);}
    }


.timeline-bar-invis,
.timeline-bar{
    position: absolute;
    z-index: 1!important;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* height: calc(100% + 10px); */
    width: 12px;
    border-radius: 12px;}
    .timeline-bar.bg-lilac{
        background-color: var(--lilac);}
    .timeline-bar.bg-cornflower{
        background-color: var(--cornflower);}
    .timeline-bar.bg-green{
        background-color: var(--green);}

.timeline-bar-anchor{
    position: relative;
    z-index: 1!important;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 109px;}

    @media screen  and (max-width: 991px) {
        .timeline-bar{
            width: 4px;}
        .timeline-bar-anchor{
            width: 55px;}
    }

/*
 * Intro Content
 **/

.intro-content {
    position: relative;
    padding-left: 0px;
    padding-right: 0px;}
    
    .intro-content__inner{
        padding-top: 31px;
        position: relative;
        max-width: var(--extraExtraWideSize);

        padding-left: var(--sitePadding);
        padding-right: var(--sitePadding);

        margin-left: auto;
        margin-right: auto;}

    .intro-content__content{
        position: relative;
        max-width: 872px;
        margin-left: auto;
        margin-right: auto;
        z-index: 2;}
        

        .intro-content__inner  > *:first-child{
            margin-top: 0px;}
        .intro-content__inner  > *:last-child{
            margin-bottom: 0px;}

    .intro-content .banner{
        width: 100%;}

    .intro-content__circles-left,
    .intro-content__circles-right{
        position: absolute;
        z-index: 1;}

    .intro-content__circles-left {
        width: 52.1%;
        height: 181%;
        top: -18px;
        left: -34%;}
        .intro-content__circles-left .circle-1{
            width: 23.4%;
            top: 0;
            left: 53.2%;}
        .intro-content__circles-left .circle-2{
            width: 100%;
            top: 25.8%;
            left: 0;}
    .intro-content__circles-right {
        width: 50.2%;
        height: 162%;
        top: 17px;
        right: -34%;}
        .intro-content__circles-right .circle-1{
            width: 14.9%;
            top: 0;
            left: 24.4%;}
        .intro-content__circles-right .circle-2{
            width: 100%;
            top: 19.1%;
            left: 0;}

    @media screen  and (max-width: 991px) {
        .intro-content{}
            .intro-content__inner{
                padding-top: 41px;
                padding-bottom: 13px;}

            .intro-content .banner{
                margin-left: auto;
                margin-right: auto;
                padding-left: 45px;
                padding-right: 30px;}

            .intro-content__circles-left {
                width: 54.3%;
                height: 134%;
                top: -30px;
                left: -41.3%;}
                .intro-content__circles-left .circle-1{
                    width: 37.5%;
                    left: initial;
                    right: 11%}
                .intro-content__circles-left .circle-2{
                    width: 100%;
                    top: 34%;
                    left: 0;}
            
            .intro-content__circles-right {
                width: 59.4%;
                height: 145%;
                top: 49px;
                right: -49.7%;}
                .intro-content__circles-right .circle-1{
                    width: 26.7%;
                    left: 6.8%;}
                .intro-content__circles-right .circle-2{
                    width: 100%;
                    top: 33%;}
    }

    @media screen  and (max-width: 479px) {
        .intro-content{}
                
            .intro-content .banner{
                max-width: 300px;
                padding-left: 15px;
                padding-right: 0px;}
    }

/*  
 * Era Hero
 **/

.era-hero{
    z-index: 3!important;}
    .era-hero .era-hero__bg{
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;}
    .era-hero .era-hero__content{
        position: relative;
        z-index: 3;
        max-width: var(--smallSize);}
        .era-hero .era-hero__content >*:last-child{
            margin-bottom: 0px!important;}
    .era-hero .era-hero__title{
        color: var(--sectionColor);
        margin-bottom: 75px;}
        .era-hero .era-hero__title span{
            display: block;}

    @media screen and (max-width: 991px){
        .era-hero{}
            .era-hero .era-hero__content{
                padding-left: 17px;
                padding-right: 17px;}
            .era-hero .era-hero__title{
                margin-bottom: 25px;}
    }

/*
 * 1800s
 **/

#the-1800s {
    --sectionColor: var(--lilac);}
    #the-1800s .timeline-bar-anchor{
        margin-bottom: 26px;}

    @media screen and (max-width: 991px){
        #the-1800s {}
            #the-1800s .timeline-bar-anchor{
                margin-bottom: 68px;}
    }

#hero-1800s{
    margin-bottom: 30px;
    padding-top: 195px;
    padding-bottom: 290px;}
    #hero-1800s .era-hero__bg{
        background-image: url('../img/1800s-hero-bg.png');}

    #hero-1800s .circles-contain{
        z-index: 1;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 1440px;
        height: 100%;}
        #hero-1800s .circles-contain .circle{
            position: absolute;
            width: 59.16%;
            top: 136px;
            right: -7.9%;}

    @media screen and (max-width: 991px){
        #hero-1800s{
            padding-top: 200px;
            padding-bottom: 137px;}

            #hero-1800s .circles-contain{}
                #hero-1800s .circles-contain .circle{
                    top: 52px;}
    }

    @media screen and (max-width: 479px){
        #hero-1800s{
            padding-top: 0px;
            padding-bottom: 37px;}
    }

/*
 * 1900s
 **/


 #the-1900s {
    --sectionColor: var(--cornflower);}
    @media screen and (min-width: 992px){
        #the-1900s >*:last-child {
            padding-bottom: 50px;}
    }
    @media screen and (max-width: 991px){
        #the-1900s >*:last-child {
            padding-bottom: 40px;}
    }

#hero-1900s{
    margin-bottom: 45px;
    margin-top: -109px; 
    padding-top: 134px; 
    padding-bottom: 232px;}
    #hero-1900s .era-hero__bg{
        z-index: 1;
        background-image: url('../img/1900s-hero-bg.png');
        background-position: center 150px;}

    #hero-1900s .era-hero__inner{
        position: relative;
        z-index: 3;}

    #hero-1900s .circles-contain{
        position: absolute;
        z-index: 2;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 100%;
        max-width: 1440px;}
        #hero-1900s .circles-contain > .circles{
            position: absolute;
            width: 43.7%;
            top: 42px;
            right: -4.2%;}
            #hero-1900s .circles-contain > .circles > .inner{
                padding-bottom: 190%;}
        #hero-1900s .circles-contain .circle-1{
            width: 17.3%;
            top: 0;
            left: 0;}
        #hero-1900s .circles-contain .circle-2{
            width: 29.3%;
            top: 9%;
            left: 26.8%;}
        #hero-1900s .circles-contain .circle-3{
            width: 47.3%;
            top: 27.2%;
            left: 41.5%;}
        #hero-1900s .circles-contain .circle-4{
            width: 70.3%;
            bottom: 0;
            right: 0;}

    @media screen and (max-width: 991px){
        
        #hero-1900s{
            margin-top: -55px;
            padding-bottom: 150px;
        }

    }

    @media screen and (max-width: 479px){
        
        #hero-1900s{
            padding-top: 40px;
            padding-bottom: 50px;}
            #hero-1900s .era-hero__bg{
                z-index: 1;
                background-image: url('../img/1900s-hero-bg.png');
                background-position: center 40px;}

    }

/*
 * 2000s
 **/

 #the-2000s {
    --sectionColor: var(--green);}
    @media screen and (min-width: 992px){
        #the-2000s >*:last-child {
            padding-bottom: 125px;}
    }
    @media screen and (max-width: 991px){
        #the-2000s >*:last-child {
            padding-bottom: 40px;}
    }

#hero-2000s{
    margin-top: -109px; 
    margin-bottom: 35px;
    padding-top: 258px;
    padding-bottom: 132px;}
    #hero-2000s .era-hero__bg{
        z-index: 2;
        background-image: url('../img/2000s-hero-bg.png');
        background-position: center 258px;}

    #hero-2000s .circles-contain{
        position: absolute;
        z-index: 1;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 100%;
        max-width: 1440px;}
        #hero-2000s .circles-contain > .circles{
            position: absolute;
            width: 46.6%;
            top: 26px;
            right: -3.5%;}
            #hero-2000s .circles-contain > .circles > .inner{
                padding-bottom: 89.8%;}
        #hero-2000s .circles-contain .circle-1{
            width: 65.9%;
            top: 0;
            left: 0;}
        #hero-2000s .circles-contain .circle-2{
            width: 25%;
            top: 13.2%;
            right: 0;}
        #hero-2000s .circles-contain .circle-3{
            width: 34.5%;
            bottom: 0;
            right: 3.1%;}

    @media screen and (max-width: 991px){

        #hero-2000s{
            margin-top: -55px;
            padding-top: 200px;
            padding-bottom: 100px;}
            #hero-2000s .era-hero__bg{
                background-position: center 200px;}

    }


    @media screen and (max-width: 479px){
        
        #hero-2000s{
            padding-top: 40px;
            padding-bottom: 50px;}
            #hero-2000s .era-hero__bg{
                background-position: center 40px;}

    }

/*
 * Large Circle Illustration Section
 **/

.lcis{
    overflow: hidden;
    margin-bottom: 47px;}

    .lcis.align-circle-top{}
        .lcis.align-circle-top .lcis__right{}
            .lcis.align-circle-top .lcis__right .illus-content{
                top: 0;
                bottom: initial;}

    .lcis .lcis__inner{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;

        max-width: 1264px;
        margin-left: auto; 
        margin-right: auto;}

    .lcis .lcis__left,
    .lcis .lcis__right{
        position: relative;
        z-index: 2;}

    .lcis .lcis__left{
        width: 42.8%;}
        .lcis .lcis__left .byc,
        .lcis .lcis__left .year-content{
            max-width: 460px;
            width: 100%;}
            .lcis .lcis__left .byc:not(.align-left),
            .lcis .lcis__left .year-content:not(.align-left){
                margin-left: auto;}
            
            .lcis .lcis__left .byc .branch-contain{
                right: -21.2%!important;}

    .lcis .lcis__right{
        align-self: stretch;
        position: relative;
        width: 48.7%;}
        .lcis .lcis__right .illus-content{
            position: absolute;
            bottom: 0;
            left: -20%;
            width: 176%;}
            .lcis .lcis__right .illus-content .circle{
                max-width: 100%;}

    @media screen and (max-width: 1399px){
        .lcis .lcis__left{}
            .lcis .lcis__left .byc{}
                .lcis .lcis__left .byc .branch-contain{
                    right: -20.6%!important;}
    }

    @media screen and (max-width: 1299px){
        .lcis .lcis__left{}
            .lcis .lcis__left .byc{}
                .lcis .lcis__left .byc .branch-contain{
                    right: -19.5%!important;}
    }

    @media screen and (max-width: 1249px){
        .lcis .lcis__left{}
            .lcis .lcis__left .byc{}
                .lcis .lcis__left .byc .branch-contain{
                    right: -18.5%!important;}
    }

    @media screen and (max-width: 1199px){
        .lcis .lcis__left{}
            .lcis .lcis__left .byc{}
                .lcis .lcis__left .byc .branch-contain{
                    right: -18%!important;}
    }

    @media screen and (max-width: 991px){

        .lcis{
            margin-bottom: 30px;}

            .lcis .lcis__left{
                width: 100%;}
                .lcis .lcis__left .byc,
                .lcis .lcis__left .year-content{
                    max-width: 100%;}

            .lcis .lcis__right{
                display: none;}

    }

/*
 * Large Circle Quote Section
 **/

.lcqs{
    margin-bottom: 70px;}
    .lcqs.less-mar-bot{
        margin-bottom: 45px;}
    .lcqs .lcqs__inner{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;

        max-width: 1264px;
        margin-left: auto; 
        margin-right: auto;}

    .lcqs .lcqs__left,
    .lcqs .lcqs__right{
        position: relative;
        z-index: 2;}

    .lcqs .lcqs__left{
        width: 39.1%;}
        .lcqs .lcqs__left p{
            margin-bottom: 65px;
            max-width: 460px;
            margin-left: auto;
            background-color: var(--siteBg);
        
            font-size: var(--fontSmall);
            font-weight: 500;}
        .lcqs .lcqs__left .circle.has-image{
            margin-bottom: 33px;
            width: 74.3%;
            position: relative;}

    .lcqs .lcqs__right{
        width: 48.7%;}
        .lcqs .lcqs__right blockquote {
            margin: 0px;}
        .lcqs .lcqs__right blockquote >*:last-child{
            margin-bottom: 0px;}
        .lcqs .lcqs__right blockquote p{
            margin-bottom: 50px;
            font-family: var(--fontFamilyHeavy);
            font-size: var(--fontMedium);
            font-weight: 900;
            line-height: 1;
            text-align: center;}
            .lcqs .lcqs__right blockquote p cite{
                font-size: 28px;
                font-style: normal;}

    .lcqs .lcqs__spacer{
        margin-bottom: 65px;
        position: relative;
        max-width: 460px;
        margin-left: auto;}
        .lcqs .lcqs__spacer-inner{
            padding-bottom: 25.2%;}

    .lcqs .accent-circles{
        position: relative;}
        .lcqs .accent-circles .accent-circles__inner{
            padding-bottom: 89.8%;}
        .lcqs .accent-circles .accent-circles__circles-contain{
            position: absolute;
            top: 0;
            left: -245px;
            height: 100%;
            width: 156%;}
        .lcqs .accent-circles .circle-1{
            top: 0;
            left: 0;
            width: 57.3%;}
        .lcqs .accent-circles .circle-2{
            top: 8.5%;
            left: 64.2%;
            width: 23.9%;}
        .lcqs .accent-circles .circle-3{
            top: 64.7%;
            right: 0;
            width: 14.1%;}

    .lcqs .quote-circle{
        position: absolute;
        z-index: 1;
        /* top: 0; */
        top: 50%;
        transform: translateY(-50%);
        right: -26.3%;
        width: 87.5%;}

    @media screen and (max-width: 1199px){
        .lcqs{}
            .lcqs .lcqs__right{}
                .lcqs .lcqs__right blockquote p{
                    font-size: 30px;}
        
    }

    @media screen and (max-width: 991px){
        .lcqs{
            padding-bottom: 50px;}
            .lcqs.extra-pad-bot{
                padding-bottom: 170px;}

            .lcqs .lcqs__inner{
                position: initial;
                display: block;
                max-width: 600px;}

            .lcqs .lcqs__left,
            .lcqs .lcqs__right{
                width: 100%;}

            .lcqs .lcqs__left{
                margin-bottom: 40px;}
                .lcqs .lcqs__left p{
                    padding-top: 10px;
                    padding-bottom: 10px;
                    /* margin-bottom: 21px; */
                    margin-bottom: 70px;
                    max-width: 100%;}
                .lcqs .lcqs__left .circle.has-image{
                    margin-bottom: 0px;
                    width: 34.3%;
                    margin-left: auto;
                    margin-right: auto;}

            .lcqs .lcqs__right{}
                .lcqs .lcqs__right blockquote{
                    padding-left: 70px;
                    padding-right: 70px;}
                .lcqs .lcqs__right blockquote p{
                    margin-bottom: 25px;
                    font-size: 24px;}
                    .lcqs .lcqs__right blockquote p cite{
                        font-size: 18px;}

            .lcqs .lcqs__spacer,
            .lcqs .accent-circles{
                display: none;}

            .lcqs .quote-circle{
                top: initial;
                transform: initial;
                bottom: 0!important;
                right: initial;
                width: 118%;
                max-width: 600px;
                left: 50%!important;
                transform: translateX(-50%)!important;}
    }

    @media screen and (max-width: 768px){

        .lcqs{
            padding-bottom: 120px;}
            .lcqs.extra-pad-bot{
                padding-bottom: 180px;}

            .lcqs .lcqs__left{}
                .lcqs .lcqs__left p{
                    margin-bottom: 40px;}
                .lcqs .lcqs__left .circle.has-image{
                    width: 38.3%;}

            .lcqs .lcqs__right{}
                .lcqs .lcqs__right blockquote p{
                    font-size: 20px;}
                    .lcqs .lcqs__right blockquote p cite{
                        font-size: 15px;}

    }

    @media screen and (max-width: 639px){
        .lcqs{
            padding-bottom: 30px;}
            .lcqs.extra-pad-bot{
                padding-bottom: 80px;}

            .lcqs .lcqs__inner{
                max-width: 450px;}

            .lcqs .quote-circle{
                max-width: 500px;}
    }

    @media screen and (max-width: 479px){

        .lcqs{
            padding-bottom: 40px;}

            .lcqs.extra-pad-bot{
                padding-bottom: 60px;}

            .lcqs .lcqs__inner{
                position: initial;
                display: block;
                max-width: 353px;}

            .lcqs .lcqs__left{
                margin-bottom: 20px;}
                .lcqs .lcqs__left p{
                    margin-bottom: 21px;}

            .lcqs .lcqs__right{}
                .lcqs .lcqs__right blockquote{
                    padding-left: 30px;
                    padding-right: 30px;}
                    .lcqs .lcqs__right blockquote.small-mobile p{
                        font-size: 18px;}
                        .lcqs .lcqs__right blockquote.small-mobile p cite{
                            font-size: 14px;}
                .lcqs .lcqs__right blockquote p{
                    font-size: 20px;}
                    .lcqs .lcqs__right blockquote p cite{
                        font-size: 15px;}

            .lcqs .quote-circle{
                max-width: 461px;}

    }

/*
 * Year Content
 **/

.multi-year-content-col{}
    .multi-year-content-col > *:last-of-type{
        margin-bottom: 0px!important;}
    .multi-year-content-col > *:not(:last-of-type) {
        margin-bottom: 30px;}

    @media screen and (max-width: 991px){
        .multi-year-content-col{
            width: 100%;}
            .multi-year-content-col > *:not(:last-of-type) {
                margin-bottom: 40px;}
    }

.year-content{
    padding: 20px;
    background-color: var(--siteBg);}
    .year-content >*:first-child{
        margin-top: 0px;}
    .year-content >*:last-child{
        margin-bottom: 0px;}
    .year-content .year-content__year{
        margin-bottom: 10px;
        color: var(--sectionColor);}
    .year-content .year-content__title{
        font-weight: 700;
        margin-bottom: 24px;}
    .year-content .year-content__desc{}
        .year-content .year-content__desc >*:first-child{
            margin-top: 0px;}
        .year-content .year-content__desc >*:last-child{
            margin-bottom: 0px;}

    .year-content .year-content__desc .year-content__rm{
        display: none;
        text-align: center;}
        .year-content .year-content__desc .year-content__rm button{
            cursor: pointer;
            padding: 0px;
            background-color: transparent;
            border: initial;}
        .year-content .year-content__desc .year-content__rm .icon{
            display: block;}
            .year-content .year-content__desc .year-content__rm .icon::after{
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1.5 1L7.18966 6L12.5 1' stroke='%23003056' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");}

        .year-content .read-more.active .year-content__rm .icon{
            transform: scaleY(-1);}

        @media screen and (max-width: 991px){

            .year-content.year-content.year-content.year-content.year-content.year-content{
                max-width: 700px!important;
                margin-left: auto!important;
                margin-right: auto!important;
            }

            .year-content .year-content__desc .year-content__rm{
                display: block;}

            .year-content .read-more .mobile-limit-height{
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
                max-height: 114px; 
                overflow: hidden;}
                .year-content .read-more.active .mobile-limit-height{
                    -webkit-line-clamp: initial;
                    max-height: initial;
                    overflow: hidden;}

            .year-content .read-more .mobile-hide{
                display: none;}
                .year-content .read-more.active .mobile-hide{
                    display: block;}
        } 

    @media screen and (max-width: 991px){
        .year-content{
            margin-bottom: 40px;
            padding: 20px 0px;
            background-color: #FFF;}
            .year-content__inner{
                padding: 30px 20px;
                background-color: #FAFAFA;
                border-radius: 12px;}
            .year-content .year-content__year,
            .year-content .year-content__title{
                text-align: center;}
            .year-content .year-content__desc{
                padding: 20px;
                background-color: #fff;}
            
            .year-content .illus-content{
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 12px;
                max-width: 550px;}
                .year-content .illus-content.extra-mar-bot{
                    margin-bottom: 60px;}
                .year-content .circle{
                    border-width: 0px;}

            .year-content .ksip-v{
                width: 63.3%;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 12px;}

    }

    @media screen and (max-width: 768px){

        .year-content{}
            .year-content .year-content__year{
                margin-bottom: 30px;}
            .year-content .year-content__title{
                margin-bottom: 12px;}

    }


/*
 * Illustration Content
 **/

.illus-content{
    position: relative;}
    .illus-content figure{
        margin: 0px;
        position: relative;
        z-index: 2;}
        .illus-content figure img{
            display: block;
            margin-left: auto;
            margin-right: auto;}
    .illus-content .circle{
        max-width: 563px;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);}

    .illus-content.y-1874{}
        .illus-content.y-1874 .illus-content__inner{
            padding-bottom: 108%;}
        .illus-content.y-1874 figure{
            position: absolute;
            /* top: 0; */
            bottom: -8%;
            left: 0;
            height: 100%;
            width: 100%;}
            .illus-content.y-1874 figure img{
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 90%;
                height: 100%;
                object-fit: contain;
                object-position: bottom;
                /* padding-top: 11%; */
            }
        .illus-content.y-1874 .circle{
            top: 0;
            transform: translateX(-50%);}

    .illus-content.y-1896{}
        .illus-content.y-1896 .illus-content__inner{
            padding-bottom: 100%;}
        .illus-content.y-1896 figure{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 102%;}
            .illus-content.y-1896 figure img{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center 71%;}
        @media screen and (max-width: 991px){
            .illus-content.y-1896{}
                .illus-content.y-1896 .circle{
                    width: 100%;}
        }

    .illus-content.y-1906{}
        .illus-content.y-1906 .illus-content__inner{
            padding-bottom: 100%;}
        .illus-content.y-1906 figure{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;}
            .illus-content.y-1906 figure img{
                position: absolute;
                top: 50%;
                left: 46%;
                transform: translateX(-50%) translateY(-50%);
                width: 67%;
                height: 100%;
                object-fit: contain;
                object-position: center center;}
        @media screen and (max-width: 991px){
            .illus-content.y-1906{}
                .illus-content.y-1906 .circle{
                    width: 87%;}
        }

    .illus-content.y-1947{}
        .illus-content.y-1947 .illus-content__inner{
            padding-bottom: 100%;}
        .illus-content.y-1947 figure{
            position: absolute;
            top: -9%;
            left: 0;
            height: 120%;
            width: 100%;}
            .illus-content.y-1947 figure img{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center 71%;}
        @media screen and (max-width: 991px){
            .illus-content.y-1947{
                margin-top: 40px;} 
                .illus-content.y-1947 .circle{
                    width: 100%;}
        }
    
    .illus-content.y-1965{}
        .illus-content.y-1965 .illus-content__inner{
            padding-bottom: 87%;}
        .illus-content.y-1965 figure{
            position: absolute;
            top: 5%;
            left: 0;
            height: 100%;
            width: 100%;}
            .illus-content.y-1965 figure img{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center 71%;}
        @media screen and (max-width: 991px){
            .illus-content.y-1965{}
                .illus-content.y-1965 .circle{
                    width: 87%;}
        }

    .illus-content.y-1985{}
        .illus-content.y-1985 .illus-content__inner{
            padding-bottom: 100%;}
        .illus-content.y-1985 figure{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;}
            .illus-content.y-1985 figure img{
                position: absolute;
                top: 50%;
                left: 35%;
                transform: translateX(-50%) translateY(-50%);
                width: 70%;
                height: 100%;
                object-fit: contain;
                object-position: center center;}
        @media screen and (max-width: 991px){
            .illus-content.y-1985{}
                .illus-content.y-1985 .circle{
                    width: 100%;}
        }

    .illus-content.y-2014,
    .illus-content.y-2025{}
        .illus-content.y-2014 .illus-content__inner,
        .illus-content.y-2025 .illus-content__inner{
            padding-bottom: 87%;}
        .illus-content.y-2014 figure,
        .illus-content.y-2025 figure{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;}
            .illus-content.y-2014 figure img,
            .illus-content.y-2025 figure img{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center 63%;}
        @media screen and (max-width: 991px){
            .illus-content.y-2014,
            .illus-content.y-2025{}
                .illus-content.y-2014 .circle,
                .illus-content.y-2025 .circle{
                    width: 87%;}
        }

/*
 * Kids Stays in The Picture (Vertical)
 **/

.ksip-v{
    position: relative;
    padding-left: 40px;
    padding-right: 34px;
    max-width: 538px;
    width: 100%;}
    .ksip-v::before{
        content: "";
        position: absolute;
        z-index: 1;
        width: calc(100% - 50px);
        height: 100%;
        top: 0;
        left: 28px;
        background-color: var(--siteBg);}

    .ksip-v .ksip-v__inner{
        position: relative;
        z-index: 2;}
    
    .ksip-v img{
        position: relative;
        z-index: 2;}
        .ksip-v img.front{
            position: absolute;
            z-index: 4;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;}

    .ksip-v .circles{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;}
        .ksip-v .circles.front{
            z-index: 3;}
            .ksip-v .circle-1{
                --width: 53.2%;
                --left: -8.8%;
                /* --top: 31px; */
                --top: 4.8%;

                width: var(--width);
                top: var(--top);
                left: var(--left)}
            .ksip-v .circle-2{
                --width: 43.9%;
                --right: -7.3%;
                /* --bottom: 50px; */
                --bottom: 7.7%;

                width: var(--width);
                bottom: var(--bottom);
                right: var(--right)}
        .ksip-v .circles.back{
            z-index: 1;}
            .ksip-v .circles.back .circle-1{
                width: calc( var(--width) + 24px);
                left: calc( var(--left) - 12px);
                top: calc( var(--top) - 12px)}
            .ksip-v .circles.back .circle-2{
                width: calc( var(--width) + 24px);
                bottom: calc( var(--bottom) - 12px);
                right: calc( var(--right) - 12px)}

    @media screen and (max-width: 991px){
        .ksip-v{
            padding: 5px;}
            .ksip-v::before{
                left: 0;
                height: 100%;
                width: 100%;}

            .ksip-v .circles{}
                .ksip-v .circles.back{
                    display: none;}

    }

/*
 * Kids Stays in The Picture (Horizontal)
 **/

.ksip-h {
    position: relative;
    padding-left: 42px;}
    .ksip-h .ksip-h__inner{
        position: relative;
        z-index: 2;}

    .ksip-h .ksip-h__image-contain{
        position: relative;
        overflow: hidden;}
    
    .ksip-h img{
        position: relative;
        z-index: 2;}
        .ksip-h img.front{
            position: absolute;
            z-index: 4;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform-origin: center;
            transform: scale(1.2);}
        .ksip-h img.back{
            transform-origin: center;
            transform: scale(1.15);}


    .ksip-h .circles{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;}
        .ksip-h .circles.front{
            z-index: 3;}
            .ksip-h .circle-1{
                --width: 66.04%;
                --top: 0;

                width: var(--width);
                top: var(--top);}
        .ksip-h .circles.back{
            z-index: 1;}
            .ksip-h .circles.back .circle-1{
                width: calc( var(--width) + 24px);
                top: calc( var(--top) - 12px)}

    .ksip-h.circle-double{}
        .ksip-h.circle-double::before{
            content: "";
            position: absolute;
            top: 0;
            left: -12px;
            width: calc(100% + 24px);
            height: 100%;
            background-color: var(--siteBg);}
        .ksip-h.circle-double .circle-1{
            --width: 32.2%;
            --left: -42px;
            --top: 12px;
        
            top: var(--top);
            left: var(--left)}

        .ksip-h.circle-double .circle-2{
            --width: 46.7%;
            --right: 0px;
            --top: 23px;
        
            width: var(--width);
            top: var(--top);
            right: var(--right)}

    .ksip-h.circle-small{}
        .ksip-h.circle-small .circle-1{
            --width: 58%;}

    .ksip-h.circle-mid-right{
        padding-left: 0px;}
        .ksip-h.circle-mid-right::before{
            content: "";
            position: absolute;
            top: 0;
            left: -12px;
            width: calc(100% + 24px);
            height: 100%;
            background-color: var(--siteBg);}
        .ksip-h.circle-mid-right .circles.front{}
            .ksip-h.circle-mid-right .circle-1{
                --right: 31px;
                right: var(--right)}
        .ksip-h.circle-mid-right .circles.back{}
            .ksip-h.circle-mid-right .circles.back .circle-1{
                right: calc( var(--right) - 12px);}

    .ksip-h.circle-left{}
        .ksip-h.circle-left .circles.front{}
            .ksip-h.circle-left .circle-1{
                --left: -42px;
                left: var(--left)}
        .ksip-h.circle-left .circles.back{}
            .ksip-h.circle-left .circles.back .circle-1{
                left: calc( var(--left) - 12px);}

    .ksip-h.circle-right{
        padding-left: 0px;
        padding-right: 42px;}
        .ksip-h.circle-right .circles.front{}
            .ksip-h.circle-right .circle-1{
                --right: -42px;
                right: var(--right)}
        .ksip-h.circle-right .circles.back{}
            .ksip-h.circle-right .circles.back .circle-1{
                right: calc( var(--right) - 12px);}

    .ksip-h.circle-offset-top{}
        .ksip-h.circle-offset-top .circles.front{
            z-index: 3;}
            .ksip-h.circle-offset-top .circle-1{
                --top: 25px;}

    .ksip-h.circle-neg-top{}
        .ksip-h.circle-neg-top .circles.front{}
            .ksip-h.circle-neg-top .circle-1{
                --top: -12px;}

    @media screen and (max-width: 991px){
        .ksip-h {
            margin-top: 50px;
            margin-bottom: 50px;
            position: relative;
            padding-left: 30px;}

            .ksip-h.circle-double{}
                .ksip-h.circle-double::before{
                    display: none;}

            .ksip-h.circle-mid-right{}
                .ksip-h.circle-mid-right::before{
                    display: none;}

            .ksip-h.circle-left .circles{}
                .ksip-h.circle-left .circles.front{}
                    .ksip-h.circle-left .circle-1{
                        --left: -30px;}

            .ksip-h.circle-right .circles{}
                .ksip-h.circle-right .circles.front{}
                    .ksip-h.circle-right .circle-1{
                        --right: -30px;}

                .ksip-h .circles.back{
                    display: none;}
    }

/*
 * Two Col Year Content
 **/

.tcyc{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 35px;
    /* max-width: var(--contentSize); */
    max-width: 1090px;
    width: 100%;}

    .tcyc.align-center .tcyc__inner{
        align-items: center;}
    
    .tcyc.reverse{}
        .tcyc.reverse .tcyc__inner{
            flex-direction: row-reverse;}
            .tcyc.reverse .tcyc__col:first-of-type .tcyc__col-inner,
            .tcyc.reverse .tcyc__col:first-of-type .year-content{
                margin-left: auto;} 
            .tcyc.reverse .tcyc__col:last-of-type .tcyc__col-inner,
            .tcyc.reverse .tcyc__col:last-of-type .year-content{
                margin-right: auto;} 

    .tcyc__inner{
        gap: 0px;
        display: flex;}
    .tcyc__col{
        width: 50%;}
        .tcyc__col.desktop-pad-top-81{
            padding-top: 81px;}
        .tcyc__col.desktop-pad-top-188{
            padding-top: 188px;}
        .tcyc__col.desktop-pad-top-230{
            padding-top: 230px;}
        .tcyc__col.desktop-pad-top-300{
            padding-top: 300px;}
        /* .tcyc__col:first-of-type .year-content{
            margin-left: auto;} */
        .tcyc__col:last-of-type .tcyc__col-inner,
        .tcyc__col:last-of-type .year-content{
            margin-left: auto;} 
        /* .tcyc__col-inner{
            width: 87.4%;} */
        .tcyc__col .year-content{
            max-width: 460px;
            width: 87.5%;}

    /* Scroll Lock Version */
    .tcyc.scroll-lock{
        /* height: 200vh; */}
        .tcyc.scroll-lock .tcyc__col{
            opacity: 1;}

    @media screen and (min-width: 991px){
        .tcyc.desktop-neg-mar-top-54{
            margin-top: -54px;
        }

        .tcyc.desktop-neg-mar-top-84{
            margin-top: -84px;
        }

        .tcyc.desktop-neg-mar-top-160{
            margin-top: -160px;
        }
    }

    @media screen and (max-width: 991px){
        .tcyc{
            margin-bottom: 40px;}
            .tcyc__inner{
                display: block;}
            .tcyc__col{
                width: 100%;}
                .tcyc__col.mobile-hide{
                    display: none;}
                .tcyc__col:first-of-type{
                    margin-bottom: 40px;}
                .tcyc__col.desktop-pad-top-81,
                .tcyc__col.desktop-pad-top-188,
                .tcyc__col.desktop-pad-top-230,
                .tcyc__col.desktop-pad-top-300{
                    padding-top: 0px;}
                .tcyc__col .year-content{
                    max-width: 100%;
                    width: 100%;}
    }

/*
 * Branch Year Content
 **/

.byc{}
    .byc.no-image{}
        .byc.no-image .byc__top{
            height: 194px;
            margin: 0px 0px 0px;
            position: relative;}

    .byc__top{
        margin: 0px 0px -12px;
        position: relative;}
    .byc__image{
        position: relative;
        z-index: 2;
        margin: 0px;
        max-width: 460px;
        width: 100%;
        display: flex;
        justify-content: center;}
        .byc.right .byc__image{
            margin-left: auto;}
        .byc__image img{
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: 100%;
            max-width: 344px;
            width: 100%;
            border: 12px solid var(--siteBg);}

    .byc .branch-contain{
        position: absolute;
        z-index: 1;
        top: 50%;
        transform: translateY(-50%);}
        .byc.left .branch-contain{
            right: -6px;}
        .byc.right .branch-contain{
            left: -6px;}
    
    @media screen and (max-width: 991px){

        .byc{}
            .byc .byc__top{
                display: none;}
            .byc .branch-contain{
                display: none;}


            .byc .byc__image{
                margin-bottom: 20px;
                margin-left: auto;
                margin-right: auto;}
                .byc .byc__image.desktop-hide{
                    display: flex!important;}
                .byc .byc__image img{
                    border: initial;
                    max-width: 320px;}

            .byc .year-content{
                margin-bottom: 0px;}
    }

/*
 * Branch
 **/

.branch{}
    .branch.reverse{
        transform: scaleX(-1);}

/*
 * Media Text
 **/

.media-text{
    margin-bottom: 30px;
    max-width: 1360px; 
    margin-left: auto;
    margin-right: auto;}

    .media-text.reverse{}
        .media-text.reverse .media-text__inner{
            flex-direction: row-reverse;}
        .media-text.reverse .media-text__text{}
            .media-text.reverse .media-text__text-inner {
                margin-left: auto;}
            .media-text.reverse .media-text__text-inner >*{
                margin-left: initial!important;
                margin-right: auto;}
            .media-text.reverse .media-text__media .branch-contain{
                right: -6px;}

    .media-text:not(.reverse){}
        .media-text .media-text__text{}
            .media-text:not(.reverse) .media-text__text-inner{}
                .media-text:not(.reverse) .media-text__text-inner >*{
                    margin-left: auto;}
        .media-text:not(.reverse) .media-text__media{}
            .media-text:not(.reverse) .media-text__media-inner{
                margin-left: auto;}
            .media-text:not(.reverse) .media-text__media .branch-contain{
                left: -6px;}

    .media-text.offset-branch-top{}
        .media-text.offset-branch-top .media-text__media{}
            .media-text.offset-branch-top .media-text__media .branch-contain{
                top: 60%;}

    .media-text .media-text__inner{
        display: flex;
        align-items: center;
        justify-content: space-between;}

    .media-text .media-text__text{
        /* width: 43.7%; */
        width: 50%;}
        .media-text .media-text__text-inner{
            width: 87.4%;}
        .media-text .media-text__text-inner >*{
            /* margin-left: auto; */
            max-width: 460px;
            width: 100%;}

    .media-text .media-text__media{
        width: 50%;
        position: relative;}
        .media-text .media-text__media-inner{
            width: 85.4%;
        }
        .media-text .media-text__media .branch-contain{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);}

    @media screen and (min-width: 1399px){
        .media-text.desktop-l-neg-mar-bot-25{
            margin-bottom: -25px;}
    }

    @media screen and (min-width: 991px){
        .media-text.desktop-mar-bot-80{
            margin-bottom: 80px;}
    }

    @media screen and (max-width: 991px){

        .media-text{
            margin-bottom: 40px;}
            .media-text .media-text__text{
                width: 100%;}
                .media-text .media-text__text .year-content{
                    margin-bottom: 0px;}
                .media-text .media-text__text-inner{
                    width: 100%;}
                    .media-text .media-text__text-inner >*{
                        max-width: 100%;}
            .media-text .media-text__media{
                display: none;}
    }

    @media screen and (max-width: 479px){

        .media-text{
            margin-right: calc(var(--sitePadding) * -1);
            margin-left: calc(var(--sitePadding) * -1);
            padding-left: 5px;
            padding-right: 5px;
        }

    }

/*
 * Overlap Media Text
 **/

.omtc{
    margin-bottom: 30px;
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;}

    .omtc.align-bottom{}
        .omtc.align-bottom .omtc__inner{
            align-items: flex-end;}

    .omtc:not(.reverse) .omtc__text-inner{
        display: flex;
        justify-content: flex-end;}

    .omtc.reverse{}
        .omtc.reverse .omtc__inner{
            flex-direction: row-reverse;}


    .omtc__inner{
        display: flex;
        justify-content: space-between;
        align-items: center;}

    .omtc__media{
        width: 61%;}
        .omtc__media .illus-content{}
            .omtc__media .illus-content .circle{
                max-width: 740px;}


    .omtc__text {
        width: 38.6%;}
        .omtc__text .year-content{
            max-width: 460px;
            width: 100%;}

    .omtc .byc{}
        .omtc .byc.right{}
            .omtc .byc.right .branch-contain{
                width: 105%;
                left: -30.7%} 

    @media screen and (min-width: 1399px){
        .omtc.desktop-neg-mar-top-70{
            margin-top: -70px;}
    }

    @media screen and (min-width: 991px){
        .omtc.desktop-neg-mar-top-400{
            margin-top: -400px;}

        .omtc.desktop-neg-mar-top-70{
            margin-top: -20px;}
    }

    @media screen and (max-width: 1299px){

        .omtc .byc{}
            .omtc .byc.right{}
                .omtc .byc.right .branch-contain{
                    left: -30.8%} 


    }

    @media screen and (max-width: 1199px){

        .omtc .byc{}
            .omtc .byc.right{}
                .omtc .byc.right .branch-contain{
                    left: -30.9%} 


    }

    @media screen and (max-width: 991px){
        .omtc{
            margin-bottom: 40px;}
        
            .omtc__media{
                display: none;}

            .omtc__text{
                width: 100%;}
                .omtc__text .year-content{
                    margin-bottom: 0px;
                    max-width: 100%;}

    }

/*
 * Site Footer
 **/

.site-footer{}

    .site-footer__top{
        position: relative;
        color: #fff;
        background-color: var(--darkBlue);
        text-align: center;
    
        margin-top: 84px;
        padding-top: 128px;
        padding-bottom: 130px;
        padding-left: var(--sitePadding);
        padding-right: var(--sitePadding);}

    .site-footer .site-footer__circle-top{
        z-index: 1;
        top: -84px;
        left: 50%;
        transform: translateX(-50%);
        width: 354px;}
    
    .site-footer__circles {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        max-width: var(--extraExtraWideSize);
        width: 100%;
        margin-left: auto;
        margin-right: auto;}
        .site-footer__circles-left,
        .site-footer__circles-right{
            position: absolute;}
        .site-footer__circles-left{
            width: 36.25%;
            top: -133px;
            left: -4.3%;}
            .site-footer__circles-left > .inner{
                padding-bottom: 111%;}
                .site-footer__circles-left .circle-1 {
                    left: 29.6%;
                    top: 0;
                    width: 20.8%;}
                .site-footer__circles-left .circle-2 {
                    right: 0;
                    top: 9.4%;
                    width: 35.4%;}
                .site-footer__circles-left .circle-3 {
                    left: 0;
                    bottom: 0;
                    width: 70.4%;}
        .site-footer__circles-right{
            width: 34.58%;
            top: -184px;
            right: -7.4%;}
            .site-footer__circles-right > .inner{
                padding-bottom: 143%;}
                .site-footer__circles-right .circle-1 {
                    right: 0;
                    top: 0;
                    width: 73.8%;}
                .site-footer__circles-right .circle-2 {
                    left: 0;
                    top: 49.7%;
                    width: 37.1%;}
                .site-footer__circles-right .circle-3 {
                    left: 33.5%;
                    bottom: 0;
                    width: 21.8%;}
    

    .site-footer .site-footer__inner{
        position: relative;
        z-index: 3;
        max-width: var(--smallSize);
        width: 100%;
        margin-left: auto;
        margin-right: auto;}

    .site-footer .font-display{
        margin-bottom: 40px;}
    .site-footer .faux-h2{
        font-weight: 700;}
    .site-footer p:not(.faux-h2){
        max-width: 705px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;}
    .site-footer .buttons{
        margin-top: 20px;}

    .site-footer__bottom{
        color: #fff;
        background-color: var(--cornflower);

        padding-top: 32px;
        padding-bottom: 32px;
        padding-left: var(--sitePadding);
        padding-right: var(--sitePadding);
    
        text-align: center;}
        .site-footer__bottom .inner{
            position: relative;
            z-index: 3;
            max-width: var(--smallSize);
            width: 100%;
            margin-left: auto;
            margin-right: auto;}
        .site-footer__bottom p:not(.faux-h2){
            margin-bottom: 20px;
            max-width: 620px;}

    @media screen and (max-width: 991px){
        .site-footer__top{
            margin-top: 50px;
            padding-top: 80px;
            padding-bottom: 80px;}
            .site-footer .site-footer__circle-top{
                top: -50px;
                width: 250px;}
            .site-footer__circles {}
                .site-footer__circles-left{
                    top: -80px;}
                .site-footer__circles-right{
                    top: -95px;}
    }

    @media screen and (max-width: 576px){
        .site-footer{}
            .site-footer__circles {}
                .site-footer__circles-left{
                    width: 39%;}
                .site-footer__circles-right{
                    width: 38%;}
    }