@media #{$mediaDesktop} {
  // utilities:

  .hide-desktop {
    display: none;
  }

  body {
    overflow-y: scroll;
    // FIXME: There is a bug in firefox that causes flickering animations:
    // TODO: Check if this is a performance overhead
    // http://stackoverflow.com/questions/13626412/firefox-transitions-breaking-when-parent-overflow-is-changed
  }


  .aside {
    flex: 1 auto;
  }


  .main {
    flex: 2 0px;
  }

  .sidebar {
    order: 1;
  }

  .main {
    order: 2;
  }

  .content-wrapper {
    overflow: visible;
    padding: 0;
    position: static;
  }

  .subnav-content {
    margin: 20px $paddingRightLeftDesktop 0;
  }

  .page-content {
    padding: $overallPaddingTopBottomDesktop $paddingRightLeftDesktop;

    .page-content {
      padding:0 $paddingRightLeftDesktop;
    }
  }

  .subnav {
    padding-left: $overallPadding;
  }
  .sidebar:not(.sidebar-desktop) {
    max-width: $sidebarWidthDesktop;
    min-width: $sidebarWidthDesktop;
    will-change: inherit;
    position: static;
    height: auto;
    transform: none;
    transition: none;
    z-index: auto;
    overflow-y: visible;

  }

  // Hide Navigation Topbar:
  .topbar {
    display: none;
  }

  .navbar-main {
    overflow: hidden;
    padding: 0 $overallPadding;
    position: relative;
    transform: none;
    margin: 0 auto;
    max-width: $overallMaxWidth;
    z-index: 1;
    width: 100%;
    background: transparent;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .main-nav {
      flex: 1 1 auto;
    }

    .more-space {
      margin-top: 0;
    }

    ul {
      flex-direction: row;
      li {
        a:active:not(.logo):not(.button),
        &.active a {
          background: none !important;
          color: $topbarNavActiveColorWide !important;
        }
        &:not(:last-of-type) {
          margin-right: 10px;
        }
        a:not(.button) {
          line-height: $topbarHeightDesktop;
          padding: 0 10px;
          color: $topbarColorWide;
          // only works in chrome:
          white-space: nowrap;
          text-overflow: ellipsis;

          .badge {
            position: static;
          }

          &:hover {
            color: $topbarNavHoverColorWide;
          }
        }
      }
      .button {
        white-space: nowrap;
        margin-left: 10px;
      }
    }
  }

  .subnav, .tabs {
    li {
      a {
        padding: 0px 10px;
      }
    }
  }

  .home {
    &:not(.single-column) {
      width: $sidebarWidthDesktop;
    }
    background: none;
    .logo {
      margin-left: $overallPadding;
    }
  }

  // Topbar specific stuff

  .wrapper {
    min-height: calc(100vh - #{$topbarHeightDesktop});
    margin-top: $topbarHeightDesktop;
  }

  .wrapper-center {
    margin: $topbarHeightDesktop auto 0 auto;
  }

  .header {
    height: $topbarHeightDesktop;
    background:$topbarBgDesktop;
  }

  .navigation-toggler {
    &:before {
      line-height:$topbarHeightDesktop;
    }
  }
}