/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  background-color: #000;
  margin: 0;
  color: #fff;
}

.header img {
  float: left;
  width: 200px;
  height: 200px;
  background-color: transparent;
  padding-left: 30px;
 }

article, aside, footer, header, nav, section {
  display: block
}

h1 {
  font-size: 2em;
  margin: 0.67em 0
}

figcaption, figure, main {
  display: block
}

figure {
  margin: 1em 40px
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

pre {
  font-family: monospace, monospace;
  font-size: 1em
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}

b, strong {
  font-weight: inherit
}

b, strong {
  font-weight: bolder
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em
}

dfn {
  font-style: italic
}

mark {
  background-color: #ff0;
  color: #000
}

small {
  font-size: 80%
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -0.25em
}

sup {
  top: -0.5em
}

audio, video {
  display: inline-block
}

audio:not([controls]) {
  display: none;
  height: 0
}

img {
  border-style: none
}

svg:not(:root) {
  overflow: hidden
}

button, input, optgroup, select, textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button, input {
  overflow: visible
}

button, select {
  text-transform: none
}

button, html [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: 0.35em 0.75em 0.625em
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {
  display: inline-block;
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details, menu {
  display: block
}

summary {
  display: list-item
}

canvas {
  display: inline-block
}

template {
  display: none
}

[hidden] {
  display: none
}

html {
  font-size: 14px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

@media (min-width: 768px) {
  html {
      font-size: 16px
  }
}

body {
  color: white;
  font-family: "Noto Sans", sans-serif;
  font-size: 1em;
  line-height: 1.8em
}

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

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  line-height: 1.5em;
  margin: 2.5rem 0 .9375rem 0
}

h1[id], .h1[id], h2[id], .h2[id], h3[id], .h3[id], h4[id], .h4[id], h5[id], .h5[id], h6[id], .h6[id] {
  position: relative
}

h1+h1, .h1+h1, h2+h1, .h2+h1, h3+h1, .h3+h1, h4+h1, .h4+h1, h5+h1, .h5+h1, h6+h1, .h6+h1, h1+.h1, .h1+.h1, h2+.h1, .h2+.h1, h3+.h1, .h3+.h1, h4+.h1, .h4+.h1, h5+.h1, .h5+.h1, h6+.h1, .h6+.h1, h1+h2, .h1+h2, h2+h2, .h2+h2, h3+h2, .h3+h2, h4+h2, .h4+h2, h5+h2, .h5+h2, h6+h2, .h6+h2, h1+.h2, .h1+.h2, h2+.h2, .h2+.h2, h3+.h2, .h3+.h2, h4+.h2, .h4+.h2, h5+.h2, .h5+.h2, h6+.h2, .h6+.h2, h1+h3, .h1+h3, h2+h3, .h2+h3, h3+h3, .h3+h3, h4+h3, .h4+h3, h5+h3, .h5+h3, h6+h3, .h6+h3, h1+.h3, .h1+.h3, h2+.h3, .h2+.h3, h3+.h3, .h3+.h3, h4+.h3, .h4+.h3, h5+.h3, .h5+.h3, h6+.h3, .h6+.h3, h1+h4, .h1+h4, h2+h4, .h2+h4, h3+h4, .h3+h4, h4+h4, .h4+h4, h5+h4, .h5+h4, h6+h4, .h6+h4, h1+.h4, .h1+.h4, h2+.h4, .h2+.h4, h3+.h4, .h3+.h4, h4+.h4, .h4+.h4, h5+.h4, .h5+.h4, h6+.h4, .h6+.h4, h1+h5, .h1+h5, h2+h5, .h2+h5, h3+h5, .h3+h5, h4+h5, .h4+h5, h5+h5, .h5+h5, h6+h5, .h6+h5, h1+.h5, .h1+.h5, h2+.h5, .h2+.h5, h3+.h5, .h3+.h5, h4+.h5, .h4+.h5, h5+.h5, .h5+.h5, h6+.h5, .h6+.h5, h1+h6, .h1+h6, h2+h6, .h2+h6, h3+h6, .h3+h6, h4+h6, .h4+h6, h5+h6, .h5+h6, h6+h6, .h6+h6, h1+.h6, .h1+.h6, h2+.h6, .h2+.h6, h3+.h6, .h3+.h6, h4+.h6, .h4+.h6, h5+.h6, .h5+.h6, h6+.h6, .h6+.h6 {
  margin-top: 0
}

h1, .h1 {
  font-size: 2.5em;
  font-weight: 700
}

h2, .h2 {
  font-size: 2em;
  font-weight: 700;
  border-bottom: 1px solid #dadada;
  padding-bottom: .5rem
}

h3, .h3 {
  font-size: 1.75em;
  font-weight: 500
}

h4, .h4 {
  font-size: 1.5em
}

h5, .h5 {
  font-size: 1.25em
}

h6, .h6 {
  font-size: 1em
}

small, .text-small {
  font-size: .75em
}

p {
  margin: 0 0 1.25rem 0
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: .0625em solid;
  border-color: inherit;
  padding-bottom: .125em
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top
}

hr {
  border: 0;
  border-top: 1px solid #dadada;
  margin: 0 0 1.25rem 0
}

::-moz-selection {
  background: rgba(246, 208, 0, 0.99);
  color: #253951
}

::selection {
  background: rgba(246, 208, 0, 0.99);
  color: #253951
}

blockquote {
  margin: 0 0 1.25rem 0
}

q {
  color: #253951
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0 0 1.25rem 0
}

ul li {
  position: relative;
  padding-left: 1.875rem;
  margin-bottom: .3125rem
}

ul li:before {
  content: '\2014';
  color: #a0a0a0;
  position: absolute;
  left: 0
}

dl {
  margin: 0 0 1.25rem 0
}

dl dt {
  color: #8a8a8a;
  font-weight: 700
}

dl dd {
  margin: 0
}

acronym, em {
  font-style: italic
}

table {
  width: 100%;
  text-align: left;
  font-size: 1em;
  border-collapse: collapse;
  margin: 0 0 1.25rem 0
}

table th, table td {
  border: 2px solid #f5f5f5;
  vertical-align: middle;
  padding: .625rem .9375rem
}

@media (min-width: 768px) {
  table th, table td {
      padding: .8125rem 1.25rem
  }
}

table th a, table td a {
  border-color: #333
}

table th {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  background-color: transparent;
  border-color: #ececec
}

.table-responsive {
  width: 100%;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.25rem 0
}

@media (min-width: 768px) {
  .table-responsive {
      overflow-x: visible
  }
}

.table-responsive table {
  min-width: 43.75rem;
  margin: 0
}

@media (min-width: 768px) {
  .table-responsive table {
      min-width: 0;
      margin: 0
  }
}

iframe {
  display: block;
  border: 0;
  margin: 0 0 1.25rem 0
}

button {
  border: 0;
  padding: 0;
  background-color: transparent
}

button:focus {
  outline: none
}

code, kbd, tt {
  font-family: "Source Code Pro", monospace;
  color: #c0341d;
  background-color: #fcefed;
  border-radius: .1875rem;
  padding: .125rem .375rem .1875rem .375rem
}

pre {
  overflow: auto;
  border-left: 8px solid #3c4654;
  margin: 0 0 1.25rem 0;
  -webkit-overflow-scrolling: touch
}

pre code {
  color: #f8f8f2;
  background-color: transparent;
  border-radius: 0;
  padding: 0
}

.highlight .hll {
  background-color: #49483e
}

pre.highlight {
  background: #212733;
  color: #f8f8f2;
  padding: 1.5625rem
}

.highlight .c {
  color: #75715e
}

.highlight .err {
  color: #960050;
  background-color: #1e0010
}

.highlight .k {
  color: #66d9ef
}

.highlight .l {
  color: #ae81ff
}

.highlight .n {
  color: #f8f8f2
}

.highlight .o {
  color: #f92672
}

.highlight .p {
  color: #f8f8f2
}

.highlight .ch {
  color: #75715e
}

.highlight .cm {
  color: #75715e
}

.highlight .cp {
  color: #75715e
}

.highlight .cpf {
  color: #75715e
}

.highlight .c1 {
  color: #75715e
}

.highlight .cs {
  color: #75715e
}

.highlight .gd {
  color: #f92672
}

.highlight .ge {
  font-style: italic
}

.highlight .gi {
  color: #a6e22e
}

.highlight .gs {
  font-weight: bold
}

.highlight .gu {
  color: #75715e
}

.highlight .kc {
  color: #66d9ef
}

.highlight .kd {
  color: #66d9ef
}

.highlight .kn {
  color: #f92672
}

.highlight .kp {
  color: #66d9ef
}

.highlight .kr {
  color: #66d9ef
}

.highlight .kt {
  color: #66d9ef
}

.highlight .ld {
  color: #e6db74
}

.highlight .m {
  color: #ae81ff
}

.highlight .s {
  color: #e6db74
}

.highlight .na {
  color: #a6e22e
}

.highlight .nb {
  color: #f8f8f2
}

.highlight .nc {
  color: #a6e22e
}

.highlight .no {
  color: #66d9ef
}

.highlight .nd {
  color: #a6e22e
}

.highlight .ni {
  color: #f8f8f2
}

.highlight .ne {
  color: #a6e22e
}

.highlight .nf {
  color: #a6e22e
}

.highlight .nl {
  color: #f8f8f2
}

.highlight .nn {
  color: #f8f8f2
}

.highlight .nx {
  color: #a6e22e
}

.highlight .py {
  color: #f8f8f2
}

.highlight .nt {
  color: #f92672
}

.highlight .nv {
  color: #f8f8f2
}

.highlight .ow {
  color: #f92672
}

.highlight .w {
  color: #f8f8f2
}

.highlight .mb {
  color: #ae81ff
}

.highlight .mf {
  color: #ae81ff
}

.highlight .mh {
  color: #ae81ff
}

.highlight .mi {
  color: #ae81ff
}

.highlight .mo {
  color: #ae81ff
}

.highlight .sa {
  color: #e6db74
}

.highlight .sb {
  color: #e6db74
}

.highlight .sc {
  color: #e6db74
}

.highlight .dl {
  color: #e6db74
}

.highlight .sd {
  color: #e6db74
}

.highlight .s2 {
  color: #e6db74
}

.highlight .se {
  color: #ae81ff
}

.highlight .sh {
  color: #e6db74
}

.highlight .si {
  color: #e6db74
}

.highlight .sx {
  color: #e6db74
}

.highlight .sr {
  color: #e6db74
}

.highlight .s1 {
  color: #e6db74
}

.highlight .ss {
  color: #e6db74
}

.highlight .bp {
  color: #f8f8f2
}

.highlight .fm {
  color: #a6e22e
}

.highlight .vc {
  color: #f8f8f2
}

.highlight .vg {
  color: #f8f8f2
}

.highlight .vi {
  color: #f8f8f2
}

.highlight .vm {
  color: #f8f8f2
}

.highlight .il {
  color: #ae81ff
}

.align-container {
  display: table;
  width: 100%;
  height: 100%
}

.align-inner {
  display: table-cell;
  vertical-align: middle
}

.align-inner--top {
  vertical-align: top
}

.align-inner--bottom {
  vertical-align: bottom
}

@media (min-width: 768px) {
  .align-right {
      text-align: right
  }
}

@-ms-viewport {
  width: device-width
}

.visible-xs {
  display: none !important
}

.visible-sm {
  display: none !important
}

.visible-md {
  display: none !important
}

.visible-lg {
  display: none !important
}

.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block {
  display: none !important
}

@media (max-width: 767px) {
  .visible-xs {
      display: block !important
  }

  table.visible-xs {
      display: table !important
  }

  tr.visible-xs {
      display: table-row !important
  }

  th.visible-xs, td.visible-xs {
      display: table-cell !important
  }
}

@media (max-width: 767px) {
  .visible-xs-block {
      display: block !important
  }
}

@media (max-width: 767px) {
  .visible-xs-inline {
      display: inline !important
  }
}

@media (max-width: 767px) {
  .visible-xs-inline-block {
      display: inline-block !important
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
      display: block !important
  }

  table.visible-sm {
      display: table !important
  }

  tr.visible-sm {
      display: table-row !important
  }

  th.visible-sm, td.visible-sm {
      display: table-cell !important
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
      display: block !important
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline {
      display: inline !important
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline-block {
      display: inline-block !important
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
      display: block !important
  }

  table.visible-md {
      display: table !important
  }

  tr.visible-md {
      display: table-row !important
  }

  th.visible-md, td.visible-md {
      display: table-cell !important
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-block {
      display: block !important
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline {
      display: inline !important
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline-block {
      display: inline-block !important
  }
}

@media (min-width: 1200px) {
  .visible-lg {
      display: block !important
  }

  table.visible-lg {
      display: table !important
  }

  tr.visible-lg {
      display: table-row !important
  }

  th.visible-lg, td.visible-lg {
      display: table-cell !important
  }
}

@media (min-width: 1200px) {
  .visible-lg-block {
      display: block !important
  }
}

@media (min-width: 1200px) {
  .visible-lg-inline {
      display: inline !important
  }
}

@media (min-width: 1200px) {
  .visible-lg-inline-block {
      display: inline-block !important
  }
}

@media (max-width: 767px) {
  .hidden-xs {
      display: none !important
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
      display: none !important
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
      display: none !important
  }
}

@media (min-width: 1200px) {
  .hidden-lg {
      display: none !important
  }
}

.btn {
  border-bottom: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  display: inline-block;
  margin: 0 0 1.25rem 0
}

.btn--full-width {
  display: block;
  width: 100%
}

.btn--rounded {
  border-radius: 3.125rem
}

.btn--dark, .hero-subheader .btn--github, .hero-subheader .btn--w-arrow-down {
  color: #fff;
  background-color: white;
  padding: .5625rem 1.5625rem;
  transition: color .2s, background-color .2s
}

@media (min-width: 768px) {
  .btn--dark, .hero-subheader .btn--github, .hero-subheader .btn--w-arrow-down {
      padding: .8125rem 2.1875rem
  }
}

.btn--dark:hover, .hero-subheader .btn--github:hover, .hero-subheader .btn--w-arrow-down:hover, .btn--dark:focus, .hero-subheader .btn--github:focus, .hero-subheader .btn--w-arrow-down:focus, .btn--dark:active, .hero-subheader .btn--github:active, .hero-subheader .btn--w-arrow-down:active {
  color: white;
  background-color: #f6d000
}

.btn--w-icon .icon, .btn--w-icon .example a::after, .example .btn--w-icon a::after, .btn--w-icon .sections-list ul li.has-submenu::after, .sections-list ul .btn--w-icon li.has-submenu::after {
  float: right;
  font-size: 1.375rem;
  margin-left: .75rem;
  position: relative;
  bottom: -.125rem
}

.btn--w-icon-left .icon, .btn--w-icon-left .example a::after, .example .btn--w-icon-left a::after, .btn--w-icon-left .sections-list ul li.has-submenu::after, .sections-list ul .btn--w-icon-left li.has-submenu::after {
  float: left;
  margin-left: 0;
  margin-right: .75rem
}

.btn--read-more {
  text-transform: uppercase
}

.btn--read-more .icon, .btn--read-more .example a::after, .example .btn--read-more a::after, .btn--read-more .sections-list ul li.has-submenu::after, .sections-list ul .btn--read-more li.has-submenu::after {
  display: inline-block;
  margin-left: .625rem;
  transition: transform .2s
}

.btn--read-more:hover .icon, .btn--read-more:hover .example a::after, .example .btn--read-more:hover a::after, .btn--read-more:hover .sections-list ul li.has-submenu::after, .sections-list ul .btn--read-more:hover li.has-submenu::after, .btn--read-more:focus .icon, .btn--read-more:focus .example a::after, .example .btn--read-more:focus a::after, .btn--read-more:focus .sections-list ul li.has-submenu::after, .sections-list ul .btn--read-more:focus li.has-submenu::after, .btn--read-more:active .icon, .btn--read-more:active .example a::after, .example .btn--read-more:active a::after, .btn--read-more:active .sections-list ul li.has-submenu::after, .sections-list ul .btn--read-more:active li.has-submenu::after {
  -webkit-transform: translate(.3125rem, 0);
  -moz-transform: translate(.3125rem, 0);
  -ms-transform: translate(.3125rem, 0);
  transform: translate(.3125rem, 0)
}

.content>:first-child {
  margin-top: 0
}

.error-404 {
  background-color: #E8F2FC;
  text-align: center
}

.error-404 .align-container {
  height: 100vh
}

.error-404__title {
  color: white;
  font-weight: normal;
  font-size: 1.75em;
  margin-top: 0
}

@media (min-width: 768px) {
  .error-404__title {
      font-size: 2.5em
  }
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px
}

.container::before, .container::after {
  content: ' ';
  display: table
}

.container::after {
  clear: both
}

@media (min-width: 768px) {
  .container {
      width: 750px
  }
}

@media (min-width: 992px) {
  .container {
      width: 970px
  }
}

@media (min-width: 1200px) {
  .container {
      width: 1170px
  }
}

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px
}

.container-fluid::before, .container-fluid::after {
  content: ' ';
  display: table
}

.container-fluid::after {
  clear: both
}

.row {
  margin-left: -15px;
  margin-right: -15px
}

.row::before, .row::after {
  content: ' ';
  display: table
}

.row::after {
  clear: both
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left
}

.col-xs-1 {
  width: 8.3333333333%
}

.col-xs-2 {
  width: 16.6666666667%
}

.col-xs-3 {
  width: 25%
}

.col-xs-4 {
  width: 33.3333333333%
}

.col-xs-5 {
  width: 41.6666666667%
}

.col-xs-6 {
  width: 50%
}

.col-xs-7 {
  width: 58.3333333333%
}

.col-xs-8 {
  width: 66.6666666667%
}

.col-xs-9 {
  width: 75%
}

.col-xs-10 {
  width: 83.3333333333%
}

.col-xs-11 {
  width: 91.6666666667%
}

.col-xs-12 {
  width: 100%
}

.col-xs-pull-0 {
  right: auto
}

.col-xs-pull-1 {
  right: 8.3333333333%
}

.col-xs-pull-2 {
  right: 16.6666666667%
}

.col-xs-pull-3 {
  right: 25%
}

.col-xs-pull-4 {
  right: 33.3333333333%
}

.col-xs-pull-5 {
  right: 41.6666666667%
}

.col-xs-pull-6 {
  right: 50%
}

.col-xs-pull-7 {
  right: 58.3333333333%
}

.col-xs-pull-8 {
  right: 66.6666666667%
}

.col-xs-pull-9 {
  right: 75%
}

.col-xs-pull-10 {
  right: 83.3333333333%
}

.col-xs-pull-11 {
  right: 91.6666666667%
}

.col-xs-pull-12 {
  right: 100%
}

.col-xs-push-0 {
  left: auto
}

.col-xs-push-1 {
  left: 8.3333333333%
}

.col-xs-push-2 {
  left: 16.6666666667%
}

.col-xs-push-3 {
  left: 25%
}

.col-xs-push-4 {
  left: 33.3333333333%
}

.col-xs-push-5 {
  left: 41.6666666667%
}

.col-xs-push-6 {
  left: 50%
}

.col-xs-push-7 {
  left: 58.3333333333%
}

.col-xs-push-8 {
  left: 66.6666666667%
}

.col-xs-push-9 {
  left: 75%
}

.col-xs-push-10 {
  left: 83.3333333333%
}

.col-xs-push-11 {
  left: 91.6666666667%
}

.col-xs-push-12 {
  left: 100%
}

.col-xs-offset-0 {
  margin-left: 0%
}

.col-xs-offset-1 {
  margin-left: 8.3333333333%
}

.col-xs-offset-2 {
  margin-left: 16.6666666667%
}

.col-xs-offset-3 {
  margin-left: 25%
}

.col-xs-offset-4 {
  margin-left: 33.3333333333%
}

.col-xs-offset-5 {
  margin-left: 41.6666666667%
}

.col-xs-offset-6 {
  margin-left: 50%
}

.col-xs-offset-7 {
  margin-left: 58.3333333333%
}

.col-xs-offset-8 {
  margin-left: 66.6666666667%
}

.col-xs-offset-9 {
  margin-left: 75%
}

.col-xs-offset-10 {
  margin-left: 83.3333333333%
}

.col-xs-offset-11 {
  margin-left: 91.6666666667%
}

.col-xs-offset-12 {
  margin-left: 100%
}

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
      float: left
  }

  .col-sm-1 {
      width: 8.3333333333%
  }

  .col-sm-2 {
      width: 16.6666666667%
  }

  .col-sm-3 {
      width: 25%
  }

  .col-sm-4 {
      width: 33.3333333333%
  }

  .col-sm-5 {
      width: 41.6666666667%
  }

  .col-sm-6 {
      width: 50%
  }

  .col-sm-7 {
      width: 58.3333333333%
  }

  .col-sm-8 {
      width: 66.6666666667%
  }

  .col-sm-9 {
      width: 75%
  }

  .col-sm-10 {
      width: 83.3333333333%
  }

  .col-sm-11 {
      width: 91.6666666667%
  }

  .col-sm-12 {
      width: 100%
  }

  .col-sm-pull-0 {
      right: auto
  }

  .col-sm-pull-1 {
      right: 8.3333333333%
  }

  .col-sm-pull-2 {
      right: 16.6666666667%
  }

  .col-sm-pull-3 {
      right: 25%
  }

  .col-sm-pull-4 {
      right: 33.3333333333%
  }

  .col-sm-pull-5 {
      right: 41.6666666667%
  }

  .col-sm-pull-6 {
      right: 50%
  }

  .col-sm-pull-7 {
      right: 58.3333333333%
  }

  .col-sm-pull-8 {
      right: 66.6666666667%
  }

  .col-sm-pull-9 {
      right: 75%
  }

  .col-sm-pull-10 {
      right: 83.3333333333%
  }

  .col-sm-pull-11 {
      right: 91.6666666667%
  }

  .col-sm-pull-12 {
      right: 100%
  }

  .col-sm-push-0 {
      left: auto
  }

  .col-sm-push-1 {
      left: 8.3333333333%
  }

  .col-sm-push-2 {
      left: 16.6666666667%
  }

  .col-sm-push-3 {
      left: 25%
  }

  .col-sm-push-4 {
      left: 33.3333333333%
  }

  .col-sm-push-5 {
      left: 41.6666666667%
  }

  .col-sm-push-6 {
      left: 50%
  }

  .col-sm-push-7 {
      left: 58.3333333333%
  }

  .col-sm-push-8 {
      left: 66.6666666667%
  }

  .col-sm-push-9 {
      left: 75%
  }

  .col-sm-push-10 {
      left: 83.3333333333%
  }

  .col-sm-push-11 {
      left: 91.6666666667%
  }

  .col-sm-push-12 {
      left: 100%
  }

  .col-sm-offset-0 {
      margin-left: 0%
  }

  .col-sm-offset-1 {
      margin-left: 8.3333333333%
  }

  .col-sm-offset-2 {
      margin-left: 16.6666666667%
  }

  .col-sm-offset-3 {
      margin-left: 25%
  }

  .col-sm-offset-4 {
      margin-left: 33.3333333333%
  }

  .col-sm-offset-5 {
      margin-left: 41.6666666667%
  }

  .col-sm-offset-6 {
      margin-left: 50%
  }

  .col-sm-offset-7 {
      margin-left: 58.3333333333%
  }

  .col-sm-offset-8 {
      margin-left: 66.6666666667%
  }

  .col-sm-offset-9 {
      margin-left: 75%
  }

  .col-sm-offset-10 {
      margin-left: 83.3333333333%
  }

  .col-sm-offset-11 {
      margin-left: 91.6666666667%
  }

  .col-sm-offset-12 {
      margin-left: 100%
  }
}

@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
      float: left
  }

  .col-md-1 {
      width: 8.3333333333%
  }

  .col-md-2 {
      width: 16.6666666667%
  }

  .col-md-3 {
      width: 25%
  }

  .col-md-4 {
      width: 33.3333333333%
  }

  .col-md-5 {
      width: 41.6666666667%
  }

  .col-md-6 {
      width: 50%
  }

  .col-md-7 {
      width: 58.3333333333%
  }

  .col-md-8 {
      width: 66.6666666667%
  }

  .col-md-9 {
      width: 75%
  }

  .col-md-10 {
      width: 83.3333333333%
  }

  .col-md-11 {
      width: 91.6666666667%
  }

  .col-md-12 {
      width: 100%
  }

  .col-md-pull-0 {
      right: auto
  }

  .col-md-pull-1 {
      right: 8.3333333333%
  }

  .col-md-pull-2 {
      right: 16.6666666667%
  }

  .col-md-pull-3 {
      right: 25%
  }

  .col-md-pull-4 {
      right: 33.3333333333%
  }

  .col-md-pull-5 {
      right: 41.6666666667%
  }

  .col-md-pull-6 {
      right: 50%
  }

  .col-md-pull-7 {
      right: 58.3333333333%
  }

  .col-md-pull-8 {
      right: 66.6666666667%
  }

  .col-md-pull-9 {
      right: 75%
  }

  .col-md-pull-10 {
      right: 83.3333333333%
  }

  .col-md-pull-11 {
      right: 91.6666666667%
  }

  .col-md-pull-12 {
      right: 100%
  }

  .col-md-push-0 {
      left: auto
  }

  .col-md-push-1 {
      left: 8.3333333333%
  }

  .col-md-push-2 {
      left: 16.6666666667%
  }

  .col-md-push-3 {
      left: 25%
  }

  .col-md-push-4 {
      left: 33.3333333333%
  }

  .col-md-push-5 {
      left: 41.6666666667%
  }

  .col-md-push-6 {
      left: 50%
  }

  .col-md-push-7 {
      left: 58.3333333333%
  }

  .col-md-push-8 {
      left: 66.6666666667%
  }

  .col-md-push-9 {
      left: 75%
  }

  .col-md-push-10 {
      left: 83.3333333333%
  }

  .col-md-push-11 {
      left: 91.6666666667%
  }

  .col-md-push-12 {
      left: 100%
  }

  .col-md-offset-0 {
      margin-left: 0%
  }

  .col-md-offset-1 {
      margin-left: 8.3333333333%
  }

  .col-md-offset-2 {
      margin-left: 16.6666666667%
  }

  .col-md-offset-3 {
      margin-left: 25%
  }

  .col-md-offset-4 {
      margin-left: 33.3333333333%
  }

  .col-md-offset-5 {
      margin-left: 41.6666666667%
  }

  .col-md-offset-6 {
      margin-left: 50%
  }

  .col-md-offset-7 {
      margin-left: 58.3333333333%
  }

  .col-md-offset-8 {
      margin-left: 66.6666666667%
  }

  .col-md-offset-9 {
      margin-left: 75%
  }

  .col-md-offset-10 {
      margin-left: 83.3333333333%
  }

  .col-md-offset-11 {
      margin-left: 91.6666666667%
  }

  .col-md-offset-12 {
      margin-left: 100%
  }
}

@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
      float: left
  }

  .col-lg-1 {
      width: 8.3333333333%
  }

  .col-lg-2 {
      width: 16.6666666667%
  }

  .col-lg-3 {
      width: 25%
  }

  .col-lg-4 {
      width: 33.3333333333%
  }

  .col-lg-5 {
      width: 41.6666666667%
  }

  .col-lg-6 {
      width: 50%
  }

  .col-lg-7 {
      width: 58.3333333333%
  }

  .col-lg-8 {
      width: 66.6666666667%
  }

  .col-lg-9 {
      width: 75%
  }

  .col-lg-10 {
      width: 83.3333333333%
  }

  .col-lg-11 {
      width: 91.6666666667%
  }

  .col-lg-12 {
      width: 100%
  }

  .col-lg-pull-0 {
      right: auto
  }

  .col-lg-pull-1 {
      right: 8.3333333333%
  }

  .col-lg-pull-2 {
      right: 16.6666666667%
  }

  .col-lg-pull-3 {
      right: 25%
  }

  .col-lg-pull-4 {
      right: 33.3333333333%
  }

  .col-lg-pull-5 {
      right: 41.6666666667%
  }

  .col-lg-pull-6 {
      right: 50%
  }

  .col-lg-pull-7 {
      right: 58.3333333333%
  }

  .col-lg-pull-8 {
      right: 66.6666666667%
  }

  .col-lg-pull-9 {
      right: 75%
  }

  .col-lg-pull-10 {
      right: 83.3333333333%
  }

  .col-lg-pull-11 {
      right: 91.6666666667%
  }

  .col-lg-pull-12 {
      right: 100%
  }

  .col-lg-push-0 {
      left: auto
  }

  .col-lg-push-1 {
      left: 8.3333333333%
  }

  .col-lg-push-2 {
      left: 16.6666666667%
  }

  .col-lg-push-3 {
      left: 25%
  }

  .col-lg-push-4 {
      left: 33.3333333333%
  }

  .col-lg-push-5 {
      left: 41.6666666667%
  }

  .col-lg-push-6 {
      left: 50%
  }

  .col-lg-push-7 {
      left: 58.3333333333%
  }

  .col-lg-push-8 {
      left: 66.6666666667%
  }

  .col-lg-push-9 {
      left: 75%
  }

  .col-lg-push-10 {
      left: 83.3333333333%
  }

  .col-lg-push-11 {
      left: 91.6666666667%
  }

  .col-lg-push-12 {
      left: 100%
  }

  .col-lg-offset-0 {
      margin-left: 0%
  }

  .col-lg-offset-1 {
      margin-left: 8.3333333333%
  }

  .col-lg-offset-2 {
      margin-left: 16.6666666667%
  }

  .col-lg-offset-3 {
      margin-left: 25%
  }

  .col-lg-offset-4 {
      margin-left: 33.3333333333%
  }

  .col-lg-offset-5 {
      margin-left: 41.6666666667%
  }

  .col-lg-offset-6 {
      margin-left: 50%
  }

  .col-lg-offset-7 {
      margin-left: 58.3333333333%
  }

  .col-lg-offset-8 {
      margin-left: 66.6666666667%
  }

  .col-lg-offset-9 {
      margin-left: 75%
  }

  .col-lg-offset-10 {
      margin-left: 83.3333333333%
  }

  .col-lg-offset-11 {
      margin-left: 91.6666666667%
  }

  .col-lg-offset-12 {
      margin-left: 100%
  }
}

@font-face {
  font-family: 'icons';
  src: url("../fonts/icons/icons.ttf") format("truetype"), url("../fonts/icons/icons.woff") format("woff"), url("../fonts/icons/icons.svg#icons") format("svg");
  font-weight: normal;
  font-style: normal
}

.icon, .example a::after, .sections-list ul li.has-submenu::after {
  font-family: 'icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1
}

.icon--behance::before {
  content: '\e900'
}

.icon--bitbucket::before {
  content: '\e901'
}

.icon--codepen::before {
  content: '\e902'
}

.icon--dribbble::before {
  content: '\e903'
}

.icon--dropbox::before {
  content: '\e904'
}

.icon--facebook::before {
  content: '\e905'
}

.icon--github::before {
  content: '\e906'
}

.icon--gitlab::before {
  content: '\e907'
}

.icon--google-plus::before {
  content: '\e908'
}

.icon--gulp::before {
  content: '\e909'
}

.icon--instagram::before {
  content: '\e90a'
}

.icon--kickstarter::before {
  content: '\e90b'
}

.icon--linkedin::before {
  content: '\e90c'
}

.icon--medium::before {
  content: '\e90d'
}

.icon--meetup::before {
  content: '\e90e'
}

.icon--pocket::before {
  content: '\e90f'
}

.icon--producthunt::before {
  content: '\e910'
}

.icon--reddit::before {
  content: '\e911'
}

.icon--skype::before {
  content: '\e912'
}

.icon--slack::before {
  content: '\e913'
}

.icon--stackoverflow::before {
  content: '\e914'
}

.icon--trello::before {
  content: '\e915'
}

.icon--tumblr::before {
  content: '\e916'
}

.icon--twitter::before {
  content: '\e917'
}

.icon--youtube::before {
  content: '\e918'
}

.icon--arrow-down::before {
  content: '\e919'
}

.icon--arrow-left::before {
  content: '\e91a'
}

.icon--arrow-right::before {
  content: '\e91b'
}

.icon--arrow-up::before {
  content: '\e91c'
}

.icon--chevron-down::before {
  content: '\e91d'
}

.icon--chevron-left::before {
  content: '\e91e'
}

.icon--chevron-right::before {
  content: '\e91f'
}

.icon--chevron-up::before {
  content: '\e920'
}

.icon--home::before {
  content: '\e921'
}

.icon--maximize::before {
  content: '\e922'
}

.icon--x::before {
  content: '\e923'
}

.icon--discord::before {
  content: '\e924'
}

.icon--sphere::before {
  content: '\e925'
}

.section {
  padding: 3.75rem 0 2.5rem 0
}

@media (min-width: 768px) {
  .section {
      padding: 6.25rem 0 5rem 0
  }
}

.section--darker-theme-color-bg {
  background-color: #08131e;
}

.section--grey {
  background-color: transparent
}

.callout {
  border: 2px solid #efefef;
  background-color: transparent
  padding: .9375rem 1.25rem .625rem 1.25rem;
  margin: 0 0 1.25rem 0
}

@media (min-width: 768px) {
  .callout {
      padding: 1.25rem 1.875rem .9375rem 1.875rem
  }
}

.callout p {
  font-size: .9375em;
  line-height: 1.8em;
  margin-bottom: .625rem
}

.callout strong {
  display: block;
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 1.133em;
  font-weight: 500;
  margin-bottom: .625rem
}

.callout--success {
  background-color: #eaffee;
  border-color: #cbffd5
}

.callout--success strong {
  color: #00470d
}

.callout--info {
  background-color: #f2f8ff;
  border-color: #deedff
}

.callout--info strong {
  color: #00244f
}

.callout--warning {
  background-color: #fffae9;
  border-color: #ffeeb6
}

.callout--warning strong {
  color: #836500
}

.callout--danger {
  background-color: #ffedeb;
  border-color: #ffdbd7
}

.callout--danger strong {
  color: #850d00
}

.example {
  overflow: hidden;
  color: #fff;
  background-color: #3c4654;
  padding: .625rem .625rem .625rem 1.4375rem
}

.example::before {
  content: 'Example';
  display: inline-block;
  margin-top: .25rem;
  margin-bottom: .25rem;
  text-transform: uppercase
}

.example a {
  border-bottom: 0;
  padding: 0;
  display: block;
  float: right;
  color: white;
  font-size: .875em;
  background-color: #fff;
  border-radius: 1.25rem;
  padding: .25rem 1.25rem .3125rem 1.25rem;
  transition: background-color .2s
}

.example a:hover, .example a:focus, .example a:active {
  background-color: #f6d000
}

.example a::after {
  content: '\e922';
  display: inline-block;
  position: relative;
  top: .125rem;
  margin-left: .5rem
}

.hero-subheader {
  color: white;
  background-color: transparent;
  padding: 3.75rem 0 3.4375rem 0
}

@media (min-width: 768px) {
  .hero-subheader {
      padding: 9.375rem 0 9.0625rem 0
  }
}

.hero-subheader .btn {
  margin-right: .9375rem
}

.site-header+.hero-subheader {
  padding: 9.375rem 0 3.4375rem 0
}

@media (min-width: 768px) {
  .site-header+.hero-subheader {
      padding: 15rem 0 9.0625rem 0
  }
}

@media (min-width: 768px) {
  .hero-subheader--before-out {
      padding: 9.375rem 0 14.0625rem 0
  }
}

.hero-subheader__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: bold;
  margin-top: 0
}

.hero-subheader__desc {
  margin-bottom: 1.875rem
}

.hero-subheader__author {
  border-left: 2px solid;
  padding-left: 2.5rem
}

.hero-subheader__author .btn {
  margin-bottom: 0
}

.hero-subheader__author-title {
  font-size: 1.25em
}

.hero-subheader__btn-more {
  color: inherit
}

.micro-nav {
  color: #fff;
  background-color: white;
  padding: .9375rem 0;
  text-align: center
}

@media (min-width: 768px) {
  .micro-nav {
      text-align: left
  }
}

.micro-nav__back {
  border-bottom: 0;
  padding: 0;
  display: inline-block;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase
}

.micro-nav__back:hover .icon, .micro-nav__back:hover .example a::after, .example .micro-nav__back:hover a::after, .micro-nav__back:hover .sections-list ul li.has-submenu::after, .sections-list ul .micro-nav__back:hover li.has-submenu::after, .micro-nav__back:focus .icon, .micro-nav__back:focus .example a::after, .example .micro-nav__back:focus a::after, .micro-nav__back:focus .sections-list ul li.has-submenu::after, .sections-list ul .micro-nav__back:focus li.has-submenu::after, .micro-nav__back:active .icon, .micro-nav__back:active .example a::after, .example .micro-nav__back:active a::after, .micro-nav__back:active .sections-list ul li.has-submenu::after, .sections-list ul .micro-nav__back:active li.has-submenu::after {
  -webkit-transform: translate(-0.3125rem, 0);
  -moz-transform: translate(-0.3125rem, 0);
  -ms-transform: translate(-0.3125rem, 0);
  transform: translate(-0.3125rem, 0)
}

.micro-nav__back .icon, .micro-nav__back .example a::after, .example .micro-nav__back a::after, .micro-nav__back .sections-list ul li.has-submenu::after, .sections-list ul .micro-nav__back li.has-submenu::after {
  display: inline-block;
  margin-right: .5rem;
  position: relative;
  bottom: -.125rem;
  transition: transform .2s
}

.nav-grid {
  font-size: .9375em;
  line-height: 1.8em;
  color: white;
  justify-content: space-between
}

@media (min-width: 768px) {
  .nav-grid--out {
      margin-top: -11.25rem
  }
}

.nav-grid__item {
  flex: 1;
  border-bottom: 0;
  padding: 0;
  display: block;
  background-color: #05a558;
  border: 2px solid #05a558;
  margin-bottom: .9375rem;
  transition: background-color .2s, border .2s
}

@media (min-width: 768px) {
  .nav-grid__item {
      margin-bottom: 1.875rem

  }
}

.nav-grid__item:hover, .nav-grid__item:active, .nav-grid__item:focus {
  border-color: #198754;
  background-color: #198754;
  color: white
}

.nav-grid__item:hover .nav-grid__btn, .nav-grid__item:active .nav-grid__btn, .nav-grid__item:focus .nav-grid__btn {
  border-color: #198754;
  background-color: #198754;
  color: white
}

.nav-grid__item:hover .nav-grid__btn .icon, .nav-grid__item:hover .nav-grid__btn .example a::after, .example .nav-grid__item:hover .nav-grid__btn a::after, .nav-grid__item:hover .nav-grid__btn .sections-list ul li.has-submenu::after, .sections-list ul .nav-grid__item:hover .nav-grid__btn li.has-submenu::after, .nav-grid__item:active .nav-grid__btn .icon, .nav-grid__item:active .nav-grid__btn .example a::after, .example .nav-grid__item:active .nav-grid__btn a::after, .nav-grid__item:active .nav-grid__btn .sections-list ul li.has-submenu::after, .sections-list ul .nav-grid__item:active .nav-grid__btn li.has-submenu::after, .nav-grid__item:focus .nav-grid__btn .icon, .nav-grid__item:focus .nav-grid__btn .example a::after, .example .nav-grid__item:focus .nav-grid__btn a::after, .nav-grid__item:focus .nav-grid__btn .sections-list ul li.has-submenu::after, .sections-list ul .nav-grid__item:focus .nav-grid__btn li.has-submenu::after {
  -webkit-transform: translate(.625rem, 0);
  -moz-transform: translate(.625rem, 0);
  -ms-transform: translate(.625rem, 0);
  transform: translate(.625rem, 0)
}

.nav-grid__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.nav-grid__content::before, .nav-grid__content::after {
  content: ' ';
  display: table
}

.nav-grid__content::after {
  clear: both
}

@media (min-width: 992px) {
  .nav-grid__content {
      padding: 1.875rem 2.5rem 1.25rem 2.5rem
  }
}

.nav-grid__content p {
  margin-bottom: .625rem
}

.nav-grid__title {
  font-family: "Space Grotesk", sans-serif;
  text-align: center;
  display: block;
  font-size: 1.75em;
  font-weight: bold;
  padding: 0;
  margin-top: 0;
  border: 0
}

.nav-grid__btn {
  text-align: center;
  margin-top: auto;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  width: auto;
  text-transform: uppercase;
  border-top: 2px solid rgba(37, 57, 81, 0.2);
  padding: 1.25rem 1.875rem 0 1.875rem;
  transition: border .2s
}

@media (min-width: 992px) {
  .nav-grid__btn {
      padding: 1.25rem 2.5rem 0 2.5rem
  }
}

.nav-grid__btn .icon, .nav-grid__btn .example a::after, .example .nav-grid__btn a::after, .nav-grid__btn .sections-list ul li.has-submenu::after, .sections-list ul .nav-grid__btn li.has-submenu::after {
  display: inline-block;
  font-size: 1.25em;
  margin-left: .5rem;
  position: relative;
  bottom: -.125rem;
  transition: transform .2s
}

.page-nav {
  color: white;
  background-color: #E8F2FC;
  padding: 1.25rem 0
}

@media (min-width: 768px) {
  .page-nav {
      padding: 2.1875rem 0 2.5rem 0
  }
}

.page-nav__item {
  border-bottom: 0;
  padding: 0;
  display: block;
  text-align: center;
  font-weight: 500;
  font-family: "Montserrat", sans-serif
}

@media (min-width: 768px) {
  .page-nav__item {
      font-size: 1.75em
  }
}

.page-nav__item+.page-nav__item {
  border-top: 1px solid rgba(51, 51, 51, 0.15);
  padding-top: 1.25rem;
  margin-top: 1.25rem
}

@media (min-width: 768px) {
  .page-nav__item+.page-nav__item {
      border-top: 0;
      padding-top: 0;
      margin-top: 0
  }
}

.page-nav__item .icon, .page-nav__item .example a::after, .example .page-nav__item a::after, .page-nav__item .sections-list ul li.has-submenu::after, .sections-list ul .page-nav__item li.has-submenu::after {
  display: inline-block;
  position: relative;
  bottom: -.0625rem;
  transition: transform .2s
}

@media (min-width: 768px) {
  .page-nav__item--prev {
      float: left
  }
}

.page-nav__item--prev:hover .icon, .page-nav__item--prev:hover .example a::after, .example .page-nav__item--prev:hover a::after, .page-nav__item--prev:hover .sections-list ul li.has-submenu::after, .sections-list ul .page-nav__item--prev:hover li.has-submenu::after, .page-nav__item--prev:focus .icon, .page-nav__item--prev:focus .example a::after, .example .page-nav__item--prev:focus a::after, .page-nav__item--prev:focus .sections-list ul li.has-submenu::after, .sections-list ul .page-nav__item--prev:focus li.has-submenu::after, .page-nav__item--prev:active .icon, .page-nav__item--prev:active .example a::after, .example .page-nav__item--prev:active a::after, .page-nav__item--prev:active .sections-list ul li.has-submenu::after, .sections-list ul .page-nav__item--prev:active li.has-submenu::after {
  -webkit-transform: translate(-0.625rem, 0);
  -moz-transform: translate(-0.625rem, 0);
  -ms-transform: translate(-0.625rem, 0);
  transform: translate(-0.625rem, 0)
}

.page-nav__item--prev .icon, .page-nav__item--prev .example a::after, .example .page-nav__item--prev a::after, .page-nav__item--prev .sections-list ul li.has-submenu::after, .sections-list ul .page-nav__item--prev li.has-submenu::after {
  margin-right: .625rem
}

@media (min-width: 768px) {
  .page-nav__item--next {
      float: right
  }
}

.page-nav__item--next:hover .icon, .page-nav__item--next:hover .example a::after, .example .page-nav__item--next:hover a::after, .page-nav__item--next:hover .sections-list ul li.has-submenu::after, .sections-list ul .page-nav__item--next:hover li.has-submenu::after, .page-nav__item--next:focus .icon, .page-nav__item--next:focus .example a::after, .example .page-nav__item--next:focus a::after, .page-nav__item--next:focus .sections-list ul li.has-submenu::after, .sections-list ul .page-nav__item--next:focus li.has-submenu::after, .page-nav__item--next:active .icon, .page-nav__item--next:active .example a::after, .example .page-nav__item--next:active a::after, .page-nav__item--next:active .sections-list ul li.has-submenu::after, .sections-list ul .page-nav__item--next:active li.has-submenu::after {
  -webkit-transform: translate(.625rem, 0);
  -moz-transform: translate(.625rem, 0);
  -ms-transform: translate(.625rem, 0);
  transform: translate(.625rem, 0)
}

.page-nav__item--next .icon, .page-nav__item--next .example a::after, .example .page-nav__item--next a::after, .page-nav__item--next .sections-list ul li.has-submenu::after, .sections-list ul .page-nav__item--next li.has-submenu::after {
  margin-left: .625rem
}

.sections-list {
  float: left;
  margin-top: 1.25rem
}

.sections-list-wrapper {
  width: 100%
}

.sections-list.affix {
  position: fixed;
  top: 0
}

.sections-list.affix-bottom {
  position: absolute
}

.sections-list ul ul {
  margin-top: .625rem;
  margin-bottom: 0
}

.sections-list ul li {
  margin-bottom: .625rem;
  border-left: 3px solid #eee;
  transition: border .2s
}

.sections-list ul li.active {
  border-left-color: #253951
}

.sections-list ul li.has-submenu {
  padding-right: 1.25rem
}

.sections-list ul li.has-submenu::after {
  content: '\e91d';
  color: #bdbdbd;
  display: inline-block;
  font-size: 1.25rem;
  position: absolute;
  right: 0;
  top: .3125rem;
  transition: color .2s
}

.sections-list ul li.has-submenu>ul {
  display: none
}

.sections-list ul li.has-submenu.active::after {
  color: #253951
}

.sections-list ul li.has-submenu.active>ul {
  display: block
}

.sections-list ul li::before {
  display: none
}

.sections-list ul li a {
  border-bottom: 0;
  padding: 0
}

.site-footer {
  background-color: transparent;
  padding: 3.75rem 0 2.5rem 0
}

.site-footer hr {
  width: 5.625rem
}

.site-footer__logo {
  border-bottom: 0;
  padding: 0;
  display: inline-block;
  color: #bdbdbd;
  font-family: "Montserrat", sans-serif;
  font-size: 1.75em;
  font-weight: 700;
  vertical-align: top;
  margin: 0 0 1.25rem 0
}

.site-footer__logo img {
  display: block;
  width: 15.625rem
}

.site-footer__copyright {
  color: #bdbdbd;
  font-size: .875em;
  line-height: 1.8em
}

.site-footer__maintainers {
  color: #ffffff; /* Change the color as needed */
  font-size: 0.9em; /* Adjust the font size as needed */
  text-align: center; /* Aligns text to the center, remove if you want it aligned with the copyright */
  padding: 10px 0; /* Adds padding above and below */
  font-style: italic; /* Optional: Italicize the text */
  /* Add any other styling that fits your site's theme */
}

.site-footer__copyright {
  color: #ffffff; /* or any color you wish */
}

.site-header {
  position: absolute;
  width: 100%;
  height: 5.625rem;
  border-bottom: 1px solid rgba(37, 57, 81, 0.15)
}

.site-header__logo {
  border-bottom: 0;
  padding: 0;
  display: block;
  float: left;
  color: white;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 2em;
  line-height: 5.625rem
}

.site-header__logo:hover, .site-header__logo:focus, .site-header__logo:active {
  color: #253951
}

.site-header__logo img {
  height: calc(5.625rem - 1px)
}

.site-header__nav {
  float: right;
  margin-bottom: 0
}

.site-header__nav li {
  float: left;
  padding: 0;
  margin-bottom: 0
}

.site-header__nav li::before {
  display: none
}

.site-header__nav::before, .site-header__nav::after {
  content: ' ';
  display: table
}

.site-header__nav::after {
  clear: both
}

.site-header__nav li+li {
  margin-left: 2.5rem
}

.site-header__nav a {
  border-bottom: 0;
  padding: 0;
  display: block;
  font-size: .875em;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  line-height: calc(5.625rem - 1px);
  text-transform: uppercase;
  border-bottom: 1px solid;
  border-color: transparent;
  transition: border-color .2s
}

.site-header__nav a:hover, .site-header__nav a:focus, .site-header__nav a:active {
  border-color: #253951
}

.offcanvas {
  overflow: hidden;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #fff;
  position: fixed;
  top: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(0, -1.875rem);
  -moz-transform: translate(0, -1.875rem);
  -ms-transform: translate(0, -1.875rem);
  transform: translate(0, -1.875rem);
  transition: transform .2s, opacity .2s, visibility .2s;
  z-index: 2
}

.offcanvas-expanded .offcanvas {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0)
}

.offcanvas__nav {
  height: 100%;
  overflow: scroll;
  padding-top: 5rem;
  padding-bottom: 5rem;
  -webkit-overflow-scrolling: touch
}

.offcanvas__nav li {
  padding: 0
}

.offcanvas__nav li::before {
  display: none
}

.offcanvas__nav li+li {
  margin-top: 1.25rem
}

.offcanvas__nav a {
  border-bottom: 0;
  padding: 0;
  color: white;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase
}

.offcanvas-toggle {
  height: calc(5.625rem - 1px);
  width: 5.625rem;
  cursor: pointer;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 3
}

.offcanvas-toggle span {
  display: block;
  height: 2px;
  width: 1.875rem;
  background-color: white;
  position: absolute;
  left: 1.875rem;
  transition: top .2s, transform .2s, opacity .2s
}

.offcanvas-toggle span:first-child {
  top: 2.125rem
}

.offcanvas-toggle span:nth-child(2) {
  top: 2.6875rem
}

.offcanvas-toggle span:last-child {
  top: 3.25rem
}

.offcanvas-expanded .offcanvas-toggle span:first-child, .offcanvas-expanded .offcanvas-toggle span:last-child {
  top: 2.6875rem
}

.offcanvas-expanded .offcanvas-toggle span:first-child {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg)
}

.offcanvas-expanded .offcanvas-toggle span:last-child {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg)
}

.offcanvas-expanded .offcanvas-toggle span:nth-child(2) {
  opacity: 0
}

.social-list {
  margin-bottom: 0
}

.social-list li {
  display: inline-block;
  padding: 0
}

.social-list li+li {
  margin-left: 1.25rem;
  margin-bottom: 1.25rem
}

.social-list li::before {
  display: none
}

.social-list__item {
  border-bottom: 0;
  padding: 0;
  display: block;
  color: #bdbdbd;
  font-size: 1.875em;
  line-height: 1;
  transition: color .2s
}

.social-list__item:hover.social-list__item--behance, .social-list__item:focus.social-list__item--behance, .social-list__item:active.social-list__item--behance {
  color: #1769ff
}

.social-list__item:hover.social-list__item--bitbucket, .social-list__item:focus.social-list__item--bitbucket, .social-list__item:active.social-list__item--bitbucket {
  color: #205081
}

.social-list__item:hover.social-list__item--codepen, .social-list__item:focus.social-list__item--codepen, .social-list__item:active.social-list__item--codepen {
  color: #494949
}

.social-list__item:hover.social-list__item--dribbble, .social-list__item:focus.social-list__item--dribbble, .social-list__item:active.social-list__item--dribbble {
  color: #ea4c89
}

.social-list__item:hover.social-list__item--dropbox, .social-list__item:focus.social-list__item--dropbox, .social-list__item:active.social-list__item--dropbox {
  color: #007ee5
}

.social-list__item:hover.social-list__item--facebook, .social-list__item:focus.social-list__item--facebook, .social-list__item:active.social-list__item--facebook {
  color: #3b5998
}

.social-list__item:hover.social-list__item--github, .social-list__item:focus.social-list__item--github, .social-list__item:active.social-list__item--github {
  color: #333
}

.social-list__item:hover.social-list__item--gitlab, .social-list__item:focus.social-list__item--gitlab, .social-list__item:active.social-list__item--gitlab {
  color: #fc6d26
}

.social-list__item:hover.social-list__item--google-plus, .social-list__item:focus.social-list__item--google-plus, .social-list__item:active.social-list__item--google-plus {
  color: #dd4b39
}

.social-list__item:hover.social-list__item--gulp, .social-list__item:focus.social-list__item--gulp, .social-list__item:active.social-list__item--gulp {
  color: #DA4648
}

.social-list__item:hover.social-list__item--instagram, .social-list__item:focus.social-list__item--instagram, .social-list__item:active.social-list__item--instagram {
  color: #e1306c
}

.social-list__item:hover.social-list__item--kickstarter, .social-list__item:focus.social-list__item--kickstarter, .social-list__item:active.social-list__item--kickstarter {
  color: #2bde73
}

.social-list__item:hover.social-list__item--linkedin, .social-list__item:focus.social-list__item--linkedin, .social-list__item:active.social-list__item--linkedin {
  color: #0077b5
}

.social-list__item:hover.social-list__item--medium, .social-list__item:focus.social-list__item--medium, .social-list__item:active.social-list__item--medium {
  color: #00ab6c
}

.social-list__item:hover.social-list__item--meetup, .social-list__item:focus.social-list__item--meetup, .social-list__item:active.social-list__item--meetup {
  color: #e0393e
}

.social-list__item:hover.social-list__item--pocket, .social-list__item:focus.social-list__item--pocket, .social-list__item:active.social-list__item--pocket {
  color: #ef4056
}

.social-list__item:hover.social-list__item--producthunt, .social-list__item:focus.social-list__item--producthunt, .social-list__item:active.social-list__item--producthunt {
  color: #da552f
}

.social-list__item:hover.social-list__item--reddit, .social-list__item:focus.social-list__item--reddit, .social-list__item:active.social-list__item--reddit {
  color: #ff4500
}

.social-list__item:hover.social-list__item--skype, .social-list__item:focus.social-list__item--skype, .social-list__item:active.social-list__item--skype {
  color: #00aff0
}

.social-list__item:hover.social-list__item--slack, .social-list__item:focus.social-list__item--slack, .social-list__item:active.social-list__item--slack {
  color: #3eb991
}

.social-list__item:hover.social-list__item--stackoverflow, .social-list__item:focus.social-list__item--stackoverflow, .social-list__item:active.social-list__item--stackoverflow {
  color: #f48024
}

.social-list__item:hover.social-list__item--trello, .social-list__item:focus.social-list__item--trello, .social-list__item:active.social-list__item--trello {
  color: #0079bf
}

.social-list__item:hover.social-list__item--tumblr, .social-list__item:focus.social-list__item--tumblr, .social-list__item:active.social-list__item--tumblr {
  color: #35465c
}

.social-list__item:hover.social-list__item--twitter, .social-list__item:focus.social-list__item--twitter, .social-list__item:active.social-list__item--twitter {
  color: #1da1f2
}

.social-list__item:hover.social-list__item--sphere, .social-list__item:focus.social-list__item--sphere, .social-list__item:active.social-list__item--sphere {
  color: #fb9300
}

.social-list__item:hover.social-list__item--youtube, .social-list__item:focus.social-list__item--youtube, .social-list__item:active.social-list__item--youtube {
  color: #cd201f
}

.social-list__item .icon, .social-list__item .example a::after, .example .social-list__item a::after, .social-list__item .sections-list ul li.has-submenu::after, .sections-list ul .social-list__item li.has-submenu::after {
  display: block
}

.title-anchor-link {
  border-bottom: 0;
  padding: 0;
  display: block;
  position: absolute;
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  transition: opacity .2s;
  padding-right: .625rem
}

h1:hover .title-anchor-link, h1:focus .title-anchor-link, h1:active .title-anchor-link, .h1:hover .title-anchor-link, .h1:focus .title-anchor-link, .h1:active .title-anchor-link, h2:hover .title-anchor-link, h2:focus .title-anchor-link, h2:active .title-anchor-link, .h2:hover .title-anchor-link, .h2:focus .title-anchor-link, .h2:active .title-anchor-link, h3:hover .title-anchor-link, h3:focus .title-anchor-link, h3:active .title-anchor-link, .h3:hover .title-anchor-link, .h3:focus .title-anchor-link, .h3:active .title-anchor-link, h4:hover .title-anchor-link, h4:focus .title-anchor-link, h4:active .title-anchor-link, .h4:hover .title-anchor-link, .h4:focus .title-anchor-link, .h4:active .title-anchor-link, h5:hover .title-anchor-link, h5:focus .title-anchor-link, h5:active .title-anchor-link, .h5:hover .title-anchor-link, .h5:focus .title-anchor-link, .h5:active .title-anchor-link, h6:hover .title-anchor-link, h6:focus .title-anchor-link, h6:active .title-anchor-link, .h6:hover .title-anchor-link, .h6:focus .title-anchor-link, .h6:active .title-anchor-link {
  opacity: .4
}

h1:hover .title-anchor-link:hover, h1:hover .title-anchor-link:focus, h1:hover .title-anchor-link:active, h1:focus .title-anchor-link:hover, h1:focus .title-anchor-link:focus, h1:focus .title-anchor-link:active, h1:active .title-anchor-link:hover, h1:active .title-anchor-link:focus, h1:active .title-anchor-link:active, .h1:hover .title-anchor-link:hover, .h1:hover .title-anchor-link:focus, .h1:hover .title-anchor-link:active, .h1:focus .title-anchor-link:hover, .h1:focus .title-anchor-link:focus, .h1:focus .title-anchor-link:active, .h1:active .title-anchor-link:hover, .h1:active .title-anchor-link:focus, .h1:active .title-anchor-link:active, h2:hover .title-anchor-link:hover, h2:hover .title-anchor-link:focus, h2:hover .title-anchor-link:active, h2:focus .title-anchor-link:hover, h2:focus .title-anchor-link:focus, h2:focus .title-anchor-link:active, h2:active .title-anchor-link:hover, h2:active .title-anchor-link:focus, h2:active .title-anchor-link:active, .h2:hover .title-anchor-link:hover, .h2:hover .title-anchor-link:focus, .h2:hover .title-anchor-link:active, .h2:focus .title-anchor-link:hover, .h2:focus .title-anchor-link:focus, .h2:focus .title-anchor-link:active, .h2:active .title-anchor-link:hover, .h2:active .title-anchor-link:focus, .h2:active .title-anchor-link:active, h3:hover .title-anchor-link:hover, h3:hover .title-anchor-link:focus, h3:hover .title-anchor-link:active, h3:focus .title-anchor-link:hover, h3:focus .title-anchor-link:focus, h3:focus .title-anchor-link:active, h3:active .title-anchor-link:hover, h3:active .title-anchor-link:focus, h3:active .title-anchor-link:active, .h3:hover .title-anchor-link:hover, .h3:hover .title-anchor-link:focus, .h3:hover .title-anchor-link:active, .h3:focus .title-anchor-link:hover, .h3:focus .title-anchor-link:focus, .h3:focus .title-anchor-link:active, .h3:active .title-anchor-link:hover, .h3:active .title-anchor-link:focus, .h3:active .title-anchor-link:active, h4:hover .title-anchor-link:hover, h4:hover .title-anchor-link:focus, h4:hover .title-anchor-link:active, h4:focus .title-anchor-link:hover, h4:focus .title-anchor-link:focus, h4:focus .title-anchor-link:active, h4:active .title-anchor-link:hover, h4:active .title-anchor-link:focus, h4:active .title-anchor-link:active, .h4:hover .title-anchor-link:hover, .h4:hover .title-anchor-link:focus, .h4:hover .title-anchor-link:active, .h4:focus .title-anchor-link:hover, .h4:focus .title-anchor-link:focus, .h4:focus .title-anchor-link:active, .h4:active .title-anchor-link:hover, .h4:active .title-anchor-link:focus, .h4:active .title-anchor-link:active, h5:hover .title-anchor-link:hover, h5:hover .title-anchor-link:focus, h5:hover .title-anchor-link:active, h5:focus .title-anchor-link:hover, h5:focus .title-anchor-link:focus, h5:focus .title-anchor-link:active, h5:active .title-anchor-link:hover, h5:active .title-anchor-link:focus, h5:active .title-anchor-link:active, .h5:hover .title-anchor-link:hover, .h5:hover .title-anchor-link:focus, .h5:hover .title-anchor-link:active, .h5:focus .title-anchor-link:hover, .h5:focus .title-anchor-link:focus, .h5:focus .title-anchor-link:active, .h5:active .title-anchor-link:hover, .h5:active .title-anchor-link:focus, .h5:active .title-anchor-link:active, h6:hover .title-anchor-link:hover, h6:hover .title-anchor-link:focus, h6:hover .title-anchor-link:active, h6:focus .title-anchor-link:hover, h6:focus .title-anchor-link:focus, h6:focus .title-anchor-link:active, h6:active .title-anchor-link:hover, h6:active .title-anchor-link:focus, h6:active .title-anchor-link:active, .h6:hover .title-anchor-link:hover, .h6:hover .title-anchor-link:focus, .h6:hover .title-anchor-link:active, .h6:focus .title-anchor-link:hover, .h6:focus .title-anchor-link:focus, .h6:focus .title-anchor-link:active, .h6:active .title-anchor-link:hover, .h6:active .title-anchor-link:focus, .h6:active .title-anchor-link:active {
  opacity: 1
}

.green .hero-subheader {
  background-color: #F0FAE6
}

.green .nav-grid__item {
  background-color: #F0FAE6
}

.green .nav-grid__item:hover, .green .nav-grid__item:active, .green .nav-grid__item:focus {
  background-color: #F0FAE6
}

.green .section--darker-theme-color-bg {
  background-color: #e8f7d9
}

.green .page-nav {
  background-color: #F0FAE6
}

.green.error-404 {
  background-color: #F0FAE6
}

.red .hero-subheader {
  background-color: #FFECE6
}

.red .nav-grid__item {
  background-color: #FFECE6
}

.red .nav-grid__item:hover, .red .nav-grid__item:active, .red .nav-grid__item:focus {
  background-color: #FFECE6
}

.red .section--darker-theme-color-bg {
  background-color: #ffe0d7
}

.red .page-nav {
  background-color: #FFECE6
}

.red.error-404 {
  background-color: #FFECE6
}

.yellow .hero-subheader {
  background-color: #FCFDE8
}

.yellow .nav-grid__item {
  background-color: #FCFDE8
}

.yellow .nav-grid__item:hover, .yellow .nav-grid__item:active, .yellow .nav-grid__item:focus {
  background-color: #FCFDE8
}

.yellow .section--darker-theme-color-bg {
  background-color: #fafcda
}

.yellow .page-nav {
  background-color: #FCFDE8
}

.yellow.error-404 {
  background-color: #FCFDE8
}

.purple .hero-subheader {
  background-color: #FDE8F8
}

.purple .nav-grid__item {
  background-color: #FDE8F8
}

.purple .nav-grid__item:hover, .purple .nav-grid__item:active, .purple .nav-grid__item:focus {
  background-color: #FDE8F8
}

.purple .section--darker-theme-color-bg {
  background-color: #fcdaf4
}

.purple .page-nav {
  background-color: #FDE8F8
}

.purple.error-404 {
  background-color: #FDE8F8
}

.nav-grid__item {
  background-color: #1e824c; /* Or any color you prefer */
  border: 1px solid #fff; /* Optional: adds a white border */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adds a subtle shadow */
  padding: 20px; /* Adds space inside the boxes */
  width: 100%; /* Use this only if you are not using Bootstrap's grid system */
  margin-bottom: 20px; /* Adds space between the boxes if they wrap */
}

.nav-grid__title {
  color: #fff; /* Adjust title color */
  font-size: 1.5em; /* Makes the title larger */
}

.nav-grid__btn {
  display: block; /* Ensures the button is on its own line */
  width: fit-content; /* Makes the button only as wide as its content */
  margin: 20px auto 0; /* Centers the button and adds space above it */
  padding: 10px 20px; /* Adjust padding for the button */
  color: #fff; /* Button text color */
  background-color: #16a085; /* Or any other color */
  border-radius: 5px; /* Rounds the corners of the button */
  text-decoration: none; /* Removes underline from the button */
  text-align: center; /* Ensures the text inside the button is centered */
}

.nav-grid__btn i {
  margin-left: 5px; /* Adds a small space between the text and the icon */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .nav-grid__item {
      width: auto; /* Allows the boxes to adjust their width to the screen size */
  }
}

.site-footer .container {
  display: flex;
  justify-content: space-between; /* This spreads out the child elements */
  align-items: center; /* This vertically centers the child elements */
}

.footer-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.footer-left, .footer-right {
  flex-basis: 50%; /* This gives each side half the width of the parent */
}

.social-list {
  text-align: right;
  list-style: none;
  /* Add padding and margin as necessary */
}

.social-list li {
  display: inline; /* Or 'inline-block' if you want some margin/padding */
  /* Add margin and padding as necessary */
}