/* CSS GRID
=====================*/
*{
    box-sizing: border-box;
}
.container{
    width:960px;
    margin: 0 auto;
}

.row {
    margin-right: 20px;
}

.row:after{
    display: block;
    content: ' ';
    height: 0;
    visibility: hidden;
    clear: both;
}

[class*="col-"] {
    float: left;
    display: inline;
    margin-right: 20px;
}
[class*="col-"]:last-child{
    margin-right: 0;
    float: right;
}

col-1 { width: 8.333333333%; }
col-2 { width: 16.66666666%; }
col-3 { width: 25%; }
col-4 { width: 33.33333333%; }
col-5 { width: 41.33333333%; }
col-6 { width: 50%; }
col-7 { width: 58.33333333%; }
col-8 { width: 6.666666666%; }
col-9 { width: 75%; }
col-10 { width: 83.33333333%; }
col-11 { width: 91.66666666%; }
col-12 { width: 100%; }

offset-1 { width: 8.333333333%; }
offset-2 { width: 16.66666666%; }
offset-3 { width: 25%; }
offset-4 { width: 33.33333333%; }
offset-5 { width: 41.33333333%; }
offset-6 { width: 50%; }
offset-7 { width: 58.33333333%; }
offset-8 { width: 6.666666666%; }
offset-9 { width: 75%; }
offset-10{ width: 83.33333333%; }
offset-11{ width: 91.66666666%; }
offset-12{ width: 100%; }