/* ===================
    COLS
====================== */
[class^="col-"] {
  margin: 0 auto;
  width: 100%;
  text-align: left;
  font-size: 0;
  white-space: inherit;
}

[class^="col-"] > *{
  padding:0;
  margin:0;
  border:0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  /* IMPORTANTE POR FONTSIZE 0 EN PARENT*/
  font-size: 16px;
}

@media only screen and (min-width: 480px) and (max-width:767px) {
  .col-4 > *,
  .col-5 > *,
  .col-6 > * { width:calc(100% / 2);
    display: inline-block;
    vertical-align: top;
  }
  .edge .col-4 > *, .msie .col-4 > *,
  .edge .col-5 > *, .msie .col-5 > *,
  .edge .col-6 > *, .msie .col-6 > * {
    width: calc(100% / 2.01);
  }
}

/************
 está sobreescrito en 1140, antes 768

*************/
@media only screen and (min-width: 1140px) {
  [class^="col-"] > * {
    width: calc(100% / 2);
    display: inline-block;
    vertical-align: top;
  }
  .msie [class^="col-"] > * {width: calc(100% / 2.01);}
  .edge [class^="col-"] > *,
  .msie [class^="col-"] > * {
    width: calc(100% / 2 - .1px);
  }
  .col-6 > * { width:calc(100% / 3);}
  .edge .col-6 > *,
  .msie .col-6 > * {
    width: calc(100% / 3.015);
  }
}


@media only screen and (min-width: 1140px) {
   .col-3 > * {width:calc(100% / 3);}
   .col-4 > * {width:calc(100% / 4);}
   .col-5 > * {width:calc(100% / 5);}
   .col-6 > * {width:calc(100% / 6);}
   .edge .col-3 > *,
   .msie .col-3 > * {width:calc(100% / 3.02);}
   .edge .col-4 > *,
   .msie .col-4 > * {width:calc(100% / 4.02);}
   .edge .col-5 > *,
   .msie .col-5 > *  {width:calc(100% / 5.02);}
   .edge .col-6 > *,
   .msie .col-6 > * {width:calc(100% / 6.02);}
}


@media only screen and (min-width: 1140px) {
  [class$="-mid"] > * {vertical-align: middle;}
  [class$="-bot"] > * {vertical-align: bottom;}
}