:root{--menu-blue:#3366fe;--menu-turquoise:#12b2b1;--menu-yellow:#feec00;--menu-red:#b23123;--menu-white:#fff;--menu-black:#000}
html.brikki-menu-open,body.brikki-menu-open{height:100%;overflow:hidden;overscroll-behavior:none}
body.brikki-menu-open{position:fixed;inset-inline:0;width:100%;touch-action:none}
.brikki-menu-button{position:fixed;z-index:90;top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));display:grid;place-items:center;width:72px;height:72px;border:0;border-radius:22px;background:var(--menu-white);color:var(--menu-blue);box-shadow:0 12px 34px -14px rgb(0 0 0/.32);cursor:pointer;transition:transform .2s ease,opacity .2s ease;-webkit-tap-highlight-color:transparent}
.brikki-menu-button svg{display:block;width:43px;height:43px}
.brikki-menu-button:hover{transform:scale(1.08);opacity:.9}
.brikki-menu-button:focus-visible{outline:5px solid var(--menu-yellow);outline-offset:4px}
.brikki-menu-overlay{position:fixed;z-index:100;inset:0;display:grid;place-items:start center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgb(0 95 94/.72);opacity:0;visibility:hidden;pointer-events:none;touch-action:none;overscroll-behavior:none;transition:opacity .24s ease,visibility 0s linear .24s}
.brikki-menu-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.brikki-menu-panel{--menu-radius:52px;--menu-pad-y:clamp(30px,5vw,62px);--menu-pad-x:clamp(30px,5vw,62px);--menu-scroll-inset:28px;--menu-scroll-right:clamp(10px,1.4vw,18px);--menu-close-size:64px;--menu-layout-gap:clamp(22px,3vw,36px);--menu-max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));position:relative;container-type:inline-size;width:min(1120px,100%);max-height:var(--menu-max-height);margin:auto 0;overflow:hidden;border-radius:var(--menu-radius);background:var(--menu-white);box-shadow:0 30px 90px -35px rgb(0 0 0/.55);transform:translate(44%, -35%) scale(.16);transform-origin:top right;opacity:.3;transition:transform .38s cubic-bezier(.2,.9,.25,1.18),opacity .2s ease}
.brikki-menu-scroll{box-sizing:border-box;width:calc(100% - var(--menu-scroll-right));max-height:calc(var(--menu-max-height) - var(--menu-scroll-inset) - var(--menu-scroll-inset));margin-block:var(--menu-scroll-inset);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:calc(var(--menu-pad-y) - var(--menu-scroll-inset)) calc(var(--menu-pad-x) + var(--menu-close-size) + var(--menu-layout-gap)) calc(var(--menu-pad-y) - var(--menu-scroll-inset)) var(--menu-pad-x);scrollbar-gutter:stable;scrollbar-color:var(--menu-blue) transparent}
.brikki-menu-scroll::-webkit-scrollbar{width:13px}
.brikki-menu-scroll::-webkit-scrollbar-track{background:transparent}
.brikki-menu-scroll::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background:var(--menu-blue);background-clip:content-box}
.brikki-menu-overlay.is-open .brikki-menu-panel{transform:none;opacity:1}
.brikki-menu-close{position:absolute;z-index:2;top:var(--menu-pad-y);right:calc(var(--menu-pad-x) + var(--menu-scroll-right) + var(--menu-layout-gap) * .3);display:grid;place-items:center;width:var(--menu-close-size);height:var(--menu-close-size);border:0;border-radius:50%;padding:0;background:var(--menu-yellow);color:var(--menu-black);cursor:pointer;transition:transform .2s ease,opacity .2s ease}
.brikki-menu-close svg{width:38px;height:38px}
.brikki-menu-close:hover{transform:scale(1.08);opacity:.88}
.brikki-menu-close:focus-visible{outline:none;box-shadow:0 0 0 4px var(--menu-yellow)}
.brikki-menu-start{width:100%;margin:0 0 var(--menu-layout-gap)}
.brikki-menu-start .brikki-menu-link{min-height:112px;box-shadow:0 5px 22px -8px rgb(0 0 0/.26),0 0 10px -5px rgb(0 0 0/.18)}
.brikki-menu-groups{display:grid;grid-template-columns:1fr;grid-template-areas:'stories' 'maker' 'more' 'over';align-items:stretch;gap:var(--menu-layout-gap)}
.brikki-menu-stories{grid-area:stories}
.brikki-menu-maker{grid-area:maker}
.brikki-menu-more{grid-area:more}
.brikki-menu-over{grid-area:over}
.brikki-menu-group{min-width:0;border-radius:34px;padding:clamp(22px,3.5vw,36px);background:#f4f4f4}
.brikki-menu-heading{display:flex;align-items:center;gap:12px;margin:0 0 23px;color:var(--menu-turquoise);font:700 clamp(26px,3.6vw,38px)/1.08 'Futura Bold BT','Futura','Century Gothic',sans-serif}
.brikki-menu-heading a{color:inherit;text-decoration:none}
.brikki-menu-heading a:hover{opacity:.75;text-decoration:none}
.brikki-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.brikki-menu-more .brikki-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.brikki-menu-link{display:grid;min-width:0;min-height:112px;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;justify-items:center;align-content:center;gap:8px;border-radius:24px;padding:10px 9px;background:var(--menu-white);color:var(--menu-blue);text-align:center;text-decoration:none;box-shadow:0 10px 25px -22px rgb(0 0 0/.45);transition:transform .2s ease,background .2s ease,color .2s ease,opacity .2s ease}
.brikki-menu-link .brikki-menu-icon{display:block;order:0;flex:none;width:60px;height:60px;overflow:visible}
.brikki-menu-sprite{background-image:url('../images/iconen-menu.svg');background-repeat:no-repeat;background-size:1105.88236% 803.23508%;background-position:var(--sprite-x) var(--sprite-y)}
.brikki-menu-icon-listen{--sprite-x:-.84211%;--sprite-y:-1.20452%}
.brikki-menu-icon-read{--sprite-x:10.16082%;--sprite-y:-1.20452%}
.brikki-menu-icon-watch{--sprite-x:21.57895%;--sprite-y:-1.20452%}
.brikki-menu-icon-color{--sprite-x:62.04678%;--sprite-y:-1.20452%}
.brikki-menu-icon-puzzle{--sprite-x:74.23392%;--sprite-y:-1.20452%}
.brikki-menu-icon-roar{--sprite-x:85.02924%;--sprite-y:-1.20452%}
.brikki-menu-icon-make{--sprite-x:62.04678%;--sprite-y:17.36512%}
.brikki-menu-icon-film{--sprite-x:74.23392%;--sprite-y:17.06817%}
.brikki-menu-icon-sticker{--sprite-x:85.02924%;--sprite-y:17.36512%}
.brikki-menu-icon-scissors{--sprite-x:62.25146%;--sprite-y:35.80092%}
.brikki-menu-icon-idea{--sprite-x:74.23392%;--sprite-y:35.79256%}
.brikki-menu-icon-calendar{--sprite-x:62.24854%;--sprite-y:62.50941%}
.brikki-menu-icon-book{--sprite-x:74.23684%;--sprite-y:62.50523%}
.brikki-menu-icon-giant{--sprite-x:87.66959%;--sprite-y:62.50941%}
.brikki-menu-icon-children{--sprite-x:62.24561%;--sprite-y:82.19992%}
.brikki-menu-icon-play{--sprite-x:74.27778%;--sprite-y:82.78963%}
.brikki-menu-icon-about{--sprite-x:-.84211%;--sprite-y:17.06399%}
.brikki-menu-icon-parents{--sprite-x:10.26316%;--sprite-y:18.17231%}
.brikki-menu-icon-privacy{--sprite-x:21.08187%;--sprite-y:17.06399%}
.brikki-menu-link span{order:1;max-width:100%;color:var(--menu-black);font:700 16px/1.12 'Futura Bold BT','Futura','Century Gothic',sans-serif;overflow-wrap:anywhere;word-break:normal;hyphens:auto}
.brikki-menu-link:hover{z-index:1;transform:scale(1.06);background:#e8edff;color:var(--menu-blue);text-decoration:none}
.brikki-menu-link:hover span{color:var(--menu-black)}
.brikki-menu-link:focus-visible{outline:5px solid var(--menu-yellow);outline-offset:2px}
.brikki-menu-icon .wit{fill:#fff}
.brikki-menu-icon .blauw{fill:currentColor}
.brikki-menu-icon .lijn{fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.brikki-menu-icon .dun{stroke-width:6}
.brikki-menu-icon .rood{fill:var(--menu-red)}
.brikki-menu-icon .groen{fill:var(--menu-turquoise)}
.brikki-menu-icon .geel{fill:var(--menu-yellow)}
@media(max-width:820px){.brikki-menu-grid,.brikki-menu-more .brikki-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.brikki-menu-button{width:60px;height:60px;border-radius:18px}.brikki-menu-button svg{width:36px;height:36px}.brikki-menu-panel{--menu-radius:36px;--menu-pad-y:28px;--menu-pad-x:20px;--menu-scroll-inset:20px;--menu-close-size:54px;--menu-layout-gap:14px}.brikki-menu-close svg{width:32px;height:32px}.brikki-menu-start .brikki-menu-link{min-height:104px}.brikki-menu-group{border-radius:28px;padding:20px 14px}.brikki-menu-grid,.brikki-menu-more .brikki-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.brikki-menu-link{min-height:104px;border-radius:21px}.brikki-menu-link .brikki-menu-icon{width:55px;height:55px}.brikki-menu-link span{font-size:15px}}
@media(max-width:599px) and (orientation:portrait){body.brikki-homepage>main{padding-top:88px}}
@media(orientation:landscape) and (max-height:560px){.brikki-menu-overlay{place-items:start center}.brikki-menu-panel{--menu-radius:34px;--menu-pad-y:24px;--menu-pad-x:32px;--menu-scroll-inset:19px;--menu-close-size:48px;--menu-layout-gap:20px;--menu-max-height:calc(100dvh - 20px);margin:0}.brikki-menu-close svg{width:28px;height:28px}.brikki-menu-start .brikki-menu-link{min-height:84px}.brikki-menu-group{padding:18px;border-radius:25px}.brikki-menu-heading{margin-bottom:14px;font-size:27px}.brikki-menu-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.brikki-menu-link{min-height:84px;padding:6px}.brikki-menu-link .brikki-menu-icon{width:42px;height:42px}.brikki-menu-link span{font-size:13px}}
/* Pas op echt brede schermen twee kolommen gebruiken. Dit voorkomt smalle, hoge
   menuknoppen in portret op oudere iPads en werkt ook zonder container queries. */
@media(min-width:900px){.brikki-menu-groups{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:'stories maker' 'over maker' 'more more'}.brikki-menu-more .brikki-menu-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.brikki-menu-overlay,.brikki-menu-panel,.brikki-menu-button,.brikki-menu-close,.brikki-menu-link{transition:none}}