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 Stylesheets/Pens

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

Quick-add: + add another resource

Add External Scripts/Pens

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

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.

            
              <a id=s1 title="Section 1 Anchor" class=s></a> <a id=s2 title="Section 2 Anchor" class=s></a> <a id=s3 title="Section 3 Anchor" class=s></a> <a id=s4 title="Section 4 Anchor" class=s></a> <a id=s5 title="Section 5 Anchor" class=s></a> <a id=s6 title="Section 6 Anchor" class=s></a> <a id=s7 title="Section 7 Anchor" class=s></a> <a id=s8 title="Section 8 Anchor" class=s></a> <a id=s9 title="Section 9 Anchor" class=s></a> <a id=s10 title="Section 10 Anchor" class=s></a> <a id=s11 title="Section 11 Anchor" class=s></a> <a id=s12 title="Section 12 Anchor" class=s></a> <a id=s13 title="Section 13 Anchor" class=s></a> <a id=s14 title="Section 14 Anchor" class=s></a><div class=progress></div><div class=border></div><nav class=prevnext role=presentation><ul><li><a href=#s1 accesskey=1 title="Slide 1"></a></li><li><a href=#s2 accesskey=2 title="Slide 2"></a></li><li><a href=#s3 accesskey=3 title="Slide 3"></a></li><li><a href=#s4 accesskey=4 title="Slide 4"></a></li><li><a href=#s5 accesskey=5 title="Slide 5"></a></li><li><a href=#s6 accesskey=6 title="Slide 6"></a></li><li><a href=#s7 accesskey=7 title="Slide 7"></a></li><li><a href=#s8 accesskey=8 title="Slide 8"></a></li><li><a href=#s9 accesskey=9 title="Slide 9"></a></li><li><a href=#s10 accesskey=0 title="Slide 10"></a></li><li><a href=#s11 accesskey=q title="Slide 11"></a></li><li><a href=#s12 accesskey=w title="Slide 12"></a></li><li><a href=#s13 accesskey=e title="Slide 13"></a></li><li><a href=#s14 accesskey=r title="Slide 14"></a></li></ul></nav><nav class=thumbs aria-label="table of contents"><ul><li><a href=#s1 title="Slide 1 Thumbnail"></a></li><li><a href=#s2 title="Slide 2 Thumbnail"></a></li><li><a href=#s3 title="Slide 3 Thumbnail"></a></li><li><a href=#s4 title="Slide 4 Thumbnail"></a></li><li><a href=#s5 title="Slide 5 Thumbnail"></a></li><li><a href=#s6 title="Slide 6 Thumbnail"></a></li><li><a href=#s7 title="Slide 7 Thumbnail"></a></li><li><a href=#s8 title="Slide 8 Thumbnail"></a></li><li><a href=#s9 title="Slide 9 Thumbnail"></a></li><li><a href=#s10 title="Slide 10 Thumbnail"></a></li><li><a href=#s11 title="Slide 11 Thumbnail"></a></li><li><a href=#s12 title="Slide 12 Thumbnail"></a></li><li><a href=#s13 title="Slide 13 Thumbnail"></a></li><li><a href=#s14 title="Slide 14 Thumbnail"></a></li></ul></nav><main role=main><!--Intro--><section class="u-verticalCenter u-center"><article class=intro-article><h1><span class=u-textBold>The Power</span> of CSS</h1><h2>@una</h2></article><svg version=1.1 class=intro-bg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x=0px y=0px width=707px height=433px viewbox="0 0 707 433" style="enable-background:new 0 0 707 433;" xml:space=preserve><polygon class=yellow-bg points="247.2,58.1 492.2,322.1 614.4,86.7"></polygon><polygon class=yellow-bg points="342,370 247.2,185.8 0,315"></polygon><polygon class=pink-bg points="102,388 707,166 561,370"></polygon><polygon class=blue-bg points="18.5,0 633.2,0 358.9,433"></polygon></svg><div class=check-offs><input type=checkbox class="u-click-trigger intro-trigger"><div class="u-click-appear intro-gif"><img style="left: -68vw; width: 50vw;" src=https://una.im/slides--the-power-of-css/img/dog.gif></div><input type=checkbox class="u-click-trigger intro-trigger"><div class="u-click-appear intro-gif"><img src=https://una.im/slides--the-power-of-css/img/cssgif2.gif></div><input type=checkbox class="u-click-trigger intro-trigger"><div class="u-click-appear intro-gif"><img src=https://una.im/slides--the-power-of-css/img/cssgif1.gif></div></div></section><section><article><h2 class=u-textRight>Filters & Blend Modes</h2><div class=live-code-area><div class=img-area><img style="position: absolute; top: 0; left: 0; height: 100vh;" class=demo1 src=https://una.im/slides--the-power-of-css/img/brooke-lark-158017.jpg><div class=image-background style="background:white; z-index:-3; position: absolute; top: 0; left: 0; height: 100vh; width: 100vw;"></div></div><!--Filters, Blend Modes--><div><div class=style-box-area><style class=code-editor contenteditable=true>.demo1 {
  // filter: blur(20px);
  // filter: brightness(1.5);
  // filter: contrast(1.5);
  // filter: grayscale(.8);
  // filter: hue-rotate(50deg);
  // filter: invert(.8);
  // filter: opacity(.1);
  // filter: sepia(.6);
  // filter: saturate(4);
}</style></div><input type=checkbox style="float: none" class=u-click-trigger><div class=u-click-appear><div class=demo1-cover></div><div class=style-box-area><style class=code-editor contenteditable=true>.demo1-cover {
  background: yellow;
  // mix-blend-mode: multiply;
  // mix-blend-mode: screen;
  // mix-blend-mode: lighten;
  // mix-blend-mode: darken;
  // mix-blend-mode: hue;
  // mix-blend-mode: saturation;
  // mix-blend-mode: luminosity;
  // mix-blend-mode: color;
  // mix-blend-mode: soft-light;
  // mix-blend-mode: difference;
}</style></div></div></div></div><button class=caniuse-trigger>?</button><div class=caniuse-info></div></article></section><!--Turing Complete--><section><article><blockquote>"A <span class=u-textBold>Turing Complete</span> system means a system in which a program can be written that will find an answer to any computational problem"</blockquote><a href=https://codepen.io/mknadler/pen/pEWAmg target=_blank><img src=img/ElementaryCARule110_1000.gif></a></article></section><!--Accordion--><section class=less-padding><article><p data-height=300 data-theme-id=light data-slug-hash=EgLPmZ data-default-tab=result data-user=una data-embed-version=2 data-pen-title="CSS Only Accordion: youmightnotneedjs.com" class=codepen>See the Pen <a href="https://codepen.io/una/pen/EgLPmZ/">CSS Only Accordion: youmightnotneedjs.com</a> by Una Kravets (<a href=https://codepen.io/una>@una</a>) on <a href=https://codepen.io>CodePen</a>.</p><input type=checkbox class=u-click-trigger><div class=u-click-appear><div class=code-area><div class="code-block html"><h3>HTML</h3><pre><code>&lt;div class=&quot;togglebox&quot;&gt;
  &lt;input id=&quot;toggle1&quot; type=&quot;checkbox&quot; name=&quot;toggle&quot; /&gt;
  &lt;label for=&quot;toggle1&quot;&gt;Label 1&lt;/label&gt;
  &lt;section id=&quot;content1&quot;&gt;
    &lt;p&gt;Content for the first accordion&lt;/p&gt;
  &lt;/section&gt;
  &lt;input id=&quot;toggle2&quot; type=&quot;checkbox&quot; name=&quot;toggle&quot; /&gt;
  &lt;label for=&quot;toggle2&quot;&gt;Label 2&lt;/label&gt;
  &lt;section id=&quot;content2&quot;&gt;
    &lt;p&gt;Content for the second accordion&lt;/p&gt;
  &lt;/section&gt;
  &lt;input id=&quot;toggle3&quot; type=&quot;checkbox&quot; name=&quot;toggle&quot; /&gt;
  &lt;label for=&quot;toggle3&quot;&gt;Label 3&lt;/label&gt;
  &lt;section id=&quot;content3&quot;&gt;
    &lt;p&gt;Content for the third accordion&lt;/p&gt;
  &lt;/section&gt;
&lt;/div&gt;</code></pre></div><div class="code-block css"><h3>CSS</h3><pre><code>// Visually hide checkbox buttons
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
            
// Accordion section content gets hidden
section {
  height: 0;
  overflow: hidden;
  will-change: height; 
}

// Open content when clicking label
input[type="checkbox"]:checked ~ section {
  // Can also set height to auto, no transition
  height: 200px;
}</code></pre></div></div></div></article></section><!--Tabs--><section class=less-padding><article><p data-height=300 data-theme-id=light data-slug-hash=KgRzRE data-default-tab=result data-user=una data-embed-version=2 data-pen-title="CSS-Only Tabs: youmightnotneedjs.com" class=codepen>See the Pen <a href="https://codepen.io/una/pen/KgRzRE/">CSS-Only Tabs: youmightnotneedjs.com</a> by Una Kravets (<a href=https://codepen.io/una>@una</a>) on <a href=https://codepen.io>CodePen</a>.</p><input type=checkbox class=u-click-trigger><div class=u-click-appear><div class=code-area><div class="code-block html"><h3>HTML</h3><pre><code>&lt;div class=&quot;tabs&quot;&gt;
   &lt;div class=&quot;tab&quot;&gt;
       &lt;input type=&quot;radio&quot; name=&quot;tabgroup&quot; id=&quot;tab-1&quot; checked&gt;
       &lt;label for=&quot;tab-1&quot;&gt;Label One&lt;/label&gt;
       &lt;div class=&quot;content&quot;&gt;
          &lt;p&gt;Tab One Content&lt;/p&gt;
       &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class=&quot;tab&quot;&gt;
       &lt;input type=&quot;radio&quot; name=&quot;tabgroup&quot; id=&quot;tab-2&quot;&gt;
       &lt;label for=&quot;tab-2&quot;&gt;Label Two&lt;/label&gt;
       &lt;div class=&quot;content&quot;&gt;
           &lt;p&gt;Tab Two Content&lt;/p&gt;
       &lt;/div&gt;
   &lt;/div&gt;
    &lt;div class=&quot;tab&quot;&gt;
       &lt;input type=&quot;radio&quot; name=&quot;tabgroup&quot; id=&quot;tab-3&quot;&gt;
       &lt;label for=&quot;tab-3&quot;&gt;Label Three&lt;/label&gt;
       &lt;div class=&quot;content&quot;&gt;
           &lt;p&gt;Tab Three Content&lt;/p&gt;
       &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;</code></pre></div><div class="code-block css"><h3>CSS</h3><pre><code>// Tab container
.tabs {
  position: relative;
  height: 200px;
}

// Style tab itself to not have radio circle
.tab [type=radio] {
  position: absolute;
  clip: rect(0,0,0,0);

  &:focus + label {
    outline: 2px dotted #000;
  }
}

// Style content position to layer
.content {
  position: absolute;
  top: 2em; left: 0; right: 0; bottom:
}

// Label visual change
[type=radio]:checked ~ label {
  background: lightpink;
}

[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}</code></pre></div></div></div></article></section><!--Lightbox--><section class=less-padding><article><p data-height=300 data-theme-id=light data-slug-hash=wzjGAj data-default-tab=result data-user=una data-embed-version=2 data-pen-title="CSS Only Lightbox: youmightnotneedjs.com" class=codepen>See the Pen <a href="https://codepen.io/una/pen/wzjGAj/">CSS Only Lightbox: youmightnotneedjs.com</a> by Una Kravets (<a href=https://codepen.io/una>@una</a>) on <a href=https://codepen.io>CodePen</a>.</p><input type=checkbox class=u-click-trigger><div class=u-click-appear><div class=code-area><div class="code-block html"><h3>HTML</h3><pre><code>&lt;!-- thumbnail image wrapped in a link --&gt;
&lt;a href=&quot;#img1&quot;&gt;
  &lt;img src=&quot;img.jpg&quot; class=&quot;thumbnail&quot;&gt;
&lt;/a&gt;

&lt;!-- lightbox container hidden with CSS --&gt;
&lt;a href=&quot;#&quot; class=&quot;lightbox&quot; id=&quot;img1&quot;&gt;
  &lt;img src=&quot;img.jpg&quot;&gt;
&lt;/a&gt;</code></pre></div><div class="code-block css"><h3>CSS</h3><pre><code>//thumbnail style
.thumbnail {
  max-width: $thumbnail-size;
}

.lightbox {
  // Position/style of lightbox
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0; left: 0;
  background: darkgray;

  // Hide lightbox image
  display: none;
}

.lightbox img {
  /// Pad the lightbox image
  max-width: 90%;
  max-height: 80%;
  margin-top: 2%;
}

.lightbox:target {
  // Show lightbox on target
  display: block;
}</code></pre></div></div></div></article></section><!--Modal--><section class=less-padding><article><p data-height=300 data-theme-id=light data-slug-hash=ObRKvq data-default-tab=result data-user=una data-embed-version=2 data-pen-title="CSS-Only Modal: youmightnotneedjs.com" class=codepen>See the Pen <a href="https://codepen.io/una/pen/ObRKvq/">CSS-Only Modal: youmightnotneedjs.com</a> by Una Kravets (<a href=https://codepen.io/una>@una</a>) on <a href=https://codepen.io>CodePen</a>.</p><input type=checkbox class=u-click-trigger><div class=u-click-appear><div class=code-area><div class="code-block html"><h3>HTML</h3><pre><code>&lt;a class=&quot;modalTrigger&quot; id=&quot;modalTrigger&quot;
   href=&quot;#modalDialog1&quot;&gt;Open dialog&lt;/a&gt;

&lt;dialog class=&quot;modal&quot; id=&quot;modalDialog1&quot;
tabindex=&quot;-1&quot; role=&quot;dialog&quot;&gt;
  &lt;div&gt;
    &lt;a href=&quot;#modalTrigger&quot; aria-label=&quot;Close&quot;&gt;
      &amp;times;
      &lt;/a&gt;
      &lt;p&gt;Hello Beautiful!&lt;/p&gt;
  &lt;/div&gt;
&lt;/dialog&gt;</code></pre></div><div class="code-block css"><h3>CSS</h3><pre><code>// Modal hidden until it matches an anchor target
.modal {
  opacity: 0;
  visibility: hidden;
}

#modalDialog:target {
  opacity: 1;
  visibility: visible;
}</code></pre></div></div></div></article></section><!--Dynamic Counters like a calculator--><!--Slider -> Animation--><!--Animation -> Moving Emoji--><!--Tooltip--><!--content: attr(data-tip);--><section class=less-padding><article><p data-height=300 data-theme-id=light data-slug-hash=JWwXEp data-default-tab=result data-user=una data-embed-version=2 data-pen-title="CSS Tooltips: youmightnotneedjs.com" class=codepen>See the Pen <a href="https://codepen.io/una/pen/JWwXEp/">CSS Tooltips: youmightnotneedjs.com</a> by Una Kravets (<a href=https://codepen.io/una>@una</a>) on <a href=https://codepen.io>CodePen</a>.</p><input type=checkbox class=u-click-trigger><div class=u-click-appear><div class=code-area><div class="code-block html"><h3>HTML</h3><pre><code>&lt;span class=&quot;tooltip&quot;
            data-tip=&quot;I am a tooltip&quot;
            tabindex=&quot;0&quot;&gt;tooltip text&lt;/span&gt;</code></pre></div><div class="code-block css"><h3>CSS</h3><pre><code>.tooltip {
  position: relative;
  cursor: help;
  border-bottom: 2px dotted #c69;

  &::before,
  &::after {
    position: absolute;
    left: 50%;
    opacity: 0;
    z-index: 0;
    transition: opacity .5s;
    color: white;
  }

  &:hover::before, &:focus::before,
  &:hover::after, &:focus::after {
    opacity: 1;
    z-index: 10;
  }

  /* tooltip balloon */
  &::before {
    background: #c69;
    bottom: 185%;
    width: 14em;
    padding: 0.5em;
    margin-left: -8em;
    content: attr(data-tip);
  }

  /* triangle part overflow: hidden; tooltip */
  &::after {
    content: "";
    border-style: solid;
    border-width: 1em .75em 0 .75em;
    border-color: #c69 transparent transparent transparent;
    bottom: 100%;
    margin-left: -1em;
  }
}</code></pre></div></div></div></article></section><!--content: attr(data-tip); is a good transition to some of the cool typography Mandy has been working on--><!--Scroll Status Indicator--><section class=less-padding><article><p data-height=300 data-theme-id=light data-slug-hash=bwrEpZ data-default-tab=result data-user=una data-embed-version=2 data-pen-title="CSS Only Scroll Indicator: youmightnotneedjs.com" class=codepen>See the Pen <a href="https://codepen.io/una/pen/bwrEpZ/">CSS Only Scroll Indicator: youmightnotneedjs.com</a> by Una Kravets (<a href=https://codepen.io/una>@una</a>) on <a href=https://codepen.io>CodePen</a>.</p><input type=checkbox class=u-click-trigger><div class=u-click-appear><div class=code-area><div class="code-block html"><h3>HTML</h3><pre><code>&lt;body&gt;
content must be longer than 100vh
&lt;/main&gt;
&lt;/body&gt;
</code></pre></div><div class="code-block css"><h3>CSS</h3><pre><code>body {
  background: linear-gradient(to right top,
  $scroller-color 50%,
  $scroller-background 50%);
  background-size: 100%
              calc(100% - 100vh + #{$scroller-height});
  background-repeat: no-repeat;
}

body:before {
  content:'';
  position: fixed;
  top: $scroller-height;
  bottom: 0;
  width: 100%;
  z-index: -1;
  background: $body-background;
}</code></pre></div></div></div></article></section><!--Future features are really exciting like grid & variables, can use CSS @supports to check for feature support--><!--Show Grid Example & Emoji Grid, editable--><section><article><h2><code>@supports</code></h2><div style="display: flex"><style class=code-editor contenteditable=true style="flex: 1;">@supports (display: grid) {
  .grid-area {
    display: grid;
    grid-template:
      "😄 😄 😄 😄" 50px
      "↕️ 🖼 🖼 🖼" 400px
      "↕️ 🍅 🍅 🍅" auto
      "👟 👟 👟 👟" 80px /
      10% 30% 30% 30%
    }

  .header {
    grid-area: 😄;
  }
  .sidebar {
    grid-area: ↕️;
  }
  .gallery {
    grid-area: 🖼;
  }
  .tomato {
    grid-area: 🍅;
  }
  .footer {
    grid-area: 👟;
  }
}</style><div class=grid-area style="flex: 2"><div class=header>Hello World</div><div class=sidebar>🍹</div><div class=gallery><ul><li>🖼</li><li>🖼</li><li>🖼</li></ul></div><div class=tomato><p>Other Content Here</p></div><div class=footer>Footer</div></div></div></article></section><!--Navigation: Access Keys--><section><article><h2 class="blockquote title-on-this-page">This presentation is made <span class=u-textBold><br>entirely in HTML + CSS</span></h2><div class=flex-half-parent><div><input type=checkbox class=u-click-trigger><div class=u-click-appear><h2>Keyboard Navgation</h2><pre style="min-width: 460px"><code>&lt;a accesskey="slide1" title="Slide 1"&gt;&lt;/a&gt;</code></pre><pre>
  Mac:                 alt + ctrl + {key}
  PC Chrome/Safari/IE: alt + {key}
  PC FireFox:          alt + shift + {key}
  </pre><p class=right><small></small></p></div></div><div><input type=checkbox class=u-click-trigger><div class=u-click-appear style="margin-left: 3em; margin-top: 0"><h2>Live Code Editing</h2><style style="min-width: 460px" class="this-slide code-editor" contenteditable=true>.title-on-this-page {
      // contenteditable magic!
    }
      </style></div></div><div></div></div></article></section><!--Keep accessibility in mind but don't stop playing!--><!--Should I Use This? It's All About Intent--><section><article style=text-align:center><h2>Pure CSS Games</h2><div class=flex-half-parent><p data-height=600 data-theme-id=light data-slug-hash=NxZaNr data-default-tab=result data-user=una data-embed-version=2 data-pen-title="Pure CSS (Sass) Carnival Game" class=codepen>See the Pen <a href="https://codepen.io/una/pen/NxZaNr/">Pure CSS (Sass) Carnival Game</a> by Una Kravets (<a href=https://codepen.io/una>@una</a>) on <a href=https://codepen.io>CodePen</a>.</p><p data-height=600 data-theme-id=light data-slug-hash=aNZEbB data-default-tab=result data-user=una data-embed-version=2 data-pen-title="Pure CSS Tic Tac Toe!" class=codepen>See the Pen <a href="https://codepen.io/una/pen/aNZEbB/">Pure CSS Tic Tac Toe!</a> by Una Kravets (<a href=https://codepen.io/una>@una</a>) on <a href=https://codepen.io>CodePen</a>.</p></div></article></section><!--CSS is the visual language of the web--><section><article><input type=checkbox class=u-click-trigger><div class=u-click-appear><blockquote>The real power of CSS is that it creates a <b>common language for designers and developers.</b></blockquote></div><div class=cutout-wrapper><h1 data-heading="CSS is Awesome">CSS is Awesome</h1></div></article></section><section><article><h2>Thank You | <a href=https://una.im/power-of-css>una.im/power-of-css</a></h2><h3>People Who Inspired This/Me</h3><ul><li><a href=https://twitter.com/jake_albaugh>Jake Albaugh</a>: presentation framework & awesome CSS games</li><li><a href=https://twitter.com/Mandy_Kerr>Mandy Michael</a>: CSS text effect</li><li><a href=https://twitter.com/MikeRiethmuller>Mike Reithmuller</a>: Scroll Indicator Hack</li><li><a href=https://twitter.com/antimytheme>Miriam Nadler</a>: Sass Cellular Automata</li></ul><h3>Projects Mentioned</h3><ul><li><a href=http://diffee.me>Diffee</a>: Visual diffing with CSS blend modes</li><li><a href=https://una.im/CSSgram>CSSgram</a>: Instagram filters in CSS</li><li><a href="http://youmightnotneedjs.com/">YouMightNotNeedJS.com</a>: Interactive UI components in CSS</li></ul><h3>Resources</h3><ul><li><a href=https://codepen.io/jakealbaugh/pen/GpgRGm>Presentation Framework</a>: Original pen by Jake Albaugh</li><li><a href="https://codepen.io/collection/DamKJW/">CSS Text Effects</a>: More magic by Mandy Michaels</li><li><a href="https://codepen.io/collection/AKkZro/">More Pure-CSS Games</a>: Codepen collection</li></ul><h3>Tools</h3><ul><li><a href="http://caniuse.com/">CanIUse</a>: Browser support tables</li><li><a href="https://www.w3.org/WAI/WCAG20/quickref/">WCAG Quick Reference</a>: Web sccessibility checklist</li><li><a href="https://www.webpagetest.org/">Web Page Test</a>: Site performance analyzer</li></ul></article></section></main><footer><span class=twitter-info><a href=https://twitter.com/una>@una</a></span></footer>
<script async="" src=https://production-assets.codepen.io/assets/embed/ei.js></script></html>
            
          
!
            
              ::-moz-selection {
  background-color: yellow; }

::selection {
  background-color: yellow; }

* {
  box-sizing: border-box; }

a {
  color: #cc0000;
  font-weight: 600; }

body {
  margin: 0; }

main {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  -webkit-transition: left 500ms;
  transition: left 500ms;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.1em; }

h1, h2 {
  font-family: Montserrat, sans-serif; }

h2 {
  font-weight: 300;
  font-size: 2.5rem; }

h1 {
  text-transform: capitalize;
  font-size: 6rem; }

p, footer .twitter-info a, .caniuse-trigger {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.1em; }

blockquote,
.blockquote {
  font-weight: 300;
  font-size: 3rem;
  max-width: 70%; }

section {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  box-sizing: border-box;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out; }
  section:first-child {
    opacity: 1; }
  section article {
    width: calc(90% - 60px);
    max-width: 1200px;
    padding: 4rem 0 4rem 5%;
    color: #222; }
  section.less-padding article {
    padding: 2rem 0 2rem 5%; }
  section pre, section .code-editor {
    background: white;
    border: 1px solid rgba(34, 34, 34, 0.1);
    padding: 0.25rem 0.5rem; }
  section pre, section .code-editor {
    padding: 1rem;
    margin: 1rem auto; }

.code-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .code-area .code-block {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin-right: .75em; }
    .code-area .code-block pre, .code-area .code-block .code-editor {
      max-height: 22em;
      overflow: auto; }
    .code-area .code-block + .code-block {
      margin-left: .75em; }

.u-center {
  text-align: center; }

.u-textRight {
  text-align: right; }

.u-click-trigger {
  display: block;
  position: relative;
  z-index: 3;
  float: right; }
  .u-click-trigger:checked + .u-click-appear {
    opacity: 1; }

.u-click-appear {
  width: 100%;
  opacity: 0;
  -webkit-transition-duration: .5s;
          transition-duration: .5s;
  margin-top: 2em; }

.u-textBold {
  font-weight: 800; }

.u-verticalCenter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.s {
  position: absolute; }

nav {
  position: fixed;
  z-index: 5;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  nav.thumbs {
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 60px;
    display: block; }
    nav.thumbs ul {
      margin: 0;
      padding: 0; }
    nav.thumbs li {
      display: block;
      margin: 0 auto 0.5rem; }
      nav.thumbs li:first-child a {
        opacity: 1;
        width: 50px;
        height: 50px; }
      nav.thumbs li a {
        opacity: 0.5;
        width: 25px;
        height: 25px;
        margin: 0 auto;
        display: block;
        background-blend-mode: multiply;
        background-position: center;
        background-size: cover;
        position: relative;
        -webkit-transition: height 250ms ease-in-out, width 250ms ease-in-out, opacity 250ms ease-in-out;
        transition: height 250ms ease-in-out, width 250ms ease-in-out, opacity 250ms ease-in-out; }
        nav.thumbs li a:hover {
          opacity: 1; }
        nav.thumbs li a:active {
          -webkit-transform: translateY(1px);
                  transform: translateY(1px); }

.prevnext ul {
  list-style: none; }

@media (min-width: 600px) {
  main {
    height: 100%; } }

@media (min-width: 1200px) {
  main article {
    padding-left: 0;
    margin: 0 auto; } }

.progress {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 0%;
  margin: 0 0 20px 20px;
  border-bottom: 5px solid #222;
  border-bottom: 20px solid rgba #222;
  -webkit-transition: width 1000ms linear;
  transition: width 1000ms linear; }

#s1:target ~ main section {
  opacity: 0; }
  #s1:target ~ main section:nth-child(1) {
    opacity: 1; }

@media (max-width: 599px) {
  #s1:target ~ main section {
    top: 50%; }
    #s1:target ~ main section:nth-child(1) {
      top: 0; } }

@media (min-width: 600px) {
  #s1:target ~ main {
    left: 0%; }
  section:nth-child(1) {
    left: 0%; } }

.thumbs li:nth-child(1) a {
  background-color: #cc5700; }

#s1:target ~ .border {
  border: 20px solid #cc5700;
  height: calc(100vh); }

#s1:target ~ .progress {
  width: 0%; }

#s1:target ~ .thumbs li:first-child a {
  opacity: 0.5;
  width: 25px;
  height: 25px; }

#s1:target ~ .thumbs li:nth-child(1) a {
  opacity: 1;
  width: 50px;
  height: 50px; }

#s2:target ~ main section {
  opacity: 0; }
  #s2:target ~ main section:nth-child(2) {
    opacity: 1; }

@media (max-width: 599px) {
  #s2:target ~ main section {
    top: 50%; }
    #s2:target ~ main section:nth-child(2) {
      top: 0; } }

@media (min-width: 600px) {
  #s2:target ~ main {
    left: -100%; }
  section:nth-child(2) {
    left: 100%; } }

.thumbs li:nth-child(2) a {
  background-color: #ccaf00; }

#s2:target ~ .border {
  border: 20px solid #ccaf00;
  height: calc(100vh); }

#s2:target ~ .progress {
  width: 7.69231%; }

#s2:target ~ .thumbs li:first-child a {
  opacity: 0.5;
  width: 25px;
  height: 25px; }

#s2:target ~ .thumbs li:nth-child(2) a {
  opacity: 1;
  width: 50px;
  height: 50px; }

#s3:target ~ main section {
  opacity: 0; }
  #s3:target ~ main section:nth-child(3) {
    opacity: 1; }

@media (max-width: 599px) {
  #s3:target ~ main section {
    top: 50%; }
    #s3:target ~ main section:nth-child(3) {
      top: 0; } }

@media (min-width: 600px) {
  #s3:target ~ main {
    left: -200%; }
  section:nth-child(3) {
    left: 200%; } }

.thumbs li:nth-child(3) a {
  background-color: #92cc00; }

#s3:target ~ .border {
  border: 20px solid #92cc00;
  height: calc(100vh); }

#s3:target ~ .progress {
  width: 15.38462%; }

#s3:target ~ .thumbs li:first-child a {
  opacity: 0.5;
  width: 25px;
  height: 25px; }

#s3:target ~ .thumbs li:nth-child(3) a {
  opacity: 1;
  width: 50px;
  height: 50px; }

#s4:target ~ main section {
  opacity: 0; }
  #s4:target ~ main section:nth-child(4) {
    opacity: 1; }

@media (max-width: 599px) {
  #s4:target ~ main section {
    top: 50%; }
    #s4:target ~ main section:nth-child(4) {
      top: 0; } }

@media (min-width: 600px) {
  #s4:target ~ main {
    left: -300%; }
  section:nth-child(4) {
    left: 300%; } }

.thumbs li:nth-child(4) a {
  background-color: #3acc00; }

#s4:target ~ .border {
  border: 20px solid #3acc00;
  height: calc(100vh); }

#s4:target ~ .progress {
  width: 23.07692%; }

#s4:target ~ .thumbs li:first-child a {
  opacity: 0.5;
  width: 25px;
  height: 25px; }

#s4:target ~ .thumbs li:nth-child(4) a {
  opacity: 1;
  width: 50px;
  height: 50px; }

#s5:target ~ main section {
  opacity: 0; }
  #s5:target ~ main section:nth-child(5) {
    opacity: 1; }

@media (max-width: 599px) {
  #s5:target ~ main section {
    top: 50%; }
    #s5:target ~ main section:nth-child(5) {
      top: 0; } }

@media (min-width: 600px) {
  #s5:target ~ main {
    left: -400%; }
  section:nth-child(5) {
    left: 400%; } }

.thumbs li:nth-child(5) a {
  background-color: #00cc1d; }

#s5:target ~ .border {
  border: 20px solid #00cc1d;
  height: calc(100vh); }

#s5:target ~ .progress {
  width: 30.76923%; }

#s5:target ~ .thumbs li:first-child a {
  opacity: 0.5;
  width: 25px;
  height: 25px; }

#s5:target ~ .thumbs li:nth-child(5) a {
  opacity: 1;
  width: 50px;
  height: 50px; }

#s6:target ~ main section {
  opacity: 0; }
  #s6:target ~ main section:nth-child(6) {
    opacity: 1; }

@media (max-width: 599px) {
  #s6:target ~ main section {
    top: 50%; }
    #s6:target ~ main section:nth-child(6) {
      top: 0; } }

@media (min-width: 600px) {
  #s6:target ~ main {
    left: -500%; }
  section:nth-child(6) {
    left: 500%; } }

.thumbs li:nth-child(6) a {
  background-color: #00cc75; }

#s6:target ~ .border {
  border: 20px solid #00cc75;
  height: calc(100vh); }

#s6:target ~ .progress {
  width: 38.46154%; }

#s6:target ~ .thumbs li:first-child a {
  opacity: 0.5;
  width: 25px;
  height: 25px; }

#s6:target ~ .thumbs li:nth-child(6) a {
  opacity: 1;
  width: 50px;
  height: 50px; }

#s7:target ~ main section {
  opacity: 0; }
  #s7:target ~ main section:nth-child(7) {
    opacity: 1; }

@media (max-width: 599px) {
  #s7:target ~ main section {
    top: 50%; }
    #s7:target ~ main section:nth-child(7) {
      top: 0; } }

@media (min-width: 600px) {
  #s7:target ~ main {
    left: -600%; }
  section:nth-child(7) {
    left: 600%; } }

.thumbs li:nth-child(7) a {
  background-color: #00cccc; }

#s7:target ~ .border {
  border: 20px solid #00cccc;
  height: calc(100vh); }

#s7:target ~ .progress {
  width: 46.15385%; }

#s7:target ~ .thumbs li:first-child a {
  opacity: 0.5;
  width: 25px;
  height: 25px; }

#s7:target ~ .thumbs li:nth-child(7) a {
  opacity: 1;
  width: 50px;
  height: 50px; }

#s8:target ~ main section {
  opacity: 0; }
  #s8:target ~ main section:nth-child(8) {
    opacity: 1; }

@media (max-width: 599px) {
  #s8:target ~ main section {
    top: 50%; }
    #s8:target ~ main section:nth-child(8) {
      top: 0; } }

@media (min-width: 600px) {
  #s8:target ~ main {
    left: -700%; }
  section:nth-child(8) {
    left: 700%; } }

.thumbs li:nth-child(8) a {
  background-color: #0075cc; }

#s8:target ~ .border {
  border: 20px solid #0075cc;
  height: calc(100vh); }

#s8:target ~ .progress {
  width: 53.84615%; }

#s8:target ~ .thumbs li:first-child a {
  opacity: 0.5;
  width: 25px;
  height: 25px; }

#s8:target ~ .thumbs li:nth-child(8) a {
  opacity: 1;
  width: 50px;
  height: 50px; }

#s9:target ~ main section {
  opacity: 0; }
  #s9:target ~ main section:nth-child(9) {
    opacity: 1; }

@media (max-width: 599px) {
  #s9:target ~ main section {
    top: 50%; }
    #s9:target ~ main section:nth-child(9) {
      top: 0; } }

@media (min-width: 600px) {
  #s9:target ~ main {
    left: -800%; }
  section:nth-child(9) {
    left: 800%; } }

.thumbs li:nth-child(9) a {
  background-color: #001dcc; }

#s9:target ~ .border {
  border: 20px solid #001dcc;
  height: calc(100vh); }

#s9:target ~ .progress {
  width: 61.53846%; }

#s9:target ~ .thumbs li:first-child a {
  opacity: 0.5;
  width: 25px;
  height: 25px; }

#s9:target ~ .thumbs li:nth-child(9) a {
  opacity: 1;
  width: 50px;
  height: 50px; }

#s10:target ~ main section {
  opacity: 0; }
  #s10:target ~ main section:nth-child(10) {
    opacity: 1; }

@media (max-width: 599px) {
  #s10:target ~ main section {
    top: 50%; }
    #s10:target ~ main section:nth-child(10) {
      top: 0; } }

@media (min-width: 600px) {
  #s10:target ~ main {
    left: -900%; }
  section:nth-child(10) {
    left: 900%; } }

.thumbs li:nth-child(10) a {
  background-color: #3a00cc; }

#s10:target ~ .border {
  border: 20px solid #3a00cc;
  height: calc(100vh); }

#s10:target ~ .progress {
  width: 69.23077%; }

#s10:target ~ .thumbs li:first-child a {
  opacity: 0.5;
  width: 25px;
  height: 25px; }

#s10:target ~ .thumbs li:nth-child(10) a {
  opacity: 1;
  width: 50px;
  height: 50px; }

#s11:target ~ main section {
  opacity: 0; }
  #s11:target ~ main section:nth-child(11) {
    opacity: 1; }

@media (max-width: 599px) {
  #s11:target ~ main section {
    top: 50%; }
    #s11:target ~ main section:nth-child(11) {
      top: 0; } }

@media (min-width: 600px) {
  #s11:target ~ main {
    left: -1000%; }
  section:nth-child(11) {
    left: 1000%; } }

.thumbs li:nth-child(11) a {
  background-color: #9200cc; }

#s11:target ~ .border {
  border: 20px solid #9200cc;
  height: calc(100vh); }

#s11:target ~ .progress {
  width: 76.92308%; }

#s11:target ~ .thumbs li:first-child a {
  opacity: 0.5;
  width: 25px;
  height: 25px; }

#s11:target ~ .thumbs li:nth-child(11) a {
  opacity: 1;
  width: 50px;
  height: 50px; }

#s12:target ~ main section {
  opacity: 0; }
  #s12:target ~ main section:nth-child(12) {
    opacity: 1; }

@media (max-width: 599px) {
  #s12:target ~ main section {
    top: 50%; }
    #s12:target ~ main section:nth-child(12) {
      top: 0; } }

@media (min-width: 600px) {
  #s12:target ~ main {
    left: -1100%; }
  section:nth-child(12) {
    left: 1100%; } }

.thumbs li:nth-child(12) a {
  background-color: #cc00af; }

#s12:target ~ .border {
  border: 20px solid #cc00af;
  height: calc(100vh); }

#s12:target ~ .progress {
  width: 84.61538%; }

#s12:target ~ .thumbs li:first-child a {
  opacity: 0.5;
  width: 25px;
  height: 25px; }

#s12:target ~ .thumbs li:nth-child(12) a {
  opacity: 1;
  width: 50px;
  height: 50px; }

#s13:target ~ main section {
  opacity: 0; }
  #s13:target ~ main section:nth-child(13) {
    opacity: 1; }

@media (max-width: 599px) {
  #s13:target ~ main section {
    top: 50%; }
    #s13:target ~ main section:nth-child(13) {
      top: 0; } }

@media (min-width: 600px) {
  #s13:target ~ main {
    left: -1200%; }
  section:nth-child(13) {
    left: 1200%; } }

.thumbs li:nth-child(13) a {
  background-color: #cc0057; }

#s13:target ~ .border {
  border: 20px solid #cc0057;
  height: calc(100vh); }

#s13:target ~ .progress {
  width: 92.30769%; }

#s13:target ~ .thumbs li:first-child a {
  opacity: 0.5;
  width: 25px;
  height: 25px; }

#s13:target ~ .thumbs li:nth-child(13) a {
  opacity: 1;
  width: 50px;
  height: 50px; }

#s14:target ~ main section {
  opacity: 0; }
  #s14:target ~ main section:nth-child(14) {
    opacity: 1; }

@media (max-width: 599px) {
  #s14:target ~ main section {
    top: 50%; }
    #s14:target ~ main section:nth-child(14) {
      top: 0; } }

@media (min-width: 600px) {
  #s14:target ~ main {
    left: -1300%; }
  section:nth-child(14) {
    left: 1300%; } }

.thumbs li:nth-child(14) a {
  background-color: #cc0000; }

#s14:target ~ .border {
  border: 20px solid #cc0000;
  height: calc(100vh); }

#s14:target ~ .progress {
  width: 100%; }

#s14:target ~ .thumbs li:first-child a {
  opacity: 0.5;
  width: 25px;
  height: 25px; }

#s14:target ~ .thumbs li:nth-child(14) a {
  opacity: 1;
  width: 50px;
  height: 50px; }

#s1:target ~ footer .twitter-info a {
  color: white; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  color: #222;
  font-family: Merriweather, Georgia, serif;
  font-weight: 300; }

pre, .code-editor, code {
  font-family: Inconsolata, monospace; }

.intro-article {
  z-index: -1; }

.intro-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  -webkit-transition-duration: .5s;
          transition-duration: .5s;
  z-index: 3;
  mix-blend-mode: multiply;
  pointer-events: all; }
  .intro-bg polygon {
    mix-blend-mode: multiply;
    -webkit-animation: swaying 8s ease-in-out forwards infinite;
            animation: swaying 8s ease-in-out forwards infinite;
    -webkit-transition-duration: .5s;
            transition-duration: .5s;
    -webkit-transform-origin: 50%;
            transform-origin: 50%; }
    .intro-bg polygon:nth-child(1) {
      -webkit-animation-delay: calc(1s * .8);
              animation-delay: calc(1s * .8); }
    .intro-bg polygon:nth-child(2) {
      -webkit-animation-delay: calc(2s * .8);
              animation-delay: calc(2s * .8); }
    .intro-bg polygon:nth-child(3) {
      -webkit-animation-delay: calc(3s * .8);
              animation-delay: calc(3s * .8); }
    .intro-bg polygon:nth-child(4) {
      -webkit-animation-delay: calc(4s * .8);
              animation-delay: calc(4s * .8); }

footer {
  position: absolute;
  bottom: 25px;
  padding: 0 10px;
  left: 20px;
  font-weight: 800;
  font-size: 1.5rem;
  width: calc(100% - 40px); }
  footer .twitter-info a {
    text-decoration: none;
    color: #222;
    float: right; }

.caniuse-trigger {
  position: absolute;
  bottom: 15px;
  left: 25px;
  font-weight: 800;
  border-radius: 50%;
  padding: 0 .5em;
  border: 2px solid rgba(34, 34, 34, 0.1);
  background: yellow;
  z-index: 3; }

.blue-bg {
  fill: #5AD4FF; }

.yellow-bg {
  fill: #FFFF00; }

.pink-bg {
  fill: #FF00F3; }

.blue-bg:hover,
.yellow-bg:hover,
.pink-bg:hover {
  fill: lightpink;
  mix-blend-mode: difference; }

@-webkit-keyframes swaying {
  0% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); } }

@keyframes swaying {
  0% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); } }

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

.live-code-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .live-code-area > div {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; }

.cp_embed_wrapper {
  outline: 1px solid rgba(34, 34, 34, 0.1); }
  .cp_embed_wrapper + .cp_embed_wrapper {
    margin-left: 2em; }

.code-editor {
  display: block;
  white-space: pre-wrap;
  z-index: 2;
  position: relative; }

.demo1 {
  z-index: -2; }

.demo1-cover {
  width: 100%;
  height: 100vh;
  display: block;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0; }

.flex-half-parent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .flex-half-parent div {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; }

.grid-area {
  margin-left: 2em;
  max-width: 600px;
  text-align: center; }
  .grid-area .header {
    padding: .75em;
    background: yellow; }
  .grid-area .sidebar {
    background: lightpink;
    font-size: 4rem; }
  .grid-area .gallery {
    background: wheat; }
    .grid-area .gallery ul {
      list-style: none;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      font-size: 4rem;
      width: 100%;
      -ms-flex-pack: distribute;
          justify-content: space-around;
      padding: 0; }
  .grid-area .tomato {
    padding: 1em;
    background: tomato; }
  .grid-area .footer {
    padding: .75em;
    background: black;
    color: white; }

.cutout-wrapper {
  width: 100%;
  font-family: 'Source Code Pro', monospace;
  margin: 0 auto;
  height: 100%; }
  .cutout-wrapper h1 {
    text-transform: uppercase;
    -webkit-transform: translate(-50%, -50%) skew(10deg) rotate(-15deg);
            transform: translate(-50%, -50%) skew(10deg) rotate(-15deg);
    font-size: 10vw;
    top: 55%;
    left: 50%;
    margin: 0;
    position: absolute;
    text-rendering: optimizeLegibility;
    font-weight: 900;
    color: #cc00af;
    text-shadow: 1px 4px 6px white, 0 0 0 #66303a, 1px 4px 6px white;
    white-space: nowrap; }
    .cutout-wrapper h1:hover {
      -webkit-animation: rainbow 1s alternate linear infinite;
              animation: rainbow 1s alternate linear infinite; }
    .cutout-wrapper h1::before {
      content: attr(data-heading);
      position: absolute;
      left: 0;
      top: -4.8%;
      overflow: hidden;
      width: 100%;
      height: 50%;
      color: #fbf7f4;
      -webkit-transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2);
              transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2);
      z-index: 2;
      text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.4); }
    .cutout-wrapper h1::after {
      content: attr(data-heading);
      position: absolute;
      left: 0;
      top: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
      z-index: 1;
      color: #d3cfcc;
      -webkit-transform: translate(11px, 0) skew(13deg) scale(1, 0.8);
              transform: translate(11px, 0) skew(13deg) scale(1, 0.8);
      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
              clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
      text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.5); }

@-webkit-keyframes rainbow {
  from {
    -webkit-filter: hue-rotate(0);
            filter: hue-rotate(0); }
  to {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg); } }

@keyframes rainbow {
  from {
    -webkit-filter: hue-rotate(0);
            filter: hue-rotate(0); }
  to {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg); } }

.check-offs {
  position: absolute;
  top: 40px;
  right: 40px; }

.intro-gif {
  position: absolute;
  mix-blend-mode: unset; }
  .intro-gif img {
    width: 70vw;
    position: absolute;
    left: -75vw;
    mix-blend-mode: unset;
    z-index: 10; }

.intro-trigger {
  position: relative; }

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

Console