/*
* Wrapperless Grid v2016-apr-22
* =============================
*
* See: https://bitbucket.org/snippets/danielsokolowski/d68x/simple-wrapperless-column-gird-system
*
* Example:
*
* ```
* <section class="column 4/12">
*     ...
* </section>
* <section class="column width-8/12">
      <!-- assuming `display: inline-block` for img-->
*     <p>
*        <img class="width-4/12" ... >Lorem lipsum</p>
*     </p>
* </section>
* ```
*/



/*
* Apply a natural box layout model to all elements, but allowing components to change, which is
* required for our column (`width-*`) classes to ensure padding does not effect their total width
*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


/* more testing for below is needed, but if it is too aggresive comment it out and use .floadWrapFix */
body * {
    overflow: hidden;
}

/* use this class to fix the parent to 'wrap' floated elements it contains */
.floatWrapFix {
    overflow: auto;
}

.column {
    float: left;
    padding-right: 1em;
    box-sizing: border-box;
}

.column:last-of-type {
    padding-right: 0;
}



/* Below selectors leverage escaping characters - see: https://mathiasbynens.be/notes/css-escapes,
Note that these can be used without the column class */
.width-1\/12 {
    width: calc(100% / 12)
}

.width-2\/12 {
    width: calc(200% / 12)
}

.width-3\/12 {
    width: calc(300% / 12)
}

.width-4\/12 {
    width: calc(400% / 12);
}

.width-5\/12 {
    width: calc(500% / 12)
}

.width-6\/12 {
    width: calc(600% / 12)
}

.width-7\/12 {
    width: calc(700% / 12)
}

.width-8\/12 {
    width: calc(800% / 12)
}

.width-9\/12 {
    width: calc(900% / 12)
}

.width-10\/12 {
    width: calc(1000% / 12)
}

.width-11\/12 {
    width: calc(1100% / 12)
}

.width-12\/12 {
    width: 100%
}