@font-face {
    font-family: 'christmas-display-font';
    src: url('/fonts/Hundergad.woff2') format('woff2'), /* Modern browsers */
         url('/fonts/Hundergad.woff') format('woff'),   /* Older browsers */
         url('/fonts/Hundergad.ttf') format('truetype'); /* Fallback for legacy browsers */
    font-weight: normal;
    font-style: normal;
}

:root {
    --pg-text-color: #fff;
    --pg-anchor-color: #DE9E22;
    --pg-anchor-color-hover: #B57D11;
}

html, button { /* buttons require explicit font family spec... silly */
	font-family: 'Georgia', 'Garamond', 'Droid Serif', 'Baskerville', serif;
}


html { font-size: 23px; } 
@media only screen and (max-width: 1400px) { html { font-size: 23px;  } }
@media only screen and (max-width: 1023px) { html { font-size: 23px;  } }
@media only screen and (max-width: 699px) { html { font-size: 21px;  } } 

font-size-micro {font-size: 0.60em; }
font-size-small {font-size: 0.75em; }
font-size-normal {font-size: 1em; }
font-size-large {font-size: 1.25em; }

body {
	text-align: center;
	overflow-x: hidden !important;
    color: var(--pg-text-color);
    margin: 0;
    padding: 0;
}

h1,h2,h3,h4,h5,h6 {font-weight: normal; display: inline-block; line-height: 0.9;}

h1 {font-size: 4rem; margin: 0 0 0.75rem 0; }
h2 {font-size: 3rem; margin: 0 0 0.75rem 0; }
h3 {font-size: 2rem; margin: 0 0 0.75rem 0; }
h4 {font-size: 1.5rem; margin: 0 0 0.75rem 0; }
h5 {font-size: 1.25rem; margin: 0 0 0.75rem 0; }
h6 {font-size: 1.25rem; margin: 0 0 0.75rem 0; }

@media only screen and (max-width: 699px) { 
	h1 {font-size: 3.5rem; }
	h2 {font-size: 2.75rem; }
	h3 {font-size: 2rem; }
	h4 {font-size: 1.5rem; }
	h5 {font-size: 1.25rem; }
	h6 {font-size: 1.25rem; }
} 

p {	
	margin-top: 1.5rem;
	line-height: 1.5; 
}

p:first-of-type {margin-top: 0;}
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {margin-top: 0;}


:first-child {margin-top: 0;}

a { color: var(--pg-anchor-color); }
a:hover {color: var(--pg-anchor-color-hover)}

ul, ol {}
li {line-height: 1.5; }

ul.block-list { list-style-type: none; margin: 0; padding: 0; width: 100%;  }
ul.vertical.block-list li { width: 100%;  }
ul.vertical.block-list li > a { display: block; }

button[formaction] {
	font-size: 2rem;
	padding: 0.5rem 2rem 0.5rem 2rem;
	margin-top: 2rem;
	border-radius: 8px;
	border: 0px;
	color: var(--btn-type-submit-text-color);
	background-color: var(--btn-type-submit-bg-color);
}

button[formaction]:hover {
	background-color: var(--btn-type-submit-bg-color-hover);
	cursor: pointer;
}

.display-block {display: block;}
.ta-left { text-align: left; }
.ta-right { text-align: right; }
.ta-center { text-align: center; }

.center {margin-left: auto !important; margin-right: auto !important;}

.full-width { display: block; width: 100%; }

img {max-width: 100%;}
img.preload {display: none;}

.caption {font-style: italic;}

.no-style { text-decoration: none; font-weight: normal; font-style: none; }

/* --------------------------------------------
	NAVIGATION - MAIN MENU
	-------------------------------------------*/

nav.main-menu {

	background-color: var(--main-menu-bg-color);

	ul {
		display: none;
		/*transition: opacity .5s;*/
		text-align: left;
		padding: 0;
		list-style: none;
		margin: 0;
	}


	.main-menu-section {
		display: inline-block;
	}

	.main-menu-section a { padding: 0.5rem 0.5rem 0.5rem 0.5rem; }
	.main-menu-section:first-child { padding-left: 1rem; }
	.main-menu-section:has(header:hover) { background-color: var(--main-menu-tier0-item-bg-color-hover); }

	.main-menu-section:hover ul,
	/*.main-menu-section:has(a:focus) ul*/ /* this performs the same behavior as focus-within, but focus-within has better browser coverage */
	/* Note: It appears that hovering sets focus, and also clicking on something (an anchor at least) sets focus.
	So clicking on an anchor causes it to gain permanent focus, which means you could leverage that for mobile so that touching on mobile
	will expand the dropdown menu */
	.main-menu-section:focus-within ul
	{
		position: absolute;
		background-color: var(--main-menu-bg-color);
		display: block;
	}

	li:hover {background-color: var(--main-menu-tier0-item-bg-color-hover);}
	a { display: block; padding: 5px 10px; color: var(--main-menu-tier0-link-text-color); text-decoration: none;}
	a:hover { color: var(--main-menu-tier0-link-text-color-hover); text-decoration: none;}


}

/* --------------------------------------------
	ELEMENT STACKING
	-------------------------------------------*/
.flex { justify-content: center; }

.flex > * { max-width: 100%;}
.flex > a > * { max-width: 100%;}

@media (min-width: 1200px) {
	.flex.flex-above-1200 { display: flex; max-width: 100%;}

	.flex.flex-above-1200 > img,
	.flex.flex-above-1200 > a > img 
		{ box-sizing: border-box; flex-grow: 1;}
}


@media (min-width: 1200px) {
	.flex.with-gutters.flex-above-1200 { padding-left: 10rem; padding-right: 5rem;}
	.flex.with-gutters.flex-above-1200 { display: flex; max-width: 100%;}

	.flex.with-gutters.flex-above-1200 > img,
	.flex.with-gutters.flex-above-1200 > a > img 
		{ padding: 20px 20px 20px 20px; box-sizing: border-box; flex-grow: 1;}
	.flex.with-gutters.flex-above-1200 > img:first-child,
	.flex.with-gutters.flex-above-1200 > a:first-child > img 
		{ padding-left: 0px; }
	.flex.with-gutters.flex-above-1200 > img:last-child,
	.flex.with-gutters.flex-above-1200 > a:last-child > img 
		{ padding-right: 0px; }
}

@media (max-width: 1279px) {
	.flex.with-gutters {padding-left: 3rem; padding-right: 3rem;}
}

@media (max-width: 767px) {
	.flex.with-gutters {padding-left: 1rem; padding-right: 1rem;}
}



/* --------------------------------------------
	HOLIDAY COUNTDOWN WEBSITE ELEMENTS
	-------------------------------------------*/

.master-header {overflow-x: hidden !important; }

.sticky-container { height: 2.25rem; }
.section-plackard {
	color: #EFE181;
	font-family: 'christmas-display-font', 'Georgia', 'Garamond', 'Droid Serif', 'Baskerville', serif;
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	background-image: url('/img/green-gold-trim-wood-plackard-narrow.webp');
	background-size: 100% 100%;
	padding: 0.35rem 1rem 0rem 1rem;
	height: 4rem; /* height is explicitly set so that we can float it and use a different sandbang element to establish header height*/
	font-size: 2rem;
}

.section-plackard-wide {
	background-image: url('/img/green-gold-trim-wood-plackard-wide.webp');
}

.sticky-container .page-title-plackard,
.sticky-container .menu-plackard {margin-top: 0.25rem;}

.content-wrap { text-align: center; }

h1,h2,h3,h4,h5,h6 {font-family: 'christmas-display-font','Georgia', 'Garamond', 'Droid Serif', 'Baskerville', serif;}

.simple-headers h1, h1.simple-header {font-size: 3.50rem; line-height: 1.15;font-family: 'Georgia', 'Garamond', 'Droid Serif', 'Baskerville', serif; }
.simple-headers h2, h2.simple-header {font-size: 2.75rem; line-height: 1.15;font-family: 'Georgia', 'Garamond', 'Droid Serif', 'Baskerville', serif; }
.simple-headers h3, h3.simple-header {font-size: 2.25rem; line-height: 1.15;font-family: 'Georgia', 'Garamond', 'Droid Serif', 'Baskerville', serif; }
.simple-headers h4, h4.simple-header {font-size: 1.75rem; line-height: 1.15;font-family: 'Georgia', 'Garamond', 'Droid Serif', 'Baskerville', serif; }
.simple-headers h5, h5.simple-header {font-size: 1.25rem; line-height: 1.15;font-family: 'Georgia', 'Garamond', 'Droid Serif', 'Baskerville', serif; }
.simple-headers h6, h6.simple-header {font-size: 1.25rem; line-height: 1.15;font-family: 'Georgia', 'Garamond', 'Droid Serif', 'Baskerville', serif; }

.flat-ribbon-header {border: 4px solid #cbc864; background-color: #891b1b; color: #fff; border-left: none; border-right: none;}
.flat-ribbon-header {border: 4px solid #cbc864; background-color: #891b1b; color: #fff; border-left: none; border-right: none;}
.flat-ribbon-header {border: 4px solid #cbc864; background-color: #891b1b; color: #fff; border-left: none; border-right: none;}
.flat-ribbon-header {border: 4px solid #cbc864; background-color: #891b1b; color: #fff; border-left: none; border-right: none;}
.flat-ribbon-header {border: 4px solid #cbc864; background-color: #891b1b; color: #fff; border-left: none; border-right: none;}
.flat-ribbon-header {border: 4px solid #cbc864; background-color: #891b1b; color: #fff; border-left: none; border-right: none;}

a.fancy {  
	font-size: 2rem;
	text-decoration: none;
	font-family: 'christmas-display-font','Georgia', 'Garamond', 'Droid Serif', 'Baskerville', serif;
}

.green-snowflakes-bg {
	background-image: url('/img/snowflakes-title-256px-white-ink-50percent-screen.webp');
	background-repeat: repeat;
	background-color: #2B4B30;
}

.page-title-ribbon {max-width: none; }
.page-title-ribbon {width: 100%; display: block; margin-top: 1rem; margin-bottom: -4rem;}
@media only screen and (max-width: 2000px) { .page-title-ribbon { width: 120%; margin-left: -10%; } }
@media only screen and (max-width: 1400px) { .page-title-ribbon { width: 140%; margin-left: -20%; } }
@media only screen and (max-width: 1023px) { .page-title-ribbon { width: 190%; margin-left: -45%; } }
@media only screen and (max-width: 599px) {  .page-title-ribbon { width: 195%; margin-left: -48%; } }

.christmas-garland-ruler { 
	background: url('/img/christmas-garland-ruler-150px-tall.webp');
	background-repeat: repeat-x;
	background-size: 1309px 150px;
	height: 150px;
	background-position: center;
}

.christmas-garland-ruler.bottom {
	margin-bottom: -75px;
}

.winterwood-plackard { 
	max-width: 100%;
	padding: 0px !important;
 }

.red-ribbon-separator {
	background-image: url('/img/red-ribbon-separator.gif');
	background-repeat: no-repeat;
	background-size: 100% 30px;
	height: 30px;
}

.thin-ruler { height: 10px;}

.thin-gold-ruler {
	background-image: url('/img/gold-ruler-1.webp'); 
	background-size: 100%;
	height: 10px;
}

.red-damask-bg {
	background-color: #782222;
	background-image: url('/img/damask-christmas-tile-1-300px-transparent-with-white-ink-10-percent-screen.webp');
	background-repeat: repeat;
	background-size: 200px 200px;
}

.red-damask-bg.dark { background-color: #570909; }

.squeeze {padding-left: 1rem; padding-right: 1rem; margin-left: auto; margin-right: auto;}
.squeeze { max-width: 34rem;  }
/*@media only screen and (max-width: 1400px) { .squeeze { max-width: 40rem;  } }
@media only screen and (max-width: 1023px) { .squeeze { max-width: 800px;  } }
@media only screen and (max-width: 599px) { .squeeze { max-width: 800px;  } }*/

.squeeze-no-padding {padding-left: 0; padding-right: 0;}

.overflow-squeeze {margin-left: -1rem; margin-right: -1rem;}
section { padding-top: 2rem;  padding-bottom: 3rem; overflow-x: hidden;}
.subsection {margin-bottom: 5rem;}

.subsection h1, .subsection h2, .subsection h3, .subsection h4, .subsection h5, .subsection h6  {}

.feature-image { max-width: 100%; }
.text-content { text-align: left; }

.content-wrap > section { padding-top: 3.25rem;    }

/*section.book-preview { background-color: #DAD8C4; color: #333333; }*/
section.book-preview {
	color: #222;
	background-color: #dfdfdf;
	/*background-color: #f1f1f1;
	background-image: url("https://www.transparenttextures.com/patterns/rice-paper-3.png");*/
}

section.book-preview h2 { font-size: 4rem; margin-bottom: 2rem; }

.footer { padding: 75px 0 0 0; }
.footer ul.block-list {max-width: 25rem;}
.footer ul.block-list li > a { 
 	font-size: 2.5rem;
	text-decoration: none;
	color: #EFE181;
	font-family: 'christmas-display-font', 'Georgia', 'Garamond', 'Droid Serif', 'Baskerville', serif;
	background-image: url('/img/red-gold-trim-wood-plackard.webp');
	background-size: 100% 100%;
	padding: 0.5rem 2rem 1.5rem 2rem;
 }



.text-black {color: #000;}
.review .stars { width: 16rem; max-width: 60%; }
.review .title { font-weight: bold; margin-top: 0; margin-bottom: 0;}
.review .reviewer-alias {font-style: italic;}

/* -------------------------------------------
	BUY NOW FORM
	------------------------------------------*/

.available-formats-note {text-align: center;}
.available-formats-note .heading {font-size: 1rem; margin-bottom: 0;}
.available-formats-note .formats {font-size: 1.5rem; margin-top: 0; line-height: 0.9;}
.available-formats-note .ampersand {font-size: 3rem; padding-left: 0.5rem; padding-right: 0.5rem;}

.book-format-selector { display: flex; }
.book-format-selector label,
.book-format-selector input {
	margin-bottom: 1rem;
	text-align: center;
	align-items: center;
	justify-content: center;
	border-radius: 1rem;
	padding: 0;
	cursor: pointer;
	flex-basis: auto;
	flex-grow: 1;
	padding: 1rem 0rem 1rem 0rem;
	border: 2px solid #D1D1D1;
}

.book-format-selector label:first-child,
.book-format-selector input:first-child { margin-right: 0.5rem; }

.book-format-selector label:last-child,
.book-format-selector input:last-child { margin-left: 0.5rem; }

.book-format-selector input[type="radio"] { display: none; }
.book-format-selector input[type="radio"]:checked + label { background: #E3CF1F; border: 4px solid #B3A314; }	
.book-format-selector label { font-size: 1rem; }
@media only screen and (max-width: 599px) { .book-format-selector label { font-size: 1rem;  } }
.book-format-selector label:hover { background: #E3CF1F; }

.book-format-selector input[type="radio"] + label > img { 
	display: inline-block; 
	height: 2rem; 
	width: auto;
	margin-left: -3rem;
	margin-right: -0.25rem;
	margin-top: -50rem;
	position: relative;
	top: 0.5rem;
	visibility: hidden; }
@media only screen and (max-width: 599px) { 
	.book-format-selector input[type="radio"] + label > img { height: 1.5rem; margin-left: -1rem; top: 0.35rem;  } 
}

.book-format-selector input[type="radio"]:checked + label > img { visibility: visible;}


.shopify-buy__product__price { font-weight: bold; font-size: 1.5rem; }

/*.buy-now-button { margin-bottom: 1.5rem; } the legacy button */

.shopify-buy__btn {
	border: none;
	background-color: transparent;
	cursor: pointer;
}

.ebook-buy-button, .paperback-buy-button { margin-bottom: 1rem; }
.ebook-buy-button .shopify-buy__btn,
.paperback-buy-button .shopify-buy__btn {}


.price-table { margin-bottom: 1.5rem; }
.price-table svg { height: 3rem; }
/*.price-table.with-inline-buy-buttons button.shopify-buy__btn {
	background-color: #ccc;
	padding: 0.75rem 1rem;
	font-size: 1rem;
}*/
.price-table.with-inline-buy-buttons button.shopify-buy__btn {
	width: 8rem;
	margin-top: 0.15rem;
}

/* --------------------------------------------
	SHOPIFY ELEMENTS
	-------------------------------------------*/
.visuallyhidden {display: none;}
.shopify-buy__product__compare-price { display: none; }

/* --------------------------------------------
	FORMS AND FIELDS
	-------------------------------------------*/

label { font-size: 1rem; }

input, select, option {
	color: #444;
	font-size: 1rem;
	height: 2rem;
	border: 1px solid #ddd;
	border-radius: 5px;
}


field {
	display: flex;
	margin-bottom: 0.5rem;
}

field label { white-space: nowrap;  width: 11rem; }
field input { flex-grow: 1; }


/* bogus-field is used for honey pots to thwart bots. the bot doesn't know the field is invisible unless its an uber-sophisticted bot */
.bogus-field { display: none; }


/* --------------------------------------------
	LOGIN FORM
	-------------------------------------------*/


.simple-cta-form {
	color: var(--simple-cta-form-text-color);
	background-color: var(--simple-cta-form-bg-color);
	padding: 2rem 2rem 2rem 2rem;
	border: 1px solid var(--simple-cta-form-border-color);
	border-radius: 8px;
	text-align: left;
	max-width: 550px;
	margin-left: auto;
	margin-right: auto;


	.footer { text-align: center; }
}	


/* --------------------------------------
	MAIN MENU
	---------------------------------------*/

.menu-trigger {
  display: none;
}

.menu-plackard {
  cursor: pointer;
  margin-left: 10px;
  float: right;
}

nav {
box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.15), 
            0 0.25rem 0.25rem rgba(0, 0, 0, 0.15);
  background: #570909;
  background-image: url('/img/damask-christmas-tile-1-300px-transparent-with-white-ink-10-percent-screen.webp');
  width: 100vw;
  padding: 4rem 1rem 2rem;
  top: 2.25rem;
  position: fixed;
  right: -100vw;
  box-sizing: border-box;
  transition: right 0.5s ease-in-out;
}

.menu-trigger:checked ~ nav{ right: 0;}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav li {
    margin-bottom: 10px;
}

nav a {
	text-decoration: none;
	color: #fff;
}


/* --------------------------------------
	ACCORDION COMPONENT
	---------------------------------------*/

.accordion-label { cursor: pointer; text-decoration: underline; }
.accordion-panel { 
	max-height: 0px;
	overflow: hidden;
	transition: max-height 2s ease;
}

/*.accordion-trigger {display: none;}

.accordion-trigger + .accordion-content {
	max-height: 0px;
	overflow: hidden;
	transition: max-height 2s ease;
}
.accordion-trigger:checked + .accordion-content {
	max-height: 125vh;
}*/

/* -----------------------------------------------
	KEN BURNS EFFECT
	----------------------------------------------*/

.kenburns { 
  overflow: hidden;
}

.kenburns img {  
	display: block;
	max-width: none !important;
}

@keyframes kb-bounce-left-and-right {
  0% {
    transform: scale3d(1,1,1) translate3d(0px,0px,0px);
    animation-timing-function: linear;
  }
  50%{
    transform: scale3d(1, 1, 1) translate3d([CALCULATED_VALUE_GOES_HERE], 0px, 0px);
    animation-timing-function: linear;
  }
  100%{
    transform: scale3d(1,1,1) translate3d(0px,0px,0px);
    animation-timing-function: linear;
  }
}