/* grid12.css */

* { 
  box-sizing: border-box;
}

.row {  
  width: 100%;
  /* NOTE! : Avoids top margin by h1 child element */
  padding-top: 1px;
}

.filled {
  background: url("/images/gradient-grey.jpg") repeat-x;
  background: linear-gradient( #eee, #ffffff 100%);
}

.row:after {
  content: "";
  clear: both;
  display: block;
}

.col-1 { width: 5.5%; }
.col-2 { width: 14%; }
.col-3 { width: 22.5%; }
.col-4 { width: 31%; }
.col-5 { width: 39.5%; }
.col-6 { width: 48%; }
.col-7 { width: 56.5%; }
.col-8 { width: 65%; }
.col-9 { width: 73.5%; }
.col-10 { width: 82%; }
.col-11 { width: 90.5%; }
.col-12 { width: 98%; margin: 0; }

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, 
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  float: left;
  margin: 0 1% 0 1%;
}

.col-1.last, .col-2.last, .col-3.last, .col-4.last, .col-5.last, .col-6.last,
.col-7.last, .col-8.last, .col-9.last, .col-10.last, .col-11.last {
  margin: 0;
}

.col-1 img, .col-2 img, .col-3 img, .col-4 img, .col-5 img, .col-6 img, 
.col-7 img, .col-8 img, .col-9 img, .col-10 img, .col-11 img, .col-12 img {
  width: 100%;
  height: auto;
  display: block;
}

@media all and (max-width: 599px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    float: none;
    width: 99%;
  }
}

@media all and (min-width: 480px) {
  .col-3 {
    width: 48%;
    height: auto;
    display: block;
    float: left;
  }
  .col-valign {
    clear: both;
    display: block;
  }
}

@media all and (min-width: 768px) {
  .col-3 {
    width: 22.5%;
  }
  .col-valign {
    clear: none;
    display: none;
  }
}

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

/* [class*="col-"] {  */
/*     float: left; */
/*     min-height: 1px; */
/* } */

/* **************************************************************** */
/* PLEASE NOTE! 										   */
/* The order of the media query is important to overwrite the width */
/* beginning with small to large devices. E.g.:				   */
/* class="col-xs-12 col-li-6 col-md-4"						   */
/* **************************************************************** */

.body:after {
  display: none;
  height: 0px;
  font-size: 0;
}

.check-media {
  display: none;
  width: 0px;
}

[class*="-clear"] {
}

.sep-line {
  padding: 0.5em;
  border-bottom: 1px solid #ccc;
  display: block;
}

/* ************************ */
/* col-xs very small <= 599 */
/* ************************ */
@media (max-width:599px) {
  body:after { content: "xs"; display: none; }
  .col-xs-0 { display: none; }
  .col-xs-1 { width: 5.5%; }
  .col-xs-2 { width: 14%; }
  .col-xs-3 { width: 22.5%; }
  .col-xs-4 { width: 31%; }
  .col-xs-5 { width: 39.5%; }
  .col-xs-6 { width: 48%; }
  .col-xs-7 { width: 56.5%; }
  .col-xs-8 { width: 65%; }
  .col-xs-9 { width: 73.5%; }
  .col-xs-10 { width: 82%; }
  .col-xs-11 { width: 90.5%; }
  .col-xs-12 { width: 98%; }
  [class*="col-xs-"] {
    float: left;
    min-height: 1px;
    margin: 0 1% 0 1%;
  }
  /* because of the former class* rule we must use a different naming */
  /* schema for the clear classes (e.g. col-clear-xs instead of  */
  /* col-xs-clear) */
  .col-clear-xs, .col-clear-sm, .col-clear-li, .col-clear-md, .col-clear-lg {
    clear: none;
    display: none;
  }
  .col-clear-xs {
    display: block;
  }
}

/* *************************** */
/* col-li litte devices >= 600 */
/* *************************** */
@media (min-width:600px) {
  body:after { content: "li"; display: none; }
  .check-media {
    width: 600px;
  }
  .col-li-1 { width: 5.5%; }
  .col-li-2 { width: 14%; }
  .col-li-3 { width: 22.5%; }
  .col-li-4 { width: 31% !important; }
  .col-li-5 { width: 39.5%; }
  .col-li-6 { width: 48%; }
  .col-li-7 { width: 56.5%; }
  .col-li-8 { width: 65%; }
  .col-li-9 { width: 73.5%; }
  .col-li-10 { width: 82%; }
  .col-li-11 { width: 90.5%; }
  .col-li-12 { width: 98%; }
  [class*="col-li-"] {
    float: left;
    min-height: 1px;
    margin: 0 1% 0 1%;
  }
  .col-clear-xs, .col-clear-sm, .col-clear-md, .col-clear-lg {
    clear: none;
    display: none;
  }
  .col-clear-li {
    clear: left;
    display: block;
  }
  .col-6-last-li {
    float: left;
  }
  .col-6-last-li {
    float: right;
  }
}

/* *************************** */
/* col-sm small devices >= 768 */
/* *************************** */
@media (min-width:768px) { 
  body:after { content: "sm"; display: none; }
  .check-media {
    width: 768px;
  }
  .col-sm-1 { width: 5.5%; }
  .col-sm-2 { width: 14%; }
  .col-sm-3 { width: 22.5%; }
  .col-sm-4 { width: 31%; }
  .col-sm-5 { width: 39.5%; }
  .col-sm-6 { width: 48%; }
  .col-sm-7 { width: 56.5%; }
  .col-sm-8 { width: 65%; }
  .col-sm-9 { width: 73.5%; }
  .col-sm-10 { width: 82%; }
  .col-sm-11 { width: 90.5%; }
  .col-sm-12 { width: 98%; }
  [class*="col-sm-"] {
    float: left;
    min-height: 1px;
    margin: 0 1% 0 1%;
  }
  .col-clear-xs, .col-clear-li, .col-clear-md, .col-clear-lg {
    clear: none;
    display: none;
  }
  .col-clear-sm {
    clear: left;
    display: block;
  }
}

/* ****************************** */
/* col-md medium devices >= 992px */
/* ****************************** */
@media (min-width:992px) { 
  body:after { content: "md"; display: none; }
  .check-media {
    width: 992px;
  }
  .col-md-1 { width: 5.5%; }
  .col-md-2 { width: 14%; }
  .col-md-3 { width: 22.5%; }
  .col-md-4 { width: 31%; }
  .col-md-5 { width: 39.5%; }
  .col-md-6 { width: 48%; }
  .col-md-7 { width: 56.5%; }
  .col-md-8 { width: 65%; }
  .col-md-9 { width: 73.5%; }
  .col-md-10 { width: 82%; }
  .col-md-11 { width: 90.5%; }
  .col-md-12 { width: 98%; }
  [class*="col-md-"] {
    float: left;
    min-height: 1px;
    margin: 0 1% 0 1%;
  }
  .col-clear-xs, .col-clear-li, .col-clear-sm, .col-clear-lg {
    clear: none;
    display: none;
  }
  .col-clear-md {
    clear: left;
    display: block;
  }
}

/* ****************************** */
/* col-lg large devices >= 1200px */
/* ****************************** */
@media (min-width:1200px) {
  body:after { content: "lg"; display: none; }
  .check-media {
    width: 1200px;
  }
  .col-lg-1 { width: 5.5%; }
  .col-lg-1-5 { width: 10.5%; }
  .col-lg-2 { width: 14%; }
  .col-lg-3 { width: 22.5%; }
  .col-lg-4 { width: 31%; }
  .col-lg-5 { width: 39.5%; }
  .col-lg-6 { width: 48%; }
  .col-lg-7 { width: 56.5%; }
  .col-lg-8 { width: 65%; }
  .col-lg-9 { width: 73.5%; }
  .col-lg-10 { width: 82%; }
  .col-lg-11 { width: 90.5%; }
  .col-lg-12 { width: 98%; }
  [class*="col-lg-"] {
    float: left;
    min-height: 1px;
    margin: 0 1% 0 1%;
  }
  .col-clear-xs, .col-clear-li, .col-clear-sm, .col-clear-md {
    clear: none;
    display: none;
  }
  .col-clear-lg {
    clear: left;
    display: block;
  }
}