/*=========================================
    Container
=========================================*/
.container {
  width: 300px;
  margin: 0 auto;
  *zoom: 1;
}
.container:before,
.container:after,
.nested:before,
.nested:after {
  content: "";
  display: table;
}
.container:after,
.nested:after {
  clear: both;
}
.nested {
  margin-left: -8px;
  margin-right: -8px;
  *zoom: 1;
  *position: relative;
}
/*=========================================
  Columns
=========================================*/
/* Set the column margins */
[class*="span"] {
  float: left;
  display: inline;
  margin-left: 8px;
  margin-right: 8px;
}
/* Set the default layout for browsers that don't support media-queries */
.container {
	width: 960px;
	font-family: sans-serif;
}
.span1 {
  width: 64px;
}
.span2 {
  width: 144px;
}
.span3 {
	width: 224px;
	color: #FFF;
}
.span4 {
  width: 304px;
}
.span5 {
  width: 384px;
}
.span6 {
  width: 464px;
}
.span7 {
	width: 544px;
	font-family: Armata, Helvetica, Arial, sans-serif;
	font-style: italic;
}
.span8 {
	width: 624px;
	font-family: sans-serif;
	color: #000;
	font-size: 13px;
}
.span9 {
  width: 704px;
}
.span10 {
  width: 784px;
}
.span11 {
  width: 864px;
}
.span12 {
	width: 944px;
	font-family: sans-serif;
}
/*=========================================
    Media Queries
=========================================*/
/* Stage 1 - Portrait smartphones */
@media (max-width: 479px) {
  .container {
    width: 300px;
  }
  [class*="span"] {
    width: 100%;
  }
  [class*="span"],
  .nested {
    margin-left: 0;
    margin-right: 0;
  }
}
/* Stage 2 - Landscape smartphones, portrait tablets */
@media (min-width: 480px) and (max-width: 767px) {
  .container {
    width: 460px;
  }
  .container {
    width: 460px;
  }
  .span1 {
    width: 22.333333333333336px;
  }
  .span2 {
    width: 60.66666666666667px;
  }
  .span3 {
    width: 99px;
  }
  .span4 {
    width: 137.33333333333334px;
  }
  .span5 {
    width: 175.66666666666669px;
  }
  .span6 {
    width: 214px;
  }
  .span7 {
    width: 252.33333333333337px;
  }
  .span8 {
    width: 290.6666666666667px;
  }
  .span9 {
    width: 329px;
  }
  .span10 {
    width: 367.33333333333337px;
  }
  .span11 {
    width: 405.6666666666667px;
  }
  .span12 {
    width: 444px;
  }
}
/* Stage 3 - Landscape tablets */
@media (min-width: 768px) and (max-width: 979px) {
  .container {
    width: 720px;
  }
  .span1 {
    width: 44px;
  }
  .span2 {
    width: 104px;
  }
  .span3 {
    width: 164px;
  }
  .span4 {
    width: 224px;
  }
  .span5 {
    width: 284px;
  }
  .span6 {
    width: 344px;
  }
  .span7 {
    width: 404px;
  }
  .span8 {
    width: 464px;
  }
  .span9 {
    width: 524px;
  }
  .span10 {
    width: 584px;
  }
  .span11 {
    width: 644px;
  }
  .span12 {
    width: 704px;
  }
}
/* Stage 4 - Standard screens */
@media (min-width: 980px) and (max-width: 1200px) {
  .container {
    width: 960px;
  }
  .span1 {
    width: 64px;
  }
  .span2 {
    width: 144px;
  }
  .span3 {
    width: 224px;
  }
  .span4 {
    width: 304px;
  }
  .span5 {
    width: 384px;
  }
  .span6 {
    width: 464px;
  }
  .span7 {
    width: 544px;
  }
  .span8 {
    width: 624px;
  }
  .span9 {
    width: 704px;
  }
  .span10 {
    width: 784px;
  }
  .span11 {
    width: 864px;
  }
  .span12 {
    width: 944px;
  }
}
/* Stage 5 - Large screens */
@media (min-width: 1201px) {
  .container {
    width: 1140px;
  }
  .span1 {
    width: 79px;
  }
  .span2 {
    width: 174px;
  }
  .span3 {
    width: 269px;
  }
  .span4 {
    width: 364px;
  }
  .span5 {
    width: 459px;
  }
  .span6 {
    width: 554px;
  }
  .span7 {
    width: 649px;
  }
  .span8 {
    width: 744px;
  }
  .span9 {
    width: 839px;
  }
  .span10 {
    width: 934px;
  }
  .span11 {
    width: 1029px;
  }
  .span12 {
    width: 1124px;
  }
}