/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 10px 10px;
  display: inline-block;
  cursor: pointer;
  -webkit-transition-property: opacity, -webkit-filter;
  transition-property: opacity, -webkit-filter;
  transition-property: opacity, filter;
  transition-property: opacity, filter, -webkit-filter;
  -webkit-transition-duration: 0.15s;
          transition-duration: 0.15s;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 1; }

.hamburger-box {
  width: 30px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
    position: absolute;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-duration: 0.15s;
            transition-duration: 0.15s;
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }

/*
   * Squeeze
   */
.hamburger--squeeze .hamburger-inner {
  -webkit-transition-duration: 0.075s;
          transition-duration: 0.075s;
  -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
          transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--squeeze .hamburger-inner::before {
    -webkit-transition: top 0.075s 0.12s ease, opacity 0.075s ease;
    transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
  .hamburger--squeeze .hamburger-inner::after {
    -webkit-transition: bottom 0.075s 0.12s ease, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: bottom 0.075s 0.12s ease, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition-delay: 0.12s;
          transition-delay: 0.12s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    -webkit-transition: top 0.075s ease, opacity 0.075s 0.12s ease;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
  .hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    -webkit-transition: bottom 0.075s ease, -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: bottom 0.075s ease, -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

.sg-heading, .sg-section__description, .sg-section__markup, .sg-menu, .sg-color {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.sg-heading {
  color: #1e2428;
  font-weight: 300;
  margin: 0; }

.sg-html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 16px; }

[class*='sg-']:not(.sg-html) {
  -webkit-box-sizing: inherit;
          box-sizing: inherit; }
  [class*='sg-']:not(.sg-html) *::before,
  [class*='sg-']:not(.sg-html) *::after {
    -webkit-box-sizing: inherit;
            box-sizing: inherit; }

.sg-html,
.sg-body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0; }

.sg-layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  min-height: 100%; }

h1.sg-heading {
  font-size: 36px; }

h2.sg-heading {
  font-size: 30px; }

h3.sg-heading {
  font-size: 24px; }

h4.sg-heading {
  font-size: 18px; }

.sg-content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  overflow: auto; }

.sg-logo {
  padding: 32px; }
  .sg-logo__image {
    max-width: 150px; }

.sg-sidebar {
  color: #fff;
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
  position: relative;
  z-index: 10; }
  .sg-sidebar--open {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 240px;
            flex: 0 0 240px; }
    .sg-sidebar--open .sg-sidebar__inner {
      width: 240px; }
    .sg-sidebar--open .sg-sidebar__burger {
      left: 240px; }
  .sg-sidebar__burger {
    position: fixed;
    left: 0;
    top: 20px; }
  .sg-sidebar__inner {
    background-color: #009edd;
    position: fixed;
    width: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; }
  .sg-sidebar .hamburger {
    background-color: #009edd;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 44px;
    -webkit-transition: background-color 0.15s linear;
    transition: background-color 0.15s linear;
    -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.4);
            box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.4); }
    .sg-sidebar .hamburger:focus {
      outline: 0; }
    .sg-sidebar .hamburger:focus, .sg-sidebar .hamburger:hover {
      background-color: #0093ce; }

.sg-section {
  border-bottom: 2px solid #f5f6f8;
  padding: 40px; }
  .sg-section:last-child {
    border-bottom: 0;
    margin-bottom: 0; }
  .sg-section .sg-section {
    margin: 20px 0;
    padding: 20px 0; }
    .sg-section .sg-section:first-child {
      margin-top: 0;
      padding-top: 0; }
    .sg-section .sg-section:last-child {
      border-bottom: 0;
      margin-bottom: 0;
      padding-bottom: 0; }
  .sg-section__title {
    margin-bottom: 20px; }
  .sg-section__description {
    color: #6d7588;
    margin-bottom: 20px; }
  .sg-section__markup {
    margin-top: 40px; }

.sg-link {
  text-decoration: none; }
  .sg-link:link, .sg-link:visited {
    color: #fff; }

.sg-menu {
  margin-bottom: 24px; }
  .sg-menu__title {
    color: #fff;
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin: 8px 32px;
    text-transform: uppercase; }
  .sg-menu__items {
    list-style-type: none;
    margin: 0;
    padding: 0; }
  .sg-menu__item {
    display: block; }
  .sg-menu__link {
    display: block;
    color: #fff;
    padding: 0 42px;
    line-height: 30px; }
  .sg-menu__link--active {
    background-color: #017daa; }

.sg-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .sg-grid .sg-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 25%;
            flex: 0 1 25%;
    margin-bottom: 20px; }

.sg-color__name {
  margin: 10px 0;
  font-weight: 600; }

.sg-color__preview {
  border: 2px solid #f5f6f8;
  border-radius: 6px;
  width: 100px;
  height: 100px; }

.sg-color__detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.sg-color__detail-value {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; }

.sg-color__detail-label {
  color: #6d7588;
  text-transform: uppercase;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 50px;
          flex: 0 1 50px; }

#layout-grid .col,
#layout-grid [class*="col-"] {
  background-color: #f5f2f0;
  border: 1px solid #e1d7d1; }