@import url('//fonts.googleapis.com/css2?family=Artifika&family=Beau+Rivage&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/************ TEMPLATE  ************
Fonts: Beau Rivage (script); Artifika (serif); Montserrat
Colors: 
    Red #8E5A5C; rgba(142,90,92,1)
    Lightest Grey #F1F2F2; rgba(241,242,242,1)
    Black #000000; rgba(0,0,0,1)
    Grey #666666; rgba(102,102,102,1)
School Colors: 
    Maroon #691C32; rgba(105,28,50,1)
    Black #000000; rgba(0,0,0,1)
    White #ffffff; rgba(255,255,255,1)
---------------------

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

.site-1 /*Church*/{
    --primary-color: #691c32;
    --secondary-color: #666666;
    --third-color: #f1f2f2;

    --primary-rgb: 105,28,50;
    --secondary-rgb: 102,102,102;
    --third-rgb: 241,242,242;

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

    --title-font-family: 'Beau Rivage', cursive;
    --body-font-family: 'Montserrat', sans-serif;
    --third-font-family: 'Artifika', serif;

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

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

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

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

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

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

    --h2-font-variant-caps: normal;

    --ph-background-color: var(--third-color);
    --ph-big-sq-width: 42vw;
    --ph-aspect-ratio: var(--aspect-height-16-9);
    --ph-sq-gap: 2rem;
    --ph-title-font-size-desktop: 1.5vw;
    --ph-text-font-size-desktop: 1vw;
    --ph-title-font: var(--third-font-family);

    --ql-title-color: var(--default-white);
    --ql-background-color: rgba(0,0,0,.4);
    --ql-background-hover: rgba(0,0,0,.6);

    --grid-vertical-gap: 1vw;
}
.site-2 /*School*/{
    --primary-color: #691C32;
    --secondary-color: #666666;
    --third-color: #f1f2f2;

    --primary-rgb: 105,28,50;
    --secondary-rgb: 102,102,102;
    --third-rgb: 241,242,242;

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

    --title-font-family: 'Beau Rivage', cursive;
    --body-font-family: 'Montserrat', sans-serif;
    --third-font-family: 'Artifika', serif;

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

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

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

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

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

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

    --h2-font-variant-caps: normal;

    --ph-background-color: var(--third-color);
    --ph-big-sq-width: 42vw;
    --ph-aspect-ratio: var(--aspect-height-16-9);
    --ph-sq-gap: 2rem;
    --ph-title-font-size-desktop: 1.5vw;
    --ph-text-font-size-desktop: 1vw;
    --ph-title-font: var(--third-font-family);

    --ql-title-color: var(--default-white);
    --ql-background-color: rgba(0,0,0,.4);
    --ql-background-hover: rgba(0,0,0,.6);
}
.site-3 /*Preschool*/{
    --primary-color: #691c32;
    --secondary-color: #666666;
    --third-color: #f1f2f2;

    --primary-rgb: 142,90,92;
    --secondary-rgb: 102,102,102;
    --third-rgb: 241,242,242;

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

    --title-font-family: 'Beau Rivage', cursive;
    --body-font-family: 'Montserrat', sans-serif;
    --third-font-family: 'Artifika', serif;

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

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

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

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

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

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

    --h2-font-variant-caps: normal;

    --ph-background-color: var(--third-color);
    --ph-big-sq-width: 42vw;
    --ph-aspect-ratio: var(--aspect-height-16-9);
    --ph-sq-gap: 2rem;
    --ph-title-font-size-desktop: 1.5vw;
    --ph-text-font-size-desktop: 1vw;
    --ph-title-font: var(--third-font-family);

    --ql-title-color: var(--default-white);
    --ql-background-color: rgba(0,0,0,.4);
    --ql-background-hover: rgba(0,0,0,.6);
}
.site-4 /*Childcare*/{
    --primary-color: #691c32;
    --secondary-color: #666666;
    --third-color: #f1f2f2;

    --primary-rgb: 142,90,92;
    --secondary-rgb: 102,102,102;
    --third-rgb: 241,242,242;

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

    --title-font-family: 'Beau Rivage', cursive;
    --body-font-family: 'Montserrat', sans-serif;
    --third-font-family: 'Artifika', serif;

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

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

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

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

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

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

    --h2-font-variant-caps: normal;

    --ph-background-color: var(--third-color);
    --ph-big-sq-width: 42vw;
    --ph-aspect-ratio: var(--aspect-height-16-9);
    --ph-sq-gap: 2rem;
    --ph-title-font-size-desktop: 1.5vw;
    --ph-text-font-size-desktop: 1vw;
    --ph-title-font: var(--third-font-family);

    --ql-title-color: var(--default-white);
    --ql-background-color: rgba(0,0,0,.4);
    --ql-background-hover: rgba(0,0,0,.6);

    --rok-mini-badge: var(--third-color);
    --rok-mini-numbers: var(--primary-color);
    --rok-mini-text: var(--default-white);
    --rok-mini-timeline: var(--third-color);
}

@media only screen and (max-width: 50.99rem) {
    .grid-dm {
        --grid-title-color: var(--primary-color);
    }
	
}

/* hiding unpublished news articles on the news page. Not sure why these were showing */

.newslayout .system-unpublished {
    display: none;
}
/*  */

.site-1 .grid-staff {
    --grid-title-font: var(--third-font-family);
}

h3 {font-family: var(--third-font-family);}
h5 {font-family: var(--third-font-family);}
.grid-staff .g-array-item-text :is(h1,h2,h3,h4,h5,h6){font-family: var(--third-font-family);}
.contact h2 {font-weight: 400;}

.page-header h2 {
    letter-spacing: 1px;
    font-size: 5vw;
}
.item-page h2 {
    letter-spacing: 2px;
    font-size: 5vw;
}

.item-page .page-header  h2 {
	line-height: 6vw; 
}

@media only screen and (max-width: 50.99rem) {
    .page-header h2 {
        font-size: 10vw;
    }
    .item-page h2 {
        font-size: 10vw;
    }
}

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

a.blockbtn { 
  text-align: center;
  display: block;
  font-weight: 500;
  line-height: 1.125rem;
  border: 2px solid var(--primary-color);
  transition: all .2s ease-in;
  background: var(--primary-color); 
  color: white;
}
.blockbtn:hover {background: transparent;
  color: var(--primary-color);
   border: 2px solid var(--primary-color); }



/*************** HOMELAYOUT ***************/ 
.item-image {
    display: none!important;
}

/*************** OFFCANVAS ****************/
.g-offcanvas-toggle {color: var(--default-white);} 
.g-offcanvas-toggle .fa-fw {text-shadow: none;}
#g-offcanvas .g-social-items a {
    margin-right: 1.5vw;
}

.hero img {opacity: 1;}


/*************** TOP **********************/ 
/*************** NAVIGATION ***************/
@media only screen and (min-width: 50.99rem) {
    .g-social-items a:hover:not(.site-1-home .g-social-items a:hover, .site-2-home .g-social-items a:hover, .site-3-home .g-social-items a:hover, .site-4-home .g-social-items a:hover) {
        color: var(--third-color)!important;
    }

    :is(.site-1-home, .site-2-home, .site-3-home, .site-4-home) .g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {
        text-shadow: 2px 2px 5px #000000;
    }
    :is(.site-1-home, .site-2-home, .site-3-home, .site-4-home) .g-main-nav .g-sublevel>li>.g-menu-item-container>.g-menu-item-content>.g-menu-item-title {
        font-size: .8vw;
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 1px;
        font-family: var(--body-font-family);
    }
    .g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {
        font-size: .8vw;
        font-weight: 500;
        letter-spacing: 1px;
        font-family: var(--body-font-family);
        text-transform: uppercase;
    }
    .g-main-nav .g-sublevel>li>.g-menu-item-container>.g-menu-item-content>.g-menu-item-title {
        font-size: .8vw;
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 1px;
        font-family: var(--body-font-family);
    }

    .g-main-nav .g-toplevel > li:not(.g-main-nav .g-toplevel > li:last-child):hover {
        background: rgba(0,0,0,.2);
    }
    :is(.site-1-home, .site-2-home, .site-3-home, .site-4-home) .g-social-items a {text-shadow: 2px 2px 5px #000000;}
    .g-social-items a {margin-right: .5vw;}

    .site-1-home #g-navigation > .g-container {
        position: relative;
        height: 56vw;
    }
    .site-1-home #g-navigation > .g-container > .g-grid:nth-child(2) {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 7;
    }
    .site-1-home #g-navigation > .g-container > .g-grid:nth-child(3) {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: 5;
    }
    .site-1-home #g-navigation > .g-container > .g-grid:nth-child(4) {
        position: absolute;
        margin: 18vw 20% 24vw 20%;
        z-index: 6;
        width: 60%;
        height: 14vw;
    }
    .site-1-home #g-navigation > .g-container > .g-grid:nth-child(5) {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 14vw;
        z-index: 6;
        overflow: hidden;
    }
    .site-1-home #g-navigation > .g-container > .g-grid:nth-child(4) .g-logo img {
        width: 100%;
    }

    .site-2-home #g-navigation > .g-container {
        position: relative;
        height: 56vw;
    }
    .site-2-home #g-navigation > .g-container > .g-grid:nth-child(2) {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 7;
    }
    .site-2-home #g-navigation > .g-container > .g-grid:nth-child(3) {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: 5;
    }
    .site-2-home #g-navigation > .g-container > .g-grid:nth-child(4) {
        position: absolute;
        margin: 18vw 20% 24vw 20%;
        z-index: 6;
        width: 60%;
        height: 14vw;
    }
    .site-2-home #g-navigation > .g-container > .g-grid:nth-child(5) {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 14vw;
        z-index: 6;
        overflow: hidden;
    }
    .site-2-home #g-navigation > .g-container > .g-grid:nth-child(4) .g-logo img {
        width: 100%;
    }

    .site-3-home #g-navigation > .g-container {
        position: relative;
        height: 56vw;
    }
    .site-3-home #g-navigation > .g-container > .g-grid:nth-child(2) {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 7;
    }
    .site-3-home #g-navigation > .g-container > .g-grid:nth-child(3) {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: 5;
    }
    .site-3-home #g-navigation > .g-container > .g-grid:nth-child(4) {
        position: absolute;
        margin: 18vw 20% 24vw 20%;
        z-index: 6;
        width: 60%;
        height: 14vw;
    }
    .site-3-home #g-navigation > .g-container > .g-grid:nth-child(5) {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 14vw;
        z-index: 6;
        overflow: hidden;
    }
    .site-3-home #g-navigation > .g-container > .g-grid:nth-child(4) .g-logo img {
        width: 100%;
    }

    .site-4-home #g-navigation > .g-container {
        position: relative;
        height: 56vw;
    }
    .site-4-home #g-navigation > .g-container > .g-grid:nth-child(2) {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 7;
    }
    .site-4-home #g-navigation > .g-container > .g-grid:nth-child(3) {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: 5;
    }
    .site-4-home #g-navigation > .g-container > .g-grid:nth-child(4) {
        position: absolute;
        margin: 18vw 20% 24vw 20%;
        z-index: 6;
        width: 60%;
        height: 14vw;
    }
    .site-4-home #g-navigation > .g-container > .g-grid:nth-child(5) {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 14vw;
        z-index: 6;
        overflow: hidden;
    }
    .site-4-home #g-navigation > .g-container > .g-grid:nth-child(4) .g-logo img {
        width: 100%;
    }

    .site-1-sub #g-navigation .g-logo img {
        width: 50%;
    }
    .site-2-sub #g-navigation .g-logo img {
        width: 50%;
    }
    .site-3-sub #g-navigation .g-logo img {
        width: 50%;
    }
    .site-4-sub #g-navigation .g-logo img {
        width: 50%;
    }

    .swiper-m-times-overlay .g-content-array {
        margin: 0;
        padding: 0 5%;
    }
    .swiper-m-times-overlay .m-times-box {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .swiper-m-times-overlay .m-times-box > div {
        flex: 1;
        padding: 1vw;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .swiper-m-times-overlay .m-times-box > div > div {
        width: auto;
    }

    .swiper-m-times-overlay :is(h1,h2,h3,h4,h5,h6) {
        color: var(--default-white);
        font-size: 2.5vw;
        letter-spacing: 1px;
        text-shadow: 2px 2px 10px #000000;
        margin: .5vw 0;
    }
    .swiper-m-times-overlay p {
        font-size: .9vw;
        letter-spacing: 1px;
        text-shadow: 2px 2px 10px #000000;
        margin: 0 0 1vw 0;
    }
    .swiper-m-times-overlay a.button {
        font-size: .9vw;
        letter-spacing: 1px;
        border-radius: 0;
        border: 1px solid #ffffff;
        text-transform: uppercase;
        padding: .7vw 1.3vw;
    }
}

@media only screen and (max-width: 50.99rem) {
    #g-navigation .g-logo {
        max-width: 70%;
        margin: 1rem auto;
    }
    .swiper-m-times-overlay .g-content-array {
        margin: 0;
    }
    .swiper-m-times-overlay .g-array-item-text {
        margin: 0;
        padding: 0;
    }
    .swiper-m-times-overlay .m-times-box {
        background: var(--primary-color);
        padding: 1rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: 3vw 1vw;
    }
    .swiper-m-times-overlay .m-times-box > div {
        width: calc(50% - .5vw);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .swiper-m-times-overlay :is(h1,h2,h3,h4,h5,h6) {
        color: var(--default-white);
        font-size: 6.5vw;
        letter-spacing: 1px;
        text-shadow: 2px 2px 10px #000000;
        margin: .5vw 0;
    }
    .swiper-m-times-overlay p {
        font-size: 3vw;
        letter-spacing: 1px;
        text-shadow: 2px 2px 10px #000000;
        margin: 0 0 1vw 0;
    }
    .swiper-m-times-overlay a.button {
        background: #F1F2F2;
        color: var(--primary-color);
        font-size: 3vw;
        letter-spacing: 1px;
        border-radius: 0;
        border: 1px solid #ffffff;
        text-transform: uppercase;
        padding: 1.7vw 1.3vw;
    }
    .swiper-m-times-overlay a.button:hover {
        background: var(--secondary-color);
        color: var(--default-white);
    }
}

/*************** SLIDESHOW ****************/ 
/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
@media only screen and (min-width: 50.99rem) {
    .site-4-home #g-showcase {
        padding: 4vw 10%!important;
    }
    .site-4-home .rok-mini-particle :is(.rme-timeline-point:hover span, .rme-timeline-point.active span) {
        background: var(--primary-color)!important;
    }
}

/*************** UTILITY ******************/
/*************** FEATURE ******************/
/*************** MAIN *********************/
.ph-sq-5 .g-title {
    font-variant-caps: normal;
    letter-spacing: 1px;
    font-size: 4vw;
    color: var(--primary-color);
    font-weight: 400;
}

@media only screen and (min-width: 50.99rem) {
    .ph-sq-5 .g-content-array > .g-grid:nth-child(2) .g-array-item-read-more {
        opacity: 0;
    }
    .ph-sq-5 .g-content-array > .g-grid:nth-child(3) .g-array-item-read-more {
        opacity: 0;
    }

    .site-1-home .ph-sq-5 > .g-content {
        margin: 0;
        padding: 0;
    }
    .site-1-home .ph-sq-5 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .site-1-home #g-container-main {
        padding-top: 1vw;
    }
    .site-1-home #g-container-main > .g-grid > .g-block:nth-child(2) {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .site-1-home #g-aside {
        background: transparent;
    }

    .site-2-home .ph-sq-5 > .g-content {
        margin: 0;
        padding: 0;
    }
    .site-2-home .ph-sq-5 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .site-2-home #g-container-main {
        padding-top: 1vw;
    }
    .site-2-home #g-container-main > .g-grid > .g-block:nth-child(2) {
        display: flex;
        justify-content: center;
        align-items: center;
        /* flex-direction: column; */
    }
    .site-2-home #g-aside {
        background: transparent;
    }

    .site-3-home .ph-sq-5 > .g-content {
        margin: 0;
        padding: 0;
    }
    .site-3-home .ph-sq-5 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .site-3-home #g-container-main {
        padding-top: 1vw;
    }
    .site-3-home #g-container-main > .g-grid > .g-block:nth-child(2) {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .site-3-home #g-aside {
        background: transparent;
    }

    .site-4-home .ph-sq-5 > .g-content {
        margin: 0;
        padding: 0;
    }
    .site-4-home .ph-sq-5 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .site-4-home #g-container-main {
        padding-top: 1vw;
    }
    .site-4-home #g-container-main > .g-grid > .g-block:nth-child(2) {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .site-4-home #g-aside {
        background: transparent;
    }
}
@media only screen and (max-width: 50.99rem) {
    .ph-sq-5 .g-array-item-read-more {
        opacity: 0;
    }
    .site-1-home #g-container-main {
        padding-top: 4vw;
    }

    .site-2-home #g-container-main {
        padding-top: 4vw;
    }

    .site-3-home #g-container-main {
        padding-top: 4vw;
    }

    .site-4-home #g-container-main {
        padding-top: 4vw;
    }
    .ph-sq-5 .g-title {
        font-size: 9vw;
        margin: 0;
    }
}

/*************** EXPANDED *****************/ 
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-expanded {padding-top: 23vw; margin-top: -23vw;}

    .site-2-home #g-expanded {padding-top: 23vw; margin-top: -23vw;}

    .site-3-home #g-expanded {padding-top: 23vw; margin-top: -23vw;}

    /*.site-4-home #g-expanded {padding-top: 23vw; margin-top: -23vw;}*/
}
@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-expanded img {
        width: 70%;
        margin: 0 auto;
    }

    .site-2-home #g-expanded img {
        width: 70%;
        margin: 0 auto;
    }

    .site-3-home #g-expanded img {
        width: 70%;
        margin: 0 auto;
    }

    .site-4-home #g-expanded img {
        width: 70%;
        margin: 0 auto;
    }
}

/*************** EXTENSION ****************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-extension {
        padding: 1vw 10%;
    }

    .site-2-home #g-extension {
        padding: 1vw 10%;
    }

    .site-3-home #g-extension {
        padding: 1vw 10%;
    }

    .site-4-home #g-extension {
        padding: 1vw 10%;
    }

    .circle-links .g-blockcontent-subcontent-title {
        font-family: var(--third-font-family);
    }
}

/*************** BOTTOM *******************/
/*************** FOOTER *******************/
@media only screen and (min-width: 50.99rem) {
    .foot-box {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: .5vw;
    }
    .footer-social-icons {
        display: flex;
        flex-direction: row;
    }
    .footer-social-icons > div {
        margin-right: .5vw;
    }
}
@media only screen and (max-width: 50.99rem) {
    .footer-social-icons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
}

@media only screen and (min-width: 50.99rem) {
    #g-footer {
        padding: 1.25vw 5%!important;
    }
    #g-footer .g-array-item-text {
        padding: 0;
        margin: 0;
    }
    #g-footer p {
        letter-spacing: 1px;
        margin: 0;
        padding: 0;
        font-family: var(--body-font-family);
    }
    #g-footer a {
        font-family: var(--body-font-family);
    }
}
@media only screen and (max-width: 50.99rem) {
    #g-footer {
        padding: 1rem!important;
    }
}


#g-footer .g-content-array {margin: 0;}
#g-footer a {color: var(--default-white);} 

/*************** COPYRIGHT ****************/ 
/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: var(--primary-color);} 
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {    
    color: var(--primary-color); 
    background: var(--third-color);
} 
/*************** SECTIONS *****************/
/*************** MOBILE *******************/ 
/*************** ADS **********************/
.admod img {
    box-shadow: 0px 0px 7px rgba(0,0,0,.5);
}

@media only screen and (min-width: 50.99rem) {
    .grid-staff {
        margin: 0;
        padding: 0;
    }
    .grid-staff > div {
        margin: 0;
        padding: 0;
    }
    .grid-staff > div > div {
        margin: 0;
        padding: 0;
    }
    .grid-staff .g-blockcontent {
        margin: 0;
        padding: 0;
        display: flex;
    }
    .grid-staff .g-blockcontent-subcontent {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1vw .5%;
        justify-content: flex-start;
    }
    .grid-staff .g-blockcontent-subcontent-block {
        margin: 0;
        padding: 0;
        flex: auto;
        width: 33%;
        max-width: 33%;
        justify-content: center;
        align-items: center;
        transition: all .3s ease-in-out;
    }
    .grid-staff .g-blockcontent-subcontent-block-content {
        margin: 0;
        padding: .5vw;
        position: relative;
        text-align: center;
        overflow: hidden;
        transition: var(--grid-transition);
    }
    .grid-staff .g-blockcontent-subcontent-img {
        width: var(--grid-img-width);
        object-position: center;
        object-fit: cover;
        border-radius: var(--grid-border-radius);
        box-shadow: var(--grid-box-shadow);
        transition: all .3s ease-in-out;
    }
    .grid-staff.grid-uw .g-blockcontent-subcontent-img {
        height: calc(var(--grid-img-width) * 1/3.6);
    }
    .grid-staff.grid-sw .g-blockcontent-subcontent-img {
        height: calc(var(--grid-img-width) * 1/2.39);
    }
    .grid-staff.grid-wide .g-blockcontent-subcontent-img {
        height: calc(var(--grid-img-width) * 9/16);
    }
    .grid-staff.grid-standard .g-blockcontent-subcontent-img {
        height: calc(var(--grid-img-width) * 3/4);
    }
    .grid-staff.grid-square .g-blockcontent-subcontent-img {
        height: var(--grid-img-width);
    }
    .grid-staff.grid-portrait .g-blockcontent-subcontent-img {
        height: calc(var(--grid-img-width) * 4/3);
    }
    .grid-staff .g-blockcontent-subcontent-title {
        width: var(--grid-img-width);
        margin: 1vw auto;
        padding: 0 .5vw;
        text-align: left;
    }
    .grid-staff .g-blockcontent-subcontent-title-text {
        margin: 0;
        padding: 0;
        color: var(--grid-title-color);
        font-family: var(--grid-title-font);
        font-size: var(--grid-title-font-size-desktop);
        font-weight: var(--grid-title-font-weight);
    }
    .grid-staff .g-blockcontent-buttons {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        border-radius: 0;
        background: transparent;
        color: transparent;
        opacity: 0;
    }
    .grid-staff .g-blockcontent-buttons a {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        border-radius: 0;
        background: transparent;
        color: transparent;
        opacity: 0;
    }
    .grid-staff .g-blockcontent-subcontent-block-content:hover {
        transform: scale(.95);
    }
}

@media only screen and (max-width: 50.99rem) {
    .grid-staff.grid-dm .g-array-item-text {
        width: 100%;
        margin: 0;
        padding: 1rem;
    }
    .grid-staff.grid-dm .g-array-item-image img {
        border-radius: 0;
    }
    .grid-staff.grid-dm .g-content-array .g-array-item-image {
        margin: 0;
        padding: 0;
    }
}

/************ AJJ  ************/
.g-main-nav { background: rgba(0,0,0,0.1);}

.page-header h2 { line-height: 1.1;}

/************ATHLETICS GRID Roksprocket - JKR ***********************/



.sprocket-grids-b-item.panel-color {  background: var(--primary-color);}
.sprocket-grids-b-item.panel-color:hover { background: rgba(142,90,92,.98);}
.sprocket-grids-b-text {margin: 10px 0;}
.sprocket-grids-b-content {min-height: 19vw; padding: 10px;}
.sprocket-grids-b-readon {font-size: 1.2vw; border-radius: 1rem;  padding: 0.25rem 0.5rem; border: 1px solid white; display: block;
    text-align: center;}
.sprocket-grids-b-readon:hover {background: white;}

.whitetext a {color: white;}
.whitetext a:hover {color: black;}

.whitetext h2 {font-size: 1.65vw; font-family: var(--third-font-family); letter-spacing: -1px; margin: 0.25rem 0;}
.whitetext h6 {font-size: 1.25vw; margin: 0.25rem 0; }
.whitetext p {font-size: 1vw; margin: 0.25rem 0; }
/*.whitetext .aicon img {max-width: 2.5vw; }*/
.whitetext table, .whitetext td {border: none; }

.moduletable #login-form .control-group .btn {color: white; background: var(--primary-color); border-color: var(--primary-color); }
.moduletable #login-form .unstyled {display: none;}

@media only screen and (max-width: 50.99rem){
	.sprocket-grids-b-content {min-height: 45vw;}
	.whitetext h2 {font-size: 4.5vw;}
	.whitetext h6 {font-size: 3.25vw;}
	.whitetext p {font-size: 2.5vw; }
	/*.whitetext .aicon img {max-width: 4.5vw; }*/
	.sprocket-grids-b-readon {font-size: 2.2vw;}
}
.sprocket-grids-b-info, .sprocket-grids-b-text {display: inherit; }