/*
 * @emas/js-base default theme
 */
.layout-header-sidebar20-content80-footer,
.layout-header-content80-sidebar20-footer,
.layout-header-sidebar50-content50-footer {
  /* We need to setVar the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */ }
  @media screen and (min-width: 500px) {
    .layout-header-sidebar20-content80-footer,
    .layout-header-content80-sidebar20-footer,
    .layout-header-sidebar50-content50-footer {
      /* no grid support? */ }
      .layout-header-sidebar20-content80-footer .ema-layout-wrapper,
      .layout-header-content80-sidebar20-footer .ema-layout-wrapper,
      .layout-header-sidebar50-content50-footer .ema-layout-wrapper {
        display: grid; }
      .layout-header-sidebar20-content80-footer .sidebar,
      .layout-header-content80-sidebar20-footer .sidebar,
      .layout-header-sidebar50-content50-footer .sidebar {
        float: left;
        width: 20%; }
      .layout-header-sidebar20-content80-footer .content,
      .layout-header-content80-sidebar20-footer .content,
      .layout-header-sidebar50-content50-footer .content {
        float: right;
        width: 80%; }
      .layout-header-sidebar20-content80-footer .ema-layout-wrapper,
      .layout-header-content80-sidebar20-footer .ema-layout-wrapper,
      .layout-header-sidebar50-content50-footer .ema-layout-wrapper {
        margin: 0 auto;
        grid-template-columns: 1fr 3fr; }
      .layout-header-sidebar20-content80-footer .header, .layout-header-sidebar20-content80-footer .footer,
      .layout-header-content80-sidebar20-footer .header,
      .layout-header-content80-sidebar20-footer .footer,
      .layout-header-sidebar50-content50-footer .header,
      .layout-header-sidebar50-content50-footer .footer {
        grid-column: 1 / -1;
        /* needed for the floated layout */
        clear: both; } }
  .layout-header-sidebar20-content80-footer .ema-layout-wrapper > *,
  .layout-header-content80-sidebar20-footer .ema-layout-wrapper > *,
  .layout-header-sidebar50-content50-footer .ema-layout-wrapper > * {
    /* needed for the floated layout*/
    margin-bottom: 10px; }
  @supports (display: grid) {
    .layout-header-sidebar20-content80-footer .ema-layout-wrapper > *,
    .layout-header-content80-sidebar20-footer .ema-layout-wrapper > *,
    .layout-header-sidebar50-content50-footer .ema-layout-wrapper > * {
      width: auto;
      margin: 0; } }

@media screen and (min-width: 500px) {
  .layout-header-content80-sidebar20-footer {
    /* no grid support? */ }
    .layout-header-content80-sidebar20-footer .ema-layout-wrapper {
      grid-template-columns: 3fr 1fr; }
    .layout-header-content80-sidebar20-footer .sidebar {
      float: right; }
    .layout-header-content80-sidebar20-footer .content {
      float: left; } }

.layout-header-content50-sidebar50-footer .ema-layout-wrapper {
  grid-template-columns: 1fr 1fr; }

.layout-header-content50-sidebar50-footer .sidebar {
  float: left;
  min-width: 49.1489%; }

.layout-header-content50-sidebar50-footer .content {
  float: right;
  width: 49.7872%; }

.layout-grid-fill {
  /* no grid support? */
  /* We need to setVar the margin used on flex items to 0 as we have gaps in grid.  */ }
  .layout-grid-fill .ema-layout-wrapper {
    margin: 0 auto;
    display: grid;
    grid-gap: 10px;
    justify-items: center; }
  .layout-grid-fill .ema-layout-wrapper {
    display: flex;
    flex-wrap: wrap; }
  .layout-grid-fill .ema-layout-wrapper {
    display: grid;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    grid-auto-rows: minmax(210px, auto); }
  .layout-grid-fill .content {
    /* needed for the flex layout*/
    margin-left: 5px;
    margin-right: 5px;
    flex: 1 1 230px;
    flex: 1 1 230px; }
  .layout-grid-fill .ema-layout-wrapper > * {
    margin-bottom: 10px; }
  @supports (display: grid) {
    .layout-grid-fill .ema-layout-wrapper > * {
      margin: 0; } }
