/*
Theme Name: Marcherstone 2026, v1
*/


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}



/* Setup
_________________________________________________ */

html, body{height: 100%; width: 100%; }

html {scroll-behavior: smooth;}

body {background: #fff;}

.clearer, .clearer10, .clearer20, .clearer30, .clearer40, .clearer50 {float: left; clear: both; height: 0; width: 100%;}
	.clearer10 {height: 1vw;}
	.clearer20 {height: 2vw;}
	.clearer30 {height: 3vw;}
	.clearer40 {height: 4vw;}
	.clearer50 {height: 5vw;}

.mobileheadline, .mobile {display: none;}

/* Colours
_________________________________________________ */

:root {
	--dkGold: rgba(158,154,117,1);
	--dkGoldTint: rgba(158,154,117,0.8);
	--ltGold: rgba(186, 154, 36, 1);
	--ltGoldTint: rgba(186, 154, 36, 0.8);
	--dkRed: rgba(224,24,82,1);
	--cyan: rgba(10, 115, 145, 1);
	--cyanTint: rgba(10, 115, 145, 0.8);
	--cyanL: rgba(0,168,213, 1);
	--cyanLTint: rgba(0,168,213, 0.8);
	--dkPink: rgba(215, 100, 151, 1);
	--beige: rgba(243,242,236,1);
	--beigeBg: rgba(243,242,236,1);
	--magentaBg: rgba(199,0,109,1);
}


.dkGold {color: rgba(158,154,117,1);}
	.dkGoldBg {background-color: rgba(158,154,117,1);}
	
.ltGold {color: rgba(186, 154, 36, 1);}
	.ltGoldBg {background-color: rgba(186, 154, 36, 1);}	

.dkRed {color: rgba(224,24,82,1);}
	.dkRedBg {background-color: rgba(224,24,82,1);}

.cyan {color: rgba(10, 115, 145, 1);}
	.cyanBg {background-color: rgba(10, 115, 145, 1);}

.dkPink {color: rgba(215, 100, 151, 1);}
	.dkPinkBg {background-color: rgba(215, 100, 151, 1);}

.beige {color: rgba(243,242,236,1);}
	.beigeBg {background-color: rgba(243,242,236,1) !important;}

.magentaBg {background-color: rgba(199,0,109,1);}

.white {color: #fff;}

/* Fonts
_________________________________________________ */

p, li,
h1, h2, h3, h4, h5, h6,
label, button, .nf-form-content input[type=submit] {
	font-family: 'Merriweather', Georgia, Garamond, serif;
	font-size: 1.1vw;
	line-height: 120%;
	font-weight: 300;
	color: #000;
}

a {font-family: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; text-decoration: none;}

p {line-height: 150%; margin-top: 2vw;}

p:first-of-type {margin-top: 0;}

p strong {/* font-weight: 900; */ font-weight: 600;}
	
p .small {font-size: 0.8vw;}	
	
.intro_2_cols p:first-of-type, 
.two_col_txtpic:first-of-type > div:first-of-type > p:first-of-type, 
.rev_intro p:first-of-type,
#contact p:first-of-type, 
main.ngp p:first-of-type,
#product > div > span.text p:first-of-type {
font-size: 1.5vw;
color: var(--cyan);
font-weight: 900;
}

.intro_2_cols p:first-of-type {font-size: 1.1vw; font-weight: 300;}


h1 {
	font-size: 4vw;
	/* color: var(--ltGold); */
	color: #fff;
	text-align: left;
	width: 80%;
	line-height: 120%;
	/* font-weight: 900; */
	/* text-shadow: -0.5px -0.5px 0 #fff, 0.5px -0.5px 0 #fff, -0.5px -0.5px 0 #fff, 0.5px 0.5px 0 #fff; */
	filter: drop-shadow(5px 5px 10px #000);
	font-weight: 900;
}
	
h3 {
	font-size: 3vw;
	display: block;
	text-align: left;
	float: left;
	clear: both;
	width: 80%;
	color: var(--ltGold);
	font-weight: 400;
}

h3.fw {width: 100%;}

h3.underline {padding-bottom: 0.5vw; border-bottom: 1px solid var(--ltGold); margin-bottom: 2vw;}

h3.center {text-align: center;}



button, 
.nf-form-content input[type=submit]
{
	border: none !important;
	margin: 0 auto;
	padding: 0.5vw 2vw !important;
	border-radius: 20px !important;
	background: var(--ltGold);
	color: #fff;}
	
button.magenta {background: var(--magentaBg);}	
	
/* Generic Layout
_________________________________________________ */

header {
	width: 70%;
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 5vw;
	left: 10%;
}

header > div {flex: 1;}

header > div img {width: 100%;}

header > div:nth-of-type(2) {text-align: center;}
	header > div:nth-of-type(2) img {width: 50%; margin-left: 25%;}

header > div:nth-of-type(3) {text-align: right;}
	header > div:nth-of-type(3) a {color: #fff; font-size: 2vw; text-decoration: none; font-weight: 900;}
	

main {width: 80%; margin: 2vw 10%; float: left; clear: both;}

main.ngp > div {float: left; width: 60%;}
	main.ngp > div:nth-of-type(2) {float: right; width: 30%;}
		main.ngp > div img {width: 100%; margin-bottom: 1vw;}
		
		main.ngp > div h3 {
		font-size: 2vw;
		width: 100%;
		margin: 4vw 0 2vw 0;}
		

nav {width: 80%;padding: 1vw 10% 2vw 10%;float: left;clear: both;}

nav ul {}

nav li {
	display: inline-block;
	list-style-type: none;
	/* font-weight: 400; */
	margin-bottom: 2vw;
	font-size: 2vw;
}
	
	nav li a {text-decoration: none !important; color: var(--ltGold)}
		nav li a:after {margin-left: 1vw; content: "\007C"; margin-right: 1vw;color: var(--dkPink);}
			nav li:last-of-type a:after {content: none !important;}

#banner {
	position: relative;
	z-index: 1;
	width: 100%;
	min-height: 15vw;
	/* clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 90%); */
	background: var(--cyan);
	border-bottom-right-radius: 300px;
}

#banner::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: var(--cyanTint);
content: "";
z-index: 3;
/* clip-path: circle(87.0% at 0 79%); */
width: 100%;
height: 99.5%;

width: 100%;
height: 99.5%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* background: radial-gradient(var(--cyan), transparent) 0em 0/0.3em 0.3em space;
-webkit-mask: var(--mask);
mask: var(--mask);
content: "";
z-index: 3; */
border-bottom-right-radius: 300px;

}

#banner.product::before {
background: var(--ltGold);
}


#banner img {width: 100%; z-index: 2; position: relative; overflow: hidden; border-bottom-right-radius: 300px;}

#banner .text {
	position: absolute;
	left: 10%;
	top: 50%;
	z-index: 3;
	width: 90%;
}

#banner .texthome {transform: translate(0, -50%);}



#banner .text h3 {color: #fff; text-align: left; width: 50%; line-height: 120%;margin-top: 2vw; font-size: 1.7vw;}

#banner .buttons {float: left; clear: both;}

#banner button {float: left;margin: 2vw 0 0 0;}
	#banner button:first-of-type {margin-right: 2vw;}
	
.goldline {height: 4px;
	background: var(--ltGold);
	width: 100%;
	margin-top: -5px;
	position: relative;
	float: left;
	z-index: 10;
}


.clearer {width: 100%; float: left; clear: both; height: 10px;}

/* Home
_________________________________________________ */

#sections {float: left; clear: both; width: 80%; display: flex; margin: 6vw 10%; text-align: center;}
	#sections > div {flex: 1; margin-right: 3%; position: relative}
	#sections > div:last-of-type {margin-right: 0 !important; flex: 2;}
	
		#sections > div img {
			width: 100%;
			height: auto;
			position: relative;
			border: 1px solid var(--dkGold);
			background: var(--dkGold);
		}

#intro {float: left; clear: both; width: 60%; margin-left: 20%;}
		
		#intro > div {float: left; width: 48%;}
			#intro > div:nth-of-type(2) {float: right;}
		
		
		#intro.itl p {font-size: 2vw; color: var(--ltGold); font-weight: 300}
		#intro.itl p strong {color: var(--cyan);}
		
		#intro > div:nth-of-type(2) p {font-size: 1.1vw !important;
				line-height: 180% !important;
				font-weight: 300 !important;
				color: #000 !important;
			}
		
#showcase {float: left; clear: both; width: 100%; position: relative; padding: 4vw 0; background: var(--beige)}

	#showcase p {line-height: 180%; font-size: 1.4vw;}

	#showcase li {line-height: 180%; font-size: 1.2vw;}

	#showcase li:before {content: "\00B7"; color: var(--ltGold); font-size: 1.4vw; margin-right: 2vw;}

	#showcase .image {float: left; width: 30%;}
		#showcase .image img {width: 100%; height: auto;}

	#showcase .text {float: right; width: 60%;}


/* Slideshow container */
.slideshow-container {
	width: 60%;
	padding: 3vw 20%;
	position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translate(-50%);
  width: auto;
  user-select: none;
}

.prev img, .next img {max-height: 5vw;}

.prev {left: 0; transform: translate(100%, 100%);}

/* Position the "next button" to the right */
.next {
  right: 0;transform: translate(-100%, 100%);
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

#brochure {width: 80%;
	/* margin: 0 10%; */
	padding: 5vw 10%;
	vertical-align: middle;
	display: flex;
	align-items: center;
	background: var(--beigeBg);
	float: left;}
	
	#brochure.alt {background: #fff;}

#brochure > div {justify-content: center; width: 50%;}
	#brochure > div:nth-of-type(2) {width: 45%; margin-left: 5%;}

#brochure img {width: 100%; height: auto;}

#brochure p {line-height: 180%;margin-top: 6vw;font-size: 1.4vw;}

#pets {clear: both; float: left; width: 80%; padding: 5vw 10%; display: flex; align-items: center; background: var(--beigeBg)}

#pets > div:first-of-type {width: 33%; float: left;}
	#pets > div:nth-of-type(2) {width: 60%;float: right;margin-left: 10%;}


#pets p {line-height: 180%;margin-top: 6vw; font-size: 1.4vw;}

#pets img {width: 100%; height: auto;}

#testiomonials {
	clear: both;
	width: 80%;
	margin-left: 10%;
	float: left;
	padding: 5vw 0;
}

#testiomonials img {
	width: 60%;
	/* transform: translate(-50%); */
	/* left: 50%; */
	/* position: relative; */
	margin: 6vw 0 1vw 0;
}



.flex_wrapper {display: flex;
	width: 100%;
	flex-wrap: wrap;}

.flex_wrapper  > div {min-width: 28%;
	margin-right: 5%;
	max-width: 28%;}
	.flex_wrapper  > div:last-of-type {margin-right: 0;}

.fw {margin: 0 !important; width: 100% !important;}


/* Two Column Pages
_________________________________________________ */

img.banner_image {width: 100%; height: auto;}

.intro_1_col {width: 100%; column-count: 1;}
	.intro_1_col p {font-size: 1.5vw; color: var(--cyan); font-weight: 900;}


.intro_2_cols {width: 80%;
	column-count: 2;
	column-gap: 3vw;
}

.two_col_txtpic {display: block; float: left;}

.two_col_txtpic > .textl, .two_col_txtpic > .textr {width: 60%; float: left;}
.two_col_txtpic > .picr, .two_col_txtpic > .picl {width: 35%; float: right;}
	.two_col_txtpic img {width: 100%; height: auto;}

.two_col_txtpic > .textr {float: right;}
.two_col_txtpic > .picl {float: left;}

.two_cols {
	clear: both;
	float: left;
	width: 100%;
}

.two_cols > div {width: 45%; float: left;}
	.two_cols > div:nth-of-type(2) {float: right;}
	
.addservs > div {width: 28%; float: left; margin-right: 5%;}
	.addservs > div:nth-of-type(2) {float: left;}
	.addservs > div:nth-of-type(3) {margin-right: 0; float: right;}
		.addservs > div:nth-of-type(3) img {width: 100%; height: auto;}

.two_cols_proper {float: left; clear: both; column-count: 2; column-gap: 10%;}

.one_wide_column {float: left; clear: both; column-count: 1;}

.two_cols h3 {
font-size: 2vw;
width: 100%;
margin: 0 0 2vw 0;}

.two_cols strong {
color: rgba(10, 115, 145, 1);
font-size: 1.5vw;
display: block;
text-align: left;
float: left;
clear: both;
width: 100%;
padding-bottom: 1vw;
}

.two_cols li {
	list-style-type: disc;
	list-style-position: outside;
	margin-left: 20px;
	float: left;
	line-height: 180%;
	margin-bottom: 1vw;
}

#product_loop {
	width: 100%;
	float: left;
	clear: both;
	display: flex;
	flex-wrap: wrap;
	margin: 5vw 0;	
}
	#product_loop > div {
		flex: 1;
		min-width: calc(33% - 6vw);
		max-width: calc(33% - 6vw);
		padding: 3vw;
		text-align: center;
	}
	#product_loop > div img {
		width: 90%;
		height: auto;
		margin: 0 5% 3vw 5%;
	}

#product_loop p.size {text-align: center; margin-top: 0.5vw; }
.available_sizes p {text-align: left; margin-top: 0.5vw; }



#product_loop p.size span, .available_sizes p span {font-size: 0.8vw; color: var(--ltGold); }	

#product_loop p.size span:after, .available_sizes p span:after {
	margin-left: 0.5vw;
	content: "\007C";
	margin-right: 0.5vw;
}

#product_loop p.size span:last-of-type:after,
.available_sizes p span:last-of-type:after
 {content: ""; margin-right: 0;}

#granite  {
float: left;
width: calc(100% - 8vw);
display: flex;
flex-wrap: wrap;
/* margin-left: 10%; */
background: var(--cyanTint);
padding: 2vw 4vw;
border-radius: 20px;
}
	
	#granite > div {
		flex: 1;
		margin-right: 2%;
		position: relative;
		z-index: 8;
		}
		
		#granite > div:last-of-type {margin-right: 0;}
		
	#granite > div img {
	width: 100%;
	height: auto;
	border-radius: 50%;
	}

	#granite > div img.dm {
			position: absolute;
			width: 50%;
			height: auto;
			z-index: 10;
			top: calc(50% - 2vw);
			right: 50%;
			transform: translate(50%,-50%);
		}


	#granite > div p {
	text-align: center;
	color: #fff;
	font-size: 0.8vw;
	/* line-height: 3vw; */
	margin: 0.5vw 0 1vw 0;
	}

.promo_product {
	background-color: var(--cyan);
	width: 80%;
	/* margin: 4vw 10%; */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3vw 10%;
}

	.promo_product > div {width: 40%; flex: 1; margin-right: 10%;}
	
	.promo_product > div:nth-of-type(2) {width: 50%;}

	.promo_product img {width: 100%; height: auto;}
		
	.promo_product p, .promo_product h3 {color: #fff;}
	
	.promo_product p {
	line-height: 180%;
	margin: 2vw 0 !important;
	float: left;
	}
	
	.promo_product h3 {width: 100%;}

	.promo_alt {background: var(--beigeBg)}
	
	.promo_alt p {color: #000}
	.promo_alt h3 {color: var(--ltGold);}


/* Single Products
_________________________________________________ */

#product {float: left;
	width: 100%;
	margin: 0;}
	
	#product h1 {
		filter: revert;
		font-weight: 300;
		font-size: 3vw;
		text-shadow: revert;
		width: 100%;
		color: var(--ltGold);
	}
	
	#product > div {width: 40%; float: left;}
		#product > div:nth-of-type(2) {
			float: right;
			width: 55%;
			margin-top: 8vw;
		}
		
	#product > div img {width: 100%; height: auto;}

#product > div > span.text p {width: 80%; float: left;}

#product .thegallery {
	width: 80%;
	float: left;
	display: flex;
	margin-top: 2vw;
	margin-left: 10%;
	align-items: center;
	justify-content: center;
}

	#product .thegallery span {
		position: relative;
		margin-right: 1vw;
		max-width: 25%;
	}
		#product .thegallery span:last-of-type {margin-right: 0}

	
	#product .thegallery img.gallery {width: 100%; height: auto; border-radius: 50%; position: relative;}
		
		#product .thegallery img.mag {
		position: absolute;
		width: 20%;
		height: auto;
		z-index: 10;
		top: 50%;
		right: 50%;
		transform: translate(50%,100%);
		}



/* #product > div > span.text p:first-of-type {width: 100%; font-size: 150%; color: var(--cyan);} */


#product_options_left {clear: both; float: left; width: 40%; margin-top: 3vw;}
	#product_options_left aside {height: 20vw; overflow-y: scroll;}

#product_options_right {float: right; width: 55%; margin-top: 3vw;}

#product_options_left h3, #product_options_right h3 {
	display: block; text-align: left; padding-bottom: 0.5vw;
	border-bottom: 1px solid var(--ltGold); margin-bottom: 2vw;
}

#varieties {
	float: left; 
	/* width: 100%; */
	display: flex; flex-wrap: wrap;
	background: var(--ltGold);
	padding: 2vw 4vw;
	border-radius: 20px;
}

		#varieties > div {
			flex: 1;
			min-width: 21%;
			max-width: 20%;
			margin: 0 2%;
			position: relative;
		}
			#varieties > div img {width: 100%; height: auto; border-radius: 50%;}
			
			#varieties > div img.dm {
				position: absolute;
				width: 50%;
				height: auto;
				z-index: 10;
				top: calc(50% - 2vw);
				right: 50%;
				transform: translate(50%,-50%);
			}

			#varieties > div p {text-align: center;
				color: #fff;
				font-size: 0.8vw;
				/* line-height: 3vw; */
				margin: 0.5vw 0 1vw 0;}

#related_products {width: 100%; display: flex; float: right; flex-wrap: wrap}

			#related_products > div {flex: 1; min-width: 45%; margin-right: 4%;}
				#related_products > div img {width: 40%; margin: 0 60% 1vw 0; border: 1px solid #ccc; }

				#related_products p {display: block; width: 100%;clear: both; color: #999}


#enquire {float: right;width: 100%;}

	#enquire .var_select {display: block; float: left; width: 100%;}

	#enquire .rp_select {float: left; margin-right: 1vw;}
	
	#enquire p, #enquire h4 {color: #fff;}
	

/* Epitaph EQs
_________________________________________________ */
	
#epitaphegs	{width: 100%; display: flex; flex-wrap: wrap}
	#epitaphegs > div {float: left; width: 28%; min-width: 28%; max-width: 28%; margin-right: 5%; }


/* Contact
_________________________________________________ */
	
#contact a {color: var(--cyan); font-weight: 600; border-bottom: 1px var(--cyan) dotted}	

/* Footer
_________________________________________________ */

footer {clear: both; float: left; width: 80%; padding: 3vw 10%; background: var(--cyan);}

footer .flex {display: flex;}

footer .flex > div {float: left; width: 30%; margin-right: 5%;}
	footer .flex > div:nth-of-type(1) {width: 5%;}
	footer .flex > div:nth-of-type(2) {width: 55%;}
	footer .flex > div:nth-of-type(3) {margin-right: 0; text-align: right;}

footer p {color: #fff; margin: 0;}
	footer p.phone {font-size: 1.8vw; font-weight: 600;}

footer .flex > div img {max-width: 100%;}

footer a {color: #fff; text-decoration: none !important; line-height: 180%;}

footer li a {color: var(--cyanL);}

footer img.social {width: 10vw;height: auto;margin-top: 1vw;}

footer > div.lower_footer {width: 100%; margin-top: 2vw; padding-top: 2vw; border-top: 1px solid var(--cyanL);}

.lower_footer ul {margin-left: 10%;}

footer > div.lower_footer li {float: left; font-size: 1vw; margin-right: 2vw;}

.nf-error-msg, .ninja-forms-req-symbol, .nf-form-fields-required {display: none !important;}
.nf-form-content input[type=submit] {background: var(--ltGold) !important; height: revert !important;}

.overlay {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1000000000;
	top: 0;
	left: 0;
	background: var(--cyan);
	overflow-x: hidden;
	transition: 0.5s;
	}
	
	.overlay2 {background: var(--cyan);}

	.overlay-content {width: 70%; float: left; margin-left: 15%; margin-top: 15vw;}
	.overlay-content .main_content {text-align: left; margin: 0 !important; padding-bottom: 5vw;}

	.overlay-content .main_content h3 {text-align: left; /* font-weight: 900; */ margin-bottom: 2vw; width: 100%;}
	.overlay-content .main_content p, .overlay-content .main_content p a {color: #fff;}

	.overlay .closebtn {
	position: absolute;
	top: 5vw;
	right: calc(10% + 1vw);
	font-size: 60px;
	}

	.closebtn img {
		width: 5vw;
		height: auto;
		background: #fff;
		border-radius: 50%;}