@thisiscrowd/crowdbox 1.0.0

package/README.md

@@ -0,0 +1,348 @@
+# Crowdbox
+
+A modern, lightweight, extensible JavaScript Crowdbox gallery plugin.
+
+## Features
+
+- **Image & Video lightbox** — images, MP4/WebM, YouTube, Vimeo, iframes
+- **Mixed media galleries** — combine any media types in one gallery
+- **Thumbnail strip** — lazy-loaded, scrollable, active-highlighted
+- **Zoom & pan** — click, double-click, pinch (mobile), keyboard shortcuts
+- **Touch & drag** — swipe to navigate, drag to pan when zoomed
+- **Fullscreen** — native browser fullscreen API
+- **Keyboard navigation** — arrows, Escape, `+`/`-` for zoom, `f` for fullscreen
+- **Autoplay** — configurable interval
+- **Framework adapters** — React component, hooks, Next.js SSR-safe dynamic import
+
+---
+
+
+## Quick Start — Vanilla JS
+
+### HTML data-attribute approach (auto-init)
+
+```html
+<link rel="stylesheet" href="crowdbox.css" />
+
+<!-- Gallery group -->
+<div data-lgx-gallery="my-photos">
+  <a href="full.jpg" data-lgx data-lgx-gallery="my-photos"
+     data-lgx-thumb="thumb.jpg" data-lgx-caption="Caption text">
+    <img src="thumb.jpg" alt="Photo" />
+  </a>
+  <a href="full2.jpg" data-lgx data-lgx-gallery="my-photos"
+     data-lgx-thumb="thumb2.jpg">
+    <img src="thumb2.jpg" alt="Photo 2" />
+  </a>
+</div>
+
+<script src="crowdbox.umd.js"></script>
+<script>
+  const gallery = new Crowdbox({
+    selector: '[data-lgx]',
+    thumbnails: true,
+    captions: true,
+    zoom: true,
+    loop: true,
+  });
+</script>
+```
+
+### JavaScript API
+
+```js
+import Crowdbox from 'crowdbox';
+import 'crowdbox/styles';
+
+const gallery = new Crowdbox({ loop: true, thumbnails: true });
+
+// Open with an array of items
+gallery.open([
+  { src: 'photo.jpg',  type: 'image',   caption: 'A photo' },
+  { src: 'https://www.youtube.com/watch?v=VIDEO_ID', type: 'youtube' },
+  { src: 'clip.mp4',   type: 'video',   poster: 'poster.jpg' },
+  { src: 'https://vimeo.com/VIDEO_ID', type: 'vimeo' },
+], 0 /* startIndex */);
+
+// Navigate
+gallery.next();
+gallery.prev();
+gallery.goTo(2);
+
+// Zoom
+gallery.zoomIn();
+gallery.zoomOut();
+gallery.resetZoom();
+
+// Events
+gallery
+  .on('open',  ({ index, item }) => console.log('opened', index))
+  .on('slide', ({ index, item }) => console.log('slide', index))
+  .on('close', () => console.log('closed'));
+
+// Cleanup
+gallery.destroy();
+```
+
+---
+
+## Options
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `selector` | `string` | `'[data-lgx]'` | CSS selector for trigger elements |
+| `loop` | `boolean` | `true` | Loop at gallery ends |
+| `keyboard` | `boolean` | `true` | Arrow keys, Escape, +/- zoom |
+| `touch` | `boolean` | `true` | Swipe to navigate |
+| `drag` | `boolean` | `true` | Mouse drag |
+| `zoom` | `boolean` | `true` | Zoom controls & pinch zoom |
+| `thumbnails` | `boolean` | `true` | Thumbnail strip |
+| `captions` | `boolean` | `true` | Caption display |
+| `counter` | `boolean` | `true` | "1 of 6" counter |
+| `fullscreen` | `boolean` | `true` | Fullscreen button |
+| `download` | `boolean` | `false` | Download button |
+| `share` | `boolean` | `false` | Share button (Web Share API → clipboard fallback) |
+| `closeOnBackdrop` | `boolean` | `true` | Click backdrop to close |
+| `closeOnEscape` | `boolean` | `true` | Escape key closes |
+| `animationDuration` | `number` | `300` | Open/close animation (ms) |
+| `slideAnimationDuration` | `number` | `250` | Slide transition (ms) |
+| `zoomStep` | `number` | `0.5` | Zoom per click |
+| `zoomMax` | `number` | `4` | Maximum zoom |
+| `lazyLoad` | `boolean` | `true` | Lazy-load adjacent images |
+| `preload` | `number` | `1` | Slides to preload ahead/behind |
+| `autoplay` | `boolean` | `false` | Autoplay slideshow |
+| `showAutoplay` | `boolean` | `true` | Show play button  |
+| `autoplayInterval` | `number` | `4000` | Autoplay interval (ms) |
+| `i18n` | `object` | see source | Localisation strings |
+
+---
+
+## GalleryItem properties
+
+| Property | Type | Description |
+|---|---|---|
+| `src` | `string` | **Required.** Media URL |
+| `type` | `string` | `image` \| `video` \| `youtube` \| `vimeo` \| `iframe` (auto-detected) |
+| `thumb` | `string` | Thumbnail URL |
+| `caption` | `string` | Caption HTML |
+| `alt` | `string` | Image alt text |
+| `poster` | `string` | Video poster image |
+| `autoplay` | `boolean` | Autoplay media on open |
+| `loop` | `boolean` | Loop video |
+| `muted` | `boolean` | Start muted |
+| `download` | `string` | Override download URL |
+| `shareUrl` | `string` | URL used by share button |
+| `start` | `number` | YouTube start time (seconds) |
+
+---
+
+## Data attributes
+
+| Attribute | Description |
+|---|---|
+| `data-lgx` | Marks an element as a gallery trigger |
+| `data-lgx-gallery="group"` | Groups items into one gallery |
+| `data-lgx-src="url"` | Override the href/src URL |
+| `data-lgx-type="youtube"` | Explicit media type |
+| `data-lgx-thumb="url"` | Thumbnail URL |
+| `data-lgx-caption="text"` | Caption text |
+| `data-lgx-poster="url"` | Video poster |
+| `data-lgx-autoplay` | Presence = autoplay |
+| `data-lgx-init='{"loop":true}'` | Auto-init a container with JSON options |
+
+---
+
+## React
+
+### GalleryGrid (simplest)
+
+```jsx
+import { GalleryGrid } from 'crowdbox/react';
+import 'crowdbox/styles';
+
+const items = [
+  { src: 'photo1.jpg', type: 'image', thumb: 'thumb1.jpg', caption: 'Photo 1' },
+  { src: 'https://www.youtube.com/watch?v=ID', type: 'youtube' },
+];
+
+export default function Page() {
+  return <GalleryGrid items={items} columns={3} />;
+}
+```
+
+### Controlled Lightbox component
+
+```jsx
+import { Lightbox } from 'crowdbox/react';
+
+const [open, setOpen] = useState(false);
+
+<Lightbox
+  items={items}
+  open={open}
+  startIndex={0}
+  onClose={() => setOpen(false)}
+  thumbnails captions zoom fullscreen
+/>
+```
+
+### useLightbox hook
+
+```jsx
+import { useLightbox } from 'crowdbox/react';
+
+function MyGallery({ items }) {
+  const { open } = useLightbox({ thumbnails: true, captions: true });
+
+  return (
+    <button onClick={() => open(items, 0)}>
+      Open Gallery
+    </button>
+  );
+}
+```
+
+---
+
+## Next.js (App Router)
+
+```jsx
+'use client';
+import { useEffect, useRef } from 'react';
+
+export default function Gallery({ items }) {
+  const galleryRef = useRef(null);
+
+  useEffect(() => {
+    let g;
+    // Dynamic import keeps Crowdbox out of the server bundle
+    import('crowdbox').then(({ Crowdbox }) => {
+      import('crowdbox/styles');
+      g = new Crowdbox({ selector: null, thumbnails: true });
+      galleryRef.current = g;
+    });
+    return () => g?.destroy();
+  }, []);
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
+      {items.map((item, i) => (
+        <img
+          key={i}
+          src={item.thumb}
+          alt={item.caption}
+          onClick={() => galleryRef.current?.open(items, i)}
+          style={{ cursor: 'pointer', width: '100%', aspectRatio: '1', objectFit: 'cover' }}
+        />
+      ))}
+    </div>
+  );
+}
+```
+
+
+```js
+import { Registry } from 'crowdbox';
+
+const WatermarkPlugin = {
+  pluginName: 'watermark',
+
+  init(gallery) { this.gallery = gallery; },
+
+  afterSlide(index, item) {
+    const stage = this.gallery._dom.stage;
+    stage.querySelectorAll('.my-watermark').forEach(el => el.remove());
+    const wm = document.createElement('div');
+    wm.className = 'my-watermark';
+    wm.textContent = '© My Site';
+    wm.style.cssText = 'position:absolute;bottom:8px;right:8px;color:rgba(255,255,255,.4);font-size:12px;pointer-events:none;';
+    stage.appendChild(wm);
+  },
+
+  destroy() {},
+};
+
+Registry.registerPlugin('watermark', WatermarkPlugin);
+
+// Then instantiate with watermark: true
+const gallery = new Crowdbox({ watermark: true });
+```
+
+### Custom media adapter
+
+```js
+import { Registry } from 'crowdbox';
+
+Registry.registerAdapter('soundcloud', {
+  type: 'soundcloud',
+  canHandle: (item) => /soundcloud\.com/.test(item.src),
+  render(item) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'lgx-content lgx-content--iframe';
+    const iframe = document.createElement('iframe');
+    iframe.src = `https://w.soundcloud.com/player/?url=${encodeURIComponent(item.src)}`;
+    iframe.className = 'lgx-iframe';
+    wrapper.appendChild(iframe);
+    return wrapper;
+  },
+  getThumbnail: (item) => item.thumb ?? null,
+});
+```
+
+---
+
+## CSS Theming
+
+Override CSS custom properties on `:root` or a parent element:
+
+```css
+:root {
+  --lgx-backdrop:    rgba(10, 10, 30, 0.96);  /* dark blue overlay */
+  --lgx-accent:      #ff6b35;                  /* orange accent */
+  --lgx-btn-size:    48px;
+  --lgx-thumb-size:  80px;
+  --lgx-duration:    400ms;
+}
+```
+
+---
+
+## Keyboard shortcuts
+
+| Key | Action |
+|---|---|
+| `←` / `→` | Previous / Next |
+| `Escape` | Close |
+| `f` | Toggle fullscreen |
+| `+` / `=` | Zoom in |
+| `-` | Zoom out |
+| `0` | Reset zoom |
+
+---
+
+## Events
+
+```js
+gallery
+  .on('open',           ({ index, item }) => {})
+  .on('close',          ()                => {})
+  .on('slide',          ({ index, item }) => {})
+  .on('zoom',           ({ zoom })        => {})
+  .on('download',       ({ item })        => {})
+  .on('share',          ({ item, method }) => {})
+  .on('autoplay:start', ()                => {})
+  .on('autoplay:stop',  ()                => {});
+```
+
+---
+
+## Browser support
+
+All modern browsers (Chrome 80+, Firefox 75+, Safari 13.1+, Edge 80+). Uses:
+- Pointer Events / Touch Events
+- IntersectionObserver (lazy loading)
+- CSS custom properties
+- Web Animations API (via CSS keyframes)
+- Fullscreen API
+
+---

package/dist/crowdbox.css

@@ -0,0 +1 @@
+:root{--lgx-backdrop: rgba(0, 0, 0, 0.92);--lgx-bg: #111;--lgx-text: #fff;--lgx-text-muted: rgba(255, 255, 255, 0.6);--lgx-accent: #4f8ef7;--lgx-btn-bg: rgba(255, 255, 255, 0.12);--lgx-btn-hover: rgba(255, 255, 255, 0.22);--lgx-btn-size: 44px;--lgx-btn-radius: 50%;--lgx-nav-size: 54px;--lgx-thumb-size: 72px;--lgx-thumb-gap: 6px;--lgx-toolbar-height: 56px;--lgx-caption-height: 48px;--lgx-thumb-strip-h: 90px;--lgx-radius: 8px;--lgx-z: 9999;--lgx-duration: 300ms;--lgx-ease: cubic-bezier(0.4, 0, 0.2, 1);--lgx-slide-duration: 360ms}@keyframes lgx-fade-in{from{opacity:0}to{opacity:1}}@keyframes lgx-fade-out{from{opacity:1}to{opacity:0}}@keyframes lgx-slide-in-right{from{transform:translate3d(32px, 0, 0) scale(0.98);opacity:0}to{transform:translate3d(0, 0, 0) scale(1);opacity:1}}@keyframes lgx-slide-in-left{from{transform:translate3d(-32px, 0, 0) scale(0.98);opacity:0}to{transform:translate3d(0, 0, 0) scale(1);opacity:1}}@keyframes lgx-slide-out-left{from{transform:translate3d(0, 0, 0) scale(1);opacity:1}to{transform:translate3d(-32px, 0, 0) scale(0.98);opacity:0}}@keyframes lgx-slide-out-right{from{transform:translate3d(0, 0, 0) scale(1);opacity:1}to{transform:translate3d(32px, 0, 0) scale(0.98);opacity:0}}@keyframes lgx-spin{to{transform:rotate(360deg)}}@keyframes lgx-pulse{0%,100%{opacity:1}50%{opacity:.4}}.lgx-slide--in-right,.lgx-slide--in-left,.lgx-slide--out-left,.lgx-slide--out-right{will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}.lgx-slide--active{transform:translate3d(0, 0, 0) scale(1);opacity:1}.lgx-slide--in-right{animation:lgx-slide-in-right var(--lgx-slide-duration) cubic-bezier(0.22, 1, 0.36, 1) both}.lgx-slide--in-left{animation:lgx-slide-in-left var(--lgx-slide-duration) cubic-bezier(0.22, 1, 0.36, 1) both}.lgx-slide--out-left{animation:lgx-slide-out-left var(--lgx-slide-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards}.lgx-slide--out-right{animation:lgx-slide-out-right var(--lgx-slide-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards}.lgx-toolbar{position:absolute;top:0;right:0;z-index:10;display:flex;align-items:center;gap:6px;padding:8px 12px;background:linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 100%);border-radius:0 0 0 var(--lgx-radius)}.lgx-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--lgx-btn-size);height:var(--lgx-btn-size);border:none;border-radius:var(--lgx-btn-radius);background:var(--lgx-btn-bg);color:var(--lgx-text);cursor:pointer;transition:background .18s ease,transform .15s ease,opacity .15s ease;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.lgx-btn svg{width:20px;height:20px}.lgx-btn:hover:not(:disabled){background:var(--lgx-btn-hover);transform:scale(1.08)}.lgx-btn:active:not(:disabled){transform:scale(0.95)}.lgx-btn:disabled{opacity:.3;cursor:default}.lgx-btn:focus-visible{outline:2px solid var(--lgx-accent);outline-offset:2px}.lgx-btn--close{background:hsla(0,0%,100%,.15)}.lgx-btn--close:hover{background:rgba(220,60,60,.7)}.lgx-btn--active,.lgx-btn--autoplay[aria-pressed=true]{background:#f5da2e;color:#000}.lgx-btn--nav{position:absolute;top:50%;transform:translateY(-50%);width:var(--lgx-nav-size);height:var(--lgx-nav-size);border-radius:var(--lgx-btn-radius);z-index:10;transition:background .18s ease,transform .15s ease,opacity .2s ease}.lgx-btn--nav svg{width:26px;height:26px}.lgx-btn--nav:hover:not(:disabled){transform:translateY(-50%) scale(1.1)}.lgx-btn--prev{left:12px}.lgx-btn--next{right:12px}.lgx-counter{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:600;color:var(--lgx-text-muted);letter-spacing:.5px;pointer-events:none;user-select:none}.lgx-caption{flex-shrink:0;padding:10px 24px;text-align:center;font-size:14px;line-height:1.5;color:var(--lgx-text);background:rgba(0,0,0,.55);border-top:1px solid hsla(0,0%,100%,.06)}.lgx-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.lgx-spinner__ring{width:44px;height:44px;border:3px solid hsla(0,0%,100%,.15);border-top-color:var(--lgx-text);border-radius:50%;animation:lgx-spin .75s linear infinite}.lgx-container:has(.lgx-content--loaded) .lgx-spinner{display:none}.lgx-toast{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);padding:8px 18px;background:rgba(0,0,0,.75);color:#fff;font-size:13px;border-radius:20px;pointer-events:none;animation:lgx-fade-in .2s ease,lgx-fade-out .3s 2.2s ease forwards;white-space:nowrap}.lgx-thumbs{display:flex;align-items:center;justify-content:center;gap:var(--lgx-thumb-gap);overflow-x:auto;overflow-y:hidden;padding:8px 12px;height:var(--lgx-thumb-strip-h);background:rgba(0,0,0,.5);backdrop-filter:blur(4px);scrollbar-width:thin;scrollbar-color:hsla(0,0%,100%,.3) rgba(0,0,0,0);flex-shrink:0}.lgx-thumbs::-webkit-scrollbar{height:4px}.lgx-thumbs::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.3);border-radius:2px}.lgx-thumb{flex-shrink:0;width:var(--lgx-thumb-size);height:calc(var(--lgx-thumb-strip-h) - 20px);border:2px solid rgba(0,0,0,0);border-radius:var(--lgx-radius);overflow:hidden;cursor:pointer;padding:0;background:hsla(0,0%,100%,.08);transition:border-color .2s var(--lgx-ease),opacity .2s var(--lgx-ease),transform .2s var(--lgx-ease);opacity:.55}.lgx-thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.lgx-thumb:hover{opacity:.85;transform:scale(1.05)}.lgx-thumb--active{border-color:var(--lgx-accent);opacity:1;transform:scale(1.08)}.lgx-thumb--no-image{display:flex;align-items:center;justify-content:center;color:var(--lgx-text-muted);font-size:13px;font-weight:600}.lgx-thumb:focus-visible{outline:2px solid var(--lgx-accent);outline-offset:2px}.lgx-mosaic{position:absolute;inset:0;display:grid;pointer-events:none;z-index:3;overflow:hidden;border-radius:inherit}.lgx-mosaic__tile{--lgx-tile-delay: 0ms;will-change:transform,opacity,border-radius;animation:lgx-mosaic-out 420ms cubic-bezier(0.4, 0, 0.6, 1) var(--lgx-tile-delay, 0ms) both}@keyframes lgx-mosaic-out{0%{transform:scale(1);opacity:1;border-radius:0}45%{transform:scale(1.06);border-radius:4px;opacity:1}100%{transform:scale(0) rotate(12deg);border-radius:50%;opacity:0}}@media(prefers-reduced-motion: reduce){.lgx-mosaic__tile{animation:none;opacity:0}}@media(max-width: 640px){:root{--lgx-btn-size: 38px;--lgx-nav-size: 42px;--lgx-thumb-size: 56px;--lgx-thumb-strip-h: 76px}.lgx-toolbar{padding:6px 8px;gap:4px}.lgx-btn--prev{left:4px}.lgx-btn--next{right:4px}.lgx-caption{font-size:12px;padding:8px 16px}}@media(hover: none){.lgx-btn--nav{opacity:1 !important}}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}@media(prefers-color-scheme: dark){:root{--lgx-btn-bg: rgba(255, 255, 255, 0.15)}}.lgx-modal{position:fixed;inset:0;z-index:var(--lgx-z);display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:var(--lgx-text);-webkit-font-smoothing:antialiased}.lgx-backdrop{position:absolute;inset:0;background:var(--lgx-backdrop)}.lgx-container{position:relative;display:flex;flex-direction:column;flex:1;overflow:hidden;outline:none}.lgx-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;user-select:none}.lgx-slide-wrapper{position:relative;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.lgx-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}.lgx-content--image{display:grid;place-items:center;overflow:hidden;padding:clamp(16px,4vh,42px) clamp(16px,5vw,72px);box-sizing:border-box}.lgx-image{max-width:100%;max-height:100%;width:auto;height:auto;margin:auto;object-fit:contain;display:block;border-radius:2px;transform-origin:center center;will-change:transform;transition:transform .1s ease;pointer-events:none}.lgx-video{max-width:90vw;max-height:calc(90vh - var(--lgx-toolbar-height) - var(--lgx-caption-height) - var(--lgx-thumb-strip-h));border-radius:var(--lgx-radius);background:#000;display:block}.lgx-content--iframe{padding:clamp(16px,4vh,42px) clamp(16px,5vw,72px);box-sizing:border-box;overflow:visible}.lgx-content--iframe:not(.lgx-content--loaded)::after{content:"";position:absolute;left:50%;top:50%;width:min(90vw,960px);height:min(56.25vw,540px,90vh - var(--lgx-toolbar-height) - var(--lgx-caption-height) - var(--lgx-thumb-strip-h) - 80px);transform:translate(-50%, -50%);border-radius:var(--lgx-radius);background:linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%);background-size:200% 100%;animation:lgx-pulse 1.5s ease infinite;pointer-events:none}.lgx-iframe{width:min(90vw,960px);height:min(56.25vw,540px,90vh - var(--lgx-toolbar-height) - var(--lgx-caption-height) - var(--lgx-thumb-strip-h) - 80px);max-width:100%;max-height:100%;border:none;display:block;background:#000;border-radius:var(--lgx-radius);overflow:hidden}.lgx-content--error{color:var(--lgx-text-muted);font-size:14px;padding:24px;text-align:center}.lgx-content--error::before{content:"⚠ Failed to load media";display:block}.lgx-modal--fullscreen .lgx-image{max-height:100vh;max-width:100vw}.lgx-modal--fullscreen .lgx-iframe{width:100vw;max-width:100vw;height:100vh}/*# sourceMappingURL=crowdbox.css.map */

package/dist/crowdbox.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/styles/_variables.scss","../src/styles/_animations.scss","../src/styles/_toolbar.scss","../src/styles/_thumbnails.scss","../src/styles/_mosaic.scss","../src/styles/_responsive.scss","../src/styles/main.scss"],"names":[],"mappings":"CACA,MACE,oCACA,eACA,iBACA,2CACA,sBACA,wCACA,2CACA,qBACA,sBACA,qBACA,uBACA,qBACA,2BACA,2BACA,0BACA,kBACA,cACA,sBACA,yCACA,4BCrBF,uBACE,eACA,cAGF,wBACE,eACA,cAGF,8BACE,6DACA,sDAGF,6BACE,8DACA,sDAGF,8BACE,uDACA,6DAGF,+BACE,uDACA,4DAGF,oBACE,6BAGF,qBACE,kBACA,gBAQF,oFAIE,8BACA,2BACA,mCAGF,mBACE,wCACA,UAGF,gHACA,8GACA,oHACA,sHC5DA,aACE,kBACA,MACA,QACA,WACA,aACA,mBACA,QACA,iBACA,gFACA,sCAIF,SACE,oBACA,mBACA,uBACA,0BACA,2BACA,YACA,oCACA,6BACA,sBACA,eACA,sEACA,0BACA,kCAEA,oCAEA,8BACE,gCACA,sBAGF,+BACE,sBAGF,kBACE,WACA,eAGF,uBACE,oCACA,mBAGF,gBACE,+BACA,oDAGF,uDAEE,mBACA,WAMJ,cACE,kBACA,QACA,2BACA,0BACA,2BACA,oCACA,WACA,qEAEA,yCAEA,yEAGF,yBACA,0BAGA,aACE,kBACA,SACA,SACA,2BACA,eACA,gBACA,4BACA,oBACA,oBACA,iBAGF,aAGE,cACA,kBACA,kBACA,eACA,gBACA,sBACA,2BACA,yCAIF,aACE,kBACA,QACA,aACA,mBACA,uBACA,oBAEA,mBACE,WACA,YACA,qCACA,iCACA,kBACA,wCAMJ,sDACE,aAIF,WACE,kBACA,YACA,SACA,2BACA,iBACA,2BACA,WACA,eACA,mBACA,oBACA,mEACA,mBCnJF,YACE,aACA,mBACA,uBACA,yBACA,gBACA,kBACA,iBACA,gCACA,0BACA,0BACA,qBACA,iDACA,cAEA,0CACA,qFAGF,WACE,cACA,4BACA,6CACA,+BACA,gCACA,gBACA,eACA,UACA,+BACA,sGACA,YAEA,eACE,WACA,YACA,iBACA,cACA,oBAGF,iBACE,YACA,sBAGF,mBACE,+BACA,UACA,sBAGF,qBACE,aACA,mBACA,uBACA,4BACA,eACA,gBAGF,yBACE,oCACA,mBC1DJ,YACE,kBACA,QACA,aACA,oBACA,UACA,gBACA,sBAGF,kBACE,sBACA,4CACA,4FAGF,0BACE,GACE,mBACA,UACA,gBAEF,IACE,sBACA,kBACA,UAEF,KACE,iCACA,kBACA,WAKJ,uCACE,kBACE,eACA,WC1CJ,yBACE,MACE,qBACA,qBACA,uBACA,0BAGF,qCACA,wBACA,yBACA,8CAGF,oBAEE,oCAGF,uCACE,qBACE,oCACA,uCACA,sCAKJ,mCACE,MACE,yCCvBJ,WACE,eACA,QACA,qBACA,aACA,sBACA,6EACA,sBACA,mCAGF,cACE,kBACA,QACA,+BAGF,eACE,kBACA,aACA,sBACA,OACA,gBACA,aAIF,WACE,kBACA,OACA,aACA,aACA,mBACA,uBACA,gBACA,iBAGF,mBACE,kBACA,WACA,YACA,YACA,aACA,gBAKF,aACE,kBACA,QACA,aACA,mBACA,uBACA,YACA,aACA,8BACA,2BACA,mCAKF,oBACE,aACA,mBACA,gBACA,kDACA,sBAGF,WACE,eACA,gBACA,WACA,YACA,YACA,mBACA,cACA,kBACA,+BACA,sBACA,8BACA,oBAIF,WACE,eACA,yGACA,gCACA,gBACA,cAIF,qBACE,kDACA,sBACA,iBAGA,sDACE,WACA,kBACA,SACA,QACA,sBACA,yHACA,gCACA,gCACA,mGACA,0BACA,uCACA,oBAIJ,YACE,sBACA,yHACA,eACA,gBACA,YACA,cACA,gBACA,gCACA,gBAIF,oBACE,4BACA,eACA,aACA,kBAEA,4BACE,iCACA,cAMF,kCACE,iBACA,gBAEF,mCACE,YACA,gBACA","file":"crowdbox.css"}