@charset "UTF-8";

/* css for book pages */

body {
	font: 100%/1.4;
	font-family: Lato, Helvetica, Arial, sans-serif;
	font-weight: 300;
	color: #99F;
	background: #000 url(img/double-star-albereo-bkgr-trimmed.jpg) no-repeat;
	background-position: top center;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	text-align: center;
}

.content {
	margin: 0 auto;
	padding: 3em 0 0 0;
	width: 90%;
}

p { 
	color: #888;
	font-family: Lato, Helvetica, Arial, sans-serif; 
	font-size: 1em; 
	letter-spacing: .05em;
	font-weight: 400;
	line-height: 170% 
}
	
h1 { /* home page title */
	color: #A4A2A2;
	font-family: 'Gruppo', Helvetica, Arial, sans-serif; 
	font-size: 2.6em; 
	font-weight: 400;
	letter-spacing: .08em;
	line-height: 120%;
	text-align:center; 
}

.secondary-h1 { font-size: 44px;  float: right; padding-right: 40%;}

h2 { /* secondary page titles */
	font-family: 'Gruppo', Helvetica, Arial, sans-serif; 
	font-size: 30px; 
	font-weight: 400;
	letter-spacing: .08em; 
	line-height: 120%;
	text-align:center; 
	color: #ff9900;
	font-variant: small-caps;
	
}

h3 { /* 24 px flush left */
	font-family: 'Gruppo', Helvetica, Arial, sans-serif; 
	font-size: 24px; 
	font-weight: 400;
	letter-spacing: .08em; 
	text-align:left; 
	color: #ff9900;
}

h4 { 
	font-size: 1.7em; 
	font-weight: 400;
	letter-spacing: .08em; 
	text-align:center; 
	color: #F9F9FB;
	font-variant: small-caps;
}
h5 { /* 18 px left */
	font-family: 'Gruppo', Helvetica, Arial, sans-serif; 
	font-size: 18px; 
	font-weight: 400;
	letter-spacing: .08em; 
	text-align:left; 
	color: #ff9900;
	line-height: 0%;
}

h6 { /* Alb and the Phenom text */
	color: #9999cc; 
	font-family: Lato, Helvetica, Arial, sans-serif; 
	font-size: 1.05em; 
	letter-spacing: .05em;
	font-weight: 400;
	line-height: 170%;
	width: 68% }
	
.small-caps {
	font-variant: small-caps;
	font-weight: 400;
}
.violet {
	color: #c398e8;
	font-size: 15px; 
	letter-spacing: .0em;
	text-align: left;
	font-weight: normal;
}

.text { /* Publisher of... text */
	width: 68%;
	padding: 0 0 2em 0;
	line-height:140%;
	color: #777;
	text-align: center;
}
.title-lin {
	color: #c655f8;
	font-size: 1.5em;
	font-variant: small-caps;
}
a .title-lin, a .title-cri {
	transition: 1s ease;
}
a:hover .title-lin, a:hover .title-cri {
	color: #666;
	transition: 1s ease;
}
.title-cri {
	color: #4787f8;
	font-size: 1.5em;
	font-variant: small-caps;
}
.cri-blue {
	color: #4787f8;
}
.sm-dark-text { font-size: .9em; line-height: 200%; letter-spacing:.1em; color: #444}
.center-lg { text-align: center; font-size: 22px; font-weight: 400; font-family: 'Gruppo', Helvetica, Verdana, Arial, sans-serif; letter-spacing: .08em; color: #ff9900; }

.book-img {
	border-color: #666666;
	margin: 10px;
}

.front-cover { width: auto; }

.back-cover {
	text-align: center;
	max-width: 680px;
	border: #666666 .11em solid;
	margin-bottom: 24px;
}

.book-img:hover {
	transform: scale(3.3);
-ms-transform: scale(3.3);
-webkit-transform: scale(3.3);
-moz-transform: scale(3.3);
-o-transform: scale(3.3);
}

#about-albereo.blocktext-bkgr { 
	background: #000;
	border-top: #ccc 1px solid; 
	border-bottom: #666 1px solid; 
	width: 100%;
	padding: 4em 0 4em 0;
}
#about-albereo .blocktext p { 
	margin: 0 auto;
	width: 68%;
	max-width: 740px;
	float: none;
	text-align: justify;
	font-weight: 400;
	color: #A1A2A4;
	font-size: 1em;
}
#solarpunk.blocktext-bkgr { 
	background: #317DC8;
	border-top: #ccc 1px solid; 
	border-bottom: #fff 1px solid; 
	width: 100%;
	padding: 4em 0 6em 0;
}
#solarpunk .blocktext p { 
	margin: 0 auto;
	padding: 0 0 1em 0;
	width: 68%;
	max-width: 740px;
	float: none;
	text-align: justify;
	font-weight: 400;
	color: #FFF;
	font-size: 1.11em;
}

a:link
  	 { color: #888; text-decoration: none }
a:visited
  	 { color: #888; text-decoration: none }
a:hover, a:active, a:focus 
 	 { color: #d8d8d8; text-decoration: none;}
	 
	 

h1 a:link, h1 a:visited {
	
	color: #888;
	font-weight: 400;
	letter-spacing: .08em;
	line-height: 120%;
	text-align:center; 
}
h1 a:hover, h1 a:active, h1 a:focus {

	color: #ccc;
	font-weight: 400;
	letter-spacing: .08em;
	line-height: 120%;
	text-align:center; }
	
	 
.header-link a:link { color: #666666;}
.header-link a:visited { color: #666666;}
.header-link a:hover, .header-link a:active, .header-link a:focus { color: #d8d8d8; }
.header-link {  float: right; padding-top: 8px; font-size: 14px; font-family: Lato, Helvetica, Arial, sans-serif;; font-variant:small-caps;  font-weight: 500; letter-spacing: .08em; }	 


.trilogy-link {
	margin: 0 auto;
	padding: 2em 0 6em 0;
}
.trilogy-link ul {
	margin: 0;
	padding: 0;
}
.trilogy-link ul li {
	display: inline;
	padding: 0 1em 0 1em;
}
.trilogy-link a:link, .trilogy-link a:visited { 
	color: #6699cc;
	font-size: 1em;
	font-weight: 400;
	line-height: 170%;
	font-variant: small-caps;
	letter-spacing: .08em;
	text-decoration: none;
	padding-bottom: .22em;
	border-bottom: 1px #444 solid;
	transition: 1s ease;
}
.trilogy-link a:hover, .trilogy-link a:active, .trilogy-link a:focus { 
	color: #444444;
	border-bottom: 1px #222222 solid;
	position: relative;
	transition: 1s ease;
}
.trilogy-link p { text-align: center; color: #888; padding-right: 16px;}
.trilogy-title { text-align: center; color: #888; font-size: 1em; font-family: Lato, Helvetica, Arial, sans-serif;; font-variant:small-caps;  font-weight: 500; letter-spacing: .08em; padding-bottom: 4px;}


#solarpunk .blocktext a:link, .blocktext a:visited { 
	color: #fff;
	font-size: 1em;
	font-weight: 400;
	text-decoration: none;
	letter-spacing: .05em;
	line-height: 200%;
	padding-right: 0;
	padding-bottom: .22em;
	border-bottom: 1px #253DF6 solid;
	transition: 1s ease;
}
#solarpunk .blocktext a:hover, #solarpunk .blocktext a:active, #solarpunk .blocktext a:focus { 
	color: #ccc;
	font-size: 1em;
	font-weight: 400;
	text-decoration: none;
	letter-spacing: .05em;
	line-height: 200%;
	padding-right: 0;
	padding-bottom: .22em;
	border-bottom: 1px #99f solid;
	transition: 1s ease;
}

h5 a:link
  	 { font-family: 'Gruppo', Helvetica, Verdana, Arial, sans-serif; 
	font-size: 18px; 
	font-weight: 400;
	letter-spacing: .08em; 
	text-align:left; 
	line-height: 0%;
	color: #888; text-decoration: none }
h5 a:visited
  	 { font-family: 'Gruppo', Helvetica, Verdana, Arial, sans-serif; 
	font-size: 18px; 
	font-weight: 400;
	letter-spacing: .08em; 
	text-align:left; 
	line-height: 0%;
	color: #888; text-decoration: none }
h5 a:hover, a:active, a:focus 
 	 { font-family: 'Gruppo', Helvetica, Verdana, Arial, sans-serif; 
	font-size: 18px; 
	font-weight: 400;
	letter-spacing: .08em; 
	text-align:left; 
	line-height: 0%;
	color: #d8d8d8; text-decoration: none; font-variant:inherit; font-family: inherit;}
	
	
.sm-text a:link
  	 { font-size: .94em; line-height: 200%; letter-spacing:.1em;  color: #888; text-decoration: none }
.sm-text a:visited
  	 { font-size: .94em; line-height: 200%; letter-spacing:.1em;  color: #888; text-decoration: none }
.sm-text a:hover, a:active, a:focus 
 	 { font-size: .94em; line-height: 200%; letter-spacing:.1em;  color: #d8d8d8; text-decoration: none; font-variant:inherit }
.sm-text { font-size: .92em; line-height: 200%; letter-spacing:.1em; margin-top: -14px;}

blockquote {
	margin: 0 0 0 5%;
}
.chronicles {
	float: none;
	width: 90%;
	alignment-adjust: middle;
}
.chronicles:after {
	clear: both;
}

.book1 {
	float: left;
	width: 50%;
	padding-bottom: 10px;
}
.book2 {
	float: right;
	width: 50%;
	padding-bottom: 10px;

}

.nofloat {
	float: none;
	clear: both;
}


.footer {
	padding: 10px 0;
	background: #222222;
	float: none;
	clear: both; 
	font-family: Helvetica, Arial, Geneva; 
	font-size: .88em; 
	color: #666666;
	line-height: 120%;
	text-align: center; 
	padding-bottom: 10px;
}

.footer-trilogy-link p { text-align: center; padding-right: 12px; font-size: .8em; line-height: 200%; letter-spacing:.1em; color: #888;}	
.footer-trilogy-link a { text-align: center; padding-right: 12px; padding-left: 12px; font-size: .92em; line-height: 200%; letter-spacing:.1em; color: #888;}	
.footer-trilogy-link a:link, .footer-trilogy-link a:visited { 
	text-align: center; padding-right: 12px; font-size: .92em; line-height: 200%; letter-spacing:.1em; color: #888; 
	transition: 1s ease;}	
.footer-trilogy-link a:hover, .footer-trilogy-link a:active, .footer-trilogy-link a:focus { text-align: center; /*! padding-right: 12px; */ font-size: .92em; line-height: 200%; letter-spacing:.1em; color: #fff;}		
.copyright { font-size: .8em; padding-right:16px; 
	transition: 1s ease;}

.fltrt {  
	float: right;
	margin-left: 8px;
}
.fltlft { 
	text-align: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.flex-container {
  padding: 0;
  margin: 2em 0 0 0;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  flex-wrap: nowrap;
}
#top.flex-container {
  margin: 1em 5% 0 0;
	padding: 0 0 2em 0;
	width: 80%;
}
.flex-item {
  margin: 0 auto;
  padding: 0 8% 0 8%;
  text-align: center;
  vertical-align: middle;
}
#top .flex-item {
  padding: 0 8% 0 8%;
}
.books {
	display: none;
}
.books-5-books .flex-item {
  margin: 0 auto;
  padding: 0 4% 0 4%;
  width: 20%;
  text-align: center;
  vertical-align: middle;
}
.books .flex-item img, .books-5-books .flex-item img {
	width: 100%;
	border: 1px #555 solid;
}
.books .flex-item p {
	color: #cc99ff;
	font-size: .9em;
	font-weight: 300;
	line-height: 130%;
	letter-spacing: .03em;
	margin: 0 0 3em 0;
}
.books-5-books .flex-item p {
	color: #cc99ff;
	font-size: .8em;
	font-weight: 300;
	line-height: 140%;
	letter-spacing: .03em;
	margin: 0 0 3em 0;
}
.books-5-books .flex-item p.cri-blue {
	color: #4787f8;
	font-size: .8em;
	font-weight: 300;
	line-height: 140%;
	letter-spacing: .03em;
	margin: 0 0 3em 0;
}
.books a:link, .books a:visited, .books-5-books a:link, .books-5-books a:visited {
	color: #888888;
	font-size: .95em;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: .08em;
	text-decoration: none;
	padding-bottom: .11em;
	transition: 1s ease;
}
.books a:hover, .books a:active, .books a:focus, .books-5-books a:hover, .books-5-books a:active, .books-5-books a:focus {
	color: #666666;
	font-size: .95em;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: .08em;
	text-decoration: none;
	padding-bottom: .11em;
	transition: 1s ease;
}
.books img a:link, .books img a:visited, .books-5-books a:link, .books-5-books a:visited {
	opacity: 1;
	border-bottom: none;
	transition: 1s ease;
}
.books img a:hover, .books img a:active, .books img a:focus, .books-5-books a:hover, .books-5-books a:active, .books-5-books a:focus {
	opacity: .606;
	border-bottom: none;
	transition: 1s ease;
}
.blocktext-bkgr {
	width: 80%;
	margin: 0 auto;
	padding-top: 3em;
}
.blocktext-bkgr h4 { 
	font-size: 1.7em; 
	font-weight: 300;
	letter-spacing: .08em; 
	text-align:center; 
	color: #fff;
	font-variant: small-caps;
}
.blocktext-bkgr p { 
	color: #888;
	font-family: Lato, Helvetica, Arial, sans-serif; 
	font-size: 1em; 
	letter-spacing: .05em;
	font-weight: 400;
	line-height: 170%;
	margin-bottom: 2em;
	text-align: left;
}


@media screen and (max-width:1050px) {

#top.flex-container {
	width: 92%;
}
.flex-item {
  padding: 0 4% 0 4%;
}
}

@media screen and (max-width:820px) {

#top.flex-container {
	padding: 0 0 4em 0;
}
#top .flex-item {
  padding: 0 4% 2em 4%;
}
.flex-container {
  margin: 2em 0 0 0;
  -webkit-flex-flow: column wrap;
  justify-content: space-around;
  flex-wrap: nowrap;
   -webkit-flex-direction: column;
   flex-direction: column;
}
.flex-item {
	margin: 0 auto;
	padding: 0;
  width: 80%;
  text-align: center;
  vertical-align: middle;
}
.books-5-books {
		display: none;
	}
.books {
		display: block;
	}
.books .flex-container#lin, .books .flex-container#cri {
  padding: 0;
  margin: 0 auto;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  flex-wrap: nowrap;
	flex-direction: row;
}

.books .flex-item#lin1, .books .flex-item#lin2 ,.books .flex-item#lin3, 
.books .flex-item#cri1, .books .flex-item#cri2, .books .flex-item#cri3 {
  margin: 0 auto;
  padding: 0 8% 0 8%;
	max-width: 8em;
  text-align: center;
  vertical-align: middle;
}
.books .flex-item img, .books-5-books .flex-item img {
	width: 8em;
	border: 1px #555 solid;
}
h4 { /* 22 px centered dark*/
	font-size: 1.5em; 
	padding: 0 1em 0 1em;
}
}

@media screen and (max-width: 780px) {
	.container {
		background: #000;
		margin: 0 auto; 
	}
	#thankyou.container {
			background: none;
		}
	.content {
		width: 100%;
	}
	.text {
		width: 68%;
		padding-top: 12px;
		padding-bottom: 40px;
	}
	.book-img:hover {
		transform: scale(2.2);
		-ms-transform: scale(2.2);
		-webkit-transform: scale(2.2);
		-moz-transform: scale(2.2);
		-o-transform: scale(2.2);
	}
	.books .flex-container#lin, .books .flex-container#cri {
	 display: block;
	}
	.books .flex-item#lin1, .books .flex-item#lin2 ,.books .flex-item#lin3, 
	.books .flex-item#cri1, .books .flex-item#cri2, .books .flex-item#cri3 {
		margin: 0 auto;
		padding: 0;
		width: 100%;
		max-width: 100%;
		display: block;
	}
	.books .flex-item img {
		width: 200px;
	}

#solarpunk .blocktext p { 
	width: 80%;
}

#about-albereo .blocktext p { 
	margin: 0 auto;
	padding: 0;
	width: 80%;
	max-width: 740px;
	text-align: left;
}
}


@media screen and (max-width: 690px) {
	
.books .flex-item#lin1, .books .flex-item#lin2 ,.books .flex-item#lin3, .books .flex-item#cri1, .books .flex-item#cri2 {
  padding: 0 4% 0 4%;
	max-width: 8em;
  text-align: center;
  vertical-align: middle;
}
.books .flex-item img {
	width: 6em;
	border: 1px #555 solid;
}
}

@media screen and (max-width: 560px) {
.text {
	width: 80%;
	padding-bottom: 40px;
}
.book-img:hover {
	transform: scale(2.2);
	-ms-transform: scale(2.2);
	-webkit-transform: scale(2.2);
	-moz-transform: scale(2.2);
	-o-transform: scale(2.2);
}
.trilogy-link ul li {
	display: block;
	padding: 1.15em 0 0 0;
}
.chronicles {
	float: none;
	padding-left: 40px;
}
.book1 {
	float: clear;
	width: 100%;
}
.book2 {
	float: clear;
	width: 100%;
}
}

@media screen and (max-width: 480px) {
.container {
	background: #000;
	margin: 0 auto; 
	width: 90%;
}
.text {
	width: 90%;
	padding-bottom: 20px;
}
h2 { 
	font-size: 21px;
	padding-top: 40px;
}
.book-img:hover {
	transform: scale(1.1);
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
}
.fltrt {  
	float: none;
	margin-left: 0px;
}
.fltlft { 
	float: none;
	margin-right: 0px;
}

}