/**** BOOK 3D***/ *, :after, :before { box-sizing: border-box; border: 0 solid #e5e7eb; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } .book-container { display: flex; align-items: center; justify-content: center; perspective: 600px; flex-direction: column; } .book-container .book { width: 200px; height: 300px; position: relative; transform-style: preserve-3d; transform: rotateY(-30deg); transition: transform 1s ease; animation: 1s ease 0s 1 initAnimation-fd6a; margin-bottom: 3px; margin-top: 39px; } .book-container .book > :first-child { position: absolute; top: 0; left: 0; width: 200px; height: 283px; transform: translateZ(25px); background-color: #01060f; border-radius: 0 2px 2px 0; box-shadow: 5px 5px 20px #aaaaaa9d; background-color: #01060f; } .book-container .book::before { position: absolute; content: " "; left: 0; top: 3px; width: 48px; height: 277px; transform: translateX(172px) rotateY(90deg); background: linear-gradient( 90deg, #fff 0%, #f9f9f9 5%, #fff 10%, #f9f9f9 15%, #fff 20%, #f9f9f9 25%, #fff 30%, #f9f9f9 35%, #fff 40%, #f9f9f9 45%, #fff 50%, #f9f9f9 55%, #fff 60%, #f9f9f9 65%, #fff 70%, #f9f9f9 75%, #fff 80%, #f9f9f9 85%, #fff 90%, #f9f9f9 95%, #fff 100% ); } .book-container .book:hover { transform: rotateY(0deg); } .book-container .book::after { position: absolute; top: 0; left: 0; content: " "; width: 200px; height: 283px; transform: translateZ(-25px); background-color: #01060f; border-radius: 0 2px 2px 0; box-shadow: -05px 0 20px 10px #aaaaaa9d; } .book-container .book-title { } /**** Slideshow***/ .gallery { background: #01060f00; margin-bottom: 40px; } .gallery-cell { width: 66%; margin-right: 10px; counter-increment: gallery-cell; } .flickity-viewport { background-color: #01060f00; } .flickity-page-dots .dot { background: #0093cd; } .flickity-prev-next-button { border-radius: 6px; } .flickity-button { background: #588597; } /* Spells */ .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; } .list-col { width: 75%; float: left; } .view-col { width: 25%; float: left; } @media screen and (max-width: 768px) { .list-col, .view-col { width: 100%; float: none; } .list-col{ zoom:70% }; } .w2ui-grid-data { color: black; word-wrap: normal; } .w2ui-grid .w2ui-grid-body table td.w2ui-grid-data > div { overflow: visible; white-space: break-spaces; } .w2ui-grid .w2ui-grid-body table { } body.spells{ max-width: 100%; }