Pre-Built Templates

Pre-Built Designs
01
Questions and Answers
02

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.

Pre-Built designs


<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: #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


<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: #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

Questions & Answers

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

Comments: 0

Stand out with professional Jimdo website

Premium 24/7 Support · Lifetime Updates

has-right-col-border

Resources

Documentation

Quick links

Try Matrix Builder

draggable-logo

Global colors

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

Template colors

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

Footer Styles

	background
	text color
	link color
	horizontal line

Buttons

	style 1
	style 2
	style 3
	text color

Mobile navigation

	background color
	navigation color

Other elements

	social icons
	top header border
	header border
	nav inner border

Template configurations

has-center-nav has-sticky-logo has-large-header g-font no-shopping-cart

Top header inner

Header inner

Navigation inner

Navigation styles

snip-nav --line01

Sub-menu (breadcrumbs) styles

size-15

Mobile Navigation styles

size-30

Content styles

form-white

Footer styles

o-form color-white white-outline-btn

Footer background image

Typography

Heading H1

weight-400

Heading H2

weight-400

Heading H3

weight-400

Buttons

weight-400

Advanced settings

Custom CSS

#cc-inner .my-class {

color:#f0f0f0;

}

Note: All changes made here will be applied to your entire website.

is-switcher