@import url('//fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/************ TEMPLATE  ************
StJude Fonts & Colors:
Cinzel, Lato
Gold - #daa90d; rgba(218,169,13,1) - secondary
Red - #be1e2d; rgba(190,30,45,1) - primary
Dark Grey - #58595b; rgba(88,89,91,1)
Orange - #d35f00; rgba(211,95,0,1)
Navy - #000053; rgba(0,0,83,1)
************/

.site-1 {
    --primary-color: #be1e2d;
    --secondary-color: #daa90d;

    --primary-rgb: 190,30,45;
    --secondary-rgb: 218,169,13;

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

    --title-font-family: 'Cinzel', serif;
    --body-font-family: 'Lato', sans-serif;

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

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

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

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

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

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

    --mt-background-color: rgba(var(--secondary-rgb),.9);
    --mt-header-color: var(--default-black);
    --mt-para-color: var(--default-white);

    --ql-border-radius: 1rem;
    --ql-background-color: rgba(var(--secondary-rgb),.6);
    --ql-background-hover: rgba(var(--secondary-rgb),.8);
    --ql-title-color: var(--default-black);

    --ph-background-hover: rgba(var(--secondary-rgb),.1);
	--ph-title-font: var(--body-font-family);
	--ph-title-color: #58595b;
}

.site-2 {
    --primary-color: #daa90d;
    --secondary-color: #be1e2d;

    --primary-rgb: 218,169,13;
    --secondary-rgb: 190,30,45;

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

    --title-font-family: 'Cinzel', serif;
    --body-font-family: 'Lato', sans-serif;

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

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

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

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

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

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

    --mt-background-color: rgba(var(--secondary-rgb),.9);
    --mt-header-color: var(--default-white);
    --mt-para-color: var(--default-white);

    --ql-border-radius: 1rem;
    --ql-background-color: rgba(var(--secondary-rgb),.6);
    --ql-background-hover: rgba(var(--secondary-rgb),.8);
    --ql-title-color: var(--default-white);

    --ph-background-hover: rgba(var(--secondary-rgb),.1);
}

.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: 'Lato', sans-serif;
} 

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

/*************** TOP **********************/ 
/*************** NAVIGATION ***************/
@media only screen and (min-width: 50.99rem) {
.site-1 #g-navigation .g-logo {
    margin: 1vw 0;
}
.site-1 #g-navigation {
    background: url('/images/template/header1.jpg') 0% 0% no-repeat, url('/images/template/header2.jpg') 100% 0% no-repeat;
    background-size: 50%;
    padding-bottom: 2vw!important;
}

.site-2 #g-navigation .g-logo {
    margin: 1vw 0;
}
.site-2 #g-navigation {
    background: url('/images/template/header1.jpg') 0% 0% no-repeat, url('/images/template/header2.jpg') 100% 0% no-repeat;
    background-size: 50%;
    padding-bottom: 2vw!important;
}

nav > ul > li.g-menu-item.g-menu-item-1550.g-menu-item-type-particle.g-standard > div > div > div > div > a:nth-child(1) {
	margin-right: 0.5rem;
}

nav > ul > li.g-menu-item.g-menu-item-1550.g-menu-item-type-particle.g-standard > div > div > div > div > a:nth-child(3) {
	margin-left: 0.5rem;
}

 nav > ul > li.g-menu-item.g-menu-item-1515.g-menu-item-type-particle.g-standard > div > div > div > div > a:nth-child(1) {
	margin-right: 0.5rem;
}
}

@media only screen and (max-width: 50.99rem) {
	
	.site-1 #g-navigation .g-logo img {
		width: 80%;

	}

    .site-1-sub #g-navigation {background: rgba(var(--secondary-rgb),.5);}

    .site-2-sub #g-navigation {background: rgba(var(--secondary-rgb),.5);}
}

/*************** SLIDESHOW ****************/ 
@media only screen and (min-width: 50.99rem) {
    .fullwidth-swiper {box-shadow: var(--default-box-shadow);}
}

/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
/*************** FEATURE ******************/
@media only screen and (min-width: 50.99rem) {
    .ql-inner-box .g-blockcontent-subcontent-title > .g-blockcontent-subcontent-title-text {
        font-weight: 500;
    }
    .ql-inner-box .g-blockcontent-subcontent-block-content {
        box-shadow: var(--default-box-shadow);
    }
}

/*************** MAIN *********************/
@media only screen and (min-width: 50.99rem) {
    /*.site-1-sub #g-container-main {
        background: url('/images/template/swoop.png') 0% -90% no-repeat;
        background-size: cover;
    }*/
    .site-1 #g-mainbar {
        background: transparent;
    }
    .site-1 #g-aside {
        background: transparent;
    }
    .homelayout #g-container-main {
        padding: 0 10% 10rem 10%;
    }
	/*.site-1 #g-container-main  {
        padding: 0 7% 5rem 7%;
    }*/
    .ph-sidepics-2 .g-content-array-pagination > button {box-shadow: var(--default-box-shadow);}
    .ph-sidepics-2 .g-array-item {border-top-left-radius: 6vw; border-bottom-left-radius: 6vw;}
    .ph-sidepics-2 .g-array-item-image {border-radius: 50%;}
    .ph-sidepics-2 .g-array-item-image img {border-radius: 50%;}
    .site-1-home #g-container-main .submod-button .button {
        font-size: 1.2rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        padding: 1rem 2rem;
        border-radius: 0;
        margin-left: 12vw;
        border: 1px solid var(--default-white);
        box-shadow: var(--default-box-shadow);
    }
    /*.site-2-sub #g-container-main {
        background: url('/images/template/swoop.png') 0% -90% no-repeat;
        background-size: cover;
    }*/
    .site-2 #g-mainbar {
        background: transparent;
    }
    .site-2 #g-aside {
        background: transparent;
    }
    .site-2 #g-container-main {
        padding: 0 10% 10rem 10%;
    }
    .site-2-home #g-container-main .submod-button .button {
        font-size: 1.2rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        padding: 1rem 2rem;
        border-radius: 0;
        margin-left: 12vw;
        border: 1px solid var(--default-white);
        box-shadow: var(--default-box-shadow);
    }
}

/*************** EXPANDED *****************/ 
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-extension {
        background: url('/images/template/swoop.png') 0% 0% no-repeat;
        background-size: cover;
        margin-top: -25vw;
        padding-top: 25vw;
    }
    .site-2-home #g-expanded {
        background: url('/images/template/swoop-school-navy3.png') 0% 0% no-repeat;
        background-size: cover;
        margin-top: -25vw;
        padding-top: 25vw;
    }
}

.bulletin-picture-list .bulletin-container .bulletin:first-child p,
.bulletin-picture-list .bulletin-container .bulletin:not(.bulletin:first-child) p {
    color: var(--primary-color);
}

.bulletin-picture-list .bulletin-variables {
    --bulletin-max-width: 240px;
    --bulletin-container-padding: 1rem;
}

/*************** EXTENSION ****************/
.site-1-home #g-extension h3.g-title {
    border-bottom: 1px solid var(--primary-color);
}
.site-1-home #g-extension a {
    color: var(--default-white);
}
.site-1-home #g-extension a:hover {
    color: var(--primary-color);
}
.site-1-home .news-boxes form button {
    background: none;
}

.site-2-home #g-extension h3.g-title {
    border-bottom: 1px solid var(--primary-color);
}
.site-2-home #g-extension a {
    color: var(--default-white);
}
.site-2-home #g-extension a:hover {
    color: var(--primary-color);
}
.site-2-home .news-boxes form button {
    background: none;
}

@media only screen and (min-width: 50.99rem) {
    .site-2-home #g-extension {
        padding: 0 5%;
    }
    .news-boxes {
        display: flex;
        flex-direction: row;
        gap: 5%;
    }
    .news-boxes > div {
        flex: 1;
    }
    .news-boxes .lower-button {
        text-align: center;
    }
}

/*make LPI widget not so long*/
iframe#LPI\.Pub\.Widget\.v1 {
    min-height: 315px !important; padding-bottom: 1vw;  margin: auto !important; display: grid; 
}


/*************** BOTTOM *******************/
/*************** FOOTER *******************/
.site-1 #g-footer h2 > a {color: var(--default-black);}

.site-2 #g-footer h2 > a {color: var(--default-white);}

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

/*************** 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: white; 
    background: var(--secondary-color);
} 
/*************** SECTIONS *****************/
/*************** MOBILE *******************/ 
/*************** ADS **********************/

/*********grid layout - large grid items when only one in a row - fix**************/

:is(#module-contentarray-1271-particle, #module-contentarray-1268-particle, #module-contentarray-1266-particle, #module-contentarray-1269-particle, #module-contentarray-1270-particle) .g-block {
	max-width: 33%;
}

.faculty-page-school .grid-staff {
    margin-bottom: 1rem !important;
    /* width: fit-content; */
}

.grid-staff .g-content-array {
    justify-content: center;
}

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