.wrap{perspective:800px;perspective-origin:50% 100px;position:fixed;right:15px;bottom:220px;z-index:999999999}.cube{position:relative;width:130px;transform-style:preserve-3d}.cube div{position:absolute;width:130px;height:130px;background:#f9f9f9;box-shadow:inset 0 0 20px rgba(125,125,125,0.2);font-size:20px;padding:5px;text-align:center;color:rgba(0,0,0,0.5);font-family:sans-serif}.cube .back{transform:translateZ(-65px) rotateY(180deg)}.cube .right{transform:rotateY(-270deg) translateX(65px);transform-origin:top right}.cube .left{transform:rotateY(270deg) translateX(-65px);transform-origin:center left}.cube .top{transform:rotateX(-90deg) translateY(-65px);transform-origin:top center}.cube .bottom{transform:rotateX(90deg) translateY(65px);transform-origin:bottom center}.cube .front{transform:translateZ(65px)}.cube .back h2,.cube .front h2,.cube .left h2,.cube .right h2{color:#373d3f;font-size:18px;font-weight:600;margin:10px 0 0 0}.cube .back h2 span,.cube .front h2 span,.cube .left h2 span,.cube .right h2 span{font-size:14px;display:block;font-weight:bold;color:#002147}.cube .back h3,.cube .front h3,.cube .left h3,.cube .right h3{color:#373d3f;font-size:13px;font-weight:600;margin:5px 0 0 0}.cube .front,.cube .back,.cube .left,.cube .right{border-top:3px solid transparent}.cube .front{border-color:#ed1b2f}.cube .back{border-color:#ff9727}.cube .left{border-color:#199010}.cube .right{border-color:#01a5e2}.cube .front h2{color:#ed1b2f}.cube .back h2{color:#ff9727}.cube .left h2{color:#199010}.cube .right h2{color:#01a5e2}.front-btn{background-color:#ed1b2f;border:2px solid #ab0b25;text-transform:uppercase;font-weight:400;font-size:13px;margin-top:10px;padding:6px 8px}.front-btn:hover,.front-btn:focus{background-color:#ab0b25;border:2px solid #ed1b2f}.right-btn{background-color:#01a5e2;border:2px solid #3b94d1;text-transform:uppercase;font-weight:400;font-size:13px;margin-top:10px;padding:6px 8px}.right-btn:hover,.right-btn:focus{background-color:#3b94d1;border:2px solid #01a5e2}.back-btn{background-color:#ff9727;border:2px solid #f26722;text-transform:uppercase;font-weight:400;font-size:13px;margin-top:10px;padding:6px 8px}.back-btn:hover,.back-btn:focus{background-color:#f26722;border:2px solid #ff9727}.left-btn{background-color:#199010;border:2px solid #098400;text-transform:uppercase;font-weight:400;font-size:13px;margin-top:10px;padding:6px 8px}.left-btn:hover,.left-btn:focus{background-color:#098400;border:2px solid #199010}@media(max-width:767px){.cube{width:100px}.cube div{width:100px;height:100px}.cube .back h3,.cube .front h3,.cube .left h3,.cube .right h3{font-size:11px}.left-btn{font-size:12px;padding:2px 0}.back-btn{font-size:11px}.cube .back h2 span,.cube .front h2 span,.cube .left h2 span,.cube .right h2 span{font-size:11px}.cube .back{transform:translateZ(-49px) rotateY(180deg)}.cube .front{transform:translateZ(50px)}.cube .left{transform:rotateY(270deg) translateX(-50px)}.cube .right{transform:rotateY(-270deg) translateX(49px)}.cube .back h2,.cube .front h2,.cube .left h2,.cube .right h2{font-size:11px}}@keyframes spin{from,20%{-moz-transform:rotateY(0);-ms-transform:rotateY(0);transform:rotateY(0)}25%,45%{-moz-transform:rotateY(-90deg);-ms-transform:rotateY(-90deg);transform:rotateY(-90deg)}50%,70%{-moz-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg)}75%,95%{-moz-transform:rotateY(-270deg);-ms-transform:rotateY(-270deg);transform:rotateY(-270deg)}to{-moz-transform:rotateY(-360deg);-ms-transform:rotateY(-360deg);transform:rotateY(-360deg)}}.cube{-webkit-animation-name:spin;-webkit-animation-timing-function:ease-out;-webkit-animation-iteration-count:infinite;-webkit-animation-duration:20s;animation-name:spin 5s;animation-timing-function:ease-out;animation-iteration-count:infinite;animation-duration:20s;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}