@media (max-width: 640px) {

  html {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    overflow-y:hidden;
  }

  /*
   * Wrapper
   *
   * The cover is used to position site content when the sidebar is toggled. We
   * use an outter cover to position the sidebar without interferring with the
   * regular page content.
   */
  /* started */
  .content-cover {
    position: relative;
    width: 100%;
  }

  /*
   * Masthead
   *
   * Super small header above the content for site name and short description.
   */
  .masthead {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid #eee;
  }

  .masthead-title {
    margin-top: 0;
    margin-bottom: 0;
    color: #505050;
  }

  .masthead-title a {
    color: #505050;
  }

  .masthead-title small {
    font-size: 75%;
    font-weight: 400;
    color: #c0c0c0;
    letter-spacing: 0;
  }

  @media (max-width: 48em) {
    .masthead-title {
      text-align: center;
    }
  }

  .container-sidebar {
    max-width: 38rem;
    padding-left:  1rem;
    padding-right: 1rem;
    margin-left:  auto;
    margin-right: auto;
  }

  /*
   * Sidebar
   *
   * The sidebar is the drawer, the item we are toggling with our handy hamburger
   * button in the corner of the page.
   *
   * This particular sidebar implementation was inspired by Chris Coyier's
   * "Offcanvas Menu with CSS Target" article, and the checkbox variation from the
   * comments by a reader. It modifies both implementations to continue using the
   * checkbox (no change in URL means no polluted browser history), but this uses
   * `position` for the menu to avoid some potential content reflow issues.
   *
   * Source: http://css-tricks.com/off-canvas-menu-with-css-target/#comment-207504
   */
  /* Style and "hide" the sidebar */
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -14rem;
    width: 14rem;
    visibility: hidden;
    overflow-y: auto !important;
    font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, .6);
    background-color: #202020;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 8;
  }
  

  /* Sidebar content */
  .sidebar a {
    font-weight: normal;
    color: #fff;
  }

  .sidebar-item {
    padding: 1rem;
  }

  .sidebar-item p:last-child {
    margin-bottom: 0;
  }

  /* Sidebar nav */
  .sidebar-nav {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  .sidebar-nav-item-header {
    color: #18bc9c !important;
    font-weight:600 !important;
    display: block;
    font-size:1.35rem;
    padding: .5rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 15px;
    padding-bottom: 0px;
  }
  .sidebar-nav-item {
    display: block;
    padding: .5rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }

  .sidebar-nav-item.active,
  a.sidebar-nav-item:hover,
  a.sidebar-nav-item:focus {
    text-decoration: none;
    background-color: rgba(255, 255, 255, .1);
    border-color: transparent;
  }

  @media (min-width: 48em) {
    .sidebar-item {
      padding: 1.5rem;
    }

    .sidebar-nav-item {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }

  /* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */
  .sidebar-checkbox {
    position: absolute;
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  /* Style the `label` that we use to target the `.sidebar-checkbox` */
  .sidebar-toggle {
    position: fixed;
    top: .8rem;
    left: 1rem;
    display: block;
    padding: .25rem .75rem;
    color: #505050;
    background-color: #fafafa;
    border-radius: .25rem;
    cursor: pointer;
    z-index: 7;
    margin-top: -2.5px;
  }

  .sidebar-toggle:before {
    display: inline-block;
    width: 1.5rem;
    height: 1rem;
    margin-top:5px;
    content: "";
    background-image: -webkit-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
    background-image: -moz-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
    background-image: -ms-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
    background-image: linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
  }

  .sidebar-toggle:active,
  #sidebar-checkbox:focus ~ .sidebar-toggle,
  #sidebar-checkbox:checked ~ .sidebar-toggle {
    color: #fff;
    background-color: #555;
  }

  .sidebar-toggle:active:before,
  #sidebar-checkbox:focus ~ .sidebar-toggle:before,
  #sidebar-checkbox:checked ~ .sidebar-toggle:before {
    background-image: -webkit-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
    background-image: -moz-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
    background-image: -ms-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
    background-image: linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
  }

  @media (min-width: 30.1em) {
    .sidebar-toggle {
      position: fixed;
    }
  }

  @media print {
    .sidebar-toggle {
      display: none;
    }
  }

  /* Slide effect
   *
   * Handle the sliding effects of the sidebar and content in one spot, seperate
   * from the default styles.
   *
   * As an a heads up, we don't use `transform: translate3d()` here because when
   * mixed with `position: fixed;` for the sidebar toggle, it creates a new
   * containing block. Put simply, the fixed sidebar toggle behaves like
   * `position: absolute;` when transformed.
   *
   * Read more about it at http://meyerweb.com/eric/thoughts/2011/09/12/.
   */
  .content-cover,
  .sidebar,
  .sidebar-toggle {
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .content-cover,
  .sidebar-toggle {
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
  }

  #sidebar-checkbox:checked + .sidebar {
    z-index: 10;
    visibility: visible;
  }

  #sidebar-checkbox:checked ~ .sidebar,
  #sidebar-checkbox:checked ~ .content-cover,
  #sidebar-checkbox:checked ~ .sidebar-toggle {
    -webkit-transform: translateX(14rem);
    -ms-transform: translateX(14rem);
    transform: translateX(14rem);
  }

  /*
   * Reverse layout
   *
   * Flip the orientation of the page by placing the `.sidebar` and sidebar toggle
   * on the right side.
   */
  .layout-reverse .sidebar {
    left: auto;
    right: -14rem;
  }

  .layout-reverse .sidebar-toggle {
    left: auto;
    right: 1rem;
  }

  .layout-reverse #sidebar-checkbox:checked ~ .sidebar,
  .layout-reverse #sidebar-checkbox:checked ~ .content-cover,
  .layout-reverse #sidebar-checkbox:checked ~ .sidebar-toggle {
    -webkit-transform: translateX(-14rem);
    -ms-transform: translateX(-14rem);
    transform: translateX(-14rem);
  }

  /*
   * Themes
   *
   * Apply custom color schemes by adding the appropriate class to the `body`.
   * Based on colors from Base16: http://chriskempson.github.io/base16/#default.
   */
  /* Red */
  .theme-base-08 .sidebar,
  .theme-base-08 .sidebar-toggle:active,
  .theme-base-08 #sidebar-checkbox:checked ~ .sidebar-toggle {
    background-color: #ac4142;
  }

  .theme-base-08 .container-sidebar a,
  .theme-base-08 .sidebar-toggle,
  .theme-base-08 .related-posts li a:hover {
    color: #ac4142;
  }

  /* Orange */
  .theme-base-09 .sidebar,
  .theme-base-09 .sidebar-toggle:active,
  .theme-base-09 #sidebar-checkbox:checked ~ .sidebar-toggle {
    background-color: #d28445;
  }

  .theme-base-09 .container-sidebar a,
  .theme-base-09 .sidebar-toggle,
  .theme-base-09 .related-posts li a:hover {
    color: #d28445;
  }

  /* Yellow */
  .theme-base-0a .sidebar,
  .theme-base-0a .sidebar-toggle:active,
  .theme-base-0a #sidebar-checkbox:checked ~ .sidebar-toggle {
    background-color: #f4bf75;
  }

  .theme-base-0a .container-sidebar a,
  .theme-base-0a .sidebar-toggle,
  .theme-base-0a .related-posts li a:hover {
    color: #f4bf75;
  }

  /* Green */
  .theme-base-0b .sidebar,
  .theme-base-0b .sidebar-toggle:active,
  .theme-base-0b #sidebar-checkbox:checked ~ .sidebar-toggle {
    background-color: #90a959;
  }

  .theme-base-0b .container-sidebar a,
  .theme-base-0b .sidebar-toggle,
  .theme-base-0b .related-posts li a:hover {
    color: #90a959;
  }

  /* Cyan */
  .theme-base-0c .sidebar,
  .theme-base-0c .sidebar-toggle:active,
  .theme-base-0c #sidebar-checkbox:checked ~ .sidebar-toggle {
    background-color: #75b5aa;
  }

  .theme-base-0c .container-sidebar a,
  .theme-base-0c .sidebar-toggle,
  .theme-base-0c .related-posts li a:hover {
    color: #75b5aa;
  }

  /* Blue */
  .theme-base-0d .sidebar,
  .theme-base-0d .sidebar-toggle:active,
  .theme-base-0d #sidebar-checkbox:checked ~ .sidebar-toggle {
    background-color: #6a9fb5;
  }

  .theme-base-0d .container-sidebar a,
  .theme-base-0d .sidebar-toggle,
  .theme-base-0d .related-posts li a:hover {
    color: #6a9fb5;
  }

  /* Magenta */
  .theme-base-0e .sidebar,
  .theme-base-0e .sidebar-toggle:active,
  .theme-base-0e #sidebar-checkbox:checked ~ .sidebar-toggle {
    background-color: #aa759f;
  }

  .theme-base-0e .container-sidebar a,
  .theme-base-0e .sidebar-toggle,
  .theme-base-0e .related-posts li a:hover {
    color: #aa759f;
  }

  /* Brown */
  .theme-base-0f .sidebar,
  .theme-base-0f .sidebar-toggle:active,
  .theme-base-0f #sidebar-checkbox:checked ~ .sidebar-toggle {
    background-color: #8f5536;
  }

  .theme-base-0f .container-sidebar a,
  .theme-base-0f .sidebar-toggle,
  .theme-base-0f .related-posts li a:hover {
    color: #8f5536;
  }

  /*
   * Overlay sidebar
   *
   * Make the sidebar content overlay the viewport content instead of pushing it
   * aside when toggled.
   */
  .sidebar-overlay #sidebar-checkbox:checked ~ .content-cover {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .sidebar-overlay #sidebar-checkbox:checked ~ .sidebar-toggle {
    box-shadow: 0 0 0 .25rem #fff;
  }

  .sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
    box-shadow: .25rem 0 .5rem rgba(0, 0, 0, .1);
  }

  /* Only one tweak for a reverse layout */
  .layout-reverse.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
    box-shadow: -.25rem 0 .5rem rgba(0, 0, 0, .1);
  }
}