@import url('//fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
/************ TEMPLATE  ************
Mockup #1_v2 Approved

REVISIONS
- Instead of the gray horizontal transition lines, just make them all green like the one at the top.

FONTS / ALTERNATIVES / WEIGHTS
Open Sans: Mixture of regular, bold, and extra bold weights.
Mission Statment: Cormorant Garamond Italic
Colors: Green, white, and gray (4C4C4C rgb(76,76,76)

COLORS (GRADIENTS IF ANY) INCLUDE RGB
Primary:  Blue 1C4E70 rgb(28,78,112)
Secondary: Green 808E2A rgb(128,142,42)
Tertiary: White

Green Gradient (Buttons): Dark on Bottom and light on top
- 808E2A rgb(128,142,42) to 9AA735 rgb(154,167,53)
- Buttons in header/footer at a 5px green stroke

IMAGES (OPACITY, BLUR RADIUS IN PX, ROTATOR RATIO)
- Header/Footer Image: 85% Opacity color overlay with a 7px Radius Blur
- Other background images: 85% Opacity color overlay with a 2px Radius Blur

VECTOR GRAPHICS (IF ANY) [SPECIAL ICONS?]
- Icons included in Dropbox

ADDITIONAL NOTES (FX, REQUESTS, HELPFUL TEXT)
- Social Media Icons(Header/Footer): White at 70% Opacity
************/

.site-1 {
    --primary-color: #1C4E70;
    --secondary-color: #808E2A;
    --tertiary-color: #4C4C4C;

    --primary-rgb: 28,78,112;
    --secondary-rgb: 128,142,42;
    --tertiary-rgb: 76,76,76;

    --default-white: #ffffff;
    --default-black: #000000;

    --title-font-family: 'Open Sans', sans-serif;
    --body-font-family: 'Open Sans', sans-serif;

    --heading-color: var(--primary-color);
    --heading-font-family: var(--title-font-family);

    --title-border-bottom: 1px solid var(--secondary-color);

    --home-title-font: var(--title-font-family);

    --transparent: rgba(255,255,255,0);

    --default-box-shadow: 0px 0px 10px rgba(0,0,0,.5);

    --swiper-box-shadow: var(--default-box-shadow);

    --ql-title-color: var(--default-white);

    --ph-big-sq-width: 44vw;
	--grid-text-font-size: 3vw;
}

.search-page {
    --grid-width: unset;
    --grid-vertical-gap: 2vw;
    --grid-horizontal-gap: 2vw;
    --grid-title-font-size-desktop: 1.5vw;
}
a {color: #267cb7;}

span.dropcap {font-size: 2.5rem; /*font-style: italic;*/ line-height: 1; }


h1.line {
    display: grid;
    grid-template-columns: auto minmax(10px, 1fr);
    align-items: center;
    font-size: 5vw;
    grid-gap: 40px;
    width: 100%;
    border-bottom: none;
    text-align: center;
}
h1.line:after {
    content: '';
    border-top: 1px solid var(--primary-color);
}
h1.background {
	color: white;
	background-color: var(--secondary-color);
	padding: 1.5rem 5rem; 
}

h2.lines {
	display: grid;
    grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
    align-items: center;
	grid-gap: 50px;
	width: 100%;
    border-bottom: none;
	text-align: center;
}
h2.lines:before {
	content: '';
    border-top: 1px solid var(--primary-color);
}
h2.lines:after {
	content: '';
    border-top: 1px solid var(--primary-color);
}
hr.short { padding: 0; margin: 0 auto; width: 150px;}
hr {border-bottom: 5px solid var(--primary-color); }

h3 {border-bottom: 0px solid white;}

h3.line{
    display: grid;
    grid-template-columns: auto minmax(10px, 1fr);
    align-items: center;
    grid-gap: 20px;
    width: 100%;
    border-bottom: none;
    text-align: center;
}
h3.line:after {
    content: '';
    border-top: 1px solid var(--primary-color);
}


@media only screen and (min-width: 50.99rem) {
    .search-page .grid-search .g-content-array > .g-grid {
        flex: 1;
        min-width: 26%;
        max-width: 33%;
        width: unset;
    }
    .search-page .grid-search .g-array-item-text {
        font-size: 1.25vw!important;
        padding: 1vw!important;
    }
    .search-page .grid-search .g-array-item-title > .g-item-title {
        padding: 1vw!important;
    }
    .search-page .grid-search .g-array-item-read-more a {
        font-size: 1.25vw!important;
    }
} 

.site-1 .ql-fa-toplinks {
    --ql-title-color: var(--primary-color);
}

.readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a {
    background: var(--primary-color);
    font-family: var(--body-font-family);
} 

/*************** ALL SITE *****************/
.item-image {display: none;}

 a.greenbutton {
    border-radius: 3px;
    transition: background-color 0.3s ease;
	margin-top: 1rem;
    display: inline-flex;
	background: linear-gradient(to top, #808E2A, #9AA735);
    border: 5px solid var(--secondary-color);
    color: var(--default-white);
    font-size: 1.5vw;
    padding: .75vw 2vw;
    /*font-weight: 700;
    text-transform: uppercase;*/
	
  }

 .greenbutton:hover {
    opacity: .5;
  }

 a.button-blue-rounded {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 15px 35px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s ease;
	font-size: 1.5rem;
    margin-top: 1rem;
    display: inline-flex;
  }

.button-blue-rounded:hover {
    transform: scale(1.05);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
    background-color: #090B22;
  }

a.whitebutton { 
    color: var(--primary-color); 
    font-size: 1rem;
    text-transform: none;
    font-weight: normal;
    background: #ffffff; 
    padding: .7rem 1.3rem; 
    border-radius: .5rem; 
    margin: 0.25rem;
    display: inline-block;
    line-height: 1.125rem;
    border: 2px solid var(--primary-color);
    transition: all .2s ease-in;
}
.whitebutton:hover {background: var(--primary-color); color: white;   border: 2px solid var(--primary-color);}
 

/*************** HOMELAYOUT ***************/ 
/*************** OFFCANVAS ****************/
.g-offcanvas-toggle {color: var(--default-white);} 
.g-offcanvas-toggle .fa-fw {text-shadow: none;}

@media only screen and (max-width: 50.99rem) {
    .site-1 #g-offcanvas .g-social-items {
        display: flex;
        flex-direction: row;
        gap: 2rem;
        align-items: center;
        justify-content: center;
    }
    .site-1 #g-offcanvas .g-social-items a {
        color: var(--secondary-color);
    }
    .site-1 #g-offcanvas .g-social-items a:hover {
        color: var(--tertiary-color);
    }
}

/*************** TOP **********************/ 
/*************** NAVIGATION ***************/
@media only screen and (min-width: 50.99rem) {
    .site-1 #g-navigation {
        background: url('/images/template/bg-header-footer.jpg') 50% 50% no-repeat;
        background-size: cover;
        border-bottom: .5vw solid var(--default-white);
        position: relative;
        z-index: 100;
    }
    .site-1 #g-navigation > .g-container {
        background: rgba(var(--primary-rgb),.85);
        backdrop-filter: blur(7px);
        padding: 3vw 5%!important;
    }

    .site-1 #g-navigation > .g-container > .g-grid > .g-block:has(.g-main-nav) {
        padding-left: 3vw;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1 #g-navigation {
        background: url('/images/template/bg-header-footer.jpg') 50% 50% no-repeat;
        background-size: cover;
        border-bottom: .5vw solid var(--default-white);
        position: relative;
        z-index: 100;
    }
    .site-1 #g-navigation > .g-container {
        background: rgba(var(--primary-rgb),.85);
        backdrop-filter: blur(7px);
        padding: 2rem 5%!important;
    }
}

@media only screen and (min-width: 50.99rem) {
    .g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {
        font-size: 1.25vw;
        font-family: var(--body-font-family);
    }
    .g-main-nav .g-sublevel>li>.g-menu-item-container>.g-menu-item-content>.g-menu-item-title {
        font-size: 1.25vw;
        font-family: var(--body-font-family);
    }

    .site-1 #g-navigation .g-social-items {
        display: flex;
        flex-direction: row;
        gap: 1vw;
        align-items: center;
    }
    .site-1 #g-navigation .g-social-items a {
        color: var(--default-white);
        font-size: 2.75vw;
    }
    .site-1 #g-navigation .g-social-items a:hover {
        color: var(--secondary-color);
    }
}

@media only screen and (min-width: 50.99rem) {
    .social-nav-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        /*align-items: flex-end;*/
    }
    .nav-social-icons {
        width: 50%;
    }
    .nav-button .button {
        background: linear-gradient(to top, #808E2A, #9AA735);
        border: 5px solid var(--secondary-color);
        color: var(--default-white);
        font-size: 1.25vw;
        padding: .75vw 1vw;
        font-weight: 600;
        text-transform: uppercase;
		margin-top: 10px;
    }
    .nav-button .button:hover {
        opacity: .5;
    }
    .site-1 #g-navigation .social-nav-container .g-social-items a {
        font-size: 3.5vw;
        color: var(--default-white);
        opacity: .7;
    }
    .site-1 #g-navigation .social-nav-container .g-social-items a:hover {
        opacity: .5;
    }
    .site-1 #g-navigation .g-social-items {
        justify-content: center;
    }
}

@media only screen and (max-width: 50.99rem) {
    .nav-button .button {
        background: linear-gradient(to top, #808E2A, #9AA735);
        border: 5px solid var(--secondary-color);
        color: var(--default-white);
        font-size: 1.25rem;
        padding: .75rem 2rem;
        font-weight: 700;
        text-transform: uppercase;
    }
    .nav-button .button:hover {
        opacity: .5;
    }

    .site-1 #g-navigation .g-social-items {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
    .site-1 #g-navigation .social-nav-container .g-social-items a {
        font-size: 4rem;
        color: var(--default-white);
        opacity: .7;
    }
    .site-1 #g-navigation .social-nav-container .g-social-items a:hover {
        opacity: .5;
    }
}

@media only screen and (max-width: 50.99rem) {
    #g-navigation .g-logo {
        max-width: 65%;
        margin: 2rem auto;
    }
}
/*************** SLIDESHOW ****************/ 
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-slideshow {
        border-top: .5vw solid var(--secondary-color);
    }

    .fullwidth-swiper {
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: var(--default-box-shadow);
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-slideshow {
        border-top: .5rem solid var(--secondary-color);
    }
}

/*************** HEADER *******************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-header > .g-container {
        padding: 0 5%!important;
    }

    .site-1-home .ql-inner-box {
        --ql-background-color: var(--primary-color);
        --ql-background-hover: var(--secondary-color);
    }

    .site-1-home .ql-inner-box .g-blockcontent-subcontent {
        gap: 3vw;
    }
    .site-1-home .ql-inner-box .g-blockcontent-subcontent-block-content {
        border-radius: 1rem;
        box-shadow: var(--default-box-shadow);
    }
    .site-1-home .ql-inner-box .g-blockcontent-subcontent-title > .g-blockcontent-subcontent-title-text {
        border: none!important;
        font-weight: 400;
        letter-spacing: 2px;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-header .ql-dm {
        --ql-background-color: var(--primary-color);
        --ql-background-hover: var(--secondary-color);
    }
}

/*************** ABOVE ********************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-above {
        background: url('/images/template/leaf-accent.png') 100% 100% no-repeat;
        background-size: 15%;
        border-bottom: .5vw solid var(--tertiary-color);
    }
    .site-1-home #g-above > .g-container {
        padding: 4vw 15%!important;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-above {
        background: url('/images/template/leaf-accent.png') 100% 100% no-repeat;
        background-size: 15%;
        border-bottom: .5rem solid var(--tertiary-color);
    }
    .site-1-home #g-above > .g-container {
        padding: 3rem 15%!important;
    }
}

@media only screen and (min-width: 50.99rem) {
    .mission-title.g-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1vw;
        border-bottom: none;
        font-size: 2vw;
        font-weight: 700;
        text-transform: uppercase;
    }
    .mission-title:before {
        content: '';
        border-bottom: 3px solid var(--primary-color);
        width: 25%;

    }
    .mission-title:after {
        content: '';
        border-bottom: 3px solid var(--primary-color);
        width: 25%;
    }

    .mission-box p {
        color: var(--default-black);
        font-style: italic;
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.75vw;
        text-align: center;
        padding: 0 15% 2vw 15%;
        position: relative;
    }
    .mission-box p:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 30%;
        right: 30%;
        border-bottom: 3px solid var(--primary-color);
        width: 40%;
    }
}

@media only screen and (max-width: 50.99rem) {
    .mission-title.g-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1vw;
        border-bottom: none;
        font-size: 2rem;
        font-weight: 700;
        text-transform: uppercase;
    }
    .mission-title:before {
        content: '';
        border-bottom: 3px solid var(--primary-color);
        width: 5%;

    }
    .mission-title:after {
        content: '';
        border-bottom: 3px solid var(--primary-color);
        width: 5%;
    }

    .mission-box p {
        color: var(--default-black);
        font-style: italic;
        font-family: 'Cormorant Garamond', serif;
        font-size: 1rem;
        text-align: center;
        padding: 0 5% 2rem 5%;
        position: relative;
    }
    .mission-box p:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 30%;
        right: 30%;
        border-bottom: 3px solid var(--primary-color);
        width: 40%;
    }
}


/*************** SHOWCASE *****************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-showcase {
        background: url('/images/template/bg-video.jpg') 50% 50% no-repeat;
        background-size: cover;
        border-top: .5vw solid var(--default-white);
        border-bottom: .5vw solid var(--default-white);
    }
    .site-1-home #g-showcase > .g-container {
        background: rgba(var(--primary-rgb),.85);
        backdrop-filter: blur(7px);
        padding: 3vw 15% 5vw 15%!important;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-showcase {
        background: url('/images/template/bg-video.jpg') 50% 50% no-repeat;
        background-size: cover;
        border-top: .5rem solid var(--default-white);
        border-bottom: .5rem solid var(--default-white);
    }
    .site-1-home #g-showcase > .g-container {
        background: rgba(var(--primary-rgb),.85);
        backdrop-filter: blur(7px);
        padding: 2rem!important;
    }
}

@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-showcase .g-title {
        color: var(--default-white);
        font-size: 2.5vw;
        font-weight: 700;
        margin-bottom: 3vw;
        text-transform: uppercase;
    }
    .site-1-home #g-showcase .g-video-container .g-video {
        border-radius: 1rem;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-showcase .g-title {
        color: var(--default-white);
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 2rem;
        text-transform: uppercase;
    }
    .site-1-home #g-showcase .g-video-container .g-video {
        border-radius: 1rem;
    }
}

/*************** UTILITY ******************/
.site-1-home #g-utility .g-array-item-text {
    margin: 0;
    padding: 0;
}

@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-utility {
        border-top: .5vw solid var(--tertiary-color);
        border-bottom: .5vw solid var(--tertiary-color);
    }
    .site-1-home #g-utility > .g-container {
        padding: 3vw 5%!important;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-utility {
        border-top: .5rem solid var(--tertiary-color);
        border-bottom: .5rem solid var(--tertiary-color);
    }
    .site-1-home #g-utility > .g-container {
        padding: 3rem 1rem!important;
    }
}

@media only screen and (min-width: 50.99rem) {
    .impact-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1vw;
        margin-bottom: 2vw;
    }
    .impact-title > div:not(.impact-title-center) {
        flex: 40;
        border-bottom: 4px solid var(--primary-color);
    }
    .impact-title .impact-title-center {
        flex: 20;
    }
    .impact-title .impact-title-center h1 {
        text-align: center;
        font-size: 2.5vw;
        color: var(--primary-color);
        font-weight: 700;
        text-transform: uppercase;
        margin: 0;
    }
    .impact-title .impact-title-center h6 {
        text-align: center;
        font-size: 1.5vw;
        color: var(--secondary-color);
        font-weight: 700;
        margin: 0;
    }
}

@media only screen and (max-width: 50.99rem) {
    .impact-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    .impact-title > div:not(.impact-title-center) {
        flex: 20;
        border-bottom: 4px solid var(--primary-color);
    }
    .impact-title .impact-title-center {
        flex: 60;
    }
    .impact-title .impact-title-center h1 {
        text-align: center;
        font-size: 1.75rem;
        color: var(--primary-color);
        font-weight: 700;
        text-transform: uppercase;
        margin: 0;
    }
    .impact-title .impact-title-center h6 {
        text-align: center;
        font-size: 1rem;
        color: var(--secondary-color);
        font-weight: 700;
        margin: 0;
    }
}

@media only screen and (min-width: 50.99rem) {
    .impact-wrapper {
        display: flex;
        flex-direction: row;
        gap: 7vw;
    }
    .impact-wrapper .impacts {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1vw;
    }
    .impact-wrapper .impacts .impact-image {
        text-align: center;
        padding-bottom: 1vw;
    }
    .impact-wrapper .impacts .impact-image img {
        height: 6vw;
        width: auto;
    }
    .impact-wrapper .impacts .impact-button-b {
        width: 100%;
        text-align: center;
        background: var(--secondary-color);
        border: 5px solid var(--default-white);
        box-shadow: 1px 0px 0px 5px var(--secondary-color);
        border-radius: 1rem;
        overflow: hidden;
        padding: .75vw 0;
        font-size: 2.5vw;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--default-white);
    }
    .impact-wrapper .impacts .impact-subtitle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .impact-wrapper .impacts .impact-subtitle h1 {
        font-size: 2vw;
        font-weight: 700;
        line-height: 2vw;
    }
    .impact-wrapper .impacts .impact-subtitle p {
        color: var(--primary-color);
        font-weight: 700;
    }
}

@media only screen and (max-width: 50.99rem) {
    .impact-wrapper {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .impact-wrapper .impacts {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .impact-wrapper .impacts .impact-image {
        text-align: center;
        padding-bottom: 1vw;
    }
    .impact-wrapper .impacts .impact-image img {
        height: 20vw;
        width: auto;
    }
    .impact-wrapper .impacts .impact-button-b {
        width: 100%;
        text-align: center;
        background: var(--secondary-color);
        border: 5px solid var(--default-white);
        box-shadow: 1px 0px 0px 5px var(--secondary-color);
        border-radius: 1rem;
        overflow: hidden;
        padding: .75rem 0;
        font-size: 2.5rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--default-white);
    }
    .impact-wrapper .impacts .impact-subtitle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .impact-wrapper .impacts .impact-subtitle h1 {
        font-size: 2rem;
        font-weight: 700;
        line-height: 2rem;
    }
    .impact-wrapper .impacts .impact-subtitle p {
        color: var(--primary-color);
        font-weight: 700;
    }
}

/*************** FEATURE ******************/
/*************** MAIN *********************/
@media only screen and (min-width: 50.99rem) {
    .e-news-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom: 5px solid var(--default-white);
        margin-bottom: 2vw;
        padding-bottom: 2vw;
    }
    .e-news-title > div {
        flex: 1;
    }
    .e-news-title .e-title {
        text-align: center;
    }
    .e-news-title .e-title h1 {
        color: var(--default-white);
        font-size: 2.5vw;
        font-weight: 700;
        text-transform: uppercase;
    }
    .e-news-title .e-social-items {
        display: flex;
        justify-content: flex-end;
    }
    .e-news-title .e-social-items .g-social-items a {
        font-size: 3vw;
        color: var(--default-white);
        opacity: .7;
    }
    .e-news-title .e-social-items .g-social-items a:hover {
        opacity: .5;
    }
}

@media only screen and (max-width: 50.99rem) {
    .e-news-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom: 5px solid var(--default-white);
        margin-bottom: 2rem;
        padding-bottom: .5rem;
    }
    .e-news-title .blank-box {
        display: none!important;
    }
    .e-news-title > div {
        flex: 1;
    }
    .e-news-title .e-title {
        text-align: center;
    }
    .e-news-title .e-title h1 {
        color: var(--default-white);
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
    }
    .e-news-title .e-social-items {
        display: flex;
        justify-content: flex-end;
    }
    .e-news-title .e-social-items .g-social-items a {
        font-size: 3rem;
        color: var(--default-white);
        opacity: .7;
    }
    .e-news-title .e-social-items .g-social-items a:hover {
        opacity: .5;
    }
}

@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-container-main {
        background: url('/images/template/bg-news.jpg') 50% 50% no-repeat;
        background-size: cover;
        border-top: .5vw solid var(--default-white);
        border-bottom: .5vw solid var(--default-white);
    }
    .site-1-home #g-container-main > .g-container {
        background: rgba(var(--primary-rgb),.85);
        backdrop-filter: blur(7px);
        padding: 3vw 5%!important;
    }

    .site-1-home .g-content-array > .g-grid > .g-block > .g-content {
        background: transparent;
    }
    .site-1-home .ph-sq-5 .g-array-item {
        padding: 1vw!important;
        border-radius: 1rem;
        transition: .3s all ease-in-out;
    }
    .site-1-home .ph-sq-5 .g-content-array > .g-grid :is(.g-block > .g-content, .g-array-item) {
        background: none!important;
        box-shadow: none;
    }   
    .site-1-home .ph-sq-5 .g-array-item-title {
        padding: 1vw 0;
        --ph-title-color: var(--default-white);
    }
    .site-1-home .ph-sq-5 .g-array-item-text {
        color: var(--default-white);
    }
    .site-1-home .ph-sq-5 .g-array-item-read-more {
        opacity: 0;
    }
    .site-1-home .ph-sq-5 .g-array-item-image {
        box-shadow: var(--default-box-shadow);
        border-radius: .5rem;
    }

    .site-1-home .ph-sq-5 .g-content-array > .g-grid:hover .g-array-item {
        background: var(--default-white)!important;
        box-shadow: var(--default-box-shadow)!important;
    }
    .site-1-home .ph-sq-5 .g-content-array > .g-grid:hover .g-array-item-title {
        --ph-title-color: var(--primary-color);
    }
    .site-1-home .ph-sq-5 .g-content-array > .g-grid:hover .g-array-item-text {
        color: var(--primary-color);
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-container-main {
        background: url('/images/template/bg-news.jpg') 50% 50% no-repeat;
        background-size: cover;
        border-top: .5rem solid var(--default-white);
        border-bottom: .5rem solid var(--default-white);
    }
    .site-1-home #g-container-main > .g-container {
        background: rgba(var(--primary-rgb),.85);
        backdrop-filter: blur(7px);
        padding: 3rem 1rem!important;
    }
}

@media only screen and (min-width: 50.99rem) {
    .site-1-home .news-button {
        padding-top: 3vw;
    }
    .site-1-home .news-button .button {
        background: var(--secondary-color);
        font-size: 2vw;
        box-shadow: var(--default-box-shadow);
        padding: .75vw 2vw;
    }
    .site-1-home .news-button .button:hover {
        background: var(--tertiary-color);
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home .news-button .button {
        background: var(--secondary-color);
        box-shadow: var(--default-box-shadow);
    }
    .site-1-home .news-button .button:hover {
        background: var(--tertiary-color);
    }
}

@media only screen and (min-width: 50.99rem) {
    .site-1-sub #g-mainbar {
        min-height: 30vh;
    }
}

@media only screen and (max-width: 50.99rem) {
    :is(.site-1-sub, .site-2-sub) #g-mainbar > .g-grid > .g-block > .g-content {
        margin: 0;
        padding: 0;
    }
}

/*************** EXPANDED *****************/ 
.site-1-home #g-expanded .g-array-item-text {
    margin: 0;
    padding: 0;
}

@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-expanded {
        border-top: .5vw solid var(--tertiary-color);
        border-bottom: .5vw solid var(--tertiary-color);
    }
    .site-1-home #g-expanded > .g-container {
        padding: 5vw 10%!important;
    }

    .site-1-home #g-expanded .patron-wrapper {
        display: flex;
        flex-direction: row;
        gap: 2vw;
    }
    .site-1-home #g-expanded .patron-wrapper .patron-image {
        flex: 30;
    }
    .site-1-home #g-expanded .patron-wrapper .patron-image img {
        border-radius: 1rem;
        box-shadow: var(--default-box-shadow);
    }
    .site-1-home #g-expanded .patron-wrapper .patron-text {
        flex: 70;
    }
    .site-1-home #g-expanded .patron-wrapper .patron-text h1 {
        font-size: 2.5vw;
        line-height: 2.5vw;
        font-weight: 700;
        text-transform: uppercase;
        padding-right: 11vw;
    }
    .site-1-home #g-expanded .patron-wrapper .patron-text p {
        font-size: 1.45vw;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-expanded {
        border-top: .5rem solid var(--tertiary-color);
        border-bottom: .5rem solid var(--tertiary-color);
    }
    .site-1-home #g-expanded > .g-container {
        padding: 2rem 3rem!important;
    }

    .site-1-home #g-expanded .patron-wrapper {
        display: flex;
        flex-direction: column;
        gap: 2vw;
    }
    .site-1-home #g-expanded .patron-wrapper .patron-image {
        flex: 30;
    }
    .site-1-home #g-expanded .patron-wrapper .patron-image img {
        border-radius: 1rem;
        box-shadow: var(--default-box-shadow);
    }
    .site-1-home #g-expanded .patron-wrapper .patron-text {
        flex: 70;
    }
    .site-1-home #g-expanded .patron-wrapper .patron-text h1 {
        font-size: 1.25rem;
        line-height: 1.25rem;
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
    }
    .site-1-home #g-expanded .patron-wrapper .patron-text p {
        font-size: 1rem;
        text-align: center;
    }
}

/*************** EXTENSION ****************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-extension {
        border-top: .5vw solid var(--default-white);
    }
    .site-1-home #g-extension > .g-container {
        padding: 3vw 2vw 5vw 2vw!important;
    }

    .site-1-home #g-extension .insta-title h1 {
        text-align: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1vw;
        margin-bottom: 3vw;
        color: var(--default-white);
        font-size: 2.5vw;
        font-weight: 700;
        text-transform: uppercase;
    }
    .site-1-home #g-extension .insta-title h1 > span {
        font-size: 3.5vw;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-extension {
        border-top: .5rem solid var(--default-white);
    }
    .site-1-home #g-extension > .g-container {
        padding: 3rem 2rem 5rem 2rem!important;
    }

    .site-1-home #g-extension .insta-title h1 {
        text-align: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        margin-bottom: 2rem;
        color: var(--default-white);
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
    }
    .site-1-home #g-extension .insta-title h1 > span {
        font-size: 3rem;
    }
}

/*************** BOTTOM *******************/
@media only screen and (min-width: 50.99rem) {
    .site-1 #g-bottom {
        padding: 2vw 0!important;
    }
    .site-1 #g-bottom .admod td {
        padding: 0;
    }
}

/*************** FOOTER *******************/
#g-footer .g-content-array {margin: 0;}
#g-footer a {color: var(--default-white); transition: .3s all ease-in-out;}
#g-footer a:hover {opacity: .5;} 

#g-footer .g-array-item-text {
    margin: 0;
    padding: 0;
}

@media only screen and (min-width: 50.99rem) {
    .site-1 #g-container-footer {
        background: url('/images/template/bg-header-footer.jpg') 50% 50% no-repeat;
        background-size: cover;
    }
    .site-1 #g-container-footer > .g-container {
        background: rgba(var(--primary-rgb),.85);
        backdrop-filter: blur(7px);
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1 #g-container-footer {
        background: url('/images/template/bg-header-footer.jpg') 50% 50% no-repeat;
        background-size: cover;
    }
    .site-1 #g-container-footer > .g-container {
        background: rgba(var(--primary-rgb),.85);
        backdrop-filter: blur(7px);
    }
}

@media only screen and (min-width: 50.99rem) {
    .site-1 #g-footer > .g-container {
        padding: 2vw 5%!important;
    }
    .site-1 .footer-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .site-1 .footer-content {
        width: 50%;
    }
    .site-1 .footer-content :is(h1,h2,h3,h4,h5,h6) {
        font-size: 2vw;
        line-height: 2vw;
        font-weight: 700;
        text-transform: uppercase;
        font-variant-caps: normal;
        border: none;
        background: none;
    }
    .site-1 .footer-content p {
        font-size: 1.25vw;
    }
    .site-1 .footer-content .g-social-items {
        display: flex;
        flex-direction: row;
        gap: 1vw;
    }
    .site-1 .footer-content .g-social-items a {
        font-size: 3vw;
    }
    .site-1 .footer-logo-buttons {
        width: 20%;
        display: flex;
        flex-direction: column;
        gap: 2vw;
    }
    .site-1 .footer-logo-buttons .footer-buttons > p:first-child .button {
        font-weight: 700;
        text-transform: uppercase;
    }

    /*
        background: linear-gradient(to top, #808E2A, #9AA735);
        border: 5px solid var(--secondary-color);
        color: var(--default-white);
        font-size: 1.25vw;
        padding: .75vw 1vw;
        font-weight: 600;
        text-transform: uppercase;
        margin-top: 10px;
    */
    .site-1 .footer-logo-buttons .footer-buttons .button {
        background: linear-gradient(to top, #808E2A, #9AA735);
        border: 5px solid var(--secondary-color);
        color: var(--default-white);
        font-size: 1.25vw;
        padding: .75vw 1vw;
        font-weight: 600;
        text-transform: uppercase;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1 #g-footer > .g-container {
        padding: 2rem 2rem 4rem 2rem!important;
    }
    .site-1 .footer-wrapper {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .site-1 .footer-content .g-social-items {
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
    .site-1 .footer-content .g-social-items a {
        font-size: 4rem;
    }
    .site-1 .footer-logo-buttons {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .site-1 .footer-logo-buttons .footer-buttons .button {
        background: linear-gradient(to top, #808E2A, #9AA735);
        border: 5px solid var(--secondary-color);
        color: var(--default-white);
        font-size: 1.5rem;
        padding: .75rem;
    }
}

/*************** COPYRIGHT ****************/ 
@media only screen and (max-width: 50.99rem) {
    .web-policy {
        justify-content: flex-end;
        padding-right: 10px;
    }
    .site-1 .adminfootericon {
        bottom: 40px
    }

    .site-2 .adminfootericon {
        bottom: 40px
    }
}

/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: var(--primary-color);} 
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {    
    color: var(--default-white); 
    background: var(--secondary-color);
} 

@media only screen and (min-width: 50.99rem) {
    .grid-articles .g-array-item-image img {
		width: 85%;}
}
@media only screen and (max-width: 50.99rem) {
    .grid-mobile-stacked .g-array-item-image img {
		width: 85%;}
	.grid-mobile-stacked .g-array-item-text p {
		font-size: 3vw !important;}
}
    

/*************** SECTIONS *****************/
/*************** SECTIONS FULL COLOR STRIPS AND IMAGES*****************/


.minus10, .platform-content .moduletable.minus10  {  margin: 0 calc(-10vw - 20px); }
.plus10, .platform-content .moduletable.plus10 {  margin: 0 10vw; }
.fullwidthpic { width: 100%;}
img.fullwidth { width: 100%;}

.mtable .sprocket-lists-pagination-hidden {display: none;}


.flexrow > .moduleside { flex-basis: 35%;}
.flexrow > .fiftypercent { flex-basis: 50%;}

@media only screen and (min-width: 50.99rem) {
	.flexrow div.imageside:first-child, .flexrow div.moduleside:first-child { padding-right: 30px;}
	.flexrow div.imageside:last-child, .flexrow div.moduleside:last-child { padding-left: 30px;}
	
	.flexrow > .three-quarters { flex: 3;}
	.flexrow > .imageside { flex: 2;}
	.flexrow > div { order: 2; }
	
}
@media only screen and (max-width: 50.99rem) {
	.flexrow > .three-quarters { order: 2; }
	.flexrow > .imageside { order: 1; }
}
/************ FLEX ITEM  ************/
.flexcolumn { display: flex; flex-direction: column; }
.flexcolumn > div { flex: 1;}
.flexcenter { display: flex; align-items: center; justify-content: center;}

/************ FLEX ITEM  ************/
.flexrow { display: flex; align-items: center; justify-content: center;   }
.flexrow > div { flex: 1;}

@media only screen and (max-width: 50.99rem) {
	.flexrow { flex-direction: column; }
}

.blueback { background: var(--primary-color); padding: 20px; margin-top: 0; margin-bottom: 0; }
.greenback { background: var(--secondary-color); padding: 20px; margin-top: 0; margin-bottom: 0; }

.logostrip30 {background: url(../images/stories/template/mission-strip.jpg) 0% 0% no-repeat; background-size: 100%; padding: 6rem 0;  }
.logostrip {background: url(../images/stories/template/mission-strip-full.jpg) 0% 50% no-repeat; background-size: 100%; padding: 6rem 0; }

.logostrip hr {border-bottom: 5px solid white;}
.logostrip30 hr {border-bottom: 5px solid white;}


@media only screen and (max-width: 50.99rem) {
    #g-container-main {
        margin: 0;
        padding: 0;
    }
    .plus10, .platform-content .moduletable.plus10 {padding: 0 calc(1vw + 10px);}
    .minus10, .platform-content .moduletable.minus10   {margin: 0 calc(-15vw - 15px);}
}


.bback p, .bback li, .bback h1, .bback h2, .bback div .bback h3, .bback h4, .bback h5, .bback h6  { color: #ffffff; }
.logostrip30 p, .logostrip30 li, .logostrip30 h1, .logostrip30 h2, .logostrip30 div .logostrip30 h3, .logostrip30 h4, .logostrip30 h5, .logostrip30 h6{ color: #ffffff; }
.logostrip p, .logostrip li, .logostrip h1, .logostrip h2, .logostrip div .logostrip h3, .logostrip h4, .logostrip h5, .logostrip h6 { color: #ffffff; }
.greenback p, .greenback li, .greenback h1, .greenback h2, .greenback div .greenback h3, .greenback h4, .greenback h5, .greenback h6, .greenback td  { color: var(--primary-color); }


.bback a:not(a.creambutton) {color: white;}
.greenback a {color: var(--primary-color); }
.bback a:hover {color: var(--secondary-color); }
.greenback a:hover  {color: white; }

.visitpage .bback a {color: var(--primary-color); border: 1px solid var(--secondary-color);}
.visitpage .bback a:hover {border: 1px solid var(--secondary-color);}
.padright { padding-right: 30px;}
.padleft { padding-left: 30px;}

.greenstrip {background: url(../images/stories/template/greenstrip.png) 0% 0% no-repeat;  }
.greenstrip h1, .ourlifequotes h1 {font-size: clamp(2.75rem, 4.7vw, 4.5rem); margin: -0.5vw 0; line-height: 6vw;}
.greenstrip h2, .ourlifequotes h2 {font-size: clamp(1.25rem, 2.7vw, 1.5rem); margin-top: 0; letter-spacing: 1px;}
.greenstrip h4, .ourlifequotes h4 {font-size: clamp(2.25rem, 3.7vw, 2.75rem); margin-bottom: -0.5vw;}

.branchstrip {background: url(../images/stories/template/branch-background.jpg) 0% 0% no-repeat;  }

@media only screen and (min-width: 50.99rem) {
	.greenstrip {background-size: 100%; }
	.branchstrip {background-size: 100%; }
}

@media only screen and (max-width: 50.99rem) {
    .padright {padding-right: 5px;}
    .padleft {padding-left: 5px;}
	.greenstrip h1 {line-height: 10vw;}
	.greenstrip {background-size: 150%; }
	
	.pillars {
		flex-direction: column;
		height: auto;
	}
}

p.csscode {background-color: #f7f7f7;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 0.938rem; margin: 0 0 1.5rem;
	border-radius: 0.1875rem;
	font-family: "Menlo", "Monaco", monospace;
	clear: both;
} 


.pillars {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  
}
.pillars > div {
	padding: 0.5rem;
}
.pillars img {
	border-radius: 50%;
	height: 15vw;
    width: 15vw;
}

.whypage h2.lines {grid-gap: 10px;}

@media only screen and (min-width: 50.99rem){
	.whypage  .ph-rec-row.ph-rec-row-4 .g-content-array > .g-grid {
		flex: 25%;
		width: 25%;
	}
	.whypage .ph-rec-row .g-content-array > .g-grid > .g-block {
		margin: 0.5rem;
	}
	.whypage .ph-rec-row .g-content-array > .g-grid {
		padding: 0;
	}
	.whypage .ph-rec-row .g-array-item {
		box-shadow: none;
		background: rgba(28,78,112,0.5);
		min-height: 100%;
		border-top: var(--ph-border-bottom);
	}
	.ph-rec-row .g-content-array .g-array-item .g-array-item-text {
		overflow: auto;
	}
	.whypage .ph-rec-row .g-array-item-image img {
		height: 17vw;
		width: 17vw !important;
		margin: 10% 1vw 2% 1vw !important;
		border-radius: 50%;
	}

    .ph-rec-row .g-array-item {
        max-height: initial;
    }

    .ph-rec-row .g-content-array .g-array-item .g-array-item-text {
        padding-bottom: 0;
    }
}
@media only screen and (max-width: 50.99rem){
	.whypage .ph-rec-row.ph-rec-row-4 .g-content-array > .g-grid {
		width: 100% !important;
	}
	
	.whypage .ph-rec-row .g-content-array > .g-grid > .g-block {
		margin: 0.5rem;
	}
	.whypage .ph-rec-row .g-content-array > .g-grid {
		padding: 0;
	}
	.whypage .ph-rec-row .g-array-item {
		box-shadow: none;
		background: rgba(28,78,112,0.5);
		min-height: 40vw !important;
	}
		
	.whypage .ph-rec-row .g-array-item-image img {
		height: 40vw;
		width: 40vw !important;
		margin: 5% 5% 2% 5% !important;
		border-radius: 50%;
	}
	.whypage .ph-sidebyside-mobile .g-content-array > .g-grid {
		box-shadow: none;
		}	
	.whypage .ph-sidebyside-mobile .g-array-item-text {
		display: initial;
		content-visibility: initial;
	}	
	.whypage .ph-sidebyside-mobile .g-array-item {
		flex-direction: column !important;
	}
	.whypage .ph-sidebyside-mobile .g-content-array .g-array-item-image img {
		position: unset;
        box-shadow: none;
	}
	.whypage .ph-sidebyside-mobile.ph-wide .g-array-item {
		max-height: fit-content/*calc(110vw * 9/16)*/ !important;
	}
	.whypage .ph-sidebyside-mobile.ph-wide .g-content-array .g-array-item-image {
		position: relative;
		max-width: 100%;
		max-height: fit-content/*calc(56vw * 9/16)*/;
		width: 100%;
		height: fit-content/*calc(56vw * 9/16)*/;
        text-align: center;
        display: flex;
        justify-content: center;
        box-shadow: none;
	}
    .whypage .ph-sidebyside-mobile.ph-wide .g-content-array .g-array-item-image > a {
        display: flex;
        justify-content: center;
        box-shadow: none;
    }
    .whypage .ph-sidebyside-mobile .g-array-item-image:after {
        display: none!important;
    }
    .whypage .ph-sidebyside-mobile .g-array-item-text {
        padding: 0 1rem;
    }
}
	
	
	
	

/*************** MOBILE *******************/ 
/*************** ADS **********************/

@media only screen and (min-width: 50.99rem) {
    #site-grid #g-container-main {
        padding-bottom: 3vw;
    }
}

@media only screen and (max-width: 50.99rem) {
	.search-page button.btn {
        background: var(--primary-color)!important;
    }
    .search-page button.btn:hover {
        background: var(--secondary-color)!important;
    }
    .grid.ph-sidebyside-mobile .g-array-item-read-more {
        opacity: 0;
    }
    .grid.ph-sidebyside-mobile .g-array-item-title {
        padding: 1rem;
    }
}

@media only screen and (min-width: 50.99rem) {
    .search-page button.btn {
        background: var(--primary-color)!important;
    }
    .search-page button.btn:hover {
        background: var(--secondary-color)!important;
    }
	.eventspage .ph-sidepics-3 .g-array-item-text, .eventspage .ph-sidepics-3.ph-wide .g-array-item-text {
		display: inline !important;
	}
	.eventspage .ph-sidepics-3 .g-content-array > .g-grid {
        box-shadow: none;
        background: transparent;
		padding: 1vw 0 !important;
		/*border-bottom: 0.5px solid var(--primary-color) !important;*/
        position: relative;
    }
    .eventspage .ph-sidepics-3 .g-content-array > .g-grid:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 25%;
        right: 25%;
        width: 50%;
        border-bottom: 1px solid var(--primary-color) !important;
        height: 1px!important;
    }
    .eventspage .ph-sidepics-3 .g-grid:hover {
        transform: none!important;
    }
    .eventspage .ph-sidepics-3 .g-content-array > .g-grid > .g-block {
        transition: .3s all ease-in-out;
    }
    .eventspage .ph-sidepics-3 .g-grid:hover > .g-block {
        transform: scale(1.05);
    }
	/*.eventspage .blog-type-layout .button {
		border: inherit;
		background: inherit;
	}*/
	.eventspage .ph-sidepics-3 .g-array-item {
        grid-template-columns: 30vw calc(100% - 30vw - 1rem) !important;
        grid-template-rows: 15% 83% 2%;
        max-height: calc(40vw* 9 / 16);
    }
	.eventspage .blog-type-layout .g-array-item-image {
        max-height: calc(30vw* 9 / 16);
        max-width: 30vw;
        height: calc(30vw* 9 / 16);
        width: 30vw;
    }

    .eventspage .ph-sidepics-3.ph-wide .g-array-item-read-more a {
        opacity: 0;
    }

    .eventspage .ph-sidepics-3 .g-array-item-text .button {
        background-color: var(--secondary-color);
        color: white;
        border: none;
        padding: 15px 35px;
        border-radius: 25px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 1.5rem;
        margin-top: 1rem;
        display: inline-flex;
    }

    .eventspage .ph-sidepics-3 .g-array-item-text .button:hover {
        transform: scale(1.05);
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
        background-color: #090B22;
    }
	
}


@media only screen and (min-width: 50.99rem) {
    .bilingual {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 2vw;
    }
    .bilingual .englishtext {
        flex: 1;
    }
    .bilingual .spanishtext {
        flex: 1;
        font-style: italic;
    }
}

@media only screen and (max-width: 50.99rem) {
    .bilingual {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .bilingual .englishtext {
        flex: 1;
    }
    .bilingual .spanishtext {
        flex: 1;
        font-style: italic;
    }
}

.search-page .g-social-items a {
    color: #266ba2;
}

.search-categories {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.search-categories > input {
    margin: 0;
    padding: 0;
}

.search-categories > label {
    margin: 0;
    padding: 0;
    color: #266ba2;
    font-size: 1.25vw;
    font-weight: 500;
}

.search-page #g-utility p {
    font-size: 1.5vw;
}

@media only screen and (max-width: 50.99rem) {
    .search-categories > label {
        margin: 0;
        padding: 0;
        color: #266ba2;
        font-size: 3.25vw;
        font-weight: 500;
    }
    .search-page #g-utility p {
        font-size: 3.5vw;
    }
}

@media only screen and (min-width: 50.99rem) {
    .search-page #g-utility {
        padding: 1vw 5%!important;
    }
    .search-page #g-utility > .g-grid > .g-block > .g-content {
        margin: 0;
        padding: 0;
    }
    .search-page #g-sidebar > .g-grid > .g-block > .g-content {
        margin: 0;
        padding: 0 2vw 0 0;
    }
    .search-page #g-mainbar > .g-grid > .g-block > .g-content {
        margin: 0;
        padding: 0;
    }
}

.search-page #g-container-main {
    padding: 0 5% 2vw 5% !important;
}

.highlight {
    background-color: yellow;
}

.search-page .community-header .g-content {
    padding: 0;
}

@media (min-width: 50.99rem) {
    .site-1-sub #g-mainbar > .g-grid {
        overflow: hidden;
    }

    .whypage .ph-rec-row .g-array-item-image {
        display: grid;
        justify-content: center;
    }

    .whypage .ph-rec-row .g-array-item {
        border: transparent;
    }
}

.modern-alert .g-array-alert-popup {
    background-color: var(--secondary-color);
}

.modern-alert .g-array-alert-icon > .fas {
    color: white;
    background-color: var(--secondary-color);
}

.whypage .ph-rec-row .g-content {
    overflow: hidden;
    border-top-left-radius: 8rem;
    border-top-right-radius: 8rem;
}