/* CSS Document */


/*
REFERENCE COLOURS
BROWN: #925f34
GREEN1: #788967 (Darkest)
GREEN2: #808f70
GREEN3: #95a085
GREEN4: #adb49e (lightest)
GREY - #34333A (Font Colour)
WHITE: #fffdf7 (Off White Background)

RED: #E63124
YELLOW: #EACB79
*/



/*  GUIDE LINES  */
.showborderred    {border: 1px solid red; }
.showborderaqua   {border: 4px solid aqua; }
.showborderblack  {border: 1px solid black; }
.showborderpurple {border: 4px solid purple; }
.showbordergreen  {border: 1px solid green; }
.showborderorange {border: 1px solid orange; }
.showborderpink   {border: 1px solid pink; }
.showborderyellow {border: 1px solid yellow;}



/* Encode Sans Weights
300 Light
400	Normal
500	Medium
600	Semi Bold
700	Bold
*/


.accordian  {border: 1px solid green; }




/* ====== RESET - Initial ====== */
*, *::before, *::after { padding: 0; margin: 0; font: inherit; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #fff; min-height: 100vh; overflow-x: hidden; }
ol, ul { list-style: none; }
a { text-decoration: none; }

/* ====== RESET - Responsive Images ====== */
img, picture, video { display: block; width: 100%; height: auto; }






/* ====== LINK STYLES ====== */
/* unvisited link */
a:link { color: #925f34; font-weight: 600; }
/* visited link */
a:visited { color: #925f34; font-weight: 600; }
/* mouse over link */
a:hover { color: #788967; font-weight: 600; }
/* selected link */
a:active { color: #925f34; font-weight: 600; }




.noshow { display: none; }
.firstnamefield { display: none; }


.navigation a:link { color: #34333a; font-weight: 400; }
.navigation a:visited { color: #34333a; font-weight: 400; }
.navigation a:hover { color: #fff; font-weight: 400; }
.navigation a:active { color: #34333a; font-weight: 400; }


.links-column a:link { color: #fff; font-weight: 400; }
.links-column a:visited { color: #fff; font-weight: 400; }
.links-column a:hover { color: #adb49e; font-weight: 400; }
.links-column a:active { color: #adb49e; font-weight: 400; }

.links-column h2 { color: #adb49e; }




ul { margin-left: 40px; }

li { position: relative;
	margin-top: 10px;
	margin-bottom: 10px;
    line-height: 1.4; }

li:before {
    content: "";
    position: absolute;
    top: 1px; 
    left: -24px;
    width: 16px;
    height: 18px;
    background-image: url(../images/bullet-leaf.png);
    background-position: center;
    background-repeat: no-repeat;
	background-size: contain; }






/* ====== FONT STYLES ====== */
body { 
	font-family: "Encode Sans";
	color: #34333A;
	font-size: 100%;
	font-weight: 300;
	font-size: 14px; }

p { 	
	font-family: "Encode Sans";
	color: #34333A;
	font-size: 100%;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.75em; 
	margin-bottom: 12px; }


h1 { font-family: "EB Garamond"; font-size: 40px; color: #925f34; font-weight: 300; margin-bottom: 16px; /*text-transform: uppercase;*/ }
h2 { font-family: "Encode Sans"; font-size: 22px; color: #333; font-weight: 300; margin-bottom: 16px; /*text-transform: uppercase;*/ }
h3 { font-family: 'Encode Sans'; font-size: 18px; color: #333; font-weight: 300; margin-bottom: 12px; }
h4 { font-family: 'Encode Sans'; font-size: 16px; color: #333; font-weight: 600; margin-bottom: 10px; }
h5 { font-family: "EB Garamond"; font-size: 16px; color: #fff; font-weight: 300; margin-bottom: 0; text-transform: uppercase; letter-spacing: 2px; }
h6 { font-family: "EB Garamond"; font-size: 24px; color: #925f34; font-weight: 300; margin-bottom: 16px;  }


.published-date { font-weight: 500; }
.published-date-page { font-weight: 500; margin-bottom: 28px; }
.newsimage { margin-bottom: 10px; }
.boldtext { font-weight: 600; }





/* ====== STRUCTURAL SELECTORS ====== */
header    { width: 100%; }
nav       { width: 100%; margin-bottom: 0px; z-index: 10; }
main      { width: 100%; display: flow-root; }
footer    { width: 100%; background: #925f34; padding: 40px 0 40px 0; }
section   { width: 100%; margin: 0 ; }
container { display: block; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
row       { display: flex; width: 100%; min-height: 260px; }



.mt-0   {margin-top: 0px!important}
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px!important; }
.mt-60 { margin-top: 60px; }

.mb-20 { margin-bottom: 20px; }
.mb-40 { margin-bottom: 40px; }
.mb-60 { margin-bottom: 60px; }
.mb-80 { margin-bottom: 80px; }
.mb-100 { margin-bottom: 100px; }






/* ====== PAGE HEADER ====== */

.logo-header {
	margin-inline: auto;
	width: 100%;
	max-width: 400px;
	padding: 10px 20px; }




/* ====== HERO BANNERS ====== */

.banner-backgroundimage-home {
	width: 100%;
    max-width: 2560px;
    margin: auto;
    background-image: url("../images/banner_backgroundhome02.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }

.banner-backgroundimage-chapel {
	width: 100%;
    max-width: 2560px;
    margin: auto;
    background-image: url("../images/banner_backgroundchapel02.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }

.banner-backgroundimage-contact {
	width: 100%;
    max-width: 2560px;
    margin: auto;
    background-image: url("../images/banner_backgroundcontact02.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }

.banner-backgroundimage-environment {
	width: 100%;
    max-width: 2560px;
    margin: auto;
    background-image: url("../images/banner_backgroundenvironment.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }

.banner-backgroundimage-memorial {
	width: 100%;
    max-width: 2560px;
    margin: auto;
    background-image: url("../images/banner_backgroundmemorial.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }

.banner-backgroundimage-personal {
	width: 100%;
    max-width: 2560px;
    margin: auto;
    background-image: url("../images/banner_backgroundpersonal.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }

.banner-backgroundimage-service {
	width: 100%;
    max-width: 2560px;
    margin: auto;
    background-image: url("../images/banner_backgroundservice.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }

.banner-backgroundimage-company {
	width: 100%;
    max-width: 2560px;
    margin: auto;
    background-image: url("../images/banner_backgroundcompany.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }


.banner-backgroundimage-news {
	width: 100%;
    max-width: 2560px;
    margin: auto;
    background-image: url("../images/banner_backgroundnews.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }





/* ====== NAVIGATION / MENU ====== */



.body-text {  }

.page-content {  }

.text-and-noimage {  }



.textleft { text-align: left; }
.textright { text-align: right; }
.textcentre { text-align: center; }

.textblock-full { width: 100%; }

.strong { 	font-weight: 600; }
.italic { font-style: italic; }


.text-and-image {
	display: flex;
	flex-direction: column; }
@media (min-width: 700px) {
.text-and-image { display: flow-root; }
}

.threequarter-textbox { 
	display: block; }

.onequarter-imagebox {
    float: none;
    margin: -20px auto 0 auto;
	max-width: 500px; }
@media (min-width: 700px) {
.onequarter-imagebox {
	float: right;
	width: 100%;
    max-width: 400px;
    margin-top: -200px;
	shape-outside: border-box; }
}

.onequarter-imagebox img {
	border-radius: 50%;
	border: 6px solid white; }





.onequarter-imagebox-logo {
    float: none;
    margin: -20px auto 0 auto;
	max-width: 500px; }
@media (min-width: 700px) {
.onequarter-imagebox-logo {
	float: right;
	width: 100%;
    max-width: 400px;
    margin-top: -200px;
	shape-outside: border-box; }
}

.onequarter-imagebox-logo img {
	border-radius: 50%; }













/* ====== STRUCTURE & LAYOUT ====== */
.columns-2 { display: flex; flex-wrap: wrap; justify-content: center; }
@media (min-width: 840px) { .columns-2 { flex-wrap: nowrap; justify-content: space-between; } }

.columns-2-reverse { display: flex; flex-wrap: wrap-reverse; justify-content: space-between; }
@media (min-width: 840px) { .columns-2-reverse { flex-wrap: nowrap; } }


.textblock-left { width: 100%; margin: 0; }
@media (min-width: 840px) { .textblock-left { max-width: 560px; margin: 0 20px 0 0; } }

.imageblock-right { width: 100%; height: auto; margin-bottom: 20px; }
@media (min-width: 840px) { .imageblock-right { max-width: 560px; margin: 0 0 0 20px; } }


.imageblock-left { width: 100%; height: auto; margin-bottom: 20px; }
@media (min-width: 840px) { .imageblock-left { max-width: 560px; margin: 0 20px 0 0; } }

.textblock-right { width: 100%; margin: 0; }
@media (min-width: 840px) { .textblock-right { max-width: 560px; margin: 0 0 0 20px; } }



.imageblock-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px; }

.imageblock-item { 
	display: block;
	border-radius: 6px;
    overflow: hidden; }



.imageblock-container-fourcircles {
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));  }
@media (min-width: 500px) { .imageblock-container-fourcircles { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); } }
@media (min-width: 760px) { .imageblock-container-fourcircles { grid-template-columns: repeat(auto-fit, minmax(234px, 1fr)); } }
@media (min-width: 820px) { .imageblock-container-fourcircles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }


.imageblock-item-fourcircles { 
	display: block;
	border-radius: 50%;
    overflow: hidden; }





.newsitem {
    border-radius: 4px;
    border: 1px solid #11344833;
    padding: 8px; }
	








/* -------- MEMORIALS PAGE ----------- */

.memorial-description {
	width: 100%;
	padding-inline: 20px;
	display: flow-root; }
@media screen and (min-width: 640px) { .memorial-description { padding-inline: 40px; } }
@media screen and (min-width: 840px) { .memorial-description { padding-inline: 60px; } }

.memorial-img {
	width: 160px;
	border-radius: 50%;
	float: right;
	shape-outside: circle(50%);
	margin-left: 20px;
    margin-bottom: 40px;
    margin-top: 0; }
@media screen and (min-width: 640px) { .memorial-img { width: 210px; margin-bottom: 20px; margin-top: 48px;} }
@media screen and (min-width: 740px) {  }
@media screen and (min-width: 840px) {  }
@media screen and (min-width: 920px) {  }











/* -------- CONTACT PAGE ----------- */

.columns-2-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; }
@media screen and (min-width: 1200px) { .columns-2-contact { justify-content: space-between; } }

.box-contentleft-contact { 
	width: 100%;
	max-width: 578px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 40px;
	padding: 0;
	z-index: 10; }
@media screen and (min-width: 1200px) { .box-contentleft-contact { margin-left: 0; margin-right: 0; padding: 0 40px 0 0; } }

.box-contentright-contact { 
	width: 100%;
	max-width: 578px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 40px;
	z-index: 10; }
@media screen and (min-width: 660px) { .box-contentright-contact { margin-left: 0; margin-right: 0; } }

.map-responsive {
    overflow: hidden;
    padding-bottom: 75%;
    position: relative;
    height: 0;
	border: 1px solid #bfbcb3;
	border-radius: 6px; }

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute; }








/* -------- FEES & DOWNLOADS PAGE ----------- */

.table-downloads {
	width: 100%;
	max-width: 760px; }

.download-btn {
    background-color: #925f34;
    border: 0px solid #925f34;
    border-radius: 16px;
    padding: 0px 20px 0px 20px;
    margin: 10px;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    transition-duration: 0.3s;
    cursor: pointer;
    display: inline-block;
    box-shadow: 1px 2px 6px #888888; }

.download-btn:hover {
    background-color: #adb49e;
	color: #34333A; }








/* -------- ACCORDIAN ----------- */

.section-accordian {
	display: flex;
	flex-direction: column;
	align-items: center; }

.faq {
	width: 100%;
	max-width: 1120px;
	margin-top: 18px;
	padding-bottom: 0;
	border-bottom: 1px solid #838383;
	cursor: pointer;
	padding-right: 20px; }

.question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative; 
	/*padding-right: 40px;*/  }

.question h3 { }

.answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 1s ease; }

.answer p { padding-top: 1rem; line-height: 1.6; }

.faq.active .answer {
	max-height: 5000px;
	animation: fade 1s ease-in-out; }

.faq.active svg { transform: rotate(180deg); }

svg { transition: transform .5s ease-in; /*position: absolute; right: 0;*/ }


@keyframes fade {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0px); }
}


.answer-short {
	max-height: 0;
	overflow: hidden;
	transition: max-height 1.5s ease; }

.answer-short p { padding-top: 1rem; line-height: 1.6; }

.faq.active .answer-short {
	max-height: 400px;
	animation: fade 1s ease-in-out; }

.answer-medium {
	max-height: 0;
	overflow: hidden;
	transition: max-height 1.5s ease; }

.answer-medium p { padding-top: 1rem; line-height: 1.6; }

.faq.active .answer-medium {
	max-height: 900px;
	animation: fade 1s ease-in-out; }









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

.footer-strapline {
	padding: 10px;
	text-align: center;
	margin-bottom: 50px; }

.footer-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
    border-bottom: 1px solid #adb49e;
	margin-bottom: 14px; }
@media (min-width: 740px) { 
.footer-links { justify-content: space-between; } 
}


.links-column {
	width: 260px;
	margin-bottom: 26px; }

.links-column p { font-size: 12px; letter-spacing: 0.15rem; }

.fa-brands {
	font-size: 30px;
	margin-right: 10px; }

.copyright { font-size: 12px; }







