@import url('//fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/************ TEMPLATE  ************
Rotator Size: 1600x669 (super wide, 2.39:1)

/************ FONTS  ************
Serif: Cinzel
Sans Serif: Open Sans

/************ COLORS  ************
Dark Blue #1E496C - rgba(30,73,108,1)
Light Blue #5D93CD - rgba(93,147,205,1)
Orange(?) #F49230 - rgba(244,146,58,1)

/************ NOTES ************
************************************/

.parish-1 {
    --primary-color: #1E496C;
    --secondary-color: #F49230;
    --tertiary-color: #5D93CD;

    --primary-rgb: 25, 46, 114;
    --secondary-rgb: 244, 146, 48;
    --tertiary-rgb: 93, 147, 205;

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

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

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

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

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

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

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

    --swiper-box-shadow: var(--default-box-shadow);
    --swiper-height: 42vw;

    --swiper-links-mobile-height: 70vw;

    --ql-background-color: rgba(var(--tertiary-rgb), var(--ql-bg-opacity));
    --ql-background-hover: rgba(var(--tertiary-rgb), var(--ql-bg-hover-opacity));
    --ql-title-color: var(--default-white);
    --ql-icon-size-desktop: 3vw;
    --ql-mobile-bg-color: var(--tertiary-color);

    --hero-title-left-position: 5%;

}

.school-1 {
    --primary-color: #E22230;
    --secondary-color: #1E496C;
    --tertiary-color: #f49230;

    --primary-rgb: 226, 34, 48;
    --secondary-rgb: 25, 46, 114;
    --tertiary-rgb: 244, 146, 48;

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

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

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

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

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

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

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

    --swiper-box-shadow: var(--default-box-shadow);
    --swiper-height: 42vw;

    --swiper-links-mobile-height: 70vw;

    --ql-background-color: rgba(var(--tertiary-rgb), var(--ql-bg-opacity));
    --ql-background-hover: rgba(var(--tertiary-rgb), var(--ql-bg-hover-opacity));
    --ql-title-color: var(--default-white);
    --ql-icon-size-desktop: 3vw;
    --ql-mobile-bg-color: var(--secondary-color);
    --ql-bg-opacity: .8;
    --ql-bg-hover-opacity: .9;

    --hero-title-left-position: 5%;

    --grid-vertical-gap: 2vw;

}

.school-1 .grid-staff {
    --grid-img-width: 16vw;
}

.site-3

/*ELA*/
    {
    --primary-color: #F49230;
    --secondary-color: #1E496C;
    --tertiary-color: #5D93CD;

    --primary-rgb: 244, 146, 48;
    --secondary-rgb: 25, 46, 114;
    --tertiary-rgb: 93, 147, 205;

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

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

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

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

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

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

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

    --swiper-box-shadow: var(--default-box-shadow);
    --swiper-height: 42vw;

    --swiper-links-mobile-height: 70vw;

    --ql-background-color: rgba(var(--primary-rgb), var(--ql-bg-opacity));
    --ql-background-hover: rgba(var(--primary-rgb), var(--ql-bg-hover-opacity));
    --ql-title-color: var(--default-white);
    --ql-icon-size-desktop: 3vw;
    --ql-mobile-bg-color: var(--primary-color);

    --hero-title-left-position: 5%;
    --ql-bg-opacity: .7;
    --ql-bg-hover-opacity: .9;

    --h3-font-weight: 600;
    --h2-font-weight: 600;
}

p {
    font-size: 1.3rem;
    line-height: 1.5;
}

h6 {
    font-size: 1.7vw;
    border-bottom: 1px solid var(--tertiary-color);
    --h6-font-size: 1.7vw;
    font-family: var(--title-font-family);
}

h3.g-item-title {
    color: var(--secondary-color);
    font-family: var(--title-font-family);
    font-size: 1.9vw !important;
    font-weight: var(--h6-font-weight) !important;
    font-variant-caps: var(--h6-font-variant-caps);
    text-transform: var(--h6-text-transform);
    line-height: var(--h6-line-height) !important;
    margin: var(--h6-margin) !important;
    padding: var(--h6-padding);
    border-bottom: 1px solid var(--tertiary-color);
    border-radius: var(--null);
    background: var(--h6-background);
}

h3.g-item-title a {
    color: var(--seconary-color) !important;
}

@media only screen and (max-width: 50.99rem) {
    h3.g-item-title {
        font-size: 6vw !important;
    }

    h6 {
        font-size: 4vw;
        --h6-font-size: 4vw;
    }
}

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

.newstitles .contentheading {
    color: var(--secondary-color);
    font-family: var(--body-font-family);
    font-size: var(--h6-font-size);
    font-weight: var(--h6-font-weight);
    font-variant-caps: var(--h6-font-variant-caps);
    text-transform: var(--h6-text-transform);
    line-height: var(--h6-line-height);
    margin: var(--h6-margin);
    padding: var(--h6-padding);
    border-bottom: var(--none);
    border-radius: var(--null);
    background: var(--h6-background);
    font-size: 1.7vw;
    border-bottom: 1px solid var(--tertiary-color);
    --h6-font-size: 1.7vw;
    font-family: var(--title-font-family);
}

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

@media only screen and (min-width: 50.99rem) {
    .item-page .pull-right.item-image img {
        max-width: 50%;
    }
}

/*************** HOMELAYOUT ***************/
.homelayout .g-title {
    font-family: var(--home-title-font);
}

/*************** OFFCANVAS ****************/
.g-offcanvas-toggle {
    color: var(--primary-color);
}

.g-offcanvas-toggle .fa-fw {
    text-shadow: none;
}

.school-1 .g-offcanvas-toggle {
    color: var(--primary-color);
}

/*************** TOP **********************/
/*************** NAVIGATION ***************/

.sub-logo img {
    width: 60px;
}

.give-button>.g-menu-item-container>.g-separator>.g-menu-item-title {
    background: var(--secondary-color);
    padding: .25vw;
    border-radius: 4px;
}

#g-navigation .g-logo img {
    margin: 1.5rem;
}

.parish-1 .g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {
    font-size: 1.2vw;
}

.parish-1 .g-main-nav .g-toplevel>li>.g-menu-item-container,
.g-main-nav .g-sublevel>li>.g-menu-item-container {
    font-size: 1.2vw;
}

.school-1 .g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {
    font-size: 1.2vw;
}

.school-1 .g-main-nav .g-toplevel>li>.g-menu-item-container,
.g-main-nav .g-sublevel>li>.g-menu-item-container {
    font-size: 1.2vw;
}

.site-3 .g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {
    font-weight: 700;
}

@media only screen and (max-width: 50.99rem) {
    #g-navigation {
        border-bottom: 1px solid var(--tertiary-color);
    }
}

@media only screen and (min-width: 50.99rem) {
    .site-3 #g-navigation {
        background: #00bbc9;
    }

    .site-3 .ela-topbar :is(h1, h2, h3, h4, h5, h6) {
        font-size: 2vw;
        color: var(--default-white);
    }

    .site-3 #g-navigation .g-social-items {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1vw;
    }
}

.site-3 .g-main-nav {
    font-family: var(--body-font-family);
}

@media (min-width: 50.99rem) {

    .school-1 .g-toplevel {
        padding: 0 3%;
    }

    .school-1 .g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {
        font-size: 1.1vw;
    }

    .school-1 .g-main-nav .g-toplevel>li>.g-menu-item-container,
    .g-main-nav .g-sublevel>li>.g-menu-item-container {
        padding: 0.5rem 1.5rem;
    }

    .school-home #blockcontent-2079-particle,
    .school-home #blockcontent-2079-particle>div>div>div:nth-child(1)>div>div {
        padding-top: 0;
        margin-top: 0;
    }

}

/*************** SLIDESHOW ****************/
.swiper-links .g-blockcontent-subcontent-desc {
    display: none;
}

.parish-1 #g-slideshow .swiper-links .g-blockcontent-subcontent-block:last-child {
    --ql-background-color: rgba(var(--secondary-rgb), var(--ql-bg-opacity));
    --ql-background-hover: rgba(var(--secondary-rgb), var(--ql-bg-hover-opacity));
}

.school-1 #g-slideshow .swiper-links .g-blockcontent {
    --ql-background-color: rgba(var(--secondary-rgb), var(--ql-bg-opacity));
    --ql-background-hover: rgba(var(--primary-rgb), var(--ql-bg-hover-opacity));
}


@media only screen and (max-width: 50.99rem) {
    .swiper-links .g-blockcontent-subcontent-block:last-child {
        display: initial;
        background-color: rgba(var(--secondary-rgb), 0.8);
    }
}

/*************** HEADER *******************/
.school-1 #hero {
    position: relative;
}

.school-1 #hero-grab {
    position: unset;
}

/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
.parish-home.homelayout #g-utility.section-vertical-paddings {
    padding-top: 0 !important;
}

@media only screen and (min-width: 50.99rem) {
    .circle-links h2.g-title {
        font-size: 4vw;
    }
}

.circle-links h2.g-title {
    font-family: var(--heading-font-family);
    color: var(--secondary-color);
    font-weight: 400;
}

.site-3 .circle-links h2.g-title {
    font-size: 3vw;
}

@media only screen and (max-width: 50.99rem) {
    .site-3 .circle-links h2.g-title {
        font-size: 6vw;
    }
}

/*************** FEATURE ******************/
/*************** MAIN *********************/
/*************** EXPANDED *****************/
/*************** EXTENSION ****************/
/*************** BOTTOM *******************/
/*************** FOOTER *******************/
#g-footer .g-content-array {
    margin: 0;
}

#g-footer a {
    color: #ffffff;
}

#g-footer {
    font-family: var(--body-font-family);
}

@media only screen and (min-width: 50.99rem) {
    #g-footer .footer-logo {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*#g-footer .footer-title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }*/
    #g-footer .footer-title h2 {
        color: var(--secondary-color);
        font-size: 2.5vw;
    }
}

#g-footer table {
    border: 0px solid #d4dce3;
}

#g-footer td {
    padding: 0.5rem;
    border: 0px solid #d4dce3;
}

#g-footer .footer-title h2 {
    color: var(--secondary-color);
}


/*************** 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(--default-white);
    background: var(--tertiary-color);
}

.site-3 .moduletable #login-form .unstyled {
    display: none;
}

.site-3 .moduletable #login-form .control-group .btn {
    color: white;
}

.site-3 .moduletable #login-form .control-group .btn a {
    color: white;
}

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

.fancytable th {
    background: #ab4629;
    border: 1px solid #ab4629;
}

.sprocket-tabs-nav li .sprocket-tabs-inner {
    background: rgba(var(--tertiary-rgb), .9);
}

/*  */

.parish-home .grid-sideways .g-title {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.parish-home .grid-sideways .g-joomla-articles {
    padding: 0 5%;
}

@media only screen and (max-width: 50.99rem) {
    .parish-home .grid-sideways .g-title {
        font-size: 6vw;
        margin-bottom: 0.5rem;
    }

}