.hljs{display:block;padding:.5em;color:#657b83;background:#fdf6e3;overflow-x:auto;-webkit-text-size-adjust:none}.hljs-comment,.hljs-template_comment,.diff .hljs-header,.hljs-doctype,.hljs-pi,.lisp .hljs-string,.hljs-javadoc{color:#93a1a1}.hljs-keyword,.hljs-winutils,.method,.hljs-addition,.css .hljs-tag,.hljs-request,.hljs-status,.nginx .hljs-title{color:#859900}.hljs-number,.hljs-command,.hljs-string,.hljs-tag .hljs-value,.hljs-rules .hljs-value,.hljs-phpdoc,.hljs-dartdoc,.tex .hljs-formula,.hljs-regexp,.hljs-hexcolor,.hljs-link_url{color:#2aa198}.hljs-title,.hljs-localvars,.hljs-chunk,.hljs-decorator,.hljs-built_in,.hljs-identifier,.vhdl .hljs-literal,.hljs-id,.css .hljs-function{color:#268bd2}.hljs-attribute,.hljs-variable,.lisp .hljs-body,.smalltalk .hljs-number,.hljs-constant,.hljs-class .hljs-title,.hljs-parent,.hljs-type,.hljs-link_reference{color:#b58900}.hljs-preprocessor,.hljs-preprocessor .hljs-keyword,.hljs-pragma,.hljs-shebang,.hljs-symbol,.hljs-symbol .hljs-string,.diff .hljs-change,.hljs-special,.hljs-attr_selector,.hljs-subst,.hljs-cdata,.css .hljs-pseudo,.hljs-header{color:#cb4b16}.hljs-deletion,.hljs-important{color:#dc322f}.hljs-link_label{color:#6c71c4}.tex .hljs-formula{background:#eee8d5}



/*

 • App
 • Container

 */

body.s-App {
  font-family: 'Open Sans', sans-serif;;
  background-color: #fff;
}

.s-App-content {
  max-width: 850px;
  margin: 0 auto;
  padding: 2rem;
}



/*

 • Navigation
 • Logo

 */

.s-Nav {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 250px;
  color: #fff;
  background-color: #07698d;
  overflow: auto;
  transition: top .3s ease-out;
}

.s-Logo {
  margin: 0;
  background-color: #084d66;
}

.s-Logo-link {
  display: block;
  padding: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}

.s-Nav-section {
  color: #fff;
  border-bottom: 1px solid #0d5c7c;
}

.s-Nav-section.has-nav {
  padding: 2rem;
}

.s-Nav-title {
  display: block;
  margin: 0;
  padding: 2rem 2rem 1.6rem 2rem;
  font-size: .97rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #aed7e8;
}

.s-Nav-title:not(:only-child) {
  margin-bottom: 1.5rem;
}

.has-nav .s-Nav-title {
  padding: 0;
}

.s-Nav-link {
  display: block;
  margin-left: -1rem;
  padding: .5rem 1rem;
  font-size: 1.2rem;
  color: #fff;
}



.s-Icon {
  display: inline-block;
  width: 12rem;
  margin: 0 .7rem 1rem 0;
  padding: 1rem;
  text-align: center;
  color: #657b83;
  background-color: #f7f7f7;
  border: 1px solid #D8D8D8;
}


/*

 • Header

 */

.s-Header {
  margin: 0;
  padding: 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: .98;
  color: #07698d;
  background: #fff;
  border-bottom: 1px solid #d5d9da;
}





/*

 • Titles

 */

.s-Title--1 {
  margin: 0 0 2.5rem;
  padding-top: 5rem;
  font-size: 2.5rem;
  font-weight: 600;
  color: #3a434c;
}

.s-Modules-container .s-Title--1 {
  margin-top: 5rem;
}

.s-Title--1:first-of-type {
  margin-top: 0;
  padding-top: 0;
}

.s-Title--2 {
  margin: 5rem 0 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  color: #a1a9ae;
}

.s-Title--1 + .s-Title--2 {
  margin-top: 0;
}





/*

 • Colors

 */

.s-Color-wrapper {
  display: inline-block;
  width: 9rem;
  margin: 0 2rem 2rem 0;
  list-style-type: none;
}

.s-Color {
  height: 8rem;
  border-radius: 2px;
}

.s-Color-desc {
  padding: .8rem;
  font-size: 1em;
  font-weight: 300;
  font-weight: 600;
  line-height: 1.6rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #666;
  border-bottom: 1px solid #ededed;
  overflow: hidden;
}

.Styleguide-colorCode {
  font-weight: normal;
  color: #999;
}






/*

 • Grid

 */

.s-Module--grid .Grid-cell {
  padding: 1rem;
  font-weight: bold;
  text-align: center;
  color: #708189;
  background-color: #ebeeef;
  border: 1px solid #d5d9da;
}

.s-Module--grid .Grid-cell + .Grid-cell {
  border-left: 0;
}

.s-Module--grid .Grid + .Grid {
  margin-top: .5rem;
}

.s-Module--grid .Grid.Grid--gutters .Grid-cell {
  background: #fff;
  border: 0;
  padding: 1rem 0 1rem 1.57143rem;
  position: relative;
}

.s-Module--grid .Grid.Grid--gutters .Grid-cell:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 1.57143rem;
  content: "";
  background-color: rgba(86, 61, 124, .1);
  border: 1px solid #d5d9da;
}



/*

 • Icons

 */

.s-Icon {
  display: inline-block;
  width: 12rem;
  margin: 0 .7rem 1rem 0;
  padding: 1rem;
  text-align: center;
  color: #657b83;
  background-color: #f7f7f7;
  border: 1px solid #D8D8D8;
}

.s-Icon .Icon {
  display: block;
  margin-bottom: .7rem;
  font-size: 2rem;
  line-height: 1.1;
}





/*

 • Code

 */

.s-Modules-container code {
  margin: 0 .3rem;
  padding: .15rem .4rem;
  font-size: 1rem;
  font-family: Consolas, "Courier New", monospace;
  color: #657b83;
  background-color: #f7f7f7;
  border: 1px solid #D8D8D8;
}

.s-Modules-container p code:first-child {
  margin-left: 0;
}

.s-Modules-container .code {
  margin: 1.5rem 0 1rem;
}

.s-Modules-container .code code {
  display: block;
  margin: 0;
  padding: 1rem 1.2rem;
  white-space: pre-wrap;
}





/*

 • Paragraphs

 */

.s-Paragraph,
.s-List {
   margin-bottom: 1.5rem;
   font-size: 1.2rem;
   line-height: 1.7;
   color: #3a434c;
}



/*

 • Stats

 */

.s-Grid--stats {
  margin-bottom: 2rem;
}

.s-Card {
  display: inline-block;
  position: relative;
  padding: 1.5rem 3rem;
  text-align: center;
}

.s-Card-key {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  color: #a1a9ae;
}

.s-Card-value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.5;
}

.has-2-childs
  .s-Card:first-child {
    text-align: right;
  }

.has-2-childs
  .s-Card:last-child {
    text-align: left;
  }

.s-Card:not(:last-child):after {
  content: "";
  display: block;
  position: absolute;
  top: 50%; right: 0;
  width: 1px; height: 30px;
  background-color: #d5d9da;
  transform: rotate(10deg) translateY(-50%);
}








.s-Topbar {
  position: fixed;
  top: 0; right: 0; left: 0;
  height: 5px;
  background-color: #46b489;;
}

.s-MainHeader {
  padding: 3rem 0 2.8rem 0;
  text-align: center;
  color: #fff;
  background: url('/assets/imgs/pattern.png') repeat #46b489;
  background-size: 80px;
}

.s-MainHeader-title {
  margin: 0 0 1rem 0;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.5;
}

.s-MainHeader--p {
  margin-bottom: 2.5rem;
  font-size: 1.5rem;
  line-height: 1.6;
}

.s-MainHeader-btn {
  padding: 1.5rem 3rem;
  font-size: 1.3rem;
  background-color: #297456;
}

.s-MainHeader-btn:hover {
  background-color: #1D5840;
}



.s-Page--default
  .s-Container {
    padding-left: 250px;
  }


.github-corner:hover
.octo-arm {
  animation: octocat-wave .56s ease-in-out
}

@keyframes octocat-wave {
  0%, 100% {
    transform:rotate(0)
  }

  20%, 60% {
    transform:rotate(-25deg)
  }

  40%, 80% {
    transform:rotate(10deg)
  }
}

@media (max-width:500px) {
  .github-corner:hover .octo-arm {
    animation:none
  }

  .github-corner .octo-arm {
    animation:octocat-wave 560ms ease-in-out
  }
}

.s-Advantages {
  padding-top: 7rem;
}


.s-Advantage {
  display: flex;
  flex-direction: row;
  margin-bottom: 8rem;
}

.s-Advantage-title {
  margin-bottom: 2rem;
  font-size: 2.2rem;
  color: #3a434c;
}

.s-Advantage-p {
  font-size: 1.5rem;
  line-height: 1.5;
  color: #708189;
}

.s-Advantage-texts:nth-child(odd) {
  padding-right: 5rem;
}

.s-Advantage-texts:nth-child(even) {
  padding-left: 5rem;
}

.s-Advantage-img {
  width: 40%;
  flex-shrink: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.s-Advantage--sass
  .s-Advantage-img {
    background-size: 13rem 13rem;
  }

.s-Advantage--modules
  .s-Advantage-img {
    background-position: left center;
  }


.s-Hr {
  height: 1px;
  margin: 8rem -5rem 6rem -5rem;
  background-color: #ddd;
  border: 0;
}

.s-wTitle-1 {
  font-size: 2.8rem;
  text-align: center;
}

.s-Page--gettingStarted
  .s-wTitle-1 {
    text-align: left;
  }

.s-Pre,
.s-Code {
  direction: ltr;
  font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace;
  line-height: 1.4;
  text-align: left;
  word-break: normal;
  word-spacing: normal;
  white-space: pre;
  color: #3a434c;
}

.s-Code {
  margin: 0;
  padding: 1.2rem 1.5rem;
  white-space: nowrap;
}

.s-Btn-gettingStarted {
  display: block;
  width: 20rem;
  margin: 0 auto;
  padding: 2rem 0;
  font-size: 1.5rem;
}

.s-Footer {
  margin-top: 4rem;
  padding-top: 2rem;
  font-size: 1rem;
  color: #a1a9ae;
  background-color: #3a434c;
}

.s-Footer
  p {
    line-height: 1.8;
  }

.s-Footer
  a {
    display: inline-block;
    color: #f7f7f7;
  }

.s-Footer-nav {
  margin-bottom: 1rem;
}

.s-Footer-nav:after {
  content: "—";
  display: block;
  margin-top: 1rem;
}

.s-Footer-nav
  a:not(:first-child) {
    padding-left: 1rem;
  }

.s-Footer-nav
  a:not(:last-child):after {
    content: "•";
    margin-left: 1rem;
  }


.s-Table {
  width: 100%;
  font-size: 0.83333rem;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.s-Table th {
  padding: 0.35714rem 0.71429rem;
  border: 1px solid #bac1c3;
  width: 20%;
}

.s-Table th:last-child {
  width: 40%;
}

.s-Table td {
  padding: 0.35714rem 0.71429rem;
  border: 1px solid #bac1c3;
}