@charset "utf-8";
/* CSS Document */

/* 
PoynterOSDispCond Roman
font-family: poynter-oldstyle-display-con, serif;
font-weight: 400;
font-style: normal;

PoynterOSDispCond Semibold
font-family: poynter-oldstyle-display-con, serif;
font-weight: 600;
font-style: normal;

PoynterOSDispNarrow Roman
font-family: poynter-oldstyle-display-nar, serif;
font-weight: 400;
font-style: normal;

PoynterOSDispNarrow Semibold
font-family: poynter-oldstyle-display-nar, serif;
font-weight: 600;
font-style: normal;
*/

/* Fonts */
#nav, #topbanner .join, h1, .second-quote {  } 
body { font-family: 'Montserrat', sans-serif; }
#topbanner .authorname { }
.CN { text-align: center; font-weight: bold; text-transform: uppercase; letter-spacing: 2px;}


/* General Styles */
body { padding: 0px; margin: 0px; text-align: center; color: #222; font-size: 18px; line-height: 1.6em;  }
.red-text { color: #ff3300; }
#topbanner { 
	background-color: #ff3300; position: relative; background-size: auto 92%; background-position: right bottom;
	background-image: url(images/queen-figure.png); background-repeat: no-repeat; 
}
.splatter { background-image: url(images/splatter.png); background-position: left bottom; background-repeat: no-repeat; padding: 6vh 40% 10vh 5%; }
a { text-decoration: none; }
a:hover,
a:hover img {
	-webkit-transition: 0.5s;
	-moz-transition:    0.5s;
	transition:         0.5s;
}
.hidden-anchor {
    display: block;
    position: relative;
    top: -60px;
    visibility: hidden;
 }
h2.subhead { 
	margin: 80px 0px 60px; letter-spacing: 2px;
	font-family: poynter-oldstyle-display-con, serif;
	font-weight: 600;
	font-style: normal;
	color: #000; font-size: 38px; text-transform: uppercase;
}
h2.subhead .sm {font-size: 22px; color: #ff3300;}
.callout {
	font-family: poynter-oldstyle-display-con, serif;
	font-weight: 600;
	font-style: normal;
	font-size: 39px; max-width: 860px; margin: 0px auto 70px; line-height: 1.2em;
	border: 4px double #888; padding: 20px 80px;
}
.banner-content { }
.on-sale { 
	font-weight: bold; text-transform: uppercase; font-size: 24px; letter-spacing: 4px; margin: 30px 0;
	text-align: center;
}
.tagline {
	border: 4px double #FFF; width: 610px; height: 466px; position: relative; margin: 4vh auto 0;
}
.tagline img { position: absolute; }
#fade-but { left: 30px; top: 30px; }
#fade-what { left: 125px; top: 45px; }
#fade-if { left: 415px; top: 45px; }
#fade-the { left: 100px; top: 130px; }
#fade-sword { left: 240px; top: 123px; }
#fade-has { left: 75px; top: 220px; }
#fade-chosen { left: 235px; top: 216px; }
#fade-a { left: 20px; top: 296px; }
#fade-queen { left: 125px; top: 278px; }

.title img { width: 100%; height: auto; }
.static { position: absolute; height: 4px; }
.static.left { left: 0px; }
.static.right { right: 0px; }
.static img { display: block;}

#thebook { 
	background-image: url(images/tree-bg.jpg); background-repeat: no-repeat; background-position: left bottom; 
	background-color: #fff; padding: 150px 50px 100px;
}
#the-author { 
	background-color: #ff3300; background-size: 60% auto;
	background-image: url(images/sword-sm.png); background-position: right bottom; background-repeat: no-repeat;
}

#the-series {
	background-color: #071013; background-size: auto 100%;
	background-image: url(images/netflix-background-teal.jpg); background-position: right top; background-repeat: no-repeat;
}
.netflix-logo {width: 80%; height: auto; }
.series-left { width: 60%; text-align: left;  }
a.moreinfo { 
    color: #FFF;
    border-radius: 4px;
    background-color: #e50914;
    display: block;
    margin: 20px 0;
    width: 150px;
    padding: 14px 0;
    text-align: center;
    font-size: 17px;
    line-height: 1.3em;
}
a.moreinfo:hover { background-color: #921610; }

.one-box { font-weight: bold; color: #FFF; display: inline-block; vertical-align: top; width: 48%; margin-right: 1%;  }
.one-box a { 
	color: #FFF; border-radius: 4px; background-color: #ff3300; display: block; margin: 20px auto; width: 100%; padding: 14px 0; text-align: center; 
	font-size: 17px; line-height: 1.3em;
}
.one-box a:hover { background-color: #921610; }

.left-book .lined {font-weight: bold; color: #FFF;}
.bigger { font-size: 18px; text-transform: uppercase; color: #ffd1d1; margin: 0 auto; }
.first .lined {background-image: url(images/sword-circle.png);   }
.second { }
.left-book .lined img { display: block; margin: 10px auto; width: 50%; height: auto;  }
.third .lined {background-image: url(images/tree-circle.png);   }
.lined {
	margin: -30px auto 30px; padding: 45px 0 0 0; height: 155px; width: 200px; border-radius: 50%; background-color: #000;
	background-repeat: no-repeat; background-position: center bottom; z-index: 99; position: relative; 
}
.third .lined { padding: 65px 0 0 0; height: 135px;}
.left-book p { font-weight: bold; font-size: 25px; letter-spacing: 3px; text-transform: uppercase; }

#the-author { }

.author-left, .illustrator-right { 
	width: 100%; max-width: 900px; margin: 0 auto; padding: 150px 0 10px;
}
.author-left {padding: 150px 0  }
#the-illustrator { background-color: #000;}

h1 { 
	font-size: 36px; color: #FFF; text-transform: uppercase; 
	font-family: poynter-oldstyle-display-con, serif;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 2px;
}
h2 { color: #ff3300; font-size: 21px; margin: 0;}
h1 .smaller { font-size: 24px;}
#inline_content h1 { color: #ff3300; }

#thebook h1 { color: #64367f; margin: 0px 0px 20px; line-height: .9em; } 
.second-quote {color: #3b56a1; font-size: 30px; margin: 0 5% 60px; line-height: 1.3em; }
h1 .attribute, .second-quote .attribute {font-family: 'Mukta', sans-serif; color: #666; font-size: 22px; margin-top: 10px;}

#buy-book { }
.buy-bar { 
	background-color: #EEE; text-align: center; padding: 150px 0 70px;
}
.buy-bar h1 { color: #000; }
.purchase img { opacity: .4; height: 57px; width: auto; }
.purchase img:hover { opacity: 1.0; }
h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 2px; margin: 0px 0 -10px; color: #ff3300;  }
.thelinks { 
	font-family: poynter-oldstyle-display-nar, serif;
	font-weight: 400;
	font-style: normal;
}
.thelinks a { display: inline-block; padding: 2px 5px; color: #333; font-weight: normal; font-size: 17px; letter-spacing: 0px; margin: 0 10px 20px; }
.thelinks a:hover {color: #ff3300;  }

#nav { background-color: #000; background-position: center top; width: 100%; position: relative; z-index: 999; }
#mobile-toggle { display: none; }
#nav-items a {
	color: #FFF; display: inline-block; padding: 18px 18px 24px; font-size: 24px; text-transform: uppercase; letter-spacing: 2px;
	font-family: poynter-oldstyle-display-con, serif;
	font-weight: 600;
	font-style: normal;
	line-height: .95em;
}
#nav-items a .hide-m { font-size: 14px; color: #ff3300; display: block; }
#nav-items a:hover { 
	background-color: #ff3300; color: #000;
}
#nav-items a:hover .hide-m { color: #000; }
#cursed-nav {display: none;}
#nav.fixed { position: fixed; top: 0px; left: 0px; z-index: 100; box-shadow: 0px 0px 10px #000; height: 85px; }
#nav.fixed #cursed-nav { display: inline-block; }
#nav.fixed #cursed-nav img { position: relative; top: 20px; }
#nav.fixed #nav-items { display: inline-block; position: relative; top: -40px; margin-left: 10%;} 

.content { width: 94%; margin: 0 auto; max-width: 1200px;}

.left-book { width: 40%; display: inline-block; vertical-align: top; margin-right: 3%; }
.right-text { width: 50%; display: inline-block; vertical-align: top; text-align: left; margin-right: 6%;}
#the-author .right-text { color: #FFF; }
.left-book img {width: 100%; max-width: 600px; height: auto;}

.left-photo { float: left; margin: 0 60px 60px 0; }
.right-bio { margin: 30px auto; text-align: left; padding-left: 35%}
.right-bio, .author-left h1, .author-left p.credit { color: #000; }

.author-left .headshot { border: 4px double #f59797; }
.illustrator-right .headshot { border: 4px double #666; }
.illustrator-right a { color: #ff3300; }
.illustrator-right a:hover { color: #BBB; }
.illustrator-right .right-bio { color: #FFF; }
.excerpt {border: 1px dotted #442251; width: 80%; max-width: 700px; padding: 22px 0 12px; border-radius: 9px; margin: 80px auto; }
.excerpt a { font-weight: bold; font-size: 21px; color: #442251; text-transform: uppercase; letter-spacing: 1px; }
.thedate {font-size: 24px; color: #888; text-transform: uppercase; letter-spacing: 7px; margin: -10px 0 30px;}

.newsletter { width: 90%; max-width: 800px; margin: 0 auto 40px; padding: 40px 60px 20px; border: 4px double #777;}

#the-art { padding: 150px 0 ; background-image: url(images/wash.jpg); background-size: cover; }
.all-art { text-align: center; width: 100%; max-width: 1400px; margin: 0 auto;}
.one-art { display: inline-block; vertical-align: top; width: 13%; margin: 0 1.8% 40px;}
.one-art img { width: 100%; height: auto; max-width: 400px; border-radius: 8px; border: 10px solid #FFF; box-shadow: 0px 0px 8px #999;}
.one-art:hover img { box-shadow: 0px 0px 12px #000; }

#appearances { padding: 150px 0; } 
#appearances h1 { color: #000; margin-bottom: 50px; }
#appearances div { 
	display: inline-block; vertical-align: top; width: 20%; background-color: #e4e4e4;
	padding: 20px; border-radius: 20px; margin: 0 20px; min-height: 350px;
}
#appearances strong, #appearances b { text-transform: uppercase; }


.social {margin-top: 40px; padding-bottom: 70px;}
.social a {width: 20px; height: 20px; padding: 17px; background-color: #ff3300; border-radius: 4px; display: inline-block; margin: 0 10px 0 0; text-align: center;}
.social a:hover { background-color: #555;}
#the-author .social a {background-color: #000;}
#the-author .social a:hover { background-color: #555;}
.social a img { height: 20px; width: auto;}
p.credit { margin-top: 2px; font-size: 10px; color: #DDD;}

#footer { background: #000; padding: 50px; }
.copyright {  }
#footer p {color: #CCC; font-size: 13px;}
#footer a { color: #3298e3; }
#footer a:hover { color: #ff3300; }

#trailer { padding: 8vh 0; background-color: #000; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#351402+0,000000+100 */
background: rgb(53,20,2); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(53,20,2,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(53,20,2,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(53,20,2,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#351402', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
#trailer .content { margin: 0 auto; max-width: 800px;}

.home-video {width: 94%; max-width: 560px; margin: 0 auto;}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 1070px) {
	#the-series { background-image: none; }
	.series-left {
		width: 100%;
		text-align: center;
		margin: 0 auto;
	}
	a.moreinfo { margin: 0 auto; }
}
@media screen and (max-width: 916px) {
	.third.widget.widget-three {
		width: 100%;
	}
 .video-container-home {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container-home iframe,
.video-container-home object,
.video-container-home embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
}

iframe { background-color: #000; }


/* MOBILE */
@media only screen and (max-width: 1880px) {
	.tagline { width: 406px; height: 320px; }
	.tagline img { height: auto; }
	#fade-but { left: 25px; top: 25px; width: 112px;  }
	#fade-what { left: 92px; top: 34px; width: 168px; }
	#fade-if { left: 280px; top: 34px; width: 40px; }
	#fade-the { left: 78px; top: 92px; width: 79px; }
	#fade-sword { left: 169px; top: 85px; width: 170px; }
	#fade-has { left: 50px; top: 149px; width: 90px; }
	#fade-chosen { left: 160px; top: 146px; width: 190px; }
	#fade-a { left: 20px; top: 204px; width: 55px; }
	#fade-queen { left: 83px; top: 187px; width: 304px;}
}
@media only screen and (max-width: 1275px) {
	#appearances div { 
		width: 28%; padding: 20px 10px; margin: 0 10px; 
	}
}
@media only screen and (max-width: 1210px) {
	#nav.fixed #cursed-nav { display: none; }
	#nav.fixed #nav-items { top: 0px; margin-left: 0%;}
}
@media only screen and (max-width: 1116px) {
	#topbanner { background-position: 50vw bottom; }
	.newsletter { width: auto; }
}
@media only screen and (max-width: 990px) {
	.author-left, .illustrator-right {
	    width: 80%;
    }
	.right-bio { padding-left: 310px; }
}
@media only screen and (max-width: 868px) {
	.left-book, .right-text { width: 96%; margin: 0 auto 30px;}
	.author-left { padding-bottom: 300px; }
	#the-illustrator { background-size: 100% auto;}
	#appearances div { 
		width: 90%; padding: 20px 10px; margin: 0 10px 20px; 
	}
	.left-photo { float: none; margin: 0 auto 50px; }
	.right-bio { padding-left: 0px; }
}
@media only screen and (max-width: 820px) {
	/* Switch to hamburger */
	#nav #nav-items, #nav.fixed #nav-items { display: none; }
	#mobile-toggle { 
		display: block; color: #FFF; text-transform: uppercase; letter-spacing: 3px; font-weight: bold;
		cursor: pointer;
	}
	#nav, #nav.fixed { height: 60px; padding-top: 18px; }
	#mobile-toggle img { height: 30px; position: relative; top: 7px;}
	#nav #nav-items.show, #nav.fixed #nav-items.show { display: block; position: absolute; top: 75px; width: 100%;}
	#nav-items a { display: block; background-color: #333; padding: 12px 18px 16px;}
	#nav-items a .hide-m { display: inline; }
}
@media only screen and (max-width: 700px) {
	.one-box {width: 100%; margin-right: 0px;}
	.splatter { background-size: 30% auto; }
	.one-art { width: 35%; margin: 0 3.5% 20px; }
}
@media only screen and (max-width: 610px) {
	#topbanner { background-position: 40vw bottom; }
	.tagline { width: 255px; height: 220px; }
	#fade-but { left: 25px; top: 25px; width: 67px;  }
	#fade-what { left: 64px; top: 30px; width: 101px; }
	#fade-if { left: 175px; top: 30px; width: 24px; }
	#fade-the { left: 58px; top: 68px; width: 47px; }
	#fade-sword { left: 110px; top: 65px; width: 102px; }
	#fade-has { left: 44px; top: 102px; width: 54px; }
	#fade-chosen { left: 106px; top: 101px; width: 114px; }
	#fade-a { left: 22px; top: 131px; width: 33px; }
	#fade-queen { left: 62px; top: 124px; width: 182px;}
}
@media only screen and (max-width: 658px) {
	/* iframe { height: 350px !important; background-color: #000; }*/
}
@media only screen and (max-width: 578px) {
	/* iframe { height: 450px !important; } */

}
@media only screen and (max-width: 550px) {
	#topbanner { background-size: auto 45%; background-position: right bottom; }
	.splatter {padding: 6vh 5% 5vh 5%; text-align: left;}
	.tagline { margin: 4vh 0 0; }
	.callout { font-size: 30px; padding: 20px;}
	h1 { line-height: 1.2em; }
	.right-bio { width: 80%; }
	.author-left { padding-bottom: 200px; }
}
@media only screen and (max-width: 450px) {
	#topbanner { background-image: none; }
	.splatter {text-align: center;}
	.tagline { margin: 4vh auto 0; }
	#nav-items a { font-size: 5vw; padding: 18px 10px; }
	.callout { font-size: 30px; padding: 20px;}
	.one-art { width: 75%; margin: 0 3.5% 20px; }
}