/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 06-03-2018, 17:08:05
    Author     : Seba
*/
@import url('https://fonts.googleapis.com/css?family=Just+Another+Hand');
@import url('https://fonts.googleapis.com/css?family=Coming+Soon');
@font-face {
    /*
        font-family: 'ds_wallauregular';
    src: url('../fonts/dswallau-webfont.woff2') format('woff2'),
        url('../fonts/dswallau-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    */
}

html, body {background-color: #fff; color: #000; width: 100%; height: 100%; margin: 0; padding: 0;}
body {font-family: 'Crimson Text', serif;}
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-family: 'Just Another Hand', cursive;}
h3 {font-size: 2.3em;}
a {color: #fff; text-decoration: none;cursor: pointer;}
p {margin: 0; padding: 0; font-family: 'Coming Soon', cursive;}
em {color: #bf3737;text-transform: none;font-style: normal;font-size: 1.8em;}
input.button {
    position: absolute;bottom: 55px;left: calc(50% - 110px);background-color: #e39b94;border: solid 1px rgba(255,255,255, 0.2);
    color: #fff;padding: 22px 30px 15px 30px;border-radius: 8px;text-transform: uppercase;font-family: 'Just Another Hand', cursive;
    box-shadow: 0px 0px 5px black;cursor: pointer;font-size: 1.5em;
}

/*HEADER*/
#header {position: fixed;background-color: #fff;width: calc(100% - 12px);z-index: 10;padding: 6px;box-shadow: 1px 1px 8px rgba(0,0,0,0.25);}
.logo {max-width: 180px;float: left;}
ul#menu {padding: 0;margin: 24px 0px 0px 36px;list-style: none;float: left;font-family: 'Just Another Hand', cursive;}
ul#menu li {display: inline-block;padding-left: 10px;border-right: solid 1px #e39b94;padding-right: 20px;}
ul#menu li a {color: #898989; font-size: 2em;}
ul#menu li a:hover {color: #e39b94;}
ul#menu li a.active {color: #000;}
#header #social {position: absolute;right: 0;top: 14px;}
#header #social ul {margin: 0;padding: 0;list-style: none;}
#header #social ul li, #footer #social ul li {display: inline-block;margin-right: 20px;margin-top: 7px;}
#header #social ul li a img, #footer #social ul li a img {width: 30px;}
.responsive-menu {display: none;}

#banner-top, #the-book, #author, #illustrator, #narrator, #newsletter, #buy {position: relative; background-repeat: no-repeat; background-position: center top;}

/*BANNER TOP*/
#banner-top {background-image: url("../img/bg-featured.jpg");background-size: 95%;width: 100%;height: 100%;background-attachment: fixed;overflow: hidden;background-position: center 80px;}
#banner-top h1 {width: 40%;display: block;text-align: center;position: relative;top: 40%;text-shadow: 0px 0px 4px rgba(0,0,0,0.3);color: #fff;font-size: 8em;font-weight: normal;margin-left: 5%;line-height: 0.9em;}
#banner-top h2 {position: relative;top: 42%;text-align: center;width: 70%;margin: 0 auto;text-shadow: 0px 0px 4px black;}
#banner-top .left {position: absolute;height: 50%;width: auto;left: 0;bottom: 0;}
#banner-top .right {position: absolute;height: 90%;width: auto;right: 0;bottom: -10px;}

/*THE BOOOK*/
#the-book, #the-audiobook {background-image: url("../img/bg-the-book.jpg");background-size: cover;height: 620px;display: block;float: none;padding: 100px 50px 50px 50px;}

#the-book h3, #newsletter h3, #the-audiobook h3 {color: #000;text-transform: uppercase;float: right;clear: both;display: block;width: 360px;margin-top: 50px;margin-bottom: 20px;margin-right: 15%;font-size: 3em;text-align: center;}
#the-book p, #the-audiobook p {float: right;text-align: center;font-size: 1.3em;clear: both;margin-bottom: 30px;max-width: 360px;margin-right: 15%;min-width: 360px;}
#the-book .description {font-size: 1em;}
#the-book .book-mockup {position: absolute;left: 0;top: 75px;width: auto;max-height: 48%;}
.quote-open, .quote-close {font-size: 3.4em; color: grey; line-height: 0em; position: relative;}
.quote-open {top: 18px;}
.quote-close {top: 30px;}
.button.button-read {position: relative;float: right;clear: both;bottom: 0;width: 160px;display: block;left: 0;margin-right: 22%;}

/*AUDIOBOOK*/
.derek {position: absolute;width: 30%;margin-left: 5%;margin-top: 50px;}
.available a {font-size: 1.6em !important;font-weight: bold;color: #de8800;text-decoration: underline;text-shadow: 0px 0px 5px rgba(0,0,0,0.5);}

/*THE AUTHOR*/
#author {background-image: url("../img/the-author.jpg"); background-size: cover; width: calc(100% - 160px);height: calc(600px - 160px);color: #000;padding: 80px;}
#author h3, #author p {width: 65%;float: right; text-align: left;}
#author p {font-size: 1.2em;}
#author h3 {margin-top: 40px;font-weight: normal;font-size: 3em;}
#author a {color: #942121;}
#author .twitter-small {width: 36px;height: auto; margin-bottom: -10px;margin-right: 8px;}

/*NARRATOR*/
#narrator {background-image: url("../img/narrator.jpg");background-size: cover;width: calc(100% - 160px);height: auto;color: #000;padding: 80px 80px 80px 80px;float: left;margin-top: 80px;}
#narrator h3, #narrator p {width: 50%;float: left;text-align: right;clear: both;}
#narrator p {font-size: 1.4em;padding-bottom: 10px;padding-top: 10px;}
#narrator h3 {margin-top: 80px;font-weight: normal;font-size: 3em;}
#narrator a {color: #942121;}
#narrator .twitter-small {width: 36px;height: auto; margin-bottom: -10px;margin-right: 8px;}
#rowan {text-align: center;background-image: url("../img/rowan.jpg");background-size: cover;width: calc(100% - 160px);height: calc(600px - 160px);color: #000;padding: 80px 80px 80px 80px;float: left;background-position: center top;background-repeat: no-repeat;}
#audible {text-align: center;display: block;width: calc(100% - 40px);height: auto;float: left;padding-top: 80px;padding-bottom: 80px;padding-left: 20px;padding-right: 20px;background-color: #eee;}
#audible h3 {font-size: 4em;font-weight: normal;}
#audible a {color: chocolate; font-size: 2em;}
#rowan p {width: 250px;margin: 0 auto;line-height: 2.5em;}
#rowan .quote {font-size: 1em;display: block;line-height: 1.5em;}
/*#rowan .quote-open {float: left;}
#rowan .quote-close {float: right;}*/
#narrator .quote {display: block;}
/*#narrator .quote-open {float: left;}
#narrator .quote-close {float: right;}*/
.quote {font-size: 0.8em;font-style: italic;text-align: center !important;}


/*THE ILLUSTRATOR*/
#illustrator {background-image: url("../img/the-illustrator.jpg"); background-size: cover; width: calc(100% - 160px);height: calc(600px - 160px);color: #000; padding: 80px;}
#illustrator h3, #illustrator p {width: 55%;float: left; text-align: right;}
#illustrator p {font-size: 1.2em;}
#illustrator h3 {margin-top: 80px;font-weight: normal;}
#illustrator a {color: #942121;}
#illustrator .insta-small {width: 36px;height: auto; margin-bottom: -10px;margin-right: 8px;}

/*THE NEWSLETTER*/
#newsletter {background-image: url("../img/bg-newsletter.jpg");background-size: cover;width: calc(100% - 100px);height: 600px;background-attachment: fixed;padding: 50px;}
#newsletter input {padding: 10px;border: none;border-radius: 4px;width: 70%;margin-bottom: 10px;clear: both;float: left;}
#newsletter .check {width: auto; margin-right: 15px;}
#newsletter form {width: 50%; float: right;margin-top: 20px;}
#newsletter .mite {position: absolute;height: 75%;width: auto;bottom: 10%;left: 15%;}
#newsletter p, #newsletter ul {float: right;width: 50%;clear: both;}
#newsletter form a {color: #bf3737;text-decoration: underline;cursor: pointer;}
#newsletter form p {margin-bottom: 20px; width: 70%; float: left;}
#newsletter .confirm {float: left; clear: none; width: auto;}
#newsletter input.button {width: auto;float: none;bottom: auto;clear: both;left: auto;position: relative;display: block;margin: 0 auto;}

/*BUY*/
#buy {background-image: url("../img/bg-buy.jpg"); background-size: cover; width: calc(100% - 100px); height: 600px; color: #000;padding: 50px;}
#buy .book-mockup {position: absolute;width: 35%;top: 7%;left: 0%;}
#buy p {color: #fff;font-size: 1.6em;width: 70%;margin-left: auto;text-align: center;text-shadow: 0px 0px 4px black;margin-top: 50px;margin-bottom: 40px;margin-right: auto;line-height: 1em;}
#buy .where {float: right;width: 60%;display: flex;}
#buy .where select {background-color: gray;border: none;padding: 10px;width: 40%;}
#buy .where select option {}
#places, #types {width: 40%;display: inline-block;flex-grow: 1;margin-right: 4%;}
#buy #places > div, #buy #types > div {background-color: #fff;color: #a66c94;font-size: 2em;padding: 20px 10px 10px 20px;background-image: url("../img/arrow-down.png");background-repeat: no-repeat;
                                       background-position: 95% center;border-radius: 5px 5px 0px 0px;box-shadow: 5px 10px 5px rgba(0,0,0,0.5);font-family: 'Just Another Hand', cursive;font-weight: bold;}
#places ul, #types ul {margin: 0;padding: 0;}
#buy #places ul, #buy #types ul {display: none;}
#buy #places ul li, #buy #types ul li {
    background-color: grey;background-repeat: no-repeat;background-position: center center;text-indent: 9999px;white-space: nowrap;
    overflow: hidden;height: 80px;border-bottom: solid 1px lightgray;
}
#places ul li:last-child, #types ul li:last-child {border-bottom: none !important;border-radius: 0px 0px 5px 5px;}
#buy #places ul li:hover, #buy #types ul li:hover {background-color: darkgray;}
#buy #places ul li a, #buy #types ul li a {display: block;width: 100%;height: 100%;}
#buy #types ul li {text-indent: 0;text-align: center;font-size: 1.4em;list-style: none; height: 50px;}
#amazon {background-image: url("../img/option-amazon.png");}
#waterstones {background-image: url("../img/option-waterstones.png");}
#foyles {background-image: url("../img/option-foyles.png");}
#brshop {background-image: url("../img/option-brshop.png");}
#the-book form {min-width: 360px;float: right;clear: both;text-align: center;max-width: 360px;margin-right: 24%;}
#the-book form table {text-align: center;width: 100%;}
#pp-button {width: 50%;float: right;text-align: center;clear: both;}

/*FOOTER*/
#footer {position: relative; padding: 20px;text-align: center;clear: both;}
#footer #social {position: absolute;right: 0;top: 0;}
#footer .logo {max-width: 130px;height: auto;margin-right: 10px;margin-bottom: 20px;}
#footer #backTop {position: fixed;bottom: 75px;right: 20px;border-radius: 50%;background-color: #942121;width: 60px;height: 60px;}
.arrow-top {transform: rotate(180deg); width: 22px; height: auto; position: absolute; left: calc(50% - 11px); top: calc(50% - 11px); cursor: pointer;}

/*TERMS AND CONDITIONS*/
#terms {z-index: 9999; background-color: rgba(94, 21, 21, 0.8);width: 100%;height: 100%;position: fixed;top: 0;display: none;}
#terms h1 {color: #de8800;}
#terms .container {max-width: 80%;font-size: 1em;position: fixed;top: 50px;z-index: 9999;background-color: #000;height: 500px;overflow-y: scroll;display: block;left: calc(10% - 40px);padding: 40px;border-radius: 15px;}
#terms .close {
    position: absolute;z-index: 99999;color: #000;right: 6%;display: block;background-color: #fff;width: 46px;height: 46px;border-radius: 50%;top: 25px;font-size: 2em;
    font-weight: bold;text-align: center;line-height: 1.7em;border: solid 7px #000;cursor: pointer;
}

/*VIDEO*/
/*.modal-video {
    position: fixed;
    z-index: 9999;
    width: 94%;
    height: 94%;
    left: 3%;
    top: 3%;
    background-color: rgba(0,0,0,0.75);
    border-radius: 5px;
}*/

/*HIGH RESOLUTIONS*/
@media (min-width: 1441px) {
    #the-book h3 {margin-right: 24%;}
    #the-book p {margin-right: 24%;}
    .button.button-read {margin-right: 24%;}
    #the-book .book-mockup {max-height: 95%;}
}