Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="app">
  <input id="toggle-menu" type="checkbox">
  <label for="toggle-menu" class="overlay"></label>
  <header class="nav">
    <div class="btn-menu-wrapper">
      <label for="toggle-menu" class="btn btn-menu">Menu</label>
    </div>
    
    <nav>
      <h2 class="title">Services</h2>
      <ul class="services">
        <li class="netflix">
          <label>
            <input type="checkbox" checked data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1189183/netflix-logo.png">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 27"><path d="M13.8 25.3c-1.5.3-3 .3-4.6.6L4.3 11.7v14.8c-1.5.1-2.9.3-4.3.5V0h4l5.5 15.3V0h4.2l.1 25.3zm8.3-15.4c1.6 0 4.1-.1 5.6-.1V14c-1.9 0-4.1 0-5.6.1v6.3c2.5-.2 5-.4 7.5-.4v4l-11.7.9V0h11.7v4.2h-7.5v5.7zm23.1-5.7h-4.4v19.4c-1.4 0-2.9 0-4.2.1V4.2h-4.4V0h13v4.2zm6.9 5.4h5.8v4.2h-5.8v9.6H48V0h11.8v4.2h-7.7v5.4zm14.5 10.1c2.4.1 4.8.2 7.2.4v4.2c-3.8-.2-7.5-.5-11.4-.6V0h4.2v19.7zm10.8 4.8c1.3.1 2.8.2 4.1.3V0h-4.1v24.5zM100 0l-5.4 12.9L100 27c-1.6-.2-3.2-.5-4.8-.8l-3-7.8-3.1 7.2c-1.5-.3-3-.3-4.5-.6L90 12.7 85.1 0h4.5l2.8 7.1 3-7.1h4.6z"/></svg>
          </label>
        </li>
        <li class="toutv">
          <label>
            <input type="checkbox" checked data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1189183/toutv-logo.png">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198 50.2"><path d="M0 16.8c0-1.1.9-2 2-2s2 .9 2 2v16.7c0 1.1-.8 2.1-2 2.1-1.1 0-2-.9-2-2.1V16.8zm27.2 0c0-1.1.9-2 2-2s2 .9 2 2v16.7c0 1.1-.8 2.1-2 2.1-1.1 0-2-.9-2-2.1V16.8zm-7 12.5c.4-.7.8-1.2 1.7-1.2s1.9.8 1.9 1.9c0 .4 0 .6-.2 1.1-1.3 2.9-4.4 4.6-7.6 4.6-4.9 0-8.3-3.6-8.7-8.3-.1-1.5-.1-3.1 0-4.6.4-4.7 3.8-8.3 8.7-8.3 3.3 0 6.4 1.7 7.6 4.6.2.5.2.7.2 1.1 0 1.1-1 1.9-1.9 1.9s-1.4-.6-1.7-1.2c-.8-1.6-2.3-2.6-4.1-2.6-2.8 0-4.6 2.1-4.8 4.9-.1 1.2-.1 2.5 0 3.7.2 2.9 1.9 4.8 4.8 4.8 1.8.2 3.3-.8 4.1-2.4m117.1-6.2c-.3-4.7-4.1-8.2-8.7-8.2s-8.3 3.5-8.6 8.2c-.1 1.6-.1 2.8 0 4.4.3 4.8 4 8.2 8.6 8.2s8.4-3.5 8.7-8.2c.1-1.6.1-2.9 0-4.4m-8.7 10.1c-3.2 0-5.7-2.4-6-5.8-.1-1.5-.1-2.7 0-4.2.3-3.4 2.8-5.8 6-5.8 3.3 0 5.8 2.4 6.1 5.8.1 1.5.1 2.7 0 4.2-.3 3.4-2.8 5.8-6.1 5.8M197 14.9c-.1 0-.3-.1-.4-.1-.6 0-1.1.3-1.2.9l-6.3 17.2c0 .1-.1.2-.2.2s-.2-.1-.2-.2l-6.3-17.2c-.2-.5-.7-.8-1.2-.8-.2 0-.3 0-.5.1-.3.1-.6.4-.7.7-.1.3-.2.7 0 1l6.3 16.9c.6 1.5 1.5 2.2 2.7 2.2s2.1-.7 2.7-2.2l6.3-16.9c0-.7-.3-1.5-1-1.8m-41.2 0c-.7 0-1.3.6-1.3 1.3V27c0 3.7-2.3 6.2-5.7 6.2s-5.7-2.5-5.7-6.2V16.2c0-.7-.6-1.3-1.3-1.3s-1.3.6-1.3 1.3V27c0 5 3.5 8.7 8.3 8.7s8.3-3.6 8.3-8.7V16.2c0-.7-.6-1.3-1.3-1.3m-38 0h-12.7c-.7 0-1.3.6-1.3 1.3 0 .7.6 1.3 1.3 1.3h5.1v16.6c0 .7.6 1.3 1.3 1.3s1.3-.6 1.3-1.3V17.5h5c.8 0 1.3-.6 1.3-1.3.1-.7-.5-1.3-1.3-1.3m58.7 0h-12.7c-.7 0-1.3.6-1.3 1.3 0 .7.6 1.3 1.3 1.3h5.1v16.6c0 .7.6 1.3 1.3 1.3s1.3-.6 1.3-1.3V17.5h5c.8 0 1.3-.6 1.3-1.3 0-.7-.6-1.3-1.3-1.3m-15.2 16.9c-1 0-1.8.8-1.8 1.8s.8 1.8 1.8 1.8 1.8-.8 1.8-1.8-.8-1.8-1.8-1.8"/><circle cx="68.9" cy="25.1" r="9"/><path d="M49.6 25.1c0 4.9 4 9 9 9v-18c-5 0-9 4.1-9 9zm29.7-9v18c4.9 0 9-4 9-9s-4.1-9-9-9zM68.9 44.4c4.9 0 9-4 9-9H60c0 5 4 9 8.9 9zM60 14.8h17.9c0-4.9-4-9-9-9-4.9 0-8.9 4-8.9 9zm-9.9 0h8.5V6.3c-4.7 0-8.5 3.8-8.5 8.5zm29.2-8.5v8.5h8.5c0-4.7-3.8-8.5-8.5-8.5zM50.1 35.4h8.5v8.5c-4.7 0-8.5-3.8-8.5-8.5zm29.2 8.5v-8.5h8.5c0 4.7-3.8 8.5-8.5 8.5zm10.3-11.1V17.4c2.6 1.6 4.4 4.4 4.4 7.7s-1.8 6.1-4.4 7.7zM48.2 17.4v15.4c-2.6-1.6-4.4-4.4-4.4-7.7.1-3.3 1.8-6.1 4.4-7.7zm28.4-13H61.2C62.8 1.8 65.6 0 68.9 0s6.2 1.8 7.7 4.4zM61.2 45.8h15.4c-1.6 2.6-4.4 4.4-7.7 4.4-3.2 0-6.1-1.8-7.7-4.4z"/></svg>
          </label>
        </li>
        <li class="disney">
          <label>
            <input type="checkbox" checked data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1189183/disney-logo.png">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 1000 543.3" xml:space="preserve"><path d="M454 368.2c.6.1.7.1 1.2.2 9 1.2 17.9 2.8 24.6 5.9 6.3 2.8 10 6.3 13.3 12.5 5.1 9.5 5.4 22.8.8 32.8-3.4 7.5-11 13.8-17.9 17.1-7.2 3.5-14.2 5.1-22.4 6.1-14.2 1.6-29.5-1.4-42.3-7.6-7.6-3.7-16.8-10-21.4-18.2-3.4-6-3.3-13.8.9-19.5 6.6-9.1 20.8-11.1 31.5-10.7 8.2.3 22.9 2.8 30.6 5.6 2.1.8 10.1 3.9 11.4 5.3 1 1 1.6 2.4 1.2 3.7-1.8 5.4-14.9 8.3-18.7 8.8-10.2 1.6-15.4-2.3-27-6.9-2.9-1.1-6.7-2.4-9.6-2.6-5.2-.5-11.6 1-12.6 6.7-.5 3 3 5.7 5.6 6.9 6.2 2.7 11.2 3.6 17.3 3.7 18 .3 38.3-2.7 53-13.1 2-1.4 4-3.5 4-6.2.1-5.4-9.3-8.7-9.3-8.7-9.9-4.1-28.3-6.2-37.7-6.9-9.9-.9-25.5-2.1-29.3-2.7-3.9-.6-8.1-1.3-11.4-2.8-3.4-1.5-6.6-4.9-7.6-8.7-1.7-6.8.5-15.1 4.2-20.5 9.9-14.2 32.9-19.5 50.2-21.7 16.7-2.1 43.7-2.1 60.1 6.7 2.5 1.4 3.8 2.6 3.3 5.3-1.1 5.1-4.9 8.4-9.5 9.8-4.9 1.5-14.9 2.1-19.3 2.4-19.8 1.1-43.7.5-62.5 5.7-1.5.4-4 1.1-4.9 2-2.9 3.2 5.5 4.1 7.3 4.5.5.1.6.1 1.2.2l41.7 4.9m-117.6-88.1s3.2-4.8 5.9-8.5c4.9-6.7 13.8-15.9 20.5-21.6 2-1.7 4.5-3.7 4.5-3.7s-3.8.4-5.9.8c-5.1 1-12.5 5.9-16.2 9.1-6.1 5.2-12.9 13.8-9.8 21.4.3 1 1 2.5 1 2.5m34.1 9.1c9.7-.7 18.8-3.5 27.2-8.1 8.3-4.6 20.5-13.7 19.2-24.3-.4-3.4-2.6-6-5.5-7.2-3.7-1.6-5.6-1.3-10.3.1-3.4 1-5 1.6-8.2 3.5-9.5 5.5-23 17.3-30.3 26.8-1.7 2.2-3.4 4.7-4.7 6.4-.8 1.1-1.5 2-1.4 2.3.2.9 10.2.8 14 .5m-24.7 18.1c-1 1.1-2.1 3.6-3.2 5.5-.6 1-1.7 2.3-2.4 2.8-2.5 1.9-4.7 1.9-7.1-.2-3.4-3-5.4-7.7-5.5-12.2-.1-2 .3-4.2-.1-5.8-.6-2.8-3.4-5.7-5-8.4-1.8-3.2-3.2-8.7-3.4-12.3-.6-11.2 5.3-21.4 12.9-29.5 7.7-8.2 17.8-15 28.7-19.6 10.3-4.4 25.5-7.3 36.9-3.4 3.7 1.3 8.9 4.4 11.4 7.7.5.7 1 1.4 1.6 1.8.5.3 1.8.4 2.9.6 3.6.6 8.8 3.4 11 5.2 4.3 3.7 6.6 7.2 7.7 12.3 2.2 10.3-3.8 21.6-10.5 28.5-11.6 11.8-23 20.2-37.8 26-6.5 2.5-16.6 4.9-24 4.3-2.3-.2-4.6-.8-6.9-.9-1.1-.1-5.3-1.2-5.7-1.5-.6-.6-1.4-1-1.5-.9m13.2 22.9c.5.1 1.1.3 1.7.5 5.2 2 7.3 6.8 8.6 12.1 3 12.3 4.2 39.4 4.7 50 .4 8 .6 15.8.9 23.7.3 6.7.8 15.5-.6 21.8-.5 2.2-2 4.9-4.2 6.2-2.5 1.6-8.1 1.7-11.2 1.1-7.6-1.6-10.1-6.5-11.2-14-2.6-17.9-1.3-53.1.2-68 .5-4.9 2.4-20.6 4.9-27.2 1.1-2.4 3-6.9 6.2-6.2M127.8 360s-11.3.8-19.1 1.7c-9.9 1.1-28.5 4.3-39.3 8.1-3.2 1.2-9.8 3.9-10.3 7.2-.6 3.4 1.5 6.1 3.9 8.9 1.4 1.6 9.1 9.1 11.3 10.9 9.1 7.6 27.6 19.4 41.2 25.1 4.7 1.9 12.4 4.7 12.4 4.7s-.6-22-.5-43.8c.1-11.4.4-22.8.4-22.8m207.4 8.8c.6 5.9-.9 17.1-1.1 18.6-.5 3.4-3 11.3-3.5 12.2-2.1 4.8-4.1 8.7-6.3 12.6-3.7 6.7-12.5 17.3-17.8 21.8-19.5 16.8-49.6 26.4-75.5 29.6-17.6 2.1-37.7 1.8-56.3-1.6-6.4-1.2-15.9-3.4-15.9-3.4s0 3.8-.3 6.5c-.1 1.2-1.1 4.4-1.6 5.5-1.4 2.8-3.6 4.2-6.8 4.9-3.9.7-8 1-11.6-.6-5.9-2.5-8-8-9.1-14.4-.8-5.1-1.7-14-1.7-14s-4.4-2.1-8.1-3.9c-11.3-5.6-22.1-12.3-31.5-19.3-2.6-1.9-13.8-11.3-16.3-13.7C65 403 58.8 396.4 54 388c-3.7-6.6-4.8-12.4-1.9-19.3 3.9-9.7 17.8-17 27.3-21.1 7-3.1 28.7-10.2 37.7-11.5 4.3-.6 10.9-1.8 11.3-2.1.2-.1.3-.2.4-.4.2-.3.6-9.9.5-13.4-.1-3.5 2.6-26.1 3.4-30.9.4-2.6 2.4-12.6 4.4-15.2 1.3-1.8 3.6-1.6 5.5-.5 10.3 6.4 13.5 28.7 14.3 40.1.5 6.9.7 17.3.7 17.3s11.9-.4 19.2-.1c7.1.2 14.9 1.3 22.3 2.5 9.4 1.5 27.8 5.5 38.3 10.9 8.7 4.4 16.8 11.8 19.4 19.6 2.4 7.2 2.1 12.2-1.6 18.7-4.2 7.3-12.1 12.8-20.1 13.2-2.4.1-11.4-1.1-14.1-3.2-1.1-.9-1-2.4-.2-3.4.3-.4 4.5-2.6 7-3.9 1.2-.7 2.3-1.4 3.2-2.3 2.1-1.8 3.9-3.8 3.7-6.2-.3-3-3.5-4.9-6.6-6.1-14.4-5.7-43.1-10.5-57-11.3-5.4-.3-13.2-.6-13.2-.6l1.6 76.6s6.4 1.2 11.4 2c2.9.4 15.1 1.5 18.4 1.6 24.8.7 52.4-1.6 75.1-12.3 10-4.7 19.1-10.5 26.1-18.5 9.1-10.5 13.9-24.8 12.7-39.8-1.4-16.4-12.9-35.8-22.1-47.6-24.3-31.2-65.9-56.9-102.5-72-37.4-15.4-74.3-24.2-114-25.7-10.2-.4-32.5.1-43.8 3.3-1.6.5-3.2 1-4.7 1.3-1.2.3-3 1.1-3.6 1.5-.3.2-.6.5-.6.5s.7.4 1.4.7c1.2.5 6.2.8 8.8 1.3 2.3.4 4.8 1.7 5.7 3.4.9 1.6 1 2.9-.1 4.3-2.6 3.1-12.2 2.6-16.4 1.9-4.4-.7-9.9-2-10.9-5.9-1.2-4.5 1-8.9 3.3-13 4.7-8.2 11.3-12.4 21.1-15.1 13.9-3.8 31.4-6.5 44.4-7 29.6-1.1 57.6 4.1 86.3 12.8 16.4 5 37.9 13.3 53.7 20.9 11.3 5.4 29.1 15.5 39.1 22 3.2 2.1 21.6 15.6 24.5 18 6 4.9 13.8 11.9 19.5 17.5 11 10.9 24.6 27.5 31.2 40.7 1.6 3.2 2.8 6.3 4.9 9.9.7 1.3 3.7 8.8 4.2 10.9.5 2.1 1.2 5.3 1.3 5.4 0 1.5 1.5 7.9 1.3 10.4m372.4-16.9c-13.9 3.2-50.3 5-50.3 5l-4.6 14.4s18.2-1.6 31.5-.2c0 0 4.3-.5 4.8 4.9.2 5-.4 10.4-.4 10.4s-.3 3.3-4.9 4.1c-5 .8-39.3 2.2-39.3 2.2l-5.6 18.8s-2.1 4.3 2.6 3.1c4.3-1.1 40.2-7.9 44.9-6.9 5 1.2 10.6 7.9 9 14-1.9 7.6-37.8 30.4-59.6 28.8 0 0-11.5.7-21.2-14.7-9-14.8 3.4-42.7 3.4-42.7s-5.7-13-1.6-17.5c0 0 2.5-2.2 9.6-2.7l8.8-18.2s-10 .7-16-6.7c-5.5-7-6-10.2-1.8-12.1 4.5-2.2 46.2-9.9 74.9-8.9 0 0 10-1 18.6 16.3.1-.1 4.3 6.9-2.8 8.6m-107.9 69.9c-3.7 8.6-13.4 17.9-25.5 12.1-11.9-5.7-30.9-44.6-30.9-44.6s-7.2-14.5-8.6-14.1c0 0-1.6-2.8-2.5 13-1 15.8.2 46.5-6.1 51.3-6 4.8-13.2 2.9-16.9-2.7-3.4-5.6-4.8-18.8-3-42.1 2.2-23.3 7.6-48.2 14.5-55.9 6.9-7.7 12.5-2.1 14.6-.1 0 0 9.2 8.4 24.5 33l2.7 4.6s13.9 23.3 15.3 23.2c0 0 1.1 1.1 2.1.3 1.5-.4.9-7.9.9-7.9s-2.9-25.3-15.5-68.3c0 0-1.9-5.4-.6-10.4 1.3-5.1 6.4-2.7 6.4-2.7s19.6 9.9 29.1 41.8c9.6 32 3.2 60.7-.5 69.5m210.9-19.2c-8.9 15.6-34.1 48.2-67.6 40.5-11.1 26.8-20.3 53.9-25.7 94.5 0 0-1.2 7.9-7.7 5.1-6.5-2.3-17.2-13.1-19.4-28-2.3-19.6 6.4-52.8 24.3-90.8-5.2-8.5-8.8-20.6-5.7-37.8 0 0 4.5-32 36.6-60.8 0 0 3.8-3.3 6.1-2.3 2.5 1 1.3 11.4-.6 16.5-2 5-16.3 29.8-16.3 29.8s-8.9 16.7-6.4 29.9c16.8-25.9 55.1-78.1 78.9-61.7 8 5.7 11.6 18.1 11.6 31.5 0 11.8-2.8 24.3-8.1 33.6m-6.9-41s-1.3-10.3-11.4 1c-8.7 9.6-24.3 27.5-36.8 51.9 13.2-1.5 25.9-8.6 29.8-12.3 6.2-5.5 20.7-20.5 18.4-40.6m191.3-2.3h-61.3c-1.2-20.9-3.7-41.2-7.7-62.1-.4-2.2-2.3-3.7-4.5-3.7h-14.1c-1.2 0-2.4.6-3.2 1.5-.8 1-1.1 2.2-.9 3.5 4 20.2 6.6 40.2 7.8 60.9h-59c-2.8 0-5 2.2-5 5V377c0 2.7 2.2 5 5 5H912c0 3.1.1 6 .1 8.6 0 18.4-.8 33.5-2.6 50.6-.1 1.3.3 2.6 1.2 3.6.9 1 2.1 1.5 3.4 1.5h13.1c2.6 0 4.7-1.9 4.9-4.5 1.8-17.2 2.6-32.5 2.6-51.3 0-2.6 0-5.5-.1-8.6H995c2.7 0 5-2.2 5-5v-12.8c0-2.6-2.2-4.8-5-4.8M174.7 188.4c-.9 1.3-1.1 2.9-.6 4.4.5 1.5 1.7 2.6 3.1 3.1l11 3.7c.7.2 1.3.3 2 .3 2 0 4-1 5.1-2.7 36-52.9 84.8-97 141-127.4 58-31.4 123.8-48.1 190.2-48.1 80.2 0 157.6 23.7 223.8 68.4 64.6 43.6 114.7 104.5 145.1 176.1.9 2.1 3 3.5 5.3 3.5h13.1c1.5 0 2.9-.8 3.8-2 .9-1.3 1-2.9.5-4.3-31.3-76.9-84.1-142.5-152.9-189.7C694.7 25.5 612.2 0 526.5 0 384.8 0 253.3 70.4 174.7 188.4"/></svg>
          </label>
        </li>
        <li class="amazon">
          <label>
            <input type="checkbox" checked data-img='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1189183/amazon-logo.png'>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800.3 246.3"><path d="M396.5 246.3v-.4c.4-.5 1.1-.8 1.7-.7 2.9-.1 5.7-.1 8.6 0 .6 0 1.3.2 1.7.7v.4h-12z"/><path d="M408.5 245.9c-4-.1-8-.1-12 0-5.5-.3-11-.5-16.5-.9-14.6-1.1-29.1-3.3-43.3-6.6-49.1-11.4-92.2-34.3-129.8-67.6-3.5-3.1-6.8-6.3-10.2-9.5-.8-.7-1.5-1.7-1.9-2.7-.6-1.4-.3-2.9.7-4s2.6-1.5 4-.9c.9.4 1.8.8 2.6 1.3 35.9 22.2 75.1 38.4 116.2 48 13.8 3.2 27.7 5.7 41.7 7.5 20.1 2.5 40.4 3.4 60.6 2.7 10.9-.3 21.7-1.3 32.5-2.7 25.2-3.2 50.1-8.9 74.2-16.9 12.7-4.2 25.1-9 37.2-14.6 1.8-1 4-1.3 6-.8 3.3.8 5.3 4.2 4.5 7.5-.1.4-.3.9-.5 1.3-.8 1.5-1.9 2.8-3.3 3.8-11.5 9-23.9 16.9-37 23.5-24.7 12.5-51.1 21.4-78.3 26.5-15.7 2.8-31.5 4.5-47.4 5.1zM260.4 43.2c2.5-1.5 5.1-3.1 7.8-4.5 7-3.6 14.8-5.4 22.7-5 5.7.3 10.9 1.9 14.9 6.1 3.8 3.9 5.2 8.7 5.6 13.9.1 1.1.1 2.2.1 3.4v51.8c0 4.5-.6 5.1-5.1 5.1h-12.2c-.8 0-1.6 0-2.4-.1-1.2-.1-2.2-1.1-2.4-2.3-.2-1.1-.2-2.2-.2-3.3V62c.1-1.9-.1-3.7-.6-5.5-.8-3.1-3.6-5.3-6.8-5.5-5.9-.4-11.8.8-17.2 3.3-.8.2-1.3 1-1.2 1.8v52.6c0 1 0 1.9-.2 2.9 0 1.4-1.1 2.4-2.5 2.4-1.5.1-3 .1-4.6.1h-10.6c-3.7 0-4.5-.9-4.5-4.6V62.2c0-1.7-.1-3.5-.5-5.2-.7-3.4-3.6-5.8-7-6-6-.4-12.1.8-17.5 3.4-.8.2-1.3 1.1-1.1 1.9v53.3c0 3.7-.8 4.5-4.5 4.5H197c-3.5 0-4.4-1-4.4-4.4V40.3c0-.8.1-1.6.3-2.4.4-1.2 1.6-1.9 2.8-1.9h12.5c1.8 0 2.9 1.1 3.5 2.8.5 1.4.8 2.7 1.3 4.2 1 0 1.6-.7 2.3-1.1 5.5-3.4 11.3-6.3 17.8-7.5 5-1 10-1 15 0 4.7 1 8.9 3.8 11.6 7.8.2.3.4.5.6.7-.1.1 0 .1.1.3zM467.7 93c.6-2 1.2-3.9 1.8-5.9 4.6-15.5 9.2-30.9 13.8-46.4l.6-1.8c.5-1.8 2.2-2.9 4-2.9h15.2c3.8 0 4.6 1.1 3.3 4.7l-6 15.9c-6.7 17.4-13.4 34.9-20.1 52.3-.2.6-.5 1.2-.7 1.8-.7 2.1-2.8 3.5-5 3.3-4.4-.1-8.8-.1-13.2 0-3.1.1-4.9-1.3-6-4.1-2.5-6.6-5.1-13.3-7.6-19.9-6-15.7-12.1-31.4-18.1-47.2-.6-1.2-1-2.6-1.3-3.9-.3-2 .4-3 2.4-3 5.7-.1 11.4 0 17 0 2.4 0 3.5 1.6 4.1 3.7 1.1 3.8 2.2 7.7 3.4 11.5 4.1 13.9 8.1 27.9 12.2 41.8-.1.1 0 .1.2.1zM112.6 47c.7-.2 1.3-.6 1.7-1.2 1.8-1.8 3.7-3.5 5.7-5.1 5.2-4 11.7-6 18.2-5.5 2.6.1 3.5.9 3.7 3.4.2 3.4.1 6.9.1 10.3.1 1.4 0 2.7-.2 4.1-.4 1.8-1.1 2.5-2.9 2.7-1.4.1-2.7 0-4.1-.1-6.7-.6-13.2.7-19.5 2.8-1.4.5-1.4 1.5-1.4 2.6v48c0 .9 0 1.7-.1 2.6-.1 1.3-1.1 2.3-2.4 2.3-.7.1-1.5.1-2.2.1h-13c-.7 0-1.5 0-2.2-.1-1.3-.1-2.3-1.2-2.4-2.5-.1-.8-.1-1.6-.1-2.4V41c0-4.6.5-5.1 5.1-5.1h9.6c2.6 0 3.8.9 4.5 3.4s1.3 5 1.9 7.7z"/><path d="M580.4 148.4c6.6.2 13.1.6 19.5 2.3 1.8.5 3.5 1.1 5.2 1.9 2.3.9 3.8 3.1 4.1 5.5.4 2.8.5 5.7.3 8.6-1.3 17.1-6.6 33.6-15.4 48.3-3.2 5.3-7.1 10.1-11.6 14.3-.9.9-2 1.6-3.2 2-1.9.5-3.1-.5-3.2-2.4.1-1 .3-2 .7-3 3.5-9.4 6.9-18.7 9.6-28.4 1.6-5.3 2.7-10.7 3.4-16.2.2-2 .3-4 .1-6-.1-3.4-2.3-6.3-5.6-7.3-3.1-1-6.3-1.6-9.6-1.8-9.2-.4-18.4 0-27.5 1.2l-12.1 1.5c-1.3.1-2.5 0-3.2-1.2s-.4-2.4.3-3.6c.8-1.1 1.8-2.1 3-2.8 7.4-5.3 15.7-8.5 24.5-10.6 6.8-1.4 13.7-2.1 20.7-2.3zM538.5 75v36c-.2 2-1.1 2.9-3.1 3-5.4.1-10.7.1-16.1 0-2 0-2.9-1-3.1-2.9-.1-.6-.1-1.3-.1-1.9V40c.1-3.1.9-4 4-4h14.4c3.1 0 4 .9 4 4v35zm-386.9-.2V39.3c.1-2.4 1-3.3 3.4-3.4 5.2-.1 10.4-.1 15.6 0 2.3 0 3 .7 3.2 3 .1.9.1 1.7.1 2.6v66.6c0 1.1-.1 2.2-.2 3.3-.1 1.3-1.1 2.2-2.4 2.3-.6.1-1.1.1-1.7.1h-13.9c-.5 0-.9 0-1.4-.1-1.4-.1-2.6-1.2-2.7-2.6-.1-.8-.1-1.6-.1-2.4.1-11.1.1-22.5.1-33.9zM163.2.1c1.6-.1 3.2.2 4.7.7 5.4 1.8 8.2 6.5 7.7 12.6-.4 5.2-4.3 9.4-9.5 10.2-2.2.4-4.5.4-6.7 0-5.7-1.1-9.9-5.3-9.5-12.5.6-7.1 5.3-11 13.3-11zm364.2 0c2-.2 4 .2 5.9 1 3.9 1.5 6.6 5.1 6.8 9.3.8 9.1-5.3 13.7-13.4 13.5-1.1 0-2.2-.2-3.3-.4-6.2-1.5-9.4-6.3-8.8-13.2.5-5.5 4.8-9.6 10.7-10.1.7-.1 1.4-.2 2.1-.1zM76.7 66.6c-.4-5.2-1.8-10.3-3.9-15-4.1-8.6-10.4-14.9-20-17.1-11-2.4-20.9 0-29.9 6.7-.6.6-1.3 1.1-2.1 1.5-.2-.1-.4-.2-.4-.3-.3-1-.5-2-.8-3-.8-2.5-1.8-3.4-4.5-3.4-3 0-6.1.1-9.1 0-2.3-.1-4.4.2-6 2 0 35 0 70.1.1 105 1.3 2.1 3.3 2.5 5.6 2.4 3.6-.1 7.2 0 10.8 0 6.3 0 6.3 0 6.3-6.2v-28.5c0-.7-.3-1.5.4-2.1 5 3.9 11.1 6.3 17.4 6.9 8.8.9 16.8-1.3 23.5-7.3 4.9-4.5 8.5-10.3 10.4-16.7 2.7-8.2 2.9-16.5 2.2-24.9zM52.8 87.3c-.7 3.1-2.3 5.9-4.6 8-2.6 2.2-5.8 3.5-9.2 3.5-5.1.3-10.1-.8-14.6-3.2-1.1-.5-1.8-1.6-1.7-2.8V74.7c0-6 .1-12 0-18-.1-1.4.7-2.6 2-3.1 5.5-2.6 11.2-3.8 17.2-2.6 4.2.6 7.8 3.3 9.5 7.2 1.5 3.2 2.4 6.7 2.6 10.2.6 6.4.6 12.8-1.2 18.9zm747.3-5.1s0-.1 0 0c0-.1 0-.1 0 0zm.1-13.4v.4c-.4-.4-.6-1-.4-1.5v-.8s0-.1.1-.1h-.1v-1h.2c0-.1-.1-.1-.1-.2-.2-1.9-.6-3.8-1.1-5.6-3.7-13.2-12-21.9-25.5-25.3-6.3-1.5-12.7-1.7-19.1-.7-13.5 2-23.2 9.2-27.9 22-4.6 12.2-4.5 25.6.1 37.8 4 11.1 12 18.1 23.5 21 6.1 1.5 12.5 1.9 18.8 1 21-2.5 29.7-18.4 31.1-32.2h-.1v-1.4c-.1-.6-.2-1.1.4-1.5v.2c0-.1.1-.3.2-.4V69c0-.1-.1-.1-.1-.2zm-24 19c-.6 2.1-1.5 4-2.8 5.8-2.2 3.1-5.7 5.1-9.5 5.4-1.9.2-3.8.2-5.7-.2-4.2-.8-7.7-3.6-9.4-7.5-1.5-3.1-2.4-6.5-2.7-9.9-.5-5.9-.6-11.8.8-17.6.5-2.3 1.5-4.6 2.7-6.6 2.2-3.6 6-5.9 10.2-6.2 1.9-.2 3.8-.2 5.7.2 4 .8 7.3 3.4 9.1 7.1 1.7 3.5 2.7 7.4 2.9 11.3.1 1.8.2 3.6.1 5.4.3 4.4-.2 8.7-1.4 12.8zM624.9.8H611c-3.8 0-4.5.7-4.5 4.5v32.4c0 .7.3 1.4-.2 2.1-.9-.1-1.4-.7-2.1-1.1-10.4-6.1-21.3-7.2-32.3-2.1-7.7 3.6-12.5 10.1-15.6 17.8-3 7.4-3.7 15.2-3.5 23.1 0 7.4 1.7 14.7 5 21.3 3.8 7.3 9.3 12.9 17.3 15.3 10.9 3.4 21.1 1.7 30.4-5.2.7-.4 1.1-1.1 2-1.3.5 1.1.9 2.3 1.1 3.5.4 1.6 1.8 2.7 3.5 2.7h2.4c3.6 0 7.1.1 10.6 0 2.8 0 3.6-.9 3.7-3.8V4.6c-.1-3.1-.9-3.8-3.9-3.8zm-18.3 73.6v18.2c.2 1.2-.5 2.3-1.6 2.8-4.8 2.7-10.3 3.8-15.7 3-4.6-.5-8.6-3.3-10.7-7.4-1.6-3.2-2.5-6.6-2.8-10.1-.8-6.3-.3-12.7 1.2-18.8.5-1.7 1.1-3.3 2-4.9 2.1-3.9 6.1-6.4 10.5-6.7 5.3-.5 10.6.5 15.4 2.7 1.2.4 1.9 1.6 1.8 2.9-.2 6.2-.1 12.2-.1 18.3zM348 81.3c7.5 1.4 15.2 1.5 22.7.3 4.4-.6 8.6-1.9 12.5-4 4.5-2.6 7.8-6.2 9.2-11.2 3.5-12.6-1.9-25.3-15-30-6.4-2.1-13.2-2.8-19.9-1.9-15.8 1.8-26.1 10.5-30.8 25.6-3.3 10.3-2.9 20.8-.2 31.2 3.5 13.3 12.3 21.2 25.6 24 7.6 1.7 15.3 1.4 22.9.2 4-.7 8-1.7 11.8-3.2 2.3-.9 3.5-2.3 3.4-4.9-.1-2.4 0-4.9 0-7.4 0-3-1.2-3.9-4.1-3.2s-5.7 1.3-8.6 1.9c-6.2 1.3-12.6 1.3-18.8.2-8.5-1.7-14-9-13.5-18 .9.1 1.9.2 2.8.4zM345.5 66c.3-2.4 1-4.7 1.9-6.9 3-7.3 9.3-9.8 15.7-9.4 1.8.1 3.6.5 5.3 1.2 2.6 1.1 4.3 3.5 4.6 6.3.3 1.7.2 3.5-.3 5.2-1.2 3.6-4.1 5.1-7.6 5.8-2.1.5-4.3.7-6.5.5-3.9 0-7.9-.3-11.8-.9-1.5-.2-1.5-.2-1.3-1.8zm339.8 16.3c5.8-.4 11.6-1.5 16.8-4.3 5.3-2.6 9-7.5 10.1-13.3.7-3.6.7-7.4-.1-11-2.1-9-7.8-14.6-16.4-17.5-4.8-1.5-9.9-2.1-14.9-1.9-16.8.4-29.6 8.9-34.8 25.7-3.5 11.1-3 22.4.4 33.5 3.5 11.4 11.5 18.3 22.9 21.4 4.9 1.2 10 1.7 15 1.5 7.3-.1 14.6-1.5 21.5-4.1 2.9-1.1 3.6-2.1 3.6-5.2v-7.2c-.1-2.9-1.3-3.9-4.2-3.2-2.2.6-4.3 1.1-6.5 1.6-6.7 1.6-13.7 1.9-20.5.7-6.8-1.3-11.4-5.2-13.2-12-.5-2-.9-4-1.1-6.1.5 0 1 0 1.4.2 6.6 1.2 13.3 1.7 20 1.2zm-20.9-16c.7-3.9 1.6-7.7 4-10.9 3.7-4.9 8.8-6.3 14.6-5.7.5 0 .9.2 1.4.2 7 1.1 8.7 6.7 7.4 12.1-1 4-4.3 5.5-8 6.2-2 .4-4.1.6-6.2.5-4.1-.1-8.1-.4-12.1-1-.9-.1-1.3-.5-1.1-1.4z"/></svg>
          </label>
        </li>
        <li class="illico">
          <label>
            <input type="checkbox" checked data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1189183/illico-logo.png">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.3 10.4"><path d="M6.6 4.1c0-.9-.4-1.5-1.4-1.5-1.1 0-1.5 1-1.5 2.6s.4 2.6 1.5 2.6 1.4-.6 1.4-1.5h3.7c-.5 2.9-2.1 4.1-5.1 4.1-3.3 0-5.2-2-5.2-5.2C0 2.1 1.8 0 5.2 0c3 0 4.6 1.3 5.1 4.1H6.6zM11.2.3h3.5v7.1h4.4v2.9h-7.9V.3zM29.5 6.1c0 2.5-1.6 4.3-4.9 4.3s-4.9-1.8-4.9-4.3V.3h3.7v6.3c0 .7.4 1.2 1.3 1.2S26 7.3 26 6.6V.3h3.4v5.8zM30.8.3h5.1c2.9 0 3.8 1 3.8 2.3 0 1.4-.8 2-2.1 2.3 1.6.2 2.6.8 2.6 2.7 0 1.6-1.4 2.8-4 2.8h-5.4V.3zm3.5 2.4v1.6h.7c.8 0 1.1-.3 1.1-.8s-.2-.8-1.1-.8h-.7zm0 3.1v2h.7c.9 0 1.4-.1 1.4-1 0-.8-.4-1-1.4-1h-.7zM46.1.3h3.5v10h-3.5V.3zM51 .3h3.5v7.1h4.4v2.9H51V.3zM59.7.3h3.5v7.1h4.4v2.9h-7.9V.3zM68.3.3h3.5v10h-3.5V.3zM79.4 4.1c0-.9-.4-1.5-1.4-1.5-1.1 0-1.5 1-1.5 2.6S77 7.9 78 7.9c1.1 0 1.4-.6 1.4-1.5h3.7c-.5 2.9-2.1 4.1-5.1 4.1-3.3 0-5.2-2-5.2-5.2S74.7 0 78 0c3 0 4.6 1.3 5.1 4.1h-3.7zM89 0c3.4 0 5.3 1.9 5.3 5.2 0 3.3-1.9 5.2-5.3 5.2s-5.3-2-5.3-5.2C83.6 1.9 85.5 0 89 0zm0 2.6c-1.2 0-1.6.8-1.6 2.6s.4 2.6 1.6 2.6 1.6-.8 1.6-2.6-.5-2.6-1.6-2.6z"/></svg>
          </label>
        </li>
        <li class="crave">
          <label>
            <input type="checkbox" checked data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1189183/crave-logo.png">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 246.9 600 106.2"><path d="M516.3 290c.2-3.9.7-7.7 1.5-11.5 1.8-7.5 4.9-9.2 13.2-10.7 5.3-.8 10.6-1.2 15.9-1.2 5.4 0 10.9.3 16.2 1.2 13.5 2.3 16.2 5.9 16.2 22.3l-63-.1zm46.6-42.1c-10.6-1.3-21.3-1.3-31.9-.2-16.9 2.2-26.4 5.7-32.3 19.9-3.8 9.2-5 20.9-5 32.1 0 10.2 1 21.2 4.3 30.3 5.9 15.9 15 19.7 32.9 22.1 5.3.6 10.6.9 15.9.8 5.5 0 10.9-.3 16.4-1 16.4-2.2 27.5-7.2 32.9-22.9l-21.1-5c-2.3 5-5.5 6-12 7.5-4.9 1.2-10.5 1.5-16.2 1.7-5.3.1-10.5-.3-15.7-1.2-8.9-1.5-11.4-3.5-13.4-12.5-.9-4-1.4-8-1.5-12h83.2c2.3-38.3-2.5-55.1-36.5-59.6zm-104.3.8l-34.3 82.9-34.3-82.9h-23.7l42 102.2h32.3l41.8-102.2h-23.8zm-325.8 0v102.2H155v-31.6h27.8l20.7 31.6h24.9l-21.7-33.8c14.5 0 24.9-13.9 24.9-32.9 0-20-9-35.4-33.4-35.4l-65.4-.1zm22.2 19.8h42.1c9.9 0 12.5 7.7 12.9 15.7.2 8-3 16.2-12.9 16.2H155v-31.9zM0 299.9c0 10.9 1.2 22.3 4.7 31.3 6 15.6 15.9 18.5 32.6 20.7 5.3.7 10.6 1 15.9 1 5.4 0 10.7-.3 16-1 17.4-2.2 27.5-6.9 33.3-20.7 1.3-3.3 2.2-6.7 2.7-10.2l-21.1-4.8c-2.5 10.2-5.7 12.2-14.7 14-5.4 1-10.8 1.4-16.2 1.3-5.3 0-10.6-.5-15.9-1.5-8.2-1.5-9.9-3.5-11.9-10.4-1.5-5.2-2.2-12.5-2.2-19.7 0-7.2.7-14.5 2.2-19.7 2-6.9 3.7-8.9 11.9-10.4 5.2-1 10.6-1.5 15.9-1.5 5.4-.1 10.9.4 16.2 1.3 9 1.8 12.2 3.8 14.7 14l21.1-4.9c-.5-3.5-1.4-6.9-2.7-10.2-5.9-13.9-15.9-18.5-33.3-20.7-5.3-.7-10.7-1-16-1-5.3 0-10.6.3-15.9 1-16.7 2.2-26.6 5.2-32.6 20.7C1.2 277.7 0 289 0 299.9zm350.9-18.4c0-27.4-19.2-34.6-50.1-34.6-14 0-28.3 2-38.6 4.9l5.5 18.7c10.8-2.6 22-3.9 33.1-3.7 20.4.5 29.6 1.5 28.3 20.7-9.4-1-18.8-1.4-28.3-1.3-33.1.7-50 4.7-50 31.4 0 27.9 16.9 35.4 50 35.4 13.7 0 30.9-.3 50.2-5.9l-.1-65.6zM329 306.6v24.6c-9.3 1.4-18.8 2-28.3 1.8-21.2-.3-28.3-.5-28.3-15.4 0-12.4 9.9-12.9 28.3-12.9 9.5.1 19 .7 28.3 1.9z"/></svg>
          </label>
        </li>
        <li class="hbo">
          <label>
            <input type="checkbox" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1189183/hbo-logo.png">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 422 174"><path d="M206 1.8c13 0 50 7.1 50 43.5 0 29.3-14 38-25 40-8 1.5 23 0 23 36.7 0 52-45 50-45 50h-75V1.8h72zm-30 41.5V69h25s10-1.2 10-13.5-10-12.2-10-12.2h-25zm0 62.7v26h25s10-1 10-14c0-12-10-12-10-12h-25zM0 1.8V172h47v-63h30v63h47V1.8H77V66H47V1.8H0z"/><path d="M335 174c-48 0-87-39-87-87s39-87 87-87 87 39 87 87-39 87-87 87zm0-130c-23.7 0-43 19.3-43 43s19.3 43 43 43 43-19.3 43-43-19.3-43-43-43z"/><circle cx="335" cy="87" r="35"/></svg>
          </label>
        </li>
        <li class="hulu">
          <label>
            <input type="checkbox" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1189183/hulu-logo.png">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000.4 329.5"><path d="M612.8 329.5h79.5V0h-79.5v329.5zm-140-93.7c0 11.8-9.5 21.3-21.3 21.3h-46.2c-11.8 0-21.3-9.5-21.3-21.3v-133h-79.5v139.6c0 57 36.5 87.1 90.5 87.1h77.8v-.4c49.7 0 79.5-35.4 79.5-86.7V102.8h-79.5v133zm448.1-133v133c0 11.8-9.5 21.3-21.3 21.3h-46.2c-11.8 0-21.3-9.5-21.3-21.3v-133h-79.5v139.6c0 57 36.5 87.1 90.5 87.1h77.8v-.4c49.7 0 79.5-35.4 79.5-86.7V102.8h-79.5zm-763.6 0h-51c-17.9 0-26.9 4.8-26.9 4.8V0H0v329.5h79.5v-133c0-11.8 9.5-21.3 21.3-21.3H147c11.8 0 21.3 9.5 21.3 21.3v133h79.5V186.3c-.1-60.3-40.3-83.5-90.5-83.5z"/></svg>
          </label>
        </li>
        <li class="showtime">
          <label>
            <input type="checkbox" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1189183/showtime-logo.png">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500.201 179.174"><path d="M126.833 90.834c0-35.896 13.283-58.527 29.142-60.92C140.117 10.423 113.63 0 89.58 0 63.093 0 39.305 11.5 22.92 29.751c15.635 3.103 20.948 16.226 20.948 36.524H24.743c0-11.986-2.494-18.19-9.592-18.19-3.186 0-5.659 1.622-7.119 4.38-.203.446-.427.913-.628 1.38-.549 1.542-.853 3.325-.853 5.292 0 24.823 40.763 23.586 40.763 61.752 0 14.887-11.417 28.777-24.274 28.777 16.893 18.455 39.972 29.508 66.539 29.508 25.836 0 49.098-10.932 65.442-28.433-15.067-3.793-28.188-25.474-28.188-59.907m-8.519 59.137H97.811V98.988H75.665v50.983H55.122V32.307h20.503v47.394h22.186V32.307h20.503v117.664z"/><path d="M17.708 131.243c5.72 0 9.774-5.029 9.774-12.35 0-15.19-13.264-18.11-27.479-30.947-.203 25.98 7.848 43.297 17.705 43.297m129.5-42.308c0-19.813 5.76-39.627 16.285-39.627 12.513 0 15.677 30.623 15.677 40.295 0 21.233-6.692 40.377-15.677 40.377-10.79.002-16.285-20.175-16.285-41.045M351.967 33.94h-86.433l-8.193 67.208h-.324L247.85 33.94h-18.801l-9.958 67.21h-.323l-7.402-67.21h-18.962l15.271 114.46h18.313l10.302-72.5h.305l9.979 72.5h18.961l12.654-96.776h17.725V148.4h20.909V51.624h19.124V148.4h20.909V33.94h-4.889zm15.146 0h27.823l9.309 58.67h.324l9.815-58.67h27.154V148.4H422.9V64.482h-.324L408.422 148.4h-11.56L382.87 64.482h-.305V148.4h-15.452l.001-114.46zm84.7 0h47.272v17.684h-26.364v29.244h19.429v18.658h-19.429v31.188H500.2V148.4h-48.388V33.94z"/></svg>
          </label>
        </li>
      </ul>
      
      <h2 class="title">Types</h2>
      <ul class="types">
        <li>
          <label>
            <input type="checkbox" checked data-txt="Film"> Film
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" checked data-txt="Séries<br>TV"> Séries télé
          </label>
        </li>
      </ul>
      
      <h2 class="title">Genres</h2>
      <ul class="categories">
        <li>
          <label>
             <input type="checkbox" checked data-txt="Action">
             Action
          </label>
        </li>
        <li>
          <label>
             <input type="checkbox" checked data-txt="Comédie">
             Comédie
          </label>
        </li>
        <li>
          <label>
             <input type="checkbox" checked data-txt="Crime">
             Crime
          </label>
        </li>
        <li>
          <label>
             <input type="checkbox" data-txt="Doc">
             Documentaire
          </label>
        </li>
        <li>
          <label>
             <input type="checkbox" checked data-txt="Drame">
             Drame
          </label>
        </li>
        <li>
          <label>
             <input type="checkbox" checked data-txt="Horreur">
             Horreur
          </label>
        </li>
        <li>
          <label>
             <input type="checkbox" data-txt="Réalité">
             Réalité
          </label>
        </li>
        <li>
          <label>
             <input type="checkbox" data-txt="Romantique">
             Romantique
          </label>
        </li>
        <li>
          <label>
             <input type="checkbox" data-txt="Sci-fi">
             Science fiction
          </label>
        </li>
        <li>
          <label>
             <input type="checkbox" data-txt="Sports">
             Sports
          </label>
        </li>
        <li>
          <label>
             <input type="checkbox" checked data-txt="Thriller">
             Thriller
          </label>
        </li>
      </ul>
    </nav>
  </header>
  
  <div class="page">
    <main>
      <div class="wrapper">
        <div class="table">
          <div class="grid">
            <div class="cell">
              <div class="wrapper">
                <div class="dice services">
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </div>
            </div>

            <div class="cell">
              <div class="wrapper">
                <div class="dice types">
                  <span>Film</span>
                  <span>Série</span>
                  <span>Film</span>
                  <span>Série</span>
                  <span>Film</span>
                  <span>Série</span>
                </div>
              </div>
            </div>

            <div class="cell">
              <div class="wrapper">
                <div class="dice categories">
                  <span>Crime</span>
                  <span>Action</span>
                  <span>Comédie</span>
                  <span>Drame</span>
                  <span>Realité</span>
                  <span>Horreur</span>
                </div>
              </div>
            </div>

            <div class="cell">
              <div class="wrapper">
                <div class="dice no4">
                  <span>1<sup>er</sup></span>
                  <span>2<sup>e</sup></span>
                  <span>3<sup>e</sup></span>
                  <span>4<sup>e</sup></span>
                  <span>5<sup>e</sup></span>
                  <span>6<sup>e</sup></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    
    <footer>
      <div class="wrapper">
        <button class="btn js-start">Rouler!</button>
         <div class="legal">
         <p>Inspiré par:<br>
            <a href="https://www.unnecessaryinventions.com/">The unnecessary inventions</a>
          </p>
        </div>
      </div>
    </footer>
  </div>
  
</div>


              
            
!

CSS

              
                * { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #fff;
}

.app {
  position: relative;
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.btn {
  border: none;
  background: linear-gradient(to top, #ed213a, #93291e);
  color: #fff;
  font-size: 2vmin;
  text-transform: uppercase;
  padding: 2vmin;
  box-shadow: 0 1vmin 1vmin 0 rgba(0,0,0,0.25);
  transform: translateY(0);
  transition: transform 0.3s, box-shadow 0.3s;
  
  &:hover {
    background: linear-gradient(to bottom, #ed213a, #93291e);
  }
  
  &:active { 
    box-shadow: 0 1vmin 1vmin -0.5vmin rgba(0,0,0,0.25);
    transform: translateY(0.5vmin);
  }
  
  &.js-start {
    padding: 2vmin 8vmin;
  }
}

#toggle-menu {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s 0.3s;
}

#toggle-menu:checked {
  & + .overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s;
  }
  
  & ~ .nav {
    transform: translateX(0);
  }
}

.btn-menu-wrapper {
  position: absolute;
  top: 0;
  left: 100%;
  height: 6vmin;
  transform-origin: 0 0;
  transform: translateX(6vmin) rotate(90deg);
  
  .btn { display: block; }
}

.nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  z-index: 10;
  border-right: solid 1px #ccc;
  transform: translateX(-100%);
  transition: transform 0.3s;
  
  nav {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
    background: #fff;
  }
  
  .title {
    text-transform: uppercase;
    letter-spacing: 0.075em;
    font-weight: 100;
    font-size: 0.75em;
    background: #ccc;
    color: #fff;
    margin: 0;
    padding: 5px 20px;
  }
  
  ul {
    list-style: none;
    margin: 0.5em 0 1.25em;
    padding: 0;
  }
  
  input { 
    margin-right: 8px; 
    vertical-align: middle;
  }
  
  svg { vertical-align: middle; }
  
  li {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 10px 20px;
    
    &:hover {
      background: #eee;
    }
    
    &.netflix {
      svg { 
        fill: #d81f26; 
        height: 15px;
      }
      
      &:hover {
        background-color: #d81f26;
        
        svg { fill: #fff; }
      }
    }
    
    &.toutv {
      svg { 
        fill: #00A5AD; 
        height: 20px;
      }
      
      &:hover {
        background-color: #00A5AD;
        
        svg { fill: #fff; }
      }
    }
    
    &.disney {
      svg { 
        fill: #101C50; 
        height: 25px;
        margin-left: 4px;
        margin-top: -6px;
      }
      
      &:hover {
        background-color: #101C50;
        
        svg { fill: #fff; }
      }
    }
    
    &.amazon {
      svg { 
        fill: #00A8E1; 
        height: 20px;
        margin-bottom: -6px
      }
      
      &:hover {
        background-color: #00A8E1;
        
        svg { fill: #fff; }
      }
    }
    
    &.illico {
      svg { 
        fill: #FFD300; 
        height: 10px;
      }
      
      &:hover {
        background-color: #FFD300;
        
        svg { fill: #fff; }
      }
    }
    
    &.crave {
      svg { 
        fill: #29C2F1; 
        height: 11px;
      }
      
      &:hover {
        background-color: #29C2F1;
        
        svg { fill: #fff; }
      }
    }
    
    &.hbo {
      svg { 
        fill: #C00026; 
        height: 15px;
      }
      
      &:hover {
        background-color: #C00026;
        
        svg { fill: #fff; }
      }
    }
    
    &.hulu {
      svg { 
        fill: #65ae45;
        height: 15px;
      }
      
      &:hover {
        background-color: #65ae45;
        
        svg { fill: #fff; }
      }
    }
    
    &.showtime {
      svg { 
        fill: #FF0101; 
        height: 20px;
      }
      
      &:hover {
        background-color: #FF0101;
        
        svg { fill: #fff; }
      }
    }
  }
}

.page {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

main {
  position: relative;
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 2000;
  z-index: 2;
  
  .wrapper {
    position: relative;
    width: 100%;
    padding: 20px;
  }
}

footer {
  position: relative;
  flex: 0 0 auto;
  z-index: 1;
  
  .wrapper {
    position: relative;
    width: 100%;
    background: #fff;
    text-align: center;
  }
  
  .legal {
    position: relative;
    width: 100%;
    padding: 0 20px;
    margin: 20px 0 0;
    text-align: center;
    border-top: solid 1px #ccc;
  }
  
  a { color: currentColor; }
}

.table {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateX(35deg);
  transform-style: preserve-3d;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 80%;
  max-width: 60vmin;
  height: 60vmin;
  perspective: 700;
  margin: 0 auto;
  z-index: 1;
}

.cell {
  position: relative;
  flex: 1 0 50%;
  transform-style: preserve-3d;
  transition-property: transform;
  transition-timing-function: ease-in;
  
  .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation-timing-function: ease-in-out;
    transform-style: preserve-3d;
  }
  
  &.hidden { display: none; }
}

.side {
  position: absolute;
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.25)), url('https://images.unsplash.com/photo-1525034687081-c702010cb70d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9');
  background-size: cover;
}

.dice {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20vmin;
  height: 20vmin;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  
  span {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.6);
    font-size: 3vmin;
    font-weight: 700;
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(transparent 0%, transparent 50%, rgba(0,0,0,0.2) 100%), radial-gradient(rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 65%, transparent 100%), #fff;
    background-size: cover;
    text-transform: uppercase;
    text-align: center;
    
    &:nth-child(1) { transform: translateZ(10vmin); }
    &:nth-child(2) { transform: rotateX(180deg) translateZ(10vmin); }
    &:nth-child(3) { transform: rotateY(-90deg) translateZ(10vmin); }
    &:nth-child(4) { transform: rotateY(90deg) translateZ(10vmin); }
    &:nth-child(5) { transform: rotateX(90deg) translateZ(10vmin); }
    &:nth-child(6) { transform: rotateX(-90deg) translateZ(10vmin); }
  }
  
  sup { 
    font-size: 0.5em;
    margin-top: 0.4em; 
  }
  
  &.no4 {
    span { font-size: 7vmin; }
  }
  
  &.services {
    span {
      &:nth-child(1) { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1189183/netflix-logo.png'); }
      &:nth-child(2) { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1189183/toutv-logo.png'); }
      &:nth-child(3) { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1189183/disney-logo.png'); }
      &:nth-child(4) { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1189183/amazon-logo.png'); }
      &:nth-child(5) { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1189183/illico-logo.png'); }
      &:nth-child(6) { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1189183/crave-logo.png'); }
    }
  }
}

@keyframes up1 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 0, 25vmin); }
}

@keyframes up2 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 0, 35vmin); }
}

@keyframes up3 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 0, 45vmin); }
}

@media (min-width: 768px) {
  .nav {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 200px;
    transform: none;
  }
  
  .btn-menu-wrapper {
    display: none;
  }
}
              
            
!

JS

              
                const servicesChkList = document.querySelectorAll('.nav .services input');
const typesChkList = document.querySelectorAll('.nav .types input');
const categoriesChkList = document.querySelectorAll('.nav .categories input');

const grid = document.querySelector('.grid');
const cellsList = grid.querySelectorAll('.cell');
const start = document.querySelector('.js-start');

const setServices = function() {
  const dice = document.querySelector('.dice.services');
  const cell = dice.closest('.cell');
  const diceSides = dice.children;
  const selectedServices = document.querySelectorAll('.nav .services input:checked');
  let res = Array.from(selectedServices);
  let hideDice = selectedServices.length < 2;
  
  cell.classList.toggle('hidden', hideDice);
  
  if (selectedServices.length < 6) {
    const missingSides = 6 - selectedServices.length;
    
    for(x=0; x<missingSides; x++) {
      const item = res[x % selectedServices.length];
      res.push(item);
    }
  }
  
  if (res.length > 6) res = res.slice(0, 6);
  
  Array.from(diceSides).forEach((side, index) => {
    const checkbox = res[index];
    const img = checkbox.getAttribute('data-img');
    side.style.backgroundImage = `url('${img}')`;
  })
}

servicesChkList.forEach(checkbox => checkbox.addEventListener('change', () => setServices()));

const setTypes = function() {
  const dice = document.querySelector('.dice.types');
  console.log(dice, dice.closest('.cell'))
  const cell = dice.closest('.cell');
  const diceSides = dice.children;
  const selected = document.querySelectorAll('.nav .types input:checked');
  let res = Array.from(selected);
  let hideDice = selected.length < 2;
  
  cell.classList.toggle('hidden', hideDice);
  
  if (selected.length < 6) {
    const missingSides = 6 - selected.length;
    
    for(x=0; x<missingSides; x++) {
      const item = res[x % selected.length];
      res.push(item);
    }
  }
  
  if (res.length > 6) res = res.slice(0, 6);
  
  Array.from(diceSides).forEach((side, index) => {
    const checkbox = res[index];
    const txt = checkbox.getAttribute('data-txt');
    side.innerHTML = txt;
  })
}

typesChkList.forEach(checkbox => checkbox.addEventListener('change', () => setTypes()));

const setCategories = function() {
  const dice = document.querySelector('.dice.categories');
  console.log(dice, dice.closest('.cell'))
  const cell = dice.closest('.cell');
  const diceSides = dice.children;
  const selected = document.querySelectorAll('.nav .categories input:checked');
  let res = Array.from(selected);
  let hideDice = selected.length < 2;
  
  cell.classList.toggle('hidden', hideDice);
  
  if (selected.length < 6) {
    const missingSides = 6 - selected.length;
    
    for(x=0; x<missingSides; x++) {
      const item = res[x % selected.length];
      res.push(item);
    }
  }
  
  if (res.length > 6) res = res.slice(0, 6);
  
  Array.from(diceSides).forEach((side, index) => {
    const checkbox = res[index];
    const txt = checkbox.getAttribute('data-txt');
    side.innerHTML = txt;
  })
}

categoriesChkList.forEach(checkbox => checkbox.addEventListener('change', () => setCategories()));

start.addEventListener('click', () => roll());

const roll = function() {
  cellsList.forEach(cell => animate(cell));
}

const animate = function(cell) {
  const wrapper = cell.children[0];
  const dice = wrapper.children[0];
  
  const sides = [Math.floor(Math.random() * 4) + 1, Math.floor(Math.random() * 4) + 1];
  const duration = Math.max(...sides) * 0.25;
  const angle = Math.floor(Math.random() * 90) - 45;
  const upNbr = Math.floor(Math.random() * 3) + 1;
  const delay = Math.random();
  
  cell.style.transform = `rotateZ(${angle}deg)`;
  cell.style.transitionDelay = `${delay}s`;
  cell.style.transitionDuration = `${duration}s`;
  
  wrapper.style.animationName = `up${upNbr}`;
  wrapper.style.animationDelay = `${delay}s`;
  wrapper.style.animationDuration = `${duration}s`;
  
  dice.style.transitionDelay = `${delay}s`;
  dice.style.transitionDuration = `${duration}s`;
  dice.style.transform = `translate(-50%, -50%) rotateX(${sides[0] * 90}deg) rotateY(${sides[1] * 90}deg)`; 
  
  wrapper.addEventListener('animationend', () => wrapper.style.animationName = 'none');
}
              
            
!
999px

Console