:root {
    --section-header-bg-color: transparent;
    --section-header-accent-color-1: transparent;
    --section-header-accent-color-2: transparent;
    --section-header-accent-color-3: transparent;
    --section-header-accent-color-4: transparent;
    --section-header-accent-color-5: transparent;
    --title-section-header-pipe-width: 10px;
    --title-section-header-pipe-color-1: var(--accent-color-orange);
    --title-section-header-pipe-color-2: var(--accent-color-orange);
    --title-section-header-pipe-color-3: var(--accent-color-orange);
    --title-section-header-pipe-color-4: var(--accent-color-orange);
    --title-section-header-pipe-color-5: var(--accent-color-orange);
    --title-section-header-padding-small: 0; /* 30px */
    --title-section-header-padding-medium: 0; /* 40px */
    --title-section-header-padding-large: 0; /* 60px */
    --title-section-header-padding-extra-large: 0; /* 80px */
}

.title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title {
    color: var(--section-header-color, var(--headings-color) );
}

.title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title:before {
    background: var(--section-header-bg-color);
}

.section-header-container:nth-of-type(5n+1) .section-header:after { border-top-color: var(--section-header-accent-color-1) }
.section-header-container:nth-of-type(5n+1) .title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title > .field-items:after { border-top-color: var(--section-header-accent-color-1) }
.section-header-container:nth-of-type(5n+1) .section-header:before { background-color: var(--section-header-accent-color-1) }
.section-header-container:nth-of-type(5n+1) .title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title > .field-items:before { background-color: var(--section-header-accent-color-1) }

.section-header-container:nth-of-type(5n+2) .section-header:after { border-top-color: var(--section-header-accent-color-2) }
.section-header-container:nth-of-type(5n+2) .title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title > .field-items:after { border-top-color: var(--section-header-accent-color-2) }
.section-header-container:nth-of-type(5n+2) .section-header:before { background-color: var(--section-header-accent-color-2) }
.section-header-container:nth-of-type(5n+2) .title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title > .field-items:before { background-color: var(--section-header-accent-color-2) }

.section-header-container:nth-of-type(5n+3) .section-header:after { border-top-color: var(--section-header-accent-color-3) }
.section-header-container:nth-of-type(5n+3) .title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title > .field-items:after { border-top-color: var(--section-header-accent-color-3) }
.section-header-container:nth-of-type(5n+3) .section-header:before { background-color: var(--section-header-accent-color-3) }
.section-header-container:nth-of-type(5n+3) .title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title > .field-items:before { background-color: var(--section-header-accent-color-3) }

.section-header-container:nth-of-type(5n+4) .section-header:after { border-top-color: var(--section-header-accent-color-4) }
.section-header-container:nth-of-type(5n+4) .title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title > .field-items:after { border-top-color: var(--section-header-accent-color-4) }
.section-header-container:nth-of-type(5n+4) .section-header:before { background-color: var(--section-header-accent-color-4) }
.section-header-container:nth-of-type(5n+4) .title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title > .field-items:before { background-color: var(--section-header-accent-color-4) }

.section-header-container:nth-of-type(5n+5) .section-header:after { border-top-color: var(--section-header-accent-color-5) }
.section-header-container:nth-of-type(5n+5) .title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title > .field-items:after { border-top-color: var(--section-header-accent-color-5) }
.section-header-container:nth-of-type(5n+5) .section-header:before { background-color: var(--section-header-accent-color-5) }
.section-header-container:nth-of-type(5n+5) .title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title > .field-items:before { background-color: var(--section-header-accent-color-5) }


.section-header-container .title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title > .field-items > .field-item:before {
    content: var(--title-section-header-pipe, '');
    display: inline-block;
    width: var(--title-section-header-pipe-width);
    height: 1.05em;
    margin-right: 10px;
    vertical-align: middle;
    background-color: var(--primary-color);
}

.section-header-container:nth-of-type(5n+1) .title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title > .field-items > .field-item:before {
    background-color: var(--title-section-header-pipe-color-1);
}

.section-header-container:nth-of-type(5n+2) .title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title > .field-items > .field-item:before {
    background-color: var(--title-section-header-pipe-color-2);
}

.section-header-container:nth-of-type(5n+3) .title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title > .field-items > .field-item:before {
    background-color: var(--title-section-header-pipe-color-3);
}

.section-header-container:nth-of-type(5n+4) .title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title > .field-items > .field-item:before {
    background-color: var(--title-section-header-pipe-color-4);
}

.section-header-container:nth-of-type(5n+5) .title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title > .field-items > .field-item:before {
    background-color: var(--title-section-header-pipe-color-5);
}

@media only screen {
    .pad.title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title {
        padding: var(--title-section-header-padding-small) 0;
        top: calc( -1 * var(--title-section-header-padding-small) );
    }

    .decrease-vertical-padding.title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title {
        --title-section-header-padding-small-decreased: calc( var(--title-section-header-padding-small) / 2 );
        padding-top: var(--title-section-header-padding-small-decreased);
        padding-bottom: var(--title-section-header-padding-small-decreased);
        top: calc( -1 * var(--title-section-header-padding-small-decreased) );
    }

    .increase-vertical-padding.title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title {
        --title-section-header-padding-small-increased: calc( var(--title-section-header-padding-small) * 1.5 );
        padding-top: var(--title-section-header-padding-small-increased);
        padding-bottom: var(--title-section-header-padding-small-increased);
        top: calc( -1 * var(--title-section-header-padding-small-increased) );
    }
}

@media screen and (min-width: 768px) {
    .pad.title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title {
        padding: var(--title-section-header-padding-medium) 0;
        top: calc( -1 * var(--title-section-header-padding-medium) );
    }

    .decrease-vertical-padding.title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title {
        --title-section-header-padding-medium-decreased: calc( var(--title-section-header-padding-medium) / 2 );
        padding-top: var(--title-section-header-padding-medium-decreased);
        padding-bottom: var(--title-section-header-padding-medium-decreased);
        top: calc( -1 * var(--title-section-header-padding-medium-decreased) );
    }

    .increase-vertical-padding.title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title {
        --title-section-header-padding-medium-increased: calc( var(--title-section-header-padding-medium) * 1.5 );
        padding-top: var(--title-section-header-padding-medium-increased);
        padding-bottom: var(--title-section-header-padding-medium-increased);
        top: calc( -1 * var(--title-section-header-padding-medium-increased) );
    }
}

@media screen and (min-width: 992px) {
    .pad.title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title {
        padding: var(--title-section-header-padding-large) 0;
        top: calc( -1 * var(--title-section-header-padding-large) );
    }

    .decrease-vertical-padding.title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title {
        --title-section-header-padding-large-decreased: calc( var(--title-section-header-padding-large) / 2 );
        padding-top: var(--title-section-header-padding-large-decreased);
        padding-bottom: var(--title-section-header-padding-large-decreased);
        top: calc( -1 * var(--title-section-header-padding-large-decreased) );
    }

    .increase-vertical-padding.title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title {
        --title-section-header-padding-large-increased: calc( var(--title-section-header-padding-large) * 1.5 );
        padding-top: var(--title-section-header-padding-large-increased);
        padding-bottom: var(--title-section-header-padding-large-increased);
        top: calc( -1 * var(--title-section-header-padding-large-increased) );
    }
}

@media screen and (min-width: 1200px) {
    .pad.title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title {
        padding: var(--title-section-header-padding-extra-large) 0;
        top: calc( -1 * var(--title-section-header-padding-extra-large) );
    }

    .decrease-vertical-padding.title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title {
        --title-section-header-padding-extra-large-decreased: calc( var(--title-section-header-padding-extra-large) / 2 );
        padding-top: var(--title-section-header-padding-extra-large-decreased);
        padding-bottom: var(--title-section-header-padding-extra-large-decreased);
        top: calc( -1 * var(--title-section-header-padding-extra-large-decreased) );
    }

    .increase-vertical-padding.title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title {
        --title-section-header-padding-extra-large-increased: calc( var(--title-section-header-padding-extra-large) * 1.5 );
        padding-top: var(--title-section-header-padding-extra-large-increased);
        padding-bottom: var(--title-section-header-padding-extra-large-increased);
        top: calc( -1 * var(--title-section-header-padding-extra-large-increased) );
    }
}

.remove-top-padding.title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title,.remove-vertical-padding.title-section-header:not(.section-header) > .content > .container > .field-name-field-paragraph-title {
    padding-top: 0;
    top: 0;
}