.zerogrid {
  position: relative;
  width: 960px;
  margin: 0 auto;
  padding: 0;
}

.zerogrid .row {
  margin-bottom: 10px;
}

.zerogrid .offleft {
  margin-left: 0px!important;
}

.zerogrid .offright {
  margin-right: 0px!important;
}

.zerogrid .offtop {
  margin-top: 0px!important;
}

.zerogrid .offbottom {
  margin-bottom: 0px!important;
}

.zerogrid .col01,
.zerogrid .col02,
.zerogrid .col03,
.zerogrid .col04,
.zerogrid .col05,
.zerogrid .col06,
.zerogrid .col07,
.zerogrid .col08,
.zerogrid .col09,
.zerogrid .col10,
.zerogrid .col11,
.zerogrid .col12,
.zerogrid .col13,
.zerogrid .col14,
.zerogrid .col15,
.zerogrid .col16,
.zerogrid .col-1-3,
.zerogrid .col-2-3 {
  float: left;
  display: inline;
  margin: 10px;
}
/* Base Grid */
.zerogrid .col01 {
  width: 40px;
}

.zerogrid .col02 {
  width: 100px;
}

.zerogrid .col03 {
  width: 160px;
}

.zerogrid .col04 {
  width: 220px;
}

.zerogrid .col05 {
  width: 280px;
}

.zerogrid .col06 {
  width: 340px;
}

.zerogrid .col07 {
  width: 400px;
}

.zerogrid .col08 {
  width: 460px;
}

.zerogrid .col09 {
  width: 520px;
}

.zerogrid .col10 {
  width: 580px;
}

.zerogrid .col11 {
  width: 640px;
}

.zerogrid .col12 {
  width: 700px;
}

.zerogrid .col13 {
  width: 760px;
}

.zerogrid .col14 {
  width: 820px;
}

.zerogrid .col15 {
  width: 880px;
}

.zerogrid .col16 {
  width: 940px;
}

.zerogrid .col-1-3 {
  width: 300px;
}

.zerogrid .col-2-3 {
  width: 620px;
}
/* Offsets */

.zerogrid .offset01 {
  margin-left: 60px;
}

.zerogrid .offset02 {
  margin-left: 120px;
}

.zerogrid .offset03 {
  margin-left: 180px;
}

.zerogrid .offset04 {
  margin-left: 240px;
}

.zerogrid .offset05 {
  margin-left: 300px;
}

.zerogrid .offset06 {
  margin-left: 360px;
}

.zerogrid .offset07 {
  margin-left: 420px;
}

.zerogrid .offset08 {
  margin-left: 480px;
}

.zerogrid .offset09 {
  margin-left: 540px;
}

.zerogrid .offset10 {
  margin-left: 600px;
}

.zerogrid .offset11 {
  margin-left: 660px;
}

.zerogrid .offset12 {
  margin-left: 720px;
}

.zerogrid .offset13 {
  margin-left: 780px;
}

.zerogrid .offset14 {
  margin-left: 840px;
}

.zerogrid .offset15 {
  margin-left: 900px;
}
/*--------------Tablet (Portrait)*/
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .zerogrid {
    width: 768px;
  }
  .zerogrid .col01,
  .zerogrid .col02,
  .zerogrid .col03,
  .zerogrid .col04,
  .zerogrid .col05,
  .zerogrid .col06,
  .zerogrid .col07,
  .zerogrid .col08,
  .zerogrid .col09,
  .zerogrid .col10,
  .zerogrid .col11,
  .zerogrid .col12,
  .zerogrid .col13,
  .zerogrid .col14,
  .zerogrid .col15,
  .zerogrid .col16,
  .zerogrid .col-1-3,
  .zerogrid .col-2-3 {
    margin: 10px;
  }

  .zerogrid .col01 {
    width: 28px;
  }

  .zerogrid .col02 {
    width: 76px;
  }

  .zerogrid .col03 {
    width: 124px;
  }

  .zerogrid .col04 {
    width: 172px;
  }

  .zerogrid .col05 {
    width: 220px;
  }

  .zerogrid .col06 {
    width: 268px;
  }

  .zerogrid .col07 {
    width: 316px;
  }

  .zerogrid .col08 {
    width: 364px;
  }

  .zerogrid .col09 {
    width: 412px;
  }

  .zerogrid .col10 {
    width: 460px;
  }

  .zerogrid .col11 {
    width: 508px;
  }

  .zerogrid .col12 {
    width: 556px;
  }

  .zerogrid .col13 {
    width: 604px;
  }

  .zerogrid .col14 {
    width: 652px;
  }

  .zerogrid .col15 {
    width: 700px;
  }

  .zerogrid .col16 {
    width: 748px;
  }

  .zerogrid .col-1-3 {
    width: 236px;
  }

  .zerogrid .col-2-3 {
    width: 492px;
  }
  /* Offsets */
  .zerogrid .offset01 {
    margin-left: 48px;
  }

  .zerogrid .offset02 {
    margin-left: 96px;
  }

  .zerogrid .offset03 {
    margin-left: 144px;
  }

  .zerogrid .offset04 {
    margin-left: 192px;
  }

  .zerogrid .offset05 {
    margin-left: 240px;
  }

  .zerogrid .offset06 {
    margin-left: 288px;
  }

  .zerogrid .offset07 {
    margin-left: 336px;
  }

  .zerogrid .offset08 {
    margin-left: 384px;
  }

  .zerogrid .offset09 {
    margin-left: 432px;
  }

  .zerogrid .offset10 {
    margin-left: 480px;
  }

  .zerogrid .offset11 {
    margin-left: 528px;
  }

  .zerogrid .offset12 {
    margin-left: 576px;
  }

  .zerogrid .offset13 {
    margin-left: 624px;
  }

  .zerogrid .offset14 {
    margin-left: 672px;
  }

  .zerogrid .offset15 {
    margin-left: 720px;
  };
}
/*--------------Mobile (Portrait)*/
/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
  .zerogrid {
    width: 300px;
  }

  .zerogrid .col01,
  .zerogrid .col02,
  .zerogrid .col03,
  .zerogrid .col04,
  .zerogrid .col05,
  .zerogrid .col06,
  .zerogrid .col07,
  .zerogrid .col08,
  .zerogrid .col09,
  .zerogrid .col10,
  .zerogrid .col11,
  .zerogrid .col12,
  .zerogrid .col13,
  .zerogrid .col14,
  .zerogrid .col15,
  .zerogrid .col16,
  .zerogrid .col-1-3,
  .zerogrid .col-2-3 {
    margin: 10px 0;
  }

  .zerogrid .col01,
  .zerogrid .col02,
  .zerogrid .col03,
  .zerogrid .col04,
  .zerogrid .col05,
  .zerogrid .col06,
  .zerogrid .col07,
  .zerogrid .col08,
  .zerogrid .col09,
  .zerogrid .col10,
  .zerogrid .col11,
  .zerogrid .col12,
  .zerogrid .col13,
  .zerogrid .col14,
  .zerogrid .col15,
  .zerogrid .col16,
  .zerogrid .col-1-3,
  .zerogrid .col-2-3 {
    width: 300px;
  }
  /* Offsets */
  .zerogrid .offset01,
  .zerogrid .offset02,
  .zerogrid .offset03,
  .zerogrid .offset04,
  .zerogrid .offset05,
  .zerogrid .offset06,
  .zerogrid .offset07,
  .zerogrid .offset08,
  .zerogrid .offset09,
  .zerogrid .offset10,
  .zerogrid .offset11,
  .zerogrid .offset12,
  .zerogrid .offset13,
  .zerogrid .offset14,
  .zerogrid .offset15 {
    margin-left: 0;
  };
}
/*--------------Mobile (Landscape)*/
/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .zerogrid {
    width: 420px;
  }

  .zerogrid .col01,
  .zerogrid .col02,
  .zerogrid .col03,
  .zerogrid .col04,
  .zerogrid .col05,
  .zerogrid .col06,
  .zerogrid .col07,
  .zerogrid .col08,
  .zerogrid .col09,
  .zerogrid .col10,
  .zerogrid .col11,
  .zerogrid .col12,
  .zerogrid .col13,
  .zerogrid .col14,
  .zerogrid .col15,
  .zerogrid .col16,
  .zerogrid .col-1-3,
  .zerogrid .col-2-3 {
    margin: 10px 0;
  }

  .zerogrid .col01,
  .zerogrid .col02,
  .zerogrid .col03,
  .zerogrid .col04,
  .zerogrid .col05,
  .zerogrid .col06,
  .zerogrid .col07,
  .zerogrid .col08,
  .zerogrid .col09,
  .zerogrid .col10,
  .zerogrid .col11,
  .zerogrid .col12,
  .zerogrid .col13,
  .zerogrid .col14,
  .zerogrid .col15,
  .zerogrid .col16,
  .zerogrid .col-1-3,
  .zerogrid .col-2-3 {
    width: 420px;
  };
}
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.zerogrid:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.row:after,
.clearfix:after {
  clear: both;
}

.row,
.clearfix {
  zoom: 1;
}
/* You can also use a <br class="clear" /> to clear columns */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.zerogrid_block_alter {
  background: #3f3f3f;
  color: #ffffff;
}