/*

Theme Name: The Grand Theme
Author: Rachel Lenung

*/

*{
	margin: 0;
}

/*Global*/
html, body {
    display: flex;
	flex-direction: column;
	flex-wrap:nowrap;
	width:100%;
	/*min-width:600px;*/
	margin:0px;
	padding:0px;
	
}

body{
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.page-body{
	display:flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 5%;
	gap:25px;
	color:#2C2C2C;
	
}

/* Fading effect */
body.fade-in {
  opacity: 1;
}

body.fade-out {
  opacity: 0;
}
  

h1{
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 300;
	font-size: clamp(28px, 4.5vw, 36px);
}

h2{
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 300;
	padding: 10px 0px 10px 0px;
	font-size: clamp(16px, 2vw, 18px);
}

h3{
	font-size: 1.2em;
	font-weight: 100;
	padding-bottom: 12px;
}

p{
	font-family: Outfit;
	font-weight: 300;
	font-size: clamp(14px, 2vw, 16px);
	padding:8px 0px 8px 0px;
	line-height: 1.5;
}

a {
  color: #7a521c; /* Inherit the color from the parent element */
  text-decoration: none; /* Remove the underline */
}


.excerpt h2{
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 300;
	padding: 20px 0px 10px 0px;
	font-size: clamp(16px, 2vw, 18px);
}

.excerpt p{
	font-family: "Outfit";
	font-weight: 180;
	font-size: clamp(14px, 2vw, 16px);
	padding:8px 0px 8px 0px;
	line-height: 1.5;
}



.nav-links {
    margin: 1em 0;
    display: flex;
	flex-direction: row;
    justify-content: space-between;
	width:100%;
	max-width: 825px;
    font-size: 1.2em;
}

.nav-previous, .nav-next {
    font-family: "playfair display";
	font-size: clamp(16px, 2vw, 18px);
	text-decoration: none;
    color: black;
}

.nav-previous:hover, .nav-next:hover {
	color: #996830;
}

.nav-links a{
	gap: 8px;
	display: inline-flex;
	align-items: center;
}

/* Arrow shapes */
.arrow {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.arrow-left {
  transform: rotate(-135deg);
}

.arrow-right {
  transform: rotate(45deg);
}

.wp-block-button .wp-block-button__link {
  background-color: #996830; /* gold-brown */
  color: #fff;
  padding: 0.75em 1.5em;
  font-family: "outfit";
  font-size: 0.85rem;
  font-weight: 300;
  text-decoration: none;
  text-transform: uppercase;
  border: none;
  border-radius: 0px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Hover effect */
.wp-block-button .wp-block-button__link:hover {
  background-color: #7a521c; /* darker shade */
  transform: scale(1.05);
}

/* Outline style (if used in editor) */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: #996830;
  border: 2px solid #996830;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: #996830;
  color: white;
}

.wp-block-quote {
  border-left: 3px solid #996830;
  padding-left: 20px;
  margin: 0.5em 0;
  font-style: italic;
  
  padding: 0px 20px;
  position: relative;
}

.wp-block-quote p{
	color: #996830;
}

.wp-block-quote cite {
  display: block;
  font-weight: bold;
  margin-top: 1em;
  color: #996830;
}

.wp-block-file{
	width:100%;
	justify-content: center;
}

.wp-block-file__button{
	background-color: #996830; /* gold-brown */
  color: #fff;
  padding: 0.75em 1.5em;
  font-family: "outfit";
  font-size: 0.85rem;
  font-weight: 300;
  text-decoration: none;
  text-transform: uppercase;
  border: none;
  border-radius: 0px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}

.wp-block-file a{
  font-family: "outfit";
  font-size: 1rem;
  text-decoration: none;
}

.wp-block-list,
.wp-block-list ul,
.wp-block-list ol {
  font-family: 'outfit';
  font-weight: 150;
}


/* Reusable custom style for Group block */
.wp-block-group.is-style-framed-box {
  border: 1px solid #996830;
  width:100%;
  min-width: 50px;
  border-radius: 0px;
  padding: 2rem;
  gap:25px 0px;
    display: flex;
}

.custom-group-link-wrapper {
    display: block;
	width: 100%;
}

.custom-group-link-wrapper:hover {
    transform: scale(1.02);
	box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}



.wp-block-group.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.button-row{
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: center;
    gap: 20px;
    white-space: nowrap;
	margin-top:25px;
}

.button-row a{
	width:100%;
}

.box-column{
	display: flex;
	flex-direction: column;
	gap: 25px;
	margin-top:25px;
	align-items: center;
	width:100%;
}


/* Responsive adjustments */
@media screen and (max-width: 781px) {
  .wp-block-group.is-style-framed-box {
    padding: 1rem;
  }

  .wp-block-group.is-style-two-column-box {
    flex-direction: column;
    align-items: center;
  }

  .button-row{
    flex-direction: column;
    align-items: center;
    
  }
}




/*Header*/
header{
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	background-position: center center;
	justify-content: center;
	align-items: flex-end;
	padding: 15px auto 15px auto;
}

.header{
	color: #E4D8D8;
}

.event-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
	background-color: rgba(153, 104, 48, 0.95); /* gold-brown with opacity */
    border-bottom: 0px solid #ccc;
    padding: 30px;
    z-index: 9999;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	color: white;
	animation: fadeIn 0.5s ease-in-out;
}

.event-banner-content h2 {
    margin: 0;
    font-size: 1.5rem;
}

.event-banner-content p {
    padding: 5px 0px 5px 0px;
    font-size: 1rem;
	color:white;
}

.event-banner-button{
	background-color: #ffffff; /* gold-brown */
  color: #996830;
  padding: 0.75em 1.5em;
  font-family: "outfit";
  font-size: 0.75rem;
  font-weight: 300;
  text-decoration: none;
  text-transform: uppercase;
  border: none;
  border-radius: 0px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin-top:10px;
}

.event-banner-button:hover {
  background-color: #fff5e8; /* darker shade */
  transform: scale(1.05);
}

.event-banner-close {
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 24px;
    cursor: pointer;
}


.logo-box{
	display:flex;
	flex-wrap: nowrap;
	gap:2vh;
	align-items: center;
	padding:10px 10px 10px 10px;
	
}

p.header{
	font-family: "Playfair Display";
    font-size: clamp(16px, 4vw, 21px);
    padding: 0 !important;
	margin: 0 !important;
    overflow:hidden;
}

.header.bold{
	font-family: "Playfair Display";
    font-size: clamp(21px, 5vw, 26px);
	font-weight: 600;
    white-space: nowrap;
}

.header.light{
    font-family: "Outfit";
    font-size: clamp(14px, 5vw, 9px);
    font-weight: 200;
    padding-bottom: 15px;
}


.cross{
	height: 100%;
	width: auto;
}

#logo{
	padding:auto;
    height: clamp(70px, 2rem, 100px);
}

nav {
	background-color: transparent;
    padding: 0.1rem;
    position:relative;
    vertical-align: bottom;
	align-content: right;
	font-family: Outfit;
	font-weight: 300;
}
@media (min-width: 782px) {

/* Top-level menu */
.main-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  font-weight: 300;
}

/* Menu items */
.main-nav > li {
  position: relative;
}

.main-nav a {
  text-decoration: none;
  color: white;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: row;
  white-space: nowrap;

}

.main-nav > li > a:hover {
  color: #C4A386;
  transform: scale(1.03);
  font-weight: 400;
  transition: color 0.3s ease, transform 0.2s ease;
}

/* Sub-menu (dropdown) */
.sub-menu {
  display: none;
  position: absolute;
  align-content: center;
  justify-content: center;
  align-items: center;
  top: 100%;
  left: 0px;
  list-style: none;
  background: #f1f1f1;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  min-width: 170px;
  z-index: 2000;
  padding: 0;
  animation: fadeIn 0.2s ease-in-out;
}

.sub-menu li a {
  padding: 0.8rem 1rem;
  color: #2C2C2C;
  white-space: nowrap;
  text-align: center;
}

.sub-menu li a:hover {
  background-color: #ddd;
  transition: background-color 0.3s ease;
}

/* Show dropdown on hover */
.main-nav > li:hover > .sub-menu {
  display: block;
}

/* ----- Desktop styles ----- */
.nav-desktop {
  display: block;
}
}


.hamburger,
.mobile-menu {
  display: none;
}

/* ----- Hamburger icon (mobile only) ----- */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 30px;
  height: 25px;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
  position: relative;
  padding:20px;
}

.hamburger span {
  display: block;
  height: 3px;
  background: #E4D8D8;
  border-radius: 0px;
  transition: 0.3s ease;
}

/* Hamburger animation (active) */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(7.5px, 5px);
  background: #45272C;
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7.5px, -5px);
  background: #45272C;
}

/* ----- Fullscreen mobile menu ----- */
.mobile-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.95);
  height: 100vh;
  width: 100vw;
  padding-top: 5rem;
  z-index: 1000;
  align-items: center;
  justify-content: flex-start;
  align-content: flex-end;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-in-out;
}

.mobile-menu.open {
  display: flex;
}



/* Mobile nav style */
.mobile-nav {
  display: flex;
  flex-direction: column;
  max-width: 250px;
  width:80%;
  /*gap: 1.5rem;*/
  list-style: none;
  padding: auto;
  margin-top: 2rem;
  text-align: center;
}

.mobile-nav li {
  position: relative;
}

.mobile-nav .sub-menu {
  display: none;
  flex-direction: column;
  margin-top: 0.8rem;
}

.mobile-nav li.open > .sub-menu {
  display: flex;
}

/* Dropdown caret */
.mobile-nav li.menu-item-has-children > a::after {
  content: none;
}

.submenu-toggle {
  background: none;
  border: none;
  font-size: 1.2rem;
  padding-left: 0.2rem;
  cursor: pointer;
  color: #45272C;
  user-select: none;
  vertical-align: top;
}

/* ----- Responsive Breakpoint ----- */
@media (max-width: 781px) {
  .nav-desktop {
    display: none;
  }

  .hamburger {
    display: flex;
  }


  .mobile-nav a {
    font-size: 1.2rem;
    padding: 1rem;
  }

  .mobile-nav li.open > .sub-menu {
    background: transparent;
  }

  .main-nav {
    flex-direction: column;
	width: 250px;
	padding-left:0px;
	
  }

  .main-nav > li{
	text-align: left;
	border-bottom: 1px solid #ddd;
	padding: 0.8rem 0;
	
  }

  .main-nav > li > a {
	color:#45272C;
	padding: 1rem 1rem;
	font-size: 1.2rem;
	font-weight: 300;
	white-space: nowrap;
	
  }


	.main-nav > li > a:hover {
	font-weight: 450;
	color: #996830;
	}

  .main-nav > li {
    width: 100%;
	
  }

  .sub-menu {
	position: static;
    box-shadow: none;
	background-color: transparent;
  align-content: center;
  justify-content: center;
  align-items: flex-start;
  list-style: none;
  background: transparent;
  padding-left:20px;
  width:auto;
  
	}

	.sub-menu li{
		text-align: left;
	}

	.sub-menu li a {
	font-size: 1rem;
  padding: 0.8rem 1rem;
  color: #453e3f;
  white-space: nowrap;
  text-align: left;
  line-height: 3rem;
  list-style: none;
	}

	.sub-menu li a:hover {
  background-color: transparent;
  font-weight:400;
  color: #996830;
	}

	.main-nav > li:focus > .sub-menu {
  display: block;
  transition: all 0.3s ease;
	}

}


/*Footer*/

.coat-of-arm {
	width: 200px;
	height: auto;
}

.coat-of-arm img {
	width: 100%;
	height: auto;
}

.instagram{
	width: 4vw;
	height: auto;
}

.facebook{
	width: 4vw;
	height: auto;
}

.youtube{
	width: 4vw;
	height: auto;
}

.schedule-title{
	font-size: 1.1rem;
	font-style: italic;
	margin: auto 0px;
}

.horizontal-bar {
  width: 50px;
  height: 1px;
  background-color: white;
	margin: auto 0px;
}

.schedule-bar{
	display: flex; 
	color: #E4D8D8;
	background: #231112;
	width:100%;
	justify-content: center;
	flex-wrap: wrap;
}

.schedule-bar li{
	white-space: nowrap;
	font-size: 0.85em;
    list-style-type: none;
}


.schedule-box{
	display: flex;
align-content: flex-start;	
	height:50px;
}

.mass-time{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	max-width:90%;
	justify-content: center;
	align-content: flex-start;
	gap:20px;
	padding:20px;
}

.schedule-box ul{
	margin: auto 10px auto -30px;
	display: flex;
	flex-direction: column;
	text-align: left;
	
}

.info-box{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-wrap: nowrap;
	align-items: flex-start;
	background-color: #45272C;
	gap:20px;
	padding:px 0px;
}

.footer-content{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width:100%;
	flex-wrap: wrap;
	gap:30px;
}

.box-1 {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-grow: 2;
	max-width: 500px;
	gap:10px;
}

.box-2, .box-3 {
	display: flex;
	flex-grow: 1;
	flex-direction:column;
	max-width: 300px;
	gap:5px;
}

.box-4 {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	max-width: 300px;
	gap:0px;
}



.page-bottom h2{
	padding-top:0px;
}


.page-bottom{
	display:flex;
	flex-direction:column;
	justify-content: center;
	color: #E4D8D8;
	background:#45272C;
	padding: 20px 5% 30px 5%;
	gap:20px;
	width:90%;
	
}



footer p, footer li {
	font-family: "Outfit";
	font-weight: 250;
	color: #FFFFFF;
	font-size: clamp(0.85rem, 1vw, 0.85rem);
	padding:0px;
}


footer {
	font-family: "Playfair Display";
	width:100%;
	display:flex;
	flex-direction:column;
	align-items: center;
	color: #E4D8D8;
	font-weight: 300;
}


.policies-box{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 20px;
	width: 100%;
	max-width: 825px;
	padding: 0px 0px;
}

.horizontal-bar-footer{
	  width: auto;
  height: 1px;
  background-color: #FFFFFF;
}

.disclaimer-ssm{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	align-items: flex-start;
	gap:30px;
	
}

.follow-box {
    display: flex; /* Enable flexbox layout */
	justify-content: flex-end;
    align-items: center; /* Align items vertically in the center */
    gap: 10px; /* Add spacing between "FOLLOW US" and the icons */
		margin: 0px 0px 0px 0px;
}

.follow-box p {
    margin: 0; /* Remove default margins */
    font-weight: bold; /* Optional: Make the text bold */
	white-space:nowrap; 
	
}

.social-media {
    display: flex; /* Flexbox for the icons */
    gap: 10px; /* Spacing between the icons */
}

.social-media img {
    width: 24px; /* Adjust icon size */
    height: 24px; /* Keep aspect ratio */
	margin: 0px 0px -3px 0px;
}

.social-media img:hover {
	filter: brightness(0.8); /* Darken effect on hover */
	transform: scale(1.10); /* Slightly enlarge on hover */
	transition: filter 0.3s ease transform 0.2s ease; /* Smooth transition */
}

footer a{
	text-decoration: none;
	color: #C4A386;
}

footer a:hover{
	color: white;
	transform: scale(1.05);
  transition: color 0.3s ease, transform 0.2s ease;
}

/*MAIN*/

main{
	flex:1;
}


/*Homepage*/

.tagline{
	font-family: "Playfair Display";
	font-style: italic;
	font-weight: 100;
	max-width:900px;
}

.tagline-author{
	font-family: "Playfair Display";
	font-style: normal;
	text-align: right;
	font-weight: 500;
	padding:0;
}

.video-banner {
    position: relative; /* Allow absolute positioning for overlay */
    width: 100%;
	height: auto;
	flex:1;
    overflow: hidden; /* Ensure content stays within bounds */
	display: flex; /* Use flexbox for centering */
	justify-content: center; /* Center content horizontally */
	align-items: center; /* Center content vertically */

}

.video-banner video {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensure the video covers the entire container */
	display: block;
	object-position: center center;
}

.video-banner img{
		display: none;
	}


.overlay-text {
    position: absolute; /* Position it on top of the video */
    bottom:0;
    left: 50%; /* Horizontally center the text box */
    transform: translateX(-50%); /* Adjust for perfect centering */
    padding: 3% 10%;
    background-color: #99683060; /* Semi-transparent background */
    color: white; /* Text color */
    font-size: clamp(1.3rem, 2.5vw, 2rem); /* Adjust font size */
    border-radius: 0 px; /* Optional: Rounded corners */
    width: 100%; /* Width of the text box (adjust as needed) */
    box-sizing: border-box; /* Ensure padding is included in the width */
	height: auto;
	display:flex;
	flex-direction: column;
	align-content: center;
	gap:20px
}



/*About us*/


.paragraph{
	max-width: 400px;
	flex-grow:1;
	padding: auto;
}

.paragraph h1{
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 300;
	font-size: clamp(28px, 4.5vw, 36px);
}

.page-title{
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.category-title {
	display: flex;
	margin: 5px 0px 15px 0px;
}

.category-title a{
	color: #996830;
	font-family: Outfit;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 1px;
    text-transform: uppercase;
    
}

.category-title h6{
	color: #996830;
	font-family: Outfit;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 1px;
    text-transform: uppercase;
    
}

.horizontal-bar-br {
  width: 50px;
  height: 1px;
  background-color: #996830;
	margin: auto 10px 8px 0px;
}


.paragraph-and-photo-box{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items:flex-start;
	min-width:60%;
	gap: 25px 50px;
}

	.paragraph-only-box{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	width:100%;
	max-width:825px;
    gap:0px;
}

.paragraph-only-box img{
	width:100%;
	height: auto;
}

.photo-box{
	max-width: 400px;
	display: flex;
	flex-direction: column;
	flex-grow:1;
    align-items: center;
    gap: 40px;
}

.photo-box img{
	max-width: 400px;
	width:100%;
	height: auto;
}

.photo-box a:hover img {
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transform: scale(1.02);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.directions-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width:900px;
	gap:10px;
	padding:10px;
}

.direction-boxes{
	flex-grow:1;
	flex-basis:25%;
	max-width:280px;
	min-width:250px;
	height: 10rem;
	border: 1px;
	border-color: #996830;
	border-style: solid;
	background-color: white;
	display: flex;
  flex-direction: column;
  justify-content: space-between;
	gap:0px;
	padding:25px;
	
}

.direction-boxes p{
	padding:3px 0px 3px 0px !important;
}

.button-right{
	width:100%;
	display:flex;
	justify-content: flex-end;
}

.icon img{

	width: 50px;
	height: 50px;
}

.words h2{
	font-family: "Playfair Display";
	font-size: 24px;
	font-style: normal;
	font-weight: 300;

	
}

/*What we believe*/

.box-container{
	display: flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width:100%;
    max-width: 825px;
    margin-top:25px;
}

.question-boxes{
	display:flex;
	flex-direction:column;
	height: auto;
	width:80%;
	border: 1px;
	border-color: #996830;
	border-style: solid;
	margin: 0px;
	padding:30px;
	gap:10px;
}


/*The Ordinariate*/
.quote{
	border-left:1.5px solid #996830;
	padding:0px 15px 0px 15px;
	margin: 15px 0px 15px 0px;
	
}

.quote p{
	color: #996830;
}

/*The Clergy*/

.text-image-boxes{
	display: flex;
	flex-direction: row;
	justify-content:center;
	align-items: flex-start;
	height: auto;
	max-width: 825px;
	border: 1px;
	border-color: #996830;
	border-style: solid;
	margin:0px;
	padding: 30px;
	gap:30px;
	white-space: wrap; 
	
}



.text-image-boxes a{
        display: flex;    
        flex-grow: 1;     /* So <img> fills <a> */
  min-width: 150px;
  max-width: 200px;
  width:100%;
  line-height: 0;
  padding: 0;
  margin: 0;
  border: none;
}

.text-image-boxes img {
  display: block;
  min-width: 150px;
  max-width: 200px;
  width: 100%;               /* Fill the <a> exactly */
  height: auto;
  object-fit: contain;
}

.text-image-boxes a:hover img {
   box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transform: scale(1.02);
  filter: brightness(0.5); /* darken effect */
  transition: 
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease;
}

@media screen and (max-width:781px) {
	.text-image-boxes{
		flex-direction: column;
		align-items: center;
	}
}


.text-description{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap:0px;
}

.text-description h1, p{
	color:black;
}

.newsletters-boxes{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width:100%;
	max-width: 825px;
	height:auto;
	border: 1px;
	border-color: #996830;
	border-style: solid;
	margin:0px;
	padding: 30px;
	white-space: wrap;
}


.person-description h2{
	font-family: "Playfair Display";
	font-size: clamp(16px, 2vw, 18px);
	font-style: normal;
	font-weight: 300;
}




/*USEFUL LINKS*/

.link-boxes{
	display: flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content:center;
	align-items: flex-start;
	height: auto;
	width: 100%;
	max-width: 80%;
	min-width:300px;
	border: 1px;
	border-color: #996830;
	border-style: solid;
	margin: auto;
	padding: 30px;
	gap:30px;
	
}


.link-boxes img{
	width: 30%;
	flex-grow:1;
	max-width:120px;
	object-fit: contain;
	
}


/*MASS TIMES*/

.special-boxes{
	display:flex;
	flex-direction:column;
	align-items: center;
	height: auto;
	max-width: 800px;
	border: 1px;
	border-color: #996830;
	background-color: #996830;
	border-style: solid;
	margin: 10px 0px 10px 0px;
	padding:15px;
	gap:10px;
	color:white;
}


.special-boxes img{
	max-width:500px;
	width:100%;
}

/*HOLY DAYS*/

.boxes-with-image{
	flex-grow:1;
	flex-basis:25%;
	max-width:280px;
	min-width:200px;
	height: 10rem;
	border: 1px;
	border-color: #996830;
	border-style: solid;
	color:white;
	display: flex;
  flex-direction: column;
	justify-content: flex-end;
	gap:0px;
	padding:25px;
	text-shadow: 3px 2px 3px rgba(0, 0, 0, 0.9);
}

/*CONTACT*/

.contact-detail {
	display:flex;
	align-content: flex-start;
	gap:15px;
	
}

.contact-detail img{
	max-width:30px; min-width:30px;
}




/*MEDIA QUERIES*/

@media screen and (max-width:781px) {
	
	/*drop menu*/
	
	html, body {
		width:100%;
		
	}
	
	header{
		flex-wrap:nowrap;
		justify-content:space-between;
		align-items: center;
		gap:20px;
	}
	
	
	.header p, .header .bold {
    white-space: wrap;
	}
	
	
	/*FOOTER*/
	
	.schedule-bar{
		align-items: flex-start;
		justify-content: space-around;
	flex-wrap: wrap;
}
	
	.mass-time {
		display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	max-width:90%;
	align-items:flex-start;
	gap:20px;
	padding:20px;
	}
	
	.horizontal-bar {
		display: none;
	}
	
	.schedule-box{
		width:180px;
	}
	
	
	
	/*MAIN*/
	
	
	.video-banner video{
		display:none;
	}
	
	.video-banner img{
		display: block;
		width:100%

	}
	
	.paragraph-and-photo-box{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items:flex-start;
	min-width:60%;
	gap: 25px 50px;
	}
	
    .paragraph-only-box{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width:100%;
        max-width:400px;
    }

	
	.paragraph{
		width:100%
	}
	
	.photo-box{
		width:100%;
	}
	
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}