.bb-bookblock { height: 512px; margin: 0 auto; position: relative; z-index: 100; -webkit-perspective: 3500px; perspective: 3500px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.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 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; background: #fff; }
/* 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; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }