/**
 * @file
 * Positioning for a responsive layout.
 *
 * Define CSS classes to create a fluid grid layout with optional sidebars
 * depending on whether blocks are placed in the left or right sidebars.
 *
 * This layout uses the SingularityGS
 */


@include sgs-change('output', 'isolation');


/**
 * Center the page.
 *
 * For screen sizes larger than 1200px, prevent excessively long lines of text
 * by setting a max-width.
 */
.container {
  .inner-wrapper {
    @extend %inner-wrapper;
    @include breakpoint($desktop){
      .front #main & {
        padding: 0 0 15em;
      }
    }
  }
}

/* LAYOUT FOR MOBILE MENU */
@include breakpoint($all-devices){
  #main,
  #footer,
  #region-bottom {
    position: relative;
    left: 0;
    @include transition(all 500ms ease);
    .menu-active & {
      left: -255px;
      opacity: 0.2;
      @include transition(all 500ms ease);
    }
  }
}

@import "no-sidebars";
@import "sidebar-first";
@import "sidebar-second";
@import "two-sidebars";