@keyframes cube-spin1{0%{transform:rotateY(0)}100%{transform:rotateY(90deg)}}@keyframes cube-spin2{0%{transform:rotateY(90deg)}100%{transform:rotateY(180deg)}}@keyframes cube-spin3{0%{transform:rotateY(180deg)}100%{transform:rotateY(270deg)}}@keyframes cube-spin4{0%{transform:rotateY(270deg)}100%{transform:rotateY(360deg)}}@keyframes cube-spin{0%{transform:rotateY(0)}25%{transform:rotateY(90deg)}50%{transform:rotateY(180deg)}75%{transform:rotateY(270deg)}100%{transform:rotateY(360deg)}}@-webkit-keyframes spin-vertical{from{-webkit-transform:rotateX(0)}to{-webkit-transform:rotateX(-360deg)}}@-ms-keyframes spin-vertical{from{ms-transform:rotateX(0)}to{ms-transform:rotateX(-360deg)}}@keyframes spin-vertical{from{transform:rotateX(0)}to{transform:rotateX(-360deg)}}.cube-wrap{-webkit-perspective:800px;-webkit-perspective-origin:50% 100px;-moz-perspective:800px;-moz-perspective-origin:50% 100px;-ms-perspective:800px;-ms-perspective-origin:50% 100px;perspective:800px;perspective-origin:50%;flex:1;justify-content:center}.cube{position:relative;width:200px;height:500px;margin:0 auto;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-animation-fill-mode:forwards!important;-moz-animation-fill-mode:forwards!important;-o-animation-fill-mode:forwards!important;-ms-animation-fill-mode:forwards!important;animation-fill-mode:forwards!important}.cube:hover{-webkit-animation-play-state:paused;animation-play-state:paused}.cube>*{position:absolute;width:100%;height:100%;background:#f6f6f6;box-shadow:inset 0 0 100px rgba(125,125,125,.4);font-size:20px;text-align:center;line-height:200px;color:rgba(0,0,0,.5);font-family:sans-serif;text-transform:uppercase}.depth>*{background-position:center;background-repeat:no-repeat;background-size:contain;display:flex;align-items:center;justify-content:center;flex-direction:row}.depth>*>*{max-width:100%;max-height:100%;width:auto;height:auto;padding:1px}.depth .front-pane,.depth .s1{-webkit-transform:translateZ(100px);-moz-transform:translateZ(100px);-ms-transform:translateZ(100px);transform:translateZ(100px)}.depth .back-pane,.depth .s3{-webkit-transform:translateZ(-100px) rotateY(180deg);-moz-transform:translateZ(-100px) rotateY(180deg);-ms-transform:translateZ(-100px) rotateY(180deg);transform:translateZ(-100px) rotateY(180deg)}.depth .right-pane,.depth .s4{-webkit-transform:rotateY(-270deg) translateX(100px);-webkit-transform-origin:top right;transform-origin:top right;-moz-transform:rotateY(-270deg) translateX(100px);-moz-transform-origin:top right;-ms-transform:rotateY(-270deg) translateX(100px);-ms-transform-origin:top right;transform:rotateY(-270deg) translateX(100px)}.depth .left-pane,.depth .s2{-webkit-transform:rotateY(270deg) translateX(-100px);-webkit-transform-origin:center left;transform-origin:center left;-moz-transform:rotateY(270deg) translateX(-100px);-moz-transform-origin:center left;-ms-transform:rotateY(270deg) translateX(-100px);-ms-transform-origin:center left;transform:rotateY(270deg) translateX(-100px)}.depth .top-pane{-webkit-transform:rotateX(-90deg) translateY(-100px);-webkit-transform-origin:top center;-moz-transform:rotateX(-90deg) translateY(-100px);-moz-transform-origin:top center;-ms-transform:rotateX(-90deg) translateY(-100px);-ms-transform-origin:top center;transform:rotateX(-90deg) translateY(-100px);transform-origin:top center}.depth .bottom-pane{-webkit-transform:rotateX(90deg) translateY(100px);-webkit-transform-origin:bottom center;transform-origin:bottom center}.cube-wrap.horizontal .cube .top-pane{display:none}.cube-wrap.horizontal .cube .bottom-pane{box-shadow:0 0 40px rgba(0,0,0,.35);height:0;padding-top:100%;border:0}.cube-wrap.vertical .cube{-webkit-transform-origin:0 100px;-moz-transform-origin:0 100px;-ms-transform-origin:0 100px;transform-origin:0 100px;-webkit-animation:spin-vertical 5s infinite linear;-moz-animation:spin-vertical 5s infinite linear;-ms-animation:spin-vertical 5s infinite linear;animation:spin-vertical 5s infinite linear}.cube-wrap.vertical .depth div.top-pane{-webkit-transform:rotateX(-270deg) translateY(-100px);-moz-transform:rotateX(-270deg) translateY(-100px);-ms-transform:rotateX(-270deg) translateY(-100px);transform:rotateX(-270deg) translateY(-100px)}.cube-wrap.vertical .depth div.back-pane{-webkit-transform:translateZ(-100px) rotateX(180deg);-moz-transform:translateZ(-100px) rotateX(180deg);-ms-transform:translateZ(-100px) rotateX(180deg);transform:translateZ(-100px) rotateX(180deg)}.cube-wrap.vertical .depth div.bottom-pane{-webkit-transform:rotateX(-90deg) translateY(100px);-moz-transform:rotateX(-90deg) translateY(100px);-ms-transform:rotateX(-90deg) translateY(100px);transform:rotateX(-90deg) translateY(100px)}.cube-wrap.flat{-webkit-perspective:none;-webkit-perspective-origin:0 0;-moz-perspective:none;-moz-perspective-origin:0 0;-ms-perspective:none;-ms-perspective-origin:0 0;perspective:none;perspective-origin:0 0}.shadow-wrapper{perspective:800px;perspective-origin:50% 100px}.shadow{position:relative;width:200px;transform-style:preserve-3d}