.boxes{--size:32px;--duration:800ms;height:calc(var(--size) * 2);width:calc(var(--size) * 3);position:relative;transform-style:preserve-3d;transform-origin:50% 50%;margin-top:calc(var(--size) * 1.5 * -1);transform:rotateX(60deg) rotate(45deg) rotateY(0deg) translateZ(0)}.boxes .box{width:var(--size);height:var(--size);top:0;left:0;position:absolute;transform-style:preserve-3d}.boxes .box:first-child{transform:translate(100%);-webkit-animation:box1 var(--duration) linear infinite;animation:box1 var(--duration) linear infinite}.boxes .box:nth-child(2){transform:translateY(100%);-webkit-animation:box2 var(--duration) linear infinite;animation:box2 var(--duration) linear infinite}.boxes .box:nth-child(3){transform:translate(100%,100%);-webkit-animation:box3 var(--duration) linear infinite;animation:box3 var(--duration) linear infinite}.boxes .box:nth-child(4){transform:translate(200%);-webkit-animation:box4 var(--duration) linear infinite;animation:box4 var(--duration) linear infinite}.boxes .box>div{--background:#5c8df6;--top:auto;--right:auto;--bottom:auto;--left:auto;--translateZ:calc(var(--size) / 2);--rotateY:0deg;--rotateX:0deg;position:absolute;width:100%;height:100%;background:var(--background);top:var(--top);right:var(--right);bottom:var(--bottom);left:var(--left);transform:rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ))}.boxes .box>div:first-child{--top:0;--left:0}.boxes .box>div:nth-child(2){--background:#145af2;--right:0;--rotateY:90deg}.boxes .box>div:nth-child(3){--background:#447cf5;--rotateX:-90deg}.boxes .box>div:nth-child(4){--background:#dbe3f4;--top:0;--left:0;--translateZ:calc(var(--size) * 3 * -1)}@-webkit-keyframes box1{0%,50%{transform:translate(100%)}to{transform:translate(200%)}}@keyframes box1{0%,50%{transform:translate(100%)}to{transform:translate(200%)}}@-webkit-keyframes box2{0%{transform:translateY(100%)}50%{transform:translate(0)}to{transform:translate(100%)}}@keyframes box2{0%{transform:translateY(100%)}50%{transform:translate(0)}to{transform:translate(100%)}}@-webkit-keyframes box3{0%,50%{transform:translate(100%,100%)}to{transform:translateY(100%)}}@keyframes box3{0%,50%{transform:translate(100%,100%)}to{transform:translateY(100%)}}@-webkit-keyframes box4{0%{transform:translate(200%)}50%{transform:translate(200%,100%)}to{transform:translate(100%,100%)}}@keyframes box4{0%{transform:translate(200%)}50%{transform:translate(200%,100%)}to{transform:translate(100%,100%)}}.loaders,.loadersB,.main{display:flex;align-items:center;justify-content:center}.loader{position:absolute;width:1.15em;height:13em;border-radius:50px;background:#e0e0e0}.loader:after{left:0;top:0;height:5em;mask-image:linear-gradient(180deg,#000 calc(100% - 48px),transparent)}.loader:after,.loader:before{content:"";position:absolute;width:1.15em;background:#e0e0e0;border-radius:50px;border:1px solid #e2e2e2;box-shadow:inset 5px 5px 15px #d3d2d2ab,inset -5px -5px 15px #e9e9e9ab}.loader:before{bottom:0;right:0;height:4.5em;mask-image:linear-gradient(0deg,#000 calc(100% - 48px),transparent)}.loaderA{position:absolute;width:1.15em;height:13em;border-radius:50px;background:transparent}.ball0,.ball1,.ball2,.ball3,.ball4,.ball5,.ball6,.ball7,.ball8,.ball9{width:1.15em;height:1.15em;box-shadow:inset 0 -10px 10px 0 rgba(0,0,0,.17),inset 0 -15px 15px 0 rgba(0,0,0,.15),inset 0 -40px 20px 0 rgba(0,0,0,.1),0 2px 1px rgba(0,0,0,.06),0 4px 2px rgba(0,0,0,.09),0 8px 4px rgba(0,0,0,.09),0 16px 8px rgba(0,0,0,.09),0 32px 16px rgba(0,0,0,.09),0 -1px 15px -8px rgba(0,0,0,.09);border-radius:50%;transition:transform .8s cubic-bezier(1,-.4,0,1.4);background-color:#e8e8e8;animation:move 3.63s ease-in-out infinite}.loader:nth-child(2){transform:rotate(20deg)}.loader:nth-child(3){transform:rotate(40deg)}.loader:nth-child(4){transform:rotate(60deg)}.loader:nth-child(5){transform:rotate(80deg)}.loader:nth-child(6){transform:rotate(100deg)}.loader:nth-child(7){transform:rotate(120deg)}.loader:nth-child(8){transform:rotate(140deg)}.loader:nth-child(9){transform:rotate(160deg)}.loaderA:nth-child(2){transform:rotate(20deg)}.loaderA:nth-child(3){transform:rotate(40deg)}.loaderA:nth-child(4){transform:rotate(60deg)}.loaderA:nth-child(5){transform:rotate(80deg)}.loaderA:nth-child(6){transform:rotate(100deg)}.loaderA:nth-child(7){transform:rotate(120deg)}.loaderA:nth-child(8){transform:rotate(140deg)}.loaderA:nth-child(9){transform:rotate(160deg)}.ball1{animation-delay:.2s}.ball2{animation-delay:.4s}.ball3{animation-delay:.6s}.ball4{animation-delay:.8s}.ball5{animation-delay:1s}.ball6{animation-delay:1.2s}.ball7{animation-delay:1.4s}.ball8{animation-delay:1.6s}.ball9{animation-delay:1.8s}@keyframes move{0%{transform:translateY(0)}50%{transform:translateY(12em)}to{transform:translateY(0)}}