/*Global*/
body, html {
    height: 100%;
	width:100%;
	margin:0px;
	padding:0px;
	color:white;
	background-color:#1F234F;}
pre {
	white-space:pre-wrap;
	white-space:-moz-pre-wrap;
	white-space:-pre-wrap;
	white-space:-o-pre-wrap;
	word-wrap:break-word;}
h1 {
	font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	font-size:70px;
	line-height:71px;}
h2 {
	font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
	font-size: 30px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 32px;}
h3 {
	font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
	font-size: 26px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 28px;}
h4 {
	font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	font-size:25px;
	line-height:26px;}
h6 {
	font-size:30px;
	line-height:31px;}

p {
	font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	font-size:25px;
	line-height:26px;}
a {
	font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	font-size:25px;
	line-height:26px;
	color:#E7DF76;
	text-decoration:none;}
a:hover {
	text-decoration: underline;}
img {
	display:block;
	margin: 0 auto;}
hr {
	width:60%;
	margin-top:3%;
	margin-bottom:3%;
	border-style:solid;
	border-color:white;
	border-width: 1px;
	color:white;
}

/*Navigation*/
.navigation-container {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:20%;
	min-height:1250px;
	z-index:1;
	background-color:#1B2246;
	
}
.navigation-texture {
	background-image: url("../images/Infrastructure/hotel-wallpaper.png");
	top:0;
	left:0;
	width:20%;
	height:100%;
	position:fixed;
	z-index:2;
	opacity:.1;
}
.navigation-inner {
	padding-top:5%;
}
.navigation-inner-inner {
	padding-left:10%;
	font-size:26px;
	line-height: 27px;
	word-break: break-word;
	z-index:3;
}
.navigation-inner a {
	color:#E7DF76;
}
.navigation-inner h3 {
	color:white;
}
.social {
	padding-left:15%;
}
.social a {
	margin-right:30px;
}
#nav-pic {
	display:block;
	max-width:80%;
	margin:0 auto;
	padding:0 0;
}


/*About*/
.about-container {
	margin-left:20%;
	padding:0 5%;
}
.about-inner {
	width:100%;
	height:100%;
	display:block;
	padding:5% 0;
	margin:0;
}
#headshot {
	margin-left:70%;
	width:30%;
	border:solid;
	border-width: 10px;
	border-color:black;
	border-radius: 10px;
}
#family {
	width:50%;
}
iframe {
	padding:5% 0;
}

/*Homepage*/

.homepage-container {
	margin-left:20%;
	padding:0 2%;
}
.homepage-inner {
	width:100%;
	height:100%;
	display:block;
	margin:0;
	padding:0;
}
.homepage-blue-blood-container {
	width:100%;
	height:90vh;
	margin:0;
	padding:0;
	display:table;
	background-image: url("../images/homepage/Faust Stairs copy.jpg");
	background-repeat: no-repeat;
	background-position: bottom;
	background-size:cover;
}
.homepage-blue-blood-container img {
	display:block;
	float:right;
	width:60%;
}
.homepage-blue-blood-inner {
	clear:right;
	
	width:50%;
	display:table-cell;
	vertical-align: bottom;
	opacity:.6;
	
}
.homepage-blue-blood-inner p {
	width:90%;
	background-color:#232323;
	padding:2%;
	margin:0 auto;
	font-size:18px;
	line-height: 18px;
	text-align: center;
	animation: fadeIn ease 10s;
  	-webkit-animation: fadeIn ease 15s;
  	-moz-animation: fadeIn ease 15s;
  	-o-animation: fadeIn ease 15s;
}
.homepage-book-list-container {
	width:100%;
	margin:0;
	padding:5% 0;
}
.homepage-book-list-inner {
	display:block;
	margin:0 auto;
	text-align: center;
}
.homepage-book-list-inner img {
	height:300px;
	display:inline-block;
	margin:0;
	padding:0;
}
.homepage-book-list-inner img:hover {
	height:315px;
}
.homepage-credits {
	clear:right;
	width:100%;
	text-align:right;
	margin-top:0px;
}
/*
.homepage-top h1 {
	background-color:black;
	color:white;
	padding:1%;
	width:60%;
}
.homepage-top h3 {
	background-color:black;
	color:white;
	padding:1%;
	width:40%;
}
*/





/*Page*/
.page-container {
	margin-left:20%;
	padding:0 2%;
}
.page-inner {
	width:100%;
	height:100%;
	display:block;
	margin:0;
	padding:0;
}
.synopsis {
	display:  inline-block;
	width:60%;
	padding:0 2%;
	vertical-align: top;
}
.book-photo {
	display:inline-block;
	vertical-align: top;
	padding:0 2%;
	float:right;
	max-width:30%;
}
.book-photo img {
	max-width:100%;
}
.youtube {
	padding:5% 0;
	text-align:center;
	clear:right;
}
.page-middle {
	
}
.purchase {
	clear:right;
}
.purchase img {
	display:inline-block;
	width:20%;
	padding-left:5%;
}
.page-bottom {
	padding-top:5%;
	padding-bottom:10%;
}
#festusbook {
	width:80%;
}
#festus-page {
	background-image: url("../images/festus/Adventure Time Card Front.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	min-height:100vh;
	padding:2%;
}
#train-page {
	background-image: url("../images/train/Santa Train photo.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	min-height:100vh;
	padding:2%;
}
#trainsynopsis {
	padding:2%;
	background-color:#151515;
	opacity:.8;
}



/*Footer*/
.footer-container {
	
}
.footer-inner {
}

/*Photo Gallery*/
.gallery-container {
	display:block;
	width:100%;
	margin:0 auto;
	margin-bottom:5%;}
.gallery-inner {
	display:block;
	width:90%;
	margin:0 auto;}
.photobox {
	margin:1% 1%;
	display:flex;
	flex-flow: row wrap;
	text-align:center;
	justify-content:space-around;
	padding:0px;}
.photobox a {
	flex: 0 0 auto;margin:5px 5px;}
.photobox img {
	width:auto;
	max-height:300px;
	display:block;}

/*Lightbox*/
#xlight {
    z-index:997;
	position:fixed;
	top:0;
    width:100%;
    height:100%;
	background-color:rgba(0,0,0,.9);
    text-align:center;}
#xcontent {
	z-index:998;
	display:block;
	padding:2% 0;
	margin-left:auto;
	margin-right:auto;
	width:100%;
	height:90%;}
#xlight img {
	padding:0;
	z-index:999;
	max-width:100%;
	max-height:100%;
	border-width:10px;
	border-color:black;
	border-style:solid;}


/*Blog*/
.blog-container{
	display:block;
}
.blog-inner{
	display: block;
	width: 90%;
	margin: 0 auto;
}
.blog-inner img{
	
}
.blog-image {
	display:block;
	width:80%;
	margin:0 auto;
}
.blog-image img {
	max-width:50%;
}
#bunnypic {
	width:70%;
	transform: rotate(90deg);
}


/*Wormhole*/
.wormhole {
	display: block;
	width: 20%;
	margin-left:5%;
}
.wormhole button{
	display:block;
	width: 100%;
	margin-left:0 auto;
	background-color:#E3E3E3;
	color: black;
	padding: 16px;
	font-size: 16px;
	border: none;
}
.wormhole-content {
  	display: none;
  	position: absolute;
	width: 20%;
	background-color: #f1f1f1;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	text-align: center;
}
.wormhole-content a {
  	color: black;
  	padding: 12px 16px;
  	text-decoration: none;
  	display: block;
}
.wormhole-content a:hover {background-color: #ddd;}
.wormhole:hover .wormhole-content {display: block;}







.topnav {
	visibility:hidden;
	overflow: hidden;
	background-color: #E7DF76;
	position: relative;}

.topnav #myLinks {
	display: none;}

.topnav a {
	color:#3E3E3E;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
	display: block;}

.topnav a.icon {
	background: black;
	display: block;
	position: absolute;
	right: 0;
	top: 0;}

.topnav a:hover {
	background-color: #ddd;
	color: black;}

.active {
	background-color:#E7DF76;
	color: white;}



@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}


/*Mobile*/
@media only screen
	and (max-width:800px)
		{
			.navigation-container{visibility: hidden;}
			.topnav {visibility: visible;}
			.homepage-container {margin:2%;}
			.about-container {margin:2%;}
			.page-container {margin:2%;}
			.homepage-credits p {font-size:10px;line-height: 10px;word-break: break-all;}
			.homepage-credits a {font-size:10px;line-height: 10px;word-break: break-all;}
			a {font-size:20px;line-height:20px;word-break: break-all;}
			.navigation-inner a {font-size:20px;line-height:20px;}
			.navigation-inner h3 {font-size:22px;line-height: 22px;}
		}
@media only screen
	and (max-width:415px)
		{
			.navigation-container{visibility: hidden;}
			.topnav {visibility: visible;}
			.homepage-container {margin:2%;}
			.about-container {margin:2%;}
			.page-container {margin:2%;}
			.homepage-credits p {font-size:10px;line-height: 10px;word-break: break-all;}
			.homepage-credits a {font-size:10px;line-height: 10px;word-break: break-all;}
			a {font-size:20px;line-height:20px;word-break: break-all;}
			.navigation-inner a {font-size:20px;line-height:20px;}
			.navigation-inner h3 {font-size:22px;line-height: 22px;}
		}
@media only screen
	and (max-width:376px)
		{
			.navigation-container{visibility: hidden;}
			.topnav {visibility: visible;}
			.homepage-container {margin:2%;}
			.about-container {margin:2%;}
			.page-container {margin:2%;}
			.homepage-credits p {font-size:10px;line-height: 10px;word-break: break-all;}
			.homepage-credits a {font-size:10px;line-height: 10px;word-break: break-all;}
			a {font-size:20px;line-height:20px;word-break: break-all;}
			.navigation-inner a {font-size:20px;line-height:20px;}
			.navigation-inner h3 {font-size:22px;line-height: 22px;}
		}
@media only screen
	and (max-width:321px)
		{
			.navigation-container{visibility: hidden;}
			.topnav {visibility: visible;}
			.homepage-container {margin:2%;}
			.about-container {margin:2%;}
			.page-container {margin:2%;}
			.homepage-credits p {font-size:10px;line-height: 10px;word-break: break-all;}
			.homepage-credits a {font-size:10px;line-height: 10px;word-break: break-all;}
			a {font-size:20px;line-height:20px;word-break: break-all;}
			.navigation-inner a {font-size:20px;line-height:20px;}
			.navigation-inner h3 {font-size:22px;line-height: 22px;}
		}