Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body class="fixedWidthAbove1200">
  
  <header class="wrap noFixedWidth fullWidth">
    <div class="flexParent">
      <div class="col-12">
        <h1 class="childrenPadding">FullWidth ( Column 12 )</h1>
      </div>
    </div>
  </header>
  
  <div class="nav wrap noFixedWidth fullWidth">
    <div class="flexParent">
      <nav class="col-12 flexParent flexNav">
        <a href="#">Link example</a>
        <a href="#">Link</a>
        <a href="#">Link example</a>
      </nav>
    </div>
  </div>
  
  <div class="wrap noFixedWidth">
    <div class="flexParent message">
      <div class="col-12">
        <p class="childrenPadding">Flex layout Grid w/ Float fallback</p>
      </div>
    </div>
  </div>

  <main class="wrap">
    
    <!-- Columns 1-11 -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">Columns 1-11</p> 
      </div>
    </div>
    <div class="flexParent">
      <div class="col-1">
        <img src="http://placehold.it/1000/333333">
      </div>
      <div class="col-11">
        <img src="http://placehold.it/1000x100/333333">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
      </div>
    </div>

    <!-- Columns 2-10 -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">Columns 2-10</p> 
      </div>
    </div> 
    <div class="flexParent">
      <div class="col-2">
        <img src="http://placehold.it/1000x500/333333">
      </div>
      <div class="col-10">
        <img src="http://placehold.it/1000x300/333333">
      </div>
    </div>

    <!-- Columns 3-9 -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">Columns 3-9</p> 
      </div>
    </div> 
    <div class="flexParent">
      <div class="col-3">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
      </div>
      <div class="col-9">
        <img src="http://placehold.it/1000x400/333333">
      </div>
    </div> 

    <!-- Columns 4-8 -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">Columns 4-8</p> 
      </div>
    </div> 
    <div class="flexParent">
      <div class="col-4">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
      </div>
      <div class="col-8">
        <img src="http://placehold.it/1000x300/333333">
      </div>
    </div>

    <!-- Columns 5-7 -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">Columns 5-7</p> 
      </div>
    </div> 
    <div class="flexParent">
      <div class="col-5">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendre</div>
        <img src="http://placehold.it/1000x300/333333">
      </div>
      <div class="col-7">
        <img src="http://placehold.it/1000x500/333333">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</div>
      </div>
    </div>

    <!-- Columns 6-6 -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">Columns 6-6</p> 
      </div>
    </div> 
    <div class="flexParent">
      <div class="col-6">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendre</div>
        <img src="http://placehold.it/1000x300/333333">
      </div>
      <div class="col-6">
        <img src="http://placehold.it/1000x300/333333">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</div>
      </div>
    </div>    

    <!-- Columns 7-5 -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">Columns 7-5</p> 
      </div>
    </div> 
    <div class="flexParent">
      <div class="col-7">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendre</div>
        <img src="http://placehold.it/1000x300/333333">
      </div>
      <div class="col-5">
        <img src="http://placehold.it/1000x300/333333">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</div>
      </div>
    </div>

    <!-- Columns 8-4 -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">Columns 8-4</p> 
      </div>
    </div> 
    <div class="flexParent">
      <div class="col-8">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
        <img src="http://placehold.it/1000x500/333333">
      </div>
      <div class="col-4">
        <img src="http://placehold.it/1000x300/333333">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
      </div>
    </div>

    
    <!-- Columns 9-3 -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">Columns 9-3</p> 
      </div>
    </div> 
    <div class="flexParent">
      <div class="col-9">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendre</div>
        <img src="http://placehold.it/1000x300/333333">
      </div>
      <div class="col-3">
        <img src="http://placehold.it/1000x300/333333">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
      </div>
    </div>

    
    <!-- Columns 10-2 -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">Columns 10-2</p> 
      </div>
    </div> 
    <div class="flexParent">
      <div class="col-10">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendre</div>
        <img src="http://placehold.it/1000x300/333333">
      </div>
      <div class="col-2">
        <img src="http://placehold.it/1000x300/333333">
      </div>
    </div>

    
    <!-- Columns 11-1 -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">Columns 11-1</p> 
      </div>
    </div> 
    <div class="flexParent">
      <div class="col-11">
        <img src="http://placehold.it/1000x300/333333">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</div>
      </div>
      <div class="col-1">
        <img src="http://placehold.it/1000x300/333333">
      </div>
    </div>

    <!-- Columns 12 -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">Columns 12</p> 
      </div>
    </div> 
    <div class="flexParent">
      <div class="col-12">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
        <img src="http://placehold.it/1000x300/333333">
      </div>
    </div>

    <!-- Columns 4 -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">Columns 4-4-4</p> 
      </div>
    </div>
    <div class="flexParent">
      <div class="col-4">
        <img src="http://placehold.it/1000x300/333333">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</div>
      </div>
      <div class="col-4">
        <img src="http://placehold.it/1000x300/333333">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</div>
      </div>
      <div class="col-4">
        <img src="http://placehold.it/1000x300/333333">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</div>
      </div> 
    </div>

    <!-- Columns 2-6 -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">Columns 2-2-2-6</p> 
      </div>
    </div>
    <div class="flexParent">
      <div class="col-2">
        <img src="http://placehold.it/1000x300/333333">
      </div>
      <div class="col-2">
        <img src="http://placehold.it/1000x300/333333">
      </div>
      <div class="col-2">
        <img src="http://placehold.it/1000x300/333333">
      </div>
       <div class="col-6">
        <img src="http://placehold.it/1000x300/333333">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</div>
      </div> 
    </div>
    
    <!-- OneHalf: Columns w/ No Spacing -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">OneHalf: Columns w/ No Spacing</p> 
      </div>
    </div>
    <div class="flexParent">
      <div class="col-noGap-OneHalf">
        <img src="http://placehold.it/1000x300/333333">
      </div>
      <div class="col-noGap-OneHalf">
        <img src="http://placehold.it/1000x300/555555">
      </div> 
    </div>
    
    
    <!-- OneThird: Columns w/ No Spacing -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">OneThird: Columns w/ No Spacing</p> 
      </div>
    </div>
    <div class="flexParent">
      <div class="col-noGap-OneThird">
        <img src="http://placehold.it/1000x500/333333">
      </div>
      <div class="col-noGap-OneThird">
        <img src="http://placehold.it/1000x500/555555">
      </div> 
      <div class="col-noGap-OneThird">
        <img src="http://placehold.it/1000x500/333333">
      </div> 
    </div>
    
    <!-- OneForth: Columns w/ No Spacing -->
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">OneForth: Columns w/ No Spacing</p> 
      </div>
    </div>
    <div class="flexParent">
      <div class="col-noGap-OneForth">
        <img src="http://placehold.it/1000x500/555555">
      </div> 
      <div class="col-noGap-OneForth">
        <img src="http://placehold.it/1000x500/333333">
      </div>
      <div class="col-noGap-OneForth">
        <img src="http://placehold.it/1000x500/555555">
      </div>
      <div class="col-noGap-OneForth">
        <img src="http://placehold.it/1000x500/333333">
      </div> 
    </div>

  </main>


  <!-- Type: fullWidth w/ Wrap Inset -->
  <div class="wrap">
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">fullWidth w/ Wrap Inset – Columns: 8-4</p> 
      </div>
    </div>
  </div>
  <!-- A -->
  <div class="wrap fullWidth">
    <div class="wrapInset flexParent">
      <div class="col-8">
        <img src="http://placehold.it/1000x300/333333">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>
      <div class="col-4">
        <img src="http://placehold.it/1000x300/333333">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>
    </div>
  </div>
  <!-- B -->
  <div class="wrap fullWidth even">
    <div class="wrapInset flexParent">
      <div class="col-8">
        <img src="http://placehold.it/1000x300/333333">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>
      <div class="col-4">
        <img src="http://placehold.it/1000x300/333333">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>
    </div>
  </div>
  
  
  
  <!-- Type: fullWidth -->
  <div class="wrap">
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">fullWidth</p> 
      </div>
    </div>
  </div>
  <!-- Type: fullWidth -->
  <div class="wrap fullWidth">
    <div class="flexParent">
      <div class="col-12">
        <img src="http://placehold.it/1000x300/333333">
        <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>
    </div>
  </div>

  <!-- Type: multiRow -->
  <div class="wrap">
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">multiRow w/ Odd number ( Stretch to fit )</p> 
      </div>
    </div>
  </div>
  <div class="wrap fullWidth multiRow">
    <div class="flexParent">
        <div class="multiCol">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Lorem ipsum dolor</div>
          </div>
          <div class="multiCol">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Lorem ipsum dolor</div>
          </div> 
          <div class="multiCol">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
          </div>
          <div class="multiCol">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Lorem ipsum dolor</div>
          </div>
          <div class="multiCol">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Consectetuer adipiscing elit</div>
          </div>
      </div>
  </div>

  <!-- Type: multiRow -->
  <div class="wrap">
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">multiRow w/ Even number ( Spaced Evenly )</p> 
      </div>
    </div>
  </div>
  <div class="wrap fullWidth multiRow">
    <div class="flexParent">
        <div class="multiCol oneHalf">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Lorem ipsum dolor</div>
          </div>
          <div class="multiCol oneHalf">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Lorem ipsum dolor</div>
          </div> 
          <div class="multiCol oneHalf">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
          </div>
          <div class="multiCol oneHalf">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Lorem ipsum dolor</div>
          </div>
          <div class="multiCol oneHalf">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Consectetuer adipiscing elit</div>
          </div>
          <div class="multiCol oneHalf">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Consectetuer adipiscing elit</div>
          </div>
      </div>
  </div>
  
    <!-- Type: multiRow -->
  <div class="wrap">
    <div class="flexParent">
      <div class="col-12 intro">
        <p class="childrenPadding">multiRow w/ Even number ( Spaced Evenly )</p> 
      </div>
    </div>
  </div>
  <div class="wrap fullWidth multiRow">
    <div class="flexParent">
        <div class="multiCol oneThird">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Lorem ipsum dolor</div>
          </div>
          <div class="multiCol oneThird">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Lorem ipsum dolor</div>
          </div> 
          <div class="multiCol oneThird">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
          </div>
          <div class="multiCol oneThird">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Lorem ipsum dolor</div>
          </div>
          <div class="multiCol oneThird">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Consectetuer adipiscing elit</div>
          </div>
          <div class="multiCol oneThird">
            <img src="http://placehold.it/1000x300/333333">
            <div class="childrenPadding">Consectetuer adipiscing elit</div>
          </div>
      </div>
  </div>
  
  <footer class="wrap noFixedWidth fullWidth">
    <div class="flexParent">
      <div class="col-12">
        <h3>Footer</h3>
      </div>
    </div>
  </footer>
  
</body>
              
            
!

CSS

              
                // =============================================================    
// =============================================================
// Intro: Flex layout Grid w/ Float fallback for Legacy browsers.
// =============================================================
// =============================================================

// I would suggest to separate the sections A, B, C & D into their own Sass files, as this will help with readability. You could install Bourbon or Compass & update the code accordingly.

// A. USEFUL MIXINS: _mixins.sass

// B. FLEX w/ FLOAT FALLBACK MIXIN: _flexWithFloatFallbackMixins.sass

// C. THE GRID SETUP MIXIN: _gridSetupMixins.sass

// D. IMPLEMENTATION OF THE GRID: _theGrid.sass

// E. STICKY FOOTER: _stickyFoot.sass


// =============================================================  
// =============================================================
// A. USEFUL MIXINS: _mixins.sass
// =============================================================
// =============================================================

// Display
@mixin displayBlock
  display: block
@mixin displayTable
  display: table
@mixin displayNone
  display: none
@mixin displayInline
  display: inline

// Float
@mixin floatLeft
  float: left
@mixin floatRight
  float: right
@mixin floatNone
  float: none

// Border
@mixin noBorder
  border: 0px

// Typography
@mixin bold
  font-weight:bold

// Margin
@mixin margin
  margin: 1em
  margin: 2vw
@mixin marginTop
  margin-top: 1em
  margin-top: 2vw
@mixin marginRight
  margin-right: 1em
  margin-right: 2vw
@mixin marginBottom
  margin-bottom: 1em
  margin-bottom: 2vw
@mixin marginLeft
  margin-left: 1em
  margin-left: 2vw
// Clear margin
@mixin noMargin
  margin: 0
@mixin noMarginBottom
  margin-bottom: 0
@mixin noMarginTop
  margin-top: 0
@mixin noMarginleft
  margin-left: 0
@mixin noMarginRight
  margin-right: 0
// Center Items
@mixin marginAuto
  margin-left: auto
  margin-right: auto
  
// Padding
@mixin padding
  padding: 1em
  padding: 2vw
@mixin paddingTop
  padding-top: 1em
  padding-top: 2vw
@mixin paddingRight
  padding-right: 1em
  padding-right: 2vw
@mixin paddingBottom
  padding-bottom: 1em
  padding-bottom: 2vw
@mixin paddingLeft
  padding-left: 1em
  padding-left: 2vw
// Clear padding
@mixin noPadding
  padding: 0
@mixin noPaddingBottom
  padding-bottom: 0
@mixin noPaddingTop
  padding-top: 0
@mixin noPaddingleft
  padding-left: 0
@mixin noPaddingRight
  padding-right: 0

@mixin height100
  height: 100%
    
      
// =============================================================
// =============================================================
// B. FLEX w/ FLOAT FALLBACK - MIXIN: _flexWithFloatFallbackMixins.sass
// =============================================================
// =============================================================


// 1. Enable Flex Layout
// 2. Layout Alignment Options
// 3. Parent Usage: Enable CLEARFIX / Disable CLEARFIX
// 4. Child Usage: Enable FLOATS / Disable FLOATS
// 5. Firefox Usage: Layouts that need "Flex-wrap" will need to be reverted to a float.


// =============================================================
// 1. Enable Flex Layout
// =============================================================
@mixin displayFlex
  display: -webkit-box
  display: -moz-box
  display: -ms-flexbox
  display: -webkit-flex
  display: flex


// =============================================================
// 2. Layout Alignment Options
// =============================================================

// Flex-flow is short hand for "flex-direction" & "flex-wrap"
@mixin flexFlowRowWrap
  // Safari - Pre Flex Flow
  -webkit-flex-direction: row
  -webkit-flex-wrap: wrap
  // MS - Pre Flex Flow
  -ms-flex-direction: row
  -ms-flex-wrap: wrap
  // Moz - Pre Flex Flow
  -moz-flex-direction: row
  -moz-flex-wrap: wrap
  // Flex Flow
  -moz-flex-flow: row wrap
  -ms-flex-flow: row wrap
  -webkit-flex-flow: row wrap
  flex-flow: row wrap
    
@mixin flexFlowRowNoWrap
  // Safari - Pre Flex Flow
  -webkit-flex-direction: row
  -webkit-flex-wrap: nowrap
  // MS - Pre Flex Flow
  -ms-flex-direction: row
  -ms-flex-wrap: nowrap
  // Moz - Pre Flex Flow
  -moz-flex-direction: row
  -moz-flex-wrap: nowrap
  // Flex Flow
  -webkit-flex-flow: row nowrap
  -moz-flex-flow: row nowrap
  -ms-flex-flow: row nowrap
  -webkit-flex-flow: row nowrap
  flex-flow: row nowrap

// Flex-direction - Column
@mixin flexDirectionCol
  -webkit-flex-direction: column
  -moz-flex-direction: column
  -ms-flex-direction: column
  -webkit-flex-direction: column
  flex-direction: column

// Flex-direction - Row
@mixin flexDirectionRow
  -webkit-flex-direction: row
  -moz-flex-direction: row
  -ms-flex-direction: row
  -webkit-flex-direction: row
  flex-direction: row

// Justify Content
@mixin justifyContentSpaceBetween
  -webkit-box-pack: space-between
  -moz-box-pack: space-between
  -ms-flex-pack: space-between
  -webkit-justify-content: space-between
  justify-content: space-between

@mixin justifyContentFlexStart
  -webkit-box-pack: flex-start
  -moz-box-pack: flex-start
  -ms-flex-pack: flex-start
  -webkit-justify-content: flex-start
  justify-content: flex-start

@mixin justifyContentCenter
  -webkit-box-pack: center
  -moz-box-pack: center
  -ms-flex-pack: center
  -webkit-justify-content: center
  justify-content: center
    
// Align Items - Stretch
@mixin alignItemsStretch
  -webkit-box-align: stretch 
  -moz-box-align: stretch
  -ms-flex-align: stretch
  -webkit-align-items: stretch
  align-items: stretch

// Align Items - Center
@mixin alignItemsCenter
  -webkit-box-align: center
  -moz-box-align: center
  -ms-flex-align: center
  -webkit-align-items: center
  align-items: center

@mixin alignContentFlexStart
  -moz-align-content: flex-start
  -webkit-align-content: flex-start
  -ms-align-content: flex-start
  align-content: flex-start

@mixin alignSelfCenter
  -moz-align-self: center
  -webkit-align-self: center
  -ms-align-self: center
  align-self: center
    
@mixin flex1-1-100
  -moz-flex: 1 1 100%
  -webkit-flex: 1 1 100%
  -ms-flex: 1 1 100%
  flex: 1 1 100%

// =============================================================
// 3. Parent usage: Enable CLEARFIX / Disable CLEARFIX
// =============================================================
@mixin clearfix
  &:before,
  &:after
    content: " "
    @include displayTable
  &:after
    clear: both
  //  IE 
  *zoom: 1
@mixin revertClearfix
  &:before,
  &:after
    @include displayNone
  //  IE 
  *zoom: auto


// =============================================================
// 4. Children usage: - Enable FLOATS / Disable FLOATS
// =============================================================
@mixin floatToggleForFlex
  @include floatLeft
  .flexbox &
    @include floatNone


// =============================================================
// 5. Firefox Usage: Layouts that need "Flex-wrap" will need to be reverted to a float.

// Modernizr has a bug where it inserts "no-flexbox", when in fact it does.
// Until this changes we need to include ".no-flexbox &"
// =============================================================

// HTML Example of usage:
// @supports not (flex-flow: row wrap)
  // ul.parent
    // @include -moz-clearfix  
    // li.child
      // @include -moz-noFlexWrap-Floatleft
        
@mixin -moz-clearfix
  .flexbox &, .no-flexbox &
    @include clearfix

@mixin -moz-noFlexWrap-Floatleft
  .flexbox &, .no-flexbox &
    @include floatLeft

    
      
// =============================================================    
// =============================================================
// C. THE GRID SETUP MIXIN: _gridSetupMixins.sass
// =============================================================
// =============================================================

// Row Variable
$fixedWidth1200: 1200px
$minWidth300: 300px

// If the width of the viewport was 980px in width, the main section will be 940px with 20px margins either side. It was important to have equal margins left & right of the overall page, which is the same values between items.

// Grid Width
@mixin pageWrap-Rel-940
  width: 940 / 980 * 100% // 20px Each side
  margin-left: auto
  margin-right: auto

// Full Width
@mixin fullWidthWrap
  width: 100%

// Wrap Inset
@mixin wrapInset
  padding: 20 / 940 *100%

// Fixed Width Above 1200px
@mixin fixedWidth1200
  @media (min-width: 1220px)
    .noFixedWidth.wrap
      width: 100%
      
    .noFixedWidth > .flexParent, 
    *.wrap
      width: $fixedWidth1200
      @include marginAuto
      
    .noFixedWidth > .flexParent.fullWidth
      width: 100%
        
    .wrap.multiRow
      width: $fixedWidth1200 + 20
      
  *.wrap.noFixedWidth
    width: 100%
    
// Min Width Below 300px
@mixin minWidth300
  min-width: $minWidth300
        
// STICKY FOOTER
// =============================================================

// HTML: Height: 100%
// This makes the page 100% of the viewport - Body doesn't need it, as this breaks the Sticky footer.
@mixin stickyFoot-fullHeight
  &.flexbox
    height: 100%

// Body: Sets up pushed height
// The min-height value calulates the the true height of all the elements combined. When this happens, the viewport will simply collapse above the items.
@mixin stickyFoot-viewportCollapse
  .flexbox &
    @include displayFlex
    @include flexDirectionCol
    min-height: 100%
    
// Main: Sets up pushed height
// This simply stretches the element to fill the empty space.
@mixin stickyFoot-stretchMainContentItem
  .flexbox &
    -moz-flex: 1
    -webkit-flex: 1
    -ms-flex: 1
    flex: 1
  
  
  
    
// PARENT ELEMENTS - ENABLE FLEX LAYOUT
// =============================================================

@mixin flexItemWithClearfixFallback
  // Clearfix Setup
  @include clearfix
  // Remove "margin: bottom" from columns & children inside
  > [class*='col-'], [class*='col-'] > *:last-child, > .multiCol, .multiCol > *:last-child
    @include noMargin
  // Flex Setup 
  .flexbox &
    @include revertClearfix
    @include displayFlex
    @include flexFlowRowWrap
    @include alignContentFlexStart
    @include justifyContentSpaceBetween
    // Below removes an odd space after ever column class.
    > [class*='col-'], > .multiCol
      @include displayFlex
      @include flexDirectionCol

// CENTER CHILD CONTENT FOR FLEX
@mixin centerChildContent
  > [class*='col-'], 
  > [class*='col-']:last-child
    float: none
    @include marginAuto
    @include clearfix
    .flexbox &
      @include revertClearfix
  .flexbox &
    @include justifyContentCenter
        
// NAV
// =============================================================

@mixin flexNavWithFallback
  > a
    width: 100%
    display: block
  // Add Column for Mobile layout
  .flexbox &
    @include flexDirectionCol
    @include alignItemsCenter
  @media (min-width: 700px)
    > a
      width: auto
      float: left
    //  Remove Wrap & add NoWrap.
    .flexbox &
      @include flexDirectionRow
      @include flexFlowRowNoWrap
      > a
        @include flex1-1-100
        float: none
    

// CHILD ELEMENTS - COLUMN SETUP
// =============================================================

// Col Variable
$col-12:  940px / 940px * 100%
$col-11:  860px / 940px * 100%
$col-10:  780px / 940px * 100%
$col-9:   700px / 940px * 100%
$col-8:   620px / 940px * 100%
$col-7:   540px / 940px * 100%
$col-6:   460px / 940px * 100%
$col-5:   380px / 940px * 100%
$col-4:   300px / 940px * 100%
$col-3:   220px / 940px * 100%
$col-2:   140px / 940px * 100%
$col-1:   60px / 940px * 100%

// Col 1/2 Variable
$col-OneHalf: 50%
// Col 1/3 Variable
$col-OneThird: 33.33333333333333%
// Col 1/4 Variable
$col-OneForth: 25%

// Multi Col Variable
$marginMultiCol: 10 / 980 * 100%
@mixin marginMultiCol
  margin-left: $marginMultiCol
  margin-right: $marginMultiCol
  
// Multi Row Variable
$multiRowCols: 300 / 960 * 100%
$multiCol-OneHalf: 460 / 960 * 100%
$multiCol-OneThird: 300 / 960 * 100%

// Column Spacing
$colSpacing20: 20 / 940 * 100%



// ie6-ie8
// =============================================================
@mixin ie6-ie8Fixes
  @include flexCol-12-WithFloatFallback
  @include marginBottom
  &:last-child
    @include noMargin



// COL MARGIN TOGGLE ( Enable for floats / Disable for flex )
// =============================================================
@mixin colMarginToggle
  margin-right: $colSpacing20
  @include noMarginBottom
  &:nth-child(2)
    @include noMarginRight
  &:nth-child(3)
    margin-left: $colSpacing20
  &:last-child
    @include noMarginRight
  .flexbox &
    @include noMargin

// 12 COL ( Full Width )
// =============================================================
@mixin flexCol-12-WithFloatFallback
  // Float Setup
  @include floatToggleForFlex
  width: 100%
  // Flex Setup
  .flexbox &
    width: auto
    @include flex1-1-100
  // Inside Padding Setup
  .childrenPadding
    padding: $colSpacing20
    
    
// 11 COL
// =============================================================
@mixin flexCol-11-WithFloatFallback
  // Float Setup
  @include floatToggleForFlex
  width: $col-11
  // Unique margin for floats
  @include colMarginToggle
  // Flex Setup
  .flexbox &
    width: auto
    -moz-flex: 0 1 $col-11
    -webkit-flex: 0 1 $col-11
    -ms-flex: 0 1 $col-11
    flex: 0 1 $col-11
  // Inside Padding Setup
  .childrenPadding
    padding: 20 / 860 * 100%
    
    
// 10 COL
// ============================================================= */
@mixin flexCol-10-WithFloatFallback
  // Float Setup
  @include floatToggleForFlex
  width: $col-10
  // Unique margin for floats
  @include colMarginToggle
  // Flex Setup
  .flexbox &
    width: auto
    -moz-flex: 0 1 $col-10
    -webkit-flex: 0 1 $col-10
    -ms-flex: 0 1 $col-10
    flex: 0 1 $col-10
  // Inside Padding Setup
  .childrenPadding
    padding: 20 / 780 * 100%
    
    
// 9 COL
// ============================================================= */
@mixin flexCol-9-WithFloatFallback
  // Float Setup
  @include floatToggleForFlex
  width: $col-9
  // Unique margin for floats
  @include colMarginToggle
  // Flex Setup
  .flexbox &
    width: auto
    -moz-flex: 0 1 $col-9
    -webkit-flex: 0 1 $col-9
    -ms-flex: 0 1 $col-9
    flex: 0 1 $col-9
  // Inside Padding Setup
  .childrenPadding
    padding: 20 / 700 * 100%
    
    
// 8 COL
// ============================================================= */
@mixin flexCol-8-WithFloatFallback
  // Float Setup
  @include floatToggleForFlex
  width: $col-8
  // Unique margin for floats
  @include colMarginToggle
  // Flex Setup
  .flexbox &
    width: auto
    -moz-flex: 0 1 $col-8
    -webkit-flex: 0 1 $col-8
    -ms-flex: 0 1 $col-8
    flex: 0 1 $col-8
  // Inside Padding Setup
  .childrenPadding
    padding: 20 / 620 * 100%
    
    
// 7 COL
// ============================================================= */
@mixin flexCol-7-WithFloatFallback
  // Float Setup
  @include floatToggleForFlex
  width: $col-7
  // Unique margin for floats
  @include colMarginToggle
  // Flex Setup
  .flexbox &
    width: auto
    -moz-flex: 0 1 $col-7
    -webkit-flex: 0 1 $col-7
    -ms-flex: 0 1 $col-7
    flex: 0 1 $col-7
  // Inside Padding Setup
  .childrenPadding
    padding: 20 / 540 * 100%
    
    
// 6 COL
// ============================================================= */
@mixin flexCol-6-WithFloatFallback
  // Float Setup
  @include floatToggleForFlex
  width: $col-6
  // Unique margin for floats
  @include colMarginToggle
  // Flex Setup
  .flexbox &
    width: auto
    -moz-flex: 0 1 $col-6
    -webkit-flex: 0 1 $col-6
    -ms-flex: 0 1 $col-6
    flex: 0 1 $col-6
  // Inside Padding Setup
  .childrenPadding
    padding: 20 / 460 * 100%
    
    
// 5 COL
// =============================================================
@mixin flexCol-5-WithFloatFallback
  // Float Setup
  @include floatToggleForFlex
  width: $col-5
  // Unique margin for floats
  @include colMarginToggle
  // Flex Setup
  .flexbox &
    -moz-flex: 0 1 $col-5
    -webkit-flex: 0 1 $col-5
    -ms-flex: 0 $col-5
    flex: 0 1 $col-5
  // Inside Padding Setup
  .childrenPadding
    padding: 20 / 380 * 100%
    
    
// 4 COL
// =============================================================
@mixin flexCol-4-WithFloatFallback
  // Float Setup
  @include floatToggleForFlex
  width: $col-4
  // Unique margin for floats
  @include colMarginToggle
  // Flex Setup
  .flexbox &
    -moz-flex: 0 1 $col-4
    -webkit-flex: 0 1 $col-4
    -ms-flex: 0 $col-4
    flex: 0 1 $col-4
  // Inside Padding Setup
  .childrenPadding
    padding: 20 / 300 * 100%


// 3 COL
// =============================================================
@mixin flexCol-3-WithFloatFallback
  // Float Setup
  @include floatToggleForFlex
  width: $col-3
  // Unique margin for floats
  @include colMarginToggle
  // Flex Setup
  .flexbox &
    -moz-flex: 0 1 $col-3
    -webkit-flex: 0 1 $col-3
    -ms-flex: 0 $col-3
    flex: 0 1 $col-3
  // Inside Padding Setup
  .childrenPadding
    padding: 20 / 220 * 100%
    
    
// 2 COL
// =============================================================
@mixin flexCol-2-WithFloatFallback
  // Float Setup
  @include floatToggleForFlex
  width: $col-2
  // Unique margin for floats
  @include colMarginToggle
  // Flex Setup
  .flexbox &
    -moz-flex: 0 1 $col-2
    -webkit-flex: 0 1 $col-2
    -ms-flex: 0 $col-2
    flex: 0 1 $col-2
  // Inside Padding Setup
  .childrenPadding
    padding: 20 / 140 * 100%
    
    
// 1 COL
// =============================================================
@mixin flexCol-1-WithFloatFallback
  // Float Setup
  @include floatToggleForFlex
  width: $col-1
  // Unique margin for floats
  @include colMarginToggle
  // Flex Setup
  .flexbox &
    -moz-flex: 0 1 $col-1
    -webkit-flex: 0 1 $col-1
    -ms-flex: 0 $col-1
    flex: 0 1 $col-1
  // Inside Padding Setup
  .childrenPadding
    padding: 20 / 60 * 100%

    
    
    
// OneHalf Layout
// ============================================================= */
@mixin noGap-OneHalf
  // Float Setup
  @include floatToggleForFlex
  width: $col-OneHalf
  img
    @include floatToggleForFlex
  // Flex Setup
  .flexbox &
    width: auto
    -moz-flex: 1 1 $col-OneHalf
    -webkit-flex: 1 1 $col-OneHalf
    -ms-flex: 1 1 $col-OneHalf
    flex: 1 1 $col-OneHalf
  // Inside Padding Setup
  .childrenPadding
    padding: 20 / 480 * 100%
    
    
// OneThird Layout
// ============================================================= */
@mixin noGap-OneThird
  // Float Setup
  @include floatToggleForFlex
  width: $col-OneThird
  img
    @include floatToggleForFlex
  // Flex Setup
  .flexbox &
    width: auto
    -moz-flex: 1 1 $col-OneThird
    -webkit-flex: 1 1 $col-OneThird
    -ms-flex: 1 1 $col-OneThird
    flex: 1 1 $col-OneThird
  // Inside Padding Setup
  .childrenPadding
    padding: 20 / 320 * 100%  
    
// OneForth Layout
// ============================================================= */
@mixin noGap-OneForth
  // Float Setup
  @include floatToggleForFlex
  width: $col-OneForth
  img
    @include floatToggleForFlex
  // Flex Setup
  .flexbox &
    width: auto
    -moz-flex: 1 1 $col-OneForth
    -webkit-flex: 1 1 $col-OneForth
    -ms-flex: 1 1 $col-OneForth
    flex: 1 1 $col-OneForth
  // Inside Padding Setup
  .childrenPadding
    padding: 20 / 240 * 100% 

    
    
// MULTI ROW
// =============================================================  
@mixin multiRow
  
  // multiRow Mobile layout
  // ======================
  width: 940 / 980 * 100%
  // Turns of margin bottom
  .flexRowWrap
    @include noMargin
  // Adds margin bottom
  .multiCol
    @include marginBottom
    // Inside Padding Setup
    .childrenPadding
      padding: $colSpacing20
      
  // multiRow Desktop Layout w/ default oneThird columns
  // =======================
  @media (min-width: 700px)
    width: 960 / 980 * 100% 
    .multiCol
      // Float Setup
      @include floatToggleForFlex
      width: $multiRowCols
      // Unique margin for floats
      margin: $marginMultiCol
      @include noMarginTop
      @include marginBottom  
      // flex-grow - Flex Setup
      .flexbox &
        -moz-flex: 1 1 $multiRowCols
        -webkit-flex: 1 1 $multiRowCols
        -ms-flex: 1 $multiRowCols
        flex: 1 1 $multiRowCols
      // Inside Padding Setup
      .childrenPadding
        padding: 20 / 300 * 100%
        
  @media (min-width: 1220px)
    .flexbox .multiCol
      margin: 10px
        
@mixin multiCol-OneHalf   
  // multiRow Desktop Layout
  // =======================
  @media (min-width: 700px)
    width: $multiCol-OneHalf
    // Flex Setup
    .flexbox &
      width: auto
      -moz-flex: 1 1 $multiCol-OneHalf
      -webkit-flex: 1 1 $multiCol-OneHalf
      -ms-flex: 1 1 $multiCol-OneHalf
      flex: 1 1 $multiCol-OneHalf
    // Inside Padding Setup
    .childrenPadding
      padding: 20 / 460 * 100%

      
@mixin multiCol-OneThird   
  // multiRow Desktop Layout
  // =======================
  @media (min-width: 700px)
    width: $multiCol-OneThird
    // Flex Setup
    .flexbox &
      width: auto
      -moz-flex: 1 1 $multiCol-OneThird
      -webkit-flex: 1 1 $multiCol-OneThird
      -ms-flex: 1 1 $multiCol-OneThird
      flex: 1 1 $multiCol-OneThird
    // Inside Padding Setup
    .childrenPadding
      padding: 20 / 300 * 100%
        
        
// =============================================================   
// =============================================================
// D. IMPLEMENTATION OF THE GRID: _theGrid.sass
// =============================================================
// =============================================================

    
// ==========================================================================
// Border Box Setup
//===========================================================================
html
  *, *:after, *:before
    box-sizing: border-box
    -webkit-box-sizing: border-box
    -moz-box-sizing: border-box
  
      
// ==========================================================================
// Baseline Grid
// ==========================================================================
h1, h2, h3, p, div, header, footer, section, article, ul, aside, img
  @include marginBottom  

div.wrap
  @include noMarginBottom
    
    
// PAGE WRAP
// =============================================================
.fixedWidthAbove1200
  @include fixedWidth1200
    
.minWidthBelow300
  @include minWidth300
    
    
.wrap
  @include pageWrap-Rel-940
  
.fullWidth
  @include fullWidthWrap
.wrapInset
  @include wrapInset
  @include noMargin


// PARENT: "DISPLAY: FLEX" with "CLEARFIX" fallback
// =============================================================

.flexParent
  @include flexItemWithClearfixFallback
    
  // FLUID LAYOUT: MOBILE & ie6-ie8
  // =============================================================
  // ie6-ie8 don’t support media queries, so they will be served the mobile first layout which is essentially stacked content. You can read about the concept here. - http://tiny.cc/pmwbcx
  // =============================================================
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12
    @include ie6-ie8Fixes
      
  // RESPONSIVE: TABLET, LAPTOP & DESKTOP LAYOUT
  // =============================================================
  @media (min-width: 700px)
    // CHILDREN: "FLEX ITEM" with "FLOAT" fallback.
    // =============================================================
    // Columns w/ Spacing
    .col-12
      @include flexCol-12-WithFloatFallback
    .col-11
      @include flexCol-11-WithFloatFallback
    .col-10
      @include flexCol-10-WithFloatFallback
    .col-9
      @include flexCol-9-WithFloatFallback 
    .col-8
      @include flexCol-8-WithFloatFallback    
    .col-7
      @include flexCol-7-WithFloatFallback
    .col-6
      @include flexCol-6-WithFloatFallback
    .col-5
      @include flexCol-5-WithFloatFallback
    .col-4
      @include flexCol-4-WithFloatFallback
    .col-3
      @include flexCol-3-WithFloatFallback
    .col-2
      @include flexCol-2-WithFloatFallback
    .col-1
      @include flexCol-1-WithFloatFallback
        

    
    // Columns w/ No Spacing
    // Only these options have been provided. Anything smaller might be a bad web experience. 
    .col-noGap-OneHalf
      @include noGap-OneHalf
    .col-noGap-OneThird
      @include noGap-OneThird
    .col-noGap-OneForth
      @include noGap-OneForth
        

.flexParent.flexNav
  @include flexNavWithFallback
        
// Center Content
// =============================================================      
.centerChildContent
  @include centerChildContent

    
// Multiple Content Rows
// =============================================================
.multiRow
  @include multiRow

  // Multiple Col - One Half
  // =============================================================
  .multiCol.oneHalf
    @include multiCol-OneHalf
 
  // Multiple Col - One Third
  // =============================================================
  .multiCol.oneThird
    @include multiCol-OneThird
    
// FIREFOX FIX
// =============================================================  
@supports not (flex-flow: row wrap)
  .flexParent
    @include -moz-clearfix  
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12
      @include -moz-noFlexWrap-Floatleft
        
  
        
        
// =============================================================   
// =============================================================
// E. OPTIONAL STICKY FOOTER: _stickyFoot.sass
// =============================================================
// =============================================================

.stickyFoot-html
  @include stickyFoot-fullHeight
.stickyFoot-body
  @include stickyFoot-viewportCollapse
.stickyFoot-main
  @include stickyFoot-stretchMainContentItem  
        
        
        
        
// =============================================================   
// =============================================================
// NOT NEEDED - Cosmetic
// =============================================================
// =============================================================
html
  color: #333
  -webkit-font-smoothing: antialiased
  body
    color: #888
    line-height: 1.5
    font-size: 12px
    text-align: center
    font-family: Helvetica, Arial, Verdana, sans-serif
    @media (min-width: 700px)
      text-align: left
      font-size: 2vw
    @media (min-width: 1200px)
      font-size: 24px
          
[class*='col-']
  background: #ccc

// Intro Sections
// =============================================================
.intro
  color: white
  color: rgba(255,255,255,.75)
  background: #B72039
  font-size: 18px
  @media (min-width: 700px)
    font-size: 2.5vw
  @media (min-width: 1200px)
    font-size: 36px
  

// Typography
// =============================================================
h1, h2, h3, h4, h5, h6
  font-weight: normal
h1
  font-size: 18px
  @media (min-width: 700px)
    font-size: 3vw
  @media (min-width: 1200px)
    font-size: 36px
h1,h2,h3
  margin: 0 0 24px 0

// Header & Footer
// =============================================================
header,.intro, footer
  text-align: center
footer
  background: #333
  line-height: 96px
  height: 96px
  margin-bottom: 0
  .flexParent
    margin-bottom: 0
header.wrap
  @include noMargin
  background: #A41B32
  .flexParent
    [class*='col-']
      color: white
      color: rgba(255,255,255,.75)
      background: #B72039
    
// Other
// =============================================================
img
  width: 100%
  height: auto
  margin-bottom: 0
  display: block
.fullWidth
  .wrapInset
    background: #ccc
    > [class*='col-']
      background: white   
.multiRow
  .multiCol
    background: #ccc  
.even
  .wrapInset
    background: #bbb
    @include marginBottom
      
.message
  .col-12
    background: white
    .childrenPadding
      text-align: center
      font-size: 6vw
      padding-top: 5%
      padding-bottom: 5%
      @media (min-width: 1200px)
        font-size: 72px

header
  .flexParent
    margin-bottom: 0
    
.flexNav
  height: 60px
  background: #A41B32
  @media (max-width: 700px)
    height: auto
  a
    text-decoration: none
    text-align: center
    color: white
    line-height: 60px
    height: 60px
    &:nth-of-type(2)
      background: #9A1B30
    &:hover
      background: #333
    @media (max-width: 700px)
      line-height: 36px
      height: 36px
      
.nav
  background: #8F172B
              
            
!

JS

              
                causeRepaintsOn = $("*");

$(window).resize(function() {
  causeRepaintsOn.css("z-index", 1);
});
              
            
!
999px

Console