/*
  The first thing we're going to add is a global reset and box-sizing rule.
  This will make sure that padding applied to our elements is added within their
  calculated dimensions, giving us far more freedom for defining column widths.
*/
  
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
  
ul {
  margin: 0;
  padding: 0;
}
  
/*
  ALL IMAGES
  Next we'll add a rule to make sure any images used behave fluidly.
*/
img {
  width: auto;
  max-width: 100%;
  height: auto !important;
}
  
/*
  THE WRAPPER
  Now some rules to make sure our wrapper element behaves itself.
*/
.wrapper {
  width: 100%;
  margin: 0 auto;
}
  
/*
  THE ROWS
  All our row elements do is contain the columns,
  making sure that groups of columns clear each other properly.
  Let's add some general .clearfix rules to our wrapper and row elements.
*/
  
.wrapper:after,
.row:after {
  content: "";
  display: table;
  clear: both;
}

  
[class^="col-"] {
  float: left;
  padding: 0;
  width: 100%;
  min-height: 1px;
}
  
 
  .col-1  { width: 8.333333334%; }
  .col-2  { width: 16.666666667%; }
  .col-3  { width: 25% ; }
  .col-4  { width: 33.333333334%; }
  .col-5  { width: 41.666666666%; }
  .col-6  { width: 50%; }
  .col-7  { width: 58.3333333333%; }
  .col-8  { width:66.6666666667%; }
  .col-9  { width: 75%; }
  .col-10 { width:83.3333333333%; }
  .col-11 { width:91.6666666667%; }
  .col-12 { width: 100%; }