/* Widths */
.span1,
.span2,
.span2,
.span3,
.span4,
.span5,
.span6,
.span7{
	float: left
}
.span1{
	width: 700px
}
.span2{
	width: 330px
}
.span3{
  width: 445px
}
.span4{
  width: 200px
}

/* Padding */
.pad1{
	padding-left: 20px
}
.pad2{
	padding-left: 30px
}
.pad3{
  padding-left: 50px
}

@media only screen and (min-width: 768px) and (max-width: 959px) {

/* Widths */
.span1 {
  width: 466px;
}
.span2{
  width: 100%
}
.span3{
  width: 215px
}

/* Padding */
.pad2{
  padding-left: 0
}

}

@media only screen and (min-width: 480px) and (max-width: 767px) {

/* Widths */
.span1 {
  width: 380px;
}
.span2{
  width: 100%
}
.span3{
  width: 100%;
  margin-bottom: 25px
}

/* Padding */
.pad2, .pad3, .pad1{
  padding-left: 0
}

}

@media only screen and (max-width: 767px) {

/* Widths */
.span1 {
  width: 100%;
}
.span2{
  width: 100%
}
.span3{
  width: 100%;
  margin-bottom: 25px
}

/* Padding */
.pad2, .pad3, .pad1{
  padding-left: 0
}


}

/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container_12: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;
    }