.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}
/*Breaking Point 960px*/
.small {
    max-width: 960px;
}
/*Breaking Point 1280px*/
.medium {
    max-width: 1280px;
}
/*Full Page*/
.full {
    max-width: 100%;
}

.container:before,
.container:after,
.row:before,
.row:after {
    content: " ";
    display: table;
}

.container:after,
.row:after {
    clear: both;
}

[class*='c-'] {
    width: 100%;
    float: left;
    min-height: 1px;
}

.box {
    padding: 1em;
    margin: 2px;
    background-color: white;
    text-align: center;
}
/*480px*/
@media screen and (min-width: 480px) {
    .c-x-1 {
        width: 8.333333333333333%;
    }
    .c-x-2 {
        width: 16.66666666666667%;
    }
    .c-x-3 {
        width: 25%;
    }
    .c-x-4 {
        width: 33.33333333333333%;
    }
    .c-x-5 {
        width: 41.66666666666667%;
    }
    .c-x-6 {
        width: 50%;
    }
    .c-x-7 {
        width: 58.33333333333333%;
    }
    .c-x-8 {
        width: 66.66666666666667%;
    }
    .c-x-9 {
        width: 75%;
    }
    .c-x-10 {
        width: 83.33333333333333%;
    }
    .c-x-11 {
        width: 91.66666666666667%;
    }
    .c-x-12 {
        width: 100%;
    }
}
/*760px*/
@media screen and (min-width: 768px) {
    .c-s-1 {
        width: 8.333333333333333%;
    }
    .c-s-2 {
        width: 16.66666666666667%;
    }
    .c-s-3 {
        width: 25%;
    }
    .c-s-4 {
        width: 33.33333333333333%;
    }
    .c-s-5 {
        width: 41.66666666666667%;
    }
    .c-s-6 {
        width: 50%;
    }
    .c-s-7 {
        width: 58.33333333333333%;
    }
    .c-s-8 {
        width: 66.66666666666667%;}
    .c-s-9 {
        width: 75%;
    }
    .c-s-10 {
        width: 83.33333333333333%;
    }
    .c-s-11 {
        width: 91.66666666666667%;
    }
    .c-s-12 {
        width: 100%;
    }
}
/*992px*/
@media screen and (min-width: 992px) {
    .c-m-1 {
        width: 8.333333333333333%;
    }
    .c-m-2 {
        width: 16.66666666666667%;
    }
    .c-m-3 {
        width: 25%;
    }
    .c-m-4 {
        width: 33.33333333333333%;
    }
    .c-m-5 {
        width: 41.66666666666667%;
    }
    .c-m-6 {
        width: 50%;
    }
    .c-m-7 {
        width: 58.33333333333333%;
    }
    .c-m-8 {
        width: 66.66666666666667%;}
    .c-m-9 {
        width: 75%;
    }
    .c-m-10 {
        width: 83.33333333333333%;
    }
    .c-m-11 {
        width: 91.66666666666667%;
    }
    .c-m-12 {
        width: 100%;
    }
}
/*1200px*/
@media screen and (min-width: 1200px) {
    .c-l-1 {
        width: 8.333333333333333%;
    }
    .c-l-2 {
        width: 16.66666666666667%;
    }
    .c-l-3 {
        width: 25%;
    }
    .c-l-4 {
        width: 33.33333333333333%;
    }
    .c-l-5 {
        width: 41.66666666666667%;
    }
    .c-l-6 {
        width: 50%;
    }
    .c-l-7 {
        width: 58.33333333333333%;
    }
    .c-l-8 {
        width: 66.66666666666667%;}
    .c-l-9 {
        width: 75%;
    }
    .c-l-10 {
        width: 83.33333333333333%;
    }
    .c-l-11 {
        width: 91.66666666666667%;
    }
    .c-l-12 {
        width: 100%;
    }
}