@charset "utf-8";
/*@start body and top bar */
body {
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	background: url("../images/websitebg.webp");
	background-repeat: no-repeat;
	background-position: top center;
	background-attachment: fixed;
	background-color: #72d9d6;
   	font-size: 1em;
    color: #333333;
	margin: 0 2%;
}
p {
	line-height: 1.5;
}
@media only screen and (min-width: 897px) {	
	p {
		line-height: 1.6;
	}
}
.topBar {
    display: block;
	color: #fff;
	font-weight: 400;
	background: #1B6C70;
}
/* @start Social Media Header */
.topNavSocial {
    padding: 15px 5px;
    text-align: center;
}
@media only screen and (min-width: 467px) {
	.topNavSocial {
		width: auto;
	}		
}
@media only screen and (min-width: 897px) {
	.topNavSocial {
		float: right;
		padding: 10px;
	}
}
.topNavSocial img {
  width: 19px;
}
.topNavSocial a {
  padding: 10px 5px;
}
@media only screen and (min-width: 425px) {
	.topNavSocial img {
	  width: auto;
	}
}
@media only screen and (min-width: 897px) {
	.topNavSocial a  {
	padding: 10px 5px;
	}
}
@media only screen and (min-width: 1097px) {
	.topNavSocial a  {
	padding: 5px 10px;
	}
}
/*@start social media icons*/
.facebook {
	background-image: url(/images/icon-facebook.png);
	background-repeat: no-repeat;
	background-position: center;
}
.facebook:hover {
	background-image: url(/images/icon-facebook-over.png);
	background-repeat: no-repeat;
	background-position: center;
}
.twitter {
	background-image: url(/images/icon-twitter.png);
	background-repeat: no-repeat;
	background-position: center;
}
.twitter:hover {
	background-image: url(/images/icon-twitter-over.png);
	background-repeat: no-repeat;
	background-position: center;
}
.pinterest {
	background-image: url(/images/icon-pinterest.png);
	background-repeat: no-repeat;
	background-position: center;
}
.pinterest:hover {
	background-image: url(/images/icon-pinterest-over.png);
	background-repeat: no-repeat;
	background-position: center;
}
.maillist {
	background-image: url(/images/icon-maillist.png);
	background-repeat: no-repeat;
	background-position: center;
}
.maillist:hover {
	background-image: url(/images/icon-maillist-over.png);
	background-repeat: no-repeat;
	background-position: center;
}
.instagram {
	background-image: url(/images/icon-instagram.png);
	background-repeat: no-repeat;
	background-position: center;
}
.instagram:hover {
	background-image: url(/images/icon-instagram-over.png);
	background-repeat: no-repeat;
	background-position: center;
}
.bookbub {
	background-image: url(/images/icon-bookbub.png);
	background-repeat: no-repeat;
	background-position: center;
}
.bookbub:hover {
	background-image: url(/images/icon-bookbub-over.png);
	background-repeat: no-repeat;
	background-position: center;
}
.goodreads {
	background-image: url(/images/icon-goodreads.png);
	background-repeat: no-repeat;
	background-position: center;
}
.goodreads:hover {
	background-image: url(/images/icon-goodreads-over.png);
	background-repeat: no-repeat;
	background-position: center;
}
.amazon {
	background-image: url(/images/icon-amazon.png);
	background-repeat: no-repeat;
	background-position: center;
}
.amazon:hover {
	background-image: url(/images/icon-amazon-over.png);
	background-repeat: no-repeat;
	background-position: center;
}
/*@start main website headers */
.small-header {
    display: block;
    background: #fff;
}
.small-header p {
	margin: 0;
}
@media only screen and (min-width: 481px) {
	.small-header {
		display: none;
	}
}
.medium-header {
    display: none;
}
@media only screen and (min-width: 481px) {
	.medium-header {
		display: block;
        background: #fff;
	}
	.medium-header p {
		margin: 0;
	}
}
@media only screen and (min-width: 897px) {
	.medium-header {
		display: none;
	}
}
.large-header {
    display: none;
}
@media only screen and (min-width: 897px) {
	.large-header {
		display: block;
        background: #fff;
  	}
	.large-header p {
		margin: 0;
	}
}
/* @start main grid */ 
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 94%;
	clear: none;
	float: none;
}
@media only screen and (min-width: 481px) {
	.gridContainer {
		width: 90.675%;
		clear: none;
		float: none;
		margin-left: auto;
	}
}
@media only screen and (min-width: 769px) {
	.gridContainer {
		max-width: 1432px;
		margin: auto;
		clear: none;
		float: none;
		margin-left: auto;
	}
}
/*@start of menu */
/* Add a black background color to the top navigation */
.topnav {
  background-color: #1B6C70;
  overflow: hidden;
  float: left;
  font-family: "Carrois Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  padding: 0 5px 0 10px;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:visited {
  color: #ffffff;
}
/* Add an active class to highlight the current page */
.topnav a:hover {
  background-color: #db444a;
  color: #ffffff;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: #ffffff;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  text-transform: uppercase;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #1B6C70;
  color: #ffffff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: #ffffff;
  padding: 12px 16px 12px 25px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #db444a;
  color: #fff;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #db444a;
  color: #fff;
}
.dropdown-content a:visited {
  color: #fff;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/* @start content area */  
.main-content {
    padding: 1% 5%;
    background-color: #fff;
    border-top: none;
}
@media only screen and (min-width: 481px) {
	.main-content {
		padding: 3%;
	}
}
@media only screen and (min-width: 897px) {
	.main-content {
		padding: 3% 5%;
	}
}
/*@start footer */
.main-footer {
    padding: 1% 5%;
    background: #db444a;
	font-size: 80%;
	text-transform: uppercase;
	color: #fff;
	line-height: 145%;
}
/* @start columns */
.col2thirdleft {
	float: none;
	width: 98%;
	padding: 0 1%;
	margin: auto;
}
@media only screen and (min-width: 897px) {
	.col2thirdleft {
		float: left;
		width: 62%;	
	}
}
.col1thirdright {
	float: none;
	width: 98%;
	padding: 0 1%;
	margin: 20px auto 30px auto;
}
@media only screen and (min-width: 897px) {
	.col1thirdright {
		float: right;
		width: 30%;	
		margin: auto;
	}
}
.col2thirdright {
	float: none;
	width: 98%;
	padding: 0 1%;
	margin: auto;
}
@media only screen and (min-width: 897px) {
	.col2thirdright {
		float: right;
		width: 62%;	
	}
}
.col1thirdleft {
	float: none;
	width: 98%;
	padding: 0 1%;
	margin: 20px auto 50px auto;
}
@media only screen and (min-width: 897px) {
	.col1thirdleft {
		float: left;
		width: 30%;	
		margin: auto;
	}
}
.col1third {
	float: none;
	width: 98%;
	padding: 0 1%;
	margin: 10px auto 30px auto;
}
@media only screen and (min-width: 897px) {
	.col1third {
		float: left;
		width: 31%;
		padding: 0 1.1666666666666667%;
	}	
}
.col1half {
	float: none;
	width: 98%;
	padding: 0 1%;
	margin: auto;
}
@media only screen and (min-width: 657px) {
	.col1half {
		float: left;
		width: 45%;
		padding: 0 2.5%;
	}
}
.col1halfright {
	float: none;
	width: 98%;
	padding: 0 1%;
	margin: auto;
}
@media only screen and (min-width: 657px) {
	.col1halfright {
		float: right;
		width: 45%;
		padding: 0 2.5% 0 0;
	}
}
.col1halfleft {
	float: none;
	width: 98%;
	padding: 0 1%;
	margin: auto;
}
@media only screen and (min-width: 657px) {
	.col1halfleft {
		float: left;
		width: 45%;
		padding: 0 2.5% 0 0;
	}
}
.col1fourth {
	float: none;
	width: 98%;
	padding: 0 1%;
	margin: 10px auto 30px auto;
}
@media only screen and (min-width: 947px) {
	.col1fourth {
		float: left;
		width: 22%;
		padding: 0 1.5%;
	}	
}
.clearDiv {
	clear:both;
}
/* @start headings */
h1, h2, h3, h4, h5, h6 {
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
	font-weight: normal;
	line-height: normal;
}
h1 {
  	font-family: "Satisfy", cursive;
    font-style: normal;
	font-size: 1.65em;
	color: #db444a;	
	font-weight: 500;
}
@media only screen and (min-width: 347px) {
	h1 {
		font-size: 1.85em;
	}		
}
@media only screen and (min-width: 397px) {
	h1 {
		font-size: 2em;
	}		
}
@media only screen and (min-width: 897px) {
	h1 {
		font-size: 2.25em;
	}		
}
h2 {
	font-size: 1.4em;
	color: #1B6C70;
	font-weight: 500;
	font-family: "Carrois Gothic", sans-serif;
	font-style: normal;
}
@media only screen and (min-width: 897px) {
	h2 {
		font-size: 1.5em;
	}
}
h3 {
	font-size: 1.3em;
	color: #000;
	font-weight: 500;
	font-family: "Carrois Gothic", sans-serif;
	font-style: normal;
}
@media only screen and (min-width: 897px) {
	h3 {
		font-size: 1.4em;
	}
}
h4 {
	font-size: 1.2em;
	color: #db444a;
	font-weight: 500;
	font-family: "Carrois Gothic", sans-serif;
	font-style: normal;
}
@media only screen and (min-width: 897px) {
	h4 {
		font-size: 1.3em;
	}
}
h5 {
    font-size: 1.1em;
    color : #1B6C70;
	font-weight: 600;
}
h6 {
    font-size: 1.1em;
    color : #000;
	font-weight: 600;
}
/*@start links */
a  {
  color : #1B6C70;
}

a:visited {
  color : #1B6C70;
}

a:hover  {
  color : #DB444A;
}
a.copyright {
	color:#fff;
	text-decoration: none;
}
a.copyright:visited {
	color:#fff;
}	
a.copyright:hover {
	color:#fff3ef;
}
/*@start images */
img, object, embed, video {
	max-width: 100%;
}
.ie6 img {
	width:100%;
}
.imgHPad {
	border: none;
	padding: 0 10px;
}
.imgVPad {
	border: none;
	padding: 10px 0;
}
.imgBPad {
	border: none;
	padding: 10px;
}
.imgHMPad {
	border: none;
	margin: 0 10px;
}
.imgVMPad {
	border: none;
	margin: 10px 0;
}
.imgBMPad {
	border: none;
	margin: 10px;
}
.imgShadow {
	width: 90%;
    background: #fff;
    padding: 10px;
    -moz-box-shadow: 0 0 15px #ccc;
    -webkit-box-shadow: 0 0 15px #ccc;
    box-shadow: 0 0 15px #ccc;
}
.imgRight {
	float: none;
	margin: 15px auto;
}
@media only screen and (min-width: 627px) {
	.imgRight {
		float: right;
		margin: 5px 0 25px 25px;
	}	
}
.imgLeft {
	float: none;
	margin: 15px auto;
}
@media only screen and (min-width: 627px) {
	.imgLeft  {
		float: right;
		margin: 5px 25px 25px  0;
	}	
}
/* @buttons */
button, input[type=button], input[type=reset], input[type=submit] {
    background: #000000;
    color: #fff;
    border: 1px solid transparent;
    cursor: pointer;
    -webkit-appearance: button;
    padding: 10px 20px;
}
button:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover {
    background: #DB444A;
    color: #fff;
}
.linkButton {
	display: inline-block;
	padding: 15px;
	text-align: center;
	cursor: pointer;
	border: none;
	color: #fff;
	font-size: 85%;
}
.linkButton:hover  {
	background: #000;
}
.linkButton a, a.linkButton  {
	color: #fff;
	text-decoration: none;
}
.goldLink  {
	background: #eda05b;
}
.pinkLink  {
	background: #e42f5a;
}
/*@ misc */
.colorBox {
	background-color: #f6f6f6;
	padding: 10px 20px;
	margin: 20px 0;
}
@media only screen and (min-width: 897px) {
	.colorBox {
		padding: 25px 20px;
	}
}
hr {
    float: left;
    width: 100%;
    height: .25em;
    border: 2px solid #fff3ef;
    background: #fff3ef;
    margin: 2em 0;
}
.largerText {
	font-size: 125%;
}
/*@start book slider */
.slider-content {
    padding: 1% 5%;
    background-color: #fff3ef;
}
@media only screen and (min-width: 481px) {
	.slider-content {
		padding: 3%;
	}
}
@media only screen and (min-width: 897px) {
	.slider-content {
		padding: 3% 5%;
	}
}
.sliderDate {
    display: inherit;
	padding: 5px 7px;
    background: #000;
    color: #fff;    
    font-size: 1em;
    text-align: center;
}
/*@start Book Pages*/
.bookCover {
    float: none;
    background: #fff;
    padding: 5px;
    -webkit-box-shadow: 1px 1px 3px 1px #b5b4b4;
    -moz-box-shadow: 1px 1px 3px 1px #b5b4b4;
	box-shadow: 1px 1px 3px 1px #b5b4b4;
}
.bookPage {
	width: 95%;
	margin: 0 auto 25px auto;
	max-width: 265px;
}
@media only screen and (min-width: 897px) {
	.bookPage {
		margin: 0;
	}	
}
.booksPage {
	margin: 0 auto;
	width: 90%;
	max-width: 250px;
}
@media only screen and (min-width: 947px) {
	.booksPage {
		margin: 0;
	}	
}
.seriesPage {
	margin: 15px auto;
	width: 200px;
}
@media only screen and (min-width: 897px) {
	.seriesPage {
		margin: 0px 15px 20px 15px;
		width: 140px;
	}	
}
/*Books buy box*/

.buyBox {
	width: 98%;
	max-width: 265px;
	margin: 35px auto 20px auto;
	background: #fff7f5;
	padding: 10px;
	text-align: center;
}
.buyBox img {
	padding: 5px 10px;
}
.bookDate {
    background: #000;
    color: #fff;
    padding: 15px;
    font-size: 1.2em;
}

/*Active Tabs*/
.bookNav {
	text-align: center;
}
@media only screen and (min-width: 897px) {
	.bookNav {
		text-align: left;
	}
}
.bookNav button {
	font-size: 1em;
	margin: 5px 10px 5px 0;
}
.activeBookTab {
	background: #1B6C70;
}
/*Books Reviews*/
p.reviewcredit {
	font-weight: bold;
	margin-left: 20px;
}
p.reviewer::before { 
    content: "~ ";
}
/*@start About page */
.bioPic {
    max-width: 200px;
    float: none;
    background: #fff;
    padding: 10px;
    -moz-box-shadow: 0 0 15px #ccc;
    -webkit-box-shadow: 0 0 15px #ccc;
    box-shadow: 0 0 15px #ccc;
    margin: 10px auto;
}
@media only screen and (min-width: 347px) {
	.bioPic {	
		max-width: 250px;
	}
}
@media only screen and (min-width: 897px) {
	.bioPic {	
		max-width: 190px;
	}
}
@media only screen and (min-width: 1047px) {
	.bioPic {	
		max-width: 225px;
	}
}
@media only screen and (min-width: 1197px) {
	.bioPic {	
		max-width: 275px;
	}
}
.homePic {
    max-width: 200px;
    float: none;
    background: #fff;
    padding: 10px;
    -moz-box-shadow: 0 0 15px #ccc;
    -webkit-box-shadow: 0 0 15px #ccc;
    box-shadow: 0 0 15px #ccc;
    margin: 10px auto;
}
/* @start Contact Form */
/* @form label + field :: field class is useful for validation 
---------------------------------------------------------------------- */
.floraforms .field-icon i { 
	color:#e42f5a; 
}
.floraforms .field-label em { 
	color:#e42f5a;
}
/* @form element :hover state 
-------------------------------------------- */
.floraforms .flo-input:hover,
.floraforms .flo-textarea:hover,
.floraforms .flo-select > select:hover,
.floraforms .flo-selectmulti select:hover, 
.floraforms .flo-input:hover ~ .flo-hint,
.floraforms .flo-file .file-input:hover + .flo-input,
.floraforms .flo-textarea:hover ~ .flo-hint {
	border-color: #000;
}
/* @control border-size :: color etc for these elements 
----------------------------------------------------------- */
.floraforms .flo-input,
.floraforms .flo-select,
.floraforms .flo-textarea,
.floraforms .flo-select > select,
.floraforms .flo-selectmulti select {
	border: 1px solid #e42f5a;
}
/* @primary button theme
-------------------------------------------- */
.floraforms .btn-themed {  background-color: #1B6C70;  }
.floraforms .btn-themed:hover,
.floraforms .btn-themed:focus { background-color: #DB444A; }
.floraforms .btn-themed:active{ background-color: #DB444A; }


.floraforms .alert-info { color:#e42f5a; background-color: #fff; }
.floraforms .alert-success { color:#fff; background-color: #eda05b; }
.floraforms .alert-warning { color: #fff; background-color: #e42f5a; }
.floraforms .alert-error { color:#e42f5a; background-color: #fff; }

/* @form element :focus state 
-------------------------------------------------------- */
.floraforms .flo-input:focus,
.floraforms .flo-textarea:focus,
.floraforms .flo-select > select:focus,
.floraforms .flo-selectmulti select:focus{ border-color: #eda05b; color: #333; }
.floraforms .flo-selectmulti select:focus, 
.floraforms .flo-input:focus ~ .flo-hint,
.floraforms .flo-textarea:focus ~ .flo-hint, 
.floraforms .flo-file .file-input:focus + .flo-input{ border-color: #eda05b; }
.floraforms .flo-select > select:focus + .arrow { color: #eda05b; }

/* @validation - error state
------------------------------------- */
.floraforms .state-error .flo-input,
.floraforms .state-error .flo-textarea,
.floraforms .state-error.flo-select > select,
.floraforms .state-error.flo-selectmulti > select,
.floraforms .state-error input:hover + .flo-checkbox, 
.floraforms .state-error input:hover + .flo-radio,
.floraforms .state-error input:focus + .flo-checkbox, 
.floraforms .state-error input:focus + .flo-radio,
.floraforms .state-error .flo-checkbox, 
.floraforms .state-error .flo-radio{
	background: rgba(255, 231, 192, 0.35);
	border-color: #eda05b;
}
/* @captcha + reload button
-------------------------------------------------- */
.floraforms .captcode {
	background: #fff;
    border: 1px solid #e42f5a;
}
.floraforms .refresh-captcha i { 
	color: #000; 
}
.floraforms .frm-header, .floraforms .frm-footer {
    padding: 0;
    background: #fff;
}