/* default major block values */
#body-wrap,
#footer-wrap {
  clear: both;
  width: 100%;
  max-width: none;
}

/* default flex values (mobile friendly) */
#body-wrap {
  display: flex;
  flex-direction: column;
}
#sidebar {
  width: 100%;
  order: 0;
  z-index: 101;
}
#content-banner-wrap {
  order: 1;
}

/* default inner values */
.jn-margin,
.jn-background {
  height: 100%;
}
.jn-container {
  margin: auto;
  width: 100%;
  max-width: none;
}

/* hand held */
@media screen and (max-width: 721px) {
  #sidebar {
    text-align: center;
    max-width: none !important;
  }
}

/* desktop */
@media screen and (min-width: 721px) {

  /* sidebar left */
  .sidebar-left #body-wrap {
    flex-direction: row;
  }
  .sidebar-left #sidebar {
    max-width: 300px; /* sidebar width */
  }
  .sidebar-left #content-banner-wrap {
    flex-grow: 1;
  }

  /* sidebar right */
  .sidebar-right #body-wrap {
    flex-direction: row;
  }
  .sidebar-right #sidebar {
    max-width: 300px; /* sidebar width */
    order: 2;
  }
  .sidebar-right #content-banner-wrap {
    flex-grow: 1;
  }

  /* sidebar top */
  .sidebar-top #sidebar {
    flex-direction: column;
  }

  /* sidebar bottom */
  .sidebar-bottom #sidebar {
    flex-direction: column;
    order: 2;
  }

  /* fixed top, left, right */
  .sidebar-top.sidebar-fixed #sidebar,
  .sidebar-left.sidebar-fixed #sidebar,
  .sidebar-right.sidebar-fixed #sidebar,

  /* fixed left & right (+ stretch height) */
  .sidebar-left.sidebar-height-stretch.sidebar-fixed #sidebar .jn-padding,
  .sidebar-right.sidebar-height-stretch.sidebar-fixed #sidebar .jn-padding {
    position: sticky;
    top: 0px; /* stickey offset */
  }

  /* fixed bottom */
  .sidebar-bottom.sidebar-fixed #sidebar {
    position: sticky;
    bottom: 0px; /* sticky offset */
  }

  /* sidebar auto height */
  .sidebar-height-auto.sidebar-left #body-wrap,
  .sidebar-height-auto.sidebar-right #body-wrap {
    align-items: flex-start;
  }

  /* sidebar stretch height */
  .sidebar-height-stretch.sidebar-left #body-wrap,
  .sidebar-height-stretch.sidebar-right #body-wrap {
    align-items: stretch;
  }

  /* body left align */
  .body-left #body-wrap,
  .body-left #footer-wrap {
    float: left;
  }
  /* body center align */
  .body-center #body-wrap,
  .body-center #footer-wrap {
    margin: auto;
  }
  /* body right align */
  .body-right #body-wrap,
  .body-right #footer-wrap {
    float: right;
  }

}