@import url('https://cmsv2-shared-assets.apptegy.net/Global/Components/custom-social-icons/social-round-icons.css');


/*quick links */
#home #quick-links {
    display: none;

  &:not(:has(a)) {
    display: none !important;
  }
}

#quick-links {
    --section-bg-color: #f4f3f3;
    padding: 40px 0;
    margin-bottom: 0;
    margin-top: 0;
    background: var(--section-bg-color);

    .header-slot-container {
        color: var(--primary-color);
    }

    .title {
        position: relative;
        margin-bottom: 20px;
        text-align: center;
        isolation: isolate;
    }

    .title::after {
        position: absolute;
        content: no-close-quote;
        width: 100%;
        height: 1px;
        background: #000;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: -1;
    }

    .title h2 {
        display: inline-block;
        padding: 5px 20px;
        box-sizing: border-box;
        background: #FFF;
        font-size: clamp(30px, 2.857vw, 40px);
        line-height: 1.3;
        font-weight: 500;
        text-transform: uppercase;
        font-family: Roboto, sans-serif;
    }

    .links {
        max-width: 1340px;
        display: flex;
        flex-wrap: wrap;
        margin-inline: auto;
    }

    .links>div {
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
        width: 50%;
        position: relative;

      &:not(:has(a)) {
        display: none;
      }
    }

    .links>div a {
        text-decoration: none;

        &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
    }

    /* .links > div a > *:not(.iconLoaded):not(.ue-lord-icon-contet) {
    background: url(https://cmsv2-shared-assets.apptegy.net/Global/Images/Icons/loading-gif-dots.gif) no-repeat center center;
    background-size: contain;
} */
    .links>div a span {
        display: block;
    }

    .links>div lord-icon {
        width: 110px;
        height: 110px;
    }

    .ue-box-title {
        color: var(--primary-color);
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-top: 2px;
        display: block;

        a {
            color: currentColor;
            text-decoration: none;
        }
    }

    @media (min-width: 400px) {
        .links>div {
            width: 33.33%;
        }
    }

    @media (min-width: 768px) {
        .links>div {
            width: 16.66%;
        }
    }

    @media (min-width: 1024px) {
        .ue-box-title {
            font-size: 20px;
        }
    }
}
      
/* Custom schools Menu with Tabs */
#schools-menu-sm1 #tabsHeader {
    display: none;
}

#schools-menu-sm1 .column {
    display: block;
}

#schools-menu-sm1 .button-title {
    box-sizing: border-box;
    padding: 15px 20px;
    border: 0;
    margin: 0;
    background: transparent;
    text-align: left;
    width: 100%;
    display: block;
}

#schools-menu-sm1 #tabsHeader h2 {
    font-size: 20px;
    line-height: 1.1;
    font-weight: 500;
}

#schools-menu-sm1 .button-title[aria-selected=true] {
    background-color: var(--tab-active-bg);
    color: var(--tab-active-color);
}

#schools-menu-sm1 .button-title a {
    color: currentColor;
    text-decoration: none;
}

#schools-menu-sm1 .button-title a:hover {
    color: var(--primary-color);
}

#schools-menu-sm1 .child-item:first-child a.hide {
    display: none;
}

@media only screen and (min-width: 600px) {
    #schools-menu-sm1 .button-title svg {
        display: none;
    }

    /* custom schools menu */
    #view-header #schools-menu-sm1 {
        display: flex;
        max-width: 800px;
        left: auto;
        right: 20px;
        padding: 0;
        z-index: 999;
        max-height: calc(100vh - var(--header-height));
        position: absolute !important;
        top: 100%;
        overflow: auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, .15);
        margin-top: 0;
        --tabs-container-bg: #f9f9f9;
        --tabs-container-border-color: #eee;
        --tab-active-bg: #eee;
        --tab-active-color: #2c2c2c;
        --tab-focus-bg: var(--primary-color);
        --tab-focus-color: whitesmoke;
    }

    #schools-menu-sm1 #tabsHeader {
        display: flex;
        flex-direction: column;
        width: 33%;
        min-width: 260px;
        box-sizing: border-box;
        padding-bottom: 40px;
        border-right: 1px solid var(--tabs-container-border-color);
        background: var(--tabs-container-bg);
    }

    #schools-menu-sm1 .button-title:focus-visible {
        background-color: var(--tab-focus-bg);
        color: var(--tab-focus-color);
        outline: 0.2em solid transparent;
    }

    #schools-menu-sm1 .button-title:focus-visible svg {
        fill: var(--tab-focus-color);
    }

    .customHeader #schools-menu-sm1 .column:not(.visible),
    .customHeader #schools-menu-sm1 .column[hidden] {
        display: none;
    }

    .customHeader #schools-menu-sm1 .column.visible,
    .customHeader #schools-menu-sm1 .column:not([hidden]) {
        display: block;
    }

    #schools-menu-sm1 .column ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    #schools-menu-sm1 .column .button-title {
        padding: 0;
    }

    #schools-menu-sm1 .column .parent-item.SchoolsMenuHeader {
        margin: 0;
    }

    #schools-menu-sm1 .column.multiple-headlines .parent-item .button-title {
        display: none;
    }

    #schools-menu-sm1 .column .parent-item.SchoolsMenuHeader h2 {
        font-weight: 600;
        color: #222;
        font-size: 14px;
        line-height: 1.3;
        box-sizing: border-box;
        display: block;
        border-bottom: 1px solid #ededed;
        padding: 15px 20px;
    }

    #schools-menu-sm1 .parent-item .child-ul:not(:empty) {
        padding-top: 10px;
    }

    #schools-menu-sm1 .parent-item .child-ul a {
        padding: 5px 20px;
        display: block;
    }

    #schools-menu-sm1 .parent-item .child-ul a:hover {
        color: var(--primary-color) !important;
    }

    #schools-menu-sm1 .wrapper {
        display: block;
        max-height: calc(100vh - var(--header-height));
        overflow: auto;
    }

    #schools-menu-sm1 .wrapper .column {
        width: 100%;
        box-sizing: border-box;
        padding: 0 0 40px;
    }
}

@media only screen and (min-width: 960px) {
    #schools-menu-sm1 .column:first-child ul.child-ul {
        column-count: 2;
    }
}

/* custom Schools menu*/

/* from external file */
/*
font-family: Courgette, cursive;
font-family: Montserrat, sans-serif;
font-family: Oswald, sans-serif;
font-family: Roboto, sans-serif;
*/
body {
    --font-family: Roboto, sans-serif !important;
    --third-color: #8cc540;
    --padding-inline: 80px;

    @media only screen and (min-width: 1280px) {
        --padding-inline: 140px;
    }
}

@media only screen and (min-width: 960px) {
    #home {
        #quick-links, #rightSidebarButtons {
            padding-inline: var(--padding-inline) !important;
            box-sizing: border-box;
        }
        #videoLightbox {
            box-sizing: border-box;
            padding-inline: calc(var(--padding-inline) + 50px) !important;
        }

        #news-n1 {
            padding-left: calc(var(--padding-inline) + 50px);
        }

        #LF3 {
            padding-right: calc(var(--padding-inline) + 50px);
        }
    }

}

#app,
body,
html,
button {
    font-family: Roboto, sans-serif !important;
}

.see-all-container h2 {
    font-family: Roboto, sans-serif !important;
    /* font-weight: 500 !important; */
}


#cms-gallery .text {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
    /*    animation-delay: 0.5s;*/
}

/*

#cms-header {
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-name: fadeIn;
    animation-delay: 1s;
}
*/
@media only screen and (min-width: 960px) {
    .homeHeader #cms-header .header-bar-wrapper:not(.sticky) {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        box-sizing: border-box;
    }

    #home {
        margin-top: 0;
    }
}

#stats-s2 {
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-name: fadeInUp;
}

#stats-s2 .row .content ul li::before {
    content: "";
    margin-right: 8px;
    color: white;
    width: 16px;
    height: 19px;
    background: url(https://cmsv2-shared-assets.apptegy.net/Global/Images/Icons/check-icon-white.svg) no-repeat left center;
    background-size: contain;

}

#cms-gallery .description>div:not(.tns-outer) {
    max-height: 200px;
    overflow: auto;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100px, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

/* --- HEADER ----- */

#view-header #h2 .utilities.utilities-right {
    display: none;
}

#view-header #h2 .utilities.utilities-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#h2 .utilities.utilities-top .utility-bar-items {
    padding-top: 1px;
    gap: 0;
}

#view-header .utilities.utilities-top .utility-bar-items a {
    padding-right: 11px;
    margin-right: 11px;
    margin-left: 0;
    margin-top: 8px;
    border-right: 2px solid var(--utility-link-color);
    font-weight: 700;
}

#languagebuttonNew .menu-field {
    font-weight: 700;
}

#view-header #h2 .header-container:before {
    display: none;
}

#view-header .logo {
    height: 80px;
    margin-right: 0;
}

@media only screen and (min-width: 1024px) {

    #view-header #cms-header #h2 .header-container.shrink {
        background-color: #00627a;
    }

    #view-header .header-container:not(.shrink) .logo {
        position: relative;
        width: 300px;
        height: 95px;
    }


    #view-header .header-container:not(.shrink) .logo {
        top: -22px;
    }

    body #app #view-header .header-container:not(.shrink) .logo img {
        width: 300px;
        max-width: 100%;
        height: unset;
        max-height: unset;
        position: absolute;
        top: 0;
    }

    /*
    #view-header:not(.homeHeader) #cms-header {
        padding-bottom: 103px !important;
    }
*/

    /* #view-header.homeHeader #h2 {
        background: transparent;
    }

    #view-header.homeHeader #h2 .header-container:not(.shrink),
    #view-header.homeHeader #h2 .utilities.utilities-top,
    #view-header #m4 {
        --bg-color: transparent !important;
        --utility-bg-color: transparent !important;
    }

    #view-header #h2 {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    #view-header.homeHeader #h2 .utilities.utilities-top .utility-bar-items {
        background: transparent !important;
    } */

    /*
    #view-header.homeHeader #cms-header {
        padding-bottom: 0 !important;
    }
*/

    #view-header .m4--menu-item.m4--menu-item-active,
    #view-header .m4--menu-item:hover {
        background: transparent;
    }

    #h2 .button-action-content svg rect:first-child {
        opacity: 0;
    }

    #h2 .button-action-content svg path {
        stroke: var(--nav-icon-color);
    }

    #view-header #h2 .header-container {
        align-items: flex-start;
        padding: 0;
    }

    #view-header #h2 .header-container:not(.shrink) {
        min-height: 65px;
    }

    #view-header #h2 .right-menu-items {
        padding-top: 25px;
        padding-bottom: 8px;
    }

    #view-header #h2 .header-container.shrink .right-menu-items {
        padding-top: 8px;
    }

    #view-header #languagebutton {
        position: absolute;
        top: 8px;
        right: 0;
    }

    #view-header #languagebutton .menu-field {
        text-transform: none;
    }

    #view-header #h2 .utilities.utilities-top .utility-bar-items {
        padding-right: 150px;
        padding-bottom: 5px;
    }

    #view-header #h2 .utilities .search {
        display: none;
    }

    #schoolsbutton {
        margin-right: 32px;
    }

    #view-header .m4-menu .m4-menu--bar {
        position: absolute;
        padding: 0;
        bottom: 27px;
        right: 230px;
        left: 470px;
        z-index: 1;
        height: 40px;
    }

    #view-header #cms-header .sticky .m4-menu .m4-menu--bar {
        bottom: 5px;

        .m4-menu--drawer {
            top: 100%;
        }
    }

    #newSearchButton {
        margin-right: 32px;
        margin-left: 32px;
    }

    #view-header .m4--menu-item .m4--menu-item-text,
    #view-header #schoolsbutton .menu-field,
    #view-header #schoolsbuttonNew .menu-field {
        font-size: 17px;
        font-weight: 600;
        text-transform: uppercase;

        @media only screen and (min-width: 1280px) {
            font-size: 20px;
        }
    }

    #view-header .m4-menu--drawer {
        top: 40px;
    }

    #view-header .m4-menu--drawer .m4-menu--drawer-title,
    #view-header #h2 .header-container.shrink #languagebutton,
    #view-header #h2 .right-menu-items #m4,
    #view-header #h2 .utilities.shrink {
        display: none;
    }

    .m4-menu .m4-menu--bar .m4-menu--align-right {
        position: relative;
    }

    #view-header .m4-menu--drawer .m4-menu--drawer-content-wrapper {
        /*        flex-direction: row;*/
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1480px) {
    #view-header .header-container:not(.shrink) .logo {
        height: 75px;
        width: 240px;
        top: -17px;

        img {
            width: 240px;
        }
    }

    #view-header .m4-menu .m4-menu--bar {
        bottom: 18px;
    }
}

.m4-menu--mobile-wrapper .m4--drawer-element.mobile-element:not(.child-element):first-child,
#explore-button {
    display: none !important;
}

.m4--menu-item .m4--menu-item-text:hover,
#view-header .utilities.utilities-top .utility-bar-items a:hover {
    color: #78a3d2 !important;
    transition: all .35s ease-in-out;
}

#view-header .header-container.shrink .logo {
    /* background: url(https://5il.co/1r7u4) no-repeat left center; */
    width: 240px;
    height: 45px;
    background: url(https://cmsv2-shared-assets.apptegy.net/Schools/Chesterfield-County-Public-Schools-3668/images/ccpsone-header-logo.png) no-repeat left center;
    background-size: contain;
    margin-top: 2px;
}

#view-header .header-container.shrink .logo img {
    opacity: 0;
}

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

    .header-container #newSearchButton,
    #view-header #h2 .right-mobile {
        display: none;
    }

    #view-header #h2 .right {
        display: flex;
    }

    #view-header #h2 .utilities.utilities-top {
        justify-content: space-between;
        padding-inline: 10px;
        align-items: flex-start;
        box-sizing: border-box;
    }

    #view-header #h2 .search {
        margin-right: 0;
        margin-left: 5px;
        margin-top: 10px;
    }

    #view-header #h2 .utilities.utilities-top .utility-bar-items {
        margin: 0;
    }

    #view-header #schools-menu-sm1 {
        left: 0;
        right: 0;
    }

}

@media only screen and (max-width: 600px) {
    #schools-menu-sm1 .column {
        width: 100%;
        box-sizing: border-box;
    }

    #schools-menu-sm1 .column.multiple-headlines .SchoolsMenuHeader .button-title svg {
        display: none;
    }

    #schools-menu-sm1 .column.multiple-headlines .parent-item.SchoolsMenuHeader {
        margin-bottom: 0;
    }

    #schools-menu-sm1 .schools-menu-header {
        font-size: 18px;
    }

    #schools-menu-sm1 .button-title {
        padding: 5px;
        display: flex;
        align-items: center;
        gap: 3px;
    }

    #schools-menu-sm1 .column ul {
        margin: 0;
    }

    #view-header #schools-menu-sm1 .new-child-ul .SchoolsMenuHeader {
        margin-top: 0;
        margin-bottom: 15px;
    }
}

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

    #view-header .languages span,
    #view-header .menu span,
    #view-header .schools span {
        font-size: 13px;
    }
}

/* gallery */

/* #cms-gallery .title h2 a {
    color: currentColor;
    text-decoration: none;
}
#cms-gallery .title h2 a:hover {
    text-decoration: underline;
}
#cms-gallery .img-slider:after {
    position: absolute;
    content: no-close-quote;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: transparent;
    background-image: linear-gradient(180deg, #021C1C 9%, #00000030 25%);
    opacity: 0.75;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    height: 100%;
    width: 100%;
    z-index: 0;
    filter: brightness(115%) contrast(112%) saturate(100%) blur(4.8px) hue-rotate(0deg);
}

#cms-gallery .text a {
    text-decoration: none;
    -webkit-line-clamp: 2; 
      -webkit-box-orient: vertical;  
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
} */

/* Live Feed Gallery */
#cms-gallery .liveFeed-text,
#custom-news .liveFeed-text {
    padding-right: 20px;
}

#cms-gallery .liveFeed-text-url,
#custom-news .liveFeed-text-url {
    display: block;
    font-weight: 700;
    overflow: hidden;
    margin-top: 10px;
}

#cms-gallery .liveFeed-text-url:hover,
#custom-news .liveFeed-text-url:hover {
    text-decoration: underline;
}

#cms-gallery .tns-ovh {
    padding-bottom: 11px;
}

#container #live-feed .status,
#news-article .page-container-item .article-content {
    line-height: 1.6;
}

#container #live-feed .page-container {
    max-width: 1000px;
}

/* Live Feed Gallery */

/* @media screen and (min-width: 960px) {
    #cms-gallery .slide {
        --image-height: calc(100vh - 20px) !important;
    }

    #cms-gallery .text {
        left: 50%;
        right: 20vw;
        bottom: auto;
        top: max(11vw, 176px);
        width: 517px;
        max-width: 40%;
        border-radius: 10px;
        
    }

    #cms-gallery .pause,
    #cms-gallery .play,
    #cms-gallery .position {
        bottom: 25px;
    }

    #cms-gallery .pause,
    #cms-gallery .play {
        left: auto;
        right: 10px;
    }

    #cms-gallery .position {
        left: auto;
        right: 45px;
    }
} */

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

    /* #view-header .header-container.shrink .logo {
    width: 200px;
    height: 40px;
    margin-top: 10px;
    } */
}

/* @media screen and (min-width: 1280px) {
    #cms-gallery .text {        
        animation-duration: 1s;
        animation-fill-mode: both;
        animation-name: fadeInRight; 
    }

    #cms-gallery .pause,
    #cms-gallery .play {
        right: auto;
        left: calc(20vw + 715px);
    }

    #cms-gallery .position {
        left: calc(20vw + 755px);
    }
}

@media screen and (max-width: 959px) {
    #cms-gallery .text {
        position: relative;
    }

    #cms-gallery .text .description {
        margin-right: 40px;
    }
} */

#cms-gallery .tns-controls button {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 40px;
    height: 30px;
    text-indent: -999px;
    overflow: hidden;
    font-size: 0;
    border: 0;
    padding: 0;
    background: transparent;
}

#cms-gallery .tns-controls button[data-controls=prev] {
    transform: translateY(-30px) rotate(90deg);
}

#cms-gallery .tns-controls button[data-controls=next] {
    transform: translateY(30px) rotate(90deg);
}

#cms-gallery .tns-controls button::after {
    width: 100%;
    height: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    content: no-close-quote;
    font-size: 0;
    opacity: 0.6;
    transition: all 0.35s ease-in-out;
}

#cms-gallery .tns-controls button:hover::after {
    opacity: 1;
}

#cms-gallery .tns-controls button[data-controls=prev]:after {
    background: url(https://cmsv2-shared-assets.apptegy.net/Global/Images/Icons/left-white-arrow.svg) no-repeat center center;
    background-size: 23px auto;
}

#cms-gallery .tns-controls button[data-controls=next]:after {
    background: url(https://cmsv2-shared-assets.apptegy.net/Global/Images/Icons/right-white-arrow.svg) no-repeat center center;
    background-size: 23px auto;
}

#cms-gallery button[data-action=stop],
#cms-gallery button[data-action=start] {
    display: none;
}

#cms-gallery .tns-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    gap: 5px;
}

#cms-gallery .tns-nav button {
    background: #FFF;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0.6;
    transition: all 0.35s ease-in-out;
}

#cms-gallery .tns-nav button.tns-nav-active,
#cms-gallery .tns-nav button:hover {
    opacity: 1;
}

/* custom LF */

#cms-gallery .custom-liveFeed,
#custom-news .custom-liveFeed {
    background: #000000CC;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: hidden;
    justify-content: center;
    flex-direction: column;
    display: flex;
    z-index: 1;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

#cms-gallery .custom-liveFeed h2,
#custom-news .custom-liveFeed h2 {
    color: #FFF;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
}

#cms-gallery .custom-liveFeed h2 a,
#custom-news .custom-liveFeed h2 a,
#cms-gallery .custom-liveFeed .liveFeed-text-url,
#custom-news .custom-liveFeed .liveFeed-text-url {
    color: #FFF;
    text-decoration: none;
}

#cms-gallery .custom-liveFeed .liveFeed-text-url,
#custom-news .custom-liveFeed .liveFeed-text-url {
    font-size: 16px;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
}

#cms-gallery .liveFeed-item:not(:last-child),
#custom-news .liveFeed-item:not(:last-child) {
    margin-bottom: 20px;
}

@media screen and (min-width: 960px) {

    #cms-gallery .custom-liveFeed,
    #custom-news .custom-liveFeed {
        left: 50%;
        right: 20vw;
        bottom: auto;
        top: max(11vw, 176px);
        width: 517px;
        max-width: 40%;
        border-radius: 10px;
        padding: 40px;
        display: inline-flex;
        position: absolute;
    }

    #cms-gallery .custom-liveFeed h2,
    #custom-news .custom-liveFeed h2 {
        font-size: 32px;
    }
}

@media screen and (min-width: 1280px) {

    #cms-gallery .custom-liveFeed,
    #custom-news .custom-liveFeed {
        animation-duration: 1s;
        animation-fill-mode: both;
        animation-name: fadeInRight;
    }
}

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

    #cms-gallery .custom-liveFeed,
    #custom-news .custom-liveFeed {
        position: relative;
        order: 2;
    }

    #cms-gallery .custom-liveFeed .custom-liveFeed__inner,
    #custom-news .custom-liveFeed .custom-liveFeed__inner {
        margin-right: 40px;
    }

    #g2 {
        display: flex;
        flex-direction: column;
    }
}

/* remove profile photo and name from LF list page */
#container #live-feed .avatar-holder,
#container #live-feed .date-author {
    display: none;
}

#container #live-feed .page-container-item {
    padding-block: 20px;
}

/* START quick links container */
#quick-links .container-box {
    max-width: 1485px;
    margin-inline: auto;
    position: relative;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    padding: 20px 15px;
    background-color: var(--section-bg-color);
    width: 90%;

    @media only screen and (min-width: 960px) {
        margin-top: -200px;
    } 
    @media only screen and (min-width: 1280px) {
        margin-top: -320px;
    } 

    .see-all-top .header-bottom span::after {
        width: 1240px;
        max-width: 100%;


        @media only screen and (min-width: 960px) {
            max-width: 90%;
        }
    }
}

@media only screen and (min-width: 960px) {
    #app:has(#quick-links .container-box) {
        #cms-gallery {
            .text {
                margin-bottom: 100px;
            }
            .text,
            .pause.button-action,
            .play.button-action,
            .position {
                transform: translateY(-120px);
            }
        }
    }
    #cms-gallery .slide {
        --image-height: 45vw !important;

        img {
            object-position: top center;
        }
    }
}

@media only screen and (min-width: 1280px) {
    #app:has(#quick-links .container-box) {
        #cms-gallery {
            .text {
                margin-bottom: 10px;
                left: auto;
                right: 169px;
            }

            .text,
            .pause.button-action,
            .play.button-action,
            .position {
                transform: translateY(-240px);
            }
        }
    }
}

/* END quick links container */
/* custom stats */
#stats-s2 {
    max-width: 1200px;
    width: 95%;
    background: #FFF;
    box-sizing: border-box;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
    padding: 20px 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    margin: 25px auto;
}

#stats-s2 .stats-info {
    flex-wrap: wrap;
    order: -1;
}

#stats-s2 .stats-header {
    width: 100%;
    box-sizing: border-box;
    min-height: inherit;
    top: 0;
    margin-bottom: 15px;
    margin-right: 0;
}



#stats-s2 .stat-content .stat-headline {
    font-weight: 700;
    font-size: clamp(32px, 3.214vw, 45px);
    line-height: 1.1;
}

#stats-s2 .stat-content {
    padding: 5px 10px;
}

#stats-s2 .stat-content .stat-description {
    font-size: clamp(17px, 1.429vw, 20px);
    font-weight: 500;
    text-transform: uppercase;
}

#stats-s2 .see-all-container,
#stats-s2 .slider-dots-w-header {
    justify-content: center;
}

#stats-s2 .slider-dots-w-header {
    margin-top: 10px;
    margin-bottom: 20px;
}

#stats-s2 .see-all-container h2 {
    font-size: 34px;
    font-weight: 700;
}

@media screen and (min-width: 960px) {
    #stats-s2 {
        width: 90%;
        margin: -110px auto 0px;
    }
}

@media only screen and (min-width: 1280px) {
    #stats-s2 .navigation .arrows-w-header {
        top: -100px;
    }

    #stats-s2 .stats-card:not(.stats-header) {
        border-right: 1px solid #d7d7d9;
        min-height: inherit;
        box-sizing: border-box;
    }

    #stats-s2 .stats-card:last-child {
        border: 0;
    }
}


/* top 3 boxes */

#stats-s2 .row.ts-one-column-row .column {
    display: flex;
    flex-wrap: wrap;
}

#stats-s2 .row.ts-one-column-row .block {
    padding: 10px;
    box-sizing: border-box;
    flex-grow: 1;
}


#stats-s2 .row .card-block {
    position: relative;
    height: 100%;
    min-height: 300px;
    overflow: hidden;
    background: var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    isolation: isolate;
}

#stats-s2 .row .card-left img {
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    z-index: -1;
    opacity: 0.6;
    width: 100%;
    height: 100%;
    object-position: top center;
    display: block;
}

#stats-s2 .row .headline {
    overflow-wrap: break-word;
    position: absolute;
    box-sizing: border-box;
    padding: 5px;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

#stats-s2 .row .headline h3 {
    color: #ffffff;
    font-size: 25px;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

#stats-s2 .card-text {
    height: 100%;
    width: 100%;
}

#stats-s2 .row .content {
    color: #FFF;
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.85);
    height: 100%;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateX(-100%);
    transition: all 800ms cubic-bezier(0.455, 0.030, 0.515, 0.955)
}

#stats-s2 .row .block:nth-child(2) .content {
    transform: translateY(100%);
}

#stats-s2 .row .block:nth-child(3) .content {
    transform: translateX(100%);
}

#stats-s2 .row .card-block:hover .content,
#stats-s2 .row .card-block:focus-within .content {
    transform: translate(0);
}

#stats-s2 .row .content p {
    margin-bottom: 12px;
}

#stats-s2 .row .content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#stats-s2 .row .content ul li {
    margin-bottom: 3px;
    line-height: 1.2;
    padding-left: 10px;
    display: flex;
}

@media (min-width: 860px) {
    #stats-s2 .row.ts-one-column-row .block {
        width: 33.33%;
    }
}

@media (min-width: 1200px) {
    #stats-s2 .row .headline h3 {
        font-size: 40px;
    }
}


/* Footer */
#view-footer {
    width: 100%;
    overflow: hidden;
}

#view-footer #footer-f1 {
    padding-top: 0;
}

#view-footer #footer-f1 .footer-column-main h2,
#view-footer #footer-f1 .footer-columns h2 {
    font-size: 21px;
    line-height: 1.3;
    text-transform: uppercase;
    font-weight: 700;
}

#view-footer #footer-f1 .footer-column-last {
    width: 100%;
    order: -1;
    text-align: center;
    position: relative;
    isolation: isolate;
    padding: 30px 20px;
    margin-bottom: 30px;
}

#footer-f1 .footer-column-last:after {
    position: absolute;
    left: 50%;
    top: 0;
    width: 120vw;
    height: 100%;
    transform: translateX(-50%);
    z-index: -1;
    background: var(--bg-color);
    content: no-close-quote;
    display: block;
    filter: brightness(1.5);
}

#view-footer #footer-f1 .footer-column-last h2 {
    font-size: clamp(30px, 2.857vw, 40px);
    line-height: 1.3;
    font-weight: 500;
    text-transform: uppercase;
    font-family: Roboto, sans-serif;
}

#view-footer #footer-f1 .footer-column-main {
    order: 3;
}

#view-footer .apptegy-copyright {
    width: 100%;
    box-sizing: border-box;
    border: 0 !important;
    background: #000;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#view-footer .apptegy-copyright h2 {
    display: none;
}

#view-footer .apptegy-copyright ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#view-footer .apptegy-copyright li {
    padding: 10px;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 400;
    position: relative;
}

#view-footer .apptegy-copyright li::after {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: #FFF;
    content: no-close-quote;
}

#view-footer .apptegy-copyright li:first-child::after {
    display: none;
}

.apptegy-copyright .footer-columns+span {
    margin-left: auto;
}

#view-footer .apptegy-copyright a:hover,
#footer-f1 .footer-columns ul li a:hover {
    color: #78A3D2 !important;
}

#view-footer .apptegy-copyright span {
    padding: 10px;
    display: inline-block;
    font-weight: 400;
    /*    flex-grow: 1;*/
    text-align: right;
}

@media (min-width: 1200px) {
    #view-footer #footer-f1 {
        padding-left: 6vw;
        padding-right: 6vw;
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 700px) {
    #view-footer .apptegy-copyright {
        flex-direction: column;
        align-items: center;
    }

    #view-footer .apptegy-copyright span {
        text-align: center;
    }
}

#cms-footer #footer-f1 .footer-social-links {
    --icon-color: var(--text-link-color);
    --icon-color-hover: var(--text-link-color);
    --icon-size: 90%;
    --icon-size-mobile: 36px;
}

#footer-f1 .footer-column-last .footer-social-links li a:hover {
    transform: scale(1.1);
}

/*  NEWS section */

/* #home .view-container.custom-news {
    background: var(--second-color) !important;
} */

.custom-news .homepage-component.first.left-sidebar {
    display: none;
}

/* #home .view-container.custom-news #view-news {
    position: relative;
    isolation: isolate;
}

#home .view-container.custom-news #view-news:after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40%;
    background: #FFF;
    z-index: -1;
    content: no-close-quote;
    display: block;
}

#view-news .see-all-container.see-all-top h2 {
    font-family: Oswald, sans-serif !important;
    font-size: clamp(40px, 4.286vw, 60px);
    font-weight: 600 !important;
    text-transform: uppercase;
} */

#view-news .see-all-container.see-all-top h4,
#home .see-all-container.see-all-bottom a {
    font-size: clamp(18px, 2.286vw, 24px);
    /* font-family: Courgette, cursive; */
    font-weight: 500;
    margin-bottom: 8px;
    text-align: center;
}

#home .see-all-container.see-all-bottom a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#home .see-all-container.see-all-bottom a svg {
    width: 21px;
    height: 24px;
    fill: var(--button-text-color);
}

#view-news .see-all-container.see-all-top h4,
#home .see-all-container.see-all-bottom a:hover {
    color: var(--primary-color);
    background-color: var(--bg-color);
}

#home .see-all-container.see-all-bottom a:hover svg {
    fill: var(--primary-color);
}

.custom-news #news-n2 .see-all-container,
.custom-news #news-n2 .see-all-container .header-slot-container {
    width: 100%;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.custom-news #news-n2 .see-all-container.see-all-bottom {
    margin-top: 15px;
}

.custom-news #news-n2 .news-content {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(1, 1fr);
    gap: 5px;
    max-width: 1320px;
    margin-inline: auto;
    box-sizing: border-box;
}

.custom-news #news-n2 .news-content .story {
    width: 100%;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    position: relative;
    background-color: #000000;
    min-height: 225px;
    border-radius: 5px 5px 5px 5px;
    grid-column: span 1;
    grid-row: span 1;
}

.custom-news #news-n2 .more-headlines-header {
    display: none;
}

.custom-news #news-n2 .news-content .story .news-image-container,
.custom-news #news-n2 .news-content .story .news-image-container div {
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: block;
}

.custom-news #news-n2 .news-content .story .news-image-title-link {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    height: 100%;
    align-items: flex-end;
    /* display: block; */
}



.custom-news #news-n2 .news-content .story .news-image-container .news-image {
    border: none;
}

.custom-news #news-n2 .news-content .story .news-image-container .news-image:before {
    display: none;
}

.custom-news #news-n2 .news-content .story .news-image-container .image-hidden-wrapper {
    padding-top: 0;
    overflow: unset;
    border-top: none;
    font-size: 0;
}

.custom-news #news-n2 .news-content .story .news-image-container .image-hidden-wrapper img {
    object-fit: cover;
    opacity: 0.5;
    transition: all .5s ease-in-out;
}

.custom-news #news-n2 .news-content .story:hover .news-image-container .image-hidden-wrapper img {
    opacity: 0.3;
}

.custom-news #news-n2 .news-content .story:hover .news-image-container .image-hidden-wrapper img {
    transform: none;
}

.custom-news #news-n2 .news-content .story .news-image-title-link .news-title {
    width: 100%;
    color: #fff;
    z-index: 9;
    font-size: clamp(17px, 1.538vw, 20px);
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    padding: 20px;
    box-sizing: border-box;
    transition: all .25s linear;
    overflow: hidden;
}

.custom-news #news-n2 .news-content .story .news-image-title-link .news-snippet,
.custom-news #news-n2 .news-content .story .news-image-title-link .news-backdrop {
    display: none;
}

@media (min-width: 600px) {
    .custom-news #news-n2 .news-content {
        grid-template-columns: repeat(4, 1fr);
    }

    .custom-news #news-n2 .news-content .story {
        grid-column: span 2;
        grid-row: span 2;
    }
}

@media (min-width: 980px) {
    .custom-news #news-n2 .news-content .story {
        grid-column: span 1;
        grid-row: span 1;
    }

    .custom-news #news-n2 .news-content .story:nth-child(6) {
        display: none;
    }

    .custom-news #news-n2 .news-content .story:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }
}

@media (max-width: 599px) {

    .custom-news #news-n2 .news-content .story:nth-child(5),
    .custom-news #news-n2 .news-content .story:nth-child(6) {
        display: none;
    }
}

/* filter News */
/* #home #news-container .story .news-image-title-link,
#home #news-container .story.N2-story .outer-snippet,
#home .itemsAdded .story:not(.customStory) {
    display: none;
}

#home #news-container .story .news-image-title-link.customStory {
    display: flex;
}

@media only screen and (min-width: 600px) {
    #home #news-container .N2-more-story.story .news-image-title-link.customStory,
    #home #news-container .N3-story.story .news-image-title-link.customStory {
        display: flex;
    }
} */

/* custom Events */
#home .see-all-container a {
    font-size: clamp(18px, 2.286vw, 24px);
    /* font-family: Courgette, cursive; */
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    text-transform: capitalize;

    &:hover::before {
        background-color: var(--primary-color);
    }

    &::before {
        content: '';
        width: 25px;
        height: 28px;
        display: block;
        background-color: var(--button-text-color);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-arrow-right' viewBox='0 0 23 28'%3E%3Cpath d='M23 15c0 0.531-0.203 1.047-0.578 1.422l-10.172 10.172c-0.375 0.359-0.891 0.578-1.422 0.578s-1.031-0.219-1.406-0.578l-1.172-1.172c-0.375-0.375-0.594-0.891-0.594-1.422s0.219-1.047 0.594-1.422l4.578-4.578h-11c-1.125 0-1.828-0.938-1.828-2v-2c0-1.062 0.703-2 1.828-2h11l-4.578-4.594c-0.375-0.359-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.406l1.172-1.172c0.375-0.375 0.875-0.594 1.406-0.594s1.047 0.219 1.422 0.594l10.172 10.172c0.375 0.359 0.578 0.875 0.578 1.406z'%3E%3C/path%3E%3C/svg%3E");
        mask-repeat: no-repeat no-repeat;
        mask-position: center center;
        mask-size: contain;
    }
}

#home .view-events #events-e1 {
    position: relative;
    padding-bottom: 120px;
    box-sizing: border-box;

    @media only screen and (min-width: 960px) {
        padding-inline: 40px;
    }

    .see-all-container a {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
    }
}



#home .view-events .see-all-container.see-all-top svg {
    width: 25px;
    height: 28px;
    fill: var(--button-text-color);
    display: none;
}

#home .view-events .see-all-container.see-all-top a:hover {
    color: var(--primary-color);
}

#home .view-events .see-all-container.see-all-top a:hover svg {
    fill: var(--primary-color);
}

#home .view-events #events-e1 .see-all-container {
    position: static;
}

#home #events-e1 .events-card .event-tag-wrapper {
    order: 4;
}

#home .view-events #events-e1 .events-card {
    box-shadow: 0 3px 13px 0 rgba(0, 0, 0, .08);
    transition: all ease .4s;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#home .view-events #events-e1 .events-card:not(:nth-child(-n+3)) {
    display: none;
}

@media only screen and (min-width: 1000px) {
    #home .view-events #events-e1 .events-card {
        width: calc(33% - 18px);
        margin-right: 24px;
    }
}

#home .view-events #events-e1 .events-card:nth-child(3) {
    margin-right: 0;
}

#home .view-events #events-e1 .events-card:hover {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .12);
}

#home .view-events #events-e1 .events-card .events-date,
#home .view-events #events-e1 .events-card .events-time {
    font-size: clamp(16px, 1.538vw, 20px);
    line-height: 1.2;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

#home .view-events #events-e1 .events-card .events-title-wrapper {
    margin-bottom: 10px;
}

#home .view-events #events-e1 .events-card .events-title {
    font-weight: 700;
    font-size: clamp(17px, 1.615vw, 21px);
    line-height: 1.3;
    text-transform: uppercase;
    -webkit-line-clamp: 6;
}

#home .view-events #events-e1 .events-card .events-time {
    order: 2;
}

#home .view-events #events-e1 .see-all-container.see-all-bottom {
    text-align: center;
    display: flex;
    flex-direction: column;
}

@media only screen and (max-width: 600px) {
    #home .view-events #events-e1 {
        padding-bottom: 70px;
    }
}

/* SUBPAGES */
@media only screen and (min-width: 700px) and (max-width: 960px) {

    #page .row.ts-three-column-row,
    #page .row.ts-left-sidebar-row,
    #page .row.ts-right-sidebar-row {
        display: block;
    }

    #page .row.ts-three-column-row .column,
    #page .row.ts-left-sidebar-row .column,
    #page .row.ts-right-sidebar-row .column {
        display: inline-block;
        width: 100%;
        vertical-align: top;
        margin-left: 0;
        margin-right: 0;
    }
}

@media only screen and (max-width: 699px) {
    #page .row {
        display: block;
    }

    #page .row .column {
        display: inline-block;
        width: 100%;
        vertical-align: top;
        margin-left: 0;
        margin-right: 0;
    }
}

/* full width image parallax */
/*

#page .row.ts-full-width-row:first-child .block.hasBackground {
    margin-bottom: 0;
}
*/
#page .row.ts-full-width-row:first-child {
    min-height: 300px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 40px;
}

#page .row.ts-full-width-row.parallaxSection {
    height: calc(100vh - 216px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#page .row.ts-full-width-row.parallaxSection~.pageCloneContent .row.ts-full-width-row:first-child {
    display: none;
}

#page .row.ts-full-width-row:first-child .block {
    overflow: visible;
}

#page .row.ts-full-width-row:first-child .block:last-child {
    margin-bottom: 0;
}

#page .row.ts-full-width-row .hasBackground .image-container {
    background-size: cover !important;
    background-attachment: scroll !important;
    background-position: center top;
}

#page .row.ts-full-width-row:first-child .image-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(130vh - 216px);
    z-index: -1;
    display: block;
}

#page .row.ts-full-width-row:first-child:not(.parallaxSection) .image-container {
    position: relative;
    height: calc(100vh - 216px);
    min-height: 300px;
}

#page .row.ts-full-width-row:first-child:not(.parallaxSection) .image-container img {
    height: calc(130vh - 216px) !important;
}

#page-wrapper #page .row.ts-full-width-row:first-child .image-container:before {
    position: absolute;
    content: no-close-quote;
    font-size: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
    opacity: 0.35;
}

#page .row.ts-full-width-row:first-child .image-container+p {
    display: none;
}

#page .row.ts-full-width-row:first-child .image-container img {
    object-fit: cover;
    object-position: center top;
    width: 100% !important;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100% !important;
}

#page .row.ts-full-width-row:first-child .hasBackground .image-container img {
    opacity: 0;
}

#page .row.ts-full-width-row:first-child .heading-block {
    color: #FFF;
    text-align: center;
    animation-name: fadeInLeft;
    animation-duration: 1.25s;
}

#page .row.ts-full-width-row:first-child .heading-block h1 {
    font-weight: 800;
    text-transform: capitalize;
    font-size: clamp(1.875rem, -1.25rem + 8.333vw, 6.25rem);
    line-height: 1;
}

@media only screen and (min-width: 1024px) {

    #page .row.ts-full-width-row.parallaxSection,
    #page .row.ts-full-width-row:first-child:not(.parallaxSection) .image-container {
        height: calc(100vh - 130px) !important;
    }

    #page .row.ts-full-width-row:first-child .image-container,
    #page .row.ts-full-width-row:first-child:not(.parallaxSection) .image-container img {
        height: calc(130vh - 130px) !important;
    }
}

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

    #page .row.ts-full-width-row.parallaxSection,
    #page .row.ts-full-width-row:first-child:not(.parallaxSection) .image-container {
        height: calc(100vh - 326px) !important;
    }

    #page .row.ts-full-width-row:first-child .image-container,
    #page .row.ts-full-width-row:first-child:not(.parallaxSection) .image-container img {
        height: 100% !important;
    }

    #page .row.ts-full-width-row:first-child .hasBackground .image-container {
        background-attachment: fixed !important;
        background-position: center top !important;
    }
}

#page .accordion-block .collapsible-section .section-header {
    min-height: 60px;
}

#page .accordion-block .accordion-panel:first-child .collapsible-section.default {
    border-top: 1px solid var(--primary-color);
}

#page .accordion-block .collapsible-section.default {
    border-bottom: 1px solid var(--primary-color);
    margin: 0;
}

#page .accordion-block .collapsible-section.default .section-header {
    background: transparent;
    border-bottom-color: transparent;
    margin-bottom: 0;
}

#page .accordion-block .collapsible-section.default h2+div {
    padding-bottom: 20px;
    padding-top: 20px;
}

/* animations */

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}


/* animated buttons */
#page .animated-buttons {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 5px;
    margin-top: 20px;
}

#page .animated-buttons .button_item {
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.24);
    margin-bottom: 10px;
    flex-grow: 1;
}

#page .animated-buttons .ue-lord-icon-wrapper,
#page .animated-buttons .ue-lord-icon-wrapper a {
    display: flex;
    align-items: center;
    transition: 0.3s;
}

#page .animated-buttons a {
    text-decoration: none;
    padding: 5px 3px;
    box-sizing: border-box;
    gap: 4px;
}

#page .animated-buttons lord-icon {
    width: 60px;
    height: 60px;
}

#page .animated-buttons .ue-box-title {
    font-size: 17px;
    font-weight: 500;
    color: var(--primary-color);
    font-family: Oswald, sans-serif !important;
}

#page .animated-buttons .ue-box-text {
    color: #737373;
    margin-top: 3px;
}

#page .animated-buttons .ue-box-text:empty {
    display: none;
}

#page .button_item.big-btn a {
    text-align: center;
    padding: 20px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.21);
    border-radius: 30px 30px 30px 30px;
    box-sizing: border-box;
    max-width: 245px;
    display: block;
    text-decoration: none;
    margin: 5px 5px 20px;
}

#page .button-block .button.square {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.21);
    border-radius: 30px 30px 30px 30px;
    border: none;
    margin-bottom: 10px;
}

#page .button-block .button.square .title {
    font-size: 18px;
    line-height: 1.3;
}

#page .button-block .button.square .icon-wrapper .raw-svg svg {
    width: 72px;
    height: 72px;
}

#page .button_item.big-btn .ue-box-title {
    margin-top: 14px;
    font-size: 21px;
    line-height: 1.3;
    text-align: center;
    color: #000;
}

#page .button_item.big-btn lord-icon {
    width: 90px;
    height: 90px;
    max-width: 100%;
}

#page .horizontal-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

#page .horizontal-buttons .ue-lord-icon-wrapper {
    height: 100%;
}

#page .horizontal-buttons.grid-50 .button_item {
    width: calc(50% - 15px);
    flex-grow: 1;
    min-width: 200px;
}

#page .horizontal-buttons.grid-50 .button_item a {
    max-width: 100%;
}

#page .horizontal-buttons .button_item.big-btn a {
    margin-bottom: 5px;
    height: calc(100% - 10px);
}

#page .horizontal-buttons .button_item.big-btn .ue-box-title {
    font-size: 19px;
}

#page .font-style-2 .button_item.big-btn .ue-box-title {
    font-size: 17px;
    font-weight: 500;
    font-family: Oswald, sans-serif;
}

#page-wrapper #page {
    margin-bottom: 0;
}

#container #page-wrapper #page .row:last-child {
    padding-bottom: 40px;
}

/* section gray background */
#page .row.grayBgFullWidthContainer {
    padding-top: 40px;
    padding-bottom: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    --section-bg-color: #F9F9F9;
    box-shadow: 0 0 0 100vmax var(--section-bg-color);
    background-color: var(--section-bg-color);
    clip-path: inset(0 -100vmax);
}

#page .row.grayBgFullWidthContainer+.grayBgFullWidthContainer {
    margin-top: -40px;
    padding-top: 0;
}

#page .row.grayBgFullWidthContainer:last-child {
    margin-bottom: 0;
}

#page .row.columnsBorder {
    padding-bottom: 20px;
    padding-top: 20px;
}

@media only screen and (min-width: 600px) {
    #page .row.columnsBorder .column {
        border-right: 2px solid #EFE7E7;
        padding-right: 20px;
        box-sizing: border-box;
    }

    #page .row.columnsBorder .column:last-child {
        border: 0;
        padding-right: 0;
    }
}

#page .row.parallaxSection~.row .heading-block h2,
#page .row:not(.parallaxSection) .heading-block h1 {
    position: relative;
    font-family: Roboto, sans-serif !important;
    text-transform: uppercase;
    padding-left: 30px;
    font-size: clamp(30px, 2.857vw, 40px);
    line-height: 1;
}

#page .row:not(.parallaxSection) .heading-block h1 {
    font-size: clamp(40px, 4vw, 56px);
}

#page .row.parallaxSection~.row .heading-block h2::after,
#page .row:not(.parallaxSection) .heading-block h1::after {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    content: no-close-quote;
    font-size: 0;
    display: block;
    background: currentColor;
}

#page .row:last-child {
    padding-bottom: 40px;
}

/* 
#page .card-block.shadow {
    border-radius: 0px;
    border-left: 4px solid var(--primary-color);
}
#page div.card-block .card-left img {
   width: 284px;
   height: 284px;
   border-radius: 15px;
}
#page div.card-block .card-text .headline {
    text-transform: uppercase;
    font-family: Oswald, sans-serif !important;
}
@media only screen and (min-width: 960px) {
	#page div.card-block .card-text .headline h2 {
        font-size: 25px;
    }
    #page div.card-block.wrap:not(.image-right) .card-left {
        margin-right: 30px;
    }
}
#page div.card-block.has-image {
    align-items: flex-start;
}

#page div.card-block .card-text .content ul {
    padding-left: 0;
}
#page div.card-block .card-text .content ul li {
    transform: translateX(20px);
    max-width: calc(100% - 20px);
} */


/* Style the Card */

#page div.card-block.shadow {
    display: flex;
    align-items: flex-start;
    border-bottom: 0;
    box-shadow: 0px 0px 10px #75757585;
    border-radius: 10px;
    max-width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    column-gap: 30px;
}

body #app #page div.card-block.shadow .card-left {
    float: unset;
    order: 1;
    margin-right: 0;
    width: 400px;
    flex-shrink: 0;
}

#page div.card-block.shadow .card-left img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#page div.card-block.shadow .card-text {
    order: 0;
}

#page div.card-block.shadow .card-text .headline h2 {
    font-size: 16px;
}

#page div.card-block.shadow .card-text strong em {
    font-size: 1.5em;
    font-style: normal;
    color: var(--primary-color);
    color: #2aac11;
    font-weight: 600;
    border-left: 3px solid var(--primary-color);
    padding-left: .75em;
}


/* parallax cmsv2 section */
#page .row.parallaxFullWidthSection {
    position: relative;
    min-height: calc(100vh - 170px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10%;
    padding-bottom: 10%;
    margin-bottom: 40px;
    margin-top: 30px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #000;
    box-sizing: border-box;
    isolation: isolate;
}

#page .row.parallaxFullWidthSection .column {
    background-color: #00000080;
    padding: 20px 15%;
    box-sizing: border-box;
}

#page .row.parallaxFullWidthSection .column .block {
    overflow: visible;
}

#page .row.parallaxFullWidthSection .image-container {
    opacity: 0.65;
}

#page .row.parallaxFullWidthSection .image-container,
#page .row.parallaxFullWidthSection .image-container img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    display: block;
}

#page .row.parallaxFullWidthSection .hasBackground .image-container img {
    opacity: 0;
}

#page .row.parallaxFullWidthSection .hasBackground .image-container {
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center top !important;
}

#page .row.parallaxFullWidthSection * {
    color: #FFF;
}

#page .row.parallaxFullWidthSection h2 {
    font-size: clamp(40px, 7.143vw, 100px) !important;
    line-height: 1;
    font-weight: 800;
    margin-bottom: 10px;
    padding-left: 0 !important;
    font-family: Roboto, sans-serif !important;
}

#page .row.parallaxFullWidthSection h2::after {
    display: none !important;
}

#page .row.parallaxFullWidthSection .text-block {
    text-transform: uppercase;
    margin-bottom: 20px;
}

#page .row.parallaxFullWidthSection .button.light {
    background: #FFF;
    color: var(--links-color);
    position: relative;
}

#page .row.parallaxFullWidthSection .button.light .title {
    color: var(--links-color);
}

#page .row.parallaxFullWidthSection .button.light::before,
#page .row.parallaxFullWidthSection .button.light::after {
    position: absolute;
    content: no-close-quote;
    transition: all .25s;
    box-sizing: border-box;

}

#page .row.parallaxFullWidthSection .button.light::before {
    border-bottom: 3px solid #FFFFFF;
    border-left: 3px solid #FFFFFF;
    width: 20px;
    height: 20px;
    left: -10px;
    bottom: -10px;
}

#page .row.parallaxFullWidthSection .button.light::after {
    border-top: 3px solid #FFFFFF;
    border-right: 3px solid #FFFFFF;
    width: 20px;
    height: 20px;
    top: -10px;
    right: -10px;
}

#page .row.parallaxFullWidthSection .button.light:hover::before,
#page .row.parallaxFullWidthSection .button.light:hover::after {
    width: 100%;
    height: 100%;
}

#page .row.parallaxFullWidthSection .button.regular.size-large .title {
    margin: 20px 45px;
    font-weight: 500;
    text-transform: uppercase;
}

@media only screen and (max-width: 600px) {
    #page .row.parallaxFullWidthSection .column {
        padding: 20px;
    }
}

/* align heading titles */
#page .heading-block h2[style="text-align: center"],
#page .row:first-child:not(.ts-full-width-row) .heading-block h1[style="text-align: center"] {
    margin-bottom: 20px;
    padding-bottom: 20px;
    padding-left: 0;
}

#page .heading-block h2[style="text-align: center"]::after,
#page .row:first-child:not(.ts-full-width-row) .heading-block h1[style="text-align: center"]::after {
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    top: auto;
    width: 100px;
    max-width: 60%;
    height: 4px;
}

#page .heading-block h2[style="text-align: right"],
#page .row:first-child:not(.ts-full-width-row) .heading-block h1[style="text-align: right"] {
    padding-left: 0;
    padding-right: 30px;
}

#page .heading-block h2[style="text-align: right"]::after,
#page .row:first-child:not(.ts-full-width-row) .heading-block h1[style="text-align: right"]::after {
    left: auto;
    right: 0;
}

/* hide breadcrumb*/
#page-wrapper .breadcrumb {
    display: none;
}

/* container to max-width 1340px with 10px padding */
#page .row.standard-row,
#container .page-container {
    max-width: 1340px;
    box-sizing: border-box;
    width: 95%;
    padding-inline: 10px;
}

@media (max-width: 1024px) {

    .row.standard-row,
    #container .page-container {
        width: 90%;
    }
}

@media (max-width: 767px) {

    .row.standard-row,
    #container .page-container {
        padding-inline: 25px;
        width: 100%;
        box-sizing: border-box;
    }
}

/* hide staff image */
#staff .contact-box .staff-avatar {
    display: none;
}


/* Custom Footer START */

.custom-footer-top {
    display: block;
    color: #fff;
    padding: 50px 30px;
    text-align: center;
    position: relative;
    isolation: isolate;
}

.custom-footer-top:after {
    content: close-quote;
    display: block;
    background-color: var(--primary-color);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    filter: brightness(.75);
}

.custom-footer-top #footer-site-title {
    position: relative;
}

.custom-footer-top #footer-social-icons-area {
    position: relative;
}

.footerSiteTitle {
    font-size: clamp(30px, 2.857vw, 40px);
    line-height: 1.3;
    font-weight: 500;
    text-transform: uppercase;
    font-family: Roboto, sans-serif;
}

.footer-social-icons-area {
    margin-top: 30px;
}

.custom-footer-top .social-icon {
    margin: 10px;
    transition: all .25s linear;
}

.custom-footer-top .social-icon:hover {
    opacity: .8;
}

.custom-footer-top .social-icon svg {
    fill: #fff;
    width: 30px;
    height: 30px;
}

.footer-menu-columns {
    /* To be updated with CSS var */
    background-color: var(--primary-color);
}

.footerMenuColumns {
    display: flex;
    justify-content: center;
    padding: 50px 30px 25px;
}

.customFooterColumn {
    max-width: 450px;
    margin-left: 3%;
    margin-right: 3%;
}

.customFooterMenuItem {
    display: flex;
    align-items: center;
    color: #fff;
    box-sizing: border-box;
    margin-top: 10px;
    margin-bottom: 15px;
    width: 100%;
    text-decoration: none;
}

.customFooterMenuItemGraphic {
    width: 65px;
    box-sizing: border-box;
    flex-shrink: 0;
    text-align: center;
}

.customFooterMenuItemGraphic img,
.customFooterMenuItemGraphic svg {
    max-width: 30px;
    max-height: 30px;
    fill: #fff;
}

.customFooterMenuItemContent {
    font-size: 18px;
    color: #fff;
    line-height: 1.4;
}

.customFooterMenuItemContent p {
    margin-bottom: .5em;
}

.customFooterMenuItemContent a {
    color: #fff;
    text-decoration: none;
}

.customFooterColumn .customFooterMenuItem:nth-child(1) .customFooterMenuItemGraphic img,
.customFooterColumn .customFooterMenuItem:nth-child(1) .customFooterMenuItemGraphic svg {
    max-width: 45px;
    max-height: 45px;
}

.customFooterColumn .customFooterMenuItem:nth-child(1) .customFooterMenuItemContent {
    font-size: 21px;
    text-transform: uppercase;
    font-weight: 700;
}

.footer-bottom-menu-area {
    color: #fff;
    padding: 30px;
    position: relative;
    isolation: isolate;
}

.footer-bottom-menu-area:after {
    content: close-quote;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* To be updated with CSS var */
    background-color: #003845;
    z-index: -1;
}

.footerBottomMenu {
    position: relative;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.footer-bottom-menu-area .buttonText {
    color: #fff;
    text-decoration: none;
    margin-left: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    transition: all .25s linear;
}

.footer-bottom-menu-area .buttonText:hover {
    opacity: .5;
}

.footer-bottom-menu-area .buttonText:not(:last-child):after {
    content: close-quote;
    display: inline-block;
    width: 2px;
    height: 20px;
    background-color: #fff;
    margin-left: 15px;
}

.footer-copyright {
    color: #fff;
    padding: 20px 30px;
    background-color: #000;
    text-align: center;
    font-size: .8em;
}

.footer-copyright a {
    color: #fff;
}

.customFooterColumnApps .customFooterMenuItemGraphic {
    text-align: left;
    width: 40px;
}


@media screen and (max-width: 1200px) {
    .footerMenuColumns {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .customFooterMenuItemContent {
        font-size: 14px;
    }

    .customFooterColumn .customFooterMenuItem:nth-child(1) .customFooterMenuItemContent {
        font-size: 17px;
    }

    .customFooterColumn {
        max-width: 350px;
        margin-left: 1.5%;
        margin-right: 1.5%;
    }

    .customFooterMenuItemGraphic {
        width: 45px;
    }

    .customFooterMenuItemGraphic img,
    .customFooterMenuItemGraphic svg {
        max-width: 20px;
        max-height: 20px;
    }

    .customFooterMenuItemContent {
        font-size: 18px;
        color: #fff;
    }

    .customFooterMenuItemContent a {
        color: #fff;
        text-decoration: none;
    }

    .customFooterColumn .customFooterMenuItem:nth-child(1) .customFooterMenuItemGraphic img,
    .customFooterColumn .customFooterMenuItem:nth-child(1) .customFooterMenuItemGraphic svg {
        max-width: 30px;
        max-height: 30px;
    }

}


/* Custom Footer END */

/* hide news article images in the news listing page */
#container #news-list .article-image {
    display: none;
}

#container #news-list .article-info {
    width: 100%;
    margin-left: 0;
}

/* end */


/* column shadow in cms pages */
.row.cardTypeColumn,
.row.shadowBox {
    margin-bottom: 20px;
}

.column.cardTypeColumn,
.column.shadowBox {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.column.shadowBox {
    text-align: left;
}

.column.cardTypeColumn .image-container {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    width: 100%;
    transition: all .4s;
}

.column.cardTypeColumn .image-container:hover {
    background: #000;
}

.column.cardTypeColumn .image-container a {
    width: 100% !important;
}


.column.cardTypeColumn .image-container img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100%;
    transition: all .4s;
    transition-duration: 1500ms;
    object-fit: cover;
}

.column.cardTypeColumn:hover .image-container img {
    transform: scale(1.2);
    opacity: 0.7;
}


.column.cardTypeColumn .image-container+p {
    padding: 0;
}

.column.cardTypeColumn .text-block {
    padding-left: 6px;
    padding-right: 6px;
}

.column.shadowBox .text-block,
.column.shadowBox .heading-block {
    padding-left: 15px;
    padding-right: 15px;
}

.column.cardTypeColumn .text-block a {
    text-decoration: none;
}

.column.shadowBox .block:first-child .heading-block,
.column.shadowBox .block:first-child .text-block {
    padding-top: 15px;
}

.column.cardTypeColumn .text-block p {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    text-transform: capitalize;
}

.column.cardTypeColumn .text-block p+p {
    font-size: 20px;
}

.column.ts-left-sidebar.cardTypeColumn .image-container {
    min-height: inherit;
}

.column.ts-left-sidebar.cardTypeColumn .image-container img {
    position: relative;
    max-height: 620px;
}

@media only screen and (min-width: 961px) {
    #page .collapsible-section .section-header {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.2;
        text-transform: uppercase;
    }
}

/* end */

/* news article page */
#news-article .page-container-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding-right: 30px;
}

#news-article .page-container-item .article-info {
    order: -1;
}

#container #news-article .page-container-item .article-info .title {
    font-size: clamp(1.625rem, 1rem + 1.667vw, 2.5rem);
    line-height: 1.1;
    font-weight: 600;
}

#news-article .page-container-item .article-image {
    margin-bottom: 20px;
}


#news-article .custom-news {
    width: 100%;
    text-align: center;
    padding-top: 108px;
}

#news-article .custom-news__title {
    margin-bottom: 20px;
    font-size: clamp(1.375rem, 0.7rem + 1.8vw, 2.5rem);
    line-height: 1.1;
    font-weight: 500;
    color: var(--primary-color);
    font-family: Oswald, sans-serif !important;
    text-align: left;
}

#news-article .custom-news__inner .article-item {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    padding: 8px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;
    margin-bottom: 35px;
    display: block;
    transition: all .35s ease-in-out;
}

#news-article .custom-news__inner .article-item:hover {
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

#news-article .custom-news__inner .article-title {
    margin-bottom: 9px;
    color: var(--primary-color);
    font-size: clamp(1.063rem, 0.95rem + 0.3vw, 1.25rem);
    line-height: 1.1;
    font-weight: 500;
}

#news-article .custom-news__inner .article-text {
    color: #666;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 8px;
}

#news-article .custom-news__more a {
    background: var(--primary-color);
    color: #FFF;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    transition: all .35s ease-in-out;
}

#news-article .custom-news__more a:hover {
    background: #111;
}

@media only screen and (min-width: 760px) {
    #news-article .page-container {
        display: flex;
    }

    #news-article .page-container-item {
        min-width: 70%;
    }

    #news-article .custom-news {
        min-width: 30%;
    }
}

/* Friday Family updates */
#news-article .custom-news.filteredNews {
    position: sticky;
    top: 30px;
}

#news-article .page-container {
    align-items: flex-start;
}

#news-article .custom-news.filteredNews {
    padding-top: 35px;
}

.filteredNews .custom-news__inner {
    overflow-y: hidden;
    transition: all 0.5s ease-in-out;
}

#news-article .filteredNews .custom-news__inner .article-item {
    box-shadow: none;
    padding: 0;
    margin: 0 0 15px;
    position: relative;
    box-sizing: border-box;
    padding-left: 25px;
}

#news-article .filteredNews .custom-news__inner .article-item::before {
    position: absolute;
    content: no-close-quote;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    height: 15px;
    width: 15px;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3E%3Cg id='Icon'%3E%3Cpath class='st0' d='M90.6,87c0,3.4-1.3,6.6-3.7,9c-2.4,2.4-5.6,3.7-9,3.7H22.5c-3.4,0-6.6-1.3-9-3.7c-2.4-2.4-3.7-5.6-3.7-9V13.1 c0-3.4,1.3-6.6,3.7-9c2.4-2.4,5.6-3.7,9-3.7h39.7c2.1,0,4.2,0.8,5.7,2.4l20.4,20.4c1.5,1.5,2.4,3.6,2.4,5.7V87z M83.7,87V28.9 c0-0.3-0.1-0.6-0.3-0.8L62.9,7.7c-0.2-0.2-0.5-0.3-0.8-0.3H22.5c-1.5,0-3,0.6-4.1,1.7c-1.1,1.1-1.7,2.5-1.7,4.1V87 c0,1.5,0.6,3,1.7,4.1c1.1,1.1,2.5,1.7,4.1,1.7h55.4c1.5,0,3-0.6,4.1-1.7C83.1,90,83.7,88.6,83.7,87z'%3E%3C/path%3E%3Cpath class='st0' d='M60.6,6.2c0-1.9,1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5v16.2c0,0.6,0.5,1.2,1.2,1.2h16.2c1.9,0,3.5,1.6,3.5,3.5 s-1.6,3.5-3.5,3.5H68.7c-4.5,0-8.1-3.6-8.1-8.1V6.2z'%3E%3C/path%3E%3Cpath class='st0' d='M31.7,46.6c-1.9,0-3.5-1.6-3.5-3.5c0-1.9,1.6-3.5,3.5-3.5h36.9c1.9,0,3.5,1.6,3.5,3.5c0,1.9-1.6,3.5-3.5,3.5 H31.7z'%3E%3C/path%3E%3Cpath class='st0' d='M31.7,62.8c-1.9,0-3.5-1.6-3.5-3.5c0-1.9,1.6-3.5,3.5-3.5h36.9c1.9,0,3.5,1.6,3.5,3.5c0,1.9-1.6,3.5-3.5,3.5 H31.7z'%3E%3C/path%3E%3Cpath class='st0' d='M31.7,79c-1.9,0-3.5-1.6-3.5-3.5c0-1.9,1.6-3.5,3.5-3.5h20.8c1.9,0,3.5,1.6,3.5,3.5c0,1.9-1.6,3.5-3.5,3.5 H31.7z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
}

#news-article .filteredNews .custom-news__inner .article-item:hover {
    text-decoration: underline;
}

#news-article .filteredNews .custom-news__title {
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Roboto, sans-serif !important;
    background: #eef4ff;
    border-right: 3px solid #5a94ff;
    box-sizing: border-box;
    padding: 10px 30px 10px 40px;
    cursor: pointer;
    position: relative;
}

#news-article .filteredNews .custom-news__title::before {
    position: absolute;
    content: no-close-quote;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    height: 24px;
    width: 24px;
    background: url(https://oneccps.org/wp-content/uploads/2023/02/calendar-1-150x150.png) no-repeat left center;
    background-size: contain;
}

#news-article .filteredNews .custom-news__title::after {
    position: absolute;
    content: no-close-quote;
    right: 2px;
    top: 50%;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' class='close' data-v-ece11c7e='' data-v-c40be308=''%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.7144 9L11.5003 14.3919L5.28389 9L4 10.4956L11.5003 17L18.9997 10.4956L17.7144 9Z' data-v-ece11c7e=''%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    transition: all .5s ease-in-out;
    transform: rotate(-180deg) translateY(-50%);
    transform-origin: top center;
}

#news-article .filteredNews .custom-news__title.active::after {
    transform: rotate(0deg) translateY(-50%);
}

#news-article .filteredNews .custom-news__title span {
    display: inline-block;
    margin-left: 5px;
    background: #528ffe;
    color: #000;
    font-size: 13px;
    padding: 10px;
    border-radius: 50%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#news-article .filteredNews .custom-news__inner .article-title {
    font-size: 16px;
}

#news-article .filteredNews .custom-news__inner .article-title {
    font-size: 16px;
}

#news-article .custom-news__inner .article-item.active {
    background: #f2f2f2;
}

#news-article .filteredNews .custom-news__inner .article-item.active {
    background: transparent;
}

#news-article .custom-news__inner .article-item.active .article-title {
    font-weight: 700;
}

@media only screen and (max-width: 759px) {
    .filteredNews .custom-news__inner {
        height: 0 !important;
    }

    .filteredNews .active+.custom-news__inner {
        height: auto !important;
    }
}

/* end news article page  */


/* fix the full width hero image on mobile */
@media only screen and (max-width: 760px) {

    #page .row.ts-full-width-row.parallaxSection,
    #page .row.ts-full-width-row:first-child {
        margin-bottom: 20px;
    }

    #page .row.ts-full-width-row.parallaxSection,
    #page .row.ts-full-width-row:first-child,
    #page .row.ts-full-width-row:first-child .image-container,
    #page .row.ts-full-width-row.parallaxSection .image-container {
        position: relative;
        height: auto !important;
        background: transparent;
        min-height: unset;
        padding: 0;
    }

    #page .row.ts-full-width-row:first-child .block .image-container img,
    #page .row.ts-full-width-row.parallaxSection .block .image-container img {
        opacity: 1;
        position: relative;
        height: auto !important;
        display: block;
        min-height: var(--galleryMinHeight, 220px);
    }

    #page .row.ts-full-width-row:first-child .block,
    #page .row.ts-full-width-row.parallaxSection .block {
        margin-bottom: 0;
    }

    #page .row.ts-full-width-row:first-child .heading-block,
    #page .row.ts-full-width-row.parallaxSection .heading-block {
        position: absolute;
        left: 0;
        width: 100%;
        top: 50%;
        transform: translateY(-50%) !important;
        box-sizing: border-box;
        padding: 10px;
    }

    #page .row.ts-full-width-row:first-child:not(.parallaxSection) .image-container {
        height: auto !important;
        min-height: unset !important;
    }
}


/* fix menu dropdown issue */
@media only screen and (min-width: 1024px) {
    #view-header #cms-header .header-bar-wrapper #m4 .m4-menu--bar .m4--menu-item .m4--menu-item-icon svg path {
        fill: var(--text);
    }

    #view-header #cms-header .m4-menu--drawer {
        top: calc(100% + 20px);
        flex-wrap: wrap;
        /* min-height: 400px; */
        overflow: auto;
        margin: 0;
        /* box-sizing: border-box; */
        display: block;
        padding: 2rem 6%;
        width: calc(100vw - 310px);
        left: auto;
        right: -177px;
    }

    #view-header #cms-header .m4--menu-item-active-line {
        display: none;
    }

    #view-header #cms-header .m4-menu--drawer-title {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    #view-header .m4--drawer-children {
        background: #f2f2f2;
        /* display: block !important; */
        box-sizing: border-box;
        padding: 5px;
        width: 100%;
        min-height: 54px;
        margin-bottom: 8px;
    }

    #view-header #cms-header .m4-menu--drawer-content-wrapper {
        margin: 10px 0;
        display: grid;
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(4, 1fr);
        box-sizing: border-box;
        /* min-height: 400px; */
    }

    #view-header #cms-header .m4-menu--drawer-content-wrapper .m4--drawer-element.child-element {
        margin-left: 10px;
        height: auto;
        min-height: unset;
        margin-bottom: 5px;
        margin-top: 5px;
    }

    #view-header #cms-header .m4-menu--drawer-content-wrapper .m4--drawer-element .m4--drawer-element-title {
        min-height: unset;
        margin-bottom: 15px;
    }

    #view-header #cms-header .m4--drawer-element .m4--drawer-element-title .m4--drawer-element-title-text {
        white-space: normal;
        text-align: left;
    }

    #view-header .m4--drawer-element {
        min-width: unset;
    }

    /* #view-header #cms-header .m4-menu--drawer-content-wrapper .m4--drawer-element .m4--drawer-element-title .m4--drawer-element-title-icon {
        display: none;
    } */
    #view-header #cms-header .m4-menu--drawer::-webkit-scrollbar {
        width: 8px;
    }


    #view-header #cms-header .m4-menu--drawer::-webkit-scrollbar-track {
        background: #eee;
    }

    #view-header #cms-header .m4-menu--drawer::-webkit-scrollbar-thumb {
        background-color: var(--secondary-color);
        border-radius: 20px;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1200px) {
    #view-header #cms-header .m4-menu--drawer-content-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1450px) {
    #view-header #cms-header .m4-menu--drawer-content-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

    #view-header #cms-header .m4-menu--drawer {
        width: calc(100vw - 240px);
    }
}

/* change the LF images background to white */
#container #live-feed .images .image-wrapper {
    background-color: #FFF;
}

/* hide Documents, Forms, 'Search current site only' from the search modal */
#search .filter-tag-section .tag[aria-label~="Documents"],
#search .filter-tag-section .tag[aria-label~="Forms"],
#search .extra-filter-and-sort-section .search-current-org-section {
    display: none;
}

/* fix order issue in header */
#languagebuttonNew,
#schoolsbuttonNew {
    display: none;
}

@media only screen and (min-width: 1024px) {

    #languagebuttonNew,
    #schoolsbuttonNew {
        display: flex !important;
    }

    #schoolsbuttonNew .button-action-content {
        display: flex;
        align-items: center;
    }

    #languagebuttonNew {
        margin-top: 9px;
    }

    #languagebutton:not(.dynamicButton),
    #schoolsbutton:not(.dynamicButton) {
        display: none !important;
    }

    #languagebuttonNew .button-action-content {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    #languagebuttonNew .menu-field {
        color: var(--nav-color);
    }

    #view-header #languagebuttonNew svg,
    #schoolsbuttonNew svg {
        transition: all .35s ease-in-out;
    }

    #view-header:has(#languagesmenu) #languagebuttonNew svg,
    #view-header:has(#schools-menu-sm1) #schoolsbuttonNew svg {
        transform: rotate(-180deg);
    }

    #schoolsbuttonNew .menu-field {
        color: var(--text-color);
    }

    #schoolsbuttonNew svg rect,
    #languagebuttonNew svg rect {
        opacity: 0;
    }

    #view-header:has(#languagebuttonNew) #h2 .utilities.utilities-top .utility-bar-items {
        padding-right: 32px;
    }

    #view-header #languagesmenu {
        margin-top: 25px;
    }

    #view-header:has(#schoolsbuttonNew) .m4-menu .m4-menu--bar {
        right: 0;
    }
}

/* update schools menu */
#schools-menu-sm1 .column .parent-item.SchoolsMenuHeader>.button-title+div {
    display: none;
}

@media only screen and (min-width: 601px) {
    #schools-menu-sm1 .column .parent-item.SchoolsMenuHeader>.button-title {
        display: none;
    }

    #schools-menu-sm1 .column .parent-item.SchoolsMenuHeader>.button-title+div {
        display: block;
    }
}

/* news outline */
.custom-news #news-n2 .news-content .story:focus-within {
    outline: 2px solid var(--primary-color);
}

/* fix extra space on empty divs */
#leftSidebarButtons div:empty {
    display: none !important;
}

#leftSidebarButtons:has(.row.ts-one-column-row .column:empty):has(.row.ts-left-sidebar-row .column:empty) {
    padding: 0;
}

#leftSidebarButtons>.row:has(.column:empty) {
    margin: 0;
}

.slideSection .image-container {
    padding-block: 3px;
}

.slideSection .image-container a:focus-visible {
    outline: 2px solid #000;
}

/* custom live feed from gallery */
.lf-list-container {
    display: flex;
    flex-direction: column;
}

/* #cms-gallery .liveFeed-item {
    height: auto !important;
  } */
#home .custom-liveFeed .lf-pagination,
#page .custom-liveFeed .lf-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    position: relative;
    left: auto;
    right: auto;
    transform: none;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: -10px;
}

.lf-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #FFF;
    opacity: 0.6;

}

.lf-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
}

.liveFeed-item.swiper-slide {
    height: auto !important;
}

.custom-liveFeed {
    --lfGalleryHeight: 280px;
}

.lf-list-wrapper {
    width: 100%;
    height: var(--lfGalleryHeight);
    overflow: hidden;
}


#cms-gallery .lf-arrows-nav>div,
#custom-news .lf-arrows-nav>div {
    position: absolute;
    top: 50%;
    right: 5px;
    left: auto;
    width: 40px;
    height: 30px;
    text-indent: -999px;
    overflow: hidden;
    font-size: 0;
    border: 0;
    padding: 0;
    background: transparent;
    opacity: 0;
}

#cms-gallery .lf-arrows-nav>div[role="button"],
#custom-news .lf-arrows-nav>div[role="button"] {
    opacity: 1;
}

#cms-gallery .lf-arrows-nav .lf-button-prev,
#custom-news .lf-arrows-nav .lf-button-prev {
    transform: translateY(-30px) rotate(90deg);
}

#cms-gallery .lf-arrows-nav .lf-button-next,
#custom-news .lf-arrows-nav .lf-button-next {
    transform: translateY(30px) rotate(90deg);
}

#cms-gallery .lf-arrows-nav>div::after,
#custom-news .lf-arrows-nav>div::after {
    width: 100%;
    height: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    content: no-close-quote;
    font-size: 0;
    opacity: 0.6;
    transition: all 0.35s ease-in-out;
}

#cms-gallery .lf-arrows-nav>div:hover::after,
#custom-news .lf-arrows-nav>div:hover::after {
    opacity: 1;
}

#cms-gallery .lf-arrows-nav .lf-button-prev:after,
#custom-news .lf-arrows-nav .lf-button-prev:after {
    background: url(https://cmsv2-shared-assets.apptegy.net/Global/Images/Icons/left-white-arrow.svg) no-repeat center center;
    background-size: 23px auto;
}

#cms-gallery .lf-arrows-nav .lf-button-next:after,
#custom-news .lf-arrows-nav .lf-button-next:after {
    background: url(https://cmsv2-shared-assets.apptegy.net/Global/Images/Icons/right-white-arrow.svg) no-repeat center center;
    background-size: 23px auto;
}

@media only screen and (min-width: 960px) {
    .lf-list-wrapper {
        max-height: calc(100vh - 400px);
    }
}

.dsb-button-control .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

.dsb-button-control {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.dsb-button-control .dashicons::after {
    content: '';
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg' class='pause_icon' data-v-8439e6cc=''%3E%3Crect width='40' height='40' fill='%23ffffff' class='icon-background'%3E%3C/rect%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 14H16V26H19V14ZM24 14H21V26H24V14Z' fill='%23000000' class='icon-button'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: contain;
    display: block;
    opacity: 0.6;
    transition: all .35s ease-in-out;
}

.dsb-button-control:hover,
.dsb-button-control:focus-visible {
    & .dashicons::after {
        opacity: 1;
    }
}

.dsb-button-control .dashicons.dashicons-controls-play::after {
    background-image: url("data:image/svg+xml,%3Csvg data-v-8439e6cc='' width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg' class='play_icon'%3E%3Crect width='32' height='32' fill='%23FFFFFF' class='icon-background'%3E%3C/rect%3E%3Cpath d='M14 22L20 16L14 10V22Z' fill='%23000000' class='icon-button'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: contain;
}

/* custom news */
#custom-news {
    display: none;
    text-align: left;
}

#custom-news:has(.liveFeed-item__inner) {
    display: block;
}

@media only screen and (min-width: 960px) {
    #page .row.ts-full-width-row:first-child:has(.custom-liveFeed) .image-container img {
        min-height: calc(100vh - 120px);
        object-fit: cover;
        width: 100%;
    }
}

/* has heading block h1 */
#page .row.ts-full-width-row.parallaxSection:has(.custom-liveFeed__inner) {
    align-items: flex-start;
}

@media only screen and (min-width: 960px) {
    #page .row.ts-full-width-row:first-child:has(.custom-liveFeed__inner) .heading-block h1 {
        padding-left: 2%;
        padding-right: min(550px, 45%);
        font-size: clamp(1rem, -1.297rem + 6.125vw, 4.063rem);
        box-sizing: border-box;
        text-align: left !important;
    }

    #page .row.ts-full-width-row.parallaxSection:has(.heading-block h1) #custom-news .custom-liveFeed {
        right: 25px !important;
        left: auto;
    }
}

@media only screen and (min-width: 1280px) {
    #page .row.ts-full-width-row:first-child:has(.custom-liveFeed__inner) .heading-block h1 {
        padding-right: 600px;
    }
}

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

    #page .row.ts-full-width-row:first-child:has(.custom-liveFeed__inner) .heading-block,
    #page .row.ts-full-width-row.parallaxSection:has(.custom-liveFeed__inner) .heading-block {
        top: 80px;
        transform: none;
    }
}

/* end custom news */

/* Fix Site Menu items direction */
#view-header #cms-header .m4-menu--drawer-content-wrapper {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: repeat(4, 2fr) !important;
}

/* Background Color Code for Pages */
#page .row:has(.customSection.grayBgFullWidthContainer) {
    padding-top: 40px;
    padding-bottom: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    --section-bg-color: #F9F9F9;
    box-shadow: 0 0 0 100vmax var(--section-bg-color);
    background-color: var(--section-bg-color);
    clip-path: inset(0 -100vmax);

    &:last-child {
        margin-bottom: 0;
    }
}

#page .row:has(.customSection.grayBgFullWidthContainer)+.row:has(.customSection.grayBgFullWidthContainer) {
    margin-top: -40px;
    padding-top: 0;
}

/* Defaults sidenav to closed so that it does not cover site menu */
@media only screen and (min-width: 1280px) {
    #floating-nav:not(.is-scrolled) .button {
        -webkit-transform: translate(196px) !important;
        transform: translate(196px) !important;
    }

    #floating-nav:not(.is-scrolled) .button:hover {
        -webkit-transform: none !important;
        transform: none !important;
    }
}

/* Defaults sidenav to closed */

#app,
.pb-main,
body,
html,
button {
    font-family: Roboto, sans-serif !important;
    --font-family: Roboto, sans-serif !important;
}



#home {
    width: 100%;
    overflow: hidden;

    .see-all-top {
        margin-bottom: 20px;
        text-align: center;
        margin-bottom: 35px;
        overflow: hidden;

        .header-slot-container,
        h2 {
            width: 100%;
            text-align: center;
            margin-bottom: 0;

            &::after,
            &::before {
                display: none;
            }
        }
    }

    .see-all-top .header-top {
        /* font-family: Courgette, cursive; */
        font-size: clamp(18px, 2.286vw, 24px);
        font-weight: 700;
        margin-bottom: 8px;
        padding: 0 10px;
        display: block;
    }

    .see-all-top .header-bottom {
        position: relative;
        font-size: clamp(30px, 2.857vw, 40px);
        line-height: 1.3;
        font-weight: 700;
        text-transform: uppercase;
        font-family: Roboto, sans-serif;
        display: block;
        isolation: isolate;

        span {
            display: inline-block;
            background: var(--section-bg-color, #FFF);
            padding: 0 20px;
        }
    }

    .see-all-top .header-bottom span::after {
        content: "";
        position: absolute;
        width: 100vw;
        height: 1px;
        background: #000;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
}

#home .see-all-top .header-slot-container:not(:has(.header-bottom)) {
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: center;

    &::before {
        content: '';
        position: absolute;
        width: 100vw;
        height: 1px;
        background: #000;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        display: block !important;
    }

    h2 {
        font-size: clamp(30px, 2.857vw, 40px);
        font-weight: 700;
        line-height: 1.3;
        text-transform: uppercase;
        display: inline-block;
        background-color: var(--bg-color, #FFF);
        width: auto;
        padding-inline: 20px;
    }

}

#home .view-container:has(.homepage-component:nth-child(2)) {
    @media only screen and (min-width: 960px) {
        .homepage-component {
            overflow: hidden;
        }
    }


    .header-slot-container {
        justify-content: flex-start;

        &::before {
            width: 100%;
        }
    }

    .header-slot-container,
    h2 {
        text-align: left;
        padding-left: 0;
    }
}

/* hide footer last column and change color */
#custom-footer-outer .customFooterColumn.customFooterColumnApps {
    display: none;
}

#custom-footer-outer .custom-footer-top:after {
    /* To be updated with CSS var */
    background-color: var(--secondary-color);
    filter: none;
}

/* end */

/* Right Sidebar buttons */

#rightSidebarButtons:not(:has(.link-actions)) {
    --section-bg-color: #f9f9f9;
    padding: 40px 0;
    background: var(--section-bg-color);
    box-sizing: border-box;

    *,
    *::after,
    *::before {
        box-sizing: border-box;
    }

    .see-all-top .header-top,
    .see-all-top .header-bottom {
        color: var(--primary-color);
    }

    /* Main wrapper: image + buttons */
    .rightSidebarButtons-wrapper {
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

    /* Left image column */
    .left-image {
        padding: 10px;
        text-align: center;
        flex: 1;
    }

    .left-image img {
        max-width: 100%;
        height: auto;
        display: inline-block;
        vertical-align: middle;
    }

    /* Buttons container (holds all flip-cards) */
    .buttons-container {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        flex-direction: column;
    }

    .buttons-container>div {
        position: relative;
        /* flex: 1; */
        min-width: 0;
        height: 70px;
        min-height: fit-content;
        overflow: visible;
        perspective: 1000px;
        margin: 10px;
    }

    /* Flip-card faces */
    .flip-card-front,
    .flip-card-back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform-style: preserve-3d;
        transition: all 800ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow-wrap: break-word;
    }

    /* Front face (headline) */
    .flip-card-front {
        background-color: var(--primary-color);
        opacity: 1;
        transform: scale(1);
    }

    /* Back face (content) */
    .flip-card-back {
        background-color: #578235;
        opacity: 0;
        transform: scale(0.5);
        position: relative;
    }

    /* Hover/focus transitions */
    .buttons-container>div:hover .flip-card-front,
    .buttons-container>div:focus-within .flip-card-front,
    .buttons-container>div .flip-card-back {
        opacity: 0;
        transform: scale(0.5);
    }

    .buttons-container>div .flip-card-front,
    .buttons-container>div:hover .flip-card-back,
    .buttons-container>div:focus-within .flip-card-back {
        opacity: 1;
        transform: scale(1);
    }

    /* Text styling inside cards */
    .flip-card-front p,
    .flip-card-back p {
        margin: 0;
        padding: 0;
    }

    .flip-card-front p span {
        color: #FFF;
        text-transform: uppercase;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 0.8px;
        margin-top: 10px;
        padding-inline: 10px;
    }

    .flip-card-back p span {
        color: #FFF;
        text-decoration: none;
        padding: 15px;
        line-height: 1.3;
        display: block;

        a {
            text-decoration: none;
            color: currentColor;
            display: block;

            &::after {
                position: absolute;
                inset: 0;
                z-index: 1;
                content: '';
            }
        }
    }

    /* Responsive column widths */
    @media (min-width: 768px) {
        .rightSidebarButtons-wrapper {
            flex-direction: row;
        }

        .buttons-container>div {
            flex: 1;
        }

        .rightSidebarButtons-wrapper .left-image {
            width: 67%;
        }

        .rightSidebarButtons-wrapper .buttons-container {
            width: 33%;
        }
    }

    @media (min-width: 1024px) {
        .flip-card-front p span {
            font-size: 20px;
        }
    }
}

/* END Right Sidebar buttons */

/* Video lightbox section */
#videoLightbox:not(:has(.link-actions)) {
    --section-bg-color: #f4f3f3;
    box-sizing: border-box;
    background-color: var(--section-bg-color);

    @media only screen and (min-width: 1600px) {
        padding-inline: 70px;
    }

    *,
    *::after,
    *::before {
        box-sizing: border-box;
    }

    .header-slot-container {
        color: var(--primary-color);
    }

    .items-container {
        display: flex;
        flex-direction: column;
        gap: 25px;

        @media only screen and (min-width: 960px) {
            flex-direction: row;
            gap: 65px;

            .big-item {
                width: 73%;

                .item-image {
                    padding-block: 22px;

                    &:hover {
                        &::before {
                            left: -27px;
                        }

                        &::after {
                            right: -27px;
                        }
                    }

                    &::before,
                    &::after {
                        height: calc(100% - 90px);
                    }

                    &::before {
                        left: -22px
                    }

                    &::after {
                        right: -22px;
                    }
                }

                .item-content h3 {
                    font-size: 23px;
                }
            }
        }

        .right-items {
            display: flex;
            flex-direction: column;
            gap: 25px;

            @media only screen and (min-width: 960px) {
                width: 27%;
                padding-top: 7px;
            }


        }

        .item-image {
            padding-block: 15px;
            position: relative;
            margin-bottom: 20px;
            isolation: isolate;
            transition: all .35s ease-in-out;

            &:hover {
                &::before {
                    left: -20px;
                    top: auto;
                    bottom: -5px;
                    background: var(--primary-color);
                }

                &::after {
                    background: var(--third-color, var(--secondary-color));
                    top: -5px;
                    bottom: auto;
                    right: -20px;
                }
            }

            &::before,
            &::after {
                content: '';
                position: absolute;
                left: -15px;
                top: auto;
                bottom: 0;
                background: var(--third-color, var(--secondary-color));
                height: calc(100% - 50px);
                width: 50%;
                transition: all .35s ease-in-out;
                z-index: -1;
            }

            &::after {
                left: auto;
                right: -15px;
                bottom: auto;
                top: 0;
                width: 60%;
                background: var(--primary-color);
            }

            span:not(.label) {
                position: relative;
                height: 0;
                padding-top: 56.25%;
                width: 100%;
                display: block;
                overflow: hidden;

                &:focus-within {
                    outline: 3px solid var(--primary-color);
                }
            }

            a {
                display: block;

                &:hover img,
                &:focus img {
                    transform: scale(1.02);
                }

                &.glightbox-video {
                    /* position: relative; */

                    &:hover::after {
                        opacity: 0.9;
                        transform: scale(1.1) translate(-50%, -50%);
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        width: 70px;
                        height: 70px;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='71' height='71' viewBox='0 0 71 71' fill='none'%3E%3Cg clip-path='url(%23clip0_120_1357)'%3E%3Cpath d='M35.5264 70.0418C54.6017 70.0418 70.0652 54.5782 70.0652 35.5029C70.0652 16.4277 54.6017 0.964111 35.5264 0.964111C16.4511 0.964111 0.987549 16.4277 0.987549 35.5029C0.987549 54.5782 16.4511 70.0418 35.5264 70.0418Z' fill='white'/%3E%3Cpath d='M30.1736 26.5233V44.5473C30.1736 46.5017 31.7588 48.0869 33.7132 48.0869C34.6687 48.0869 35.5808 47.6961 36.254 47.012L45.646 37.3594C47.0033 35.9696 46.9381 33.7329 45.5157 32.4082L36.254 23.8522C35.5808 23.2333 34.7122 22.8967 33.8001 22.8967C31.7914 22.9076 30.1736 24.5254 30.1736 26.5233Z' fill='%23757575'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_120_1357'%3E%3Crect width='69.4903' height='69.4903' fill='white' transform='translate(0.78125 0.757324)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
                        background-repeat: no-repeat no-repeat;
                        background-position: center center;
                        background-size: contain;
                        opacity: 0.7;
                        transition: all .35s ease-in-out;
                    }
                }
            }

            img {
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                object-fit: cover;
                width: 100%;
                height: 100%;
                transition: all .55s ease-in-out;
            }
        }

        .item-content {

            h3 {
                color: var(--primary-color);
                font-weight: 900;
                font-size: 18px;
                line-height: 1.3;
                letter-spacing: 0.04em;
                margin-bottom: 10px;

                @media only screen and (min-width: 1400px) {
                    font-size: 20px;
                    margin-bottom: 15px;
                }
            }

            .text {
                line-height: 1.7;
                letter-spacing: 0.02em;
            }
        }


    }
}

/* end video lightbox */

/* CCPS Proud */
#itemsList {
    box-sizing: border-box;

    @media only screen and (min-width: 960px) {
        padding-inline: 45px;
    } 

    *,
    *::after,
    *::before {
        box-sizing: border-box;
    }

    .header-slot-container {
        color: var(--primary-color);
    }

    .items-container {
        --gap: 20px;
        --columns: 1;
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        flex-wrap: wrap;


        @media only screen and (min-width: 760px) {
            --columns: 2;
            --gap: 60px;
            flex-direction: row;
        }

        @media only screen and (min-width: 960px) {
            --columns: 3;
        }

        &>div {
            width: calc((100% / var(--columns)) - ((var(--columns) - 1) * var(--gap)) / var(--columns));
        }

        .item-image {
            padding-block: 12px;
            position: relative;
            margin-bottom: 20px;
            isolation: isolate;
            transition: all .35s ease-in-out;

            &:hover {
                &::before {
                    background-color: var(--third-color, var(--secondary-color));
                    right: -20px;
                    bottom: auto;
                    top: -5px;
                }

                &:after {
                    background-color: var(--primary-color);
                    bottom: -5px;
                    top: auto;
                    left: -20px;
                }
            }



            &::before {
                content: '';
                position: absolute;
                top: 0;
                bottom: auto;
                right: -15px;
                width: calc(50% + 40px);
                height: calc(100% - 40px);
                z-index: -1;
                background-color: var(--primary-color);
                transition: all .35s ease-in-out;
            }

            &::after {
                content: '';
                position: absolute;
                top: auto;
                bottom: 0;
                left: -15px;
                width: calc(50% + 40px);
                height: calc(100% - 40px);
                z-index: -1;
                /* To be updated with CSS var */
                background-color: var(--third-color, var(--secondary-color));
                transition: all .35s ease-in-out;
            }

            span:not(.label) {
                position: relative;
                height: 0;
                padding-top: 56.25%;
                width: 100%;
                display: block;
                overflow: hidden;

                &:focus-within {
                    outline: 3px solid var(--primary-color);
                }
            }

            a {
                display: block;

                &:hover img,
                &:focus img {
                    transform: scale(1.02);
                }
            }

            img {
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                object-fit: cover;
                width: 100%;
                height: 100%;
                transition: all .55s ease-in-out;
            }
        }

        .item-content {

            h3 {
                color: var(--primary-color);
                font-weight: 900;
                font-size: 18px;
                line-height: 1.3;
                letter-spacing: 0.04em;
                margin-bottom: 10px;

                @media only screen and (min-width: 1400px) {
                    font-size: 20px;
                    margin-bottom: 15px;
                }
            }

            .text {
                line-height: 1.7;
                letter-spacing: 0.02em;
            }
        }

    }
}

/* end CCPS Proud */

/* custom news */

#home .news-content {
    .news-image-container {
        padding-bottom: 15px;
        position: relative;
        isolation: isolate;

        &::before,
        &::after {
            content: '';
            position: absolute;
            left: -15px;
            top: auto;
            bottom: 0;
            background: var(--third-color, var(--secondary-color));
            height: calc(100% - 30px);
            width: 50%;
            transition: all .35s ease-in-out;
        }

        &::after {
            left: auto;
            right: -15px;
            bottom: auto;
            top: -15px;
            width: 60%;
            background: var(--primary-color);
        }

        .news-image .image-hidden-wrapper {
            padding-top: 56.25%;
        }
    }

    .news-image-title-link:hover .news-image-container {

        &::before {
            left: -20px;
            top: auto;
            bottom: -5px;
            background: var(--primary-color);
        }

        &::after {
            background: var(--third-color, var(--secondary-color));
            top: -20px;
            bottom: auto;
            right: -20px;
        }
    }


    .story .news-title {
        font-weight: 700;
        font-size: 18px;
        line-height: 1.4;
        padding-bottom: 10px;
    }

    .story::after {
        content: 'Read More';
        display: block;
        margin-top: 5px;
        font-weight: 600;
        color: var(--primary-color);
        transition: all .35s ease-in-out;
    }

    .story {
        position: relative;
        isolation: isolate;

        @media only screen and (min-width: 960px) {
            width: calc(50% - 30px);

            &:nth-child(odd) {
                margin-right: 60px;
            }
        }
    }

    .story .news-image-title-link {
        position: static;

        &::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }
}

/* end custom news */

/* custom live Feed */
#home #cms-live-feed .live-feed-post {
    padding-bottom: clamp(1.563rem, 0rem + 2.604vw, 3.125rem);
    margin-bottom: clamp(1.563rem, 0rem + 2.604vw, 3.125rem);
    border-bottom: 2px solid #5f5f5f;

    .live-feed-post-header {
        height: auto;
        display: none;

        img {
            display: none;
        }

        .live-feed-time-and-author {
            font-weight: 700;
            margin-left: 0;
        }
    }

    .live-feed-details a,
    .view-images .button-action-content {
        font-weight: 600;
    }
    .live-feed-details {
        p:first-child:has(strong) {
            color: var(--primary-color);
            margin-bottom: 5px;
        }
    }

}

@media only screen and (min-width: 960px) and (max-width: 1480px) {
    .view-container>.homepage-component:has(#cms-live-feed):nth-child(2) {
        width: 45%;
    }
}

/* end custom Live Feed */