/* imports */
@import url(http://fonts.googleapis.com/css?family=Lobster);
/* resets */
*,*:before,*:after {box-sizing: border-box;}
.clearfix:after {content: "";display: table;clear: both;}
.wrapper {margin: 0 auto;padding: 20px;max-width: 95%;background-color: #fff;}
h1 {font-family: "Lobster", cursive;font-size: 2em;margin-bottom: 10px;}
h2 {font-weight: 700;}
/* grid */
[class*="row-"] {argin-bottom: 20px;}
[class*="row-"]:last-child {margin-bottom: 0;}
@media all and ( min-width: 768px ) {[class*="col-"] {margin-right: 20px;}[class*="col-"]:last-child {margin-right: 0;}
/* make the columns responsive */
.col-1-2 {float: left;width: 50%;}
.col-1-4 {float: left;width: 25%;}
.col-1-8 {float: left;width: 25%;}
/* 2 span rows */
.row-2 {padding-left: 20px;}
.row-2 [class*="col-"]:first-child {margin-left: -20px;}
/* 4 span rows */
.row-4 {padding-left: 60px;}
.row-4 [class*="col-"]:first-child {margin-left: -60px;}
/* 8 span rows */
.row-8 {padding-left: 60px;}
.row-8 [class*="col-"]:nth-child(4n+1) {margin-left: -60px;}
.row-8 [class*="col-"]:nth-child(5n-1) {margin-right: 0;}
.row-8 [class*="col-"]:nth-child(6n-1) {clear: both;}
}
@media all and ( min-width: 1200px ) {
/* adjust width */
.col-1-8 {float: left;width: 12.5%;}
/* 8 span rows */
.row-8 {padding-left: 140px;}
/* reset these... */
.row-8 [class*="col-"]:nth-child(4n+1) {margin-left: 0;}
.row-8 [class*="col-"]:nth-child(5n-1) {margin-right: 20px;}
.row-8 [class*="col-"]:nth-child(6n-1) {clear: none;}
/* and add this */
.row-8 [class*="col-"]:nth-child(1) {margin-left: -140px;}
}