html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, main-notes, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, main-notes { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* ---------------------------------------------------------------------------- */
/* Mixins */

.clearfix,
.example .in,
.examples.tree,
.section .info,
.nav:after {
  content: '';
  display: table;
  clear: both;
  *zoom: 1; }

/* ---------------------------------------------------------------------------- */

pre {
  white-space: pre-wrap; }

body, input, textarea, td {
  line-height: 1.5;
  font-family: Open Sans, sans-serif;
  color: #405060;
  font-size: 1em; }

body {
  font-size: 10pt; }

html {
  height: 100%;

  background:
    linear-gradient(315deg, rgba(0, 170, 255, 0.1), rgba(220, 110, 10, 0.2) 80%),
    /* linear-gradient(top left, rgba(255, 255, 255, 0.1), rgba(220, 255, 255, 0.2)), */
    url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/shattered.png);
  background-attachment: fixed, fixed;
  /* background: #444 url(bg.jpg) 0 0 no-repeat fixed; */
  /* background-size: 250% auto; */
  color: #444;

  box-shadow: inset 0 1px rgba(250, 250, 250, 0.4); }

.card {
  background: white;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(0, 0, 0, 0.0), 0 2px 0 rgba(0, 0, 0, 0.1);
  border-radius: 2px;

  margin: 20px auto;

  padding-top: 40px;
  padding-bottom: 80px; }

@media (max-width: 600px) {
  .card {
    padding-top: 0;
    padding-bottom: 40px; } }

a {
  color: #39a;
  text-decoration: none; }

a:hover {
  color: #279; }

span.amp {
  opacity: 0.4;
  font-style: italic;
  font-family: palatino, serif; }

/* ---------------------------------------------------------------------------- */

.l-page {
  margin-left: auto;
  margin-right: auto;

  box-sizing: border-box;
  max-width: 900px; }

/* ---------------------------------------------------------------------------- */

.nav {
  border-bottom: solid 1px rgba(250, 250, 250, 0.3);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  padding-top: 20px;
  padding-bottom: 10px;
  margin-bottom: 30px; }

.nav ul {
  display: block; }

.nav .left {
  float: left; }

.nav .watch {
  height: 22px; }

.nav .watch > * {
  display: inline-block;
  vertical-align: middle; }

.nav .right {
  text-align: right;
  float: right; }

.nav li {
  display: inline; }

.nav a {
  display: inline-block;

  color: white;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

  font-weight: bold;
  padding-right: 30px; }

.nav a:hover {
  text-decoration: underline; }

@media (max-width: 600px) {
  .nav {
    padding-left: 10px;
    padding-right: 10px;

    box-shadow: none;
    border-bottom: 0;
    margin-bottom: -20px; }

  .nav .left,
  .nav .right {
    display: block;
    overflow: hidden;
    text-align: center;
    float: none; }

  .nav .aux {
    display: none; } }

@media (max-width: 600px) {
  .nav {
    margin: 0 -10px -5px -10px;
    padding: 10px 10px;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
    background: rgba(250, 250, 250, 0.8); } }

/* ---------------------------------------------------------------------------- */

.header {
  text-align: center;
  text-shadow: 1px 1px rgba(250, 250, 250, 0.6);

  border-top-left-radius: 4px;
  border-top-right-radius: 4px;

  box-shadow: inset 0 -12px 18px -18px rgba(0, 0, 0, 0.1);
  border-bottom: solid 1px #ddd;

  line-height: 1.3;

  overflow: hidden;

  /* background: */
  /*   linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(220, 255, 255, 0.9)), */
  /*   url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/shattered.png); */
  /* background-attachment: fixed, fixed; */

  padding: 50px 40px 94px 40px; }

.header h1 {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  font-size: 42pt;
  font-family: exo, sans-serif;
  font-weight: 200;

  text-shadow: 2px 2px 0 rgba(30, 30, 30, 0.15);

  box-sizing: border-box; }

.header p {
  margin: 0 auto;

  max-width: 350px;
  font-weight: 200;
  color: #666;
  font-size: 15pt; }

.header .amp {
  opacity: 1; }

@media (min-width: 870px) { /* Desktop */
  .header {
    padding-bottom: 94px;
    padding-top: 70px; }

  .header p {
    margin: 23px 0 0 0;
    line-height: 1.3;
    padding-left: 20px;
    font-size: 14pt;
    text-align: left;
    float: left;

    font-style: normal; }

  .header p:first-line {
    font-weight: 400; }

  .header h1 {
    font-size: 52pt;

    width: 50%;
    float: left;
    text-align: right;

    padding-bottom: 20px;
    padding-right: 30px; }
}

/* ---------------------------------------------------------------------------- */

.subcontent {
  padding: 0; }

.subcontent .code,
.subcontent .info {
  width: 100%;
  box-sizing: border-box;

  padding: 40px 80px; }

.subcontent .code {
  padding-top: 20px;
  padding-bottom: 20px;

  color: #555;
  text-shadow: 0 1px 0 rgba(250, 250, 250, 0.6);

  border-top: solid 1px #e7e7e7;
  border-bottom: solid 1px #e7e7e7;
  background: #eee; }

.subcontent .code pre {
  font-size: 1.1em;
  font-family: monaco, menlo, sans-serif;
  line-height: 1.6; }

.subcontent .code:first-child {
  border-top: 0;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px; }

.subcontent .code:last-child {
  /* +subtleinset */
  box-shadow: inset 0 5px 3px -3px rgba(0, 0, 0, 0.07);
  border-top: solid 1px #ccc;

  border-bottom: 0;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px; }

.subcontent h3 {
  font-family: exo, sans-serif;
  font-size: 1.7em;
  font-weight: bold; }

.subcontent code {
  background: #fafae0;
  font-size: 0.9em;
  padding: 1px 3px;
  box-shadow: 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 2px; }

/* Responsiveness */
@media (min-width: 600px) {
  .subcontent {
    line-height: 1.7; }
  .subcontent p {
    padding-right: 20%; } }

@media (max-width: 600px) {
  .subcontent .code,
  .subcontent .info {
    padding-left: 20px;
    padding-right: 20px; } }

/* ---------------------------------------------------------------------------- */

.main-notes { 
  overflow: hidden;
  padding: 30px 120px 0px 120px; }

.main-notes p {
  float: left;
  width: 50%;

  box-sizing: border-box;
  padding: 0 20px;

  margin: 20px 0; }

.main-notes p strong {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  font-size: 1.2em;
  font-family: exo, sans-serif;
  display: block;
  color: #444;
  font-weight: bold; }

@media (max-width: 600px) { /* Mobile */
  .main-notes {
    padding: 0px 20px; }

  .main-notes p {
    width: auto;
    float: none; } }

/* ---------------------------------------------------------------------------- */

.section {
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), inset 0 5px 3px -3px rgba(0, 0, 0, 0.1);
  background-attachment: fixed, fixed;
  overflow: hidden;
  padding: 20px 20px 80px 20px; }

.section.top {
  box-shadow: none;
  padding-top: 20px; }

@media (max-width: 600px) {
  .section {
    padding: 20px 10px; }

  .section.top {
    padding-top: 0; } }

.section.after-top {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
  background: rgba(200, 80, 200, 0.1); }

.section.top {
  padding-bottom: 0; }

.section .o-line {
  position: relative;

  background: rgba(100, 0, 50, 0.2);
  width: 10px;
  height: 100px;
  margin: 0 auto;
  margin-top: -20px; }

.section.top .o-line {
  left: 4px;

  width: 10px;
  background: rgba(30, 140, 200, 0.2);
  box-shadow: -10px 0 0 rgba(30, 140, 200, 0.1);
  height: 180px; }

@media (max-width: 600px) {
  .section.top .o-line,
  .section .o-line {
    opacity: 0;
    height: 20px;
    background: transparent;
    box-shadow: none; } }

/* ---------------------------------------------------------------------------- */

.section.usage {
  background:
    linear-gradient(315deg, rgba(0, 0, 50, 0.5), rgba(0, 0, 50, 0.5) 80%),
    url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noisy_grid.png);
  background-attachment: fixed, fixed;

  box-shadow: inset 0 5px 3px -3px rgba(0, 0, 0, 0.3);

  padding-top: 60px;
  padding-bottom: 0;

  border-top: solid 1px #aaa;
  border-bottom: solid 1px #aaa; }

.section.usage .heading {
  margin: 40px auto; }

.section.usage .heading:first-child {
  margin-top: 0; }

.section.usage .heading h2 {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  margin: 0;
  color: white; }

.section.usage .info.slim h3 {
  font-size: 1.4em; }

.section.usage .info.slim {
  padding-bottom: 30px;
  padding-top: 30px; }

.section.usage .info.grey {
  /* +subtleinset */
  box-shadow: inset 0 5px 3px -3px rgba(0, 0, 0, 0.07);
  background: #eee;
  border-bottom: solid 1px #ddd;
  border-top: solid 1px #ddd; }

/* --- */

.section.usage pre.figure {
  position: relative;

  background: #e0efef;
  border: solid 1px #c0d3d3;
  font-size: 0.8em;

  font-family: menlo, monospace;

  width: 320px;

  color: #305060;
  padding: 10px 20px; }

@media (max-width: 600px) {
  .section.usage pre.figure {
    overflow: auto;
    width: auto;
    margin-bottom: 20px; } }

@media (min-width: 600px) {
  .section.usage pre.figure {
    box-shadow: inset -8px 0 6px -6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
    border-top-right-radius: 4px;

    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;

    margin-right: -84px;
    margin-left: 30px;
    float: right; }

  .section.usage pre.figure:after {
    content: '';
    display: block;

    position: absolute;
    bottom: -4px;
    right: -1px;

    border: solid 2px transparent;
    border-left-color: #a0c3c3;
    border-top-color: #a0c3c3;

    width: 0;
    height: 0;
    z-index: 0; } }

/* --- */

.supported-browsers {
  margin: 20px 0 0 0; }

.supported-browsers li {
  border: solid 1px #ccc;
  border-radius: 20px;

  margin-right: 10px;
  padding: 2px 12px;

  display: inline-block;
  font-size: 0.9em;
  font-weight: bold; }

/* --- */

.transformations-list li {
  padding: 5px 0;
  display: inline-block;
  width: 22%; }

.transformations-list strong {
  font-weight: bold; }

.transformations-list small {
  font-size: .9em; }

@media (max-width: 600px) {
  .section.usage .heading {
    margin-bottom: 20px; }

  .section.usage {
    padding: 20px 20px; }

  .section.usage .card {
    margin-bottom: 0; }

  .transformations-list li {
    width: 45%; } }

.section.more {
    /* linear-gradient(top left, rgba(220, 110, 10, 0.2), rgba(0, 170, 255, 0.1) 80%), */
  box-shadow: none;
  margin-top: -1px;
  background:
    linear-gradient(315deg, rgba(255, 90, 200, 0.1), rgba(0, 170, 255, 0.07)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1)),
    url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/shattered.png);
  background-attachment: fixed, fixed;
}

.section.more .heading h2 {
  color: #70649a;
  text-shadow: 0 1px 0 rgba(250, 250, 250, 0.8); }

.section.more.darker {
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  margin-top: -1px;
  background:
    linear-gradient(90deg, rgba(200, 0, 0, 0.2), rgba(200, 0, 0, 0.2)),
    url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/shattered.png);
  background-attachment: fixed, fixed;
}

.section.more.darker .heading p {
  opacity: 1;
  color: #544;
  text-shadow: 0 1px 0 rgba(250, 250, 250, 0.2), 0 0 3px rgba(250, 250, 250, 0.2); }
.section.more.darker .heading h2 {
  color: white;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 3px rgba(0, 0, 0, 0.2); }

/* ---------------------------------------------------------------------------- */

.section.easing {
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.1);
  background:
    linear-gradient(315deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.6)),
    url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/shattered.png); }

.section.easing .heading h2 {
  color: #5ad; }

.section.easing .examples {
  background-color: rgba(0, 0, 0, 0.05); }


/* -- */

.supported-easing {
  text-align: center;
  padding: 20px 40px; }

.supported-easing h4 {
  margin: 40px 0 20px 0;
  font-family: exo, sans-serif;
  font-size: 1.3em;
  font-weight: 400; }

.supported-easing li:before {
  content: '\2219';
  display: inline-block;
  margin-right: 10px;
  color: #aaa;
}

.supported-easing ul {
  line-height: 1.8;
  font-size: 0; }

.supported-easing li {
  display: inline-block;

  font-size: 8pt;
  color: #555;

  padding: 0 0 0 10px;
  border-radius: 20px; }

/* ---------------------------------------------------------------------------- */

.download {
  position: relative;
  margin-top: -65px; }

.download a {
  margin: 0 auto;
  display: block;
  width: 120px;

  border: solid 5px white;
  border-radius: 70px;

  position: relative;
  z-index: 1;

  transition: all 100ms ease; }

.download a .in {
  display: table-cell;
  vertical-align: middle;
  line-height: 1.3;

  background: white;
  width: 120px;
  height: 120px;
  border-radius: 61px;

  text-shadow: 0 0 1px rgba(0, 0, 0, 0.4);

  line-height: 1.4;

  text-align: center; }

.download a strong,
.download a small {
  display: block;
  padding: 0 10px; }

.download a strong {
  font-family: exo, sans-serif;
  font-weight: bold;
  font-size: 1.6em; }

.download a small {
  text-transform: uppercase;
  font-size: 0.9em; }

/* Non-hover */
.download a .in {
  border: solid 2px #444;
  transition: all 150ms linear; }

.download a strong {
  color: #444; }

.download a small {
  color: #444; }

/* Hover */
.download a:hover .in {
  border-color: #222;
  background: #222; }

.download a:hover strong {
  color: #fff; }

.download a:hover small {
  color: #bbb; }


/* ---------------------------------------------------------------------------- */

.heading {
  margin: 50px auto;

  color: #456;
  text-shadow: 0 1px 0 rgba(250, 250, 250, 0.2);
  text-align: center; }

.heading h2 {
  line-height: 1.2;
  margin-bottom: 3px;
  font-size: 28pt;
  font-family: exo, sans-serif;
  font-weight: 200; }

@media (min-width: 600px) {
  .heading h2.bigger {
    font-size: 36pt; } }

.heading p {
  font-size: 1.1em;
  opacity: 0.8;
  line-height: 1.6;
  padding: 0 140px; }

.heading code {
  padding: 1px 3px;
  border-radius: 2px;
  font-size: .9em;
  background: rgba(250, 250, 250, 0.3); }

@media (max-width: 600px) {
  .heading {
    padding: 0 20px;
    text-align: left;
    margin: 20px auto; }

  .heading h2 {
    font-size: 22pt; }

  .heading p {
    font-size: 1em;
    padding: 0; } }

/* ---------------------------------------------------------------------------- */

.examples {
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  font-size: 0; }

.example {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  text-align: left;

  font-size: 10pt;
  box-sizing: border-box;
  padding: 0; }

/* -- */

.single .example {
  width: 100%; }

.trio .example {
  width: 33.33333%; }

@media (min-width: 600px) {
  .trio .example:last-child:nth-child(3n+1) {
    width: 100%; }
  .trio .example:last-child:nth-child(3n+2) {
    width: 66.6666%; }
}

@media (max-width: 600px) {
  .examples {
    padding-right: 10px; }

  .trio .example:last-child:nth-child(2n+1) {
    width: 100%; }

  .trio .example {
    width: 50%; } }

@media (max-width: 400px) {
  .trio .example,
  .duo .example,
  .example {
    padding-bottom: 10px;
    width: 100%; } }

/* -- */

.duo .example {
  width: 50%; }

@media (max-width: 600px) {
  .duo .example {
    width: 100%; } }

/* -- */

@media (max-width: 600px) {
  .examples.tree {
    background: transparent;
    box-shadow: none;
    padding: 0; }

  .tree .example {
    padding-bottom: 10px;
    width: 100%; }

  .tree .example:last-child {
    padding-bottom: 0; } }

@media (min-width: 600px) {
  .examples.tree {
    width: 900px;
    position: relative;

    background: transparent;
    box-shadow: none;
    padding: 0; }

  /* Stalk */
  .examples.tree:after {
    content: '';
    display: block;

    position: absolute;
    left: 50%;
    top: 50px;
    bottom: -80px;

    width: 6px;
    margin-left: -3px;

    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.07);
    background-color: rgba(90, 184, 190, 0.3);
    background: linear-gradient(270deg, rgba(90, 184, 190, 0.3) 40%, rgba(190, 90, 90, 0.3) 60%); }

  .tree .example {
    position: relative;
    margin-bottom: 20px;

    width: 50%;
    display: block; }

  .tree .example:nth-child(odd) {
    float: left;
    clear: both;
    padding-right: 40px; }

  .tree .example:nth-child(even) {
    clear: right;
    float: right;
    margin-top: 30px;
    padding-left: 40px; }

  /* Peg */
  .tree .example:after {
    content: '';
    display: block;

    width: 20px;
    height: 20px;
    border-radius: 10px;

    background: #555;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 3px #fafafa;

    position: absolute;
    z-index: 1; }

  .tree .example:nth-child(odd):after {
    top: 30px;
    right: -10px; }

  .tree .example:nth-child(even):after {
    bottom: 40px;
    left: -10px; }

  /* Notch */
  .tree .example .in:before,
  .tree .example .in:after {
    content: '';
    display: block;

    width: 0;
    height: 0;

    border: solid 12px transparent;

    position: absolute; }

  .tree .example:nth-child(odd) .in:before,
  .tree .example:nth-child(odd) .in:after {
    top: 30px;
    right: -24px; }

  .tree .example:nth-child(odd) .in:after {
    border-left-color: white; }

  .tree .example:nth-child(odd) .in:before {
    margin-top: 1px;
    border-left-color: rgba(0, 0, 0, 0.3); }

  .tree .example:nth-child(even) .in:before,
  .tree .example:nth-child(even) .in:after {
    bottom: 35px;
    left: -24px; }

  .tree .example:nth-child(even) .in:after {
    border-right-color: white; }

  .tree .example:nth-child(even) .in:before {
    margin-top: 1px;
    border-right-color: rgba(0, 0, 0, 0.9); }

  /* Hover */
  .tree .example:nth-child(even).playing .in:after {
    border-right-color: #EDFAFA; }
  .tree .example:nth-child(odd).playing .in:after {
    border-left-color: #EDFAFA; }
}

@media (min-width: 600px) and (max-width: 940px) {
  /* Max width isn't behaving right in a case like this */
  .examples.tree {
    width: auto; }

  /* Less spacing between examples */
  .tree .example {
    margin-bottom: 5px; }

  /* Less spacing to the stalk */
  .tree .example:nth-child(odd) {
    padding-right: 30px; }

  .tree .example:nth-child(even) {
    padding-left: 30px; }
}


/* -- */

.examples.single .example {
  padding-bottom: 1px; }

/* -- The card -- */

.example .in {
  position: relative;
  width: 100%;

  box-shadow: 1px 1px rgba(0, 0, 0, 0.1), -1px 1px rgba(0, 0, 0, 0.1), 0 0 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  background-color: white;

  transition: all 100ms linear; }

.example.playing .in {
  background-color: #edfafa; }

/* -- Heading -- */

.example h3 {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  color: #507080;
  font-weight: bold; }

/* -- Animation and the box -- */

.example .area {
  min-width: 32px;
  min-height: 32px;
  position: relative; }

@media (max-width: 600px) {
  .example .area {
    height: 100px; } }

.example.slim .area {
  height: 80px; }

.example .box,
.example .ghost {
  opacity: 0.8;
  position: absolute;
  left: 50%;
  top: 50%;

  background: #505060;
  border-radius: 1px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);

  margin: -16px 0 0 -16px;
  width: 32px;
  height: 32px;

  z-index: 2; }

.example .ghost {
  z-index: 1;
  background: #e5eeee;
  box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }

/* -- Code -- */

.example pre {
  text-shadow: 1px 1px 0 rgba(250, 250, 250, 0.9);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-style: italic;

  white-space: pre-wrap; }

.example pre b {
  border-radius: 2px;
  box-shadow: 1px 1px rgba(0, 0, 0, 0.1);
  padding: 1px 2px;
  background: #fafad0; }

/* -- Overrides: sol -- */

.example.start-from-left .box,
.example.start-from-left .ghost {
  left: 40px; }

/* -- Overrides -- */

.example.normal .area {
  height: 150px; }

.example.normal h3 {
  padding: 20px 20px 0 20px;
  margin-bottom: -20px;

  text-align: right; }

.example.normal .code {
  /* +subtleinset */
  box-shadow: inset 0 5px 3px -3px rgba(0, 0, 0, 0.07);
  background: #eee;

  padding: 20px;
  border-top: solid 1px #ccc;

  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px; }

.example.normal .code h4 {
  font-weight: bold; }

/* -- Slim for easing ande more features --*/

.example.slim .in {
  position: relative;
  box-sizing: border-box;
  padding: 20px 20px 20px 80px; }

.example.slim .area {
  position: absolute;
  left: 40px;
  top: 40px; }

.example.slim .box,
.example.slim .ghost {
  left: 0;
  top: 0; }

/* -- Easing examples -- */

.example.easing .area {
  top: 50px; }

.example.easing .box,
.example.easing .ghost {
  border-radius: 16px; }

.example.easing.playing h3,
.example.easing.playing p,
.example.easing.playing .code {
  opacity: 0; }

.example.easing.playing .ghost {
  width: 242px; }

/* --- */

/* ---------------------------------------------------------------------------- */

.section.extras {
  background: rgba(230, 250, 250, 0.5); }

@media (min-width: 600px) {
  .section.extras .heading h2 {
    font-size: 36pt; }
}

.section.extras .example h3 {
  font-family: exo, sans-serif;
  font-size: 1.4em;

  line-height: 1.3;
  margin-bottom: 5px;

  color: #6ab; }

.extras .example .code {
  border-top: dotted 1px #ccc;
  box-shadow: inset 0 5px 3px -3px rgba(0, 0, 0, 0.07);
  padding: 20px;
  margin: 20px -80px -20px -20px; }

.section.extras .example .area {
  left: auto;
  right: 10px; }

.section.extras .example .in {
  padding-right: 80px;
  padding-left: 20px; }

/* ---------------------------------------------------------------------------- */

.section.credits {
  margin-top: -1px;
  padding-top: 80px;
  background-color: #111;
  background:
    linear-gradient(315deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
    url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noisy_grid.png);
  background-attachment: fixed, fixed;

  font-size: 0.8em;
  color: #777; }

.section.credits .iconish {
  color: #555;
  font-size: 30pt; }

.section.credits a {
  color: #ccc; }

.section.credits .subcontent {
  overflow: hidden; }

.section.credits ul,
.section.credits p {
  width: 25%;
  float: left;
  padding-right: 20px;
  box-sizing: border-box;
  padding-bottom: 20px; }

@media (max-width: 600px) {
  .section.credits {
    line-height: 1.6;
    padding: 40px 20px 30px 20px; }

  .section.credits ul,
  .section.credits p {
    padding-bottom: 15px;
    width: auto;
    float: none; }
}

/* ---------------------------------------------------------------------------- */

.gap {
  margin-top: -1px;
  margin-bottom: -1px; }

.gap.hard {
  border-top: solid 5px #f0f0f0; }

.gap.dark {
  border-top: solid 3px #222; }

.gap.dark .thing {
  border-color: #222; }

.gap .thing {
  margin: -30px auto;

  display: block;

  box-sizing: border-box;

  width: 60px;
  height: 60px;
  border-radius: 30px;

  text-align: center;
  line-height: 50px;

  position: relative;
  z-index: 2;

  transition: all 100ms linear;

  font-size: 5pt;
}

.gap .thing:before {
  content: '\25b2'; }

.gap .thing {
  background: #f0f0f0;
  border: solid 5px #f0f0f0;
  color: #888;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); }

.gap .thing:hover {
  color: #fff;
  background: #5ad; }

@media (max-width: 600px) {
  .gap, .gap thing {
    display: none; } }

/* -- Blue -- */

.gap.blue .thing {
  color: white;
  background-color: #5ad; }

.gap.blue .thing:hover {
  background-color: #222; }