cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <h1 class="h1-like">Foundation testing (flexbox grid variant downloaded from site)</h1>
<p class="txtcenter">public URL : <a href="http://kiwi.gg/f">kiwi.gg/fdt6flex</a></p>

<p>Documentation at <a href="https://foundation.zurb.com/sites/docs/grid.html">https://foundation.zurb.com/sites/docs/grid.html</a>.</p>
<p>Features:</p>
<ul>
  <li>mobile-first
  <li>default 12-column
  <li>nestable
  <li>a Flexbox grid variation exists (see <a href="http://kiwi.gg/f2">other Codepen</a>)
</ul>
<p>Howto:</p>
<ul>
  <li>Start by adding an element with a class of <code>.row</code>. This will create a horizontal block to contain vertical columns.
  <li>Then add elements with a <code>.column</code> class within that row. You can use <code>.column</code> or <code>.columns</code>—the only difference is grammar.
  <li>Specify the widths of each column with the <code>.small-#</code>, <code>.medium-#</code>, and <code>.large-#</code> classes.
  <li><i>Fluid row</i> - Normally, a row is always 1200 pixels wide. Make a row completely fluid by adding the .expanded class.
  <li><i>Nested grids</i> - put the .column and .row classes on the same element
  <li><i>Offsets</i> - Move blocks up to 11 columns to the right by using classes like .large-offset-1 and .small-offset-3.
</ul>

<h2 class="h2-like">single column</h2>
<p><b>Action:</b> a <code>.row</code> container element with a child <code>.column</code> (variations: an <code>.expanded.row</code> as parent container or - works only here - <code>.column</code> combined with <code>.row</code> as a single element).</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices</li>
  <li>1 column on small devices</li>
  <li>1 column on higher devices</li>
</ul>
<div class="row">
  <div class="column">.column child of .row - Lorem</div>
</div>
<div class="row column">.column combined with .row - Lorem</div>
<div class="expanded row">
  <div class="column">.column in an .expanded row - Lorem</div>
</div>

<table>
  <caption>Tests results : single column</caption>
  <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>-</td>
  </tr>
</table>

<h2 class="h2-like">three equal columns</h2>
<p><b>Action:</b> In a <code>.row</code> container, 3 or 4 children with <code>.medium-6</code> and <code>.large-4</code> classes.</p>
<p><b>Observation:</b> Default Foundation grid doesn't allow a sum of columns greater than 12.</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices </li>
  <li>2 equal columns on small devices</li>
  <li>3 equal columns on higher devices</li>
  <li>Picture scales down on tiny screens</li>
</ul>
<div class="row">
  <div class="small-12 medium-6 large-4 column">.medium-6.large-4.column - one</div>
  <div class="small-12 medium-6 large-4 column">.medium-6.large-4.column - two</div>
  <div class="small-12 medium-6 large-4 column">.medium-6.large-4.column - three</div>
</div>
<div class="row">
  <div class="small-12 medium-6 large-4 column">.medium-6.large-4.column - one</div>
  <div class="small-12 medium-6 large-4 column">.medium-6.large-4.column - two</div>
  <div class="small-12 medium-6 large-4 column">.medium-6.large-4.column - three</div>
  <div class="small-12 medium-6 large-4 column">
    and a picture! <br />
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9425/chuck-norris-775.jpg" alt="chucky" width="775">
  </div>
</div>
<div class="row">
  <div class="small-12 medium-6 large-4 column">.medium-6.large-4.column - one</div>
  <div class="small-12 medium-6 large-4 column">
    and a picture! <br />
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9425/chuck-norris-775.jpg" alt="chucky" width="775">
  </div>
  <div class="small-12 medium-6 large-4 column">.medium-6.large-4.column - two</div>
</div>
<div class="expanded row">
  <div class="small-12 medium-6 large-4 column">.small-12.medium-6.large-4.column in an .expanded row - one</div>
  <div class="small-12 medium-6 large-4 column">.small-12.medium-6.large-4.column - two</div>
  <div class="small-12 medium-6 large-4 column">.small-12.medium-6.large-4.column - three</div>
</div>
<div class="expanded row">
  <div class="small-12 medium-6 large-4 column">.small-12.medium-6.large-4.column in an .expanded row - one</div>
  <div class="small-12 medium-6 large-4 column">.small-12.medium-6.large-4.column - two</div>
  <div class="small-12 medium-6 large-4 column">.small-12.medium-6.large-4.column - three</div>
  <div class="small-12 medium-6 large-4 column">
    and a picture! <br />
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9425/chuck-norris-775.jpg" alt="chucky" width="775">
  </div>
</div>
<div class="expanded row">
  <div class="small-12 medium-6 large-4 column">.small-12.medium-6.large-4.column in an .expanded row - one</div>
  <div class="small-12 medium-6 large-4 column">
    and a picture! <br />
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9425/chuck-norris-775.jpg" alt="chucky" width="775">
  </div>
  <div class="small-12 medium-6 large-4 column">.small-12.medium-6.large-4.column - two</div>
</div>

<table>
  <caption>Tests results : three equal columns</caption>
  <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>OK</td>
    <td>.small-12 is needed for small resolutions, otherwise all sibling columns are displayed on the same .row with equal width<br>A total sum of widths larger than 12 per .row is OK with this flexbox variant</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>Without .small-12 on 4th column with a picture, this 4th column stays on the same row</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>In portrait mode only: without .small-12 on 4th column with a picture, this 4th column goes on a 2nd line and is full width (different from iOS 9.x)</td>
  </tr>
</table>


<h2 class="h2-like">three unequal columns</h2>
<p><b>Action:</b> In a <code>.row</code> container, 3 children with <code>.medium-6</code> class. 2 of them also have <code>.large-3</code> and 1 of them <code>.large-6</code> class (variation: <code>.expanded.row</code> container and children with <code>.small-12</code> class which should stay optional).</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices</li>
  <li>2 equal columns on small devices</li>
  <li>3 unequal columns on higher devices</li>
</ul>
<div class="row">
  <div class="medium-6 large-3 column">.medium-6.large-3.column - Lorem</div>
  <div class="medium-6 large-6 column">.medium-6.large-6.column - Lorem</div>
  <div class="medium-6 large-3 column">.medium-6.large-3.column - Lorem</div>
</div>
<div class="expanded row">
  <div class="small-12 medium-6 large-3 column">.small-12.medium-6.large-3.column in an .expanded row - Lorem</div>
  <div class="small-12 medium-6 large-6 column">.small-12.medium-6.large-6.column - Lorem</div>
  <div class="small-12 medium-6 large-3 column">.small-12.medium-6.large-3.column - Lorem</div>
</div>

<table>
  <caption>Tests results : three unequal columns</caption>
 <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>OK</td>
    <td>.small-12 is needed for small resolutions, otherwise all columns are displayed on the same row with equal width</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>.small-12 is needed for small resolutions, otherwise all columns are displayed on the same row with equal width</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
</table>


<h2 class="h2-like">three unequal columns with gutter</h2>
<p><b>Action:</b> .Same HTML code as above with a class <code>.medium-uncollapse</code> added on <code>.row</code> and styling background color of the content of <code>.column</code>s instead of <code>.column</code>s themselves.</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices </li>
  <li>2 equal columns on small devices </li>
  <li>3 unequal columns on higher devices</li>
  <li>gutter appears between columns</li>
  <li>children's sizes are correctly designed</li>
</ul>
<div class="row show-gutter medium-uncollapse">
  <div class="medium-6 large-3 column"><p>.medium-6.large-3.column - Lorem</p></div>
  <div class="medium-6 large-6 column"><p>.medium-6.large-6.column - Lorem</p></div>
  <div class="medium-6 large-3 column"><p>.medium-6.large-3.column - Lorem</p></div>
</div>
<div class="row show-gutter medium-uncollapse">
  <div class="medium-6 large-3 column"><p>.medium-6.large-3.column - Lorem</p></div>
  <div class="medium-6 large-9 column"><p>.medium-6.large-9.column - Lorem</p></div>
</div>
<div class="row show-gutter medium-uncollapse">
  <div class="medium-6 column"><p>.medium-6.column - Lorem</p></div>
  <div class="medium-6 column"><p>.medium-6.column - Lorem</p></div>
</div>
<div class="expanded row show-gutter medium-uncollapse">
  <div class="small-12 medium-6 large-3 column"><p>.small-12.medium-6.large-3.column in an .expanded row - Lorem</p></div>
  <div class="small-12 medium-6 large-6 column"><p>.small-12.medium-6.large-6.column - Lorem</p></div>
  <div class="small-12 medium-6 large-3 column"><p>.small-12.medium-6.large-3.column - Lorem</p></div>
</div>
<div class="expanded row show-gutter medium-uncollapse">
  <div class="medium-6 large-3 column"><p>.medium-6.large-3.column - Lorem</p></div>
  <div class="medium-6 large-9 column"><p>.medium-6.large-9.column - Lorem</p></div>
</div>
<div class="expanded row show-gutter medium-uncollapse">
  <div class="medium-6 column"><p>.medium-6.column - Lorem</p></div>
  <div class="medium-6 column"><p>.medium-6.column - Lorem</p></div>
</div>

<table>
  <caption>Tests results : three unequal columns with gutter</caption>
 <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>OK</td>
    <td>Needs an extra div child. Styling (background-color, etc) goes to this child and not .column</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>-</td>
  </tr>
</table>


<h2 class="h2-like">three columns with offset</h2>
<p><b>Observation:</b> Default Foundation grid doesn't allow a sum of columns greater than 12.</p>
<p><b>Action:</b> Class <code>.medium-offset-4</code> is added to the 4<sup>th</sup> column to offset it by the width of 4 columns.<br>Other test case (to avoid too large - thus broken - rows): only 2 children with 1 of them having this same class.</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices</li>
  <li>3 equal columns on higher devices</li>
  <li>4th child is pushed on the right (on small devices minimum)</li>
</ul>
<div class="row">
  <div class="medium-4 column">.medium-4.column - one</div>
  <div class="medium-4 column">.medium-4.column - two</div>
  <div class="medium-4 column">.medium-4.column - three</div>
  <div class="medium-4 medium-offset-4 column">.medium-4.medium-offset-4.column - .medium-offset-4</div>
  <div class="medium-4 column">.medium-4.column - five</div>
</div>
<div class="expanded row">
  <div class="small-12 medium-4 column">.small-12.medium-4.column in an .expanded row - one</div>
  <div class="small-12 medium-4 column">.small-12.medium-4.column - two</div>
  <div class="small-12 medium-4 column">.small-12.medium-4.column - three</div>
  <div class="small-12 medium-4 medium-offset-4 column">.small-12.medium-4.medium-offset-4.column - .medium-offset-4</div>
  <div class="small-12 medium-4 column">.small-12.medium-4.column - five</div>
</div>
<h3 class="h3-like">Three rows, offset on column 1 of row 2 and then column 2 of row 3</h3>
<div class="row">
  <div class="medium-4 column">row 1</div>
  <div class="medium-4 column">row 1</div>
  <div class="medium-4 column">row 1</div>
</div>
<div class="row">
  <div class="medium-4 medium-offset-4 column">.medium-4.medium-offset-4.column - .medium-offset-4</div>
  <div class="medium-4 column">.medium-4.column - two</div>
</div>
<div class="row">
  <div class="medium-4 column">.medium-4.column - one</div>
  <div class="medium-4 medium-offset-4 column">.medium-4.medium-offset-4.column - .medium-offset-4</div>
</div>
<div class="expanded row">
  <div class="small-12 medium-4 column">row 1</div>
  <div class="small-12 medium-4 column">row 1</div>
  <div class="small-12 medium-4 column">row 1</div>
</div>
<div class="expanded row">
  <div class="small-12 medium-4 medium-offset-4 column">.small-12.medium-4.medium-offset-4.column - .medium-offset-4</div>
  <div class="small-12 medium-4 column">.small-12.medium-4.column - two</div>
</div>
<div class="expanded row">
  <div class="small-12 medium-4 column">.small-12.medium-4.column - one</div>
  <div class="small-12 medium-4 medium-offset-4 column">.small-12.medium-4.medium-offset-4.column - .medium-offset-4</div>
</div>

<table>
  <caption>Tests results : three columns with push</caption>
 <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>OK</td>
    <td>.small-12 is needed for small resolutions, otherwise all sibling columns are displayed on the same .row with equal width<br>A total sum of widths larger than 12 per .row is OK with this flexbox variant</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>OK</td>
    <td>(not tested without .small-12)</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>OK</td>
    <td>(not tested without .small-12)</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
</table>


<h2 class="h2-like">nested grid</h2>
<p><b>Observation:</b> Default Foundation grid doesn't allow a sum of columns greater than 12.</p>
<p><b>Action:</b> One of the column contains a (nested) <code>.row</code> with 2 children <code>class="medium-6 column"</code> (also <code>.small-12</code> in the <i>expanded</i> row, for testing purposes).<br>
First case: 5 columns larger than 12 columns. Second case: 3 columns wih a total width of 12 "units".</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices </li>
  <li>3 unequal columns on higher devices</li>
  <li>4th child is nested</li>
</ul>
<h3 class="h3-like">First case: 5 columns (width: 20 "units") and 4th column has a nested grid</h3>
<div class="row">
  <div class="small-12 medium-4 column">.small-12.medium-4.column - Lorem</div>
  <div class="small-12 medium-4 column">.small-12.medium-4.column - Lorem</div>
  <div class="small-12 medium-4 column">.small-12.medium-4.column - Lorem</div>
  <div class="small-12 medium-4 column">
    <div class="row">
      <div class="medium-6 column">.medium-6 - nested</div>
      <div class="medium-6 column">.medium-6 - nested</div>
    </div>
  </div>
  <div class="small-12 medium-4 column">.small-12.medium-4.column - Lorem</div>
</div>
<div class="expanded row">
  <div class="small-12 medium-4 column">.small-12.medium-4.column in an .expanded row - Lorem</div>
  <div class="small-12 medium-4 column">.small-12.medium-4.column - Lorem</div>
  <div class="small-12 medium-4 column">.small-12.medium-4.column - Lorem</div>
  <div class="small-12 medium-4 column">
    <div class="row">
      <div class="small-12 medium-6 column">.small-12.medium-6 - nested</div>
      <div class="small-12 medium-6 column">.small-12.medium-6 - nested</div>
    </div>
  </div>
  <div class="small-12 medium-4 column">.small-12.medium-4.column - Lorem</div>
</div>
<h3 class="h3-like">Three columns and 2<sup>nd</sup> one contains a 2-columns nested grid</h3>
<div class="row">
  <div class="small-12 medium-4 column">.small-12.medium-4.column - Lorem</div>
  <div class="small-12 medium-4 column">
    <div class="row">
      <div class="medium-6 column">.medium-6 - nested</div>
      <div class="medium-6 column">.medium-6 - nested</div>
    </div>
  </div>
  <div class="small-12 medium-4 column">.small-12.medium-4.column - Lorem</div>
</div>
<div class="expanded row">
  <div class="small-12 medium-4 column">.small-12.medium-4.column in an .expanded row - Lorem</div>
  <div class="small-12 medium-4 column">
    <div class="row">
      <div class="small-12 medium-6 column">.small-12.medium-6 - nested</div>
      <div class="small-12 medium-6 column">.small-12.medium-6 - nested</div>
    </div>
  </div>
  <div class="small-12 medium-4 column">.small-12.medium-4.column - Lorem</div>
</div>


<table>
  <caption>Tests results : nested grid</caption>
 <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>OK</td>
    <td>.small-12 is needed for small resolutions, otherwise all nested columns are displayed on the same row with equal width</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>OK</td>
    <td>Same than Chr, Fx and IE10-11</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
</table>
            
          
!
            
              /* deco */

div:not(.show-gutter) > div,
.row.column {
  padding: 1rem;
  background: rgba(86,61,124,.15);
  border: 1px solid rgba(86,61,124,.2);
}
.show-gutter > .column > * {
  padding: 1rem;
  background: rgba(66,41,104,.15);
  border: 1px solid rgba(66,41,104,.2);
}

* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}
html {
  font-size: 62.5%;
  font-size: calc(0.625em * 1);
}
body {
	margin: 2rem; 
	padding: 1rem 0;
  line-height: 1.4;
	font-family: arial, sans-serif;
  //font-size: 1.6em;
  background: #fff;
}
.h1-like {
	margin: 0 0 1em;
	color: #345;
	text-align: center;
  font-family: georgia, "trebuchet ms", arial, serif;
}
.h2-like {
	margin: 3rem 0 1rem;
	color: #567;
  font-family: georgia, "trebuchet ms", arial, serif;
}
.txtcenter {
	text-align: center;
}
code {
	font-size: 110%;
	color: firebrick;
}
li {
  margin-bottom: 5px;
}
a {
  color: hotpink
}
.ok {
  color: green;
  font-weight: bold;
}
table {
  border: 1px solid #ccc; 
  border-collapse: collapse;
  margin-top: 4rem;
  margin-bottom: 4rem;
}

caption {
  padding: 1rem;
  color: #555;
  font-style: italic; }

td,
th {
  padding: 0.3em 0.8em;
  border: 1px #aaa dotted;
  text-align: left; 
}
thead tr {
  background: #eee;
}

/**
 * Foundation for Sites by ZURB
 * Version 6.2.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
   * 1. Set default font family to sans-serif.
   * 2. Prevent iOS and IE text size adjust after device orientation change,
   *    without disabling user zoom.
   */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
   * Remove default margin.
   */
body {
  margin: 0; }

/* HTML5 display definitions
     ========================================================================== */
/**
   * Correct `block` display not defined for any HTML5 element in IE 8/9.
   * Correct `block` display not defined for `details` or `summary` in IE 10/11
   * and Firefox.
   * Correct `block` display not defined for `main` in IE 11.
   */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
   * 1. Correct `inline-block` display not defined in IE 8/9.
   * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
   */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
   * Prevent modern browsers from displaying `audio` without controls.
   * Remove excess height in iOS 5 devices.
   */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
   * Address `[hidden]` styling not present in IE 8/9/10.
   * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
   */
[hidden],
template {
  display: none; }

/* Links
     ========================================================================== */
/**
   * Remove the gray background color from active links in IE 10.
   */
a {
  background-color: transparent; }

/**
   * Improve readability of focused elements when they are also in an
   * active/hover state.
   */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
     ========================================================================== */
/**
   * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
   */
abbr[title] {
  border-bottom: 1px dotted; }

/**
   * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
   */
b,
strong {
  font-weight: bold; }

/**
   * Address styling not present in Safari and Chrome.
   */
dfn {
  font-style: italic; }

/**
   * Address variable `h1` font-size and margin within `section` and `article`
   * contexts in Firefox 4+, Safari, and Chrome.
   */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
   * Address styling not present in IE 8/9.
   */
mark {
  background: #ff0;
  color: #000; }

/**
   * Address inconsistent and variable font size in all browsers.
   */
small {
  font-size: 80%; }

/**
   * Prevent `sub` and `sup` affecting `line-height` in all browsers.
   */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
     ========================================================================== */
/**
   * Remove border when inside `a` element in IE 8/9/10.
   */
img {
  border: 0; }

/**
   * Correct overflow not hidden in IE 9/10/11.
   */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
     ========================================================================== */
/**
   * Address margin not present in IE 8/9 and Safari.
   */
figure {
  margin: 1em 40px; }

/**
   * Address differences between Firefox and other browsers.
   */
hr {
  box-sizing: content-box;
  height: 0; }

/**
   * Contain overflow in all browsers.
   */
pre {
  overflow: auto; }

/**
   * Address odd `em`-unit font size rendering in all browsers.
   */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
     ========================================================================== */
/**
   * Known limitation: by default, Chrome and Safari on OS X allow very limited
   * styling of `select`, unless a `border` property is set.
   */
/**
   * 1. Correct color not being inherited.
   *    Known issue: affects color of disabled elements.
   * 2. Correct font properties not being inherited.
   * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
   */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
   * Address `overflow` set to `hidden` in IE 8/9/10/11.
   */
button {
  overflow: visible; }

/**
   * Address inconsistent `text-transform` inheritance for `button` and `select`.
   * All other form control elements do not inherit `text-transform` values.
   * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
   * Correct `select` style inheritance in Firefox.
   */
button,
select {
  text-transform: none; }

/**
   * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
   *    and `video` controls.
   * 2. Correct inability to style clickable `input` types in iOS.
   * 3. Improve usability and consistency of cursor style between image-type
   *    `input` and others.
   */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
   * Re-set default cursor for disabled elements.
   */
button[disabled],
html input[disabled] {
  cursor: not-allowed; }

/**
   * Remove inner padding and border in Firefox 4+.
   */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
   * Address Firefox 4+ setting `line-height` on `input` using `!important` in
   * the UA stylesheet.
   */
input {
  line-height: normal; }

/**
   * It's recommended that you don't attempt to style these elements.
   * Firefox's implementation doesn't respect box-sizing, padding, or width.
   *
   * 1. Address box sizing set to `content-box` in IE 8/9/10.
   * 2. Remove excess padding in IE 8/9/10.
   */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
   * Fix the cursor style for Chrome's increment/decrement buttons. For certain
   * `font-size` values of the `input`, it causes the cursor style of the
   * decrement button to change from `default` to `text`.
   */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
   * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
   * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
   */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */ }

/**
   * Remove inner padding and search cancel button in Safari and Chrome on OS X.
   * Safari (but not Chrome) clips the cancel button when the search input has
   * padding (and `textfield` appearance).
   */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
   * Define consistent border, margin, and padding.
   * [NOTE] We don't enable this ruleset in Foundation, because we want the <fieldset> element to have plain styling.
   */
/* fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
  } */
/**
   * 1. Correct `color` not being inherited in IE 8/9/10/11.
   * 2. Remove padding so people aren't caught out if they zero out fieldsets.
   */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
   * Remove default vertical scrollbar in IE 8/9/10/11.
   */
textarea {
  overflow: auto; }

/**
   * Don't inherit the `font-weight` (applied by a rule above).
   * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
   */
optgroup {
  font-weight: bold; }

/* Tables
     ========================================================================== */
/**
   * Remove most spacing between table cells.
   */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

.foundation-mq {
  font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em"; }

html {
  font-size: 100%;
  box-sizing: border-box; }

*,
*::before,
*::after {
  box-sizing: inherit; }

body {
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.5;
  color: #0a0a0a;
  background: #fefefe;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

img {
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic;
  display: inline-block;
  vertical-align: middle; }

textarea {
  height: auto;
  min-height: 50px;
  border-radius: 3px; }

select {
  width: 100%;
  border-radius: 3px; }

#map_canvas img,
#map_canvas embed,
#map_canvas object,
.map_canvas img,
.map_canvas embed,
.map_canvas object,
.mqa-display img,
.mqa-display embed,
.mqa-display object {
  max-width: none !important; }

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 3px;
  line-height: 1; }
  [data-whatinput='mouse'] button {
    outline: 0; }

.is-visible {
  display: block !important; }

.is-hidden {
  display: none !important; }

.row {
  max-width: 62.5rem;
  margin-left: auto;
  margin-right: auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap; }
  .row .row {
    max-width: none;
    margin-left: -0.9375rem;
    margin-right: -0.9375rem; }
  .row.expanded {
    max-width: none; }
  .row.collapse > .column, .row.collapse > .columns {
    padding-left: 0;
    padding-right: 0; }

.column, .columns {
  -webkit-flex: 1 1 0px;
      -ms-flex: 1 1 0px;
          flex: 1 1 0px;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  min-width: initial; }

.column.row.row, .row.row.columns {
  float: none;
  display: block; }
  .row .column.row.row, .row .row.row.columns {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0; }

.small-1 {
  -webkit-flex: 0 0 8.33333%;
      -ms-flex: 0 0 8.33333%;
          flex: 0 0 8.33333%;
  max-width: 8.33333%; }

.small-offset-0 {
  margin-left: 0%; }

.small-2 {
  -webkit-flex: 0 0 16.66667%;
      -ms-flex: 0 0 16.66667%;
          flex: 0 0 16.66667%;
  max-width: 16.66667%; }

.small-offset-1 {
  margin-left: 8.33333%; }

.small-3 {
  -webkit-flex: 0 0 25%;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
  max-width: 25%; }

.small-offset-2 {
  margin-left: 16.66667%; }

.small-4 {
  -webkit-flex: 0 0 33.33333%;
      -ms-flex: 0 0 33.33333%;
          flex: 0 0 33.33333%;
  max-width: 33.33333%; }

.small-offset-3 {
  margin-left: 25%; }

.small-5 {
  -webkit-flex: 0 0 41.66667%;
      -ms-flex: 0 0 41.66667%;
          flex: 0 0 41.66667%;
  max-width: 41.66667%; }

.small-offset-4 {
  margin-left: 33.33333%; }

.small-6 {
  -webkit-flex: 0 0 50%;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%; }

.small-offset-5 {
  margin-left: 41.66667%; }

.small-7 {
  -webkit-flex: 0 0 58.33333%;
      -ms-flex: 0 0 58.33333%;
          flex: 0 0 58.33333%;
  max-width: 58.33333%; }

.small-offset-6 {
  margin-left: 50%; }

.small-8 {
  -webkit-flex: 0 0 66.66667%;
      -ms-flex: 0 0 66.66667%;
          flex: 0 0 66.66667%;
  max-width: 66.66667%; }

.small-offset-7 {
  margin-left: 58.33333%; }

.small-9 {
  -webkit-flex: 0 0 75%;
      -ms-flex: 0 0 75%;
          flex: 0 0 75%;
  max-width: 75%; }

.small-offset-8 {
  margin-left: 66.66667%; }

.small-10 {
  -webkit-flex: 0 0 83.33333%;
      -ms-flex: 0 0 83.33333%;
          flex: 0 0 83.33333%;
  max-width: 83.33333%; }

.small-offset-9 {
  margin-left: 75%; }

.small-11 {
  -webkit-flex: 0 0 91.66667%;
      -ms-flex: 0 0 91.66667%;
          flex: 0 0 91.66667%;
  max-width: 91.66667%; }

.small-offset-10 {
  margin-left: 83.33333%; }

.small-12 {
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%; }

.small-offset-11 {
  margin-left: 91.66667%; }

.small-order-1 {
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1; }

.small-order-2 {
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2; }

.small-order-3 {
  -webkit-order: 3;
      -ms-flex-order: 3;
          order: 3; }

.small-order-4 {
  -webkit-order: 4;
      -ms-flex-order: 4;
          order: 4; }

.small-order-5 {
  -webkit-order: 5;
      -ms-flex-order: 5;
          order: 5; }

.small-order-6 {
  -webkit-order: 6;
      -ms-flex-order: 6;
          order: 6; }

.small-up-1 {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
  .small-up-1 > .column, .small-up-1 > .columns {
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%; }

.small-up-2 {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
  .small-up-2 > .column, .small-up-2 > .columns {
    -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%; }

.small-up-3 {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
  .small-up-3 > .column, .small-up-3 > .columns {
    -webkit-flex: 0 0 33.33333%;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%;
    max-width: 33.33333%; }

.small-up-4 {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
  .small-up-4 > .column, .small-up-4 > .columns {
    -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%; }

.small-up-5 {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
  .small-up-5 > .column, .small-up-5 > .columns {
    -webkit-flex: 0 0 20%;
        -ms-flex: 0 0 20%;
            flex: 0 0 20%;
    max-width: 20%; }

.small-up-6 {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
  .small-up-6 > .column, .small-up-6 > .columns {
    -webkit-flex: 0 0 16.66667%;
        -ms-flex: 0 0 16.66667%;
            flex: 0 0 16.66667%;
    max-width: 16.66667%; }

.small-up-7 {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
  .small-up-7 > .column, .small-up-7 > .columns {
    -webkit-flex: 0 0 14.28571%;
        -ms-flex: 0 0 14.28571%;
            flex: 0 0 14.28571%;
    max-width: 14.28571%; }

.small-up-8 {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
  .small-up-8 > .column, .small-up-8 > .columns {
    -webkit-flex: 0 0 12.5%;
        -ms-flex: 0 0 12.5%;
            flex: 0 0 12.5%;
    max-width: 12.5%; }

.small-collapse > .column, .small-collapse > .columns {
  padding-left: 0;
  padding-right: 0; }

.small-uncollapse > .column, .small-uncollapse > .columns {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem; }

@media screen and (min-width: 40em) {
  .medium-1 {
    -webkit-flex: 0 0 8.33333%;
        -ms-flex: 0 0 8.33333%;
            flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .medium-offset-0 {
    margin-left: 0%; }
  .medium-2 {
    -webkit-flex: 0 0 16.66667%;
        -ms-flex: 0 0 16.66667%;
            flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .medium-offset-1 {
    margin-left: 8.33333%; }
  .medium-3 {
    -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%; }
  .medium-offset-2 {
    margin-left: 16.66667%; }
  .medium-4 {
    -webkit-flex: 0 0 33.33333%;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .medium-offset-3 {
    margin-left: 25%; }
  .medium-5 {
    -webkit-flex: 0 0 41.66667%;
        -ms-flex: 0 0 41.66667%;
            flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .medium-offset-4 {
    margin-left: 33.33333%; }
  .medium-6 {
    -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%; }
  .medium-offset-5 {
    margin-left: 41.66667%; }
  .medium-7 {
    -webkit-flex: 0 0 58.33333%;
        -ms-flex: 0 0 58.33333%;
            flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .medium-offset-6 {
    margin-left: 50%; }
  .medium-8 {
    -webkit-flex: 0 0 66.66667%;
        -ms-flex: 0 0 66.66667%;
            flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .medium-offset-7 {
    margin-left: 58.33333%; }
  .medium-9 {
    -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%; }
  .medium-offset-8 {
    margin-left: 66.66667%; }
  .medium-10 {
    -webkit-flex: 0 0 83.33333%;
        -ms-flex: 0 0 83.33333%;
            flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .medium-offset-9 {
    margin-left: 75%; }
  .medium-11 {
    -webkit-flex: 0 0 91.66667%;
        -ms-flex: 0 0 91.66667%;
            flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .medium-offset-10 {
    margin-left: 83.33333%; }
  .medium-12 {
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%; }
  .medium-offset-11 {
    margin-left: 91.66667%; }
  .medium-order-1 {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1; }
  .medium-order-2 {
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2; }
  .medium-order-3 {
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3; }
  .medium-order-4 {
    -webkit-order: 4;
        -ms-flex-order: 4;
            order: 4; }
  .medium-order-5 {
    -webkit-order: 5;
        -ms-flex-order: 5;
            order: 5; }
  .medium-order-6 {
    -webkit-order: 6;
        -ms-flex-order: 6;
            order: 6; }
  .medium-up-1 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .medium-up-1 > .column, .medium-up-1 > .columns {
      -webkit-flex: 0 0 100%;
          -ms-flex: 0 0 100%;
              flex: 0 0 100%;
      max-width: 100%; }
  .medium-up-2 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .medium-up-2 > .column, .medium-up-2 > .columns {
      -webkit-flex: 0 0 50%;
          -ms-flex: 0 0 50%;
              flex: 0 0 50%;
      max-width: 50%; }
  .medium-up-3 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .medium-up-3 > .column, .medium-up-3 > .columns {
      -webkit-flex: 0 0 33.33333%;
          -ms-flex: 0 0 33.33333%;
              flex: 0 0 33.33333%;
      max-width: 33.33333%; }
  .medium-up-4 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .medium-up-4 > .column, .medium-up-4 > .columns {
      -webkit-flex: 0 0 25%;
          -ms-flex: 0 0 25%;
              flex: 0 0 25%;
      max-width: 25%; }
  .medium-up-5 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .medium-up-5 > .column, .medium-up-5 > .columns {
      -webkit-flex: 0 0 20%;
          -ms-flex: 0 0 20%;
              flex: 0 0 20%;
      max-width: 20%; }
  .medium-up-6 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .medium-up-6 > .column, .medium-up-6 > .columns {
      -webkit-flex: 0 0 16.66667%;
          -ms-flex: 0 0 16.66667%;
              flex: 0 0 16.66667%;
      max-width: 16.66667%; }
  .medium-up-7 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .medium-up-7 > .column, .medium-up-7 > .columns {
      -webkit-flex: 0 0 14.28571%;
          -ms-flex: 0 0 14.28571%;
              flex: 0 0 14.28571%;
      max-width: 14.28571%; }
  .medium-up-8 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .medium-up-8 > .column, .medium-up-8 > .columns {
      -webkit-flex: 0 0 12.5%;
          -ms-flex: 0 0 12.5%;
              flex: 0 0 12.5%;
      max-width: 12.5%; } }

@media screen and (min-width: 40em) and (min-width: 40em) {
  .medium-expand {
    -webkit-flex: 1 1 0px;
        -ms-flex: 1 1 0px;
            flex: 1 1 0px; } }

.row.medium-unstack > .column, .row.medium-unstack > .columns {
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%; }
  @media screen and (min-width: 40em) {
    .row.medium-unstack > .column, .row.medium-unstack > .columns {
      -webkit-flex: 1 1 0px;
          -ms-flex: 1 1 0px;
              flex: 1 1 0px; } }

@media screen and (min-width: 40em) {
  .medium-collapse > .column, .medium-collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .medium-uncollapse > .column, .medium-uncollapse > .columns {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem; } }

@media screen and (min-width: 64em) {
  .large-1 {
    -webkit-flex: 0 0 8.33333%;
        -ms-flex: 0 0 8.33333%;
            flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .large-offset-0 {
    margin-left: 0%; }
  .large-2 {
    -webkit-flex: 0 0 16.66667%;
        -ms-flex: 0 0 16.66667%;
            flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .large-offset-1 {
    margin-left: 8.33333%; }
  .large-3 {
    -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%; }
  .large-offset-2 {
    margin-left: 16.66667%; }
  .large-4 {
    -webkit-flex: 0 0 33.33333%;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .large-offset-3 {
    margin-left: 25%; }
  .large-5 {
    -webkit-flex: 0 0 41.66667%;
        -ms-flex: 0 0 41.66667%;
            flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .large-offset-4 {
    margin-left: 33.33333%; }
  .large-6 {
    -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%; }
  .large-offset-5 {
    margin-left: 41.66667%; }
  .large-7 {
    -webkit-flex: 0 0 58.33333%;
        -ms-flex: 0 0 58.33333%;
            flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .large-offset-6 {
    margin-left: 50%; }
  .large-8 {
    -webkit-flex: 0 0 66.66667%;
        -ms-flex: 0 0 66.66667%;
            flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .large-offset-7 {
    margin-left: 58.33333%; }
  .large-9 {
    -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%; }
  .large-offset-8 {
    margin-left: 66.66667%; }
  .large-10 {
    -webkit-flex: 0 0 83.33333%;
        -ms-flex: 0 0 83.33333%;
            flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .large-offset-9 {
    margin-left: 75%; }
  .large-11 {
    -webkit-flex: 0 0 91.66667%;
        -ms-flex: 0 0 91.66667%;
            flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .large-offset-10 {
    margin-left: 83.33333%; }
  .large-12 {
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%; }
  .large-offset-11 {
    margin-left: 91.66667%; }
  .large-order-1 {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1; }
  .large-order-2 {
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2; }
  .large-order-3 {
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3; }
  .large-order-4 {
    -webkit-order: 4;
        -ms-flex-order: 4;
            order: 4; }
  .large-order-5 {
    -webkit-order: 5;
        -ms-flex-order: 5;
            order: 5; }
  .large-order-6 {
    -webkit-order: 6;
        -ms-flex-order: 6;
            order: 6; }
  .large-up-1 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .large-up-1 > .column, .large-up-1 > .columns {
      -webkit-flex: 0 0 100%;
          -ms-flex: 0 0 100%;
              flex: 0 0 100%;
      max-width: 100%; }
  .large-up-2 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .large-up-2 > .column, .large-up-2 > .columns {
      -webkit-flex: 0 0 50%;
          -ms-flex: 0 0 50%;
              flex: 0 0 50%;
      max-width: 50%; }
  .large-up-3 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .large-up-3 > .column, .large-up-3 > .columns {
      -webkit-flex: 0 0 33.33333%;
          -ms-flex: 0 0 33.33333%;
              flex: 0 0 33.33333%;
      max-width: 33.33333%; }
  .large-up-4 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .large-up-4 > .column, .large-up-4 > .columns {
      -webkit-flex: 0 0 25%;
          -ms-flex: 0 0 25%;
              flex: 0 0 25%;
      max-width: 25%; }
  .large-up-5 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .large-up-5 > .column, .large-up-5 > .columns {
      -webkit-flex: 0 0 20%;
          -ms-flex: 0 0 20%;
              flex: 0 0 20%;
      max-width: 20%; }
  .large-up-6 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .large-up-6 > .column, .large-up-6 > .columns {
      -webkit-flex: 0 0 16.66667%;
          -ms-flex: 0 0 16.66667%;
              flex: 0 0 16.66667%;
      max-width: 16.66667%; }
  .large-up-7 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .large-up-7 > .column, .large-up-7 > .columns {
      -webkit-flex: 0 0 14.28571%;
          -ms-flex: 0 0 14.28571%;
              flex: 0 0 14.28571%;
      max-width: 14.28571%; }
  .large-up-8 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .large-up-8 > .column, .large-up-8 > .columns {
      -webkit-flex: 0 0 12.5%;
          -ms-flex: 0 0 12.5%;
              flex: 0 0 12.5%;
      max-width: 12.5%; } }

@media screen and (min-width: 64em) and (min-width: 64em) {
  .large-expand {
    -webkit-flex: 1 1 0px;
        -ms-flex: 1 1 0px;
            flex: 1 1 0px; } }

.row.large-unstack > .column, .row.large-unstack > .columns {
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%; }
  @media screen and (min-width: 64em) {
    .row.large-unstack > .column, .row.large-unstack > .columns {
      -webkit-flex: 1 1 0px;
          -ms-flex: 1 1 0px;
              flex: 1 1 0px; } }

@media screen and (min-width: 64em) {
  .large-collapse > .column, .large-collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .large-uncollapse > .column, .large-uncollapse > .columns {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem; } }

.shrink {
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  max-width: 100%; }

.column.align-top, .align-top.columns {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start; }

.column.align-bottom, .align-bottom.columns {
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end; }

.column.align-middle, .align-middle.columns {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center; }

.column.align-stretch, .align-stretch.columns {
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
          align-self: stretch; }

.align-right {
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

.align-center {
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }

.align-justify {
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.align-spaced {
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around; }

.align-top {
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start; }

.align-self-top {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start; }

.align-bottom {
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end; }

.align-self-bottom {
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end; }

.align-middle {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.align-self-middle {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center; }

.align-stretch {
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch; }

.align-self-stretch {
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
          align-self: stretch; }

.small-order-1 {
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1; }

.small-order-2 {
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2; }

.small-order-3 {
  -webkit-order: 3;
      -ms-flex-order: 3;
          order: 3; }

.small-order-4 {
  -webkit-order: 4;
      -ms-flex-order: 4;
          order: 4; }

.small-order-5 {
  -webkit-order: 5;
      -ms-flex-order: 5;
          order: 5; }

.small-order-6 {
  -webkit-order: 6;
      -ms-flex-order: 6;
          order: 6; }

@media screen and (min-width: 40em) {
  .medium-order-1 {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1; }
  .medium-order-2 {
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2; }
  .medium-order-3 {
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3; }
  .medium-order-4 {
    -webkit-order: 4;
        -ms-flex-order: 4;
            order: 4; }
  .medium-order-5 {
    -webkit-order: 5;
        -ms-flex-order: 5;
            order: 5; }
  .medium-order-6 {
    -webkit-order: 6;
        -ms-flex-order: 6;
            order: 6; } }

@media screen and (min-width: 64em) {
  .large-order-1 {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1; }
  .large-order-2 {
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2; }
  .large-order-3 {
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3; }
  .large-order-4 {
    -webkit-order: 4;
        -ms-flex-order: 4;
            order: 4; }
  .large-order-5 {
    -webkit-order: 5;
        -ms-flex-order: 5;
            order: 5; }
  .large-order-6 {
    -webkit-order: 6;
        -ms-flex-order: 6;
            order: 6; } }


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console