@charset "utf-8";


body {
    margin-bottom: 4em;
    background-image: -webkit-repeating-linear-gradient(270deg,rgba(155,133,71,1.00) 0%,rgba(214,202,171,1.00) 5.18%,rgba(78,55,22,1.00) 7.77%,rgba(78,55,22,1.00) 98.45%,rgba(78,55,22,1.00) 100%);
    background-image: -moz-repeating-linear-gradient(270deg,rgba(155,133,71,1.00) 0%,rgba(214,202,171,1.00) 5.18%,rgba(78,55,22,1.00) 7.77%,rgba(78,55,22,1.00) 98.45%,rgba(78,55,22,1.00) 100%);
    background-image: -o-repeating-linear-gradient(270deg,rgba(155,133,71,1.00) 0%,rgba(214,202,171,1.00) 5.18%,rgba(78,55,22,1.00) 7.77%,rgba(78,55,22,1.00) 98.45%,rgba(78,55,22,1.00) 100%);
    background-image: repeating-linear-gradient(180deg,rgba(155,133,71,1.00) 0%,rgba(214,202,171,1.00) 5.18%,rgba(78,55,22,1.00) 7.77%,rgba(78,55,22,1.00) 98.45%,rgba(78,55,22,1.00) 100%);
}

#wrapper {
	width: 100%;
	min-width: 300px;
	max-width: 1500px;
    margin: 0 auto;
    padding-bottom: 45em;
    position: relative;
}

/*#testshape {
    position: absolute;
    z-index: -1;
    border: 5px solid #FF00CE;
    height: 13800px;
}*/

header {
    width: 200px;
    margin: 2em auto 3em auto;
}

nav {
    width: 200px;
    margin: 0 auto;
}

div.back, div.toc, div.next {
    width: 47px;
    height: 65.5px;
	float: left;
	background-size: 100%;
	background-repeat: no-repeat;
	transition: all;
}

div.back {
    background-image: url(../images/card-back1.png);
}

div.toc {
    background-image: url(../images/frontispiece_brown.jpg);
    margin: 0 29.5px;
}

div.next {
    background-image: url(../images/card-back3.png);
}

div.back:hover {
    background-image: url(../images/over_joker1.png);
}

div.toc:hover {
    background-image: url(../images/frontispiece_color.jpg);
}

div.next:hover {
    background-image: url(../images/over_joker2.png);
}

#bodybckgd {
    position: absolute;
    z-index: -1;
    width: 100%;
    margin: 1em auto 0 auto;
}

#bodybckgd img:first-child {
    width: 100%;
    margin: 80% auto 0 -10%;
    opacity: 30%;
}

#bodybckgd img {
    width: 100%;
    margin: -1% auto 0 -10%;
    opacity: 30%;
}

#bodybckgd img:last-child {
    opacity: 100%;
}

#title {
    width: 100%;
    margin: 1.5em auto 0 auto;
}

#phonetitle {
    width: 100%;
    margin: 1em auto 0 auto;
}

#phonetitle img {
    width: 100%;
    margin: 0 auto 0 -10%;
}

#tdchaptertitle {
    position: sticky;
    top: 6em;
    bottom: 500px;
    width: 60%;
    margin: 25em 1.5em 0 auto;
    z-index: 1;
}

#tdchaptertitle img {
    width: 100%;
    opacity: 100%
}

#tdhead {
    width: 390px;
    margin: -330% auto 0 -20%;
    z-index: -1;
}

#tdhead img {
    width: 100%;
    margin: 1em auto 0 auto;
}

#tdbody {
    width: 390px;
    margin: 0 auto 0 -20%;
    z-index: -1;
}

#tdbody img {
    width: 100%;
    margin: 0 auto 0 auto;
    opacity: 30%;
}

#tdbody img:first-child {
    margin-top: -14%;
}

#tdbody img:last-child {
    margin-top: -14%;
    opacity: 100%;
}

h1 {
    font-family: "beth-ellen", sans-serif;
    color: #4E3716;
    text-align: center;
    font-size: 4em;
}

h2 {
    font-family: "beth-ellen", sans-serif;
}

h3 {
    font-family: "freight-text-pro", serif;
    color: #4D6F67;
    text-align: center;
    font-size: 1.25em;
    margin: -2em auto 0 auto;
    
}

h4 {
    font-family: "freight-text-pro", serif;
    font-size: 1.5em;
    color: #92B9C5;
    text-align: center;
    margin: 0 auto -.75em auto;
}

blockquote {
    text-align: center;
    font-family: "beth-ellen", sans-serif;
    font-size: 1.5em;
    color: #92B9C5;
    margin: 0 auto;
}

p {
    color: #e9cda9;
}

#rabbit {
	width: 80%;
	margin: .5em auto 1em auto;
}

#rabbit img {
	width: 100%;
    margin-top: 4em;
    margin-bottom: 4em;
}

.chapter {
    width: 275px;
    margin: 3em auto 0 auto;
}

.chapter img {
    width: 100%;
    margin: 0 auto;
}

#kitten {
    width: 90%;
    margin: 3em auto 0 auto;
}

#kitten img {
    width: 100%;
    margin: 0 auto;
}

#curtain {
    width: 90%;
    margin: 3em auto 0 auto;
}

#curtain img {
    width: 100%;
    margin: 0 auto;
}

#drinkme {
    width: 90%;
    margin: 3em auto 0 auto;
}

#drinkme img {
    width: 100%;
    margin: 0 auto;
}

article p {
    font-size: 1.2em;
    line-height: 1.4;
    width: 85%;
    margin: 1em auto 1em auto;
}

/*SPECIFIC TEXT CLASSES*/
.imgwrap {
    float: left;
    margin: .5em;
}

.imgwrap2 {
    float: right;
    margin:  .5em .03em;
}

.imgwrap3 {
    float: left;
    margin: .03em;
}

.wordcolor {
    color:#92B9C5; 
}

.wordcolor2 {
    color: #FFAC43;
}

#navbottom {
    width: 239px;
    margin: 6em auto 0 auto;
}

.sticky {
    position: sticky;
    top: 5;
}

div.btoc {
    width: 47px;
    height: 65.5px;
	float: left;
	background-size: 100%;
	background-repeat: no-repeat;
	transition: all; 
}

div.bback, div.bnext {
    width: 63px;
    height: 44px;
	float: left;
    margin-top: 9.5px;
	background-size: 100%;
	background-repeat: no-repeat;
	transition: all;
}

div.bback {
    background-image: url(../images/teapothover.png);
}

div.btoc {
    background-image: url(../images/frontispiece_brown.jpg);
    margin: 0 33.025px;
}

div.bnext {
    background-image: url(../images/teapothover2.png);
    float: right;
}

div.bback:hover {
    background-image: url(../images/teapot.png);
}

div.btoc:hover {
    background-image: url(../images/frontispiece_color.jpg);
}

div.bnext:hover {
    background-image: url(../images/teapot2.png);
}

/*article p::first-letter {
    font-family: "beth-ellen", sans-serif;
    font-size: 3em;
    color:#92B9C5;
    padding-right: 10%;
	}*/

/* PHONE SIZE*/

@media (max-width: 320px){
    
    h1 {
        display: none;
    }
    
     #tdhead img {
        display: none;
    }
    
    #tdbody img {
        display: none;
    }
    
    #tdchaptertitle, #desktop {
        display: none;
    }
}


@media (min-width: 321px) {
    
    header {
        width: 350px;
    }
    
    nav {
        width: 350px;
    }
    
    div.back, div.toc, div.next {
        width: 70px;
        height: 96px;
    }
    
    div.toc {
        margin: 0 70px;
    }
    
    h3 {
       font-size: 1.5em; 
    }
    
    #phonetitle {
        width: 75%;
    }
    
    #bodybckgd {
        width: 75%;
        margin: 0 auto 0 12.5%;
    }
    
    #rabbit {
        width: 65%;
    }
    
    /*.chapter {
        width: 70%;
    }*/
    
    article p {
        font-size: 1.4em;
    }
    
    blockquote {
        font-size: 1.75em;
    }
    
    #navbottom {
        width: 295px;
    }
    
    div.btoc {
        width: 70px;
        height: 96px;
        margin: 0 39.5px;
    }
    
    div.bback, div.bnext {
        width: 73px;
        height: 51px;
    }
    
    h1 {
        font-size: 3em;
        margin: 0 auto;
        display: none;
    }
 
    #tdhead img {
        display: none;
    }
    
    #tdbody img{
        display: none;
    }
    
    #tdchaptertitle, #desktop {
        display: none;
    }
}

@media (min-width: 430px) {
    
}

@media (min-width: 550px) {
    
    /*.chapter img{
        width: 325px;
        height: 212px;
    }*/
    
    #rabbit, #kitten, #curtain, #drinkme {
        width: 65%;
    }
    
    article p {
        font-size: 1.9em;
    }
    
    h1 {
        display: none;
    }
    
    #tdhead img {
        display: none;
    }
    
    #tdbody img{
        display: none;
    }
}

@media (min-width: 768px) {
    
    body {
    background-image: -webkit-linear-gradient(270deg,rgba(119,164,153,1.00) 0%,rgba(194,180,149,1.00) 2.59%,rgba(78,55,22,1.00) 5.70%,rgba(78,55,22,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(119,164,153,1.00) 0%,rgba(194,180,149,1.00) 2.59%,rgba(78,55,22,1.00) 5.70%,rgba(78,55,22,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(119,164,153,1.00) 0%,rgba(194,180,149,1.00) 2.59%,rgba(78,55,22,1.00) 5.70%,rgba(78,55,22,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(119,164,153,1.00) 0%,rgba(194,180,149,1.00) 2.59%,rgba(78,55,22,1.00) 5.70%,rgba(78,55,22,1.00) 100%);
    }
    
    #wrapper {
        height: 12150px;
    }
    
    #main {
        width: 61%;
        float: left;
    }
    
    #side {
        position: relative;
        width: 39%;
        height: 20050px;
        float: right;
        z-index: -1;
    }
    
    #tdchaptertitle {
        display: block;
    }
    
    h1 {
        display: block;
    }
    
    h3 {
        font-size: 1.75em;
        color: #92B9C5;
        margin: 1em auto 0 auto;
    }
    
    blockquote {
        font-size: 2.1em;
    }
    
    #rabbit img {
        margin-bottom: -2.5em;
    }
    
    #tdhead img {
        display: block
    }
    
    #tdbody img{
        display: block;
    }
    
    #navbottom {
        margin-bottom: 4em;
    }
    
    #bodybckgd, #phonetitle, .chapter {
        display: none;
    }
    
    #desktop {
        display: none;
    }
    
}

@media (min-width: 800px) {
    
    #side {
        height: 19750px;
    }
    
    #tdchaptertitle {
        margin-right: 2.6em;
    }
    
    #tdhead {
        width: 24em;
    }
    
    #tdbody {
        width: 24em;
    }
    
}

@media (min-width: 825px) {
    
    #side {
        height: 19170px;
    }
    
    #tdchaptertitle {
        margin-right: 3.5em;
    }
    
    #tdhead {
        width: 23.3em;
    }
    
    #tdbody {
        width: 23.3em;
    }
    
    #navbottom {
        width: 325px;
    }
    
    div.btoc {
        width: 73px;
        height: 96px;
        margin: 0 48.px;
    }
    
    div.bback, div.bnext {
        width: 78px;
        height: 51px;
    }
    
    #rabbit, #kitten, #curtain, #drinkme {
        width: 70%;
    }
}

@media (min-width: 850px) {

    #main {
        margin-left: 2em;
    }
    
    #side {
        width: 35%;
        height: 20300px;
        float: right;
    }
    
    article p {
        font-size: 2em;
    }
    
    #tdchaptertitle {
        margin-right: 1.5em;
    }
    
    #tdhead {
        width: 24.65em;
    }
    
    #tdbody {
        width: 24.65em;
    }
    
}

@media (min-width: 875px) {
    
    #side {
        height: 19920px;
    }
    
    #tdchaptertitle {
        margin-right: 2.2em;
    }
    
    #tdhead {
        width: 24.2em;
    }
    
    #tdbody {
        width: 24.2em;
    }
    
}

@media (min-width: 900px) {
    
    #side {
        height: 19900px;
    }
    
    h1 {
        font-size: 3.3em;
    }
    
    #tdchaptertitle {
        margin-right: 3em;
    }
    
    #tdhead {
        width: 24.2em;
    }
    
    #tdbody {
        width: 24.2em;
    }
    
}

@media (min-width: 925px) {
    
    #main {
        width: 62%;
    }
    
    #side {
        width: 34%;
        height: 15155px;
    }
    
    article p {
        font-size: 1.75em;
    }
    
    #tdchaptertitle {
        margin-right: 6em;
    }
    
    #tdhead {
        width: 18.4em;
    }
    
    #tdbody {
        width: 18.4em;
    }
    
    #rabbit, #kitten, #curtain, #drinkme {
        width: 50%;
    }
    
}

@media (min-width: 950px) {
    
    #side {
        height: 14670px;
    }
    
     #tdchaptertitle {
        margin-right: 6.8em;
    }
    
    #tdhead {
        width: 17.8em;
        margin-top: -325.5%;
    }
    
    #tdbody {
        width: 17.8em;
    }
    
}

@media (min-width: 975px) {
    
    #tdchaptertitle {
        margin-right: 7.2em;
    }
    
}

@media (min-width: 1000px) {
    
    #main {
        width: 65%;
        margin-right: 4em;
    }
    
    #side {
        width: 25%;
        height: 13450px;
    }
    
    article p {
        width: 90%;
    }
    
    #tdchaptertitle {
        margin-right: 4em;
    }
    
    #tdhead {
        width: 16.3em;
        margin-top: -350.5%;
    }
    
    #tdbody {
        width: 16.3em;
    }
    
}

@media (min-width: 1050px){
    
    #side {
        height: 13090px;
    }
    
    #tdchaptertitle {
        margin-right: 4.9em;
    }
    
    #tdhead {
        width: 15.9em;
    }
    
    #tdbody {
        width: 15.9em;
    }
    
}

@media (min-width: 1100px){
    
    #tdchaptertitle {
        margin-right: 5.8em;
    }
    
}

@media (min-width: 1150px){
    
    #side {
        height: 12830px;
    }
    
    #tdchaptertitle {
        margin-right: 6.5em;
    }
    
    #tdhead {
        width: 15.6em;
    }
    
    #tdbody {
        width: 15.6em;
    }
    
}

@media (min-width: 1200px){
    
    #side {
        height: 12310px;
    }
    
    #tdchaptertitle {
        margin-right: 7.2em;
    }
    
    #tdhead {
        width: 15em;
        margin-top: -330.5%;
    }
    
    #tdbody {
        width: 15em;
    }
    
}

@media (min-width: 1250px){
    
    #tdchaptertitle {
        margin-right: 8em;
    }
    
}

@media (min-width: 1280px){
    
    #wrapper {
        min-height: 15200px;
    }
    
    #desktop {
        position: relative;
        width: 100%;
        margin: 0 auto;
        display: block;
    }
    
    #lasthead {
        position: relative;
        width: 100%;
        margin: 9em auto -6em auto;
        z-index: 1;
        display: block;
    }
    
    #lasthead img{
        width: 100%;
    }
    
    #lastbody {
        position: relative;
        width: 100%;
        margin: 0 auto;
        z-index: 1;
        display:block;
    }
    
    #lastbody img:first-child {
        width: 100%;
        margin-top: -5em;
    }
    
    /*#slider1 {
        position: relative;
    }*/
    
    /*#ch1 {
        width: 155px;
        height: 600px;
        margin: 5% 0 0 11%;
        position: sticky;
        top: 2em;
        z-index: 6;
    }
    
    #ch1 img{
        width: 100%;
    }
    
    #dtrh {
        width: 100px;
        margin: 103em 0 0 68em;
        float: right;
        position: sticky;
        top: 2em;
        z-index: 6;
    }*/
    
    .right {
        opacity: 30%;
        margin: 1em 0;
    }
    
    .right2 {
        margin: -6% 0;
        opacity: 100%;
    }
    
    .left img{
        opacity: 30%;
        margin-left: 88.5px;
    }
    
    #main, #side {
        display: none;
    }
    
    header {
        margin: 3em 0 0 3em;
        float: left;
    }
    
    nav {
        margin: 0 auto;
    }
    
    div.back, div.toc, div.next {
	    transition: all;
    }
    
    div.back {
        background-image: url(../images/card-back1.png);
    }

    div.toc {
        background-image: url(../images/frontispiece_brown.jpg);
    }

    div.next {
        background-image: url(../images/card-back3.png);
    }
    
    div.back:hover {
        background-image: url(../images/over_joker1.png);
    }

    div.toc:hover {
        background-image: url(../images/frontispiece_color.jpg);
    }

    div.next:hover {
        background-image: url(../images/over_joker2.png);
    }
    
    #desktoptitle {
        position: absolute;
        margin: 12% 0 0 45%;
        z-index: 2;
        float: right;
    }
    
    #desktoptitle img {
        margin: 0 auto;
        float: right;
    }
    
    h3 {
        margin: 1em auto 0 auto;
        font-size: 2.5em;
    }
    
    #text {
        width: 67%;
        margin: 51% 0 0 20.5%;
        position: absolute;
        z-index: 2;
        float: left;
    }
    
    article p{
        font-size: 2.1em; 
    }
    
    blockquote {
        font-size: 3.2em;
        line-height: 1.5em;
    }
    
    div.btoc {
        width: 150px;
        height: 210px;
        margin: 0 23.25%;
    }
    
    div.bnext, div.bback {
        width: 150px;
        height: 105px;
    }
    
    #ohdear {
        margin: 1em auto;
    }
    
    #whiterabbit2 {
        width: 5%;
    }
    
}

@media (min-width: 1350px){
    
    #lasthead {
        width: 94%;
    }
    
    #lastbody {
        width: 94%;
    }
    
    .right {
        margin-left: .5em;
    }
    
}

@media (min-width: 1375px){
    
    #lasthead {
        width: 90%;
    }
    
    #lastbody {
        width: 90%;
    }
    
    .right {
        margin-left: .2em;
    }
    
    #text {
        width: 62%;
        margin-left: 23.5%;
    }
    
}

@media (min-width: 1400px){
    
    #lasthead {
        width: 90%;
        margin-left: 5%;
    }
    
    .left {
        margin-left: .2em;
    }
    
    .right {
        margin-left: .65em;
    }
    
    #text {
        width: 62%;
        margin-left: 28%;
    }
    
}

@media (min-width: 1500px) {
    
    #lasthead, #lastbody {
        width: 82%;
        margin-left: 5%;
    }
    
    .left {
        margin-left: .2em;
    }
    
    .right {
        margin-left: .65em;
    }
    
    #text {
        width: 59%;
        margin-top: 41em;
        margin-left: 21%;
    }
    
}