/* Content Flip Style */
.bb-bookblock {
        width: 400px;
        height: 300px;
        position: relative;
        background: #000;
        z-index: 100;
}

.bb-page {
        width: 50%;
        height: 100%;
        left: 50%;
        position: absolute;

        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;

        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        -ms-transform-origin: left center;
        transform-origin: left center;
}

.bb-page > div,
.bb-outer,
.bb-content {
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
}

.bb-content {
        background: darkred;
}

.bb-inner {
        position: relative;
        width: 100%;
        height: 100%;
}

.bb-overlay, .bb-outer {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
}

.bb-page > div {
        width: 100%;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;

        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
}

.bb-back {
        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -o-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
}

.bb-outer {
        width: 100%;
        overflow: hidden;
        z-index: 999;
}

.bb-overlay,
.bb-flipoverlay {
        background-color: rgba(0, 255, 0, 0.3);
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1000;
}

.bb-flipoverlay {
        background-color: rgba(0, 255, 0, 0.3);
}

.bb-bookblock > div.bb-page:first-child,
.bb-bookblock > div.bb-page:first-child .bb-back {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        transform: rotateY(180deg);
}

.js .bb-item {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        background: darkgray;
}