@keyframes rotate{0%{transform:rotateX(-37.5deg) rotateY(45deg)}50%{transform:rotateX(-37.5deg) rotateY(405deg)}to{transform:rotateX(-37.5deg) rotateY(405deg)}}.cube,.cube *{height:41px;position:absolute;width:41px}.sides{animation:rotate 3s ease infinite;animation-delay:.8s;transform:rotateX(-37.5deg) rotateY(45deg);transform-style:preserve-3d}.cube .sides *{background-image:linear-gradient(45deg,#abababbf,#999999bf);box-sizing:border-box}.cube .sides .top{animation:top-animation 3s ease infinite;animation-delay:0s;animation-fill-mode:forwards;background:#df413dbf;transform:rotateX(90deg) translateZ(40px);transform-origin:50% 50%}@keyframes top-animation{0%{opacity:1;transform:rotateX(90deg) translateZ(40px)}20%{opacity:1;transform:rotateX(90deg) translateZ(20px)}70%{opacity:1;transform:rotateX(90deg) translateZ(20px)}90%{opacity:1;transform:rotateX(90deg) translateZ(40px)}to{opacity:1;transform:rotateX(90deg) translateZ(40px)}}.cube .sides .bottom{animation:bottom-animation 3s ease infinite;animation-delay:0s;animation-fill-mode:forwards;background:#df413dbf;transform:rotateX(-90deg) translateZ(40px);transform-origin:50% 50%}@keyframes bottom-animation{0%{opacity:1;transform:rotateX(-90deg) translateZ(40px)}20%{opacity:1;transform:rotateX(-90deg) translateZ(20px)}70%{opacity:1;transform:rotateX(-90deg) translateZ(20px)}90%{opacity:1;transform:rotateX(-90deg) translateZ(40px)}to{opacity:1;transform:rotateX(-90deg) translateZ(40px)}}.cube .sides .front{animation:front-animation 3s ease infinite;animation-delay:.1s;animation-fill-mode:forwards;transform:rotateY(0) translateZ(40px);transform-origin:50% 50%}@keyframes front-animation{0%{opacity:1;transform:rotateY(0) translateZ(40px)}20%{opacity:1;transform:rotateY(0) translateZ(20px)}70%{opacity:1;transform:rotateY(0) translateZ(20px)}90%{opacity:1;transform:rotateY(0) translateZ(40px)}to{opacity:1;transform:rotateY(0) translateZ(40px)}}.cube .sides .back{animation:back-animation 3s ease infinite;animation-delay:.1s;animation-fill-mode:forwards;transform:rotateY(-180deg) translateZ(40px);transform-origin:50% 50%}@keyframes back-animation{0%{opacity:1;transform:rotateY(-180deg) translateZ(40px)}20%{opacity:1;transform:rotateY(-180deg) translateZ(20px)}70%{opacity:1;transform:rotateY(-180deg) translateZ(20px)}90%{opacity:1;transform:rotateY(-180deg) translateZ(40px)}to{opacity:1;transform:rotateY(-180deg) translateZ(40px)}}@keyframes left-animation{0%{opacity:1;transform:rotateY(-90deg) translateZ(40px)}20%{opacity:1;transform:rotateY(-90deg) translateZ(20px)}70%{opacity:1;transform:rotateY(-90deg) translateZ(20px)}90%{opacity:1;transform:rotateY(-90deg) translateZ(40px)}to{opacity:1;transform:rotateY(-90deg) translateZ(40px)}}@keyframes right-animation{0%{opacity:1;transform:rotateY(90deg) translateZ(40px)}20%{opacity:1;transform:rotateY(90deg) translateZ(20px)}70%{opacity:1;transform:rotateY(90deg) translateZ(20px)}90%{opacity:1;transform:rotateY(90deg) translateZ(40px)}to{opacity:1;transform:rotateY(90deg) translateZ(40px)}}