*{box-sizing:border-box}:root{--bg: black;--min-size: 200px}body{display:grid;place-items:center;min-height:100vh;padding:0;margin:0;overflow-y:scroll;background:#000;background:radial-gradient(circle farthest-corner at 48.4% 47.5%, rgb(1, 57, 131) 0%, rgb(0, 0, 0) 90%);background-repeat:no-repeat;background-attachment:fixed;color:#fff;font-family:Arial,sans-serif}body::-webkit-scrollbar{display:none}body{-ms-overflow-style:none;scrollbar-width:0}.drag-proxy{visibility:hidden;position:absolute}.controls{position:absolute;top:calc(50% + clamp(var(--min-size),20vmin,20vmin));left:50%;transform:translate(-50%, -50%) scale(1.5);display:flex;justify-content:space-between;min-width:var(--min-size);height:44px;width:20vmin;z-index:300}button{height:48px;width:48px;border-radius:50%;position:absolute;top:0%;outline:rgba(0,0,0,0);cursor:pointer;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;transition:transform .1s;transform:translate(0, calc(var(--y, 0)))}button:before{border:2px solid #e6e6e6;background:linear-gradient(rgba(204, 204, 204, 0.65), #000) #000;content:"";box-sizing:border-box;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:80%;width:80%;border-radius:50%}button:active:before{background:linear-gradient(#000, rgba(204, 204, 204, 0.65)) #000}button:nth-of-type(1){right:100%}button:nth-of-type(2){left:100%}button span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}button:hover{--y: -5%}button svg{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) rotate(0deg) translate(2%, 0);height:30%;fill:#e6e6e6}button:nth-of-type(1) svg{transform:translate(-50%, -50%) rotate(180deg) translate(2%, 0)}.scroll-icon{height:30px;position:fixed;top:1rem;right:1rem;color:#e6e6e6;-webkit-animation:action 4s infinite;animation:action 4s infinite}.boxes{height:100vh;width:100%;overflow:hidden;position:absolute;transform-style:preserve-3d;perspective:800px;touch-action:none}.box{transform-style:preserve-3d;position:absolute;top:50%;left:50%;height:20vmin;width:20vmin;min-height:var(--min-size);min-width:var(--min-size);display:none;background:#000}.box:after{content:"";position:absolute;top:50%;left:50%;height:100%;width:100%;background-image:var(--src);background-size:cover;transform:translate(-50%, -50%) rotate(180deg) translate(0, -100%) translate(0, -0.5vmin);opacity:.75}.box:before{content:"";position:absolute;top:50%;left:50%;height:100%;width:100%;background:linear-gradient(var(--bg) 50%, transparent);transform:translate(-50%, -50%) rotate(180deg) translate(0, -100%) translate(0, -0.5vmin) scale(1.01);z-index:2}.box img{position:absolute;height:100%;width:100%;top:0;left:0;-o-object-fit:cover;object-fit:cover}.box label{z-index:1;width:100%;display:block;position:absolute;bottom:100%;text-align:center}.box .tag{position:relative;top:.5em;border-radius:8px;padding:.25em .5em;font-size:.8em;line-height:1em;color:gold;background:#000;display:inline-flex;margin-right:.125em}@supports(-webkit-box-reflect: below){.box{-webkit-box-reflect:below .5vmin linear-gradient(transparent 0 50%, #fff 100%)}.box:after,.box:before{display:none}}@-webkit-keyframes action{0%,25%,50%,100%{transform:translate(0, 0)}12.5%,37.5%{transform:translate(0, 25%)}}@keyframes action{0%,25%,50%,100%{transform:translate(0, 0)}12.5%,37.5%{transform:translate(0, 25%)}}aside{position:fixed;top:0;right:0;background:rgba(0,0,0,.1);display:inline-flex;flex-direction:column;padding:4rem .5rem 0 .5rem;border-radius:0 0 0 10px;z-index:2}.toggle{height:40px;width:40px;display:block;background:none;border:none;cursor:pointer;text-align:center;padding:0;margin:0 0 1rem 0}.toggle svg{max-width:30px;max-height:30px}.toggle input[type=checkbox]{position:absolute;z-index:-1;visibility:hidden}.toggle svg{display:none}.toggle input[type=checkbox]:checked~svg.on{display:block}.toggle input[type=checkbox]:not(:checked)~svg.off{display:block}header{position:fixed;top:0;left:0;width:100%;padding:1rem;z-index:1}#company-logo{max-width:100%;max-height:140px;display:block;margin:auto}header nav{display:flex;justify-content:center;column-gap:2rem;margin:2rem 0}header nav a{border:2px solid #fff;background:none;border-radius:40px;padding:1rem 2rem;text-decoration:none;cursor:pointer;width:160px;text-align:center;transition:background .3s ease;color:inherit}header nav a:not(.active):hover{background:hsla(0,0%,100%,.3)}header nav a.active{border-color:#861189}#rotate-to-landscape{display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed;pointer-events:none;background:#000;height:100vh;width:100vw;top:0;left:0;text-align:center;z-index:-1;visibility:hidden}#rotate-to-landscape .phone{width:50px;height:100px;border:3px solid #fff;border-radius:10px;-webkit-animation:rotate 1.5s ease-in-out infinite alternate;animation:rotate 1.5s ease-in-out infinite alternate}@media screen and (orientation: portrait)and (max-aspect-ratio: 0.8){#rotate-to-landscape{z-index:1000;visibility:visible}body>*:not(#rotate-to-landscape){display:none}}@keyframes rotate{0%{transform:rotate(0deg)}50%{transform:rotate(-90deg)}100%{transform:rotate(-90deg)}}@media screen and (max-height: 1000px){header{display:inline-flex;padding:2rem}#company-logo{display:inline-flex;margin:auto 1rem auto 0;max-height:50px}header nav{display:inline-flex;margin:0;align-items:center}}@media screen and (max-height: 560px){header{padding:1.5rem}#company-logo{max-height:40px}header nav a{padding:.5rem 1rem;width:auto}}@media screen and (max-height: 500px){:root{--min-size: 150px}header{padding:1rem}#company-logo{max-height:30px}header nav{column-gap:1rem}header nav a{padding:.24rem .5rem}}@media screen and (max-height: 350px){:root{--min-size: 135px}}