/*	Colours

Purple		#927BAD
Grey Text	#595959
*/

:root
{
	
	--home-page-background: /*#0D242F #124B66*/none;
	
	--positive-action: #713DAE;
	--primary-highlight: #f18701;
	--primary-body:	#595959;
	--book-card-header:	#555;
	--page-title: #754DA4;
	--header: #333;
	--yellow: #FECB00;
	--yellow-background-text: #333;
	--main-purple: #5D21A4;
	--fa-icon: #c3c3c3;
	--inline-button-highlight: #FFE064;
	--listing-background: #fff;
	--secondary-button: #1e96fc;
	--secondary-button-active: #5bb4ff;
	--join-button-bg: #24a800;
	--green: #3ec300;
	--warm-background: #F5F2F0;
	--plan-cap: #1e96fc;
	--section-header: #6f6f6f;
	
	--status-bar-bg: #555;
	--status-bar-color: #fff;
	--status-bar-highlight: #FECB00;
	
	--activity-list-background: /*#ffffff69*/none;
	--activity-list-text: inherit;
	--activity-book-title: #424242;
	
	--next-prev-bg: #565656;
	--next-prev-text: #fff;
}


*
{
	margin: 0;
	padding: 0;
	border: none;
	box-sizing: border-box;
}


::-moz-selection
{
	background: hsl(36, 100%, 50%);
	color: #fff;
}


::selection
{
	background: hsl(36, 100%, 50%);
	color: #fff;
}


html
{
	scroll-behaviour: smooth;
	/*scrollbar-color: var(--yellow) #4E1E87;*/
}


body
{
	background: #fff;
	font-family: 'open_sansregular', sans-serif;
	font-size: 1em;
	color: var(--primary-body);
}


.strip
{
	background: linear-gradient(90deg, rgb(117, 77, 164) 0%, rgb(255, 153, 0) 33%, rgb(117, 77, 164) 66%, rgb(255, 153, 0) 100%);
	height: 4px;
}



/*	Universal Styles
======================*/

.flickity-button
{
	background: none !important;
}


.flickity-prev-next-button.next
{
  right: -30px !important;
}


.flickity-prev-next-button.previous
{
  left: -30px !important;
}


.flickity-button-icon
{
  fill: #999 !important;
}


.flickity-button:hover
{
  background: none !important;
}


.flickity-button:hover .flickity-button-icon
{
  fill: var(--primary-highlight) !important;
}


/*.flickity-page-dots
{
	bottom: -10px !important;
}*/

.flickity-page-dots .dot
{
	width: 30px !important;
	height: 4px !important;
	border-radius: 0 !important;
	border-right: none !important;
	background: var(--yellow) !important;
}


/*	Global Notifications
==========================*/

ul.global-notifications li
{
	width: 100%;
	font-size: 1.2em;
	background: hsl(36, 100%, 50%);
	color: hsl(0, 0%, 10%);
	text-align: center;
	list-style: none;
	padding: 0.3em 0;
}


ul.global-notifications li.general, .general
{
	background: /*#401473*/ url('/static/images/notification/idad.png') no-repeat center center;
	/*color: #232323;*/
	padding: 5px 10px;
	background-size: cover;
	font-size: 0.95em;
	color: #5D21A4;
	font-family: open_sansregular;
	margin-bottom: 8px;
	line-height: 1.25;
	display: flex;
	justify-content: center;
	align-items: center;
}


ul.global-notifications li.general a
{
	text-decoration: underline;
}


ul.global-notifications li.general a:hover
{
	text-decoration: none;
}


div.general
{
	background: url('/static/images/notification/idad.png') no-repeat center center;
	color: #232323;
	padding: 0.5em 1em;
	background-size: cover;
	font-size: 1.5em;
	text-align: center;
	border-radius: 4px;
}


div.general p
{
	margin: 0;
}


ul.global-notifications li.mobile-promo
{
	display: none;
}


body header
{
	background: #f6f6f6bd;
	border-bottom: 1px solid #e8e8e8;
	/*position: sticky;
	top: 0;
	z-index: 200;*/
}


body header #banner
{
	color: #585858;
	overflow: auto;
	margin: 0 auto;
	max-width: 1060px;
}


body header #banner h2
{
	margin: 0;
	padding: 7px 0 0 5px;
	font-size: 1.5em;
	font-family: 'ExoBlackItalic', Helvetica, Arial, sans-serif;
	font-weight: normal;
	float: left;
}


body header #banner h2 a
{
    color: #585858;
    background: linear-gradient(60deg,var(--main-purple) 0%,#AD67FF 100%);
    background-clip: text;
    transform: skewX(-10deg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 5px;
}


body header #banner h2 a:hover
{
	color: hsl(36, 100%, 50%);
	text-decoration: none;
}


body header #banner #logo
{
	margin: -2px 3px 0 0;
	vertical-align: text-top;
}


#tagline
{
	font-size: 1.3em;
	font-family: 'open_sanssemibold', sans-serif;
}


h1, h2, h3, h4
{
	color: var(--header);
	font-family: 'open_sansregular', sans-serif;
	font-weight: normal;
	text-align: center;
}


h1
{
	margin: 0 0 0.5em 0.2em;
	font-size: 2.2em;
}


h2
{
	margin: 0 0 1em 0;
	font-size: 2em;
}


h3
{
	margin-top: 0;
}


h3 a
{
	color: hsl(0, 0%, 15%);
	margin-top: 0;
	text-decoration: none;
}


h3 a:hover
{
	text-decoration: none;
}


a
{
	color: var(--main-purple);
	text-decoration: none;
}


a:hover
{
	text-decoration: underline;
	text-decoration-color: #f90;
	text-decoration-thickness: 2px;
}


a.list-button
{
    background: #d9d9d9;
    padding: 0.5em 1.5em;
    border-radius: 6px;
    font-size: 0.9em;
    font-family: open_sanssemibold;
    display: block;
    width: max-content;
    margin: 1em auto !important;
    color: #424242 !important;
    text-decoration: none !important;
}


a.list-button:hover
{
	background: var(--secondary-button-active);
	text-decoration: none;
	color: #fff !important;
}


a.list-button svg
{
	color: var(--secondary-button);
	width: 1.3em;
}


a.list-button:hover svg
{
	color: #fff;
}


a.list-button.collection
{
	font-family: open_sansbold;
	font-size: 0.9em;
	display: flex;
	gap: 4px;
	align-items: center;
}


p
{
	margin-bottom: 0.5em;
}


p strong, li strong
{
	font-family: 'open_sanssemibold', sans-serif;
	font-weight: normal;
}


dl
{
	margin-left: 2em;
}


dt
{
	font-family: 'open_sanssemibold', sans-serif;
	font-weight: normal;
	margin-bottom: 0.3em;
}


dd
{
	margin-bottom: 1.2em;
}


abbr
{
	cursor: help;
}


.small-text
{
	font-size: 0.8em;
	color: #575757;
}


.lock-text
{
	clear: both;
	display: block;
	text-align: right;
	padding-top: 0.6em;
}


.empty-list
{
	text-align: center;
	font-size: 1.5em;
	height: 300px;
}



/*  External Links  */

#ext-links
{
	clear: right;
	margin-top: 2.3em;
	width: 50%;
	float: right;
}

#ext-links a
{
	padding: 3px 4px 3px 4px;
	float: right;
	display: block;
	font-size: 0.8em;
}


#ext-links a:hover
{
	background: hsl(36, 100%, 50%);
	text-decoration: none;
	color: hsl(0, 0%, 100%);
}



/*  Forms  */


label
{
	font-family: 'open_sanssemibold', sans-serif;
	color: hsl(0, 0%, 30%);
	font-size: 1.1em;
}

#paymentform p
{
	margin-bottom: 1.5em;
}


input[type="submit"]
{
    text-decoration: none;
    color: #fff;
    padding: 5px 20px;
    background: var(--positive-action);
    border-radius: 4px;
    font-family: open_sanssemibold;
    margin: 20px auto 0 auto;
    text-transform: uppercase;
}


input[type="submit"]:hover
{
	background: #915BD0;
	cursor: pointer;
}


input:not([type="submit"]):not([type="file"]):not([type="radio"])
{
	padding: 0.5em 0.8em 0.5em 0.8em;
	color: #494949;
	border: 1px solid #ccc;
	margin: 0 0 0.4em 0;
	width: 100%;
	text-align: center;
	font-size: 1em;
	font-family: 'open_sansregular', sans-serif;
	border-radius: 4px;
}


input:not([type="submit"]):not([type="file"]):focus, input:not([type="submit"]):not([type="file"]):hover
{
	border: 1px solid #f90;
}


input#avatar-clear_id
{
	width: auto;
}


img.captcha
{
    vertical-align: middle;
}


#upload-book
{
	margin: 2em auto 1em auto;
	max-width: 500px;
}


/*#upload-book label
{
	text-align: left;
}*/


#upload-book label span
{
	font-size: 0.7em;
	font-family: open_sansregular;
}


/*#upload-book label:hover
{
	background: hsl(36, 100%, 50%);
	color: hsl(0, 0%, 20%);
	cursor: pointer;
}*/


#upload-book select
{
	background: #fff;
	padding: 1em;
	margin: 0.5em 0 -0.45em 0;
	color: #494949;
	border: 1px solid #ccc;
	text-overflow: ellipsis;
	width: 100%;
	border-radius: 4px;
}


#upload-book input[type="file"]
{
    text-align: center;
    margin: 20px;
}


#upload-book label.dropzone
{
    font-family: 'open_sanssemibold', sans-serif;
    font-size: 1.1em;
    background: #F7F7F7;
    padding: 3em;
    margin: 0.5em 0 -0.45em 0;
    color: #494949;
    border: 2px dashed #ccc;
    width: 100%;
    border-radius: 4px;
    display: block;
    cursor: pointer;
}


#upload-book label.dropzone:hover
{
    background: #FFF;
    border: 2px dashed var(--primary-highlight);
}


#upload-book input[type="checkbox"]
{
	
}


#upload-book #id_make_private
{
	width: auto;
	margin: 0;
}


#upload-book select
{
	text-align: center;
}


#upload-book select:focus, #upload-book select:hover
{
	background: hsl(0, 0%, 100%);
	color: hsl(0, 0%, 20%);
	border: 1px solid hsl(36, 100%, 50%);
	cursor: pointer;
}


#upload-book input[type="submit"]
{
	font-size: 20px;
	margin: 0 auto;
	display: block;
}


#upload-book input[type="submit"]:disabled, #upload-book input[type="submit"][disabled]
{
	display: none;
}


#upload-book p
{
	padding-bottom: 2em;
}


#content.form-page
{
	text-align: center;
	padding: 0 2em 2em 2em;
	max-width: 800px;
	margin: 0 auto;
}


.form-page img
{
	margin: 1em 0;
}



/*  Edit Account  */


#accountForm h3
{
	font-size: 1.5em;
	margin: 1.5em 0 0.3em 0;
}


form#details.form-card, form#accountForm.form-card, #deleteaccount.form-card, #update_send_details.form-card
{
	max-width: 500px;
	margin: 30px auto;
	border-top: 1px solid #e8e8e8;
}


img.avatar
{
	border-radius: 60px;
	outline: 1px solid var(--positive-action);
}


form#details img.avatar
{
    margin: 10px 0 0 0;
    border: 5px solid var(--main-purple);
    box-sizing: content-box;
    border-radius: 100px;
	max-width: 100px;
	max-height: 100px;
}
 

#accountForm .library-size
{
	font-family: 'open_sansbold';
}


#accountForm label.subscription
{
	color: var(--header);
	font-size: 1em;
	display: block;
	margin: 0 auto 0.8em auto;
	text-align: left;
	cursor: pointer;
	background: hsl(0, 0%, 93%);
	padding: 1em 0 1.6em 1.5em;
	position: relative;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
	border-radius: 4px;
}


#accountForm label.subscription .switch
{
	display: none;
}


#accountForm label.subscription input[type="radio"]
{
	display: none;
}


#accountForm label.subscription.selected input[type="radio"]:checked+.switch
{
	display: none;
}


#accountForm label.subscription input[type="radio"]:checked+.switch
{
	display: block;
	height: 100%;
	background: hsl(107, 100%, 33%);
	color: #fff;
	padding: 0 0.5em 1px 0.5em;
	border-right: 4px solid hsl(107, 100%, 33%);
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 0 4px 4px 0;
}


#accountForm label.subscription ul.plan-details
{
	margin: 0 0 0 1em;
	list-style: none;
}

#accountForm h4.title
{
	font-family: ExoBlackItalic;
	font-weight: normal;
	line-height: 1.2em;
	margin: 0 0 0.8em 0;
	text-align: left;
	font-size: 1.4em;
}


#accountForm h4.title span
{
	font-family: 'open_sansregular';
	font-size: 0.7em;
}


#accountForm span.storage
{
	font-family: 'open_sansbold', sans-serif;
	color: var(--secondary-button);
}

#accountForm label.subscription:hover span.storage
{
	color: #fff;
}


#accountForm span.price
{
	font-family: 'open_sanssemibold', sans-serif;
}


#accountForm .description
{
	font-family: open_sansregular;
	margin: 1em 1em 0 0;
}


#accountForm label.subscription.selected
{
	border: 4px solid hsl(36, 100%, 50%);
}


#accountForm label.subscription.selected #selected-plan
{
	background: hsl(36, 100%, 50%);
	color: #fff;
	padding: 0 0.5em 0 0.5em;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
}


#accountForm label.subscription:hover
{
	color: #fff;
	background: hsl(107, 100%, 33%);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


#accountForm label.subscription:hover h4
{
	color: #fff;
}


#accountForm label.subscription.selected:hover #selected-plan
{
	color: #fff;
	background: hsl(36, 100%, 50%);
}


/*  Main menu  */

ul#main-menu, ul#user-menu
{
	overflow: auto;
	list-style-type: none;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	font-size: 0.9em;
	padding: 0.3em;
	font-weight: normal;
}

ul#main-menu
{
	font-family: open_sansbold;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	justify-content: center;
	padding-left: 2px;
	align-items: center;
	gap: 5px;
}


#sidebarMenu
{
	display: none;
}


input#openSidebarMenu
{
	display: none;
}
	

ul#user-menu
{
	float: right;
	font-family: open_sanssemibold;
	gap: 5px;
	align-items: center;
}


ul#main-menu li a, ul#user-menu li a
{
	text-decoration: none;
	color: #6B3BA2;
	padding: 0.5em 0.5em 0.4em 0.5em;
	display: block;
	width: 100%;
	text-align: center;
}


ul#user-menu li a
{
	color: var(---primary-body);
	clear: both;
}


ul#user-menu li a.plus
{
	background: var(--secondary-button);
	color: #fff;border-radius: 10px;
	padding: 3px 10px;
	display: flex;
	align-items: center;
}


ul#user-menu li a.plus svg
{
	width: 1.1em;
	margin: 0 2px 0 0;
	fill: #fff;
}


ul#main-menu li a:hover, ul#main-menu li a.selected:hover, ul#user-menu li a:hover, ul#user-menu li a.selected:hover
{
	color: #AF8DD7;
}


ul#main-menu li a.selected
{
	color: #AF8DD7;
}


ul#user-menu li .dropdown-content a span
{
	font-family: open_sansregular;
	font-size: 0.8em;
}


ul#user-menu li .dropdown-content a.minor
{
	font-family: open_sansregular;
	color: var(--primary-body);
}


ul#user-menu li .dropdown-content a.minor .fa
{
	font-size: 1.2rem;
	margin-top: 0.1em;
}


ul#user-menu .dropdown-content a .fa
{
	margin: 0.2em 0 0.5em 0.1em;
	color: #6B3BA254;
	width: 37px;
	font-size: 2em;
	float: left;
	display: none;
}


ul#user-menu .dropdown-content a.selected .fa, ul#user-menu .dropdown-content a:hover .fa
{
	/*color: #fff;*/
}


ul#user-menu .dropdown-content hr
{
	border-top: 2px dotted #d9d9d9;
	margin: 5px 0;
}


#search-menu
{
	width: max-content;
}


#search-menu input#id_q
{
	font-size: inherit;
	border: 1px solid transparent;
	border-bottom: 0;
	padding: 0.3em;
	float: left;
	margin: 0;
	width: auto;
	background: #fff;
	color: #754DA4;
	box-shadow: inset 0 1px 4px 0 #ccc;
}


#search-menu input#id_q:focus, #search-menu input#id_q:hover
{
	border: 1px solid transparent;
	border-bottom: 0;
	/*background-image: linear-gradient(132deg, #f4edfc 29.17%, #ffffff 29.17%, #ffffff 50%, #f4edfc 50%, #f4edfc 79.17%, #ffffff 79.17%, #ffffff 100%);*/
	background-image: linear-gradient(132deg, #f4edfc 50%, #ffffff 50%, #ffffff 50%, #f4edfc 50%, #f4edfc 100%, #ffffff 100%, #ffffff 100%);
	background-size: 9.42px 10.46px;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}


#search-menu input[type="submit"]
{
	padding: 0.35em 1em 0.35em 1em;
	font-size: inherit;
	background: #f6f6f6;
	border-radius: 0;
	font-family: open_sansbold;
	color: #6B3BA2;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}


#search-menu input[type="submit"]:hover
{
	color: #AF8DD7;
	cursor: pointer;
}


ul#user-menu li a.login-signup
{
	font-family: open_sansbold;
	text-transform: uppercase;
	border: 2px solid;
	border-radius: 4px;
	font-size: 0.9em;
	padding: 0.4em 1em;
	transition: 0.2s;
	text-decoration: none;
}


ul#user-menu li a.login
{
	border-color: var(--positive-action);
	color: var(--positive-action);
}


ul#user-menu li a.login:hover
{
	color: #fff;
	background: var(--positive-action);
	text-decoration: none;
}


ul#user-menu li a.join
{
	color: #fff;
	background: var(--join-button-bg);
	border-color: var(--join-button-bg);
}


ul#user-menu li a.join:hover
{
	color: #fff;
	background: #41c106;
	border-color: #41c106;
	text-decoration: none;
}


ul#user-menu li a img.avatar
{
	border-radius: 60px;
	vertical-align: middle;
	margin: -0.2em 0.3em 0 0;
	outline: 1px solid var(--positive-action);
}


ul#user-menu li a.upload
{
	margin: 0;
}

/*
ul#user-menu li a.upload svg
{
	width: 24px;
	opacity: 0.9;
}


ul#user-menu li a.upload:hover
{
	background: var(--main-purple);
	color: #fff;
	text-decoration: none
}*/


/*	Dropdown User Menu	*/

li.dropdown
{
	display: inline-block;
	margin-left: 1em;
}


a.dropbtn
{
	font-size: 1.2em;
}


.dropdown-content
{
	display: none;
	position: absolute;
	min-width: max-content;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1000;
	background: #fff;
	border-radius: 4px;
	/*right: 0;*/
}

.dropdown-content a
{
	padding: 0.5em 0.8em !important;
	text-align: left !important;
}

.dropdown-content a:hover
{

}

.dropdown:hover .dropdown-content
{
	display: block;
}



/*  Page  */

#page
{
	/*overflow: auto;*/
	background: var(--warm-background);
}


#content
{
    padding: 2em 1.5em 4em 1.5em;
    overflow: auto;
    width: 100%;
}


#content.home
{
	padding: 0;
	background: var(--home-page-background);
}


section.central
{
	max-width: 1060px;
	margin: 20px auto 0 auto;
	overflow: auto;
}



/*	Search Home	*/


form#search-home input[type="search"]
{
	display: block;
	margin: 0 auto;
	color: #595959;
	border: 2px solid #FECB00;
	border-radius: 4px;
	font-size: 1.5em;
}


form#search-home input[type="search"]:focus, form#search-home input[type="search"]:hover
{
	border: 2px solid #754DA4;
}


form#search-home #search-button
{
	display: block;
	margin: 0.2em auto;
	font-size: 1.5em;
	background: none;
	color: #754DA4;
	font-family: open_sanssemibold;
	font-weight: normal;
}



/*  Listing  */


#content.listing
{
	background: var(--warm-background);
	padding-bottom: 10em;
	min-height: 500px;
}


/*#content.listing .text-block
{
	width: 60%;
	margin: 0 auto 3em auto;
	padding: 2em 4em 4em 4em;
	background: hsl(0, 0%, 100%);
}*/


#filter-bar
{
    padding: 10px 20px;
    margin: 1em auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background: #dfdfdf;
    border-radius: 4px;
    color: var(--primary-body);
    font-size: 13px;
    gap: 20px;
}


#filter-bar label
{
    font-family: 'open_sansbold', sans-serif;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
}


#filter-bar div > label
{
    font-family: 'open_sansregular';
}


#filter-bar ul#id_bookshop_type, #filter-bar ul#id_formats
{
    text-transform: uppercase;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 5px;
    margin: 5px 0 0 0;
}


#filter-bar ul li label
{
    padding: 3px 10px;
    border-radius: 6px;
}   


#filter-bar ul#id_bookshop_type li label
{
    background: var(--inline-button-highlight);
}


#filter-bar ul#id_formats li label
{
    background: #1e96fc5e;
}


#filter-bar input[type="checkbox"]
{
    width: unset;
    text-align: unset;
    margin: 0 2px 0 10px;
}


#filter-bar input[type="submit"]
{
    margin: 0 0 0 20px;
    background: var(--secondary-button);
}


#filter-bar input[type="submit"]:hover
{
    background: var(--secondary-button-active);
}


#filter-bar ul#id_formats input, #filter-bar ul#id_bookshop_type input
{
  width: unset;
  text-align: unset;
  margin: 0;
}


#filter-bar #id_name, #filter-bar #id_order, #filter-bar select
{
  padding: 0.5em 0.8em 0.5em 0.8em;
  color: #494949;
  border: 1px solid #ccc;
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 1em;
  font-family: 'open_sansregular', sans-serif;
  border-radius: 4px;
  background: #fff;
}


#filter-bar input#id_name, #filter-bar select option
{
    font-family: 'open_sansbold', sans-serif;
    color: inherit;
    font-size: inherit;
    text-transform: uppercase;
}


#shop-listing
{
	text-align: center;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
}


#shop-listing .shop
{
	margin: 15px;
	width: 100%;
	background: #fff;
	border-radius: 22px;
	max-width: 400px;
	box-shadow: 0 1px 8px 0px rgba(0,0,0,0.12);
	position: relative;
	padding: 25px;
	text-align: left;
}


#shop-listing .shop.closed
{
    background: #f4f3f3;
    box-shadow: 0 1px 8px 0px rgba(0, 0, 0, 0.07);
}


#shop-listing .closed-text
{
    background: #fff;
    padding: 3px 10px;
    border-radius: 10px;
    font-family: open_sanssemibold;
    color: var(--primary-highlight);
    margin: 1em 0;
}


#shop-listing .shop h2
{
	text-align: left;
	margin: 0 0 20px 0;
	font-size: 20px;
	font-family: open_sansbold;
	line-height: 1.2;
	font-weight: normal;
	color: var(--section-header);
	text-transform: uppercase;
}


#shop-listing .shop .details
{
    margin-bottom: 1em;
}


#shop-listing .shop p
{
	font-size: 0.85em;
}


#shop-listing .shop .description
{
	padding: 10px 0;
	clear: both;
}


#shop-listing .shop h4
{
    text-align: left;
    font-size: 0.9em;
    font-family: open_sanssemibold;
    color: var(--primary-body);
    margin: 0 0 0.2em 0;
}


#shop-listing .shop .shop-type-list, #shop-listing .shop .formats-list
{
    display: flex;
    font-size: 0.75em;
    font-family: open_sansbold;
    text-transform: uppercase;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 0.7em 0;
}


#shop-listing .shop .shop-type, #shop-listing .shop .format
{
    background: var(--inline-button-highlight);
    padding: 3px 10px;
    border-radius: 6px;
}


#shop-listing .shop .shop-type
{
    background: var(--inline-button-highlight);
}


#shop-listing .shop .format
{
    background: #1e96fc5e;
}


#shop-listing .shop .visit-link
{
	text-align: right;
}


#shop-listing .shop .visit-link a
{
	font-family: open_sanssemibold;
}


#shop-listing .shop .visit-link .fa
{
	color: var(--main-purple);
	margin-left: 3px;
	font-size: 0.8em;
	vertical-align: top;
}


#shop-listing .shop p.details .bullet
{
	color: var(--inline-button-highlight);
	padding: 0 0.5em;
}


#shop-listing .shop ul, #shop-listing .shop ol
{
	margin: 1em 0 1.2em 2em;
}


#shop-listing .shop ul li, #shop-listing .shop ol li
{
	margin: 0 0 0.5em 0;
}


/* Collections */

#list
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
}


.collection-box
{
	width: 360px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	background: hsl(0, 0%, 100%);
	color: var(--primary-body);
	border-radius: 4px;
	padding: 10px 10px 15px 10px;
	border-left: 4px solid var(--main-purple);
}


.collection-box .icon-bar
{
	display: flex;
	margin: 0 0 0.3em 0;
}


.collection-box img.avatar
{
	margin: 0 0 0 auto;
}


.collection-box svg.privacy
{
	margin: 0 auto 0 0;
}


.collection-box .book-preview-list
{
	overflow: hidden;
	padding: 5px 10px 10px 10px;
	text-align: left;
	direction: rtl;
	display: inline;
}


.collection-box .book-preview
{
	position: relative;
	z-index: 100;
	display: inline-block;
	vertical-align: middle;
	margin-left: -30px;
}


.collection-box .book-preview:last-child
{
	margin-left: 0;
}


.collection-box h3
{
	font-family: 'ExoBlackItalic', Helvetica, Arial, sans-serif;
	display: inline;
}


.collection-box h3 a
{
	text-decoration: underline;
}


.collection-box h3 a:hover
{
	text-decoration: none;
}



.cta-box
{
	color: #fff;
	font-family: open_sansregular;
	font-size: 0.8em;
	padding: 1em 1.5em 1.8em 1.5em;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	background: linear-gradient(150deg, rgb(130, 36, 193) 50%, rgb(68, 9, 89) 100%);
	border-radius: 4px;
	transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
}


.cta-box:hover
{
	/*box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);*/
}


.cta-box span
{
	font-family: open_sansbold;
}


.cta-floating
{
	position: fixed;
	bottom: 20px;
	text-align: center;
	width: 250px;
	z-index: 200;
	right: 20px;
	text-decoration: none;
}


#book-page .cta-box
{
	margin-top: 3em;
	font-size: 0.9em;
	line-height: 1.4;
	box-shadow: none;
}


#libreture-lets-you
{
	padding: 1em 0;
	clear: both;
}


#welcome-panel
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: stretch;
	font-size: 1.2em;
	gap: 1em;
}

#welcome-panel a
{
	width: 270px;
	background: transparent;
	flex-grow: 1;
	flex-shrink: 1;
	box-shadow: none;
	text-decoration: none;
	color: #fff;
	line-height: 1.25;
	padding: 10px;
}


#welcome-panel a:hover
{
	background: #ffffff29;
	border-radius: 16px;
}


a.cta-list
{
	width: 270px;
	position: relative;
	z-index: 100;
	display: inline-block;
	text-align: left;
	background: transparent;
	color: #fff;
	text-decoration: none;
	margin: 0 -1px;
	line-height: 1.5;
	padding: 0.8em 1em 1.2em 0.8em;
	flex-grow: 1;
	flex-shrink: 1;
	box-shadow: none;
}


a.cta-list p
{
	display: table-cell;
	vertical-align: middle;
	height: 75px;
	font-size: 1.1em;
}


a.cta-list:hover
{
	background: #ffffff1f;
}



/*	About Pages
================*/

#about-menu-list > .central
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	background: #fff;
	padding: 20px;
	border-radius: 10px;
	margin-top: 50px;
}


ul.about-menu
{
	list-style: none;
	margin: 10px !important;
	font-family: open_sanssemibold;
	font-size: 0.9em;
	float: left;
	display: block;
	text-align: left;
	color: #6C4797;
}


ul.about-menu h3
{
	font-family: open_sansbold;
	color: inherit;
	margin: 0 0 5px 0;
	text-align: left;
	font-size: 1.1em;
}


ul.about-menu li
{
	margin: 0 0 3px 0 !important;
}


ul.about-menu li a
{
	font-size: 0.9em;
	color: inherit;
	text-decoration: none;
}


ul.about-menu li a:hover, ul.about-menu li a.selected
{
	text-decoration: underline;
}


/* Article  */

.blog-entry
{
	text-align: center;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
}


.blog-entry .blog-post
{
	margin: 15px;
	width: 100%;
	background: #fff;
	border-radius: 22px;
	max-width: 400px;
	box-shadow: 0 1px 8px 0px rgba(0,0,0,0.12);
	position: relative;
}


img.blog-banner
{
	width: 100%;
	margin: 0 0 15px 0 !important;
	border-radius: 20px 20px 0 0;
}


.blog-entry h2.blog-title
{
	text-align: left !important;
	margin: 0 20px 40px 20px !important;
	font-size: 20px !important;
	font-family: open_sansbold !important;
	line-height: 1.2 !important;
	border: none !important;
}


.blog-entry h2.blog-title a
{
	color: var(--header) !important;
}


.blog-entry h2.blog-title a:hover
{
	text-decoration: none;
	color: var(--main-purple) !important;
}


.blog-entry .blog-post p
{
	margin: 0 20px 20px 20px;
	text-align: left;
	line-height: 1.4;
	font-size: 14px;
	display: none;
}


.blog-entry .blog-post .details
{
	padding: 10px 20px 10px 20px;
	width: 100%;
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	opacity: 0.7;
	position: absolute;
	bottom: 0;
}


.blog-entry .blog-post .details .date
{
	font-family: open_sanssemibold;
}


.blog-entry .blog-post .details .category
{
	font-family: open_sansbold;
}


.blog
{
	margin: -100px auto 0 auto !important;
	background: #fff;
	border-radius: 10px 10px 0 0;
}


img.blog-avatar
{
	border-radius: 60px;
	margin: 0 10px 0 0;
	border: 2px solid var(--main-purple);
	float: left;
}


section#article-body
{
	padding: 0 4em;
	display: block;
}


#article-body aside
{
	background: #e3e3e3;
	border-radius: 10px;
	float: right;
	font-size: 0.9em;
	margin: 1em 1em 1em 1.5em;
	padding: 1em 1em 1.5em 1em;
	width: 40%;
}


#article-body aside h2
{
	margin-top: 0.5em;
}


#article-body aside img
{
	display: block;
	margin: 0 auto 0.5em auto;
	max-width: 100%;
	border-radius: 10px;
}


.article
{
	max-width: 700px;
	margin: 0 auto 0 auto;
	padding: 0 0 5em 0 !important;
}


.full
{
	max-width: 100%;
	margin: 0 auto 0 auto;
	padding: 0 0 5em 0 !important;
	color: #4d4d4d;
	background: none !important;
}


.full .article-body
{
	padding: 0;
}


.full .information-panel
{
	display: flex;
	margin: 5em auto;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
}


.full .information-panel.white
{
	padding: 4em 5em;
	background: #fff;
	border-radius: 40px;
}


.full .information-panel .text
{

	padding: 2em 4em;
	max-width: 500px;
	min-width: 400px;
}


.full .information-panel figure
{

}


.full .information-panel .text h2
{
	margin: 0 0 0.3em 0;
}


.blog header h1
{
    margin: 1em 2em 0.5em 2em;
}


.blog header p
{
    margin: 0 4em 30px 4em;
}


.article header, .listing header, .feed-column header, .form-page header
{
    margin: 1em auto;
    text-align: left;
    background: none;
    border: none;
    width: 100%;
    max-width: 1060px;
}


/*
.article header .stripe
{
	width: 90%;
	background: #927BAD;
	color: #fff;
	clip-path: polygon(0% 0px, 100% 0px, 95% 100.00%, 0% 100%);
	text-align: left;
	padding: 0.5em 2em 0.5em 2em;
	position: absolute;
	bottom: 10%;
}
*/


.article header .stripe
{
    width: 100%;
    background: #927BAD;
    color: #fff;
    text-align: left;
    padding: 10px 30px;
    margin: 0 0 40px 0;
    display: flex;
    align-items: center;
}


.stripe a
{
	font-family: open_sansbold;
	color: #fff;
}


.stripe .fa
{
	margin: 0 0.4em;
}


.stripe .category
{
	font-family: open_sanssemibold;
}


.stripe .date
{
	font-style: italic;
	margin-left: 1em;
	font-size: 0.8em;
}


.stripe #sharing-bar
{
    margin: 0 0 0 auto;
}


.stripe a.tweet-button
{
    color: #fff;
	float: right;
	padding: 0 0.5em 0 0;
}


.stripe a.tweet-button:hover
{
    color: #DCD9DF;
}


#article-banner
{
	height: 300px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}


.form-page header
{
    text-align: center;
}


.form-page header h1
{
    text-align: center;
    margin: 1em 0 0.3em 0;
}


.article header h1, .listing header h1, .feed-column header h1, header h1
{
    color: var(--page-title);
    line-height: 1.2em;
    margin: 0;
    font-size: 2em;
    font-family: 'ExoBlackItalic', Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-align: left;
}


.article header h1
{
  margin: 30px 4rem 15px 4rem;
  font-size: 2.7em;
}


.article header p, .listing header p, .feed-column header p
{
    line-height: 1.25em;
    font-family: open_sanssemibold;
    text-align: left;
}


.article header p
{
  margin: 0 4rem 40px 4rem;
  font-size: 1.3em;
}


.article img.wide
{
    margin: 0 auto 1em auto;
	display: block;
	width: 100%;
}

.article img.book
{
    margin: 0.3em 0.5em;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
	position: relative;
	z-index: 100;
	display: inline-block;
	text-align: left;
	vertical-align: top;
}


.article .update-box
{
    background: #fff;
    width: fit-content;
    margin: 30px auto;
    padding: 16px 30px 20px 30px;
    border-radius: 10px;
    font-size: 14px;
    border: 1px solid #e6e6e6;
    box-shadow: 0px 2px 3px #e3e3e3a8;
    border-top: 4px solid var(--primary-highlight);
}


.article .extra-info
{
	width: 40%;
	float: right;
	margin: 1em 0 1em 1em;
	font-size: 0.9em;
	padding: 1.5em 1em;
	background: #e3e3e3;
	border-radius: 10px;
}


.article img.gif
{
	margin: 1em auto 2em auto;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
	display: block;
	/*width: 100%;*/
}


.article.faq h3
{
	text-align: left;
	margin: 2.5em 0 1em 0;
	border-top: 1px solid #ddd;
	padding-top: 2em;
}


.article .callout
{
	font-size: 1.3em;
	text-align: center;
	font-family: open_sanssemibold;
	margin: 2em 0;
	font-style: italic;
}


.works-icons
{
	color: var(--yellow);
	margin: 1.3em 0.8em 2em 0;
	float: left;
}


#how-libreture-works
{
	padding: 0 3em;
}


#how-libreture-works h3
{
	font-size: 1em;
	text-align: left;
	color: #754DA4;
	margin-bottom: 0.1em;
}


.article hr
{
	border-bottom: 2px solid #f90;
}


.article .spoiler::-moz-selection
{
	background: #fff;
	color: #000;
}


.article .spoiler::selection
{
	background: #fff;
	color: #000;
}

.article blockquote
{
	margin: 1.5em 1em 2em 2em;
	font-size: 1.1rem;
	font-style: italic;
	font-family: 'Times New Roman', serif;
}


.article h2
{
	font-size: 2em;
	margin: 1em 0 0.3em 0;
	line-height: 1.3em;
	font-family: 'ExoBlackItalic';
	font-weight: normal;
}


.article h3
{
	font-size: 1.4em;
	margin: 35px 0 5px 0;
	font-weight: normal;
	font-family: open_sanssemibold;
	text-align: left;
}


.article h4
{
	font-size: 1.3em;
	margin: 1.5em 0 0.5em 0;
	font-family: open_sanssemibold;
	font-weight: normal;
	color: #754DA4;
}


.article p
{
	margin-bottom: 1.5em;
	line-height: 1.5em;
}


.article ul, .article ol
{
	margin: 1em 0 2em 3em;
}


.article ul li, .article ol li
{
	margin: 0 0 1.1em 0;
}


.article #roadmap .fa-check
{
	color: hsl(107, 100%, 33%);
	padding-left: 0.5em;
}


.article ul#roadmap li.done
{
	list-style-image: url('/static/images/tick.png');
}



/* New Plans List */

#price-list
{
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 10px;
	flex-direction: row;
	flex-wrap: wrap;
}

.price-card
{
	background: #fff;
	padding: 30px 20px 40px 20px;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0, 0, 0, 0.17);
	flex-shrink: 1;
	flex-grow: 0;
	width: 100%;
	max-width: 200px;
	position: relative;
}


.price-card h3
{
	font-family: ExoBlackItalic;
	font-weight: normal;
	margin: 0;
	line-height: 0.9em;
}


.price-card h3 span
{
	width: 100%;
	display: inline-block;
	font-size: 0.8em;
	color: var(--secondary-button);
}


.price-card .price
{
	display: block;
	font-size: 1.1em;
	font-family: open_sanssemibold;
	margin: 0.5em 0 0 0;
}


.price-card .price span
{
	font-size: 2rem;
}


.price-card .capacity
{
	display: block;
	font-size: 2em;
	font-family: open_sansbold;
	color: var(--secondary-button);
	margin: 0.5em 0 0 0;
}


.price-card sub-description p
{
	margin: 0;
	padding-bottom: 10px;
}


.price-card a.extra-button
{
	background: var(--secondary-button);
	color: #fff;
	border-radius: 10px;
	padding: 5px 15px;
	display: flex;
	align-items: center;
	font-family: ExoBlackItalic;
	font-weight: normal;
	text-decoration: none;
	position: absolute;
	bottom: 10px;
}


.price-card a.extra-button:hover
{
	background: var(--secondary-button-active);
}


.price-card a.extra-button svg
{
	width: 1rem;
	margin: 0 2px 0 0;
	fill: #fff;"
}


#plans-table
{
	box-shadow: 0 1px 5px #d3c8ba2b;
	border: 1px solid #e3e9ed;
	border-radius: 4px;
	background-color: #fff;
	margin: 20px 0 10px 0;
}


.article #plans
{
	width: 100%;
	font-size: 0.9em;
	border-collapse: collapse;
}


.article #plans tr:nth-child(odd)
{
	background-color: #f1f1f1;
}


.article #plans tr:nth-child(even)
{
	background-color: #f9f9f9;
}


.article #plans strong
{
	font-family: open_sanssemibold;
	font-weight: normal;
}


.article #plans td
{
	padding: 10px 20px;
}


.article #plans thead th
{
	text-align: left;
	padding: 12px 10px 10px 20px;
	background: #fff;
}


.article #plans th
{
	font-family: open_sanssemibold;
	font-weight: normal;
	text-align: center;
}


.article #plans .plan-cap
{
	width: 40%;
	font-family: open_sansbold;
	color: var(--plan-cap);
}


.article #plans .plan-cost
{
	
}


.article #plans .us-price
{
	color: #757575;
	font-family: open_sanssemibold;
}


.article #plans .fa
{
	color: #d6d6d6;
	text-align: center;
	vertical-align: middle;
	margin-right: 0.4em;
	width: 1em;
}


.article #footer-promo
{
    margin: 50px 0 0 0;
}


.article #newsletter
{
    margin: 100px auto 0 auto;
}




.article p a, .article li a, table a
{
	text-decoration: underline;
	text-decoration-color: #f90;
	text-decoration-thickness: 2px;
}

.article p a:hover, .article li a:hover, table a:hover
{
	text-decoration: none;
	color: #f90;
}


/*  Sharing Buttons  */




#sharing-bar
{
    margin: 1em 0;
	text-align: center;
}


a.mastodon-button
{
    background: hsl(223, 16%, 32%);
    border: none;
    color: hsl(0, 100%, 100%);
    text-align: center;
    padding: 0.5em 0.5em 0.5em 0.5em;
    border-radius: 5px;
    width: 150px;
    margin: 1em auto;
	text-decoration: none !important;
}


a.mastodon-button:hover
{
    background: hsl(223, 16%, 25%);
    text-decoration: none;
	color: #fff !important;
}


a.mastodon-button img
{
    vertical-align: middle;
    margin-right: 0.3em;
	width: unset;
}


a.tweet-button, a.facebook-button, a.reddit-button, a.email-button
{
    border: none;
    text-align: center;
    padding: 0.2em;
    font-size: 0.8em;
    font-family: open_sanssemibold;
}


a.tweet-button-small
{
    border: none;
    float: right;
    border-radius: 5px;
    font-family: open_sansregular;
}


a.tweet-button-small .fa
{
    margin: 0 0.2em;
    font-size: 1.4em;
}


a.tweet-button-small:hover .fa
{
	color: var(--primary-highlight);
}	


a.tweet-button, a.tweet-button-small, a.reddit-button, a.email-button
{
    color: var(--fa-icon);
	transition: color 0.2s;
}


a.tweet-button:hover, a.tweet-button-small:hover, a.tweet-button:hover, a.reddit-button:hover, a.email-button:hover
{
    color: var(--primary-highlight);
    text-decoration: none;
}


a.tweet-button .fa, a.reddit-button .fa, a.email-button .fa
{
    vertical-align: middle;
    margin: 0 0.3em 0 0.2em;
    font-size: 1.8em;
}


a.tweet-button.discuss
{

}


a.tweet-button.follow
{
    width: 220px;
}


#footer-promo
{
	font-size: 0.9em;
	text-align: center;
	clear: both;
}


/*	Bundles
=============*/

a.epubizer-button, .article p a.epubizer-button
{
	color: #fff;
	text-decoration: none;
	font-size: 0.65em;
	background: #213E63;
	margin: 0 auto 4em auto;
	border-radius: 4px;
	text-align: center;
	display: block;
	width: 150px;
}


a.epubizer-button strong, .article p a.epubizer-button strong
{
	font-family: open_sansbold;
}


a.epubizer-button:hover, .article p a.epubizer-button:hover
{
	color: #fff;
	background: #E64100;
}



/*  Library Menu & Notifications
===================================*/


ul.notifications li
{
	width: 100%;
	background: var(--yellow);
	color: var(--yellow-background-text);
	text-align: center;
	list-style: none;
	padding: 0.3em 1em;
	font-size: 0.9em;
}


#login-join-screen ul.notifications li
{
	font-size: 1.1em;
	border-radius: 4px;
	margin: 1em auto 2em auto;
}


ul.notifications li .fa
{
	margin-right: 0.3em;
}


ul.notifications li.alert
{

}


ul.notifications li.notifications-success
{

}


ul.notifications li.notifications-success .fa
{
	color: #00a100;
}


ul.notifications li.alert a
{
	color: #fff;
	text-decoration: underline;
}


ul.notifications li.alert a:hover
{
	text-decoration: none;
}


#library-menu
{
    background: #51129BD1;
    font-size: 0.9em;
    overflow: visible;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 300;
    backdrop-filter: blur(16px);
}


#library-menu #container
{
    max-width: 1060px;
    margin: 0 auto;
    padding: 8px 10px;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 15px;
}


#library-menu img.avatar
{
	border-radius: 60px;
	outline: 2px solid var(--main-purple);
}


#library-menu h2
{
    color: #fff;
    font-size: 1.4em;
    font-family: 'open_sanssemibold', Helvetica, Arial, sans-serif;
    font-weight: normal;
    margin: 0;
    line-height: 1.1;
    text-align: left;
}


#library-menu h2 span
{
    font-family: open_sansregular;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.85em;
}


#library-menu #library-mini-menu
{
    margin: 0 0 0 auto;
}


#library-menu #library-mini-menu svg
{
	width: 18px;
	margin: 0 2px;
}


#library-menu #library-mini-menu a:hover svg
{
	fill: var(--primary-highlight);
}


#library-menu .activity-link
{
	float: right;
	/*font-size: 0.5em;
	margin-left: 0.5em;
	font-family: open_sansregular;*/
}


#big-menu
{
    /*position: relative;*/
    display: inline-block;
}


#big-menu button
{
    background: none;
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: center;
    padding-bottom: 5px;
}


#big-menu button svg
{
    height: 20px;
    fill: #fff;
}


#big-menu-content
{
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    list-style-type: none;
    left: 0;
    width: 100%;
    border-radius: 10px;
}


#big-menu-content ul.list
{
    list-style-type: none;
    padding: 10px;
}


#big-menu-content ul.list li a
{
    color: var(--yellow-background-text);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: 'open_sanssemibold', sans-serif;
    border-radius: 10px;
}


#big-menu-content ul.list a svg
{
	padding-right: 4px;
	color: #fff;
}


#big-menu-content ul.list a:hover
{
    background-color: #e1e1e1;
}


#big-menu-content ul.list a.selected
{
	background-color: var(--yellow);
}


#big-menu-content ul.list a .book-count
{
    font-family: 'open_sans', sans-serif;
    font-style: italic;
    float: right;
    padding-left: 1em;
}


/* Show the dropdown menu on hover */
#big-menu:hover #big-menu-content
{
    display: block;
}


ul#tools
{
}


ul#tools li
{
	text-align: center;
	margin: 0;
}


/*ul#tools li#library-cap a
{
	padding: 0.5em 0.5em 0.8em 0.5em;
	border: none;
	font-family: 'open_sanssemibold', sans-serif;
	color: #fff
}


ul#tools li#library-cap a span
{
	font-size: 0.8em;
	font-family: open_sansregular;
	padding: 0;
	text-decoration: underline;
}
*/

ul#tools li#library-cap a:hover span
{
	color: #D3C4E5;
}


ul#tools li a
{
	padding: 0.5em 0.5em 0.8em 0.5em;
	text-align: center;
	border: none;
	font-family: open_sansbold;
}


ul#tools li a span
{
	text-align: center;
	display: block;
	font-family: open_sansregular;
	font-size: 0.95em;
}


ul#tools li a:hover
{
	color: #ECDDFF;
	background: none;
	border: none;
}


ul#tools li a:hover .fa
{
	color: #D3C4E5;
}



/*  Log-in & Join page  */

#login-join-screen
{
	width: 80%;
	margin: 0 auto 0 auto;
}


#login, #join-box
{
	float: left;
	width: 50%;
}


.form-card
{
	text-align: center;
	background: #fff;
	border-radius: 5px;
	padding: 20px 20px 40px 20px;
	box-shadow: 0 2px 4px -1px rgba(0,0,0,.1),0 2px 3px -1px rgba(0,0,0,.06);
	border: 1px solid #e8e8e8;
	border-top: 6px solid var(--main-purple);
}


.form-card h1
{
	font-family: open_sansbold;
	font-weight: normal;
	line-height: unset;
}


.form-card h2
{
	font-size: 20px;
	color: var(--primary-body);
	margin: 0 0 20px 0;
	font-family: unset;
	line-height: unset;
}


.form-card h2 svg, .form-card h1 svg
{
    width: 1.3em;
    vertical-align: middle;
    margin: 0 5px 0 0;
    opacity: 0.5;
}


.error
{
	background-color: hsl(0, 100%, 35%);
	color: hsl(0, 100%, 100%);
	padding: 0.3em 0.5em;
	border-radius: 4px;
}


#login .error, form#paymentForm .error
{
	background-color: hsl(0, 100%, 35%);
	color: hsl(0, 100%, 100%);
	padding: 0.3em 0.5em;
	border-radius: 3px;
}


#login input[type="submit"] 
{
	font-size: 1.4em;
    padding: 0.4em 3em 0.4em 3em;
    margin-top: 1em;
}


#login input:not([type="submit"]), form#paymentForm input:not([type="submit"])
{
	width: 80%;
}


#login a#forgot-password
{
    color: var(--primary-body);
    font-size: 0.9em;
    display: block;
    margin: 20px 0 0 0;
    text-decoration: underline var(--primary-highlight);
}


#login a#forgot-password:hover
{
    text-decoration: none;
}



#join-box
{
	/*background: hsl(107, 100%, 33%);
	color: hsl(0, 0%, 100%);
	border-radius: 5px;*/
	padding: 20px;
}


#join-box h1
{
	/*color: hsl(0, 0%, 100%);*/
	text-align: center;
}


#join-box ul
{
	margin: 1em 0 1.2em 2em;
	/*list-style-image: url('/static/images/tick.png');*/
	text-align: left;
}


#join-box ul li
{
	margin-bottom: 0.3em;
	padding: 0 0 0.5em 0.2em;
}


#join-box p
{
    text-align: center;
	font-size: 1.2em;
}


#join-form-box
{
	width: 500px;
	margin: 40px auto 70px auto;
}


.dayagainstdrm
{
	background: hsl(0, 0%, 97%);
	border-radius: 10px;
	padding: 1em;
	margin: 0 0 2em 0;
}


.dayagainstdrm h2
{
	font-family: open_sanssemibold;
	color: hsl(0, 0%, 30%);
}


.cost
{
	font-size: 2.3em;
	padding: 0 2px;
	color: hsl(107, 100%, 33%);
	font-family: open_sanssemibold;
}


#paymentForm p
{
	margin-bottom: 1.5em;
}


a.join-button, button.join-button, input[type="submit"].join-button, ul#main-menu li a.join-button
{
	text-align: center;
	display: inline-block;
	padding: 0.8em 2em;
	background: var(--join-button-bg);
	color: #FFFFFF;
	border-radius: 10px;
	font-size: 1em;
	margin: 1em auto 0 auto;
	text-shadow: none;
	cursor: pointer;
	font-family: open_sansbold;
	transition: 0.2s;
	text-decoration: none !important;
	text-transform: uppercase;
}


a.join-button-inline
{
    text-align: center;
    display: inline-block;
    padding: 5px 15px;
    color: #FFFFFF;
    background: var(--join-button-bg);
    border-radius: 10px;
    font-size: 0.85em;
    margin: 0 5px;
    text-shadow: none;
    cursor: pointer;
    font-family: open_sansbold;
    transition: 0.2s;
    vertical-align: text-top;
    text-decoration: none;
    text-transform: uppercase;
}


a.join-button-inline:hover
{
	background: hsl(107, 100%, 40%);
	color: #FFFFFF;
	text-decoration: none;
}


#plans a.join-button-inline
{
	float: right;
}


ul#main-menu li a.join-button
{
	color: #fff;
	margin: 0 auto;
	padding: 0.3em 1em;
}


ul#main-menu li a.join-button:hover
{
	background: hsl(107, 100%, 40%);
	color: #FFFFFF;
	text-decoration: none;
	/*box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);*/
}


a.join-button span
{
	font-size: 0.7em;
	font-family: open_sansregular;
	text-transform: none;
}


button.join-button
{
	margin-top: 2em;
}


a.join-button:hover, button.join-button:hover, input[type="submit"].join-button:hover, #landing-banner .cta a.join-button:hover
{
	background: hsl(107, 100%, 40%);
	color: #FFFFFF;
	text-decoration: none;
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


input[type="submit"].switch-plan:disabled {
    cursor: default !important;
    background-color: #CCC;
}


a.join-link, .article p a.join-link
{
	text-align: center;
	display: block;
	padding: 4px 8px;
	color: #FFFFFF;
	background: var(--join-button-bg);
	border-radius: 5px;
	width: 300px;
	font-size: 1.2em;
	margin: 1em auto 0.5em auto;
	border: none;
}


p.join-link-text
{
	font-size: 0.8em;
	color: hsl(0, 0%, 20%);
	text-align: center;
}


a.join-link:hover, .article p a.join-link:hover
{
	background: hsl(107, 100%, 40%);
	text-decoration: none;
}


a.upgrade-link, .article p a.upgrade-link, #library-menu a.upgrade-link
{
    text-align: center;
    display: block;
    padding: 4px 10px;
    color: #fff;
    background: var(--secondary-button);
    border-radius: 4px;
    font-family: open_sanssemibold;
    font-size: 0.85em;
    text-decoration: none !important;
}


a.upgrade-link:hover, .article p a.upgrade-link:hover, #library-menu ul li a.upgrade-link:hover, #library-menu ul li a.upgrade-link:hover .fa
{
	background: var(--secondary-button-active);
	text-decoration: none;
}


#library-menu a.upgrade-link svg
{
    width: 30px;
    vertical-align: middle;
    margin: 0 3px 0 0;
}


button.join-card
{
	text-decoration: none;
	color: hsl(0, 0%, 100%);
	padding: 0.3em 0.5em 0.3em 0.5em;
	background: hsl(0, 0%, 20%);
	margin: 2em 0 0 0;
}


button.join-card:hover
{
	color: hsl(0, 0%, 10%);
	background: hsl(36, 100%, 50%);
	cursor: pointer;
}


.join-list
{
	text-align: left;
	padding: 0 2em;
	
	/*width: 80%;
	margin: 1.5em auto 0 auto;*/
	column-count: 2;
	column-width: 200px;
}


.join-list ul
{
	margin-left: 1em;
	/*list-style-image: url('/static/images/tick.png');*/
}


.join-list ul li
{
	padding: 0 0 1.3em 0;
}


.help
{
	font-size: 0.85em;
	font-style: italic;
	color: hsl(0, 0%, 20%);
}


/*  Library/User Pages  */

/*#book-list
{
	margin-top: 1.5em;
	text-align: center;
}*/


#book-list
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}


/*  User List  */


#user-list
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


.user-box
{
	width: 360px;
	margin: 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	background: hsl(0, 0%, 100%);
	color: var(--primary-body);
	border-radius: 4px;
	padding: 10px;
	border-top: 4px solid var(--main-purple);
}

/*.user-box
{
	width: 360px;
	height: 220px;
	margin: 0 0 1em 0.8em;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	background: hsl(0, 0%, 100%);
	color: var(--primary-body);
	position: relative;
	z-index: 100;
	display: inline-block;
	text-align: left;
	vertical-align: top;
	border-radius: 4px;
	padding: 10px;
	border-top: 4px solid var(--main-purple);
}*/


.user-box a
{
	text-decoration: none;
}


.user-box h3
{
	font-weight: normal;
	font-family: open_sansbold;
	text-align: left;
}


.user-box h3 a
{
	color: var(--book-card-header);
	text-align: left;
	padding: 0.5em 1em 0.5em 0;
	font-size: 1.1em;
}


.user-box h3 a:hover
{
	color: var(--primary-highlight);
}


.user-box h3 a img.avatar
{
	float: left;
	margin: 5px 10px 0 0;
	border-radius: 60px;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	border: 3px solid var(--positive-action);
}


.user-box h3 a:hover img.avatar
{
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


.user-box table
{
	margin-top: 5px;
	width: 250px;
	border-top: 1px solid #c3c3c391;
	text-align: left;
}


.user-box th
{
	font-weight: normal;
	font-size: 14px;
}


.user-box td a
{
	font-weight: bold;
	font-family: Georgia;
	display: block;
	font-size: 20px;
	color: var(--book-card-header);
}


.user-box td a:hover
{
	color: var(--primary-highlight);
}


/*.user-box p
{
	font-size: 0.7em;
	line-height: 1.2em;
	margin-top: 0.5em;
	text-transform: uppercase;
}


.user-box p strong
{
	font-weight: normal;
	font-family: open_sansbold;
	color: #454343;
}*/


.user-box h4
{
	font-family: open_sansregular;
	text-align: center;
	padding: 0.5em 0 0.8em 0;
	color: #595959;
	font-size: 0.7em;
}


.book-preview-list
{
	clear: both;
	width: 100%;
	overflow: hidden;
	padding: 5px 10px 10px 10px;
	text-align: center;
	direction: rtl;
	height: 110px;
}


.book-preview-list a i.fa.fa-plus-sqaure
{
	margin: 1.5em 0 0 0.5em;
	display: inline-block;
}


.not-reading
{
	padding-top: 2em; 
	font-style: italic;
	direction: ltr;
}


.book-preview
{
	position: relative;
	z-index: 100;
	display: inline-block;
	vertical-align: middle;
	margin-left: -10px;
}


.book-preview:hover
{
	z-index: 200;
}


.book-preview a img
{
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: ease-in-out 0.2s;
	box-sizing: unset;
	border-radius: 4px;
	max-width: 55px;
	border: 2px solid #fff;
}


.book-preview a:hover img
{
	box-shadow: 0 3px 6px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.22);
}




/*  Library - Previous/Next */

#next, #previous
{
	display: block;
	background: var(--next-prev-bg);
	color: var(--next-prev-text);
	position: fixed;
	font-size: 30px;
	font-weight: normal;
	bottom: 50%;
	z-index: 200;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
	font-family: 'open_sanssemibold', sans-serif;
	padding: 30px 20px;
}


#next
{
	float: right;
	right: 0;
	border-radius: 4px 0 0 4px;
}


#previous
{
	float: left;
	left: 0;
	border-radius: 0 4px 4px 0;
}


#previous:hover, #next:hover
{
	background: #f90;
	text-decoration: none;
}



/*  Book Card  */


a.book
{
	width: 300px;
	margin: 5px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	background: #fff;
	color: hsl(0, 0%, 35%);
	z-index: 100;
	border-radius: 4px;
	position: relative;
	overflow: auto;
	text-align: left;
	display: inline-block;
	flex-shrink: 0;
	flex-grow: 0;
}


a.book:hover
{
	background: #fbfbfb;
	text-decoration: none;
}


a.book-poster img.avatar
{
	border-radius: 60px;
	position: absolute;
	right: 5px;
	top: 5px;
	outline: 1px solid var(--positive-action);
	margin: 0;
}


a.book img.avatar
{
	border-radius: 60px;
	outline: 1px solid var(--positive-action);
	margin: 0 7px 0 0;
}


a.book .icons .recommended
{
	color: var(--secondary-button);
}


a.book .icons .favourite
{
	color: #f90;
}


a.book .icons .private
{
	color: #ec1616;
}


a.book input[type=checkbox]
{
	width: fit-content !important;
	margin: 0 8px 0 20px !important;
}


.book h3
{
	line-height: 1.15em;
	padding: 0 15px 4px 0;
	font-weight: normal;
	font-family: 'open_sansbold', sans-serif;
	text-align: left;
	color: var(--book-card-header);
	font-size: 16px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	clear: right;
}


.book .author
{
	font-size: 13px;
	padding: 0px 15px 0 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 1.2;
}


.book .author span
{
	font-family: open_sanssemibold;
	font-weight: normal;
}


.book img
{
	float: left;
	margin-right: 15px;
}


.book .book-footer
{
	padding: 2px 5px 4px 15px;
	color: #585858;
	font-size: 12px;
	position: absolute;
	bottom: 0;
	width: -moz-available;
	width: -webkit-fill-available;
	margin-left: 100px;
	display: flex;
	align-items: center;
}


.book .book-footer svg
{
	width: 1.2em;
	color: var(--fa-icon);
	float: left;
	margin-right: 2px;
}


.book .book-footer .fa
{
	color: var(--fa-icon);
}


.book .book-status
{
	line-height: 1;
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: wrap;
}


.book .book-status .book-user
{
	font-family: open_sanssemibold;
	display: block;
	padding-bottom: 2px;
	font-weight: normal;
	margin: 0 auto 0 0;
	width: 100%;
}


.book .book-status .status-text
{
	font-size: 10px;
}


a.book:hover .book-status .next-ordinal
{
	color: var(--positive-action);
}


.book .icons
{
	margin: 0 0 0 auto;
}


.book .icons .fa
{
	padding: 0 2px 0 0;
}

/*
.book .icons .favourite
{
	color: #f90;
}


.book .icons .recommended
{
	color: var(--secondary-button);
}
*/


.book .book-format
{
	float: right;
	font-size: 10px;
	margin: 3px 3px 0 0;
}


.recommendation-text
{
	padding: 20px 20px 40px 20px;
	clear: both;
	position: relative;
}


.recommendation-text img.avatar-perm
{
	float: left;
	border-radius: 60px;
	margin: 0 15px 20px 0;
	outline: 1px solid var(--main-purple);
	position: relative;
}


a.book.recommended
{
	height: 530px;
}


a.book.recommended h4
{
	font-size: 0.8em;
	line-height: 1.3;
	text-align: left;
	color: var(--book-card-header);
	/*float: left;*/
}


a.book.recommended h4 strong
{
    font-family: open_sanssemibold, serif;
    font-size: 1.6em;
    font-weight: normal;
}


a.book.recommended p
{
    font-size: 13px;
    clear: both;
    text-align: left;
    font-family: 'Georgia', serif;
    line-height: 1.3;
    color: var(--primary-body);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 14;
    overflow: hidden;
}


a.book.recommended .book-status
{
	left: 0;
}


.book-blank
{
	color: hsl(0, 0%, 86%);
	border: 4px dashed hsl(0, 0%, 86%);
	border-radius: 10px;
	width: 300px;
	margin: 5px;
	z-index: 100;
	position: relative;
	overflow: auto;
	display: inline-block;
	text-align: center;
}


.book-blank .blank-content
{
	font-size: 6em;
	font-family: 'open_sanssemibold';
}



/*	Horizontal Book Lists	*/


.horizontal-list
{
	width: 100%;
	display: flex;
	overflow-y: hidden;
	flex-wrap: nowrap;
	overflow-x: scroll;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	padding: 0 0 10px 0;
}


.book-poster
{
	width: 200px;
	height: 300px;
	border-radius: 16px;
	display: block;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	margin: 3px 6px 20px 6px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	overflow: visible;
	flex-grow: 0;
	flex-shrink: 0;
	position: relative;
}


.book-poster:hover
{

}


.book-poster.placeholder
{
    color: #fff;
    background: rgb(128,31,205);
    background: linear-gradient(0deg, rgb(128, 31, 205) 70%, rgb(199, 128, 255) 100%);
    display: flex;
    align-items: center;
    padding: 0 10px 20px 10px;
}


.book-poster.placeholder .upload-count
{
    margin: 10px 0 8px 0;
    display: inline-block;
}


.book-poster.placeholder a
{
    color: var(--yellow);
}


/*  Book Page  */

#book-page
{
	margin: 2em auto 3em auto;
	width: 80%;
	overflow: visible;
	max-width: 1090px;
}


#book-banner
{
	height: 200px;
	background-repeat: no-repeat;
	background-size: cover;
	margin: -2.1em -1.5em 0 -1.5em;
	box-shadow: inset 0 8px 6px -6px #00000021, inset 0 -8px 6px -6px #00000021;
}


/*	Sharing Copy
==================*/

.copy-to-share
{
    font-size: 0.8em;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--secondary-button);
    color: #fff;
    cursor: pointer;
    font-family: open_sansbold;
    text-transform: uppercase;
    text-decoration: none;
}


.activity-sharing .copy-to-share
{
    background: none;
    padding: 0;
}


.copy-to-share svg
{
    width: 20px;
    vertical-align: middle;
    margin: 5px 0 8px 6px;
    stroke-width: 2px;
}


.activity-sharing .copy-to-share svg
{
    margin: 0;
}


.copy-to-share:hover
{
	background: var(--secondary-button-active);
	text-decoration: none;
}


.tooltip
{
	position: relative;
	display: inline-block;
	font-family: open_sansregular;
}


.tooltip .tooltiptext
{
	visibility: hidden;
	width: 140px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	bottom: 120%;
	left: 50%;
	margin-left: -70px;
	opacity: 0;
	transition: opacity 0.3s;
	font-size: 12px;
}


.activity-sharing .tooltip .tooltiptext
{
    bottom: 130%;
    margin-left: -70px;
}


.tooltip .tooltiptext::after
{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}


.tooltip:hover .tooltiptext
{
	visibility: visible;
	opacity: 1;
}

/* End */


#book-page #book-lock
{
	float: right;
	text-align: center;
	clear: right;
	margin-top: 1em;
}


#book-page #book-lock a
{
	background: hsl(0, 0%, 40%);
	color: hsl(0, 0%, 100%);
	padding: 0.5em 0.8em 0.5em 0.8em;
	float: right;
}


#book-page #book-lock div
{
	font-size: 0.8em;
	clear: right;
	color: hsl(0, 0%, 40%);
	float: right;
}


#book-page #book-lock a:hover
{
	text-decoration: none;
	background: hsl(36, 100%, 50%);
}


#book-page #favourite a
{
	background: hsl(0, 0%, 40%);
	color: hsl(0, 0%, 100%);
	padding: 0.5em 0.8em 0.5em 0.8em;
	float: right;
}


#book-page #favourite .disabled
{
	background: hsl(0, 0%, 80%);
	color: hsl(0, 0%, 20%);
	padding: 0.5em 0.8em 0.5em 0.8em;
	float: right;
	cursor: not-allowed;
}


#book-page #favourite a:hover
{
	background: hsl(36, 100%, 50%);
	color: hsl(0, 0%, 10%);
	text-decoration: none;
}


/*#book-page #favourite  a:hover
{
	text-decoration: none;
	background: transparent;
	border: 2px solid #ff9900;
	color: #ff9900;
}*/


#book-page #image-block
{
	width: 30%;
	float: left;
	margin-top: -7em;
}


#book-page img#cover
{
	background: hsl(0, 0%, 100%);
	outline: 1px solid hsla(0, 0%, 80%, 0.24);
	box-shadow: 0px 0px 5px hsla(0, 0%, 27.5%, 0.77);
	width: 100%;
	margin: 0 auto 0 auto;
	max-width: 500px;
	display: block;
	border-radius: 4px;
}


#book-page #detail-block
{
	float: left;
	margin: 0;
	padding: 0 3em 0 2.5em;
	width: 50%;
}


#book-page #detail-block #icons a
{
	width: 25px;
	height: 25px;
	display: block;
	text-align: center;
	border-radius: 50px;
	padding: 4px;
	color: #333333c4;
	float: right;
}


#book-page #detail-block #icons a:hover
{
	background: var(--inline-button-highlight);
}


a.status-button
{
	display: inline-block;
	padding: 3px 6px;
	text-decoration: none;
	background: #fff;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: solid 3px #ccc;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
	font-size: 15px;
	text-align: center;
	border-radius: 50px;
}


a.status-button.download:hover
{
	background: #d4ffc0;
	border-color: #3ec300;
}


a.status-button:hover
{
  background: var(--inline-button-highlight);
  border-bottom: solid 3px var(--yellow);
  border-top: 1px solid var(--yellow);
  border-left: 1px solid var(--yellow);
  border-right: 1px solid var(--yellow);
}


a.status-button:active
{
	transform: translateY(3px);
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid var(--yellow);
}


#new-feature
{
	width: 6px;
	height: 6px;
	background-color: #1aee1a;
	border-radius: 100px;
	margin: 2px 0 0 -5px;
	animation-name: blink;
	animation-duration: 1.5s;
	animation-iteration-count: 6;
	display: inline-block;
	vertical-align: top;
}


@keyframes blink
{
	50% {opacity: 0;}
}
    

#book-page h1
{
	color: var(--book-card-header);
	margin: 20px 0 10px 0;
	font-size: 40px;
	font-family: open_sansbold;
	font-weight: normal;
	line-height: 1.1em;
	text-align: left;
}


#book-page h2
{
	color: var(--primary-body);
	font-family: 'open_sansregular', sans-serif;
	font-size: 1.5em;
	text-align: left;
}


#book-page h3
{
	margin: 1em 0 0.8em 0;
	font-weight: normal;
	font-family: 'open_sanssemibold', sans-serif;
}


#book-page #description
{
	line-height: 1.5em;
	margin: 1em auto;
	clear: both;
	font-size: 0.9em;
	border-left: 1px solid #ccc;
	padding-left: 1em;
}


#book-page #book-details, #book-page .cta-box
{
	display: block;
	width: 20%;
	text-align: center;
	float: right;
	font-size: 0.8em;
	margin-top: 4em;
	clear: right;
}


#book-page #book-details h3
{
	margin: 10px 0 2px 0;
	font-weight: normal;
	font-family: 'open_sanssemibold', sans-serif;
	text-align: left;
}


#book-page #book-details ul
{
	list-style: none;
	text-align: left;
}


#book-page #book-details ul li
{
	margin-bottom: 4px;
}


#book-page .bm-reviews
{
	margin-top: 4em;
}


#book-page #status-bar
{
	margin: 40px 0 0 0;
	color: #fff;
	padding: 5px 8px 5px 10px;
	font-size: 13px;
	background: #555;
	border-radius: 100px;
	overflow: auto;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: start;
	text-transform: uppercase;
	gap: 5px;
}


#book-page #status-bar .reader
{
	font-family: open_sansbold;
	margin: 0 15px 0 0;
}


#book-page #status-bar img.avatar
{
	border-radius: 60px;
	border: 2px solid #484848;
	margin-right: 5px;
}


#book-page #status-bar #status-list
{
	margin-left: auto;
	display: flex;
	gap: 5px;
}


#book-page #status-bar .status
{		
    display: flex;
    align-items: center;
}


#book-page #status-bar .status a:hover
{
	text-decoration: none;
}


#book-page #status-bar .status.disabled
{
	cursor: not-allowed;
}


#book-page #status-bar .status.disabled svg
{
	stroke-dasharray: 3;
	opacity: 0.5;
}


#book-page #status-bar svg, #book-page #status-bar a svg
{
    stroke: var(--status-bar-color);
    width: 25px;
    vertical-align: middle;
}


#book-page #status-bar a:hover svg
{
    stroke: var(--status-bar-highlight);
}



#book-page #status-bar .status .fa
{
	font-size: 1rem;
	color: #fff;
	padding: 4px 5px 5px 5px;
	width: 25px;
	height: 25px;
}


/*#book-page #status-bar .status .fa
{
	color: inherit;
	font-size: 16px;
	margin-right: 4px;
	opacity: 0.7;
}*/


#book-page #status-bar .status a .fa
{
  color: #fff;
  font-size: 16px;
  background: #00000091;
  padding: 4px 5px 5px 5px;
  border-radius: 100px;
  width: 25px;
  height: 25px;
}


#book-page #status-bar .status a:hover .fa
{
  background: #00000038;
}


p.locked
{
	color: hsl(0, 0%, 50%);
	font-style: italic;
	padding-top: 0.5em;
	text-align: center;
	font-size: 0.8em;
}


#book-page #bookshop
{
	text-align: center;
	margin: 2em auto 1em auto;
	background: var(--main-purple);
	color: #fff;
	border-radius: 60px;
	padding: 0.4em 1em 0.4em 0.5em;
	font-size: 0.8em;
	line-height: 1.2em;
	display: flex;
	justify-content: center;
	align-items: center;
}


#book-page #bookshop img
{
	width: 30px;
}


#book-page #bookshop span
{
  margin: 0 auto;
}


#book-page a.bookshop
{
	font-family: open_sansbold;
	color: #fff;
}


#book-page #status-change
{
	width: 20%;
	float: left;
	margin: 80px 0 20px 0;
}


#book-page #status-change form
{
	padding: 20px 10px 30px 10px !important;
	border-top: none;
}


#book-page #metadata-change
{
	margin: 2em 0 3em 0;
	text-align: center;
}


#book-page #status-change h3, #book-page #metadata-change h3
{
	margin: 1.2em 0 0.2em 0;
	font-size: 1em;
	font-family: open_sanssemibold;
	font-weight: normal;
	color: #575757;
}


#book-page #status-change textarea, #book-page #metadata-change textarea
{
	border: 1px solid #ccc;
	padding: 1em;
	font-family: 'open_sansregular', sans-serif;
	background: #fff url(/static/images/recommendation-background.png) center center no-repeat;
	border-radius: 4px;
	color: #494949;
	font-size: 0.85em;
	width: 100%;
	background-size: 50%;
}


#book-page #metadata-change textarea
{
	background: #fff;
	width: 100%;
}


#book-page #status-change select, #book-page #status-change textarea
{
	max-width: 100%;
	width: 100%;
}


#book-page #status-change select, #book-page #metadata-change select
{
	background: #fff;
	padding: 0.5em 0.8em 0.5em 0.8em;
	color: #494949;
	border: 1px solid #ccc;
	margin: 0 0 0.4em 0;
	text-align: center;
	font-family: 'open_sansregular', sans-serif;
	border-radius: 4px;
}


#book-page #status-change select:hover, #book-page #metadata-change select:hover, #book-page #status-change select:focus, #book-page #metadata-change select:focus, #book-page #status-change textarea:focus, book-page #metadata-change textarea:focus, #book-page #status-change textarea:hover, #book-page #metadata-change textarea:hover
{
	background: hsl(0, 0%, 100%);
	color: hsl(0, 0%, 20%);
	border: 1px solid hsl(36, 100%, 50%);
	cursor: pointer;
}

#book-page #status-change input[type="submit"], #book-page #metadata-change input[type="submit"]
{
	font-size: 1.1em;
	padding: 0.5em 1em;
	font-family: 'open_sanssemibold', sans-serif;
}


#book-page #recommendation
{
    margin: 0 auto 1em auto;
	text-align: left;
	padding-top: 5em;
}


#book-page #recommendation img.avatar
{
	float: left;
	border-radius: 60px;
	margin: 10px 15px 0 0;
	border: 2px solid var(--main-purple);
}


#book-page #recommendation h3
{
	font-family: 'open_sansregular', sans-serif;
	font-weight: normal;
	margin: 0;
	text-align: left;
	font-size: unset;
}


#book-page #recommendation h3 strong
{
	/*font-family: 'open_sanssemibold', sans-serif;
	font-weight: normal;*/
	font-family: 'Georgia', serif;
	font-size: 1.4em;
}


#book-page #recommendation #recommendation-body
{
	color: var(--header);
	font-family: 'Georgia', serif;
	font-style: italic;
	margin: 25px 0;
	line-height: 1.4;
}


#book-page #recommendation #recommendation-body .fa, .recommendation-text p .fa
{
	font-size: 40px;
	margin: 0 5px 0 0;
	color: hsla(268.1, 69.6%, 27.1%, 0.31);
	float: left;
}


#promo-box
{
    padding: 2em 4em 2em 4em;
    clear: both;
    width: 100%;
    color: #fff;
    background: linear-gradient(150deg, rgb(130, 36, 193) 20%, rgb(68, 9, 89) 100%);
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;
}

#promo-box a
{
	color: #fff;
	text-decoration: underline;
	width: max-content;
    margin: 0 auto;
}


#promo-box a:hover
{
	text-decoration: none;
}


#promo-box.upgrade
{
	padding: 0.8em 1em;
	color: var(--main-purple);
	font-size: 0.85em;
	background: url('/static/images/notification/idad.png') no-repeat center center;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
}


#promo-box.upgrade a.upgrade-link
{
	background: var(--secondary-button);
	color: #fff;
	border-radius: 10px;
	padding: 3px 10px;
	display: flex;
	align-items: center;
	margin: 0 0 0 10px;
	font-size: 1em;
	font-family: open_sansbold;
	text-transform: uppercase;
}


#promo-box.upgrade a.upgrade-link svg
{
	width: 1.1em;
	margin-right: 2px;
}


#promo-box h2
{
	margin: 0;
	color: inherit;
	border-radius: 0 0 400px 15px/0 0 10px 5px;
	border-bottom: 3px solid #ff9900f2;
	display: inline;
	font-family: open_sansbold;
}


a.action-negative
{
	color: hsl(0, 100%, 50%);
	text-decoration: none !important;
	text-align: center;
	font-family: 'open_sanssemibold';
}


a.action-negative:hover
{
	background: hsl(0, 99%, 36%);
	color: #fff !important;
	text-decoration: none;
	padding: 0.2em 0.5em;
	border-radius: 4px;
}


input[type="submit"].button-negative
{
	background: hsl(0, 99%, 36%);
	padding: 0.5em 0.8em;
	color: hsl(0, 0%, 100%);
	font-weight: bold;
	font-size: 1.3em;
	margin: 1em;
}


input[type="submit"].button-negative:hover
{
	background: hsl(0, 100%, 50%);
	color: hsl(0, 0%, 100%);
}


/*  Search  */

#search-page
{

}


.search-form
{
	text-align: center;
}


.search-form input[type="search"]
{
	font-size: 20px !important;
	color: var(--primary-body) !important;
}


.search-form input[type="search"]:hover, .search-form input[type="search"]:focus
{
	border: 1px solid var(--primary-highlight) !important;
}


.search-form select
{
	background: hsl(0, 0%, 100%);
	padding: 0.3em 0.8em 0.3em 0.8em;
	color: var(--primary-body);
	border: 1px solid #ccc;
	margin: 0 1em 0;
	font-size: 1.2em;
	border-radius: 4px;
}


.search-form input[type="submit"]
{
	font-size: 20px;
	margin: 25px 0 10px 0;
}


.search-form input[type="submit"]:hover
{

}



/*  Home page views  */


.more-list
{
	text-align: center;
	font-size: 1.1em;
	font-family: open_sansregular;
	font-style: italic;
}


#latest-activity, #promo-logged-out
{
	width: 50%;
	padding: 2em;
	float: left;
	background: #fff;
}


/*#latest-public-activity.logged-in, #latest-activity.logged-in
{
    width: 100%;
    float: left;
	padding: 2em;
	background: #fff;
}*/


#latest-activity .error-quote
{
	margin-top: 5em;
}


#promo-logged-out ul
{
	margin: 1em 0 1.2em 3em;
	line-height: 1.7em;
}


#promo-logged-out h3
{
	font-size: 1.6em;
	margin: 0.5em 0 0.1em 0;
	font-weight: normal;
	font-family: 'open_sanssemibold', sans-serif;
}


#currently-reading, #favourite-books, #recommended-books, #latest-news
{
	padding: 40px 0;
	max-width: 1060px;
	margin: 0 auto;
	clear: both;
}


#currently-reading h1
{
    font-size: 1.4em;
    text-transform: unset;
    font-family: open_sanssemibold;
    letter-spacing: -0.5px;
    color: var(--section-header);
    margin: 0 20px 1em 20px;
}


#currently-reading h2, #favourite-books h2, #recommended-books h2, #latest-news h2, #latest-bookshops h2, #libreture-lets-you h2, #latest-public-activity h2
{
	margin: 0 0 15px 0;
	font-family: open_sanssemibold, serif;
	font-weight: normal;
	color: var(--section-header);
	text-align: left;
	font-size: 15px;
	border-bottom: 2px solid #FFE371;
	text-transform: uppercase;
}


#recommended-books p.intro, #favourite-books p.intro, #currently-reading p.intro, #latest-news p.intro
{
	font-size: 1.1em;
	margin: 0 0 1em 0;
	padding: 0;
	color: hsl(0, 0%, 30%);
	text-align: center;
}


#recommended-books
{
	/*padding-bottom: 3em;*/
}


#currently-reading
{
	text-align: center;
}


#currently-reading h2 a
{
	color: inherit;
}


.listing h2
{
	color: var(--main-purple);
	font-size: 3em;
	margin: 1em 0 0 0;
	font-family: 'Garamond', Times New Roman, serif;
}


.text-block
{
	background: #fff;
	padding: 1em 4em;
	border-radius: 20px;
	display: inline-block;
	margin: 1em auto;
	color: var(--primary-body);
}


.text-block a
{
	font-family: 'open_sansbold', sans-serif;
	font-weight: normal;
	color: var(--positive-action);
}


a.upload
{
	color: #fff !important;
	font-family: open_sansbold;
	border-radius: 4px;
	padding: 0.2em 0.8em !important;
	text-decoration: none !important;
	margin: 0.5em 0.6em;
	font-size: 1em;
	transition: box-shadow 0.2s cubic-bezier(.25,.8,.25,1);
	background: linear-gradient(180deg, rgba(134,82,196,1) 0%, rgba(93,33,164,1) 100%);
	text-transform: uppercase;
	display: flex !important;
	align-items: center;
	gap: 3px;
	width: fit-content !important;
}


a.upload svg
{
	width: 24px;
	opacity: 0.9;
}


a.upload:hover
{
	background: var(--main-purple);
	text-decoration: none
}


#content a.upload
{
	font-size: 1.5em;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	margin: 0 auto;
}


#content a.upload svg
{
	width: 24px;
	opacity: 0.9;
}


#content a.upload:hover
{
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}





/*#latest-public-activity p
{
	margin-bottom: 1em;
	font-size: 1.2em;
	color: hsl(0, 0%, 30%)
}*/





.listing p.intro
{
	font-size: 1.4em;
	margin: 0 0 1em 0;
	padding: 0;
	color: hsl(0, 0%, 30%);
	text-align: center;
}


.feed-column
{
	width: 50%;
	float: none;
	/*padding: 0 1em;*/
	margin: 0 auto;
	min-width: 370px;
}


.feed-column#activity-page
{
	float: none;
	margin: 0 auto;
	width: unset;
}


.feed-column h1
{
	text-align: center;
	margin: 0 0 5px 20px;
	color: #fff;
	font-size: 1.8em;
	font-family: 'Garamond', Times New Roman, serif;
}


.feed-column h2
{
	text-align: left;
	margin: 0 0 5px 20px;
	color: #fff;
	font-size: 1.8em;
	font-family: 'Garamond', Times New Roman, serif;
}


.feed-column ul
{
	list-style: none;
}


.feed-column ul li
{
	
}



/* TABS */



.tabbed
{
	/*float : right;
	width : 50%;*/
}


.tabbed > input
{
	display : none;
}


.tabbed > section
{
	width: 60%;
}


.tabbed > section > div #latest-public-activity
{
	width: 100%;
}


.tabbed > section > h2
{
	float: left;
	box-sizing: border-box;
	margin: -9px 0 0 0;
	padding: 0 0.5em 0 0;
	overflow: hidden;
	font-size: 1em;
	font-weight: normal;
}


.tabbed > input:first-child + section > h2
{
	margin-left : 1em;
}


.tabbed > section > h2 > label
{
	display                 : block;
	padding                 : 0.25em 0.75em;
	cursor                  : pointer;
	 -moz-user-select     : none;
	  -ms-user-select     : none;
	-webkit-user-select     : none;
	font-family: open_sanssemibold;
	font-size: 15px;
	font-weight: normal;
	text-transform: uppercase;
}


h2 a .fa
{
	margin: 0 0 0 5px;
	font-size: 0.7em;
	color: var(--header);
	opacity: 0.8;
}


h2 a:hover .fa
{
	opacity: 1;
}



.tabbed > section > div
{
	position      : relative;
	z-index       : 1;
	float         : right;
	box-sizing    : border-box;
	width         : 100%;
	margin        : 2.5em 0 0 -100%;

}


.tabbed > input:checked + section > h2
{
	position : relative;
	z-index  : 2;
	border-bottom: 2px solid #FFE371;
}


.tabbed > input:not(:checked) + section > h2 > label
{
	opacity: 0.7;
}


.tabbed > input:not(:checked) + section > div
{
	display : none;
}



/* TABS - end */


#latest-bookshops ul
{
    display: flex;
    flex-direction: column;
}


#latest-bookshops ul li a.bookshop-entry
{
    padding: 15px 20px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #e8e8e8;
    display: block;
    border-radius: 3px;
    border-bottom: 0;
}



#latest-bookshops ul li a.bookshop-entry h3
{
	text-align: left;
	color: inherit;
	font-size: inherit;
	font-family: 'open_sanssemibold', Helvetica, Arial, sans-serif;
	font-weight: normal;
}


#latest-bookshops ul li a.bookshop-entry .bookshop-added
{
	font-style: italic;
	font-size: 0.8em;
	color: inherit;
	text-transform: capitalize;
}


/*#latest-bookshops ul li a.bookshop-entry img
{
	float: left;
	margin: 0 2em 1em 0;
}*/


#latest-bookshops ul li a.bookshop-entry p
{
	color: inherit;
	margin: 0.5em 0 0.5em 0;
	font-size: 0.9em;
}


#latest-bookshops ul li a.bookshop-entry div > p strong
{
    font-family: 'open_sansregular', sans-serif;
}


#latest-bookshops ul li a.bookshop-entry div > p:nth-child(n+2)
{
    display:none;
}

#latest-bookshops ul li a.bookshop-entry div > blockquote
{
    display:none;
}


#latest-bookshops ul li a.bookshop-entry:hover
{
	background: #ffffff6e;
}


#latest-public-activity
{
	float: left;
	width: 60%;
	margin: 0;
}


.activity-content a
{
	color: var(--activity-list-text);
}


#latest-bookshops
{
	float: right;
	width: 40%;
	padding-left: 1em;
	margin: 0;
}


#latest-news
{
	max-width: 100%;
}


#latest-news ul
{
	margin: 0 auto;
	list-style: none;
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	text-decoration: none;
}


#latest-news ul li
{
	width: 250px;
	margin: 5px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
	text-decoration: none;
	position: relative;
	flex-grow: 1;
	flex-shrink: 1;
}


#latest-news ul > li:first-child
{
	width: 500px;
}


#latest-news ul li a
{
	background-position: center center;
	background-size: cover;
	display: block;
	position: relative;
	height: 250px;
	color: #fff;
	background-repeat: no-repeat;
}


#latest-news ul li:hover
{
	background: hsl(0, 0%, 96%);
	text-decoration: none;
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


#latest-news ul li:hover a
{
	text-decoration: none;
}


/*#latest-news .blog-entry-text-area
{
	padding: 0.5em 1em 1em 1em;
	position: absolute;
	bottom: 0;
	color: #fff;
}*/


#latest-news ul li img
{
	width: 100%;
	margin: 0;
	float: none;
}


#latest-news ul li h3
{
	font-size: 1.3em;
	color: inherit;
	font-family: open_sanssemibold;
	text-shadow: 0 0 4px #000;
	text-align: left;
	line-height: 1.2;
	padding: 40px 10px 15px 20px;
	position: absolute;
	bottom: 0;
	width: 100%;
	background: linear-gradient(180deg, rgba(93,33,164,0) 20%, rgba(6, 6, 6, 0.37) 100%);
}


#latest-news ul li p
{
	font-size: 0.9em;
	margin-top: 0.3em;
	color: var(--primary-body);
	display: none;
}

#latest-news ul li .date
{
	font-size: 0.8em;
	color: #fff;
	position: absolute;
	top: 5px;
	right: 5px;
	text-shadow: 0 0 4px #000;
}


#latest-news p.more-list
{
	margin: 1em 0;
}



/*  Landing  */

#landing-banner
{	
	overflow: auto;
	display: block;
	padding: 1.3em 1em;
	margin: 0;
}


.boxout
{
    background-repeat: repeat;
    background-position: center center;
    border-radius: 15px;
}


.boxout-text
{
    background: #fff;
    color: var(--header);
    font-size: 1.3em;
    padding: 10px 20px;
    border-radius: 10px;
    font-family: open_sansbold;
    text-align: center;
}


#landing-book-banner
{
	background: url('/static/images/banner/banner.jpg');
	background-size: cover;
	padding: 0 0 10px 0;
	background-position: center center;
}


#landing-book-banner #book-banner-footer
{
	font-size: 0.65em;
	background: #31313170;
	color: #ffffffbd;
	text-align: center;
	margin: 0 10px 0 auto;
	width: fit-content;
	padding: 3px 8px;
	border-radius: 100px;
}


#landing-book-banner #book-banner-footer a
{
	text-decoration: underline #ffffffbd;
	color: #ffffffbd;
}


#main-landing-box
{
	max-width: 1060px;
	background-repeat: repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 50px 20px 20px 20px;
	color: #fff;
}


#main-landing-box #headline
{
	margin: 0 auto 0 0;
	flex-shrink: 1;
	flex-grow: 1;
	text-shadow: 0 0 6px #111111ba;
	max-width: 700px;
}


#main-landing-box #headline h1
{
	font-family: 'open_sansbold', sans-serif;
	line-height: 1.2em;
	color: inherit;
	font-size: 2em;
	text-align: left;
	text-transform: uppercase;
	font-weight: bold;
	margin: 0;
}


#main-landing-box #headline h1 #genre-switch
{
	font-size: 2.5em;
	line-break: auto;
	display: block;
	line-height: 1;
	font-family: ExoBlackItalic;
	padding: 10px 0 0 0;
	color: var(--primary-highlight);
	font-weight: normal;
}


#main-landing-box #headline p
{
	margin: 1em auto 0 0;
	font-family: 'open_sansregular', sans-serif;
	font-size: 1.5em;
}


#main-landing-box #button-content
{
	text-align: center;
	margin: 1em auto;
	flex-shrink: 1;
	flex-grow: 1;
	max-width: fit-content;
}


#main-landing-box #button-content a.join-button
{
	font-size: 1.2em;
}


#main-landing-box #button-content p
{
	margin: 8px 0 0 0;
	font-size: 0.9em;
	line-height: 1.3;
	text-shadow: 0 0 6px #111111ba;
}


#main-landing-box #button-content p a
{
	text-decoration: underline;
}


#main-landing-box #explainer
{
	padding-top: 1em;
	margin: 4em auto 0 auto;
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
	width: 100%;
}


#main-landing-box #explainer .emphasis 
{
	text-transform: uppercase;
	color: var(--primary-highlight);
}


#main-landing-box #explainer div
{
	text-align: left;
	font-size: 1.1em;
	font-family: open_sansregular;
	padding: 20px 25px 25px 25px;
	color: var(--primary-body);
	background: #fff;
	border: 1px solid #e8e8e8;
	display: block;
	border-radius: 10px;
	flex-grow: 1;
	flex-shrink: 1;
	width: 100%;
	max-width: 300px;
}


#main-landing-box #explainer div strong
{
	font-family: open_sansbold;
	display: block;
	text-transform: uppercase;
}


#main-landing-box #explainer div a
{
	color: inherit;
	text-decoration: underline var(--primary-highlight) 2px;
}


#main-landing-box #explainer div a:hover
{
	color: inherit;
	text-decoration: none;
}




.landing-text
{
	max-width: 1060px;
	margin: 2em auto;
	color: #fff;
	background: var(--main-purple) url('/static/images/backgrounds/reading-small-purple.png');
	background-repeat: repeat;
	padding: 30px 30px 35px 30px;
	border-radius: 16px;
	font-size: 14px;
	clear: both;
	display: block;
	overflow: auto;
}


.landing-text .text-content
{
	float: left;
	width: 500px;
	max-width: 100%;
}


/*.landing-text .text-content h1 #genre-switch
{
    border-radius: 0 0 400px 15px/0 0 20px 5px;
    border-bottom: 3px solid var(--yellow);
}*/


.landing-text h2
{
	font-family: 'open_sansbold', sans-serif;
	font-weight: normal;
	line-height: 1.35em;
	color: inherit;
	font-size: 2em;
	text-align: left;
	margin: 0 0 10px 0;
}


.landing-text h2 a, .landing-text p a
{
	color: var(--yellow);
}


.landing-text h2 a:hover, .landing-text p a:hover
{
	color: var(--secondary-button-active);
	text-decoration: none;
}


.landing-text img#logo
{
	margin: 2em auto;
	display: block;
}


.upload-count
{
    font-family: ExoBlackItalic;
    font-weight: normal;
    font-size: 2.5em;
}


.landing-text p
{
	margin-top: 10px;
}


.landing-text p.cta-2
{
	color: #6E42A3;
	font-family: open_sansregular;
	margin: 0 0 1em 0;
	line-height: 1.4em;
}

.landing-text p.cta-2 a
{
	text-decoration: underline;
	color: #6E42A3;
	font-family: open_sansregular;
	font-size: 0.9em;
}


.landing-text p.cta-2 a:hover
{
	text-decoration: none;
}


#landing-button
{
	width: 50%;
	text-align: center;
	margin-top: 2em;
}


#landing-button p
{
	font-size: 1.2em;
}


#landing-button p a
{
	color: #3e3e3e;
	text-decoration: underline;
}


#landing-button p a:hover
{
	color: #927BAD;
	text-decoration: none;
}


.cta
{
	align-content: center;
	display: flex;
}


.landing-text .cta
{
	float: right;
	width: 33%;
	text-align: center;
	padding-top: 0.1em;
}


.landing-text p.more-about
{
	padding: 1em 0 0 0;
	width: 50%;
	text-align: center;
	font-size: 1.3em;
}


img.more-image
{
  display: block;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}


.image-box
{
	width: 50%;
}


#left
{
	float: left;
}


#right
{
	float: right;
	clear: right;
}


p.promo-questions
{
	font-size: 1.6em;
	font-family: 'open_sanssemibold', sans-serif;
	margin-bottom: 0.8em;
	color: hsl(0, 0%, 20%);
}


#testimonials
{
	color: hsl(0, 0%, 30%);
	text-align: center;
	width: 100%;
	margin: 0 auto 0 auto;
	clear: both;
	padding: 2em 4em;
	/*box-shadow: inset 0 8px 6px -6px #ccc,inset 0 -8px 6px -6px #ccc;*/
}


#testimonials h2
{
	margin: 0.5em 0 0.5em 0;
	line-height: 1.5em;
	font-size: 2em;
}


.highlight
{
	border-radius: 0 0 400px 15px/0 0 10px 5px;
	border-bottom: 3px solid #ff9900f2;
}


#testimonials h3
{
	line-height: 1.7em;
	font-size: 1.6em;
	text-align: center;
	color: hsl(0, 0%, 40%);
	font-family: open_sansregular;
	font-weight: normal;
}


#testimonials p
{
	font-size: 1.3em;
	margin: 0 auto 1em auto;
	color: hsl(0, 0%, 30%);
	line-height: 1.6em;
}


ul#benefits
{
	font-size: 1.2em;
	margin: 0 auto 3em auto;
	list-style: none;
	clear: both;
	width: 100%;
	text-align: center;
	padding-top: 2em;
}


ul#benefits li
{
	margin: 1em 0 1em 0;
	color: hsl(0, 0%, 30%);
	font-size: 1em;
	width: 48%;
	padding: 0.5em 0.8em;
	vertical-align: top;
	position: relative;
	display: inline-block;
	text-align: center;
}


ul#benefits li strong
{
	color: #5D21A4;
}


ul#benefits li .fa-stack
{
	color: #9B83B6;
}


/*	Landing Page
==================*/

.landing-page
{
	padding-top: 5em;
	text-align: center;
}

.landing-page h2.hero
{
	color: #5D21A4;
	margin: 1em 0 3em 0;
	font-size: 3em;
}


.landing-page .text-box
{
	float: left;
	width: 50%;
	padding: 2em 2em 0 5em;
}


.landing-page .text-box h1
{
	font-size: 2.8em;
	color: #5D21A4;
	font-family: open_sanssemibold;
	margin: 0 0 0.1em 0;
	text-align: left;
}


.landing-page .text-box h2
{
	font-size: 2.3em;
	color: #5d5d5d;
	font-family: open_sansregular;
	text-align: left;
}


.landing-page .text-box p
{
	font-size: 1.3em;
	color: #5d5d5d;
	text-align: left;
	margin-top: 1.5em;
	line-height: 1.3em;
}


.landing-page .text-box p strong
{
	color: #5D21A4;
}


.landing-page img
{
	max-width: 100%;
	margin: 0 auto 3em auto;
}


.landing-page img.process-landscape
{
	margin: 2em auto 0 auto;
}


.landing-page img.process-vertical
{
	display: none;
	margin: 2em auto 0 auto;
}


.landing-page .text-box ul
{
	font-size: 1.5em;
	color: #5d5d5d;
	width: max-content;
	text-align: left;
	margin: 2em auto auto auto;
	list-style: none;
}


.landing-page .text-box ul li
{
	margin-bottom: 0.7em;
}

.landing-page .text-box ul li img
{
	margin: 0 10px 0 0;
	width: 30px;
	vertical-align: middle;
}


.landing-page .text-box ul li span
{
	font-size: 0.7em;
	font-style: italic;
	text-align: center;
	display: block;
}


ul#romance-logo-list
{
	display: flex;
	list-style: none;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	background: hsl(0, 0%, 93%);
	width: 100%;
	float: left;
	text-align: center;
	box-shadow: inset 0 8px 6px -6px #ccc, inset 0 -8px 6px -6px #ccc;
	padding: 3em;
}


ul#romance-logo-list li
{
	margin: 0.4em 1.2em;
}


ul#romance-logo-list li img
{
	max-width: 200px;
	margin: 0;
	border-radius: 4px;
	
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
}





/*  Blog Box
===============*/

#blog-box
{
	background: var(--main-purple) url('/static/images/backgrounds/reading-small-purple.png');
	color: #fff;
	padding: 10px;
	font-size: 0.95em;
	font-family: open_sanssemibold;
	margin-bottom: 8px;
	line-height: 1.25;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}


#blog-box a
{
	color: inherit;
}


#blog-box a:hover
{
	text-decoration: underline;
}


.blob
{
	background: 23a500;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	margin: 0;
	height: 10px;
	width: 10px;
	transform: scale(1);
	animation: pulse-green 2s 5;
	display: inline-block;
}


.blob.green
{
	background: rgba(51, 217, 178, 1);
	box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
	animation: pulse-green 2s 5;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
  }
}



/*  Features
=========================*/


#feature-box
{
	width: 100%;
	background: transparent;
	padding-top: 10px;
	mask-image: linear-gradient(to right,transparent 2%, black 20%, black 80%, transparent 98%);
	-webkit-mask-image: linear-gradient( to right,transparent 2%, black 20%, black 80%, transparent 98%);
	margin: 0 0 40px 0;
}

.feature
{
	text-decoration: none;
	color: #fff;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 300px;
	display: block;
	max-width: 1060px;
	width: 100%;
	margin: 0 6px 5px 6px;
	border-radius: 4px;
	/*border: 4px solid #fff;*/
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}


.feature:hover
{
	text-decoration: none;
}


.feature .content-area
{
	max-width: 1060px;
	position: relative;
	margin: 0 auto;
	width: 100%;
	display: contents;
}


.feature .content-area .text
{
	position: absolute;
	bottom: 0;
	padding: 60px 40px 10px 40px;
	background: /*#3b0766e8*/linear-gradient(180deg, rgba(93,33,164,0) 30%, rgba(6, 6, 6, 0.37) 100%);
	width: 100%;
	text-shadow: 0 0 4px #000;
	border-radius: 0 0 3px 3px;
	font-size: 1.6em;
}


.feature h2
{
	margin: 0;
	font-size: 35px;
	padding-bottom: 0.2em;
	line-height: 1.2em;
	text-align: left;
	font-family: open_sanssemibold;
	color: #fff;
}


.feature h3
{
	font-family: open_sansregular;
	font-weight: normal;
	font-size: 20px;
	color: #fff;
	text-align: left;
}


.feature p
{
	line-height: 1.4em;
	font-size: 0.9em;
	color: #fff;
}



/*	Testimonials
==================*/



#testimonials .fa
{
	font-size: 0.5em;
	/*float: left;*/
	margin-right: 0.4em;
	color: hsl(36, 100%, 50%);
	vertical-align: middle;
}


#testimonials .testimonial
{
	/*text-align: center;*/
	display: flex;
	flex-wrap: wrap;
}

#testimonials .testimonial p
{
	font-style: italic;
	font-size: 1.2em;
	padding: 2em;
	font-family: 'Times New Roman', Times, serif;
	line-height: 1.5em;
	width: 25%;
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 340px;
	text-align: left;
}


#testimonials .testimonial p strong
{
	text-align: center;
}


#testimonials .testimonial .fa
{
	font-size: 3em;
	margin: 0 0.2em 0 0.3em;
	color: hsla(268.1, 69.6%, 27.1%, 0.53);
	float: left;
}


#launch-alert ul
{
	text-align: left;
	margin: 2em 0 3em 3em;
	list-style: none;
}


#launch-alert ul li
{
	margin-bottom: 0.5em;
}


#launch-alert input[type="text"]
{
	font-size: 2em;
	width: 80%;
	padding: 0.5em 0.8em 0.5em 0.8em;
	margin: 0;
	text-align: center;
	font-family: 'ExoBlackItalic', Helvetica, Arial, sans-serif;
	font-style: italic;
	color: hsl(0, 0%, 40%);
	background: transparent;
}


#launch-alert input[type="text"]:focus
{
	color: hsl(0, 0%, 20%);
}



#launch-alert input[type="submit"]
{
	font-size: 2em;
	width: 80%;
	padding: 0.5em 0.8em 0.5em 0.8em;
	margin: 0;
	text-align: center;
}


#launch-alert ul li a
{
	color: #000;
	text-decoration: underline;
}


#launch-alert ul li a:hover
{
	color: #000;
	text-decoration: none;
}


nav.page-menu
{
    background: #fff;
    width: fit-content;
    margin: 2em auto 4em auto;
    padding: 5px 20px;
    border-radius: 50px;
    font-size: 14px;
    border: 1px solid #e6e6e6;
    box-shadow: 0px 2px 3px #e3e3e3a8;
}


nav.page-menu a
{
    color: var(--primary-body);
    text-decoration: none;
    margin: 0 8px;
}


nav.page-menu a:hover
{
    color: var(--primary-highlight);
}


a.find-out-more
{
	color: #FFFFFF;
	font-size: 1.4em;
	font-family: 'open_sanssemibold', sans-serif;
	text-decoration: none;
	text-shadow: none;
	padding: 6px 10px 6px 10px;
	text-align: center;
	text-shadow: 0 0 4px hsl(36, 100%, 50%);
	float: left;
	margin: 0 1em 1em 0;
	background: hsla(36, 100%, 50%, 0.8);
}


a.find-out-more:hover
{
	background: hsl(36, 100%, 50%);
	color: #FFFFFF;
	text-shadow: none;
}


.article p a.add-wishlist-libreture, a.add-wishlist-libreture
{
	color: var(--primary-body);
	text-align: center;
	padding: 0.5em 1em;
	border: 2px solid var(--positive-action);
	border-radius: 4px;
	text-decoration: none;
	margin: 1em auto;
	display: block;
	width: max-content;
	font-family: open_sanssemibold;
	font-size: 0.8em;
}


.article p a.add-wishlist-libreture:hover, a.add-wishlist-libreture:hover
{
	border: 2px solid var(--primary-highlight);
	color: var(--primary-body);
}


a.add-wishlist-libreture .fa
{
	font-size: 1.3em;
	vertical-align: bottom;
	padding-right: 0.5em;
	color: var(--fa-icon);
}


#newsletter
{
	background-image: url('/static/images/backgrounds/reading-small.png');
}



p.newsletter
{
    text-align: center;
	padding: 1.2em;
	margin-bottom: 6em;
	background: #ffffff1c;
}


p.newsletter a
{
	color: var(--yellow);
	font-size: 1.4em;
	font-family: 'open_sanssemibold', sans-serif;
	text-decoration: none;
	padding: 0 0 0 10px;
	text-align: center;
}


p.newsletter a:hover
{
    text-decoration: underline;
	color: hsl(36, 100%, 50%);
}


a.log-in
{

	background: hsl(36, 100%, 50%);
	color: #FFFFFF;
	display: block;
	font-size: 1.4em;
	width: 100%;
	font-family: 'open_sanssemibold', sans-serif;
	margin: 1em 0 0 0;
	text-decoration: none;
	text-shadow: none;
	border-radius: 3px;
	padding: 6px 10px 6px 10px;
	text-align: center;
	/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}


a.log-in:hover
{
	background: hsl(36, 100%, 60%);
	color: #FFFFFF;
}


p.freemium-alert
{
	background: hsl(36, 100%, 60%);
	padding: 1em 1.5em 2em 1.5em;
	border-radius: 4px;
	font-size: 1.2em;
}


p.alert.positive
{
	color: #015f01;
	background: #d4fed4;
	border-radius: 20px;
	padding: 0.3em 1em;
	font-size: 0.8em;
	margin: 2em auto 1.5em auto;
}


p.freemium-alert a
{
	color: #fff;
}


p.no-credit-card
{
	background: hsl(0, 0%, 94.9%);
	padding: 0.5em;
	border-radius: 4px;
	font-size: 1.2em;
}


/*	Secondary Button */

a.secondary, input[type="submit"].secondary
{
	text-decoration: none;
	color: #fff;
	padding: 0.4em 0.5em 0.4em 0.5em;
	background: var(--secondary-button);
	font-family: 'open_sansregular', sans-serif;
	border-radius: 4px;
	text-align: center;
}


a.secondary:hover, input[type="submit"].secondary:hover
{
	background: var(--secondary-button-active);
	color: #fff;
}


a.secondary .fa
{
	padding: 0 0.4em 0 0.2em;
	color: #fff;
}

a.secondary:hover .fa
{
	color: #fff;
}



/*  Activity List */

a.refresh svg
{
	width: 0.8em;
	fill: #fff;
	background: var(--secondary-button);
	border-radius: 50px;
	padding: 3px;
	box-sizing: border-box;
	margin: 0 0 0 10px;
}


a.refresh:hover svg
{
	background: var(--secondary-button-active);
}



ul#activity-list
{
	width: 100%;
	margin: 0;
	/*padding: 20px;*/
	position: relative;
	background: var(--activity-list-background);
	overflow: auto;
}


ul#activity-list li
{
	width: 100%;
	margin: 0 0 20px 0;
	float: left;
	clear: left;
	display: flex;
	background-color: transparent;
	box-sizing: border-box;
	border-bottom: 2px dotted #c3c3c382;
	padding-bottom: 20px;
}


#activity-page ul#activity-list li #activity-detail
{
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}


#activity-page ul#activity-list li #activity-detail a.activity-cover
{
    margin: 0 auto 1em auto;
}


#activity-page ul#activity-list li #activity-detail .activity-text, #activity-page ul#activity-list li #activity-detail .activity-toolbar
{
    position: relative;
}


#activity-page .breadcrumb
{
    text-align: center;
    margin: 10px 20px;
}


#activity-page .activity-sharing
{
    display: unset;
}


ul#activity-list li .activity-entry-wrapper
{
	width: 40%;
	margin: 0 auto;
	position: relative;
	/*overflow: auto;*/
}


ul#activity-list li .activity-content
{
	flex-grow: 1;
	position: relative;
}


ul#activity-list .book-detail
{
	padding: 15px 20px 20px 0;;
}


ul#activity-list li a:hover
{
	color: var(--primary-highlight);
	text-decoration: none;
}


ul#activity-list a.activity-cover
{
	height: 150px;
	width: 100px;
	display: block;
	float: left;
	margin-right: 1.2em;
	white-space: nowrap;
	text-decoration: none;
}


ul#activity-list a.activity-cover .helper
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}


ul#activity-list a.activity-cover img
{
	border: none;
	background: url('/static/images/book-placeholder.png') no-repeat;
	background-size: 100%;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
	vertical-align: middle;
    max-height: 150px;
    max-width: 100px;
	border-radius: 4px;
}


ul#activity-list a.activity-cover:hover img
{
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


a.activity-avatar img
{
	border-radius: 60px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
	vertical-align: middle;
	margin-top: -3px;
	outline: 1px solid var(--positive-action);
}


a.activity-avatar:hover img
{
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


ul#activity-list .activity-text
{
	font-size: 14px;
	position: absolute;
	bottom: 0;
	width: 100%;
}


ul#activity-list li h3
{
	text-align: left;
	color: var(--activity-book-title);
	font-size: 20px;
	font-family: open_sansbold;
	font-weight: normal;
	line-height: 1.2;
	margin: 0 0 3px 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}


ul#activity-list li h3 a
{
	color: inherit;
}


.activity-status, .activity-user
{
	font-family: 'open_sanssemibold', sans-serif;
}


.activity-author
{
	font-family: 'open_sansregular', sans-serif;
	/*opacity: 0.75;*/
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}


.activity-author a
{
	font-family: 'open_sanssemibold', sans-serif;
	font-weight: normal;
	color: inherit;
}



.activity-text a
{
	text-decoration: none;
}


.activity-text .verb a
{
	text-decoration: none;
}


.activity-text a.activity-date
{
	text-decoration: underline;
}


.activity-text .verb a:hover
{
	text-decoration: underline;
}


.activity-text .verb a .fa
{
	color: #a5a5a5;
	font-size: 1.1em;
	margin-left: 0.4em;
}


.activity-text .verb a:hover .fa
{
	color: #927BAD;
}


ul#activity-list li a.see-recommendation
{
	color: var(--positive-action);
	float: right;
	font-size: 0.7em;
	padding: 0.3em 0.5em;
	border-radius: 4px;
	margin-right: 3em;
	position: absolute;
	/*bottom: 0;*/
	right: 0;
	border: 2px solid var(--positive-action);
	font-family: open_sanssemibold;
}


ul#activity-list li a.see-recommendation .fa
{
	color: inherit;
}


ul#activity-list li a.see-recommendation:hover
{
	border: 2px solid var(--primary-highlight);
	color: var(--primary-highlight);
}


ul#activity-list li .activity-toolbar
{
	position: absolute;
	top: 0;
	text-align: right;
	width: 100%;
}


a.add-to-wishlist, a.remove-from-wishlist
{
	
}


a.add-to-wishlist .fa
{
	color: var(--primary-highlight);
	transition: color 0.2s;
	font-size: 18px;
	padding: 0 3px 0 0;
}


a.add-to-wishlist.remove .fa
{
	color: var(--primary-highlight);
}


#book-page a.add-to-wishlist
{
	float: right;
	margin: 0;
}


a.activity-sharing .fa
{
	color: var(--fa-icon);
	transition: color 0.1s;
	margin-left: 10px;
	vertical-align: middle;
	font-size: 16px;
}


a.add-to-wishlist:hover .fa, a.activity-sharing:hover .fa
{
	color: var(--primary-highlight);
}


a.add-to-wishlist:hover .fa-heart-o:before
{
    content: "\f004";
	/*color: var(--primary-highlight);*/
}





/*  Activity Detail  */

div#activity-detail
{
	padding: 30px 0 40px 0;
	font-size: 20px;
	width: 60% !important;
}


div#activity-detail .activity-content
{
	overflow: auto !important;
}


div#activity-detail .book-detail
{
	padding-top: 50px;
}


div#activity-detail .book-detail h3
{
	font-size: 30px;
	-webkit-line-clamp: 4;
	text-align: center;
}


div#activity-detail .book-detail .activity-author
{
	-webkit-line-clamp: 2;
}


div#activity-detail a.activity-cover
{
	width: auto !important;
	height: auto !important;
}


div#activity-detail a.activity-cover img
{
	width: 200px !important;
	max-height: none !important;
	max-width: none !important;
}



/*  Error Quotes  */

.error-quote
{
	max-width: 1060px;
	margin: 0 auto 0 auto;
	text-align: center;
	width: 80%;
}


.error-quote blockquote
{
	font-size: 2em;
	font-family: 'Times New Roman', serif;
	margin: 2em 0 1em 0;
}


.error-quote p.author
{
	text-align: right;
	font-family: 'Times New Roman', serif;
	font-style: italic;
	font-size: 1.5em;
}


.feed-column .error-quote blockquote
{
	font-size: 1.5em;
	font-style: italic;
	color: var(--page-title);
}


.feed-column .error-quote p.author
{
	font-size: 1.3em;
	margin-bottom: 3em;
	font-style: normal;
}



/*  Error List  */

#join-box ul.errorlist li, #join-form-box ul.errorlist li
{
	background-color: hsl(0, 100%, 35%);
	color: hsl(0, 100%, 100%);
	padding: 0.3em 0.5em;
	border-radius: 3px;
    text-align: center;
    list-style-image: none;
    list-style: none;
}


/*  Footer  */

footer
{
	background: hsl(220, 7%, 8%);
	padding: 2em 1em 1.5em 1em;
	width: 100%;
	font-size: 0.7em;
	color: #666;
	text-align: center;
	overflow: auto;
}


footer > .central
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	
}


footer h3
{
	font-family: open_sansbold;
	color: #d2d2d2;
	margin-bottom: 3px;
	text-align: left;
}


footer a
{
	color: #b2b2b2;
	text-decoration: none;
}


footer a:hover
{
	color: var(--primary-highlight);
	text-decoration: underline;
}


footer #footer-social
{
    margin: 20px 0;
    clear: both;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    gap: 20px;
}


footer #footer-social a
{
    font-family: open_sanssemibold;
    font-weight: normal;
    display: flex;
    align-items: center;
}


footer #footer-social a
{
    text-decoration: none;
}


footer #footer-social .fa
{
	font-size: 1.8em;
	margin: 0 5px 0 0;
}


footer ul.footer-menu
{
	list-style: none;
	margin: 1.5em 1em;
	font-family: open_sanssemibold;
	font-size: 1.1em;
	float: left;
	display: block;
	text-align: left;
}


footer ul.footer-menu li
{
	/*display: inline;*/
	margin: 0 0 3px 0;
}


footer ul.footer-menu li svg
{
    vertical-align: text-bottom;
    width: 18px;
    stroke: #666;
    opacity: 0.8;
}


footer p
{
	margin: 0;
}


footer img#fair-tax-pledge
{
	padding: 1.5em 1em 1em 1em;
	box-sizing: content-box;
}



/*  Upload Widget  */

#widget-box
{
	width: 100%;
	height: 100%;
	padding: 5px;
}


#widget-box a img
{
	vertical-align: middle;
	width: 25px;
	margin-right: 3px;
}


#widget-box a
{
	text-decoration: underline;
	color: #fff;
}


#widget-box a:hover
{
	text-decoration: none;
	cursor: pointer;
}


#widget-box .success
{
	text-align: center;
	padding: 5px 0;
}


#widget-box .success a
{
	text-decoration: underline;
	font-weight: bold;
}


#widget-box .success a:hover
{
	text-decoration: none;
}



#upload-widget-button
{
	text-decoration: none;
	color: #fff;
	padding: 0.3em 0.5em 0.3em 0.5em;
	background: #754DA4;
	width: 100%;
	height: 100%;
	border-radius: 0;
}


#upload-widget-button:hover
{
	color: hsl(0, 0%, 10%);
	background: #f90;
	cursor: pointer;
}



/*  Upload Page   */

.format-mention
{
	font-size: 1.5rem;
}


#globalprogress
{
	display: none;
	margin-bottom: 3em;
}


#globalprogress .progressbar,
.progress .progressbar
{
	width: 100%;
	height: 1.2em;
	overflow: hidden;
	background-color: #ededed;
	border-radius: 10px;	
}


.progress
{
	margin-bottom: 0.2em;
}


.progress .progressbar
{
	width: 50%;
	height: 3px;
	float: left;
	margin-right: 0.8em;
	margin-top: 0.6em;
}


#globalprogress .progressbar .ui-progressbar-value,
.progress .progressbar .ui-progressbar-value
{

	height: 100%;
	font-weight: bold;
	background-image: radial-gradient(#212121 20%, transparent 20%);
	background-size: 20px 20px;
	background-repeat: repeat-x;
}


#globalprogress h3
{
	font-family: open_sanssemibold;
	font-weight: normal;
	text-align: center;
	margin: 0 0 1em 0;
	font-size: 1.1em;
}


#files .file
{
	margin: 0.8em 0;
}


#files .file h4
{
	font-family: open_sanssemibold;
	font-weight: normal;
	font-size: 1.1em;
	text-align: left;
}


#files .file h4 .size
{
	font-family: open_sansregular;
	font-size: 0.8em;
	padding-left: 0.5em;
}


#files .file .error
{
	background-color: unset;
	color: hsl(0, 100%, 43.5%);
	padding: 0 0.5em 0 0;
}


#files .file .fa
{
	color: hsl(0, 0%, 50%);
	padding-right: 0.2em;
}


#files .file a.edit, #files .file a.cancel, #files .file a.delete
{
	padding-right: 1em;
	font-size: 0.9em;
}


#files .file .ui-progressbar-value
{
	background-color: #212121;
}


/*  Upload Loading Spinner  */

.ripple {
	display: none;
}

.ripple.display{
	display: block;
	margin: 60px auto 60px auto;
}

.ripple.display.widget{
	display: block;
	margin: 0 auto;
	width: 30px;
}



/* ================================== */


@media all and (max-width: 1120px)
{
	
	.dropdown-content
	{
		right: 0;
	}
	
	#main-landing-box #headline h1 #genre-switch
	{
		font-size: 1.5em;
	}
	
	.landing-page section#article-body
	{
		padding: 0 1em;
	}
	
	.landing-page .text-box
	{
		float: none;
		width: 100%;
		padding: 2em;
	}
	
	.landing-page .text-box ul
	{
		width: 100%;
		text-align: center;
	}
	
	.landing-page .text-box h1
	{
		text-align: center;
	}

	.landing-page .text-box h2
	{
		text-align: center;
	}

	.landing-page .text-box p
	{
		text-align: center;
	}
	
	.landing-page img.process-landscape
	{
		display: none;
	}
	
	.landing-page img.process-vertical
	{
		display: unset;
	}

    .feed-column
	{
		width: 50%;
	}
	
	#latest-public-activity
	{
		width: 100%;
	}
	
	/*	Tabs
	==========*/
	
	.tabbed > section
	{
	  width: 100%;
	}
	
	
	.tabbed > section > h2
	{
	  padding: 0.5em 0 0 0;
	  margin-left : 0;
	}
	
	.tabbed > section > h2 > label
	{
		padding: 0.25em 8px;
	}
	
	#latest-bookshops
	{
		width: 100%;
		clear: both;
		margin-top: 2em;
		padding: 0;
	}
	
	#latest-bookshops ul li a.bookshop-entry
	{
		margin: 0 0 1px 0;
	}
	
	#feature-box
	{
		mask-image: none;
		-webkit-mask-image: none;
		padding-top: 0;
	}
	
		
	.flickity-button
	{
	  display: none !important;
	}
}


/* ================================== */


@media all and (max-width: 870px)
{
	
	ul.global-notifications li.mobile-promo
	{
		color: #5D21A4;
		font-family: open_sansregular;
		font-size: 0.8em;
		display: block;
		background: /*#401473*/ url('/static/images/notification/idad.png') no-repeat center center;
		padding: 0.3em 1em 0.6em 0.5em;
		background-size: cover;
	}
	
	ul.global-notifications li.mobile-promo a
	{
		text-decoration: underline;
		font-family: open_sanssemibold;
	}
	
	ul.global-notifications li.mobile-promo a:hover
	{
		text-decoration: none;
	}
	
	
	/* Burger Menu */
	
	ul#main-menu
	{
		display: none;
	}
	
	#sidebarMenu
	{
		display: unset;
		height: 100%;
		position: absolute;
		left: 0;
		width: 100%;
		margin-top: 45px;
		transform: translateX(-100%);
		transition: transform 250ms ease-in-out;
		background: #754DA4;
		z-index: 1000;
	}
	
	.sidebarMenuInner
	{
		border-top: 1px solid rgba(255, 255, 255, 0.10);
		font-family: open_sansbold;
		text-transform: uppercase;
	}
	
	.sidebarMenuInner li
	{
		list-style: none;
		padding: 20px;
		cursor: pointer;
		border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	}
	
	.sidebarMenuInner li span
	{
		display: block;
		font-size: 14px;
		color: rgba(255, 255, 255, 0.50);
	}
	
	.sidebarMenuInner li a
	{
		color: #fff;
		cursor: pointer;
		text-decoration: none;
	}
	
	input[type="checkbox"]:checked ~ #sidebarMenu
	{
		transform: translateX(0);
	}
	
	.sidebarIconToggle
	{
		transition: all 0.3s;
		box-sizing: border-box;
		cursor: pointer;
		height: 22px;
		width: 22px;
		float: left;
		margin: 0.6em 0 0 0.8em;
	}
	
	.spinner
	{
		transition: all 0.3s;
		box-sizing: border-box;
		position: absolute;
		height: 3px;
		width: 100%;
		background-color: var(--positive-action);
	}
	
	.horizontal
	{
		transition: all 0.3s;
		box-sizing: border-box;
		position: relative;
		float: left;
		margin-top: 3px;
	}
	
	.diagonal.part-1
	{
		position: relative;
		transition: all 0.3s;
		box-sizing: border-box;
		float: left;
	}
	
	.diagonal.part-2
	{
		transition: all 0.3s;
		box-sizing: border-box;
		position: relative;
		float: left;
		margin-top: 3px;
	}
	
	input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal
	{
		transition: all 0.3s;
		box-sizing: border-box;
		opacity: 0;
	}
	
	input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1
	{
		transition: all 0.3s;
		box-sizing: border-box;
		transform: rotate(135deg);
		margin-top: 8px;
	}
	
	input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2
	{
		transition: all 0.3s;
		box-sizing: border-box;
		transform: rotate(-135deg);
		margin-top: -9px;
	}
	
	
	/* User Menu */
	
	
	ul#user-menu li a.upload
	{
		border-radius: 50px;
		padding: 0 !important;
		text-decoration: none !important;
		position: fixed;
		bottom: 10px;
		z-index: 200;
		right: 10px;
		height: 60px;
		width: 60px !important;
		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
		justify-content: center;
		margin: 0;
	}
	
	ul#user-menu li a.upload:hover
	{
		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
		background: var(--main-purple);
	}
	
	ul#user-menu li a.upload svg
	{
		width: 80%;
	}
	
	ul#user-menu li a.upload span
	{
		display: none;
	}
	
	a.dropbtn
	{
		/*position: fixed;
		bottom: 10px;
		right: 80px;
		z-index: 300;
		width: unset !important;*/
		padding: 0 !important;
		
	}
	
	a.dropbtn span
	{
		display: none;
		
	}
	
	.dropdown-content
	{		
		/*display: none;
		position: fixed;
		min-width: max-content;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 200;
		background: #fff;
		bottom: 57px;
		right: 35px;
		border-radius: 4px;
		font-size: 1em;
		padding-bottom: 0.5em;*/
		font-size: 1.3em;
	}
	
	.dropdown-content a span
	{
		display: none;
	}
	
	.dropdown-content a .fa
	{
		display: none;
	}
	
	ul#user-menu li a img.avatar
	{
		height: 40px;
		width: 40px;
	}

	
	#ext-links
	{
		width: 100%;
		margin: 1em 0 1em 0;
		float: none;
	}

	#logo
	{
		display: none;
	}
	
	body header #banner
	{
		padding-top: 5px;
	}
	
	body header #banner h2 a
	{
		margin-bottom: 0.5em;
		padding: 0;
	}

    #search-menu
    {
	    padding-left: 0;
    }
	
	#search-menu input[type="submit"]
	{
		background: unset;
		color: #fff;
		margin-left: 4px;
	}
	
	#search-menu input[type="submit"]:hover
	{
		background: #fff;
		color: #754DA4;
		cursor: pointer;
	}

	#landing
	{
		width: 100%;
		padding: 0;
	}

	#launch-alert
	{
		width: 100%;
	}

	#launch-alert ul
	{
		list-style: none;
		text-align: center;
	}

	#landing-banner
	{
		/*margin: 0;
		text-align: center;
		box-shadow: none;
		background-image: none;
		background-color: #fff;*/
		display: none;
	}

	#landing-banner #landing-text
	{
		width: 100%;
		padding: 2em;
		text-align: center;
		
	}
	
	.landing-text
	{
		border-radius: 0;
	}
	
	.landing-text .text-content
	{
		/*width: 100%;
		float: none;*/
	}
	
	.landing-text .button-content
	{
		/*margin-top: 10px;*/
		float: none;
	}

	#landing-banner .cta
	{
		width: 100%;
		padding: 1em 0 0 0;
		margin: 0;
		text-align: center;
	}
	
	a.join-button
	{
		margin: 1em auto 0 auto;
	}

	#upload-count
	{
		width: 100%;
		padding: 0 0 1em 0;
	}
	
	#landing-button
	{
		width: 100%;
		margin-top: 0;
	}	

	#landing-banner h1
	{
		/*font-size: 3.5em;*/
		text-align: center;
	}
	
	#landing-banner h2
	{
		/*font-size: 1.2em;*/
		text-align: center;
		width: 100%;
	}
	
	#landing-banner img
	{
		width: 100%;
	}
	
	#landing-banner p.more-about
	{
		width: 100%;
	}

	.image-box
	{
		width: 100%;
	}

	img.more-image
	{
		width: 100%;
	}

	#promo-logged-out
	{
		width: 100%;
	}

	#testimonials
	{
		width: 100%;
        padding: 2em;
	}

	#testimonials h2
	{
		text-align: center;
	}

	#testimonials .fa
	{
		display: none;
	}

	#testimonials .testimonial .fa
	{
		display: block;
	}
	
	#testimonials .testimonial
	{
		width: 100%;
	}
	
	#testimonials .testimonial p
	{
		width: 100%;
		padding: 0;
		min-width: unset;
	}

	#testimonials ul
	{
		text-align: center;
	}

	#testimonials ul li::before {
	  content: "";
	}
	
	.landing-page h2.hero
	{
		margin: 1em 0;
	}
	
	.landing-page .text-box
	{
		float: none;
		width: 100%;
		padding: 2em;
	}

	.landing-page .text-box h1
	{
		text-align: center;
	}

	.landing-page .text-box h2
	{
		text-align: center;
	}

	.landing-page .text-box p
	{
		text-align: center;
	}

	ul#benefits
	{
		width: 100%;
	}

	ul#benefits li
	{
		width: 100%;
		height: auto;
		text-align: center;
	}

	ul#benefits li .fa
	{
		float: none;
		display: inline;
		text-align: center;
	}
	
	
	#currently-reading h2
	{
		margin: 0 0 10px 0;
	}
	
	.book-poster
	{
		width: 100px;
		height: 150px;
		border-radius: 10px;
		margin: 2px 4px 20px 4px;
	}
    
    
    .book-poster.placeholder
    {
        display: none;
    }
    
    

	/*	Tabs
	==========*/
	
	

	/*  Feed Columns
	===================*/
	
	#currently-reading h2, #favourite-books h2, #recommended-books h2, #latest-bookshops h2, #libreture-lets-you h2, #latest-public-activity h2
	{
		padding-left: 20px;
	}
	
	
	#latest-public-activity
	{
		width: 100%;
		/*margin-top: 3em;*/
	}

	
	ul#activity-list li a.see-recommendation
	{
		margin-right: 1em;
	}

	
	#currently-reading, #favourite-books, #recommended-books
	{
		padding: 2em 0 1.5em 0;
	}
	
	.feed-column
	{
		width: 100%;
		min-width: unset;
		padding: 0;
	}

	.feed-column ul li a img
	{
		float: none;
	}

    #latest-news
    {
        text-align: center;
    }

	#latest-activity
	{
		width: 100%;
	}

		
	.activity-date a span
	{
		display: none;
	}	
	
	a.activity-avatar img
	{
		margin: 0;
	}
	
	ul#activity-list .book-detail
	{
		padding: 0.5em 0;
	}
	
	#library-menu .library-cap
	{
		
	}
	
	#library-menu a.upgrade-link svg
	{
        width: 2em;
    }

	ul#tools li a
	{
		width: 100%;
		height: auto;
		font-size: inherit;
		padding: 0.4em 0.5em 0.4em 0.5em;
	}
	
	ul#tools li a span
	{
		display: none;
	}

	#page
	{
		/*padding-bottom: 300px;*/
	}

	#login-join-screen
	{
		width: 100%;
		padding: 20px;
	}
	
	#login, #join-box
	{
		float: none;
		width: 100%;
	}

	#login
	{
		margin-bottom: 30px;
	}

	#join-form-box
	{
		width: 100%;
		border: none;
		box-shadow: none;
		margin: 0;
	}
	
	#book-banner
	{
		margin: 0;
		height: 200px;
	}
	
	#book-page #image-block
	{
		width: 100%;
		border: none;
		padding: 0 0 1em 0;
		text-align: center;
		float: none;
	}
	
	#book-page #detail-block, #book-page #book-details, #book-page #detail-block #status-change
	{
		width: 100%;
		border: none;
		padding: 0;
		text-align: center;
		float: none;
	}
	
	#sharing-bar
	{
		float: none;
		text-align: center;
		margin-bottom: 1em;
	}

	a.tweet-button
	{
		margin: 3em auto 0 auto;
	}
	
	#book-page a.tweet-button
	{
		margin: 3em auto 0 auto;
	}
	
	#book-page h1
	{
		font-size: 2.5em;
	}
	
	#book-page h2
	{
		font-size: 1em;
	}
	
	#book-page #status-bar
	{
		
	}
	
	#book-page #description
	{
		text-align: left;
	}


	#book-page #status-change
	{
		margin-bottom: 3em;
		margin-right: auto;
		margin-left: auto;
		width: 100%;
		float: none;
	}
	
	#book-page #bookshop span
	{
		/*display: none;*/
	}

	#book-page #detail-block h1, #book-page #detail-block h2
	{
		text-align: center;
	}


	#book-page #detail-block #book-lock
	{
		float: none;
		margin: 2em auto 0 auto;
	}

	#book-page #detail-block #book-lock a
	{
		float: none;
	}

	#book-page #favourite
	{
		float: none;
		margin: 2em auto 0 auto;
	}

	#book-page #favourite a, #book-page #favourite .disabled
	{
		float: none;
	}

	#book-page #status-change #recommendation-body, #book-page #recommendation, #book-page #bookshop, #book-page #metadata-change
	{
		width: 100%;
		min-width: unset;
	}
	
	#book-page #recommendation
	{
		/*text-align: center;*/
	}

	#book-page #status-change input[type="submit"]
	{
		width: 100%;
	}

	.lock-text
	{
		text-align: center;
	}

	.form-page img
	{
		max-width: 100%;
	}

	#upload-book, #upload-book input[type="file"], #upload-book input[type="submit"]
	{
		width: 100%;
	}

	.article
	{
		width: 100%;
	}

	.article header .stripe
	{
		text-align: center;
		width: 100%;
		clip-path: none;
		top: unset;
		bottom: 0;
	}
	
	.article header .stripe a.tweet-button
	{
		float: unset;
	}
	
	.article header h1
	{
		font-size: 2.5em;
		margin: 0.5em 0.2em 0 0.2em;
	}
	
	.article header p
	{
		margin: 1em 0.2em 1em 0.5em;
	}
	
	.article section#article-body
	{
		padding: 0 1em;
	}

	.article h2
	{
		font-size: 2em;
		text-align: center;
	}

	.article img
	{
		float: none;
		margin: 1em auto 1em auto;
		width: 100%
	}
	
	.article .extra-info
	{
		width: 100%;
		float: unset;
		margin: 1em auto;
	}
	
	.article img.gif
	{
		width: 100%;
	}
	
	#shop-listing .shop
	{
		width: 100%;
	}
	
	#content
	{
		padding: 0;
		overflow: auto;
	}
	
	#content.listing
	{
		width: 100%;
		padding: 10px 5px;
	}
	
	#content.listing .text-block
	{
		width: 100%;
		padding: 1em 2em;
	}
	
	.cta-floating
	{
		width: 100%;
		border-radius: 0;
		bottom: 0;
		right: 0;
		padding: 10px 20px;
	}
	
	.cta-floating p
	{
		text-align: center;
	}
	
	.cta-floating a.join-button
	{
		margin-top: 0;
	}
	
	#book-page .cta-box
	{
		display: none;
	}

	
	
	/*  Activity
	=============*/
	
	ul#activity-list li .activity-entry-wrapper
	{
		width: 100%;
		margin: 0;
	}
	
	
	#activity-detail
	{
		width: 100%;
	}
	
	#activity-detail .activity-text
	{
		clear: both;
	}
	
	#activity-detail .activity-cover
	{
		margin-bottom: 2em;
	}
	
	
	/*	Shop Listing
	=================*/
	
	#shop-listing a.shop img
	{
		margin: 0.3em 1em 1em 0;
		width: 40px;
	}
	
	#shop-listing a.shop h2
	{
		font-size: 1.2em;
	}


	
	/*  Search
	=============*/
	
	
	.search-form input:not([type="submit"]):not([type="file"]), form#search-home input[type="search"]
	{
		width: 90%;
		font-size: 1em;
	}

	.search-form input[type="submit"]
	{
		width: 100%;
		font-size: 1em;
		border-radius: 4px;
	}
	
	.search-form select
	{
		font-size: 1em;
		width: 100%;
		margin: 0;
	}
	
	
	/* Upload Page
	===============*/
	
	.progress .progressbar
	{
		width: 80%;
	}
	
	
	/*  Account Page
	=================*/
	
	#accountForm label.subscription
	{
		width: 80%;
	}


	
	/*  Footer
	=============*/

	footer
	{
		padding-top: 1em;
		/*height: 300px;
		overflow: auto;*/
	}


}