body {
  margin: 0;
  padding: 0; }

.col {
  width: calc(100% - 20px);
  height: 70px;
  margin: 0 10px; }

@media (min-width: 769px) {
  .col-md-1 {
    width: calc((1 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-md-2 {
    width: calc((2 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-md-3 {
    width: calc((3 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-md-4 {
    width: calc((4 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-md-5 {
    width: calc((5 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-md-6 {
    width: calc((6 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-md-7 {
    width: calc((7 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-md-8 {
    width: calc((8 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-md-9 {
    width: calc((9 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-md-10 {
    width: calc((10 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-md-11 {
    width: calc((11 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-md-12 {
    width: calc((12 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; } }

@media (max-width: 768px) {
  .col-s-1 {
    width: calc((1 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-s-2 {
    width: calc((2 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-s-3 {
    width: calc((3 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-s-4 {
    width: calc((4 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-s-5 {
    width: calc((5 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-s-6 {
    width: calc((6 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-s-7 {
    width: calc((7 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-s-8 {
    width: calc((8 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-s-9 {
    width: calc((9 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-s-10 {
    width: calc((10 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-s-11 {
    width: calc((11 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; }
  .col-s-12 {
    width: calc((12 / 12) * 100% - 20px);
    margin: 10px;
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
    box-sizing: border-box;
    float: left; } }