/* helper classes */
.has-color-11 { color: var(--color11) !important; }
.has-color-12 { color: var(--color12) !important; }
.has-color-13 { color: var(--color13) !important; }
.has-color-21 { color: var(--color21) !important; }
.has-color-22 { color: var(--color22) !important; }
.has-color-23 { color: var(--color23) !important; }
.has-color-31 { color: var(--color31) !important; }
.has-color-32 { color: var(--color32) !important; }
.has-color-33 { color: var(--color33) !important; }
.has-color-41 { color: var(--color41) !important; }
.has-color-42 { color: var(--color42) !important; }
.has-color-43 { color: var(--color43) !important; }
.has-color-51 { color: var(--color51) !important; }
.has-color-52 { color: var(--color52) !important; }
.has-color-53 { color: var(--color53) !important; }
.has-color-61 { color: var(--color61) !important; }
.has-color-62 { color: var(--color62) !important; }

.bg-color-11 { background-color: var(--color11) !important; }
.bg-color-12 { background-color: var(--color12) !important; }
.bg-color-13 { background-color: var(--color13) !important; }
.bg-color-21 { background-color: var(--color21) !important; }
.bg-color-22 { background-color: var(--color22) !important; }
.bg-color-23 { background-color: var(--color23) !important; }
.bg-color-31 { background-color: var(--color31) !important; }
.bg-color-32 { background-color: var(--color32) !important; }
.bg-color-33 { background-color: var(--color33) !important; }
.bg-color-41 { background-color: var(--color41) !important; }
.bg-color-42 { background-color: var(--color42) !important; }
.bg-color-43 { background-color: var(--color43) !important; }
.bg-color-51 { background-color: var(--color51) !important; }
.bg-color-52 { background-color: var(--color52) !important; }
.bg-color-53 { background-color: var(--color53) !important; }
.bg-color-61 { background-color: var(--color61) !important; }
.bg-color-62 { background-color: var(--color62) !important; }

.has-font-1 { font-family: var(--fontFamily1) !important; }
.has-font-2 { font-family: var(--fontFamily2) !important; }
.has-font-3 { font-family: var(--fontFamily3) !important; }

.has-fontsize-h1 { font-size: var(--H1fontSize); line-height: var(--H1lineHeight); }
.has-fontsize-h2 { font-size: var(--H2fontSize); line-height: var(--H2lineHeight); }
.has-fontsize-h3 { font-size: var(--H3fontSize); line-height: var(--H3lineHeight); }
.has-fontsize-h4 { font-size: var(--H4fontSize); line-height: var(--H4lineHeight); }
.has-fontsize-h5 { font-size: var(--H5fontSize); line-height: var(--H5lineHeight); }
.has-fontsize-h6 { font-size: var(--H6fontSize); line-height: var(--H6lineHeight); }
.has-fontsize-small { font-size: .85rem; }
@media (max-width: var(grid_xl)) {
    .has-fontsize-h1 { font-size: calc(var(--H1fontSize) * 0.9); }
    .has-fontsize-h2 { font-size: calc(var(--H2fontSize) * 0.9); }
    .has-fontsize-h3 { font-size: calc(var(--H3fontSize) * 0.9); }
    .has-fontsize-h4 { font-size: calc(var(--H4fontSize) * 0.9); }
}
@media (max-width: var(grid_sm)) {
    .has-fontsize-h1 { font-size: calc(var(--H1fontSize) * 0.8); }
    .has-fontsize-h2 { font-size: calc(var(--H2fontSize) * 0.8); }
}