/*
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
	- FOOTER
	- TYPOGRAPHY
	- ENDPAGE/SEPARATOR
	- SCROLL TO TOP
	- HMENU01
	- VMENU01
	- BULETTINS
*/

/*-----------------------------------------------------------  PAGE RESET ----------------------*/
:root {
	--bg_hd: rgba(49,70,144,.8);
	--tx_hd: #fff;
	--aa_hd: #000;
	--ah_hd: #000;
	--h1_hd: #000;
	--h2_hd: #000;
	--h3_hd: #000;
	
	--color_pd: #031631;
	--color_p: #062756;
	--color_pl: #0b499f;
	
	--color_ad: #05193f;
	--color_a: #132d5e;
	/* --color_al: #013ea8; */
	--color_al: #496aa8;

	--color_cd: #000;
	--color_c: #000;
	--color_cl: #000;		

	--confirm: #4fac53;
}


.phone, .fax, a.email, a.web, a.pdf, p.email, dd.email, a {
    color: var(--color_p);
}

#page_navigation a, #section_navigation a, .section_navigation a{
	background: var(--color_p);
	color: #fff;
}

#page_navigation a:hover, #section_navigation a:hover, .section_navigation a:hover{
	background: var(--color_pd);
	color: #fff;
}

input.submit {
    background: var(--color_p);
    color: #FFF !important;
}
input.submit:hover {
    background: var(--color_pd);
}

/*-----------------------------------------------------------  STRUCTURE -----------------------*/
@media screen and (min-width:1180px) {
	aside, .content { flex-basis: auto;}
	
	section.has_aside aside { 
		order: 2;
		padding: 2.5em 0 0.8em;
	}

	section.has_aside .content { padding: 1.8em 3.125em 1.8em 0; }    
	
	.content {order: 1;padding: 1.8em 0;}
	
	main section.has_aside { background: linear-gradient(90deg, #fff calc(100% - 300px), #f9f9f9 300px); }
}

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

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

body {  
	font-family: 'Iwata Gothic Old Pro', sans-serif;
}

main { min-height: 450px; }    

section.has_aside aside {
	position: relative;
	padding-bottom: 63px;
}

input { border-radius: 0; }

aside .spanish{display:none;}

#top_page {
 position: relative;
 width: 100%;
 background-size: cover;
 background-position: center;
 height: 100vh;
 max-height: 600px;
 /*margin-bottom: 20px;*/
 transition: 0.3s;
}

#top_page-img {
position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
    height: auto;
    overflow: hidden;
    /* margin-bottom: 20px; */
    transition: 0.3s;
    margin-bottom: -4px;
    background: var(--gray1);
}

.caption {
 position: absolute;
    bottom: 4px;
    left: 0;
    z-index: 2;
    padding: 5px 20px;
    border-radius: 0;
    background: rgb(0 0 0 / 59%);
    backdrop-filter: blur(8px);
}

.caption p {
  margin: 0;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fedbad;
}


/*@media (max-width: 750px) {
 #top_page {
  max-height: 250px;
 }
}
*/

#top_page-img img {
	width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    max-width: 1920px;
    display: block;
}

#section_navigation a.selected {
    color: white;
    background: var(--color_ad);
}

 #ourteam.OTmodel01 dd.OT-name {
  font-size: 14px;
  text-align: center;
  width: 100%;
  display: block;
  color: var(--color_p);
  padding: 3px 0;
  font-weight: bold;
  text-transform: none;
}

#ourteam.OTmodel01 dl{
	margin-bottom: 35px;
}
/*
#ourteam.OTmodel01 dd.OT-email,
#ourteam.OTmodel01 dd.OT-phone,
#ourteam.OTmodel01 dd.OT-function  {
  font-size: 12px;
} */

/*-----------------------------------------------------------  HEADER --------------------------*/
@media screen and (min-width:1180px) {
	header section { height: 115px; }     
	header nav { bottom: 0; right: 0;}
}

@media screen and (min-width:880px) and (max-width:1179px) {
    header nav {right: 0;}
}

@media screen and (max-width:879px) {
	header nav {right: 0;}
}

#logo {
	display: block;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("/ctm/31376/projects/StJames/layout01/images/logo-header.png");
	background-size: contain;
	position: absolute;
	z-index: 800;
	width: 260px;
	height: 120px;
	top: 0;
	left: 0;
}

.bg-pgtop {
	background-image: url("/ctm/31376/projects/StJames/layout01/images/bg-pgtop-church.jpg") ;
	background-size: contain;
}

.pg_top {
	height: 400px;
	background-image: url(https://www.parishmate.com//images/template_pm/pg_top.png);
	background-position: center;
	width: 100%;
	background-size: cover;
	max-width: 1150px;
	margin: 0 auto;
}

header {
	background: var(--gray1);
	border-bottom: 2px solid #132d5e;
	color: var(--white);
	position: relative;
	z-index: 1;
}

header nav { position: absolute; }

header a { color: var(--color_pd); }

header a:hover { color: var(--color_a); }

header h1 { color: var(--white); }

header h2 { color: var(--white); }

header h3 { color: var(--white); }

header {

}

header section {
	display: flex;
	justify-content: center;
	height: 120px;
	align-items: center;
}



/*-----------------------------------------------------------  FOOTER --------------------------*/

@media screen and (max-width:879px) {
	footer section { padding: 20px 0; }
	footer#ft_adom .fx_2:nth-child(1n),
	footer#ft_adom .fx_2:nth-child(2n) {
		text-align: center !important;
	}
	footer#ft_adom p{font-size:14px}
	footer#ft_adom h1 {margin-bottom: 20px !important;}
	footer#ft_adom .social{
		justify-content: center !important;!i;!;
	}
}

footer {
	background-color: var(--color_a);
	color: white;
	font-size: 16px;
}

footer section { 
	padding: 30px 0; 
	position: relative;
}

footer h1 {
	color: var(--color1d);
	font-size: 18px;
	text-transform: uppercase;
	margin-bottom: 5px !important;
}

footer h2 { color: var(--color1d); }
footer h3 { color: var(--color1d); }

footer a { color: white; }
/* footer a:hover { font-weight: bold; } */

footer#ft_adom .fx_2:nth-child(1n){text-align: left;}
footer#ft_adom .fx_2:nth-child(2n){text-align: right;}

footer#ft_adom p{line-height: 23px;}
footer#ft_adom section.flex{padding: 3.2em 0 2.5em;}

footer#ft_adom .social{
	font-size: 19px;
	line-height: 30px;
	gap: 11px;
	display: flex;
	justify-content: flex-end;
}

.wrap_admin {background-color: var(--color_a);/* border-top: 1px solid; */font-family: "Lora", serif;justify-content: space-between;}
.wrap_admin p, 
.wrap_admin a { color: white; }
.wrap_admin a:hover { color: yellow; }

.wrap_admin .fx_2 { margin: 0; }

/*-----------------------------------------------------------  TYPOGRAPHY   --------------------*/

.content h1 {
	color: var(--color_p);
	font-size: clamp(30px,7vw,40px);
	margin-bottom: 30px;
}

.content h2 {
	color: var(--color_a);
	font-size: 26px;
	margin-bottom: 1em;
}

.content h3 {
	color: var(--color_c);
	font-size: 20px;
	margin-bottom: 1em;
}

.content h4 {
	color: var(--color_ad);
	font-size: 20px;
	font-weight: 300;
	margin-top: 15px;
}

.content p {
	font-size: 18px;
	margin-bottom: 12px;
}

.content blockquote {
	padding: 15px;
	border-left: 3px solid var(--color_pl);
	color: var(--color_pl);
	border-color: var(--color_pl);
	background: transparent;
}

.content blockquote p { }

.content blockquote h1 { }

.content a.button01 {
	display: block;
	max-width: 260px;
	width: 100%;
	text-transform: uppercase;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	padding: 10px 5px;
	border: 1px solid var(--color_al);
	color: var(--color_al);
	margin: 0 auto 10px;
	transition: all 0.2s linear;
}

.content a.button01:hover {
	background: var(--color_al);
	border: 1px solid var(--color_al);
	color: white;
	transition: all 0.2s linear;
}

.index_thisweek h2{
	color: white;
}

/*-----------------------------------------------------------  ENDPAGE/SEPARATOR ---------------*/
.separator {
	background: url(https://www.parishmate.com//images/template_pm/separator.png);
	height: 2px;
	width: 227px;
	margin: 30px auto;
	clear: both;
}

/*-----------------------------------------------------------  SCROLL TO TOP   ------------------*/
#scrollToTop { color: rgba(0,0,0,0.4); }

/*-----------------------------------------------------------  HMENU01   ------------------------*/
@media (min-width: 1180px) {
	/* FIRST LEVEL    -----------------*/
	.hmenu01 ul#main-menu > li > a {
		background-color: transparent; 
		color: #132d5e;
		padding: 13px 10px;
		font-size: 16px;
		text-decoration: none;
		text-transform: uppercase;
	}

	.hmenu01 ul#main-menu > li > a.selected,
	.hmenu01 ul#main-menu > li > a.highlighted,
	.hmenu01 ul#main-menu > li > a.current { 
		background-color: var(--color_a); 
		color: var(--white); 
	}

	.hmenu01 ul#main-menu > li > a:hover { 
		background-color: var(--color_a); 
		color: var(--white); 
	}
	
	/* SECOND+ LEVEL    ---------------*/
	.hmenu01 ul#main-menu > li ul { box-shadow: 3px 3px rgba(80,80,80,0.2); }

	.hmenu01 ul#main-menu > li > ul li { width: 100%; }

	.hmenu01 ul#main-menu > li > ul li a {
		background-color: var(--color_a); 
		color: var(--white); 
		border-bottom: 1px solid var(--white);
		padding: 10px 25px 10px 8px;
	}

	.hmenu01 ul#main-menu > li ul li a:hover{ 
		background-color: var(--color_ad); 
		color: #fff;
	} 

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

	.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: var(--color_a);
		width: 240px;
		padding: 0 5px;
		top: 48px;
	}

	/* FIRST LEVEL    -----------------*/
	.hmenu01 ul#main-menu > li > a {
		color: #ffffff;
		border-bottom: 1px solid #ffffff;
		padding: 12px 5px;
		font-size: 17px;
		font-weight: normal;
		text-decoration: none;
		text-transform: uppercase;
	}
	
	.hmenu01 ul#main-menu > li > a.current,
	.hmenu01 ul#main-menu > li > a.highlighted { 
		border-bottom: none;
		background-color: var(--color_al);
	}    
	
	.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;
	}

	.hmenu01 ul#main-menu > li > ul li a:hover { 
		color: var(--white);
		border-bottom-color: var(--white);
		background: var(--color_al);
	}
	
	/* SECOND+ LEVEL    ---------------*/
	.hmenu01 ul#main-menu > li ul { margin: 0 10px 15px; }

	.hmenu01 ul#main-menu > li > ul li a {
		color: white; 
		border-bottom: 1px dotted var(--white);
		padding: 10px 8px;
	}

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

	.hmenu01 ul#main-menu > li > ul li a.current { color: var(--color_ad); }
	
	.main-menu-btn { top: 0; }
}

/* hamburger icon */
.main-menu-btn-icon,
.main-menu-btn-icon:before,
.main-menu-btn-icon:after {
	background-color: var(--color_a);
}


/*-----------------------------------------------------------  VMENU01   -----------------------*/
@media screen and (min-width:1180px) {
	.vmenu01.fx_3 {
		position: relative;
		top: -75px;
		z-index: 900;
	}

	.vmenu01.fx_3 ul.side-nav {
		padding: 0 1.5625em;
	}
}

.vmenu01 > h1 {
	background-color: rgba(49,70,144,.8);
	color: white;
	border-top: 1px solid rgb(119, 124, 145);
	display: block;
	text-align: center;
	margin-bottom: 7px;
	height: 35px;
	line-height: 35px;
	width: 300px;
	/*left: -25px;*/
	position: relative;
	text-transform: uppercase;
	font-size: 14px;
}

.mbar {
	background-color: rgba(0,0,0,0.03);
	position: absolute;
	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 {
	color: var(--gray4);
	border-bottom: 1px solid transparent;
	border-left: none;
	font-size: 18px;
	padding: 10px 0 5px;
}

.vmenu01 a:hover,
.vmenu01 a.selected{ 
	color: var(--color_ad); 
	border-color: var(--color_ad); 
}

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


/*-----------------------------------------------------------  BULETTINS   ---------------------*/


/*----- NAVIGATION   ---------*/
#archives .section_navigation a {
	border-bottom: 1px solid var(--color_a);
	color: var(--color_a) !important;
	background: transparent;
}

#archives .section_navigation a:hover {
	color: var(--color_al);
	border-bottom-color: var(--color_al);
}

 #archives .section_navigation a.selected { background: var(--color_a); color: white !important; }

a.latest_bulletin.button {
    background: var(--color_p);
    color: #FFF;
}
a.latest_bulletin.button:hover {
    background: var(--color_pd);
    color: #FFF;
}

/*-----  MONTH   ------------*/
@media screen and (min-width:645px) { 
	.month {
		margin: 0 15px 15px 0;
		float: left;
	}
}

#archives { font-family: "Work Sans", sans-serif; }

@media screen and (max-width:644px) { .month { margin: 15px auto; } }

#archives .fx_4 {
	text-align: center;
    float: left;
    background: transparent;
}

#archives .fx_4 h3 {
	background: var(--color_p);
    text-align: center;
    font-weight: normal;
    padding: 0px 10px;
    overflow: hidden;
    color: white;
    font-size: 16px;
    margin: 0;
	line-height: 34px;
}

#archives .fx_4 a {
	color: var(--gray5);
    display: block;
    list-style: none;
    position: relative;
    margin: 0;
    font-size: 14px;
    border-bottom: dashed 1px var(--gray3);
    padding: 5px;
}

#archives .fx_4 a:hover {
	border-color: var(--color_p);
	background: var(--gray1);
    color: var(--color_p) !important;
}

#archives .fx_4 ul li::before {
	content: none;
}

#archives .fx_4 ul li {
	list-style: none;
    background: none !important;
	padding: 0;
    margin: 0 !important;
}

#archives .fx_4 ul {
	margin-left: 0;
}  

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

.mainline {
	background: var(--color_p);
	color: #FFFFFF;
	text-align: center;
	width: 100%;
	border-radius: 7px;
}

/*.mainline span {
	background: url(../images/phone-icon.png) no-repeat center left;
	padding: 10px 10px 10px 46px;
}*/

.mainline {
	background: var(--color_p);
    color: #FFFFFF;
    text-align: center;
    width: 100%;
    border-radius: 7px;
    padding: 5px 20px;
}
        

.js_fixPosition {
	position: fixed;
	top: 5px;
	left: calc(50% - 138px);
}
        
        

/*-----------------------------------------------------------  DEFAULT TABLE   ---------------------*/
table.default caption {
    background: var(--color_p);
    color: #fff;
    margin-bottom: 5PX;
}

/*-----------------------------------------------------------  TODAY'S READINGS   ---------------------*/
#readings h2,
#readings_spanish .rsslayer h2 {
  background: var(--color_p);
  color: white;

}

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

.rsscontent a {
    font-style: italic;
    color: var(--color_pd);
	font-weight: bold;
}
.rsscontent a:hover {
    color: var(--color_pl);
}