.cf::after {
    visibility: hidden;
    content: '';
    height: 0;
    display: block;
    clear: both;
}

.cf .fl { float: left; }

.cf .fr { float: right; }

.p63 { padding: 40px 30px 60px 30px; }

/* padding */
/* Mobile & Tablet */
@media (max-width: 979.999px) {
    section,
    article,
    hgroup { padding: 10px; }

    .p { padding: 10px; }

    .ph { padding: 0 10px; } /* padding horizontal */

    .pv { padding: 10px 0; } /* padding vertical */
}

/* Desktop */
@media (min-width: 980px) {
    section,
    article,
    hgroup  {
        padding: 10px 20px;
    }

    main section,
    main article,
    hgroup  {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .p { padding: 20px; }

    .ph { padding: 0 20px; } /* padding horizontal */

    .pv { padding: 20px 0; } /* padding vertical */
}
/* <<< */

/* Tablet & Desktop */
@media (min-width: 700px) {
    hgroup {
        max-width: 700px;
        margin: 0 auto;
        box-sizing: border-box;
    }
}

@media (min-width: 800px) {
    article {
        max-width: 800px;
        margin: 0 auto;
        box-sizing: border-box;
    }
}
/* <<< */

/* Desktop */
@media (min-width: 1360px) {
    section {
        max-width: 1360px;
        margin: 0 auto;
        box-sizing: border-box;
    }
}
/* <<< */

/* Tablet */
@media (min-width: 800px) {
    .f { /* INFO: прави всички елементи в реда с еднаква височина */
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* INFO: центрира елементите в средата */
    }

    .f .fb { /* INFO: прави възможно залепването на последния елемент долу */
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .f .fb .b { /* INFO: залепва последния елемент долу */
        margin-top: auto;
    }

    .c2,
    .c3,
    .c-3,
    .c32,
    .c-32,
    .c4 {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
    }

    .c2 { width: 50%; }

    .c3 { width: 33.333%; }

    .c-3 { width: 66.666%; }

    main > div.gray .c-3.p { padding-left: 60px; }

    section.m8 {
        max-width: 800px;
        margin: 0 auto;
    }
}

@media (min-width: 800px) and (max-width: 1119.999px) {
    .c32,
    .c-32,
    .c4 { width: 50%; }
}
/* <<< */

/* Desktop */
@media (min-width: 1120px) {
    .c32 { width: 33.333%; }

    .c-32 { width: 66.666%; }

    .c4 { width: 25%; }
}
/* <<< */