@charset "UTF-8";.snippet{position:relative;background:#fff;padding:2rem 5%;margin:1.5rem 0;box-shadow:0 .4rem .8rem -.1rem rgba(0,32,128,.1),0 0 0 1px #f0f2f7;border-radius:.25rem}.examples .snippet:before{display:inline-block;position:absolute;top:0;left:0;padding:0 5px;content:attr(data-title);font-size:.75rem;font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;color:#fff;background-color:#ff1964;border-radius:.25rem 0 .25rem 0}.stage{display:flex;justify-content:center;align-items:center;position:relative;padding:1.4rem 0;margin:0 -5%;overflow:hidden}.filter-contrast{filter:contrast(5);background-color:#fff}.footer{margin:120px 0 20px;text-align:center;overflow:auto}.dot-elastic{position:relative;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;animation:dotElastic 1s infinite linear}.dot-elastic::after,.dot-elastic::before{content:'';display:inline-block;position:absolute;top:0}.dot-elastic::before{left:-15px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;animation:dotElasticBefore 1s infinite linear}.dot-elastic::after{left:15px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;animation:dotElasticAfter 1s infinite linear}@keyframes dotElasticBefore{0%{transform:scale(1,1)}25%{transform:scale(1,1.5)}50%{transform:scale(1,.67)}75%{transform:scale(1,1)}100%{transform:scale(1,1)}}@keyframes dotElastic{0%{transform:scale(1,1)}25%{transform:scale(1,1)}50%{transform:scale(1,1.5)}75%{transform:scale(1,1)}100%{transform:scale(1,1)}}@keyframes dotElasticAfter{0%{transform:scale(1,1)}25%{transform:scale(1,1)}50%{transform:scale(1,.67)}75%{transform:scale(1,1.5)}100%{transform:scale(1,1)}}.dot-pulse{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;box-shadow:9999px 0 0 -5px #ee4d2d;animation:dotPulse 1.5s infinite linear;animation-delay:.25s}.dot-pulse::after,.dot-pulse::before{content:'';display:inline-block;position:absolute;top:0;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d}.dot-pulse::before{box-shadow:9984px 0 0 -5px #ee4d2d;animation:dotPulseBefore 1.5s infinite linear;animation-delay:0s}.dot-pulse::after{box-shadow:10014px 0 0 -5px #ee4d2d;animation:dotPulseAfter 1.5s infinite linear;animation-delay:.5s}@keyframes dotPulseBefore{0%{box-shadow:9984px 0 0 -5px #ee4d2d}30%{box-shadow:9984px 0 0 2px #ee4d2d}100%,60%{box-shadow:9984px 0 0 -5px #ee4d2d}}@keyframes dotPulse{0%{box-shadow:9999px 0 0 -5px #ee4d2d}30%{box-shadow:9999px 0 0 2px #ee4d2d}100%,60%{box-shadow:9999px 0 0 -5px #ee4d2d}}@keyframes dotPulseAfter{0%{box-shadow:10014px 0 0 -5px #ee4d2d}30%{box-shadow:10014px 0 0 2px #ee4d2d}100%,60%{box-shadow:10014px 0 0 -5px #ee4d2d}}.dot-flashing{position:relative;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;animation:dotFlashing 1s infinite linear alternate;animation-delay:.5s}.dot-flashing::after,.dot-flashing::before{content:'';display:inline-block;position:absolute;top:0}.dot-flashing::before{left:-15px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;animation:dotFlashing 1s infinite alternate;animation-delay:0s}.dot-flashing::after{left:15px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;animation:dotFlashing 1s infinite alternate;animation-delay:1s}@keyframes dotFlashing{0%{background-color:#ee4d2d}100%,50%{background-color:#ebe6ff}}.dot-collision{position:relative;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d}.dot-collision::after,.dot-collision::before{content:'';display:inline-block;position:absolute;top:0}.dot-collision::before{left:-10px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;animation:dotCollisionBefore 2s infinite ease-in}.dot-collision::after{left:10px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;animation:dotCollisionAfter 2s infinite ease-in;animation-delay:1s}@keyframes dotCollisionBefore{0%,100%,50%,75%{transform:translateX(0)}25%{transform:translateX(-15px)}}@keyframes dotCollisionAfter{0%,100%,50%,75%{transform:translateX(0)}25%{transform:translateX(15px)}}.dot-revolution{position:relative;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d}.dot-revolution::after,.dot-revolution::before{content:'';display:inline-block;position:absolute}.dot-revolution::before{left:0;top:-15px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;transform-origin:5px 20px;animation:dotRevolution 1.4s linear infinite}.dot-revolution::after{left:0;top:-30px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;transform-origin:5px 35px;animation:dotRevolution 1s linear infinite}@keyframes dotRevolution{0%{transform:rotateZ(0) translate3d(0,0,0)}100%{transform:rotateZ(360deg) translate3d(0,0,0)}}.dot-carousel{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;box-shadow:9984px 0 0 0 #ee4d2d,9999px 0 0 0 #ee4d2d,10014px 0 0 0 #ee4d2d;animation:dotCarousel 1.5s infinite linear}@keyframes dotCarousel{0%{box-shadow:9984px 0 0 -1px #ee4d2d,9999px 0 0 1px #ee4d2d,10014px 0 0 -1px #ee4d2d}50%{box-shadow:10014px 0 0 -1px #ee4d2d,9984px 0 0 -1px #ee4d2d,9999px 0 0 1px #ee4d2d}100%{box-shadow:9999px 0 0 1px #ee4d2d,10014px 0 0 -1px #ee4d2d,9984px 0 0 -1px #ee4d2d}}.dot-typing{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;box-shadow:9984px 0 0 0 #ee4d2d,9999px 0 0 0 #ee4d2d,10014px 0 0 0 #ee4d2d;animation:dotTyping 1.5s infinite linear}@keyframes dotTyping{0%{box-shadow:9984px 0 0 0 #ee4d2d,9999px 0 0 0 #ee4d2d,10014px 0 0 0 #ee4d2d}16.667%{box-shadow:9984px -10px 0 0 #ee4d2d,9999px 0 0 0 #ee4d2d,10014px 0 0 0 #ee4d2d}33.333%{box-shadow:9984px 0 0 0 #ee4d2d,9999px 0 0 0 #ee4d2d,10014px 0 0 0 #ee4d2d}50%{box-shadow:9984px 0 0 0 #ee4d2d,9999px -10px 0 0 #ee4d2d,10014px 0 0 0 #ee4d2d}66.667%{box-shadow:9984px 0 0 0 #ee4d2d,9999px 0 0 0 #ee4d2d,10014px 0 0 0 #ee4d2d}83.333%{box-shadow:9984px 0 0 0 #ee4d2d,9999px 0 0 0 #ee4d2d,10014px -10px 0 0 #ee4d2d}100%{box-shadow:9984px 0 0 0 #ee4d2d,9999px 0 0 0 #ee4d2d,10014px 0 0 0 #ee4d2d}}.dot-windmill{position:relative;top:-10px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;transform-origin:5px 15px;animation:dotWindmill 2s infinite linear}.dot-windmill::after,.dot-windmill::before{content:'';display:inline-block;position:absolute}.dot-windmill::before{left:-8.66px;top:15px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d}.dot-windmill::after{left:8.66px;top:15px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d}@keyframes dotWindmill{0%{transform:rotateZ(0) translate3d(0,0,0)}100%{transform:rotateZ(720deg) translate3d(0,0,0)}}.dot-bricks{position:relative;top:8px;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;box-shadow:9991px -16px 0 0 #ee4d2d,9991px 0 0 0 #ee4d2d,10007px 0 0 0 #ee4d2d;animation:dotBricks 2s infinite ease}@keyframes dotBricks{0%{box-shadow:9991px -16px 0 0 #ee4d2d,9991px 0 0 0 #ee4d2d,10007px 0 0 0 #ee4d2d}8.333%{box-shadow:10007px -16px 0 0 #ee4d2d,9991px 0 0 0 #ee4d2d,10007px 0 0 0 #ee4d2d}16.667%{box-shadow:10007px -16px 0 0 #ee4d2d,9991px -16px 0 0 #ee4d2d,10007px 0 0 0 #ee4d2d}25%{box-shadow:10007px -16px 0 0 #ee4d2d,9991px -16px 0 0 #ee4d2d,9991px 0 0 0 #ee4d2d}33.333%{box-shadow:10007px 0 0 0 #ee4d2d,9991px -16px 0 0 #ee4d2d,9991px 0 0 0 #ee4d2d}41.667%{box-shadow:10007px 0 0 0 #ee4d2d,10007px -16px 0 0 #ee4d2d,9991px 0 0 0 #ee4d2d}50%{box-shadow:10007px 0 0 0 #ee4d2d,10007px -16px 0 0 #ee4d2d,9991px -16px 0 0 #ee4d2d}58.333%{box-shadow:9991px 0 0 0 #ee4d2d,10007px -16px 0 0 #ee4d2d,9991px -16px 0 0 #ee4d2d}66.666%{box-shadow:9991px 0 0 0 #ee4d2d,10007px 0 0 0 #ee4d2d,9991px -16px 0 0 #ee4d2d}75%{box-shadow:9991px 0 0 0 #ee4d2d,10007px 0 0 0 #ee4d2d,10007px -16px 0 0 #ee4d2d}83.333%{box-shadow:9991px -16px 0 0 #ee4d2d,10007px 0 0 0 #ee4d2d,10007px -16px 0 0 #ee4d2d}91.667%{box-shadow:9991px -16px 0 0 #ee4d2d,9991px 0 0 0 #ee4d2d,10007px -16px 0 0 #ee4d2d}100%{box-shadow:9991px -16px 0 0 #ee4d2d,9991px 0 0 0 #ee4d2d,10007px 0 0 0 #ee4d2d}}.dot-floating{position:relative;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;animation:dotFloating 3s infinite cubic-bezier(.15,.6,.9,.1)}.dot-floating::after,.dot-floating::before{content:'';display:inline-block;position:absolute;top:0}.dot-floating::before{left:-12px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;animation:dotFloatingBefore 3s infinite ease-in-out}.dot-floating::after{left:-24px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;animation:dotFloatingAfter 3s infinite cubic-bezier(.4,0,1,1)}@keyframes dotFloating{0%{left:calc(-50% - 5px)}75%{left:calc(50% + 105px)}100%{left:calc(50% + 105px)}}@keyframes dotFloatingBefore{0%{left:-50px}50%{left:-12px}75%{left:-50px}100%{left:-50px}}@keyframes dotFloatingAfter{0%{left:-100px}50%{left:-24px}75%{left:-100px}100%{left:-100px}}.dot-fire{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;box-shadow:9999px 22.5px 0 -5px #ee4d2d;animation:dotFire 1.5s infinite linear;animation-delay:-.85s}.dot-fire::after,.dot-fire::before{content:'';display:inline-block;position:absolute;top:0;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d}.dot-fire::before{box-shadow:9999px 22.5px 0 -5px #ee4d2d;animation:dotFire 1.5s infinite linear;animation-delay:-1.85s}.dot-fire::after{box-shadow:9999px 22.5px 0 -5px #ee4d2d;animation:dotFire 1.5s infinite linear;animation-delay:-2.85s}@keyframes dotFire{1%{box-shadow:9999px 22.5px 0 -5px #ee4d2d}50%{box-shadow:9999px -5.625px 0 2px #ee4d2d}100%{box-shadow:9999px -22.5px 0 -5px #ee4d2d}}.dot-spin{position:relative;width:10px;height:10px;border-radius:5px;background-color:transparent;margin:auto;color:transparent;box-shadow:0 -18px 0 0 #ee4d2d,12.72984px -12.72984px 0 0 #ee4d2d,18px 0 0 0 #ee4d2d,12.72984px 12.72984px 0 0 rgba(152,128,255,0),0 18px 0 0 rgba(152,128,255,0),-12.72984px 12.72984px 0 0 rgba(152,128,255,0),-18px 0 0 0 rgba(152,128,255,0),-12.72984px -12.72984px 0 0 rgba(152,128,255,0);animation:dotSpin 1.5s infinite linear}@keyframes dotSpin{0%,100%{box-shadow:0 -18px 0 0 #ee4d2d,12.72984px -12.72984px 0 0 #ee4d2d,18px 0 0 0 #ee4d2d,12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}12.5%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 0 #ee4d2d,18px 0 0 0 #ee4d2d,12.72984px 12.72984px 0 0 #ee4d2d,0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}25%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 0 #ee4d2d,12.72984px 12.72984px 0 0 #ee4d2d,0 18px 0 0 #ee4d2d,-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}37.5%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 0 #ee4d2d,0 18px 0 0 #ee4d2d,-12.72984px 12.72984px 0 0 #ee4d2d,-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}50%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 0 #ee4d2d,-12.72984px 12.72984px 0 0 #ee4d2d,-18px 0 0 0 #ee4d2d,-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}62.5%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 0 #ee4d2d,-18px 0 0 0 #ee4d2d,-12.72984px -12.72984px 0 0 #ee4d2d}75%{box-shadow:0 -18px 0 0 #ee4d2d,12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 0 #ee4d2d,-12.72984px -12.72984px 0 0 #ee4d2d}87.5%{box-shadow:0 -18px 0 0 #ee4d2d,12.72984px -12.72984px 0 0 #ee4d2d,18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 0 #ee4d2d}}.dot-falling{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;box-shadow:9999px 0 0 0 #ee4d2d;animation:dotFalling 1s infinite linear;animation-delay:.1s}.dot-falling::after,.dot-falling::before{content:'';display:inline-block;position:absolute;top:0}.dot-falling::before{width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;animation:dotFallingBefore 1s infinite linear;animation-delay:0s}.dot-falling::after{width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;animation:dotFallingAfter 1s infinite linear;animation-delay:.2s}@keyframes dotFalling{0%{box-shadow:9999px -15px 0 0 rgba(152,128,255,0)}25%,50%,75%{box-shadow:9999px 0 0 0 #ee4d2d}100%{box-shadow:9999px 15px 0 0 rgba(152,128,255,0)}}@keyframes dotFallingBefore{0%{box-shadow:9984px -15px 0 0 rgba(152,128,255,0)}25%,50%,75%{box-shadow:9984px 0 0 0 #ee4d2d}100%{box-shadow:9984px 15px 0 0 rgba(152,128,255,0)}}@keyframes dotFallingAfter{0%{box-shadow:10014px -15px 0 0 rgba(152,128,255,0)}25%,50%,75%{box-shadow:10014px 0 0 0 #ee4d2d}100%{box-shadow:10014px 15px 0 0 rgba(152,128,255,0)}}.dot-stretching{position:relative;width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;transform:scale(1.25,1.25);animation:dotStretching 2s infinite ease-in}.dot-stretching::after,.dot-stretching::before{content:'';display:inline-block;position:absolute;top:0}.dot-stretching::before{width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;animation:dotStretchingBefore 2s infinite ease-in}.dot-stretching::after{width:10px;height:10px;border-radius:5px;background-color:#ee4d2d;color:#ee4d2d;animation:dotStretchingAfter 2s infinite ease-in}@keyframes dotStretching{0%{transform:scale(1.25,1.25)}50%,60%{transform:scale(.8,.8)}100%{transform:scale(1.25,1.25)}}@keyframes dotStretchingBefore{0%{transform:translate(0) scale(.7,.7)}50%,60%{transform:translate(-20px) scale(1,1)}100%{transform:translate(0) scale(.7,.7)}}@keyframes dotStretchingAfter{0%{transform:translate(0) scale(.7,.7)}50%,60%{transform:translate(20px) scale(1,1)}100%{transform:translate(0) scale(.7,.7)}}.dot-gathering{position:relative;width:12px;height:12px;border-radius:6px;background-color:#000;color:transparent;margin:-1px 0;filter:blur(2px)}.dot-gathering::after,.dot-gathering::before{content:'';display:inline-block;position:absolute;top:0;left:-50px;width:12px;height:12px;border-radius:6px;background-color:#000;color:transparent;opacity:0;filter:blur(2px);animation:dotGathering 2s infinite ease-in}.dot-gathering::after{animation-delay:.5s}@keyframes dotGathering{0%{opacity:0;transform:translateX(0)}35%,60%{opacity:1;transform:translateX(50px)}100%{opacity:0;transform:translateX(100px)}}.dot-hourglass{position:relative;top:-15px;width:12px;height:12px;border-radius:6px;background-color:#000;color:transparent;margin:-1px 0;filter:blur(2px);transform-origin:5px 20px;animation:dotHourglass 2.4s infinite ease-in-out;animation-delay:.6s}.dot-hourglass::after,.dot-hourglass::before{content:'';display:inline-block;position:absolute;top:0;left:0;width:12px;height:12px;border-radius:6px;background-color:#000;color:transparent;filter:blur(2px)}.dot-hourglass::before{top:30px}.dot-hourglass::after{animation:dotHourglassAfter 2.4s infinite cubic-bezier(.65,.05,.36,1)}@keyframes dotHourglass{0%{transform:rotateZ(0)}25%{transform:rotateZ(180deg)}50%{transform:rotateZ(180deg)}75%{transform:rotateZ(360deg)}100%{transform:rotateZ(360deg)}}@keyframes dotHourglassAfter{0%{transform:translateY(0)}25%{transform:translateY(30px)}50%{transform:translateY(30px)}75%{transform:translateY(0)}100%{transform:translateY(0)}}.dot-overtaking{position:relative;width:12px;height:12px;border-radius:6px;background-color:transparent;color:#000;margin:-1px 0;box-shadow:0 -20px 0 0;filter:blur(2px);animation:dotOvertaking 2s infinite cubic-bezier(.2,.6,.8,.2)}.dot-overtaking::after,.dot-overtaking::before{content:'';display:inline-block;position:absolute;top:0;left:0;width:12px;height:12px;border-radius:6px;background-color:transparent;color:#000;box-shadow:0 -20px 0 0;filter:blur(2px)}.dot-overtaking::before{animation:dotOvertaking 2s infinite cubic-bezier(.2,.6,.8,.2);animation-delay:.3s}.dot-overtaking::after{animation:dotOvertaking 1.5s infinite cubic-bezier(.2,.6,.8,.2);animation-delay:.6s}@keyframes dotOvertaking{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}.dot-shuttle{position:relative;left:-15px;width:12px;height:12px;border-radius:6px;background-color:#000;color:transparent;margin:-1px 0;filter:blur(2px)}.dot-shuttle::after,.dot-shuttle::before{content:'';display:inline-block;position:absolute;top:0;width:12px;height:12px;border-radius:6px;background-color:#000;color:transparent;filter:blur(2px)}.dot-shuttle::before{left:15px;animation:dotShuttle 2s infinite ease-out}.dot-shuttle::after{left:30px}@keyframes dotShuttle{0%,100%,50%{transform:translateX(0)}25%{transform:translateX(-45px)}75%{transform:translateX(45px)}}.dot-bouncing{position:relative;height:10px;font-size:10px}.dot-bouncing::before{content:'⚽🏀🏐';display:inline-block;position:relative;animation:dotBouncing 1s infinite}@keyframes dotBouncing{0%{top:-20px;animation-timing-function:ease-in}34%{transform:scale(1,1)}35%{top:20px;animation-timing-function:ease-out;transform:scale(1.5,.5)}45%{transform:scale(1,1)}90%{top:-20px}100%{top:-20px}}.dot-rolling{position:relative;height:10px;font-size:10px}.dot-rolling::before{content:'⚽';display:inline-block;position:relative;transform:translateX(-25px);animation:dotRolling 3s infinite}@keyframes dotRolling{0%{content:'⚽';transform:translateX(-25px) rotateZ(0)}16.667%{content:'⚽';transform:translateX(25px) rotateZ(720deg)}33.333%{content:'⚽';transform:translateX(-25px) rotateZ(0)}34.333%{content:'🏀';transform:translateX(-25px) rotateZ(0)}50%{content:'🏀';transform:translateX(25px) rotateZ(720deg)}66.667%{content:'🏀';transform:translateX(-25px) rotateZ(0)}67.667%{content:'🏐';transform:translateX(-25px) rotateZ(0)}83.333%{content:'🏐';transform:translateX(25px) rotateZ(720deg)}100%{content:'🏐';transform:translateX(-25px) rotateZ(0)}}

/* slick.css */
Slider .slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}

/* style.css */

body{background:#eeee}ul{list-style:none;margin:0;padding:0}.orichi-cb{clear:both}.orichi-hidden{visibility:hidden} .orichi-display-none {display: none;}.wImage{overflow:hidden;position:relative}.wImage:before{content:"";display:block;padding-bottom:66.66%}.wImage .image{height:100%;left:0;position:absolute;top:0;width:100%}.wImage .image.cover img{height:100%;object-fit:cover;width:100%}.wImage .image img,.wImage .image img.owl-lazy{-moz-transform:translateY(-50%) translateX(-50%);-moz-transition:.5s all ease-in-out;display:block;left:50%;margin:auto;max-height:100%;max-width:100%;position:absolute;top:50%;transform:translateY(-50%) translateX(-50%);transition:.5s all ease-in-out;vertical-align:middle}.orichi-wrapper{background:#fff;/*max-width:800px;*/margin:auto;margin-top:15px;padding:15px}.orichi-head{display:flex;background:#fff}.orichi-countdown,.orichi-fs{display:inline-block}.orichi-countdown ul{padding-left:15px;margin-top:0;padding-bottom:0;padding-top:4px}.orichi-countdown ul li span{padding:1px 3px;font-size:13px;background:#000;color:#fff;text-align:center;font-weight:700;border-radius:3px}#orichi-countdown ul li{display:inline-block;padding-right:1px}.orichi-product-item{float:left;width:calc((100% - 4)/ 4);padding:10px 6px;margin-bottom:10px}.orichi-product-item:hover{box-shadow:1px 1px 6px 3px #b3b3b321}.orichi-product-list .wImage{margin-bottom:8px}.orichi-product-list .wImage:before{padding-bottom:100%}.orichi-flash-sale-progress-bar__fire{position:absolute;left:3px;top:-6px}.orichi-flash-sale-progress-bar__fire img{width:18px}.orichi-flash-sale-progress-bar{height:16px;background:#ffbda6;position:relative;border-radius:4px}.orichi-flash-sale-progress-bar__text{font-size:10px;color:#fff;font-weight:700;width:100%;position:absolute;padding:2px 0;text-align:center}.orichi-flash-sale-progress-bar__complement-wrapper{width:50%;background:#ee4d2d;bottom:0;left:0;position:absolute;height:16px;border-radius:4px}.orichi-price-wrapper{display:flex}.orichi-price-wrapper .orichi-price{font-size:16px;font-weight:700;color:#ee4d2d;margin-top:12px}.orichi-discount-price{position:absolute;background:#f3e9e7;top: -15px; right: -30px; font-size: 9px;;color:#ee4d2d;font-weight:700;padding:2px;border:1px solid #ee4d2d}.orichi-price-wrapper .orichi-price{position:relative}.orichi-progress-bar{margin-top:10px;display:block}.orichi-price-old{color:rgba(0,0,0,.13);padding-top:11x;vertical-align:bottom;display:table-column;margin-top:5px;margin-right:5px;text-decoration:line-through}.orichi-hr{display:block;margin:0px;border:1px solid rgba(0,0,0,.05)}.orichi-product-list{position:relative}#orichi-slider .orichi-slider-view .orichi-product-item-slider{padding:15px}#orichi-slider .orichi-slider-view .orichi-product-item-slider:hover{box-shadow:1px 1px 6px 3px #b3b3b321}.orichi-view-more{text-align:center}.orichi-btn-view-more{font-size:12px;text-decoration:none;font-weight: bold;display:inline-block;padding:6px 10px;color:#fff;background:#ee4d2d}.orichi-btn-view-more:hover,.orichi-btn-view-more:focus{color:#fff}#orichi-spin-loading{display: none;}.orichi-product-list .orichi-slick-prev{display:block;position:absolute;top:50%;left:-4px;z-index:1;background:#ee4d2d url('https://nguyenhuuninhneu.github.io/FlashSale/img/chevron-left-solid.svg');padding:18px 4px;border:2px solid #ee4d2d;box-sizing:border-box;color:#fff;transform:translateY(-50%);background-position:center;background-repeat:no-repeat}.orichi-product-list .orichi-slick-next{display:block;position:absolute;top:50%;right:-4px;z-index:1;background:#ee4d2d url(https://nguyenhuuninhneu.github.io/FlashSale/img/chevron-right-solid.svg) no-repeat 0;padding:18px 4px;border:2px solid #ee4d2d;box-sizing:border-box;color:#fff;transform:translateY(-50%);background-position:center;background-repeat:no-repeat}.orichi-product-list .orichi-slick-next:hover,.orichi-product-list .orichi-slick-prev{cursor:pointer}

/* responsive.css */

@media (max-width:1199px){
    
}

@media (max-width:991px){
    .orichi-product-item{
        width: calc((100% - (12px*2)) / 2);
    }
}

@media (max-width:767px){ 
    .orichi-product-item{
        width: calc((100% - (12px*2)) / 2);
    }
}

@media (max-width:479px){ 
    .orichi-product-item{
        width: calc(100% - (12px));
    }
}