/*
TEMPLATE FOR MEDIA QUERIES
	@media screen and (min-width:1180px) {}
	@media screen and (min-width:880px) and (max-width:1179px) {}
	@media screen and (max-width:879px) {}

INDEX
	- PAGE RESET
	- STRUCTURE
	- HEADER
	- PG_TOP
	- TYPOGRAPHY
	- ENDPAGE/SEPARATOR
	- FOOTER
	- PLATFORM
	- DEFAULT FORM
	- DEFAULT TABLE
	- HMENU01
	- SCROLL TO TOP,
	- VMENU01
	- DIVS ASIDE
	- CONTACT ASIDE
	- INFO ASIDE
	- SHINE EFFECT
	- NOTEBLOCK
	- QUOTE
	- SHAKE HOVER
	- BG_01
	- SWIPER
*/

/*-----------------------------------------------------------  PAGE RESET ----------------------*/
:root {
	--color1000: #c21b22;
	--color2000: #4070b4;
	--color3000: #d7b82f;
	--color4000: #a88d62;
	--color5000: #f9f9f9;
}

/*-----------------------------------------------------------  STRUCTURE -----------------------*/
@media screen and (min-width:1180px) {
	aside, .content { flex-basis: auto;}
	
	section.has_aside aside { order: 1; background-color: black;}

	section.has_aside .content { padding: 0 50px 1.8em 50px; min-height: 550px;}    
	
	.content { order: 2; padding: 0.8em 0; }
}

@media screen and (min-width:880px) and (max-width:1179px) {
	section.has_aside aside { 
		display: none;
		flex-wrap: wrap;
	}

	aside { display: none; }
}

@media screen and (max-width:879px) {
	section.has_aside .content {
		padding-left: 10px;
		padding-right: 10px;
	}

	section.has_aside aside { 
		display: none;
		flex-wrap: wrap;
	}

	aside { display: none; }
}

body {
	background: #bc9d6d url(../images/ch_bg.jpg) no-repeat center 4px;
	font-family: 'Libre Baskerville', serif;
	font-size: 16px;
	background-size: 1500px;
}

main { min-height: 450px; }    

.content { 
	/*padding: 0.8em 0;*/
	background-color: white;
}

section.has_aside aside {
	position: relative;
	padding: 0 0 40px 0;
	/*! top: -18px; */
}

input { border-radius: 0; }

.info_box {
	background: var(--gray1);
	border-left: 1px solid var(--color1000);
	border-right: 1px solid var(--color1000);
	border-bottom: 1px solid var(--color1000);
	width: 100%;
	max-width: 300px;
	padding: 0 10px 10px;
}

.info_box h5 {
	text-transform: uppercase;
	text-align: center;
	font-size: 11px;
	color: var(--gray1) !important;
	background: var(--color1000);
	padding: 3px 0;
	width: calc(100% + 21px);
	margin-left: -10px;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
}

.info_box .contact-infos dl {
	margin: 0 auto !important;
	padding: 5px 0;
	border-bottom: 1px solid var(--gray2);
	display: table;
	width: 100%;
}

.info_box .contact-infos dl:last-child { border-bottom: 0; }

.info_box .contact-infos dl dt {
	width: 75px;
	overflow: hidden;
	float: left;
	height: 75px;
	border-radius: 100%;
	margin: 0 17px 0 0;
}

.info_box .contact-infos dl dt img{ width: 100%;}

.info_box .contact-infos h3 {
	font-size: 15px !important;
	color: var(--gray5);
	margin-bottom: -7px !important;
	font-weight: 500;
}

.info_box .contact-infos dd.function-minister {
	font-size: 13px !important;
	color: var(--gray3);
}

.giving-aside a:hover { opacity: 0.9; }

/*-----------------------------------------------------------  HEADER --------------------------*/
@media screen and (min-width:1180px) {
	#top_aside {
		width: 300px;
		height: 0px;
		position: absolute;
		top: -48px;
		background: url(../images/top_aside.png) no-repeat center 0;
		border-bottom: 19px solid black;
		padding-top: 29px;
	}
	
	#logo {
		width: 140px;
		height: 194px;
		margin: -90px 0 30px 82px;
	}    
	
	header section { height: 120px; }   
	
	header nav {
		bottom: 5px;
		left: calc(58% - 480px);
		width: 800px;
	}

	#giving_desktop {
		width: 120px;
		height: 22px;
		margin-top: 9px;
	}
	
	#pg_top {
		height: 50px;
		margin-top: 110px;
		background: url(../images/bk-top-content.png) no-repeat right bottom;
	}
	
	#ytbutton {
		display: block;
		float: right;
		opacity: 0.8;
		padding: 5px 3px;
		transition: all 0.2s linear;
		font-size: 24px;
		margin: 0 10px 0 0;
	}
}

@media screen and (min-width:880px) and (max-width:1179px) {
	header {
		position: fixed;
		top: 0;
		z-index: 1000;
		width: 100%;
	}

	main { margin-top: 110px; }

	#logo_top {
		width: 140px;
		height: 59px;
		top: 4px;
		left: 0;
	}

	#top_bar { height: 70px; }   
	
	header section { height: 120px; }   

	header nav { bottom: 15px; right: 0; }

	#giving_mobile {
		width: 45px;
		height: 50px;
		margin-right: 39px;
		margin-top: -50px;
		padding-right: 56px;
	}
	
	#ytbutton {
		display: block;
		float: right;
		opacity: 0.8;
		color: #FFFFFF;
		padding: 10px;
		font-size: 30px;
		width: 34px;
		height: 50px;
		margin-right: 108px;
		margin-top: -50px;
		padding-right: 56px;
		transition: all 0.2s linear;
		border-right: 1px solid;
	}
}

@media screen and (max-width:879px) {
	header {
		position: fixed;
		top: 0;
		z-index: 1000;
		width: 100%;
	}

	main { margin-top: 110px; }

	#logo_top {
		width: 140px;
		height: 59px;
		top: 4px;
	}

	#top_bar { height: 70px; }   
	
	header section { height: 120px; }

	header nav { bottom: 15px; right: 0;}

	#giving_mobile {
		width: 45px;
		height: 50px;
		margin-right: 40px;
		margin-top: -50px;
		padding-right: 50px;
	}
	
	 #ytbutton {
		border-right: 1px solid var(--gray3);
		float: right;
		opacity: 0.9;
		width: 42px;
		height: 50px;
		margin-right: 100px;
		margin-top: -50px;
		padding-right: 0;
		display: flex;
		align-items: center;
		font-size: 28px;
	}
}
 
#logo {
	background-image: url("../images/stpiusx-logo-desktop.png");
	background-size: 100%;
	display: block;
	z-index: 800;
	position: relative;
}

#logo_top {
	background-image: url("../images/stpiusx-logo-top.png");
	background-size: 100%;
	display: block;
	z-index: 800;
	position: relative;
}

#giving_desktop {
	background-image: url("../images/online-giving-desktop.png");
	background-size: 100%;
	display: block;
	float: right;
	opacity: 0.8;
	transition: all 0.2s linear;
}

#giving_desktop:hover {
	opacity: 1;
	transition: all 0.2s linear;
}

#giving_mobile {
	background-image: url("../images/online-giving-mobile.png");
	background-size: contain;
	background-repeat: no-repeat;
	border-right: 1px solid var(--gray3);
	display: block;
	float: right;
	opacity: 0.9;
}

header nav { position: absolute; }

#top_bar { background-color: black; }

#top_bar section { height: 40px; }

/*-----------------------------------------------------------  FOOTER --------------------------*/
@media screen and (min-width:1180px) { }

@media screen and (min-width:880px) and (max-width:1179px) { }

@media screen and (max-width:879px) { }

footer {
	background-color: black;
	color: white;
	text-align: center;
	font-family: "Montserrat", sans-serif;
}

footer section { 
	padding: 0 0 40px; 
	position: relative;
	justify-content: center;
}

footer h1 {
	font-size: 16px;
	text-transform: uppercase;
	margin-bottom: 15px;
	margin-top: 30px;
}

footer p {
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-weight: 300;
	margin: 10px 0;
	line-height: 20px;
}

footer a { color: var(--gray4); }
footer a:hover { color: var(--gray1); }

form.newsletter { 
	width: 100%;
	max-width: 350px;
}

form.newsletter input[type="email"],
form.newsletter input[type="email"]:hover {
	width: calc(100% - 70px);
	height: 30px;
	background-color: white;
	color: var(--gray5);
	/*border: 1px solid rgba(255,255,255,0.4);*/
	padding: 0 8px;
}

form.newsletter input[type="submit"] {
	background-color: var(--gray4);
	color: white;
	text-transform: none;
	/*border-color: var(--gray2);*/
	width: 60px;
	height: 30px;
	cursor: pointer;
}

form.newsletter input[type="submit"]:hover {
	background-color: var(--gray1);
	/*border-color: var(--gray1);*/
	color: var(--gray5);
	opacity: 0.7;
}

.wrap_admin { background-color: var(--color4000); }

.wrap_admin p, 
.wrap_admin a { color: white; font-size: 12px; }

.wrap_admin a:hover { color: var(--color1000); }

@supports (-ms-ime-align:auto) {
	.newsletter form.default input[type='email'], .newsletter form.default input[type='email']:hover{ width:250px;}
}

.grecaptcha-badge { visibility: hidden; }

/*-----------------------------------------------------------  TYPOGRAPHY   --------------------*/
@media screen and (min-width: 1180px) {
	.content h1 { margin: 13px 0 35px -50px; }
}

.content h1 {
	color: var(--color1000);
	font-family: 'Montserrat', sans-serif;
	font-size: 32px;
	font-weight: 600;
	/*border-left: 7px solid var(--color1000);*/
	padding: 8px 0 3px 23px;
	border-bottom: 1px solid var(--color1000);
	text-transform: uppercase;
	background-color: rgba(194,27,34,0.03);
	letter-spacing: 1px;
}

.content h1 sup { font-size: 14px; }


.content h2 {
	color: var(--color2000);
	font-weight: 300;
	font-size: 26px;
	font-family: 'Montserrat', sans-serif;
}

.content h3 {
	color: var(--color4000);
	font-size: 22px;
	font-weight: 300;
	/*text-transform: uppercase;*/
	font-family: 'Montserrat', sans-serif;
}

.content h3 sup { font-size: 12px; }

.content h4 {
	color: var(--gray3);
	font-weight: normal;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
}

.content h4 sup { font-size: 12px; }

.content h5 {color: var(--gray2); }

.content h6 {color:var(--gray4); }

.content p {
	font-size: 1em;
	margin-bottom: 15px;
}

.content blockquote { 
	padding: 15px 20px;
	color: var(--color4000);
	background: var(--gray1);
	border-top: 1px dashed var(--color4000);
	border-bottom: 1px dashed var(--color4000);
}

.content blockquote p { font-size: 0.9em; }

.content blockquote h1 {
	text-transform: uppercase;
	font-size: 1.5em;
	font-weight: lighter;
	color: var(--gray1);
	margin-top: 20px;
}

.content ul li { font-size: 14px; }

.content ul li::before {
	content: '\f0c8';
	font-size: 7px;
	bottom: 0.1875em;
	color: var(--color4000);
}

.content ol li::before {
	color: var(--gray4);
}

a { color: var(--color1000); }

a:hover{
	color: #78090e;
	/*border-color: var(--gray3);*/
}

.content dl {
	margin-top: 20px;
	margin-bottom: 20px;
}

.content dl dt, .content dl dd {
	margin-bottom: 5px;
	line-height: 22px;
	font-size: 14px;
}

aside h3 {
	font-size: 1.9em;
	margin-bottom: 0.3em;
	color: var(--gray5);
	text-transform: uppercase;
	text-align:center;
}

.article_separator { clear: both; }

/*-----------------------------------------------------------  ENDPAGE/SEPARATOR ---------------*/
.separator {
	background: url(../images/separator.png);
	background-size: 100%;
	height: 35px;
	width: 30px;
	margin: 30px auto;
	opacity: 0.4;
}

.end_page {
	background: url(../images/pg_end.png) no-repeat;
	background-size: 100%;
	margin: 30px auto;
	width: 150px;
	height: 29px;
}


/*-----------------------------------------------------------  DEFAULT FORM   ------------------*/
form.default input,
form.default textarea { border-color: var(--gray2); }
div#Other_Members {
    display: table;
    width: 100%;
	margin-top: 30px;
}

form.default input[type="submit"], 
form.default input[type="button"],
.form_buttons a,
a.button {
	border-color: var(--color1000);
	color: var(--color1000);
	background-color: white;
}

.nl_submit {
	border-color: transparent !important;
	color: white !important;
	background: var(--color4000) !important;
}

.nl_submit:hover {
	background: var(--color1000) !important;
}

form.default input[type="submit"]:hover, 
form.default input[type="button"]:hover,
.form_buttons a:hover,
a.button:hover, 
a.button.selected {
	color: white;
	border-color: transparent;
	background: var(--color1000);
}

a.button01 {
	border-color: var(--gray1);
	background: none;
	color: var(--gray1);
	height: auto;
	font-weight: bold;
	text-align: center;
	width: 100%;
	font-size: 1.5em;
	border-radius: 30px;
	transition: color, background-color 0.7s;
	margin: 6px auto;
	float: none;
	display: block;
	padding: 10px 51px;
}

a.button01:hover {
	border-color: var(--gray3);
	color: var(--gray3);
	transition: color, background-color 0.7s;
}

input.button {
	width: 188px;
	padding: 5px 15px;
	color: white;
	background-color: var(--gray5);
	font-size: 13px;
	cursor: pointer;
	height: 30px;
	margin-top: 5px;
}

input.button:hover {
	background-color: var(--gray2);
}

@media screen and (max-width: 480px) {
	form#parish-registration-form legend {
		font-size: 13px !important;
	}
}

form.default legend {
	color: var(--color2000);
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 20px;
	border-bottom: 1px solid var(--gray4);
	text-transform: none;
}

#parish-registration-form legend {
	color: var(--color1000);
	font-family: "Montserrat", sans-serif;
	text-transform: uppercase;
	font-size: 20px;
	border-bottom: 1px solid var(--color1000);
	font-weight: bold;
}

.buttons_field_group span {
	background-color: var(--color4000) !important;
	color: #FFF;
}

.buttons_field_group span:hover {
	background-color: var(--color3000) !important;
	color: #FFF;
}

form.default label, .status-check {
	font-size: 11px;
	text-transform: uppercase;
	color: var(--color4000);
	margin-top: 7px;
}

form.default fieldset select {
	border: 1px solid var(--gray2);
}

form.default .buttons_field_group {
	float: right;
	margin-bottom: 20px;
}

form.default .field_group {
	border: none;
	margin-top: 20px;
}

form.default .buttons_field_group #remove_fgroup {
	background-color: transparent;
	color: var(--color4000);
	border: 1px solid var(--color4000);
	transition: all 0.2s linear;
}

form.default .buttons_field_group #add_fgroup {
	background-color: var(--color4000);
	color: white;
	border: 1px solid var(--color4000);
	transition: all 0.2s linear;
}

form.default .buttons_field_group #remove_fgroup:hover,
form.default .buttons_field_group #add_fgroup:hover {
	border-color: transparent;
	background: #000;
	color: white;
	transition: all 0.2s linear;
}

/*--------------------------------------------------------  SECTION NAVIGATION  ----------------*/
#section_navigation a.selected {
	background-color: var(--color4000);
	border-color: var(--color4000);
	color: white !important;
}

#section_navigation a {
	border-color: var(--color4000);
	color: var(--color4000);
}

#section_navigation a:hover {
	border-color: var(--gray3);
	color: var(--gray3);
}


/*-----------------------------------------------------------  DEFAULT TABLE   -----------------*/
table.default caption {
	/*background-color: var(--gray1);*/
	color: var(--color2000);
	text-transform: none;
	font-weight: normal;
}

table.default thead {
	background: var(--gray3);
	border-bottom: 2px solid var(--gray4);
}

/*table.default thead tr th {
	font-weight: normal;
	text-transform: uppercase;
	color: white;
	vertical-align: top;
}*/

table.default th, table.default td { padding: 5px 10px; }

table.default th {
	font-weight: 300;
	font-family: "Montserrat", sans-serif;
	/*! text-transform: uppercase; */
	color: var(--color4000);
	vertical-align: top;
	background-color: var(--gray1);
	border-bottom: 2px solid var(--color4000);
	font-size: 0.9em;
}

table.default thead th {
	font-weight: normal;
	/*! text-transform: uppercase; */
	color: var(--color4000);
	vertical-align: top;
}

table.default td {
	border-bottom: 1px dotted var(--color3000);
	vertical-align: middle;
	font-size: 0.8em;
}

table.default tfoot th {
	font-size: 14px;
	text-transform: inherit;
	color: white;
	background: var(--gray4);
}

table.default .bg01 {
	font-size: 18px;
	background-color: var(--color2000);
	color: white;
}

table.default .bg02 {
	font-weight: normal;
	background-color: var(--color1000);
	vertical-align: top;
	color: white;
}

/*------------------------------------------------------------  PAGE INDEX  ---------------------*/
.content .box_index { margin-bottom: 50px; }

.content .box_index h1 {
	padding: 10px 0.5em;
	background: var(--gray2);
}

.content .box_index h1.open::after,
.content .box_index h1.close::after { top: 0.7em; }


/*-----------------------------------------------------------  SCROLL TO TOP   ------------------*/
#scrollToTop { color: var(--gray1); }


/*-----------------------------------------------------------  HMENU01   ------------------------*/
@media (min-width: 1180px) {
	/* FIRST LEVEL    -----------------*/
	.hmenu01 ul#main-menu > li > a {
		padding: 5px 13px;
		color: var(--gray3);
		font-family: "Montserrat", sans-serif;
		font-size: 12px;
		font-weight: 400;
		text-decoration: none;
		text-transform: uppercase;
		display: inline-block;
	}

	.hmenu01 ul#main-menu > li::after {
		content: '|';
		color: var(--gray4);
	}

	.hmenu01 ul#main-menu > li:last-child::after { content: ' '; }  
	
	.hmenu01 ul#main-menu > li > a.current,
	.hmenu01 ul#main-menu > li > a:hover    
	{ color: white; }
	
	/* SECOND+ LEVEL    ---------------*/
	.hmenu01 ul#main-menu > li ul {
		border-left: 1px solid transparent;
		box-shadow: 3px 3px rgba(174, 174, 174, 0.2);
	}

	.hmenu01 ul#main-menu > li > ul li {
		background-color: rgba(168,141,98,0.9);
		border-left: 1px solid var(--gray2);
		border-right: 1px solid var(--gray2);
		width: 100%;
	}

	.hmenu01 ul#main-menu > li > ul li ul li { background-color: var(--gray3); }

	.hmenu01 ul#main-menu > li > ul li a { 
		color: var(--gray1); 
		padding: 10px 25px 10px 8px;
		border-bottom: 1px solid white;
		font-family: "Montserrat", sans-serif;
		font-size: 14px;
	}

	.hmenu01 ul#main-menu > li > ul li:last-child a { border-bottom: none; }

	.hmenu01 ul#main-menu > li ul li a:hover { background-color: var(--color1000); }        
	
	.hmenu01 ul#main-menu > li > ul li a.has-submenu span.sub-arrow { right: 0.9375em; }

	.hmenu01 ul#main-menu > li > ul li a.has-submenu span.sub-arrow:after {
		content: '\f105';
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		position: absolute;
	}
}

@media (max-width: 1179px) {
	.hmenu01 > ul#main-menu {
		background-color: rgba(188, 157, 109, 0.9);
		width: 200px;
		padding: 0;
		top: 70px;
		border-right: 1px solid var(--gray2);
		border-left: 1px solid var(--gray2);
	}

	/* FIRST LEVEL    -----------------*/
	.hmenu01 ul#main-menu > li > a {
		padding: 12px 10px;
		/* background: var(--gray3); */
		color: #ffffff;
		font-size: 16px;
		font-weight: normal;
		text-decoration: none;
		text-transform: uppercase;
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}

	.hmenu01 ul#main-menu > li > a:hover {
		background-color: var(--color1000);
	}
	
	.hmenu01 ul#main-menu > li > a.highlighted { border-bottom: none; }    
	
	.hmenu01 ul#main-menu > li > ul li a:hover { 
		/* color: var(--gray5); */
		/* border-bottom-color: var(--gray1); */
		background: #a62328;
	}

	.hmenu01 ul#main-menu > li:last-child > a { border-bottom: none; }
	
	.hmenu01 ul#main-menu > li > a.has-submenu span.sub-arrow { right: 0.9375em; }

	.hmenu01 ul#main-menu > li > a.has-submenu span:after {
		content: '\f107';
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		position: absolute;
	}
	
	/* SECOND+ LEVEL    ---------------*/
	.hmenu01 ul#main-menu > li ul {
		max-width: 190px;
		margin: 3px auto 15px;
		/* background: var(--gray2); */
		/* border: 1px solid var(--gray3); */
		/* outline: 1px solid var(--gray2); */
	}

	.hmenu01 ul#main-menu > li > ul li a { 
		color: white;
		padding: 8px;
		border-bottom: 1px dotted rgba(255,255,255,0.7);
		font-size: 14px;
	}

	.hmenu01 ul#main-menu > li > a.has-submenu span.sub-arrow { right: 0.9375em; }

	.hmenu01 ul#main-menu > li > a.has-submenu span:after {
		content: '\f107';
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		position: absolute;
	}
	
	.main-menu-btn { top: 25px; width: 30px; height: 30px; }
}

/* hamburger icon */
.main-menu-btn-icon,
.main-menu-btn-icon:before,
.main-menu-btn-icon:after {
	background: var(--gray3);
	width: 100%;
}

/*-----------------------------------------------------------  VMENU01   -----------------------*/
@media screen and (max-width:1179px) {
	.vmenu01 { padding: 0.8em 0; }
}

.mbar {
	position: absolute;
	background-color: rgba(0,0,0,0.03);
	width: 92%;
	height: 100%;
	top: 0;
	left: 4%;
	z-index: -1;
}

.vmenu01 > ul > li {
	border: none;
	margin: 0;
}

.vmenu01 ul li::before{content: none !important;}

.vmenu01 > ul > li > a {
	font-size: 15px;
	font-family: "Montserrat", sans-serif;
	padding: 10px 0 10px 48px;
	color: var(--gray2);
	text-align: left;
	transition: all 0.2s linear;
	margin-bottom: 1px;
	border-left: 3px solid black;
	border-bottom: 1px solid rgba(255,255,255,0.2);
}

.vmenu01 a:hover,
.vmenu01 a.selected{ 
	background-color: rgba(255,255,255,.15);
	border-left: 3px solid var(--color1000);
	color: white;
}

.vmenu01 a sup { font-size: 10px; }

.vmenu01 > ul > li ul { margin: 0 15px 10px 45px !important; }

.vmenu01 > ul > li ul li { 
	border-bottom: dashed 1px var(--gray2);
	text-transform: uppercase;
	font-size: 0.8em;
	transition: .5s ease;
}

/*-----------------------------------------------------------  OUR TEAM  -----------------------*/

.ourteam dl dt img { width: 100%; }

.ourteam dl dd { text-align: center; margin-top: -11px; }

.ourteam dl dd h3 {
	font-size: 11px;
	background: var(--color1000);
	color: white;
	padding: 2px 4px 8px;
	text-align: center;
}

.ourteam dl dd.function-minister {
	font-size: 11px;
	background: var(--color5000);
	color: var(--color1000);
}

.ourteam dl dd.email-team {
	padding: 10px 5px;
}

.ourteam dl dd a {
	font-size: 12px;
	font-weight: lighter;
	color: var(--color4000);
}

/*-----------------------------------------------------------  DIVS ASIDE   --------------------*/ 
.fx_3.contact h1,
.fx_3.info h1 {
	font-size: 1.7em;
	margin-bottom: 4px;
}

.fx_3.contact h2,
.fx_3.info h2 { font-size: 1em; }

.fx_3.contact p,
.fx_3.info p { padding-bottom: 15px;}

.fx_3.contact a,
.fx_3.info a { color: white;}

.fx_3.contact,
.fx_3.info {
	border-radius: 13px;
	padding: 13px 25px;
}

/* BG BLUE ASIDE */
.bg-blue-aside {
	background: var(--gray2);
	padding: 30px 20px;
	color: var(--gray1);
}

.bg-blue-aside h1 {
	color: var(--gray1);
	font-weight: lighter;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.bg-blue-aside dl {
	margin-top: 10px;
}

.bg-blue-aside dl dt {
	font-weight: bold;
	margin-bottom: 3px;
}

.bg-blue-aside dl dd { margin-bottom: 3px; }

/* BG WHITE ASIDE*/
.bg-white-aside {
	/*border-top: 2px solid var(--gray3);*/
	background: white;
	padding: 0 0 20px;
	color: var(--gray4);
	border-bottom: 2px solid var(--gray3);
}

.bg-white-aside h1 {
	padding: 10px;
	text-align: center;
	background: var(--gray2);
	color: white;
	font-weight: lighter;
	text-transform: uppercase;
	margin-bottom: 10px;
	/*margin-top: 20px;*/
}

.bg-white-aside p {
	margin-bottom: 10px;
	padding: 0 20px;
}

.bg-white-aside dl {
	margin-top: 10px;
	padding: 0 20px;
}

.bg-white-aside dl dt {
	font-weight: bold;
	margin-bottom: 3px;
}

.bg-white-aside dl dd { margin-bottom: 3px; }

.bg-white-aside div.toggle label,
.bg-white-aside div.toggle input[type="checkbox"]:checked + label {
	background-color: initial;
	color: #0f7d87;
	border-color: #0f7d87;
	margin: 0 20px 10px;
}


/*-----------------------------------------------------------  CONTACT ASIDE   -----------------*/ 
.fx_3.contact {
	background: var(--gray3);
	color: var(--gray1);
	border-bottom: solid 8px var(--gray1);
}

/*-----------------------------------------------------------  INFO ASIDE   --------------------*/ 
.fx_3.info {
	background: var(--gray4);
	color: var(--gray1);
	border-bottom: solid 8px var(--gray1);
}

/*-----------------------------------------------------------  COLAPSE   -----------------*/ 

.collapse-list .collapse-btn {
	background: var(--gray4) url(/ctm/31250/projects/lakesS/layout01/images/texture-image-colapse.jpg);
	font-size: 1.15em;
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
	padding-right: 65px;
}

.collapse-open ~ .collapse-btn:before{
	background: #FFFFFF;
	color: var(--gray4);
	padding: 14px;
	top: -4px;
	right: 0;
	border-radius: 36px 0 0 36px;
	font-weight: bold;
	width: 46px;
	height: 51px;
}

.content ul { margin-left: 0;}

.content ul.collapse-list li {padding: 0.1875em 0 0.1875em 0;}

/*-----------------------------------------------------------  THIS WEEK -------------------------*/

.this_week article {
	margin-top: 30px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--gray2);
	position: relative;
}

.this_week article h1 {
	color: var(--gray5) !important;
	font-size: 26px !important;
	font-weight: 400 !important;
	margin: 0 0 10px !important;
	text-transform: capitalize !important;
	clear: both;
	background-color: transparent !important;
	padding: 0 !important;
	border-bottom: none !important;
}

.this_week article h2 {
	font-family: "Montserrat", sans-serif;
	font-size: 22px !important;
	font-weight: 300 !important;
}

.this_week article h3 {
	font-family: "Montserrat", sans-serif;
	color: var(--gray3) !important;
	font-weight: normal !important;
	font-size: 0.7em !important;
	margin-bottom: 0.5em !important;
}

.this_week article a.share {
	float: none;
	position: absolute;
	right: 0;
	bottom: 0;
	border-bottom: 0;
	font-size: 10px;
	line-height: 18px;
	background: var(--gray2);
	color: var(--gray5) !important;
}

/*--------------------------------------------------------  ARTICLE | SHARE -------------------------*/
article.share {
	margin-top: 30px;
	padding-bottom: 40px;
	position: relative;
	padding-top: 40px;
}

article.share h1 {
	color: var(--gray5) !important;
	font-size: 26px !important;
	font-weight: 400 !important;
	margin: 0 0 10px !important;
	text-transform: capitalize !important;
	clear: both;
	background-color: transparent !important;
	padding: 0 !important;
	border-bottom: none !important;
}

article.share h2 {
	font-family: "Montserrat", sans-serif;
	font-size: 22px !important;
	font-weight: 300 !important;
}

article.share h3 {
	font-family: "Montserrat", sans-serif;
	color: var(--gray3) !important;
	font-weight: normal !important;
	font-size: 0.7em !important;
	margin-bottom: 0.5em !important;
}

article.share div.addthis_inline_share_toolbox {
	right: auto;
	left: 0;
	top: -3px;
}

/*-----------------------------------------------------  TODAY'S READINGS  ----------------------*/
#readings h2, #readings_spanish .rsslayer h2 {
	font-size: 1.3em;
	width: 100%;
	text-align: center;
	background: var(--color4000);
	color: white;
	padding: 5px 0;
	cursor: pointer;
	margin-bottom: 20px;
	transition: all 0.3s linear;
}

#readings h2:hover, #readings_spanish .rsslayer h2:hover {
	background: var(--color3000);
	transition: all 0.3s linear;
}

#readings_spanish .rsscontent h2 {
	background: transparent;
	color: var(--color4000);
	text-transform: uppercase;
	font-size: 20px;
}

#readings_spanish .rsscontent h2:hover {
	background: transparent;
	color: var(--color4000);
	text-transform: uppercase;
	font-size: 20px;
}

#readings h4, #readings_spanish h4 {
	font-size: 1.1em;
	margin-bottom: 20px;
}

#readings .poetry, #readings_spanish .poetry {
	font-size: 0.9em;
	margin-bottom: 20px;
}

/*-----------------------------------------------------------  MASS INTENTIONS   ---------------*/
.mass_intentions dl { margin: 0 30px 35px 30px; }

.mass_intentions dl dt h2 {color: var(--color4000); font-size: 18px; }

.mass_intentions dl dt p {
	background: var(--color4000);
	text-transform: uppercase;
	font-style: normal;
	font-size: 12px;
	font-weight: lighter;
	color: white;
	padding: 3px;
}

.mass_intentions dl dd { border-left-color: var(--color4000); }

.mass_intentions dl dd h2 {color: var(--color1000); font-size: 16px; }
	
.mass_intentions dl dd p { margin-bottom: 10px; }

.mass_intentions dl dd p + h2 {  }

/*--------------------------------------------------------- CLEAN FORM --------------------------*/
.flex.container-infos {
	padding: 10px;
	background: var(--gray1);
}

.social_media i.fab::before {
	font-size: 1.5em;
	margin: 0 8px;
}

.clean input, .clean textarea { border-bottom-color: var(--gray3); }

.clean .submit{
	float: right;
	width: 100px;
	background-color: var(--color1000);
	text-transform: uppercase;
}

.clean .submit:hover{background-color: var(--color4000);}

/*.clean input:focus ~ .floating-label,
.clean input:not(:focus):valid ~ .floating-label,
.clean textarea:focus ~ .floating-label,
.clean textarea:not(:focus):valid ~ .floating-label{
	top: 2px;
	bottom: 10px;
	left: 21px;
	font-size: 1em;
	opacity: 1;
	color: var(--gray3);
}

.clean .floating-label {
	position: absolute;
	pointer-events: none;
	left: 20px;
	top: 18px;
	transition: 0.2s ease all;
}

.clean input:focus, .clean textarea:focus {
	outline: none;
}

.clean div{
	position: relative;
	margin-bottom: 10px;
}*/


.athleticBox{position: relative;}

span.titleAthletic{
		width: 100%;
	position: absolute;
	bottom: 19px;
	padding: 10px;
	font-size: 30px;
	color: #FFFFFF;
	font-weight: bold;
}

span.titleAthletic i{
	width:20%;
	height: 2px;
	display: block;
	transition: 0.5s;
	background: var(--gray3);
}

.athleticBox:hover span.titleAthletic i{
	background: var(--gray5);
	transition: 0.5s;
	width:40%;
}

.athleticBox .imgC{width:100% !important;}

/*--------------------------------------------------------- CONTACT INTERN ----------------------*/
dl.contactIntern {
	width: 300px;
	border-top: 1px solid var(--gray2);
	border-bottom: 1px solid var(--gray2);
	height: 141px;
	padding: 2px 0;
}

dl.contactIntern dt {
	width: 120px;
	float: left;
}

dl.contactIntern dd {
	width: 180px;
	float: left;
	padding: 0 0 0 8px;
	background-color: var(--gray1);
	height: 135px;
	font-size: 13px;
}


/*-----------------------------------------------------------  #PLATAFORM  ----------------------*/

@media screen and (min-width: 1180px) {
	section#platform .content.large {
		margin-top: -34px;
		padding: 0.8em 1.5em;
	}

	section#platform .content.large h1 {
		margin-left: -25px;
		margin-right: -25px;
	}
}

/*--------------------------------------------------------- SHINE EFFECT ------------------------*/

/* Shine */
.shine figure {
	position: relative;
}

.shine .fx_4 a::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}

.shine .fx_4 a:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
	
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}

/*--------------------------------------------------------- NOTEBLOCK ---------------------------*/
.noteblock {
	background-color: #f6f6ea;
	padding: 15px;
	color: #7e7b46;
	clear: both;
	margin-bottom: 1em;
}

.noteblock h1 { color: var(--gray2); }

.noteblock p {
	font-size: 15px;
	line-height: 25px;
	margin-bottom: 1em;
}

.noteblock ul li {
	padding: 0.1em 0 0.1em 0.95em;
}

.noteblockL {
	float: left;
	width: 45%;
	position: relative;
}

.noteblockR {
	float: right;
	width: 55%;
	border-left: 1px dotted #7e7b46;
	padding-left: 15px;
	position: relative;
}

/*-----------------------------------------------------------  QUOTE ---------------------------*/
.quote p {
	color: var(--gray4);
	text-align: center;
	font-size: 20px;
	font-family: 'Quicksand', sans-serif;
	line-height: 32px;
	padding: 0 77px;
}

/*----------------------------------------------------------  OUR MISSION -----------------------*/
@media screen and (min-width: 880px) {
	.mission {
		min-height: 600px;
		background: #f9f6e9 url(../images/bg-footer-mission.png) no-repeat bottom right !important;
	}
}

.mission {
	padding-bottom: 20px;
}

.mission h2 {
	text-align: center;
	line-height: 40px;
}

.mission h3 {
	background: var(--gray4);
	color: white;
	padding: 10px 0;
	text-align: center;
}

.mission ul {
	width: 94%;
	margin: 0 auto;
}

.mission ul li {
	font-size: 14px;
	line-height: 20px;
}

.mission ul li sup {
	font-size: 10px;
}

/*-------------------------------------------------------------  CLUBS -------------------------*/

/*@media screen and (min-width: 700px) {
	.clubs-icons {
		width: 650px;
		margin: 0 auto;
	}
}*/

.clubs-icons { text-align: center; margin-top: 50px; }

.clubs-icons .fx_3 {
	background: var(--gray1);
	padding: 20px 0 0;
	border-top: 2px solid var(--gray4);
	border-bottom: 2px solid var(--gray3);
	width: calc(96%/3 - 20px/3);
	margin: 0 auto 20px;
}

.clubs-icons .fx_3 figure {
	height: 180px;
	vertical-align: middle;
	display: inline-block;
}

.clubs-icons .fx_3 figure img { max-height: 150px; }

.clubs-icons .fx_3 p {
	background: var(--gray2);
	padding: 5px 0;
	color: white;
	font-size: 14px;
	margin-bottom: 0;
}

/*-----------------------------------------------------------  OUR TEAM ------------------------*/

#ourteam .fx_4 {
	/*border-bottom: 2px dotted #DDAC16;*/
	/*padding-bottom: 20px;*/
	/*width: 170px;*/
	margin-bottom: 30px;
}

#ourteam dl dd:nth-child(1) {
	text-align: center;
	background: var(--gray2);
	/*width: 170px;*/
	margin: 0 auto;
	color: white;
	font-size: 12px;
	text-transform: uppercase;
	padding: 3px 0;
	border-bottom: 1px solid var(--gray1);
}

#ourteam dl dt img {
	border-bottom: 2px solid var(--gray3);
	width: 100%;
}

#ourteam .emailBox {
	margin-top: -10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#ourteam .emailBox .email {
	font-size: 0.8em;
	color: var(--gray2);
}

#ourteam dl dd i {
	font-size: 13px;
	text-align: center;
	color: var(--gray4);
}

/*---------------------------------------------------------  FINANCIAL AID ---------------------*/
@media screen and (min-width: 880px) and (max-width: 1179px) {
	.fin-aid-box { width: 100% !important; }
}

@media screen and (min-width: 880px) {
	.fin-aid-box ul li {
		width: 200px;
		margin-top: 0 auto;
	}
}

@media screen and (min-width: 600px) {
	.fx_2 .fin-aid-box { width: 280px !important; margin: 20px auto; }

	#FAL-04 { margin-top: 65px; }
}

@media screen and (min-width: 500px) {
	.fx_3 .fin-aid-box {
		/*width: 280px;*/
		height: 290px;
	}

	#FAL-02 { margin-top: 74px; }

	#FAL-03 { margin-top: 59px; }

	/*#FAL-04 { margin-top: 65px; }*/
}

@media screen and (max-width: 679px) {
	.financial-aid { padding-top: 40px; }

	.fin-aid-box { margin-top: 0 !important; }
}

.fin-aid-box {
	background: var(--gray1);
	padding: 0 17px;
	border-bottom: 2px dashed var(--gray4);
	height: 100%;
}

.fin-aid-box h3 {
	color: var(--gray2);
	margin-top: 20px;
	padding: 10px 5px;
	border-bottom: 1px solid var(--gray2);
}

.fin-aid-box ul { padding: 0 20px; }

.fin-aid-box ul li {
	color: var(--gray5);
	font-size: 14px;
	line-height: 20px;
}

.fin-aid-box ul li::before {
	color: var(--gray4) !important;
}

.fin-aid-link {
	background: var(--gray2);
	padding: 7px 0;
	display: block;
	width: 90%;
	margin: 0 auto;
	text-align: center;
	color: white;
	text-transform: uppercase;
	font-size: 13px;
	border-radius: 20px;
	transition: all 0.3s linear;
}

.fin-aid-link:hover {
	opacity: 0.8;
	color: white;
	transition: all 0.3s linear;
}

/*-----------------------------------------------------------  ACTIVITIES ----------------------*/
.ss_activities {
	background-color: var(--gray2);
	margin: 0 auto 35px auto;
	width: 1100px;
}

.ss_activities h1 {
	font-family: 'Quicksand', sans-serif;
	color: white;
	font-size: 36px;
	padding-bottom: 20px;
}

.ss_activities #sn_content {
	width: 60%;
	float: left;
	padding: 30px;
	min-height: 413px;
}

.ss_activities .nav_activities {
	width: 40%;
	float: left;
	padding: 30px 0
}

.nav_activities #section_navigation a {
	color: white;
	width: 45%;
}

.nav_activities #section_navigation a.selected {
	background-color: #f6c542;
}

#swiper-activities {
	overflow: hidden;
}

/*-------------------------------------------------------  THIS WEEK | SPORTS ------------------*/
.sports {
	background: #1b4b8f;
	padding-bottom: 10px;
	color: #ebfff4;
	display: block;
	border-collapse: collapse;
}

.sports .flex { padding: 0 20px; }

.sports h4 { color: #b7d2f9; }

.sports .fx_3 p i { color: #b7d2f9 !important; font-size: 13px !important; }

.sports ul li::before { color: #3b6d52; }

.sports ul li strong { color: var(--gray4); }

.sports ul li i { color: #b7d2f9 !important; font-size: 13px !important; }

/*-----------------------------------------------------------  SHAKE HOVER ---------------------*/
.shakeIten.selected{
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;  

  /* When the animation is finished, start again */
  animation-iteration-count:3;
}

.shakeIten:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s; 

  /* When the animation is finished, start again */
  animation-iteration-count: infinite !important; 
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}


/*-----------------------------------------------------------  BG_01 ---------------------------*/
.bg_01 {
	background: #f9f6e9;
}

.bg_01 div.content { background: transparent; }

/*.bg_01, .bg_01 div.content { background-color: #f9f6e9; padding: 20px 0 30px; }*/

/*.bg_01 { border-top: 1px solid var(--gray4); }*/

.bg_01 h1 {
	text-align: center;
	color: var(--gray4);
	margin-bottom: 25px;
	text-transform: uppercase;
	font-weight: lighter;
}

.bg_01 table { border-collapse: collapse; }

.bg_01 table th {
	color: white;
	font-size: 1.1em;
	text-transform: none;
	height: 80px;
	text-align: center;
	background-color: var(--gray4);
	line-height: 20px;
	font-weight: normal;
}

.bg_01 table th:nth-child(1) { padding: 0 5px; }

.bg_01 table td .imgC { 
	width: 100%;
	margin-bottom: 5px;
}

.bg_01 .content ul li::before {
	color: var(--gray4);
}

.curriculum .content ul li::before {
	content: none;
}

.curriculum .content ul li {
	padding: 10px 8px;
	font-size: 0.9em;
	line-height: 22px;
	border-bottom: 1px dashed var(--gray4);
}

a#covid19 {
	color: white;
	background-color: var(--gray4);
	padding: 4px 15px;
	font-size: 16px;
	margin-right: 13px;
}

a#covid19:hover { 
	color: white;
	background-color: var(--gray5); 
}

/*-----------------------------------------------------------  SWIPER --------------------------*/
article	.aspect-ratio-box {
	height: 0;
	padding-top: 65.41%;
	position: relative;
	margin-bottom: 30px;
}


/*-----------------------------------------------------------  SIBLING FADE ---------------------*/

.sibling-fade {
	visibility: hidden;
}
.sibling-fade > * {
	visibility: visible;
}
.sibling-fade > * {
	transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms;
}

.sibling-fade:hover > * {
	opacity: 0.4;
	transform: scale(0.9);
}

.sibling-fade > *:hover {
	opacity: 1;
	transform: scale(1);
	transition-delay: 0ms, 0ms;
}

/*.sibling-fade {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}*/

.sibling-fade > * { text-align: center;}

.sibling-fade img.imgC {
	max-height: 84px;
}

.sibling-fade h1 {
	font-size: 16px;
	font-weight: bold;
	margin: 8px;
	background: none;
	border-bottom: 0;
	padding: 0;
}
.Margin_pillars p {
	font-size: 14px;
	color: var(--color1000);
}

div#labs { width: 75%;}

.sibling-fade .fx_2 {
	padding: 10px;
	background: #fdf8f8;
	border: solid 3px #ffffff;
	outline: solid var(--color1000) 1px;
}

.sibling-fade .fx_3 {
	padding: 10px;
	background: #fdf8f8;
	border: solid 3px #ffffff;
	outline: solid var(--color1000) 1px;
}

.sibling-fade .fx_4 {
	padding: 10px;
	background: #fdf8f8;
	border: solid 3px #ffffff;
	outline: solid var(--color1000) 1px;
}

@media screen and (max-width: 394px) {
	.wrap_Pillars{width: 238px;}
	.Margin_pillars {margin-bottom: 30px;}
}

/*-----------------------------------------  PARISH ACTIVITIES  ----------------------------------*/
.view_types a {
	color: var(--color4000);
	border: 0;
	border-bottom: 1px solid;
	padding: 3px 20px;
	text-transform: uppercase;
	font-size: 10px;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
}

.view_types a.selected, .view_types a:hover {
	background: #f9efe1;
	color: var(--color4000);
}

#cal_filters h1 {
	background: var(--color1000);
	color: white;
	outline: 6px solid white;
	font-weight: 600;
	padding: 4px 15px;
	top: -28px;
}

#cal_month .calendar_date {
	background: black;
	font-weight: 500;
	font-family: "Montserrat", sans-serif;
	padding: 1px;
}

#cal_week dl dt { background: black; }