*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:linear-gradient(to right top,#F27121,#E94057,#8A2387)}
.loader::before,.loader::after{content:''}
.crate,.loader,.item{display:grid}
.item,.loader::before,.loader::after{position:absolute}
.loader{position:relative}
.item,.load8{-webkit-perspective:var(--per);-moz-perspective:var(--per);-ms-perspective:var(--per);-o-perspective:var(--per);perspective:var(--per)}
.item,.loader,.load8{-webkit-transform-style:var(--p3d);-moz-transform-style:var(--p3d);-ms-transform-style:var(--p3d);-o-transform-style:var(--p3d);transform-style:var(--p3d)}
.item{-webkit-transform:var(--nLab);-moz-transform:var(--nLab);-ms-transform:var(--nLab);-o-transform:var(--nLab);transform:var(--nLab)}
.item,.load8,.load8::before,.load8::after{-webkit-transition:var(--tran);-moz-transition:var(--tran);-o-transition:var(--tran);transition:var(--tran)}
.load8,.load8::before,.load8::after{-webkit-animation:var(--anim);-moz-animation:var(--anim);-ms-animation:var(--anim);-o-animation:var(--anim);animation:var(--anim)}
.load8::before,.load8::after{-webkit-animation-play-state:var(--aPlay);-moz-animation-play-state:var(--aPlay);-ms-animation-play-state:var(--aPlay);-o-animation-play-state:var(--aPlay);animation-play-state:var(--aPlay)}
.load8::before{-webkit-animation-delay:var(--animD);-moz-animation-delay:var(--animD);-ms-animation-delay:var(--animD);-o-animation-delay:var(--animD);animation-delay:var(--animD)}
.load8::before,.load8::after{-webkit-clip-path:var(--cPath);-moz-clip-path:var(--cPath);-ms-clip-path:var(--cPath);-o-clip-path:var(--cPath);clip-path:var(--cPath)}

.crate{--block-size:18;grid-template-columns:repeat(2,calc(var(--block-size) * 1vw));grid-template-rows:repeat(2,calc(var(--block-size) * 1vw));grid-gap:1vw}
.item,.load8,.load8::before,.load8::after{--per:50vw;--p3d:preserve-3d;--dur:6;--anim:var(--aName) calc(var(--dur)*1s) linear infinite var(--dirC,normal)}
.item{--nLab:scale(1);--tran:transform 1s,animation 1s,opacity .4s;background:transparent;place-items:center}
.item:hover{--dirC:reverse;--nLab:translate3d(0,-2vw,0)rotateX(90deg)scale(1);--dur:7}
.loader{--aPlay:paused;top:20vh;width:5.5vw;height:5.5vw;place-items:center;color:transparent}
.load8{--aName:loader-8c;--nLab:translate3d(0,0,-12vw)rotateX(0)rotateY(0)rotate(0);background:url(fireR2.png) no-repeat;background-size:cover}
.load8::before,.load8::after{--aName:loader-8;--arcPower:15;--wid:1.75;--cPath:circle(50% at 50% 50%);background:url(bk1.png) no-repeat;aspect-ratio:1/1;background-size:105%;border:calc(var(--wid)*1vw) solid;border-image:url(p.zip.js) var(--arcPower) stretch;opacity:var(--opF,0)}
.load8::before{--dur:2.75;--animD:-1.375s;top:calc(50% - 2.675vw);left:calc(50% - 2.675vw);width:5.85vw}
.load8::after{--dirC:reverse;width:5.85vw}
.item:hover .load8::before,.item:hover .load8::after{--aPlay:running;--opF:1}
.item:hover .load8::after{--dirC:normal}
@-webkit-keyframes loader-8c{0%{-webkit-transform:translate3d(0,0,-12vw)rotateX(-45deg)rotateY(15deg)rotate(0)}40%{-webkit-transform:translate3d(0,0,-12vw)rotateX(-45deg)rotateY(15deg)rotate(-144deg)}100%{-webkit-transform:translate3d(0,0,-12vw)rotateX(-45deg)rotateY(15deg)rotate(-360deg)}}@-moz-keyframes loader-8{0%{-moz-transform:translate3d(0,0,-12vw)rotateX(-45deg)rotateY(15deg)rotate(0)}40%{-moz-transform:translate3d(0,0,0)rotateX(-45deg)rotateY(15deg)rotate(-144deg)}100%{-moz-transform:translate3d(0,0,-12vw)rotateX(-45deg)rotateY(15deg)rotate(-360deg)}}@-ms-keyframes loader-8{0%{-ms-transform:translate3d(0,0,-12vw)rotateX(-45deg)rotateY(15deg)rotate(0)}40%{-ms-transform:translate3d(0,0,0)rotateX(-45deg)rotateY(15deg)rotate(-144deg)}100%{-ms-transform:translate3d(0,0,-12vw)rotateX(-45deg)rotateY(15deg)rotate(-360deg)}}@-o-keyframes loader-8{0%{-o-transform:translate3d(0,0,-12vw)rotateX(-45deg)rotateY(15deg)rotate(0)}40%{-o-transform:translate3d(0,0,0)rotateX(-45deg)rotateY(15deg)rotate(-144deg)}100%{-o-transform:translate3d(0,0,-12vw)rotateX(-45deg)rotateY(15deg)rotate(-360deg)}}@keyframes loader-8{0%{transform:translate3d(0,0,-12vw)rotateX(-45deg)rotateY(15deg)rotate(0)}40%{transform:translate3d(0,0,0)rotateX(-45deg)rotateY(15deg)rotate(-144deg)}100%{transform:translate3d(0,0,-12vw)rotateX(-45deg)rotateY(15deg)rotate(-360deg)}}
@-webkit-keyframes loader-8{0%{-webkit-transform:translate3d(0,0,-4vw)rotate(0)scale(0)}40%{-webkit-transform:translate3d(0,0,0)rotate(360deg)scale(.75)}100%{-webkit-transform:translate3d(0,0,8vw)rotate(144deg)scale(0)}}@-moz-keyframes loader-8{0%{-moz-transform:translate3d(0,0,-4vw)rotate(0)scale(0)}40%{-moz-transform:translate3d(0,0,0)rotate(360deg)scale(.75)}100%{-moz-transform:translate3d(0,0,8vw)rotate(144deg)scale(0)}}@-ms-keyframes loader-8{0%{-ms-transform:translate3d(0,0,-4vw)rotate(0)scale(0)}40%{-ms-transform:translate3d(0,0,0)rotate(360deg)scale(.75)}100%{-ms-transform:translate3d(0,0,8vw)rotate(144deg)scale(0)}}@-o-keyframes loader-8{0%{-o-transform:translate3d(0,0,-4vw)rotate(0)scale(0)}40%{-o-transform:translate3d(0,0,0)rotate(360deg)scale(.75)}100%{-o-transform:translate3d(0,0,8vw)rotate(144deg)scale(0)}}@keyframes loader-8{0%{transform:translate3d(0,0,-4vw)rotate(0)scale(0)}40%{transform:translate3d(0,0,0)rotate(360deg)scale(.75)}100%{transform:translate3d(0,0,8vw)rotate(144deg)scale(0)}}