@import url('//fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
/************ TEMPLATE  ************
*wants alt tags, make sure homepages has them!!! 
____________CHURCH NOTES_______________
- Menu and Tabs on mockup are accurate (Church)
- Footer information is accurate(Church)

Fonts / Weights
Nobel (Adobe)
Alternative: Raleway Google (combo of regular weight and bold)

Colors / Gradients
-Primary: Blue 3D4E63 rgb(61,78,99)
-Secondary: Brown 817755 rgb(129,119,85)
-Tertiary: Off-white F2F2F2 rgb(242,242,242)
-Menu Gradient: Gray A3A3A3 rgb(163,163,163) to Off white(above) just make it close to this.
-Text either the primary blue or white (I used grays in my mockup but ignore that)

- Blurs for background images set to 2px radius
- Off-white over image set to 90% opacity

___________SCHOOL NOTES____________
- A "school-Icons" folder is on Dropbox for the Quicklinks

Fonts / Weights
Nobel (Adobe)
Alternative: Raleway Google (combo of regular weight and bold)
Color: Green 3B9358 rgb(59,147,88)

Colors
Dark Blue Background: 005070 rgb(0,80,112)
-Gradient Green: 0B8047 rgb(11,128,71) bottom left to 11B266 rgb(17,178,102) top right. Use this for header/footer and buttons(QLs)
-Blue to Green Gradient: 0887C8 rgb(8,135,200) left to 11B266 rgb(17,178,102) right

Background Images
- 90% Opacity color with 1px radius blur on the image

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

.site-1 {
    --primary-color: #3D4E63;
    --secondary-color: #817755;
    --tertiary-color: #F2F2F2;

    --primary-rgb: 61,78,99;
    --secondary-rgb: 129,119,85;
    --tertiary-rgb: 242,242,242;

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

    --title-font-family: 'Raleway', sans-serif;
    --body-font-family: 'Raleway', 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: -10px 10px 10px -5px rgba(0,0,0,0.3);
    --default-box-shadow-hover: -20px 20px 10px -5px rgba(0,0,0,0.3);

    --default-text-shadow: 1px 1px 5px #000000;

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

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

    --ph-title-font-size-desktop: 1.4vw;
    --ph-title-font-size-mobile: 5vw;
    --ph-text-font-size-desktop: 1vw;
    --ph-title-color: var(--primary-color);
    --ph-title-weight: 700;

    --mt-para-color: var(--default-white);
    --mt-para-desktop: 1vw;

    --grid-vertical-gap: 2vw;
}

.site-2 {
    --primary-color: #3B9358;
    --secondary-color: #005070;
    --tertiary-color: #F2F2F2;

    --primary-rgb: 59,147,88;
    --secondary-rgb: 0,80,112;
    --tertiary-rgb: 242,242,242;

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

    --title-font-family: 'Raleway', sans-serif;
    --body-font-family: 'Raleway', 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: -10px 10px 10px -5px rgba(0,0,0,0.3);
    --default-box-shadow-hover: -20px 20px 10px -5px rgba(0,0,0,0.3);

    --default-text-shadow: 1px 1px 5px #000000;

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

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

    --ph-title-font-size-desktop: 1.4vw;
    --ph-title-font-size-mobile: 5vw;
    --ph-text-font-size-desktop: 1vw;
    --ph-title-color: var(--primary-color);
    --ph-title-weight: 700;

    --mt-para-color: var(--default-white);

    --grid-vertical-gap: 2vw;
}

.tv-display {
    --primary-color: #3D4E63;
    --secondary-color: #817755;
    --tertiary-color: #F2F2F2;

    --primary-rgb: 61,78,99;
    --secondary-rgb: 129,119,85;
    --tertiary-rgb: 242,242,242;

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

    --title-font-family: 'Raleway', sans-serif;
    --body-font-family: 'Raleway', 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: -10px 10px 10px -5px rgba(0,0,0,0.3);
    --default-box-shadow-hover: -20px 20px 10px -5px rgba(0,0,0,0.3);

    --default-text-shadow: 1px 1px 5px #000000;

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

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

    --ph-title-font-size-desktop: 1.4vw;
    --ph-title-font-size-mobile: 5vw;
    --ph-text-font-size-desktop: 1vw;
    --ph-title-color: var(--primary-color);
    --ph-title-weight: 700;

    --mt-para-color: var(--default-white);
    --mt-para-desktop: 1vw;

    --grid-vertical-gap: 2vw;
}

.site-2 .grid-staff {
    --grid-img-width: 15vw;
}

.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(--secondary-color);
    font-family: var(--body-font-family);
} 

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

.g-array-item-text {
    margin: 0!important;
    padding: 0;
}

@media only screen and (min-width: 50.99rem) {
    :is(.site-1-sub, .site-2-sub) .ph-sidepics-3 .g-content-array > .g-grid {
        box-shadow: 0px 0px 15px rgba(0,0,0,.5);
    }
}

@media only screen and (max-width: 50.99rem) {
    :is(.site-1-sub, .site-2-sub) .ph-sidebyside-mobile .g-content-array > .g-grid {
        box-shadow: 0px 0px 15px rgba(0,0,0,.5);
    }
}

hr {border-bottom: 1px 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(--default-white);
    }
    .site-1 #g-offcanvas .g-social-items a:hover {
        color: var(--secondary-color);
    }
}

/*************** TOP **********************/ 

@media (min-width: 50.99rem) {
    :is(.site-1-home, .site-2-home) #g-top .modern-alert .g-joomla-articles {
        padding: 0 3% !important;
    }
}

/*************** NAVIGATION ***************/
@media only screen and (min-width: 50.99rem) {
    .site-1 .g-main-nav {
        background: linear-gradient(to top, #A3A3A3, var(--tertiary-color));
        box-shadow: var(--default-box-shadow);
    }
    :is(.site-1, .site-2) .g-main-nav .g-dropdown {
        backdrop-filter: blur(4px);
    }
    :is(.site-1, .site-2) .g-main-nav .g-toplevel>li.active>.g-menu-item-container {
        border: none;
    }
    .site-1 .g-main-nav .g-toplevel>li>.g-menu-item-container {
        padding: 1rem .775rem;
    }
    .site-1 .g-main-nav .g-toplevel>li:is(.active, .g-selected)>.g-menu-item-container>.g-menu-item-content {
        background: var(--secondary-color);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .site-1 .g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {
        line-height: 1.25vw;
        padding: .5vw;
        border-radius: .35rem;
        transition: 0s all ease-in-out;
        background: transparent;
    }
    .site-1 .g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content>.g-menu-item-title {
        line-height: 1.25vw;
        letter-spacing: 2px;
    }
    .site-1-sub #g-navigation > .g-container > .g-grid:nth-child(2) {
        padding: 1vw!important;
    }
    .site-1-sub #g-navigation {
        background: url('/images/template/mainbar-bg.jpg') 50% 50% no-repeat;
        background-size: cover;
    }
    .site-1-sub #g-navigation > .g-container {
        background: rgba(var(--secondary-rgb),.95);
    }
    .site-1-sub #g-navigation .g-logo {
        text-align: left;
        padding-left: 2vw;
    }
    .site-1-sub #g-navigation .g-logo img {
        width: 45%;
    }
}

@media only screen and (min-width: 50.99rem) {
    .top-social-icons {
        padding: .5vw 6%!important;
    }
    .top-social-icons .g-array-item-text {
        margin: 0;
        padding: 0;
    }
    .top-nav-social-icons {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 2vw;
    }
    .top-nav-social-icons .g-social-items a {
        color: var(--default-white)!important;
        font-size: 2.5rem!important;
        transition: .3s all ease-in-out;
    }
    .top-nav-social-icons .g-social-items a:hover {
        opacity: .5;
    }
    .top-nav-social-icons .top-livestream-text {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: fit-content;
    }
    .top-nav-social-icons .top-livestream-text p {
        max-width: fit-content;
        margin: 0;
        padding: 0;
        font-size: 1.25vw;
        font-weight: 500;
        font-family: var(--title-font-family);
        text-transform: uppercase;
        line-height: 1.5vw;
        letter-spacing: 2px;
    }
}
@media only screen and (max-width: 50.99rem) {
    .top-social-icons {
        padding: 1rem!important;
    }
    .top-social-icons .g-array-item-text {
        margin: 0;
        padding: 0;
    }
    .top-nav-social-icons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }
    .top-nav-social-icons .g-social-items a {
        color: var(--default-white)!important;
        font-size: 2.5rem!important;
        transition: .3s all ease-in-out;
    }
    .top-nav-social-icons .g-social-items a:hover {
        opacity: .5;
    }
    .top-nav-social-icons .top-livestream-text {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: fit-content;
    }
    .top-nav-social-icons .top-livestream-text p {
        max-width: fit-content;
        margin: 0;
        padding: 0;
        font-size: 1.25rem;
        font-weight: 500;
        font-family: var(--title-font-family);
        text-transform: uppercase;
        line-height: 1.5rem;
        letter-spacing: 2px;
    }

    .site-2 .top-nav-social-icons .top-img-icons {
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
    .site-1-home #g-navigation {
        background-color: var(--primary-color) !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-2 .g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {
        font-size: 1.25vw;
        font-family: var(--body-font-family);
        font-weight: 700;
    }
    .site-2 .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);
        font-weight: 700;
    }

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

@media only screen and (max-width: 50.99rem) {
    #g-navigation .g-logo {
        max-width: 65%;
        margin: 2rem auto;
    }
}

@media only screen and (min-width: 50.99rem) {
    .site-2 #g-navigation .g-logo img {
        width: 100%;
    }
    .site-2 #g-navigation {
        border-bottom: .5vw solid var(--tertiary-color);
        box-shadow: var(--default-box-shadow);
        position: relative;
        background: url('/images/template/swiper-bg.jpg') 50% 75% no-repeat;
        background-size: cover;
    }
    .site-2 #g-navigation > .g-container > .g-grid:nth-child(2) {
        padding: 1vw 3%!important;
    }
    .site-2 #g-navigation > .g-container {
        position: relative;
        background: rgba(var(--primary-rgb),.9);
    }
    .site-2 #g-navigation .school-top-social-icons {
        position: absolute;
        top: 1vw;
        right: 1vw;
    }
    .site-2 .top-img-icons {
        display: flex;
        flex-direction: row;
        gap: .5vw;
    }
    .site-2 .top-img-icons a {
        height: 2vw;
        width: 2vw;
        transition: .3s all ease-in-out;
    }
    .site-2 .top-img-icons a:hover {
        opacity: .5;
    }
    .site-2 .top-img-icons img {
        height: 2vw;
        width: 2vw;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-2 .top-nav-social-icons {
        margin-bottom: 1rem;
    }

    .site-2 .top-img-icons img {
        height: 2rem;
        width: 2rem;
    }
}

/*************** SLIDESHOW ****************/ 
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-slideshow video.widevideo {
        height: 36vw!important;
    }
    .site-1-home #g-slideshow .videocontainer {
        position: relative;
        padding: 0 1vw 1vw 0!important;
    }
    .site-1-home #g-slideshow .videocontainer:before {
        content: '';
        position: absolute;
        top: 1vw;
        bottom: 0;
        left: 1vw;
        right: 0;
        height: calc(100% - 1vw);
        width: calc(100% - 1vw);
        background: var(--tertiary-color);
        border-radius: 1rem;
        /*box-shadow: var(--default-box-shadow);*/
        z-index: 1;
    }
    .site-1-home #g-slideshow .videocontainer video.background-video.widevideo {
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: var(--default-box-shadow);
        position: relative;
        z-index: 2;
    }
    .site-1-home #g-slideshow .videocontainer > .flextable {
        display: none!important;
    }

    .site-1-home #g-slideshow > .g-container {
        padding: 3vw 3%!important;
        position: relative;
    }
    .site-1-home .swiper-overlay-logo {
        position: absolute;
        top: 1vw;
        left: 5%;
        z-index: 20;
        height: 17vw;
        width: 17vw;
        pointer-events: none;
        background: rgba(var(--tertiary-rgb),.8);
        backdrop-filter: blur(4px);
        border-radius: 50%;
        overflow: hidden;
        padding: 1.25vw;
        box-shadow: var(--default-box-shadow);
    }
    .mt-big-title {
        font-weight: 700;
        font-size: 3.25vw!important;
        letter-spacing: 1vw;
        line-height: 3.25vw;
        text-transform: uppercase!important;
        border-right: 1vw solid var(--secondary-color);
        margin-bottom: 1vw!important;
        text-shadow: var(--default-text-shadow);
    }
    .mass-times-block p span {
        font-size: 1vw!important;
    }
    .mass-times-block p {
        letter-spacing: 2px;
        margin-bottom: 1vw;
    }
    .mass-times-block p strong {
        text-transform: uppercase;
    }
}

@media only screen and (max-width: 50.99rem) {
    .mt-big-title {
        font-weight: 700;
        font-size: 10vw!important;
        letter-spacing: 1vw;
        line-height: 10vw;
        text-transform: uppercase!important;
        border-right: 1vw solid var(--secondary-color);
        margin-bottom: 2vw!important;
        text-shadow: var(--default-text-shadow);
    }
    .mass-times-block p {
        letter-spacing: 2px;
    }
    .mass-times-block p strong {
        text-transform: uppercase;
    }
}

@media only screen and (min-width: 50.99rem) {
    .standard-swiper-1 {
        position: relative;
        padding: 0 1vw 1vw 0;
    }
    .standard-swiper-1:before {
        content: '';
        position: absolute;
        top: 1vw;
        bottom: 0;
        left: 1vw;
        right: 0;
        height: calc(100% - 1vw);
        width: calc(100% - 1vw);
        background: var(--tertiary-color);
        border-radius: 1rem;
        /*box-shadow: var(--default-box-shadow);*/
        z-index: 1;
    }
    .standard-swiper-1 > .g-content {
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: var(--default-box-shadow);
        position: relative;
        z-index: 2;
    }

    .standard-swiper-1 .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets {
        left: unset;
        right: 1rem;
        transform: none;
        /*background: rgba(var(--primary-rgb),.6);*/
        border-top-left-radius: .5rem;
        border-top-right-radius: .5rem;
        /*backdrop-filter: blur(4px);*/
        flex-direction: row;
        gap: .5rem;
        padding: 1rem;
    }
    .standard-swiper-1 :is(.g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet) {
        margin: 0;
        border: none;
        height: 26px;
        width: 26px;
    }
    .standard-swiper-1 :is(.g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet):not(.swiper-pagination-bullet-active) {
        background: rgba(255,255,255,.5);
    }
    .standard-swiper-1 :is(.g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active::after, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet-active::after) {
        display: none!important;
    }
    .standard-swiper-1 .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active::after, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet-active::after {
        display: none!important;
    }
    .standard-swiper-1 .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::after, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet::after {
        display: none!important;
    }
}

@media only screen and (min-width: 50.99rem) {
    .site-2-home #g-slideshow > .g-container {
        padding: 4vw 3%!important;
    }
}

@media only screen and (min-width: 50.99rem) {
    .swiper-overlay-text-img {
        margin: 0;
        padding: 0;
    }
    .swiper-overlay-text-img .swiper-container {
        overflow: visible!important;
    }
    .swiper-overlay-text-img .g-swiper .g-swiper-slider .swiper-slide {
        background: var(--default-white);
        box-shadow: 0px 0px 10px rgba(0,0,0,.5);
        border-radius: 1rem;
    }
    .swiper-overlay-text-img .g-swiper-slider > .swiper-slide > img {
        width: 66%!important;
        object-position: center;
        object-fit: cover;
        position: absolute;
        bottom: -1vw!important;
        top: 1vw!important;
        right: 1vw!important;
        left: unset!important;
        border-radius: 1rem!important;
        box-shadow: 0px 0px 10px rgba(0,0,0,.5);
        z-index: 21;
        /*border: 1px solid var(--primary-color);*/
    }
    .swiper-overlay-text-img .g-swiper-slider > .swiper-slide > .slide {
        width: 34%!important;
        margin: unset!important;
        left: 1vw!important;
        top: -1vw!important;
        bottom: 1vw!important;
        overflow: hidden;
        border-radius: 1rem!important;
        box-shadow: 0px 0px 10px rgba(0,0,0,.5);
        background: url('/images/template/swiper-bg.jpg') 50% 50% no-repeat;
        background-size: cover;
    }
    .swiper-overlay-text-img .g-swiper-slider > .swiper-slide > .slide > .slide-content-wrapper {
        background: linear-gradient(to right, rgba(8,135,200,.9), rgba(17,178,102,.9))!important;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        position: relative;
    }
    .swiper-overlay-text-img .g-swiper-slider > .swiper-slide > .slide > .slide-content-wrapper > .slide-content {
        padding: 2vw 3vw!important;
        max-height: calc(100% - 4vw)!important;
        overflow: hidden;
    }
    .swiper-overlay-text-img .g-swiper-slider > .swiper-slide > .slide > .slide-content-wrapper > .slide-content > a.button {
        position: absolute;
        bottom: calc(3vw + 26px);
        left: 3vw;
        text-transform: uppercase;
        font-size: 1.5vw;
        line-height: 1.5vw;
        letter-spacing: 2px;
        border-radius: 0;
        border: 2px solid var(--default-white);
        background: transparent;
        transition: .3s all ease-in-out;
        color: var(--default-white);
    }
    #g-slideshow .swiper-overlay-text-img .g-swiper-slider > .swiper-slide > .slide > .slide-content-wrapper > .slide-content > a.button:hover {
        background: var(--secondary-color);
        color: var(--default-white)!important;
    }
    .swiper-overlay-text-img .g-swiper-slider > .swiper-slide > .slide > .slide-content-wrapper > .slide-content > .g-swiper-title {
        margin: 0;
        padding: 0;
        text-align: left;
        border-bottom: 2px solid var(--default-white);
        margin-bottom: 1vw;
        padding-bottom: .5vw;
        font-size: 2vw;
        line-height: 2.25vw;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    .swiper-overlay-text-img .g-swiper-slider > .swiper-slide > .slide > .slide-content-wrapper > .slide-content > .g-swiper-text {
        margin: 0;
        padding: 0;
        text-align: left;
        font-size: 1.25vw;
        line-height: 1.5vw;
        font-weight: 400;
        letter-spacing: 2px;
    }
    .swiper-overlay-text-img :is(.swiper-navigation div[class*="button-next"], .swiper-navigation div[class*="button-prev"]) {
        text-shadow: var(--default-text-shadow);
    }
    .swiper-overlay-text-img .swiper-navigation div[class*="button-next"] {
        right: 2vw;
    }
    .swiper-overlay-text-img .swiper-navigation div[class*="button-prev"] {
        left: 2vw;
    }
    .swiper-overlay-text-img .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets {
        left: 3vw;
        right: unset;
        bottom: 2vw;
        transform: none;
        /*background: rgba(var(--primary-rgb),.6);*/
        border-top-left-radius: .5rem;
        border-top-right-radius: .5rem;
        /*backdrop-filter: blur(4px);*/
        flex-direction: row;
        gap: .5rem;
        padding: 1rem;
        max-width: calc(34% - 6vw);
    }
    .swiper-overlay-text-img :is(.g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet) {
        margin: 0;
        border: none;
        height: 26px;
        width: 26px;
    }
    .swiper-overlay-text-img :is(.g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet):not(.swiper-pagination-bullet-active) {
        background: rgba(255,255,255,.5);
    }
    .swiper-overlay-text-img :is(.g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active::after, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet-active::after) {
        display: none!important;
    }
    .swiper-overlay-text-img .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active::after, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet-active::after {
        display: none!important;
    }
    .swiper-overlay-text-img .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::after, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet::after {
        display: none!important;
    }
}

@media only screen and (max-width: 50.99rem) {
    .swiper-overlay-text-img {
        margin: 0;
        padding: 0;
    }
    .swiper-overlay-text-img .swiper-container {
        overflow: visible!important;
    }
    .swiper-overlay-text-img .g-swiper .g-swiper-slider .swiper-slide {
        background: var(--secondary-color);
        /*box-shadow: 0px 0px 10px rgba(0,0,0,.5);*/
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
    }
    .swiper-overlay-text-img .g-swiper-slider > .swiper-slide > img {
        width: 100%!important;
        height: 56vw!important;
        object-position: center;
        object-fit: cover;
        position: absolute;
        bottom: 0!important;
        top: 0!important;
        right: 0!important;
        left: unset!important;
        /*border-radius: 1rem!important;*/
        box-shadow: 0px 0px 10px rgba(0,0,0,.5);
        z-index: 21;
        /*border: 1px solid var(--primary-color);*/
    }
    .site-2-home .swiper-overlay-text-img > .g-content > #swiper-7711.g-swiper > .g-swiper-slider.swiper-wrapper {
        height: fit-content!important;
    }
    .swiper-overlay-text-img .g-swiper-slider > .swiper-slide > .slide {
        width: calc(100% - 2rem)!important;
        height: 70vw!important;
        margin: unset!important;
        left: 0!important;
        top: 0!important;
        bottom: 0!important;
        margin-top: calc(56vw + 1rem)!important;
        margin-left: 1rem!important;
        margin-right: 1rem!important;
        margin-bottom: 1rem!important;
        position: relative!important;
        overflow: hidden;
        border-radius: 1rem!important;
        box-shadow: 0px 0px 10px rgba(0,0,0,.5);
        background: url('/images/template/swiper-bg.jpg') 50% 50% no-repeat;
        background-size: cover;
    }
    .swiper-overlay-text-img .g-swiper-slider > .swiper-slide > .slide > .slide-content-wrapper {
        background: linear-gradient(to right, rgba(8,135,200,.9), rgba(17,178,102,.9))!important;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        position: relative;
    }
    .swiper-overlay-text-img .g-swiper-slider > .swiper-slide > .slide > .slide-content-wrapper > .slide-content {
        padding: 2vw 3vw!important;
        max-height: calc(100% - 4vw)!important;
        overflow: hidden;
        width: 100%;
    }
    .swiper-overlay-text-img .g-swiper-slider > .swiper-slide > .slide > .slide-content-wrapper > .slide-content > a.button {
        position: absolute;
        bottom: 1rem;
        left: 1rem;
        text-transform: uppercase;
        font-size: 1rem;
        line-height: 1rem;
        letter-spacing: 2px;
        border-radius: 0;
        border: 2px solid var(--default-white);
        background: transparent;
        transition: .3s all ease-in-out;
        color: var(--default-white);
    }
    #g-slideshow .swiper-overlay-text-img .g-swiper-slider > .swiper-slide > .slide > .slide-content-wrapper > .slide-content > a.button:hover {
        background: var(--secondary-color);
        color: var(--default-white)!important;
    }
    .swiper-overlay-text-img .g-swiper-slider > .swiper-slide > .slide > .slide-content-wrapper > .slide-content > .g-swiper-title {
        margin: 0;
        padding: 0;
        text-align: left;
        border-bottom: 2px solid var(--default-white);
        margin-bottom: 1vw;
        padding-bottom: .5vw;
        font-size: 1.5rem;
        line-height: 1;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    .swiper-overlay-text-img .g-swiper-slider > .swiper-slide > .slide > .slide-content-wrapper > .slide-content > .g-swiper-text {
        margin: 0;
        padding: 0;
        text-align: left;
        font-size: .9rem;
        line-height: 1;
        font-weight: 400;
        letter-spacing: 2px;
    }
    .swiper-overlay-text-img :is(.swiper-navigation div[class*="button-next"], .swiper-navigation div[class*="button-prev"]) {
        text-shadow: var(--default-text-shadow);
    }
    .swiper-overlay-text-img .swiper-navigation div[class*="button-next"] {
        right: 1rem;
        top: 28vw;
        /*transform: translateY(-27vw);*/
    }
    .swiper-overlay-text-img .swiper-navigation div[class*="button-prev"] {
        left: 1rem;
        top: 28vw;
        /*transform: translateY(-27vw);*/
    }
    .swiper-overlay-text-img .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets {
        left: 3vw;
        right: unset;
        bottom: 2vw;
        transform: none;
        /*background: rgba(var(--primary-rgb),.6);*/
        border-top-left-radius: .5rem;
        border-top-right-radius: .5rem;
        /*backdrop-filter: blur(4px);*/
        flex-direction: row;
        gap: .5rem;
        padding: 1rem;
        max-width: calc(34% - 6vw);
    }
    .swiper-overlay-text-img :is(.g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet) {
        margin: 0;
        border: none;
        height: 26px;
        width: 26px;
    }
    .swiper-overlay-text-img :is(.g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet):not(.swiper-pagination-bullet-active) {
        background: rgba(255,255,255,.5);
    }
    .swiper-overlay-text-img :is(.g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active::after, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet-active::after) {
        display: none!important;
    }
    .swiper-overlay-text-img .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active::after, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet-active::after {
        display: none!important;
    }
    .swiper-overlay-text-img .g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::after, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet::after {
        display: none!important;
    }
}

/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-utility > .g-container {
        padding: .5vw 3% 1.5vw 3%!important;
    }
}

.ql-window-title {
    --ql-border-radius: 1rem;
}

@media only screen and (min-width: 50.99rem) {
    .ql-window-title {
        margin: 0;
        padding: 0;
    }
    .ql-window-title > .g-content {
        margin: 0;
        padding: 0;
    }
    .ql-window-title > .g-content > div {
        margin: 0;
        padding: 0;
    }
    .ql-window-title .g-blockcontent {
        margin: 0;
        padding: 0;
    }
    .ql-window-title .g-blockcontent-subcontent {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        gap: 2vw;
    }
    .ql-window-title .g-blockcontent-sbucontent-block {
        margin: 0;
        padding: 0;
    }
    .ql-window-title .g-blockcontent-subcontent-block-content {
        margin: 0;
        padding: 0;
        position: relative;
        padding: 1vw;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: var(--ql-border-radius);
        box-shadow: var(--default-box-shadow);
        transition: .2s all ease-in-out;
    }
    .ql-window-title .g-blockcontent-subcontent-block-content:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        /*aspect-ratio: 4 / 3;*/
        background: var(--tertiary-color);
        border-radius: var(--ql-border-radius);
        z-index: 1;
    }
    .ql-window-title .g-blockcontent-subcontent-block-content:after {
        content: "";
        position: absolute;
        top: 1vw;
        bottom: 1vw;
        left: 1vw;
        right: 1vw;
        height: auto;
        width: calc(100% - 2vw);
        /*border: 1vw solid var(--tertiary-color);*/
        aspect-ratio: 4 / 3;
        border-radius: var(--ql-border-radius);
        box-shadow: inset var(--default-box-shadow);
        border-collapse: separate;
        z-index: 3;
    }
    .ql-window-title .g-blockcontent-subcontent-img {
        margin: 0;
        padding: 0;
        border-radius: var(--ql-border-radius);
        aspect-ratio: 4 / 3;
        width: 100%;
        height: auto;
        object-position: center;
        object-fit: cover;
        position: relative;
        z-index: 2;
        box-shadow: inset var(--default-box-shadow);
        transition: .2s all ease-in-out;
    }
    .ql-window-title .g-blockcontent-subcontent-block-content:hover {
        transform: scale(1.10);
        box-shadow: var(--default-box-shadow-hover);
    }
    .ql-window-title .g-blockcontent-subcontent-title {
        margin: 0;
        padding: 0;
        position: absolute;
        bottom: -1vw;
        left: .75vw;
        right: .75vw;
        width: calc(100% - 1.5vw);
        height: 3.5vw;
        max-height: 3vw;
        background: var(--secondary-color);
        z-index: 4;
        border-radius: .5vw;
        box-shadow: var(--default-box-shadow);
        padding: .5vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1vw; 
        line-height: 1.25vw;
    }
    .ql-window-title .g-blockcontent-subcontent-title-text {
        margin: 0;
        padding: 0;
        font-size: 1vw;
        line-height: 1vw;
        text-align: center;
        color: var(--default-white);
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 700;
    }
    .ql-window-title .g-blockcontent-buttons {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        z-index: 5;
    }
    .ql-window-title .g-blockcontent-buttons a {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        z-index: 5;
    }
}

@media only screen and (min-width: 50.99rem) {
    .site-2-home #g-utility > .g-container {
        padding: 1vw 3%!important;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-2-home #g-utility > .g-container {
        padding: 2rem 1rem!important;
    }
}

@media only screen and (min-width: 50.99rem) {
    .mission-box-container {
        background: url('/images/template/swiper-bg.jpg') 50% 50% no-repeat;
        background-size: cover;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: var(--default-box-shadow);
    }
    .mission-box-container > .g-content {
        background: linear-gradient(to right, rgba(8,135,200,.9), rgba(17,178,102,.9));
        padding: 2vw 20%;
    }
    .mission-box-container h1 {
        color: var(--default-white);
        font-weight: 900;
        font-size: 4vw;
        border-bottom: 2px solid var(--default-white);
        text-align: center;
        letter-spacing: 5px;
        text-transform: uppercase;
    }
    .mission-box-container p {
        color: var(--default-white);
        font-weight: 400;
        font-size: 1.5vw;
        font-style: italic;
        letter-spacing: 2px;
        text-align: center;
    }
}

@media only screen and (max-width: 50.99rem) {
    .mission-box-container {
        background: url('/images/template/swiper-bg.jpg') 50% 50% no-repeat;
        background-size: cover;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: var(--default-box-shadow);
    }
    .mission-box-container > .g-content {
        background: linear-gradient(to right, rgba(8,135,200,.9), rgba(17,178,102,.9));
        padding: 1rem 20%;
    }
    .mission-box-container h1 {
        color: var(--default-white);
        font-weight: 900;
        font-size: 8vw;
        border-bottom: 2px solid var(--default-white);
        text-align: center;
        letter-spacing: 5px;
        text-transform: uppercase;
    }
    .mission-box-container p {
        color: var(--default-white);
        font-weight: 400;
        font-size: 3vw;
        font-style: italic;
        letter-spacing: 2px;
        text-align: center;
    }
}

/*************** FEATURE ******************/
@media only screen and (min-width: 50.99rem) {
    .site-2-home #g-feature > .g-container {
        padding: 1vw 3%!important;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-2-home #g-feature > .g-container {
        padding: 1rem!important;
    }
}

@media only screen and (min-width: 50.99rem) {
    .ql-rect-boxes {
        margin: 0;
        padding: 0;
    }
    .ql-rect-boxes > .g-content {
        margin: 0;
        padding: 0;
    }
    .ql-rect-boxes > .g-content > div {
        margin: 0;
        padding: 0;
    }
    .ql-rect-boxes .g-blockcontent {
        margin: 0;
        padding: 0;
    }
    .ql-rect-boxes .g-blockcontent-subcontent {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        gap: 1.5vw;
    }
    .ql-rect-boxes .g-blockcontent-subcontent-block {
        margin: 0;
        padding: 0;
        background: var(--default-white);
        border-radius: 1rem;
        box-shadow: var(--default-box-shadow);
        padding: 1.5vw;
        transition: .3s all ease-in-out;
    }
    .ql-rect-boxes .g-blockcontent-subcontent-block:hover {
        transform: scale(1.05);
        box-shadow: var(--default-box-shadow-hover);
    }
    .ql-rect-boxes .g-blockcontent-subcontent-block:hover .g-blockcontent-subcontent-subtitle {
        background: var(--secondary-color);
    }
    .ql-rect-boxes .g-blockcontent-subcontent-block-content {
        margin: 0;
        padding: 0;
        position: relative;
        display: grid;
        grid-template-areas: 
            "icon title"
            "sub sub"
        ;
        grid-template-rows: 1fr auto;
        grid-template-columns: 33% 67%;
        column-gap: 1vw;
        row-gap: 1vw;
    }
    .ql-rect-boxes .g-blockcontent-subcontent-img {
        margin: 0;
        padding: 0;
        grid-area: icon;
        height: 6vw;
        width: 6vw;
        align-self: center;
        justify-self: end;
    }
    .ql-rect-boxes .g-blockcontent-subcontent-subtitle {
        margin: 0;
        padding: 0;
        text-align: center;
        padding: .5vw;
        text-transform: uppercase;
        font-size: 1.5vw;
        line-height: 1.5vw;
        font-weight: 400;
        border-radius: .5rem;
        grid-area: sub;
        background: var(--primary-color);
        transition: .3s all ease-in-out;
        width: calc(100% - 1vw);
    }
    .ql-rect-boxes .g-blockcontent-subcontent-title {
        margin: 0;
        padding: 0;
        grid-area: title;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-right: 10vw;
    }
    .ql-rect-boxes .g-blockcontent-subcontent-title-text {
        margin: 0;
        padding: 0;
        font-size: 2vw;
        line-height: 2.25vw;
        text-transform: uppercase;
    }
    .ql-rect-boxes .g-blockcontent-buttons {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
    }
    .ql-rect-boxes .g-blockcontent-buttons a {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
    }
}

@media only screen and (max-width: 50.99rem) {
    .ql-rect-boxes-mobile {
        margin: 0;
        padding: 0;
    }
    .ql-rect-boxes-mobile > .g-content {
        margin: 0;
        padding: 0;
    }
    .ql-rect-boxes-mobile > .g-content > div {
        margin: 0;
        padding: 0;
    }
    .ql-rect-boxes-mobile .g-blockcontent {
        margin: 0;
        padding: 0;
    }
    .ql-rect-boxes-mobile .g-blockcontent-subcontent {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .ql-rect-boxes-mobile .g-blockcontent-subcontent-block {
        margin: 0;
        padding: 0;
        background: var(--default-white);
        border-radius: 1rem;
        box-shadow: var(--default-box-shadow);
        padding: 1rem;
        transition: .3s all ease-in-out;
    }
    .ql-rect-boxes-mobile .g-blockcontent-subcontent-block:hover {
        transform: scale(1.05);
        box-shadow: var(--default-box-shadow-hover);
    }
    .ql-rect-boxes-mobile .g-blockcontent-subcontent-block:hover .g-blockcontent-subcontent-subtitle {
        background: var(--secondary-color);
    }
    .ql-rect-boxes-mobile .g-blockcontent-subcontent-block-content {
        margin: 0;
        padding: 0;
        position: relative;
        display: grid;
        grid-template-areas: 
            "icon title"
            "sub sub"
        ;
        grid-template-rows: 1fr auto;
        grid-template-columns: 33% 67%;
        column-gap: 1rem;
        row-gap: 1rem;
    }
    .ql-rect-boxes-mobile .g-blockcontent-subcontent-img {
        margin: 0;
        padding: 0;
        grid-area: icon;
        height: 20vw;
        width: 20vw;
        align-self: center;
        justify-self: end;
    }
    .ql-rect-boxes-mobile .g-blockcontent-subcontent-subtitle {
        margin: 0;
        padding: 0;
        text-align: center;
        padding: .5rem;
        text-transform: uppercase;
        font-size: 1.5rem;
        line-height: 1.5rem;
        font-weight: 400;
        border-radius: .5rem;
        grid-area: sub;
        background: var(--primary-color);
        transition: .3s all ease-in-out;
        width: calc(100% - 1rem);
    }
    .ql-rect-boxes-mobile .g-blockcontent-subcontent-title {
        margin: 0;
        padding: 0;
        grid-area: title;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-right: 10vw;
    }
    .ql-rect-boxes-mobile .g-blockcontent-subcontent-title-text {
        margin: 0;
        padding: 0;
        font-size: 1.75rem;
        line-height: 2rem;
        text-transform: uppercase;
    }
    .ql-rect-boxes-mobile .g-blockcontent-buttons {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
    }
    .ql-rect-boxes-mobile .g-blockcontent-buttons a {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
    }
}

/*************** MAIN *********************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-container-main > .g-container {
        padding: 2vw 3%!important;
    }
    .site-1-home #g-container-main > .g-container > .g-grid > .g-block:nth-child(1) {
        display: flex;
        justify-content: flex-start;
    }
    .site-1-home #g-sidebar {
        width: 90%;
        max-width: 90%;
    }
    .site-1-home #g-container-main > .g-container > .g-grid > .g-block:nth-child(2) {
        display: flex;
        justify-content: center;
    }
    .site-1-home #g-mainbar {
        max-width: 90%;
        background: url('/images/template/mainbar-bg.jpg') 50% 50% no-repeat;
        background-size: cover;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: var(--default-box-shadow);
    }
    .site-1-home #g-container-main > .g-container > .g-grid > .g-block:nth-child(3) {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
    }
    .site-1-home #g-mainbar > .g-grid {
        background: rgba(var(--tertiary-rgb),.9);
        backdrop-filter: blur(4px);
    }
    .site-1-home #g-mainbar > .g-grid:nth-child(1) {
        padding: 2vw 2vw 1vw 2vw;
    }
    .site-1-home #g-mainbar > .g-grid:nth-child(2) {
        padding: 1vw 2vw 2vw 2vw;
    }
    .site-1-home .ph-sidepics-3 .g-title {
        border-left: 1vw solid var(--secondary-color);
        text-transform: uppercase;
        letter-spacing: 5px;
        font-size: 4vw;
        line-height: 4vw;
        margin: 0;
        padding: 0;
        padding-left: 2vw;
        margin-bottom: 2vw;
        /*text-shadow: var(--default-text-shadow);*/
    }
    .site-1-home .ph-sidepics-3.ph-underline .g-array-item-image {
        border-radius: 50%;
    }
    .site-1-home .ph-sidepics-3.ph-underline .g-content-array > .g-grid {
        border: none!important;
    }
    .site-1-home .ph-sidepics-3 .g-array-item-read-more {
        opacity: 0;
    }
    .site-1-home .ph-sidepics-3.ph-square .g-array-item {
        grid-template-rows: 40% 60% 0%;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-container-main > .g-container {
        padding: 2rem 1rem 1rem 1rem!important;
    }
    .site-1-home #g-container-main > .g-container > .g-grid > .g-block:nth-child(1) {
        order: 3;
    }
    .site-1-home #g-container-main > .g-container > .g-grid > .g-block:nth-child(2) {
        order: 1;
    }
    .site-1-home #g-container-main > .g-container > .g-grid > .g-block:nth-child(3) {
        order: 2;
    }
    .site-1-home #g-aside {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 2rem 0;
    }
    .site-1-home #g-mainbar {
        margin: 0;
        padding: 0;
    }
    .site-1-home .ph-sidebyside-mobile .g-content-array {
        margin: 0;
        padding: 0;
    }
    .site-1-home .ph-sidebyside-mobile .g-title {
        color: var(--tertiary-color);
    }
    .site-1-home #g-mainbar > .g-grid:last-child {
        margin-top: 2rem;
    }
}

@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;
    }
}

@media only screen and (min-width: 50.99rem) {
    .site-2-home #g-container-main > .g-container {
        padding: 1vw 3% 3vw 3%!important;
    }
    .site-2-home #g-container-main > .g-container > .g-grid > .g-block:last-child {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .site-2-home #g-container-main .ql-rect-boxes .g-blockcontent-subcontent {
        flex-wrap: wrap;
    }
    .site-2-home #g-container-main .ql-rect-boxes .g-blockcontent-subcontent-block {
        flex: calc(50% - .75vw);
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-2-home #g-container-main > .g-container > .g-grid > .g-block:nth-child(1) {
        order: 2;
    }
    .site-2-home #g-container-main > .g-container > .g-grid > .g-block:nth-child(2) {
        order: 1;
    }
}

/*************** EXPANDED *****************/ 
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-expanded {
        padding: 1vw 3%!important;
    }
    .site-1-home #g-expanded > .g-container {
        border-radius: 1rem;
        background: url('/images/template/expanded-bg.jpg') 50% 50% no-repeat;
        background-size: cover;
        overflow: hidden;
        box-shadow: var(--default-box-shadow);
    }
    .site-1-home #g-expanded > .g-container > .g-grid {
        background: rgba(var(--tertiary-rgb),.9);
        backdrop-filter: blur(4px);
        padding: 2vw;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-expanded {
        padding: 1vw 3%!important;
    }
    .site-1-home #g-expanded > .g-container {
        border-radius: 1rem;
        background: url('/images/template/expanded-bg.jpg') 50% 50% no-repeat;
        background-size: cover;
        overflow: hidden;
        box-shadow: var(--default-box-shadow);
    }
    .site-1-home #g-expanded > .g-container > .g-grid {
        background: rgba(var(--tertiary-rgb),.9);
        backdrop-filter: blur(4px);
        padding: 1rem;
    }
}

@media only screen and (min-width: 50.99rem) {
    .rok-mini-calendar-badge {
        margin: 0;
        padding: 0;
    }
    .rok-mini-calendar-badge > .g-content {
        margin: 0;
        padding: 0;
    }
    .rok-mini-calendar-badge > .g-content > .platform-content {
        margin: 0;
        padding: 0;
    }
    .rok-mini-calendar-badge > .g-content > .platform-content > div {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .rok-mini-calendar-badge .g-title {
        margin: 0;
        padding: 0;
        border-bottom: none;
        border-left: 1vw solid var(--secondary-color);
        margin-bottom: 1vw;
        font-size: 4vw;
        letter-spacing: 10px;
        text-transform: uppercase;
        margin: 0 auto 1vw auto;
        padding-left: 2vw;
        line-height: 4vw;
        /*text-shadow: var(--default-text-shadow);*/
    }
    .rok-mini-calendar-badge .rokminievents3 {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .rok-mini-calendar-badge .rme-items {
        margin: 0;
        padding: 1vw 5% 4vw 5%;
        display: flex;
        flex-direction: row;
        gap: .5vw;
    }
    .rok-mini-calendar-badge .rme-item {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: .5vw;
        aspect-ratio: 4 / 3;
        max-width: calc(100% / 6);
    }
    .rok-mini-calendar-badge .rme-badge {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        width: 50%;
        aspect-ratio: 4 / 3;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1rem;
        box-shadow: var(--default-box-shadow);
        position: relative;
    }
    .rok-mini-calendar-badge .rme-badge:before {
        content: '';
        position: absolute;
        top: 0;
        left: 20%;
        width: 5%;
        height: 10%;
        background: var(--tertiary-color);
    }
    .rok-mini-calendar-badge .rme-badge:after {
        content: '';
        position: absolute;
        top: 0;
        right: 20%;
        width: 5%;
        height: 10%;
        background: var(--tertiary-color);
    }
    .rok-mini-calendar-badge .rme-day {
        margin: 0;
        padding: 0;
        order: 2;
        font-size: 1.25vw;
        font-weight: 700;
        font-family: var(--title-font-family);
        text-transform: none;
        font-variant-caps: normal;
        letter-spacing: 2px;
        line-height: 1.25vw;
    }
    .rok-mini-calendar-badge .rme-month {
        margin: 0;
        padding: 0;
        order: 1;
        font-size: 1.25vw;
        font-weight: 700;
        font-family: var(--title-font-family);
        text-transform: none;
        font-variant-caps: normal;
        letter-spacing: 2px;
        line-height: 1.25vw;
    }
    .rok-mini-calendar-badge .rme-description {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    .rok-mini-calendar-badge .rme-title {
        margin: 0;
        padding: 0;
        order: 2;
        font-size: 1.25vw;
        font-weight: 400;
        font-family: var(--title-font-family);
        color: var(--primary-color);
    }
    .rok-mini-calendar-badge .rme-time {
        margin: 0;
        padding: 0;
        order: 1;
        font-size: 1.15vw;
        font-weight: 700;
        font-family: var(--title-font-family);
        color: var(--primary-color);
    }
    .rok-mini-calendar-badge .rme-details {
        margin: 0;
        padding: 0;
    }
    .rok-mini-calendar-badge .rme-timeline {
        margin: 0;
        padding: 0;
    }
    .rok-mini-calendar-badge .rme-timeline-bar {
        margin: .5vw 1vw;
        padding: 0;
    }
    .rok-mini-calendar-badge .rme-timeline-points {
        margin: 0;
        padding: 0;
    }
    .rok-mini-calendar-badge .rme-timeline-point {
        margin: 0;
        padding: 0;
        height: 1vw;
        line-height: 1vw;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: .5vw / 50%;
        /*background: var(--secondary-color);*/
    }
    .rok-mini-calendar-badge .rme-timeline-point.active {
        border-radius: .5vw / 50%;
        background: var(--secondary-color);
    }
    .rok-mini-calendar-badge .rme-timeline-point:hover {
        background: var(--secondary-color);
    }
    .rok-mini-calendar-badge .rme-timeline-point > span {
        margin: 0;
        padding: 0;
        height: 1vw;
        width: 1vw;
        line-height: 1vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .rok-mini-calendar-badge .rem-timeline-date {
        margin: 0;
        padding: 0;
    }
    .rok-mini-calendar-badge .rme-arrow {
        margin: 0;
        padding: 0;
    }
}

@media only screen and (max-width: 50.99rem) {
    .rok-mini-calendar-badge-mobile {
        margin: 0;
        padding: 0;
    }
    .rok-mini-calendar-badge-mobile > .g-content {
        margin: 0;
        padding: 0;
    }
    .rok-mini-calendar-badge-mobile > .g-content > .platform-content {
        margin: 0;
        padding: 0;
    }
    .rok-mini-calendar-badge-mobile > .g-content > .platform-content > div {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .rok-mini-calendar-badge-mobile .g-title {
        margin: 0;
        padding: 0;
        border-bottom: none;
        border-left: 1rem solid var(--secondary-color);
        margin-bottom: 1vw;
        font-size: 2.5rem;
        letter-spacing: 10px;
        text-transform: uppercase;
        margin: 0 auto 2rem auto;
        padding-left: 2vw;
        line-height: 2.5rem;
        text-shadow: var(--default-text-shadow);
    }
    .rok-mini-calendar-badge-mobile .rokminievents3 {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .rok-mini-calendar-badge-mobile .rme-items {
        margin: 0;
        padding: 1vw 5% 4vw 5%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .rok-mini-calendar-badge-mobile .rme-item {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
    .rok-mini-calendar-badge-mobile .rme-badge {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        width: 34%;
        height: 24vw;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1rem;
        box-shadow: var(--default-box-shadow);
        position: relative;
    }
    .rok-mini-calendar-badge-mobile .rme-badge:before {
        content: '';
        position: absolute;
        top: 0;
        left: 20%;
        width: 5%;
        height: 10%;
        background: var(--tertiary-color);
    }
    .rok-mini-calendar-badge-mobile .rme-badge:after {
        content: '';
        position: absolute;
        top: 0;
        right: 20%;
        width: 5%;
        height: 10%;
        background: var(--tertiary-color);
    }
    .rok-mini-calendar-badge-mobile .rme-day {
        margin: 0;
        padding: 0;
        order: 2;
        font-size: 1.25rem;
        font-weight: 700;
        font-family: var(--title-font-family);
        text-transform: none;
        font-variant-caps: normal;
        letter-spacing: 2px;
        line-height: 1.25rem;
    }
    .rok-mini-calendar-badge-mobile .rme-month {
        margin: 0;
        padding: 0;
        order: 1;
        font-size: 1.25rem;
        font-weight: 700;
        font-family: var(--title-font-family);
        text-transform: none;
        font-variant-caps: normal;
        letter-spacing: 2px;
        line-height: 1.25rem;
    }
    .rok-mini-calendar-badge-mobile .rme-description {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .rok-mini-calendar-badge-mobile .rme-title {
        margin: 0;
        padding: 0;
        order: 2;
        font-size: 1rem;
        font-weight: 400;
        font-family: var(--title-font-family);
        color: var(--primary-color);
    }
    .rok-mini-calendar-badge-mobile .rme-time {
        margin: 0;
        padding: 0;
        order: 1;
        font-size: 1rem;
        font-weight: 700;
        font-family: var(--title-font-family);
        color: var(--primary-color);
    }
    .rok-mini-calendar-badge-mobile .rme-details {
        margin: 0;
        padding: 0;
    }
    .rok-mini-calendar-badge-mobile .rme-timeline {
        margin: 0;
        padding: 0;
    }
    .rok-mini-calendar-badge-mobile .rme-timeline-bar {
        margin: .5vw 1vw;
        padding: 0;
    }
    .rok-mini-calendar-badge-mobile .rme-timeline-points {
        margin: 0;
        padding: 0;
    }
    .rok-mini-calendar-badge-mobile .rme-timeline-point {
        margin: 0;
        padding: 0;
        height: 1vw;
        line-height: 1vw;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: .5vw / 50%;
        /*background: var(--secondary-color);*/
    }
    .rok-mini-calendar-badge-mobile .rme-timeline-point.active {
        border-radius: .5vw / 50%;
        background: var(--secondary-color);
    }
    .rok-mini-calendar-badge-mobile .rme-timeline-point:hover {
        background: var(--secondary-color);
    }
    .rok-mini-calendar-badge-mobile .rme-timeline-point > span {
        margin: 0;
        padding: 0;
        height: 1vw;
        width: 1vw;
        line-height: 1vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .rok-mini-calendar-badge-mobile .rem-timeline-date {
        margin: 0;
        padding: 0;
    }
    .rok-mini-calendar-badge-mobile .rme-arrow {
        margin: 0;
        padding: 0;
    }
}

/*************** EXTENSION ****************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-extension {
        padding: 1vw 3% 0 3%!important;
    }
    .site-1-home #g-extension .g-title {
        color: var(--default-white);
        letter-spacing: 10px;
        font-size: 3vw;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 2vw;
        text-transform: uppercase;
        text-shadow: var(--default-text-shadow);
    }
}

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

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

.site-2 #g-footer a {color: var(--default-white); transition: .3s all ease-in-out;} 
.site-2 #g-footer a:hover {opacity: .5;}

@media only screen and (min-width: 50.99rem) {
    .site-1 #g-container-footer {
        border-bottom: 2vw solid var(--secondary-color);
    }
    .footer-container-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 1vw 5%!important;
    }
    .footer-info {
        flex: 65;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .footer-info > div:nth-child(1) {
        flex: 30;
    }
    .footer-info > div:nth-child(2) {
        flex: 70;
    }
    .footer-social-icons {
        flex: 8;
    }
    .footer-logo {
        flex: 27;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .footer-logo img {
        width: 80%;
    }

    .footer-social-icons .g-social-items {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1vw;
    }
    .footer-social-icons .g-social-items > a {
        font-size: 2vw;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1 #g-footer > .g-container {
        padding: 1rem!important;
    }
    .site-1 .footer-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 30%;
    }
    .site-1 .footer-logo img {
        width: 100%;
    }

    .footer-social-icons .g-social-items {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }
    .footer-social-icons .g-social-items > a {
        font-size: 3rem;
    }
}

@media only screen and (min-width: 50.99rem) {
    .site-2 #g-footer > .g-container {
        padding: 0 3% 3vw 3%!important;
    }
    .school-footer-section {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .school-footer-info {
        width: 20%;
    }
    .school-footer-info p {
        margin: 0;
        padding: 0;
        font-size: 1.25vw;
    }
    .school-footer-logo {
        width: 60%;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-2 #g-footer > .g-container {
        padding: 2rem 1rem 4rem 1rem!important;
    }
}

/*************** 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);
} 
/*************** SECTIONS *****************/
/*************** 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) {
    .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;
    }
}

@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;
    }
}

@media only screen and (max-width: 50.99rem) {
    .ph-sidebyside-mobile .g-array-item-read-more {
        opacity: 0;
    }
    .ph-sidebyside-mobile .g-array-item-title {
        padding: 1rem;
    }
}

@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;
    }
}

:is(.site-1-sub, .site-2-sub) :is(#g-mainbar, #g-sidebar, #g-aside) {
    background: transparent;
}

/*  */

.knights-page {
    --hero-opacity: 1;
}

.knights-page #g-container-main {
    padding-top: 3rem;
}

@media only screen and (min-width: 50.99rem) {
    .tv-display #g-header > .g-container {
        padding: 2vw!important;
    }
    .tv-display #g-container-main > .g-container {
        padding: 2vw!important;
    }
    .tv-display #g-header .g-logo {
        margin: 0;
        padding: 0;
    }
    .tv-display #g-header .g-logo:after {
        display: none!important;
    }

    .tv-display .swiper-overlay-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 10001;
    }
    .tv-display .swiper-overlay-logo > .g-content {
        z-index: 20;
        height: 17vw!important;
        width: 17vw;
        pointer-events: none;
        background: rgba(var(--tertiary-rgb), .8);
        backdrop-filter: blur(4px);
        border-radius: 50%;
        overflow: hidden;
        padding: 1.25vw;
        box-shadow: var(--default-box-shadow);
    }
    .tv-display .swiper-overlay-logo .g-logo img {
        aspect-ratio: 1/1;
        height: 15vw;
        width: 15vw;
    }

    .tv-display .mt-box {
        display: flex;
        flex-direction: row;
        gap: 4vw;
        justify-content: space-evenly;
    }
    .tv-display .mt-box .mt-column p {
        font-size: 1.25vw;
    }
    .tv-display .mt-box .mt-column a {
        color: var(--default-white);
    }
    .tv-display .mt-container {
        display: flex;
        align-items: center;
    }
    .tv-display .mt-container > .g-content {
        width: 100%;
    }

    .tv-display .grid-sideways .g-array-item {
        --grid-column-calc: 10vw;
        --grid-grid-height: 10vw;
    }
    .tv-display .grid-sideways .g-array-item-image img {
        width: 90%!important;
        height: unset!important;
    }
    .tv-display .grid-articles .g-array-item-image {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .tv-display .grid-articles .g-item-title {
        --grid-title-font-size: 1.5vw;
    }
    .tv-display .grid-sideways .g-content-array {
        --grid-gap: 1rem 1rem;
    }

    .tv-display .g-title {
        border-left: 1rem solid var(--secondary-color);
        text-transform: uppercase;
        letter-spacing: 5px;
        font-size: 4rem;
        line-height: 1;
        margin: 0;
        padding: 0;
        padding-left: 2vw;
        margin-bottom: 1rem;
    }

    .tv-display #lowerRotate {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10000;
    }

    .tv-display #g-bottom:not(:has(#lowerRotate .swiper-slide img)) {
        display: none!important;
    }
    .tv-display:has(#lowerRotate .swiper-slide img) {
        overflow-y: hidden!important;
    }

}

/* 1. Target the main content block that holds both the title and the scroll area */
#scrollHeadlines {
    /* Set a specific viewport height for the scrolling headlines */
    height: 40vw; 
    /* Establish a new stacking context */
    position: relative; 
    /* Ensure nothing overlaps this whole block from a lower context */
    z-index: 1; 
    overflow: hidden;
}

/* 2. Target the Title element (.g-title) */
#scrollHeadlines .g-title {
    /* Make the title positionable */
    position: relative; 
    /* Give the title a higher stacking layer than the content array */
    /* Use a high number like 10 to ensure it's on top of the scrolling content */
    z-index: 10; 
    /* Make sure the title has a background so the scrolling content doesn't show through */
    background-color: white; /* Replace 'white' with your block's background color */
    padding: 10px; /* Optional: adds space around the title */
    margin: 0; /* Remove default margins to prevent gaps */
}

/* 3. The scrolling wrapper CSS (from the previous response) */
.g-content-array {
    display: flex;
    flex-direction: column;
    padding-top: 10px; 
    /* Reset its stacking context to be beneath the title */
    z-index: 5; 
    /* Apply a negative margin to pull it up so the scroll animation starts right under the title. */
    /* You'll need to adjust this value based on the actual height of your .g-title */
    /* A value of roughly -50px is a common starting point if your title is around 40px tall. */
    margin-top: -50px; 
}

/* Keyframe animation remains the same */
@keyframes verticalScroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%); 
    }
}