.p1 { padding: 10px; }
.p01 { padding: 0 10px; }
.p10 { padding: 10px 0; }
.p02 { padding: 0 20px; }
.p12 { padding: 10px 20px; }
.p20 { padding: 20px 0; }
.p2 { padding: 20px; }
.p4 { padding: 40px; }
.p40 { padding: 40px 40px 0; }
.pt1 { padding-top: 10px; }
.pr1 { padding-right: 10px; }

.cf2, .cf3, .cf-3 {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}

.cf2 { width: 50%; }

.cf3 { width: 33.333333333%; }

.cf-3 { width: 66.666666666%; }

.f {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.f > div {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.bottom { margin-top: auto; }

@media all and (max-width: 961px) {
    .p4 { padding: 20px; }
}

@media all and (min-width: 961px) {
    .c2, .c3, .c-3, .c4, .c-4, .c4-2 {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
    }

    .c2 { width: 50%; }
    .c3 { width: 33.333333333%; }
    .c-3 { width: 66.666666666%; }
    .c4 { width: 25%; }
    .c-4 { width: 75%; }
    .c4-2 { width: 37.5%; }
}

/* Mobile */
@media (min-width: 641px) {
    .c43 {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
    }
}

@media (min-width: 641px) and (max-width: 980px) {
    .c43 { width: 50% !important; }
}

@media (min-width: 801px) and (max-width: 1120px) {
    .c43 { width: 33.333333333% !important; }
}

@media (min-width: 1120px) {
    .c43 { width: 25% !important; }
}