/*************************************
* Author: Jordon Greene
* Company: R.M. Bellamy Author
* Copyright 2024
* 
* RMBellamy.com
**************************************
* CSS STYLE SHEET PRIMARY
**************************************/

body
{
	width: 100%;
	height: 100vh;
	padding: 0px;
	margin: 0px;
	background-color: #820897;
}


/******************
 * ACCENT STYLES *
 ******************/
em { font-style:italic; }
strong {
	font-weight: 700;
}
a img { border: 0px; }

/***********************
 * QUICK FLOAT OPTIONS *
 ***********************/
.floatRight { float: right !important; }
.floatLeft { float: left !important; }
.floatNone { float: none !important; }
.floatRightToLeft { float: right !important; }


/**************************
 * QUICK POSITION OPTIONS *
 **************************/
.relative { position: relative !important; }
.absolute { position: absolute !important; }


/*************************
 * QUICK DISPLAY OPTIONS *
 *************************/
.displayBlock { display: block !important; }
.displayHidden { display: none !important; }
.displayInline { display: inline !important; }
.displayFlex { display: flex !important; }
.flex_JustifyCenter { justify-content: center !important; }
.overflow { overflow: hidden !important; }


/***********************
 * QUICK CLEAR OPTIONS *
 **********************/
.clear {	clear: both !important; }
.clearRight { clear: right !important; }
.clearLeft {	clear: left !important; }
.clearNone { clear: none !important; }


/*****************
 * QUICK MARGINS *
 ****************/
.noBottomMargin { margin-bottom: 0 !important; }
.marginBottonXSm { margin-bottom: 3px !important; }
.marginBottonSm { margin-bottom: 6px !important; }
.marginBottonMed { margin-bottom: 12px !important; }
.marginBottonLg { margin-bottom: 18px !important; }
.marginBottonXLg { margin-bottom: 24px !important; }
.marginBottonXXLg { margin-bottom: 32px !important; }
.marginBottonXXXLg { margin-bottom: 44px !important; }
.noTopMargin { margin-top: 0 !important; }
.marginTopXSm { margin-top: 3px !important; }
.marginTopSm { margin-top: 6px !important; }
.marginTopMed { margin-top: 12px !important; }
.marginTopLg { margin-top: 18px !important; }
.marginTopXLg { margin-top: 24px !important; }
.marginTopXXLg { margin-top: 32px !important; }
.marginTopXXXLg { margin-top: 44px !important; }
.noRightMargin { margin-right: 0 !important; }
.marginRightXSm { margin-right: 3px !important; }
.marginRightSm { margin-right: 6px !important; }
.marginRightMed { margin-right: 12px !important; }
.marginRightLarge { margin-right: 24px !important; }
.noLeftMargin { margin-left: 0 !important; }
.marginLeftXSm { margin-left: 3px !important; }
.marginLeftSm { margin-left: 6px !important; }
.marginLeftMed { margin-left: 12px !important; }
.marginLeftLarge { margin-left: 24px !important; }


/*****************
 * QUICK PADDING *
 ****************/
.noBottomPadding { padding-bottom: 0 !important; }
.noTopPadding { padding-top: 0 !important; }
.noLeftPadding { padding-left: 0 !important; }
.noRightPadding { padding-right: 0 !important; }


/*********************
 * BACKGROUND COLORS *
 ********************/
.bgYellowPale { background-color: rgba(255,249,231,1); }
 

/***********
 * BORDERS *
 **********/
.borderAllLtGrey { border: solid 1px rgba(89,89,89,0.3) !important; }


/**************
 * FONT FIXES *
 **************/
.textAlignLeft { text-align: left !important; }
.textAlignCenter { text-align: center !important; }
.textAlignRight { text-align: right !important; }
.textAlignJustify { text-align: justify !important; }
.extraSmallLineHeight { line-height: 90% !important; }
.xsmallLineHeight { line-height: 100% !important; }
.smallLineHeight { line-height: 110% !important; }
.singleLineHeight { line-height: 130% !important; }
.medLineHeight { line-height: 170% !important; }
.italic { font-style: italic; !important; }
.noItalic { font-style: none; !important; }
.bold { font-weight: 700 !important; }
.noBold { font-weight: 400 !important; }
.toUppercase { text-transform: uppercase !important; }
.exSmallText { font-size: 11px; }
.smallText { font-size: 13px; }
.regularText { font-size: 16px; }
.largeText { font-size: 19px; }
.exLargeText { font-size: 20px; }
.noWrap { white-space: nowrap !important; }
.hideHorizOverflow { overflow-x: hidden !important; }
.fTransparent { color: rgba(0,0,0,0) !important; }



/*********************
 * BACKGROUND COLORS *
 ********************/



/***************
 * FONT COLORS *
 **************/
.fRed { color: rgba(204,35,35,1) !important; }
.fGreen { color: rgba(46,160,128,1) !important; }
.fWhite { color: rgba(255,255,255,1) !important; }
.inputError { border: solid 1px rgba(230,0,0,1) !important; }
		
		
/******************
 * GENERAL STYLES *
 ******************/

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

img, header, nav, section, footer, aside, nav, main, article, hr, wrapper-full, wrapper-flex-between, wrapper-flex-center, divider-bar, divider-two-third, div-thirds, div-two-thirds, div-fourths, div-halves, table-header, table-row, table-cell, social-media-holder, social-media, dashboard-nav, mobile-nav, book-cover-desc, book-cover, retail-button, book-socials, retail-options, .bookCover, .wrapper, error-label, page-header {
	display: block;
}

header, nav, footer, main, hr, wrapper-full, wrapper-flex-between, wrapper-flex-center, img, table-header, table-row, table-cell, book-cover-desc, retail-options, .wrapper, page-header {
	width: 100%;
}

img, header, nav, section, footer, aside, nav, main, article, hr, wrapper-full, wrapper-flex-between, wrapper-flex-center, divider-bar, divider-two-third, div-thirds, div-two-thirds, div-fourths, div-halves, table-header, table-row, table-cell, social-media-holder, social-media, dashboard-nav, mobile-nav, book-cover-desc, book-cover, retail-button, book-socials, retail-options, .bookCover, error-label, page-header {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

img, header, nav, section, footer, aside, nav, main, article, hr, wrapper-full, wrapper-flex-between, wrapper-flex-center, divider-bar, divider-two-third, div-thirds, div-two-thirds, div-fourths, div-halves, table-header, table-row, table-cell, mobile-nav, book-cover-desc, book-cover, retail-button, book-socials, retail-options, social-media-holder, .bookCover, .wrapper, page-header {
	float: left;
}

misc-div, error-label {
	float: right;
}

.widthAuto {
	width: auto;
}

/*****************
 * CURSORS FIXES *
 ****************/
.cursorDefault { cursor: default !important; }
button, a {
	cursor: pointer;
}

wrapper-flex-between {
	display: flex !important;
	align-content: space-between;
	flex-wrap: wrap
}

wrapper-flex-center {
	display: flex !important;
	justify-content: center;
	flex-wrap: wrap
}

	wrapper-flex-center > social-media {
		cursor: pointer;
		padding: 15px;
		font-size: 18px;
		/* color: rgba(255, 255,255, 0.6); */
	}

header {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	z-index: 100;
	width: 100%;
	padding: 0 5% 0 5%;
}
	social-media-holder {
		position: absolute;
		width: 100%;
		right: 100px;
		top: 10px;
		z-index: 1000;
	}
	
	#headerHolder {
		width: 40%;
	}
	
	#header_logo {
		float: left;
		opacity: 1;
		padding: 1rem 0 1rem 0;
	}
	
	#header_logo:hover {
		opacity: 0.9;
	}

	nav {
		width: 100%;
		z-index: 90;
	}

		ul {
			float: right;
			display: flex;
			align-content: space-evenly;
			list-style-type: none;
		}
			
			ul > a {
				border-bottom: unset !important;
			}
			
			ul > a > li {
				float: left;
				padding: 0.5rem 1.25rem 0.5rem 1.25rem;
				font-family: 'Roboto', Arial, Sans-serif;
				font-size: 20px;
				color: #FFFFFF;
				line-height: 100%;
				margin-bottom: 0;
				font-weight: 600;
				letter-spacing: 1px;
				border-bottom: solid 4px transparent !important;
			}
		
			ul > a > li.socialMedia {
				padding: 0.5rem 0.5rem 0.5rem 0.5rem;
			}
		
			ul > a:hover > li {
				color: #fbdfff;
				border-bottom: solid 4px #e3a0ef !important;
			}

mobile-nav-menu {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #820897;
	z-index: 1000;
}

	a.mobile-nav-button {
		display: none;
		position: absolute;
		top: +10px;
		right: +10px;
		z-index: 1001;
		padding: 20px;
	}
	
		a.mobile-nav-button:hover {
			border-bottom: unset !important;
		}

		a.mobile-nav-button > p {
			font-size: 30px;
		}

		a.mobile-nav-button:active > p, a.mobile-nav-button:hover > p {
			/* color: rgba(89,89,89,1) */
		}
	
	a.nav-link {
		display: block;
		float: left;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 30px;
		padding-right: 30px;
	}
	
	mobile-nav-menu > a.nav-link {
		display: block;
		float: left;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 30px;
		padding-right: 30px;
		text-align: center;
	}
	
	mobile-nav-menu > a.nav-link:first-child {
		margin-top: 50px;
	}
	
main {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 0 10% 0 10%;
}

section {
	width: 100%;
	max-width: 1200px;
	margin-bottom: 2rem;
}

page-header {
    border-radius: 8px;
    padding: 0.5rem 1rem 0.5rem 1rem;
    margin-bottom: 2rem;
    /* border-top: solid 1px #b06bb8; */
    border-bottom: solid 3px #fce2ff;
	box-shadow: 0px 15px 7px -13px #62006d;
}

footer {
	display: flex !important;
	flex-direction: column;
	padding-top: 20px;
	padding-bottom: 30px;
	background: #a171a7;
	box-shadow: inset 0 10px 13px -10px black;
}
	
	footer > wrapper-full {
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
	
	#footer_logo {
		float: left;
		width: 25%;
		margin-top: 20px;
		margin-bottom: 0;
		opacity: 1;
	}
	
	#footer_logo:hover {
		opacity: 0.85;
	}
	
	footer > wrapper-full > social-media {
		cursor: pointer;
		padding: 15px;
		font-size: 18px;
		color: rgba(255, 255,255, 0.8);
	}
	
	footer > wrapper-full > social-media:hover, footer > wrapper-full > social-media:active {
		color: rgba(255, 255,255, 1);
	}

div-thirds {
	width: 33.333%;
}

wrapper-full > div-thirds:first-child {
	padding-right: 6px;
}

wrapper-full > div-thirds:nth-child(2) {
	padding-right: 3px;
	padding-left: 3px;
}

wrapper-full > div-thirds:nth-child(3) {
	padding-left: 6px;
}

divider-bar, divider-two-third {
	height: 1px;
	background-color: #D2B5FF;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 20px;
}

divider-two-third {
	width: 70%;
	margin-left: 15%;
	margin-right: 15%;
}

/* The Modal (background) */
modal-container {
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
modal-container-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  left: 50%;
  float: left;
  height: unset;
  max-height: 85vh;
  overflow-x: hidden;
  overflow-y: auto;
}

/* The Close Button */
modal-container-close {
	color: #aaaaaa;
	display: block;
	float: right;
	font-size: 20px !important;
	font-weight: bold;
	line-height: 50%;
}

modal-container-close:hover, modal-container-close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

.bookCover {
	width: 33.333%;
	padding: 20px;
}

.bookCover + book-cover-desc {
	display: flex !important;
	flex-wrap: wrap;
	align-content: center;
	width: 66.666%;
	padding: 20px;
}

book-cover {
	width: 40%;
	margin-left: 0%;
	margin-right: 5%;
	margin-bottom: 32px;
}

back-button + book-cover-desc {
	width: 55%;
	margin-bottom: 32px;
}

retail-options {
	display: flex !important;
	clear: left;
	flex-wrap: wrap;
	justify-content: center;
}

retail-button, book-socials {
	cursor: pointer;
	width: 29%;
	margin-left: 2%;
	margin-right: 2%;
	margin-bottom: 16px;
	text-align: center;
	font-family: 'Roboto', Arial, Sans-serif;
	font-size: 20px;
	line-height: 100%;
    font-weight: 600;
    color: #820897;
    padding: 0.3rem 0.7rem 0.3rem 0.7rem;
    background: #dbc3ff;
    border: solid 1px #dbc3ff;
    border-radius: 4px;
}

	book-socials {
		width: unset;
		margin-left: 0;
		margin-right: 1%;
		margin-bottom: 32px;
		padding: 6px;
		font-size: 16px;
	}
	
	retail-button {
		width: unset;
		padding: 0.75rem 1rem;
	}

	retail-button:hover, retail-button:active, book-socials:hover, book-socials:active {
		background: transparent;
		color: #dbc3ff;
	}

/***********************
* APPERS AND DISAPPERS *
***********************/
	
.appear1000, .appear700, .appearSpan700, .appear500, .appearSpan500, .socialHeaderNames, #siteBannerMobileHolder, #menuButton, #menuHome   {
	display: none;
}

.disappear1000, .disappear900, .disappear700, .disappear500 {
	display: block;
}

.disappearSpan900, .disappearSpan700, .disappearSpan500 {
	display: inline;
}


/*******************
* TABLE FORMATTING *
*******************/

table-header, table-row {
	padding-left: 8px;
	padding-right: 8px;
}

table-header {
	background: rgba(38,38,38,1);
	padding-top: 12px;
	padding-bottom: 12px;
	margin-bottom: 0px !important;
}

table-row {
	background: rgba(242,242,242,1);
	padding-top: 12px;
	padding-bottom: 12px;
}

.tableRow_Header {
	background-color: #dbd2dd;
}

table-row:nth-child(2n) {
	background: #ffffff;
}

table-row:hover{
	background: #f4e8f6;
}
table-header table-cell {
	font-weight: 700;
}

table-header > table-cell {
	color: rgba(255,255,255,1);
}

table-cell {
	min-height: 8px;
	padding-left: 15px;
	padding-right: 15px;
}

/******************
* FONT FORMATTING *
******************/

h1, h2, h3, h4, h5, h6, p {
	text-decoration: none;
	font-weight: 400;
	text-align: justify;
	margin-top: 0 !important;
}

a, a:visited, a:hover, a:active{
	text-decoration: none;
}

p, table-header, table-row, table-cell, a.nav-link, release-date, back-button, error-label, label, label + span {
	font-family: 'Roboto', Arial, Sans-serif;
	font-size: 17px;
	color: #ffffff;
	line-height: 155%;
	text-align: justify;
	margin-bottom: 0;
	word-wrap: break-word;
	font-weight: 300;
	letter-spacing: 1px;
}

	table-row, table-cell, table-row p, table-cell p, modal-container-content p, modal-container-content label {
		color: #212121;
		line-height: 160%;
	}

	p:not(:last-child), h1:not(:last-child), h2:not(:last-child), h3:not(:last-child), h4:not(:last-child), h5:not(:last-child), h6:not(:last-child) {
		margin-bottom: 16px;
	}
	
	error-label, label {
		margin-bottom: 0;
	}
	
	label {
		font-weight: 700;
		cursor: pointer;
	}
	
	error-label {
		color: rgba(204,35,35,1);
	}

	table-cell {
		margin-bottom: 0;
		text-align: unset;
		font-size: 15px;
	}
	
	release-date, back-button {
		margin-bottom: 16px;
	}
	
	release-date {
		display: block;
		float: left;
	}
	
	back-button {
		display: block;
		float: right;
		font-weight: 500;
	}
	
a.nav-link {
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 600;
	color: #dbc3ff;
}

a.nav-link:hover, a.nav-link:active {
	color: #ffffff;
}

	mobile-social-box {
		display: flex;
		justify-content: center;
		float: left;
		width: 100%;
		margin-top: 2rem;
	}

	mobile-social-box > a {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

table-header table-cell {
	color: rgba(255,255,255,1);
	font-weight: 700;
	line-height: 120%;
}

table-header {
	font-weight: 700;
}

footer wrapper-full p {
	font-family: 'Roboto', Arial, Sans-serif;
	font-size: 14px;
	text-align: center;
	margin-bottom: 30px;
	color: rgba(255,255,255,0.9);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto', Arial, Sans-serif;
	line-height: 120%;
	color: rgba(255, 255, 255,1);
	text-align: left;
}

h1 {
	font-size: 32px;
	position: relative;
}
	
	modal-container-content  > h1 {
		color: #000000;
		font-size: 26px;
	}

	h1 > dashboard-nav {
		/* position: absolute; */
		/* top: 7px; */
		/* right: 0; */
		font-family: 'Roboto', Arial, Sans-serif;
		font-size: 17px;
		color: rgba(255, 255, 255,1);
		float: right;
		font-weight: 700;
		padding-left: 8px;
		padding-right: 0;
		/* padding-top: 6px; */
		/* padding-bottom: 6px; */
	}
	
	.dashPageheader {
		margin-top: 1rem;
	}

	social-media {
		cursor: pointer;
		color: #D2B5FF;
		font-size: 18px;
		padding: 0.5rem;
	}

	social-media:hover, social-media:active {
		color: #FFFFFF;
	}

	ocial-media:nth-child(2) {
		
	}

	social-media:nth-child(3) {
		
	}

	social-media:nth-child(4) {
		
	}

	social-media:not(:first-child) {
		
	}

h2 {
	font-size: 26px;
	margin-bottom: 9px;
	clear: left;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
}

h3 {
	font-size: 16px;
	margin-bottom: 5px;
}

	page-header > h1 {
		 margin-bottom: 0;
		font-size: 25px;
	}



/*******************
 * LINK FORMATTING *
 *******************/

a {
	border-bottom: solid 1px transparent;
}
 
a, a:visited {
	color: #dbc3ff;
}
 
table-cell > a, table-cell > a:visited, modal-container-content a, modal-container-content a:visited {
	color: #845a8e;
}

a:has(> img) {
	border-bottom: unset !important;
}

a:hover, a:active {
	color: #ffffff;
	border-bottom: solid 1px #dbc3ff;
}

table-cell > a:hover, table-cell > a:active, modal-container-content a:hover, modal-container-content a:active {
	color: #760689;
}
 
a h1, a:visited h1 {
	color: rgba(71,89,37, 1);
}

a:hover h1, a:active h1 {
	color: rgba(158,120,0,1);
}

footer wrapper-full p a, footer wrapper-full p a:visited {
	color: rgba(255,255,255,1);
}

footer wrapper-full p a:hover, footer wrapper-full p a:active {
	color: rgba(255,255,255,0.7);
}


/**************
* FORM FIELDS *
**************/

input[type=checkbox], input[type=radio] {
	display: inline;
	width: auto;
	margin-bottom: auto;
}

input[type=text], input[type=password], input[type=number], select {
	font-family: 'Roboto', Arial, Sans-serif;
	font-size: 17px;
	line-height: 120%;
	color: rgba(89,89,89,1);
	width: 100%;
}

select, input[type=text], input[type=password], input[type=number] {
	padding: 0.9rem 1rem 0.9rem 1rem;
	margin-bottom: 12px;
    border: solid 1px rgba(150,150,150,1) !important;
}

::placeholder {
  color: #000000;
  opacity: 0.25; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: #000000;
  opacity: 0.25; /* Firefox */
}

select {
	padding-bottom: 0.83rem;
}

select:disabled, input[type=text]:disabled, input[type=password]:disabled, input[type=number]:disabled {
	background-color: rgba(150,150,150,0.2) !important;
}

select, input[type=text]:focus, input[type=password]:focus, input[type=number].:focus {
	border: solid 1px rgba(89,89,89,1);
}

textarea {
	font-family: 'Roboto', Arial, Sans-serif;
	font-size: 17px;
	color: rgba(89,89,89,1);
	line-height: 180%;
	text-align: justify;
	margin-bottom: 16px;
	word-wrap: break-word;
	width: 100%;
	padding: 0.9rem 1rem 0.9rem 1rem;
}

textarea.xTallTxtBox {
	height: 400px;
}

textarea.tallTxtBox {
	height: 300px;
}

textarea.medTxtBox {
	height: 100px;
}

textarea.smTxtBox {
	height: 60px;
}

button, input[type=submit] {
	font-size: 17px;
    font-family: 'Roboto', Arial, Sans-serif;
    line-height: 100%;
    font-weight: 600;
    color: #820897;
    padding: 0.3rem 0.7rem 0.3rem 0.7rem;
    background: #dbc3ff;
    border: solid 1px #dbc3ff;
    border-radius: 4px;
    cursor: pointer;
}

button:hover, input[type=submit]:hover {
	background: transparent;
	color: #dbc3ff;
}

button.largeBtn, button.GoToLoginBtn {
	font-size: 26px;
}

/*************
 * WEB FONTS *
 *************/
/* WEB FONTS */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 27, 2013 11:08:37 PM America/New_York */

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Black.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-BlackItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-BoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Baskervville';
    src: url('/fonts/Baskervville-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Baskervville';
    src: url('/fonts/Baskervville-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}



/*********************
 * RESPONSIVE DESIGN *
 *********************/
 
@media only screen 
and (max-width : 1200px) {
	
	#headerHolder {
		width: 50%;
	}
	
	ul > a > li {
		font-size: 17px;
	}
	
	#footer_logo {
		width: 35% !important;
	}
	
	main {
		padding: 0 5% 0 5%;
	}
	
}
 
@media only screen 
and (max-width : 1080px) {
	
	
	
}
 
@media only screen 
and (max-width : 1060px) {
	
	
	
}
 
@media only screen 
and (max-width : 1060px) {
	
	
	
}
 
@media only screen 
and (max-width : 1000px) {
	
	.disappear1000 {
		display: none;
	}
	
	.appear1000 {
		display: block;
	}
	
	#footer_logo {
		width: 40% !important;
	}
	
}



@media only screen 
and (max-width : 950px) {
	
	
	
}



@media only screen 
and (max-width : 900px) {
	
	.disappear900, .disappearSpan900 {
		display: none;
	}
	
	#headerHolder {
		width: 60%;
	}
	
	ul > a > li {
		font-size: 16px;
		padding: 0.5rem 0.5rem 0.5rem 0.5rem;
	}
	
	header, main, footer {
		padding-left: 2rem;
		padding-right: 2rem;
	}

}




@media only screen 
and (max-width : 850px) {
	
	
	
}



@media only screen 
and (max-width : 700px) {
	
	#headerHolder {
		width: 100%;
	}
		
		#header_logo {
			width: 80% !important;
			margin-left: 10%;
			margin-right: 10%;
		}
	
	.appear700 {
		display: block;
	}

	.appearSpan700 {
		display: inline;
	}

	.disappear700, .disappearSpan700 {
		display: none;
	}
	
	h1 > dashboard-nav {
		/* position: unset; */
		/* top: unset; */
		/* right: unset; */
		clear: left;
		width: 100%;
		float: left;
		text-align: center;
	}
	
	nav {
		display: none !important;
	}
	
	a.mobile-nav-button {
		display: block !important;
	}
	
	.bookCover {
		width: 50%;
	}
	
	.bookCover + book-cover-desc {
		width: 50%;
	}
	
	book-cover {
		width: 70%;
		margin-left: 15%;
		margin-right: 15%;
	}

	back-button + book-cover-desc {
		width: 100%;
	}
	
	#footer_logo {
		width: 50% !important;
	}
	
}


@media only screen 
and (max-width : 600px) {
	
	#header_logo {
		width: 85% !important;
		margin-left: 7.5%;
		margin-right: 7.5%;
	}
	
	#footer_logo {
		width: 50% !important;
	}
	
	book-cover {
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}
	
}


@media only screen 
and (max-width : 500px) {
	
	#header_logo {
		width: 90% !important;
		margin-left: 5%;
		margin-right: 5%;
	}
	
	.appear500 {
		display: block;
	}

	.appearSpan500 {
		display: inline;
	}

	.disappear500, .disappearSpan500 {
		display: none !important;
	}
	
	#footer_logo {
		width: 60% !important;
	}
	
	book-cover {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	
	release-date {
		margin-bottom: 0;
	}
	
	back-button {
		float: left;
		clear: left;
	}
	
}




@media only screen 
and (max-width : 450px) {
	
	.bookCover {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	
	.bookCover + book-cover-desc {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
		padding-top: 10px;
		padding-bottom: 0;
	}
	
	.bookCover + book-cover-desc:not(:last-child) {
		padding-bottom: 40px;
	}

}




@media only screen 
and (max-width : 400px) {
	
	#header_logo {
		width: 90% !important;
	}
	
	#footer_logo {
		width: 65% !important;
	}

}