.cp-g {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box
}

.cp-g::after {
    clear: both;
    content: "";
    display: table;
    box-sizing: border-box
}

.cp-g-1, .cp-g-2, .cp-g-3, .cp-g-4, .cp-g-5, .cp-g-6,
.cp-g-7, .cp-g-8, .cp-g-9, .cp-g-10, .cp-g-11,
.cp-g-12 {
    float: left;
    box-sizing: border-box;
    padding: .5em
}

.cp-g-1 {
    width: 8.33333333%
}

.cp-g-2 {
    width: 16.66666667%
}

.cp-g-3 {
    width: 25%
}

.cp-g-4 {
    width: 33.33333333%
}

.cp-g-5 {
    width: 41.66666667%
}

.cp-g-6 {
    width: 50%
}

.cp-g-7 {
    width: 58.33333333%
}

.cp-g-8 {
    width: 66.66666667%
}

.cp-g-9 {
    width: 75%
}

.cp-g-10 {
    width: 83.33333333%
}

.cp-g-11 {
    width: 91.66666667%
}

.cp-g-12 {
    width: 100%
}

@media screen and (max-width: 600px) {
    .cp-s-1, .cp-s-2, .cp-s-3, .cp-s-4, .cp-s-5,
    .cp-s-6, .cp-s-7, .cp-s-8, .cp-s-9, .cp-s-10,
    .cp-s-11, .cp-s-12 {
        padding: .5em
    }

    .cp-s-1 {
        width: 8.33333333%
    }

    .cp-s-2 {
        width: 16.66666667%
    }

    .cp-s-3 {
        width: 25%
    }

    .cp-s-4 {
        width: 33.33333333%
    }

    .cp-s-5 {
        width: 41.66666667%
    }

    .cp-s-6 {
        width: 50%
    }

    .cp-s-7 {
        width: 58.33333333%
    }

    .cp-s-8 {
        width: 66.66666667%
    }

    .cp-s-9 {
        width: 75%
    }

    .cp-s-10 {
        width: 83.33333333%
    }

    .cp-s-11 {
        width: 91.66666667%
    }

    .cp-s-12 {
        width: 100%
    }
}

@media screen and (min-width: 600px) {
    .cp-m-1, .cp-m-2, .cp-m-3, .cp-m-4, .cp-m-5,
    .cp-m-6, .cp-m-7, .cp-m-8, .cp-m-9, .cp-m-10,
    .cp-m-11, .cp-m-12 {
        padding: .5em
    }

    .cp-m-1 {
        width: 8.33333333%
    }

    .cp-m-2 {
        width: 16.66666667%
    }

    .cp-m-3 {
        width: 25%
    }

    .cp-m-4 {
        width: 33.33333333%
    }

    .cp-m-5 {
        width: 41.66666667%
    }

    .cp-m-6 {
        width: 50%
    }

    .cp-m-7 {
        width: 58.33333333%
    }

    .cp-m-8 {
        width: 66.66666667%
    }

    .cp-m-9 {
        width: 75%
    }

    .cp-m-10 {
        width: 83.33333333%
    }

    .cp-m-11 {
        width: 91.66666667%
    }

    .cp-m-12 {
        width: 100%
    }
}

@media screen and (min-width: 960px) {
    .cp-l-1, .cp-l-2, .cp-l-3, .cp-l-4, .cp-l-5,
    .cp-l-6, .cp-l-7, .cp-l-8, .cp-l-9, .cp-l-10,
    .cp-l-11, .cp-l-12 {
        padding: .5em
    }

    .cp-l-1 {
        width: 8.33333333%
    }

    .cp-l-2 {
        width: 16.66666667%
    }

    .cp-l-3 {
        width: 25%
    }

    .cp-l-4 {
        width: 33.33333333%
    }

    .cp-l-5 {
        width: 41.66666667%
    }

    .cp-l-6 {
        width: 50%
    }

    .cp-l-7 {
        width: 58.33333333%
    }

    .cp-l-8 {
        width: 66.66666667%
    }

    .cp-l-9 {
        width: 75%
    }

    .cp-l-10 {
        width: 83.33333333%
    }

    .cp-l-11 {
        width: 91.66666667%
    }

    .cp-l-12 {
        width: 100%
    }
}

@media screen and (min-width: 1280px) {
    .cp-xl-1, .cp-xl-2, .cp-xl-3, .cp-xl-4, .cp-xl-5,
    .cp-xl-6, .cp-xl-7, .cp-xl-8, .cp-xl-9, .cp-xl-10,
    .cp-xl-11, .cp-xl-12 {
        padding: .5em
    }

    .cp-xl-1 {
        width: 8.33333333%
    }

    .cp-xl-2 {
        width: 16.66666667%
    }

    .cp-xl-3 {
        width: 25%
    }

    .cp-xl-4 {
        width: 33.33333333%
    }

    .cp-xl-5 {
        width: 41.66666667%
    }

    .cp-xl-6 {
        width: 50%
    }

    .cp-xl-7 {
        width: 58.33333333%
    }

    .cp-xl-8 {
        width: 66.66666667%
    }

    .cp-xl-9 {
        width: 75%
    }

    .cp-xl-10 {
        width: 83.33333333%
    }

    .cp-xl-11 {
        width: 91.66666667%
    }

    .cp-xl-12 {
        width: 100%
    }
}

.cp-g-nopad {
    padding: 0
}