/* ===================
    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*/

}

@media only screen and (min-width: 480px) and (max-width:959px) {
  .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);
  }

}

@media only screen and (min-width: 960px) {
  [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: 1280px) {
   .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: 960px) {
  [class*="-mid"] > * {vertical-align: middle;}
  [class*="-bot"] > * {vertical-align: bottom;}
}