.wrapper{width:3.6em;height:3.6em;transform:rotateX(0deg) rotate(0deg);transform-style:preserve-3d;display:flex;flex-wrap:wrap;position:absolute}.wrapper>div{width:1em;height:1em;padding:.1em}.wrapper .box-wrapper{transform-style:preserve-3d;width:1em;height:1em}.wrapper .crate .box{transition:transform .5s ease-in-out;transform:translateZ(-.4em)}.running .wrapper .crate .box{transform:translateZ(.5em)}.wrapper .crate:nth-of-type(7) .box{transition-delay:.1s}.wrapper .crate:nth-of-type(5) .box{transition-delay:.2s}.wrapper .crate:first-of-type .box{transition-delay:.3s}.wrapper .crate:nth-of-type(3) .box{transition-delay:.4s}.wrapper .crate:nth-of-type(2) .box{transition-delay:.5s}.wrapper .crate:nth-of-type(4) .box{transition-delay:.6s}.wrapper .crate:nth-of-type(6) .box{transition-delay:.7s}.wrapper .box{width:1em;height:1em;position:relative;transform:translateZ(.5em);transform-style:preserve-3d}.wrapper .box .face{width:100%;height:100%;position:absolute;top:0;left:0;background:var(--box)}.wrapper .box .front{transform:rotateX(90deg) translateZ(.5em);border:.01em solid var(--border)}.wrapper .box .back{transform:rotateX(-90deg) translateZ(.5em);border:.01em solid var(--border)}.wrapper .box .right{transform:rotateY(-90deg) translateZ(.5em)}.wrapper .box .left,.wrapper .box .right{background:var(--box-dark);border:.01em solid var(--border)}.wrapper .box .left{transform:rotateY(90deg) translateZ(.5em)}.wrapper .box .top{transform:translateZ(.5em);border:.01em solid var(--border)}.wrapper .box .bottom{transform:translateZ(-.49em)}.wrapper .box .hook{top:30%;left:30%;width:40%;height:40%;border:.1em solid #202020;border-radius:30%;transform:translateZ(.5em) rotateY(90deg)}.wrapper .box .hook,.wrapper .target{position:absolute;box-sizing:border-box}.wrapper .target{width:100%;height:100%;opacity:0;transform-style:preserve-3d;transition:transform .6s ease-in-out;transition-delay:.225s}.grid-3x3{display:grid;grid-template-columns:repeat(3,1fr);width:3.6em;height:3.6em;transform:rotateX(45deg) rotate(-45deg);transform-style:preserve-3d;position:relative;width:100%;aspect-ratio:1/1}.grid-3x3>*{width:1em;height:1em}.wrapper .target .target-wrapper{position:absolute;width:100%;height:100%}.transition .wrapper .target{opacity:1;transform:rotate(180deg)}.transition .wrapper .target .target-wrapper{transform-style:preserve-3d;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-name:transfer;animation-name:transfer}.crate-0 .wrapper .target .box-wrapper{transform:translateZ(0)}.crate-1 .wrapper .target .box-wrapper{transform:translate3d(1.2em,0,0)}.crate-2 .wrapper .target .box-wrapper{transform:translate3d(2.4em,0,0)}.crate-3 .wrapper .target .box-wrapper{transform:translate3d(0,1.2em,0)}.crate-4 .wrapper .target .box-wrapper{transform:translate3d(2.4em,1.2em,0)}.crate-5 .wrapper .target .box-wrapper{transform:translate3d(0,2.4em,0)}.crate-6 .wrapper .target .box-wrapper{transform:translate3d(1.2em,2.4em,0)}.crate-7 .wrapper .target .box-wrapper{transform:translate3d(2.4em,2.4em,0)}.transition .wrapper .source{-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-name:source;animation-name:source}.transition .wrapper .destination{-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-name:destination;animation-name:destination}.wrapper .base{position:absolute;padding:0}.wrapper .base .box{width:3.6em;height:3.6em;transform:translateZ(-.5em)}.wrapper .base .box .top{background:var(--base)}.wrapper .base .box .back,.wrapper .base .box .front{height:1em;background:var(--base-dark)}.wrapper .base .box .back{transform:rotateX(-90deg) translateZ(3.1em)}.wrapper .base .box .left,.wrapper .base .box .right{width:1em;background:var(--base-dark)}.wrapper .base .box .left{transform:rotateY(90deg) translateZ(3.1em)}.wrapper .base .box .bottom{transform:translateZ(-1.5em);background:rgba(0,0,0,.15)}.wrapper .crane{height:.7em;padding:.25em}.wrapper .crane,.wrapper .mast{transform-style:preserve-3d;width:.7em;position:relative}.wrapper .mast{height:4.83em;transform-origin:0 0;transform:rotateX(90deg) translateZ(-.35em)}.wrapper .mast .face{color:var(--crane);width:100%;height:100%;position:absolute;top:0;left:0;border:.075em solid;border-top:none;border-bottom:.15em solid;box-sizing:border-box}.wrapper .mast .support{height:.7em;border-top:.15em solid;box-sizing:border-box;overflow:hidden;position:relative}.wrapper .mast .support:after{content:" ";position:absolute;top:50%;margin-top:-.0375em;left:-50%;width:200%;height:0;border-top:.075em solid;transform:rotate(45deg)}.wrapper .mast .back,.wrapper .mast .front{color:var(--crane-dark)}.wrapper .mast .front{transform:rotateY(90deg) translateZ(.35em)}.wrapper .mast .back{transform:rotateY(-90deg) translateZ(.35em)}.wrapper .mast .left{transform:translateZ(.35em)}.wrapper .mast .right{transform:rotateY(180deg) translateZ(.35em)}.wrapper .cap-wrapper{transform-style:preserve-3d;top:-.1em;left:-.1em;transform:translateZ(4.9em)}.wrapper .cap,.wrapper .cap-wrapper{position:absolute;width:1em;height:1em}.wrapper .cap{transform-style:preserve-3d;background:var(--crane);border:.075em solid var(--crane-dark);top:.1em;left:.1em;border-radius:.2em;transition:transform 1.5s ease-in-out}.transition .wrapper .cap{transition-delay:.225s;transition-duration:.6s}.crate-0 .wrapper .cap{transform:rotate(135deg)}.crate-0.transition .wrapper .cap{transform:rotate(315deg)}.crate-1 .wrapper .cap{transform:rotate(180deg)}.crate-1.transition .wrapper .cap{transform:rotate(1turn)}.crate-2 .wrapper .cap{transform:rotate(-135deg)}.crate-2.transition .wrapper .cap{transform:rotate(45deg)}.crate-3 .wrapper .cap{transform:rotate(90deg)}.crate-3.transition .wrapper .cap{transform:rotate(270deg)}.crate-4 .wrapper .cap{transform:rotate(-90deg)}.crate-4.transition .wrapper .cap{transform:rotate(90deg)}.crate-5 .wrapper .cap{transform:rotate(45deg)}.crate-5.transition .wrapper .cap{transform:rotate(225deg)}.crate-6 .wrapper .cap{transform:rotate(0deg)}.crate-6.transition .wrapper .cap{transform:rotate(180deg)}.crate-7 .wrapper .cap{transform:rotate(-45deg)}.crate-7.transition .wrapper .cap{transform:rotate(135deg)}.wrapper .cap .tower{width:.7em;height:2.1em;position:relative;transform-style:preserve-3d;transform-origin:0 0;transform:rotateX(90deg) translate3d(.15em,0,-.5em)}.wrapper .cap .tower>.cable{position:absolute;bottom:0;left:50%;margin-left:-.015em;border-left:.03em solid #000;transform-style:preserve-3d;transform-origin:0 100%}.wrapper .cap .tower>.cable:after{margin-left:-.015em;content:" ";height:100%;display:block;border-left:.03em solid #000;transform:rotateY(90deg)}.wrapper .cap .tower>.cable.front{height:3.36em;transform:rotateX(63.4deg)}.wrapper .cap .tower>.cable.mid-front{height:1.8em;transform:rotateX(30deg)}.wrapper .cap .tower>.cable.mid-back{height:1.8em;transform:rotateX(-30deg)}.wrapper .cap .tower>.cable.back{height:2.2em;transform:rotateX(-46.8deg)}.wrapper .cap .tower>.face{color:var(--crane);width:100%;height:100%;position:absolute;transform-style:preserve-3d;top:0;left:0}.wrapper .cap .tower>.face.front{transform:rotateY(90deg) translateZ(.35em)}.wrapper .cap .tower>.face.back{transform:rotateY(-90deg) translateZ(.35em)}.wrapper .cap .tower>.face.left{transform:translateZ(.35em)}.wrapper .cap .tower>.face.right{transform:rotateY(180deg) translateZ(.35em)}.wrapper .cap .tower>.face.back,.wrapper .cap .tower>.face.front{color:var(--crane-dark)}.wrapper .cap .tower>.face .support{width:100%;height:100%;position:absolute;box-sizing:border-box;transform-style:preserve-3d}.wrapper .cap .tower>.face .support:after{content:" ";position:absolute}.wrapper .cap .tower>.face .support.right{border-right:.075em solid;transform-origin:100% 0;transform:rotateX(-8deg) rotate(8deg)}.wrapper .cap .tower>.face .support.right:after{top:40%;right:-.15em;width:.7em;border-top:.075em solid;transform:rotate(45deg)}.wrapper .cap .tower>.face .support.left{border-left:.075em solid;transform-origin:0 0;transform:rotateX(-8deg) rotate(-8deg)}.wrapper .cap .tower>.face .support.left:after{top:59%;left:-.13em;width:.5em;border-top:.075em solid;transform:rotate(-45deg)}.wrapper .arm{color:var(--crane);position:absolute;border:.075em solid;width:.7em;top:1em;left:.15em;box-sizing:border-box;transform-style:preserve-3d}.wrapper .arm.back{bottom:1em;top:auto}.wrapper .arm .segment{height:.7em;position:relative;transform-style:preserve-3d;border-bottom:.075em solid;box-sizing:border-box;margin:0 -.075em}.wrapper .arm .segment:last-child{margin-bottom:-.075em}.wrapper .arm .segment:last-child .face:before{display:none}.wrapper .arm .segment .face{position:absolute;width:100%;height:.7em;transform-style:preserve-3d;top:-.0375em}.wrapper .arm .segment .face:before{content:" ";position:absolute;top:50%;right:0;height:100%;border-right:.075em solid}.wrapper .arm .segment .face .supports{position:absolute;width:100%;height:100%;transform-style:preserve-3d;overflow:hidden}.wrapper .arm .segment .face .supports:after,.wrapper .arm .segment .face .supports:before{content:" ";position:absolute;border-top:.075em solid;width:150%}.wrapper .arm .segment .face .supports:before{transform-origin:0 0;transform:rotate(24deg);top:0}.wrapper .arm .segment .face .supports:after{transform-origin:0 100%;transform:rotate(-24deg);bottom:0}.wrapper .arm .segment .face.left{transform:rotateY(-60deg);transform-origin:0 0;color:var(--crane-dark)}.wrapper .arm .segment .face.right{transform:rotateY(60deg);transform-origin:100% 0;color:var(--crane)}.wrapper .arm .segment .face.right:before{left:0;right:auto}.wrapper .arm .segment .face.right .supports{transform:rotate(180deg)}.wrapper .trolley{transform-style:preserve-3d;width:.85em;height:.7em;position:absolute;background:var(--crane-dark);top:.8em;left:-.15em;transform:translateZ(-.02em);transition:transform .5s ease-in-out}.wrapper .trolley:after,.wrapper .trolley:before{content:" ";position:absolute;width:.15em;height:100%;background:#2e2b04}.wrapper .trolley:before{transform:rotateY(-90deg);transform-origin:0 50%;left:0}.wrapper .trolley:after{transform:rotateY(90deg);transform-origin:100% 50%;right:0}.crate-1 .wrapper .trolley,.crate-3 .wrapper .trolley,.crate-4 .wrapper .trolley,.crate-6 .wrapper .trolley{transform:translateZ(-.02em) translateY(-.5em)}.wrapper .trolley .cables,.wrapper .trolley .pully{transform-style:preserve-3d;width:.2em;border:.03em solid #000;box-sizing:border-box;position:absolute}.wrapper .trolley .cables:after,.wrapper .trolley .cables:before,.wrapper .trolley .pully:after,.wrapper .trolley .pully:before{content:" ";position:absolute;height:100%;top:.2em;border-left:.03em solid #000;transform:rotateY(90deg)}.wrapper .trolley .cables:before,.wrapper .trolley .pully:before{left:-.015em}.wrapper .trolley .cables:after,.wrapper .trolley .pully:after{right:-.015em}.wrapper .trolley .cables{transform-style:preserve-3d;top:50%;left:50%;margin-top:-.1em;height:1.2em;border-bottom:none;transform-origin:0 0;transform:rotateX(-90deg) rotateY(-90deg)}.wrapper .trolley .pully{height:2.38em;top:100%;left:-.03em;border-top:none;border-bottom-width:.2em;border-radius:0 0 15% 15%;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-name:pully-reset;animation-name:pully-reset}.transition .wrapper .trolley .pully{-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-name:pully;animation-name:pully}.wrapper .trolley .hook{position:absolute;top:100%;margin-top:.2em;transition:transform .6s ease-in-out;left:-.08em;width:.3em;transform-style:preserve-3d}.wrapper .trolley .hook:after{content:" ";position:absolute;width:.3em;height:.3em;border:.1em solid;border-right:.1em solid transparent;box-sizing:border-box;border-radius:50%;transform:rotate(-40deg)}.crate-0 .wrapper .trolley .hook,.crate-7 .wrapper .trolley .hook{transform:rotateY(45deg)}.crate-1 .wrapper .trolley .hook,.crate-6 .wrapper .trolley .hook{transform:rotateY(90deg)}.crate-2 .wrapper .trolley .hook,.crate-5 .wrapper .trolley .hook{transform:rotateY(-45deg)}@-webkit-keyframes pully{0%{transform:translateZ(0)}30%,70%{transform:translateY(-1.2em)}to{transform:translateZ(0)}}@keyframes pully{0%{transform:translateZ(0)}30%,70%{transform:translateY(-1.2em)}to{transform:translateZ(0)}}@-webkit-keyframes pully-reset{0%{transform:translateZ(0)}30%,70%{transform:translateY(-1.2em)}to{transform:translateZ(0)}}@keyframes pully-reset{0%{transform:translateZ(0)}30%,70%{transform:translateY(-1.2em)}to{transform:translateZ(0)}}@-webkit-keyframes crane-move{0%,15%,to{transform:rotate(0deg)}35%,50%{transform:rotate(180deg)}}@keyframes crane-move{0%,15%,to{transform:rotate(0deg)}35%,50%{transform:rotate(180deg)}}@-webkit-keyframes rotate{0%{transform:rotateX(45deg) rotate(0deg)}to{transform:rotateX(45deg) rotate(1turn)}}@keyframes rotate{0%{transform:rotateX(45deg) rotate(0deg)}to{transform:rotateX(45deg) rotate(1turn)}}@-webkit-keyframes source{0%,30%{transform:translateZ(-.9em)}70%{transform:translateZ(0)}}@keyframes source{0%,30%{transform:translateZ(-.9em)}70%{transform:translateZ(0)}}@-webkit-keyframes destination{0%,30%{transform:translateZ(0)}70%,to{transform:translateZ(-.9em)}}@keyframes destination{0%,30%{transform:translateZ(0)}70%,to{transform:translateZ(-.9em)}}@-webkit-keyframes transfer{30%,70%{transform:translateZ(1.2em)}to{transform:translateZ(0)}}@keyframes transfer{30%,70%{transform:translateZ(1.2em)}to{transform:translateZ(0)}}