/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                   1300PX WIDTH                   //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/

@media only screen and (max-width:1300px){
    /*==========----------==========*/
    /*          TYPOGRAPHY          */
    /*==========----------==========*/
    h1{
        font-size:2.369em;
    }
    h2{
        font-size:1.777em;
    }
    h3{
        font-size:1.333em;
    }

    /*==========----------==========*/
    /*             BOOK             */
    /*==========----------==========*/
    .bookWrp{
        max-width:900px;
        height:600px;
        margin:0 auto;
    }

    .book .own-size{
        width:430px;
        height:580px;
    }

    .book .own-size > *{
        max-width:95%;
        max-height:95%;
    }

    .book .tape{
        display:none;
    }

    .paper-texture{
        margin-top:0 !important;
    }

    .book .preview{
        padding:2em;
    }

    .pageButtons .button{
        flex:0 1 45%;
    }
}

/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                   1200PX WIDTH                   //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/

@media only screen and (max-width:1200px){
    /*==========----------==========*/
    /*            HEADER            */
    /*==========----------==========*/
    .home header a.logo{
        width:100%;
        max-width:500px;
    }
    .home header .heading{
        font-size:2.25em;
    }
    /*==========----------==========*/
    /*           CONTACT            */
    /*==========----------==========*/
    .contact .paper-texture.heading{
        margin:20px auto;
        width:100%;
        max-width:600px;
    }
    .contact .heading p{
        font-size:1em;
    }
    .contact .paper-texture.heading .tape{
        display:block;
    }
    .contact .letterWrp{
        transform:none;
    }
    .contact .book{
        background:none;
        min-height:0;
    }
    .contact .pencil-eraser{
        display:none;
    }
}

/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                   1000PX WIDTH                   //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/
@media only screen and (max-width:1000px){
    /*==========----------==========*/
    /*           GENERAL            */
    /*==========----------==========*/
    .contentWrp{
        padding:0 1em;
    }
    footer{
        padding:2em 0;
    }

    /*==========----------==========*/
    /*            HEADER            */
    /*==========----------==========*/
    header{
        padding:1em !important;
        margin-bottom:4em !important;
    }

    /*==========----------==========*/
    /*             BOOK             */
    /*==========----------==========*/
    .bookWrp,
    .book .content-page .body-content{
        max-width:none;
        height:auto;
    }

    .mobileBookWrp,
    .book .tape,
    .book .own-size > .tape,
    .paper-texture.heading .instructionText{
        display:block;
    }

    .home .bookWrp,
    .paper-texture:not(.heading) > .tape,
    .instructionsWrp,
    .hard,
    .hard + .own-size,
    .own-size:nth-last-child(3),
    .topic-page:nth-child(2n + 6),
    .photo .tape{
        display:none;
    }

    .bookContainer{
        width:100%;
        max-width:600px;
        margin:0 auto;
    }

    .book{
        position:static !important;
        transform:none !important;
    }
    .pageButtons{
        justify-content:center;
        position:relative;
        z-index:2;
    }
        .pageButtons .button{
            padding:1.5em;
            margin:.5em;
            flex:0 1 150px;
        }
        .pageButtons .button.selected{
            border:none;
            padding:1.5em;
        }
            .button.selected .tape{
                top:0;
            }

    .book .own-size{
        background:url('/Images/paper.png') no-repeat top center / 100% 100%;
        height:auto;
        width:100%;
        padding:2em;
        margin:4em 0;
        overflow:visible;
        position:relative;
    }

    .book .own-size.no-texture{
        background:url('/Images/white-paper.jpg') repeat;
        border-radius:15px;
        box-shadow:0 6px 12px rgba(0,0,0,.25);
    }
        .book .own-size.no-texture .book-content{
            padding:0 0 4em 0;
        }

    .book .hard + .own-size + .own-size{
        background:none;
        margin-top:0;
        padding:0;
    }
    .own-size:nth-last-child(4){
        margin-bottom:0;
    }
        .book .own-size .paper-texture:not(.heading){
            background:none;
        }
        .book .own-size > *{
            max-width:none;
            max-height:none;
        }
    .book .photo{
        margin:2em auto 0 auto;
        width:100%;
        max-width:200px !important;
        height:auto;
    }
        .photo img{
            width:100%;
        }
    .book-content{
        padding:4em 1em;
        height:auto;
    }

    .book img{
        cursor:auto;
        pointer-events:none;
    }

    .paper-texture{
        padding:0;
    }

    .paper-texture:not(.heading) .tape{
        transform:translateX(-50%);
    }
    .book .button.upBtn{
        display:block;
    }
}

/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                    750PX WIDTH                   //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/
@media only screen and (max-width:750px){
    /*==========----------==========*/
    /*           GENERAL            */
    /*==========----------==========*/
    section,
    footer{
        position:relative;
        z-index:1;
    }

    footer{
        padding:4em 0 2em 0;
    }

    .schoolItems{
        display:none;
    }

    /*==========----------==========*/
    /*            HEADER            */
    /*==========----------==========*/
    header{
        background:none !important;
        position:relative;
        z-index:10;
    }

    header .headingWrp{
        position:static;
    }

    /*==========----------==========*/
    /*            FOOTER            */
    /*==========----------==========*/
    footer .contentWrp{
        flex-direction:column;
        align-items:center;
    }
        footer .contentWrp > *{
            padding:1em 0;
        }
        footer .contentWrp > *:first-child{
            padding-top:0;
        }
        footer .contentWrp > *:last-child{
            padding-bottom:0;
        }

    /*==========----------==========*/
    /*            LETTER            */
    /*==========----------==========*/
    .letterWrp{
        transform:none;
    }
}


/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                    700PX WIDTH                   //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/
@media only screen and (max-width:700px){
    .blog-entry .letter{
        transform:none !important;
    }

    .blog-entry .letter-content{
        padding-left:12%;
    }
}

/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                    500PX WIDTH                   //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/
@media only screen and (max-width:500px){
    /*==========----------==========*/
    /*            SLICK             */
    /*==========----------==========*/
    .slick-arrow{
        width:36px;
        height:36px;
    }
        .slick-arrow:before{
            font-size:20px;
        }

    /*==========----------==========*/
    /*           LIGHTBOX           */
    /*==========----------==========*/
    .lightboxWrp .sliderNav{
        padding:0 .5em;
    }
    .isSlider .lightbox{
        padding:1em 2em;
    }

    /*==========----------==========*/
    /*            LETTER            */
    /*==========----------==========*/
    .letter,
    .bookmark{
        height:300px;
    }

    .bookmark{
        width:80px;
        right:20px;
    }

        .bookmark h2,
        .bookmark h3{
            font-size:1em !important;
        }

    .letter-content{
        padding-left:47px;
    }
}

/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                    400PX WIDTH                   //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/
@media only screen and (max-width:400px){
    .home header .heading{
        font-size:1.5em;
    }
}