.p1, .p2, .p4 { padding: 10px; }
.p01, .p02 { padding: 0 10px; }
.p20 { padding: 10px 0; }
.p10 { padding: 10px 0; }
.p4 { padding: 20px; }
.p12 { padding: 10px; }

.w100 {
    width: 100%;
    box-sizing: border-box;
}

.w960 {
    max-width: 960px;
    margin: 0 auto;
}

.f {
    display: flex; /* equal height of the children */
    flex-wrap: wrap;
    justify-content: center;
}

.f-sb {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.f > div,
.f-sb > div {
    display: flex;
    flex-direction: column;
}

.f .fp2 {
    padding: 10px;
    margin: 10px;
}

.bottom { margin-top: auto; }

@media (min-width: 641px) {

    .p02 { padding: 0 10px; }
    .p20 { padding: 10px 0; }
    .p2 { padding: 10px; }
    .p4,.p1 { padding: 20px; }

    .c32,
    .c43 {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
    }

}

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

/* Tablet */
@media (min-width: 801px) {
    .p02 { padding: 0 20px; }
    .p12 { padding: 10px 20px; }
    .p20 { padding: 20px 0; }
    .p2 { padding: 20px; }
    .p4 { padding: 40px; }

    .c2,
    .c4,
    .c-4 {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
    }

    .c2 { width: 50%; }

    .c32 { width: 33.333333333%; }
}

@media (min-width: 801px) and (max-width: 1120px) {
    .c4,
    .c-4 { width: 50%; }

    /*.c32,*/
    .c43 { width: 33.333333333%; }
}

@media (min-width: 981px) {
    .p1 {padding: 10px;}
    .c3,
    .c-3 {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
    }

    .c3,.c4 { width: 33.333333333%; }

    .c-3,.c-4 { width: 66.666666666%; }
}

/* Mobile */
@media (max-width: 1120px)  {
    section {
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }
}

/* Desktop */
@media (min-width: 1121px)  {
    section {
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        padding-left: 40px;
        padding-right: 40px;
    }

    .c4,
    .c43 { width: 25%; }

    .c-4 { width: 75%; }
}