/**********************/
/****** GENERAL *******/
/**********************/

.bookContainer{
    margin-bottom:4em;
    position:relative;
}

.bookWrp{
    width:100%;
    max-width:1200px;
    height:800px;
    position:relative;
    z-index:2;
}

.book{
    width:100%;
    max-height:100%;
    /*position:absolute !important;
    top:0;
    left:50%;
    z-index:25;
    transform:translateX(-50%) !important;*/
}

.book .shadow{
    box-shadow:0 5px 8px rgba(0,0,0,.5);
}

.book .page-wrapper{
    -webkit-perspective:2000px;
    -moz-perspective:2000px;
    -ms-perspective:2000px;
    -o-perspective:2000px;
    perspective:2000px;
}

.book .front-side{
    background-position:0 0;
}

.book .p2{
    background-position: -600px 0 !important;
}

.book .back-side{
    background-position:-1200px 0 !important;
}

.book .own-size{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;
    background-image:url("/Images/pages.png");
    background-size:auto 100%;
    overflow:hidden;
    width:580px;
    height:780px;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
}
    .book .own-size > *{
        max-width:90%;
        max-height:90%;
    }
    .book .own-size.content-page{
        justify-content:flex-start;
    }

.book .own-size.even{
    background-position:left center;
}

.book .own-size.odd{
    background-position:right center;
}

.book .own-size.odd:after{
    font-family:FontAwesome !important;
    content:'\f061';
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position:absolute;
    bottom:10px;
    right:10px;
    font-size:1.5em;
    color:#ed1d24;
}

.paper-texture{
    background:url("/Images/paper.png") no-repeat top center;
    background-size:100% 100%;
    margin:50px auto 0 auto;
    padding:1em;
    position:relative;
}
.photo + .paper-texture{
    margin-top:0;
    z-index:1;
}
.book .photo,
.paper-texture.heading{
    margin:20px auto 0 auto;
}
    .photo .tape,
    .paper-texture.heading .tape{
        width:30px;
        height:40px;
    }

.paper-texture.heading{
    max-width:95%;
    padding:1em 2em;
    text-align:center;
}
.book .paper-texture:first-child{
    z-index:4;
}   
    .paper-texture.heading .instructionText{
        display:none;
    }
    .paper-texture.heading .largeText{
        margin:0;
    }

.tape{
    width:40px;
    height:60px;
    background:url("/Images/tape.png") no-repeat top center;
    background-size:100% 100%;
    position:absolute;
    top:0;
    left:50%;
    transform:translate(-50%, -50%);
}
    .button .tape{
        transform:translate(-50%, -75%);
    }

    .book .own-size > .tape{
        display:none;
        transform:translateX(-50%);
    }

.instructionsWrp{
    padding-left:1em;
    transform:rotate(3deg);
    position:absolute;
    top:50%;
    right:1em;
    z-index:1;
    transform:translateY(-50%);
}

.instructions,
.instructions.paper-texture{
    width:200px;
    margin:0;
}

.instructions p{
    color:black;
    font-family:'Handlee', sans-serif;
    font-weight:700;
    font-size:1.5em;
    margin:0;
}

.instructions:after{
    font-family:FontAwesome !important;
    content:'\f060';
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size:1.5em;
    color:#ed1d24;
}

.home .instructions,
.about .instructions,
.creative-team .instructions,
.project-partners .instructions{
    display:block;
}

.book .pig{
    width:80%;
    margin:100px auto;
    text-align:center;
}

.book .pig img{
    width:100%;
}

/*********************/
/****** IMAGES *******/
/*********************/

.book .preview{
    padding:2em;
    text-align:center;
    position:relative;
}

.photo{
    max-width:50% !important;
    height:30%;
    position:relative;
    transform:rotate(2deg);
    z-index:2;
}
img{
    cursor:pointer;
    display:block;
    width:auto;
    height:auto;
    max-height:100%;
    max-width:100%;
}
.book .photo img{
    cursor:auto;
}

.book .preview img[src*=".jpg"],
.photo img[src*=".jpg"],
.photo.whiteBg img{
    background:#ffffff;
    box-shadow:0 2px 2px rgba(0,0,0,.4);
}

.book .preview img[src*=".jpg"],
.photo.whiteBg img{
    padding:2em;
}

/**********************/
/****** CONTENT *******/
/**********************/
.book-content{
    padding:1em;
    height:100%;
    margin:0 auto;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
}

.book .content-page .body-content{
    height:calc(70% - 52px);
}

/***************************/
/****** PAGE BUTTONS *******/
/***************************/

.pageButtons{
    margin:0 auto;
    display:flex;
    align-items:stretch;
    justify-content:space-around;
    flex-wrap:wrap;
    padding:1em 0;
}
    .pageButtons .button{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        flex-wrap:nowrap;
        flex:0 1 31%;
        background:url("/Images/white-paper.jpg") repeat;
        border-radius:20px;
        padding:1em;
        margin-bottom:1em;
        position:relative;
    }

    .pageButtons .button.selected{
        padding:.25em;
    }
        .button h2{
            font-size:1.2em;
            margin-bottom:.5em;
        }
        .button h3{
            font-size:1.2em;
            margin-top:.5em;
        }
        .button img{
            max-width:90%;
            margin:0 auto;
        }
        .selected .button-content{
            cursor:default;
        }


/*********************/
/****** MOBILE *******/
/*********************/

.mobileBookWrp{
    display:none;
    padding:2em 0 1em 0;
    max-width:600px;
    margin:0 auto;
}

    .mobileBookWrp .cover{
        width:100%;
        padding-bottom:133.33%;
        box-shadow:0 2px 6px rgba(0,0,0,.3);
    }

    .mobileBookWrp .buttonWrp .button{
        display:block;
        width:100%;
        margin:.5em 0;
    }

.pageContents{
    padding:2em 0;
    position:relative;
    z-index:1;
}
    .pageItem{
        padding:2em 0;
    }
    .pageItem:first-child{
        padding-top:0;
    }
    .pageItem:last-child{
        padding-bottom:0;
    }

.book .button.upBtn{
    display:none;
    position:absolute;
    bottom:-.25em;
    right:0;
}