.container {background:#fff;}
.bb-bookblock {
         float: left !important;
         height: 100%;
         margin: 0 !important;
         position: fixed !important;
         text-align: center;
         width: 100%;
         }
         img {
         box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
         }
         body {
         overflow-x: hidden;
         margin: 0;
         padding: 0;
         background: #fff none repeat scroll 0 0;
         height: 100%;
         }
         img {
         height: 100%;
         width: auto;
         }
         ul.bb-custom-grid {
         display: block;
         height: 100%;
         left: 5%;
         list-style: outside none none;
         margin: 0;
         padding: 0;
         position: relative;
         width: 90%;
         }
         ul.bb-custom-grid:before,
         ul.bb-custom-grid:after {
         content: " ";
         display: table;
         }
         ul.bb-custom-grid:after {
         clear: both;
         }
         /* end clearfix hack */
         ul.bb-custom-grid li:nth-child(odd) {
         }
         ul.bb-custom-grid li:after {
         right: 10px;
         left: auto;
         -webkit-transform: rotate(3deg);
         transform: rotate(3deg);
         }
         ul.bb-custom-grid li a {
         display: block;
         float: left;
         height: 100%;
         width: 100%;
         }
         ul.bb-custom-grid li h3 {
         color: #9a9b92;
         margin: 0;
         padding: 0;
         text-transform: uppercase;
         font-weight: 700;
         font-size: 14px;
         line-height: 35px;
         letter-spacing: 1px;
         }
         ul.bb-custom-grid nav {
         background: #fff none repeat scroll 0 0;
         box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
         height: 100%;
         left: 0;
         margin-top: 0;
         overflow-y: ;
         padding-bottom: 5px;
         position: relative;
         text-align: center;
         top: 0;
         width: 15%;
         z-index: 101;
         -webkit-overflow-scrolling: touch;
        



         }
         ul.bb-custom-grid nav span {
         background: #f0f0f0 none repeat scroll 0 0;
         border-radius: 0;
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset, 0 2px 1px rgba(255, 255, 255, 0.9);
         cursor: pointer;
         display: inline-block;
         height: auto;
         margin: 0;
         padding: 10px 0;
         width: 99%;
         }
         ul.bb-custom-grid nav span.bb-current {
         background: #263253;
         color: #fff;
         }
         .bb-bookblock {
         backface-visibility: hidden;
         margin: 0 auto;
         perspective: 1300px;
         position: relative;
         width: 100%;
         z-index: 100;
         }
         .bb-page {
         position: absolute;
         -webkit-transform-style: preserve-3d;
         transform-style: preserve-3d;
         -webkit-transition-property: -webkit-transform;
         transition-property: transform;
         }
         .bb-vertical .bb-page {
         width: 50%;
         height: 100%;
         left: 50%;
         -webkit-transform-origin: left center;
         transform-origin: left center;
         }
         .bb-horizontal .bb-page {
         width: 100%;
         height: 50%;
         top: 50%;
         -webkit-transform-origin: center top;
         transform-origin: center top;
         }
         .bb-page > div,
         .bb-outer,
         .bb-content,
         .bb-inner {
         position: absolute;
         height: 100%;
         width: 100%;
         top: 0;
         left: 0;
         -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
         }
         .bb-vertical .bb-content {
         width: 200%;
         }
         .bb-horizontal .bb-content {
         height: 200%;
         }
         .bb-page > div {
         width: 100%;
         -webkit-transform-style: preserve-3d;
         transform-style: preserve-3d;
         }
         .bb-vertical .bb-back {
         -webkit-transform: rotateY(-180deg);
         transform: rotateY(-180deg);
         }
         .bb-horizontal .bb-back {
         -webkit-transform: rotateX(-180deg);
         transform: rotateX(-180deg);
         }
         .bb-outer {
         width: 100%;
         overflow: hidden;
         z-index: 999;
         }
         .bb-overlay, 
         .bb-flipoverlay {
         background-color: rgba(0, 0, 0, 0.7);
         position: absolute;
         top: 0px;
         left: 0px;
         width: 100%;
         height: 100%;
         opacity: 0;
         }
         .bb-flipoverlay {
         background-color: rgba(0, 0, 0, 0.2);
         }
         .bb-bookblock.bb-vertical > div.bb-page:first-child,
         .bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back {
         -webkit-transform: rotateY(180deg);
         transform: rotateY(180deg);
         }
         .bb-bookblock.bb-horizontal > div.bb-page:first-child,
         .bb-bookblock.bb-horizontal > div.bb-page:first-child .bb-back {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
         }
         /* Content display */
         .bb-content {
         background: #fff;
         }
         .bb-vertical .bb-front .bb-content {
         left: -100%;
         }
         .bb-horizontal .bb-front .bb-content {
         top: -100%;
         }
         /* Flipping classes */
         .bb-vertical .bb-flip-next,
         .bb-vertical .bb-flip-initial {
         -webkit-transform: rotateY(-180deg);
         transform: rotateY(-180deg);
         }
         .bb-vertical .bb-flip-prev {
         -webkit-transform: rotateY(0deg);
         transform: rotateY(0deg);
         }
         .bb-horizontal .bb-flip-next,
         .bb-horizontal .bb-flip-initial {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
         }
         .bb-horizontal .bb-flip-prev {
         -webkit-transform: rotateX(0deg);
         transform: rotateX(0deg);
         }
         .bb-vertical .bb-flip-next-end {
         -webkit-transform: rotateY(-15deg);
         transform: rotateY(-15deg);
         }
         .bb-vertical .bb-flip-prev-end {
         -webkit-transform: rotateY(-165deg);
         transform: rotateY(-165deg);
         }
         .bb-horizontal .bb-flip-next-end {
         -webkit-transform: rotateX(15deg);
         transform: rotateX(15deg);
         }
         .bb-horizontal .bb-flip-prev-end {
         -webkit-transform: rotateX(165deg);
         transform: rotateX(165deg);
         }
         .bb-item {
         background: #fff none repeat scroll 0 0;
         bottom: 0;
         display: none;
         height: 100%;
         left: 0;
         position: absolute;
         text-align: center;
         top: 0;
         width: 100%;
         }
         /* No JS */
         .no-js .bb-bookblock, 
         .no-js ul.bb-custom-grid li {
         width: auto;
         height: auto;
         }
         .no-js .bb-item {
         display: block;
         position: relative;
         }




         @media screen and (min-width: 600px) and (max-width: 900px) {
 
            ul.bb-custom-grid {
                display: block;
                height: 100%;
                left: 5%;
                list-style: outside none none;
                /* margin: auto; */
                padding: 0;
                /* position: relative; */
                width: 90%;
            }
            ul.bb-custom-grid nav {
            background: #fff none repeat scroll 0 0;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
            height: 100%;
            left: -62px;
            margin-top: 0;
            overflow-y: ;
            padding-bottom: 5px;
            position: relative;
            text-align: center;
            top: 0;
            width: 15%;
            z-index: 101;
            -webkit-overflow-scrolling: touch;
            }
            .bb-bookblock {
            backface-visibility: hidden;
            margin: 0 auto;
            perspective: 1300px;
            position: relative;
            width: 100%;
            z-index: 100;
            }

           /* Images */
    img {
    height: 100%;
    width: auto;
    float: right;
}
        }


 @media screen and (min-width: 600px) and (max-width: 900px) {

    /* Grid Container */
    ul.bb-custom-grid {
        display: block;
        width: 90%;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        height: 100%;
        position: relative;
    }

    /* Navigation */
    ul.bb-custom-grid nav {
        background: #fff;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        width: 15%;
        height: 100%;
        position: relative;
        text-align: center;
        padding-bottom: 5px;
        overflow-y: auto; /* FIXED */
        -webkit-overflow-scrolling: touch;
        z-index: 101;
    }

    /* Bookblock */
    .bb-bookblock {
        width: 100%;
        margin: 0 auto;
        position: relative;
        perspective: 1300px;
        backface-visibility: hidden;
        z-index: 100;
    }

    /* Images */
    img {
    height: 100%;
    width: auto;
    float: right;
}
}


@media screen and (max-width: 600px) {

    /* Grid Container */
    ul.bb-custom-grid {
        width: 100%;
        padding: 0;
        margin: 0;
        display: block;
    }

    /* Navigation - Full Width on Mobile */
    ul.bb-custom-grid nav {
        width: 100%;
        height: auto;
        position: relative;
        left: 0;
        top: 0;
        background: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 10px 0;
        overflow: scroll !important;
    }

    /* Bookblock Section */
    .bb-bookblock {
        width: 100%;
        margin: 0 auto;
        position: relative;
        perspective: 1000px;
    }

  
}




/* iPad Pro Landscape */
/* @media only screen 
and (min-width: 1024px) 
and (max-width: 1366px) {

    ul.bb-custom-grid {
        width: 95%;
        left: 2%;
    }

    ul.bb-custom-grid nav {
        width: 10%;
        left: -2%;
    }

    .bb-bookblock {
        width: 80%;
        float: right;
    }
} */