cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-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</h1>
<p class="txtcenter">public URL : <a href="http://kiwi.gg/f">kiwi.gg/f</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>Note: whole page is larger than viewport in portrait mode but it isn't due to a row. Grid is OK.</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="medium-6 large-4 column">.medium-6.large-4.column - one</div>
  <div class="medium-6 large-4 column">.medium-6.large-4.column - two</div>
  <div class="medium-6 large-4 column">.medium-6.large-4.column - three</div>
</div>
<div class="row">
  <div class="medium-6 large-4 column">.medium-6.large-4.column - one</div>
  <div class="medium-6 large-4 column">.medium-6.large-4.column - two</div>
  <div class="medium-6 large-4 column">.medium-6.large-4.column - three</div>
  <div class="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="medium-6 large-4 column">.medium-6.large-4.column - one</div>
  <div class="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="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>Limited</td>
    <td>Fails if .row larger than 12 (last .column floated to right and styling in a way depending of the height of previous column - not necessarily obvious with simple cases)</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>Limited</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>Limited</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>Limited</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>Limited</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>Limited</td>
    <td>Idem</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 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>-</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 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>via <code>.medium-uncollapse</code></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 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>Limited</td>
    <td>Fails if .row larger than 12 (OK in "full view" with viewport >1900px even with a .row larger than 12 but fails in "editor view")</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>Limited</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>Limited</td>
    <td>Depends of the height of <sup>1st</sup> column</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>Limited</td>
    <td>Fails if .row larger than 12 in some resolutions though still OK in others; Depends of both height of <sup>1st</sup> column and resolution</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>Limited</td>
    <td>Fails for .expanded.row if larger than 12 in different resolutions though still OK in others and OK for default .row</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>Limited</td>
    <td>Fails if .row larger than 12 in some resolutions though still OK in others</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">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>Nesting works but before that, layout fails if parent .row larger than 12</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>Idem</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>OK</td>
    <td>Idem</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>
            
          
!
            
              // breakpoints
$tiny: 544px;
$small: 768px;


/* 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;
  &.wrap {
    word-wrap: break-word;
  }
}
.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 6 (Normalize.css + non-flexbox grid)*/
/**
 * 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; }
  .row::before, .row::after {
    content: ' ';
    display: table; }
  .row::after {
    clear: both; }
  .row.collapse > .column, .row.collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .row .row {
    max-width: none;
    margin-left: -0.9375rem;
    margin-right: -0.9375rem; }
    .row .row.collapse {
      margin-left: 0;
      margin-right: 0; }
  .row.expanded {
    max-width: none; }
    .row.expanded .row {
      margin-left: auto;
      margin-right: auto; }

.column, .columns {
  width: 100%;
  float: left;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem; }
  .column:last-child:not(:first-child), .columns:last-child:not(:first-child) {
    float: right; }
  .column.end:last-child:last-child, .end.columns:last-child:last-child {
    float: left; }

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

.small-1 {
  width: 8.33333%; }

.small-push-1 {
  position: relative;
  left: 8.33333%; }

.small-pull-1 {
  position: relative;
  left: -8.33333%; }

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

.small-2 {
  width: 16.66667%; }

.small-push-2 {
  position: relative;
  left: 16.66667%; }

.small-pull-2 {
  position: relative;
  left: -16.66667%; }

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

.small-3 {
  width: 25%; }

.small-push-3 {
  position: relative;
  left: 25%; }

.small-pull-3 {
  position: relative;
  left: -25%; }

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

.small-4 {
  width: 33.33333%; }

.small-push-4 {
  position: relative;
  left: 33.33333%; }

.small-pull-4 {
  position: relative;
  left: -33.33333%; }

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

.small-5 {
  width: 41.66667%; }

.small-push-5 {
  position: relative;
  left: 41.66667%; }

.small-pull-5 {
  position: relative;
  left: -41.66667%; }

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

.small-6 {
  width: 50%; }

.small-push-6 {
  position: relative;
  left: 50%; }

.small-pull-6 {
  position: relative;
  left: -50%; }

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

.small-7 {
  width: 58.33333%; }

.small-push-7 {
  position: relative;
  left: 58.33333%; }

.small-pull-7 {
  position: relative;
  left: -58.33333%; }

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

.small-8 {
  width: 66.66667%; }

.small-push-8 {
  position: relative;
  left: 66.66667%; }

.small-pull-8 {
  position: relative;
  left: -66.66667%; }

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

.small-9 {
  width: 75%; }

.small-push-9 {
  position: relative;
  left: 75%; }

.small-pull-9 {
  position: relative;
  left: -75%; }

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

.small-10 {
  width: 83.33333%; }

.small-push-10 {
  position: relative;
  left: 83.33333%; }

.small-pull-10 {
  position: relative;
  left: -83.33333%; }

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

.small-11 {
  width: 91.66667%; }

.small-push-11 {
  position: relative;
  left: 91.66667%; }

.small-pull-11 {
  position: relative;
  left: -91.66667%; }

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

.small-12 {
  width: 100%; }

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

.small-up-1 > .column, .small-up-1 > .columns {
  width: 100%;
  float: left; }
  .small-up-1 > .column:nth-of-type(1n), .small-up-1 > .columns:nth-of-type(1n) {
    clear: none; }
  .small-up-1 > .column:nth-of-type(1n+1), .small-up-1 > .columns:nth-of-type(1n+1) {
    clear: both; }
  .small-up-1 > .column:last-child, .small-up-1 > .columns:last-child {
    float: left; }

.small-up-2 > .column, .small-up-2 > .columns {
  width: 50%;
  float: left; }
  .small-up-2 > .column:nth-of-type(1n), .small-up-2 > .columns:nth-of-type(1n) {
    clear: none; }
  .small-up-2 > .column:nth-of-type(2n+1), .small-up-2 > .columns:nth-of-type(2n+1) {
    clear: both; }
  .small-up-2 > .column:last-child, .small-up-2 > .columns:last-child {
    float: left; }

.small-up-3 > .column, .small-up-3 > .columns {
  width: 33.33333%;
  float: left; }
  .small-up-3 > .column:nth-of-type(1n), .small-up-3 > .columns:nth-of-type(1n) {
    clear: none; }
  .small-up-3 > .column:nth-of-type(3n+1), .small-up-3 > .columns:nth-of-type(3n+1) {
    clear: both; }
  .small-up-3 > .column:last-child, .small-up-3 > .columns:last-child {
    float: left; }

.small-up-4 > .column, .small-up-4 > .columns {
  width: 25%;
  float: left; }
  .small-up-4 > .column:nth-of-type(1n), .small-up-4 > .columns:nth-of-type(1n) {
    clear: none; }
  .small-up-4 > .column:nth-of-type(4n+1), .small-up-4 > .columns:nth-of-type(4n+1) {
    clear: both; }
  .small-up-4 > .column:last-child, .small-up-4 > .columns:last-child {
    float: left; }

.small-up-5 > .column, .small-up-5 > .columns {
  width: 20%;
  float: left; }
  .small-up-5 > .column:nth-of-type(1n), .small-up-5 > .columns:nth-of-type(1n) {
    clear: none; }
  .small-up-5 > .column:nth-of-type(5n+1), .small-up-5 > .columns:nth-of-type(5n+1) {
    clear: both; }
  .small-up-5 > .column:last-child, .small-up-5 > .columns:last-child {
    float: left; }

.small-up-6 > .column, .small-up-6 > .columns {
  width: 16.66667%;
  float: left; }
  .small-up-6 > .column:nth-of-type(1n), .small-up-6 > .columns:nth-of-type(1n) {
    clear: none; }
  .small-up-6 > .column:nth-of-type(6n+1), .small-up-6 > .columns:nth-of-type(6n+1) {
    clear: both; }
  .small-up-6 > .column:last-child, .small-up-6 > .columns:last-child {
    float: left; }

.small-up-7 > .column, .small-up-7 > .columns {
  width: 14.28571%;
  float: left; }
  .small-up-7 > .column:nth-of-type(1n), .small-up-7 > .columns:nth-of-type(1n) {
    clear: none; }
  .small-up-7 > .column:nth-of-type(7n+1), .small-up-7 > .columns:nth-of-type(7n+1) {
    clear: both; }
  .small-up-7 > .column:last-child, .small-up-7 > .columns:last-child {
    float: left; }

.small-up-8 > .column, .small-up-8 > .columns {
  width: 12.5%;
  float: left; }
  .small-up-8 > .column:nth-of-type(1n), .small-up-8 > .columns:nth-of-type(1n) {
    clear: none; }
  .small-up-8 > .column:nth-of-type(8n+1), .small-up-8 > .columns:nth-of-type(8n+1) {
    clear: both; }
  .small-up-8 > .column:last-child, .small-up-8 > .columns:last-child {
    float: left; }

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

.small-collapse .row,
.expanded.row .small-collapse.row {
  margin-left: 0;
  margin-right: 0; }

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

.small-centered {
  float: none;
  margin-left: auto;
  margin-right: auto; }

.small-uncentered,
.small-push-0,
.small-pull-0 {
  position: static;
  margin-left: 0;
  margin-right: 0;
  float: left; }

@media screen and (min-width: 40em) {
  .medium-1 {
    width: 8.33333%; }
  .medium-push-1 {
    position: relative;
    left: 8.33333%; }
  .medium-pull-1 {
    position: relative;
    left: -8.33333%; }
  .medium-offset-0 {
    margin-left: 0%; }
  .medium-2 {
    width: 16.66667%; }
  .medium-push-2 {
    position: relative;
    left: 16.66667%; }
  .medium-pull-2 {
    position: relative;
    left: -16.66667%; }
  .medium-offset-1 {
    margin-left: 8.33333%; }
  .medium-3 {
    width: 25%; }
  .medium-push-3 {
    position: relative;
    left: 25%; }
  .medium-pull-3 {
    position: relative;
    left: -25%; }
  .medium-offset-2 {
    margin-left: 16.66667%; }
  .medium-4 {
    width: 33.33333%; }
  .medium-push-4 {
    position: relative;
    left: 33.33333%; }
  .medium-pull-4 {
    position: relative;
    left: -33.33333%; }
  .medium-offset-3 {
    margin-left: 25%; }
  .medium-5 {
    width: 41.66667%; }
  .medium-push-5 {
    position: relative;
    left: 41.66667%; }
  .medium-pull-5 {
    position: relative;
    left: -41.66667%; }
  .medium-offset-4 {
    margin-left: 33.33333%; }
  .medium-6 {
    width: 50%; }
  .medium-push-6 {
    position: relative;
    left: 50%; }
  .medium-pull-6 {
    position: relative;
    left: -50%; }
  .medium-offset-5 {
    margin-left: 41.66667%; }
  .medium-7 {
    width: 58.33333%; }
  .medium-push-7 {
    position: relative;
    left: 58.33333%; }
  .medium-pull-7 {
    position: relative;
    left: -58.33333%; }
  .medium-offset-6 {
    margin-left: 50%; }
  .medium-8 {
    width: 66.66667%; }
  .medium-push-8 {
    position: relative;
    left: 66.66667%; }
  .medium-pull-8 {
    position: relative;
    left: -66.66667%; }
  .medium-offset-7 {
    margin-left: 58.33333%; }
  .medium-9 {
    width: 75%; }
  .medium-push-9 {
    position: relative;
    left: 75%; }
  .medium-pull-9 {
    position: relative;
    left: -75%; }
  .medium-offset-8 {
    margin-left: 66.66667%; }
  .medium-10 {
    width: 83.33333%; }
  .medium-push-10 {
    position: relative;
    left: 83.33333%; }
  .medium-pull-10 {
    position: relative;
    left: -83.33333%; }
  .medium-offset-9 {
    margin-left: 75%; }
  .medium-11 {
    width: 91.66667%; }
  .medium-push-11 {
    position: relative;
    left: 91.66667%; }
  .medium-pull-11 {
    position: relative;
    left: -91.66667%; }
  .medium-offset-10 {
    margin-left: 83.33333%; }
  .medium-12 {
    width: 100%; }
  .medium-offset-11 {
    margin-left: 91.66667%; }
  .medium-up-1 > .column, .medium-up-1 > .columns {
    width: 100%;
    float: left; }
    .medium-up-1 > .column:nth-of-type(1n), .medium-up-1 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-1 > .column:nth-of-type(1n+1), .medium-up-1 > .columns:nth-of-type(1n+1) {
      clear: both; }
    .medium-up-1 > .column:last-child, .medium-up-1 > .columns:last-child {
      float: left; }
  .medium-up-2 > .column, .medium-up-2 > .columns {
    width: 50%;
    float: left; }
    .medium-up-2 > .column:nth-of-type(1n), .medium-up-2 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-2 > .column:nth-of-type(2n+1), .medium-up-2 > .columns:nth-of-type(2n+1) {
      clear: both; }
    .medium-up-2 > .column:last-child, .medium-up-2 > .columns:last-child {
      float: left; }
  .medium-up-3 > .column, .medium-up-3 > .columns {
    width: 33.33333%;
    float: left; }
    .medium-up-3 > .column:nth-of-type(1n), .medium-up-3 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-3 > .column:nth-of-type(3n+1), .medium-up-3 > .columns:nth-of-type(3n+1) {
      clear: both; }
    .medium-up-3 > .column:last-child, .medium-up-3 > .columns:last-child {
      float: left; }
  .medium-up-4 > .column, .medium-up-4 > .columns {
    width: 25%;
    float: left; }
    .medium-up-4 > .column:nth-of-type(1n), .medium-up-4 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-4 > .column:nth-of-type(4n+1), .medium-up-4 > .columns:nth-of-type(4n+1) {
      clear: both; }
    .medium-up-4 > .column:last-child, .medium-up-4 > .columns:last-child {
      float: left; }
  .medium-up-5 > .column, .medium-up-5 > .columns {
    width: 20%;
    float: left; }
    .medium-up-5 > .column:nth-of-type(1n), .medium-up-5 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-5 > .column:nth-of-type(5n+1), .medium-up-5 > .columns:nth-of-type(5n+1) {
      clear: both; }
    .medium-up-5 > .column:last-child, .medium-up-5 > .columns:last-child {
      float: left; }
  .medium-up-6 > .column, .medium-up-6 > .columns {
    width: 16.66667%;
    float: left; }
    .medium-up-6 > .column:nth-of-type(1n), .medium-up-6 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-6 > .column:nth-of-type(6n+1), .medium-up-6 > .columns:nth-of-type(6n+1) {
      clear: both; }
    .medium-up-6 > .column:last-child, .medium-up-6 > .columns:last-child {
      float: left; }
  .medium-up-7 > .column, .medium-up-7 > .columns {
    width: 14.28571%;
    float: left; }
    .medium-up-7 > .column:nth-of-type(1n), .medium-up-7 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-7 > .column:nth-of-type(7n+1), .medium-up-7 > .columns:nth-of-type(7n+1) {
      clear: both; }
    .medium-up-7 > .column:last-child, .medium-up-7 > .columns:last-child {
      float: left; }
  .medium-up-8 > .column, .medium-up-8 > .columns {
    width: 12.5%;
    float: left; }
    .medium-up-8 > .column:nth-of-type(1n), .medium-up-8 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-8 > .column:nth-of-type(8n+1), .medium-up-8 > .columns:nth-of-type(8n+1) {
      clear: both; }
    .medium-up-8 > .column:last-child, .medium-up-8 > .columns:last-child {
      float: left; }
  .medium-collapse > .column, .medium-collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .medium-collapse .row,
  .expanded.row .medium-collapse.row {
    margin-left: 0;
    margin-right: 0; }
  .medium-uncollapse > .column, .medium-uncollapse > .columns {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem; }
  .medium-centered {
    float: none;
    margin-left: auto;
    margin-right: auto; }
  .medium-uncentered,
  .medium-push-0,
  .medium-pull-0 {
    position: static;
    margin-left: 0;
    margin-right: 0;
    float: left; } }

@media screen and (min-width: 64em) {
  .large-1 {
    width: 8.33333%; }
  .large-push-1 {
    position: relative;
    left: 8.33333%; }
  .large-pull-1 {
    position: relative;
    left: -8.33333%; }
  .large-offset-0 {
    margin-left: 0%; }
  .large-2 {
    width: 16.66667%; }
  .large-push-2 {
    position: relative;
    left: 16.66667%; }
  .large-pull-2 {
    position: relative;
    left: -16.66667%; }
  .large-offset-1 {
    margin-left: 8.33333%; }
  .large-3 {
    width: 25%; }
  .large-push-3 {
    position: relative;
    left: 25%; }
  .large-pull-3 {
    position: relative;
    left: -25%; }
  .large-offset-2 {
    margin-left: 16.66667%; }
  .large-4 {
    width: 33.33333%; }
  .large-push-4 {
    position: relative;
    left: 33.33333%; }
  .large-pull-4 {
    position: relative;
    left: -33.33333%; }
  .large-offset-3 {
    margin-left: 25%; }
  .large-5 {
    width: 41.66667%; }
  .large-push-5 {
    position: relative;
    left: 41.66667%; }
  .large-pull-5 {
    position: relative;
    left: -41.66667%; }
  .large-offset-4 {
    margin-left: 33.33333%; }
  .large-6 {
    width: 50%; }
  .large-push-6 {
    position: relative;
    left: 50%; }
  .large-pull-6 {
    position: relative;
    left: -50%; }
  .large-offset-5 {
    margin-left: 41.66667%; }
  .large-7 {
    width: 58.33333%; }
  .large-push-7 {
    position: relative;
    left: 58.33333%; }
  .large-pull-7 {
    position: relative;
    left: -58.33333%; }
  .large-offset-6 {
    margin-left: 50%; }
  .large-8 {
    width: 66.66667%; }
  .large-push-8 {
    position: relative;
    left: 66.66667%; }
  .large-pull-8 {
    position: relative;
    left: -66.66667%; }
  .large-offset-7 {
    margin-left: 58.33333%; }
  .large-9 {
    width: 75%; }
  .large-push-9 {
    position: relative;
    left: 75%; }
  .large-pull-9 {
    position: relative;
    left: -75%; }
  .large-offset-8 {
    margin-left: 66.66667%; }
  .large-10 {
    width: 83.33333%; }
  .large-push-10 {
    position: relative;
    left: 83.33333%; }
  .large-pull-10 {
    position: relative;
    left: -83.33333%; }
  .large-offset-9 {
    margin-left: 75%; }
  .large-11 {
    width: 91.66667%; }
  .large-push-11 {
    position: relative;
    left: 91.66667%; }
  .large-pull-11 {
    position: relative;
    left: -91.66667%; }
  .large-offset-10 {
    margin-left: 83.33333%; }
  .large-12 {
    width: 100%; }
  .large-offset-11 {
    margin-left: 91.66667%; }
  .large-up-1 > .column, .large-up-1 > .columns {
    width: 100%;
    float: left; }
    .large-up-1 > .column:nth-of-type(1n), .large-up-1 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-1 > .column:nth-of-type(1n+1), .large-up-1 > .columns:nth-of-type(1n+1) {
      clear: both; }
    .large-up-1 > .column:last-child, .large-up-1 > .columns:last-child {
      float: left; }
  .large-up-2 > .column, .large-up-2 > .columns {
    width: 50%;
    float: left; }
    .large-up-2 > .column:nth-of-type(1n), .large-up-2 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-2 > .column:nth-of-type(2n+1), .large-up-2 > .columns:nth-of-type(2n+1) {
      clear: both; }
    .large-up-2 > .column:last-child, .large-up-2 > .columns:last-child {
      float: left; }
  .large-up-3 > .column, .large-up-3 > .columns {
    width: 33.33333%;
    float: left; }
    .large-up-3 > .column:nth-of-type(1n), .large-up-3 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-3 > .column:nth-of-type(3n+1), .large-up-3 > .columns:nth-of-type(3n+1) {
      clear: both; }
    .large-up-3 > .column:last-child, .large-up-3 > .columns:last-child {
      float: left; }
  .large-up-4 > .column, .large-up-4 > .columns {
    width: 25%;
    float: left; }
    .large-up-4 > .column:nth-of-type(1n), .large-up-4 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-4 > .column:nth-of-type(4n+1), .large-up-4 > .columns:nth-of-type(4n+1) {
      clear: both; }
    .large-up-4 > .column:last-child, .large-up-4 > .columns:last-child {
      float: left; }
  .large-up-5 > .column, .large-up-5 > .columns {
    width: 20%;
    float: left; }
    .large-up-5 > .column:nth-of-type(1n), .large-up-5 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-5 > .column:nth-of-type(5n+1), .large-up-5 > .columns:nth-of-type(5n+1) {
      clear: both; }
    .large-up-5 > .column:last-child, .large-up-5 > .columns:last-child {
      float: left; }
  .large-up-6 > .column, .large-up-6 > .columns {
    width: 16.66667%;
    float: left; }
    .large-up-6 > .column:nth-of-type(1n), .large-up-6 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-6 > .column:nth-of-type(6n+1), .large-up-6 > .columns:nth-of-type(6n+1) {
      clear: both; }
    .large-up-6 > .column:last-child, .large-up-6 > .columns:last-child {
      float: left; }
  .large-up-7 > .column, .large-up-7 > .columns {
    width: 14.28571%;
    float: left; }
    .large-up-7 > .column:nth-of-type(1n), .large-up-7 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-7 > .column:nth-of-type(7n+1), .large-up-7 > .columns:nth-of-type(7n+1) {
      clear: both; }
    .large-up-7 > .column:last-child, .large-up-7 > .columns:last-child {
      float: left; }
  .large-up-8 > .column, .large-up-8 > .columns {
    width: 12.5%;
    float: left; }
    .large-up-8 > .column:nth-of-type(1n), .large-up-8 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-8 > .column:nth-of-type(8n+1), .large-up-8 > .columns:nth-of-type(8n+1) {
      clear: both; }
    .large-up-8 > .column:last-child, .large-up-8 > .columns:last-child {
      float: left; }
  .large-collapse > .column, .large-collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .large-collapse .row,
  .expanded.row .large-collapse.row {
    margin-left: 0;
    margin-right: 0; }
  .large-uncollapse > .column, .large-uncollapse > .columns {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem; }
  .large-centered {
    float: none;
    margin-left: auto;
    margin-right: auto; }
  .large-uncentered,
  .large-push-0,
  .large-pull-0 {
    position: static;
    margin-left: 0;
    margin-right: 0;
    float: left; } }

.slide-in-down.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.slide-in-down.mui-enter.mui-enter-active {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0); }

.slide-in-left.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.slide-in-left.mui-enter.mui-enter-active {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0); }

.slide-in-up.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.slide-in-up.mui-enter.mui-enter-active {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0); }

.slide-in-right.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.slide-in-right.mui-enter.mui-enter-active {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0); }

.slide-out-down.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.slide-out-down.mui-leave.mui-leave-active {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%); }

.slide-out-right.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.slide-out-right.mui-leave.mui-leave-active {
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%); }

.slide-out-up.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.slide-out-up.mui-leave.mui-leave-active {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%); }

.slide-out-left.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.slide-out-left.mui-leave.mui-leave-active {
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%); }

.fade-in.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  opacity: 0;
  transition-property: opacity; }

.fade-in.mui-enter.mui-enter-active {
  opacity: 1; }

.fade-out.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  opacity: 1;
  transition-property: opacity; }

.fade-out.mui-leave.mui-leave-active {
  opacity: 0; }

.hinge-in-from-top.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotateX(-90deg);
          transform: perspective(2000px) rotateX(-90deg);
  -webkit-transform-origin: top;
      -ms-transform-origin: top;
          transform-origin: top;
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 0; }

.hinge-in-from-top.mui-enter.mui-enter-active {
  -webkit-transform: perspective(2000px) rotate(0deg);
          transform: perspective(2000px) rotate(0deg);
  opacity: 1; }

.hinge-in-from-right.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotateY(-90deg);
          transform: perspective(2000px) rotateY(-90deg);
  -webkit-transform-origin: right;
      -ms-transform-origin: right;
          transform-origin: right;
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 0; }

.hinge-in-from-right.mui-enter.mui-enter-active {
  -webkit-transform: perspective(2000px) rotate(0deg);
          transform: perspective(2000px) rotate(0deg);
  opacity: 1; }

.hinge-in-from-bottom.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotateX(90deg);
          transform: perspective(2000px) rotateX(90deg);
  -webkit-transform-origin: bottom;
      -ms-transform-origin: bottom;
          transform-origin: bottom;
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 0; }

.hinge-in-from-bottom.mui-enter.mui-enter-active {
  -webkit-transform: perspective(2000px) rotate(0deg);
          transform: perspective(2000px) rotate(0deg);
  opacity: 1; }

.hinge-in-from-left.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotateY(90deg);
          transform: perspective(2000px) rotateY(90deg);
  -webkit-transform-origin: left;
      -ms-transform-origin: left;
          transform-origin: left;
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 0; }

.hinge-in-from-left.mui-enter.mui-enter-active {
  -webkit-transform: perspective(2000px) rotate(0deg);
          transform: perspective(2000px) rotate(0deg);
  opacity: 1; }

.hinge-in-from-middle-x.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotateX(-90deg);
          transform: perspective(2000px) rotateX(-90deg);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 0; }

.hinge-in-from-middle-x.mui-enter.mui-enter-active {
  -webkit-transform: perspective(2000px) rotate(0deg);
          transform: perspective(2000px) rotate(0deg);
  opacity: 1; }

.hinge-in-from-middle-y.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotateY(-90deg);
          transform: perspective(2000px) rotateY(-90deg);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 0; }

.hinge-in-from-middle-y.mui-enter.mui-enter-active {
  -webkit-transform: perspective(2000px) rotate(0deg);
          transform: perspective(2000px) rotate(0deg);
  opacity: 1; }

.hinge-out-from-top.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotate(0deg);
          transform: perspective(2000px) rotate(0deg);
  -webkit-transform-origin: top;
      -ms-transform-origin: top;
          transform-origin: top;
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 1; }

.hinge-out-from-top.mui-leave.mui-leave-active {
  -webkit-transform: perspective(2000px) rotateX(-90deg);
          transform: perspective(2000px) rotateX(-90deg);
  opacity: 0; }

.hinge-out-from-right.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotate(0deg);
          transform: perspective(2000px) rotate(0deg);
  -webkit-transform-origin: right;
      -ms-transform-origin: right;
          transform-origin: right;
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 1; }

.hinge-out-from-right.mui-leave.mui-leave-active {
  -webkit-transform: perspective(2000px) rotateY(-90deg);
          transform: perspective(2000px) rotateY(-90deg);
  opacity: 0; }

.hinge-out-from-bottom.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotate(0deg);
          transform: perspective(2000px) rotate(0deg);
  -webkit-transform-origin: bottom;
      -ms-transform-origin: bottom;
          transform-origin: bottom;
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 1; }

.hinge-out-from-bottom.mui-leave.mui-leave-active {
  -webkit-transform: perspective(2000px) rotateX(90deg);
          transform: perspective(2000px) rotateX(90deg);
  opacity: 0; }

.hinge-out-from-left.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotate(0deg);
          transform: perspective(2000px) rotate(0deg);
  -webkit-transform-origin: left;
      -ms-transform-origin: left;
          transform-origin: left;
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 1; }

.hinge-out-from-left.mui-leave.mui-leave-active {
  -webkit-transform: perspective(2000px) rotateY(90deg);
          transform: perspective(2000px) rotateY(90deg);
  opacity: 0; }

.hinge-out-from-middle-x.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotate(0deg);
          transform: perspective(2000px) rotate(0deg);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 1; }

.hinge-out-from-middle-x.mui-leave.mui-leave-active {
  -webkit-transform: perspective(2000px) rotateX(-90deg);
          transform: perspective(2000px) rotateX(-90deg);
  opacity: 0; }

.hinge-out-from-middle-y.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotate(0deg);
          transform: perspective(2000px) rotate(0deg);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 1; }

.hinge-out-from-middle-y.mui-leave.mui-leave-active {
  -webkit-transform: perspective(2000px) rotateY(-90deg);
          transform: perspective(2000px) rotateY(-90deg);
  opacity: 0; }

.scale-in-up.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 0; }

.scale-in-up.mui-enter.mui-enter-active {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  opacity: 1; }

.scale-in-down.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: scale(1.5);
      -ms-transform: scale(1.5);
          transform: scale(1.5);
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 0; }

.scale-in-down.mui-enter.mui-enter-active {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  opacity: 1; }

.scale-out-up.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 1; }

.scale-out-up.mui-leave.mui-leave-active {
  -webkit-transform: scale(1.5);
      -ms-transform: scale(1.5);
          transform: scale(1.5);
  opacity: 0; }

.scale-out-down.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 1; }

.scale-out-down.mui-leave.mui-leave-active {
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0; }

.spin-in.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: rotate(-0.75turn);
      -ms-transform: rotate(-0.75turn);
          transform: rotate(-0.75turn);
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 0; }

.spin-in.mui-enter.mui-enter-active {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  opacity: 1; }

.spin-out.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 1; }

.spin-out.mui-leave.mui-leave-active {
  -webkit-transform: rotate(0.75turn);
      -ms-transform: rotate(0.75turn);
          transform: rotate(0.75turn);
  opacity: 0; }

.spin-in-ccw.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: rotate(0.75turn);
      -ms-transform: rotate(0.75turn);
          transform: rotate(0.75turn);
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 0; }

.spin-in-ccw.mui-enter.mui-enter-active {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  opacity: 1; }

.spin-out-ccw.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  opacity: 1; }

.spin-out-ccw.mui-leave.mui-leave-active {
  -webkit-transform: rotate(-0.75turn);
      -ms-transform: rotate(-0.75turn);
          transform: rotate(-0.75turn);
  opacity: 0; }

.slow {
  transition-duration: 750ms !important; }

.fast {
  transition-duration: 250ms !important; }

.linear {
  transition-timing-function: linear !important; }

.ease {
  transition-timing-function: ease !important; }

.ease-in {
  transition-timing-function: ease-in !important; }

.ease-out {
  transition-timing-function: ease-out !important; }

.ease-in-out {
  transition-timing-function: ease-in-out !important; }

.bounce-in {
  transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }

.bounce-out {
  transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }

.bounce-in-out {
  transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }

.short-delay {
  transition-delay: 300ms !important; }

.long-delay {
  transition-delay: 700ms !important; }

.shake {
  -webkit-animation-name: shake-7;
          animation-name: shake-7; }

@-webkit-keyframes shake-7 {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
    -webkit-transform: translateX(7%);
            transform: translateX(7%); }
  5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
    -webkit-transform: translateX(-7%);
            transform: translateX(-7%); } }

@keyframes shake-7 {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
    -webkit-transform: translateX(7%);
            transform: translateX(7%); }
  5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
    -webkit-transform: translateX(-7%);
            transform: translateX(-7%); } }

.spin-cw {
  -webkit-animation-name: spin-cw-1turn;
          animation-name: spin-cw-1turn; }

@-webkit-keyframes spin-cw-1turn {
  0% {
    -webkit-transform: rotate(-1turn);
            transform: rotate(-1turn); }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }

@keyframes spin-cw-1turn {
  0% {
    -webkit-transform: rotate(-1turn);
            transform: rotate(-1turn); }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }

.spin-ccw {
  -webkit-animation-name: spin-cw-1turn;
          animation-name: spin-cw-1turn; }

@keyframes spin-cw-1turn {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  100% {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn); } }

.wiggle {
  -webkit-animation-name: wiggle-7deg;
          animation-name: wiggle-7deg; }

@-webkit-keyframes wiggle-7deg {
  40%, 50%, 60% {
    -webkit-transform: rotate(7deg);
            transform: rotate(7deg); }
  35%, 45%, 55%, 65% {
    -webkit-transform: rotate(-7deg);
            transform: rotate(-7deg); }
  0%, 30%, 70%, 100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }

@keyframes wiggle-7deg {
  40%, 50%, 60% {
    -webkit-transform: rotate(7deg);
            transform: rotate(7deg); }
  35%, 45%, 55%, 65% {
    -webkit-transform: rotate(-7deg);
            transform: rotate(-7deg); }
  0%, 30%, 70%, 100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }

.shake,
.spin-cw,
.spin-ccw,
.wiggle {
  -webkit-animation-duration: 500ms;
          animation-duration: 500ms; }

.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite; }

.slow {
  -webkit-animation-duration: 750ms !important;
          animation-duration: 750ms !important; }

.fast {
  -webkit-animation-duration: 250ms !important;
          animation-duration: 250ms !important; }

.linear {
  -webkit-animation-timing-function: linear !important;
          animation-timing-function: linear !important; }

.ease {
  -webkit-animation-timing-function: ease !important;
          animation-timing-function: ease !important; }

.ease-in {
  -webkit-animation-timing-function: ease-in !important;
          animation-timing-function: ease-in !important; }

.ease-out {
  -webkit-animation-timing-function: ease-out !important;
          animation-timing-function: ease-out !important; }

.ease-in-out {
  -webkit-animation-timing-function: ease-in-out !important;
          animation-timing-function: ease-in-out !important; }

.bounce-in {
  -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important;
          animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }

.bounce-out {
  -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important;
          animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }

.bounce-in-out {
  -webkit-animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important;
          animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }

.short-delay {
  -webkit-animation-delay: 300ms !important;
          animation-delay: 300ms !important; }

.long-delay {
  -webkit-animation-delay: 700ms !important;
          animation-delay: 700ms !important; }

            
          
!
999px
Loading ..................

Console