<?xml version="1.0" encoding="UTF-8" ?>
<themecustomize>
    <section title="Primary Color">
        <maincolor>
            <id>primary_color</id>
            <title>Primary Color</title>
            <color>#f10e34</color>
        </maincolor>
    </section>
    <section title="Body">
        <control>
            <id>body_bg</id>
            <title>Body Background</title>
            <selector>body</selector>
            <property>background-color</property>
        </control>
        <control> 
            <id>body_color</id>
            <title>Body color</title>
            <selector>body</selector> 
        </control>
    </section>
    
    <section title="Topbar">
        <control>
            <id>topbar_bg</id>
            <title>Topbar Background</title>
            <selector>#opal-topbar</selector>
            <property>background-color</property>
        </control>
        <control> 
            <id>topbar_color</id>
            <title>Topbar color</title>
            <selector>#opal-topbar a, #opal-topbar</selector> 
        </control>
    </section>
    <section title="Header">
        <control>
            <id>header_bg</id>
            <title>Header Background</title>
            <selector>#opal-masthead .header-main</selector>
            <property>background-color</property>
        </control>
        <control>
            <id>headerv2_bg</id>
            <title>Header V2 Background</title>
            <selector>.header-style-2.header-main .container</selector>
            <property>background-color</property>
        </control>
        <control> 
            <id>header_color</id>
            <title>Header color</title>
            <selector>#opal-masthead .header-main, .opal-topcart strong, .opal-topcart .mini-cart</selector> 
        </control> 
        <control>
            <id>menu_color</id>
            <title>Megamenu color</title>
            <selector>.navbar-mega .navbar-nav > li > a,.navbar-mega .navbar-nav > li > a .caret</selector> 
        </control>
        <control> 
            <id>menu_color_hover</id>
            <title>Megamenu Hover color</title>
            <group>                
                <selector>.navbar-mega .navbar-nav li.active>a, .navbar-mega .navbar-nav li.active>a .caret, .navbar-mega .navbar-nav > li > a:hover, .navbar-mega .navbar-nav > li > a:focus,.navbar-mega .navbar-nav > li > a:hover .caret, .navbar-mega .navbar-nav > li > a:focus .caret</selector> 
            </group>
            <group>
                <selector>.navbar-mega .navbar-nav > li > a:after</selector>
                <property>background-color</property>
            </group>
        </control>
    </section>

    <section title="Footer">
        <control>
            <id>footer_bg</id>
            <title>Footer BG</title>
            <selector>.opal-footer</selector>
            <property>background-color</property>
        </control>
        <control>
            <id>footer_color</id>
            <title>Footer Color</title>
            <selector>.opal-footer, .opal-footer a, .opal-footer a span</selector>
        </control>
        <control>
            <id>heading_color</id>
            <title>Heading Color</title>
            <selector>.opal-footer .widget .widget-title, .opal-footer .widget .widgettitle, .opal-footer h2, .opal-footer h3, .opal-footer h4</selector>
        </control>
        <control>
            <id>newsletter_bg</id>
            <title>Newsletter Background Color</title>
            <selector>.opal-footer .widget_mc4wp_form_widget .input-group .form-control</selector>
            <property>background-color</property>
        </control>
        <control>
            <id>copyright_bg</id>
            <title>Footer Copyright Background</title>
            <selector>.opal-copyright</selector>
            <property>background-color</property>
        </control>
        <control>
            <id>copyright_color</id>
            <title>Copyright Color</title>
            <selector>.opal-copyright</selector> 
        </control>
    </section>
</themecustomize>