* { -webkit-box-sizing: border-box; box-sizing: border-box; } *, :after, :before { border: 0 solid #e5e7eb; box-sizing: border-box; } .book-container { align-items: center; display: flex; flex-direction: column; justify-content: center; perspective: 600px; height: 430px; } .book-container .book { animation: 1s ease 0s 1 initAnimation-fd6a; height: 450px; margin-bottom: 15px; margin-top: 39px; position: relative; transform: rotateY(-30deg); transform-style: preserve-3d; transition: transform 1s ease; width: 200px; } .book-container .book > :first-child { background-color: #01060f; background-color: #01060f; border-radius: 0 2px 2px 0; box-shadow: 5px 5px 20px #aaaaaa9d; height: 283px; left: 0; position: absolute; top: 0; transform: translateZ(25px); width: 200px; } .book-container .book::after { background-color: #01060f; border-radius: 0 2px 2px 0; box-shadow: -5px 0 20px 10px #aaaaaa9d; content: " "; height: 283px; left: 0; position: absolute; top: 0; transform: translateZ(-25px); width: 200px; } .book-container .book::before { 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% ); content: " "; height: 277px; left: 0; position: absolute; top: 3px; transform: translateX(172px) rotateY(90deg); width: 48px; } .book-container .book:hover { transform: rotateY(0deg); } .container { align-items: stretch; display: flex; flex-wrap: wrap; justify-content: space-between; } .flickity-button { background: #58859770; } .flickity-page-dots .dot { background: #0093cd; } .flickity-prev-next-button { border-radius: 6px; } .flickity-viewport { background-color: #01060f00; /* overflow: inherit; */ position: inherit; } .gallery { background: #01060f00; margin-bottom: 40px; } .gallery-cell { counter-increment: gallery-cell; margin: auto; width: 250px; z-index: 10; } .gallery-cell:not(.is-selected) { filter: saturate(30%); z-index: -5; } .list-col { flex-grow: 2; min-width: 600px; } .view-col { flex-grow: 1; } @media only screen and (min-width: 768px) { .list-col { margin-right: 1%; } .view-col { max-width: 600px; } } .fa-solid, .fas { font-weight: 900; margin: 5px; } .icon { font-size: xx-large; } .icon + .view-details:empty +, .view-details:empty { display: none; } .view-container { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; } .view-container.row { flex-direction: row; } .w2ui-grid .w2ui-grid-body table td.w2ui-grid-data > div { overflow: visible; white-space: break-spaces; } .w2ui-grid-data { color: #000; word-wrap: normal; } A[href=""], A[href="#"] { color: inherit; cursor: default; pointer-events: none; text-decoration: none; } @media only screen and (max-width: 768px) { .view-container { display: flex; flex-direction: row; flex-wrap: wrap; } .view-details { display: none; } } * { -webkit-box-sizing: border-box; box-sizing: border-box; } *, :after, :before { border: 0 solid #e5e7eb; box-sizing: border-box; } .book-container { align-items: center; display: flex; flex-direction: column; justify-content: center; perspective: 600px; } .book-container .book { animation: 1s ease 0s 1 initAnimation-fd6a; height: 300px; margin-bottom: 3px; margin-top: 39px; position: relative; transform: rotateY(-30deg) scale(1); transform-style: preserve-3d; transition: transform 1s ease; width: 200px; } .book-container .book > :first-child { background-color: #01060f; background-color: #01060f; border-radius: 0 2px 2px 0; box-shadow: 5px 5px 20px #aaaaaa9d; height: 283px; left: 0; position: absolute; top: 0; transform: translateZ(25px); width: 200px; } .book-container .book::after { background-color: #01060f; border-radius: 0 2px 2px 0; box-shadow: -5px 0 20px 10px #aaaaaa9d; content: " "; height: 283px; left: 0; position: absolute; top: 0; transform: translateZ(-25px); width: 200px; } .book-container .book::before { 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% ); content: " "; height: 277px; left: 0; position: absolute; top: 3px; transform: translateX(172px) rotateY(90deg); width: 48px; } .book-container .book:hover { transform: rotateY(0deg) scale(1.1); } .gallery-cell > .book-container > .book { transition: transform 0.3s ease-out; } .gallery-cell.is-selected > .book-container > .book { transform: scale(1.25); transition: transform 0.3s ease-out; }