main hgroup {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

main hgroup h1,
main hgroup h3,
main hgroup p { margin: 10px; }

main .ptb4 {
    padding-top: 40px;
    padding-bottom: 40px;
}

main .ptb6 {
    padding-top: 60px;
    padding-bottom: 60px;
}

main .pb4 {
    padding-bottom: 40px;
}

.red.top,
.green.top,
.blue.top,
.dgray.top {
    position: relative;
    padding: 20px 0;
    margin-top: 59px;
    margin-bottom: 30px;
    box-shadow: inset 2px -2px 5px 0 rgba(0,0,0,.1);
}

.red {
    position: relative;
    background-color: var(--red);
    color: white;
}

.green {
    background-color: var(--green);
    color: white;
}

.blue {
    background-color: var(--blue);
    color: white;
}

.dgray {
    background-color: #2B2B2B;
    color: white;
}

.lgray { background-color: var(--lgray); }

/*main > div.lgray { padding: 60px 0; }*/

.red h1,
.red h3,
.red h4,
.red p,
.green h1,
.green h3,
.green h4,
.green p,
.blue h1,
.blue h3,
.blue h4,
.blue p,
.dgray h1,
.dgray h3,
.dgray h4,
.dgray p { color: white; }

.red.top::before,
.green.top::before,
.blue.top::before,
.dgray.top::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 20px;
    width: 1px;
    background-color: white;
    margin: 0 auto;
}

.red.top::after,
.green.top::after,
.blue.top::after,
.dgray.top::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    height: 20px;
    width: 1px;
    margin: 0 auto;
}

.red.top::after { background-color: var(--red); }

.green.top::after { background-color: var(--green); }

.blue.top::after { background-color: var(--blue); }

.dgray.top::after { background-color: var(--dgray); }

.red.top .arrow,
.green.top .arrow,
.blue.top .arrow,
.dgray.top .arrow {
    width: 6px;
    height: 6px;
    transform: rotate(-45deg);
    position: absolute;
    bottom: -20px;
    left: calc(50% - 3px);
}

.red.top .arrow {
    border-left: 1px solid var(--red);
    border-bottom: 1px solid var(--red);
}

.green.top .arrow {
    border-left: 1px solid var(--green);
    border-bottom: 1px solid var(--green);
}

.blue.top .arrow {
    border-left: 1px solid var(--blue);
    border-bottom: 1px solid var(--blue);
}

.dgray.top .arrow {
    border-left: 1px solid var(--dgray);
    border-bottom: 1px solid var(--dgray);
}

.red.arrow::after,
.green.arrow::after,
.blue.arrow::after,
.dgray.arrow::after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
}

.red.arrow::after { border-color: var(--red) transparent transparent; }

.green.arrow::after { border-color: var(--green) transparent transparent; }

.blue.arrow::after { border-color: var(--blue) transparent transparent; }

.dgray.arrow::after { border-color: var(--dgray) transparent transparent; }

/* Mobile */
@media (max-width: 799.999px) {
    section { padding: 10px; }
}

/* Tablet */
@media (min-width: 800px) and (max-width: 1119.9px) {
    section { padding: 10px 20px; }
}

/* Desktop */
@media (min-width: 1120px) {
    section { padding: 10px 40px; }
}

@media (min-width: 1480px) {
    section {
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* google badge */
@media (max-width: 799.999px) {
    .badge { text-align: center; }
}

@media (min-width: 800px) {
    .badge .c3 > div {
        margin-right: 50px;
        text-align: right;
    }

    .badge .c-3 > div { max-width: 620px; }
}