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

/************ FONTS  ************
Serif: Rufina
Sans Serif: Lato

/************ COLORS  ************
Red: #720b02; rgba(114,11,2,1)
Grey: #939598; rgba(147,149,152,1)
Cream: #f1f1e8; rgba(241,241,232,1)

/************ NOTES ************
*Mass Times overlay: Red @ 80% - rgba(114,11,2,.8)
*QL overlay: Grey @ 70% - rgba(147,149,152,.7)
*Drop Shadow on news images, SW Kansas Catholic graphic, & 3-column resource boxes: drop-shadow(0 0 10px rgb(0, 0, 0,.2))
*Drop Shadow on QL text: drop-shadow(0 0 5px black)
*the Mission Statement itself is Lato Italic, and just a bit larger than the normal body text size

/*******COLOR ASSIGNMENTS***********
*just in case the shade of red and shade of grey are not contrasting enough:
*Red - header/menu bar, mass times overlay, module titles, news titles/readmore, links, calendar badges, news pagination, footer
*Grey - allllll the buttons, mission statement, module title underlines, news article dividers, QL overlay
*Cream - only used for the background of whole site
************************************/

body {color: #333; 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;}
.page-header h1 {text-transform: none; font-size: 3rem;}
h1 {color: #720b02; font-size: 3.5rem; font-weight: normal; font-family: 'Rufina', serif; letter-spacing: 5px;}
h2 {font-variant-caps: small-caps; color: #720b02; font-size: 2.5rem; font-family: 'Rufina', serif;  font-weight: bold; }
.page-header h2 { padding-bottom: 0.25rem; line-height 2.5rem;}
h3 {color: #720b02; font-size: 2rem; border-bottom: 1px solid #939598;  line-height: 1.3; margin: 0 0 10px 0;}
h4 {color: #720b02; font-size: 2rem; font-family: 'Rufina', serif;}
h5 {background: #939598; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .5rem;}
h6 {color: #720b02; font-size: 1.5rem; text-transform: uppercase; font-weight: bold; }
a {color: #720b02;}
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: #939598;
}

/*************** HOMELAYOUT ***************/
/*************** OFFCANVAS ****************/
/*************** TOP **********************/
/*************** NAVIGATION ***************/
        /*Logo*/
@media only all and (min-width: 51rem) {
#g-navigation .g-logo img {
    width: 100%;
}
}

@media only screen and (max-width: 767px) {
    #g-navigation .g-logo img {margin-top: 1vw; margin-bottom: 5vw;}
}

.menu-social {display: flex; align-items: flex-end;}
.menu-social img {height: 20px; width: auto; margin-right: 10px;}
#g-navigation p { margin-bottom: 0; }

/**Clarity dropdown- remove border-radius on menu dropdowns:**/
.g-main-nav .g-standard .g-dropdown {border-radius: 0px;}
.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;
}
/*Clarity- remove top level dropdown indicatator*/
.g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator {display: none;}
/*clarity increase menu font size, remove capitalization*/
.g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {font-size: 1rem;  letter-spacing: 0.1rem; font-weight: 500;}
.g-main-nav .g-toplevel {text-transform: none;}
.g-main-nav {font-family: 'Lato', sans-serif;}

/*************** SLIDESHOW ****************/
        /*Rotator*/
.ffcontentback .sprocket-features-content {
    background: url('/images/stories/template/bg-rotator.jpg') 100% 0% no-repeat;
    background-size: cover;
    position: relative;
}

.ffcontentback .sprocket-features-desc {
    background: rgba(114,11,2,.8);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.ffcontentback .sprocket-features-desc :is(h1,h2,h3,h4,h5,h6) {
    color: #ffffff;
    font-weight: normal;
    font-size: 2.5vw;
    border-bottom: none;
    font-variant-caps: normal;
    background: none;
    text-transform: none;
	margin: 0.75rem 0 0 0; 
}

@media only screen and (max-width: 767px) {
    .ffshowcase .sprocket-features-content {height: 70vw; margin-left: 0;}

    .ffcontentback .sprocket-features-desc :is(h1,h2,h3,h4,h5,h6) {
        font-size: 1.5rem;
        margin: 0;
    }
}

/*************** HEADER *******************/
        /*Quicklinks*/
.qloverlaybackpic {margin-right: 4%!important; margin-left: 4%!important;}
.qloverlaybackpic .sprocket-strips-content {background: rgba(147,149,152,.7);}
.qloverlaybackpic .sprocket-strips-content:hover {background: rgba(147,149,152,.9);}

@media only screen and (max-width: 767px) {
	.qloverlaybackpic .sprocket-strips-content, .qloverlaybackpic .sprocket-strips-content:hover {background: none;}
	.qloverlaybackpic li {background: rgba(147,149,152,1);}
    .qloverlaybackpic li:hover {background: #720b02;}

    .qloverlaybackpic .sprocket-strips-content, .qloverlaybackpic .sprocket-strips-content:hover {margin-left: 35vw;}
    .qloverlaybackpic .sprocket-strips-content, .qloverlaybackpic h4.sprocket-strips-title, .qloverlaybackpic h4.sprocket-strips-title a {width: 89vw; margin-bottom: 0;}
    .qloverlaybackpic .sprocket-strips .sprocket-strips-container > li {border-bottom: none;}
}

/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
/*************** FEATURE ******************/
#g-feature .platform-content {padding: 0.75rem 0;}


        /*Upcoming Events*/
.rme-items {flex-direction: column;}
.rme-items li {display: flex; flex-direction: row; margin: 0;}
.rme-timeline {display: none;}
.rme-badge {background: #720b02;}

.zoompics .active .portrait-image img, .zoompics.noncollapse .portrait-image img {height: 13vw;  width: 13vw; box-shadow: 2px -2px 5px rgb(0 0 0 / 40%);}
.zoompics h4.sprocket-lists-portrait-title {font-size: 1.6rem !important;}
.portrait-image {margin: 0 1.5rem 5px 0;}

#g-feature .imgshadow a:hover img {box-shadow: 2px 2px 10px rgba(0,0,0,.5);}


/*************** EXPANDED *****************/
.homelayout #g-expanded .g-content {background: #ffffff; box-shadow: 0px 0px 10px rgba(0,0,0,.2);}

/*************** EXTENSION ****************/
.homelayout #g-extension h1 {color: #ffffff;}
.homelayout #g-extension p {font-size: 1.5rem;}
.homelayout #g-extension {margin-bottom: 2vw;}

/*************** BOTTOM *******************/
/*************** FOOTER *******************/
#g-footer .g-content {margin: 0; padding: 0;}
#g-footer a {color: #ffffff;}

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

/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: #720b02;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
    color: #ffffff;
    background: #939598;
}

/*************** SECTIONS *****************/


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


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

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