* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 100%;
    max-width: 992px;
    margin: 0 auto;
}

/** Hack de clearfix **/
.row::after, .row::before {
    content:"";
    display:table;
    clear: both;
}

[class *='col-'] {
    float: left;
    min-height: 1em;
    /**gutters**/
    padding: 1em;
}

/** 100/12*columnas **/
.col-1{ width:8.33%; }
.col-2{ width:16.66%; }
.col-3{ width:25%; }
.col-4{ width:33.33%; }
.col-5{ width:41.66%; }
.col-6{ width:50%; }
.col-7{ width:58.33%; }
.col-8{ width:66.66%; }
.col-9{ width:75%; }
.col-10{ width:83.33%; }
.col-11{ width:91.66%; }
.col-12{ width:100%; }

/** Primer Breakpoint de bootstrap **/
@media all and (max-width:576px){
    [class *='col-'] {
       width: 100%;
    }
}
/** End of Grid System **/