@media screen and (max-width: 900px) {
  
  #title a { padding: 0 5%; }
  .menu-link {
    position: absolute;
    top: 0; right: 0;
    display: block;
    padding: 0 5%;
    font-size: 2em;
    color: $primary-color;
    text-align: center;
    @include prefix(transition, all 0.2s);
    &:hover { color: $link-hover; }
  }
  
  h3#comments, h3#reply-title { margin: 5% 0; }
  
  #header { width: 100%; }
  #header-widget { display: none; }
  
  #sidebar {
    position: absolute;
    bottom: auto;
    margin: 0;
    padding: 0;
    height: auto;
    width: 100%;
    max-width: 100%;
    z-index: 1000;
    #sidebar-widget { display: none; }
  }

  .menu {
    display: none;
    width: 100%;
    background: rgba($bg-color,0.94);
    border-bottom: 2px solid $primary-color;
    padding: 2em 4em;
    font-size: 1em;
    
    &.active { display: block; }
    
    li {
      clear: both;
      width: 100%;
      text-align: right;
      
      &.active {
        > a {
          padding: 1em;
        }
        > ul.sub-menu {
          display: block;
        }
      }
      
      a {
        padding: 1em;
        &:hover {
          background-color: transparent;
          padding: 1em;
        }
      }
      
      ul.sub-menu {
        background-color: transparent;
      }
    }
  }
  
  nav.pagination {
    margin: 5% 0 0 0;
  }
  
  #content {
    width: 100%;
    padding: 5%;
    float: none;
  }
  
  .post-header {
    margin: 0 auto;
    padding-left: 0;
    border: 6px solid $line-color;
  }
  
  .archive-header, .attachment-header {
    margin: 5% auto;
    padding: 1.2em;
  }
  
  article:not(.excerpt), #attachment,
  #comments-section,
  ul.page-numbers {
    margin: 0 auto 5%;
    padding: 0;
  }
  
  #archive {
    margin: 0 auto;
    li { margin-bottom: 5%; }
    .sticky h3 { font-size: 1.5em; }
  }
}