img {
    width: auto;
    max-width: 100%;
}

article.contextual-region {
    position: static;
}

div#mainpagecontent {
    padding: 0;
}

.flip-control a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-family: 'Impact W01';
    font-weight: 600;
    font-size: 55px;
    z-index: 99;
}

a#prev {
    right: calc(100% + 20px);
}

a#next {
    left: calc(100% + 20px);
}

html.notFL div#flipbook {
    margin: 0 auto !important;
}

@media all and (max-width:1024px) {
    a#prev {
        right: auto;
        left: 10px;
    }
    a#next {
        left: auto;
        right: 10px;
    }
}

@media only screen and (max-width:1023px) and (orientation: landscape),
only screen and (max-width: 1024px) and (orientation: portrait) {
    a#prev {
        right: auto;
        left: 10px;
    }
    a#next {
        left: auto;
        right: 10px;
    }
}

.scene {
    width: 25vw;
    height: 30vw;
    margin: 0 auto;
    perspective: 1000px;
    display: block;
    position: relative;
    /* position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%); */
}

div#flipbookblockhomepage {
    width: 90%;
    margin: 0 auto;
    text-align: right;
}

.book {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.page {
    cursor: pointer;
    position: absolute;
    color: #C89343;
    width: 100%;
    height: 100%;
    transition: 1.5s transform;
    transform-style: preserve-3d;
    transform-origin: left center;
}

.scene .front,
.scene .back {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 10% 5% 5%;
    padding: 0;
    box-sizing: border-box;
    backface-visibility: hidden;
    background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#FFFFFF), to(#CCCCCC));
    background: linear-gradient(to bottom right, #fff, #ccc);
}

.scene .front {
    background: #E1DBCB;
}

.scene .front.firstpage {
    background: #6B7A60;
}

.back {
    transform: rotateY(180deg);
}

.page.active {
    z-index: 1;
}

.page.loginpage {
    transform: none;
}

.page.flipped {
    transform: rotateY(-180deg);
}

.page.flipped.loginpage {
    transform: none;
}

.qr {
    margin: 50px auto;
    max-width: 50%;
}

.qr img {
    display: block;
}

section.page.active+section.page:not(.flipped) {
    z-index: 1;
}

section.page.flipped+.page.active {
    z-index: 2;
}

section.page.flipped {
    z-index: 3;
}

section.page.flipped.active {
    z-index: 5;
}

.page:nth-child(1) {
    z-index: 2;
}


/* Mobile */

@media only screen and (max-width:767px) {}

@media only screen and (min-width:1400px) {
    .scene {
        width: 650px;
        height: 650px;
    }
    /* div#flipbookblockhomepage {
        width: 1300px;
    } */
}

@media only screen and (min-width:1500px) {
    .scene {
        width: 700px;
        height: 700px;
    }
    /* div#flipbookblockhomepage {
        width: 1400px;
    } */
}

@media all and (min-width:768px) and (max-width:1024px) {
    /* div#flipbookblockhomepage {
        width: 100%;
        max-width: 720px;
    } */
    a#prev {
        left: 0;
    }
    a#next {
        right: 0;
    }
}

.firstpage {
    text-align: left;
    color: #EFEBE6;
}

.fpwrd {
    font-size: 13px;
    padding: 9% 5% 5%;
    word-spacing: 15px;
}

.fpwrd1 {
    font-size: 42px;
    padding-left: 5%;
}

.scene .front.firstpage {
    background: url('../assets/Cover.png') transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
}

.scene {
    width: 24vw;
    height: 36vw;
    margin: 0 auto;
    perspective: 1000px;
    display: block;
    position: relative;
}

div#flipbookblockhomepage {
    width: 90%;
    margin: 0 auto;
    text-align: right;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div#flipbookblockhomepage.openbook .scene {
    transition: 1.5s transform;
    transform-style: preserve-3d;
    transform-origin: left center;
    transform: translateX(10vw);
}


/* .scene .front img {
    width: 100%;
} */

.scene .front {
    background: url('../assets/rightdeskBook.png') transparent no-repeat;
    background-size: 100% 100%;
    background-position: center top;
}

.scene .back {
    background: url('../assets/leftdeskBook.png') transparent no-repeat;
    background-size: 100% 100%;
    background-position: center top;
}

.scene .desktop.flipped .back.last {
    background: url('../assets/endCover.png') transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
}

img.middleLeaf {
    position: absolute;
    z-index: -1;
    width: 22%;
    top: 19vh;
    left: 7vh;
}

img.topleaf {
    position: absolute;
    right: 2vh;
    top: 10vh;
    width: 11%;
}

img.leftborder {
    width: 61%;
    right: 2vh;
    position: absolute;
    top: 6vh;
}

.handle.valen {
    position: absolute;
    bottom: 14vh;
    transform: rotate( -90deg);
    left: 0;
}

img.post {
    width: 54%;
    margin: 0 auto;
    position: absolute;
    right: 8vh;
    top: 12vh;
}

img.post.char {
    right: 6vh;
    top: 13vh;
}

.front img.post.char {
    right: 12vh;
}

img.lastLeaf {
    position: absolute;
    bottom: 6vh;
    right: 13vh;
    width: 35%;
    z-index: -1;
}

img.rightborder {
    position: absolute;
    width: 49%;
    top: 5vh;
    left: 2vh;
}

.handle.thomas {
    position: absolute;
    bottom: 5vh;
    left: 2vh;
}

img.birdy {
    position: absolute;
    width: 44%;
    top: 16vh;
    right: 11vh;
    z-index: 2;
}

.handle.bir {
    position: absolute;
    right: 13vh;
    top: 11vh;
}

img.flower {
    position: absolute;
    right: 0;
    left: 1vh;
    top: 25vh;
    width: 36%;
}

img.lonely {
    position: absolute;
    width: 44%;
    bottom: 10vh;
    left: 3vh;
    z-index: 2;
}

img.flowerlast {
    position: absolute;
    bottom: 4vh;
    right: 16vh;
    width: 30%;
}

.front img.leftborder {
    right: 9vh;
}

.front img.topleaf {
    right: 7vh;
    top: 12vh;
}

.front img.middleLeaf {
    z-index: 1;
    top: 19vh;
    left: 2vh;
}

.front img.lastLeaf {
    bottom: 7vh;
    right: 14vh;
    z-index: 1;
}

.back img.rightborder {
    top: 5vh;
    left: 9vh;
}

.back .handle.bir {
    right: 4vh;
}

.back img.birdy {
    right: 4vh;
}

.back img.flower {
    left: 8vh;
}

.back img.flowerlast {
    right: 5vh;
}

.back img.lonely {
    left: 11vh;
}

.back .handle.thomas {
    left: 11vh;
}

img.birdy.single,
img.lonely.single {
    position: absolute;
    width: 44%;
    top: 50%;
    left: 50%;
    z-index: 0;
    transform: translate(-50%, -50%);
}

div#flipbookblockhomepage.closeBook .scene {
    transform: translateX(24vw);
}


/* .front .handle.valen {
    left: -11vh;
    bottom: 20vh;
} */


/* iPads */

img.post.char.black {
    width: 45%;
}

@media only screen and (min-width: 768px) and (max-width:1024px) {
    .scene {
        width: 350px;
        height: 470px;
        margin: 0 auto;
        perspective: 1000px;
    }
    div#flipbookblockhomepage {
        width: 700px;
        margin: 0 auto;
        text-align: right;
    }
    div#flipbookblockhomepage {
        margin: 50px auto 100px;
    }
    div#flipbookblockhomepage.openbook .scene {
        transform: translateX(19vw);
    }
    div#flipbookblockhomepage.closeBook .scene {
        transform: translateX(34vw);
    }
    .handle {
        font-size: 12px;
    }
    img.post.char {
        right: 12vh;
    }
    .back img.post.char {
        right: 6vh;
    }
    .front img.birdy {
        top: 13vh;
    }
    .front img.birdy.single {
        top: 50%;
    }
    img.post.char.black {
        width: 43%;
        right: 8vh;
        top: 9vh;
    }
}

@media all and (max-width:1023px) and (min-width:768px) and (orientation:portrait) {
    div#flipbookblockhomepage.openbook .scene {
        transform: translateX(23vw);
    }
    .swipeMessage {
        font-size: 20px;
        color: #C89343;
        position: absolute;
        bottom: 130px;
        left: 0;
        right: 0;
    }
    fieldset {
        margin-left: -26px;
    }
}

@media all and (max-width:1024px) and (min-width:768px) and (orientation:portrait) {
    .scene {
        width: 48vw;
        height: 75vw;
    }
    div#flipbookblockhomepage.openbook .scene {
        transform: translateX(23vw);
    }
    div#flipbookblockhomepage.closeBook .scene {
        transform: translateX(46vw);
    }
    .swipeMessage {
        bottom: 100px;
        font-size: 22px;
    }
    .footerWrapper ul.footer-social a {
        margin-right: 21px;
        font-size: 23px;
    }
    .footerFollowWrapper ul.footer-social a.icon-soundcloud {
        font-size: 31px;
    }
    .header-section {
        padding-top: 80px;
    }
}

@media only screen and (min-width: 768px) and (max-width:1024px) and (orientation:landscape) {}

@media only screen and (max-width:1023px) and (orientation: landscape),
only screen and (max-width: 1024px) and (orientation: portrait) {
    @media all and (orientation: landscape) {
        div#flipbookblockhomepage {
            margin: 0 auto;
        }
    }
}


/* .scene.mobile {
    display: none;
} */

section.page.bk.desktop .mobFront {
    display: none;
}

section.page.bk.mobile {
    display: none;
}

@media all and (max-width:767px) {
    .book {
        position: relative;
        width: 89vw;
        height: 150vw;
        transform-style: preserve-3d;
        margin: 0 5% 0 auto;
    }
    .scene {
        width: 100%;
        height: auto;
        margin: 0 auto;
        perspective: 1000px;
    }
    div#flipbookblockhomepage {
        width: 100%;
        margin: 0 auto;
        text-align: right;
        padding: 0;
        margin: 0;
    }
    .flip-control a {
        top: initial;
        bottom: -60px;
        transform: none;
    }
    div#flipbookblockhomepage.openbook .scene {
        transform: translateX(5vw);
    }
    .swipeMessage {
        font-size: 14px;
        color: #C89343;
        position: absolute;
        bottom: 91px;
        left: 0;
        right: 0;
    }
    .handle {
        font-size: 10px;
    }
}

@media all and (max-width:767px) and (orientation: portrait) {
    section.page.bk.desktop .deskFront,
    section.page.bk.desktop .deskBack {
        display: none;
    }
    /* section.page.bk.desktop .deskFront {
        display: none;
    } */
    section.page.bk.desktop .mobFront,
    section.page.bk.mobile {
        display: block !important;
    }
    .firstContent {
        display: none !important;
    }
    .scene .desktop.flipped .back.last {
        background: transparent;
    }
    .scene .mobile.flipped .back.last {
        background: url(../assets/endCover.png) transparent;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: 0 0;
    }
    div#flipbookblockhomepage.closeBook .scene {
        transform: translateX(43vw);
    }
    div#flipbookblockhomepage.closeBook .scene {
        transform: translateX(5vw);
    }
    div#flipbookblockhomepage {
        top: 45%;
    }
    .handle.valen {
        left: -12px;
    }
    .swipeMessage {
        bottom: 30px;
    }
    section.page.bk {
        display: none;
    }
    section.page.bk.active,
    section.page.bk.flipped {
        display: block;
    }
    fieldset {
        margin-left: -13px;
    }
    .termsWrapper.first {
        width: 91%;
        margin: 0 auto;
    }
}

@media all and (max-width:767px) and (orientation:landscape) {
    .book {
        position: relative;
        width: 300px;
        height: 480px;
        transform-style: preserve-3d;
        margin: 0 25% 0 auto;
    }
    div#flipbookblockhomepage {
        position: unset;
        top: unset;
        left: unset;
        transform: none;
    }
    div#flipbookblockhomepage.openbook .scene {
        transform: translateX(15vw);
    }
    .swipeMessage {
        font-size: 14px;
        color: #C89343;
        /* position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        margin: 10px 0; */
    }
    .overallWrapper {
        height: auto;
        /* overflow-x: hidden; */
    }
    .handle {
        font-size: 10px;
    }
    .overallWrapper {
        margin-top: 25px;
    }
    .footerWrapper {
        padding-top: 100px;
        position: relative;
        bottom: auto;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
    .overallWrapper {
        margin-top: 10%;
    }
    .footerWrapper {
        padding-top: 100px;
        position: relative;
        bottom: auto;
    }
    .swipeMessage {
        bottom: -85px;
    }
}

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
    .overallWrapper {
        margin-top: 10%;
    }
    .footerWrapper {
        padding-top: 100px;
        position: relative;
        bottom: auto;
    }
    .swipeMessage {
        bottom: -85px;
    }
}

.scene section.page.bk.desktop.firstpage.flipped .front.firstpage {
    background: none;
}

@media only screen and (min-width: 1024px) and (max-width:1366px) and (orientation: landscape) {
    body .customButton,
    body a.tilter,
    body input#email,
    body .mlistLightBox input.submit,
    .safari .customButton,
    .safari a.tilter,
    .safari input#email,
    .safari .mlistLightBox input.submit {
        height: 40px;
        line-height: 35px;
        margin-top: 6px;
    }
    body .mlist-outer-wrapper .purchase-text,
    .safari .mlist-outer-wrapper .purchase-text {
        padding-top: 5px;
    }
    body .followWrapper,
    .safari .followWrapper {
        padding-top: 1vh;
    }
    body .submitButton a,
    .safari .submitButton a,
    body .emailSubmitButton a,
    .safari .emailSubmitButton a {
        height: 40px;
        line-height: 40px;
        margin-top: 10px;
    }
    .FollowSpotifyWrapper {
        padding-top: 7px;
    }
    body input:checked+label:after,
    .safari input:checked+label:after,
    body input:checked+label+label:after,
    .safari input:checked+label+label:after {
        top: -2px;
        left: 7px;
    }
}

@media only screen and (min-width: 1400px) {
    .customButton,
    a.tilter {
        height: 6.1vh;
        line-height: 5.1vh;
    }
    input#email,
    .mlistLightBox input.submit {
        height: 6vh;
        line-height: 6vh;
    }
    .mlistLightBox input.submit {
        height: 6vh;
        line-height: 1;
    }
    .mlist-outer-wrapper .purchase-text {
        padding-top: 1.5vh;
    }
    .followWrapper {
        padding-top: 3vh;
    }
    .submitButton a,
    .emailSubmitButton a {
        height: 6vh;
        line-height: 6vh;
        margin-top: 2.5vh;
    }
    body input:checked+label:after,
    body input:checked+label+label:after {
        top: -0.5vh;
        left: 1.5vh;
    }
}

@media only screen and (max-width: 767px) {
    section.page.bk img,
    section.page.bk .videoWrap.vdo {
        display: none;
    }
    section.page.bk.active.flick img,
    section.page.bk.flipped.flick img,
    section.page.bk .mobFront.onlymob.flick img,
    section.page.bk.active.flick .videoWrap.vdo {
        display: block;
    }
}