/* mobile portrait (default): 10px gutter + 10px padding */

.viewport.xs {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

#main-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.row {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 -10px;
}

.col {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
    float: left;
}

.row:before,
.row:after {
    display: table;
    content: " ";
}
.row:after {
    clear: both;
}

.col.xs12 {  width: 100%; }
.col.xs11 {  width: 91.66666666666666%; }
.col.xs10 {  width: 83.33333333333334%; }
.col.xs9  {  width: 75%; }
.col.xs8  {  width: 66.66666666666666%; }
.col.xs7  {  width: 58.333333333333336%; }
.col.xs6  {  width: 50%; }
.col.xs5  {  width: 41.66666666666667%; }
.col.xs4  {  width: 33.33333333333333%; }
.col.xs3  {  width: 25%; }
.col.xs2  {  width: 16.666666666666664%; }
.col.xs1  {  width: 8.333333333333332%; }

/* mobile landscape: 15px gutter + 15px padding */

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

    .viewport.sm {
        width: 100%;
    }

    .main-container {
        width: 95%;
    }

    .col.sm12 {  width: 100%; }
    .col.sm11 {  width: 91.66666666666666%; }
    .col.sm10 {  width: 83.33333333333334%; }
    .col.sm9  {  width: 75%; }
    .col.sm8  {  width: 66.66666666666666%; }
    .col.sm7  {  width: 58.333333333333336%; }
    .col.sm6  {  width: 50%; }
    .col.sm5  {  width: 41.66666666666667%; }
    .col.sm4  {  width: 33.33333333333333%; }
    .col.sm3  {  width: 25%; }
    .col.sm2  {  width: 16.666666666666664%; }
    .col.sm1  {  width: 8.333333333333332%; }
}

/* tablet portrait: 9px gutter + 15px padding */

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

    .viewport.md {
        width: 768px;
    }

    .main-container {
        width: 750px;
    }

    .col.md12 {  width: 100%; }
    .col.md11 {  width: 91.66666666666666%; }
    .col.md10 {  width: 83.33333333333334%; }
    .col.md9  {  width: 75%; }
    .col.md8  {  width: 66.66666666666666%; }
    .col.md7  {  width: 58.333333333333336%; }
    .col.md6  {  width: 50%; }
    .col.md5  {  width: 41.66666666666667%; }
    .col.md4  {  width: 33.33333333333333%; }
    .col.md3  {  width: 25%; }
    .col.md2  {  width: 16.666666666666664%; }
    .col.md1  {  width: 8.333333333333332%; }
}

/* tablet landscape / desktop: 19.5px gutter + 15px padding */

@media only screen and (min-width: 1024px) {

    .viewport.lg {
        width: 1024px;
    }

    .main-container {
        width: 960px;
    }

    .col.lg12 {  width: 100%; }
    .col.lg11 {  width: 91.66666666666666%; }
    .col.lg10 {  width: 83.33333333333334%; }
    .col.lg9  {  width: 75%; }
    .col.lg8  {  width: 66.66666666666666%; }
    .col.lg7  {  width: 58.333333333333336%; }
    .col.lg6  {  width: 50%; }
    .col.lg5  {  width: 41.66666666666667%; }
    .col.lg4  {  width: 33.33333333333333%; }
    .col.lg3  {  width: 25%; }
    .col.lg2  {  width: 16.666666666666664%; }
    .col.lg1  {  width: 8.333333333333332%; }
}