@import url('//fonts.googleapis.com/css2?family=Caudex:ital,wght@0,400;0,700;1,400;1,700&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  ************
Rotator Size: 1000x563 (wide, 16:9)

/************ FONTS  ************
Serif: Caudex
Sans Serif: Montserrat

*Montserrat Regular: menu, mission statement, links, 
*Montserrat Medium: buttons, ...get involved, footer links/text, news article titles
*Montserrat Bold: icon ql text

/************ COLORS  ************
Blue: #2a476b, rgba(42,71,107,1)
Gold: #ae9766, rgba(174,151,102,1)
Light Grey: #f1f2f2

/************ NOTES ************
***Mission Statement - build site with mission statement, but section will probably be unpublished until they have a statement written. Or just put "Welcome" for now with the capability of text underneath and call it good and keep it published

*Mass Times: Blue @ 85% - rgba(42,71,107,.85)
*QL, paralax: Blue @ 80% - rgba(42,71,107,.8)
*Dropshadow: Our Mission, News images - drop-shadow(0 0 10px rgb(0, 0, 0, .2))
 --- let's do Livestream's embed video, too - drop-shadow(0 0 10px rgb(0, 0, 0, .4))
*fa-icons: https://fontawesome.com/v4.7/icons/
*'I would like to/get involved: I saved a graphic that can be used for the whole thing (minus the search box), but also just the church icon if you want to try to build the border with css
**************************************/

body {color: #333; font-family: 'Montserrat', sans-serif;}

h1, h2, h3, h4, h5, h6 {margin: .75rem 0; line-height: 1.3; font-weight: normal;}
p {line-height: 1.3;}
.page-header h1 {text-transform: none; font-size: 3rem;}
h1 {color: #2a476b; font-size: 3.5rem; font-weight: bold; font-family: 'Caudex', serif;}
h2, .page-header h2 {font-variant-caps: small-caps; color: #2a476b; font-size: 2.2rem; font-family: 'Caudex', serif; font-weight: normal;}
h3 {color: #2a476b; font-size: 1.8rem; border-bottom: 1px solid #ae9766; line-height: 1.3; margin: 0 0 10px 0; font-family: 'Caudex', serif; font-weight: 400;}
h4 {color: #ae9766; font-size: 1.8rem;}
h5 {background: #ae9766; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .5rem;}
h6 {color: #2a476b; font-size: 1.4rem; text-transform: uppercase; font-weight: bold;}
a {color: #ae9766; /*border-bottom: 1px solid #ae9766;*/}
a:hover {color: black;}

@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;}
}

.readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a {
    background: #2a476b;
}

/*************** HOMELAYOUT ***************/
@media only screen and (min-width: 767px) {
    .showmobile {display: none!important;}
}

/*************** OFFCANVAS ****************/
/*************** TOP **********************/
/*************** NAVIGATION ***************/
#g-navigation .g-logo {display: flex; justify-content: center;}

@media only all and (min-width: 51rem) {
#g-navigation .g-logo img {
    width: 75%;
}
}

@media only all and (max-width: 50.99rem) {
#g-navigation .g-logo {
    max-width: 70%;
    margin: 0vw auto;
    margin-bottom: 20vw;
}
}

#g-navigation .g-logo img {margin-bottom: -70px; margin-top: 1vw; margin-left: 0vw; z-index: 100; position: relative;}

#g-navigation .g-container .g-grid:last-child {background: #2a476b;}

        /*TopLinks*/
.toplinks .g-iconmenu > a {color: #ae9766!important; border-left: 2px #ae9766 solid!important;}
.toplinks .g-iconmenu > a:hover {color: rgba(42,71,107,.75)!important;}
#g-navigation:not(.homelayout #g-navigation) {border-bottom: 2px solid #ae9766!important;}
.g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content, .g-main-nav .g-sublevel>li>.g-menu-item-container {font-size: 0.9rem; letter-spacing: 0.1rem; font-weight: 500;}
.g-main-nav .g-standard .g-dropdown {border-radius: 0; }
.g-main-nav .g-dropdown .g-dropdown-column>.g-grid>.g-block.size-100 {border-radius: 0px;}
.g-main-nav .g-dropdown .size-100>.g-sublevel>li.g-go-back+li>.g-menu-item-container {
 border-top-left-radius: 0px;
 border-top-right-radius: 0px;
}
.g-main-nav .g-dropdown .size-100>.g-sublevel>li:last-child>.g-menu-item-container {
 border-bottom-left-radius: 0px;
 border-bottom-right-radius: 0px;
}
.g-main-nav .g-sublevel>li>.g-menu-item-container {white-space: none !important;}
.g-main-nav .g-sublevel>li>.g-menu-item-container>.g-menu-item-content {white-space: normal;}


@media only screen and (max-width: 767px) {
    #g-navigation .g-log img {margin-bottom: none; position: initial;}
}

/*************** SLIDESHOW ****************/
        /*Rotator*/
.fwshowcase {margin: 0!important;}

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

.fwshowcase .sprocket-features-desc {
	background: rgba(42,71,107,.85);
}

/*************** HEADER *******************/
        /*Quicklinks*/
.qloverlaybackpic .sprocket-strips-content {background: rgba(42,71,107,.8);}
.qloverlaybackpic .sprocket-strips-content:hover {background: rgba(42,71,107,.9);}
.qloverlaybackpic .sprocket-strips-nav {display: none;}

.sprocket-strips-container > li { margin: 10px 5px;}

@media only screen and (max-width: 767px) {
	.qloverlaybackpic .sprocket-strips-content, .qloverlaybackpic .sprocket-strips-content:hover {background: none;}
	.qloverlaybackpic li {background: rgba(42,71,107,1);}
    .qloverlaybackpic li:hover {background: black;}


    .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: left;}

}

/*************** ABOVE ********************/
        /*Our Mission*/
.mission-text .mission-box h3 {text-align: center; border-bottom: none;}
.mission-text .mission-box .mission-1 {box-shadow: 0px 0px 10px rgba(0,0,0,.2); margin-top: 2vw; margin-bottom: 2vw; margin-right: -3vw; z-index: 5; background: #ffffff; padding: 3vw; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center;}
.mission-text .mission-box .mission-2 {z-index: 4;}

@media only screen and (max-width: 767px) {
    .mission-text .mission-box .mission-1 {order: 2; margin-top: -15vw; margin-right: 5vw; margin-left: 5vw; background: rgba(255,255,255,.85);}
    .mission-text .mission-box .mission-2 {order: 1;}
}

/*************** SHOWCASE *****************/
.homelayout #g-showcase h3.g-title {border-bottom: none; color: #ffffff;}
        /*Paralax*/
.homelayout #g-showcase {background: url('/images/template/paralax.jpg') 100% 100% no-repeat;}
.homelayout #g-showcase .g-grid {background: rgba(42,71,107,.8); padding: 0 10%;}


        /*I would like to...*/
.search-dropdwn {height: 100%; width: 100%; display: flex; align-items: center; justify-content: center;}

#dropdwn-outer-box {height: 357px; width: 488px; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column;}
#dropdwn-button {height: 15%; width: 70%; border: 2px solid #ffffff; display: flex; align-items: center; border-radius: 7px; position: relative;}
#dropdwn-button:hover {cursor: pointer; background: rgba(42,71,107,.9);}
#dropdwn-button i {position: absolute; right: 20px; color: #ffffff; font-size: 1.4vw;}
#dropdwn-button p {color: #ffffff; margin: 0 0 0 20px;}

#dropdwn-menu {overflow-x: hidden!important; position: absolute; left: 15%; right: 15%; top: 57%; height: 154px; background: rgba(42,71,107,1); border-right: 2px solid #ffffff; overflow: scroll; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; width: 70%;}
#dropdwn-menu::-webkit-scrollbar {
    width: 5px;
    background: transparent;
    overflow-x: hidden;
}
#dropdwn-menu::-webkit-scrollbar-track {
    background: transparent;
}

#dropdwn-menu::-webkit-scrollbar-thumb {
    background: #ffffff;
}
#dropdwn-menu::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
}
#dropdwn-menu::-webkit-scrollbar-corner {
    background: transparent;
    display: none;
}

#dropdwn-menu .weblinks a {color: #ffffff;}
#dropdwn-menu .weblinks a:hover {background: rgba(255,255,255,.4);}
#dropdwn-menu .weblinks li {list-style: none; height: 80px; display: flex; position: relative; align-items: center; margin: 0 0 0 0;}
#dropdwn-menu .weblinks li a {position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; display: flex; align-items: center; padding: 0 0 0 20px;}
#dropdwn-menu .weblinks li p {margin: 0 0 0 20px;}
#dropdwn-menu .weblinks {margin: 0; padding: 0;}

.hidden-dropdwn {display: none;}
.hidden-radius {border-bottom-left-radius: 0px!important; border-bottom-right-radius: 0px!important;}
.dropdwn-button-background {background: rgb(29, 50, 77);}

@media only screen and (max-width: 767px) {
    .homelayout #g-showcase > .g-grid > .g-block:last-child .g-content {padding: 0 0 initial 0; margin: 0 0 initial 0;}
    
    #dropdwn-menu .weblinks li a {font-size: 3vw;}

    #dropdwn-outer-box {background-size: 100%!important; height: 170px; width: 100%; margin-bottom: 85px;}
    #dropdwn-button {height: 25%;}
    #dropdwn-button i {font-size: 3vw;}

    #dropdwn-text {font-size: 4vw;}
}

/*************** UTILITY ******************/
/*************** FEATURE ******************/
.homelayout #g-feature h3.g-title {border-bottom: none;}
.homelayout #g-feature {padding: 3vw 5%!important;}
        /*Latest News*/
.homelayout #g-feature .sprocket-strips-s-item .readon {display: none;}
#g-feature .coverimgarea .sprocket-strips-s-item img {border-bottom: 4px solid #ae9766 !important;}
#g-feature .sprocket-strips-s-arrows .arrow {color: #2a476b;}
#g-feature .sprocket-strips-s-title a {
    color: #2a476b;
    font-family: 'Lato',serif;
    font-size: 1.2rem;
    text-transform: none;
    font-weight: none;
    line-height: 1.5rem
}
#g-feature .sprocket-strips-s-title a:hover {color: #1a73e8;}
#g-feature .sprocket-strips-s-title {line-height: 1;}

@media only screen and (max-width: 767px) {
    #g-feature {background: #f8f8f8;}
    #g-feature .sprocket-strips-s-item {display: flex; flex-wrap: wrap; flex-direction: column;}
    #g-feature .sprocket-strips-s-container .sprocket-strips-s-block > .sprocket-strips-s-item img {flex: 1; width: 100%;}
    #g-feature .sprocket-strips-s-container .sprocket-strips-s-block > .sprocket-strips-s-item > .sprocket-strips-s-content {flex: 2; margin-left: none;}
    #g-feature .sprocket-strips-s-content {margin-left: 0;}
    #g-feature .sprocket-strips-s-container li {padding-bottom: 0;}
}

/*************** EXPANDED *****************/
#g-expanded .g-content {padding: 0.5rem;}

/*************** EXTENSION ****************/
/*************** BOTTOM *******************/
#g-bottom {padding: 3vw 0%!important;}

/*************** FOOTER *******************/
#g-footer {padding: 1vw 5%!important;}

@media only screen and (max-width: 767px) {
    #g-footer {text-align: center;}
}

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

/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: #2a476b;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
    color: #ffffff;
    background: #ae9766;
}

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

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

/*************** 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%;}
} 

.g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator:after {
    font-family: 'Font Awesome 5 Free';
}