JS Code Editor

Templates

01. Templates 02. JS Editor 03. Questions and Answers

Choose one of below preset styles to change the design of your website. Use the copy button to paste the code inside the style editor.



<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #f14f44;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f0f2f4;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #1f1f1f;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #386bb7;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #8c53b8;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #e24c4a;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #1f1f1f;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f0f2f4;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #1f1f1f;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #f14f44;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #292b2e;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #e24c4a;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #e24c4a;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #386bb7;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #1f1f1f;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav has-large-header has-sticky-logo g-font no-shopping-cart</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400 is-uppercase snip-nav color-line --line07 --line-overlap no-shadow</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Zion Preview



<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Gobal colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #1b2cc1;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #e8ecfc;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #030717;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #dda4ff;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #3b28cc;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #1b2cc1;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #030717;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #e8ecfc;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #030717;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #a1a8e7;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #09143d;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #1b2cc1;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #1b2cc1;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #1b2cc1;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #e8ecfc;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #030717;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav has-sticky-logo has-large-header g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav --line01</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Lemberg Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #0161fe;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f6f7f9;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #232323;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #e7efff;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #7158f1;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #0161fe;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #232323;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f6f7f9;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #232323;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #0161fe;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #343434;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #0161fe;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #0161fe;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #0161fe;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #232323;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">has-right-nav g-font</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;right-align color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 21px;">
<tbody>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav --effect03 has-icon-1</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white mid-round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white mid-round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Alsten Preview



<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #26272b;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f0f0f0;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #c6c8cc;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #9ad4d6;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #090909;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f0f0f0;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #f0f0f0;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #666666;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #d2d2d2;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #26272b;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #26272b;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #26272b;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-center-nav has-custom-logo has-sticky-logo&nbsp; has-large-header no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">right-align</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;has-nav-inner-border-color has-border-top</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;has-nav-inner-border-color has-border-top</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-17 weight-400 is-uppercase snip-nav --line01 --effect02&nbsp; no-border-radius no-shadow</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-dark</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Bergen Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #aff42a;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f7fbec;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #191b1d;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #00d3ff;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #a8ad9b;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: #a8ad9b;">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #3d4856;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #191b1d;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: #0b0c0d;">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #0b0c0d;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #191b1d;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #aff42a;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #272a2c;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #aff42a;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #aff42a;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #aff42a;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #191b1d;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #191b1d;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(252, 229, 203, 0.92);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-center-nav has-sticky-logo has-large-header no-shopping-cart&nbsp; has-frame g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;right-align link-dark</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;br8</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">add-5 br500</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav --line01</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400&nbsp;</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .has-lang-nav.snip-nav ul li a:link,</p>
<p>#cc-inner .has-lang-nav.snip-nav ul li a:visited {</p>
<p>&nbsp; &nbsp;margin: 2px 5px;</p>
<p>}</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Tjorn Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #4d5ff8;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f0ebfc;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #061b29;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #ee6b60;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #3b28cc;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #4d5ff8;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #061b29;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f0ebfc;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: rgba(6, 27, 41, 0.92);">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #4d5ff8;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #0a283c;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #4d5ff8;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #4d5ff8;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #4d5ff8;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #f0ebfc;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #061b29;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav has-large-header has-sticky-logo no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;weight-400 bg-nav-primary active-white-color no-shadow</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white mid-round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white mid-round-btn&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-texture01.jpg</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>&nbsp;</p>
/*** custom styles for Hisingen theme ***/
<p>#cc-inner .hs-menu nav ul li a {</p>
<p>&nbsp; padding:12px 15px!important;</p>
<p>&nbsp; margin:1px;</p>
<p>&nbsp; border-radius:5px;</p>
<p>}</p>
<p>&nbsp;</p>
<p style="line-height: 19.5px;">#cc-inner .hs-menu nav ul ul&nbsp; {</p>
<p style="line-height: 19.5px;">&nbsp; border-radius:5px;</p>
<p style="line-height: 19.5px;">}</p>
<p>&nbsp;</p>
<p style="line-height: 19.5px;">#cc-inner .hs-menu nav ul ul a {</p>
<p style="line-height: 19.5px;">&nbsp; padding:12px 15px!important;</p>
<p style="line-height: 19.5px;">&nbsp; margin:5px;</p>
<p style="line-height: 19.5px;">&nbsp; border-radius:5px;</p>
<p style="line-height: 19.5px;">}</p>
<p style="line-height: 19.5px;">&nbsp;</p>
<p style="line-height: 19.5px;">#cc-inner .button_container{</p>
<p style="line-height: 19.5px;">&nbsp; &nbsp;display: flex;</p>
<p style="line-height: 19.5px;">}</p>
<p style="line-height: 19.5px;">&nbsp;</p>
<p style="line-height: 19.5px;">.header-widget:not(.overlay.open .header-widget) {</p>
<p style="line-height: 19.5px;">&nbsp; display:none;</p>
<p style="line-height: 19.5px;">}</p>
<p style="line-height: 19.5px;">&nbsp;</p>
<p style="line-height: 19.5px;">.overlay .is--left {</p>
<p style="line-height: 19.5px;">&nbsp; display:block;</p>
<p style="line-height: 19.5px;">&nbsp; text-align:left;</p>
<p style="line-height: 19.5px;">}</p>
<p style="line-height: 19.5px;">&nbsp;</p>
<p style="line-height: 19.5px;">.has-left-nav .hs-logo {</p>
<p style="line-height: 19.5px;">&nbsp; padding-right:30px;</p>
<p style="line-height: 19.5px;">}</p>
<p style="line-height: 19.5px;">&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Hisingen Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #c09342;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #364d4c;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #091d1c;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #818f43;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #102b2a;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: #102b2a;">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #102b2a;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #091d1c;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #102b2a;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #091d1c;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #c09342;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #0e2e2d;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #c09342;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #c09342;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #c09342;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #102b2a;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-center-nav has-large-header has-header-small-shadow no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav --line01 --effect03</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form&nbsp;color-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Lacksund Preview



<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #e27361;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f7f7f7;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #6280f0;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #3b28cc;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f7f7f7;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #e27361;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #1c1c1c;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #e27361;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #e27361;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #6280f0;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav has-large-header no-shopping-cart g-font has-sticky-logo</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;bg-white br5&nbsp; add-10 margin-5 has-shadow</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-16 weight-400 snip-nav --line01</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white mid-round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white mid-round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Agen Preview

<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #070707;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #dadada;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #070721;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #696969;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #222222;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #070707;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #070707;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #dadada;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #070707;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #b3b3b3;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #171717;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #070707;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #070707;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #070707;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #121212;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: #070707;">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">has-right-nav&nbsp; has-large-header has-large-content no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">&nbsp;has-header-border-color has-border-btm has-thin-border</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">size-17 weight-400 snip-nav --line01 no-border-radius</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">color-white o-form white-outline-btn has-margin</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6" contenteditable="true">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6" contenteditable="true">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
<p>#cc-inner .is-sticky .bg-header-inner&gt;.has-header-border-color {</p>
<p>&nbsp; &nbsp;border-color:transparent;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Horten Preview



<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #b4e717;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f6f5f2;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #1c4b42;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #33691e;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #1a1d0e;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #b4e717;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #1c4b42;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f6f5f2;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #444444;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #1c4b42;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #eeeeee;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #1c4b42;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #1c4b42;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #1c4b42;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #1c4b42;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-left-nav has-custom-logo g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-17&nbsp; snip-nav --line01 has-icon-1 no-shadow has-medium-border-radius</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form bg-gradient-light&nbsp; round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>.has-left-nav.has-custom-logo .is-sticky .hs-logo {</p>
<p>&nbsp; &nbsp;padding-right:20px;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Hafen Preview

<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #054f30;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #eef3f0;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #394b41;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #51a51f;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #9cb0a4;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #054f30;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: #eef3f0;">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #054f30;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #9cb0a4;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #eef3f0;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #444444;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #256245;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #eef3f0;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #054f30;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #054f30;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #054f30;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #054f30;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">has-right-nav no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">&nbsp;br15 has-shadow-small&nbsp; add-left-20 add-right-20&nbsp; margin-10</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">size-15 weight-400 has-large-border-radius no-shadow</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">form-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">o-form round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6" contenteditable="true">weight-400&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6" contenteditable="true">
<p>&nbsp;</p>
<p>.my-class {</p>
<p>&nbsp; &nbsp;background:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Nordland Preview



<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #5b7af8;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f9f9ff;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #020824;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #ffd1a9;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #3b28cc;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: #5b7af8;">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #020824;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f9f9ff;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #020824;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #5b7af8;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #040f44;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #5b7af8;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #5b7af8;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #5b7af8;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #020824;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav no-shopping-cart has-header-shadow-small g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;hidden</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-18 weight-400 snip-nav color-line --line03</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white mid-round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white mid-round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>/* additional styles for onepager template */</p>
<p><span style="font-size: 13px;">.overlay.open .is--left {</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;width:100%;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;display:flex;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;flex-direction:column;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;text-align:center;</span></p>
<p><span style="font-size: 13px;">}</span></p>
<p><span style="font-size: 13px;">.overlay.open nav {</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;font-size:40px;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;padding:50px 0;</span></p>
<p><span style="font-size: 13px;">}</span></p>
<p>&nbsp;</p>
<p><span style="font-size: 13px;">.overlay.open .magic-field {</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp; text-align:left;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp; width:100%</span></p>
<p>&nbsp;</p>
<p><span style="font-size: 13px;">}</span></p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Varmdo Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #ffc548;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #eaded0;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #054f48;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #79171d;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #b34c49;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #ffc548;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #1e2022;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #eaded0;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: rgba(121, 23, 29, 0.96);">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #ffc548;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #981e26;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #ffc548;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #ffc548;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #ffc548;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #eaded0;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #030717;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-left-nav has-center-logo has-large-header has-sticky-logo no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-16 weight-600 snip-nav</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30 weight-600</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white mid-round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white mid-round-btn has-pattern-img</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">https://u.jimcdn.com/cms/o/s1bf426f0637f2ab5/userlayout/img/pattern-memphis-2.png?t=1725693550</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400 weight-600</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400&nbsp;</span><span style="color: #888888;">weight-600</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400&nbsp;</span><span style="color: #888888;">weight-600</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-600</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Oland Preview



<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #f93b50;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #fff4f3;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #18212f;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #a14b96;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #655494;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #f93b50;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #18212f;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #fff4f3;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #18212f;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #e26563;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #243146;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #f93b50;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #f93b50;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #f93b50;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #fff4f3;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #18212f;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-left-nav has-right-logo has-sticky-logo has-large-header no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-20 weight-400 color-nav</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white has-mobile-fullwidth-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white has-mobile-fullwidth-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Gotland Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #ff782b;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f4ece4;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #3d422f;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #005246;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #495a44;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #3d422f;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #f4ece4;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #1e2022;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f1eeee;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #3d422f;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #ff782b;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #575e44;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #ff782b;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #ff782b;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #ff782b;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #f4ece4;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #3d422f;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav has-hamburger no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p style="line-height: 19.5px;">#cc-inner .hs-button,#cc-inner #hs-container input[type='submit'],#cc-inner .j-calltoaction-link {</p>
<p style="line-height: 19.5px;">&nbsp; &nbsp;border-radius:15px 0 15px 0;</p>
<p style="line-height: 19.5px;">}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Enkel Preview

<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #4e595d;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f1f6f6;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #121212;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #d7ddcb;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #707070;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #121212;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #4e595d;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #121212;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #f1f6f6;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #4e595d;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #4e595d;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #4e595d;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #4e595d;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #121212;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #f1f6f6;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(78, 89, 93, 0.9);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav has-sticky-logo has-large-header no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;has-top-header-border-color has-border-btm has-thin-border color-white size-13</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav --line01</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white white-outline-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .has-lang-nav.snip-nav ul li a {</p>
<p>&nbsp; margin:2px 7px;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Altona Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #ebe0f5;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #2c2a4a;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #4e148c;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #ffc2e2;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ebe0f5;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #2c2a4a;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f1eeee;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #1a192d;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #1f1e37;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #ebe0f5;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #2c2a4a;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: #d9d9d9;">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-18 weight-400 snip-nav color-line g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-16</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Halmstad light Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #ebe0f5;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #2c2a4a;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #4e148c;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #ffc2e2;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #2c2a4a;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f1eeee;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #1a192d;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #1f1e37;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #2c2a4a;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: #d9d9d9;">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-18 weight-400 snip-nav color-line g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-16</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Halmstad dark Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #d2ff01;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f9faf0;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #6458ff;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #ff27bb;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #d2ff01;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f1eeee;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #d2ff01;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #212121;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #d2ff01;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #d2ff01;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #d2ff01;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: #d9d9d9;">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;add-10 m-spacer-0</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-18 weight-400 snip-nav color-line text-center</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-16</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
<p>.bg-header-inner &gt;div {</p>
<p>&nbsp; &nbsp; border-radius:0 30px;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Halmstad custom Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f6f5f3;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #6be55f;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #1601ac;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #1f1f1f;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #f6f5f3;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav has-hamburger</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;hidden</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-16 g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30 g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<p>o-form color-white&nbsp;</p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500 g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-500 g-font</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-800 g-font</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-500 g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Holborn default Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #dc2751;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f0f0f3;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #282834;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #8c458d;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #594f8a;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #dc2751;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: #dc2751;">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #282834;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: rgba(40, 40, 52, 0.9);">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #cee1f4;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #3d3d4e;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #dc2751;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #dc2751;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #dc2751;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #f0f0f3;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #282834;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;margin-10 br500 is--flex</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-500 snip-nav add-5</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-16</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<p>o-form color-white round-btn</p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">https://u.jimcdn.com/cms/o/s5a6b6241546cf881/userlayout/img/bg-musician01.jpg?t=1729866141</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-500</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-800</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-500</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Holborn ultimate Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #be9c79;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f0f0f3;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #121212;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #3e3127;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #1b5851;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #be9c79;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: #be9c79;">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #3e3127;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #121212;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #be9c79;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #2a2a2a;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #be9c79;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #be9c79;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #be9c79;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #f0f0f3;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #282834;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-left-nav g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;margin-5 br10 is-skew bg-gradient</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;margin-10 br500 is--flex</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav --line01 --effect04 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-16</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white mid-round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<p>o-form color-white mid-round-btn</p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>.bg-header-inner {</p>
<p>margin-left:-20px;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Holborn custom Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #f0f88b;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f8f5ea;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #0d1615;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #17412d;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #768b55;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #f0f88b;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #0d1615;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(36, 44, 43, 0.62);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #172524;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: rgba(23, 65, 45, 0.91);">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #f0f88b;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #255c42;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #f0f88b;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #f0f88b;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #f0f88b;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #fcfbff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #4b4757;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-center-nav no-shopping-cart has-sticky-header&nbsp; g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;br500</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-16 weight-400&nbsp;snip-nav --line01 --effect03&nbsp; has-medium-border-radius has-icon-1</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form round-btn color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">https://u.jimcdn.com/cms/o/sc557f1fae2f37b81/userlayout/img/m-decorative01.jpg?t=1740756107</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>.my-class {</p>
<p>&nbsp; &nbsp;background:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Organic Food Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #01c2ce;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f5f6f7;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #000916;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #2c74ff;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #3b28cc;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #01c2ce;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #2f3c4e;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f5f6f7;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #f5f6f7;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #2f3c4e;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #01c2ce;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #cbcbcb;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #01c2ce;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #01c2ce;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #01c2ce;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #f5f6f7;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #2f3c4e;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav has-sticky-logo has-large-content g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;add-top-5 add-btm-5</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-18 weight-400 snip-nav primary-color-line</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-500</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-500</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-500</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Corporation Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #eb191d;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #fffaed;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #1b1d1f;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #fead01;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #b86000;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(169, 20, 23, 0.9);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #eb191d;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #c51b1e;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #eb191d;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #fead01;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #ee363a;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #fead01;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #fead01;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #fead01;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #1b1d1f;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #eb191d;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-center-nav has-sticky-logo has-large-content g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;margin-top-5 br5 is-skew</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;add-top-5 add-btm-5</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-20 weight-600 snip-nav --effect02 --line03 secondary-color-line is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-800 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-800 is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-800 is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-800 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Street Food Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #fff4f9;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #1e2022;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #00c9c8;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #ed5e93;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #fff4f9;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #fff4f9;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #ed5e93;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #c9bdc2;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-center-nav has-large-header g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav has-icon-2 --effect03 --line01</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Online Store Preview



<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #ca9c5e;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #fff8ee;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #0b1315;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #8f9556;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #0f1d22;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: #0f1d22;">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #ca9c5e;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #0b1315;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #0f1d22;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: rgba(11, 19, 21, 0.95);">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #ca9c5e;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #1a2b30;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #ca9c5e;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #ca9c5e;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #ca9c5e;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #192431;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-center-nav has-sticky-logo no-shopping-cart&nbsp; g-font has-frame</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;right-align link-dark</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav --line01</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">https://u.jimcdn.com/cms/o/sc0aed8eb7b90bb7f/userlayout/img/pattern-hexagon.png?t=1726903820</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .has-lang-nav.snip-nav ul li a:link,</p>
<p>#cc-inner .has-lang-nav.snip-nav ul li a:visited {</p>
<p>&nbsp; &nbsp;margin: 2px 5px;</p>
<p>}</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Restaurant Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #902923;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #d6d5c9;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #a22c29;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #254441;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: #1a1a1a;">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #902923;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: rgba(0, 0, 0, 0.9);">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #1a1a1a;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #a22c29;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #171717;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #902923;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #902923;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #902923;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-center-nav has-large-header has-sticky-logo no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;add-left-10 add-right-10</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;weight-400 snip-nav --line03 color-line</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white margin-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .hs-footer&gt; div {</p>
<p>&nbsp; border-radius:0 30px 0 30px;</p>
<p>}</p>
<p>.cc-indexpage .matrix-hero&gt; div,.cc-indexpage .matrix-hero .hs-overlay{</p>
<p>&nbsp; &nbsp;border-radius:0 30px 0 30px;</p>
<p>}</p>
<p>.cc-indexpage .matrix-hero {</p>
<p>&nbsp; &nbsp;margin:15px;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Online Store Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #a57b43;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #e4dad0;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #05213a;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #757a40;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #005f41;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #a57b43;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #05213a;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #031627;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #05213a;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #a57b43;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #a57b43;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #a57b43;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #a57b43;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #a57b43;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #05213a;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-500 snip-nav --line02 color-line is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-500 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Hotel Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #17403c;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #e7ebe7;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #04302d;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #47706b;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #96b1ad;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #17403c;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #17403c;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #96b1ad;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #e7ebe7;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #444444;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #17403c;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #cdcfcd;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #17403c;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #17403c;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #17403c;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #17403c;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-left-nav&nbsp; has-sticky-logo g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav is-uppercase --line01</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Artisan Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #f75b57;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #fcfcfc;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #99d6e0;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #62576b;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #f75b57;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #f75b57;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #282828;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #f75b57;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #f75b57;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #f75b57;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #f75b57;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav m-text-17 g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;has-header-border-color has-medium-border margin-top-10 margin-btm-10 has-border-shadow</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-25 is-uppercase weight-500 color-line snip-nav --effect04 --line04</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-600 is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-600 is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-600 is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6"><span style="color: #888888;">weight-600 is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
#cc-inner #hs-container .j-formnew input[type='submit'],
#cc-inner .hs-content .hs-button:not(.ghost-dark),
.j-calltoaction-link-style-1{
   padding: 20px 45px;
   border:1px solid #000;
   box-shadow:3px 3px 0 0 #000;
}   

#cc-inner .hs-menu nav ul ul,#cc-inner .hs-mega .j-nav-variant-nested > ul > li > ul {
    border:2px solid #000;
    border-radius:0;
}
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Event Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #5a24b1;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f5f6ff;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #0e082d;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #feb4c3;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #63baab;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #5a24b1;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #0e082d;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #0e082d;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #cee1f4;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #160d43;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #5a24b1;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #5a24b1;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #5a24b1;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #0e082d;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-center-nav has-large-header g-font no-shopping-cart</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-17 weight-700 snip-nav --effect02</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30 weight-700</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white mid-round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white mid-round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-700</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-700</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Freelancer Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #fafaec;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #6be55f;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #00edff;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #1d1d1d;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #161616;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav has-sticky-logo has-large-header</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-18 weight-400 is-uppercase snip-nav g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 g-font is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30 g-font is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400 g-font is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 g-font is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 g-font is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400 g-font is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Fitness Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #0e62fe;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f2f5fa;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #171151;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #10d0a1;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #3b28cc;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #0e62fe;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #171151;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #ebeeff;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #171151;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #0e62fe;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #262151;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #0e62fe;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #0e62fe;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #0e62fe;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #171151;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">has-center-nav g-font</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;right-align color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 21px;">
<tbody>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white mid-round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white mid-round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Clinic Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #ff411c;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #eef6fa;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #0d161f;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #0147ff;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #030d16;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #0d161f;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #eef6fa;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #0d161f;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #ff411c;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #192939;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #ff411c;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #ff411c;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #ff411c;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #eef6fa;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #0d161f;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: #ff411c;">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav has-sticky-logo no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;has-top-header-border-color has-border-btm</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;add-top-10 add-btm-10</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-17 weight-600 color-nav</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30 weight-600</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white mid-round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white mid-round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-600</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-600</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-600</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-600</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p><span style="font-size: 13px;">.mid-round-btn a.j-calltoaction-link,</span></p>
<p><span style="font-size: 13px;">.mid-round-btn .j-formnew input[type='submit']{</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;border-radius:10px!important;</span></p>
<p><span style="font-size: 13px;">}</span></p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Mechanic Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #5da4f2;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #ecfcff;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #293263;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #596be9;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #3b28cc;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #5da4f2;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #293263;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #ecfcff;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: rgba(93, 164, 242, 0.9);">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #cee1f4;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #78b3f4;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #5da4f2;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #5da4f2;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #5da4f2;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #ecfcff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #030717;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav&nbsp;no-shopping-cart has-sticky-logo</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav color-line is-uppercase g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">https://u.jimcdn.com/cms/o/s2590b6ef50eb5ada/userlayout/img/bg-cleaning2.jpg?t=1727424753</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400 is-uppercase g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 is-uppercase g-font</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 is-uppercase g-font</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6"><span style="color: #888888;">weight-400 is-uppercase g-font</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="font-size: 13px;">#cc-inner .hs-logo {</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;display:flex;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;padding:10px;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;border-bottom-left-radius:20px;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;margin-bottom:-20px;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;background:var(--bg-primary-light);</span></p>
<p><span style="font-size: 13px;">}</span></p>
<p style="line-height: 18.2px;">.matrix .hs-logo {</p>
<p style="line-height: 18.2px;">&nbsp; &nbsp;display:block!important;</p>
<p style="line-height: 18.2px;">}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Cleaning Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #c3a967;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f4ece4;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #3d422f;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #005246;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #495a44;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #3d422f;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #1e2022;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f1eeee;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #3d422f;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #c3a967;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #575e44;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #c3a967;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #c3a967;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #c3a967;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #f4ece4;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #3d422f;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav has-large-header has-hamburger no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 color-nav is-uppercase is-letterspace-2</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-20 color-nav is-uppercase is-letterspace-2</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400 is-uppercase is-letterspace-2</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 is-uppercase is-letterspace-2</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 is-uppercase is-letterspace-2</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400 is-uppercase is-letterspace-2</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>.button_container.nav-toggle:before{</p>
<p>&nbsp; &nbsp;content:"Menu";</p>
<p>&nbsp; &nbsp;position:absolute;</p>
<p>&nbsp; &nbsp;right:35px;</p>
<p>}</p>
<p>&nbsp;</p>
<p>.overlay {</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;width:300px;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;right:0;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;left:auto;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;padding:20px;</span></p>
<p><span style="font-size: 13px;">}</span></p>
<p>&nbsp;</p>
<p><span style="font-size: 13px;">#cc-inner .overlay .inner {</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;width:100%;</span></p>
<p><span style="font-size: 13px;">}</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="font-size: 13px;">.overlay .nav-mobile-options li {</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;display:block;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;clear:both;</span></p>
<p><span style="font-size: 13px;">}</span></p>
<p><span style="font-size: 13px;">.overlay .jmd-nav .jmd-nav__toggle-button {</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;right:-12px;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;top:8px;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;background-color: transparent;</span></p>
<p><span style="font-size: 13px;">}</span></p>
<p><span style="font-size: 13px;">.jmd-nav .jmd-nav__toggle-button:after,</span></p>
<p><span style="font-size: 13px;">.jmd-nav .jmd-nav__toggle-button:before {</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;background-color:currentColor!important;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;height:2px!important;</span></p>
<p>&nbsp;</p>
<p><span style="font-size: 13px;">}</span></p>
<p>&nbsp;</p>
<p><span style="font-size: 13px;">#cc-inner .snip-nav ul li a:link,</span></p>
<p><span style="font-size: 13px;">#cc-inner .snip-nav ul li a:visited {</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;margin: 10px 50px 10px 10px;</span></p>
<p>&nbsp;</p>
<p><span style="font-size: 13px;">}</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Beauty Spa Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #adb295;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f2f1ed;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #454839;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #d3c0a5;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #274543;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #adb295;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #454839;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f2f1ed;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #f2f1ed;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #444444;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #adb295;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #adb295;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #274543;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #274543;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #274543;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #f2f1ed;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #454839;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-center-nav has-sticky-logo has-large-header no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-13 weight-600&nbsp; is-uppercase is-letterspace-1 snip-nav --line01</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30 weight-600</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-600</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-600</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-600</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-600 is-uppercase is-lettespace-1</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p><span style="font-size: 13px;">.mid-round-btn a.j-calltoaction-link,</span></p>
<p><span style="font-size: 13px;">.mid-round-btn .j-formnew input[type='submit']{</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;border-radius:10px!important;</span></p>
<p><span style="font-size: 13px;">}</span></p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Coaching Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #ec9343;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f7f3eb;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #463933;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #005247;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #976b47;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #ec9343;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #baa89b;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(247, 243, 235, 0.9);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #463933;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #463933;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #ec9343;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #55453e;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #ec9343;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #ec9343;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #ec9343;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #463933;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #f7f3eb;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #463933;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav has-sticky-logo no-shopping-cart</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">add-left-10&nbsp; add-right-10 margin-10 br20</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-20 weight-400 color-nav is-uppercase g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30 is-uppercase g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400 is-uppercase g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 is-uppercase g-font</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 is-uppercase g-font</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400 is-uppercase g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Pet Care Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #ffc300;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #ebebeb;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #001d3d;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #e71d36;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #054a91;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #ffc300;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #001d3d;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: #054a91;">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #001d3d;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #001d3d;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #cee1f4;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #012c5c;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #ffc300;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #ffc300;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #ffc300;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #003566;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #001d3d;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffc300;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav&nbsp; no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;right-align</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-500 bg-nav-primary active-dark-color is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30 is-uppercase weight-500</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-500 is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-500 is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-500 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Construction Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #bf987c;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f5f5f5;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #1a2232;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #4f6182;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #ecdccb;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: #ecdccb;">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #1a2232;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #1a2232;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #1a2232;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #bf987c;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #263149;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #bf987c;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #bf987c;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #bf987c;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #f5f5f5;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #1a2232;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav has-sticky-logo no-shopping-cart</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;add-top-10 add-btm-10</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;is-skew add-10</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-17 weight-600&nbsp;snip-nav bg-subnav-primary white-subnav-color</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30 weight-600</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-600 g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 g-font</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 g-font</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400 g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Lawyer Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #a463a8;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f5f2f4;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #2a1938;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #67c8cb;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #3b28cc;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #67c8cb;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #2a1938;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f5f2f4;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: rgba(42, 25, 56, 0.94);">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #cee1f4;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #3d2451;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #a463a8;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #a463a8;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #a463a8;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #f5f2f4;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #030717;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav no-shopping-cart</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;right-align</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-17 weight-400 color-nav bg-subnav-primary active-white-subnav-color g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30 g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;https://u.jimcdn.com/cms/o/se19d0ed0faeabe0a/userlayout/img/bg-physio2.jpg?t=1728725247</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400 g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 g-font</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 g-font</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400 g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Physio Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #11171b;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f0f0f0;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #030717;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #748a96;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #9a8c98;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #030717;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f0f0f0;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #f0f0f0;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #141414;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #11171b;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #11171b;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #f0f0f0;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #030717;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-left-nav has-sticky-logo</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;has-header-border-color has-border-btm has-thin-border</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400 snip-nav --line01 add-left-20 is-uppercase g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 g-font is-uppercase right-align</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30 g-font is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white white-outline-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400 is-uppercase g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 is-uppercase g-font</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400 is-uppercase g-font</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400 g-font is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>/* styling for urban hotel template */</p>
<p><span style="font-size: 13px;">.hs-logo {</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;padding:30px 5px;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;margin-bottom:-20px;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;background:#000;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;display:block;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;</span></p>
<p><span style="font-size: 13px;">}</span></p>
<p>&nbsp;</p>
<p><span style="font-size: 13px;">.has-nav-inverted #cc-inner .hs-header .hs-magic {</span></p>
<p><span style="font-size: 13px;">&nbsp; color:#fff!important;</span></p>
<p><span style="font-size: 13px;">}</span></p>
<p>&nbsp;</p>
<p style="line-height: 18.2px;"><span>.has-nav-inverted #cc-inner .hs-header .is-sticky .hs-magic {</span></p>
<p style="line-height: 18.2px;"><span>&nbsp; color:inherit!important;</span></p>
<p>&nbsp;</p>
<p style="line-height: 18.2px;"><span>}</span></p>
<p>&nbsp;&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Urban hotel Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #3db166;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f3f3f3;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #192f59;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #e98209;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #4d5c8b;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #192f59;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #192f59;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f3f3f3;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #192f59;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #cee1f4;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #244076;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #3db166;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #3db166;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #3db166;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #f3f3f3;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #192f59;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav has-sticky-logo g-font no-shopping-cart</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;right-align</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-17 weight-500 primary-color-nav&nbsp; bg-subnav-primary active-white-subnav-color no-shadow</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30 weight-500</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-500</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-500</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-500</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Education Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #6030ff;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #fcfbff;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #0a0d11;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #ffd950;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #4b4757;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #6030ff;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(255, 255, 255, 0.92);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #4b4757;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #fcfbff;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #fcfbff;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #444444;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #b8a3ff;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #6030ff;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #6030ff;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #6030ff;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #fcfbff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #4b4757;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: #eeeeee;">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-center-nav no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;br500 has-nav-inner-border-color has-thin-border</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-16 weight-400 primary-color-nav add-10 has-medium-border-radius</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>.my-class {</p>
<p>&nbsp; &nbsp;background:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Creative Studio Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f6f6f6;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #55433b;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #92614c;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #007d73;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #f6f6f6;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #1e1e1e;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #f6f6f6;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #444444;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #92614c;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #eeeeee;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #f6f6f6;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-left-nav has-custom-logo has-large-content g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;right-align</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp; size-17 weight-500 snip-nav --line01 has-icon-1</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-500</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-500</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-500</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
<p>#cc-inner .bg-nav-inner &gt;div {</p>
<p>&nbsp; &nbsp;margin: 0px -500%;</p>
<p>&nbsp; &nbsp;padding: 0.3em 500%;</p>
<p>}</p>
<p>&nbsp;</p>
<p>.is-sticky .hs-logo {</p>
<p>&nbsp; &nbsp;background:#fff;</p>
<p>&nbsp; &nbsp;padding:5px 0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Fashion Store Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f6f6f6;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #55433b;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #92614c;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #007d73;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #f6f6f6;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f6f6f6;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #92614c;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #171717;">&nbsp;</td>
<td class="class-name">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #f6f6f6;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-center-nav has-custom-logo has-large-content g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;left-align</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;has-nav-inner-border-color has-thin-border has-border-top-btm</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp; size-17 weight-500 snip-nav --line01 has-icon-1 no-shadow no-border-radius</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-500</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"><span style="color: #888888;">weight-500</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-500</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
<p>#cc-inner .bg-nav-inner &gt;div {</p>
<p>&nbsp; &nbsp;margin: 0px -500%;</p>
<p>&nbsp; &nbsp;padding: 0.3em 500%;</p>
<p>}</p>
<p>&nbsp;</p>
<p>.is-sticky .hs-logo {</p>
<p>&nbsp; &nbsp;background:transparent;</p>
<p>&nbsp; &nbsp;padding:10px 0;</p>
<p>}</p>
<p>&nbsp;</p>
<p>.hs-logo img {</p>
<p>&nbsp; &nbsp;border:5px solid #fff;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Urban Store Preview

JS Code Editor

v6.1.3 (16.05.2025)

<var>is-switcher</var> 
<script type="text/javascript">
//<![CDATA[
// version 6.1.3
jQuery.noConflict(),function(e){e(document).ready((function(){e(".config, .config1a, .config1b, .config1c, .config2, .config2a, .config3, .config3a, .config3b, .config4, .config4a, .config5, .config6, .config7, .config8, .config10").each((function(){var t=e(this);if(t.hasClass("config10")){var o=t.find("p").map((function(){return e(this).text().trim()})).get().join("");o=o.replace(/\s+/g," ").trim();var n=e('style[data-type="custom-css"]');n.length>0&&!o?n.remove():(n.remove(),e("head").append('<style data-type="custom-css">'+o+"</style>"))}else{var s=t[0].textContent.trim().replace(/\s+/g," ").trim().split(" ");if(t.hasClass("config"))e("#hs-container").removeClass().addClass(s.join(" "));else if(t.hasClass("config1a"))e(".bg-top-header-inner>div").removeClass().addClass(s.join(" "));else if(t.hasClass("config1b"))e(".bg-header-inner>div").removeClass().addClass(s.join(" "));else if(t.hasClass("config1c"))e(".bg-nav-inner>div").removeClass().addClass(s.join(" "));else if(t.hasClass("config2"))e(".hs-menu nav, .hs-mega nav, .onepager .hs-menu nav a, .sidebar-options").removeClass().addClass(s.join(" "));else if(t.hasClass("config2a"))e(".bg-nav-inner>div").removeClass().addClass(s.join(" "));else if(t.hasClass("config3"))e("#content_area").removeClass().addClass(s.join(" "));else if(t.hasClass("config3a"))e(".hs-subnav .inner>div").removeClass().addClass(s.join(" "));else if(t.hasClass("config3b"))e(".nav-mobile-options>div").removeClass().addClass(s.join(" "));else if(t.hasClass("config4"))e(".footer-options>div").removeClass().addClass(s.join(" "));else if(t.hasClass("config4a")){var a=t.text().trim();e(".hs-footer").css({background:"url('"+a+"') no-repeat center","background-size":"cover"})}else t.hasClass("config5")?e(".j-header h1, .j-htmlCode h1, h1.j-blog-header, .j-text h1").removeClass().addClass(s.join(" ")):t.hasClass("config6")?e(".j-header h2, .j-htmlCode h2, .blogselection h2, .j-text h2, .j-blog-post--headline").removeClass().addClass(s.join(" ")):t.hasClass("config7")?e(".j-header h3, .j-htmlCode h3, .j-text h3").removeClass().addClass(s.join(" ")):t.hasClass("config8")&&(e(".j-calltoaction-link").each((function(){var t=e(this);t.hasClass("j-calltoaction-link-style-1")?t.removeClass().addClass("j-calltoaction-link j-calltoaction-link-style-1"):t.hasClass("j-calltoaction-link-style-2")?t.removeClass().addClass("j-calltoaction-link j-calltoaction-link-style-2"):t.hasClass("j-calltoaction-link-style-3")&&t.removeClass().addClass("j-calltoaction-link j-calltoaction-link-style-3"),e.each(s,(function(e,o){t.addClass(o)}))})),e(".j-formnew input[type='submit']").each((function(){var t=e(this);t.removeClass().addClass("j-formnew input[type='submit']"),e.each(s,(function(e,o){t.addClass(o)}))})),e(".cc-m-download-file-link").each((function(){var t=e(this);t.removeClass().addClass("cc-m-download-file-link"),e.each(s,(function(e,o){t.addClass(o)}))})))}}));var t=e('<div class="guide-lines-container"></div>').appendTo(".matrix .is-fluid-area");function o(o){t.empty();var n=o.position(),s=o.outerWidth();e('<div class="guide-line-vertical"></div>').css({left:n.left+s/2,top:0,bottom:0}).appendTo(t)}function n(){t.empty()}e(".matrix .is-fluid").draggable({containment:"parent",grid:[1,1],stop:function(){var t=e(this).parent().width(),o=e(this).parent().height(),s=e(this).position().left/t*100+"%",a=e(this).position().top/o*100+"%";e(this).css("left",s),e(this).css("top",a),n()},drag:function(e,t){o(t.helper)}}),e(".matrix .is-fluid").dblclick((function(t){e(t.target).hasClass("btn-radius-plus")||e(t.target).hasClass("btn-radius-minus")||e(this).draggable({disabled:!0})})),e(document).on("click",(function(t){e(t.target).closest(".matrix .is-fluid").length||e(".matrix .is-fluid").draggable({disabled:!1})})),e(".matrix .is-fluid-area .is-fluid").resizable({containment:"parent",autoHide:!0,stop:function(e,t){var o=t.element.parent(),s=t.element.width()/o.width()*100+"%",a=t.element.height()/o.height()*100+"%",r=t.position.left/o.width()*100+"%",l=t.position.top/o.height()*100+"%";t.element.css({width:s,height:a,left:r,top:l}),n()},start:function(e,t){t.element.position(),o(t.helper)},resize:function(e,t){o(t.helper)}}),e(".matrix .is-fluid-area").resizable({handles:"s",autoHide:!0,stop:function(e,t){var o=t.element.parent();t.element.css({height:t.element.height()+"px",width:t.element.width()/o.width()*100+"%"})}}),e(".matrix .mask-section").resizable({containment:"parent",autoHide:!0,stop:function(e,t){var o=t.element.parent(),s=t.element.width()/o.width()*100+"%",a=t.element.height()/o.height()*100+"%",r=t.position.left/o.width()*100+"%",l=t.position.top/o.height()*100+"%";t.element.css({width:s,height:a,left:r,top:l}),n()},start:function(e,t){o(t.helper)},resize:function(e,t){o(t.helper)}}),e(".matrix .fluid-img").resizable({containment:"parent",autoHide:!0,aspectRatio:!1,stop:function(e,t){var o=t.element.parent(),s=t.element.width()/o.width()*100+"%",a=t.element.height()/o.height()*100+"%",r=t.position.left/o.width()*100+"%",l=t.position.top/o.height()*100+"%";t.element.css({width:s,height:a,left:r,top:l}),n()},start:function(e,t){t.element.position(),o(t.helper)},resize:function(e,t){o(t.helper)}}),new MutationObserver((function(t){t.forEach((function(t){var o;"childList"===t.type&&t.addedNodes.length>0&&(o={},[".color1",".color2",".color3",".color4",".color5",".color6",".color7",".color7b",".color8",".color8b",".color8c",".color9",".color10",".color11",".color12",".color13",".color14",".color15",".color16",".color17",".color18",".color19",".color20",".color21",".color22",".color23",".color24",".color25"].forEach((function(t){o[t]=e(t).css("background-color")})),document.documentElement.style.setProperty("--bg-primary",o[".color1"]),document.documentElement.style.setProperty("--bg-primary-light",o[".color2"]),document.documentElement.style.setProperty("--bg-primary-dark",o[".color3"]),document.documentElement.style.setProperty("--bg-secondary",o[".color4"]),document.documentElement.style.setProperty("--bg-secondary-dark",o[".color5"]),document.documentElement.style.setProperty("--bg-body",o[".color6"]),document.documentElement.style.setProperty("--bg-top-header",o[".color7"]),document.documentElement.style.setProperty("--bg-top-header-inner",o[".color7b"]),document.documentElement.style.setProperty("--bg-header",o[".color8"]),document.documentElement.style.setProperty("--bg-header-inner",o[".color8b"]),document.documentElement.style.setProperty("--bg-nav-inner",o[".color8c"]),document.documentElement.style.setProperty("--bg-content",o[".color9"]),document.documentElement.style.setProperty("--bg-footer",o[".color10"]),document.documentElement.style.setProperty("--footer-color",o[".color11"]),document.documentElement.style.setProperty("--footer-link",o[".color12"]),document.documentElement.style.setProperty("--bg-hr",o[".color13"]),document.documentElement.style.setProperty("--bg-btn-01",o[".color14"]),document.documentElement.style.setProperty("--bg-btn-02",o[".color15"]),document.documentElement.style.setProperty("--bg-btn-03",o[".color16"]),document.documentElement.style.setProperty("--bg-social",o[".color17"]),document.documentElement.style.setProperty("--nav-color",o[".color18"]),document.documentElement.style.setProperty("--bg-subnav",o[".color19"]),document.documentElement.style.setProperty("--bg-overlay",o[".color20"]),document.documentElement.style.setProperty("--mobile-nav-color",o[".color21"]),document.documentElement.style.setProperty("--text-btn",o[".color22"]),document.documentElement.style.setProperty("--bg-top-header-border-color",o[".color23"]),document.documentElement.style.setProperty("--bg-header-border-color",o[".color24"]),document.documentElement.style.setProperty("--bg-nav-inner-border-color",o[".color25"]),e(".bg-custom-color").each((function(){var t=e(this).find("span").css("color");e(this).parent().attr("style","background-color: "+t+" !important")})))}))})).observe(document.body,{childList:!0,subtree:!0}),e(".config8").each((function(){e(".hs-button").addClass(e(this).text())})),e(".config9").each((function(){e(".hs-content .j-hgrid,.is-anim-block").addClass(e(this).text())})),e(".j-hgrid").unwrap().wrap("<div class='m-section' />"),e(".cc-m-hgrid-column").each((function(){var t=e(this);t.find("ins").each((function(){var o=e(this).text().trim();t.children("div").first().removeClass().addClass(o)}))})),e(".cc-m-htmlcode").on({mouseenter:function(){e(this).find("var, ins").show().css("display","block")},mouseleave:function(){e(this).find("var, ins").hide()}}),e("var").each((function(){e(this).closest(".m-section").removeClass().addClass(e(this).text())})),e(".matrix-reload").click((function(){location.reload(),e(".matrix .cc-content-parent").animate({opacity:".5"},500)})),function(e){const t=window.parent.document;if(!t.getElementById("custom-device-style")){const e=t.createElement("style");e.id="custom-device-style",e.innerHTML="\n      #j-prev-device-wrap.j-prev-phone-landscape {\n        width: 808px !important;\n        height: 1120px !important;\n      }\n      #j-prev-device-wrap.j-prev-phone-landscape .j-prev-device {\n        padding: 40px 40px !important;\n      }\n      #j-prev-device-wrap.j-prev-phone-landscape .j-prev-speaker,\n      #j-prev-device-wrap.j-prev-phone-landscape .j-prev-home {\n        display: none !important;\n      }\n    ",t.head.appendChild(e)}e(".matrix-view").on("click",(function(o){o.preventDefault();const n=e("#cms",t).parent().parent().parent();n.hasClass("j-prev-phone-landscape")||n.hasClass("j-prev-phone-portrait")?n.hasClass("j-prev-phone-landscape")?n.removeClass("j-prev-phone-landscape").addClass("j-prev-phone-portrait"):n.hasClass("j-prev-phone-portrait")&&n.removeClass("j-prev-phone-portrait"):n.addClass("j-prev-phone-landscape")}))}(jQuery),e(".cc-m-all-opened .is-fluid").removeAttr("data-mce-style"),e(".draggable-logo").appendTo(e(".hs-logo")),e(".draggable-top-header").appendTo(e(".hs-top-header .inner>div")),e(".cc-m-hgrid").each((function(){e(this).find(".draggable-hero").length>0&&e(this).appendTo(e(".is-hero-draggable"))})),e("body").hasClass("matrix")||e(".draggable-hero").appendTo(e(".is-hero-draggable"));const s=document.querySelector(".is-hero-draggable");if(s&&!s.classList.contains("draggable-hero")){const e=s.querySelector(".m-section");e&&e.remove()}var a=e(".magic-field,.header-widget");a.find(".hs-magic,.draggable-header-widget").length||e(".hs-magic,.draggable-header-widget").remove().appendTo(a),e(".reset-btn").click((function(){e(".matrix .is-fluid").draggable("destroy"),e(".matrix .is-fluid").draggable()})),e(".edit-btn").click((function(){e(".matrix .is-fluid").draggable("destroy")})),e(".btn-delete").click((function(){e(this).parent().remove()})),e(".btn-add").click((function(){var t=e(this).parent(".is-fluid"),o=t.clone();t.hasClass("is-rel")&&o.removeClass("is-rel"),o.css({left:"+=10px",top:"+=10px"}),o.insertAfter(t)})),e(".is-fluid").removeAttr("data-mce-style"),document.querySelectorAll(".cc-config").forEach((e=>{e.setAttribute("contenteditable","true"),e.addEventListener("keydown",(e=>{if("Enter"===e.key){e.preventDefault();const t=window.getSelection();if(!t.rangeCount)return;const o=t.getRangeAt(0),n=document.createElement("br");o.deleteContents(),o.insertNode(n),o.setStartAfter(n),o.collapse(!0),t.removeAllRanges(),t.addRange(o)}})),e.addEventListener("paste",(e=>{e.preventDefault();const t=(e.clipboardData||window.clipboardData).getData("text/plain").replace(/\u00A0/g," ").replace(/[“”]/g,'"').replace(/[‘’]/g,"'"),o=window.getSelection();if(!o.rangeCount)return;const n=o.getRangeAt(0);n.deleteContents();const s=document.createTextNode(t);n.insertNode(s),n.setStartAfter(s),n.collapse(!0),o.removeAllRanges(),o.addRange(n)}))}))}))}(jQuery);
//]]></script> 
<button class="btn btn-sm cc-m-save btn-save matrix-msg matrix-save" data-action="save" title="Apply the styles">&#160;</button> 
<button class="btn btn-sm matrix-msg matrix-view" title="Mobile view">&#160;</button>

The multipurpose styles can be replaced with multilingual or premade templates. Special templates have a specific structure, allowing only a unique configuration of styles.

If you have any further questions regarding the templates or if you've found a bug, please add a comment below

Comments: 0

Templates

JS Code Editor

Products

Resources

Community

	bg-primary
	bg-primary-light
	bg-primary-dark
	bg-secondary
	bg-secondary-dark

	body
	top-header
	top-header-inner
	header
	header-inner
	navigation-inner
	navigation color
	dropdown background color
	content

	background
	text color
	link color
	horizontal line

	background color
	navigation color