article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, bullshit, purehype { display: block; }
<!--

/*#d4af37 gold*/

rgba(131,60,11,1) red/maroon
-->
/*---------------------------------
	OVERRIDES
-----------------------------------*/
#content * {
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
 @keyframes fadein { from {
opacity: .0;
}
to { opacity: 1; }
}
@-moz-keyframes fadein { from {
opacity: 0;
}
to { opacity: 1; }
}
@-webkit-keyframes fadein { from {
opacity: .0;
}
to { opacity: 1; }
}
@-ms-keyframes fadein { from {
opacity: 0;
}
to { opacity: 1; }
}
@-o-keyframes fadein { from {
opacity: 0;
}
to { opacity: 1; }
}
.grid { max-width: 1220px; margin: 0 auto; padding: 0 0em; }
.grid.flex { width: 100%; max-width: 100%;/* padding: 0 2%; padding: 2em; */ }
.flex { display: flex; align-items: stretch; }
.row { display: block; overflow: hidden; clear: both; }
*[class*="col_"].alpha { margin-left: 0; }
*[class*="col_"].omega { margin-right: 0; }
.col_1 { width: 6.6666666666667%; }
.col_2 { width: 15%; }
.col_3 { width: 23.333333333333%; }
.col_4 { width: 31.666666666667%; }
.col_5 { width: 40%; }
.col_6 { width: 48.333333333333%; }
.col_7 { width: 56.666666666667%; }
.col_8 { width: 65%; }
.col_9 { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }
*[class*="col_"] { margin-left: 0.83333333333333%; margin-right: 0.83333333333333%; margin-top: 0.5em; margin-bottom: 0.5em; float: left; display: block; }
.grid img { max-width: 100%; height: auto; }
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0 }
.clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0 }
* html .clearfix, *:first-child+html .clearfix { zoom: 1 }
/* Viewable Grids 
	To view your grids, add the class .visible to any grid container.
	This will add a background color so you can see the layout of your grids. 
*/
*[class*="col_"].visible { background: #eee; border: 1px dotted #ccc; }


/*---------------------------------
	Responsive Grid Media Queries - 1280, 1024, 768, 480
	1280-1024 	- desktop (default grid)
	1024-768 	- tablet landscape
	768-480 	- tablet 
	480-less 	- phone landscape & smaller
-----------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) {
.grid *[class*="col_"] { }
.grid { max-width: 1024px; }
.show-desktop { display: block; }
.hide-desktop { display: none; }
.show-tablet { display: none; }
.hide-tablet { display: block; }
.show-phone { display: none; }
.hide-phone { display: block; }
}
 @media all and (min-width: 768px) and (max-width: 1024px) {
.grid *[class*="col_"] { }
.grid { max-width: 768px; }
.show-desktop { display: none; }
.hide-desktop { display: block; }
.show-tablet { display: block; }
.hide-tablet { display: none; }
.show-phone { display: none; }
.hide-phone { display: block; }
}
 @media all and (min-width: 480px) and (max-width: 768px) {
.grid *[class*="col_"] { float: none; width: auto; clear: both; display: block; }
/* columns inside of columns */
.grid *[class*="col_"] [class*="col_"] { margin-left: 0; margin-right: 0; width: 100%; }
.grid { max-width: 480px; }
.show-desktop { display: none; }
.hide-desktop { display: block; }
.show-tablet { display: block; }
.hide-tablet { display: none; }
.show-phone { display: none; }
.hide-phone { display: block; }
}
 @media all and (max-width: 480px) {
.grid *[class*="col_"] { float: none; width: auto; clear: both; display: block; }
/* columns inside of columns */
.grid *[class*="col_"] [class*="col_"] { margin-left: 0; margin-right: 0; width: 100%; }
.grid { max-width: 100%;/*320*/ }
.show-desktop { display: none; }
.hide-desktop { display: block; }
.show-tablet { display: none; }
.hide-tablet { display: block; }
.show-phone { display: block; }
.hide-phone { display: none; }
}
/*---------------------------------
	LAYOUT
-----------------------------------*/
*,html, body  { box-sizing: border-box; }
html, body { width: 100%; position: relative; }
body { margin: 0; padding: 0 0 0 0; color: #000; font: normal 16px/150% 'Open Sans', arial, verdana, sans-serif; text-shadow: 0px 0px 1px transparent; background: url(../BG-parchment.jpg)  fixed; background-size: cover;}
#wrapper { position: relative; display: flex; flex-direction: column; min-height: calc(100vh - 6em); /*6em = footer min height*/ }
header { }
footer { position: absolute; width: 100%; left: 0; bottom: 0; min-height: 17em; padding: 1em; background: url(/assets/bg-wave.svg)/* #d4af37*/ top center; }
footer * { color: #fff; text-decoration: none; }
#footerWrap { position: absolute; bottom: 00px; z-index: 99; width: 100%; padding: 20px 20px 10px; /*max-width: 1220px;*/ left: 0; margin: 0 auto; }
#footerWrap blockquote { font-size: 15px; line-height: 120%; font-style: italic; margin: 0; padding: 0; border-left: none; display: block; width: 100% }
#footerWrap blockquote:after { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0 }
#footerWrap div { display: flex; align-items: flex-end; }
#blogQuotes { font-size: 12px; line-height: 110%; flex-direction: column; }
#logo { margin: .5em 0; width: 400px; }
#middle {padding-bottom: 18em; }
#mainContent { min-height: calc(100vh - 400px); }
#head_nav { border-bottom: 1px dashed #ccc; }
#content { padding: 2em 2em; }
body.Home #content { padding: 0 2em 2em; }
#sidenav { position: relative; }
#leftcolumn[class*="col_"], #content[class*="col_"] { margin: 0; }
#sidenav ul li a { padding: 1em .5em; background: #888; margin: 0 0 1px 0; color: #fff; }
#tagLine { font-family: 'Cormorant Garamond', serif; font-size: 2.3em; line-height: 1.2em;  display: flex; order: 2; align-items: center; text-align: center; margin: 0 auto;     position: relative;
    right: -1%;}
#logoWrap { width: auto; align-items: center; display: flex; order: 1; left:2em; position: relative;  }
/*
footer::after {
  content: "";
  position: relative;
  left: 0rem; 
  top: -5em; 
  float: left;
  display: blue;
  height: 4rem;
  width: 100vw;
  background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 70 500 60' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='500' height='500' style='stroke: none; fill: blue;' /%3E%3Cpath d='M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z' style='stroke: none; fill: transperent;'%3E%3C/path%3E%3C/svg%3E");
  background-size: 100% 100%;
z-index: 999; 
}
 */
/*---------------------------------
	MENU LAYOUT
-----------------------------------*/
.menu { margin: 0; padding: 0; line-height: 100%; font-size: 0; /* Kill white space gap between LI elements */ position: relative; z-index: 1000; }
.menu:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0 }
.menu li { margin: 0; padding: 0; list-style-type: none; display: inline-block; *display:inline;
position: relative; zoom: 1; line-height: inherit; top: 0; left: 0; font-size: 16px; /* fixed font-size to replace font-size:0 in parent .menu 1em/16px default */ }
.menu li a { margin: 0; padding: 0; display: block; display: inline; display: inline-block; position: relative; zoom: 1; line-height: 100%; top: 0; left: 0; white-space: nowrap; }
/*--------------Sub Menus-------------------*/
	/*.menu li:hover > ul{display:block;}*/
.menu ul { margin: 0; padding: 0; position: absolute; top: 100%; left: 0; display: none; min-width: 150px; max-width: 30em; *width:150px;
}
.menu ul li { display: block; width: 100%; }
.menu ul li a { display: block; }
.menu ul ul { top: 0; left: 100%; }
/*--------------Dividers-------------------*/
.menu ul li.divider { border-top: 1px solid #ccc; }
.menu ul li.divider a { border-top: 1px solid #fff; }
/*--------------Right---------------------*/
.menu li.right { float: right; }
/*--------------Arrows-------------------*/
.menu li.has-menu a { padding-right: 25px; }
.menu li.has-menu span.arrow { border-style: solid; border-width: 5px; display: block; position: absolute; top: 50%; right: 5px; font-size: 0; line-height: 0; height: 0; width: 0; }
.menu li li.has-menu span.arrow { margin-top: -4px; }
.menu { z-index: 600; }
.menu li { }
.menu li a { padding: 15px 20px; text-decoration: none; font-size: 1.2em; color: #000; }
.menu li.current>a, .menu li.current>a:hover, .menu li.current.hover>a { background: rgb(122,188,255); cursor: default; }
.menu li a:hover, .menu li.hover>a { background: #000; color: #fff; }
/* sub menus */
.menu ul { background: #111; color: #fff; }
.menu ul li { }
.menu ul li a { color: #fff; }
/* sub-sub menus */
.menu ul ul { }
.menu ul ul li { }
.menu ul ul li a { }
/* arrows */
.menu li.has-menu span.arrow { border-color-top: #ccc; border-color: #ccc transparent transparent transparent; }
.menu li li.has-menu span.arrow, .menu.vertical li.has-menu span.arrow { border-color-left: #ccc; border-color: transparent transparent transparent #ccc; }
.menu.vertical.right li.has-menu span.arrow { border-color-right: #ccc; border-color: transparent #ccc transparent transparent; }
.menu ul li.divider { border-top: 1px solid #ccc; }
.menu ul li.divider a { border-top: 1px solid #fff; }
/*---------------------------------
	RESPONSIVE MENU STYLES
-----------------------------------*/

ul.menu li.menu-toggle { display: none; }
 @media all and (max-width: 768px) {
.grid .menu li, .grid .menu.vertical li, .grid .menu.vertical.right li { display: block; display: none; }
.grid .menu li.menu-toggle, .grid .menu.vertical li.menu-toggle, .grid .menu.vertical.right li.menu-toggle { display: block; }
.grid .menu:hover li, .grid .menu.vertical:hover li, .grid .menu.vertical.right:hover li { display: block; }
/* arrows */
.grid .menu li.has-menu span.arrow, .grid .menu.vertical li.has-menu span.arrow, .grid .menu.vertical.right li.has-menu span.arrow, .grid .menu li li.has-menu span.arrow, .menu.vertical li.has-menu span.arrow { border-color-top: #ccc; border-color: #ccc transparent transparent transparent; }
.grid .menu.vertical.right li.has-menu span.arrow { right: 5px; left: auto; }
.grid .menu li a { display: block; }
.grid .menu ul, .grid .menu ul ul, .grid .menu.vertical ul, .grid .menu.vertical.right ul { position: relative; top: 0; left: 0; margin: 10px; }
}
/*---------------------------------
	HEADINGS
-----------------------------------*/
h1, h2, h3, h4, h5, h6 { font-family: 'Cormorant Garamond', serif; line-height: 1em; color: rgba(131,60,11,1) }
h1 { font-size: 3.0em; margin: 10px 0 20px 0; }
h2 { font-size: 2.5em; margin: 10px 0 10px 0; }
h3 { font-size: 2.0em; margin: 10px 0 10px 0; }
h4 { font-size: 1.75em; margin: 10px 0 10px 0; }
h5 { font-size: 1.5em; margin: 10px 0 10px 0; }
h6 { font-size: 1.2em; margin: 10px 0 5px 0; }
/*---------------------------------
	HTML STYLES
-----------------------------------*/
p { margin: 10px 0; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a { color: #4D99E0; outline: 0; }
a:active { color: inherit; }
a:visited { }
a:hover { }
a img { border: 0; }
a [class^="icon-"] { color: inherit; text-decoration: none; }
strong, b { font-weight: bold; }
strike { }
em, i { }
.hide { display: none; }
.show { display: block; }
/*---------------------------------
	UTILITY
-----------------------------------*/
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
/*---------------------------------
	HR
-----------------------------------*/
hr { clear: both; border-bottom: 0; border-top: 1px dotted #ccc; border-right: 0; border-left: 0; margin: 30px 0; min-height: 0; height: 1px; }
hr.alt1 { border-style: solid; }
hr.alt2 { border-style: dashed; }
/*---------------------------------
	IMAGES
-----------------------------------*/
img { margin: 0; padding: 0; display: inline-block; position: relative; zoom: 1; vertical-align: bottom; }
img.align-left, .img-wrap.align-left { float: left; margin: 0 10px 5px 0; }
img.align-right, .img-wrap.align-right { float: right; margin: 0 0 5px 10px; }
img.full-width { clear: both; display: block; width: 100%; height: auto; margin: 0 0 10px 0; }
div.caption { background: #f5f5f5; border: 1px solid #ddd; padding: 3px; max-width: 100%; display: inline-block; height: auto; }
div.caption img { display: block; padding: 0; margin: 0; width: 100%; height: auto; }
div.caption span { display: block; margin-top: 3px; font-size: 0.8em; color: #666; padding: 0px 5px; }
.gallery { }
.gallery a { display: inline-block; position: relative; border: 1px solid #ddd; background: #fff; padding: 3px; margin: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.gallery a img { display: block; position: relative; margin: 0; padding: 0; }
/*---------------------------------
 MISC OBJ 
	-----------------------------------*/
.box { padding: 16px; border-radius: 12px; border: 4px solid #999; box-shadow: 0 0 8px #999; }
.halo { box-shadow: 0 0 8px rgba(0,0,0,.9) }
.scrollTo { cursor: pointer; opacity: .5; }
.scrollTo:hover { opacity: 1; }
.clickme { position: fixed; z-index: 20; bottom: 260px; right: -38px; opacity: .3; }
.clickme:hover { opacity: 1 }
#arrowup { width: 32px; }
/* transition  */
.scrollTo, .clickme { transition: all 0.5s ease; }
.blackBar { padding: .5em; color: #fff; background: #323C45; }
.redBar { padding: .5em; color: #fff; background: #900; }
.redText { color: #900; }
.introText { font-size: 1.2em; }
.padH { padding-left: 7%; padding-right: 7%; }
.margV { margin-top: 2em; margin-bottom: 2em; }
.marLeft-2 {margin-left: 2em;}
#reasons p.bigText ~ p:not(.bigText) {margin-left: 2em;}
/*#reasons p.bigText {margin-left: 0em;}*/



.bigText { font-size: 1.5em; line-height: 130%; }
.bigBox { padding: 2em; }
.bigBoxGrey { padding: 2em; background: #777; color: #fff; }
.largeText { font-size: 2.2em; line-height: 130%; }
/* other  */
.breakout { margin: 0 calc(50% - 50vw + 20px ); overflow: auto;position:relative;  }

body.Home .breakout.hero{background: url(../images/home/hero1.jpg) #000 center bottom; background-size: cover; min-height: 475px; position:relative; }

.hero-Line1{  position: absolute; width: 100%; font-size: 3em; line-height: 1.1em; padding: 1em 20%; top: 35%; background: rgba(255,255,255,.5) ; text-align: center; }
.hero-Line2{  
position: relative; width: 100%; font-size: 1.6em; line-height: 1.1em; padding: 1em 20%; bottom: 0; background: rgb(200 67 60); color:#fff ; text-align: center;
}

/*  Products */

.bookTitle { font-size: 1.9em; font-family: 'Cormorant Garamond', serif; line-height: 1.1em;  }
.pPrice { font-size: 1.8em; margin-bottom: 2em; }
.buttonBuyNow, .buttonAddCart { text-align: center; margin: 1em auto; }
.buttonBuyNow a, .buttonAddCart a, a .bookTitle { color: #000; text-decoration: none!important; cursor: pointer; -webkit-appearance: button; width: 100%; max-width: 300px; padding: 10px 15px; }
.buttonBuyNow { background: #ffdd32; }
.buttonAddCart { background: #ffa64f; }
.buttonBuyNow:hover { background: #ffd815; }
.buttonAddCart:hover { background: #ff8f22; }
#bookMenu a { color: #000; text-decoration: none!important; cursor: pointer; }
#bookMenu { max-width: 800px; margin: 1em auto; text-align: center!important; }
body.products.overview #bookMenu { max-width: 90%; }
#bookMenu img { max-width: 90%; padding: 12px; }
/*  Footer Nav */
#footerWrap ul.menus li { list-style: none; margin: 0; padding: 0; display: block; }
#footerWrap ul.menus li.listTitle { font-size: 1.6em; color: #7B8195; text-transform: uppercase; margin-bottom: .5em; }
#footerWrap a { color: #fff; }
#footerWrap ul.menus a { color: #f; font-size: 1.0em; margin: 0; display: inline-block; line-height: 100%; width: 100%; }
#footerWrap ul.menus a:hover, footer a:hover { color: #fff; }
 @media all and (min-width: 1024px) and (max-width: 1280px) {
}
 @media all and  (max-width: 1024px) {
#footerWrap {
    position: absolute;
    bottom: 6px;    padding: 20px 20px 36px;
}#middle {
    padding-bottom: 14em;
}
}

 @media all and  (max-width: 800px) {
#tagLine { width: 100%;
    right: auto;display: block;}
#logoWrap {  width: 100%; left:auto; position: relative;display: block; }
 header .flex{ display: block; text-align:center;}
}


 @media all and (min-width: 768px) and (max-width: 1023px) {
}
 @media all and (min-width: 480px) and (max-width: 768px) {
}
 @media all and (max-width: 480px) {
h1, h2, h3, h4, h5, h6, footer, header, .menu { text-align: center }
}
 @media only screen and (-webkit-min-device-pixel-ratio: 1.3), @media (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 13/10), (min-device-pixel-ratio: 1.3), (min-resolution: 2dppx), (min-resolution: 120dpi) {
}