/*
 * 12 columns
 * breakpoint at 640px
 * 0.5% between columns
 */

.grid,
.row {
    clear:both;
    padding:0;
    margin:0;
    width:100%;
}

.col {
    padding:0;
    margin:0;
}

.grid .span1 {
    display:block;
    width:100%;
}
.grid .span2 {
    display:block;
    width:100%;
}
.grid .span3 {
    display:block;
    width:100%;
}
.grid .span4 {
    display:block;
    width:100%;
}
.grid .span5 {
    display:block;
    width:100%;
}
.grid .span6 {
    display:block;
    width:100%;
}
.grid .span7 {
    display:block;
    width:100%;
}
.grid .span8 {
    display:block;
    width:100%;
}
.grid .span9 {
    display:block;
    width:100%;
}
.grid .span10 {
    display:block;
    width:100%;
}
.grid .span11 {
    display:block;
    width:100%;
}
.grid .span12 {
    display:block;
    width:100%;
}

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

    .grid .col {
        display:block;
        float:left;
        margin:0 0.25% 0 0.25%;
        padding:0;
    }

    .grid .col:first-child {
        margin-left:0;
    }

    .grid .col:last-child {
        margin-right:0;
    }

    .grid .span1 {
        width:7.875%;
    }

    .grid .span2 {
        width:16.25%;
    }

    .grid .span3 {
        width:24.625%;
    }

    .grid .span4 {
        width:33%;
    }

    .grid .span5 {
        width:41.375%;
    }

    .grid .span6 {
        width:49.75%;
    }

    .grid .span7 {
        width:58.125%;
    }

    .grid .span8 {
        width:66.5%;
    }

    .grid .span9 {
        width:74.875%;
    }

    .grid .span10 {
        width:83.25%;
    }

    .grid .span11 {
        width:91.625%;
    }

    .grid .span12 {
        width:100%;
    }
}