@media (min-width: 1200px) {
  .row {
    margin-left: -24px; }

  .container {
    width: 1056px;
    padding-left: 28px; }

  [class*="span"] {
    margin-left: 24px; }

  .span1 {
    width: 84px; }

  .span2 {
    width: 168px; }

  .span3 {
    width: 240px; }

  .span4 {
    width: 336px; }

  .span5 {
    width: 420px; }

  .span6 {
    width: 504px; }

  .span7 {
    width: 588px; }

  .span8 {
    width: 672px; }

  .span9 {
    width: 756px; }

  .span10 {
    width: 840px; }

  .span11 {
    width: 924px; }

  .span12 {
    width: 1032px;
    /* scale to full base width */ } 
}

@media (max-width: 979px) and (min-width: 768px) {
  .container {
    width: 768px; }

.span12 {
    width: 724px;
}
.span11 {
    width: 662px;
}
.span10 {
    width: 600px;
}
.span9 {
    width: 538px;
}
.span8 {
    width: 504px;
}
.span7 {
    width: 414px;
}
.span6 {
    width: 352px;
}
.span5 {
    width: 290px;
}
.span4 {
    width: 240px;
}
.span3 {
    width: 166px;
}
.span2 {
    width: 104px;
}
.span1 {
    width: 42px;
}

  [class*="span"] {
    margin-left: 24px;
  }

}

@media (max-width: 420px) {
  .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
    width: 100%; } }