/*Tablets, Ipads (portrait) 768px to 1024px*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    #banner-top .right {height: 77%; right: -10%;}
    #banner-top h1 {width: 100%;top: 14%;margin: 0;}
    #the-book .book-mockup {position: relative; left: -20px; top: 0px; width: auto; max-height: 55%; display: block; margin: 0 auto;}
    #the-book h3 {width: 100%;margin: 0;}
    #the-book p {width: 100%;margin: 20px 0 0 0;}
    #the-book .description {margin-bottom: 20px;}
    #author {background-position: 32% bottom;padding: 20px;width: calc(100% - 40px);}
    #author h3, #author p {width: 55%;}
    #illustrator {background-position: 57% bottom;padding: 20px;width: calc(100% - 40px);}
    #the-book form {width: 100%;}
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    #banner-top h1 {font-size: 6em;}
    #the-book .book-mockup {max-height: 52%;top: 120px;}
    #the-book p {min-width: 360px;}
    #author {background-size: 150%;background-position: center bottom;height: calc(600px - 280px);}
    #illustrator {height: calc(600px - 280px);}
}
@media (min-width: 514px) and (max-width: 768px) and (orientation: portrait) {
    #banner-top h1 {font-size: 7em!important;}
    input.button {left: 18% !important;}
    #the-book {height: 860px!important;}
    #the-book p {font-size: 1.3em !important;display: block;margin-top: 20px;float: left !important;max-width: 100%;}
    #the-book .description {font-size: 1em!important;}
    #author {height: calc(600px - 80px);}
    #illustrator {height: calc(600px - 80px);}
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)  {

}

/*Phones Portrait*/
@media only screen and (min-width : 320px) and (max-width : 667px) and (orientation : portrait) {
    .logo {width: 150px;}
    .responsive-menu {display: block; width: 30px; cursor: pointer;}
    #header #social {top: 26px;}
    #header #social ul li, #footer #social ul li {margin-top: -4px;}
    #banner-top {background-size: cover;}
    #banner-top .right {display: block;width: auto;height: 50%;bottom: 0;}
    #banner-top h1 {width: 90%;top: 22%;line-height: 0.8em;font-size: 5em;}
    input.button {}
    .button-banner {left: 5% !important;}
    ul#menu {display: none;width: 100%;margin: 0;padding-bottom: 30px;padding-top: 20px;background-color: #fff;}
    ul#menu li {clear: both;display: block;text-align: center;border: none;margin: 15px 0 0 0;padding: 0;width: 100%;}
    #the-book {padding: 30px;height: 800px;font-size: 1em;background-size: 360%;background-position: left top;}
    #the-book .book-mockup {position: relative; left: 0%; top: 55px;width: 100%; max-width: 100%;margin-bottom: 70px;}
    #the-book h3, #newsletter h3 {width: 100%; margin: 0;font-size: 2em;}
    #the-book p {width: 100%;font-size: 0.9em;float: none;min-width: 100%; max-width: 100%;}
    #the-book form {width: 100%!important;min-width: calc(100% - 60px);float:left;margin-bottom: 40px;}
    #the-audiobook {padding: 30px; height: 1160px; font-size: 1em;}
    #the-audiobook .derek {position: relative;left: 0%;top: 0;width: 90%;margin-bottom: 20px;}
    #the-audiobook h3 {width: 100%; margin: 0;font-size: 2em;}
    #the-audiobook p {width: 100%;font-size: 1em;}
    #author {padding: 30px;width: calc(100% - 60px);background-position: 16% bottom;background-size: 240%;background-color: #fff;}
    #author h3 {margin: 0;width: 100%;font-size: 2em;}
    #author p {width: 100%;font-size: 1em;}
    #illustrator {padding: 30px;width: calc(100% - 60px);background-color: #fff;background-size: 220%;background-position: 82% bottom;}
    #illustrator h3 {margin: 0;width: 100%;font-size: 2em;text-align: left;}
    #illustrator p {width: 100%; font-size: 1em;text-align: left;}
    #newsletter {padding: 30px;width: calc(100% - 60px); height: 900px;}
    #newsletter .mite {position: relative;height: 28%;left: 37%;bottom: 0;}
    #newsletter p, #newsletter ul {width: 100%;}
    #newsletter form {width: 100%;}
    #newsletter form p {width: 100%;}
    #newsletter input {width: 92%;}
    #newsletter .confirm {width: 80%;}
    #buy {padding: 30px;width: calc(100% - 60px);}
    #buy .book-mockup {display: block;position: relative;width: 90%;margin-bottom: 30px;}
    #buy p {width: 100%;margin: 0;}
    #buy .where {width: 100%; margin-top: 30px;}
    #buy #places > div, #buy #types > div {font-size: 1.2em;background-size: 12px;padding-left: 10px;}
    #buy #places ul li, #buy #types ul li {background-size: 70%;}
    #pp-button {width: 100%;margin-top: 20px;}
    #footer #backTop {display: none;}
    #footer .logo {display: none;}
    #footer #social {display: none;}
    #the-book.book-shop {height: auto;float: left;clear: both;padding-top: 120px;padding-bottom: 80px;width: calc(100% - 60px);}
    .mobile-footer {float: left;width: 100%;margin: 0;padding: 15px 0 20px 0 !important;}
    #narrator {padding: 15px;width: calc(100% - 30px);margin-bottom: 40px;background-position: -445px top;background-size: 230%;height: auto;float: left;margin-top: 100px;margin-bottom: 0;}
    #narrator h3 {margin-top: 284px;}
    #narrator p, #narrator h3 {width: 100%;text-align: left;}
    #composer {padding: 15px;width: calc(100% - 30px);background-position: 94% top;background-size: 210%;}
    #composer p {width: 100%;text-align: left;}
    #composer h3 {margin: 270px 0px 0px 0;padding: 0;text-align: left;}
    #rowan {background-size: 160%;background-repeat: no-repeat;float: left;padding: 235px 15px 15px 15px;background-position: center top;height: auto;margin-bottom: 40px;display: block; width: calc(100% - 30px);}
    #rowan h3 {}
    #rowan p a {color: chocolate;font-size: 1.5em;}
}
@media only screen and (max-width : 320px) and (orientation : portrait) {
    #the-book {height: 1320px;}
}

@media only screen and (max-width: 768px) and (orientation : landscape) {
    .logo {width: 150px;}
    .responsive-menu {display: block; width: 30px; cursor: pointer;}
    #header #social ul li, #footer #social ul li {margin-top: -4px;}
    #banner-top h1 {width: 80%;}
    ul#menu {display: none;width: 100%;margin: 0;padding-bottom: 30px;padding-top: 20px;background-color: rgba(0,0,0,0.6);}
    ul#menu li {clear: both;display: block;text-align: center;border: none;margin: 15px 0 0 0;padding: 0;width: 100%;}
    #the-book {padding: 30px; height: 890px; font-size: 1em;}
    #the-book .book-mockup {position: relative;left: 27%;top: 0;width: 35%;}
    #the-book h3, #newsletter h3 {width: 100%; margin: 0;font-size: 2em;}
    #the-book p {width: 100%;font-size: 0.9em;}
    #author {padding: 30px;width: calc(100% - 60px);background-position: -72% bottom;background-size: 150%;background-color: #fff;height: calc(312px - 60px);}
    #author h3 {margin: 0;width: 100%;font-size: 2em;}
    #author p {width: 60%;font-size: 1em;float: left;}
    #illustrator {padding: 30px;width: calc(100% - 60px);background-color: #fff;background-size: 122%;background-position: 30% bottom;height: calc(312px - 60px);}
    #illustrator h3 {margin: 0;width: 100%;font-size: 2em;text-align: left;}
    #illustrator p {width: 60%; font-size: 1em;text-align: left;}
    #newsletter {padding: 30px;width: calc(100% - 60px); height: 760px;}
    #newsletter .mite {position: relative;height: 28%;left: 37%;bottom: 0;}
    #newsletter p, #newsletter ul {width: 100%;}
    #newsletter form {width: 100%;}
    #newsletter form p {width: 100%;}
    #newsletter input {width: 92%;}
    #newsletter .confirm {width: 80%;}
    #buy {padding: 30px;width: calc(100% - 60px);}
    #buy .book-mockup {display: none;}
    #buy p {width: 100%;margin: 0;}
    #buy .where {width: 100%; margin-top: 30px;}
    #buy #places > div, #buy #types > div {font-size: 1.2em;background-size: 12px;padding-left: 10px;}
    #buy #places ul li, #buy #types ul li {}
    #footer #backTop {display: none;}
    #footer .logo {display: none;}
}