@charset "UTF-8";
@import url(vendor/normalize.css);
@import url(vendor/fixedsticky.css);
@import url(vendor/prism.css);
html {
  box-sizing: border-box; }

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

body {
  -webkit-backface-visibility: hidden;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  min-width: 320px; }

.menu-wrapper::after {
  clear: both;
  content: "";
  display: block; }

#example {
  background: #fff;
  display: inline-block;
  padding-top: 1em;
  position: relative;
  width: 100%; }
  @media screen and (min-width: 53.75em) {
    #example {
      padding-top: 3em; } }

.refills-header {
  background-color: #e7f1ec;
  clear: both;
  margin-bottom: 1em;
  padding: 5em 0 8em;
  text-align: center;
  width: 100%; }
  .refills-header::after {
    clear: both;
    content: "";
    display: block; }
  @media screen and (min-width: 40em) {
    .refills-header {
      margin-bottom: 4em;
      padding: 6em 0 8em; } }
  @media screen and (min-width: 53.75em) {
    .refills-header {
      border-bottom: 2px solid #d7e8df;
      margin-bottom: 4em;
      padding: 6em 0 8em; } }
  .refills-header .refills-logo {
    display: inline-block;
    margin: 0 auto 1.4em auto; }
    .refills-header .refills-logo svg {
      height: 80px;
      width: 80px;
      background: #fff;
      border-radius: 50%;
      fill: #93e9be;
      padding: 0.3em; }
      @media screen and (min-width: 40em) {
        .refills-header .refills-logo svg {
          height: 120px;
          width: 120px;
          padding: 0.5em; } }
  .refills-header h2 {
    font-family: "Georgia", "Times", "Times New Roman", serif;
    font-size: 1.4em;
    font-weight: 100;
    line-height: 1.4em;
    margin: 0 auto 2em auto;
    max-width: 80%;
    text-align: center; }
    @media screen and (min-width: 40em) {
      .refills-header h2 {
        font-size: 2em;
        margin-bottom: 1em;
        max-width: 80%; } }
    @media screen and (min-width: 53.75em) {
      .refills-header h2 {
        font-size: 3em;
        line-height: 1.3em;
        margin-bottom: 0.8em;
        max-width: 45%; } }
  .refills-header h3 {
    font-size: 1.3em;
    font-weight: 200;
    margin-bottom: 1em;
    text-align: center; }
  .refills-header a {
    color: #f55481;
    text-decoration: none; }
    .refills-header a:focus, .refills-header a:hover {
      color: #f884a5; }
  .refills-header p {
    background: #e1ede7;
    border: 1px solid #d0e4da;
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
    border-radius: 30px;
    color: #87a898;
    display: inline-block;
    font-family: "Oswald", sans-serif;
    font-size: 0.8em;
    font-weight: 400;
    margin-bottom: 2em;
    padding: 0.5em 1.4em; }
    @media screen and (min-width: 53.75em) {
      .refills-header p {
        font-size: 0.8em; } }

ul.refills-menu {
  font-weight: normal;
  margin: -3em auto 0.7em auto;
  padding: 0;
  text-align: center; }
  @media screen and (min-width: 40em) {
    ul.refills-menu {
      margin: -6em auto 0.4em auto; } }
  @media screen and (min-width: 53.75em) {
    ul.refills-menu {
      margin: -6.7em auto 0.8em auto; } }
  ul.refills-menu .menu-item {
    display: inline; }
    ul.refills-menu .menu-item a {
      background: #e1ede7;
      border: 1px solid #d0e4da;
      box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
      border-radius: 3px;
      color: #76af93;
      font-family: "Oswald", sans-serif;
      font-size: 0.8em;
      font-weight: 300;
      padding: 0.5em 1em 1.5em;
      text-decoration: none; }
      @media screen and (min-width: 40em) {
        ul.refills-menu .menu-item a {
          font-size: 1em;
          padding: 0.5em 1.8em 1.3em; } }
      @media screen and (min-width: 53.75em) {
        ul.refills-menu .menu-item a {
          font-size: 1.2em;
          padding: 0.7em 2.7em 2em; } }
      ul.refills-menu .menu-item a:hover {
        color: #96c2ac; }

.refills-patterns li.patterns a {
  background: #fff;
  box-shadow: none; }
  .refills-patterns li.patterns a:hover {
    color: #a7cbb9; }

.refills-components li.components a {
  background: #fff;
  box-shadow: none; }
  .refills-components li.components a:hover {
    color: #a7cbb9; }

.refills-type-systems li.type-systems a {
  background: #fff;
  box-shadow: none; }
  .refills-type-systems li.type-systems a:hover {
    color: #a7cbb9; }

.refills-unstyled li.unstyled a {
  background: #fff;
  box-shadow: none; }
  .refills-unstyled li.unstyled a:hover {
    color: #a7cbb9; }

.menu-item.unstyled {
  position: relative; }

.menu-item.unstyled::after {
  content: url("../images/new.svg");
  position: absolute;
  right: -42px;
  top: -63px;
  -webkit-transform: scale(0.4) rotate(13deg);
          transform: scale(0.4) rotate(13deg); }

.refills-notice {
  background-color: #fff6bf;
  border-radius: 3px;
  color: #66624c;
  padding: 2em 1em;
  text-align: center; }
  .refills-notice a {
    color: #4d4a39;
    text-decoration: underline; }
    .refills-notice a:focus, .refills-notice a:hover {
      color: #1a1913; }

section.refill {
  margin-bottom: 2em;
  padding-bottom: 1em;
  position: relative; }
  section.refill::after {
    clear: both;
    content: "";
    display: block; }
  section.refill > h3 {
    margin-bottom: 1.3em;
    margin-top: 1em;
    padding-top: 0.5em; }

.refills-wrapper {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  padding: 1em; }
  .refills-wrapper::after {
    clear: both;
    content: "";
    display: block; }
  .refills-wrapper h1.main-header {
    background-color: #82caca;
    display: inline-block;
    padding: 0.5em; }

.refill-centering {
  text-align: center; }
  .refill-centering > * {
    display: inline-block; }
    .refill-centering > * > * {
      text-align: left; }
  .refill-centering script {
    display: none; }

.line-behind-text {
  border-bottom: 1px solid #cacaca;
  margin-bottom: 4.5em;
  text-align: center; }

.line-behind-text h6 {
  background: #fff;
  color: #808080;
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-size: 1em;
  font-weight: 500;
  padding: 0 10px;
  position: relative;
  text-transform: uppercase;
  top: 34px; }

.refill h6 {
  margin-bottom: 1.5em; }

.js-hide-code,
.js-show-code {
  border-top: 1px dashed #bebcbc;
  color: #7e7a7a;
  font-size: 0.8em;
  text-transform: uppercase;
  width: 9em; }
  .js-hide-code:hover,
  .js-show-code:hover {
    color: #477dca; }

.js-show-code {
  display: inline-block;
  padding: 0.5em 1em; }

.js-hide-code {
  display: none;
  padding: 0.5em 1em; }

.refill-control {
  display: block;
  margin-bottom: 2em;
  text-align: center;
  width: 100%; }
  .refill-control a {
    line-height: 1.5em;
    text-decoration: none; }

.refill-snippet {
  margin-top: 4.5em;
  padding: 0 1em; }
  .refill-snippet table {
    border-collapse: collapse;
    margin: 0.75em 0;
    table-layout: fixed;
    width: 100%; }
  .refill-snippet th {
    font-weight: bold;
    padding: 0.75em 0;
    text-align: left; }
  .refill-snippet td {
    padding: 0.75em 0; }
  .refill-snippet tr,
  .refill-snippet td,
  .refill-snippet th {
    vertical-align: middle; }

pre[class*="language-"] {
  background-color: #f8f8f8;
  border-top: 2px solid silver;
  height: 300px;
  line-height: 1em; }

.snippets-table {
  display: none; }
  .snippets-table td {
    border-bottom: 0; }
  .snippets-table .snippet:nth-child(4n) {
    display: none; }

@media screen and (min-width: 40em) {
  .snippet {
    margin-bottom: 2em; } }
.snippet .copy-source-container {
  min-height: 3.4em; }
  @media screen and (min-width: 40em) {
    .snippet .copy-source-container {
      min-height: 2.5em; } }
  @media screen and (min-width: 53.75em) {
    .snippet .copy-source-container {
      min-height: 1em; } }
.snippet:nth-of-type(1) .copy-source {
  background: #e98065; }
.snippet:nth-of-type(2) .copy-source {
  background: #55a1d4; }
.snippet:nth-of-type(3) .copy-source:nth-of-type(1) {
  background: #e9c05b; }
.snippet:nth-of-type(3) .copy-source:nth-of-type(2) {
  background: #89b981; }
.snippet .copy-source {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 0.5em;
  font-weight: 800;
  padding: 0.4em 1em;
  text-transform: uppercase; }
  .snippet .copy-source:hover, .snippet .copy-source:active {
    background-color: #666666;
    color: #fff; }
.snippet a {
  text-decoration: none; }
.snippet code {
  font-size: 0.6em;
  line-height: 1.4em;
  max-height: 25em;
  overflow: scroll; }

.refill-smaller {
  margin: auto;
  width: 70%; }

footer.refills-footer {
  color: silver;
  padding-bottom: 2em;
  padding-top: 1em;
  text-align: center; }
  footer.refills-footer a {
    color: #f55481;
    text-decoration: none; }
  footer.refills-footer p {
    font-size: 0.8em;
    line-height: 1.5em;
    margin: 0 1em; }
    @media screen and (min-width: 53.75em) {
      footer.refills-footer p {
        font-size: 1em; } }
  footer.refills-footer .refills-footer-logo {
    margin-bottom: 2em; }
  footer.refills-footer img {
    display: block;
    height: 60px;
    margin: auto; }
    footer.refills-footer img::after {
      clear: both;
      content: "";
      display: block; }
  footer.refills-footer .footer-links {
    border-top: 2px solid;
    display: inline-block;
    font-family: "Oswald", sans-serif;
    font-size: 0.8em;
    font-weight: 300;
    margin-bottom: 4em;
    padding: 0.6em;
    text-transform: uppercase; }
    @media screen and (min-width: 53.75em) {
      footer.refills-footer .footer-links {
        font-size: 1em;
        padding: 1em; } }
    footer.refills-footer .footer-links li {
      display: inline;
      padding: 0.4em; }
      footer.refills-footer .footer-links li a {
        color: #a7a7a7;
        text-decoration: none; }
        footer.refills-footer .footer-links li a:hover {
          color: #f55481; }

nav.bourbon {
  background-color: #5b5e63;
  padding: 0 2em 0 1em;
  text-rendering: optimizeLegibility; }
  nav.bourbon::after {
    clear: both;
    content: "";
    display: block; }
  @media screen and (max-width: 32em) {
    nav.bourbon {
      padding: 0; } }
  nav.bourbon ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center; }
    @media screen and (min-width: 56.25em) {
      nav.bourbon ul {
        float: left;
        text-align: left; } }
  nav.bourbon li {
    display: inline-block; }
  nav.bourbon a {
    background-position: 1em center;
    background-repeat: no-repeat;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    padding: 1em 1em 1em 3em;
    text-decoration: none; }
    @media screen and (max-width: 32em) {
      nav.bourbon a {
        padding: 0.75em 0.5em;
        text-align: center; } }
    @media screen and (max-width: 56.25em) {
      nav.bourbon a {
        display: block; } }
    nav.bourbon a:focus, nav.bourbon a:hover {
      background-color: #434548;
      color: #fff; }
    nav.bourbon a.current {
      background-color: #4f5156; }
    nav.bourbon a.bourbon {
      background-image: url("../images/bourbon-nav/bourbon.png"); }
      @media only screen and (-webkit-min-device-pixel-ratio: 1.3020833333333333), only screen and (min-resolution: 125dpi) {
        nav.bourbon a.bourbon {
          background-image: url("../images/bourbon-nav/bourbon@2x.png");
          background-size: 20%; } }
      @media screen and (max-width: 32em) {
        nav.bourbon a.bourbon {
          background-image: none; } }
    nav.bourbon a.neat {
      background-image: url("../images/bourbon-nav/neat.png"); }
      @media only screen and (-webkit-min-device-pixel-ratio: 1.3020833333333333), only screen and (min-resolution: 125dpi) {
        nav.bourbon a.neat {
          background-image: url("../images/bourbon-nav/neat@2x.png");
          background-size: 20%; } }
      @media screen and (max-width: 32em) {
        nav.bourbon a.neat {
          background-image: none; } }
    nav.bourbon a.bitters {
      background-image: url("../images/bourbon-nav/bitters.png"); }
      @media only screen and (-webkit-min-device-pixel-ratio: 1.3020833333333333), only screen and (min-resolution: 125dpi) {
        nav.bourbon a.bitters {
          background-image: url("../images/bourbon-nav/bitters@2x.png");
          background-size: 20%; } }
      @media screen and (max-width: 32em) {
        nav.bourbon a.bitters {
          background-image: none; } }
    nav.bourbon a.refills {
      background-image: url("../images/bourbon-nav/refills.png"); }
      @media only screen and (-webkit-min-device-pixel-ratio: 1.3020833333333333), only screen and (min-resolution: 125dpi) {
        nav.bourbon a.refills {
          background-image: url("../images/bourbon-nav/refills@2x.png");
          background-size: 20%; } }
      @media screen and (max-width: 32em) {
        nav.bourbon a.refills {
          background-image: none; } }
  nav.bourbon h1 {
    color: rgba(255, 255, 255, 0.6);
    float: right;
    font-size: 1em;
    margin: 0; }
    @media screen and (max-width: 56.25em) {
      nav.bourbon h1 {
        display: none; } }
    nav.bourbon h1 a {
      padding: 1em 0;
      text-decoration: none; }
      nav.bourbon h1 a:hover {
        background-color: transparent; }

section.inner-content {
  margin-left: auto; }

.refills-menu-anchor {
  position: fixed;
  top: 4.5em;
  left: 1em;
  height: 50px;
  width: 50px;
  border: 1px solid #76af93;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  fill: #76af93;
  margin-bottom: 1.5em;
  padding-top: 0.9em;
  text-align: center;
  transition: all 0.2s ease-in-out;
  z-index: 9999; }
  .refills-menu-anchor.fixedsticky-on {
    margin-top: 0; }
  .refills-menu-anchor.fixedsticky-off {
    position: fixed; }
  .refills-menu-anchor img {
    height: 26px;
    width: 30px;
    max-width: 100%; }

.refills-menu-anchor-moved {
  top: 1em; }

.fixedsticky-dummy {
  height: 0 !important; }

.refills-menu-screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: teal;
  opacity: 0;
  transition: all 0.15s ease-out;
  visibility: hidden;
  z-index: 999998; }
  .refills-menu-screen.is-visible {
    opacity: 0;
    visibility: visible; }

.er_toc_title,
.er_toc_top {
  display: none; }

.er_toc {
  position: fixed;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 220px;
  background-color: black;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  -webkit-transform: translateX(-220px);
          transform: translateX(-220px);
  transition: all 0.2s linear;
  z-index: 999999; }
  .er_toc ul {
    margin: 0;
    padding: 1em; }
  .er_toc ul li a {
    color: #d9d9d9;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.5em;
    text-decoration: none; }
    .er_toc ul li a:focus, .er_toc ul li a:hover {
      color: #fff;
      text-decoration: none; }
  .er_toc ul ul {
    margin-bottom: 1em;
    margin-top: 0.5em;
    padding: 0; }
  .er_toc ul ul li a {
    font-weight: 200; }
  .er_toc.is-visible {
    -webkit-transform: translateX(0);
            transform: translateX(0); }

.refills-patterns .accordion-tabs {
  line-height: 1.5;
  margin-bottom: 1.5em;
  padding: 0; }
  .refills-patterns .accordion-tabs::after {
    clear: both;
    content: "";
    display: block; }
  @media screen and (max-width: 40em) {
    .refills-patterns .accordion-tabs {
      border: 1px solid #dcdcdc;
      border-radius: 3px; } }
  .refills-patterns .accordion-tabs .tab-header-and-content {
    list-style: none; }
    @media screen and (min-width: 40em) {
      .refills-patterns .accordion-tabs .tab-header-and-content {
        display: inline; } }
    .refills-patterns .accordion-tabs .tab-header-and-content:first-child .tab-link {
      border-top-left-radius: 3px;
      border-top-right-radius: 3px; }
      @media screen and (max-width: 40em) {
        .refills-patterns .accordion-tabs .tab-header-and-content:first-child .tab-link {
          border-top: 0; } }
    @media screen and (max-width: 40em) {
      .refills-patterns .accordion-tabs .tab-header-and-content:last-child .tab-link {
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px; } }
  .refills-patterns .accordion-tabs .tab-link {
    background-color: #fff;
    border-top: 1px solid #dcdcdc;
    color: #333;
    display: block;
    font-weight: bold;
    padding: 0.75em 0.809em;
    text-decoration: none; }
    @media screen and (min-width: 40em) {
      .refills-patterns .accordion-tabs .tab-link {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-top: 0;
        display: inline-block; } }
    .refills-patterns .accordion-tabs .tab-link:hover {
      color: #477dca; }
    .refills-patterns .accordion-tabs .tab-link:focus {
      outline: none; }
    .refills-patterns .accordion-tabs .tab-link.is-active {
      background-color: #f7f7f7; }
      @media screen and (min-width: 40em) {
        .refills-patterns .accordion-tabs .tab-link.is-active {
          background-color: #f7f7f7;
          border: 1px solid #dcdcdc;
          border-bottom-color: #f7f7f7;
          margin-bottom: -1px; } }
  .refills-patterns .accordion-tabs .tab-content {
    background: #f7f7f7;
    display: none;
    padding: 1.5em 1.618em;
    width: 100%; }
    @media screen and (min-width: 40em) {
      .refills-patterns .accordion-tabs .tab-content {
        border: 1px solid #dcdcdc;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
        float: left; } }
.refills-patterns .accordion-tabs-minimal {
  line-height: 1.5;
  padding: 0; }
  .refills-patterns .accordion-tabs-minimal::after {
    clear: both;
    content: "";
    display: block; }
  .refills-patterns .accordion-tabs-minimal .tab-header-and-content {
    list-style: none; }
    @media screen and (min-width: 40em) {
      .refills-patterns .accordion-tabs-minimal .tab-header-and-content {
        display: inline; } }
  .refills-patterns .accordion-tabs-minimal .tab-link {
    background-color: #fff;
    border-top: 1px solid #dcdcdc;
    color: #333;
    display: block;
    padding: 0.75em 1.618em;
    text-decoration: none; }
    @media screen and (min-width: 40em) {
      .refills-patterns .accordion-tabs-minimal .tab-link {
        border-top: 0;
        display: inline-block; } }
    .refills-patterns .accordion-tabs-minimal .tab-link:hover {
      color: #477dca; }
    .refills-patterns .accordion-tabs-minimal .tab-link:focus {
      outline: none; }
    .refills-patterns .accordion-tabs-minimal .tab-link.is-active {
      border-bottom: 0; }
      @media screen and (min-width: 40em) {
        .refills-patterns .accordion-tabs-minimal .tab-link.is-active {
          border: 1px solid #dcdcdc;
          border-bottom-color: #fff;
          margin-bottom: -1px; } }
  .refills-patterns .accordion-tabs-minimal .tab-content {
    display: none;
    padding: 1.5em 1.618em;
    width: 100%; }
    @media screen and (min-width: 40em) {
      .refills-patterns .accordion-tabs-minimal .tab-content {
        border-top: 1px solid #dcdcdc;
        float: left; } }
.refills-patterns .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
.refills-patterns .card {
  background-color: #f6f6f6;
  border: 1px solid gainsboro;
  border-radius: 3px;
  box-shadow: 0 2px 4px #e6e6e6;
  cursor: pointer;
  flex-basis: 15em;
  flex-grow: 1;
  margin: 0 1em 1.5em 1em;
  position: relative;
  transition: all 0.2s ease-in-out; }
  .refills-patterns .card .card-image {
    background-color: #F8F2B4;
    height: 150px;
    max-height: 150px;
    overflow: hidden; }
    .refills-patterns .card .card-image img {
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      opacity: 1;
      transition: all 0.2s ease-in-out;
      width: 100%; }
  .refills-patterns .card .card-header {
    background-color: #f6f6f6;
    border-bottom: 1px solid gainsboro;
    border-radius: 3px 3px 0 0;
    font-weight: bold;
    line-height: 1.5em;
    padding: 0.5em 0.75em;
    transition: all 0.2s ease-in-out; }
  .refills-patterns .card .card-copy {
    font-size: 0.9em;
    line-height: 1.5em;
    padding: 0.75em 0.75em; }
    .refills-patterns .card .card-copy p {
      margin: 0 0 0.75em; }
  .refills-patterns .card:focus, .refills-patterns .card:hover {
    cursor: pointer; }
    .refills-patterns .card:focus img, .refills-patterns .card:hover img {
      opacity: 0.7; }
  .refills-patterns .card:active {
    background-color: #f6f6f6; }
    .refills-patterns .card:active .card-header {
      background-color: #f6f6f6; }
.refills-patterns .centered-navigation {
  background-color: #E7F1EC;
  border-bottom: 1px solid #d4e6dd;
  min-height: 60px;
  width: 100%;
  z-index: 9999; }
  .refills-patterns .centered-navigation .mobile-logo {
    display: inline;
    float: left;
    max-height: 60px;
    padding-left: 1em; }
    .refills-patterns .centered-navigation .mobile-logo img {
      max-height: 60px;
      opacity: 0.6;
      padding: 0.8em 0; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .centered-navigation .mobile-logo {
        display: none; } }
  .refills-patterns .centered-navigation .centered-navigation-mobile-menu {
    color: rgba(51, 51, 51, 0.7);
    display: block;
    float: right;
    line-height: 60px;
    margin: 0;
    padding-right: 1em;
    text-decoration: none;
    text-transform: uppercase; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .centered-navigation .centered-navigation-mobile-menu {
        display: none; } }
    .refills-patterns .centered-navigation .centered-navigation-mobile-menu:focus, .refills-patterns .centered-navigation .centered-navigation-mobile-menu:hover {
      color: #333; }
  .refills-patterns .centered-navigation .centered-navigation-wrapper {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 999; }
    .refills-patterns .centered-navigation .centered-navigation-wrapper::after {
      clear: both;
      content: "";
      display: block; }
    .refills-patterns .centered-navigation .centered-navigation-wrapper::after {
      clear: both;
      content: "";
      display: block; }
  .refills-patterns .centered-navigation ul.centered-navigation-menu {
    clear: both;
    display: none;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    -webkit-transform-style: preserve-3d;
    width: 100%;
    z-index: 99999; }
    .refills-patterns .centered-navigation ul.centered-navigation-menu.show {
      display: block; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .centered-navigation ul.centered-navigation-menu {
        display: block;
        text-align: center; } }
  @media screen and (min-width: 53.75em) {
    .refills-patterns .centered-navigation .nav-link:first-child {
      margin-left: 2.2em; } }
  .refills-patterns .centered-navigation ul li.nav-link {
    background: #E7F1EC;
    display: block;
    line-height: 60px;
    overflow: hidden;
    padding-right: 1em;
    text-align: right;
    width: 100%;
    z-index: 9999; }
    .refills-patterns .centered-navigation ul li.nav-link a {
      color: rgba(51, 51, 51, 0.7);
      display: inline-block;
      outline: none;
      text-decoration: none; }
      .refills-patterns .centered-navigation ul li.nav-link a:focus, .refills-patterns .centered-navigation ul li.nav-link a:hover {
        color: #333; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .centered-navigation ul li.nav-link {
        background: transparent;
        display: inline;
        line-height: 60px; }
        .refills-patterns .centered-navigation ul li.nav-link a {
          padding-right: 1em; } }
  .refills-patterns .centered-navigation li.logo.nav-link {
    display: none;
    line-height: 0; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .centered-navigation li.logo.nav-link {
        display: inline; } }
  .refills-patterns .centered-navigation .logo img {
    margin-bottom: -0.66667em;
    max-height: 2em;
    opacity: 0.6; }
  .refills-patterns .centered-navigation li.more.nav-link {
    padding-right: 0; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .centered-navigation li.more.nav-link {
        padding-right: 1em; } }
    .refills-patterns .centered-navigation li.more.nav-link > ul > li:first-child a {
      padding-top: 1em; }
    .refills-patterns .centered-navigation li.more.nav-link a {
      margin-right: 1em; }
    .refills-patterns .centered-navigation li.more.nav-link > a {
      padding-right: 0.6em; }
    .refills-patterns .centered-navigation li.more.nav-link > a::after {
      position: absolute;
      top: auto;
      right: -0.4em;
      bottom: auto;
      left: auto;
      color: rgba(51, 51, 51, 0.7);
      content: "\25BE"; }
  .refills-patterns .centered-navigation li.more {
    overflow: visible;
    padding-right: 0; }
    .refills-patterns .centered-navigation li.more a {
      padding-right: 1em; }
    .refills-patterns .centered-navigation li.more > a {
      padding-right: 1.6em;
      position: relative; }
      @media screen and (min-width: 53.75em) {
        .refills-patterns .centered-navigation li.more > a {
          margin-right: 1em; } }
      .refills-patterns .centered-navigation li.more > a::after {
        content: "›";
        font-size: 1.2em;
        position: absolute;
        right: 0.5em; }
    .refills-patterns .centered-navigation li.more:focus > .submenu, .refills-patterns .centered-navigation li.more:hover > .submenu {
      display: block; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .centered-navigation li.more {
        padding-right: 1em;
        position: relative; } }
  .refills-patterns .centered-navigation ul.submenu {
    display: none;
    padding-left: 0; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .centered-navigation ul.submenu {
        left: -1em;
        position: absolute;
        top: 1.5em; } }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .centered-navigation ul.submenu .submenu.fly-out-right {
        left: 11.8em;
        top: 0; } }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .centered-navigation ul.submenu .submenu.fly-out-left {
        left: -11.8em;
        top: 0; } }
    .refills-patterns .centered-navigation ul.submenu li {
      display: block;
      padding-right: 0; }
      @media screen and (min-width: 53.75em) {
        .refills-patterns .centered-navigation ul.submenu li {
          line-height: 46.15385px; }
          .refills-patterns .centered-navigation ul.submenu li:first-child > a {
            border-top-left-radius: 3px;
            border-top-right-radius: 3px; }
          .refills-patterns .centered-navigation ul.submenu li:last-child > a {
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
            padding-bottom: 0.7em; } }
      .refills-patterns .centered-navigation ul.submenu li a {
        background-color: #ddebe4;
        display: inline-block;
        text-align: right;
        text-decoration: none;
        width: 100%; }
        @media screen and (min-width: 53.75em) {
          .refills-patterns .centered-navigation ul.submenu li a {
            background-color: #E7F1EC;
            padding-left: 1em;
            text-align: left;
            width: 12em; } }
.refills-patterns .comment {
  border-bottom: 1px solid rgba(51, 51, 51, 0.1);
  display: table;
  margin-bottom: 1.5em;
  padding-bottom: 1em;
  width: 100%; }
  .refills-patterns .comment .comment-image,
  .refills-patterns .comment .comment-content {
    display: table-cell;
    vertical-align: top; }
  .refills-patterns .comment .comment-image {
    padding-right: 1.4em; }
    .refills-patterns .comment .comment-image > img {
      background: #82a7db;
      border-radius: 3px;
      display: block;
      height: auto;
      max-width: none;
      padding: 0.7em;
      width: 4em; }
    .comment-reverse-order .refills-patterns .comment .comment-image {
      padding-left: 10px;
      padding-right: 0; }
  .refills-patterns .comment .comment-content {
    width: 100%; }
    .refills-patterns .comment .comment-content h1 {
      font-size: 1em;
      margin: 0 0 0.5em 0; }
    .refills-patterns .comment .comment-content p {
      line-height: 1.5em;
      margin-bottom: 0.5em; }
    .refills-patterns .comment .comment-content p.comment-detail {
      color: rgba(51, 51, 51, 0.5);
      font-size: 0.9em;
      font-style: italic; }
.refills-patterns .device-background {
  background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png"), linear-gradient(10deg, #0A120D, #162C4C), no-repeat #162C4C scroll;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 20em;
  width: 100%; }
  .refills-patterns .device-background .device-text {
    padding: 2em; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .device-background .device-text {
        float: left;
        max-width: 50%;
        padding: 4em; } }
    .refills-patterns .device-background .device-text h4 {
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      color: white;
      font-size: 1.5em;
      margin: 0 0 0.5em 0;
      padding-bottom: 0.5em; }
    .refills-patterns .device-background .device-text p {
      color: white;
      line-height: 1.5em;
      margin-bottom: 1.5em; }
  .refills-patterns .device-background .device {
    display: none;
    position: relative; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .device-background .device {
        background: #1a1a1a;
        border-radius: 2em;
        box-shadow: 1px 0 #343434, 4px 0 #060606, 7px 0 #010101, 10px 0 #010101, 13px 0 #010101;
        display: block;
        float: right;
        margin-bottom: -12em;
        margin-right: 5em;
        padding: 5em 0;
        -webkit-transform: perspective(800px) translateX(0) translateY(-100px) translateZ(50px) rotateX(0) rotateY(-20deg) rotateZ(0);
                transform: perspective(800px) translateX(0) translateY(-100px) translateZ(50px) rotateX(0) rotateY(-20deg) rotateZ(0);
        width: 14.8em;
        z-index: 99999; }
        .refills-patterns .device-background .device .screen {
          height: 25em;
          width: 14em;
          background-image: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/cosmin_capitanu_screen.jpg");
          background-size: cover;
          border-radius: 0.2em;
          box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.5);
          margin: auto; } }
.refills-patterns .flex-boxes {
  align-items: stretch;
  clear: both;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center; }
  .refills-patterns .flex-boxes::after {
    clear: both;
    content: "";
    display: block; }
  .refills-patterns .flex-boxes .flex-box {
    align-self: stretch;
    background: #f7f7f7;
    border-radius: 3px;
    box-shadow: inset 0 0 1px #DDD, 0 2px 4px #e6e6e6;
    display: block;
    flex: 2 2 15em;
    margin: 0.4em;
    padding: 2em 2em 3em 2em;
    text-decoration: none;
    transition: all 0.2s ease-in-out; }
    .refills-patterns .flex-boxes .flex-box:nth-child(1) {
      border-top: 6px solid tomato; }
      .refills-patterns .flex-boxes .flex-box:nth-child(1):focus, .refills-patterns .flex-boxes .flex-box:nth-child(1):hover {
        background-color: rgba(255, 99, 71, 0.1); }
    .refills-patterns .flex-boxes .flex-box:nth-child(2) {
      border-top: 6px solid #72BFBF; }
      .refills-patterns .flex-boxes .flex-box:nth-child(2):focus, .refills-patterns .flex-boxes .flex-box:nth-child(2):hover {
        background-color: rgba(114, 191, 191, 0.1); }
    .refills-patterns .flex-boxes .flex-box:nth-child(3) {
      border-top: 6px solid #92B1E3; }
      .refills-patterns .flex-boxes .flex-box:nth-child(3):focus, .refills-patterns .flex-boxes .flex-box:nth-child(3):hover {
        background-color: rgba(146, 177, 227, 0.1); }
    .refills-patterns .flex-boxes .flex-box:nth-child(4) {
      border-top: 6px solid #E3D743; }
      .refills-patterns .flex-boxes .flex-box:nth-child(4):focus, .refills-patterns .flex-boxes .flex-box:nth-child(4):hover {
        background-color: rgba(227, 215, 67, 0.1); }
    .refills-patterns .flex-boxes .flex-box:nth-child(5) {
      border-top: 6px solid #CCC; }
      .refills-patterns .flex-boxes .flex-box:nth-child(5):focus, .refills-patterns .flex-boxes .flex-box:nth-child(5):hover {
        background-color: rgba(204, 204, 204, 0.1); }
    .refills-patterns .flex-boxes .flex-box:nth-child(6) {
      border-top: 6px solid #F6C05C; }
      .refills-patterns .flex-boxes .flex-box:nth-child(6):focus, .refills-patterns .flex-boxes .flex-box:nth-child(6):hover {
        background-color: rgba(246, 192, 92, 0.1); }
    .refills-patterns .flex-boxes .flex-box img {
      display: block;
      height: 3em;
      margin: 0 auto 1em;
      opacity: 0.4; }
    .refills-patterns .flex-boxes .flex-box .flex-title {
      color: rgba(51, 51, 51, 0.7);
      font-size: 1.2em;
      margin-bottom: 0.5em; }
    .refills-patterns .flex-boxes .flex-box p {
      color: rgba(51, 51, 51, 0.6);
      line-height: 1.5em;
      margin: auto; }
  .refills-patterns .flex-boxes .flex-box-big {
    flex: 1 1 40em; }
.refills-patterns .footer {
  background: #40526b;
  padding: 3em 1.618em;
  width: 100%; }
  .refills-patterns .footer .footer-logo {
    margin-bottom: 2em;
    text-align: center; }
    .refills-patterns .footer .footer-logo img {
      height: 3em; }
  .refills-patterns .footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1.5em; }
  .refills-patterns .footer ul {
    flex-basis: 13em;
    flex-shrink: 0;
    margin-bottom: 3em;
    padding: 0; }
  .refills-patterns .footer li {
    line-height: 1.5em;
    list-style: none;
    text-align: center; }
  .refills-patterns .footer li a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none; }
    .refills-patterns .footer li a:focus, .refills-patterns .footer li a:hover {
      color: white; }
  .refills-patterns .footer li h3 {
    color: white;
    font-size: 1em;
    margin-bottom: 0.4em; }
  .refills-patterns .footer hr {
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0 auto 1.5em;
    width: 12em; }
  .refills-patterns .footer p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9em;
    line-height: 1.5em;
    margin: auto;
    max-width: 35em;
    text-align: center; }
.refills-patterns .footer-2 {
  background: #40526b;
  display: inline-block;
  padding: 1.5em;
  width: 100%; }
  .refills-patterns .footer-2 .footer-logo {
    margin-bottom: 1em;
    margin-right: 1em; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .footer-2 .footer-logo {
        float: left;
        margin-bottom: 0; } }
  .refills-patterns .footer-2 .footer-logo img {
    height: 1.6em; }
  .refills-patterns .footer-2 ul {
    line-height: 1.5em;
    margin: 0 0 1em 0;
    padding: 0; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .footer-2 ul {
        float: left;
        line-height: 1.8em;
        margin-bottom: 0;
        margin-left: 1em; } }
  .refills-patterns .footer-2 ul li {
    list-style: none;
    padding-right: 1em; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .footer-2 ul li {
        display: inline;
        text-align: left; } }
  .refills-patterns .footer-2 ul li a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none; }
    .refills-patterns .footer-2 ul li a:focus, .refills-patterns .footer-2 ul li a:hover {
      color: white; }
  @media screen and (min-width: 53.75em) {
    .refills-patterns .footer-2 .footer-secondary-links {
      float: right; } }
  .refills-patterns .footer-2 .footer-secondary-links li {
    font-size: 0.8em; }
  .refills-patterns .footer-2 .footer-secondary-links ul.footer-social {
    margin: 1em 0 0 0; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .footer-2 .footer-secondary-links ul.footer-social {
        float: right;
        margin-top: 0; } }
    .refills-patterns .footer-2 .footer-secondary-links ul.footer-social li {
      float: left;
      font-size: 1em;
      line-height: 0;
      margin: 0;
      padding-right: 0.7em; }
      .refills-patterns .footer-2 .footer-secondary-links ul.footer-social li:last-child {
        padding-right: 0; }
    .refills-patterns .footer-2 .footer-secondary-links ul.footer-social img {
      height: 1.6em;
      opacity: 0.7;
      padding: 1px; }
      .refills-patterns .footer-2 .footer-secondary-links ul.footer-social img:focus, .refills-patterns .footer-2 .footer-secondary-links ul.footer-social img:hover {
        opacity: 1; }
.refills-patterns .grid-items::after {
  clear: both;
  content: "";
  display: block; }
.refills-patterns .grid-items .grid-item {
  background: #6b83a6;
  border-bottom: 9px solid white;
  border-left: 4.5px solid white;
  border-right: 4.5px solid white;
  border-top: 0;
  cursor: pointer;
  float: left;
  height: 14em;
  outline: none;
  overflow: hidden;
  padding: 2em;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  width: 100%; }
  @media screen and (min-width: 53.75em) {
    .refills-patterns .grid-items .grid-item {
      width: 33.33333%; } }
  .refills-patterns .grid-items .grid-item:nth-child(1) {
    background-color: #6b83a6;
    box-shadow: inset 0 0 1px 2px #536a8b; }
    .refills-patterns .grid-items .grid-item:nth-child(1):focus, .refills-patterns .grid-items .grid-item:nth-child(1):hover {
      background-color: #536a8b;
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover; }
  .refills-patterns .grid-items .grid-item:nth-child(2) {
    background-color: #3581A5;
    box-shadow: inset 0 0 1px 2px #29637e; }
    .refills-patterns .grid-items .grid-item:nth-child(2):focus, .refills-patterns .grid-items .grid-item:nth-child(2):hover {
      background-color: #29637e;
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover; }
  .refills-patterns .grid-items .grid-item:nth-child(3) {
    background-color: #5FBEBE;
    box-shadow: inset 0 0 1px 2px #44a6a6; }
    .refills-patterns .grid-items .grid-item:nth-child(3):focus, .refills-patterns .grid-items .grid-item:nth-child(3):hover {
      background-color: #44a6a6;
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover; }
  .refills-patterns .grid-items .grid-item:nth-child(4) {
    background-color: #98C79A;
    box-shadow: inset 0 0 1px 2px #77b57a; }
    .refills-patterns .grid-items .grid-item:nth-child(4):focus, .refills-patterns .grid-items .grid-item:nth-child(4):hover {
      background-color: #77b57a;
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover; }
  .refills-patterns .grid-items .grid-item:nth-child(5) {
    background-color: #A7A891;
    box-shadow: inset 0 0 1px 2px #909175; }
    .refills-patterns .grid-items .grid-item:nth-child(5):focus, .refills-patterns .grid-items .grid-item:nth-child(5):hover {
      background-color: #909175;
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover; }
  .refills-patterns .grid-items .grid-item:nth-child(6) {
    background-color: #BDCC97;
    box-shadow: inset 0 0 1px 2px #a7bb75; }
    .refills-patterns .grid-items .grid-item:nth-child(6):focus, .refills-patterns .grid-items .grid-item:nth-child(6):hover {
      background-color: #a7bb75;
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover; }
  .refills-patterns .grid-items .grid-item:nth-child(7) {
    background-color: #979EA0;
    box-shadow: inset 0 0 1px 2px #7c8588; }
    .refills-patterns .grid-items .grid-item:nth-child(7):focus, .refills-patterns .grid-items .grid-item:nth-child(7):hover {
      background-color: #7c8588;
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover; }
.refills-patterns .grid-items .grid-item img {
  display: block;
  height: 3em;
  margin: 0 auto 1em; }
.refills-patterns .grid-items .grid-item h1 {
  color: white;
  font-size: 1.3em;
  margin-bottom: 0.4em; }
.refills-patterns .grid-items .grid-item p {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5em;
  margin: auto; }
  @media screen and (min-width: 40em) {
    .refills-patterns .grid-items .grid-item p {
      max-width: 70%; } }
@media screen and (min-width: 53.75em) {
  .refills-patterns .grid-items .grid-item-big {
    width: 66.66667%; } }
@media screen and (min-width: 40em) {
  .refills-patterns .grid-items .grid-item-big p {
    max-width: 60%; } }
.refills-patterns .grid-items .grid-item-image {
  background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png");
  background-color: #6b83a6;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover; }
.refills-patterns .grid-items-lines {
  position: relative; }
  .refills-patterns .grid-items-lines::after {
    clear: both;
    content: "";
    display: block; }
  .refills-patterns .grid-items-lines .grid-item {
    background: white;
    border-bottom: 1px solid rgba(51, 51, 51, 0.2);
    border-right: 1px solid rgba(51, 51, 51, 0.2);
    cursor: pointer;
    float: left;
    height: 14em;
    outline: none;
    overflow: hidden;
    padding: 2em;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    width: 100%; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .grid-items-lines .grid-item {
        width: 33.33333%; } }
    .refills-patterns .grid-items-lines .grid-item:focus, .refills-patterns .grid-items-lines .grid-item:hover {
      background: rgba(51, 51, 51, 0.05); }
  .refills-patterns .grid-items-lines .grid-item img {
    display: block;
    height: 2.5em;
    margin-bottom: 1.2em;
    opacity: 0.2; }
  .refills-patterns .grid-items-lines .grid-item h1 {
    color: #333;
    font-size: 1.3em;
    margin-bottom: 0.4em; }
  .refills-patterns .grid-items-lines .grid-item p {
    color: rgba(51, 51, 51, 0.6);
    line-height: 1.5em; }
    @media screen and (min-width: 40em) {
      .refills-patterns .grid-items-lines .grid-item p {
        max-width: 70%; } }
  @media screen and (min-width: 53.75em) {
    .refills-patterns .grid-items-lines .grid-item-big {
      width: 66.66667%; } }
  @media screen and (min-width: 40em) {
    .refills-patterns .grid-items-lines .grid-item-big p {
      max-width: 60%; } }
  .refills-patterns .grid-items-lines .bottom-cover {
    background: white;
    bottom: 0;
    height: 3px;
    position: absolute;
    width: 100%; }
  .refills-patterns .grid-items-lines .right-cover {
    background: white;
    height: 100%;
    position: absolute;
    right: 0;
    width: 4px; }
.refills-patterns .hero {
  align-items: center;
  background: url(../images/background-image.png);
  background-position: right;
  background-size: none;
  display: flex;
  justify-content: center;
  min-height: 25em;
  padding: 2em; }
  @media screen and (min-width: 50em) {
    .refills-patterns .hero {
      background-position: left;
      background-size: cover;
      justify-content: flex-end; } }
  .refills-patterns .hero .hero-content {
    max-width: 20em;
    text-align: center; }
    @media screen and (min-width: 50em) {
      .refills-patterns .hero .hero-content {
        text-align: left; } }
  .refills-patterns .hero .hero-logo {
    margin: auto; }
.refills-patterns .bullets {
  display: flex;
  flex-wrap: wrap;
  margin: 1em;
  margin-bottom: 1.5em;
  overflow: auto;
  padding: 0; }
  .refills-patterns .bullets .bullet {
    flex-basis: 20em;
    flex-grow: 1; }
  .refills-patterns .bullets .bullet-icon {
    background: #477DCA;
    border-radius: 50%;
    float: left;
    height: 3.5em;
    padding: 0.875em;
    width: 3.5em; }
  .refills-patterns .bullets .bullet-icon-1 {
    background: #477DCA; }
  .refills-patterns .bullets .bullet-icon-2 {
    background: #47caaa; }
  .refills-patterns .bullets .bullet-icon-3 {
    background: #a9ca47; }
  .refills-patterns .bullets .bullet-content {
    margin-bottom: 2em;
    margin-left: 4.9em; }
  .refills-patterns .bullets h2 {
    border-bottom: 1px solid rgba(51, 51, 51, 0.2);
    display: inline-block;
    font-size: 1.4em;
    margin: 0 0 0.58333em 0;
    padding-top: 0.5em; }
  .refills-patterns .bullets li {
    list-style: none; }
  .refills-patterns .bullets p {
    color: #333;
    line-height: 1.5em; }
  .refills-patterns .bullets img {
    max-width: 100%; }
.refills-patterns .logo-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1em; }
  .refills-patterns .logo-section li {
    align-self: center;
    list-style: none;
    padding: 2em;
    text-align: center; }
    .refills-patterns .logo-section li .square-logo {
      max-height: 5em; }
    .refills-patterns .logo-section li .wide-logo {
      max-width: 10em; }
    .refills-patterns .logo-section li .wider-logo {
      max-width: 15em; }
.refills-patterns #map_canvas {
  height: 400px;
  width: 100%; }
.refills-patterns #map_canvas img {
  max-width: none; }
.refills-patterns #map_canvas .content {
  padding: 0 0.5em 1em 0.5em; }
.refills-patterns #map_canvas .firstHeading {
  font-size: 1em;
  font-weight: bold;
  line-height: 1em;
  margin: 0; }
.refills-patterns #map_canvas #bodyContent p {
  font-size: 1em;
  margin: 0; }
.refills-patterns header.navigation {
  background-color: #333;
  border-bottom: 1px solid #1a1a1a;
  min-height: 60px;
  width: 100%;
  z-index: 999; }
  .refills-patterns header.navigation .navigation-wrapper {
    position: relative;
    z-index: 9999; }
    .refills-patterns header.navigation .navigation-wrapper::after {
      clear: both;
      content: "";
      display: block; }
  .refills-patterns header.navigation .logo {
    float: left;
    max-height: 60px;
    padding-left: 1em;
    padding-right: 2em; }
    .refills-patterns header.navigation .logo img {
      max-height: 60px;
      padding: 0.8em 0; }
  .refills-patterns header.navigation .navigation-menu-button {
    color: rgba(255, 255, 255, 0.7);
    display: block;
    float: right;
    line-height: 60px;
    margin: 0;
    padding-right: 1em;
    text-decoration: none;
    text-transform: uppercase; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns header.navigation .navigation-menu-button {
        display: none; } }
    .refills-patterns header.navigation .navigation-menu-button:focus, .refills-patterns header.navigation .navigation-menu-button:hover {
      color: white; }
  .refills-patterns header.navigation nav {
    float: none;
    min-height: 60px;
    z-index: 9999999; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns header.navigation nav {
        float: left; } }
  .refills-patterns header.navigation ul.navigation-menu {
    clear: both;
    display: none;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;
    z-index: 9999; }
    .refills-patterns header.navigation ul.navigation-menu.show {
      display: block; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns header.navigation ul.navigation-menu {
        display: inline;
        margin: 0;
        padding: 0; } }
  .refills-patterns header.navigation ul li.nav-link {
    background: #333;
    display: block;
    line-height: 60px;
    overflow: hidden;
    padding-right: 0.8em;
    text-align: right;
    width: 100%;
    z-index: 9999; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns header.navigation ul li.nav-link {
        background: transparent;
        display: inline;
        line-height: 60px;
        text-decoration: none;
        width: auto; } }
    .refills-patterns header.navigation ul li.nav-link a {
      color: rgba(255, 255, 255, 0.7);
      display: inline-block;
      text-decoration: none; }
      @media screen and (min-width: 53.75em) {
        .refills-patterns header.navigation ul li.nav-link a {
          padding-right: 1em; } }
      .refills-patterns header.navigation ul li.nav-link a:focus, .refills-patterns header.navigation ul li.nav-link a:hover {
        color: white; }
  .refills-patterns header.navigation .active-nav-item a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 3px; }
  .refills-patterns header.navigation li.more.nav-link {
    padding-right: 0; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns header.navigation li.more.nav-link {
        padding-right: 1em; } }
    .refills-patterns header.navigation li.more.nav-link > ul > li:first-child a {
      padding-top: 1em; }
    .refills-patterns header.navigation li.more.nav-link a {
      margin-right: 1em; }
    .refills-patterns header.navigation li.more.nav-link > a {
      padding-right: 0.6em; }
    .refills-patterns header.navigation li.more.nav-link > a::after {
      position: absolute;
      top: auto;
      right: -0.4em;
      bottom: auto;
      left: auto;
      color: rgba(255, 255, 255, 0.7);
      content: "\25BE"; }
  .refills-patterns header.navigation li.more {
    overflow: visible;
    padding-right: 0; }
    .refills-patterns header.navigation li.more a {
      padding-right: 0.8em; }
    .refills-patterns header.navigation li.more > a {
      padding-right: 1.6em;
      position: relative; }
      @media screen and (min-width: 53.75em) {
        .refills-patterns header.navigation li.more > a {
          margin-right: 1em; } }
      .refills-patterns header.navigation li.more > a::after {
        content: "›";
        font-size: 1.2em;
        position: absolute;
        right: 0.5em; }
    .refills-patterns header.navigation li.more:focus > .submenu, .refills-patterns header.navigation li.more:hover > .submenu {
      display: block; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns header.navigation li.more {
        padding-right: 0.8em;
        position: relative; } }
  .refills-patterns header.navigation ul.submenu {
    display: none;
    padding-left: 0; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns header.navigation ul.submenu {
        left: -1em;
        position: absolute;
        top: 1.5em; } }
    @media screen and (min-width: 53.75em) {
      .refills-patterns header.navigation ul.submenu .submenu.fly-out-right {
        left: 11.8em;
        top: 0; } }
    @media screen and (min-width: 53.75em) {
      .refills-patterns header.navigation ul.submenu .submenu.fly-out-left {
        left: -11.8em;
        top: 0; } }
    @media screen and (min-width: 53.75em) {
      .refills-patterns header.navigation ul.submenu .submenu {
        left: 11.8em;
        top: 0; } }
    .refills-patterns header.navigation ul.submenu li {
      display: block;
      padding-right: 0; }
      @media screen and (min-width: 53.75em) {
        .refills-patterns header.navigation ul.submenu li {
          line-height: 46.15385px; }
          .refills-patterns header.navigation ul.submenu li:first-child > a {
            border-top-left-radius: 3px;
            border-top-right-radius: 3px; }
          .refills-patterns header.navigation ul.submenu li:last-child > a {
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
            padding-bottom: 0.7em; } }
      .refills-patterns header.navigation ul.submenu li a {
        background-color: #2b2b2b;
        display: inline-block;
        text-align: right;
        width: 100%; }
        @media screen and (min-width: 53.75em) {
          .refills-patterns header.navigation ul.submenu li a {
            background-color: #333;
            padding-left: 1em;
            text-align: left;
            width: 12em; } }
  .refills-patterns header.navigation .navigation-tools {
    background: #505050;
    clear: both;
    display: block;
    height: 60px; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns header.navigation .navigation-tools {
        background: transparent;
        clear: none;
        float: right; } }
  .refills-patterns header.navigation .search-bar {
    float: left;
    padding: 0.85em 0.85em 0.7em 0.6em;
    width: 60%; }
    .refills-patterns header.navigation .search-bar form {
      position: relative; }
      .refills-patterns header.navigation .search-bar form input[type=search] {
        background: #404040;
        border: 1px solid #262626;
        border-radius: 6px;
        box-sizing: border-box;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.9em;
        font-style: italic;
        margin: 0;
        padding: 0.5em 0.8em;
        width: 100%; }
        @media screen and (min-width: 53.75em) {
          .refills-patterns header.navigation .search-bar form input[type=search] {
            width: 100%; } }
      .refills-patterns header.navigation .search-bar form button[type=submit] {
        background: #404040;
        border: 0;
        bottom: 0.3em;
        left: auto;
        outline: none;
        padding: 0 9px;
        position: absolute;
        right: 0.3em;
        top: 0.3em; }
        .refills-patterns header.navigation .search-bar form button[type=submit] img {
          height: 12px;
          opacity: 0.7;
          padding: 1px; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns header.navigation .search-bar {
        display: inline-block;
        position: relative;
        width: 16em; }
        .refills-patterns header.navigation .search-bar input {
          box-sizing: border-box;
          display: block; } }
.refills-patterns .scroll-on-page {
  display: inline-block; }
  .refills-patterns .scroll-on-page a {
    color: #477DCA;
    text-decoration: none; }
  @media screen and (min-width: 53.75em) {
    .refills-patterns .scroll-on-page aside {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 31.76157%; }
      .refills-patterns .scroll-on-page aside:last-child {
        margin-right: 0; } }
  .refills-patterns .scroll-on-page .scroll-on-page-link {
    border-bottom: 1px solid rgba(71, 125, 202, 0.2);
    display: block;
    margin-right: 1.5em;
    outline: none;
    padding: 0.75em 0; }
    .refills-patterns .scroll-on-page .scroll-on-page-link:last-child {
      margin-bottom: 1.5em; }
  .refills-patterns .scroll-on-page article h4 {
    margin: 0 0 0.5em 0; }
  .refills-patterns .scroll-on-page article p {
    color: #333;
    line-height: 1.5em; }
  .refills-patterns .scroll-on-page article section p:last-of-type {
    margin-bottom: 2em; }
  @media screen and (min-width: 53.75em) {
    .refills-patterns .scroll-on-page article {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 65.88078%; }
      .refills-patterns .scroll-on-page article:last-child {
        margin-right: 0; } }
.refills-patterns .search-tools {
  background: #f6f6f6;
  border: 1px solid gainsboro;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  padding: 1.618em 0.809em;
  width: 100%; }
  .refills-patterns .search-tools::after {
    clear: both;
    content: "";
    display: block; }
  .refills-patterns .search-tools li {
    font-size: 0.8em;
    line-height: 1.5em;
    list-style: none; }
  .refills-patterns .search-tools label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.375em; }
  .refills-patterns .search-tools .filters {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .search-tools .filters {
        flex-direction: row; } }
  .refills-patterns .search-tools .filter {
    flex-grow: 1;
    flex-shrink: 1;
    margin: 0 0.2em 1em 0.2em; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .search-tools .filter {
        margin-bottom: 0; } }
    .refills-patterns .search-tools .filter > div {
      background-color: white;
      border: 1px solid gainsboro;
      border-radius: 3px;
      box-sizing: border-box;
      font-size: 1em;
      margin-bottom: 0.75em;
      padding: 0.5em 4em 0.5em 0.5em;
      position: relative;
      transition: border-color;
      width: 100%; }
      .refills-patterns .search-tools .filter > div:focus, .refills-patterns .search-tools .filter > div:hover {
        border-color: #c3c3c3; }
      .refills-patterns .search-tools .filter > div label {
        cursor: pointer;
        margin-bottom: 0; }
    .refills-patterns .search-tools .filter .filter-list {
      margin: 1em 0 0;
      padding: 0; }
      .refills-patterns .search-tools .filter .filter-list label {
        display: inline; }
    .refills-patterns .search-tools .filter button.clear {
      position: absolute;
      top: 5px;
      right: 5px;
      bottom: auto;
      left: auto;
      font-size: 0.7em;
      max-width: 4em; }
    .refills-patterns .search-tools .filter .hide-options {
      margin-bottom: 0; }
      .refills-patterns .search-tools .filter .hide-options ol, .refills-patterns .search-tools .filter .hide-options button {
        display: none; }
  .refills-patterns .search-tools .trigger {
    margin-top: 1.5em; }
    .refills-patterns .search-tools .trigger button {
      display: block;
      padding: 0.5em 1em;
      text-align: center;
      width: 100%; }
.refills-patterns .side-image {
  background: #F9F9F9; }
  @media screen and (min-width: 53.75em) {
    .refills-patterns .side-image {
      display: table;
      width: 100%;
      table-layout: fixed; } }
  .refills-patterns .side-image .images-wrapper {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png"), linear-gradient(#B5EBEB, #5DAC5D), no-repeat #B5EBEB scroll;
    background-color: #B5EBEB;
    background-size: cover;
    border-bottom: 1px solid rgba(38, 74, 38, 0.2);
    display: block;
    min-height: 12em;
    padding: 3em; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .side-image .images-wrapper {
        display: table-cell;
        width: 33.33333%;
        background-position: bottom;
        background-size: cover;
        border-right: 1px solid rgba(38, 74, 38, 0.2); } }
  .refills-patterns .side-image .side-image-content {
    display: table-cell;
    width: 100%;
    padding: 1em 1em 4em 1em; }
    @media screen and (min-width: 53.75em) {
      .refills-patterns .side-image .side-image-content {
        display: table-cell;
        width: 66.66667%;
        padding: 4em 4em 8em 4em; } }
    .refills-patterns .side-image .side-image-content h1 {
      margin-bottom: 0.9em; }
    .refills-patterns .side-image .side-image-content h4 {
      background: #BBB;
      color: white;
      display: inline-block;
      font-size: 0.75em;
      margin-bottom: 1.3em;
      padding: 3px 8px;
      text-transform: uppercase; }
    .refills-patterns .side-image .side-image-content p {
      color: #333;
      line-height: 1.5em;
      margin-bottom: 3em; }
.refills-patterns .tables {
  border: 1px solid gainsboro;
  border-collapse: separate;
  border-left: 0;
  border-radius: 3px;
  border-spacing: 0;
  width: 100%; }
  .refills-patterns .tables tbody {
    background-color: #fbfbfb; }
    .refills-patterns .tables tbody tr:hover > td, .refills-patterns .tables tbody tr:hover > th {
      background-color: #eeeeee; }
    .refills-patterns .tables tbody tr:nth-child(even) {
      background-color: #f6f6f6; }
      .refills-patterns .tables tbody tr:nth-child(even):hover > td {
        background-color: #e9e9e9; }
  .refills-patterns .tables thead:first-of-type tr:first-child > th:first-child {
    border-top-left-radius: 3px; }
  .refills-patterns .tables thead:first-of-type tr:first-child > th:last-child {
    border-top-right-radius: 3px; }
  .refills-patterns .tables tbody:last-child tr:last-child > td:first-child {
    border-bottom-left-radius: 3px; }
  .refills-patterns .tables tbody:last-child tr:last-child > td:last-child {
    border-bottom-right-radius: 3px; }
  .refills-patterns .tables thead th {
    background-color: white;
    border-bottom: 0;
    border-left: 1px solid gainsboro;
    padding: 0.75em 1em;
    text-align: left; }
    .refills-patterns .tables thead th:first-child {
      border-left: 0; }
  .refills-patterns .tables tbody {
    background-color: #fbfbfb; }
    .refills-patterns .tables tbody td {
      border-bottom: 0;
      border-left: 1px solid gainsboro;
      border-top: 1px solid gainsboro;
      padding: 0.75em 1em; }
      .refills-patterns .tables tbody td:first-child {
        border-left: 0; }
      .refills-patterns .tables tbody td button {
        display: inline-block;
        font-size: 0.7em;
        line-height: 1.5em;
        margin-bottom: 0.3em;
        margin-right: 0.5em;
        outline: none;
        padding: 0.3em 1em;
        width: 100%; }
        @media screen and (min-width: 40em) {
          .refills-patterns .tables tbody td button {
            margin-bottom: 0;
            width: auto; } }
.refills-patterns .table-minimal {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%; }
  .refills-patterns .table-minimal tbody tr:hover > td, .refills-patterns .table-minimal tbody tr:hover > th {
    background-color: #fafafa; }
  .refills-patterns .table-minimal tbody tr:first-child td {
    border-top: 2px solid gainsboro; }
  .refills-patterns .table-minimal thead th {
    background-color: white;
    border-bottom: 0;
    padding: 0.75em 1em;
    text-align: left; }
  .refills-patterns .table-minimal tbody {
    background-color: white; }
    .refills-patterns .table-minimal tbody td {
      border-bottom: 0;
      border-top: 1px solid gainsboro;
      line-height: 1.5em;
      padding: 0.75em 1em; }
      .refills-patterns .table-minimal tbody td button {
        display: inline-block;
        font-size: 0.7em;
        line-height: 1.5em;
        margin-bottom: 0.3em;
        margin-right: 0.5em;
        outline: none;
        padding: 0.3em 1em;
        width: 100%; }
        @media screen and (min-width: 40em) {
          .refills-patterns .table-minimal tbody td button {
            margin-bottom: 0;
            width: auto; } }
.refills-patterns .vertical-tabs-container {
  border: 1px solid gainsboro;
  border-radius: 3px;
  margin-bottom: 1.5em;
  overflow: hidden; }
  .refills-patterns .vertical-tabs-container::after {
    clear: both;
    content: "";
    display: block; }
  .refills-patterns .vertical-tabs-container li {
    list-style: none; }
  .refills-patterns .vertical-tabs-container a {
    color: #477dca;
    text-decoration: none; }
  .refills-patterns .vertical-tabs-container .vertical-tabs {
    display: none; }
    @media screen and (min-width: 40em) {
      .refills-patterns .vertical-tabs-container .vertical-tabs {
        background-color: white;
        display: inline;
        float: left;
        height: 18.75em;
        width: 20%; } }
  @media screen and (min-width: 40em) {
    .refills-patterns .vertical-tabs-container .vertical-tab {
      border-bottom: 1px solid gainsboro;
      display: block;
      font-weight: bold;
      margin-right: -1px;
      padding: 0.75em 0.809em; }
      .refills-patterns .vertical-tabs-container .vertical-tab.is-active {
        background-color: #f6f6f6;
        margin-right: -1px; } }
  .refills-patterns .vertical-tabs-container a.vertical-tab-accordion-heading,
  .refills-patterns .vertical-tabs-container a.vertical-tab {
    color: #333; }
  .refills-patterns .vertical-tabs-container .vertical-tab:focus {
    outline: none; }
  .refills-patterns .vertical-tabs-container .vertical-tab-content-container {
    display: block;
    margin: 0 auto; }
    .refills-patterns .vertical-tabs-container .vertical-tab-content-container a:focus {
      outline: none; }
    @media screen and (min-width: 40em) {
      .refills-patterns .vertical-tabs-container .vertical-tab-content-container {
        height: 18.75em;
        width: 80%;
        background-color: #f6f6f6;
        display: inline-block; } }
  .refills-patterns .vertical-tabs-container .vertical-tab-content {
    background-color: #f6f6f6;
    padding: 1.5em 1.618em; }
    .refills-patterns .vertical-tabs-container .vertical-tab-content p {
      color: #333;
      line-height: 1.5em; }
    @media screen and (min-width: 40em) {
      .refills-patterns .vertical-tabs-container .vertical-tab-content {
        border: 0;
        display: none; } }
  .refills-patterns .vertical-tabs-container .vertical-tab-accordion-heading {
    background-color: white;
    border-top: 1px solid gainsboro;
    cursor: pointer;
    display: block;
    font-weight: bold;
    padding: 0.75em 0.809em; }
    .refills-patterns .vertical-tabs-container .vertical-tab-accordion-heading:focus, .refills-patterns .vertical-tabs-container .vertical-tab-accordion-heading:hover {
      color: #477dca; }
    .refills-patterns .vertical-tabs-container .vertical-tab-accordion-heading:first-child {
      border-top: 0; }
    .refills-patterns .vertical-tabs-container .vertical-tab-accordion-heading.is-active {
      background: #f6f6f6;
      border-bottom: 0; }
    @media screen and (min-width: 40em) {
      .refills-patterns .vertical-tabs-container .vertical-tab-accordion-heading {
        display: none; } }

.refills-components .accordion {
  background-color: #f6f6f6;
  border: 1px solid gainsboro;
  margin: 0 0 1.5em 0;
  padding: 0; }
  .refills-components .accordion ul {
    margin: 0;
    padding: 0; }
  .refills-components .accordion li {
    border-bottom: 1px solid gainsboro;
    list-style: none; }
    .refills-components .accordion li > a {
      color: #333;
      display: block;
      padding: 0.75em 1.618em;
      text-decoration: none; }
    .refills-components .accordion li:last-child {
      border: 0; }
    .refills-components .accordion li:focus, .refills-components .accordion li:hover {
      background-color: #fbfbfb; }
  .refills-components .accordion ul.submenu {
    display: none; }
    .refills-components .accordion ul.submenu li {
      background-color: #e9e9e9; }
      .refills-components .accordion ul.submenu li:first-child {
        border-top: 1px solid gainsboro;
        box-shadow: inset 0 1px 1px #d9d9d9; }
      .refills-components .accordion ul.submenu li:focus, .refills-components .accordion ul.submenu li:hover {
        background-color: #eeeeee; }
  .refills-components .accordion .is-expanded {
    display: block;
    padding-bottom: 0; }
.refills-components .animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both; }
  .refills-components .animated.infinite {
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite; }
  .refills-components .animated.alternate {
    -webkit-animation-direction: alternate;
            animation-direction: alternate; }
  .refills-components .animated.iteration {
    -webkit-animation-iteration-count: 2;
            animation-iteration-count: 2; }
@-webkit-keyframes zoomOut {
  0% {
    opacity: 1; }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  100% {
    opacity: 0; } }
@keyframes zoomOut {
  0% {
    opacity: 1; }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  100% {
    opacity: 0; } }
.refills-components .zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut; }
.refills-components .animate-target {
  height: 6em;
  width: 6em;
  border: 22px solid #e2e2e3;
  border-radius: 50%;
  margin: 0 auto 3em;
  text-align: center;
  -webkit-transform-style: preserve-3d; }
.refills-components button {
  display: block;
  margin: auto;
  outline: none;
  padding: 0.8em 1em;
  text-align: center; }
.refills-components .animate-info {
  color: #909090;
  display: block;
  font-size: 0.9em;
  line-height: 1.5;
  margin: 3em auto 0;
  max-width: 23em; }
  .refills-components .animate-info a {
    color: #f55481;
    text-decoration: none; }
.refills-components .badge-alert {
  background-color: #fff6bf;
  border-radius: 3.75em;
  color: #8c7800;
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
  padding: 0.4em 1.2em; }
.refills-components .badge-default {
  background-color: #999;
  border-radius: 3.75em;
  color: black;
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
  padding: 0.4em 1.2em; }
.refills-components .badge-error {
  background-color: #fbe3e4;
  border-radius: 3.75em;
  color: #97161b;
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
  padding: 0.4em 1.2em; }
.refills-components .badge-notice {
  background-color: #e5edf8;
  border-radius: 3.75em;
  color: #244e87;
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
  padding: 0.4em 1.2em; }
.refills-components .badge-success {
  background-color: #e6efc2;
  border-radius: 3.75em;
  color: #56651a;
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
  padding: 0.4em 1.2em; }
.refills-components .breadcrumb {
  display: inline-block;
  margin-bottom: 1.5em;
  text-align: left; }
  .refills-components .breadcrumb a {
    background-color: white;
    border: 1px solid gainsboro;
    border-left: 0;
    color: #999;
    display: inline-block;
    font-size: 0.8em;
    line-height: 2.25em;
    margin-bottom: 2px;
    margin-right: -5px;
    padding: 0 0.5625em 0 1.125em;
    position: relative;
    text-decoration: none; }
    .refills-components .breadcrumb a:first-child {
      border-bottom-left-radius: 3px;
      border-left: 1px solid gainsboro;
      border-top-left-radius: 3px;
      padding-left: 1.125em; }
    .refills-components .breadcrumb a:last-child {
      background-color: white;
      border-bottom-right-radius: 3px;
      border-top-right-radius: 3px;
      color: #999;
      padding-right: 1.125em; }
    .refills-components .breadcrumb a:focus, .refills-components .breadcrumb a:hover {
      background-color: white;
      color: #477dca; }
    .refills-components .breadcrumb a::after, .refills-components .breadcrumb a::before {
      position: absolute;
      top: 0;
      right: auto;
      bottom: 0;
      left: 100%;
      border-bottom: 1.125em solid transparent;
      border-left: 0.5625em solid transparent;
      border-top: 1.125em solid transparent;
      content: "";
      display: block;
      margin: auto;
      z-index: 2; }
    .refills-components .breadcrumb a:last-child::after, .refills-components .breadcrumb a:last-child::before {
      border: 0; }
    .refills-components .breadcrumb a::before {
      border-left-color: gainsboro;
      margin-left: 1px;
      z-index: 1; }
    .refills-components .breadcrumb a::after {
      border-left-color: white; }
    @media screen and (min-width: 40em) {
      .refills-components .breadcrumb a {
        font-size: 1em;
        padding: 0 1.125em 0 1.5em; } }
.refills-components .button-group input {
  display: none; }
.refills-components .button-group label {
  margin-bottom: 0; }
  @media screen and (min-width: 53.75em) {
    .refills-components .button-group label {
      float: left; } }
  .refills-components .button-group label .button-group-item {
    background: white;
    border-left: 1px solid silver;
    border-radius: 0;
    border-right: 1px solid silver;
    color: gray;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    font-weight: normal;
    line-height: 1;
    padding: 0.75em 1em;
    width: 100%; }
    @media screen and (min-width: 53.75em) {
      .refills-components .button-group label .button-group-item {
        border-bottom: 1px solid silver;
        border-left: 0;
        border-right: 1px solid #eeeeee;
        border-top: 1px solid silver;
        width: auto; } }
    .refills-components .button-group label .button-group-item:focus, .refills-components .button-group label .button-group-item:hover {
      background-color: #f7f7f7; }
  .refills-components .button-group label:first-child .button-group-item {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top: 1px solid silver; }
    @media screen and (min-width: 53.75em) {
      .refills-components .button-group label:first-child .button-group-item {
        border-bottom-left-radius: 3px;
        border-left: 1px solid silver;
        border-top-left-radius: 3px;
        border-top-right-radius: 0; } }
  .refills-components .button-group label:last-child .button-group-item {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom: 1px solid silver; }
    @media screen and (min-width: 53.75em) {
      .refills-components .button-group label:last-child .button-group-item {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 3px;
        border-right: 1px solid silver;
        border-top-right-radius: 3px; } }
  .refills-components .button-group label input:checked + .button-group-item {
    background: #477dca;
    border: 1px solid #2c5999;
    box-shadow: inset 0 1px 2px #3264ac;
    color: white; }
.refills-components .dropdown {
  line-height: 1.5em; }
  .refills-components .dropdown .dropdown-container {
    display: inline-block;
    position: relative;
    text-align: center; }
  .refills-components .dropdown .dropdown-description {
    background: white;
    border-bottom: 1px solid silver;
    border-bottom-left-radius: 3px;
    border-left: 1px solid silver;
    border-top-left-radius: 3px;
    border-top: 1px solid silver;
    color: #999999;
    float: left;
    font-size: 0.7em;
    line-height: 40px;
    margin: 0;
    padding: 0 0.5em 0 1em; }
    @media screen and (min-width: 53.75em) {
      .refills-components .dropdown .dropdown-description {
        font-size: 1em; } }
  .refills-components .dropdown .dropdown-button {
    background: white;
    border-bottom: 1px solid silver;
    border-bottom-right-radius: 3px;
    border-right: 1px solid silver;
    border-top: 1px solid silver;
    border-top-right-radius: 3px;
    cursor: pointer;
    float: right;
    font-size: 0.7em;
    line-height: 40px;
    margin: 0;
    padding: 0 2.5em 0 0.5em;
    position: relative; }
    @media screen and (min-width: 53.75em) {
      .refills-components .dropdown .dropdown-button {
        font-size: 1em;
        padding: 0 2.5em 0 0.5em; } }
  .refills-components .dropdown .dropdown-button:hover {
    background-color: #f7f7f7; }
  .refills-components .dropdown .dropdown-button::after {
    color: #333;
    content: "\25BE";
    display: block;
    position: absolute;
    right: 1em;
    top: 0; }
  .refills-components .dropdown .dropdown-menu {
    background: white;
    border: 1px solid silver;
    border-radius: 3px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    color: #333;
    cursor: pointer;
    display: none;
    margin: 0;
    overflow: visible;
    padding: 0;
    position: absolute;
    right: 0;
    top: 50px;
    transition: all 0.2s ease-in-out;
    width: 228px;
    z-index: 99999; }
    .refills-components .dropdown .dropdown-menu::before {
      position: absolute;
      top: 0;
      right: 1em;
      bottom: 0;
      left: 0;
      color: white;
      content: "\25b2";
      font-size: 1.4em;
      pointer-events: none;
      text-shadow: 0 -2px 2px rgba(0, 0, 0, 0.3);
      top: -0.7em; }
  .refills-components .dropdown .dropdown-menu li {
    border-bottom: 1px solid silver;
    color: #333;
    list-style: none;
    padding: 0.5em; }
  .refills-components .dropdown .dropdown-menu li:hover {
    background: #f7f7f7; }
  .refills-components .dropdown .dropdown-menu li:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px; }
  .refills-components .dropdown .dropdown-menu li:last-child {
    border: 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px; }
  .refills-components .dropdown .show-menu {
    display: block; }
.refills-components .expander {
  width: 60%; }
  .refills-components .expander .expander-trigger {
    border-bottom: 1px solid #DDD;
    color: #477dca;
    cursor: pointer;
    display: block;
    font-size: 1em;
    margin-bottom: 1em;
    padding-bottom: 0.25em;
    text-decoration: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
    .refills-components .expander .expander-trigger::before {
      content: "\25BC";
      font-size: 0.7em;
      margin-right: 0.5em; }
  .refills-components .expander .expander-content p {
    color: #333;
    line-height: 1.5em; }
  .refills-components .expander .expander-hidden::before {
    content: "\25BA";
    font-size: 0.7em; }
  .refills-components .expander .expander-hidden + .expander-content {
    display: none; }
.refills-components .fade-in-element {
  background: white;
  border: 1px solid silver;
  border-radius: 3px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  line-height: 1.5em;
  margin-bottom: 4em;
  padding: 1.5em;
  text-align: center;
  width: 100%; }
  .refills-components .fade-in-element::after {
    clear: both;
    content: "";
    display: block; }
  .refills-components .fade-in-element p {
    color: #333;
    line-height: 1.5em; }
.refills-components .js-fade-element-hide {
  opacity: 0; }
.refills-components .js-fade-element-show {
  opacity: 1;
  transition: all 0.4s ease-in-out; }
.refills-components .flash-alert {
  background-color: #fff6bf;
  color: #66624c;
  display: block;
  margin-bottom: 0.75em;
  padding: 0.75em;
  text-align: center; }
  .refills-components .flash-alert a {
    color: #4d4a39;
    text-decoration: underline; }
    .refills-components .flash-alert a:focus, .refills-components .flash-alert a:hover {
      color: #1a1913; }
.refills-components .flash-error {
  background-color: #fbe3e4;
  color: #645b5b;
  display: block;
  margin-bottom: 0.75em;
  padding: 0.75em;
  text-align: center; }
  .refills-components .flash-error a {
    color: #4b4444;
    text-decoration: underline; }
    .refills-components .flash-error a:focus, .refills-components .flash-error a:hover {
      color: #191717; }
.refills-components .flash-notice {
  background-color: #e5edf8;
  color: #5c5f63;
  display: block;
  margin-bottom: 0.75em;
  padding: 0.75em;
  text-align: center; }
  .refills-components .flash-notice a {
    color: #45474a;
    text-decoration: underline; }
    .refills-components .flash-notice a:focus, .refills-components .flash-notice a:hover {
      color: #171819; }
.refills-components .flash-success {
  background-color: #e6efc2;
  color: #5c604e;
  display: block;
  margin-bottom: 0.75em;
  padding: 0.75em;
  text-align: center; }
  .refills-components .flash-success a {
    color: #45483a;
    text-decoration: underline; }
    .refills-components .flash-success a:focus, .refills-components .flash-success a:hover {
      color: #171813; }
.refills-components .hover-tile-outer {
  background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png");
  background-color: beige;
  background-position: top;
  background-size: cover;
  border: 1px solid gainsboro;
  cursor: pointer;
  height: 10em;
  margin-bottom: 1.5em; }
  @media screen and (min-width: 40em) {
    .refills-components .hover-tile-outer {
      width: 40%; } }
  .refills-components .hover-tile-outer .hover-tile-container {
    height: 10em;
    overflow: hidden; }
  .refills-components .hover-tile-outer .hover-tile-container:hover > .hover-tile {
    -webkit-transform: translate(0, -100%);
            transform: translate(0, -100%); }
  .refills-components .hover-tile-outer .hover-tile {
    background: inherit;
    color: white;
    height: inherit;
    overflow: hidden;
    padding: 1.5em;
    transition: all 0.2s ease-in-out; }
  .refills-components .hover-tile-outer .hover-tile-hidden {
    background: rgba(0, 0, 0, 0.5); }
    .refills-components .hover-tile-outer .hover-tile-hidden p {
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.5em; }
    .refills-components .hover-tile-outer .hover-tile-hidden h4 {
      margin: 0 0 0.5em 0; }
.refills-components .image-gradient-dynamic {
  line-height: 0;
  position: relative;
  width: 100%; }
  .refills-components .image-gradient-dynamic img {
    height: auto;
    left: 0;
    position: relative;
    top: 0;
    width: 100%; }
  .refills-components .image-gradient-dynamic .copy {
    left: 50%;
    margin: auto;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 999; }
    .refills-components .image-gradient-dynamic .copy p {
      color: white;
      line-height: 1.5em;
      padding: 1em 2em;
      position: relative; }
  .refills-components .image-gradient-dynamic .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 0, 0, 0.1);
    background-image: linear-gradient(0deg, rgba(255, 0, 0, 0.1), rgba(0, 128, 0, 0.4));
    display: block; }
    .refills-components .image-gradient-dynamic .overlay::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 128, 128, 0.2);
      background-image: linear-gradient(90deg, rgba(0, 128, 128, 0.2), rgba(255, 255, 0, 0.2));
      content: "";
      display: block; }
.refills-components .modal label {
  cursor: pointer;
  margin-bottom: 0; }
.refills-components .modal label img {
  border-radius: 150px;
  display: block;
  max-width: 300px; }
.refills-components .modal .modal-state {
  display: none; }
.refills-components .modal .modal-trigger {
  padding: 0.8em 1em; }
.refills-components .modal .modal-fade-screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.85);
  opacity: 0;
  padding-top: 0.6em;
  text-align: left;
  transition: opacity 0.25s ease;
  visibility: hidden;
  z-index: 99999999999; }
  @media screen and (min-width: 53.75em) {
    .refills-components .modal .modal-fade-screen {
      padding-top: 10em; } }
  .refills-components .modal .modal-fade-screen .modal-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer; }
.refills-components .modal .modal-close {
  position: absolute;
  top: 1.5em;
  right: 1.5em;
  height: 1.5em;
  width: 1.5em;
  background: #fff;
  cursor: pointer; }
  .refills-components .modal .modal-close::after, .refills-components .modal .modal-close::before {
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 0;
    left: 50%;
    height: 1.5em;
    width: 0.15em;
    background: #ddd;
    content: "";
    display: block;
    margin: -3px 0 0 -1px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg); }
  .refills-components .modal .modal-close:hover::after, .refills-components .modal .modal-close:hover::before {
    background: #c4c4c4; }
  .refills-components .modal .modal-close::before {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg); }
.refills-components .modal .modal-inner {
  background: #fff;
  border-radius: 3px;
  margin: auto;
  margin-top: 0;
  max-height: 95%;
  overflow: auto;
  padding: 1.5em;
  position: relative;
  transition: opacity 0.25s ease;
  width: 95%; }
  @media screen and (min-width: 40em) {
    .refills-components .modal .modal-inner {
      max-height: 70%;
      padding: 3em;
      width: 60%; } }
  @media screen and (min-width: 53.75em) {
    .refills-components .modal .modal-inner {
      width: 50%; } }
  .refills-components .modal .modal-inner h1 {
    color: #333;
    text-align: left;
    text-transform: capitalize; }
  .refills-components .modal .modal-inner p {
    color: #333;
    line-height: 1.5em; }
  .refills-components .modal .modal-inner .modal-intro {
    margin-bottom: 1em; }
  .refills-components .modal .modal-inner .modal-content {
    color: #333; }
    @media screen and (min-width: 40em) {
      .refills-components .modal .modal-inner .modal-content {
        -webkit-columns: 2 8em;
                columns: 2 8em; } }
  .refills-components .modal .modal-inner a.cta {
    color: #fff;
    display: inline-block;
    margin-right: 0.5em;
    margin-top: 1em; }
    .refills-components .modal .modal-inner a.cta:last-child {
      padding: 0 2em; }
.refills-components .modal .modal-state:checked + .modal-fade-screen {
  opacity: 1;
  visibility: visible; }
.refills-components .modal .modal-state:checked + .modal-fade-screen .modal-inner {
  top: 0.5em; }
.refills-components .modal-open {
  overflow: hidden; }
.refills-components .pagination {
  text-align: center; }
  .refills-components .pagination ul {
    display: inline;
    margin: 0;
    padding: 0;
    text-align: center; }
    .refills-components .pagination ul li {
      display: inline;
      list-style: none; }
    .refills-components .pagination ul ul li {
      display: none; }
      .refills-components .pagination ul ul li:nth-child(1), .refills-components .pagination ul ul li:nth-child(2), .refills-components .pagination ul ul li:nth-child(3) {
        display: inline; }
      @media screen and (min-width: 53.75em) {
        .refills-components .pagination ul ul li {
          display: inline; } }
    .refills-components .pagination ul li a {
      background: #f6f6f6;
      border-radius: 3px;
      border: 1px solid gainsboro;
      color: #333;
      outline: none;
      padding: 0.375em 0.809em;
      text-decoration: none;
      transition: all 0.2s ease-in-out; }
      .refills-components .pagination ul li a:hover, .refills-components .pagination ul li a:focus {
        background: white;
        color: #477dca; }
      .refills-components .pagination ul li a:active {
        background: #f6f6f6; }
.refills-components .parallax-window {
  max-height: 30em;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%; }
.refills-components .parallax-static-content {
  color: #9A9A8A;
  padding: 8em 0;
  position: relative;
  z-index: 9; }
.refills-components .parallax-background {
  background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png") repeat;
  background-position: top;
  background-size: cover;
  background-color: beige;
  height: 60em;
  left: 0;
  position: absolute;
  top: -10em;
  width: 100%; }
.refills-components .progress-bar {
  background-color: #f2f2f2;
  border: 1px solid gainsboro;
  border-radius: 3px;
  box-shadow: inset 0 0 3px 0 rgba(115, 115, 115, 0.15);
  height: 30px;
  margin: 0 auto;
  padding: 2px;
  width: 100%; }
  .refills-components .progress-bar > span.meter {
    -webkit-animation: progress 0.7s linear infinite;
            animation: progress 0.7s linear infinite;
    background-color: #477dca;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%);
    background-repeat: repeat-x;
    background-size: 40px 40px;
    border: 1px solid #2c5999;
    border-radius: 2px;
    box-sizing: border-box;
    display: block;
    height: 100%;
    width: 60%; }
@-webkit-keyframes progress {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 40px 0; } }
@keyframes progress {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 40px 0; } }
.refills-components .progress-bar-indication {
  background-color: #f2f2f2;
  border-radius: 3px;
  border: 1px solid gainsboro;
  box-shadow: inset 0 0 3px 0 rgba(115, 115, 115, 0.15);
  margin: 0 auto;
  width: 100%; }
  .refills-components .progress-bar-indication > span.meter {
    background-color: #477dca;
    background-repeat: repeat-x;
    background-size: 40px 40px;
    border: 1px solid #2c5999;
    border-bottom-right-radius: 0;
    border-radius: 2px;
    border-top-right-radius: 0;
    box-sizing: border-box;
    display: block;
    height: 100%;
    width: 60%; }
  .refills-components .progress-bar-indication p {
    color: white;
    line-height: 1.5em;
    margin: 0;
    padding: 0.1em 0.5em;
    text-shadow: 0 0 1px black; }
.refills-components .ribbon-box {
  height: 100px;
  width: 100px;
  border: 1px solid #bbb;
  position: relative; }
.refills-components .ribbon-wrapper {
  height: 85px;
  width: 85px;
  overflow: hidden;
  position: absolute;
  right: -1px;
  top: -1px; }
  .refills-components .ribbon-wrapper .ribbon {
    background-color: #477dca;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 0.8em;
    left: -5px;
    line-height: 1.5em;
    padding: 2px 7px;
    position: relative;
    text-align: center;
    top: 15px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    width: 120px; }
.refills-components form.search-bar {
  position: relative; }
  .refills-components form.search-bar input[type=search] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-color: white;
    border: 1px solid gainsboro;
    box-sizing: border-box;
    display: block;
    font-size: 1em;
    font-style: italic;
    margin: 0;
    padding: 0.5em 0.5em;
    position: relative;
    transition: border-color;
    width: 100%; }
  .refills-components form.search-bar button[type=submit] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    outline: none;
    padding: 5px 10px; }
    .refills-components form.search-bar button[type=submit] img {
      height: 12px;
      opacity: 0.7; }
.refills-components .sliding-panel-content {
  position: fixed;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 220px;
  background: #404040;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  -webkit-transform: translateX(-220px);
          transform: translateX(-220px);
  transition: all 0.25s linear;
  z-index: 999999; }
  .refills-components .sliding-panel-content ul {
    padding: 0;
    margin: 0; }
  .refills-components .sliding-panel-content li {
    list-style: none; }
  .refills-components .sliding-panel-content li a {
    border-bottom: 1px solid #333;
    color: #fff;
    display: block;
    font-weight: bold;
    padding: 1em;
    text-decoration: none; }
    .refills-components .sliding-panel-content li a:focus {
      background-color: #4d4d4d; }
    .refills-components .sliding-panel-content li a:hover {
      background-color: #477dca;
      color: #fff; }
  .refills-components .sliding-panel-content.is-visible {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
.refills-components .sliding-panel-fade-screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: black;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  visibility: hidden;
  z-index: 999998; }
  .refills-components .sliding-panel-fade-screen.is-visible {
    opacity: 0.4;
    visibility: visible; }
.refills-components .sliding-panel-button {
  cursor: pointer;
  display: inline-block;
  outline: none;
  padding: 10px 16px;
  position: relative; }
  .refills-components .sliding-panel-button img {
    height: 1.3em; }
.refills-components .label-switch {
  border-radius: 32px;
  cursor: pointer;
  display: inline-block;
  height: 32px;
  position: relative;
  width: 52px; }
  .refills-components .label-switch input[type="checkbox"] {
    display: none; }
    .refills-components .label-switch input[type="checkbox"] + .checkbox {
      background: #e8e8e8;
      border: 0;
      border-radius: 32px;
      cursor: pointer;
      height: 32px;
      margin: 0;
      padding: 0;
      position: relative;
      transition: all 0.3s ease;
      width: 52px;
      z-index: 0; }
      .refills-components .label-switch input[type="checkbox"] + .checkbox::before {
        position: absolute;
        top: 2px;
        right: 0;
        bottom: 0;
        left: 2px;
        background: white;
        border-radius: 32px;
        content: "";
        height: 28px;
        -webkit-transform: scale(1);
                transform: scale(1);
        transition: all 0.3s ease;
        width: 48px;
        z-index: 1; }
      .refills-components .label-switch input[type="checkbox"] + .checkbox::after {
        position: absolute;
        top: 2px;
        right: 0;
        bottom: 0;
        left: 2px;
        height: 28px;
        width: 28px;
        background: white;
        border-radius: 28px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
        content: "";
        transition: all 0.3s ease;
        z-index: 2; }
    .refills-components .label-switch input[type="checkbox"]:checked + .checkbox {
      background: #477dca; }
      .refills-components .label-switch input[type="checkbox"]:checked + .checkbox::before {
        -webkit-transform: scale(0);
                transform: scale(0); }
      .refills-components .label-switch input[type="checkbox"]:checked + .checkbox::after {
        left: 22px; }
.refills-components .stats {
  padding: 0.75em; }
  .refills-components .stats ul {
    padding: 0; }
  .refills-components .stats li {
    border-right: 1px solid rgba(51, 51, 51, 0.2);
    color: #6f99d5;
    display: inline;
    float: left;
    font-size: 1.2em;
    line-height: 1.1em;
    padding: 0 0.7em; }
    .refills-components .stats li:first-child {
      padding-left: 0; }
    .refills-components .stats li:last-child {
      border-right: 0; }
  .refills-components .stats span {
    color: #333;
    display: block;
    font-size: 0.7em;
    font-weight: normal; }
.refills-components .texture-examples {
  border: 1px solid silver;
  border-radius: 6px;
  margin-bottom: 3em;
  padding: 1em; }
  .refills-components .texture-examples::after {
    clear: both;
    content: "";
    display: block; }
  .refills-components .texture-examples .texture-examples-container::after {
    clear: both;
    content: "";
    display: block; }
  .refills-components .texture-examples h3 {
    color: #CDCDCD;
    font-size: 1em;
    margin-bottom: 1.5em;
    text-align: center;
    text-transform: uppercase; }
  .refills-components .texture-examples h4 {
    color: gray;
    font-size: 0.8em;
    font-weight: 200;
    line-height: 2.2em;
    margin: 0;
    padding-left: 0.5em;
    text-align: center; }
  .refills-components .texture-examples .instructions {
    clear: both;
    display: block;
    padding-top: 2em;
    text-align: center; }
  .refills-components .texture-examples a {
    color: #f55481;
    text-decoration: none; }
  .refills-components .texture-examples b {
    font-weight: 800; }
  .refills-components .texture-examples p {
    color: #909090;
    font-size: 0.9em;
    line-height: 1.5em;
    margin: 1em auto 1em auto;
    max-width: 74%; }
.refills-components .examples {
  height: 2.5em;
  width: 100%; }
.refills-components .example-normal {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
  float: left;
  height: 100%;
  width: 50%; }
.refills-components .example-inverted {
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
  float: left;
  height: 100%;
  width: 50%; }
.refills-components .texture-1 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-1 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/paper.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-1 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/paper.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-2 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-2 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/rice_paper.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-2 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/rice_paper.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-3 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-3 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/noise_lines.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-3 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/noise_lines.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-4 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-4 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/fabric_plaid.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-4 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/fabric_plaid.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-5 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-5 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/first_aid_kit.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-5 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/first_aid_kit.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-6 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-6 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/texturetastic_gray.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-6 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/texturetastic_gray.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-7 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-7 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/lil_fiber.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-7 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/lil_fiber.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-8 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-8 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/tex2res5.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-8 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/tex2res5.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-9 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-9 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/skin_side_up.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-9 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/skin_side_up.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-10 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-10 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/light_noise_diagonal.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-10 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/light_noise_diagonal.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-11 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-11 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/chruch.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-11 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/chruch.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-12 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-12 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/45degreee_fabric.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-12 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/45degreee_fabric.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-13 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-13 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/bgnoise_lg.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-13 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/bgnoise_lg.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-14 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-14 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/little_pluses.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-14 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/little_pluses.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-15 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-15 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/squairy_light.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-15 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/squairy_light.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-16 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-16 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/white_texture.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-16 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/white_texture.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-17 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-17 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/binding_light.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-17 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/binding_light.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-18 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-18 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/double_lined.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-18 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/double_lined.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-19 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-19 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/grid.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-19 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/grid.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-20 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-20 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/absurdidad.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-20 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/absurdidad.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-21 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-21 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/grid_noise.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-21 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/grid_noise.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-22 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-22 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/fancy_deboss.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-22 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/fancy_deboss.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-23 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-23 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/graphy.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-23 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/graphy.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-24 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-24 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/noise_pattern_with_crosslines.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-24 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/noise_pattern_with_crosslines.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-25 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-25 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/old_mathematics.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-25 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/old_mathematics.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-26 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-26 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/ps_neutral.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-26 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/ps_neutral.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-27 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-27 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/subtle_freckles.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-27 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/subtle_freckles.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-28 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-28 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/wavegrid.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-28 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/wavegrid.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-29 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-29 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/az_subtle.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-29 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/az_subtle.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-30 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-30 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/tiny_grid.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-30 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/tiny_grid.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-31 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-31 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/wavegrid.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-31 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/wavegrid.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-32 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-32 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/gridme.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-32 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/gridme.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-33 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-33 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/noisy_grid.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-33 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/noisy_grid.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-34 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-34 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/subtlenet2.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-34 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/subtlenet2.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-35 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-35 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/white_carbon.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-35 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/white_carbon.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-36 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-36 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/lghtmesh.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-36 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/lghtmesh.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-37 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-37 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/p5.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-37 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/p5.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-38 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-38 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/worn_dots.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-38 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/worn_dots.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-39 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-39 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/subtle_dots.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-39 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/subtle_dots.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-40 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-40 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/brillant.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-40 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/brillant.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-41 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-41 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/farmer.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-41 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/farmer.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-42 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-42 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/retina_dust.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-42 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/retina_dust.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-43 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-43 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/pinstripe.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-43 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/pinstripe.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-44 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-44 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/line_horizontal1.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-44 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/line_horizontal1.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-45 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-45 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/line_horizontal2.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-45 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/line_horizontal2.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-46 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-46 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/linen.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-46 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/linen.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-47 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-47 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/vintage_speckles.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-47 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/vintage_speckles.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-48 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-48 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/subtle_grunge.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-48 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/subtle_grunge.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-49 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-49 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/old_wall.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-49 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/old_wall.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-50 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-50 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/brushed.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-50 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/brushed.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-51 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-51 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/stucco.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-51 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/stucco.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-52 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-52 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/mooning.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-52 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/mooning.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-53 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-53 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/husk.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-53 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/husk.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-54 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-54 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/concrete_wall_2.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-54 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/concrete_wall_2.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-55 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-55 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/noisy.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-55 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/noisy.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-56 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-56 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/concrete_wall_3.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-56 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/concrete_wall_3.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-57 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-57 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/subtle_surface.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-57 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/subtle_surface.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-58 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-58 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/dust.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-58 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/dust.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-59 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-59 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/light_alu.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-59 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/light_alu.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-60 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-60 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/corrugation.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-60 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/corrugation.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-61 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-61 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/kindajean.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-61 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/kindajean.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-62 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-62 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/line_diagonal1.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-62 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/line_diagonal1.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-63 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-63 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/line_diagonal2.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-63 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/line_diagonal2.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-64 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-64 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/groovepaper.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-64 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/groovepaper.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-65 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-65 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/brushed_alu.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-65 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/brushed_alu.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-66 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-66 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/rough_diagonal.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-66 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/rough_diagonal.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-67 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-67 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/diagonal-noise.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-67 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/diagonal-noise.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-68 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-68 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/cross_scratches.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-68 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/cross_scratches.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-69 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-69 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/striped_lens.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-69 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/striped_lens.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-70 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-70 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/debut_light.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-70 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/debut_light.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-71 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-71 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/diagonal_waves.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-71 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/diagonal_waves.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-72 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-72 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/honey_im_subtle.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-72 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/honey_im_subtle.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-73 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-73 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/pw_maze_white.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-73 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/pw_maze_white.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-74 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-74 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/subtle_zebra_3d.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-74 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/subtle_zebra_3d.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-75 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-75 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/white_wave.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-75 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/white_wave.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-76 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-76 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/circles.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-76 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/circles.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-77 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-77 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/crosses.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-77 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/crosses.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-78 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-78 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/grilled.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-78 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/grilled.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-79 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-79 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/pw_pattern.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-79 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/pw_pattern.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-80 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-80 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/struckaxiom.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-80 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/struckaxiom.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-81 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-81 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/vichy.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-81 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/vichy.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-82 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-82 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/wavecut.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-82 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/wavecut.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-83 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-83 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/whitey.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-83 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/whitey.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-84 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-84 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/cream_pixels.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-84 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/cream_pixels.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-85 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-85 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/grey.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-85 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/grey.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-86 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-86 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/shinedotted.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-86 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/shinedotted.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-87 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-87 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/stacked_circles.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-87 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/stacked_circles.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture-88 {
  float: left;
  margin: 0 0.95% 1em 0.95%;
  margin-bottom: 1em;
  width: 14.7%; }
  .refills-components .texture-88 .example-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/noisy_grid_simple.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
  .refills-components .texture-88 .example-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/noisy_grid_simple.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll; }
.refills-components .texture {
  height: 5em;
  width: 100%; }
  .refills-components .texture .texture-normal {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/diagonal-noise.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll;
    float: left;
    height: 5em;
    width: 50%; }
  .refills-components .texture .texture-inverted {
    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/diagonal-noise.png"), linear-gradient(180deg, #e1f2f1, #bae0de), center no-repeat #e1f2f1 scroll;
    float: left;
    height: 5em;
    width: 50%; }
.refills-components .tooltip-item {
  background: white;
  border: 1px solid gainsboro;
  border-radius: 3px;
  display: inline-block;
  padding: 0.5em 1em;
  position: relative;
  text-align: center; }
  .refills-components .tooltip-item:focus, .refills-components .tooltip-item:hover .tooltip {
    opacity: 1;
    visibility: visible; }
  .refills-components .tooltip-item .tooltip {
    position: absolute;
    right: 0;
    bottom: 3em;
    left: 0;
    background-color: white;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 2px silver;
    color: #333;
    font-size: 0.9em;
    line-height: 1.5em;
    margin: 0 auto;
    max-width: 16em;
    opacity: 0;
    padding: 1em;
    text-align: center;
    transition: all 0.2s ease-in-out;
    visibility: hidden;
    z-index: 10; }
    .refills-components .tooltip-item .tooltip p {
      color: #333;
      line-height: 1.5em;
      margin: 0; }
    .refills-components .tooltip-item .tooltip::after {
      position: absolute;
      right: 0;
      left: 0;
      border: 8px solid transparent;
      bottom: -1.3em;
      color: white;
      content: "▼";
      font-size: 1.4em;
      margin-left: -8px;
      text-align: center;
      text-shadow: 0 2px 2px silver; }
.refills-components .video-wrapper {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative; }
  .refills-components .video-wrapper embed,
  .refills-components .video-wrapper object,
  .refills-components .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%; }

.type-systems article.type-system-geometric {
  font-family: "Questrial", sans-serif;
  text-align: left; }
  .type-systems article.type-system-geometric::after {
    clear: both;
    content: "";
    display: block; }
  .type-systems article.type-system-geometric h1, .type-systems article.type-system-geometric h2, .type-systems article.type-system-geometric h3, .type-systems article.type-system-geometric p {
    margin: 0; }
  .type-systems article.type-system-geometric hr {
    border-bottom: 1px solid #DDD;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    margin: 1.5em 0; }
  .type-systems article.type-system-geometric p {
    color: #333;
    line-height: 1.5em; }
  .type-systems article.type-system-geometric a {
    color: #477DCA;
    text-decoration: none; }
  .type-systems article.type-system-geometric .type {
    border-bottom: 1px solid;
    display: inline-block;
    font-family: "Questrial", sans-serif;
    font-size: 0.7em;
    font-weight: 800;
    margin-bottom: 2em;
    padding: 0.3em 0;
    text-align: left;
    text-transform: uppercase; }
  .type-systems article.type-system-geometric h1 {
    font-family: "Sanchez", serif;
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 0.5em; }
    @media screen and (min-width: 40em) {
      .type-systems article.type-system-geometric h1 {
        font-size: 2.6em; } }
  .type-systems article.type-system-geometric h2 {
    font-family: "Sanchez", serif;
    font-size: 1.2em;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4em;
    margin-bottom: 1.1em; }
    @media screen and (min-width: 40em) {
      .type-systems article.type-system-geometric h2 {
        font-size: 1.3em; } }
  .type-systems article.type-system-geometric code {
    background: #F7F7F7;
    border-radius: 4.5px;
    border: 1px solid #E0E0E0;
    font-size: 0.7em;
    font-style: normal;
    padding: 0.1em 0.4em;
    white-space: nowrap; }
  .type-systems article.type-system-geometric h3 {
    font-family: "Sanchez", serif;
    font-size: 1.4em;
    font-weight: 400;
    line-height: 1.3em;
    margin-bottom: 0.4em; }
  .type-systems article.type-system-geometric p.date {
    color: rgba(51, 51, 51, 0.4);
    font-family: "Sanchez", serif;
    font-size: 0.9em;
    font-style: italic;
    margin-bottom: 0.3em; }
  .type-systems article.type-system-geometric p {
    font-family: "Questrial", sans-serif;
    font-size: 1.05em;
    line-height: 1.5em;
    margin-bottom: 1.5em; }
  .type-systems article.type-system-geometric a.read-more {
    display: inline-block;
    font-family: "Questrial", sans-serif;
    font-size: 0.8em;
    font-weight: 700;
    margin-left: 0.2em;
    position: relative;
    text-transform: uppercase; }
    .type-systems article.type-system-geometric a.read-more span {
      font-family: "Questrial", sans-serif;
      font-size: 1.5em;
      font-style: normal;
      position: absolute;
      right: -12px;
      top: -1px; }
  .type-systems article.type-system-geometric hr {
    width: 3em; }
  .type-systems article.type-system-geometric p.author {
    font-family: "Questrial", sans-serif; }
.type-systems article.type-system-rounded {
  font-family: "Nunito", sans-serif;
  text-align: left; }
  .type-systems article.type-system-rounded::after {
    clear: both;
    content: "";
    display: block; }
  .type-systems article.type-system-rounded h1,
  .type-systems article.type-system-rounded h2,
  .type-systems article.type-system-rounded h3,
  .type-systems article.type-system-rounded p {
    margin: 0; }
  .type-systems article.type-system-rounded hr {
    border-bottom: 1px solid #ddd;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    margin: 1.5em 0; }
  .type-systems article.type-system-rounded p {
    color: #333;
    line-height: 1.5em; }
  .type-systems article.type-system-rounded a {
    color: #477dca;
    text-decoration: none; }
  .type-systems article.type-system-rounded .type {
    border-bottom: 1px solid;
    display: inline-block;
    font-family: "Nunito", sans-serif;
    font-size: 0.7em;
    font-weight: 800;
    margin-bottom: 2em;
    padding: 0.3em 0;
    text-align: left;
    text-transform: uppercase; }
  .type-systems article.type-system-rounded h1 {
    font-family: "Varela Round", sans-serif;
    font-size: 1.8em;
    margin-bottom: 0.5em; }
    @media screen and (min-width: 40em) {
      .type-systems article.type-system-rounded h1 {
        font-size: 2.4em; } }
  .type-systems article.type-system-rounded h2 {
    font-family: "Varela Round", sans-serif;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.4em;
    margin-bottom: 0.9em; }
    @media screen and (min-width: 40em) {
      .type-systems article.type-system-rounded h2 {
        font-size: 1.4em; } }
  .type-systems article.type-system-rounded code {
    background: #F7F7F7;
    border-radius: 4.5px;
    border: 1px solid #E0E0E0;
    font-family: monaco;
    font-size: 0.7em;
    font-style: normal;
    padding: 0.1em 0.4em;
    white-space: nowrap; }
  .type-systems article.type-system-rounded h3 {
    font-family: "Varela Round", sans-serif;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.3em;
    margin-bottom: 0.4em; }
  .type-systems article.type-system-rounded p.date {
    color: rgba(51, 51, 51, 0.4);
    font-family: "Nunito", sans-serif;
    font-size: 0.9em;
    margin-bottom: 0.3em; }
  .type-systems article.type-system-rounded p {
    font-family: "Nunito", sans-serif;
    font-size: 1.05em;
    font-weight: 300;
    line-height: 1.4em;
    margin-bottom: 1.5em; }
    .type-systems article.type-system-rounded p span {
      font-family: "Varela Round", sans-serif;
      font-size: 0.8em;
      text-transform: uppercase; }
  .type-systems article.type-system-rounded a.read-more {
    display: inline-block;
    font-family: "Varela Round", sans-serif;
    font-size: 0.8em;
    font-weight: 700;
    margin-left: 0.2em;
    position: relative;
    text-transform: uppercase; }
    .type-systems article.type-system-rounded a.read-more span {
      font-size: 1.5em;
      position: absolute;
      right: -12px;
      top: -1px; }
  .type-systems article.type-system-rounded hr {
    width: 3em; }
  .type-systems article.type-system-rounded p.author {
    font-family: "Nunito", sans-serif; }
.type-systems article.type-system-sans {
  font-family: "PT Sans", sans-serif;
  text-align: left; }
  .type-systems article.type-system-sans::after {
    clear: both;
    content: "";
    display: block; }
  .type-systems article.type-system-sans h1,
  .type-systems article.type-system-sans h2,
  .type-systems article.type-system-sans h3,
  .type-systems article.type-system-sans p {
    margin: 0; }
  .type-systems article.type-system-sans hr {
    border-bottom: 1px solid #ddd;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    margin: 1.5em 0; }
  .type-systems article.type-system-sans p {
    color: #333;
    line-height: 1.5em; }
  .type-systems article.type-system-sans a {
    color: #477dca;
    text-decoration: none; }
  .type-systems article.type-system-sans .type {
    border-bottom: 1px solid;
    display: inline-block;
    font-family: "Titillium Web", sans-serif;
    font-size: 0.7em;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 2em;
    padding: 0.1em 0;
    text-align: left;
    text-transform: uppercase; }
  .type-systems article.type-system-sans h1 {
    font-family: "Titillium Web", sans-serif;
    font-size: 2em;
    font-weight: 600;
    margin-bottom: 0.6em; }
    @media screen and (min-width: 40em) {
      .type-systems article.type-system-sans h1 {
        font-size: 2.4em; } }
  .type-systems article.type-system-sans h2 {
    font-family: "PT Sans", sans-serif;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.4em;
    margin-bottom: 1.2em; }
    @media screen and (min-width: 40em) {
      .type-systems article.type-system-sans h2 {
        font-size: 1.4em; } }
  .type-systems article.type-system-sans code {
    background: #f7f7f7;
    border-radius: 4.5px;
    border: 1px solid #e0e0e0;
    font-family: monaco;
    font-size: 0.65em;
    font-style: normal;
    padding: 0.1em 0.4em;
    white-space: nowrap; }
  .type-systems article.type-system-sans h3 {
    font-family: "Titillium Web", sans-serif;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.4em;
    margin-bottom: 0.5em;
    text-transform: uppercase; }
  .type-systems article.type-system-sans p.date {
    color: rgba(51, 51, 51, 0.4);
    font-family: "PT Sans", sans-serif;
    font-size: 0.8em;
    margin-bottom: 0.5em; }
  .type-systems article.type-system-sans p {
    font-family: "PT Sans", sans-serif;
    font-weight: 300;
    letter-spacing: 1;
    margin-bottom: 1.5em; }
    .type-systems article.type-system-sans p span {
      font-family: "PT Sans", sans-serif;
      font-size: 0.8em;
      font-weight: 600;
      text-transform: uppercase; }
  .type-systems article.type-system-sans hr {
    width: 3em; }
  .type-systems article.type-system-sans a.read-more {
    display: inline-block;
    font-family: "PT Sans", sans-serif;
    font-size: 0.8em;
    font-weight: 700;
    margin-left: 0.2em;
    position: relative;
    text-transform: uppercase; }
    .type-systems article.type-system-sans a.read-more span {
      font-size: 1.7em;
      position: absolute;
      right: -10px;
      top: -2px; }
  .type-systems article.type-system-sans p.author {
    font-family: "PT Sans", sans-serif;
    font-style: italic; }
.type-systems article.type-system-serif {
  font-family: "Merriweather", serif;
  text-align: left; }
  .type-systems article.type-system-serif::after {
    clear: both;
    content: "";
    display: block; }
  .type-systems article.type-system-serif h1, .type-systems article.type-system-serif h2, .type-systems article.type-system-serif h3, .type-systems article.type-system-serif p {
    margin: 0; }
  .type-systems article.type-system-serif hr {
    border-bottom: 1px solid #DDD;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    margin: 1.5em 0; }
  .type-systems article.type-system-serif p {
    color: #333;
    line-height: 1.5em; }
  .type-systems article.type-system-serif a {
    color: #477DCA;
    text-decoration: none; }
  .type-systems article.type-system-serif .type {
    border-bottom: 1px solid;
    display: inline-block;
    font-family: "Merriweather Sans", sans-serif;
    font-size: 0.7em;
    font-weight: 700;
    margin-bottom: 2em;
    padding: 0.3em 0;
    text-align: left;
    text-transform: uppercase; }
  .type-systems article.type-system-serif h1 {
    font-family: "Lusitana", serif;
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 0.5em; }
    @media screen and (min-width: 40em) {
      .type-systems article.type-system-serif h1 {
        font-size: 2.6em; } }
  .type-systems article.type-system-serif h2 {
    font-family: "Merriweather", serif;
    font-size: 1em;
    font-style: italic;
    font-weight: 400;
    line-height: 1.6em;
    margin-bottom: 0.9em; }
    @media screen and (min-width: 40em) {
      .type-systems article.type-system-serif h2 {
        font-size: 1.2em; } }
  .type-systems article.type-system-serif code {
    background: #F7F7F7;
    border-radius: 4.5px;
    border: 1px solid #E0E0E0;
    font-family: monaco;
    font-size: 0.75em;
    font-style: normal;
    padding: 0.1em 0.4em;
    white-space: nowrap; }
  .type-systems article.type-system-serif h3 {
    font-family: "Lusitana", serif;
    font-size: 1.4em;
    font-weight: 400;
    line-height: 1.3em;
    margin-bottom: 0.4em; }
  .type-systems article.type-system-serif p.date {
    color: rgba(51, 51, 51, 0.4);
    font-family: "Merriweather", serif;
    font-size: 0.9em;
    font-style: italic;
    margin-bottom: 0.3em; }
  .type-systems article.type-system-serif p {
    font-family: "Merriweather", serif;
    font-size: 0.9em;
    line-height: 1.6em;
    margin-bottom: 1.5em; }
    .type-systems article.type-system-serif p span {
      font-family: "Merriweather Sans", sans-serif;
      font-weight: 700; }
  .type-systems article.type-system-serif a.read-more {
    display: inline-block;
    font-family: "Merriweather Sans", sans-serif;
    font-size: 0.8em;
    font-weight: 700;
    margin-left: 0.2em;
    position: relative;
    text-transform: uppercase; }
    .type-systems article.type-system-serif a.read-more span {
      font-family: "Lusitana", serif;
      font-size: 1.5em;
      font-style: normal;
      position: absolute;
      right: -12px;
      top: -1px; }
  .type-systems article.type-system-serif hr {
    width: 3em; }
  .type-systems article.type-system-serif p.author {
    font-family: "Merriweather", serif;
    font-style: italic; }
.type-systems article.type-system-slab {
  font-family: "Roboto Slab", serif;
  text-align: left; }
  .type-systems article.type-system-slab::after {
    clear: both;
    content: "";
    display: block; }
  .type-systems article.type-system-slab h1, .type-systems article.type-system-slab h2, .type-systems article.type-system-slab h3, .type-systems article.type-system-slab p {
    margin: 0; }
  .type-systems article.type-system-slab hr {
    border-bottom: 1px solid #DDD;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    margin: 1.5em 0; }
  .type-systems article.type-system-slab p {
    color: #333;
    line-height: 1.5em; }
  .type-systems article.type-system-slab a {
    color: #477DCA;
    text-decoration: none; }
  .type-systems article.type-system-slab .type {
    border-bottom: 1px solid;
    display: inline-block;
    font-family: "Open Sans", sans-serif;
    font-size: 0.7em;
    font-weight: 600;
    margin-bottom: 2em;
    padding: 0.1em 0;
    text-align: left;
    text-transform: uppercase; }
  .type-systems article.type-system-slab h1 {
    font-family: "Roboto Slab", serif;
    font-size: 1.6em;
    font-weight: 400;
    margin-bottom: 0.6em; }
    @media screen and (min-width: 40em) {
      .type-systems article.type-system-slab h1 {
        font-size: 2.4em; } }
  .type-systems article.type-system-slab h2 {
    font-family: "Open Sans", sans-serif;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.5em;
    margin-bottom: 1.2em; }
    @media screen and (min-width: 40em) {
      .type-systems article.type-system-slab h2 {
        font-size: 1.3em; } }
  .type-systems article.type-system-slab code {
    background: #F7F7F7;
    border-radius: 4.5px;
    border: 1px solid #E0E0E0;
    font-size: 0.8em;
    font-style: normal;
    padding: 0.1em 0.4em;
    white-space: nowrap; }
  .type-systems article.type-system-slab h3 {
    font-family: "Roboto Slab", serif;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.4em;
    margin-bottom: 0.5em;
    text-transform: uppercase; }
  .type-systems article.type-system-slab p.date {
    color: rgba(51, 51, 51, 0.4);
    font-family: "Roboto Slab", serif;
    font-size: 0.8em;
    margin-bottom: 0.5em; }
  .type-systems article.type-system-slab p {
    font-family: "Roboto Slab", serif;
    font-weight: 300;
    letter-spacing: 1;
    margin-bottom: 1.5em; }
    .type-systems article.type-system-slab p span {
      font-family: "Open Sans", sans-serif;
      font-size: 0.8em;
      font-weight: 600;
      text-transform: uppercase; }
  .type-systems article.type-system-slab a.read-more {
    display: inline-block;
    font-family: "Roboto Slab", serif;
    font-size: 0.8em;
    font-weight: 700;
    margin-left: 0.2em;
    position: relative;
    text-transform: uppercase; }
    .type-systems article.type-system-slab a.read-more span {
      font-size: 1.8em;
      position: absolute;
      right: -12px;
      top: -2px; }
  .type-systems article.type-system-slab hr {
    width: 3em; }
  .type-systems article.type-system-slab p.author {
    font-family: "Roboto Slab", serif; }
.type-systems article.type-system-traditional {
  font-family: "Noto Sans", sans-serif;
  text-align: left; }
  .type-systems article.type-system-traditional::after {
    clear: both;
    content: "";
    display: block; }
  .type-systems article.type-system-traditional h1, .type-systems article.type-system-traditional h2, .type-systems article.type-system-traditional h3, .type-systems article.type-system-traditional p {
    margin: 0; }
  .type-systems article.type-system-traditional hr {
    border-bottom: 1px solid #DDD;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    margin: 1.5em 0; }
  .type-systems article.type-system-traditional p {
    color: #333;
    line-height: 1.5em; }
  .type-systems article.type-system-traditional a {
    color: #477DCA;
    text-decoration: none; }
  .type-systems article.type-system-traditional .type {
    border-bottom: 2px solid;
    display: inline-block;
    font-family: "Noto Sans", sans-serif;
    font-size: 0.7em;
    font-weight: 800;
    margin-bottom: 2em;
    padding: 0.1em 0;
    text-align: left;
    text-transform: uppercase; }
  .type-systems article.type-system-traditional h1 {
    font-family: "Radley", serif;
    font-size: 1.9em;
    font-weight: 700;
    margin-bottom: 0.3em; }
    @media screen and (min-width: 40em) {
      .type-systems article.type-system-traditional h1 {
        font-size: 2.6em; } }
  .type-systems article.type-system-traditional h2 {
    font-family: "Radley", serif;
    font-size: 1.3em;
    font-weight: 400;
    line-height: 1.25em;
    margin-bottom: 0.9em; }
    @media screen and (min-width: 40em) {
      .type-systems article.type-system-traditional h2 {
        font-size: 1.5em; } }
  .type-systems article.type-system-traditional code {
    background: #F7F7F7;
    border-radius: 4.5px;
    border: 1px solid #E0E0E0;
    font-size: 0.75em;
    font-style: normal;
    padding: 0.1em 0.4em;
    white-space: nowrap; }
  .type-systems article.type-system-traditional h2 code {
    font-size: 0.65em; }
  .type-systems article.type-system-traditional h3 {
    font-family: "Radley", serif;
    font-size: 1.4em;
    font-style: italic;
    font-weight: 400;
    line-height: 1.3em;
    margin-bottom: 0.4em; }
  .type-systems article.type-system-traditional p.date {
    color: rgba(51, 51, 51, 0.4);
    font-family: "Radley", serif;
    font-style: italic;
    margin-bottom: 0.3em; }
  .type-systems article.type-system-traditional p {
    font-family: "Noto Sans", sans-serif;
    letter-spacing: 1;
    line-height: 1.55em;
    margin-bottom: 1.5em; }
    .type-systems article.type-system-traditional p span {
      font-family: "Radley", serif;
      font-size: 1.2em;
      font-style: italic; }
  .type-systems article.type-system-traditional a.read-more {
    display: inline-block;
    font-family: "Noto Sans", sans-serif;
    font-size: 0.8em;
    font-weight: 700;
    margin-left: 0.2em;
    position: relative;
    text-transform: uppercase; }
    .type-systems article.type-system-traditional a.read-more span {
      font-family: "Noto Sans", sans-serif;
      font-size: 1.5em;
      font-style: normal;
      position: absolute;
      right: -12px;
      top: -1px; }
  .type-systems article.type-system-traditional hr {
    width: 3em; }
  .type-systems article.type-system-traditional p.author {
    font-family: "Radley", serif;
    font-size: 1.2em;
    font-style: italic; }

.notice {
  font-weight: 600;
  margin: 0;
  padding: 2rem 4rem;
  text-align: center; }