/* =========================================================
   3D BOOK SHOWCASE
========================================================= */
.BookDisplayTop {
	position: relative;
	width: 92%;
	margin: 110px auto -50px auto;
	z-index: 40;
}
.BookDisplayBottom {
	width: 92%;
	margin: 0px auto 80px auto;
}
#bk3slider, #bk3slider * {
	box-sizing: border-box;
}
#bk3slider {
	position: relative;
	z-index: 10;
	--bkW: 316px;
	--bkH: 480px;
	--bkDepth: 22px;
	--bkSpineW: 46px;
	--bkEdgeW: 28px;
	--bkRound: 5px;
	--liftZ: 150px;
	--seamFix: 0px;
	--arrowW: 44px;
	/* LARGE DESKTOP */
	--perView: 4;
	--slotPadX: 28px;
	--bkScale: 1;
}
/* =========================================================
   NORMAL DESKTOP
========================================================= */
@media(max-width:1599px) {
	#bk3slider {
		--perView: 3;
	}
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width:991px) {
	#bk3slider {
		--perView: 2;
		--bkW: 280px;
		--bkH: 426px;
		--bkSpineW: 42px;
		--bkEdgeW: 26px;
		--liftZ: 140px;
		--slotPadX: 22px;
	}
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:767px) {
	#bk3slider {
		--perView: 1;
		--bkW: 260px;
		--bkH: 396px;
		--bkSpineW: 40px;
		--bkEdgeW: 24px;
		--liftZ: 120px;
		--slotPadX: 16px;
	}
}
/* =========================================================
   INITIAL LOAD
   Prevents bad first-frame layout / scroll rendering
========================================================= */
#bk3slider.bk3-loading .bk3-shell {
	opacity: 0;
}
#bk3slider.bk3-ready .bk3-shell {
	opacity: 1;
	transition: opacity .25s ease;
}
/* =========================================================
   SLIDER SHELL
========================================================= */
#bk3slider .bk3-shell {
	position: relative;
	width: 100%;
	max-width: 2200px;
	margin: 0 auto;
	padding: 0 calc(var(--arrowW) + 10px);
	overflow-x: hidden;
	overflow-y: visible;
	background-image: linear-gradient(to right, rgba(247, 244, 236, .88) 0%, rgba(247, 244, 236, 0) 38%, rgba(247, 244, 236, 0) 62%, rgba(247, 244, 236, .88) 100%);
}
/* =========================================================
   VIEWPORT
========================================================= */
#bk3slider .bk3-viewport {
	position: relative;
	width: 100%;
}
/* =========================================================
   TRACK
========================================================= */
#bk3slider .bk3-track {
	display: flex;
	align-items: flex-start;
	padding: 10px 0 20px;
	gap: 0;
	/*
		Do NOT permanently GPU-promote this track.
		The books themselves still use 3D transforms.
	*/
	transition: transform .5s ease-in-out;
}
/* =========================================================
   ARROWS
========================================================= */
#bk3slider .bk3-shell {
	position: relative;
}
#bk3slider .bk3-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--arrowW);
	height: var(--arrowW);
	padding: 0;
	margin: 0;
	border-radius: 50%;
	border: 1px solid rgba(48, 56, 60, .18);
	background-color: var(--color-background-light);
	color: var(--color-dark-bg);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
	cursor: pointer;
	transition:
		background-color .2s ease, border-color .2s ease, transform .2s ease;
}
/* LEFT */
#bk3slider .bk3-prev {
	left: 15px;
}
/* RIGHT */
#bk3slider .bk3-next {
	right: 15px;
}
#bk3slider .bk3-arrow i {
	display: block;
	font-size: 17px;
	line-height: 1;
	margin: 0;
	padding: 0;
}
#bk3slider .bk3-arrow:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}
/* =========================================================
   BOOK SLOT
========================================================= */
#bk3slider .bk-item {
	flex:
		0 0 calc(100% / var(--perView));
	width:
		calc(100% / var(--perView));
	/*
		Use the BOOK HEIGHT instead of viewport height.
		This removes the excessive blank area.
	*/
	min-height:
		calc(var(--bkH) + 110px);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:
		0 var(--slotPadX);
	overflow: visible;
}
/* =========================================================
   SCALE WRAPPER
========================================================= */
#bk3slider .bk-scaleWrap {
	width: auto;
	height: auto;
	transform:
		scale(var(--bkScale));
	transform-origin:
		center center;
	display: inline-block;
	overflow: visible;
}
/* =========================================================
   PERSPECTIVE STAGE
========================================================= */
#bk3slider .bk-slotInner {
	width: var(--bkW);
	height:
		calc(var(--bkH) + 90px);
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1800px;
	perspective-origin:
		50% 50%;
	overflow: visible;
	position: relative;
}
/* =========================================================
   BOOK
========================================================= */
#bk3slider .bk-book {
	position: relative;
	width: var(--bkW);
	height: var(--bkH);
	transform-style:
		preserve-3d;
	transition:
		transform .55s ease;
	cursor: pointer;
}
/* =========================================================
   FLOOR SHADOW
========================================================= */
#bk3slider .bk-book:after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: -18px;
	height: 26px;
	background:
		radial-gradient(closest-side, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0));
	transform:
		translateZ(-1px);
	filter:
		blur(1px);
	pointer-events: none;
}
/* =========================================================
   HOVER
========================================================= */
#bk3slider .bk-book.bk-bookdefault:hover {
	transform:
		rotateY(28deg);
}
/* =========================================================
   OPEN BOOK
========================================================= */
#bk3slider .bk-book.bk-viewinside, #bk3slider .bk-book.bk-viewinside:hover {
	transform:
		translate3d(0, 0, var(--liftZ)) rotateY(0deg);
}
#bk3slider .bk-book > div, #bk3slider .bk-front > div {
	position: absolute;
	display: block;
}
/* =========================================================
   FRONT COVER GROUP
========================================================= */
#bk3slider .bk-front {
	position: absolute;
	transform-style:
		preserve-3d;
	transform-origin:
		0% 50%;
	transition:
		transform .55s ease;
	transform:
		translate3d(0, 0, calc(var(--bkDepth) + var(--seamFix)));
	z-index: 10;
}
/* hinge */
#bk3slider .bk-front:after {
	content: "";
	position: absolute;
	top: 1px;
	bottom: 1px;
	left: -1px;
	width: 1px;
	background:
		rgba(0, 0, 0, .18);
}
/* front planes */
#bk3slider .bk-front > div {
	width: var(--bkW);
	height: var(--bkH);
	backface-visibility:
		hidden;
	transform-style:
		preserve-3d;
	border-radius:
		0 var(--bkRound) var(--bkRound) 0;
	box-shadow:
		inset 8px 0 16px rgba(0, 0, 0, .16), inset 2px 0 0 rgba(255, 255, 255, .18), 10px 14px 26px rgba(0, 0, 0, .22);
}
/* =========================================================
   OUTSIDE FRONT COVER
========================================================= */
#bk3slider .bk-cover {
	position: relative;
	overflow: hidden;
	background:
		var(--color-dark-bg, #30383C);
}
#bk3slider .bk-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* crease */
#bk3slider .bk-cover:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 8px;
	width: 3px;
	background:
		rgba(0, 0, 0, .08);
	box-shadow:
		1px 0 3px rgba(255, 255, 255, .12);
	pointer-events: none;
}
/* subtle cover gloss */
#bk3slider .bk-cover:before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(120deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%);
	opacity: .24;
	pointer-events: none;
}
/* =========================================================
   INSIDE OF FRONT COVER
   Mirrored / faded bleed-through
========================================================= */
#bk3slider .bk-cover-back {
	position: relative;
	overflow: hidden;
	background:
		var(--color-background-light, #F7F4EC);
	transform:
		rotateY(-179deg);
}
#bk3slider .bk-cover-back img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
		Mirror the front artwork so it resembles
		ink faintly bleeding through paper.
	*/
	transform:
		scaleX(-1);
	filter:
		saturate(.40) contrast(.65) brightness(1.32);
	opacity: .18;
}
/* parchment wash over bleed image */
#bk3slider .bk-cover-back:after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		rgba(247, 244, 236, .68);
	box-shadow:
		inset -12px 0 28px rgba(var(--color-dark-bg-rgb, 48, 56, 60), .08);
	pointer-events: none;
}
/* =========================================================
   INSIDE PAGE
========================================================= */
#bk3slider .bk-page {
	width:
		calc(var(--bkW) - 3px);
	height:
		calc(var(--bkH) - 10px);
	top: 5px;
	left: 0;
	background:
		var(--color-background-light, #F7F4EC);
	transform:
		translate3d(0, 0, calc(var(--bkDepth) - 1px));
	backface-visibility:
		hidden;
	z-index: 9;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity .18s ease;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .06), 0 10px 22px rgba(0, 0, 0, .14);
}
/* =========================================================
   BACK OF BOOK
========================================================= */
#bk3slider .bk-back {
	width: var(--bkW);
	height: var(--bkH);
	position: absolute;
	transform:
		rotateY(-180deg) translate3d(0, 0, var(--bkDepth));
	border-radius:
		var(--bkRound) 0 0 var(--bkRound);
	background:
		linear-gradient(135deg, var(--color-dark-bg, #30383C), #414A4E);
	box-shadow:
		10px 10px 30px rgba(0, 0, 0, .24);
}
#bk3slider .bk-back:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 8px;
	width: 3px;
	background:
		rgba(0, 0, 0, .08);
	box-shadow:
		-1px 0 3px rgba(255, 255, 255, .08);
}
/* =========================================================
   PAGE EDGE
========================================================= */
#bk3slider .bk-right {
	width:
		calc(var(--bkEdgeW) + var(--seamFix));
	height:
		calc(var(--bkH) - 10px);
	top: 5px;
	left:
		calc((var(--bkEdgeW) / -2) - var(--seamFix));
	transform:
		rotateY(90deg) translate3d(0, 0, calc(var(--bkW) - var(--seamFix)));
	backface-visibility:
		hidden;
	background:
		linear-gradient(to right, rgba(255, 255, 255, .96), rgba(230, 230, 225, .96)), repeating-linear-gradient(to bottom, rgba(255, 255, 255, .92), rgba(255, 255, 255, .92) 3px, rgba(242, 242, 238, .92) 6px);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .05);
}
/* =========================================================
   SPINE
========================================================= */
#bk3slider .bk-left {
	position: absolute;
	width:
		calc(var(--bkSpineW) + var(--seamFix));
	height:
		var(--bkH);
	left:
		calc((var(--bkSpineW) / -2) - var(--seamFix));
	top: 0;
	transform:
		rotateY(-90deg);
	transform-style:
		preserve-3d;
	backface-visibility:
		hidden;
	border-radius:
		var(--bkRound) 0 0 var(--bkRound);
	overflow: hidden;
	background:
		var(--color-dark-bg, #30383C);
	box-shadow:
		inset -16px 0 46px rgba(0, 0, 0, .72), inset 3px 0 0 rgba(255, 255, 255, .12);
}
#bk3slider .bk-spineImg {
	position: absolute;
	inset: 0;
	background-repeat:
		no-repeat;
	transform:
		scaleX(-1);
	background-size:
		1600% 100%;
	background-position:
		left center;
}
#bk3slider .bk-spineImg:after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .28) 25%, rgba(0, 0, 0, .18) 50%, rgba(0, 0, 0, .08) 75%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}
/* spine highlight */
#bk3slider .bk-left:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 10px;
	background:
		linear-gradient(to right, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
}
/* spine title */
#bk3slider .bk-spineText {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 0;
	color:
		var(--color-background-light, #F7F4EC);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	writing-mode:
		vertical-rl;
	transform:
		rotate(180deg);
	text-shadow:
		0 2px 3px rgba(0, 0, 0, .70);
	pointer-events: none;
	opacity: 0;
	transition:
		opacity .18s ease;
}
#bk3slider .bk-book.bk-bookdefault:hover .bk-spineText, #bk3slider .bk-book.bk-viewinside .bk-spineText {
	opacity: 1;
}
/* =========================================================
   TOP / BOTTOM PAGE EDGES
========================================================= */
#bk3slider .bk-top {
	width:
		calc(var(--bkW) - 3px);
	height: 22px;
	top: -10px;
	left: 2px;
	transform:
		rotateX(90deg);
	backface-visibility:
		hidden;
	background:
		var(--color-background-light, #F7F4EC);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .05);
}
#bk3slider .bk-bottom {
	width:
		calc(var(--bkW) - 3px);
	height: 22px;
	top: -10px;
	left: 2px;
	transform:
		rotateX(-90deg) translate3d(0, 0, calc(var(--bkH) - 10px));
	backface-visibility:
		hidden;
	background:
		var(--color-background-light, #F7F4EC);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .05);
}
/* =========================================================
   OPEN FRONT COVER
========================================================= */
#bk3slider .bk-book.bk-viewinside .bk-front {
	transform:
		translate3d(0, 0, var(--bkDepth)) rotateY(-160deg);
}
#bk3slider .bk-book.bk-viewinside .bk-page {
	opacity: 1;
	pointer-events: auto;
}
/* =========================================================
   INSIDE PAGE CONTENT
========================================================= */
#bk3slider .bk-insideContent {
	position: absolute;
	inset:
		18px 16px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
}
#bk3slider .bk-insideTitle {
	color:
		var(--color-dark-bg, #30383C);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}
#bk3slider .bk-insideTitle small {
	display: block;
	margin-top: 4px;
	font-weight: 400;
	font-size: 12px;
	opacity: .82;
}
#bk3slider .bk-insideDesc {
	color:
		var(--color-body-text, #30383C);
	font-size: 12.5px;
	line-height: 1.4;
}
/* =========================================================
   INSIDE BUTTONS
========================================================= */
#bk3slider .bk-insideActions {
	display: flex;
	gap: 12px;
	margin-top: 8px;
	flex-wrap: wrap;
	justify-content: center;
}
#bk3slider .bk-insideBtn {
	display: inline-block;
	width: fit-content;
	padding:
		9px 14px;
	border:
		1px solid var(--color-primary, #565C83);
	border-radius: 3px;
	background:
		var(--color-primary, #565C83);
	color:
		var(--color-background-light, #F7F4EC);
	font-family:
		var(--font-Headings);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		background .2s ease, border-color .2s ease, color .2s ease;
}
#bk3slider .bk-insideBtn:hover {
	background:
		var(--color-secondary, #527D98);
	border-color:
		var(--color-secondary, #527D98);
	color:
		#fff;
	text-decoration: none;
}
/* Purchase button */
#bk3slider .bk-insideBtn.bk-buy {
	background:
		var(--color-light-accent, #FF7F53);
	border-color:
		var(--color-light-accent, #FF7F53);
	color:
		var(--color-dark-bg, #30383C);
}
#bk3slider .bk-insideBtn.bk-buy:hover {
	background:
		var(--color-accent, #B65D3E);
	border-color:
		var(--color-accent, #B65D3E);
	color:
		#fff;
}
/* =========================================================
   SLIDE TILT
========================================================= */
#bk3slider .bk-book.bk-tilt {
	transform:
		rotateY(28deg);
}
#bk3slider .bk-book.bk-viewinside, #bk3slider .bk-book.bk-viewinside.bk-tilt {
	transform:
		translate3d(0, 0, var(--liftZ)) rotateY(0deg);
}
#bk3slider .bk-book.bk-tilt .bk-spineText {
	opacity: 1;
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media(max-width:480px) {
	#bk3slider .bk3-shell {
		padding:
			0 34px;
	}
	#bk3slider {
		--arrowW: 34px;
	}
	#bk3slider .bk-item {
		min-height:
			calc(var(--bkH) + 85px);
	}
}
#bk3slider .bk-item.bk-offscreen .bk-book {
	visibility: hidden;
	pointer-events: none;
}