:root{--primary:#275efe;--primary-light:#7699ff;--dark:#1c212e;--grey-dark:#3f4656;--grey:#6c7486;--grey-light:#cdd9ed;--white:#fff;--green:#16bf78;--sand:#dcb773;--sand-light:#edd9a9}.order{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:var(--dark);position:relative;height:80px;width:300px;padding:0;outline:none;cursor:pointer;border-radius:40px;-webkit-tap-highlight-color:transparent;overflow:hidden;transition:transform .3s ease;span{--o:1;position:absolute;left:0;right:0;text-align:center;top:25px;line-height:30px;color:var(--white);font-size:20px;font-weight:500;opacity:var(--o);transition:opacity .3s ease;&.default{transition-delay:.3s}&.success{--offset:20px;--o:0;svg{width:16px;height:14px;display:inline-block;vertical-align:top;fill:none;margin:7px 0 0 4px;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20px;stroke-dashoffset:var(--offset);transition:stroke-dashoffset .3s ease}}}&:active{transform:scale(.96)}.lines{opacity:0;height:5px;background:var(--white);width:10px;top:40px;left:100%;box-shadow:20px 0 0 var(--white),40px 0 0 var(--white),60px 0 0 var(--white),80px 0 0 var(--white),100px 0 0 var(--white),120px 0 0 var(--white),140px 0 0 var(--white),160px 0 0 var(--white),180px 0 0 var(--white),200px 0 0 var(--white),220px 0 0 var(--white),240px 0 0 var(--white),260px 0 0 var(--white),280px 0 0 var(--white),300px 0 0 var(--white),320px 0 0 var(--white),340px 0 0 var(--white),360px 0 0 var(--white),380px 0 0 var(--white),400px 0 0 var(--white),420px 0 0 var(--white),440px 0 0 var(--white)}.back,.box,.lines{position:absolute;border-radius:3px}.back,.box{--start:var(--white);--stop:var(--grey-light);background:linear-gradient(var(--start),var(--stop))}.truck{width:70px;height:50px;left:100%;z-index:1;top:15px;position:absolute;transform:translateX(24px);background-color:rgba(255,0,0,.2);&:after,&:before{--r:-90deg;content:"";height:2px;width:24px;right:62px;position:absolute;display:block;background:var(--white);border-radius:1px;transform-origin:100% 50%;transform:rotate(var(--r))}&:before{top:6px}&:after{--r:90deg;bottom:6px}.back{left:0;top:0;width:70px;height:50px;z-index:1;background-image:url(https://fivefriday.com/wp-content/uploads/2023/01/deansstationery.png);background-size:cover;background-position:50%;background-repeat:no-repeat;background-color:rgba(0,255,0,.2)}.front{overflow:hidden;position:absolute;border-radius:2px 9px 9px 2px;width:30px;height:50px;left:70px;background-color:rgba(0,0,255,.2)}.front:after,.front:before{content:"";position:absolute;display:block}.front:before{height:15px;width:2px;left:0;top:17px;background:linear-gradient(var(--grey),var(--grey-dark))}.front:after{border-radius:2px 9px 9px 2px;background:var(--primary);width:28px;height:50px;right:0}.front .window{overflow:hidden;border-radius:2px 8px 8px 2px;background:var(--primary-light);transform:perspective(4px) rotateY(3deg);width:26px;height:50px;position:absolute;left:2px;top:0;z-index:1;transform-origin:0 50%}.front .window:after,.front .window:before{content:"";position:absolute;right:0}.front .window:before{top:0;bottom:0;width:16px;background:var(--dark)}.front .window:after{width:16px;top:9px;height:4px;background:hsla(0,0%,100%,.14);transform:skewY(14deg);box-shadow:0 7px 0 hsla(0,0%,100%,.14)}.light{width:5px;height:12px;left:88px;transform-origin:100% 50%;position:absolute;border-radius:3px;transform:scaleX(.8);background:#f0dc5f;&:before{content:"";height:4px;width:9px;opacity:0;transform:perspective(2px) rotateY(-15deg) scaleX(.94);position:absolute;transform-origin:0 50%;left:3px;top:50%;margin-top:-2px;background:linear-gradient(90deg,#f0dc5f,rgba(240,220,95,.7),rgba(240,220,95,0))}&.top{top:5px}&.bottom{bottom:5px}}}.box{--start:var(--sand-light);--stop:var(--sand);width:27px;height:27px;right:100%;top:24px;&:after,&:before{content:"";top:12px;position:absolute;left:0;right:0}&:before{height:3px;margin-top:-1px;background:rgba(0,0,0,.1)}&:after{height:1px;background:rgba(0,0,0,.15)}}&.animate{.default{--o:0;transition-delay:0s}.success{--offset:0;--o:1;transition-delay:7s;svg{transition-delay:7.3s}}.truck{animation:truck 10s ease forwards;&:before{animation:door1 2.4s ease .3s forwards}&:after{animation:door2 2.4s ease .6s forwards}.light{&:after,&:before{animation:light 10s ease forwards}}}.box{animation:box 10s ease forwards}.lines{animation:lines 10s ease forwards}}}@keyframes truck{10%,30%{transform:translateX(-204px)}40%{transform:translateX(-144px)}60%{transform:translateX(-264px)}75%,to{transform:translateX(24px)}}@keyframes lines{0%,30%{opacity:0;transform:scaleY(.7) translateX(0)}35%,65%{opacity:1}70%{opacity:0}to{transform:scaleY(.7) translateX(-480px)}}@keyframes light{0%,30%{opacity:0;transform:perspective(2px) rotateY(-15deg) scaleX(.88)}40%,to{opacity:1;transform:perspective(2px) rotateY(-15deg) scaleX(.94)}}@keyframes door1{30%,50%{transform:rotate(32deg)}}@keyframes door2{30%,50%{transform:rotate(-32deg)}}@keyframes box{10%,8%{transform:translateX(50px);opacity:1}25%{transform:translateX(140px);opacity:1}26%{transform:translateX(140px);opacity:0}27%,to{transform:translateX(0);opacity:0}}html{box-sizing:border-box;-webkit-font-smoothing:antialiased}*{box-sizing:inherit;&:after,&:before{box-sizing:inherit}}.dribbble{position:fixed;display:block;right:20px;bottom:20px;img{display:block;height:28px}}@media (max-width:768px){.order-button{width:180px;height:50px}.order-button .truck-icon{width:35px;height:26px}.order-button .truck-icon .truck-body{width:24px;height:13px}.order-button .truck-icon .truck-cabin{width:12px;height:13px}.order-button .truck-icon .boxes{width:7px;height:7px}.order-button span{font-size:12px}}@media (max-width:480px){.order-button{width:150px;height:40px}.order-button .truck-icon{width:30px;height:22px}.order-button .truck-icon .truck-body{width:20px;height:11px}.order-button .truck-icon .truck-cabin{width:10px;height:11px}.order-button .truck-icon .boxes{width:6px;height:6px}.order-button span{font-size:10px}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:#bfbdbd;border-radius:10px}