/* ******************* New Fonts */

@font-face {
    font-family: "GTC";
    src: url("gtc.TTF");
}
@font-face {
    font-family: "GTC";
    src: url("gtcb.TTF");
    font-weight: bold;
}
@font-face {
    font-family: "GTC";
    src: url("gtci.TTF");
    font-style: italic;
}
@font-face {
    font-family: "GTC";
    src: url("gtcbi.TTF");
    font-weight: bold;
    font-style: italic;
}


@font-face {
    font-family: "gara";
    src: url("gara.ttf");
}
@font-face {
    font-family: "gara";
    src: url("garabo.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "gara";
    src: url("garait.ttf");
    font-style: italic;
}
@font-face {
    font-family: "gara";
    src: url("garbita.ttf");
    font-weight: bold;
    font-style: italic;
}
;

/* ******************* Basic container and layout */

DIV {  /*let Firefox stick to the padding web standards*/
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        margin:0;
        padding:0;}

html,body {
	//width: 100%;
    height:100%;
    padding:0px;
    margin:0px;
	overflow-x:hidden;
	overflow-y: initial;
}

body {
	background-color: #020F26;
}

	@-webkit-keyframes animatedBackground {
	from { background-position: 10000% 0; }
	to { background-position: 0 0; }
	}
   
	@keyframes animatedBackground {
	from { background-position: 10000% 0; }
	to { background-position: 0 0; }
	}
	
	@-moz-keyframes animatedBackground{
	from { background-position: 10000% 0; }
	to { background-position: 0 0; }
	}

#header{
	width: 100%;
	height:251px;
	position:relative;
	float:left;
	display:table;

	background-image: url('../images/headercloudimg.png');
	background-position: 0px 0px;
	background-repeat: repeat-x;
	background-color:##000e2b;

}

@media screen and (min-width: 800px) and (max-width: 1000px) 
	{
		#header {
	animation: animatedBackground 6000s linear infinite;
	}
	}
	
	@media screen and (min-width: 1001px) and (max-width: 1200px) 
	{
		#header {
	animation: animatedBackground 5500s linear infinite;
	}
	}
	
	@media screen and (min-width: 1201px) and (max-width: 1400px) 
	{
		#header {
	animation: animatedBackground 3000s linear infinite;
	}
	}
	
	@media screen and (min-width: 1401px) 
	{
		#header {
	animation: animatedBackground 4000s linear infinite;
	}
	}

#centremenu{
	display:inline-block;
	text-align: center;
}

#topmenu{
	width:100%;
	display:table;
	background-color: #001238;
	text-align: center;
    background: -webkit-linear-gradient(#001238, #001d59); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#001238, #001d59); /* For Opera 11.3 to 12.0 */
    background: -moz-linear-gradient(#001238, #001d59); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#001238, #001d59); /* Standard syntax */
    float:left;
	position:relative;
	z-index: 2;
	}

#topsocial{
	position:relative;
	float:right;
	display:table;
	margin-top:200px;
	margin-right:20px;
}


#mainContent{
	width: 100%;
	background-color: #fff;
	color:#4a4a4a;
	font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
	position:relative;
	float:left;
	display:table;
}

#pageContent{
	width: 100%;
	background-color: #fff;
	color:#4a4a4a;
	font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
	position:relative;
	float:left;
	display:table;
	padding-left:10px;
	padding-right:10px;
}

#footer{
	width: 100%;
	color:#ffffff;
	font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
	position:relative;
	//float:left;
	display:inline-block;
	//background: #2b1c00 url('../images/footerbg.png') no-repeat right top;
	//padding:30px;
	background-color:#2b1c00;
}

#footersharing{
	width: 100%;
	color:#999;
	font: 22px Garamond, Garamond, Georgia, Arial, Helvetica;
	position:relative;
	display:inline-block;
	padding-left:10px;
	padding-right:10px;
	background-color:#F6F6F6;
	text-align:center;
}

.sharingicon {display: inline-block;}

#bookstrip{
	width: 100%;
	border-top: 2px solid #2b1c00;
	border-bottom: 2px solid #2b1c00;
	color:#000e2b;
	font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
	text-align: center;
	display:inline-block;
	background: #2b1c00 url('../images/bookstripbg.jpg') repeat-x;
	
}

#shortbookstrip{
	width: 100%;
	border-top: 2px solid #2b1c00;
	border-bottom: 2px solid #2b1c00;
	color:#000e2b;
	font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
	text-align: center;
	display:inline-block;
	background: #2b1c00 url('../images/shortbookstripbg.jpg') repeat-x;
}

#seriesbookstrip{
	width: 100%;
	border-top: 2px solid #2b1c00;
	border-bottom: 2px solid #2b1c00;
	color:#000e2b;
	font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
	text-align: center;
	display:inline-block;
	background: #2b1c00 url('../images/seriesbookstripbg.jpg') repeat-x;
}

.bookcontainer{
	width: 550px;
	min-height: 380px;
	color:#000e2b;
	font: 20px 'gara', Garamond, Georgia, Arial, Helvetica;
	display: inline-block; 
	text-align: left;
	background:rgba(255,255,255,0.8);
	padding:4px;
	padding-top:5px;
	margin:5px;
	border:1px solid #2b1c00;
	border-radius: 25px;
}

.book p{
	font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
	padding:0px;
	margin:0px;
}

.book h4{
	background-color:#2b1c00;
	color:#ffffff;
	font: 25px Garamond, Arial, Helvetica;
	padding:0px;
	margin:0px;
}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}


/* ******************* General Formatting */

a img {border: none;} 
table {border: none;}
form {color:#464646;font-family:Garamond, Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:12px;text-decoration:none;margin-left: 5px;}
img, video, canvas {
  max-width: 100%;
}

* {
    outline: none;
}

/* ******************* General links */

a:link {color:#0070b1;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}     
a:visited {color:#0070b1;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;} 
a:hover {color:#009af3;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}  
a:active {color:#009af3;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}

h1.bookheader {
	color: #bf4800;;
	font-size: 2.2em;
	font: 'gara', Garamond, Georgia, Arial, Helvetica;
}

a.bookheaderlink:link {color:#bf4800;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:2.2em;text-decoration:none;font-weight: bold;}     
a.bookheaderlink:visited {color:#bf4800;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:2.2em;text-decoration:none;font-weight: bold;} 
a.bookheaderlink:hover {color:#eb6615;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:2.2em;text-decoration:none;font-weight: bold;}  
a.bookheaderlink:active {color:#eb6615;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:2.2em;text-decoration:none;font-weight: bold;}

/* *********************************************************************************************************************************** Review Stars */

.wrapper {
  display: inline-block;
  cursor: pointer;
}
.wrapper * {
  float: right;
}
input.starradio {
  display: none;
}
label {
  font-size: 20px;
}

input:checked ~ label {
  color: #edae00;
}

/*
label:hover,
label:hover ~ label {
  color: red;
}
*/
/*
input:checked ~ label:hover,
input:checked ~ label:hover ~ label {
  color: lime !important;
}
*/

/* *********************************************************************************************************************************** Contact Forms */


.contactfield {
width: 100%;
float:left;
padding-bottom:5px;
color: #4a4a4a;
font: 20px 'prox', Arial, Helvetica;
padding: 3px;
}


.contactfield input {
    width: 300px;
    color: #4a4a4a;
    font: 20px 'prox', Arial, Helvetica;
    border: 1px solid #4a4a4a;
    border-radius: 3px 3px 3px 3px;
}

.contactfield textarea {
    width: 300px;
    height: 200px;
    color: #4a4a4a;
    font: 20px 'prox', Arial, Helvetica;
    border: 1px solid #4a4a4a;
    border-radius: 3px 3px 3px 3px;
    margin-bottom: 3px;
}

.contactlabel{
width: 200px;
float:left;
}


.contactfield select {
    width: 300px;
    color: #4a4a4a;
    font: 20px 'prox', Arial, Helvetica;
    border: 1px solid #4a4a4a;
    border-radius: 3px 3px 3px 3px;
}

.contactfield checkbox {
    width: 200px;
    color: #4a4a4a;
    font: 20px 'prox', Arial, Helvetica;
    border: 1px solid #4a4a4a;
    border-radius: 3px 3px 3px 3px;
	float:left;
}

.modal-content{text-align:left;}

/* ************************************************************************************************************************************* Book animations */


.bookcaption {
	float: right;
	position: relative;
    display: inline-block;
    width: 300px;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

a.btn:link {color:#462c00;text-decoration:none;}     
a.btn:visited {color:#462c00;text-decoration:none;} 
a.btn:hover {color:#6a0000;text-decoration:none;border-color: #66afe9;text-shadow: 0 0 12px rgba(255,255,255, 0.6);-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;transition: all 0.3s linear;}  
a.btn:active {color:#6a0000;text-decoration:none;border-color: #66afe9;text-shadow: 0 0 12px rgba(255,255,255, 0.6);-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linears;transition: all 0.3s linear;}

.btn {
	display: inline-block;
	margin-top: 30px;
	font-family: Garamond !important; 
	font-size: 0.7em;
	font-weight: 100;
	text-align: center;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
	margin-left:40px;
}

.btn:hover {
	border-color: #16a085;
	color: #16a085;
}

/*
	1. container
*/

.book {
	position: relative;
	width: 200px; 
	height: 300px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	display: inline-block;
	margin-right:5px;
}

.bookreplacement {
	position: relative;
	width: 200px; 
	height: 300px;
	display: inline-block;
	margin-right:5px;
	display:none;
}

/*
	2. background & color
*/

/* HARDCOVER FRONT */
.hardcover_front li:first-child {
	background-color: #eee;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* reverse */
.hardcover_front li:last-child {
	// background: #814900;
	 background-image: url("../images/insidefrontcover.jpg");
}

/* HARDCOVER BACK */
.hardcover_back li:first-child {
	background: #fffbec;
	background-image: url("../images/insidebackcover.jpg");
}

/* reverse */
.hardcover_back li:last-child {
	background: #814900;
	background-image: url("../images/insidebackcover.jpg");
}

.book_spine li:first-child {
	background: #814900;
}
.book_spine li:last-child {
	background: #814900;
}

/* thickness of cover */

.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
	background: #999;
}

/* page */

.page > li {
	background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
	border-radius: 0px 5px 5px 0px;
	background-image: url("../images/innerpage.jpg");
}

/*
	3. opening cover, back cover and pages
*/

.hardcover_front {
	-webkit-transform: rotateY(-34deg) translateZ(8px);
	-moz-transform: rotateY(-34deg) translateZ(8px);
	transform: rotateY(-34deg) translateZ(8px);
	z-index: 100;
}

.hardcover_back {
	-webkit-transform: rotateY(-15deg) translateZ(-8px);
	-moz-transform: rotateY(-15deg) translateZ(-8px);
	transform: rotateY(-15deg) translateZ(-8px);
}

.page li:nth-child(1) {
	-webkit-transform: rotateY(-28deg);
	-moz-transform: rotateY(-28deg);
	transform: rotateY(-28deg);
}

.page li:nth-child(2) {
	-webkit-transform: rotateY(-30deg);
	-moz-transform: rotateY(-30deg);
	transform: rotateY(-30deg);
}

.page li:nth-child(3) {
	-webkit-transform: rotateY(-32deg);
	-moz-transform: rotateY(-32deg);
	transform: rotateY(-32deg);
}

.page li:nth-child(4) {
	-webkit-transform: rotateY(-34deg);
	-moz-transform: rotateY(-34deg);
	transform: rotateY(-34deg);
}

.page li:nth-child(5) {
	-webkit-transform: rotateY(-36deg);
	-moz-transform: rotateY(-36deg);
	transform: rotateY(-36deg);
}

/*
	4. position, transform & transition
*/

.hardcover_front,
.hardcover_back,
.book_spine,
.hardcover_front li,
.hardcover_back li,
.book_spine li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.hardcover_front,
.hardcover_back {
	-webkit-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
}

.hardcover_front {
	-webkit-transition: all 0.8s ease, z-index 0.6s;
	-moz-transition: all 0.8s ease, z-index 0.6s;
	transition: all 0.8s ease, z-index 0.6s;
}

/* HARDCOVER front */
.hardcover_front li:first-child {
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-transform: translateZ(2px);
	-moz-transform: translateZ(2px);
	transform: translateZ(2px);
}

.hardcover_front li:last-child {
	-webkit-transform: rotateY(180deg) translateZ(2px);
	-moz-transform: rotateY(180deg) translateZ(2px);
	transform: rotateY(180deg) translateZ(2px);
}

/* HARDCOVER back */
.hardcover_back li:first-child {
	-webkit-transform: translateZ(2px);
	-moz-transform: translateZ(2px);
	transform: translateZ(2px);
}

.hardcover_back li:last-child {
	-webkit-transform: translateZ(-2px);
	-moz-transform: translateZ(-2px);
	transform: translateZ(-2px);
}

/* thickness of cover */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
	position: absolute;
	top: 0;
	left: 0;
}

/* HARDCOVER front */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before {
	width: 4px;
	height: 100%;
}

.hardcover_front li:first-child:after {
	-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.hardcover_front li:first-child:before {
	-webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before {
	width: 4px;
	height: 160px;
}

.hardcover_front li:last-child:after {
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
}
.hardcover_front li:last-child:before {
	box-shadow: 0px 0px 30px 5px #333;
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
}

/* thickness of cover */

.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before {
	width: 4px;
	height: 100%;
}

.hardcover_back li:first-child:after {
	-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}
.hardcover_back li:first-child:before {
	-webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before {
	width: 4px;
	height: 160px;
}

.hardcover_back li:last-child:after {
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
}

.hardcover_back li:last-child:before {
	box-shadow: 10px -1px 80px 20px #666;
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
}

/* BOOK SPINE */
.book_spine {
	-webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
	-moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
	transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
	width: 16px;
	z-index: 0;
}

.book_spine li:first-child {
	-webkit-transform: translateZ(2px);
	-moz-transform: translateZ(2px);
	transform: translateZ(2px);
}

.book_spine li:last-child {
	-webkit-transform: translateZ(-2px);
	-moz-transform: translateZ(-2px);
	transform: translateZ(-2px);
}

/* thickness of book spine */
.book_spine li:first-child:after,
.book_spine li:first-child:before {
	width: 4px;
	height: 100%;
}

.book_spine li:first-child:after {
	-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.book_spine li:first-child:before {
	-webkit-transform: rotateY(-90deg) translateZ(-12px);
	-moz-transform: rotateY(-90deg) translateZ(-12px);
	transform: rotateY(-90deg) translateZ(-12px);
}

.book_spine li:last-child:after,
.book_spine li:last-child:before {
	width: 4px;
	height: 16px;
}

.book_spine li:last-child:after {
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
}

.book_spine li:last-child:before {
	box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
}

.page,
.page > li {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.page {
	width: 100%;
	height: 98%;
	top: 1%;
	left: 3%;
	z-index: 10;
}

.page > li {
	width: 100%;
	height: 100%;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	transform-origin: left center;
	-webkit-transition-property: transform;
	-moz-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	transition-timing-function: ease;
}

.page > li:nth-child(1) {
	-webkit-transition-duration: 0.6s;
	-moz-transition-duration: 0.6s;
	transition-duration: 0.6s;
}

.page > li:nth-child(2) {
	-webkit-transition-duration: 0.6s;
	-moz-transition-duration: 0.6s;
	transition-duration: 0.6s;
}

.page > li:nth-child(3) {
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.page > li:nth-child(4) {
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.page > li:nth-child(5) {
	-webkit-transition-duration: 0.6s;
	-moz-transition-duration: 0.6s;
	transition-duration: 0.6s;
}

/*
	5. events
*/

.book:hover > .hardcover_front {
	-webkit-transform: rotateY(-145deg) translateZ(0);
	-moz-transform: rotateY(-145deg) translateZ(0);
	transform: rotateY(-145deg) translateZ(0);
	z-index: 0;
}

.book:hover > .page li:nth-child(1) {
	-webkit-transform: rotateY(-30deg);
	-moz-transform: rotateY(-30deg);
	transform: rotateY(-30deg);
	-webkit-transition-duration: 1.5s;
	-moz-transition-duration: 1.5s;
	transition-duration: 1.5s;
}

.book:hover > .page li:nth-child(2) {
	-webkit-transform: rotateY(-35deg);
	-moz-transform: rotateY(-35deg);
	transform: rotateY(-35deg);
	-webkit-transition-duration: 1.8s;
	-moz-transition-duration: 1.8s;
	transition-duration: 1.8s;
}

.book:hover > .page li:nth-child(3) {
	-webkit-transform: rotateY(-118deg);
	-moz-transform: rotateY(-118deg);
	transform: rotateY(-118deg);
	-webkit-transition-duration: 1.6s;
	-moz-transition-duration: 1.6s;
	transition-duration: 1.6s;
}

.book:hover > .page li:nth-child(4) {
	-webkit-transform: rotateY(-130deg);
	-moz-transform: rotateY(-130deg);
	transform: rotateY(-130deg);
	-webkit-transition-duration: 1.4s;
	-moz-transition-duration: 1.4s;
	transition-duration: 1.4s;
}

.book:hover > .page li:nth-child(5) {
	-webkit-transform: rotateY(-140deg);
	-moz-transform: rotateY(-140deg);
	transform: rotateY(-140deg);
	-webkit-transition-duration: 1.2s;
	-moz-transition-duration: 1.2s;
	transition-duration: 1.2s;
}

/*
	6. Bonus
*/

/* cover CSS */

.coverDesign {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.coverDesign::after {
	background-image: -webkit-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
	background-image: -moz-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
	background-image: linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.coverDesign h1 {
	color: #fff;
	font-size: 2.2em;
	letter-spacing: 0.05em;
	text-align: center;
	margin: 54% 0 0 0;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}

.coverDesign p {
	color: #f8f8f8;
	font-size: 1em;
	text-align: center;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}

.yellow {
	background-color: #f1c40f;
	background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
	background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
	background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
}

.blue {
	background-color: #3498db;
	background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%);
	background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%);
	background-image: linear-gradient(top, #3498db 58%, #2a90d4 0%);
}

.grey {
	background-color: #f8e9d1;
	background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
	background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
	background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
}

/* Basic ribbon */

.ribbon {
	background: #c0392b;
	color: #fff;
	display: block;
	font-size: 0.7em;
	position: absolute;
	top: 11px;
	right: 1px;
	width: 40px;
	height: 20px;
	line-height: 20px;
	letter-spacing: 0.15em; 
	text-align: center;
	-webkit-transform: rotateZ(45deg) translateZ(1px);
	-moz-transform: rotateZ(45deg) translateZ(1px);
	transform: rotateZ(45deg) translateZ(1px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 10;
}

.ribbon::before,
.ribbon::after{
	position: absolute;
	top: -20px;
	width: 0;
	height: 0;
	border-bottom: 20px solid #c0392b;
	border-top: 20px solid transparent;
}

.ribbon::before{
	left: -20px;
	border-left: 20px solid transparent;
}

.ribbon::after{
	right: -20px;
	border-right: 20px solid transparent;
}


/* ******************* Footer */

#footer a:link {color:#ffffff;font-family:Garamond, Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}     
#footer a:visited {color:#ffffff;font-family:Garamond, Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;} 
#footer a:hover {color:#ffba00;font-family:Garamond, Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}  
#footer a:active {color:#ffba00;font-family:Garamond, Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}

/* ******************* Menu */

#menu, #menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu {
	margin: 0px auto;
	border: 0px;
	
}

#menu:before,
#menu:after {
	content: "";
	display: table;
}

#menu:after {
	clear: both;
}

#menu {
	zoom:1;
}

#menu li {
	float: left;
	position: relative;
}

#menu a {
	float: left;
	padding: 8px 10px;
	color: #ffffff;
	font: 23px Garamond, Arial, Helvetica;
	text-decoration: none;

}

#menu li:hover > a {
	color: #ffba00;
	background-color: #001238;
	background-image: linear-gradient(#001238, #002a82);
}

*html #menu li a:hover { /* IE6 only */
	color: #fafafa;
}

#menu ul {
	margin: 20px 0 0 0;
	_margin: 0; /*IE6 only*/
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 38px;
	left: 0;
	z-index: 1;    
	background: #fff;	
	box-shadow: 0 -1px 0 rgba(255,255,255,.3);	
	border-radius: 3px;
	transition: all .2s ease-in-out;  
}

#menu li:hover > ul {
	opacity: 1;
	visibility: visible;
	margin: 0;
}

#menu ul ul {
	top: 0;
	left: 150px;
	margin: 0 0 0 20px;
	_margin: 0; /*IE6 only*/
	box-shadow: -1px 0 0 rgba(255,255,255,.3);		
}

#menu ul li {
	float: left;
	text-align:left;
	width:100%;
	display: block;
	border: 0;
	_line-height: 0; /*IE6 only*/
}

#menu ul li:last-child {   
	box-shadow: none;    
}

#menu ul a {    
	padding: 10px;
	_height: 10px; /*IE6 only*/
	display: block;
	white-space: nowrap;
	float: none;
	text-transform: none;
	color: #3e3e3e;
	font: 23px Garamond, Arial, Helvetica;
	background-color: #f8f8f8;
}

#menu ul a:hover {
	background-color: #0186ba;
	background-image: linear-gradient(#001238, #002a82);
}

#menu ul li:first-child > a {
	border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
	content: '';
	position: absolute;
	left: 40px;
	top: -6px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #fff;
}

#menu ul ul li:first-child a:after {
	left: -6px;
	top: 50%;
	margin-top: -6px;
	border-left: 0;	
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;
	border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
	border-bottom-color: #3b3b3b; 
}

#menu ul ul li:first-child a:hover:after {
	border-right-color: #3b3b3b; 
	border-bottom-color: transparent; 	
}

#menu ul li:last-child > a {
	border-radius: 0 0 3px 3px;
}

/* ******************* Login Page */

#loginc {
	width: 30%;
	max-width:350px;
	margin: 0px auto;
	background-color: #f7f7f7;
	color:#4a4a4a;
	font: 16px 'gara', Garamond, Georgia, Arial, Helvetica;
	height:100%;
	position:relative;
	display:table;
}

.updown {
	width: 40px;
	height: 30px;
	padding: 2px;
	float: left;
}

.loginp{
	width: 250px;
	border:1px solid #4a4a4a;
	border-radius: 3px 3px 3px 3px;
	margin-bottom: 3px;
}
.loginf{
	width: 250px;
	border:1px solid #4a4a4a;
	border-radius: 3px 3px 3px 3px;
	font: 18px 'gara', Garamond, Georgia, Arial, Helvetica;
}
	
.loginbutton{
	color: white;
           border-radius: 6px;
           text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
           background: #0093e8;
           border:1px solid #002e49;
           width: 150px;
           height:30px;
           font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
           padding-bottom: 5px;
}


.joinbutton{
	color: white;
           border-radius: 4px;
           text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
           background: #0093e8;
           border:1px solid #002e49;
           width: 130px;
           height:24px;
           font: 15px 'gara', Garamond, Georgia, Arial, Helvetica;
           padding-bottom: 5px;
}


/* ******************* Control Panel */

#adminheader{
	width: 100%;
	background-color: #f7f7f7;
	background-image: url("../images/cplogo.png");
	background-repeat: no-repeat;
	background-position: right;
	color:#4a4a4a;
	font: 20px 'gara', Garamond, Georgia, Arial, Helvetica;
	height:141px;
	position:relative;
	float: left;
	padding-left:50px;
	border-bottom:1px #dedede solid;
}

.admincontrol{
	background-color: #f7f7f7;
	width: 130px;
	color:#4a4a4a;
	font: 20px 'gara', Garamond, Georgia, Arial, Helvetica;
	height:140px;
	position:relative;
	float: left;
}

.pagecontrol{
	width: 50%;
	min-width:800px;
	background-color: #ffffff;
	color:#4a4a4a;
	font: 20px 'gara', Garamond, Georgia, Arial, Helvetica;
	height:141px;
	display:table;
	float: left;
	padding-left:50px;
}

.othercontrols{
	background-color: #ffffff;
	color:#4a4a4a;
	font: 20px 'gara', Garamond, Georgia, Arial, Helvetica;
	height:140px;
	position:relative;
	float: left;
	padding-left:10px;
	padding-right:10px;
}

.tablecellpadding{
	padding:5px;
}


	
.admincontrol a:link {color:#4a4a4a;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}     
.admincontrol a:visited {color:#4a4a4a;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;} 
.admincontrol a:hover {color:#000000;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}  
.admincontrol a:active {color:#000000;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}

.othercontrols a:link {color:#4a4a4a;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}     
.othercontrols a:visited {color:#4a4a4a;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;} 
.othercontrols a:hover {color:#000000;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}  
.othercontrols a:active {color:#000000;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}

.pagecontrol a:link {color:#009af3;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}     
.pagecontrol a:visited {color:#009af3;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;} 
.pagecontrol a:hover {color:#000000;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}  
.pagecontrol a:active {color:#000000;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}

.newsfeed a:link {color:#343434;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:1em;text-decoration:none;}     
.newsfeed a:visited {color:#343434;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:1em;text-decoration:none;} 
.newsfeed a:hover {color:#0087d5;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:1em;text-decoration:none;}  
.newsfeed a:active {color:#0087d5;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:1em;text-decoration:none;}

.pagecontrol li {background-color: #ffffff;
	color:#4a4a4a;
	font: 20px 'gara', Garamond, Georgia, Arial, Helvetica;
	list-style-type: none;
	}
	
	.pagecontrol ul {background-color: #ffffff;
	color:#4a4a4a;
	font: 20px 'gara', Garamond, Georgia, Arial, Helvetica;
	list-style-type: none;
	}

h3{
color:#ffba00;
padding: 10px;
margin-bottom:5px;
margin-left:-10px;
margin-right:-10px;
font: 1.3em Garamond, Arial, Helvetica;
background: #00133a url('../images/titleright.png') no-repeat right;
display:inline block;
margin-top:1px;
}


#content2 {
	//width: 100%;
	background-color: #fff;
	color:#4a4a4a;
	font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
	position:relative;
	float:left;
	display:table;
	padding-left:10px;
	padding-right:10px;}
#content3 {
	//width: 100%;
	background-color: #fff;
	color:#4a4a4a;
	font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
	position:relative;
	float:left;
	display:table;
	padding-left:10px;
	padding-right:10px;}
	
@media screen and (min-width: 800px) and (max-width: 915px) {
	#topsocial{
	margin-top:-25px;
}
}


@media screen and (min-width: 600px) and (max-width: 799px) {
.bookcaption {
    width: 50%;
}
}

@media screen and (min-width: 1px) and (max-width: 599px) {
.bookcaption {
    width: 100%;
}
}



	
/* ******************************************************************************************************************************************************** Phone menu and layout */

#phonedisp {display: none;}
#undermenu {display: none;}
#phonefooter {display: none;}

@media screen and (min-width: 1px) and (max-width: 799px) {
	
	


html, body {
		//width: 100%;
		background: #020F26;
		padding: 0px;
		margin: 0px;
		color: #000;
		margin: 0;
		//display: table;
		font-size: 100%;
		}
img, video, canvas {
  max-width: 100%;
  height: auto;
}

#phonedisp {
	display: block;
	color:#4a4a4a;
	font: 3em 'basicSansHeavy', Arial, Helvetica;
	
	width: 100%;
	height:251px;
	position:relative;
	float:none;
	display:table;

	background-image: url('../images/headercloudimg.png');
	background-position: 0px 0px;
	background-repeat: repeat-x;
	background-color:##000e2b;
}

#phonedisp {

    animation: animatedBackground 5000s linear infinite;

}

.bookcontainer{
	width: 85%;
	min-height: 380px;
	color:#000e2b;
	font: 20px 'gara', Garamond, Georgia, Arial, Helvetica;
	display: inline-block; 
	text-align: left;
	background:rgba(255,255,255,0.8);
	padding:15px;
	padding-top:5px;
	margin:5px;
	border:1px solid #2b1c00;
	border-radius: 25px;
}


.contactfield {
width: 100%;
float:left;
padding-bottom:5px;
color: #4a4a4a;
font: 20px 'prox', Arial, Helvetica;
padding: 3px;
}


.contactfield input {
    width: 150px;
    color: #4a4a4a;
    font: 20px 'prox', Arial, Helvetica;
    border: 1px solid #4a4a4a;
    border-radius: 3px 3px 3px 3px;
}

.contactfield textarea {
    width: 150px;
    height: 200px;
    color: #4a4a4a;
    font: 20px 'prox', Arial, Helvetica;
    border: 1px solid #4a4a4a;
    border-radius: 3px 3px 3px 3px;
    margin-bottom: 3px;
}

.contactlabel{
width: 100px;
float:left;
}


.contactfield select {
    width: 150px;
    color: #4a4a4a;
    font: 20px 'prox', Arial, Helvetica;
    border: 1px solid #4a4a4a;
    border-radius: 3px 3px 3px 3px;
}

.contactfield checkbox {
    width: 150px;
    color: #4a4a4a;
    font: 20px 'prox', Arial, Helvetica;
    border: 1px solid #4a4a4a;
    border-radius: 3px 3px 3px 3px;
	float:left;
}

.controlpanelform form {
	color:#4a4a4a;
	font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
}

.joinform {
	color:#ffffff;
	font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
}

.controlpanelform table {
		color:#4a4a4a;
	font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
	}
	
.controlpanelform input {
	width: 150px;
	color:#4a4a4a;
	font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
	}
	
.controlpanelform submit {
		color:#ffffff;
	}
	
.controlpanelform textarea {
	width: 150px;
	height: 200px;
	color:#4a4a4a;
	font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
	border:1px solid #4a4a4a;
	border-radius: 3px 3px 3px 3px;
	margin-bottom: 3px;
	}
	


#mainContent{
	background-color: #fff;
	color:#4a4a4a;
	font: 16px 'gara', Garamond, Georgia, Arial, Helvetica;
	position:relative;
	float:left;
}

#pageContent{
	background-color: #fff;
	color:#4a4a4a;
	font: 16px 'gara', Garamond, Georgia, Arial, Helvetica;
	position:relative;
	float:left;
	padding-left:2px;
	padding-right:2px;
	width: 100%;
}

#content2 {
	//width: 100%;
	background-color: #fff;
	color:#4a4a4a;
	font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
	position:relative;
	float:left;
	display:table;
	padding-left:5px;
	padding-right:5px;}
#content3 {
	//width: 100%;
	background-color: #fff;
	color:#4a4a4a;
	font: 22px 'gara', Garamond, Georgia, Arial, Helvetica;
	position:relative;
	float:left;
	display:table;
	padding-left:10px;
	padding-right:10px;}

h3{
color:#ffba00;
padding: 10px;
margin-bottom:5px;
margin-left:-10px;
margin-right:-10px;
font: 25px Garamond, Arial, Helvetica;
background: #00133a url('../images/titleright.png') no-repeat right;
display:inline block;
margin-top:1px;
}

#content2 { font: 16px 'gara', Garamond, Georgia, Arial, Helvetica #4a4a4a;}
#content3 { font: 16px 'gara', Garamond, Georgia, Arial, Helvetica #4a4a4a;}


/* ******************* General links */

a:link {color:#00659f;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}     
a:visited {color:#00659f;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;} 
a:hover {color:#0087d5;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}  
a:active {color:#0087d5;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}


a.mobile:link {color:#fff;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}     
a.mobile:visited {color:#fff;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;} 
a.mobile:hover {color:#0087d5;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}  
a.mobile:active {color:#0087d5;font-family:'gara', Garamond, Georgia, Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;}

p {font-size:18px;}

#phonefooter {
	//width: 100%;
	color:#ffffff;
	font: 1em 'gara', Garamond, Georgia, Arial, Helvetica;
	//position:relative;
	//float:left;
	display:block;
	background: #3c3c3c ;
	padding:4px;
	text-align: center;
}

#header {display: none;}
#topmenu {display: none;}
#menu {display: none;}
#newsslider {display: none;}
#footer {display: none;}

.phonemenu a:link {color:#ec5b00;font-family:Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;margin:18px;font-weight:bold;}     
.phonemenu a:visited {color:#ec5b00;font-family:Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;margin:18px;font-weight:bold;} 
.phonemenu a:hover {color:#ec5b00;font-family:Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;margin:18px;font-weight:bold;}  
.phonemenu a:active {color:#ec5b00;font-family:Arial, Helvetica, sans-serif; font-size:22px;text-decoration:none;margin:18px;font-weight:bold;} 

li.orange
{
	list-style-type: none; 
	font: 15px 'gara', Garamond, Georgia, Arial, Helvetica;
}

.loginp{
	width: 50px;
	border:1px solid #4a4a4a;
	border-radius: 3px 3px 3px 3px;
	margin-bottom: 3px;
}
}

a {
    -webkit-transition: color 0.4s;
    -moz-transition:    color 0.4s;
    -ms-transition:     color 0.4s;
    -o-transition:      color 0.4s;
    transition:         color 0.4s;
}