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


/*
* Make padding grow in-ward
* =========================
*
* 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.
*
* If below `html` conflicts with your exisiting layout comment it out and add `box-sizing: border-box` to `.cloumn` definition. 
*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


/*
* Automatically make elements that wrap our columns grow
* ======================================================
*/

/*
DS,2016-Apr-26: more testing for below is needed, but if it is too aggresive in your existing style comment it out and use `.column-wrapper`
DS,2106-Apr-27-0135: changed to `visible` as popup menus fail to show
DS,2106-Apr-27-0138: since we should always use column-wrapper to clear columns we might as well avoid the below css
DS,2106-Apr-27-0152: `visible` causes elements with itesm bigger then 100% to create a horziontal scroll bar 
*/

/*body * {
    overflow: visible;
}*/

/* use this class to make parent 'wrap' our floated columns and clear our column rows */
.column-wrapper {
    overflow: hidden;
    clear: both;
}



/*
* The 12 column based grid
*
* Class name leverage escaping of characters - see: https://mathiasbynens.be/notes/css-escapes, Note that these can be used without the column class 
*/
.column
,.column-last {
    float: left;
    padding-right: 1em;
    /*box-sizing: border-box;*/
}

/* our last column in a row should not have right padding */
.column:last-of-type /* automatically handles a case where all columns add up to 100% in one wrapping element, ex. in a `row` class div */
,.column-last /* add this class manually to remove padding on right */
,.width-12\/12 /* full width column should not have padding on right */
{
    padding-right: 0;
}

.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%
}


.heroBannerTEMP {
    max-height: 730px; /* video full height on 1920x1080 monitor */
}

.heroBannerTEMP .heroBannerBackgroundWrapper {
    position: absolute;
}