@import url('//fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Quicksand:wght@400;500;600;700&display=swap');
/************ TEMPLATE  ************
Rotator/Video Size: 1000x563 (wide, 16:9)

/************ FONTS  ************
Serif: Cormorant Garamond
Sans Serif: Quicksand

*Cormorant Garamond Medium - used most of the time. It might look fine for all of the time if you want to simplify it all to Medium
*Cormorand Garamond Semibold - used for 'Presider's Schedule"/"Emergencies", and "Contact Us". See note for Medium.
*Quicksand Medium - used most of the time for Menu, Quicklinks (Parish), titles, buttons, etc. 
*Quicksand Bold (and All Caps) - used for Icon Quicklink text and "Solemnity of the Assumption...".
*I used a decent amount of letter spacing with titles, buttons, icon ql, etc. 

/************ COLORS  ************
Dark Green: #148539; rgba(75,89,69,1)
Green: #148539; rgba(107,124,99,1)
Light Green: #879382; rgba(135,147,130,1)
Cream Green: #cfd4cd; rgba(207,212,205,1)
White: #ffffff; rgba(255,255,255,1)
Black: #000000; rgba(0,0,0,1)

/************ NOTES ************
*Parish Mass Times is static with drone video beside it
*drone video on cemetery page also (only other page than home)
*School Rotator - Normal Rotator/side text here
*Icon Quicklinks, social media icons, & 'Contact Us' icons are fa icons, so those can be coded in: https://fontawesome.com/v4.7/icons/
*'Meet Our Priests' etc button overlay - white - rgba(255,255,255,.8)
*School - background for rotator text & School events: rgba(255,255,255,.9)
*Dropshadow 
 -Parish: quicklink images, 'Our Mission' box, FB & YouTube boxes, Presiders Schedule and Emergencies boxes, Latest News images, news button, Contact Us box 
 -School: FB/YouTube boxes
*Calendar is actually created through articles, so the badges are image files

/****Green color assignments*****
*Dark Green 
  - Parish: background, most non-white text, 'meet our priests' etc outline, 'Upcoming Events' bagdges/scroll/button
  - School: rotator text, menu bar, calendar button, 'Connect with us' title, footer
*Green 
  - Parish, only used for menu bar. 
  - School - Quicklink overlay - rgba(107,124,99,.8), School Events title, calendar scroll/pagination bar, Mission background, FB/Youtube titles, video title, 'view all videos' button
*Light Green
  - Parish: headline image bottom border, news button, youtube/fb titles/ button/text, 'Contact Us' title background
  - School: youtube/fb titles/ button/text
*Cream Green
  - Parish: Mass Times text background - rgba(207,212,205,.85), Our Mission background, Upcoming Events background - rgba(207,212,205,.8), 'Contact Us' background
  - School: Quicklink section and 'Connect With Us' background color
**************************************/
 

body {color: #030303; font-family: 'Lato', sans-serif; } 

h1, h2, h3, h4, h5, h6 {margin: .75rem 0; line-height: 1.3; font-weight: normal;}
p {line-height: 1.3; font-size: 1.2rem;}
.page-header h1 {text-transform: none; font-size: 3rem;}
h1 {color: #5081b3; font-size: 3.5rem; font-weight: bold; font-family: 'Cormorant Garamond', serif;}
.outline-13 h2, .outline-13 .page-header h2 {font-variant-caps: small-caps; color: #5081b3; font-size: 2.5rem; font-family: 'Quicksand', sans-serif; font-weight: bold; line-height: 1.3; padding-bottom: 0.25rem; line-height: 2.5rem;}
.outline-14 h2, .outline-14 .page-header h2 {font-variant-caps: small-caps; color: #5081b3; font-size: 2.5rem; font-family: 'Cormorant Garamond', serif; font-weight: bold; line-height: 1.3; padding-bottom: 0.25rem; line-height: 2.5rem;}
h2.light {font-weight: 400; }
h3 {color: #148539; font-size: 2rem; border-bottom: 1px solid #879382; line-height: 1.3; margin: 0 0 10px 0; font-weight: normal; font-family: 'Quicksand', sans-serif;}
.outline-13 h4 {color: #148539; font-size: 2rem; font-family: 'Cormorant Garamond', serif;}
.outline-14 h4 {color: #5081b3; font-size: 2rem; font-family: 'Cormorant Garamond', serif; font-weight: bold;}
.outline-14 h4.light {color: #5081b3; font-size: 2rem; font-family: 'Cormorant Garamond', serif; font-weight: normal;}
h5 {background: #5081b3; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .5rem;}
h6 {color: #5081b3; font-size: 1.5rem; text-transform: uppercase; font-weight: bold;}
h6.lower { text-transform: none; font-weight: normal;}
a {color: #148539;}
a:hover {color: black;}

h3.g-title {border-bottom: none;}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    h1 {font-size: 2.2rem;}
    h2 {font-size: 1.75rem;}
    h3 {font-size: 1.75rem;}
    h4 {font-size: 1.75rem;}
    h5 {font-size: 1.2rem;}
    h6 {font-size: 1.2rem;}
    p {font-size: 1rem; margin-bottom: 4px;}
    h1, h2, h3 {line-height: 1.2;}
    h4, h5, h6, p {line-height: 1.1;}
}

@media only screen and (max-width: 767px) {
 h1 {font-size: 2.2rem;}
 h2 {font-size: 1.75rem;}
 h3 {font-size: 1.75rem;}
 h4 {font-size: 1.75rem;}
 h5 {font-size: 1.2rem;}
 h6 {font-size: 1.2rem;}
 p {font-size: 1rem; margin-bottom: 4px;}
 h1, h2, h3 {line-height: 1.2;}
 h4, h5, h6, p {line-height: 1.1;}
}

h3.decorative {
    display: grid;
    grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
    align-items: center;
    font-size: 2.2rem;
    grid-gap: 20px;
    width: 100%;
    border-bottom: none; 
    text-align: center;
    font-weight: 400;
}

h3.decorative:before, h3.decorative:after {
    content: '';
    border-top: 1px solid #A7A9AC;
}


.readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a {
	background: #5081B3; 
	font-family: 'Quicksand', sans-serif;
}

/*************** HOMELAYOUT ***************/
.outline-14.homelayout h3.g-title {border-bottom: none;}
.homelayout.schoollayout h3.g-title {border-bottom: none; font-size: 2.7rem; font-weight: 400;}

@media only all and (min-width: 51rem) and (max-width: 75.99rem) {
    .section-horizontal-paddings {
    padding-left: 10%;
    padding-right: 10%;
}
}

/*************** OFFCANVAS ****************/
/*************** TOP **********************/
.outline-14 #g-navigation > .g-grid:last-child > .g-block > .g-content {padding: 0 0; margin: 0 0;}
.outline-14 #g-navigation > .g-grid:last-child {background: #5081b3;}
#g-top > div:nth-child(2) > div > div > div > div > div {padding: .5rem 1.5rem .5rem 2rem;}
/*.g-logo .g-content img {padding: .5rem 1.5rem .5rem 4rem;}*/

@media (min-width: 50.99rem) {
    .outline-13 #g-top {background: url('/images/template/header-school.jpg') 100% 100% no-repeat; background-size: contain;}
}
@media only screen and (max-width: 767px) {
	#g-top {background: none; border-bottom: 1px solid #5081b3;}
}

/*************** NAVIGATION ***************/

.g-main-nav {font-family: 'Quicksand', sans-serif; font-weight: 400;}
.g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {
    word-break: normal;
    line-height: normal;
    font-size: 1rem;
    letter-spacing: 0;
    font-weight: 400;
}
.g-main-nav .g-toplevel {text-transform: none;}
.g-main-nav .g-toplevel>li.active>.g-menu-item-container {
    border-bottom: 0px solid #fff;
}
.g-main-nav .g-standard .g-dropdown {border-radius: 0;}
.g-main-nav .g-dropdown .size-100>.g-sublevel>li.g-go-back+li>.g-menu-item-container {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}.g-main-nav .g-dropdown .size-100>.g-sublevel>li:last-child>.g-menu-item-container {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.g-main-nav .g-toplevel>li>.g-menu-item-container, .g-main-nav .g-sublevel>li>.g-menu-item-container {letter-spacing: 0;}
.g-main-nav .g-sublevel>li>.g-menu-item-container>.g-menu-item-content {white-space: normal;}

.toplinks .g-iconmenu > a  {color: #064373; border-left: 2px #ffffff solid;}
.toplinks .g-iconmenu > a:hover {color: rgba(135,147,130,.75);}
#g-top:not(.homelayout #g-top) {border-bottom: 2px solid #5081b3;}

.outline-14 .g-social a {margin-right: 5px;}

@media only screen and (max-width: 767px) {
    .outline-14 #g-navigation .g-grid .g-block:first-child {text-align: center;}
    .outline-14 .t-logo img {width: 75%;}

    .outline-14 .toplinks .g-content {margin: 0; padding: 0;}
    .outline-14 .toplinks {margin-bottom: 1vw;}
    .outline-14 .g-iconmenu .g-iconmenu-item {flex: 1; padding: 0;}
    .outline-14 .toplinks .g-iconmenu .g-iconmenu-text {font-size: 3vw;}
    .outline-14 .toplinks .g-iconmenu .g-iconmenu-icon {font-size: 6vw;}
}


/*************** SLIDESHOW ****************/
.outline-14 .homelayout .fwshowcase .sprocket-features-content {
    background: url('/images/template/masstimes.jpg') 0% 0% no-repeat;
    background-size: cover;
}

.outline-14 .homelayout .fwshowcase .sprocket-features-desc {
	background: rgba(207,212,205,.85);
}
.outline-14 .pagination-active { margin-bottom: 0;}
.outline-14 .pagination-active .sprocket-features-pagination { bottom: 0;}
.outline-14 .layout-showcase .sprocket-features-arrows .arrow {background: transparent; box-shadow: none; font-size: 5rem;}

@media only screen and (min-width: 768px) {
.outline-14 .layout-showcase .sprocket-features-img-container img {
    float: left;
    margin-right: 25px;
    width: 67vw;
    height: 37.2vw; 
	object-fit: cover;
	object-position: center;}
}


.videocontainer {height: 37vw!important;}
video.widevideo {height: 37vw!important;}

.mass-times-box {height: 37.2vw!important; margin: 0!important; background: url('/images/template/masstimes.jpg') 0% 0% no-repeat; background-size: cover; position: relative;}
.mass-times-overlay {background: rgba(207,212,205,.85); position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; padding: 3vw;}
.mass-times-overlay :is(h1,h2,h3,h4,h5,h6) {font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; font-weight: normal; text-transform: none; font-variant-caps: normal; color: #148539; margin: 0;}
.mass-times-overlay p {color: #148539; font-size: 1.2vw;}
.mass-times-overlay a {color: #148539 !important;}

@media only screen and (max-width: 767px) {
    .mass-times-box {height: 80vw!important;}
    .mass-times-overlay :is(h1,h2,h3,h4,h5,h6) {
        font-size: 7vw;
        margin: 0;
    }
    .mass-times-overlay p {
        font-size: 3.5vw;
    }
}

@media only screen and (min-width: 767px) {
    .homelayout #g-feature .admod table {
        justify-content: right;
    }
}

/*************** HEADER *******************/

.separated-quicklinks .sprocket-strips-s-container li {padding-bottom: 0 !important;}
.outline-14.homelayout #g-header {padding: 5% 5% 2.5% 5%;}
.outline-14.homelayout #g-header .g-grid:nth-child(2) {background: rgba(255,255,255,1); box-shadow: 0px 0px 10px rgba(0,0,0,.2);}
.outline-14.homelayout #g-header .g-grid:nth-child(2) p {font-size: 1.4rem; font-style: italic;}
.outline-14.homelayout .sprocket-strips-s-container {margin: 0 0;}
.outline-14.homelayout #g-header h4.link-title {border-bottom: none; font-size: 3em;}
.outline-14.homelayout #g-header h4.sprocket-strips-s-title {font-family: 'Quicksand', sans-serif; font-weight: normal; color: black !important;}

.outline-14.homelayout .separatedquicklinks {margin-top: 4vw; margin-bottom: 2vw;}
.outline-14.homelayout .separatedquicklinks > .sprocket-strips-s > .sprocket-strips-s-container > .sprocket-strips-s-block > .sprocket-strips-s-item img {box-shadow: 0px 0px 10px rgba(0,0,0,.3);}
.outline-14.homelayout .separatedquicklinks .sprocket-strips-s-title a:hover {background: rgba(0,0,0,.1); color: #148539;}
.outline-14.homelayout .separatedquicklinks .sprocket-strips-s-content {margin: 25px 0px;}
.outline-14.homelayout #g-header .sprocket-strips-s-nav{ padding: 0;}


.outline-14.homelayout #g-header .feature-box {background: #ffffff; box-shadow: 0px 0px 10px rgba(0,0,0,.2); margin-bottom: 2rem;}
.outline-14.homelayout #g-header .feature-box p {font-size: 1rem; }

@media only screen and (min-width: 50.99rem) {
    .separated-quicklinks .sprocket-strips-s-container {display: flex; flex-direction: row;}
    .separated-quicklinks .sprocket-strips-s-container li {flex: 1; margin: 0; padding: .5vw;}
    .separated-quicklinks .sprocket-strips-s-block {margin: 0; padding: 0;}
    .separated-quicklinks .sprocket-strips-s-item {position: relative;}
    .separated-quicklinks .sprocket-strips-s-item:hover {background: rgba(0,0,0,.1);}
    .separated-quicklinks .sprocket-strips-s-item img {box-shadow: 0px 0px 10px rgba(0,0,0,.5);}
    .separated-quicklinks .sprocket-strips-s-title {text-align: center; font-size: 1.7vw;}
    .separated-quicklinks a.readon {position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; background: transparent; border-radius: 0; margin: 0; padding: 0;}
    .separated-quicklinks a.readon > span {display: none;}
}

@media only screen and (max-width: 50.99rem) {
    .outline-14.homelayout #g-header {padding: 4vw 2%;}
    .outline-14.homelayout #g-header .g-grid:last-child > .g-block > .g-content {margin: .625rem; padding: 1.5rem 0;}
    .separated-quicklinks .sprocket-strips-s-container {display: flex; flex-direction: column;}
    .separated-quicklinks .sprocket-strips-s-container li {flex: 1; margin: 0; padding: 0; margin-bottom: 1rem;}
    .separated-quicklinks .sprocket-strips-s-content {padding: 0; margin: 0; flex: 4; display: flex; justify-content: flex-start; align-items: center;}
    .separated-quicklinks .sprocket-strips-s-item {position: relative; background: #148539; display: flex; flex-direction: row;}
    .separated-quicklinks .sprocket-strips-s-item img {flex: 2; object-position: center; object-fit: cover;}
    .separated-quicklinks h4.sprocket-strips-s-title {font-size: 4vw; text-align: left; margin: 0; padding: 0; width: auto; padding-left: 1rem;}
    .separated-quicklinks .sprocket-strips-s-title > a {color: #ffffff; padding: 0; margin: 0;}
    .separated-quicklinks a.readon {position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; background: transparent; border-radius: 0; margin: 0; padding: 0;}
    .separated-quicklinks a.readon > span {display: none;}
}

.fwshowcase {margin-top: 0!important; margin-bottom: 0!important;}
.homelayout.schoollayout .sprocket-features-content {display: none;}
.rot-text {margin: 2vw; height: 37vw; color: #148539;}
.rot-text h3.g-title {padding-top: 5vw; font-family: 'Cormorant Garamond', serif;}
.rot-text p {font-size: 1.4vw;}
.rot-imgs {display: flex; justify-content: center; align-items: center; width: 33%;}
.rot-imgs i {height: auto; font-size: 4vw;}
.rotate-box {height: 37vw; background: url('/images/template/rotator-school-bg.jpg') 0% 0% no-repeat; background-size: cover;}
.rotate-box .g-content {background: rgba(255,255,255,.9);}
.fwshowcase.fwimgright .layout-showcase .sprocket-features-pagination {left: 5%;}

@media only screen and (max-width: 767px) {
	.homelayout.schoollayout #g-header .g-container .g-grid .g-block:first-child {order: 2;}
	.homelayout.schoollayout #g-header .g-container .g-grid .g-block:last-child {order: 1;}
	.homelayout.schoollayout .fwshowcase .sprocket-features-img-container {padding-bottom: 0;}
	.rot-text p {font-size: 3.4vw;}
	.rot-imgs i {font-size: 8vw;}

    .outline-14 .separatedquicklinks > .sprocket-strips-s > .sprocket-strips-s-container > .sprocket-strips-s-block > .sprocket-strips-s-item {background: #148539;}
}

/*************** ABOVE ********************/
.outline-14.homelayout #g-above {background: url('/images/template/paralax1.jpg') 0% 0% no-repeat; background-size: cover;}
.outline-14.homelayout #g-above .platform-content {margin-top: 5vw; margin-bottom: 5vw;}
.outline-14.homelayout .qloverlaybackpic .sprocket-strips-content {background: rgba(255,255,255,.8);}
.outline-14.homelayout .qloverlaybackpic .sprocket-strips-content:hover {background: rgba(255,255,255,1);}
.outline-14.homelayout .qlexpandingborder h4.sprocket-strips-title {border-color: #148539; font-size: 2.5em;}
.outline-14.homelayout .qlexpandingborder h4.sprocket-strips-title a {color: #148539;}

@media only screen and (max-width: 767px) {
    .outline-14.homelayout .qlexpandingborder h4.sprocket-strips-title {font-size: 7.5vw;}
    .outline-14.homelayout #g-above {background-attachment: initial!important;}
    .outline-14.homelayout #g-showcase {background-attachment: initial!important;}
}

/*************** SHOWCASE *****************/
.outline-14.homelayout #g-showcase {background: url('/images/template/paralax2.jpg') 0% 0% no-repeat; background-size: cover;}
.outline-14.homelayout #g-showcase .g-container {background: rgba(207,212,205,.8); padding-top: 3vw!important; padding-bottom: 3vw!important;}
.outline-14.homelayout #g-showcase .g-container .g-grid {padding: 3vw 10%;}

.badge-events .sprocket-strips-s-item {display: flex; flex-direction: column;}
.badge-events .sprocket-strips-s-item img {width: 7rem;}
.badge-events .sprocket-strips-s-container {margin: 0 0; display: flex; flex-direction: row;}
.badge-events .sprocket-strips-s-block {margin: 0 0 0 0; padding: 0 0 0 0; flex: 1;}
.badge-events .sprocket-strips-s-content {margin: 15px 5px;}
.badge-events .sprocket-strips-s-nav {position: relative;}
.badge-events .sprocket-strips-s-nav .arrow {position: absolute; background: none;}
.badge-events .sprocket-strips-s-nav .arrow.next {right: 0; top: 5px; bottom: 0;}
.badge-events .sprocket-strips-s-nav .arrow.prev {left: 0; top: 5px; bottom: 0;}
.badge-events .sprocket-strips-s-nav .sprocket-strips-s-pagination {padding: 0 40px; height: 22px;}
.badge-events .sprocket-strips-s-nav .sprocket-strips-s-pagination ul {display: flex; width: 100%; height: 22px;}
.badge-events .sprocket-strips-s-nav .sprocket-strips-s-pagination ul li {flex: 1; height: 22px; border-radius: 5px;}

.outline-14.homelayout .rme-badge {background: #5081b3;}
.outline-14.homelayout :is(.rme-timeline-point:hover, .rme-timeline-point.active, .rme-timeline-point span) {background: #5081b3;}
.outline-14.homelayout .rme-timeline-point.active span {background: #cfd4cd;}
.outline-14.homelayout .rme-arrow {color: #148539;}

.outline-14.homelayout #g-showcase a.button {background: #5081b3;}
.outline-14.homelayout #g-showcase a.button:hover {background: #777}
.outline-14.homelayout #g-showcase h3.g-title {font-size: 2.5em; margin-bottom: 2vw; font-weight: 500; letter-spacing: 3px; color: #5081b3; font-family: 'Cormorant Garamond', serif;}

/*************** UTILITY ******************/
.qloverlaybackpic .sprocket-strips-content {background: rgba(49, 77, 101,.8);}
.qloverlaybackpic .sprocket-strips-content:hover {background: rgba(49, 77, 101,.6);}

.cwu .cwu-under {background: #ffffff; margin: 0 5%; box-shadow: 0px 0px 10px rgba(0,0,0,.2);}
.cwu .cwu-under h4 {font-size: 2em; font-weight: 400; letter-spacing: 2px;}

.outline-14.homelayout #g-utility h3.g-title {color: #ffffff; font-weight: 500; letter-spacing: 3px; margin-bottom: 2vw; font-family: 'Cormorant Garamond', serif;}


@media only screen and (max-width: 767px) {
	
	.qloverlaybackpic .sprocket-strips-content, .qloverlaybackpic .sprocket-strips-content:hover {background: none;}
	.qloverlaybackpic li {background: #314D65;}
    .qloverlaybackpic li:hover {background: #314D65;}
    .qloverlaybackpic .sprocket-strips .sprocket-strips-container > li {border-bottom: none;}

    .rotate-box {height: 70vw;}
    .rot-text {height: 70vw;}

    .widthvw10 .sprocket-strips .sprocket-strips-container > li, .widthvw11 .sprocket-strips .sprocket-strips-container > li,
    .widthvw12 .sprocket-strips .sprocket-strips-container > li, .widthvw13 .sprocket-strips .sprocket-strips-container > li, 
    .widthvw14 .sprocket-strips .sprocket-strips-container > li, .widthvw15 .sprocket-strips .sprocket-strips-container > li, 
    .widthvw16 .sprocket-strips .sprocket-strips-container > li, .widthvw17 .sprocket-strips .sprocket-strips-container > li, 
    .widthvw18 .sprocket-strips .sprocket-strips-container > li, .widthvw19 .sprocket-strips .sprocket-strips-container > li, 
    .widthvw20 .sprocket-strips .sprocket-strips-container > li {justify-content: flex-start;}

    .cwu-under {margin: 3vw!important; padding: 2vw; border-radius: 7px;}
    .outline-14.homelayout #g-utility .g-content {margin: 0; padding: 0;}
}

/*************** FEATURE ******************/



.outline-14.homelayout #g-feature .sprocket-strips-s-item .readon {display: none;}
.outline-14.homelayout #g-feature .coverimgarea .sprocket-strips-s-item img {border-bottom: 4px solid #879382 !important; box-shadow: 0px 0px 10px rgba(0,0,0,.2);}
.outline-14.homelayout #g-feature .sprocket-strips-s-arrows .arrow {color: #ffffff;}
.outline-14.homelayout #g-feature .bigarrows .sprocket-strips-s-arrows .arrow.prev {left: 0px;}
.outline-14.homelayout #g-feature .bigarrows .sprocket-strips-s-arrows .arrow.next {right: 0px;}
.outline-14.homelayout #g-feature .sprocket-strips-s-title a {
    color: #ffffff;
    font-family: 'Lato',serif;
    font-size: 1.2rem;
    text-transform: none;
    font-weight: none;
    line-height: 1.5rem
}
.outline-14.homelayout #g-feature .sprocket-strips-s-title a:hover {color: #ffffff;}
.outline-14.homelayout #g-feature .sprocket-strips-s-title {line-height: 1; margin-top: 2vw; margin-bottom: 2vw; font-weight: normal;}
.outline-14.homelayout #g-feature .sprocket-strips-s-item {position: relative;}
.outline-14.homelayout #g-feature .sprocket-strips-s-title a {position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; padding-top: 15.5vw;}
.outline-14.homelayout #g-feature .feature-box h3.g-title {font-family: 'Cormorant Garamond', serif;}
.outline-14.homelayout #g-feature .g-block.size-80 h3.g-title {color: #ffffff!important; font-weight: 500; font-family: 'Cormorant Garamond', serif;}
.outline-14.homelayout #g-feature .sprocket-strips-s-item img {margin-bottom: 2vw;}


@media only screen and (max-width: 767px) {
    .outline-14.homelayout #g-feature .sprocket-strips-s-item {display: flex; flex-wrap: wrap; flex-direction: column; height: 57vw;}
    .outline-14.homelayout #g-feature .sprocket-strips-s-container .sprocket-strips-s-block > .sprocket-strips-s-item img {flex: 1; width: 100%; height: auto !important;}
    .outline-14.homelayout #g-feature .sprocket-strips-s-container .sprocket-strips-s-block > .sprocket-strips-s-item > .sprocket-strips-s-content {flex: 2; margin-left: none;}
    .outline-14.homelayout #g-feature .sprocket-strips-s-content {margin-left: 0;}
    .outline-14.homelayout #g-feature .sprocket-strips-s-container li {padding-bottom: 0; margin-bottom: 7vw;}
    .outline-14.homelayout #g-feature .sprocket-strips-s-title a {color: #ffffff; padding-top: 60vw;}
    .outline-14.homelayout #g-feature .g-block.size-80 h3.g-title {color: #ffffff!important; font-weight: 500;}
    .outline-14.homelayout #g-feature .feature-box {margin: 3vw; border-radius: 7px;}
    .outline-14.homelayout #g-feature .sprocket-strips-s-item img {margin-bottom: 0;}

}
.outline-14.homelayout #g-feature h6 {font-size: 1.2rem; margin-bottom: 0.25rem; letter-spacing: 2px; }
.outline-14.homelayout #g-feature .feature-box {background: rgba(255,255,255,1); box-shadow: 0px 0px 10px rgba(0,0,0,.2);}
.outline-14.homelayout #g-feature .feature-box p {font-size: 1.2rem; }
/* .outline-14.homelayout #g-feature {padding-bottom: 3vw!important;} */

.homelayout.schoollayout #g-feature {background-attachment: fixed;}
.homelayout.schoollayout #g-feature .g-container {background: rgba(255,255,255,.9); padding: 4vw 10%!important;}

@media only screen and (max-width: 767px) {
    .homelayout.schoollayout #g-feature {background-attachment: initial;}
}

/*************** EXPANDED *****************/
.homelayout.schoollayout #g-expanded h3 {border-bottom: none; color: #ffffff; font-size: 2.5rem; font-weight: 400; margin-bottom: 2.5vw;}

/*************** EXTENSION ****************/
.homelayout.schoollayout #g-extension h4 {font-size: 2.5rem;}
.homelayout.schoollayout #g-extension .g-title {padding-bottom: 0; margin-bottom: 0;}
.homelayout.schoollayout #g-extension , #g-utility{padding-top: 2vw!important;}
.homelayout.schoollayout #g-extension .cwu-under, #g-utility .cwu-under {box-shadow: 1px 1px 10px rgba(0,0,0,.5); margin: 2vw 2vw; background: #ffffff; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 2rem;}

.homelayout #g-extension {padding: 4vw 0;}

/*.outline-14 #g-extension .platform-content {display: flex; align-items:center; justify-content: center;}*/
.outline-14 #g-extension h3.g-title {font-family: 'Cormorant Garamond', serif; font-weight: 500; letter-spacing: 2px; color: #148539; background: white; padding: 1rem; }
/*.outline-14 #g-extension .sprocket-strips-s-text p {color: #148539;}*/
.outline-14 #g-extension p {color: #148539; padding: 0 1rem;}
.outline-14 #g-extension img {max-width: 80px;}
.outline-14 #g-extension .box5 {background: #148539; border-radius: 10px;}
.outline-14 #g-extension .box5 a {color: #148539; box-shadow: none;}
.outline-14 #g-extension table, .outline-14 #g-extension td {border: 0  solid #d4dce3; padding: 0.5rem;}
.box5.moduletable, .box5.widget, .box5.g-outer-box, .box5>.g-content {color: #148539; background: white; border-radius: 10px; padding: 0;}

@media only screen and (max-width: 767px) {
    .outline-14.homelayout #g-extension .contact-us-strips-1 {box-shadow: 0px 0px 10px rgba(0,0,0,.2);}
}

/*************** BOTTOM *******************/
/*************** FOOTER *******************/
#g-footer .g-container .g-grid:first-child {padding-top: 2vw; padding-bottom: 2vw;}
#g-footer h3 {font-size: 2.25rem; border-bottom: 0px solid #ffffff; }
#g-footer p {font-weight: normal; }
.outline-14 #g-footer p {font-family: 'Quicksand', sans-serif;}

/*************** COPYRIGHT ****************/

/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: #148539; color: white;}
.moduletable .nav.menu a {color: white;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
    color: #148539;
    background: #cfd4cd;
}
.moduletable .nav.menu, .moduletable .mostread, .moduletable .latestnews, .moduletable .archive-module, .moduletable .relateditems, .moduletable .categories-module, .moduletable .category-module, .moduletable .latestusers, .moduletable .unstyled {
    border: 0px solid rgba(231, 232, 234, 0.25);
    padding: 0.1rem;
    border-radius: 0;
}
.moduletable .nav.menu li, .moduletable .mostread li, .moduletable .latestnews li, .moduletable .archive-module li, .moduletable .relateditems li, .moduletable .categories-module li, .moduletable .category-module li, .moduletable .latestusers li, .moduletable .unstyled li {
    padding-bottom: 0.5rem;
    margin-bottom: 0;
    border-bottom: 0px solid rgba(231, 232, 234, 0.25);
}
.moduletable .nav .nav-child {
    margin-top: 0;
}
.moduletable .nav.menu li a, .moduletable .mostread li a, .moduletable .latestnews li a, .moduletable .archive-module li a, .moduletable .relateditems li a, .moduletable .categories-module li a, .moduletable .category-module li a, .moduletable .latestusers li a, .moduletable .unstyled li a {
    display: block;
	padding: 0.5rem 1rem;
}
.moduletable .unstyled li {padding-bottom: 0.1rem;}

/*************** SECTIONS *****************/
#g-footer a {color: #ffffff;}

/*************** MOBILE *******************/
.g-offcanvas-toggle {color: #cfd4cd;}

/*************** ADS **********************/


/*************make news images smaller*****************/
.newslayout .pull-right.item-image img { max-width: 25vw;}
.newslayout .pull-left.item-image img { max-width: 25vw;}
@media only screen and (max-width: 767px) {
	.newslayout .pull-left.item-image img { width: 100%;}
	.newslayout .pull-right.item-image img { width: 100%;}
} 
.newslayout .row-fluid .span12 { border-bottom: 1px solid rgba(135,147,130,0.75);}

/**************** MINISTRY LAYOUT *********************/
.outline-14:not(.outline-14.homelayout) #g-utility {background: #ffffff;}



/*************stwilliam.org/ministries layout October 2021****************/
/************ MINISTRY PAGE  ************/
.wtaministrylayout .item { display: flex; flex-direction: column; }
.wtaministrylayout .item .pull-left.item-image { order: 2; }
.wtaministrylayout .item .pull-left.item-image img { /*border-radius: 4px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2);*/ padding: 0.5rem 0;}
.wtaministrylayout .item .page-header { order: 1; }
.wtaministrylayout .item table { order: 3; margin: 0; }
.wtaministrylayout .item p { order: 4; }
.wtaministrylayout .pull-left.item-image { margin: 0;}
.wtaministrylayout .button { font-size: 1rem; border: 1px solid #879382; border-radius: 25px;  text-transform: uppercase; padding: 1rem 1.5rem;}
.wtaministrylayout .button:hover { color: #879382 ; background: transparent ;}

.wtaministrylayout .page-header h2 {
	line-height: 1.2;
	font-weight: 400;
    font-size: 1.7rem;
    border-bottom: 0px solid #E2EDE9;
    margin: 3px 0 0 0;
    padding: 0;
	text-align: center;
	font-variant-caps: normal;
}
.wtaministrylayout .nav.menu a { word-break: normal; }
.wtaministrylayout h2 a { word-break: normal; }

@media only screen and (max-width: 767px) {
	.wtaministrylayout .item { padding-bottom: 30px;}
	.wtaministrylayout .item .pull-left.item-image img  { text-align: center;}
}

.funerals {
    background: #fff;
    color: #454545;
    border: 4px solid #879382;
	padding: 1rem;}
.funerals .moduletable {padding: 1rem;}
.funerals h2 {font-size: 1.75rem; padding-left: 1rem; margin-bottom: 0.25rem;}
.funerals p { padding-left: 1rem;}

/************ COLORS  ************
Dark Green: #148539; rgba(75,89,69,1)
Green: #148539; rgba(107,124,99,1)
Light Green: #879382; rgba(135,147,130,1)
Cream Green: #cfd4cd; rgba(207,212,205,1)
White: #ffffff; rgba(255,255,255,1)
Black: #000000; rgba(0,0,0,1)



/* fix the bio button spacing on the staff page - /parent-information/palc/meet-the-members */

.bio-button-center .readmore {
    display: grid;
    margin: auto;
    justify-content: center;
    align-items: center;
}

/*quicklinks on homepage*/

.widthvw16 .sprocket-strips-item {
	width: 15vw;
}

.schoollayout.homelayout .section-horizontal-paddings {
	padding-left: 5%;
	padding-right: 5%;
}

@media only screen and (max-width: 767px){
	.qlexpandingborder .sprocket-strips-content h4.sprocket-strips-title a {
		font-size: 1.3rem;
	}
}


/* top logo adjustment */



@media (min-width: 50.99rem) {
	.school-logo img {
		width: 100%;
	}
}


.homelayout #g-feature > div:nth-child(2) > div.g-block.size-59.equal-height.feature-box > div > div > div > h3 {
    color: #148539;
}

.homelayout .rme-title,
.homelayout .rme-time {
    color: black;
}

#g-feature > div:nth-child(1) > div.g-block.size-80 > div > div:nth-child(2) > div > div > p > a {
    background-color: #5081b3;
}

.schoollayout .rme-badge,
.schoollayout .rme-timeline-point.active {
    background-color: #5081B3;
}

.schoollayout #g-feature > div > div > div > div > div:nth-child(1) > div > h3 {
    color: #5081b3;
}

.schoollayout #g-extension > div > div.g-block.size-80 > div > div > div > h3 {
    color: white;
}

.outline-_error #menu-3510-particle,
.outline-_error #social-3164-particle {
    padding: 0 !important;
    margin: 0 !important;
}

@media (min-width: 50.99rem) {
	.schoollayout .toplinks .g-iconmenu .g-iconmenu-text {
		font-size: 1.5rem;
		color: #148539;
	}
	.schoollayout .toplinks .g-iconmenu .g-iconmenu-icon {
		color: #148539;
	}
}

@media (Max-width: 50.99rem) {
	.schoollayout .toplinks .g-iconmenu .g-iconmenu-text {
		font-size: 1.5rem;
		color: #148539;
	}
	.schoollayout .toplinks .g-iconmenu .g-iconmenu-icon {
		color: #148539;
	}
	.schoollayout .toplinks > .g-content {
		padding: 0 !important ;
		margin-top: 0 !important ;
		margin-left: -8%;
	}
}

/* new updates */

#g-feature > div:nth-child(1) > div.g-block.size-80 > div > div:nth-child(1) > div > h3 {
    font-size: clamp(1.5rem, 2.75vw, 2.75rem);
}

.outline-14.homelayout #g-feature .sprocket-strips-s-title a {
    font-size: clamp(1rem, 1.5vw, 2rem);
}

.outline-14.homelayout .image-links .mod_placehere_leading p:not(.buttonheading) {
    display: flex;
    gap: 1rem;
    margin-bottom: 0;
    height: 100%;
    flex-direction: column;
    padding: 5%;
}

.outline-14.homelayout .image-links img {
    box-shadow: 0px 0px 10px rgba(0,0,0,.5);
}

.homelayout .image-links > .g-content {
    padding: 0% !important;
    margin: 0% !important;
}

.outline-14.homelayout .image-links img {
    transition: transform 0.3s ease-in-out;
  }
  
.outline-14.homelayout .image-links img:hover {
    transform: scale(0.98);
}

.homelayout #g-feature > div:nth-child(2) > div:nth-child(1) > div > div > div > h3 {
    font-size: clamp(1.5rem, 2.75vw, 2.75rem);
}

.homelayout #g-feature > div:nth-child(1) > div.g-block.size-80 > div {
    padding: 0 !important;
}

/* .outline-14.homelayout #g-above {background: url('/images/template/paralax1.jpg') 0% 0% no-repeat; background-size: cover;} */

.homelayout #g-feature {
    padding: 0 !important;
}

.homelayout #g-feature > div:nth-child(1) {
    padding: 2.5% 5%;
}

.homelayout #g-feature > div:nth-child(2) {
    background: url('/images/template/paralax1.jpg') 0% 0% no-repeat fixed; 
    background-size: cover;
    padding: 5%;
    border-bottom: 5px solid #148539;
}

.outline-14 .header-logo img {
    width: 100%;
    max-width: 1200px;
}