@import url('https://fonts.googleapis.com/css2?family=Gabriela&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
:root {
	--font-Headings: "Gabriela", serif;
	--font-main: "Noto Serif", serif;
	--font-accent: "Gabriela", serif;
	--color-primary: #565C83;
	--color-secondary: #527D98;
	--color-accent: #B65D3E;
	--color-light-accent: #FF7F53;
	--color-muted-accent: #F7F4EC;
	--color-body-text: #30383C;
	--color-background-light: #F7F4EC;
	--color-dark-bg: #30383C;
	--color-dark-bg-rgb: 48, 56, 60;
	--btn-radius: 5px 0px 5px 0px;
}
html {
	position: relative;
	min-height: 100%;
	scroll-behavior: smooth;
}
body {
	position: relative;
	font-family: var(--font-main);
	font-size: 24px;
	color: var(--color-body-text);
	font-weight: 400;
	overflow-x: hidden;
	background-color: var(--color-background-light);
}
main {
	flex: 1 0 auto;
	min-height: auto;
	background-color: var(--color-background-light);
	position: relative;
	z-index: 150;
}
/* =========================================================
   OPTIONAL PAGE / SECTION FADE-IN
   Do NOT apply this to body, main, or a wrapper containing
   the 3D book display.
========================================================= */
.fadeInLoad {
	opacity: 1;
	animation: fadeInLoad 1.4s ease-out;
}
@keyframes fadeInLoad {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	.fadeInLoad {
		animation: none;
	}
}
#Main {
	padding-top: 80px;
	padding-bottom: 80px;
}
.MainAjust {
	padding-top: 40px !important;
}
#Main img, #homeMain img {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 28px 0 28px 0;
	box-shadow:
		0 8px 24px color-mix(in srgb, var(--color-dark-bg) 10%, transparent);
}
#Main img.noImgStyle, #homeMain img.noImgStyle {
	border-radius: 0 !important;
	box-shadow: none !important;
}
@media(max-width:768px) {
	#Main img, #homeMain img {
		float: none !important;
		display: block !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	#Main {
		width: 100%;
	}
}
img[src="https://www.paypal.com/en_US/i/scr/pixel.gif"] {
	display: none;
}
#Main .breakWidth {
	width: 90vw;
	position: relative;
	margin-left: -45vw;
	left: 50%;
}
#Main .sample img {
	border: 4px solid white;
	box-shadow: 0px 0px 2px 0px black;
	margin-bottom: 20px;
}
.pageTop {
	position: relative;
	width: 100%;
	min-height: calc(40vh + 100px);
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url(/tempimg/pageTop.jpeg);
	background-size: cover;
	background-position: center center;
	background-attachment: inherit;
	padding-bottom: 50px;
	overflow: hidden;
	z-index: 50;
}
/*------------Home TOP --------------------*/
.mainLogo {
	display: block;
	margin: 20px auto 30px auto;
	width: 600px;
	max-width: 90%;
}
@media(min-width:768px) {
	.navbar-right {
		padding-right: 1vw;
	}
}
/*-------------------Home TOP END ------------------*/
/* =========================================================
   HOME HERO
========================================================= */
.homeMainTop {
	position: relative;
	width: 100%;
	min-height: 720px;
	padding: 0 !important;
	margin: 0;
	background-color: var(--color-background-light);
	overflow: hidden;
}
/* =========================================================
   HERO PHOTO
   Full-size photo sits underneath the transparent overlay
========================================================= */
.heroBack {
	position: absolute;
	top: 0;
	left: 0;
	right: 40%;
	bottom: 0;
	background-image: url("/tempimg/HeroBack.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
	background-color: var(--color-background-light);
	z-index: 0;
	overflow: hidden;
}
.heroBack:after {
	content: "";
	position: absolute;
	top: 0;
	right: -1px;
	bottom: 0;
	width: 220px;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to right, rgba(244, 239, 227, 0) 0%, rgba(244, 239, 227, 0.35) 30%, rgba(244, 239, 227, 0.72) 65%, rgba(244, 239, 227, 1) 100%);
}
/* =========================================================
   HERO PAPER / WATERCOLOR COVER
   Transparent on left, textured paper on right
========================================================= */
.heroCover {
	position: absolute;
	inset: 0;
	background-image: url("/tempimg/herocover4.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: cover;
	z-index: 1;
	pointer-events: none;
}
/* =========================================================
   HERO CONTENT
========================================================= */
.heroRow {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 92%;
	max-width: 1700px;
	min-height: 720px;
	margin: 0 auto;
}
/* =========================================================
   HERO TEXT
========================================================= */
.heroText {
	width: 52%;
	max-width: 900px;
	margin-left: auto;
	padding: 70px 20px 70px 45px;
}
.heroText h1 {
	display: block;
	margin: 0 0 24px 0;
	color: var(--color-dark-bg);
	font-family: var(--font-Headings);
	font-size: clamp(40px, 3.3vw, 55px);
	font-weight: 400;
	line-height: .98;
	text-align: left;
}
/* Remove normal site heading line */
.heroText h1:after {
	display: none !important;
	content: none !important;
}
.heroText h4 {
	margin: 0 0 25px 0;
	color: var(--color-primary);
	font-family: var(--font-Headings);
	font-size: clamp(24px, 1.55vw, 30px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: .01em;
	text-align: left !important;
	text-transform: uppercase;
}
.heroText h4 em {
	color: var(--color-accent);
	font-style: normal;
}
.heroText p {
	max-width: 850px;
	margin: 0 0 25px 0;
	color: var(--color-body-text);
	font-size: 24px;
	line-height: 1.5;
	text-align: left;
}
.heroText .btn {
	margin-top: 8px;
}
/* =========================================================
   FLOATING WATERCOLOR DOTS
========================================================= */
.heroBubbles {
	position: absolute;
	top: 0;
	right: 0;
	/* Wider so a few dots drift farther toward center */
	width: 58%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 2;
}
.heroBubble {
	position: absolute;
	display: block;
	height: auto;
	opacity: 0;
	animation-name: bubbleFloat;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
/* =========================================================
   INDIVIDUAL DOTS
========================================================= */
.heroBubble.b1 {
	right: 5%;
	bottom: 5%;
	width: 19px;
	animation-duration: 24s;
	animation-delay: -4s;
}
.heroBubble.b2 {
	right: 15%;
	bottom: 13%;
	width: 30px;
	animation-duration: 29s;
	animation-delay: -17s;
}
.heroBubble.b3 {
	right: 27%;
	bottom: 4%;
	width: 14px;
	animation-duration: 26s;
	animation-delay: -9s;
}
.heroBubble.b4 {
	right: 39%;
	bottom: 19%;
	width: 13px;
	animation-duration: 31s;
	animation-delay: -23s;
}
.heroBubble.b5 {
	right: 49%;
	bottom: 7%;
	width: 21px;
	animation-duration: 27s;
	animation-delay: -13s;
}
.heroBubble.b6 {
	right: 21%;
	bottom: 32%;
	width: 17px;
	animation-duration: 33s;
	animation-delay: -28s;
}
.heroBubble.b7 {
	right: 57%;
	bottom: 25%;
	width: 11px;
	animation-duration: 28s;
	animation-delay: -20s;
}
.heroBubble.b8 {
	right: 34%;
	bottom: 42%;
	width: 24px;
	animation-duration: 35s;
	animation-delay: -7s;
}
.heroBubble.b9 {
	right: 9%;
	bottom: 48%;
	width: 13px;
	animation-duration: 30s;
	animation-delay: -25s;
}
/* =========================================================
   FLOAT ANIMATION
========================================================= */
@keyframes bubbleFloat {
	/* Brief invisible pause before appearing */
	0% {
		transform: translate3d(0, 70px, 0);
		opacity: 0;
	}
	10% {
		transform: translate3d(3px, 45px, 0);
		opacity: 0;
	}
	18% {
		opacity: .42;
	}
	35% {
		transform: translate3d(-12px, -65px, 0);
		opacity: .48;
	}
	55% {
		transform: translate3d(8px, -170px, 0);
		opacity: .44;
	}
	72% {
		transform: translate3d(-8px, -280px, 0);
		opacity: .36;
	}
	86% {
		transform: translate3d(10px, -370px, 0);
		opacity: .18;
	}
	92% {
		opacity: 0;
	}
	/* Gives a little dead time before the loop repeats */
	100% {
		transform: translate3d(-4px, -430px, 0);
		opacity: 0;
	}
}
/* Text always remains above the dots */
.heroRow, .heroText {
	position: relative;
	z-index: 4;
}
/* Reduced-motion accessibility */
@media(prefers-reduced-motion: reduce) {
	.heroBubble {
		animation: none;
		opacity: .18;
	}
}
/* =========================================================
   MID-SIZE DESKTOP
========================================================= */
@media(max-width:1400px) {
	.homeMainTop, .heroRow {
		min-height: 660px;
	}
	.heroText {
		width: 54%;
		padding-left: 35px;
		padding-right: 10px;
	}
	.heroText h1 {
		font-size: clamp(44px, 3.5vw, 56px);
	}
	.heroText h4 {
		font-size: 24px;
	}
	.heroText p {
		font-size: 21px;
	}
}
@media(max-width:992px) {
	.homeMainTop {
		position: relative;
		width: 100%;
		min-height: 650px;
		padding: 0 !important;
		background: var(--color-background-light);
		overflow: hidden;
	}
	/* Sheep photo fills entire hero */
	.heroBack {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-image: url("/tempimg/HeroBack.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		z-index: 0;
	}
	/*
	   Do not use the desktop right-edge gradient
	   because the photo is no longer split.
	*/
	.heroBack:after {
		display: none;
	}
	/* Paper/watercolor layer covers whole photo */
	.heroCover {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: url("/tempimg/herocover4.png");
		background-repeat: no-repeat;
		background-position: center right;
		background-size: cover;
		/*
		   THIS is the main value to adjust.

		   Lower = more sheep photo visible
		   Higher = more parchment visible
		*/
		opacity: .82;
		z-index: 1;
		pointer-events: none;
	}
	/* Text now uses full hero width */
	.heroRow {
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		width: 100%;
		max-width: none;
		min-height: 650px;
		margin: 0;
	}
	.heroText {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 70px 8%;
		background: none;
	}
	.heroText h1 {
		max-width: 850px;
		margin: 0 0 24px;
		font-size: 50px;
		line-height: 1;
		text-align: left;
	}
	.heroText h4 {
		max-width: 850px;
		margin-bottom: 24px;
		font-size: 26px;
		line-height: 1.2;
		text-align: left !important;
	}
	.heroText p {
		max-width: 900px;
		font-size: 21px;
		line-height: 1.55;
		text-align: left;
	}
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:768px) {
	.homeMainTop, .heroRow {
		min-height: 620px;
	}
	.heroBack {
		background-position: 45% center;
	}
	/*
	   Slightly stronger parchment on phone
	   because the text occupies more of the image.
	*/
	.heroText {
		padding: 55px 28px;
	}
	.heroText h1 {
		max-width: none;
		font-size: 39px;
		line-height: 1.03;
		margin-bottom: 20px;
	}
	.heroText h4 {
		max-width: none;
		font-size: 22px;
		line-height: 1.2;
		margin-bottom: 20px;
	}
	.heroText p {
		max-width: none;
		font-size: 18px;
		line-height: 1.55;
	}
	.heroText .btn {
		margin-top: 5px;
	}
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media(max-width:480px) {
	.homeMainTop, .heroRow {
		min-height: 640px;
	}
	.heroBack {
		background-position: 43% center;
	}
	.heroCover {
		opacity: .88;
	}
	.heroText {
		padding: 45px 20px;
	}
	.heroText h1 {
		font-size: 34px;
	}
	.heroText h4 {
		font-size: 20px;
	}
	.heroText p {
		font-size: 18px;
	}
}
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media(max-width:480px) {
	.heroBack {
		height: 285px;
	}
	.heroText {
		padding: 38px 20px 48px;
	}
	.heroText h1 {
		font-size: 34px;
	}
	.heroText h4 {
		font-size: 20px;
	}
	.heroText p {
		font-size: 18px;
	}
}
/* ---- New Book -----*/
.logoAFF {
	width: 96%;
	max-width: 1600px;
	padding-top: 90px;
	padding-bottom: 90px;
	text-align: center;
}
.logoAFF h2 {
	display: block;
	margin-right: auto;
	margin-left: auto;
	width: 1000px;
	max-width: 90%;
}
.logoAFF img {
	height: 120px;
	margin: 20px;
	max-width: 90%;
}
@media(max-width:768px) {
	.logoAFF img {
		height: 80px;
		margin: 20px;
	}
}
hr {
	border: none;
	height: 2px;
	background-color: var(--color-light-accent);
}
@media(max-width:768px) {
	.pageTextTop h1 {
		font-size: 36px;
		line-height: 34px;
	}
}
/*--- NVHC End----------------------*/
.mainHome {
	padding-top: 100px !important;
	padding-bottom: 100px !important;
	max-width: 1600px;
	margin: auto;
}
.childFlex p, .modal-body p, .post-item p, .contentFlex *, .post-item li, .post-item h2, .post-item h3, .post-item h4, .faqcloser p, .modal-content * {
	opacity: 1 !important;
	transform: none !important;
}
@media(max-width:768px) {
	.navbar-custom li, .faAuto, .dropdown-toggle .fa {
		opacity: 1 !important;
		transform: none !important;
	}
}
.sr h1, .sr p, .sr .fa, .sr .eventRev, .photoBoxRight, .sr .agecol, .sr .divider, .sr #Main li, .sr #Main .divider, .sr #Main hr {
	visibility: hidden;
}
.sr .shr-socials li {
	visibility: visible !important;
}
.sr .itemInner p, .sr .itemInner h2, #Main #BlogTopics li, .noHide * {
	opacity: 1 !important;
	visibility: visible !important;
	transform: scale(1) !important;
}
.err {
	border-color: red;
}
.imglinkres {
	/*border: 3px solid white;
	box-shadow: 0px 0px 1px 0px black;*/
}
#docbody {
	padding-top: 0px;
	padding: 0px;
	margin: 0px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	-webkit-transition: padding-top 1.0s;
	-moz-transition: padding-top 1.0s;
	transition: padding-top 1.0s;
}
.homeDisplay {
	width: 100%;
}
.homeDisplay1p {
	display: table;
	width: 100%;
}
.homeDisplay1 {
	position: relative;
	display: table-cell;
	vertical-align: middle;
	height: 460px;
	overflow: hidden;
	width: 100%;
	line-height: 7vw;
	margin-top: 20px;
	color: white;
	font-size: 8vw;
	text-shadow: 1px 1px 3px black;
	text-align: right;
	padding: 4vw;
}
@media(min-width:1200px) {
	.homeDisplay1 {
		text-align: left;
		line-height: 90px;
		font-size: 80px;
		padding: 10vh calc(4vh + 10px);
	}
}
.homeDisplay2 {
	text-align: right;
	padding-right: 0px;
}
.homeDisplayButton {
	filter: grayscale(0%);
	transition: all 1s;
	position: relative;
	width: 100%;
	height: 360px;
	margin-top: 20px;
	margin-bottom: 20px;
	background-size: cover;
	background-position: center center;
	border: 4px solid white;
	box-shadow: 0px 0px 2px 0px black;
}
.homeDisplayButton:hover {
	filter: grayscale(100%)
}
/*----- Typography -----*/
h1 {
	font-family: var(--font-Headings);
	margin-top: 10px;
	font-weight: 400;
	font-size: 60px;
	line-height: 50px;
	color: var(--color-dark-bg);
}
h1 small {
	font-family: var(--font-Headings);
	color: var(--color-primary);
	font-family: "Cormorant Upright", serif;
}
h1 {
	display: flex;
	align-items: center;
	gap: 20px;
}
h1:after {
	content: "";
	flex: 1;
	border-top: 2px solid var(--color-light-accent);
}
/* If H2 contains a SMALL, move SMALL to second line */
h1:has(small) {
	flex-wrap: wrap;
	row-gap: 0;
}
/* Keep decorative line beside main H2 title */
h1:has(small):after {
	order: 1;
}
/* Put SMALL below the title */
h1:has(small) small {
	flex: 0 0 100%;
	order: 2;
	margin-top: 5px;
}
h2 {
	font-family: var(--font-Headings);
	margin: 25px 0px 25px 0px;
	font-weight: 400;
	color: var(--color-dark-bg);
	font-size: 44px;
	line-height: 1;
}
h2 small {
	color: var(--color-primary);
	text-transform: none;
	font-size: 22px
}
h2 {
	display: flex;
	align-items: center;
	gap: 20px;
}
h2:after {
	content: "";
	flex: 1;
	border-top: 2px solid var(--color-light-accent);
}
/* If H2 contains a SMALL, move SMALL to second line */
h2:has(small) {
	flex-wrap: wrap;
	row-gap: 0;
}
/* Keep decorative line beside main H2 title */
h2:has(small):after {
	order: 1;
}
/* Put SMALL below the title */
h2:has(small) small {
	flex: 0 0 100%;
	order: 2;
	margin-top: 5px;
}
h3 {
	margin: 25px 0px 25px 0px;
	font-weight: 500;
	color: var(--color-dark-bg);
	font-size: 54px;
	line-height: .8;
	font-family: var(--font-accent);
}
h4 {
	font-family: var(--font-Headings);
	margin: 25px 0px 25px 0px;
	font-weight: 400;
	color: var(--color-primary);
	text-transform: uppercase;
	font-size: 28px;
	line-height: 1;
}
p {
	margin: 25px 0px 25px 0px;
}
@media(max-width: 768px) {
	h1 {
		font-size: 38px;
	}
	h2 {
		font-size: 34px;
	}
	h3 {
		font-size: 32px;
	}
	h4 {
		font-size: 28px;
	}
}
blockquote {
	margin: 25px 0;
	padding: 15px 20px;
	border-left: 5px solid var(--color-light-accent);
	font-family: var(--font-accent);
	font-size: 32px;
}
blockquote p {
	margin: 10px 0px !important;
}
blockquote footer {
	font-family: var(--font-Headings);
	font-size: 22px;
}
/*----- Typography End -----*/
.str_prd_name {
	font-family: var(--font-main);
}
.hide-store-space {
	display: none;
}
.hide-store-sort {
	margin-top: -40px;
	margin-bottom: 40px;
	display: none;
}
.well {
	background-color:
		color-mix(in srgb, var(--color-background-light) 55%, #fff);
	margin-top: 40px;
	margin-bottom: 80px;
	background-image: none;
	border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
	border-top: 3px solid var(--color-secondary);
	border-radius: 30px 0 30px 0;
	padding: 30px;
	box-shadow:
		0 8px 22px color-mix(in srgb, var(--color-dark-bg) 7%, transparent);
}
a {
	color: var(--color-secondary);
}
a:hover, a:focus, a:active {
	text-decoration: none;
	color: var(--color-primary);
}
a:focus, a:active, button:focus, button:active, input:focus, textarea:focus, select:focus {
	outline: none !important;
	box-shadow: none !important;
}
hr {
	border-color: var(--color-dark-bg);
}
/*----TOP-----*/
@media(min-width:768px) {
	.topCon {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
}
.topLinks a {
	display: inline-block;
	padding: 0px 20px 0px 10px;
	font-size: 40px;
	color: white;
	text-shadow: -2px 2px 0px black;
}
.topLinks a:hover {
	text-decoration: underline;
}
.topLeft {
	text-align: right;
}
.topRight {
	text-align: left;
}
/* Contact Bar ----*/
.getContact {
	background-color: var(--color-dark-bg);
	background-image: url('tempimg/toptexture.png');
	background-position: left center;
	padding: 8px 4vw 16px 4vw;
	color: white;
	font-size: 16px;
	text-align: right;
	box-shadow: 0px 0px 1px 1px black;
}
.getContact .break {
	margin-left: 10px;
	margin-right: 10px;
}
@media(max-width:768px) {
	.getContact {
		display: none;
	}
}
/*---------- Buttons ------------*/
.btn {
	border-radius: var(--btn-radius);
	text-transform: uppercase;
	font-weight: bold;
}
.btn {
	white-space: normal;
}
.btn-primary, .btn-success, .btn-info {
	letter-spacing: 4px;
	text-transform: uppercase;
	font-size: 24px;
	transition: all 1s;
	display: inline-block;
	border: 1px solid transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
.btn-primary {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: white !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
	background: var(--color-dark-bg) !important;
	border-color: var(--color-dark-bg) !important;
	color: white !important;
	background-image: none !important;
	box-shadow: none !important;
}
.btn-success {
	background: var(--color-secondary) !important;
	border-color: var(--color-secondary) !important;
	color: white !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: white !important;
	background-image: none !important;
	box-shadow: none !important;
}
.btn-info {
	background: var(--color-light-accent) !important;
	border-color: var(--color-light-accent) !important;
	color: var(--color-dark-bg) !important;
}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info {
	background: var(--color-background-light) !important;
	border-color: var(--color-secondary) !important;
	color: var(--color-dark-bg) !important;
	background-image: none !important;
	box-shadow: none !important;
}
.btn-primary:active:hover, .btn-primary.active:hover, .btn-primary:active:focus, .btn-primary.active:focus, .btn-primary:active.focus, .btn-primary.active.focus, .btn-success:active:hover, .btn-success.active:hover, .btn-success:active:focus, .btn-success.active:focus, .btn-success:active.focus, .btn-success.active.focus, .btn-info:active:hover, .btn-info.active:hover, .btn-info:active:focus, .btn-info.active:focus, .btn-info:active.focus, .btn-info.active.focus {
	background-image: none !important;
	box-shadow: none !important;
}
.btn-sm {
	font-size: 18px;
	letter-spacing: inherit;
}
/*---------- Default Buttons ------------*/
.btn-default {
	background: var(--color-background-light) !important;
	border-color: #ccc !important;
	color: var(--color-dark-bg) !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: uppercase;
	border-radius: var(--btn-radius);
	letter-spacing: 2px;
	font-weight: bold;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: white !important;
	background-image: none !important;
	box-shadow: none !important;
	outline: none !important;
}
.btn-default:active:hover, .btn-default.active:hover, .btn-default:active:focus, .btn-default.active:focus, .btn-default:active.focus, .btn-default.active.focus {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: white !important;
	background-image: none !important;
	box-shadow: none !important;
}
/*---------- Buttons End ------------*/
.bottomMain {
	padding-top: 20px !important;
	padding-bottom: 40px !important;
	max-width: 1680px;
}
.FAQquestion {
	font-size: 24px;
}
.resH3 {
	margin-top: 0px;
	margin-bottom: 10px;
	font-size: 24px;
}
/*-----------------FLIP COVER-----------------------*/
.PageFlipBook {
	-webkit-perspective: 1200px;
	perspective: 1200px;
}
.PageFlipBook a, .PageFlipBook .has-edge {
	transition: .2s;
	display: inline-block;
}
.PageFlipBook .page-flip-book-ribbon {
	position: absolute;
	top: 2%;
	right: -12px;
	text-transform: uppercase;
	padding: 10px 20px;
	background-color: var(--color-secondary);
	color: white;
	font-size: 13px;
	letter-spacing: 1px;
	text-align: left;
	width: 50%;
	transition: .2s;
	z-index: 1;
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}
.PageFlipBook .page-flip-book-ribbon .fa-spinner {
	font-size: 17px;
}
.PageFlipBook .page-flip-book-ribbon span {
	/*margin-left: 10px;*/
}
.PageFlipBook .page-flip-book-ribbon:after {
	content: '';
	position: absolute;
	top: 100%;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 15px 0 0;
	border-color: var(--color-secondary) transparent transparent transparent;
}
.PageFlipBook .has-edge {
	position: relative;
}
.PageFlipBook:hover a {
	opacity: 1;
}
.PageFlipBook:hover .has-edge {
	-webkit-transform: rotateY(-35deg);
	transform: rotateY(-35deg);
}
.PageFlipBook:hover .single-has-edge:after {
	opacity: 1;
}
.PageFlipBook:hover .has-edge .page-flip-book-ribbon {
	right: 0;
	-webkit-transform: rotateY(35deg) translate3d(10px, 0%, 20px);
	transform: rotateY(35deg) translate3d(10px, 0%, 20px);
}
/**
*  Book Edge
*/
.has-edge {
	-webkit-transform-origin: 35% 50%;
	transform-origin: 35% 50%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.has-edge:after {
	content: '';
	position: absolute;
	top: 3px;
	left: 98.5%;
	bottom: 3px;
	width: 45px;
	background: repeating-linear-gradient(to right, #f5f5f5, #f5f5f5 5px, #aaa 5px, #aaa 6px);
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-transform: rotateY(90deg);
	transform: rotateY(90deg);
}
.has-edge.has-edge-thin:after {
	width: 30px;
}
.has-edge.has-edge-thick:after {
	width: 70px;
}
.single-has-edge:after {
	opacity: 0;
	transition: .3s;
}
.BookImage {
	text-align: center;
	margin: auto;
	width: 80%;
	max-width: 260px;
	margin-top: 10px;
	margin-bottom: 40px;
}
.BookImageBackground {
	bottom: 10% !important;
}
.BookImageBackground.book-bg-type-1, .BookImageBackground.book-bg-type-2, .BookImageBackground.book-bg-type-3, .BookImageBackground.book-bg-type-4 {
	left: -5%;
	right: -5%;
}
.bookText {
	padding: 0px 20px 20px 20px;
}
.bookText h2 {
	margin-top: 0px;
}
.bookText p {
	text-align: justify;
}
.bookRight {
	padding: 80px;
}
.bookLeft {
	padding: 80px;
}
@media(max-width:768px) {
	.bookRight, .bookLeft {
		padding-top: 30px;
		padding-bottom: 30px;
	}
}
.prodButton {
	border: 0px !important;
}
.prodTitle::first-letter {
	margin-right: -15px;
	font-size: 1.2em;
	color: var(--color-secondary);
	padding: 0 15px;
	border: 1px solid var(--color-secondary);
}
/* ----------------Home STYLES---------------- */
.parentFlex {
	display: flex;
	flex-wrap: wrap;
	width: 90%;
	max-width: 1900px;
	margin: auto;
	margin-bottom: -13vh;
}
.childFlex {
	flex: 1 0 50%;
	margin: 0px 0px 20vh 0px;
	min-height: 60vh;
	position: sticky;
	top: 20vh;
	display: flex;
	align-items: center;
}
@media(min-width:993px) {
	.childNoStick {
		position: relative;
	}
	.parentBottom {
		margin-bottom: 7vh;
	}
}
.childText {
	padding: 40px;
}
.childText p {
	text-align: justify;
}
.childText h2 {
	color: white;
}
.s1 {
	background-image: url(/tempimg/sr-h-1.jpeg);
	background-size: cover;
	background-position: left center;
}
.s2 {
	background-color: var(--color-dark-bg);
	color: white;
}
.s3 {
	background-color: rgba(43, 47, 68, .95);
	color: white;
	text-align: right;
}
.s4 {
	background-image: url(/tempimg/sr-h-2.jpeg);
	background-size: cover;
	background-position: right center;
}
.s5 {
	background-image: url(/tempimg/sr-h-3.jpeg);
	background-size: cover;
	background-position: center center;
}
.s6 {
	background-color: rgba(43, 47, 68, .95);
	color: white;
}
@media(max-width:992px) {
	.childFlex {
		flex: 1 0 100%;
		margin: 0px 0px 20px 0px;
		min-height: calc(100vh - 40px);
		top: 20px;
	}
	.childNoStickM {
		position: relative;
	}
	.parentBottomM {
		margin-bottom: 7vh;
	}
	.parentFlex {
		margin-bottom: 0px;
	}
	.s2 {
		background-color: rgba(43, 47, 68, .95);
	}
}
/*--- BWS Test Contact Override---*/
.contactPhone span {
	display: none;
}
.contactFax span {
	display: none;
}
.contactPhone:after {
	content: "Desk";
}
.contactFax:after {
	content: "Cell";
}
.contactInfo .connect-divider:nth-of-type(2) {
	display: none;
}
/*--------------------BUBBLES END ------------------------------------*/
/* Target the column that contains the submit button */
#CONTACTFORM {
	margin-top:30px;
}
#CONTACTFORM .col-md-4:has(#contact_submit) {
	float: none !important;
	width: 100% !important;
	clear: both;
}
#CONTACTFORM #contact_submit {
	display: block;
	width: 100%;
}
.conblock {
	word-wrap: break-word;
	display: none !important;
}
.vid_title {
	font-weight: normal !important;
	font-size: 24px;
}
.vid_date {
	display: none;
}
/* =========================================================
   STORE BUTTON AREA
========================================================= */
#Main .strwell .strbutton {
	background: transparent !important;
	padding: 12px 10px 14px !important;
	border-top: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
}
/* =========================================================
   STORE BUTTON
========================================================= */
#Main .strwell .strbutton button.btn {
	width: 90%;
	background: var(--color-primary) !important;
	border: 1px solid var(--color-primary) !important;
	border-radius: var(--btn-radius) !important;
	color: #fff !important;
	padding: 11px 10px;
	font-size: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background-color .25s ease;
}
/* Replace the visible button text */
#Main .strwell .strbutton button.btn:after {
	content: "VIEW PUBLICATION";
	display: block;
	font-family: var(--font-main);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 1px;
	color: inherit;
}
/* Hover */
#Main .strwell .strbutton button.btn:hover, #Main .strwell .strbutton button.btn:focus {
	background: var(--color-dark-bg) !important;
	border-color: var(--color-dark-bg) !important;
	color: #fff !important;
}
.strwell p:has(.vid_cat) {
	padding-bottom: 12px;
}
/* =========================================================
   EZ-CMS BOOK STORE OVERRIDES
========================================================= */
/* Allow store cards to fill their Bootstrap columns */
#Main .strwell {
	width: 100% !important;
	max-width: none !important;
	margin-left: auto;
	margin-right: auto;
	padding: 25px 20px 65px;
	margin-top: 20px;
	margin-bottom: 20px;
}
/* Increase available book image area */
#Main .strwell .sbox {
	position: relative;
	width: 100% !important;
	height: 300px !important;
	margin: 0 auto;
}
/* Remove built-in 1:1 image ratio */
#Main .strwell .sbox:before {
	display: none !important;
	content: none !important;
	padding: 0 !important;
}
/* Center book covers within image area */
#Main .strwell .strcontent {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 100% !important;
}
#Main .strwell .strcontent a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
/* Enlarge book covers without distorting them */
#Main .strwell .strcontent img {
	display: block !important;
	width: auto !important;
	height: 280px !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain;
	margin: 0 !important;
}
/* Book titles */
#Main .strwell .str_prd_name {
	font-size: 21px;
	line-height: 1.3;
	font-weight: 400;
	text-transform: none;
	margin: 20px 0 15px;
}
/* =========================================================
   STOP SCROLLREVEAL INSIDE STORE CARDS
========================================================= */
#Main .strwell, #Main .strwell * {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767px) {
	#Main .strwell {
		max-width: 360px !important;
	}
	#Main .strwell .sbox {
		height: 270px !important;
	}
	#Main .strwell .strcontent img {
		height: 250px !important;
	}
}
/* =========================================================
   HEARTSPEAK BLOG PAGE
========================================================= */
.contentBack {
	background-color: var(--color-background-light);
}
/* Only change Main width when blog content is present */
#Main:has(.blogContent) {
	width: 92%;
	max-width: 1600px;
}
/* =========================================================
   MAIN BLOG ARTICLE
========================================================= */
.blogContent {
	padding-right: 55px;
}
.blogContent > h2 {
	margin-top: 0;
	color: var(--color-dark-bg);
}
.blogContent > h2 small {
	display: block;
	margin-top: 12px;
	color: var(--color-primary);
	text-transform: none;
}
/* =========================================================
   ARTICLE CATEGORY
========================================================= */
.catHolder {
	display: inline-block;
	margin: 5px 0 28px;
	padding: 8px 18px;
	background-color: var(--color-dark-bg);
	color: #fff;
	border-top: 3px solid var(--color-secondary);
	border-radius: 18px 0 18px 0;
	letter-spacing: .5px;
	text-transform: none !important;
}
/* =========================================================
   ARTICLE BODY
========================================================= */
#blogAudioText {
	position: relative;
	padding: 20px 20px;
	background-color:
		color-mix(in srgb, var(--color-background-light) 55%, #fff);
	border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
	border-radius: 30px 0 30px 0;
	box-shadow:
		0 8px 25px color-mix(in srgb, var(--color-dark-bg) 6%, transparent);
}
/*
   Leave normal article typography alone.
   Font size, font family and line height come
   from the site's standard CSS.
*/
#blogAudioText p {
	margin-bottom: 24px;
}
/*#blogAudioText img {
	max-width: 48% !important;
	height: auto !important;

	margin: 5px 30px 20px 0 !important;

	border-radius: 28px 0 28px 0;

	box-shadow:
		0 8px 24px
		color-mix(
			in srgb,
			var(--color-dark-bg) 10%,
			transparent
		);
}*/
#blogAudioText em {
	color: var(--color-accent);
}
/* =========================================================
   ARTICLE BOTTOM DIVIDER
========================================================= */
.blogContent > hr {
	height: 1px;
	margin-top: 45px;
	margin-bottom: 25px;
	border: 0;
	background-color:
		color-mix(in srgb, var(--color-primary) 30%, transparent);
}
/* =========================================================
   COMMENTS HEADER
========================================================= */
.blogContent > hr + .row {
	display: flex !important;
	align-items: center;
	justify-content: space-between !important;
	width: 100%;
	margin: 35px 0 25px !important;
	padding: 0;
}
.blogContent > hr + .row > .col-sm-12 {
	float: none;
	flex: 0 0 auto;
	width: auto;
	padding: 0;
}
.blogContent > hr + .row > .col-sm-12:first-child {
	margin-right: auto;
	text-align: left;
}
.blogContent > hr + .row > .col-sm-12:last-child {
	margin-left: auto;
	text-align: right;
}
.blogContent > hr + .row h3 {
	margin: 0 !important;
	color: var(--color-dark-bg);
}
.blogContent > hr + .row .btn {
	margin: 0 !important;
}
/* =========================================================
   COMMENTS
========================================================= */
.blogContent .BlogComments.well {
	position: relative;
	margin-top: 18px;
	margin-bottom: 18px;
	padding: 24px 28px;
	color: var(--color-body-text);
	border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
	border-left: 4px solid var(--color-primary);
	border-radius: 20px 0 20px 0;
	background-color:
		color-mix(in srgb, var(--color-background-light) 55%, #fff) !important;
	background-image: none !important;
	box-shadow:
		0 7px 20px color-mix(in srgb, var(--color-dark-bg) 6%, transparent);
}
.BlogComments h4 {
	margin-top: 0;
	margin-bottom: 15px;
	color: var(--color-primary);
}
.BlogComments h4 small {
	color: var(--color-body-text);
}
/* Comment replies */
.blogContent .BlogComments[style*="margin-left"] {
	width: 92%;
	margin-left: 8% !important;
	border-left-color: var(--color-secondary);
	background-image: none !important;
}
.BlogComments[style*="margin-left"] h4 {
	color: var(--color-dark-bg);
}
/* =========================================================
   BLOG SIDEBAR
========================================================= */
#BlogTopics {
	padding-left: 15px;
	color: var(--color-body-text);
}
/* =========================================================
   PREVIOUS POSTS HEADING
========================================================= */
#BlogTopics > h3 {
	position: relative;
	margin: 0;
	padding: 22px 20px 17px;
	border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
	border-top: 3px solid var(--color-secondary);
	border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
	border-radius: 24px 0 0 0;
	background-color:
		color-mix(in srgb, var(--color-background-light) 55%, #fff);
}
#BlogTopics hr {
	display: none;
}
#BlogTopics .btn {
	margin-bottom: 30px;
}
/* Disable older accent pseudo element */
#BlogTopics > h3:before {
	display: none !important;
}
/* =========================================================
   PREVIOUS POSTS LIST
========================================================= */
#BlogTopics #itemContainer {
	margin: 0 0 8px;
	border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
	border-top: 0;
	border-radius: 0 0 24px 0;
	background-color:
		color-mix(in srgb, var(--color-background-light) 55%, #fff);
	box-shadow:
		0 8px 24px color-mix(in srgb, var(--color-dark-bg) 6%, transparent);
	overflow: hidden;
}
/* Individual Previous Post */
#BlogTopics #itemContainer > p {
	position: relative;
	margin: 0;
	padding: 16px 20px;
	border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
	text-align: left;
	text-transform: none !important;
	transition:
		background-color .25s ease, padding-left .25s ease;
}
#BlogTopics #itemContainer > p:last-child {
	border-bottom: 0;
}
#BlogTopics #itemContainer > p:hover {
	padding-left: 24px;
	background-color:
		color-mix(in srgb, var(--color-light-accent) 18%, transparent);
}
/* =========================================================
   PREVIOUS POST TITLE
========================================================= */
#BlogTopics #itemContainer > p > a {
	display: block;
	margin: 0;
	color: var(--color-dark-bg);
	text-decoration: none;
	text-transform: none !important;
}
#BlogTopics #itemContainer > p > a:hover, #BlogTopics #itemContainer > p > a:focus {
	color: var(--color-secondary);
	text-decoration: none;
}
#BlogTopics #itemContainer b {
	font-weight: 500;
	text-transform: none !important;
}
/* =========================================================
   AUTHOR + DATE
========================================================= */
/*
   The title link above is display:block,
   so author/date automatically begin on line two.

   Hide BOTH hard-coded BR tags because they are
   no longer needed and caused the extra spacing.
*/
#BlogTopics .blogWhoInfo br, #BlogTopics .blogDateInfo br {
	display: none;
}
#BlogTopics .blogWhoInfo, #BlogTopics .blogDateInfo {
	display: inline;
	font-style: normal !important;
	text-transform: none !important;
}
/* Author */
#BlogTopics .blogWhoInfo {
	color: var(--color-body-text);
}
/* Date */
#BlogTopics .blogDateInfo {
	color: var(--color-primary);
	font-style: normal !important;
}
/* Divider between author and date */
#BlogTopics .blogDateInfo:before {
	content: "|";
	display: inline-block;
	margin: 0 7px;
	color:
		color-mix(in srgb, var(--color-body-text) 35%, transparent);
	font-style: normal;
}
/* =========================================================
   PREVIOUS POSTS PAGINATION
========================================================= */
/*
   Pagination is inside an old <center> tag.
   Override it so it stays aligned left.
*/
#BlogTopics center {
	display: block;
	margin: 0;
	padding: 0;
	text-align: left;
}
#BlogTopics .pagination {
	display: inline-block;
	float: none;
	margin: 8px 0 30px !important;
	padding: 0;
}
#BlogTopics .pagination > li > a, #BlogTopics .pagination > li > span {
	border-color:
		color-mix(in srgb, var(--color-primary) 20%, transparent);
	background-color:
		color-mix(in srgb, var(--color-background-light) 55%, #fff);
	color: var(--color-primary);
	box-shadow: none;
}
#BlogTopics .pagination > li > a:hover, #BlogTopics .pagination > li > a:focus, #BlogTopics .pagination > .active > a, #BlogTopics .pagination > .active > span, #BlogTopics .pagination > .jp-current {
	border-color: var(--color-primary);
	background-color: var(--color-primary);
	color: #fff;
}
/* =========================================================
   BLOG CATEGORIES
========================================================= */
#BlogTopics .panel.panel-default {
	position: relative;
	margin-top: 0;
	margin-bottom: 40px;
	border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
	border-top: 3px solid var(--color-secondary) !important;
	border-radius: 24px 0 24px 0;
	background-color:
		color-mix(in srgb, var(--color-background-light) 55%, #fff) !important;
	background-image: none !important;
	box-shadow:
		0 8px 24px color-mix(in srgb, var(--color-dark-bg) 6%, transparent);
	overflow: hidden;
}
/* Disable old decorative accent lines */
#BlogTopics .panel:before, #BlogTopics .panel-heading:before {
	display: none !important;
}
/* Blog Categories heading */
#BlogTopics .panel.panel-default > .panel-heading {
	position: relative;
	padding: 22px 20px 17px;
	/*color: var(--color-dark-bg);*/
	border: 0 !important;
	border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
	border-radius: 0;
	background: transparent !important;
	/*font-family: var(--font-accent);
	font-weight: 400;

	text-transform: none !important;*/
}
/* Match Previous Posts + Blog Categories headings */
#BlogTopics > h3, #BlogTopics .panel.panel-default > .panel-heading {
	font-family: var(--font-accent);
	font-size: 34px;
	font-weight: 400;
	color: var(--color-dark-bg);
	text-transform: none !important;
}
/* =========================================================
   CATEGORY LINKS
========================================================= */
#BlogTopics .panel-body {
	padding: 0;
	border: 0;
	background-color: transparent;
}
#BlogTopics .panel-body a, #BlogTopics .list-group-item a {
	display: block;
	padding: 16px 20px;
	color: var(--color-body-text);
	text-decoration: none;
	text-transform: none;
	transition:
		background-color .25s ease, color .25s ease, padding-left .25s ease;
}
#BlogTopics .panel-body a:hover, #BlogTopics .panel-body a:focus, #BlogTopics .list-group-item a:hover, #BlogTopics .list-group-item a:focus {
	padding-left: 24px;
	background-color:
		color-mix(in srgb, var(--color-light-accent) 18%, transparent);
	color: var(--color-primary);
	text-decoration: none;
}
#BlogTopics .list-group {
	margin: 0;
	padding: 0;
}
#BlogTopics .list-group-item {
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
	border-radius: 0;
	background-color: transparent;
}
/* =========================================================
   COMMENT MODAL
========================================================= */
#comment .modal-content, #commentclose .modal-content {
	border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
	border-radius: 24px 0 24px 0;
	background-color: var(--color-background-light);
	box-shadow:
		0 20px 50px color-mix(in srgb, var(--color-dark-bg) 18%, transparent);
	overflow: hidden;
}
#comment .modal-header, #commentclose .modal-header {
	padding: 22px 25px;
	border-bottom: 3px solid var(--color-secondary);
	background-color: var(--color-dark-bg);
}
#comment .modal-title, #commentclose .modal-title {
	margin: 0;
	color: #fff;
}
#comment .close, #commentclose .close {
	color: #fff;
	opacity: .8;
	text-shadow: none;
}
#comment .close:hover, #commentclose .close:hover {
	opacity: 1;
}
#comment .modal-body, #commentclose .modal-body {
	padding: 28px;
}
#comment .input-group-addon {
	border-color:
		color-mix(in srgb, var(--color-primary) 20%, transparent);
	background-color:
		color-mix(in srgb, var(--color-light-accent) 18%, transparent);
	color: var(--color-dark-bg);
}
#comment .form-control {
	border-color:
		color-mix(in srgb, var(--color-primary) 25%, transparent);
	background-color: #fff;
	box-shadow: none;
	color: var(--color-body-text);
}
#comment .form-control:focus {
	border-color: var(--color-primary);
	box-shadow: none;
}
#comment .modal-footer, #commentclose .modal-footer {
	padding: 18px 25px;
	border-top: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
	background-color: var(--color-background-light);
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width: 991px) {
	.blogContent {
		padding-right: 15px;
	}
	#BlogTopics {
		margin-top: 55px;
		padding-left: 15px;
		padding-right: 15px;
	}
	#BlogTopics .hidden-lg hr {
		margin-bottom: 35px;
	}
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width: 767px) {
	#Main:has(.blogContent) {
		width: 100%;
	}
	#blogAudioText {
		padding: 26px 22px;
		border-radius: 22px 0 22px 0;
	}
	/*#blogAudioText img {
		display: block;
		float: none !important;

		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;

		margin: 0 0 28px !important;

		border-radius: 22px 0 22px 0;
	}*/
	/* Comments heading / button */
	.blogContent > hr + .row {
		display: block !important;
	}
	.blogContent > hr + .row .text-right {
		margin-top: 18px;
		text-align: left;
	}
	/* Comments */
	.BlogComments.well {
		padding: 20px;
		border-radius: 18px 0 18px 0;
	}
	.BlogComments[style*="margin-left"] {
		width: 95%;
		margin-left: 5% !important;
	}
	/* Previous Posts */
	#BlogTopics > h3 {
		border-radius: 20px 0 0 0;
	}
	#BlogTopics #itemContainer {
		border-radius: 0 0 20px 0;
	}
	/* Pagination */
	#BlogTopics center {
		text-align: left;
	}
	#BlogTopics .pagination {
		margin-bottom: 30px !important;
	}
	/* Categories */
	#BlogTopics .panel.panel-default {
		border-radius: 20px 0 20px 0;
	}
	/* Modal */
	#comment .modal-content, #commentclose .modal-content {
		border-radius: 20px 0 20px 0;
	}
	#comment .modal-body, #commentclose .modal-body {
		padding: 22px;
	}
}
/* =========================================================
   PAGE INTRO
   PHOTO / SOFT CREAM TRANSITION
========================================================= */
.introSplit {
	width: 100%;
	padding: 65px 5vw 0px;
}
/* =========================================================
   MAIN INTRO CARD
========================================================= */
.introInner {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 90%;
	max-width: 1400px;
	min-height: 380px;
	margin: 0 auto;
	border: 0;
	border-top: 3px solid var(--color-secondary);
	/* Site's asymmetric corner treatment */
	border-radius: 30px 0 30px 0;
	background-color: var(--color-background-bodyback);
	box-shadow:
		0 12px 32px color-mix(in srgb, var(--color-dark-bg) 9%, transparent);
	overflow: hidden;
	isolation: isolate;
}
/* =========================================================
   SUBTLE WATERCOLOR DETAIL
   Very faint - mostly visible on far right
========================================================= */
.introInner:before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('/tempimg/HeroCover4.png');
	background-position: right center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: .3;
	pointer-events: none;
	z-index: 0;
}
/* Remove any previous decorative corner */
.introInner:after {
	display: none !important;
	content: none !important;
}
/* =========================================================
   PHOTO - DESKTOP
========================================================= */
.introPhoto {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	bottom: 0;
	width: 69%;
	min-height: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 1;
	/*
       Strong photograph on left.
       Gradual fade through middle.
       Completely transparent before title.
    */
	-webkit-mask-image:
		linear-gradient(to right, #000 0%, #000 38%, rgba(0, 0, 0, .88) 50%, rgba(0, 0, 0, .55) 66%, rgba(0, 0, 0, .15) 83%, transparent 100%);
	mask-image:
		linear-gradient(to right, #000 0%, #000 38%, rgba(0, 0, 0, .88) 50%, rgba(0, 0, 0, .55) 66%, rgba(0, 0, 0, .15) 83%, transparent 100%);
}
/* No separate photo overlays */
.introPhoto:before, .introPhoto:after {
	display: none !important;
	content: none !important;
}
/* =========================================================
   TEXT PANEL - DESKTOP
========================================================= */
.introText {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 56%;
	padding: 50px 3%;
	min-width: 0;
	margin-left: auto;
	background: none;
	z-index: 2;
}
/* =========================================================
   PAGE TITLE
   Overrides global H1 styling
========================================================= */
.introText h1, .introText h1:has(small) {
	display: block;
	width: 100%;
	max-width: none !important;
	margin: 0;
	padding: 0;
	color: var(--color-primary);
	font-size: clamp(40px, 3.5vw, 58px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	flex-wrap: nowrap;
}
/* Remove global H1 decorative line */
.introText h1:after, .introText h1:has(small):after, .introText h1:before {
	display: none !important;
	content: none !important;
	border: 0 !important;
	flex: none !important;
}
/* =========================================================
   TITLE SUBTEXT / SMALL
========================================================= */
.introText h1 small, .introText h1:has(small) small {
	display: block;
	width: 100%;
	max-width: none;
	margin: 20px 0 0;
	padding: 15px 0 0;
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--color-secondary) 55%, transparent);
	color: var(--color-primary);
	font-family: var(--font-main);
	font-size: clamp(19px, 1.7vw, 25px);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	opacity: .9;
}
/* =========================================================
   SMALLER DESKTOP / TABLET
========================================================= */
@media (max-width: 991px) {
	.introSplit {
		padding: 45px 30px 0px;
	}
	.introInner {
		width: 100%;
		min-height: 330px;
		border-radius: 25px 0 25px 0;
	}
	.introPhoto {
		width: 70%;
	}
	.introText {
		flex-basis: 48%;
		padding: 38px 5% 38px 0;
	}
	.introText h1, .introText h1:has(small) {
		font-size: clamp(36px, 4.5vw, 48px);
	}
	.introText h1 small, .introText h1:has(small) small {
		margin-top: 15px;
		padding-top: 13px;
		font-size: 20px;
	}
}
/* =========================================================
   MOBILE
   CLEAN PHOTO ABOVE TITLE
   NO FADE / NO WATERCOLOR
========================================================= */
@media (max-width: 767px) {
	.introSplit {
		padding: 30px 15px 0px;
	}
	.introInner {
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 0;
		border-radius: 25px 0 25px 0;
		background-color: var(--color-background-bodyback);
		box-shadow:
			0 8px 24px color-mix(in srgb, var(--color-dark-bg) 8%, transparent);
	}
	/* Completely remove watercolor artwork */
	.introInner:before {
		display: none;
		content: none;
	}
	/* =============================================
       MOBILE PHOTOGRAPH
    ============================================= */
	.introPhoto {
		position: relative;
		top: auto;
		left: auto;
		bottom: auto;
		display: block;
		flex: 0 0 auto;
		width: 100%;
		height: 250px;
		min-height: 0;
		background-size: cover;
		background-repeat: no-repeat;
		/*
           Bias crop toward Connie on left.
           Adjust percentage for other page photos.
        */
		background-position: 28% center;
		/* Remove desktop fade completely */
		-webkit-mask-image: none;
		mask-image: none;
		border-radius: 0;
	}
	/* =============================================
       MOBILE TEXT BELOW PHOTO
    ============================================= */
	.introText {
		display: block;
		flex: 0 0 auto;
		width: 100%;
		min-height: 0;
		margin: 0;
		padding: 28px 30px 35px;
		background: transparent;
		z-index: 2;
	}
	/* =============================================
       MOBILE TITLE
    ============================================= */
	.introText h1, .introText h1:has(small) {
		width: 100%;
		max-width: none;
		margin: 0;
		font-size: clamp(32px, 6vw, 42px);
		line-height: 1.12;
		text-align: left;
	}
	/* =============================================
       MOBILE SUBTITLE
    ============================================= */
	.introText h1 small, .introText h1:has(small) small {
		width: 100%;
		max-width: 300px;
		margin-top: 17px;
		padding-top: 14px;
		font-size: 19px;
		line-height: 1.4;
	}
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
	.introSplit {
		padding: 25px 12px 0px;
	}
	.introInner {
		border-radius: 22px 0 22px 0;
	}
	.introPhoto {
		height: 215px;
		background-position: 28% center;
	}
	.introText {
		padding: 23px 23px 30px;
	}
	.introText h1, .introText h1:has(small) {
		font-size: 33px;
	}
	.introText h1 small, .introText h1:has(small) small {
		max-width: 260px;
		margin-top: 14px;
		padding-top: 12px;
		font-size: 18px;
	}
}
/* =========================================================
   EQUAL HEIGHT WELL ROWS
   Add .equalWellRow to any Bootstrap row
========================================================= */
@media (min-width: 768px) {
	.equalWellRow {
		display: flex;
		flex-wrap: wrap;
	}
	.equalWellRow > [class*="col-"] {
		float: none;
		display: flex;
	}
	.equalWellRow > [class*="col-"] > .well {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	/* Keep final button aligned at bottom */
	.equalWellRow > [class*="col-"] > .well > p:last-child {
		margin-top: auto;
	}
}
/* =========================================================
   TRAVEL GALLERY
   TEMPLATE STYLE OVERRIDES
========================================================= */
#Main > .ezPhotoGallery:nth-child(1 of .ezPhotoGallery) {
	margin-top: 46px;
}
.ezPhotoGallery {
	margin-left: -14px;
	margin-right: -14px;
	display: flex;
	flex-wrap: wrap;
}
/* =========================================================
   GALLERY COLUMNS
========================================================= */
.ezPhotoGallery > [class*="col-"] {
	padding-left: 14px;
	padding-right: 14px;
	margin-bottom: 32px;
	display: flex;
}
/* =========================================================
   CARD
========================================================= */
.ezPhotoGallery .thumbnail {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border:
		1px solid rgba(48, 56, 60, .12);
	border-radius: 4px;
	overflow: hidden;
	box-shadow:
		0 5px 18px rgba(48, 56, 60, .06);
	transition:
		transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ezPhotoGallery .thumbnail:hover {
	transform: translateY(-4px);
	border-color:
		rgba(182, 93, 62, .28);
	box-shadow:
		0 12px 28px rgba(48, 56, 60, .12);
}
/* =========================================================
   IMAGE
========================================================= */
.ezPhotoGallery .PGsquare {
	position: relative;
	width: 100%;
	margin: 0;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}
.ezPhotoGallery .PGsquare:before {
	content: "";
	display: block;
	padding-top: 68%;
}
/* Subtle image overlay on hover */
.ezPhotoGallery .PGsquare:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background:
		linear-gradient(to bottom, rgba(48, 56, 60, 0) 55%, rgba(48, 56, 60, .12) 100%);
	opacity: 0;
	transition:
		opacity .25s ease;
}
.ezPhotoGallery .thumbnail:hover .PGsquare:after {
	opacity: 1;
}
/* =========================================================
   CAPTION
========================================================= */
.ezPhotoGallery .caption {
	flex: 1 1 auto;
	padding:
		24px 22px 26px !important;
	display: flex;
	flex-direction: column;
	color: var(--color-body-text) !important;
}
/* =========================================================
   SMALL ACCENT LINE
========================================================= */
.ezPhotoGallery .caption:before {
	content: "";
	display: block;
	width: 42px;
	height: 2px;
	margin:
		0 0 17px;
	background-color: var(--color-accent);
}
/* =========================================================
   ALBUM TITLE
========================================================= */
.ezPhotoGallery .caption h3 {
	margin:
		0 0 22px;
	font-family: var(--font-Headings);
	font-size: 34px;
	font-weight: 400;
	line-height: 1.02;
	color: var(--color-dark-bg);
}
/* =========================================================
   PHOTO COUNT
========================================================= */
.ezPhotoGallery .caption h3 small {
	display: block;
	margin-top: 6px;
	font-family: var(--font-main);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-secondary);
}
/* =========================================================
   DESCRIPTION
========================================================= */
.ezPhotoGallery .caption > p {
	margin:
		0 0 20px;
	font-size: 18px;
	line-height: 1.5;
	color: var(--color-body-text);
}
/* =========================================================
   BUTTON AREA
   Push to bottom and center
========================================================= */
.ezPhotoGallery .caption > p:last-child {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: 8px;
	text-align: center;
}
.ezPhotoGallery .caption .btn {
	margin-top: 8px;
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width: 991px) {
	.ezPhotoGallery {
		margin-left: -10px;
		margin-right: -10px;
	}
	.ezPhotoGallery > [class*="col-"] {
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom: 25px;
	}
	.ezPhotoGallery .caption {
		padding:
			22px 20px 24px !important;
	}
	.ezPhotoGallery .caption h3 {
		margin-bottom: 20px;
		font-size: 31px;
	}
	.ezPhotoGallery .caption h3 small {
		font-size: 17px;
	}
	.ezPhotoGallery .caption > p {
		font-size: 17px;
	}
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width: 767px) {
	.ezPhotoGallery {
		display: block;
		margin-left: 0;
		margin-right: 0;
	}
	.ezPhotoGallery > [class*="col-"] {
		display: block;
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 28px;
	}
	/*
		Overrides old gallery rule:
		max-width: 340px;
	*/
	.ezPhotoGallery .thumbnail {
		width: 100% !important;
		max-width: 520px !important;
		height: auto !important;
		margin:
			0 auto 28px !important;
	}
	.ezPhotoGallery .PGsquare:before {
		padding-top: 62%;
	}
	.ezPhotoGallery .caption {
		padding:
			22px 20px 25px !important;
	}
	.ezPhotoGallery .caption:before {
		margin-bottom: 15px;
	}
	.ezPhotoGallery .caption h3 {
		margin-bottom: 20px;
		font-size: 29px;
		line-height: 1.05;
	}
	.ezPhotoGallery .caption h3 small {
		margin-top: 6px;
		font-size: 17px;
	}
	.ezPhotoGallery .caption > p {
		font-size: 17px;
		line-height: 1.5;
	}
	.ezPhotoGallery .caption > p:last-child {
		padding-top: 10px;
		text-align: center;
	}
}
/* =========================================================
   ENDORSEMENTS & REVIEWS PAGE
========================================================= */
#Main .testimoniesPage {
	max-width: 980px;
	margin:
		38px auto 70px;
	padding: 0;
}
/* =========================================================
   REVIEW TITLE / SOURCE
========================================================= */
#Main .testimoniesPage h3 {
	position: relative;
	margin: 0;
	padding:
		24px 32px 10px 38px;
	font-family: var(--font-Headings);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-primary);
	background-color: rgba(255, 255, 255, .72);
	border-top:
		1px solid rgba(48, 56, 60, .10);
	border-right:
		1px solid rgba(48, 56, 60, .10);
	border-left:
		4px solid var(--color-accent);
	border-radius:
		5px 5px 0 0;
}
/* Small accent line under source */
#Main .testimoniesPage h3:after {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin-top: 12px;
	background-color: var(--color-light-accent);
}
/* =========================================================
   REVIEW BODY
========================================================= */
#Main .testimoniesPage h3 + p {
	position: relative;
	margin:
		0 0 28px;
	padding:
		8px 38px 30px 72px;
	font-size: 18px;
	line-height: 1.65;
	color: var(--color-body-text);
	background-color: rgba(255, 255, 255, .72);
	border-right:
		1px solid rgba(48, 56, 60, .10);
	border-bottom:
		1px solid rgba(48, 56, 60, .10);
	border-left:
		4px solid var(--color-accent);
	border-radius:
		0 0 5px 5px;
	box-shadow:
		0 7px 20px rgba(48, 56, 60, .055);
}
/* =========================================================
   LARGE QUOTE MARK
========================================================= */
#Main .testimoniesPage h3 + p:before {
	content: "\201C";
	position: absolute;
	left: 28px;
	top: 4px;
	font-family: Georgia, serif;
	font-size: 58px;
	font-weight: 700;
	line-height: 1;
	color: var(--color-secondary);
	opacity: .22;
}
/* =========================================================
   REVIEWER NAME
========================================================= */
#Main .testimoniesPage h3 + p strong {
	display: inline-block;
	margin-bottom: 5px;
	font-family: var(--font-main);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-dark-bg);
}
/* =========================================================
   REMOVE OLD SEPARATOR LINES
========================================================= */
#Main .testimoniesPage hr {
	display: none;
}
/* =========================================================
   SUBTLE HOVER
========================================================= */
#Main .testimoniesPage h3, #Main .testimoniesPage h3 + p {
	transition:
		border-color .25s ease, box-shadow .25s ease;
}
#Main .testimoniesPage h3:hover, #Main .testimoniesPage h3:hover + p {
	border-left-color: var(--color-light-accent);
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width: 991px) {
	#Main .testimoniesPage {
		margin-top: 32px;
		margin-bottom: 55px;
	}
	#Main .testimoniesPage h3 {
		padding:
			22px 26px 10px 30px;
		font-size: 24px;
	}
	#Main .testimoniesPage h3 + p {
		padding:
			8px 30px 27px 64px;
		font-size: 17px;
	}
	#Main .testimoniesPage h3 + p:before {
		left: 24px;
		font-size: 52px;
	}
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width: 767px) {
	#Main .testimoniesPage {
		width: 100%;
		margin:
			28px auto 45px;
	}
	#Main .testimoniesPage h3 {
		padding:
			20px 20px 9px 23px;
		font-size: 22px;
		line-height: 1.25;
	}
	#Main .testimoniesPage h3 + p {
		margin-bottom: 22px;
		padding:
			7px 22px 24px 52px;
		font-size: 16px;
		line-height: 1.6;
	}
	#Main .testimoniesPage h3 + p:before {
		left: 18px;
		top: 5px;
		font-size: 44px;
	}
	#Main .testimoniesPage h3 + p strong {
		font-size: 15px;
	}
}