.grid-container {
    width: 100%;
    max-width: 900px;
}

.grid-container * {
    box-sizing: box-border;
}

/*-- our cleafix hack -- */
.row:before,
.row:after {
    content:"";
    display: table;
    clear:both;
}

.center {
    text-align: center;
}

[class*='col-'] {
    float: left;
    min-height: 1px;
    width: 10%;
    padding: 0 12px;
}

.col-1 {
    width: 10%;
}

.col-2 {
    width: 20%;
}

.col-3 {
    width: 30%;
}

.col-4 {
    width: 40%;
}

.col-5 {
    width: 50%;
}

.col-6 {
    width: 60%;
}

.col-7 {
    width: 70%;
}

.col-8 {
    width: 80%;
}

.col-9 {
    width: 90%;
}

.col-10 {
    width: 100%;
}

@media all and (max-width:650px){
    .col-1{ width: 33%;     }
    .col-2{ width: 33%;    }
    .col-3{ width: 50%;    }
    .col-4{ width: 100%;    }
    .col-5{ width: 100%;    }
    .col-6{ width: 100%;    }
    .col-7{ width: 100%;    }
    .col-8{ width: 100%;    }
    .col-9{ width: 100%;    }
}