@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
	--font-Headings: "Merriweather", serif;
	--font-main: "Open Sans", sans-serif;
	--font-accent:"Merriweather", serif;

--color-primary: #B98272;
--color-secondary: #7F919D;
--color-accent: #B89B65;
--color-light-accent: #9FA99A;
--color-muted-accent: #B98272;

--color-body-text: #343536;
--color-background-light: #F4F0E7;

--color-dark-bg: #343536;
--color-dark-bg-rgb: 52, 53, 54;

	
	--btn-radius: 1px 1px 1px 1px;
}


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;
    opacity: 0;
    overflow-x: hidden;
    animation-name: fadeInB;
    animation-iteration-count: 1;
    animation-duration: 3s;
    animation-delay: 1;
    animation-fill-mode: forwards;
	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;
}
@keyframes fadeInB {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
#Main {
	position: relative;
    padding-top: 80px;
	
    padding-bottom: 0px;
}
.MainAjust {
	padding-top: 0px !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 var(--color-background-light);
    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 ------------------*/


/* ---- 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 {
	height: 1px;

	margin: 32px 0;

	border: 0;

	background-color:
		color-mix(
			in srgb,
			var(--color-primary) 45%,
			var(--color-background-light)
		);
}

@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;
	
}
.homeMainTop {
	position: relative;
	width: 100%;
	padding-top: 50px !important;
	padding-bottom: 50px !important;
	min-height: calc(100vh - 145px);
	text-align: justify;
	overflow: hidden;
	min-height: 700px;
background-image: url(/tempimg/back1.png);
	background-position: left center;
	background-size: cover; 
	display: flex;
  align-items:center;
	justify-content: center;
}



.homeMainTop > .row {
	position: relative;
	z-index: 2;
}
.homeMainTop .row{
	display: flex;
  align-items:center;
	justify-content: center;
	width:90%;
	max-width: 1600px;
	
}

.homeMainLeft {
	padding-right: 60px;
}
.homeMainTop h1{
	text-align: left;
}
.photoBox {
  position:relative;
  display: inline-block;
}
/*
.photoBox::after {
  content: "";
  position: absolute;
  top: -30px;
  left: 30px;
  width: 100%;
  height: 100%;
	background-color: var(--color-light-accent);
  border: 3px solid var(--color-light-accent); 
  z-index: 0;
}*/
.photoBox img {
  position: relative;
  z-index: 1;
  display: block;
	width:100%;
}
@media(max-width:992px) {
	.homeMainTop .row{
		display: block;
	}
	.homeMainLeft {
		padding-left: 20px;
		padding-right: 20px;
	}
/*	.photoBox {
		display: block;
		width:80%;
		max-width: 400px;
		margin: auto;
		margin-bottom: 40px;
	}*/
}
.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) {
	.homeMainTop {
		text-align: left;
		padding-top: 70px !important;
		padding-bottom: 40px !important;
		
	}
    .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 {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
}
.err {
    border-color: red;
}
.imglinkres {
    /*border: 3px solid var(--color-background-light);
	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: var(--color-background-light);
    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 var(--color-background-light);
    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: 40px;
	line-height: 1.05;
    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);
}

h1:has(small) {
	flex-wrap: wrap;
	row-gap: 0;
}


h1:has(small):after {
	order: 1;
}


h1:has(small) small {
	flex: 0 0 100%;
	order: 2;
	margin-top: 5px;
}*/


#Main .header {
	margin: 0 0 45px;
	padding: 0;
}


#Main .header h1 {
	display: flex;
	flex-direction: column;
	align-items: stretch;

	width: 100%;

	margin: 0;

	color: var(--color-dark-bg);

	font-family: var(--font-Headings);
	font-weight: 400;
	line-height: .98;
}


/*
   Force SMALL above the main title,
   even if it appears after the title in the HTML.
*/

#Main .header h1 small,
#Main .header h1 .small {
	order: -1;

	display: flex;
	align-items: center;

	width: 100%;

	gap: 20px;

	margin: 0 0 14px;

	font-family: var(--font-main);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;

	letter-spacing: 3px;
	text-transform: uppercase;

	color: var(--color-dark-bg);
}


/* Line beside small heading */

#Main .header h1 small:after,
#Main .header h1 .small:after {
	content: "";

	flex: 1;

	border-top: 2px solid var(--color-light-accent);
}


/*
   Kill any old line being added
   after the entire H1.
*/

#Main .header h1:after {
	display: none !important;
	content: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px) {

	#Main .header {
		margin-bottom: 35px;
	}


	#Main .header h1 small,
	#Main .header h1 .small {
		gap: 15px;

		margin-bottom: 11px;

		font-size: 11px;
		letter-spacing: 2.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;
}
/* Small eyebrow text inside headings */

h2 small,
h2 .small,
h3 small,
h3 .small {
	margin: 0 0 15px;

	font-family: var(--font-main);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;

	letter-spacing: 3px;
	text-transform: uppercase;

	color: var(--color-dark-bg);
}


/* Label + decorative line */

h2 small,
h3 small {
	display: flex;
	align-items: center;
	gap: 20px;
}

h2 small:after,
h3 small:after {
	content: "";

	flex: 1;

	border-top: 2px solid var(--color-light-accent);
}


/* On colored panels use the cream line */

.homeBooks h2 small:after {
	border-top-color: var(--color-background-light);
}
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: 35px 0px 25px 0px;
    font-weight: 400;
   	color: var(--color-primary);
	
    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-filter, .hide-store-space {
    display: none;
}
.hide-store-sort {
    margin-top: -40px;
    margin-bottom: 40px;
    display: none;
}
/* =========================================================
   HORIZONTAL RULES
========================================================= */

#Main hr {
	height: 1px;

	margin: 32px 0;

	border: 0;

	background-color:
		color-mix(
			in srgb,
			var(--color-primary) 38%,
			var(--color-background-light)
		);
}

/* =========================================================
   WELLS — SAGE + BOTANICAL
========================================================= */

#Main {
	isolation: isolate;
}


#Main .well {
	position: relative;

	margin: 45px 10px 55px 0;
	padding: 54px 44px;

	background-color: var(--color-light-accent) !important;
	background-image: none !important;

	border: 0 !important;
	border-radius: 0 !important;

	box-shadow: none !important;

	overflow: visible;

	/* IMPORTANT — do not set a z-index here */
}

#Main .well h2 small:after,
#Main .well h2 .small:after {
	border-top: 2px solid var(--color-background-light) !important;
}
/* =========================================================
   BOTANICAL OVERLAY
========================================================= */

#Main .well:before {
	content: "";

	position: absolute;
	inset: 0;

	background-image: url('/tempimg/overlay_5.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;

	opacity: .25;

	pointer-events: none;

	z-index: 0;
}


/* =========================================================
   OFFSET BORDER BEHIND
========================================================= */

#Main .well:after {
	content: "";

	position: absolute;

	top: 10px;
	left: 10px;
	right: -10px;
	bottom: -10px;

	border: 1px solid var(--color-dark-bg);

	background: transparent;

	pointer-events: none;

	z-index: -1;
}


/* =========================================================
   CONTENT ABOVE BOTANICAL
========================================================= */

#Main .well > * {
	position: relative;
	z-index: 1;
}


#Main .well > *:first-child {
	margin-top: 0;
}


#Main .well > *:last-child {
	margin-bottom: 0;
}


#Main .well h2,
#Main .well h3,
#Main .well h4 {
	color: var(--color-dark-bg);
}
/* =========================================================
   EQUAL HEIGHT WELL ROWS
   Add .equalWellRow to any Bootstrap row
========================================================= */

@media (min-width: 768px) {

	.equalWellRow {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}


	/* Keep normal Bootstrap column gutters,
	   but make each column equal height */
	.equalWellRow > [class*="col-"] {
		float: none;

		display: flex;
		flex-direction: column;
	}


	/* If the column contains a well,
	   stretch the well to fill the column height */
	.equalWellRow > [class*="col-"] > .well {
		flex: 1 1 auto;

		display: block;

		width: 100%;
		height: 100%;

		margin-top: 0;
		margin-bottom: 0;
	}

}

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: var(--color-background-light);
    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: var(--color-background-light);
    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;
    }
}

/*------------------Testimonies----------------*/
.contentNoTilt {
	position: relative;
	padding: 60px 25px 60px 25px;
	background-image: url(/tempimg/EndoBack.jpg);
	background-position: center center;
	background-size: cover;
	background-attachment:fixed;
	color: var(--color-background-light);
	margin: 0px 0px 0px 0px;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.TiltCover {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
background: linear-gradient(
    to bottom,
    rgba(var(--color-dark-bg-rgb), .5) 0%,
	 rgba(var(--color-dark-bg-rgb), .7) 35%,
    rgba(var(--color-dark-bg-rgb), .7) 65%,
    rgba(var(--color-dark-bg-rgb), .5) 100%
);
	
}
.TiltCover:after {
	content: "";
	position: absolute;
	top:0px;
	right:0px;
	left:0px;
	bottom:0px;
	background: url("/tempimg/film-grain-intense.png");
}



.contentNoTilt .left, .contentNoTilt .right {
	background-image: none !important;
	z-index: 1000;
}
.contentNoTilt .carousel-control {
	opacity: 1 !important;
}
.pageInner p{
	margin-top: -10px;
}
#contentCar  a {
	color: var(--color-background-light);
}
#contentCar  a:hover, #contentCar  a:focus, #contentCar  a:active {
	text-decoration: none;
	color: var(--color-light-accent);
}
.carousel-control {
	color: var(--color-light-accent);
}
.carousel-control:hover, .carousel-control:focus, .carousel-control:active {
	text-decoration: none;
	color: var(--color-background-light);
}

@media screen and (min-width: 768px) {
	.carousel-control .glyphicon-chevron-left {
		margin-left: -60px;
	}
	.carousel-control .glyphicon-chevron-right {
		margin-right: -60px;
	}
}
.contentFlex {}
.contentFlex {
	margin: auto;
	max-width: 1600px;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 100%;
	width: 100%;
}
.carousel-inner, .carousel, .carousel-inner .item, .pageInner {
	width: 100%;
}
.contentImage {
	height: 100%;
}
.contentText {
	padding: 40px;
	width: 100%;
}
.contentFlex h3 {
   /* font-size: 42px;
	line-height: 36px;
    font-weight: bold;*/
    color: var(--color-background-light);
    text-shadow: 0px 0px 1px #464646;
    text-align: center;

    margin: 0 auto 24px auto;
    padding-bottom: 0px;
	width:50%;
    max-width: 900px;

    border-bottom: 3px solid var(--color-light-accent);
}
.contentFlex p {
	text-align: center;
	font-size: 26px;
	margin-right: 10vw;
	margin-left: 10vw;
	margin-bottom: 15px;
	text-shadow: 0px 0px 1px #464646;
}
.contentFlex .contWho {
	font-size: 20px;
}
.contentFlex .stars {
	text-align: center;
	color: #FFD138;
	font-size: 36px;

}
.contentFlex .stars .fa-star {
	padding: 0px 10px 0px 10px;
	text-shadow: 0px 0px 1px #464646;
}
.contentImage {
	background-size: cover;
	background-position: center center;
}
#contentSlide .carousel-indicators li {
	height: 20px;
	width: 20px;
}
/*---------------*/
@media(max-width:768px) {
	.contentFlex h3 {
			width:90%;
	}
	.contentImage {
		margin: auto;
		margin-top: 40px;
		height: 20vh;
		max-width: 280px;
	}
	#contentSlide .carousel-indicators {
		display: none;
	}

	.contentNoTilt {
		background-attachment: inherit;
		padding: 60px 0px 60px 0px;
	}
.contentText {
	padding: 20px 0px 20px 0px;
	font-size:22px; 
}
	.TiltCover {
		background-attachment: inherit;
	}
    #contentSlide .carousel-inner > .item {
        display: block !important;
        position: relative !important;
        left: auto !important;
        transform: none !important;
        transition: none !important;
        height: auto !important;
        margin-bottom: 35px;
    }

    #contentSlide .carousel-inner > .item:not(:nth-child(-n+1)) {
        display: none !important;
    }

    #contentSlide .carousel-control,
    #contentSlide .carousel-indicators {
        display: none !important;
    }

    .contentFlex {
        display: block;
        height: auto;
    }

  
}
/* =========================================================
   HOME BLOG / RECENT POSTS
========================================================= */

.homePostsSection {
	width: 100%;

	padding: 80px 0 90px;

	background: var(--color-background-light);
}


/*
   Matches book section:
   4vw equivalent on each side,
   capped at same 1650px width.
*/

.homePostsInner {
	width: 92%;
	max-width: 1650px;

	margin: 0 auto;
	padding: 0;
}


.homePostsInner > h2 {
	margin-top: 0;
	margin-bottom: 35px;
}


/* =========================================================
   BOOTSTRAP ROW
========================================================= */

.homeBlogRow {
	margin-left: -12px;
	margin-right: -12px;
}


/* Slightly tighter Bootstrap gutters */

.homeBlogFeatureCol,
.homeBlogSideCol {
	padding-left: 12px;
	padding-right: 12px;
}


/* =========================================================
   FEATURED POST
========================================================= */

.homeBlogFeatured {
	position: relative;

	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100%;

	border: 1px solid
		color-mix(
			in srgb,
			var(--color-dark-bg) 20%,
			transparent
		);

	background-color:
		color-mix(
			in srgb,
			var(--color-secondary) 10%,
			var(--color-background-light)
		);

	overflow: hidden;
}


/* Featured image */

.homeBlogFeaturedImage {
	display: block;

	height: 440px;

	overflow: hidden;
}


/* =========================================================
   SHARED PHOTO
========================================================= */

.homeBlogPhoto {
	width: 100%;
	height: 100%;

	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;

	transform: scale(1);

	transition: transform .55s ease;
}


.homeBlogFeatured:hover .homeBlogPhoto,
.homeBlogSmall:hover .homeBlogPhoto {
	transform: scale(1.025);
}


/* =========================================================
   FEATURED CONTENT
========================================================= */

.homeBlogFeaturedContent {
	position: relative;

	padding: 28px 38px 32px;

	background-color:
		color-mix(
			in srgb,
			var(--color-secondary) 10%,
			var(--color-background-light)
		);

	overflow: hidden;
}


/* Quilt texture */

.homeBlogFeaturedContent:before {
	content: "";

	position: absolute;
	inset: 0;

	background-image: url('/tempimg/quilt_2.png');
	background-repeat: repeat;

	opacity: .035;

	pointer-events: none;

	z-index: 0;
}


.homeBlogFeaturedContent > * {
	position: relative;
	z-index: 1;
}


/* =========================================================
   FEATURED TITLE
========================================================= */

/*
   Merriweather, weight and color still come
   from the site's global H3.
*/

.homeBlogFeaturedContent h3 {
	margin: 0 0 18px;

	font-size: clamp(34px, 2.25vw, 46px);
	line-height: 1.12;

	text-align: left;
}


.homeBlogFeaturedContent h3 small {
	margin-bottom: 13px;
}


/* Let heading links inherit global heading appearance */

.homeBlogFeaturedContent h3 > a,
.homeBlogSmallContent h3 > a {
	color: inherit;
}


.homeBlogFeaturedContent h3 > a:hover,
.homeBlogSmallContent h3 > a:hover {
	color: var(--color-secondary);
}


/* Featured excerpt */

.homeBlogFeaturedContent p {
	margin: 0;

	font-size: 19px;
	line-height: 1.5;
}


/* =========================================================
   RIGHT COLUMN
========================================================= */

.homeBlogSideCol {
	display: flex;
	flex-direction: column;
}


/* =========================================================
   SMALL POSTS
========================================================= */

.homeBlogSmall {
	display: flex;
	align-items: stretch;

	flex: 1 1 0;

	width: 100%;
	min-height: 190px;

	margin-bottom: 18px;

	border: 1px solid
		color-mix(
			in srgb,
			var(--color-dark-bg) 20%,
			transparent
		);

	background-color:
		color-mix(
			in srgb,
			var(--color-secondary) 10%,
			var(--color-background-light)
		);

	overflow: hidden;

	transition:
		transform .25s ease,
		box-shadow .25s ease;
}


.homeBlogSmall:last-child {
	margin-bottom: 0;
}


.homeBlogSmall:hover {
	transform: translateY(-2px);

	box-shadow:
		0 8px 22px
		color-mix(
			in srgb,
			var(--color-dark-bg) 7%,
			transparent
		);
}


/* =========================================================
   SMALL POST IMAGE
========================================================= */

.homeBlogSmallImage {
	display: block;

	flex: 0 0 46%;

	overflow: hidden;
}


/* =========================================================
   SMALL POST CONTENT
========================================================= */

.homeBlogSmallContent {
	position: relative;

	display: flex;
	align-items: center;

	flex: 1 1 auto;
	min-width: 0;

	padding: 18px 20px;

	background-color:
		color-mix(
			in srgb,
			var(--color-secondary) 10%,
			var(--color-background-light)
		);

	overflow: hidden;
}


/* Same subtle quilt texture */

.homeBlogSmallContent:before {
	content: "";

	position: absolute;
	inset: 0;

	background-image: url('/tempimg/quilt_2.png');
	background-repeat: repeat;

	opacity: .025;

	pointer-events: none;

	z-index: 0;
}


.homeBlogSmallContent > * {
	position: relative;
	z-index: 1;
}


/* =========================================================
   SMALL TITLES
========================================================= */

.homeBlogSmallContent h3 {
	width: 100%;

	margin: 0;

	font-size: clamp(19px, 1.25vw, 25px);
	line-height: 1.12;

	text-align: left;

	overflow-wrap: break-word;
}


.homeBlogSmallContent h3 small {
	margin-bottom: 10px;

	font-size: 11px;
	letter-spacing: 2px;
}


/* =========================================================
   READ MORE
========================================================= */

.homeBlogReadMore {
	white-space: nowrap;

	font-weight: 500;
}


/* =========================================================
   DESKTOP EQUAL HEIGHT
========================================================= */

@media(min-width: 992px) {

	.homeBlogRow {
		display: flex;
		align-items: stretch;
	}


	.homeBlogFeatureCol,
	.homeBlogSideCol {
		float: none;
	}


	.homeBlogFeatureCol {
		display: flex;
	}


	.homeBlogFeatured {
		flex: 1 1 auto;
	}

}


/* =========================================================
   SMALLER DESKTOP
========================================================= */

@media(min-width: 992px) and (max-width: 1250px) {

	.homeBlogFeaturedImage {
		height: 390px;
	}


	.homeBlogSmall {
		min-height: 175px;
	}


	.homeBlogSmallImage {
		flex-basis: 43%;
	}


	.homeBlogSmallContent {
		padding: 15px 16px;
	}


	.homeBlogSmallContent h3 {
		font-size: 20px;
	}

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width: 991px) {

	.homePostsSection {
		padding-top: 65px;
		padding-bottom: 70px;
	}


	.homePostsInner {
		width: 92%;
	}


	.homeBlogFeatureCol,
	.homeBlogSideCol {
		width: 100%;
		float: none;
	}


	.homeBlogFeatured {
		margin-bottom: 20px;
	}


	.homeBlogFeaturedImage {
		height: 420px;
	}


	.homeBlogSmall {
		min-height: 170px;
	}


	.homeBlogSmallImage {
		flex-basis: 42%;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width: 767px) {

	.homePostsSection {
		padding: 55px 0 60px;
	}


	.homePostsInner {
		width: auto;

		margin-left: 20px;
		margin-right: 20px;
	}


	.homePostsInner > h2 {
		margin-bottom: 25px;
	}


	.homeBlogRow {
		margin-left: 0;
		margin-right: 0;
	}


	.homeBlogFeatureCol,
	.homeBlogSideCol {
		padding-left: 0;
		padding-right: 0;
	}


	/* Featured */

	.homeBlogFeaturedImage {
		height: 280px;
	}


	.homeBlogFeaturedContent {
		padding: 24px 22px 28px;
	}


	.homeBlogFeaturedContent h3 {
		font-size: 32px;
		line-height: 1.12;
	}


	.homeBlogFeaturedContent p {
		font-size: 17px;
	}


	/* Small posts */

.homeBlogSmall {
	flex: 0 0 auto;

	height: auto;
	min-height: 135px;

	margin-bottom: 15px;

	overflow: visible;
}
.homeBlogSideCol {
	display: block;
}

.homeBlogSmallContent {
	height: auto;
	min-height: 135px;

	overflow: visible;
}

	.homeBlogSmallImage {
		flex-basis: 42%;
	}


	.homeBlogSmallContent {
		padding: 14px 16px;
	}


	.homeBlogSmallContent h3 {
		font-size: 20px;
		line-height: 1.12;
	}


	.homeBlogSmallContent h3 small {
		font-size: 10px;
		letter-spacing: 1.5px;
	}

}
/* ----------------------------------------------------
   NAVIGATION
---------------------------------------------------- */

.mainMenu {
	position: relative;
	z-index: 300;
	width: 100%;
	background: #fff;
	border-bottom: 1px solid rgba(52,53,54,.10);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}


/* Main wrapper */

.menuInner {
	width: 100%;
	max-width: 1900px;
	margin: 0 auto;
	padding: 14px 30px 24px;
}


/* ----------------------------------------------------
   LOGO
---------------------------------------------------- */

.menulogo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 8px;
	margin-bottom: 16px;
}

.menulogo img {
	display: block;
	width: 428px;
	height: auto;
}


/* Mobile toggle hidden on desktop */

.navbar-header {
	display: none;
}


/* ----------------------------------------------------
   NAV
---------------------------------------------------- */

.navbar-custom {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	min-height: 0;
}

.navbar-custom .navbar-inner {
	padding: 0;
}


/* Override Bootstrap 3 navbar floats */

.navbar-custom .nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	float: none;
	width: 100%;
	margin: 0;
}

.navbar-custom .nav:before,
.navbar-custom .nav:after {
	display: none;
	content: none;
}

.navbar-custom .nav > li {
	float: none;
	display: block;
}


/* Main links */

.navbar-custom .nav > li > a {
	position: relative;
	display: block;

	padding: 10px 14px;

	font-family: var(--font-main);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;

	text-transform: uppercase;
	letter-spacing: 2px;

	color: var(--color-primary);
	background: transparent;
}


/* Hover / active */

.navbar-custom .nav > li > a:hover,
.navbar-custom .nav > li > a:focus,
.navbar-custom .nav > li.active > a,
.navbar-custom .nav > li.open > a {
	color: var(--color-primary);
	background: transparent;
	text-decoration: none;
}


/* Underline */

.navbar-custom .nav > li > a:after {
	content: "";

	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;

	height: 2px;

	background: var(--color-primary);

	transform: scaleX(0);
	transform-origin: left center;

	transition: transform .2s ease;
}

.navbar-custom .nav > li > a:hover:after,
.navbar-custom .nav > li.active > a:after,
.navbar-custom .nav > li.open > a:after {
	transform: scaleX(1);
}


/* ----------------------------------------------------
   DROPDOWN
---------------------------------------------------- */

.navbar-custom .dropdown-menu {
	min-width: 210px;

	padding: 8px 0;

	border: 0;
	border-radius: 0;

	box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

.navbar-custom .dropdown-menu > li > a {
	padding: 10px 18px;

	font-family: var(--font-main);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;

	text-transform: uppercase;
	letter-spacing: 1.5px;

	color: var(--color-primary);
}

.navbar-custom .dropdown-menu > li > a:hover,
.navbar-custom .dropdown-menu > li > a:focus {
	color: #fff;
	background: var(--color-primary);
}


/* Admin items */

.navbar-custom .admin-link > a {
	font-weight: 700;
}


/* ----------------------------------------------------
   MOBILE BUTTON
---------------------------------------------------- */

.navbar-toggle {
	margin: 0;
	padding: 8px;

	border: 2px solid var(--color-primary);
	border-radius: 0;

	background: transparent;
}

.navbar-header .icon-bar {
	background-color: var(--color-primary);
}


/* Anchor spacing */

#Subscribe {
	scroll-margin-top: 50px;
}


/* ----------------------------------------------------
   MOBILE
---------------------------------------------------- */

@media (max-width: 768px) {

	#Subscribe {
		scroll-margin-top: 0;
	}

	.menuInner {
		padding: 12px 18px;
	}

	.menulogo {
		justify-content: space-between;
		margin-bottom: 0;
	}

	.menulogo img {
		width: 200px;
	}

	.navbar-header {
		display: block;
	}

	.navbar-custom {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.navbar-collapse {
		width: 100%;
		padding: 0;

		border: 0;
		box-shadow: none;
	}

	.navbar-custom .nav {
		display: block;
		width: 100%;
		margin: 0;

		text-align: center;
	}

	.navbar-custom .nav > li {
		display: block;
		width: 100%;
	}

	.navbar-custom .nav > li > a {
		padding: 13px 10px;

		font-size: 18px;

		text-align: center;
	}

	.navbar-custom .nav > li > a:after {
		display: none;
	}


	/* Dropdown becomes part of mobile flow */

	.navbar-custom .dropdown-menu {
		position: static;
		float: none;

		width: 100%;

		text-align: center;

		background: #f8f8f8;
		box-shadow: none;
	}

	.navbar-custom .dropdown-menu > li > a {
		text-align: center;
	}

}
/*---------- Buttons ------------*/
/*---------- Buttons ------------*/

.btn {
	display: inline-block;
	padding: 15px 42px;

	font-family: var(--font-main);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;

	color: var(--color-dark-bg) !important;

	border: 2px solid var(--color-dark-bg) !important;
	border-radius: var(--btn-radius);

	text-transform: none;
	letter-spacing: 0;
	var(--color-background-light)-space: normal;

	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;

	transition: all .25s ease;
}
.btn {
	white-space: normal;
}

/* PRIMARY
   Main Bobby-style button */

.btn-primary {
	background: var(--color-background-light) !important;
	color: var(--color-dark-bg) !important;
}


/* SUCCESS
   Soft sage */

.btn-success {
	background: var(--color-light-accent) !important;
	color: var(--color-dark-bg) !important;
}


/* INFO
   Soft antique gold */

.btn-info {
	background: var(--color-secondary) !important;
	border: 1px solid var(--color-dark-bg) !important;
	color: var(--color-background-light) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
	background: #fff !important;
	border-color: var(--color-dark-bg) !important;
	color: var(--color-dark-bg) !important;

	background-image: none !important;
	box-shadow: none !important;
}


/* DEFAULT
   Dusty rose */

.btn-default {
	background: var(--color-primary) !important;
	color: var(--color-dark-bg) !important;
}


/* All light button hovers */

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,


.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
	background: #fff !important;
	border-color: var(--color-dark-bg) !important;
	color: var(--color-dark-bg) !important;

	background-image: none !important;
	box-shadow: none !important;
	outline: none !important;
}


/* DARK BUTTON
   Use sparingly for the strongest CTA */

.btn-dark {
	background: var(--color-dark-bg) !important;
	border: 1px solid var(--color-dark-bg) !important;
	color: #fff !important;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
	background: #fff !important;
	border-color: var(--color-dark-bg) !important;
	color: var(--color-dark-bg) !important;
}


/* Small */

.btn-sm {
	padding: 10px 26px;
	font-size: 15px;
}
/*---------- 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: var(--color-background-light);
    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: var(--color-background-light);
}
.s1 {
    background-image: url(/tempimg/sr-h-1.jpeg);
    background-size: cover;
    background-position: left center;
}
.s2 {
    background-color: var(--color-dark-bg);
    color: var(--color-background-light);
}
.s3 {
    background-color: rgba(43,47,68,.95);
    color: var(--color-background-light);
    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: var(--color-background-light);
}
@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";
}

/*--------------------BUBBLES END ------------------------------------*/
/* Target the column that contains the submit button */
#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;
}
.strbutton {
	background-color: var(--color-muted-accent) !important;
	padding:10px 0px 10px 0px !important;
}
.strbutton .btn{
	width:90%;
	border-radius: 0px;
}
.strwell p:has(.vid_cat) {
	padding-bottom: 12px;
}

/*------------- PAGE INTRO ----------*/
/* =========================================================
   PAGE INTRO
========================================================= */

.introSplit {
	position: relative;

	width: 92%;
	max-width: 1400px;

	margin: 70px auto 46px;

	padding: 0;

	background: transparent;

	overflow: visible;
}


/* =========================================================
   INNER FRAME
========================================================= */

.introInner {
	position: relative;

	display: flex;
	align-items: stretch;

	width: 100%;

	min-height: 430px;

	background: var(--color-background-light);
}


/* Offset border */

.introInner:after {
	content: "";

	position: absolute;

	top: 10px;
	left: 10px;
	right: -10px;
	bottom: -10px;

	border: 1px solid var(--color-dark-bg);

	pointer-events: none;

	z-index: -1;
}


/* =========================================================
   LEFT IMAGE
========================================================= */

.introPhoto {
	position: relative;

	width: 53%;
	min-height: 430px;

	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;

	overflow: hidden;

	z-index: 1;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.introText {
	position: relative;

	width: 47%;

	display: flex;
	align-items: center;

	padding: 65px 5vw;

	background-color: var(--color-light-accent);

	overflow: hidden;

	z-index: 1;
}


/* =========================================================
   BOTANICAL — BOTTOM LEFT
========================================================= */

.introText:before {
	content: "";

	position: absolute;

	left: 0;
	bottom: 0;

	width: 55%;
	height: 70%;

	background-image: url('/tempimg/overlay_6.png');
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: contain;

	opacity: .18;

	pointer-events: none;

	z-index: 1;
}


/* =========================================================
   BOTANICAL — TOP RIGHT
========================================================= */

.introText:after {
	content: "";

	position: absolute;

	top: 0;
	right: 0;

	width: 55%;
	height: 70%;

	background-image: url('/tempimg/overlay_6.png');
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: contain;

	opacity: .18;

	transform: scale(-1, -1);

	pointer-events: none;

	z-index: 1;
}


/* =========================================================
   TITLE
========================================================= */

.introText h1 {
	position: relative;

	display: block;

	width: 100%;

	margin: 0;

	color: var(--color-dark-bg);

	font-family: var(--font-Headings);
	font-size: 54px;
	font-weight: 400;
	line-height: 1.1;

	letter-spacing: -1px;

	z-index: 2;
}


/* =========================================================
   SMALL PAGE LABEL
========================================================= */

.introText h1 small,
.introText h1 .small {
	display: flex;
	align-items: center;

	width: 100%;

	gap: 20px;

	margin: 0 0 18px;

	font-family: var(--font-main);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;

	letter-spacing: 3px;
	text-transform: uppercase;

	color: var(--color-dark-bg);
}


/* Line after label */

.introText h1 small:after,
.introText h1 .small:after {
	content: "";

	flex: 1;

	border-top: 2px solid var(--color-background-light);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width: 991px) {

	.introSplit {
		width: 90%;

		margin-top: 60px;
		margin-bottom: 70px;
	}


	.introInner {
		display: block;

		min-height: 0;
	}


	.introPhoto,
	.introText {
		width: 100%;
	}


	.introPhoto {
		min-height: 430px;
	}


	.introText {
		min-height: 300px;

		padding: 60px 7vw;
	}


	.introText h1 {
		font-size: 54px;
		line-height: .98;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width: 767px) {

	.introSplit {
		width: auto;

		margin: 45px 20px 60px;
	}


	.introInner:after {
		top: 7px;
		left: 7px;
		right: -7px;
		bottom: -7px;
	}


	.introPhoto {
		min-height: 320px;
	}


	.introText {
		min-height: 250px;

		padding: 48px 28px;
	}


	.introText:before,
	.introText:after {
		width: 65%;
		height: 75%;

		opacity: .12;
	}


	.introText h1 {
		font-size: 44px;
		line-height: 1;
		letter-spacing: -.5px;
	}


	.introText h1 small,
	.introText h1 .small {
		gap: 15px;

		margin-bottom: 14px;

		font-size: 11px;

		letter-spacing: 2.5px;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width: 480px) {

	.introPhoto {
		min-height: 275px;
	}


	.introText {
		padding: 40px 22px;
	}


	.introText h1 {
		font-size: 38px;
		line-height: 1.02;
	}

}

/* ---------------------------------------------------------
   REUSABLE FABRIC TEXTURE OVERLAY
--------------------------------------------------------- */

.fabric-overlay {
	position: relative;
	isolation: isolate;

	--fabric-opacity: .9;
}


/* Fabric sits over background, under content */

.fabric-overlay:after {
	content: "";

	position: absolute;
	inset: 0;

	background-image: url('/tempimg/fabric_overlay_white_strong.png');
	background-repeat: repeat;
	background-position: bottom right;

	opacity: var(--fabric-opacity);

	border-radius: inherit;

	pointer-events: none;

	z-index: 0;
}


/* Keep actual content above texture */

.fabric-overlay > * {
	position: relative;
	z-index: 1;
}
/* =========================================================
   BLOG ARTICLE PAGE
========================================================= */

.contentBack {
	background-color: var(--color-background-light);
}


/* =========================================================
   PAGE WIDTH
   Matches homepage sections
========================================================= */

#Main:has(.blogContent) {
	width: 92%;
	max-width: 1650px;

	margin-left: auto;
	margin-right: auto;

	padding-top: 70px;
	padding-bottom: 95px;
}


/* =========================================================
   DESKTOP COLUMNS
========================================================= */

@media(min-width: 992px) {

	#Main:has(.blogContent) > .row {
		display: flex;
		align-items: flex-start;
	}

	#Main:has(.blogContent) > .row > .blogContent,
	#Main:has(.blogContent) > .row > #BlogTopics {
		float: none;
	}

}


/* =========================================================
   MAIN ARTICLE COLUMN
========================================================= */

.blogContent {
	position: relative;

	padding-right: 45px;
}


/* =========================================================
   ARTICLE TITLE AREA
========================================================= */

.blogContent > h2 {
	position: relative;

	margin-top: 0;

	overflow: visible;
}


/*
   Subtle botanical in upper-right.
   This keeps the title area light instead of turning it
   into another large colored panel.
*/

.blogContent > h2:before {
	content: "";

	position: absolute;

	top: -25px;
	right: 0;

	width: 230px;
	height: 165px;

	background-image: url('/tempimg/overlay_6.png');
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: contain;

	opacity: .10;

	transform: scale(-1, -1);

	pointer-events: none;

	z-index: 0;
}


/*
   Global H2 typography remains intact.
   We only make sure text stays over the botanical.
*/

.blogContent > h2 {
	z-index: 1;
}


/* =========================================================
   DATE / AUTHOR
========================================================= */

.blogContent > h2 small {
	position: relative;

	display: block;

	margin-top: 10px;
	margin-bottom: 0;

	color: var(--color-primary);

	text-transform: none;

	z-index: 2;
}


/* Don't use normal H2-small line on the article date */

.blogContent > h2 small:after {
	display: none;
	content: none;
}


/* =========================================================
   ARTICLE CATEGORY
========================================================= */

.catHolder {
	display: flex;
	align-items: center;

	width: 100%;

	gap: 20px;

	margin: 22px 0 30px;
	padding: 0;

	background: transparent;

	border: 0;
	border-radius: 0;

	color: var(--color-dark-bg);

	font-family: var(--font-main);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;

	letter-spacing: 2.5px;

	text-transform: uppercase !important;
}


/*
   Run line across all remaining space.
*/

.catHolder:after {
	content: "";

	flex: 1 1 auto;

	min-width: 40px;

	border-top: 2px solid var(--color-light-accent);
}


/* =========================================================
   ARTICLE BODY
========================================================= */
.blogContent {
	position: relative;
	z-index: 0;
}


#blogAudioText {
	position: relative;

	margin: 0 12px 12px 0;
	padding: 42px 42px 45px;

	background:
		color-mix(
			in srgb,
			var(--color-background-light) 60%,
			#fff
		);

	/* IMPORTANT */
	z-index: auto;

	overflow: visible;
}


#blogAudioText:after {
	content: "";

	position: absolute;

	top: 10px;
	left: 10px;
	right: -11px;
	bottom: -11px;

	border: 1px solid var(--color-dark-bg);

	pointer-events: none;

	z-index: -1;
}


/* =========================================================
   ARTICLE TEXT
========================================================= */

#blogAudioText p {
	margin-bottom: 24px;
}


#blogAudioText p:first-child {
	margin-top: 0;
}


#blogAudioText p:last-child {
	margin-bottom: 0;
}


#blogAudioText ul,
#blogAudioText ol {
	margin-top: 18px;
	margin-bottom: 25px;
}


#blogAudioText li {
	margin-bottom: 4px;
}


#blogAudioText em {
	color: inherit;
}





/* =========================================================
   ARTICLE LINKS
========================================================= */

#blogAudioText a {
	color: var(--color-secondary);
}


#blogAudioText a:hover,
#blogAudioText a:focus {
	color: var(--color-primary);
}


/* =========================================================
   SHARE AREA
========================================================= */

.shrCR {
	margin-top: 38px;
}


.shr_class {
	min-height: 38px;
}


.social-share {
	display: flex;
	flex-wrap: wrap;

	gap: 8px;

	margin-top: 8px;
	margin-bottom: 25px;
}


/*
   Let main button styles control appearance.
*/

.social-share .btn {
	margin: 0;
}


/* =========================================================
   BOTTOM DIVIDERS
========================================================= */

.blogContent > hr {
	height: 1px;

	margin-top: 28px;
	margin-bottom: 0;

	border: 0;

	background-color:
		color-mix(
			in srgb,
			var(--color-dark-bg) 15%,
			transparent
		);
}


.blogContent > hr + hr {
	margin-top: 20px;
}


/* =========================================================
   COMMENT BUTTON ROW
========================================================= */

.blogContent > hr + .row,
.blogContent > hr + hr + .row {
	display: flex !important;
	align-items: center;

	width: 100%;

	margin: 22px 0 0 !important;
	padding: 0;
}


.blogContent > hr + .row > .col-sm-12,
.blogContent > hr + hr + .row > .col-sm-12 {
	float: none;

	width: auto;

	padding: 0;
}


.blogContent > hr + .row > .col-sm-12:first-child,
.blogContent > hr + hr + .row > .col-sm-12:first-child {
	margin-right: auto;
}


.blogContent > hr + .row > .col-sm-12:last-child,
.blogContent > hr + hr + .row > .col-sm-12:last-child {
	margin-left: auto;

	text-align: right;
}


.blogContent > hr + .row .btn,
.blogContent > hr + hr + .row .btn {
	margin: 0 !important;
}


/* =========================================================
   COMMENTS
========================================================= */

.blogContent .BlogComments.well {
	margin-top: 25px;
	margin-bottom: 20px;

	padding: 25px 28px;

	background-color:
		color-mix(
			in srgb,
			var(--color-light-accent) 35%,
			var(--color-background-light)
		) !important;
	
	background-image:
		url('/tempimg/fabric_overlay_white_strong.png') !important;

	background-repeat: repeat !important;
	background-position: bottom right !important;

	border: 1px solid
		color-mix(
			in srgb,
			var(--color-dark-bg) 18%,
			transparent
		);

	border-radius: 0;

	box-shadow: none;

	color: var(--color-body-text);
}


.BlogComments h4 {
	margin-top: 0;
}


.BlogComments h4 small {
	color: var(--color-body-text);
}


.blogContent .BlogComments[style*="margin-left"] {
	width: 94%;

	margin-left: 6% !important;
}

/* =========================================================
   BLOG SIDEBAR
========================================================= */

#BlogTopics {
	position: relative;

	padding-left: 18px;

	color: var(--color-body-text);
}


#BlogTopics hr {
	display: none;
}


/* =========================================================
   PREVIOUS POSTS GROUP
========================================================= */

#BlogTopics > h3,
#BlogTopics #itemContainer {
	background-color:
		color-mix(
			in srgb,
			var(--color-background-light) 72%,
			#fff
		);
}


/* Heading */

#BlogTopics > h3 {
	position: relative;

	margin: 0;
	padding: 22px 22px 18px;

	border: 1px solid
		color-mix(
			in srgb,
			var(--color-dark-bg) 18%,
			transparent
		);

		border-bottom: 1px solid
		color-mix(
			in srgb,
			var(--color-dark-bg) 10%,
			transparent
		);
	border-radius: 0;

	color: var(--color-dark-bg);

	font-family: var(--font-Headings);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.1;

	text-transform: none !important;

	overflow: hidden;

	z-index: 1;
}


/* Post list */

#BlogTopics #itemContainer {
	position: relative;

	margin: 0 0 38px;

	border: 1px solid
		color-mix(
			in srgb,
			var(--color-dark-bg) 18%,
			transparent
		);

	border-top: 0;
	border-radius: 0;

	box-shadow: none;

	overflow: hidden;

	z-index: 1;
}


/* =========================================================
   FABRIC OVER ENTIRE PREVIOUS POSTS GROUP
========================================================= */

#BlogTopics > h3:after,
#BlogTopics #itemContainer:after {
	content: "";

	position: absolute;
	inset: 0;

	background-image: url('/tempimg/fabric_overlay_white_strong.png');
	background-repeat: repeat;
	background-position: bottom right;
	opacity: .9;

	pointer-events: none;

	z-index: 0;
}


#BlogTopics > h3 {
	isolation: isolate;
}


#BlogTopics #itemContainer {
	isolation: isolate;
}


#BlogTopics > h3,
#BlogTopics #itemContainer > * {
	position: relative;

	z-index: 1;
}


/* Remove old decorative pseudo */

#BlogTopics > h3:before {
	display: none !important;
	content: none !important;
}


/* =========================================================
   INDIVIDUAL PREVIOUS POSTS
========================================================= */

#BlogTopics #itemContainer > p {
	margin: 0;
	padding: 17px 20px;

	background: transparent;

	border-bottom: 1px solid
		color-mix(
			in srgb,
			var(--color-dark-bg) 10%,
			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) 22%,
			transparent
		);
}


/* =========================================================
   PREVIOUS POST TITLES
========================================================= */

#BlogTopics #itemContainer > p > a {
	display: block;

	margin-bottom: 5px;

	color: var(--color-dark-bg) !important;

	font-family: var(--font-Headings);
	font-weight: 400;
	line-height: 1.25;

	text-decoration: none;
	text-transform: none !important;
}


#BlogTopics #itemContainer > p > a:hover,
#BlogTopics #itemContainer > p > a:focus {
	color: var(--color-secondary) !important;

	text-decoration: none;
}


#BlogTopics #itemContainer b {
	font-weight: 400;

	text-transform: none !important;
}


/* =========================================================
   AUTHOR / DATE
========================================================= */

#BlogTopics .blogWhoInfo br,
#BlogTopics .blogDateInfo br {
	display: none;
}


#BlogTopics .blogWhoInfo,
#BlogTopics .blogDateInfo {
	display: inline;

	font-family: var(--font-main);

	font-style: normal !important;
	text-transform: none !important;
		font-size: 12px;
	line-height: 1.35;
}


#BlogTopics .blogWhoInfo {
	color: var(--color-body-text);
}


#BlogTopics .blogDateInfo {
	color: var(--color-primary);
}


#BlogTopics .blogDateInfo:before {
	content: "|";

	display: inline-block;

	margin: 0 7px;

	color:
		color-mix(
			in srgb,
			var(--color-body-text) 35%,
			transparent
		);
}


/* =========================================================
   PAGINATION
========================================================= */

#BlogTopics center {
	display: block;

	margin: 0;
	padding: 0;

	text-align: left;
}


#BlogTopics .pagination {
	display: inline-block;
	float: none;

	margin: 5px 0 30px !important;

	padding: 0;
}


#BlogTopics .pagination > li > a,
#BlogTopics .pagination > li > span {
	background: transparent;

	border-color:
		color-mix(
			in srgb,
			var(--color-dark-bg) 18%,
			transparent
		);

	color: var(--color-dark-bg);

	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 {
	background: var(--color-primary);

	border-color: var(--color-primary);

	color: #fff;
}


/* =========================================================
   BLOG CATEGORIES GROUP
========================================================= */

#BlogTopics .panel.panel-default {
	position: relative;

	margin: 0 0 40px;

	background-color:
		color-mix(
			in srgb,
			var(--color-background-light) 72%,
			#fff
		) !important;

	border: 1px solid
		color-mix(
			in srgb,
			var(--color-dark-bg) 18%,
			transparent
		) !important;

	border-radius: 0;

	box-shadow: none;

	overflow: hidden;

	isolation: isolate;
}


/* Fabric over the WHOLE categories group */

#BlogTopics .panel.panel-default:after {
	content: "";

	position: absolute;
	inset: 0;

	background-image: url('/tempimg/fabric_overlay_white_strong.png');
	background-repeat: repeat;
	background-position: bottom right;

	opacity: .9;

	pointer-events: none;

	z-index: 0;
}


#BlogTopics .panel.panel-default > * {
	position: relative;

	z-index: 1;
}


/* Remove old decoration */

#BlogTopics .panel:before {
	display: none !important;
	content: none !important;
}


/* =========================================================
   BLOG CATEGORIES HEADING
========================================================= */

#BlogTopics .panel.panel-default > .panel-heading {
	margin: 0;
	padding: 22px 22px 18px;

	background: transparent !important;

	border: 0 !important;

	border-bottom: 1px solid
		color-mix(
			in srgb,
			var(--color-dark-bg) 10%,
			transparent
		) !important;

	border-radius: 0;

	color: var(--color-dark-bg);

	font-family: var(--font-Headings);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.1;

	text-transform: none !important;
}


#BlogTopics .panel-heading:before,
#BlogTopics .panel-heading:after {
	display: none !important;
	content: none !important;
}


/* =========================================================
   BLOG CATEGORY LINKS
========================================================= */

#BlogTopics .panel-body {
	padding: 0;

	background: transparent;

	border: 0;
}


#BlogTopics .panel-body a,
#BlogTopics .list-group-item a {
	display: block;

	padding: 16px 20px;

	color: var(--color-body-text);

	background: transparent;

	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) 22%,
			transparent
		);

	color: var(--color-primary);

	text-decoration: none;
}


#BlogTopics .list-group {
	margin: 0;
	padding: 0;
}


#BlogTopics .list-group-item {
	margin: 0;
	padding: 0;

	background: transparent;

	border: 0;

	border-top: 1px solid
		color-mix(
			in srgb,
			var(--color-dark-bg) 10%,
			transparent
		);

	border-radius: 0;
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media(max-width: 991px) {

	#BlogTopics {
		margin-top: 60px;

		padding-left: 15px;
		padding-right: 15px;
	}

}


@media(max-width: 767px) {

	#BlogTopics {
		margin-top: 55px;

		padding-left: 20px;
		padding-right: 20px;
	}


	#BlogTopics > h3,
	#BlogTopics .panel.panel-default > .panel-heading {
		padding: 20px 18px 16px;

		font-size: 26px;
	}


	#BlogTopics #itemContainer > p,
	#BlogTopics .panel-body a,
	#BlogTopics .list-group-item a {
		padding-left: 18px;
		padding-right: 18px;
	}

}


@media(max-width: 480px) {

	#BlogTopics {
		padding-left: 15px;
		padding-right: 15px;
	}

}
/* =========================================================
   COMMENT HEADINGS
========================================================= */

.BlogComments h4,
.BlogComments h4 small,
.BlogComments .blogCommentTitle,
.BlogComments .blogCommentAuthor {
	font-family: var(--font-Headings);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;

	color: var(--color-dark-bg) !important;
}

.BlogComments h4 small {
	display: inline;

	margin: 0;

	letter-spacing: 0;
	text-transform: none;

	color: var(--color-dark-bg) !important;
}
/* =========================================================
   COMMENT MODAL
========================================================= */

#comment .modal-content,
#commentclose .modal-content {
	background: var(--color-background-light);

	border: 1px solid var(--color-dark-bg);

	border-radius: 0;

	box-shadow:
		0 18px 45px
		color-mix(
			in srgb,
			var(--color-dark-bg) 16%,
			transparent
		);

	overflow: hidden;
}


#comment .modal-header,
#commentclose .modal-header {
	padding: 22px 25px;

	background: var(--color-background-light);

	border: 0;

	border-bottom: 1px solid
		color-mix(
			in srgb,
			var(--color-dark-bg) 15%,
			transparent
		);
}


#comment .modal-title,
#commentclose .modal-title {
	margin: 0;

	color: var(--color-dark-bg);
}


#comment .close,
#commentclose .close {
	color: var(--color-dark-bg);

	opacity: .7;

	text-shadow: none;
}


#comment .close:hover,
#commentclose .close:hover {
	opacity: 1;
}


#comment .modal-body,
#commentclose .modal-body {
	padding: 28px;
}


#comment .input-group-addon {
	background: var(--color-light-accent);

	border-color:
		color-mix(
			in srgb,
			var(--color-dark-bg) 25%,
			transparent
		);

	color: var(--color-dark-bg);
}


#comment .form-control {
	background: #fff;

	border-color:
		color-mix(
			in srgb,
			var(--color-dark-bg) 25%,
			transparent
		);

	border-radius: 0;

	box-shadow: none;

	color: var(--color-body-text);
}


#comment .form-control:focus {
	border-color: var(--color-secondary);

	box-shadow: none;
}


#comment .modal-footer,
#commentclose .modal-footer {
	padding: 18px 25px;

	background: var(--color-background-light);

	border-top: 1px solid
		color-mix(
			in srgb,
			var(--color-dark-bg) 12%,
			transparent
		);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width: 991px) {

	#Main:has(.blogContent) {
		width: 92%;

		padding-top: 55px;
		padding-bottom: 80px;
	}


	.blogContent {
		padding-left: 15px;
		padding-right: 15px;
	}


	.blogContent > h2:before {
		width: 190px;
		height: 140px;

		opacity: .08;
	}


	#blogAudioText {
		padding: 36px 34px;
	}


	#BlogTopics {
		margin-top: 60px;

		padding-left: 15px;
		padding-right: 15px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width: 767px) {
	.blogContent > hr + .row {
		display: block !important;
	}
	
	.blogContent > hr + .row .col-sm-12 {
		text-align: center;
	}
	.blogContent > hr + .row .col-sm-12 .btn {
		margin-top: 20px !important;
	}
	#Main:has(.blogContent) {
		width: 100%;

		padding-top: 40px;
		padding-bottom: 65px;
	}
.blogContent > hr + .row > .col-sm-12:last-child {
	text-align: center !important;
	}

	.blogContent {
		padding-left: 20px;
		padding-right: 20px;
	}


	/* Smaller botanical behind title */

	.blogContent > h2:before {
		top: -15px;
		right: -5px;

		width: 145px;
		height: 110px;

		opacity: .07;
	}


	/* Category */

	.catHolder {
		gap: 14px;

		margin-top: 18px;
		margin-bottom: 26px;

		font-size: 11px;
		letter-spacing: 1.8px;
	}


	/* Article */

	#blogAudioText {
		margin-right: 8px;
		margin-bottom: 8px;

		padding: 28px 23px 32px;
	}


	#blogAudioText:after {
		top: 7px;
		left: 7px;
		right: -8px;
		bottom: -8px;
	}


	/* Images */

	#blogAudioText img {
		width: 100% !important;
		max-width: 100% !important;

		margin: 28px auto 30px !important;

		border: 0 !important;
		box-shadow: none !important;
	}


	/* Share buttons */

	.social-share {
		display: grid;

		grid-template-columns: 1fr 1fr;

		gap: 8px;
	}


	.social-share .btn {
		width: 100%;
	}


	/* Comments */

	.blogContent .BlogComments.well {
		padding: 22px;
	}


	.blogContent .BlogComments[style*="margin-left"] {
		width: 95%;

		margin-left: 5% !important;
	}


	/* Sidebar */

	#BlogTopics {
		margin-top: 55px;

		padding-left: 20px;
		padding-right: 20px;
	}


	#BlogTopics > h3,
	#BlogTopics .panel.panel-default > .panel-heading {
		font-size: 26px;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width: 480px) {

	.blogContent {
		padding-left: 15px;
		padding-right: 15px;
	}


	#blogAudioText {
		padding: 25px 19px 28px;
	}


	.social-share {
		grid-template-columns: 1fr;
	}


	#BlogTopics {
		padding-left: 15px;
		padding-right: 15px;
	}

}
/* ----------------------------------------------------
   HOME HERO
---------------------------------------------------- */

.homeProfileTop {
	padding: 0;
	background: var(--color-background-light);
}

.homeProfileRow {
	display: flex;
	align-items: stretch;

	/* Minimum hero height, but allow content to make it taller */
	min-height: calc(100vh - 146px);

	margin-left: 0;
	margin-right: 0;
}


/* ----------------------------------------------------
   LEFT PHOTO
---------------------------------------------------- */

.homeProfileImage {
	display: flex;

	/* Top / Right / Bottom / Left */
	padding: 10vh 4vw 10vh 8vw;

	overflow: visible;
}

.homeProfilePhoto {
	position: relative;

	width: 100%;

	/* Stretch photo to fill the available image column height */
	flex: 1 1 auto;
}


/* Offset Bobby-style border */

.homeProfilePhoto:after {
	content: "";

	position: absolute;

	top: 12px;
	left: 12px;
	right: -12px;
	bottom: -12px;

	border: 1px solid var(--color-dark-bg);

	z-index: 0;
	pointer-events: none;
}


/* Both image layers */

.homeProfilePhotoBW,
.homeProfilePhotoColor {
	position: absolute;

	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;

	z-index: 1;
}


/* Black & white image */

.homeProfilePhotoBW {
	background-image: url('/tempimg/HomeDeb_BW.png');
}


/* Color image sits over B&W */

.homeProfilePhotoColor {
	background-image: url('/tempimg/HomeDeb_FULL.png');

	opacity: 0;

	animation: debraColorFade 12s ease-in-out infinite;
}


/* Mostly black & white */

@keyframes debraColorFade {

	0%,
	30% {
		opacity: 0;
	}

	45%,
	65% {
		opacity: 1;
	}

	80%,
	100% {
		opacity: 0;
	}

}


/* ----------------------------------------------------
   RIGHT CONTENT
---------------------------------------------------- */

.homeProfileContent {
	display: flex;
	align-items: center;

	padding: 60px 7vw 60px 6vw;

	background: var(--color-background-light);
}

.homeProfileText {
	width: 100%;
	max-width: 660px;
}

.homeProfileText h1 {
	margin: 0 0 25px;

	font-size: 48px;
	line-height: 1.05;

	color: var(--color-dark-bg);
}

.homeProfileText p {
	margin: 0 0 32px;

	font-size: 20px;
	line-height: 1.6;

	color: var(--color-body-text);
}


/* ----------------------------------------------------
   MOBILE
---------------------------------------------------- */

@media (max-width: 767px) {

	.homeProfileRow {
		display: block;
		min-height: 0;
	}

	.homeProfileImage {
		display: block;

		height: 58vh;
		min-height: 420px;

		padding: 20px 24px 26px 18px;
	}

	.homeProfilePhoto {
		width: 100%;
		height: 100%;
	}

	.homeProfilePhoto:after {
		top: 8px;
		left: 8px;
		right: -8px;
		bottom: -8px;
	}

	.homeProfileContent {
		display: block;

		padding: 50px 25px 60px;
	}

	.homeProfileText {
		max-width: none;
	}

	.homeProfileText h1 {
		font-size: 36px;
	}

	.homeProfileText p {
		font-size: 18px;
	}

}

/* ----------------------------------------------------
   BOOKS & RESOURCES
---------------------------------------------------- */

.homeBooks {
	padding: 65px 4vw 75px;

	background: var(--color-background-light);
}

.homeBooksInner {
	width: 100%;
	max-width: 1650px;

	margin: 0 auto;
	padding: 0;
}


/* ----------------------------------------------------
   OUTER FRAME / OFFSET BORDER
---------------------------------------------------- */

.homeBooksFrame {
	position: relative;

	margin: 0 12px 12px 0;
}

.homeBooksFrame:after {
	content: "";

	position: absolute;

	top: 11px;
	left: 11px;
	right: -11px;
	bottom: -11px;

	border: 1px solid var(--color-dark-bg);

	z-index: 0;
	pointer-events: none;
}


/* ----------------------------------------------------
   MAIN RECTANGLE
---------------------------------------------------- */

.homeBooksRow {
	position: relative;
	z-index: 1;

	display: flex;
	align-items: stretch;

	min-height: 475px;

	margin-left: 0;
	margin-right: 0;

	overflow: hidden;
}


/* ----------------------------------------------------
   LEFT CONTENT
---------------------------------------------------- */

.homeBooksContent {
	position: relative;

	
	display: flex;
	align-items: center;

	padding: 45px 4vw;

	background: var(--color-light-accent);

	overflow: hidden;
}




.homeBooksContent:before {
	content: "";

	position: absolute;

	top: 0;
	right: 0;
	bottom: 0;

	width: 65%;

	background-image: url('/tempimg/overlay_5.png');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 115%;

	opacity: .25;

	pointer-events: none;
	z-index: 0;
}


.homeBooksText {
	position: relative;
	z-index: 1;

	width: 100%;
	max-width: 520px;

	margin: 0 auto;
}


/* Small section label */

.homeBooksEyebrow {
	margin-bottom: 15px;

	font-family: var(--font-main);
	font-size: 13px;
	font-weight: 600;

	line-height: 1.2;
	letter-spacing: 3px;
	text-transform: uppercase;

	color: var(--color-dark-bg);
}


/* Keep normal site h2 / p styling */

.homeBooksText h2 {
	margin-top: 0;
}


/* ----------------------------------------------------
   COMING SOON
---------------------------------------------------- */

.homeBooksComing {
	margin: 24px 0 28px;
	padding-top: 20px;

	border-top: 1px solid rgba(52, 53, 54, .30);
}

.homeBooksComingTitle {
	margin-bottom: 7px;

	font-family: var(--font-main);
	font-size: 13px;
	font-weight: 600;

	line-height: 1.2;
	letter-spacing: 2.5px;
	text-transform: uppercase;

	color: var(--color-dark-bg);
}

.homeBooksComing p {
	margin-bottom: 0;
}


/* ----------------------------------------------------
   RIGHT IMAGE
---------------------------------------------------- */

.homeBooksImage {
	position: relative;

	min-height: 475px;

	padding: 0;

	overflow: hidden;
}

.homeBooksPhoto {
	position: absolute;

	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	background-image: url('/tempimg/BookCovers.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;

	transform: scale(1);

	transition: transform .6s ease;
}


/* Hover anywhere over section */

.homeBooksRow:hover .homeBooksPhoto {
	transform: scale(1.025);
}


/* ----------------------------------------------------
   TABLET
---------------------------------------------------- */

@media (max-width: 991px) {

	.homeBooks {
		padding: 50px 30px 60px;
	}

	.homeBooksContent {
		padding: 40px 32px;
	}

	.homeBooksRow,
	.homeBooksImage {
		min-height: 500px;
	}

	.homeBooksContent:before {
		width: 75%;
		opacity: .08;
	}

}


/* ----------------------------------------------------
   MOBILE
---------------------------------------------------- */

@media (max-width: 767px) {

	.homeBooks {
		padding: 40px 22px 50px;
	}

	.homeBooksFrame {
		margin: 0 8px 8px 0;
	}

	.homeBooksFrame:after {
		top: 8px;
		left: 8px;
		right: -8px;
		bottom: -8px;
	}

	.homeBooksRow {
		display: flex;
		flex-direction: column;

		min-height: 0;
	}

	.homeBooksImage {
		order: 1;

		height: 360px;
		min-height: 360px;
	}

	.homeBooksContent {
		order: 2;

		display: block;

		padding: 40px 27px 45px;
	}

	.homeBooksText {
		max-width: none;
	}

	.homeBooksContent:before {
		width: 85%;

		background-position: right bottom;
		background-size: auto 90%;

		opacity: .08;
	}

	.homeBooksRow:hover .homeBooksPhoto {
		transform: none;
	}

}

/* =========================================================
   HOME SIGNUP
========================================================= */

.mainSignup {
	position: relative;

	width: 92%;
	max-width: 1600px;

	margin: 100px auto;

	padding: 0;

	background: transparent;

	overflow: visible;
}


/* =========================================================
   INNER FRAME
========================================================= */

.mainSignupInner {
	position: relative;

	display: flex;
	align-items: stretch;

	width: 100%;

	background: var(--color-background-light);
}


/* Offset border */

.mainSignupInner:after {
	content: "";

	position: absolute;

	top: 10px;
	left: 10px;
	right: -10px;
	bottom: -10px;

	border: 1px solid var(--color-dark-bg);

	pointer-events: none;

	z-index: -1;
}


/* =========================================================
   LEFT IMAGE
========================================================= */

.mainSignupImage {
	position: relative;

	width: 55%;
	min-height: 560px;

	overflow: hidden;
}


.mainSignupPhoto {
	position: absolute;

	inset: 0;

	/*
		CHANGE THIS IMAGE AS NEEDED
	*/

	background-image: url('/tempimg/subback_2.png');

	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;

	transition: transform .7s ease;
}


.mainSignup:hover .mainSignupPhoto {
	transform: scale(1.025);
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.mainSignupContent {
	position: relative;

	width: 45%;

	display: flex;
	align-items: center;

	padding: 65px 5vw;

	background-color: var(--color-light-accent);

	overflow: hidden;

	/*
		Your reusable fabric class already handles:
		/tempimg/fabric_overlay.png
	*/
}


/* =========================================================
   BOTANICAL OVERLAY
========================================================= */

.mainSignupBotanical {
	position: absolute;

	left: 0;
	bottom: 0;

	width: 55%;
	height: 70%;

	background-image: url('/tempimg/overlay_6.png');
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: contain;

	opacity: .18;

	pointer-events: none;
	z-index: 1;
}
.mainSignupContent:after {
	content: "";

	position: absolute;

	top: 0;
	right: 0;

	width: 55%;
	height: 70%;

	background-image: url('/tempimg/overlay_6.png');
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: contain;

	opacity: .18;

	transform: scale(-1, -1);

	pointer-events: none;
	z-index: 1;
}

/* =========================================================
   TEXT
========================================================= */

.mainSignupText {
	position: relative;

	width: 100%;
	max-width: 600px;

	z-index: 2;
}


.mainSignupText h2 {
	margin-top: 0;
}


.mainSignupText p {
	margin: 0 0 22px;

	font-size: 18px;
	line-height: 1.6;
}


/* =========================================================
   FORM
========================================================= */

.mainSignupForm {
	position: relative;

	width: 100%;

	margin-top: 30px;

	z-index: 2;
}


.mainSignupForm .form-group {
	margin: 0;
}


.mainSignupForm .form-control {
	width: 100%;
	height: 50px;

	margin: 0 0 14px;
	padding: 10px 15px;

	background: rgba(255,255,255,.72);

	border: 1px solid var(--color-dark-bg);
	border-radius: var(--btn-radius);

	box-shadow: none;

	color: var(--color-dark-bg);

	font-family: var(--font-main);
	font-size: 17px;
	font-weight: 400;
}


.mainSignupForm .form-control:focus {
	background: #fff;

	border-color: var(--color-secondary);

	box-shadow: none;
	outline: none;
}


.mainSignupForm .form-control::placeholder {
	color: var(--color-body-text);

	opacity: .75;
}


.mainSignupForm button {
	min-width: 190px;

	margin-top: 5px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width: 991px) {

	.mainSignup {
		width: 90%;

		margin-top: 80px;
		margin-bottom: 80px;
	}


	.mainSignupInner {
		display: block;
	}


	.mainSignupImage,
	.mainSignupContent {
		width: 100%;
	}


	.mainSignupImage {
		min-height: 480px;
	}


	.mainSignupContent {
		padding: 60px 7vw;
	}


	.mainSignupText {
		max-width: 720px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width: 767px) {

	.mainSignup {
		width: auto;

		margin: 65px 20px;
	}


	.mainSignupInner:after {
		top: 7px;
		left: 7px;
		right: -7px;
		bottom: -7px;
	}


	.mainSignupImage {
		min-height: 360px;
	}


	.mainSignupContent {
		padding: 48px 28px 52px;
	}


	.mainSignupBotanical {
		width: 85%;

		opacity: .12;
	}


	.mainSignupText p {
		font-size: 17px;
	}


	.mainSignupForm button {
		width: 100%;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width: 480px) {

	.mainSignupImage {
		min-height: 300px;
	}


	.mainSignupContent {
		padding-left: 22px;
		padding-right: 22px;
	}

}
/* =========================================================
   FOOTER
========================================================= */

#footer {
	position: relative;
	z-index: 49;

	flex-shrink: 0;

	padding: 135px 0 22px;

	background: var(--color-background-light);

	color: var(--color-dark-bg);
}


/* Main width */

.footerFluid {
	width: 92%;
	max-width: 1650px;

	margin: 0 auto;
	padding: 0;
}


/* =========================================================
   BORDERED FRAME
========================================================= */

.footerFrame {
	position: relative;

	min-height: 350px;

	padding: 105px 70px 65px;

	border: 1px solid var(--color-dark-bg);

	background: var(--color-background-light);
}


/* =========================================================
   LOGO
========================================================= */

.footerLogo {
	position: absolute;

	top: -125px;
	left: 95px;

	width: 320px;

	padding: 0 25px;

	background: var(--color-background-light);

	z-index: 3;
}


.footerLogo img {
	display: block;

	width: 100%;
	height: auto;
}


/* =========================================================
   SOCIAL / CONTACT ICONS
========================================================= */

.footerSocial {
	position: absolute;

	bottom: -20px;
	right: 10px;

	display: flex;
	align-items: center;
	gap: 24px;

	padding: 0 18px;

	background: var(--color-background-light);

	z-index: 3;
}

.footerSocial a {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	color: var(--color-dark-bg);

	font-size: 30px;
	line-height: 1;

	text-decoration: none;

	transition:
		color .25s ease,
		transform .25s ease;
}


.footerSocial a:hover,
.footerSocial a:focus {
	color: var(--color-primary);

	text-decoration: none;

	transform: translateY(-2px);
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.footerMain {
	display: flex;
	align-items: center;
}


/* =========================================================
   LEFT MESSAGE
========================================================= */

.footerMessage {
	padding-right: 70px;
}


.footerMessage h3 {
	max-width: 760px;

	margin: 0 0 22px;

	font-family: var(--font-Headings);
	font-size: 31px;
	font-weight: 400;
	line-height: 1.18;

	color: var(--color-dark-bg);
}


.footerMessage p {
	max-width: 700px;

	margin: 0;

	font-size: 18px;
	line-height: 1.6;

	color: var(--color-body-text);
}


/* =========================================================
   RIGHT SIGNUP CTA
========================================================= */

.footerSignup {
	padding-left: 65px;

	border-left: 1px solid rgba(52,52,52,.22);
}


.footerSignup h4 {
	margin: 0 0 18px;

	color: var(--color-primary);
}


.footerSignup h4 small {
	display: block;

	margin-bottom: 10px;

	font-family: var(--font-main);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;

	letter-spacing: 3px;
	text-transform: uppercase;

	color: var(--color-dark-bg);
}


.footerSignup p {
	max-width: 500px;

	margin: 0 0 26px;

	font-size: 17px;
	line-height: 1.6;

	color: var(--color-body-text);
}


/* =========================================================
   COPYRIGHT
========================================================= */

.footerBottom {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 18px;

	width: 100%;
	padding: 18px 4px 0;
	margin-top:-14px;
	font-size: 10px;
	line-height: 1.4;

	color: var(--color-dark-bg);
}


.footerBottom a {
	color: var(--color-dark-bg);

	text-decoration: none;

	transition: color .25s ease;
}


.footerBottom a:hover,
.footerBottom a:focus {
	color: var(--color-primary);

	text-decoration: none;
}


/* =========================================================
   TABLET

========================================================= */

@media(max-width: 991px) {

	#footer {
		padding-top: 115px;
	}


	.footerFrame {
		padding: 100px 45px 50px;
	}


	.footerLogo {
		top: -105px;
		left: 45px;

		width: 280px;
	}


	.footerSocial {
		top: -54px;
		right: 45px;

		gap: 20px;
	}


	.footerMain {
		display: block;
	}


	.footerMessage {
		padding-left: 25px;
		padding-right: 25px;
		margin-bottom: 45px;
	}


	.footerSignup {
		padding-left: 25px;
		padding-right: 25px;
		padding-top: 10px;
		
		border-left: 0;

	}


	.footerMessage h3 {
		font-size: 29px;
	}




/* =========================================================
   MOBILE
========================================================= */



	#footer {
		padding-top: 110px;
	}


	.footerFluid {
		width: auto;

		margin-left: 20px;
		margin-right: 20px;
	}


	.footerFrame {
		padding: 110px 25px 40px;
	}


	.footerLogo {
		top: -84px;
		left: 50%;

		width: 230px;

		padding: 0 15px;

		transform: translateX(-50%);
	}


	.footerSocial {
		position: relative;
	width: 100%;
text-align: center;
		margin: auto;
		margin-top: 0px;
		margin-bottom: 20px;
		align-items: center;
		justify-content: center;
		
		   left: auto;
    right: auto;
    top: auto;
    bottom: auto;

		background: transparent;

	}


	.footerSocial a {
		width: 36px;
		height: 36px;

		font-size: 25px;
	}


	.footerMessage {
		text-align: center;
	}


	.footerMessage h3 {
		margin-left: auto;
		margin-right: auto;

		font-size: 27px;
	}


	.footerMessage p {
		margin-left: auto;
		margin-right: auto;
	}


	.footerSignup {
		text-align: center;
	}


	.footerSignup p {
		margin-left: auto;
		margin-right: auto;
	}


	.footerBottom {
		display: block;

		text-align: center;
	}


	.footerBottom > div + div {
		margin-top: 5px;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width: 480px) {

	.footerFrame {
		padding-left: 20px;
		padding-right: 20px;
	}


	.footerMessage h3 {
		font-size: 24px;
	}

		}