/**
 * grid.css
 * responsive grid layout
 *
 * this is a very simple to use grid that assumes outside gutters unless the
 * layout uses the opt out classes.
 */

/* make sure the browsers do what we expect */
.grid,
.col {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* set bounds on the grid */
.grid{
  display: block;
  clear: both;
}

.grid .col{
  float: left;
  width: 100%;
  padding: 10px;
}

/* innter gutters are doubled, ensure outside gutters match */
.grid .col:first-child{ padding-left: 20px; }
.grid .col:last-child{ padding-right: 20px; }

/* kill any padding for nested grids */
.col .col:first-child{ padding-left: 0; }
.col .col:last-child{ padding-right: 0; }
.col .grid:first-child > .col{ padding-top: 0; }
.col .grid:last-child > .col{ padding-bottom: 0; }

/* gutter opt-out selectors */
.no-gutters .col,
.col.no-gutters {
  padding: 0                                      !important;
}

/* wrapping opt-in selectors - max width 978 */
.wrap .grid,
.grid.wrap {
  max-width: 978px;
  margin: 0 auto;
}

/* width classes - broken into fractions - easier for me to remember */
/* thirds */
.grid .col-1-3 { width: 33.33%; }
.grid .col-2-3 { width: 66.66%; }

/* fourths */
.grid .col-1-4 { width: 25%; }
.grid .col-1-2 { width: 50%; }
.grid .col-3-4 { width: 75%; }

/* fifths  */
.grid .col-1-5 { width: 20%; }
.grid .col-2-5 { width: 40%; }
.grid .col-3-5 { width: 60%; }
.grid .col-4-5 { width: 80%; }

/* eighths */
/* could mix with fourths - duplicated values here for readability */
.grid .col-1-8 { width: 12.5%; }
.grid .col-2-8 { width: 25%; }
.grid .col-3-8 { width: 37.5%; }
.grid .col-4-8 { width: 50%; }
.grid .col-5-8 { width: 62.5%; }
.grid .col-6-8 { width: 75%; }
.grid .col-7-8 { width: 87.5%; }

/* twelve-ths */
.grid .col-1-12 { width: 8.33%; }
.grid .col-2-12 { width: 16.33%; }
.grid .col-3-12 { width: 25%; }
.grid .col-4-12 { width: 33.33%; }
.grid .col-5-12 { width: 41.66%; }
.grid .col-6-12 { width: 50%; }
.grid .col-7-12 { width: 58.33%; }
.grid .col-8-12 { width: 66.66%; }
.grid .col-9-12 { width: 75%; }
.grid .col-10-12 { width: 83.33%; }
.grid .col-11-12 { width: 91.66%; }

/* for consitency */
.grid .col-full { width: 100%; }

/* clearfix - of course */
.grid {
  *zoom: 1;
}

.grid:before, .grid:after{
  display: table;
  content: "";
  line-height: 0;
}

.grid:after{
  clear: both;
}

/* utility classes */
.align-center{ text-align: center; }
.align-left{ text-align: left; }
.align-right{ text-align: right; }

.left{ float: left; }
.right{ float: right; }
.clear{ clear: both; }

.padded-col{ padding: 10px; }

.hide-on-desktop{ display: none                   !important; }

/* content panel - can use either content or panel as the selector */
.content, .panel{
  /*border: 1px dashed #ccc;*/
}

/*---------------------------------------------------------------------------*/
/* Be Responsive                                                             */
/*---------------------------------------------------------------------------*/
/* modification - aadel - 12/19/2016 - not sure why this was set to 568, but making it 768 like bootstrap */
/* modification - kkd - 12/23/2016 - changing it back to 568 for now */
@media screen and ( max-width: 736px ){
  .grid .col{
    width: 100%                                   !important;
    padding-left: 20px;
    padding-right: 20px;
  }

  .col .grid .col{
    padding-left: 0;
    padding-right: 0;
  }

  /* mobile specific classes */
  .center-on-mobile{
    clear: both;
    float: none;
    text-align: center                            !important;
  }

  .hide-on-mobile{
    display: none                                 !important;
  }

  .hide-on-desktop{ display: block                 !important; }
}

/* expand the wrap on larger screens */
@media screen and ( min-width: 1180px ){
  .wider .grid{
    max-width: 1180px;
    margin: 0 auto;
  }
}