@import url('//fonts.googleapis.com/css2?family=Caudex:ital,wght@0,400;0,700;1,400;1,700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/************ TEMPLATE  ************

************/

.site-1 {
    --primary-color: #51090D;
    --secondary-color: #DFE0DE;
	--tertiary-color: #D4CABA;
	--fourth-color: #cab187;

    --primary-rgb: 81,9,13;
    --secondary-rgb: 223,224,222;
	--tertiary-rgb: 212,202,186;

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

    --title-font-family: 'EB Garamond', 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(--primary-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);
	
	--ph-width: 16vw;
	--ph-title-color: white;

	--rok-mini-badge: var(--primary-color);

	--hero-img-height: 20vw;
}

.school {
    --primary-color: #51090D;
    --secondary-color: #DFE0DE;
	--tertiary-color: #D4CABA;
	--fourth-color: #cab187;

    --primary-rgb: 81,9,13;
    --secondary-rgb: 223,224,222;
	--tertiary-rgb: 212,202,186;

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

    --title-font-family: 'EB Garamond', 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(--primary-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);
	
	--ph-width: 16vw;
	--ph-title-color: white;

	--rok-mini-badge: var(--primary-color);

	--hero-img-height: 20vw;
}

@media (min-width: 50.99rem) {

	.ql-fa-toplinks .g-blockcontent-subcontent-title-icon {
		font-size: 1.5vw;
	}

}

@media (min-width: 50.99rem) {
	.show-mobile {
		display: none;
	}
}

.small-grid {
	--grid-tile-height: 14vw;
}

.site-1 #g-navigation {
    --ql-title-color: var(--primary-color);
}

.site-1 #g-header {
	--ql-title-color: white;
	--ql-font-size-desktop: 2vw;
}

.site-1 #g-container-main {
	--ph-border-bottom: 4px solid var(--primary-color);
	--ph-title-color: var(--primary-color);
}

.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: var(--body-font-family);
} 
 
.g-content-array {
	margin: initial;
	padding: initial;
}

iframe {
	border: none;
}

.item-image {
	display: none;
}

#hero {
	height: auto;
}

h6 {
	color: var(--fourth-color); 
}

/***********Custom Scrollbar****************/

/* Hide the default scrollbar */
::-webkit-scrollbar {
    width: .75rem;
  }
  
  ::-webkit-scrollbar-track {
    background-color: #f5f5f5;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 5px;
  }
  
  /* Style the scrollbar on hover */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #999;
  }
  
  /* Style the scrollbar when it's being dragged */
  ::-webkit-scrollbar-thumb:active {
    background-color: #666;
  }

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

/*************** TOP **********************/ 

#g-top .g-content {
	padding: 0;
	margin: 0;
}

#g-top .g-array-item {
	padding: 1rem;
	margin: 1rem;
}

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

#g-navigation {
	background: url(/images/header.jpg) no-repeat top;
	/* background-attachment: fixed; */
	background-size: cover;
}

#g-navigation .g-content {
	padding: 0;
	margin: 0;
}

.g-menu-item-container {
	padding: 1rem !important;
}

.g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content .g-menu-item-title {
	font-size: clamp(1rem, 1.2vw, 2rem);
}

.g-menu-item-title {
	font-family: var(--body-font-family);
}

#g-navigation .g-social-items a {
	color: white;
}

#g-navigation .g-social-items a:nth-child(2) {
	padding: 0 2rem;
}

@media only screen and (min-width: 50.99rem) {
	
	.header-logo img {
		width: 65% !important;
		padding: 2% 0;

	}

}

@media only screen and (max-width: 50.99rem) {

	.header-logo img {
		padding: 1rem;
	}

}


/*************** SLIDESHOW ****************/

#g-slideshow {
	position: relative;
}

.mass-times-overlay h1 {
	color: white;
	border-bottom: none;
	font-size: clamp(1.5rem, 2.5vw, 4rem);
	font-weight: normal;
	margin-bottom: 0.15rem;
}
.mass-times-overlay p {
	margin: 0 0 1rem 0;
}




@media only screen and (min-width: 50.99rem) {

	.mass-times-overlay {
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
		height: 42vw;
		width: 35%;
		max-width: 715px;
		background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
		padding: 1% 1% 1% 3%;
		overflow: auto;
	}

	.mass-times-overlay :is(p, a) {
		color: #ffffff !important;
	}
	
	a.white-outline-button {
	color: white !important;
	width: 100%;
	text-align: center;
	padding: 1rem 0;
	display: inline-block;
	border: 2px solid white;
	font-size: 1.2rem;
	}
	a.white-outline-button:hover {
	color: white !important;
	width: 100%;
	text-align: center;
	padding: 1rem 0;
	display: inline-block;
	border: 2px solid white;
	font-size: 1.2rem;
	background: var(--primary-color);
	}
	#g-slideshow a:hover {
    color: white !important;
	}
}

@media only screen and (max-width: 50.99rem) {

	.mass-times-overlay {
		padding: 5%;
	}

	.mass-times-overlay h1 {
		color: var(--primary-color);
	}

	a.white-outline-button {
		color: var(--primary-color) !important;
		border: 2px solid var(--primary-color);
		width: 100%;
		text-align: center;
		padding: 1rem 0;
		display: inline-block;
		font-size: 1.2rem;
	}
	a.white-outline-button:hover {
		color: white !important;
		width: 100%;
		text-align: center;
		padding: 1rem 0;
		display: inline-block;
		border: 2px solid white;
		font-size: 1.2rem;
		background: var(--primary-color);
	}
	#g-slideshow a:hover {
    color: white !important;
	}

}


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

.welcome-box .g-content {
	padding: 0;
}

.welcome-box h1 {
	font-size: clamp(3rem, 4.5vw, 6rem);
}

.welcome-box p {
	font-size: 1.2rem;
}

#g-feature {
	padding: 3% 8%;
}

.hero .g-content {
	padding: 0%;
	margin: 0;
}


/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/

#g-utility .pagination-button-next {
	font-size: 3rem;
	right: 0;
}

#g-utility .pagination-button-prev {
	font-size: 3rem;
	left: 0;
}

.school-home #g-utility .g-title {
	font-weight: normal;
	font-size: clamp(3rem, 5vw, 6rem);
}

@media only screen and (max-width: 50.99rem) {

	.school-home #g-utility .g-item-title a {
		color: var(--primary-color);
	}

}

.school-home .mission-padding {
	padding: 3% 5% 1% 5%;
}

.school-home .mission-padding p {
	margin-bottom: 0;
}

.school-home .mission-padding h1 {
	font-variant-caps: small-caps;
}

/*************** FEATURE ******************/
/*************** MAIN *********************/

.site-1-home  #g-container-main {
	padding: 2% 5%;
	background: url(/images/paralax1.jpg) no-repeat center center / cover;
	background-attachment: fixed;
}

.parish-headlines-list a span {
	color: white;
	padding: 0.5rem 0.75rem;
	border-radius: 10px;
	display: inline-block;
}

.site-1-home #g-aside h3 {
	font-weight: normal;
}

.parish-headlines-list .portrait-image img {
	aspect-ratio: 1;
}

.parish-headlines-list .sprocket-lists-portrait-container li {
	border-bottom: 1px solid var(--primary-color);
}

@media only screen and (max-width: 50.99rem) {

	.site-1-home  #g-container-main {
		padding: 0;
	}

	.site-1-home  #contentarray-4903-particle {
		padding: 0;
	}

	.site-1-home  #g-aside {
		padding: 0 5%;
	}

	.site-1-home .ph-portrait .g-item-title a {
		color: var(--primary-color);
	}

}

/*************** EXPANDED *****************/ 

.site-1-home #g-expanded {
	padding: 2% 5%;
}

.site-1-home  .modules-section h3 {
	text-align: center;
}

@media only screen and (min-width: 50.99rem) {
	.site-1-home  .modules-section .k-ui-namespace .koowa_wrapped_content {
		width: fit-content;
	}
}

.school-home .school-documents .g-item-title { 
	text-align: center;
	font-size: clamp(2rem, 3vw, 4rem);
}

.school-home .school-documents .mod_docman.mod_docman--documents {
	display: flex;
    justify-content: center;
}

/*************** EXTENSION ****************/
/*************** BOTTOM *******************/
/*************** FOOTER *******************/
#g-footer .g-content-array {margin: 0;}
#g-footer a {color: var(--default-white);} 

#g-footer p {
	font-size: 1.5rem;
	margin-bottom: 0;
}

#g-footer a:hover {
	color: #f2f2f2;
}

.footer-info .g-content {
	padding: 0;
}

.footer-info {
	margin: auto;
}

/*************** 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(--primary-color); 
    background: var(--secondary-color);
} 


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


.no-articles #g-mainbar .g-content {
	padding: 0;
	margin: 0;
}

/*@media only screen and (max-width: 50.99rem) {
	.homelayout .k-ui-namespace .mod_docman.mod_docman--documents {
		min-width: 100%;
		flex-direction: row;
	}
	.homelayout .k-ui-namespace {
		min-width: 100%;
	}
}*/

@media only screen and (max-width: 50.99rem) {
	/*.mobile-scroll-table {
		width: 100%!important;
		max-width: 100%!important;
		position: relative;
		box-shadow: 0px 0px 10px rgba(0,0,0,.5);
		border-radius: .5rem;
		overflow: hidden;
	}
	/*.mobile-scroll-table > tbody > tr > td {
		width: unset!important;
	}*
	.mobile-scroll-table > tbody {
		display: flex;
		flex-direction: column;
		padding-top: 25vw;
		height: 100vw;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	.mobile-scroll-table > tbody > tr:nth-child(1) {
		height: 25vw;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background: var(--default-white);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-right: 12px;
	}
	.mobile-scroll-table > tbody > tr:nth-child(even) {
		background: #cccccc;
	}
	.mobile-scroll-table > tbody > tr:nth-child(odd) {
		background: var(--default-white);
	}
	.mobile-scroll-table > tbody > tr {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.mobile-scroll-table > tbody > tr > td {
		flex: 1;
		width: 33%!important;
		min-width: 30%!important;
		display: flex;
	}
	.mobile-scroll-table > tbody > tr:nth-child(1) p {
		margin: 0;
		padding: 0;
		line-height: 1.2;
		font-size: 4vw;
	}
	.mobile-scroll-table > tbody > tr:not(:nth-child(1)) p {
		margin: 0;
		padding: 0;
		line-height: 1.2;
		font-size: 2.75vw;
	}*/
	.mobile-scroll-table {
		display: flex;
		max-width: 100%!important;
		overflow-x: scroll;
	}
}