/* ==========================================================================
   Grid
   ========================================================================== */
/*
 * Example uses:
 *
 * <div class="grid">
 *     <div class="grid__cell unit-1-2"></div>
 *     <div class="grid__cell unit-1-2"></div>
 *     <div class="grid__cell unit-1-3"></div>
 *     <div class="grid__cell unit-1-3"></div>
 * </div>
 *
 * <div class="grid grid--center">
 *     <div class="grid__cell unit-1-3"></div>
 *     <div class="grid__cell unit-1-3"></div>
 * </div>
 */
/* Grid core
   ========================================================================== */
/**
 * Grid container
 * Must only contain `.grid` or `.grid__cell` components as children.
 *
 * 1. Adjustment for child element margins.
 * 2. Ensure consistent default alignment/
 * 3. Remove inter-unit whitespace that appears between `inline-block` child
 *    elements. Work for all non-monospace font-families.  If you're using a
 *    monospace base font, you will need to set the `grid` font-family to
 *   `sans-serif` and then redeclare the monospace font on the `grid__cell`
 *    objects.
 * 4. Protect against WebKit bug with optimizelegibility.
 */
.grid {
  display: block;
  padding: 0;
  margin: 0;
  /* 1 */
  text-align: left;
  /* 2 */
  letter-spacing: -0.31em;
  /* 3 */
  text-rendering: optimizespeed;
  /* 4 */
  transition:all 600ms;
  
  overflow: hidden;
  
  position: relative;
  z-index: 0;
}

/**
 * Opera hack
 */
.opera:-o-prefocus,
.grid {
  word-spacing: -0.43em;
  /* 3 */
}

/**
 * Child `grid` object adjustments
 * Used for more complex fixed-fluid hybrid grids.
 */
.grid > .grid {
  overflow: hidden;
  margin-right: 0;
  margin-left: 0;
}

/**
 * Grid units
 * No explicit width by default. Apply `.unit-x-y` classes.
 *
 * 1. Fundamentals of the non-float grid layout mechanism.
 * 2. Apply grid gutter.
 * 3. Controls vertical positioning of units.
 * 4. Keeps content correctly aligned with the grid direction.
 * 5. Reset text defaults.
 */
.grid__cell {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  display: inline-block;
  /* 1 */
  margin: 0;
  padding: 0;
  /* 2 */
  vertical-align: top;
  /* 3 */
  text-align: left;
  /* 4 */
  letter-spacing: normal;
  /* 5 */
  word-spacing: normal;
  /* 5 */
  text-rendering: auto;
  /* 5 */
  height: 100%;
  transition:all 600ms;
  /*box-shadow: inset 1px 1px 1px #F00;*/
  position: relative;
  z-index: 0;
}


/* Grid modifiers
   ========================================================================== */
/**
 * Modifier: horizontally center all grid units
 * Allows for automatic unit centering irrespective of the number of
 * units in the grid.
 */
.grid--center {
  text-align: center;
}

/**
 * Modifier: align horizontally all grid units to the left
 */
.grid--left {
  text-align: left;
}

/**
 * Modifier: align horizontally all grid units to the right
 */
.grid--right {
  text-align: right;
}


.grid__wrap{
	height: 100%;
	display: inline;
	position: absolute;
	width: 100%;
}

/* Grid cell modifiers
   ========================================================================== */
/**
 * Modifier: horizontally center one unit
 * Set a specific unit to be horizontally centered. Doesn't affect
 * any other units. Can still contain a child `grid` object.
 */
.grid__cell--center {
  display: block;
  margin: 0 auto;
}

/**
 * Modifier: align horizontally one unit to the left
 * Set a specific unit to be horizontally on the left. Doesn't affect
 * any other units. Can still contain a child `grid` object.
 */
.grid__cell--left {
  display: block;
  margin-right: auto;
}

/**
 * Modifier: align horizontally one unit to the right
 * Set a specific unit to be horizontally on the right. Doesn't affect
 * any other units. Can still contain a child `grid` object.
 */
.grid__cell--right {
  display: block;
  margin-left: auto;
}

/* Proportional units
       ========================================================================== */
/*
     * Specify the proportional width of an object.
     * Primarily for, but not limited to, use with `.grid__cell` components.
     * Intentional redundancy build into each set of unit classes.
     */
.unit-1-12 {
  width: 8.33333%;
}

.unit-2-12 {
  width: 16.66667%;
}

.unit-3-12 {
  width: 25%;
}

.unit-4-12 {
  width: 33.33333%;
}

.unit-5-12 {
  width: 41.66667%;
}

.unit-6-12 {
  width: 50%;
}

.unit-7-12 {
  width: 58.33333%;
}

.unit-8-12 {
  width: 66.66667%;
}

.unit-9-12 {
  width: 75%;
}

.unit-10-12 {
  width: 83.33333%;
}

.unit-11-12 {
  width: 91.66667%;
}

/* Proportional units
       ========================================================================== */
/*
     * Specify the proportional width of an object.
     * Primarily for, but not limited to, use with `.grid__cell` components.
     * Intentional redundancy build into each set of unit classes.
     */
.unit-1-9 {
  width: 11.11111%;
}

.unit-2-9 {
  width: 22.22222%;
}

.unit-3-9 {
  width: 33.33333%;
}

.unit-4-9 {
  width: 44.44444%;
}

.unit-5-9 {
  width: 55.55556%;
}

.unit-6-9 {
  width: 66.66667%;
}

.unit-7-9 {
  width: 77.77778%;
}

.unit-8-9 {
  width: 88.88889%;
}

/* -------------------
 unit heights	
--------------------- */

.vh10{min-height: 150px; height: 10vh; max-height: 10vh}
.vh15{min-height: 175px; height: 15vh; max-height: 15vh}
.vh20{min-height: 200px; height: 20vh; max-height: 20vh}
.vh30{min-height: 250px; height: 30vh; max-height: 30vh}
.vh40{min-height: 300px; height: 40vh; max-height: 40vh}
.vh50{min-height: 350px; height: 50vh; max-height: 50vh}
.vh60{min-height: 400px; height: 60vh; max-height: 60vh}
.vh70{min-height: 450px; height: 70vh; max-height: 70vh}
.vh80{min-height: 475px; height: 80vh; max-height: 80vh}
.vh85{min-height: 500px; height: 85vh; max-height: 85vh}
.vh90{min-height: 550px; height: 90vh; max-height: 90vh}
.vh100{min-height: 600px; height: 100vh; max-height: 100vh}