body {
    clear: both;
}
.container {
    width: 100%;
    margin: 5px auto;
}
.container:before, .container:after, .container-no-center:after, .container-no-center:before {
    content: '\00A0';
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
    clear: both;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    display: inline-block;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 1%;
    vertical-align: top;
    float: left;
    margin: 0;
}

.grid_1 {width: 8.333%}
.grid_2 {width: 16.666%}
.grid_3 {width: 25%}
.grid_4 {width: 33.333%}
.grid_5 {width: 41.666%}
.grid_6 {width: 50%}
.grid_7 {width: 58.333%}
.grid_8 {width: 66.666%}
.grid_9 {width: 75%}
.grid_10 {width: 83.333%}
.grid_11 {width: 91.666%}
.grid_12 {width: 100%}


.offset_1 {margin-left: 8.333%}
.offset_2 {margin-left: 16.666%}
.offset_3 {margin-left: 25%}
.offset_4 {margin-left: 33.333%}
.offset_5 {margin-left: 41.666%}
.offset_6 {margin-left: 50%}
.offset_7 {margin-left: 58.333%}
.offset_8 {margin-left: 66.666%}
.offset_9 {margin-left: 75%}
.offset_10 {margin-left: 83.333%}
.offset_11 {margin-left: 91.666%}
.offset_12 {margin-left: 100%}

.no-pad>* {
    margin: 0;
}
@media (max-width: 640px) {
    body {
    min-width: 300px;
    max-width: 640px;
    width: 100%}
.container {
    display: block;
    width: 100%}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    display: block;
    padding: 10px;
    margin: 0;
    vertical-align: top;
    float: none;
    width: 100% !important;
}

}
body.test * {
    background: rgba(52, 152, 219, 0.5);
}