.row {
  margin-left: -45px;
  padding-bottom: 2em; }
  .row:after {
    content: "";
    display: table;
    clear: both; }
  @media (max-width: 1140px) {
    .row {
      margin-left: -35px; } }
  @media (max-width: 880px) {
    .row {
      margin-left: 0px; } }
  @media (max-width: 680px) {
    .row {
      padding-bottom: 2em; } }
  .row:first-child {
    padding-top: 2em; }
    @media (max-width: 680px) {
      .row:first-child {
        padding-top: 2em; } }

.subrow {
  margin-left: -45px; }
  .subrow:after {
    content: "";
    display: table;
    clear: both; }
  @media (max-width: 1140px) {
    .subrow {
      margin-left: -35px; } }
  @media (max-width: 880px) {
    .subrow {
      margin-left: 0px; } }

.column-1 {
  float: left;
  margin-left: 45px;
  width: 250px; }
  @media (max-width: 1140px) {
    .column-1 {
      margin-left: 35px; } }
  @media (max-width: 880px) {
    .column-1 {
      margin-left: 0px; } }
  @media (max-width: 1140px) {
    .column-1 {
      width: 190px; } }
  @media (max-width: 880px) {
    .column-1 {
      margin-bottom: 1.5em;
      width: 100%; }
      .column-1:after {
        content: "";
        display: table;
        clear: both; }
      .column-1:last-child {
        margin-bottom: 0; } }

.column-2 {
  float: left;
  margin-left: 45px;
  width: 545px; }
  @media (max-width: 1140px) {
    .column-2 {
      margin-left: 35px; } }
  @media (max-width: 880px) {
    .column-2 {
      margin-left: 0px; } }
  @media (max-width: 1140px) {
    .column-2 {
      width: 415px; } }
  @media (max-width: 880px) {
    .column-2 {
      margin-bottom: 1.5em;
      width: 100%; }
      .column-2:after {
        content: "";
        display: table;
        clear: both; }
      .column-2:last-child {
        margin-bottom: 0; } }

.column-3 {
  float: left;
  margin-left: 45px;
  width: 840px; }
  @media (max-width: 1140px) {
    .column-3 {
      margin-left: 35px; } }
  @media (max-width: 880px) {
    .column-3 {
      margin-left: 0px; } }
  @media (max-width: 1140px) {
    .column-3 {
      width: 640px; } }
  @media (max-width: 880px) {
    .column-3 {
      margin-bottom: 1.5em;
      width: 100%; }
      .column-3:after {
        content: "";
        display: table;
        clear: both; }
      .column-3:last-child {
        margin-bottom: 0; } }

.column-4 {
  float: left;
  margin-left: 45px;
  width: 1135px; }
  @media (max-width: 1140px) {
    .column-4 {
      margin-left: 35px; } }
  @media (max-width: 880px) {
    .column-4 {
      margin-left: 0px; } }
  @media (max-width: 1140px) {
    .column-4 {
      width: 865px; } }
  @media (max-width: 880px) {
    .column-4 {
      margin-bottom: 1.5em;
      width: 100%; }
      .column-4:after {
        content: "";
        display: table;
        clear: both; }
      .column-4:last-child {
        margin-bottom: 0; } }

.offset-1 {
  margin-left: 340px; }
  @media (max-width: 1140px) {
    .offset-1 {
      margin-left: 260px; } }
  @media (max-width: 880px) {
    .offset-1 {
      margin-left: 0; } }

.offset-2 {
  margin-left: 635px; }
  @media (max-width: 1140px) {
    .offset-2 {
      margin-left: 485px; } }
  @media (max-width: 880px) {
    .offset-2 {
      margin-left: 0; } }

.offset-3 {
  margin-left: 930px; }
  @media (max-width: 1140px) {
    .offset-3 {
      margin-left: 710px; } }
  @media (max-width: 880px) {
    .offset-3 {
      margin-left: 0; } }

.container {
  margin-left: auto;
  margin-right: auto;
  width: 1135px; }
  @media (max-width: 1140px) {
    .container {
      width: 865px; } }
  @media (max-width: 880px) {
    .container {
      width: auto;
      margin: 0 30px; } }

@media (max-width: 880px) {
  .flow-hide {
    display: none; } }

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
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, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.highlight .c {
  color: #999988;
  font-style: italic; }

/* Comment */
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2; }

/* Error */
.highlight .k {
  color: #C3B134; }

/* Keyword */
/* Operator */
.highlight .cm {
  color: #999988; }

/* Comment.Multiline */
.highlight .cp {
  color: #6b6b6b; }

/* Comment.Preproc */
.highlight .c1 {
  color: #999988; }

/* Comment.Single */
.highlight .cs {
  color: #6b6b6b; }

/* Comment.Special */
.highlight .gd {
  color: #000000;
  background-color: #ffdddd; }

/* Generic.Deleted */
.highlight .gd .x {
  color: #000000;
  background-color: #ffaaaa; }

/* Generic.Deleted.Specific */
.highlight .ge {
  font-style: italic; }

/* Generic.Emph */
.highlight .gr {
  color: #aa0000; }

/* Generic.Error */
.highlight .gh {
  color: #6b6b6b; }

/* Generic.Heading */
.highlight .gi {
  color: #000000;
  background-color: #ddffdd; }

/* Generic.Inserted */
.highlight .gi .x {
  color: #000000;
  background-color: #aaffaa; }

/* Generic.Inserted.Specific */
.highlight .go {
  color: #888888; }

/* Generic.Output */
.highlight .gp {
  color: #555555; }

/* Generic.Prompt */
/* Generic.Strong */
.highlight .gu {
  color: #aaaaaa; }

/* Generic.Subheading */
.highlight .gt {
  color: #aa0000; }

/* Generic.Traceback */
/* Keyword.Constant */
/* Keyword.Declaration */
/* Keyword.Pseudo */
/* Keyword.Reserved */
.highlight .kt {
  color: #54B5F0; }

/* Keyword.Type */
.highlight .m {
  color: #009999; }

/* Literal.Number */
.highlight .s {
  color: #DF8329; }

/* Literal.String */
.highlight .na {
  color: #008080; }

/* Name.Attribute */
.highlight .nb {
  color: #DF8329; }

/* Name.Builtin */
/* Name.Class */
.highlight .no {
  color: #008080; }

/* Name.Constant */
.highlight .ni {
  color: #800080; }

/* Name.Entity */
.highlight .ne {
  color: #4288D8; }

/* Name.Exception */
/* Name.Function */
.highlight .nn {
  color: #555555; }

/* Name.Namespace */
.highlight .nt {
  color: #000080; }

/* Name.Tag */
.highlight .nv {
  color: #008080; }

/* Name.Variable */
/* Operator.Word */
.highlight .w {
  color: #bbbbbb; }

/* Text.Whitespace */
.highlight .mf {
  color: #DF8329; }

/* Literal.Number.Float */
.highlight .mh {
  color: #DF8329; }

/* Literal.Number.Hex */
.highlight .mi {
  color: #DF8329; }

/* Literal.Number.Integer */
.highlight .mo {
  color: #DF8329; }

/* Literal.Number.Oct */
.highlight .sb {
  color: #DF8329; }

/* Literal.String.Backtick */
.highlight .sc {
  color: #DF8329; }

/* Literal.String.Char */
.highlight .sd {
  color: #DF8329; }

/* Literal.String.Doc */
.highlight .s2 {
  color: #DF8329; }

/* Literal.String.Double */
.highlight .se {
  color: #91602F; }

/* Literal.String.Escape */
.highlight .sh {
  color: #DF8329; }

/* Literal.String.Heredoc */
.highlight .si {
  color: #DF8329; }

/* Literal.String.Interpol */
.highlight .sx {
  color: #DF8329; }

/* Literal.String.Other */
.highlight .sr {
  color: #009926; }

/* Literal.String.Regex */
.highlight .s1 {
  color: #CB6B1A; }

/* Literal.String.Single */
.highlight .ss {
  color: #990073; }

/* Literal.String.Symbol */
.highlight .bp {
  color: #6b6b6b; }

/* Name.Builtin.Pseudo */
.highlight .vc {
  color: #008080; }

/* Name.Variable.Class */
.highlight .vg {
  color: #008080; }

/* Name.Variable.Global */
.highlight .vi {
  color: #008080; }

/* Name.Variable.Instance */
.highlight .il {
  color: #009999; }

/* Literal.Number.Integer.Long */
body {
  font-family: 'Roboto';
  font-size: 15px;
  line-height: 1.4em; }

body > header {
  background-color: #2a90d8;
  color: #fff; }
  body > header a {
    color: #fff; }
    body > header a:visited {
      color: #fff; }
  body > header .row {
    padding-bottom: 10px; }
    body > header .row:first-child {
      padding-top: 10px; }
    @media (max-width: 880px) {
      body > header .row .column-1 {
        margin-bottom: 0; } }
  body > header svg {
    fill: #fff;
    pointer-events: none; }

body > footer {
  border-top: 1px solid #d8d8d8; }

body > header h1 {
  margin: 4px 0;
  font-weight: normal;
  font-size: 32px;
  line-height: 1em;
  text-transform: lowercase; }

body > header p {
  margin: 12px 0 0 0; }

body > header h1 span {
  font-weight: 100; }

.search {
  position: relative; }
  @media (max-width: 880px) {
    .search {
      margin-top: 8px;
      margin-bottom: 0; } }
  .search svg {
    float: left;
    position: absolute;
    top: 9px;
    left: 10px;
    width: 24px; }
  .search input {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 12px 0 40px;
    background-color: #4fa6e4;
    border: 0;
    border-radius: 2px;
    outline: 0;
    color: #fff;
    font-size: 14px; }

.social {
  text-align: right; }
  .social a {
    display: inline-block;
    margin-left: 8px; }
  .social svg {
    margin-top: 5px;
    width: 28px;
    height: 28px; }

section h1 {
  font-family: 'Roboto Slab';
  font-size: 26px;
  font-weight: normal;
  line-height: 1.3em; }

section section h1 {
  font-family: 'Roboto';
  font-size: 20px;
  border-left: none;
  padding: 0;
  margin-bottom: 16px; }

.samples-index .row, .search-results .row {
  padding-bottom: 1em 0; }
.samples-index section .row, .search-results section .row {
  padding: 0; }
.samples-index .samples-section, .search-results .samples-section {
  margin-bottom: 1.5em; }
.samples-index .samples-section-header, .search-results .samples-section-header {
  margin-bottom: 0.2em; }
.samples-index .index-item, .search-results .index-item {
  margin-bottom: 1.2em; }
  .samples-index .index-item h1, .search-results .index-item h1 {
    font-family: 'Roboto';
    font-size: 14px;
    border-bottom: none;
    margin-bottom: 5px; }
  .samples-index .index-item p, .search-results .index-item p {
    margin: 4px 0;
    font-size: 14px;
    color: #777; }
.samples-index .min-spec span, .search-results .min-spec span {
  margin-bottom: 2px; }

.search-results {
  display: none; }

.min-spec {
  color: #c3c3c3; }

.tag {
  display: inline-block;
  margin: 0 2px 0 0;
  background-color: #c3c5c0;
  border-radius: 2px; }
  .tag.experimental {
    background-color: #d24848; }
  .tag.c\+\+17 {
    background-color: #73b322; }
  .tag.c\+\+14 {
    background-color: #97c751; }
  .tag.c\+\+11 {
    background-color: #b5d488; }
  .tag a {
    padding: 3px 4px;
    color: #fff;
    font-size: 13px;
    line-height: 1em; }

a {
  color: #2A90D8;
  text-decoration: none; }

code {
  font-family: 'Ubuntu Mono'; }

.codeblock {
  display: block;
  background-color: #2c2c2c;
  color: #fff;
  line-height: 20px;
  overflow-x: auto; }
  .codeblock .linenums {
    position: absolute;
    padding: 16px 8px 16px 12px;
    text-align: right;
    color: #6b6b6b;
    background-color: #2c2c2c;
    border-right: 1px solid #3f3f3f; }
    .codeblock .linenums span {
      display: block; }
  .codeblock .code {
    width: 100%;
    padding: 16px 16px 16px 48px; }
    .codeblock .code .codeline {
      display: block;
      width: 100%;
      white-space: pre;
      tab-size: 2;
      -moz-tab-size: 2; }
      .codeblock .code .codeline:before {
        content: "\200B"; }

a.lineref {
  border-bottom: 1px dotted #000;
  color: inherit; }

p {
  margin-bottom: 1em; }

em, i {
  font-style: italic; }

strong, b {
  font-weight: bold; }

sup {
  font-size: 10px;
  vertical-align: baseline;
  position: relative;
  top: -0.6em; }

ul, ol {
  padding-left: 1.5em;
  margin-bottom: 1em; }

ul {
  list-style-type: disc; }

ol {
  list-style-type: decimal; }

.sample h2 {
  margin-bottom: 6px;
  text-transform: uppercase;
  font-size: 12px;
  color: #666; }
.sample .min-spec {
  margin-bottom: 13px; }
.sample .specs {
  display: inline-block;
  list-style-type: none;
  padding: 0;
  margin: 0; }
  .sample .specs li {
    display: inline-block;
    margin-left: 2px; }
.sample .contributors {
  padding: 0;
  margin-bottom: 14px; }
  .sample .contributors li {
    display: inline-block; }
    .sample .contributors li a img {
      border-radius: 50%;
      width: 36px;
      height: 36px; }
.sample .adsbygoogle {
  margin-top: 32px; }
.sample .license {
  margin: 1em 0;
  color: #666; }

.about img {
  float: left;
  margin-right: 16px;
  width: 70px; }
.about p {
  margin-top: 16px;
  text-transform: uppercase;
  font-size: 12px;
  color: #666; }
  .about p a {
    display: block;
    font-size: 17px;
    text-transform: none; }

.featured .codeblock {
  max-height: 230px;
  overflow: hidden;
  position: relative;
  text-align: center; }
  .featured .codeblock .linenums {
    margin: 0;
    display: none; }
  .featured .codeblock .code {
    padding-left: 24px;
    text-align: left; }
  .featured .codeblock:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 230px;
    background-color: transparent;
    background-image: linear-gradient(rgba(44, 44, 44, 0) 60%, #2c2c2c 98%); }
.featured .lineref {
  border: none;
  cursor: default; }
.featured .code-overlay {
  width: 100%;
  text-align: center; }
  .featured .code-overlay a {
    position: relative;
    top: -3em;
    padding: 6px 10px;
    background-color: #424242;
    border-radius: 2px;
    color: #fff;
    box-shadow: 0px 0px 12px 2px #222; }