Customify – A Theme Customizer Booster

Version Description

Added altered state for colors in the current color palette when any of the controls connected to the color has been modified
Added the colors from the current palette to all the color pickers in the Theme Options section
Fixed bug where default values were being forced in Customizer Preview at first load
Fixed bug preventing CSS output for color controls in the Style Manager section of the Customizer

Release Info

Developer	pixelgrade
Plugin	Customify – A Theme Customizer Booster
Version	1.8.0
Comparing to
See all releases

Code changes from version 1.7.4 to 1.8.0

Files changed (15) hide show

class-pixcustomify.php +53 -23
css/admin.css +31 -21
css/customizer.css +3123 -1741
customify.php +2 -2
features/customizer/controls/class-Pix_Customize_Preset_Control.php +1 -3
includes/class-customify-color-palettes.php +4 -0
includes/customify_theme_root.php +524 -1
js/customizer/color-palettes.js +214 -66
js/customizer/customify-palette-variations.js +0 -68
js/customizer/customify-palettes.js +0 -268
js/customizer/customify-scale.js +0 -55
js/customizer/customify-swap-values.js +0 -45
palettes.md +149 -9
readme.txt +7 -1
scss/customizer.scss +111 -13

class-pixcustomify.php CHANGED Viewed

	@@ -292,7 +292,7 @@ class PixCustomifyPlugin {
292
293	$this->localized['ajax_url'] = admin_url( 'admin-ajax.php' );
294	$this->localized['style_manager_user_feedback_nonce'] = wp_create_nonce( 'customify_style_manager_user_feedback' );
295	- $this->localized['style_manager_user_feedback_provided'] = ~~$this->~~get_option( 'style_manager_user_feedback_provided', false );
296	}
297
298	public function get_version() {
	@@ -1960,38 +1960,48 @@ class PixCustomifyPlugin {
1960	return $settings;
1961	}
1962
1963	- protected function get_value( $~~option~~, $alt_opt_name ) {
1964	global $wp_customize;
1965
1966	- $~~opt_name~~ = $this->opt_name;
1967	$values = $this->current_values;
1968
1969	- // In case someone asked for a DB value too early but it has given us the ~~opt_name~~ under which to search, let's do it
1970	- if ( empty( $~~opt_name~~ ) && ! empty( $alt_opt_name ) ) {
1971	- $~~opt_name~~ = $alt_opt_name;
1972	- $values = $this->get_current_values( $~~opt_name~~ );
1973	}
1974
1975	if ( ! empty( $wp_customize ) && method_exists( $wp_customize, 'get_setting' ) ) {


1976
1977	- ~~$option_key~~ = $~~opt_name~~ . '[' . ~~$option~~ ~~. ']';~~
1978	- ~~$setting =~~ ~~$wp_customize->get_setting( $option_key )~~;
1979	- ~~if ( ! empty( $setting ) ) {~~
1980	- $value = $setting->value();
1981
1982	- ~~return~~ ~~$value;~~









1983	}
1984	}
1985
1986	// shim
1987	- if ( strpos( $~~option~~, $~~opt_name~~ . '[' ) !== false ) {
1988	// get only the setting id
1989	- $~~option~~ = explode( '[', $~~option~~ );
1990	- $~~option~~ = rtrim( $~~option~~[1], ']' );
1991	}
1992
1993	- if ( isset( $values[ $~~option~~ ] ) ) {
1994	- return $values[ $~~option~~ ];
1995	}
1996
1997	return null;
	@@ -2002,27 +2012,47 @@ class PixCustomifyPlugin {
2002	* If there is a value and return it.
2003	* Otherwise try to get the default parameter or the default from config.
2004	*
2005	- * @param $~~option~~
2006	* @param mixed $default Optional.
2007	* @param string $alt_opt_name Optional. We can use this to bypass the fact that the DB values are loaded on after_setup_theme, if we know what to look for.
2008	*
2009	* @return bool\|null\|string
2010	*/
2011	- public function get_option( $~~option~~, $default = null, $alt_opt_name = null ) {
2012	// If the development constant CUSTOMIFY_DEV_FORCE_DEFAULTS has been defined we will not retrieve anything from the database
2013	// Always go with the default
2014	- if ( defined( 'CUSTOMIFY_DEV_FORCE_DEFAULTS' ) && true === CUSTOMIFY_DEV_FORCE_DEFAULTS && ! $this->skip_dev_mode_force_defaults( $~~option~~ ) ) {
2015	$return = null;
2016	} else {
2017	- ~~$return~~ = ~~$this->get_value(~~ ~~$option,~~ ~~$alt_opt_name );~~




















2018	}
2019
2020	if ( $return !== null ) {
2021	return $return;
2022	} elseif ( $default !== null ) {
2023	return $default;
2024	- } elseif ( isset( $this->options_list[ $~~option~~ ] ) && isset( $this->options_list[ $~~option~~ ]['default'] ) ) {
2025	- return $this->options_list[ $~~option~~ ]['default'];
2026	}
2027
2028	return null;


292
293	$this->localized['ajax_url'] = admin_url( 'admin-ajax.php' );
294	$this->localized['style_manager_user_feedback_nonce'] = wp_create_nonce( 'customify_style_manager_user_feedback' );
295	+ $this->localized['style_manager_user_feedback_provided'] = get_option( 'style_manager_user_feedback_provided', false );
296	}
297
298	public function get_version() {

1960	return $settings;
1961	}
1962
1963	+ protected function get_value( $option_id, $alt_opt_name ) {
1964	global $wp_customize;
1965
1966	+ $options_name = $this->opt_name;
1967	$values = $this->current_values;
1968
1969	+ // In case someone asked for a DB value too early but it has given us the options_name under which to search, let's do it
1970	+ if ( empty( $options_name ) && ! empty( $alt_opt_name ) ) {
1971	+ $options_name = $alt_opt_name;
1972	+ $values = $this->get_current_values( $options_name );
1973	}
1974
1975	if ( ! empty( $wp_customize ) && method_exists( $wp_customize, 'get_setting' ) ) {
1976	+ // Get the field config.
1977	+ $option_config = $this->get_option_customizer_config( $option_id );
1978
1979	+ if ( empty( $option_id ) \|\| ! isset( $option_config['type'] ) ) {
1980	+ return null;
1981	+ }

1982
1983	+ // If we have been explicitly given a setting ID we will use that
1984	+ if ( ! empty( $option_config['setting_id'] ) ) {
1985	+ $setting_id = $option_config['setting_id'];
1986	+ } else {
1987	+ $setting_id = $options_name . '[' . $option_id . ']';
1988	+ }
1989	+
1990	+ $setting = $wp_customize->get_setting( $setting_id );
1991	+ if ( ! empty( $setting ) ) {
1992	+ return $setting->value();
1993	}
1994	}
1995
1996	// shim
1997	+ if ( strpos( $option_id, $options_name . '[' ) !== false ) {
1998	// get only the setting id
1999	+ $option_id = explode( '[', $option_id );
2000	+ $option_id = rtrim( $option_id[1], ']' );
2001	}
2002
2003	+ if ( isset( $values[ $option_id ] ) ) {
2004	+ return $values[ $option_id ];
2005	}
2006
2007	return null;

2012	* If there is a value and return it.
2013	* Otherwise try to get the default parameter or the default from config.
2014	*
2015	+ * @param $option_id
2016	* @param mixed $default Optional.
2017	* @param string $alt_opt_name Optional. We can use this to bypass the fact that the DB values are loaded on after_setup_theme, if we know what to look for.
2018	*
2019	* @return bool\|null\|string
2020	*/
2021	+ public function get_option( $option_id, $default = null, $alt_opt_name = null ) {
2022	// If the development constant CUSTOMIFY_DEV_FORCE_DEFAULTS has been defined we will not retrieve anything from the database
2023	// Always go with the default
2024	+ if ( defined( 'CUSTOMIFY_DEV_FORCE_DEFAULTS' ) && true === CUSTOMIFY_DEV_FORCE_DEFAULTS && ! $this->skip_dev_mode_force_defaults( $option_id ) ) {
2025	$return = null;
2026	} else {
2027	+ // Get the field config.
2028	+ $option_config = $this->get_option_customizer_config( $option_id );
2029	+
2030	+ if ( empty( $option_id ) ) {
2031	+ $return = null;
2032	+ } elseif ( isset( $option_config['setting_type'] ) && $option_config['setting_type'] === 'option' ) {
2033	+ // We have a setting that is saved in the wp_options table, not in theme_mods.
2034	+ // We will fetch it directly.
2035	+
2036	+ // If we have been explicitly given a setting ID we will use that
2037	+ if ( ! empty( $option_config['setting_id'] ) ) {
2038	+ $setting_id = $option_config['setting_id'];
2039	+ } else {
2040	+ $setting_id = $this->opt_name . '[' . $option_id . ']';
2041	+ }
2042	+
2043	+ $return = get_option( $setting_id );
2044	+ } else {
2045	+ // Get the value stores in theme_mods.
2046	+ $return = $this->get_value( $option_id, $alt_opt_name );
2047	+ }
2048	}
2049
2050	if ( $return !== null ) {
2051	return $return;
2052	} elseif ( $default !== null ) {
2053	return $default;
2054	+ } elseif ( isset( $this->options_list[ $option_id ] ) && isset( $this->options_list[ $option_id ]['default'] ) ) {
2055	+ return $this->options_list[ $option_id ]['default'];
2056	}
2057
2058	return null;

css/admin.css CHANGED Viewed

@@ -1,28 +1,38 @@
-            -
            .extendable_options
-            -
            {overflow: hidden;
-            -
                height: 0;
-            -
            }fieldset.group
-            -
            {padding-left: 20px;
-            -
                border-left: 1px solid #333;
-            -
            }.postbox h3.hndle
-            -
            {font-size: 15px;
-            -
                padding: 7px;
-            -
            }.postbox .row
-            -
            {display: inline-block;
-            -
                width: 100%;padding: 5px 0;
-            -
            }.postbox .row .field
-            -
            {display: inline-block;
-            -
                width: 100%;padding: 5px 0;
-            -
            }.postbox .row .group
-            -
            {margin-left: 5px;padding-left: 15px;
-            -
                border: 1px solid rgba(203,203,203,.2);background-color: rgba(203,203,203,.2);
-            -
            }.postbox .uninstall_area
-            -
            {
-            -
                margin-top: 15px;
+            }


1	+ /* This stylesheet is used to style the admin option form of the plugin. */
2	+ .extendable_options {
3	+ height: 0;
4	+ overflow: hidden;
5	+ }
6
7	+ fieldset.group {
8	+ border-left: 1px solid #333;
9	+ padding-left: 20px;
10	+ }
11
12	+ .postbox h3.hndle {
13	+ padding: 7px;
14	+ font-size: 15px;
15	+ }
16
17	+ .postbox .row {
18	+ width: 100%;
19	+ display: inline-block;
20	+ padding: 5px 0;
21	+ }
22
23	+ .postbox .row .field {
24	+ width: 100%;
25	+ display: inline-block;
26	+ padding: 5px 0;
27	+ }
28
29	+ .postbox .row .group {
30	+ border: 1px solid rgba(203, 203, 203, 0.2);
31	+ background-color: rgba(203, 203, 203, 0.2);
32	+ padding-left: 15px;
33	+ margin-left: 5px;
34	+ }
35
36	+ .postbox .uninstall_area {
37	+ margin-top: 15px;


38	}

css/customizer.css CHANGED Viewed

@@ -1,237 +1,411 @@
-            -
            .wp-full-overlay-sidebar *,
-            -
            .wp-full-overlay-sidebar *:before,
-            -
            .wp-full-overlay-sidebar *:after
-            -
            {
-            -
                box-sizing: border-box;
-            -
            }.iris-picker,
-            -
            .iris-picker *
-            -
            {
-            -
                box-sizing: content-box;
-            -
            }.wp-full-overlay-sidebar-content .accordion-section-content
-            -
            {
-            -
                overflow: visible;
-            -
            }.control-section:not(.control-section-themes) .customize-control
-            -
            {width: 100%;min-height: initial;
-            -
                padding: 0;
-            -
            }#customize-header-actions #customize-save-button-wrapper
-            -
            {
-            -
                margin-top: 7px;
-            -
            }.wp-full-overlay-footer .devices button
-            -
            {
-            -
                float: left;border-radius: 0;
-            -
            }.customize-controls-close
-            -
            {
-            -
                width: 48px;height: 44px;color: #7da9c3;border-top: none;border-right-color: #e0e8ef;background: #fff;
-            -
            }.customize-controls-close:focus,
-            -
            .customize-controls-close:hover
-            -
            {
-            -
                background: #f5fcff;
-            -
            }.customize-controls-close:before
-            -
            {
-            -
                top: 0;
-            -
            }#customize-controls .customize-info
-            -
            {
-            -
                border-bottom-color: #e0e8ef;
-            -
            }.customize-panel-back,
-            -
            .customize-section-back
-            -
            {
-            -
                height: 74px;color: #7da9c3;border-right-color: #e0e8ef;
-            -
            }.customize-panel-back:hover,
-            -
            .customize-panel-back:focus,
-            -
            .customize-section-back:hover,
-            -
            .customize-section-back:focus
-            -
            {
-            -
                border-left-color: #f5fcff;background: #f5fcff;
-            -
            }#customize-theme-controls .theme *
-            -
            {
-            -
                box-sizing: content-box;
-            -
            }#customize-theme-controls .accordion-section-content
-            -
            {
-            -
                padding: 17px;
-            -
            }#customize-theme-controls .customize-section-title
-            -
            {
-            -
                margin-top: -17px;margin-right: -17px;
-            -
            }#customize-theme-controls .control-panel-content .control-section:nth-child(2),
-            -
            #customize-theme-controls .control-panel-content .control-section:nth-child(3)
-            -
            {
-            -
                border-top: none;
-            -
            }#customize-theme-controls #accordion-section-add_menu
-            -
            {
-            -
                border-bottom: none;
-            -
            }#customize-theme-controls #accordion-section-add_menu .add-menu-toggle
-            -
            {
-            -
                float: none;
-            -
            }#customize-theme-controls .customize-pane-child.open
-            -
            {
-            -
                height: 100%;
-            -
            }#customize-controls .description
-            -
            {
-            -
                font-size: 12px;font-weight: 300;font-style: normal;line-height: 1.6;text-indent: 0;color: #4d7b90;
-            -
            }.customize-control-description
-            -
            {
-            -
                margin-top: 6px;
-            -
            }.customize-control
-            -
            {
-            -
                margin-bottom: 24px;
-            -
            }#accordion-section-themes + .control-section
-            -
            {
-            -
                border-top: none;
-            -
            }#customize-controls .panel-meta.customize-info .accordion-section-title
-            -
            {height: 74px;
-            -
-            -
                border-top: none;
-            -
            }.button-controls:after
-            -
            {display: table;clear: both;
-            -
-            -
                content: ' ';
-            -
            }.wp-core-ui .button:not(.theme-details):not(.collapse-sidebar):not(.wp-color-result),
             .wp-core-ui .button-primary,
-            -
            .wp-core-ui .button-secondary
-            -
            {font-weight: 400;
-            -
                width: auto;padding-right: 15px;padding-left: 15px;color: #f5fcff;border: none;border-radius: 4px;background: #aed2e5;box-shadow: 0 2px 0 0 #8dbed7;text-shadow: none;
-            -
            }.wp-core-ui .button:not(.theme-details):not(.collapse-sidebar):not(.wp-color-result):hover,
             .wp-core-ui .button-primary:hover,
-            -
            .wp-core-ui .button-secondary:hover
-            -
            {
-            -
                color: white;background: #98c6dd;box-shadow: 0 2px 0 0 #74a7c2;text-shadow: none;
-            -
            }.wp-core-ui #customize-header-actions .button-primary
-            -
            {
-            -
                background: #73c5ee;box-shadow: 0 2px 0 0 #57abd5;
-            -
            }.wp-core-ui #customize-header-actions .button-primary:hover
-            -
            {
-            -
                background: #58b0dd;box-shadow: 0 2px 0 0 #3f8aaf;
-            -
            }.wp-core-ui #customize-header-actions .button-primary.has-next-sibling
-            -
            {
-            -
                border-right: 1px solid #57abd5;
-            -
            }.wp-core-ui #customize-header-actions .button-primary:disabled
-            -
            {opacity: .7;
-            -
                color: white !important;background: #aed2e5 !important;box-shadow: 0 2px 0 0 #8db5ca !important;
-            -
            }.wp-core-ui #customize-header-actions .button-primary:disabled.has-next-sibling
-            -
            {
-            -
                border-right: none;
-            -
            }.wp-core-ui .reset_section,
-            -
            .wp-core-ui .reset_panel
-            -
            {display: block;
-            -
-            -
                width: 100%;height: 4em;margin: 0 0 25px;
-            -
            }.wp-core-ui .reset_panel
-            -
            {
-            -
                margin-top: 10px;
-            -
            }.separator.label
-            -
            {font-size: 14px;font-weight: 600;line-height: 24px;
-            -
-            -
                display: block;
-            -
            }.customize-control-title,
-            -
            .separator.label
-            -
            {
-            -
                color: #416b7e;
-            -
            }.separator.section:before,
-            -
            .separator.sub-section:before
-            -
            {position: absolute;z-index: -1;top: 0;right: -18px;bottom: 0;left: -18px;
-            -
-            -
                content: '';
-            -
            }.separator.label
-            -
            {
-            -
                font-weight: 500;
-            -
            }.separator.large
-            -
            {font-size: 16px;
-            -
-            -
                margin-top: 12px;color: #39474d;
-            -
            }.separator.section
-            -
            {
-            -
                position: relative;margin-bottom: 0;padding: 14px 0;border: none;background: none;
-            -
            }.separator.section[id*='layout']
-            -
            {
-            -
                margin-top: 0;
-            -
            }.separator.section[id*='layout']:before
-            -
            {
-            -
                border: none;
-            -
            }.separator.section:before
-            -
            {
-            -
                border: 1px solid #e0e8ef;background-color: #fff;box-shadow: 0 1px 0 0 #dfe8ef;
-            -
            }.separator.sub-section
-            -
            {
-            -
                position: relative;padding: 12px 0;
-            -
            }.separator.sub-section:before
-            -
            {
-            -
                border-top: 1px solid #e0e8ef;border-bottom: 1px solid #e0e8ef;background-color: #f6fbff;
-            -
            }.separator.sub-section + span
-            -
            {font-style: normal;
-            -
-            -
                margin-top: 20px;
-            -
            }.section-navigation-wrapper
-            -
            {
-            -
                position: relative;height: 43px;margin: -15px -12px 0 -12px;margin-right: -17px;margin-left: -17px;
-            -
            }.section-navigation
-            -
            {
-            -
                display: -ms-flexbox                                ;display: flex;clear: both;margin-top: -1px;border-top: 1px solid #e0e8ef;
-            -
            }.section-navigation a
-            -
            {display: block;padding: 12px 0;transition: background-color .15s ease-in-out;text-align: center;text-decoration: none;color: #3b484e;border-right: 1px solid #e0e8ef;border-bottom: 1px solid #e0e8ef;background-color: #fff;
-            -
-            -
                -ms-flex: 1 1 auto;flex: 1 1 auto;
-            -
            }.section-navigation a:last-child
-            -
            {
-            -
                border-right: 0;
-            -
            }#customize-controls .customize-info.is-sticky.is-sticky,
-            -
            #customize-controls .customize-section-title.is-sticky.is-sticky
-            -
            {
-            -
                top: 40px;
-            -
            }#customize-controls .customize-info.is-in-view.is-in-view,
-            -
            #customize-controls .customize-section-title.is-in-view.is-in-view
-            -
            {
-            -
                box-shadow: none;
-            -
            }#customize-controls .has-nav .customize-info,
-            -
            #customize-controls .has-nav .customize-section-title
-            -
            {
-            -
                margin-right: -12px;
-            -
            }#customize-controls .customize-section-title.customize-section-title
-            -
            {
-            -
                border-bottom: 0;
-            -
            }.customize-section-description-container.section-meta.has-nav
-            -
            {
-            -
                margin-bottom: 0;
-            -
            }.font-options__wrapper
-            -
            {
-            -
                position: relative;
-            -
            }.font-options__wrapper:after
-            -
            {position: absolute;z-index: 0;top: 90%;right: 0;left: 0;display: block;height: 30px;
-            -
-            -
                content: '';
-            -
            }.font-options__head
-            -
            {
-            -
                display: -ms-flexbox                        ;display: flex;-ms-flex-pack: justify;justify-content: space-between;
-            -
            }.font-options__head.font-options__head
-            -
            {white-space: nowrap;text-overflow: ellipsis;
-            -
-            -
                -webkit-appearance: none;
-            -
            }.font-options__font-title
-            -
            {font-size: 12px;font-weight: 300;line-height: 20px;overflow: hidden;
-            -
-            -
                margin-right: 26px;margin-left: 10px;white-space: nowrap;text-overflow: ellipsis;color: #98c6dd;
-            -
            }.font-options__options-list
-            -
            {
-            -
                position: absolute;z-index: 2;top: calc(100% + 6px);right: -6px;left: -6px;display: block;display: none;padding: 10px;transition: opacity .15s linear;opacity: 0;border: 1px solid #dfe8ef;border-radius: 5px;background-color: #fff;
-            -
            }.font-options__options-list:last-child
-            -
            {
-            -
                margin-bottom: 0;
-            -
            }.font-options__options-list:before,
-            -
            .font-options__options-list:after
-            -
            {position: absolute;z-index: 10;top: -20px;right: 25px;width: 0;height: 0;
-            -
-            -
                content: '';border: solid transparent;
-            -
            }.font-options__options-list:before
-            -
            {z-index: 11;border-width: 10px;
-            -
                border-bottom-color: white;
-            -
            }.font-options__options-list:after
-            -
            {top: -24px;right: 23px;border-width: 12px;
-            -
                border-bottom-color: rgba(0,0,0,.075);
-            -
            }.customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap:after
-            -
            {position: absolute;right: 12px;bottom: 100%;width: 0;height: 0;border-collapse: separate;
-            -
-            -
                content: '';border-width: 0 9px 9px 9px;border-style: solid;border-color: transparent transparent #fff transparent;
-            -
            }.font-options__head,
-            -
            .wp-full-overlay-sidebar-content .customize-control input[type=text]:not(#_customize-input-wpcom_custom_css_content_width_control):not(.wp-color-picker),
             .wp-full-overlay-sidebar-content .customize-control input[type=checkbox],
             .wp-full-overlay-sidebar-content .customize-control input[type=password],
             .wp-full-overlay-sidebar-content .customize-control input[type=color],
@@ -249,14 +423,20 @@
             .wp-full-overlay-sidebar-content .customize-control input[type=search],
             .wp-full-overlay-sidebar-content .customize-control select,
             .wp-full-overlay-sidebar-content .customize-control textarea,
-            -
            .wp-full-overlay-sidebar-content .customize-control input[type='number'].range-value,
-            -
            ul.font-options__options-list .select2-container .select2-selection--single,
-            -
            #customize-theme-controls .select2-container .select2-selection--multiple
-            -
            {font-size: 14px;line-height: 1.5;
-            -
-            -
                width: 100%;height: 44px;padding: 10px 14px;color: #416b7e;border: 2px solid #b8daeb;border-radius: 4px;outline: 0;background: #fff;
-            -
            }.font-options__head:focus,
-            -
            .wp-full-overlay-sidebar-content .customize-control input[type=text]:focus:not(#_customize-input-wpcom_custom_css_content_width_control):not(.wp-color-picker),
             .wp-full-overlay-sidebar-content .customize-control input[type=checkbox]:focus,
             .wp-full-overlay-sidebar-content .customize-control input[type=password]:focus,
             .wp-full-overlay-sidebar-content .customize-control input[type=color]:focus,
@@ -274,1559 +454,2761 @@ ul.font-options__options-list .select2-container .select2-selection--single,
             .wp-full-overlay-sidebar-content .customize-control input[type=search]:focus,
             .wp-full-overlay-sidebar-content .customize-control select:focus,
             .wp-full-overlay-sidebar-content .customize-control textarea:focus,
-            -
            .wp-full-overlay-sidebar-content .customize-control input[type='number'].range-value:focus,
-            -
            ul.font-options__options-list .select2-container .select2-selection--single:focus,
-            -
            #customize-theme-controls .select2-container .select2-selection--multiple:focus
-            -
            {
-            -
                border-color: #73c5ee;box-shadow: none;
-            -
            }.font-options__head,
-            -
            .wp-full-overlay-sidebar-content .customize-control select,
-            -
            ul.font-options__options-list .select2-container .select2-selection--single,
-            -
            #customize-theme-controls .select2-container .select2-selection--multiple
-            -
            {font-weight: 600;
-            -
-            -
                width: 100%;background: white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE1cHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTUgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjU2LjAwMDAwMCwgLTM4Ni4wMDAwMDApIiBmaWxsPSIjOThDNkRFIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iVGl0bGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjAwMDAwMCwgMjE5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1TZWxlY3QtQ29weSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iU2VsZWN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMjcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTI1NC40ODEyLDE4IEwyNTYsMTkuNTE0IEwyNDguNSwyNyBMMjQxLDE5LjUxNCBMMjQyLjUxODgsMTggTDI0OC41LDIzLjk2NzIgTDI1NC40ODEyLDE4IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;background-position: right 16px top 16px;-webkit-appearance: button;-moz-appearance: none;
-            -
            }[multiple].font-options__head,
-            -
            .wp-full-overlay-sidebar-content .customize-control select[multiple],
-            -
            ul.font-options__options-list .select2-container [multiple].select2-selection--single,
-            -
            #customize-theme-controls .select2-container [multiple].select2-selection--multiple
-            -
            {
-            -
                background: white;
-            -
            }.wp-full-overlay-sidebar-content .customize-control input[type=text],
-            -
            .wp-full-overlay-sidebar-content .customize-control textarea
-            -
            {
-            -
                font-size: 13px;
-            -
            }.wp-full-overlay-sidebar-content .customize-control textarea
-            -
            {
-            -
                height: auto;
-            -
            }.wp-full-overlay-sidebar-content .customize-control input[type=checkbox],
-            -
            .wp-full-overlay-sidebar-content .customize-control input[type=radio]
-            -
            {
-            -
                width: 22px;height: 22px;
-            -
            }.wp-full-overlay-sidebar-content .customize-control input[type=checkbox]:checked,
-            -
            .wp-full-overlay-sidebar-content .customize-control input[type=radio]:checked
-            -
            {border-color: #5ab9e8;
-            -
                background: #73c5ee;
-            -
            }.wp-full-overlay-sidebar-content .customize-control input[type=checkbox]:checked:before,
-            -
            .wp-full-overlay-sidebar-content .customize-control input[type=radio]:checked:before
-            -
            {margin: -1px 0 0 -2px;
-            -
-            -
                color: white;
-            -
            }.wp-full-overlay-sidebar-content .customize-control .awesome_preset input[type=radio]:checked
-            -
            {
-            -
                background: transparent;
-            -
            }.wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control) label:not(:only-of-type),
-            -
            .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control) > .customize-inside-control-row:not(:only-of-type),
-            -
            .wp-full-overlay-sidebar-content .customize-control.customize-control-radio label:not(:only-of-type),
-            -
            .wp-full-overlay-sidebar-content .customize-control.customize-control-radio > .customize-inside-control-row:not(:only-of-type)
-            -
            {display: inline-block;width: calc(49% - 30px);
-            -
                margin-left: 30px;padding-top: 0;padding-bottom: 0;text-indent: -6px;
-            -
            }.wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control) label,
-            -
            .wp-full-overlay-sidebar-content .customize-control.customize-control-radio label
-            -
            {
-            -
                color: #416b7e;
-            -
            }[id*='divider'] + .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control),
-            -
            [id*='divider'] + .wp-full-overlay-sidebar-content .customize-control.customize-control-radio
-            -
            {
-            -
                margin-top: 0;
-            -
            }.wp-full-overlay-sidebar-content .customize-control input[type=radio]
-            -
            {
-            -
                border-radius: 50%;
-            -
            }.wp-full-overlay-sidebar-content .customize-control input[type=radio]:checked:before
-            -
            {
-            -
                content: none;
-            -
            }.customize-control-html + .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox
-            -
            {
-            -
                margin-top: -24px;
-            -
            }.wp-full-overlay-sidebar-content .customize-control.customize-control-radio label,
-            -
            .wp-full-overlay-sidebar-content .customize-control.customize-control-radio .customize-inside-control-row
-            -
            {
-            -
                margin-top: 12px;
-            -
            }.wp-full-overlay-sidebar-content .customize-control.customize-control-radio#customize-control-changeset_status .customize-inside-control-row
-            -
            {
-            -
                margin-top: 0;text-indent: 0;
-            -
            }.wp-full-overlay-sidebar-content .customize-control input[type='range']
-            -
            {
-            -
                width: 65%;
-            -
            }.wp-full-overlay-sidebar-content .customize-control input[type='range']
-            -
            {
-            -
                position: relative;overflow: hidden;width: calc(100% - 55px);height: 22px;outline: none;background: none;-webkit-appearance: none;
-            -
            }.wp-full-overlay-sidebar-content .customize-control input[type='range']:before
-            -
            {position: absolute;top: 8px;left: 0;width: 100%;height: 6px;
-            -
-            -
                content: ' ';border-radius: 10px;background: #dfe8ef;box-shadow: inset 0 1px 3px 0 rgba(0,0,0,.3);
-            -
            }.wp-full-overlay-sidebar-content .customize-control input[type='range']::-webkit-slider-thumb
-            -
            {position: relative;z-index: 3;width: 22px;height: 22px;border: 2px solid #b8daeb;border-radius: 4px;background: #27ae60;background: #fff;
-            -
-            -
                -webkit-appearance: none;
-            -
            }.wp-full-overlay-sidebar-content .customize-control input[type='range']::-webkit-slider-thumb:before
-            -
            {font-size: 1em;position: absolute;top: -5px;left: 5px;
-            -
-            -
                content: '..';letter-spacing: 1px;color: #b8daeb;
-            -
            }.wp-full-overlay-sidebar-content .customize-control input[type='range']::-webkit-slider-thumb:after
-            -
            {position: absolute;z-index: 1;top: 6px;right: 20px;width: calc(100% - 55px);height: 6px;
-            -
-            -
                content: ' ';background: #73c5ee;
-            -
            }.wp-full-overlay-sidebar-content .customize-control input[type='number'].range-value
-            -
            {font-size: 13px;line-height: 1;top: -5px;float: right;width: auto;
-            -
                min-width: 40px;max-width: 80px;height: 30px;margin-left: 10px;padding: 4px 0 5px 0;text-align: center;
-            -
            }.wp-full-overlay-sidebar-content .customize-control input[type=number]::-webkit-inner-spin-button,
-            -
            .wp-full-overlay-sidebar-content .customize-control input[type=number]::-webkit-outer-spin-button
-            -
            {margin: 0;
-            -
-            -
                -webkit-appearance: none;
-            -
            }.customize-control-color
-            -
            {
-            -
                display: block;
-            -
            }.customize-control-color .customize-control-title,
-            -
            .customize-control-color .separator.label
-            -
            {
-            -
                float: left;
-            -
            }.customize-control-color .wp-picker-container
-            -
            {
-            -
                position: relative;top: -3px;float: right;
-            -
            }.customize-control-color .wp-picker-container .wp-picker-holder
-            -
            {
-            -
                position: relative;
-            -
            }.customize-control-color .wp-picker-container .wp-color-result,
-            -
            .customize-control-color .wp-picker-container .wp-color-result.button
-            -
            {
-            -
                top: 0;width: 40px;height: 30px;margin: 0;padding: 0;border: 2px solid #b8daeb;border-radius: 4px;background: #2ecc71;box-shadow: none;
-            -
            }.customize-control-color .wp-picker-container .wp-color-result:after,
             .customize-control-color .wp-picker-container .wp-color-result .wp-color-result-text,
             .customize-control-color .wp-picker-container .wp-color-result.button:after,
-            -
            .customize-control-color .wp-picker-container .wp-color-result.button .wp-color-result-text
-            -
            {
-            -
                display: none;
-            -
            }.customize-control-color .wp-picker-container .iris-picker
-            -
            {
-            -
                position: absolute;z-index: 1000;top: 40px;right: 0;width: 275px !important;border: none;border-color: #dfdfde;border-top: none;border-radius: 0 0 3px 3px;background: white;
-            -
            }.customize-control-color .wp-picker-container .iris-picker,
-            -
            .customize-control-color .wp-picker-container .iris-picker *
-            -
            {
-            -
                box-sizing: content-box;
-            -
            }.customize-control-color .wp-picker-container .iris-picker .iris-square
-            -
            {
-            -
                width: 215px !important;height: 173px !important;margin-right: 0;
-            -
            }.customize-control-color .wp-picker-container .iris-picker .iris-strip
-            -
            {
-            -
                float: right;box-shadow: rgba(0,0,0,.4) 0 1px 1px inset;
-            -
            }.customize-control-color .wp-picker-container .iris-picker .iris-strip .ui-slider-handle
-            -
            {opacity: 1;
-            -
                border-color: #aaa !important;box-shadow: none;
-            -
            }.customize-control-color .wp-picker-container .iris-picker .iris-palette
-            -
            {
-            -
                width: 24px !important;height: 24px !important;border-radius: 50px;box-shadow: rgba(0,0,0,.4) 0 1px 1px inset;
-            -
            }.customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap
-            -
            {
-            -
                position: absolute;z-index: 1000;top: 35px;right: 0;width: 275px;padding: 9px 12px;border: none;border-radius: 3px 3px 0 0;background: white;
-            -
            }.customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap input.wp-color-picker
-            -
            {font-size: 13px;
-            -
-            -
                float: left;width: 100px;height: auto;margin: 0;padding: 6px 12px;text-align: left;
-            -
            }.customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap input.button
-            -
            {
-            -
                float: right;height: 30px;padding: 4px 12px;
-            -
            }.customize-control-font:last-child
-            -
            {
-            -
                margin-bottom: 150px;
-            -
            }#accordion-section-live_css_edit_section .customize-section-title
-            -
            {
-            -
                margin-top: -13px;border-bottom: 1px solid #ddd;
-            -
            }#accordion-section-live_css_edit_section #css_editor
-            -
            {
-            -
                top: 70px;overflow: visible;border-top: 10px solid white;
-            -
            }#accordion-section-live_css_edit_section #css_editor:before
-            -
            {position: absolute;z-index: 10000000;top: -10px;left: 0;display: block;width: 48px;height: 10px;
-            -
-            -
                content: '';background: #e8e8e8;
-            -
            }#accordion-section-live_css_edit_section .ace_scroller
-            -
            {
-            -
                padding-left: 10px;
-            -
            }.wp-full-overlay.editor_opened
-            -
            {
-            -
                margin-left: 500px;
-            -
            }.wp-full-overlay.editor_opened #customize-controls
-            -
            {
-            -
                width: 500px;
-            -
            }.wp-full-overlay.editor_opened.collapsed #customize-controls
-            -
            {
-            -
                width: 300px;
-            -
            }.customize-control-media .current,
             .customize-control-site_icon .current,
-            -
            li#customize-control-site_logo .current
-            -
            {min-height: 44px;
-            -
                margin-bottom: 10px;border: 2px solid #b8daeb;border-radius: 4px;background: #f5fcff;
-            -
            }.customize-control-media .current .container,
-            -
            .customize-control-media .current span,
             .customize-control-site_icon .current .container,
             .customize-control-site_icon .current span,
             li#customize-control-site_logo .current .container,
-            -
            li#customize-control-site_logo .current span
-            -
            {
-            -
                border: none;
-            -
            }.customize-control-media .inner,
-            -
            .customize-control-media .current span,
             .customize-control-site_icon .inner,
             .customize-control-site_icon .current span,
             li#customize-control-site_logo .inner,
-            -
            li#customize-control-site_logo .current span
-            -
            {
-            -
                font-size: 13px;color: #98c6dd;
-            -
            }.customize-control-media .inner,
             .customize-control-site_icon .inner,
-            -
            li#customize-control-site_logo .inner
-            -
            {
-            -
                line-height: 1.4;
-            -
            }.customize-control-media .thumbnail-image,
             .customize-control-site_icon .thumbnail-image,
-            -
            li#customize-control-site_logo .thumbnail-image
-            -
            {
-            -
                padding: 14px;text-align: center;
-            -
            }.customize-control-media .thumbnail-image img,
             .customize-control-site_icon .thumbnail-image img,
-            -
            li#customize-control-site_logo .thumbnail-image img
-            -
            {
-            -
                width: auto;
-            -
            }.customize-control-media .actions,
             .customize-control-site_icon .actions,
-            -
            li#customize-control-site_logo .actions
-            -
            {
-            -
                margin-bottom: 0;
-            -
            }.customize-control-typography select,
-            -
            .customize-control-typography select
-            -
            {
-            -
                margin-bottom: 10px;
-            -
            }.customize-control-typography .description,
-            -
            .customize-control-typography .description
-            -
            {
-            -
                margin-top: -3px;
-            -
            }.customize-control-typography ul li,
-            -
            .customize-control-typography ul li
-            -
            {
-            -
                width: 100%;margin: 0;
-            -
            }.default-preset-button
-            -
            {font-family: 'Open Sans',sans-serif;font-size: 13px;float: right;margin-right: 4px;padding: 1px 8px;border: 1px solid #cbcbcb;border-radius: 3px;
-            -
                background-color: #f5f6f6;
-            -
            }.customize-control-preset .description
-            -
            {font-style: normal;
-            -
-            -
                margin-right: 5px;
-            -
            }.customify_preset.radio_buttons .customify_radio_button
-            -
            {position: relative;display: inline-block;overflow: hidden;height: auto;margin: 3px;padding: 2px;
-            -
-            -
                border: none;
-            -
            }.customify_preset.radio_buttons .customify_radio_button input[type='radio']
-            -
            {position: absolute;z-index: 9999;width: 100%;height: 100%;
-            -
                opacity: 0;
-            -
            }.customify_preset.radio_buttons .customify_radio_button input[type='radio']:checked + label
-            -
            {
-            -
                background-color: #ebebeb;
-            -
            }.customify_preset.radio_buttons .customify_radio_button input[type='radio']:checked + label:before
-            -
            {
-            -
                content: '>';color: inherit;
-            -
            }.customify_preset.radio_buttons .customify_radio_button input[type='radio']:checked + label:after
-            -
            {
-            -
                content: '<';color: inherit;
-            -
            }.customify_preset.radio_buttons .customify_radio_button input[type='radio']:checked:before
-            -
            {
-            -
                opacity: 0;
-            -
            }.customify_preset.radio_buttons .customify_radio_button label
-            -
            {
-            -
                position: relative;z-index: 999;border-left: 4px solid;
-            -
            }.customify_preset .awesome_preset
-            -
            {position: relative;display: inline-block;
-            -
-            -
                width: 45%;margin-top: 5px;margin-bottom: 25px;transition: all .2s;text-align: center;color: white;
-            -
            }.customify_preset .awesome_preset:hover
-            -
            {
-            -
                opacity: .9;
-            -
            }.customify_preset .awesome_preset:before
-            -
            {position: absolute;z-index: 5;top: 1px;right: 1px;bottom: 1px;left: 1px;
-            -
-            -
                content: '';opacity: .5;border: 1px solid #fff;border-radius: 4px;background: transparent;
-            -
            }.customify_preset .awesome_preset .preset-wrap .preset-color
-            -
            {
-            -
                height: 128px;padding: 17px 0 27px;border-radius: 4px 4px 0 0;
-            -
            }.customify_preset .awesome_preset .preset-wrap .preset-color .first-font
-            -
            {font-size: 55px;line-height: 1;
-            -
-            -
                display: inline-block;width: 100%;
-            -
            }.customify_preset .awesome_preset .preset-wrap .preset-color .secondary-font
-            -
            {font-size: 20px;line-height: 1;
-            -
-            -
                display: inline-block;width: 100%;margin-top: 8px;
-            -
            }.customify_preset .awesome_preset .preset-wrap .preset-name
-            -
            {font-size: 11px;
-            -
-            -
                position: relative;padding: 1px;text-transform: UPPERCASE;border-radius: 0 0 4px 4px;
-            -
            }.customify_preset .awesome_preset .preset-wrap .preset-name:before
-            -
            {position: absolute;top: -10px;left: 40%;
-            -
-            -
                content: '';border: 10px solid;border-color: inherit;border-top: transparent;border-right-color: transparent;border-bottom-color: inherit;border-left-color: transparent;
-            -
            }.customify_preset .awesome_preset:nth-child(odd)
-            -
            {
-            -
                margin-right: 7%;
-            -
            }.customify_preset .awesome_preset input[type=radio]
-            -
            {position: absolute;z-index: 10;top: 0;left: 0;display: inline-block;width: 100%;
-            -
                height: 100%;margin: 0;color: #006505;border: 0;border-radius: 0;background-color: transparent;box-shadow: none;
-            -
            }.customify_preset .awesome_preset input[type=radio]:checked:before
-            -
            {
-            -
                position: absolute;z-index: 1;top: -13px;right: -14px;width: 25px;height: 25px;background: #fff;
-            -
            }.customify_preset .awesome_preset input[type=radio]:checked:after
-            -
            {position: absolute;z-index: 10;top: -5px;right: -5px;width: 26px;height: 26px;content: '';border-radius: 50%;background: #73c5ee url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzcHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTMgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgLTQwOC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1DaGVja2JveC1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNy4wMDAwMDAsIDI0OS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IkNoZWNrYm94IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMzAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuMDM4NDk1LDE2IEwxNy4xMTYxMzc1LDguOTIxNDg3NiBMMTUuMTk0NjQ5OCw3IEwxMC4wMzg0OTUsMTIuMTU1MDY3NCBMNi45MjE0ODc2LDkuMDM4OTI5OTcgTDUsMTAuOTYwNDE3NiBMMTAuMDM4NDk1LDE2IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;background-position: center center;
-            -
-            -
                -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';filter: alpha(opacity=0);
-            -
            }.customify_radio_image
-            -
            {
-            -
                display: inline-block;
-            -
            }.customify_radio_image label
-            -
            {position: relative;
-            -
-            -
                display: block;float: left;margin-right: 10px;
-            -
            }.customify_radio_image label input[type=radio]
-            -
            {
-            -
                position: absolute;top: 0;right: 0;bottom: 0;left: 0;visibility: hidden;width: 100%;height: 100%;
-            -
            }.customify_radio_image label input[type=radio] img
-            -
            {
-            -
                cursor: pointer;border: 2px solid transparent;
-            -
            }.customify_radio_image label input[type=radio]:checked + img
-            -
            {
-            -
                border: 3px solid #73c5ee;
-            -
            }.customify_ace_editor
-            -
            {
-            -
                display: block;min-height: 200px;border: 1px solid #ddd;
-            -
            }.customize-control-custom_background .hide
-            -
            {
-            -
                display: none;
-            -
            }.customize-control-custom_background .upload_button_div
-            -
            {
-            -
                margin: 10px 0;
-            -
            }.customize-control-custom_background .upload_button_div > *
-            -
            {
-            -
                margin-right: 10px;
-            -
            }.customize-control-custom_background .preview_screenshot
-            -
            {margin: 10px 0;
-            -
-            -
                text-align: center;
-            -
            }.customize-control-custom_background .preview_screenshot img
-            -
            {
-            -
                border: 2px solid #ccc;
-            -
            }#customify_import_demo_data_button
-            -
            {display: inline-block;
-            -
-            -
                width: 70%;height: auto;margin: 0 15% 10% 15%;padding: 10px;text-align: center;
-            -
            }.import_step_note
-            -
            {display: inline-block;width: 100%;
-            -
                margin: 5px;
-            -
            }.import_step_note:before
-            -
            {
-            -
                content: '\1F449';
-            -
            }.import_step_note.success:before
-            -
            {
-            -
                content: '\1F44D';
-            -
            }.import_step_note.failed:before
-            -
            {
-            -
                content: '\274C';
-            -
            }#customize-header-actions
-            -
            {border-color: #e0e8ef;
-            -
                background: #fff;
-            -
            }.wp-full-overlay-sidebar,
-            -
            .customize-themes-panel,
-            -
            #customize-sidebar-outer-content
-            -
            {border-right: 1px solid #e0e8ef;
-            -
                background: #eaf9fe;
-            -
            }.outer-section-open #customize-controls .wp-full-overlay-sidebar-content,
-            -
            .attachment-media-view,
-            -
            .media-widget-preview.media_audio,
-            -
            .media-widget-preview.media_image
-            -
            {
-            -
                background: #eaf9fe;
-            -
            }#customize-theme-controls #accordion-section-menu_locations
-            -
            {
-            -
                border-bottom: 1px solid #e0e8ef;
-            -
            }#customize-controls #accordion-section-themes > .accordion-section-title
-            -
            {
-            -
                font-weight: 600;border-bottom: 1px solid #e0e8ef;
-            -
            }#customize-controls #accordion-section-themes > .accordion-section-title:hover
-            -
            {
-            -
                background: #fff;
-            -
            }#customize-controls .panel-meta.customize-info
-            -
            {
-            -
                border-bottom-color: #e0e8ef;
-            -
            }#customize-theme-controls .control-section .accordion-section-title
-            -
            {
-            -
                font-weight: 400;border-top: 1px solid #e0e8ef;border-bottom: none;
-            -
            }#customize-theme-controls .control-section:last-of-type > .accordion-section-title
-            -
            {
-            -
                border-bottom: 1px solid #e0e8ef;
-            -
            }#customize-theme-controls .customize-section-title
-            -
            {
-            -
                border-top: 1px solid #e0e8ef;border-bottom: 1px solid #e0e8ef;
-            -
            }#customize-controls .control-section .accordion-section-title:focus,
-            -
            #customize-controls .control-section .accordion-section-title:hover,
-            -
            #customize-controls .control-section.open .accordion-section-title,
-            -
            #customize-controls .control-section:hover > .accordion-section-title
-            -
            {
-            -
                color: #056184;border-left-color: #f5fcff;background: #f5fcff;
-            -
            }.wp-customizer .menu-item-edit-active .menu-item-handle,
-            -
            .wp-customizer .section-open .menu-item-settings,
-            -
            .wp-customizer .menu-item-bar .menu-item-handle:hover
-            -
            {
-            -
                border-color: #e0e8ef;
-            -
            }.wp-customizer .section-open .menu-item-settings
-            -
            {
-            -
                background: #f5fcff;
-            -
            }.wp-customizer .control-section-nav_menu .menu-location-settings
-            -
            {
-            -
                border-top-color: #e0e8ef !important;
-            -
            }[data-balloon]
-            -
            {
-            -
                position: relative;
-            -
            }[data-balloon]::before
-            -
            {font-size: 12px;position: absolute;z-index: 10;padding: .5em 1em;content: attr(data-balloon);transition: all .18s ease-out;white-space: nowrap;pointer-events: none;
-            -
-            -
                opacity: 0;color: #fff;border-radius: 4px;background: rgba(17,17,17,.9);
-            -
            }[data-balloon]::after
-            -
            {position: absolute;z-index: 10;width: 18px;height: 6px;content: '';transition: all .18s ease-out;pointer-events: none;opacity: 0;
-            -
                background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(0)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');background-size: 100% auto;
-            -
            }[data-balloon]:hover::before,
-            -
            [data-balloon]:hover::after
-            -
            {pointer-events: auto;
-            -
                opacity: 1;
-            -
            }[data-balloon][data-balloon-pos='up']::before
-            -
            {
-            -
                bottom: 100%;left: 50%;margin-bottom: 11px;-webkit-transform: translate3d(-50%, 10px, 0);transform: translate3d(-50%, 10px, 0);-webkit-transform-origin: top;transform-origin: top;
-            -
            }[data-balloon][data-balloon-pos='up']::after
-            -
            {
-            -
                bottom: 100%;left: 50%;margin-bottom: 5px;-webkit-transform: translate3d(-50%, 10px, 0);transform: translate3d(-50%, 10px, 0);-webkit-transform-origin: top;transform-origin: top;
-            -
            }[data-balloon][data-balloon-pos='up']:hover::before
-            -
            {
-            -
                -webkit-transform: translate3d(-50%, 0, 0)                        ;transform: translate3d(-50%, 0, 0);
-            -
            }[data-balloon][data-balloon-pos='up']:hover::after
-            -
            {
-            -
                -webkit-transform: translate3d(-50%, 0, 0)                        ;transform: translate3d(-50%, 0, 0);
-            -
            }[data-balloon][data-balloon-pos='down']::before
-            -
            {top: 100%;
-            -
                left: 50%;margin-top: 11px;-webkit-transform: translate3d(-50%, -10px, 0);transform: translate3d(-50%, -10px, 0);
-            -
            }[data-balloon][data-balloon-pos='down']::after
-            -
            {top: 100%;left: 50%;width: 18px;height: 6px;margin-top: 5px;-webkit-transform: translate3d(-50%, -10px, 0);transform: translate3d(-50%, -10px, 0);
-            -
-            -
                background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(180 18 6)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');background-size: 100% auto;
-            -
            }[data-balloon][data-balloon-pos='down']:hover::before
-            -
            {
-            -
                -webkit-transform: translate3d(-50%, 0, 0)                        ;transform: translate3d(-50%, 0, 0);
-            -
            }[data-balloon][data-balloon-pos='down']:hover::after
-            -
            {
-            -
                -webkit-transform: translate3d(-50%, 0, 0)                        ;transform: translate3d(-50%, 0, 0);
-            -
            }[data-balloon][data-balloon-pos='left']::before
-            -
            {top: 50%;right: 100%;
-            -
-            -
                margin-right: 11px;-webkit-transform: translate3d(10px, -50%, 0);transform: translate3d(10px, -50%, 0);
-            -
            }[data-balloon][data-balloon-pos='left']::after
-            -
            {top: 50%;right: 100%;width: 6px;height: 18px;margin-right: 5px;-webkit-transform: translate3d(10px, -50%, 0);transform: translate3d(10px, -50%, 0);
-            -
-            -
                background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="36px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(-90 18 18)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');background-size: 100% auto;
-            -
            }[data-balloon][data-balloon-pos='left']:hover::before
-            -
            {
-            -
                -webkit-transform: translate3d(0, -50%, 0)                        ;transform: translate3d(0, -50%, 0);
-            -
            }[data-balloon][data-balloon-pos='left']:hover::after
-            -
            {
-            -
                -webkit-transform: translate3d(0, -50%, 0)                        ;transform: translate3d(0, -50%, 0);
-            -
            }[data-balloon][data-balloon-pos='right']::before
-            -
            {top: 50%;
-            -
                left: 100%;margin-left: 11px;-webkit-transform: translate3d(-10px, -50%, 0);transform: translate3d(-10px, -50%, 0);
-            -
            }[data-balloon][data-balloon-pos='right']::after
-            -
            {top: 50%;left: 100%;width: 6px;height: 18px;margin-left: 5px;-webkit-transform: translate3d(-10px, -50%, 0);transform: translate3d(-10px, -50%, 0);
-            -
-            -
                background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="36px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(90 6 6)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');background-size: 100% auto;
-            -
            }[data-balloon][data-balloon-pos='right']:hover::before
-            -
            {
-            -
                -webkit-transform: translate3d(0, -50%, 0)                        ;transform: translate3d(0, -50%, 0);
-            -
            }[data-balloon][data-balloon-pos='right']:hover::after
-            -
            {
-            -
                -webkit-transform: translate3d(0, -50%, 0)                        ;transform: translate3d(0, -50%, 0);
-            -
            }[data-balloon][data-balloon-length='small']::before
-            -
            {width: 80px;
-            -
                white-space: normal;
-            -
            }[data-balloon][data-balloon-length='medium']::before
-            -
            {width: 150px;
-            -
                white-space: normal;
-            -
            }[data-balloon][data-balloon-length='large']::before
-            -
            {width: 260px;
-            -
                white-space: normal;
-            -
            }[data-balloon][data-balloon-length='xlarge']::before
-            -
            {width: 380px;
                 white-space: normal;
-            -
            }@media screen and (max-width: 768px)
-            -
            {
-            -
                [data-balloon][data-balloon-length='xlarge']::before
-            -
                {width: 90vw;
-            -
                    white-space: normal;
-            -
                }
-            -
            }[data-balloon][data-balloon-length='fit']::before
-            -
            {width: 100%;
-            -
                white-space: normal;
-            -
            }body.modal-open
-            -
            {
-            -
                overflow: hidden;
-            -
            }body.modal-open #style-manager-user-feedback-modal .modal
-            -
            {visibility: visible;
-            -
                overflow-x: hidden;overflow-y: auto;-webkit-transform: translate(0, 0);transform: translate(0, 0);opacity: 1;
-            -
            }#style-manager-user-feedback-modal
-            -
            {
-            -
                height: 100%;
-            -
            }#style-manager-user-feedback-modal .modal
-            -
            {font-family: 'Galano Grotesque Alt', -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;font-size: 16px;font-weight: 400;line-height: 1.7;
-            -
-            -
                position: relative;z-index: 1050;top: 0;right: 0;bottom: 0;left: 0;display: -ms-flexbox;display: flex;visibility: hidden;overflow: hidden;height: 100%;transition: all .3s ease;-webkit-transform: translate(0, -10%);transform: translate(0, -10%);opacity: 0;outline: 0;-ms-flex-align: center;align-items: center;
-            -
            }#style-manager-user-feedback-modal .modal-dialog
-            -
            {
-            -
                position: relative;width: auto;margin: 10px;text-align: left;
-            -
            }#style-manager-user-feedback-modal .modal-content
-            -
            {
-            -
                position: relative;display: -ms-flexbox;display: flex;flex-direction: column;border: none;border-radius: 4px;outline: 0;background-color: #fff;background-clip: padding-box;box-shadow: 0 4px 4px 0 rgba(42,54,52,.1),0 8px 8px 0 rgba(42,54,52,.1),0 16px 16px 0 rgba(42,54,52,.1),0 16px 32px 0 rgba(42,54,52,.1),0 32px 64px 0 rgba(42,54,52,.1),0 64px 128px 0 rgba(42,54,52,.1);-ms-flex-direction: column;
-            -
            }#style-manager-user-feedback-modal .modal-content p
-            -
            {
-            -
                color: #000;
-            -
            }#style-manager-user-feedback-modal .modal-content p a
-            -
            {
-            -
                font-weight: 500;color: #9660c6;border-bottom: 1px solid #9660c6;
-            -
            }#style-manager-user-feedback-modal .modal-content > form
-            -
            {
-            -
                margin-bottom: 20px;
-            -
            }#style-manager-user-feedback-modal .modal-backdrop
-            -
            {
-            -
                position: fixed;z-index: 1040;top: 0;right: 0;bottom: 0;left: 0;visibility: hidden;transition: all .3s ease;opacity: 0;background-color: #000;
-            -
            }.modal-open #style-manager-user-feedback-modal .modal-backdrop
-            -
            {visibility: visible;
-            -
-            -
                opacity: .8;
-            -
            }#style-manager-user-feedback-modal .modal-header
-            -
            {
-            -
                display: -ms-flexbox                                                ;display: flex;padding: 30px 48px 10px 48px;-ms-flex-align: start;align-items: flex-start;-ms-flex-pack: justify;justify-content: space-between;
-            -
            }#style-manager-user-feedback-modal .modal-header .close.button
-            -
            {
-            -
                top: -10px;
-            -
            }#style-manager-user-feedback-modal .modal-header .close.icon
-            -
            {
-            -
                opacity: .5;
-            -
            }#style-manager-user-feedback-modal .modal-header .close:hover
-            -
            {
-            -
                opacity: 1;
-            -
            }#style-manager-user-feedback-modal .modal-title
-            -
            {line-height: 1.5;
-            -
-            -
                margin-bottom: 10px;
-            -
            }#style-manager-user-feedback-modal .modal-title.modal-title--small
-            -
            {
-            -
                font-weight: 500;
-            -
            }#style-manager-user-feedback-modal .modal-body
-            -
            {
-            -
                position: relative;padding: 30px 30px 0 30px;-ms-flex: 1 1 auto;flex: 1 1 auto;
-            -
            }#style-manager-user-feedback-modal .modal-body.full
-            -
            {
-            -
                padding: 0;
-            -
            }#style-manager-user-feedback-modal .modal-body.full .box
-            -
            {margin-top: 0;
-            -
                padding-top: 0;padding-bottom: 0;
-            -
            }#style-manager-user-feedback-modal .modal-body.full + .modal-footer.full .box
-            -
            {
-            -
                padding-top: 18px;
-            -
            }#style-manager-user-feedback-modal .modal-footer
-            -
            {
-            -
                padding: 30px;text-align: center;
-            -
            }#style-manager-user-feedback-modal .modal-footer .box .button:last-child
-            -
            {
-            -
                margin-bottom: 0;
-            -
            }#style-manager-user-feedback-modal .modal-footer.full
-            -
            {
-            -
                padding: 0;
-            -
            }#style-manager-user-feedback-modal .modal-scrollbar-measure
-            -
            {
-            -
                position: absolute;top: -9999px;overflow: scroll;width: 50px;height: 50px;
-            -
            }#style-manager-user-feedback-modal .modal-state
-            -
            {
-            -
                display: none;
-            -
            }#style-manager-user-feedback-modal .modal-state:checked + .modal
-            -
            {visibility: visible;
-            -
                opacity: 1;
-            -
            }#style-manager-user-feedback-modal .modal-state:checked + .modal .modal__inner
-            -
            {
-            -
                top: 0;
-            -
            }@media (min-width: 576px)
-            -
            {
-            -
                #style-manager-user-feedback-modal .modal-dialog
-            -
                {
-            -
                    max-width: 655px;margin: 30px auto;
-            -
                }#style-manager-user-feedback-modal .modal-sm
-            -
                {
-            -
                    max-width: 300px;
-            -
                }
-            -
            }@media (min-width: 576px)
-            -
            {
-            -
                #style-manager-user-feedback-modal .modal-lg
-            -
                {
-            -
                    max-width: 800px;
-            -
                }
-            -
            }#style-manager-user-feedback .modal-body .box
-            -
            {
-            -
                position: relative;display: -ms-flexbox;display: flex;flex-direction: column;margin: 20px 0;padding: 16px 52px;border-radius: 4px;-ms-flex-direction: column;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-ms-flex-align: center;align-items: center;
-            -
            }#style-manager-user-feedback .modal-body .box > *
-            -
            {
-            -
                width: 100%;
-            -
            }#style-manager-user-feedback .modal-body p
-            -
            {
-            -
                font-size: 16px;margin-bottom: 20px;
-            -
            }#style-manager-user-feedback .modal-body textarea
-            -
            {font-family: 'Galano Grotesque Alt', -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;font-size: 16px;line-height: 26px;
-            -
-            -
                width: 100%;margin: 0;padding: 11px 18px;color: #473850;border: 1px solid #ddd;border-radius: 4px;box-shadow: none;
-            -
            }#style-manager-user-feedback .modal-title
-            -
            {font-family: 'Galano Classic', -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;font-size: 28px;font-weight: 600;line-height: 1.4;
-            -
-            -
                margin-top: 0;margin-bottom: 34px;text-align: center;
-            -
            }#style-manager-user-feedback .button
-            -
            {font-family: 'Galano Classic', -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;font-size: 16px;font-weight: 600;line-height: 23px;position: relative;display: inline-block;width: 100%;height: auto;margin-top: 20px;padding: 15px 50px;cursor: pointer;transition-timing-function: cubic-bezier(0, 0, .58, 1);transition-duration: .2s;transition-property: -webkit-transform,background,background-color,color,box-shadow;transition-property:         transform,background,background-color,color,box-shadow;text-align: center;
-            -
                text-decoration: none;color: #fff;border-radius: 2px;border-radius: 4px;background-color: #9660c6;box-shadow: none;-webkit-font-smoothing: antialiased;
-            -
            }#style-manager-user-feedback .button:hover
-            -
            {-webkit-transform: scale(1.05) translateY(-3px)                                                                        ;transform: scale(1.05) translateY(-3px);color: #fff;
-            -
                background-color: #9660c6;box-shadow: 0 10px 20px -10px rgba(0,0,0,.7);
-            -
            }#style-manager-user-feedback .second-step
-            -
            {
-            -
                margin-top: 18px;
-            -
            }#style-manager-user-feedback .thanks-step,
-            -
            #style-manager-user-feedback .error-step
-            -
            {
-            -
                text-align: center;
-            -
            }#style-manager-user-feedback .thanks-step .modal-title,
-            -
            #style-manager-user-feedback .error-step .modal-title
-            -
            {
-            -
                margin-bottom: 0;
-            -
            }#style-manager-user-feedback .thanks-step p:last-child,
-            -
            #style-manager-user-feedback .error-step p:last-child
-            -
            {
-            -
                margin-bottom: 10px;
-            -
            }.scorecard
-            -
            {font-family: 'Galano Classic', -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;font-size: 18px;font-weight: 600;
-            -
-            -
                display: -ms-flexbox;display: flex;text-align: center;color: #9660c6;-ms-flex-align: baseline;align-items: baseline;-ms-flex-pack: space-evenly;justify-content: space-evenly;
-            -
            }.scorecard > label
-            -
            {
-            -
                font-size: 20px;
-            -
            }.scorecard > label span
-            -
            {line-height: 46px;
-            -
-            -
                display: block;width: 46px;transition: all .25s ease;border: 2px solid #9660c6;border-radius: 100%;background: #fff;
-            -
            }.scorecard > label input[type='radio']
-            -
            {
-            -
                display: none;
-            -
            }.scorecard > label span:hover,
-            -
            .scorecard > label input[type='radio']:checked ~ span
-            -
            {color: #fff;
-            -
                background: #9660c6;
-            -
            }.font-options__wrapper .font-options__options-list
-            -
            {
-            -
                border-color: #b8daeb;box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
-            -
            }.font-options__wrapper .font-options__option
-            -
            {
-            -
                margin-bottom: 12px;
-            -
            }.font-options__wrapper .font-options__option label
-            -
            {
-            -
                display: block;margin-bottom: 6px;
-            -
            }.font-options__wrapper [type=checkbox]:checked ~ .font-options__options-list
-            -
            {display: block;
-            -
                opacity: 1;
-            -
            }input.customify_font_tooltip
-            -
            {
-            -
                display: none;
-            -
            }ul.font-options__options-list .select2-container
-            -
            {
-            -
                width: 100% !important;
-            -
            }ul.font-options__options-list .select2-container .select2-selection--single
-            -
            {
-            -
                -webkit-appearance: initial;
-            -
            }ul.font-options__options-list .select2-container .select2-selection--single .select2-selection__arrow
-            -
            {
-            -
                display: none;
-            -
            }ul.font-options__options-list .select2-container--default .select2-selection--single .select2-selection__rendered
-            -
            {line-height: initial;
-            -
-            -
                color: inherit;
-            -
            }.select2-container.select2-container--open
-            -
            {
-            -
                z-index: 99999999;
-            -
            }#customize-theme-controls .select2-container
-            -
            {
-            -
                width: 100% !important;
-            -
            }#customize-theme-controls .select2-container .select2-selection--multiple
-            -
            {height: auto;padding: 4px 8px 4px;background: none;
-            -
-            -
                -webkit-appearance: initial;
-            -
            }#customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__arrow
-            -
            {
-            -
                display: none;
-            -
            }#customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered
-            -
            {display: -ms-flexbox;display: flex;
-            -
-            -
                padding: 0;
-            -
            }#customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered .select2-search--inline
-            -
            {
-            -
                -ms-flex: 1                ;flex: 1;
-            -
            }#customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered .select2-search--inline .select2-search__field[class]
-            -
            {
-            -
                min-width: 100%;margin-top: 3px !important;border-width: 0;
-            -
            }#customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice
-            -
            {margin-top: 0;margin-right: 6px;
-            -
                padding: 3px 7px;border-color: #e0e8ef;background-color: #f6fbff;
-            -
            }#customize-theme-controls .select2-container .select2-search--inline .select2-search__field
-            -
            {min-width: 9em;
-            -
                height: 29px;margin-top: 0;
-            -
            }.select2-container--default .select2-results__option[aria-selected=true][class]
-            -
            {pointer-events: none;opacity: .3;
-            -
                background: transparent;
-            -
            }.select2-container .select2-dropdown
-            -
            {
-            -
                border-color: #e0e8ef;
-            -
            }#customize-theme-controls .widget-content .accordion-container
-            -
            {margin-top: 20px;margin-right: -10px;margin-bottom: 10px;
-            -
                margin-left: -10px;
-            -
            }#customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-content
-            -
            {
-            -
                position: relative;left: 0;overflow: hidden;max-height: 0;padding-top: 0;padding-bottom: 0;transition: all .4s ease;color: #416b7e;
-            -
            }#customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-content p:first-child
-            -
            {
-            -
                margin-top: 0;
-            -
            }#customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-content p:last-child
-            -
            {
-            -
                margin-bottom: 0;
-            -
            }#customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-title
-            -
            {
-            -
                color: #39474d;
-            -
            }#customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-title:after
-            -
            {
-            -
                content: '\f142';-webkit-transform: rotate(180deg);transform: rotate(180deg);
-            -
            }#customize-theme-controls .widget-content .accordion-container .accordion-section.open
-            -
            {
-            -
                border-bottom: none;
-            -
            }#customize-theme-controls .widget-content .accordion-container .accordion-section.open .accordion-section-content
-            -
            {
-            -
                max-height: 100%;padding-top: 17px;padding-bottom: 17px;
-            -
            }#customize-theme-controls .widget-content .accordion-container .accordion-section.open .accordion-section-title
-            -
            {
-            -
                border-bottom: 1px solid;
-            -
            }#customize-theme-controls .widget-content .accordion-container .accordion-section.open .accordion-section-title:after
-            -
            {
-            -
                -webkit-transform: rotate(0deg)                        ;transform: rotate(0deg);
-            -
            }#customize-theme-controls .widget-content .accordion-container label.customize-control-title,
-            -
            #customize-theme-controls .widget-content .accordion-container label.separator.label
-            -
            {
-            -
                cursor: default;
-            -
            }.widget .widget-content > p input[type=checkbox],
-            -
            .widget .widget-content > p input[type=radio]
-            -
            {margin-top: 3px;
-            -
                margin-bottom: 3px;
-            -
            }.widget .widget-content small
-            -
            {display: block;
-            -
-            -
                margin-top: 5px;
-            -
            }#available-widgets [class*=pixelgrade] .widget .widget-title:before,
-            -
            #available-widgets [class*=featured-posts] .widget .widget-title:before,
-            -
            #available-widgets [class*=categories-image-grid] .widget .widget-title:before
-            -
            {
-            -
                content: '\f538';color: #9660c6;
-            -
            }#available-widgets [class*=pixelgrade-featured-posts-slideshow] .widget .widget-title:before
-            -
            {
-            -
                content: '\f233';
-            -
            }#available-widgets [class*=pixelgrade-featured-posts-carousel] .widget .widget-title:before
-            -
            {
-            -
                content: '\f169';
-            -
            }#available-widgets [class*=featured-posts-grid] .widget .widget-title:before
-            -
            {
-            -
                content: '\f180';
-            -
            }#available-widgets [class*=featured-posts-list] .widget .widget-title:before
-            -
            {
-            -
                content: '\f164';
-            -
            }#available-widgets [class*=categories-image-grid] .widget .widget-title:before
-            -
            {
-            -
                content: '\f163';
-            -
            }#available-widgets [class*=pixelgrade-promo-box] .widget .widget-title:before
-            -
            {
-            -
                content: '\f488';
-            -
            }.ui-tooltip
-            -
            {
-            -
                z-index: 999999;
-            -
            }.wp-customizer .widget-conditional .condition-control:after
-            -
            {display: table;clear: both;
-            -
-            -
                content: ' ';
-            -
            }.wp-customizer .widget-conditional .selection
-            -
            {margin-right: 0;margin-bottom: 10px;margin-left: 0;
-            -
                padding-right: 50px;padding-bottom: 19px;padding-left: 28px;border-bottom: 1px solid #cbcfd4;
-            -
            }.wp-customizer .widget-conditional .condition:last-child .selection
-            -
            {
-            -
                border: 0;
-            -
            }.wp-customizer .widget-conditional select
-            -
            {width: 170px;
-            -
                max-width: 100%;
-            -
            }.wp-customizer .widget-conditional .condition-top select
-            -
            {
-            -
                width: 130px;
-            -
            }.pix_customizer_setting .customize-inside-control-row
-            -
            {
-            -
                position: relative;overflow: hidden;width: 100% !important;height: 64px;margin-left: 0 !important;text-indent: 0 !important;border-radius: 5px;background-position: 50% 50%;background-size: cover;
-            -
            }.pix_customizer_setting .customize-inside-control-row:before
-            -
            {position: absolute;z-index: 10;top: 0;right: 0;bottom: 0;left: 0;
-            -
-            -
                content: '';pointer-events: none;box-shadow: inset 0 0 3px 0 rgba(0,0,0,.15),inset 0 1px 3px 0 rgba(0,0,0,.15);
-            -
            }.pix_customizer_setting .customize-inside-control-row:hover:before
-            -
            {
-            -
                box-shadow: inset 0 2px 3px 0 rgba(0,0,0,.15),inset 0 0 3px 0 rgba(0,0,0,.15);
-            -
            }.pix_customizer_setting .customize-inside-control-row:hover .palette__item
-            -
            {
-            -
                -webkit-transform: translateY(0%)                        ;transform: translateY(0%);
-            -
            }.pix_customizer_setting .customize-inside-control-row:hover label
-            -
            {
-            -
                left: 10px;
-            -
            }.pix_customizer_setting .customize-inside-control-row input
-            -
            {
-            -
                opacity: 0;
-            -
            }.pix_customizer_setting .customize-inside-control-row input:checked + label .preview__letter--checked
-            -
            {
-            -
                display: inline-block;vertical-align: middle;
-            -
            }.pix_customizer_setting .customize-inside-control-row input:checked + label .preview__letter
-            -
            {
-            -
                display: none;
-            -
            }.pix_customizer_setting .customize-inside-control-row label
-            -
            {
-            -
                position: absolute;z-index: 2;top: 0;left: 0;display: -ms-flexbox;display: flex;width: 100%;height: 100%;margin-top: 0 !important;padding: 0 10px;transition: all .3s ease;-ms-flex-align: center;align-items: center;
-            -
            }.pix_customizer_setting .customize-inside-control-row .palette
-            -
            {
-            -
                position: absolute;z-index: 1;top: 0;left: 0;display: -ms-flexbox;display: flex;width: 100%;height: 100%;transition: all .2s ease;
-            -
            }.pix_customizer_setting .customize-inside-control-row .palette__item
-            -
            {transition: all .3s ease;-webkit-transform: translateY(100%);transform: translateY(100%);
-            -
-            -
                -ms-flex: 1;flex: 1;
-            -
            }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(1)
-            -
            {
-            -
                transition-delay: 0s;
-            -
            }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(2)
-            -
            {
-            -
                transition-delay: .05s;
-            -
            }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(3)
-            -
            {
-            -
                transition-delay: .1s;
-            -
            }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(4)
-            -
            {
-            -
                transition-delay: .15s;
-            -
            }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(5)
-            -
            {
-            -
                transition-delay: .2s;
-            -
            }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(6)
-            -
            {
-            -
                transition-delay: .25s;
-            -
            }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(7)
-            -
            {
-            -
                transition-delay: .3s;
-            -
            }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(8)
-            -
            {
-            -
                transition-delay: .35s;
-            -
            }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(9)
-            -
            {
-            -
                transition-delay: .4s;
-            -
            }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(10)
-            -
            {
-            -
                transition-delay: .45s;
-            -
            }.pix_customizer_setting .customize-inside-control-row .preview__letter,
-            -
            .pix_customizer_setting .customize-inside-control-row .preview__letter--checked
-            -
            {font-style: normal;
-            -
-            -
                display: inline-block;min-width: 26px;min-height: 26px;margin-right: 5px;padding: 3px;text-align: center;vertical-align: baseline;color: white;border-radius: 2px;background-repeat: no-repeat;background-position: center center;background-size: 15px 15px;
-            -
            }.pix_customizer_setting .customize-inside-control-row .preview__letter--checked
-            -
            {
-            -
                display: none;
-            -
            }[id*='sm_current_color_palette_control'] .customize-inside-control-row .palette__item[class]
-            -
            {
-            -
                -webkit-transform: none                        ;transform: none;
-            -
            }[id*='sm_current_color_palette_control'] .variation-control
-            -
            {
-            -
                display: -ms-flexbox        ;display: flex;
-            -
            }[id='customize-control-sm_color_primary_control'],
-            -
            [id='customize-control-sm_dark_primary_control'],
-            -
            [id='customize-control-sm_light_primary_control'],
-            -
            [id='customize-control-sm_color_secondary_control'],
-            -
            [id='customize-control-sm_dark_secondary_control'],
-            -
            [id='customize-control-sm_light_secondary_control'],
-            -
            [id='customize-control-sm_color_tertiary_control'],
-            -
            [id='customize-control-sm_dark_tertiary_control'],
-            -
            [id='customize-control-sm_light_tertiary_control']
-            -
            {
-            -
                visibility: hidden;
-            -
            }[id='customize-control-sm_color_primary_control'] > span,
-            -
            [id='customize-control-sm_dark_primary_control'] > span,
-            -
            [id='customize-control-sm_light_primary_control'] > span,
-            -
            [id='customize-control-sm_color_secondary_control'] > span,
-            -
            [id='customize-control-sm_dark_secondary_control'] > span,
-            -
            [id='customize-control-sm_light_secondary_control'] > span,
-            -
            [id='customize-control-sm_color_tertiary_control'] > span,
-            -
            [id='customize-control-sm_dark_tertiary_control'] > span,
-            -
            [id='customize-control-sm_light_tertiary_control'] > span
-            -
            {
-            -
                display: none;
-            -
            }[id='customize-control-sm_color_primary_control'] .wp-picker-input-wrap,
-            -
            [id='customize-control-sm_color_primary_control'] .wp-picker-holder,
-            -
            [id='customize-control-sm_dark_primary_control'] .wp-picker-input-wrap,
-            -
            [id='customize-control-sm_dark_primary_control'] .wp-picker-holder,
-            -
            [id='customize-control-sm_light_primary_control'] .wp-picker-input-wrap,
-            -
            [id='customize-control-sm_light_primary_control'] .wp-picker-holder,
-            -
            [id='customize-control-sm_color_secondary_control'] .wp-picker-input-wrap,
-            -
            [id='customize-control-sm_color_secondary_control'] .wp-picker-holder,
-            -
            [id='customize-control-sm_dark_secondary_control'] .wp-picker-input-wrap,
-            -
            [id='customize-control-sm_dark_secondary_control'] .wp-picker-holder,
-            -
            [id='customize-control-sm_light_secondary_control'] .wp-picker-input-wrap,
-            -
            [id='customize-control-sm_light_secondary_control'] .wp-picker-holder,
-            -
            [id='customize-control-sm_color_tertiary_control'] .wp-picker-input-wrap,
-            -
            [id='customize-control-sm_color_tertiary_control'] .wp-picker-holder,
-            -
            [id='customize-control-sm_dark_tertiary_control'] .wp-picker-input-wrap,
-            -
            [id='customize-control-sm_dark_tertiary_control'] .wp-picker-holder,
-            -
            [id='customize-control-sm_light_tertiary_control'] .wp-picker-input-wrap,
-            -
            [id='customize-control-sm_light_tertiary_control'] .wp-picker-holder
-            -
            {
-            -
                visibility: visible;
-            -
            }[id='customize-control-sm_color_primary_control'] .wp-picker-container,
-            -
            [id='customize-control-sm_dark_primary_control'] .wp-picker-container,
-            -
            [id='customize-control-sm_light_primary_control'] .wp-picker-container,
-            -
            [id='customize-control-sm_color_secondary_control'] .wp-picker-container,
-            -
            [id='customize-control-sm_dark_secondary_control'] .wp-picker-container,
-            -
            [id='customize-control-sm_light_secondary_control'] .wp-picker-container,
-            -
            [id='customize-control-sm_color_tertiary_control'] .wp-picker-container,
-            -
            [id='customize-control-sm_dark_tertiary_control'] .wp-picker-container,
-            -
            [id='customize-control-sm_light_tertiary_control'] .wp-picker-container
-            -
            {float: left;
-            -
-            -
                width: 100%;
-            -
            }[id='customize-control-sm_color_primary_control'] .wp-picker-container button:before,
-            -
            [id='customize-control-sm_dark_primary_control'] .wp-picker-container button:before,
-            -
            [id='customize-control-sm_light_primary_control'] .wp-picker-container button:before,
-            -
            [id='customize-control-sm_color_secondary_control'] .wp-picker-container button:before,
-            -
            [id='customize-control-sm_dark_secondary_control'] .wp-picker-container button:before,
-            -
            [id='customize-control-sm_light_secondary_control'] .wp-picker-container button:before,
-            -
            [id='customize-control-sm_color_tertiary_control'] .wp-picker-container button:before,
-            -
            [id='customize-control-sm_dark_tertiary_control'] .wp-picker-container button:before,
-            -
            [id='customize-control-sm_light_tertiary_control'] .wp-picker-container button:before
-            -
            {position: relative;display: block;visibility: visible;width: 90px;height: 90px;
-            -
-            -
                content: '';border: 3px solid #ddd;border-radius: 50%;background-color: inherit;
-            -
            }#customize-control-sm_color_palette_control ~ [id*='sm_color_secondary'] .wp-picker-container button:before
-            -
            {
-            -
                top: -54px;right: -70px;
-            -
            }#customize-control-sm_color_palette_control ~ [id*='sm_color_tertiary'] .wp-picker-container button:before
-            -
            {
-            -
                top: -108px;right: -140px;
-            -
            }#customize-control-sm_color_palette_control ~ [id*='sm_dark_primary'] .wp-picker-container button:before
-            -
            {
-            -
                top: -54px;
-            -
            }#customize-control-sm_color_palette_control ~ [id*='sm_dark_secondary'] .wp-picker-container button:before
-            -
            {
-            -
                top: -108px;right: -70px;
-            -
            }#customize-control-sm_color_palette_control ~ [id*='sm_dark_tertiary'] .wp-picker-container button:before
-            -
            {
-            -
                top: -162px;right: -140px;
-            -
            }#customize-control-sm_color_palette_control ~ [id*='sm_light_primary'] .wp-picker-container button:before
-            -
            {
-            -
                top: -108px;
-            -
            }#customize-control-sm_color_palette_control ~ [id*='sm_light_secondary'] .wp-picker-container button:before
-            -
            {
-            -
                top: -162px;right: -70px;
-            -
            }#customize-control-sm_color_palette_control ~ [id*='sm_light_tertiary'] .wp-picker-container button:before
-            -
            {
-            -
                top: -216px;right: -140px;
-            -
            }.c-color-palette
-            -
            {
-            -
                position: relative;
-            -
            }.c-color-palette .c-color-palette__label
-            -
            {
-            -
                -ms-flex-positive: 1;flex-grow: 1;
-            -
            }.c-color-palette:after
-            -
            {
-            -
                height: 64px;border-radius: 5px;
-            -
            }.c-color-palette:after
-            -
            {position: absolute;top: 0;right: 0;left: 0;display: block;
-            -
-            -
                content: '';pointer-events: none;box-shadow: inset 0 0 3px 0 rgba(0,0,0,.15),inset 0 1px 3px 0 rgba(0,0,0,.15);
-            -
            }.label__inner
-            -
            {z-index: 2;padding: 7px 12px 7px 7px;
-            -
-            -
                color: #000;border-radius: 3px;background: #f5f6f1;box-shadow: 0 2px 5px rgba(0,0,0,.15);
-            -
            }.c-color-palette__label
-            -
            {
-            -
                display: -ms-flexbox                                                        ;display: flex;height: 40px;padding: 12px;color: black;background: white;-ms-flex-align: center;align-items: center;
-            -
            }.colors
-            -
            {
-            -
                position: relative;display: -ms-flexbox;display: flex;width: 100%;-ms-flex-align: stretch;align-items: stretch;
-            -
            }.color
-            -
            {
-            -
                display: -ms-flexbox                                                ;display: flex;overflow: hidden;flex-direction: column;-ms-flex-direction: column;-ms-flex-positive: 1;flex-grow: 1;
-            -
            }.fill
-            -
            {
-            -
                position: relative;height: 64px;
-            -
            }.c-color-palette__overlay
-            -
            {
-            -
                position: absolute;top: 0;right: 0;left: 0;display: -ms-flexbox;display: flex;height: 64px;-ms-flex-align: center;align-items: center;
-            -
            }.fill:before
-            -
            {
-            -
                position: absolute;top: 0;right: 0;bottom: 0;left: 0;
-            -
            }.fill:before
-            -
            {
-            -
                content: '';background: currentColor;
-            -
            }.picker
-            -
            {
-            -
                position: relative;top: 0;left: 50%;width: 80%;max-width: 3em;margin-top: 1em;-webkit-transform: translateX(-50%);transform: translateX(-50%);border-radius: 50%;
-            -
            }.colors.next .picker > i
-            -
            {position: absolute;z-index: 20;top: 0;right: 0;bottom: 0;left: 0;
-            -
-            -
                display: block;pointer-events: none;border-radius: 50%;box-shadow: inset 0 0 3px 0 rgba(0,0,0,.15),inset 0 1px 3px 0 rgba(0,0,0,.15);
-            -
            }.picker:before,
-            -
            .picker:after
-            -
            {display: block;
-            -
-            -
                content: '';border-radius: 50%;background: currentColor;
-            -
            }.picker:before
-            -
            {
-            -
                padding-top: 100%;
-            -
            }.picker:after
-            -
            {
-            -
                position: absolute;top: 0;left: 0;width: 100%;height: 100%;
-            -
            }.fill
-            -
            {
-            -
                overflow: hidden;
-            -
            }.color:first-child .fill
-            -
            {
-            -
                border-top-left-radius: 5px;border-bottom-left-radius: 5px;
-            -
            }.color:last-child .fill
-            -
            {
-            -
                border-top-right-radius: 5px;border-bottom-right-radius: 5px;
-            -
            }.colors.next
-            -
            {
-            -
                position: absolute;top: 0;left: 0;
-            -
            }.colors.next .fill:before
-            -
            {
-            -
                -webkit-transform: translateY(-100%)                        ;transform: translateY(-100%);
-            -
            }.colors.next .picker:before
-            -
            {
-            -
                -webkit-transform: translateY(-100%)                                                ;transform: translateY(-100%);opacity: 0;
-            -
            }.colors.next .picker:after
-            -
            {
-            -
                opacity: 0;
-            -
            }.c-color-palette.animate .next .fill:before
-            -
            {
-            -
                -webkit-animation: fill 1s cubic-bezier(.215, .61, .355, 1) forwards                        ;animation: fill 1s cubic-bezier(.215, .61, .355, 1) forwards;
-            -
            }.c-color-palette.animate .next .picker
-            -
            {
-            -
                -webkit-animation: picker-filter 1s cubic-bezier(.215, .61, .355, 1) forwards                        ;animation: picker-filter 1s cubic-bezier(.215, .61, .355, 1) forwards;
-            -
            }.c-color-palette.animate .next .picker:before
-            -
            {
-            -
                -webkit-animation: fill-picker-before 1s cubic-bezier(.215, .61, .355, 1) forwards                        ;animation: fill-picker-before 1s cubic-bezier(.215, .61, .355, 1) forwards;
-            -
            }.c-color-palette.animate .next .picker:after
-            -
            {
-            -
                -webkit-animation: fill-picker-after 1s cubic-bezier(.215, .61, .355, 1) forwards                        ;animation: fill-picker-after 1s cubic-bezier(.215, .61, .355, 1) forwards;
-            -
            }.c-color-palette.animate .current .fill,
-            -
            .c-color-palette.animate .current .picker
-            -
            {
-            -
                -webkit-animation: fade-out 1s forwards                        ;animation: fade-out 1s forwards;
-            -
            }.c-color-palette.animate .color:nth-child(1) .fill,
             .c-color-palette.animate .color:nth-child(1) .fill:before,
             .c-color-palette.animate .color:nth-child(1) .picker,
             .c-color-palette.animate .color:nth-child(1) .picker:after,
-            -
            .c-color-palette.animate .color:nth-child(1) .picker:before
-            -
            {
-            -
                -webkit-animation-delay: .3s                        ;animation-delay: .3s;
-            -
            }.c-color-palette.animate .color:nth-child(2) .fill,
             .c-color-palette.animate .color:nth-child(2) .fill:before,
             .c-color-palette.animate .color:nth-child(2) .picker,
             .c-color-palette.animate .color:nth-child(2) .picker:after,
-            -
            .c-color-palette.animate .color:nth-child(2) .picker:before
-            -
            {
-            -
                -webkit-animation-delay: .1s                        ;animation-delay: .1s;
-            -
            }.c-color-palette.animate .color:nth-child(3) .fill,
             .c-color-palette.animate .color:nth-child(3) .fill:before,
             .c-color-palette.animate .color:nth-child(3) .picker,
             .c-color-palette.animate .color:nth-child(3) .picker:after,
-            -
            .c-color-palette.animate .color:nth-child(3) .picker:before
-            -
            {
-            -
                -webkit-animation-delay: .2s                        ;animation-delay: .2s;
-            -
            }.c-color-palette.animate .color:nth-child(4) .fill,
             .c-color-palette.animate .color:nth-child(4) .fill:before,
             .c-color-palette.animate .color:nth-child(4) .picker,
             .c-color-palette.animate .color:nth-child(4) .picker:after,
-            -
            .c-color-palette.animate .color:nth-child(4) .picker:before
-            -
            {
-            -
                -webkit-animation-delay: .45s                        ;animation-delay: .45s;
-            -
            }.c-color-palette.animate .color:nth-child(5) .fill,
             .c-color-palette.animate .color:nth-child(5) .fill:before,
             .c-color-palette.animate .color:nth-child(5) .picker,
             .c-color-palette.animate .color:nth-child(5) .picker:after,
-            -
            .c-color-palette.animate .color:nth-child(5) .picker:before
-            -
            {
-            -
                -webkit-animation-delay: .15s                        ;animation-delay: .15s;
-            -
            }.c-color-palette.animate .color:nth-child(6) .fill,
             .c-color-palette.animate .color:nth-child(6) .fill:before,
             .c-color-palette.animate .color:nth-child(6) .picker,
             .c-color-palette.animate .color:nth-child(6) .picker:after,
-            -
            .c-color-palette.animate .color:nth-child(6) .picker:before
-            -
            {
-            -
                -webkit-animation-delay: .05s                        ;animation-delay: .05s;
-            -
            }.c-color-palette.animate .color:nth-child(7) .fill,
             .c-color-palette.animate .color:nth-child(7) .fill:before,
             .c-color-palette.animate .color:nth-child(7) .picker,
             .c-color-palette.animate .color:nth-child(7) .picker:after,
-            -
            .c-color-palette.animate .color:nth-child(7) .picker:before
-            -
            {
-            -
                -webkit-animation-delay: .25s                        ;animation-delay: .25s;
-            -
            }.c-color-palette.animate .color:nth-child(8) .fill,
             .c-color-palette.animate .color:nth-child(8) .fill:before,
             .c-color-palette.animate .color:nth-child(8) .picker,
             .c-color-palette.animate .color:nth-child(8) .picker:after,
-            -
            .c-color-palette.animate .color:nth-child(8) .picker:before
-            -
            {
-            -
                -webkit-animation-delay: .4s                        ;animation-delay: .4s;
-            -
            }.c-color-palette.animate .color:nth-child(9) .fill,
             .c-color-palette.animate .color:nth-child(9) .fill:before,
             .c-color-palette.animate .color:nth-child(9) .picker,
             .c-color-palette.animate .color:nth-child(9) .picker:after,
-            -
            .c-color-palette.animate .color:nth-child(9) .picker:before
-            -
            {
-            -
                -webkit-animation-delay: .35s                        ;animation-delay: .35s;
-            -
            }@-webkit-keyframes fill
-            -
            {
-            -
                30%
-            -
                {
-            -
                    -webkit-transform: translateY(0)                                ;transform: translateY(0);
-            -
                }100%
-            -
                {
-            -
                    -webkit-transform: translateY(0)                                ;transform: translateY(0);
-            -
                }
-            -
            }@keyframes fill
-            -
            {
-            -
                30%
-            -
                {
-            -
                    -webkit-transform: translateY(0)                                ;transform: translateY(0);
-            -
                }100%
-            -
                {
-            -
                    -webkit-transform: translateY(0)                                ;transform: translateY(0);
-            -
                }
-            -
            }@-webkit-keyframes picker-filter
-            -
            {
-            -
                0%
-            -
                {
-            -
                    -webkit-filter: none                                ;filter: none;
-            -
                }1%
-            -
                {
-            -
                    -webkit-filter: url('#goo')                                ;filter: url('#goo');
-            -
                }99%
-            -
                {
-            -
                    -webkit-filter: url('#goo')                                ;filter: url('#goo');
-            -
                }100%
-            -
                {
-            -
                    -webkit-filter: none                                ;filter: none;
-            -
                }
-            -
            }@keyframes picker-filter
-            -
            {
-            -
                0%
-            -
                {
-            -
                    -webkit-filter: none                                ;filter: none;
-            -
                }1%
-            -
                {
-            -
                    -webkit-filter: url('#goo')                                ;filter: url('#goo');
-            -
                }99%
-            -
                {
-            -
                    -webkit-filter: url('#goo')                                ;filter: url('#goo');
-            -
                }100%
-            -
                {
-            -
                    -webkit-filter: none                                ;filter: none;
-            -
                }
-            -
            }@-webkit-keyframes fill-picker-before
-            -
            {
-            -
                24%
-            -
                {-webkit-transform: translateY(-130%)                                        ;transform: translateY(-130%);
-            -
-            -
                    opacity: 0;
-            -
                }25%
-            -
                {-webkit-transform: translateY(-130%)                                        ;transform: translateY(-130%);
-            -
-            -
                    opacity: 1;
-            -
                }32%
-            -
                {-webkit-transform: translateY(-130%)                                        ;transform: translateY(-130%);
-            -
-            -
                    opacity: 1;
-            -
                }52%
-            -
                {-webkit-transform: translateY(-130%)                                        ;transform: translateY(-130%);
-            -
-            -
                    opacity: 1;
-            -
                }99%
-            -
                {-webkit-transform: translateY(-160%)                                        ;transform: translateY(-160%);
-            -
-            -
                    opacity: 1;
-            -
                }100%
-            -
                {-webkit-transform: translateY(-160%)                                        ;transform: translateY(-160%);
-            -
-            -
                    opacity: 0;
-            -
                }
-            -
            }@keyframes fill-picker-before
-            -
            {
-            -
                24%
-            -
                {-webkit-transform: translateY(-130%)                                        ;transform: translateY(-130%);
-            -
-            -
                    opacity: 0;
-            -
                }25%
-            -
                {-webkit-transform: translateY(-130%)                                        ;transform: translateY(-130%);
-            -
-            -
                    opacity: 1;
-            -
                }32%
-            -
                {-webkit-transform: translateY(-130%)                                        ;transform: translateY(-130%);
-            -
-            -
                    opacity: 1;
-            -
                }52%
-            -
                {-webkit-transform: translateY(-130%)                                        ;transform: translateY(-130%);
-            -
-            -
                    opacity: 1;
-            -
                }99%
-            -
                {-webkit-transform: translateY(-160%)                                        ;transform: translateY(-160%);
-            -
-            -
                    opacity: 1;
-            -
                }100%
-            -
                {-webkit-transform: translateY(-160%)                                        ;transform: translateY(-160%);
-            -
-            -
                    opacity: 0;
-            -
                }
-            -
            }@-webkit-keyframes fill-picker-after
-            -
            {
-            -
                24%
-            -
                {-webkit-transform: translateY(-160%)                                        ;transform: translateY(-160%);
-            -
-            -
                    opacity: 0;
-            -
                }25%
-            -
                {-webkit-transform: translateY(-160%)                                        ;transform: translateY(-160%);
-            -
-            -
                    opacity: 1;
-            -
                }32%
-            -
                {-webkit-transform: translateY(-120%)                                        ;transform: translateY(-120%);
-            -
-            -
                    opacity: 1;
-            -
                }100%
-            -
                {-webkit-transform: translateY(0)                                        ;transform: translateY(0);
-            -
-            -
                    opacity: 1;
-            -
                }
-            -
            }@keyframes fill-picker-after
-            -
            {
-            -
                24%
-            -
                {-webkit-transform: translateY(-160%)                                        ;transform: translateY(-160%);
-            -
-            -
                    opacity: 0;
-            -
                }25%
-            -
                {-webkit-transform: translateY(-160%)                                        ;transform: translateY(-160%);
-            -
-            -
                    opacity: 1;
-            -
                }32%
-            -
                {-webkit-transform: translateY(-120%)                                        ;transform: translateY(-120%);
-            -
-            -
                    opacity: 1;
-            -
                }100%
-            -
                {-webkit-transform: translateY(0)                                        ;transform: translateY(0);
-            -
-            -
                    opacity: 1;
-            -
                }
-            -
            }@-webkit-keyframes fade-out
-            -
            {
-            -
                90%
-            -
                {
-            -
                    opacity: 1;
-            -
                }100%
-            -
                {
-            -
                    opacity: 0;
-            -
                }
-            -
            }@keyframes fade-out
-            -
            {
-            -
                90%
-            -
                {
-            -
                    opacity: 1;
-            -
                }100%
-            -
                {
-            -
                    opacity: 0;
-            -
                }
-            -
            }.label
-            -
            {
-            -
                margin-right: auto;
-            -
            }.c-color-palette__blur
-            -
            {
-            -
                display: none;
-            -
            }#customize-theme-controls [id*='sm_current_color_palette_control']
-            -
            {
-            -
                display: block;width: auto;margin: -12px -12px 19px;
-            -
            }#customize-theme-controls [id*='sm_current_color_palette_control'] .color-palette-container
-            -
            {
-            -
                padding: 19px;background: white;
-            -
            }.c-color-palette__name
-            -
            {
-            -
                margin-right: auto;
-            -
            }.c-color-palette__control
-            -
            {display: -ms-flexbox;display: flex;
-            -
-            -
                width: 2em;height: 2em;margin-left: .25em;border-radius: 50%;-ms-flex-pack: center;justify-content: center;-ms-flex-align: center;align-items: center;
-            -
            }.c-color-palette__control,
-            -
            .c-color-palette__control span
-            -
            {
-            -
                transition: color .3s ease-in-out;
-            -
            }.c-color-palette__control span
-            -
            {-webkit-transform: scale(.8)                                        ;transform: scale(.8);
-            -
-            -
                color: rgba(0,0,0,.25);
-            -
            }.c-color-palette__control.active
-            -
            {
-            -
                background: currentColor;
-            -
            }.c-color-palette__control.active span
-            -
            {
-            -
                color: white;
-            -
            }#sub-accordion-section-sm_color_palettes_section
-            -
            {
-            -
                display: -ms-flexbox !important                                        ;display: flex !important;overflow: hidden;flex-direction: column;padding: 12px 0 0 !important;-ms-flex-direction: column;
-            -
            }#sub-accordion-section-sm_color_palettes_section > *
-            -
            {
-            -
                display: block !important;padding: 0 12px;-ms-flex-positive: 0;flex-grow: 0;
-            -
            }#sub-accordion-section-sm_color_palettes_section #customize-control-sm_color_palette_control
-            -
            {overflow-y: scroll;margin-top: -19px;margin-bottom: 0;padding-top: 19px;
-            -
-            -
                -ms-flex-negative: 0;flex-shrink: 0;-ms-flex-positive: 1;flex-grow: 1;
-            -
            }#sub-accordion-section-sm_color_palettes_section:not(.advanced) #customize-control-sm_color_palette_control ~ li:not([id='customize-control-sm_toggle_advanced_settings_control'])
-            -
            {
-            -
                display: none !important;
-            -
            }#sub-accordion-section-sm_color_palettes_section.advanced #customize-control-sm_color_palette_control
-            -
            {
-            -
                display: none !important;
-            -
            }.c-color-palette .iris-picker
-            -
            {
-            -
                position: absolute;z-index: 100;top: 100%;left: 0;margin-top: 1em;border: 0;box-shadow: black 0 3px 12px -4px;
-            -
            }.c-color-palette .iris-picker .iris-square-handle
-            -
            {top: -6px;left: -6px;
-            -
-            -
                border-color: transparent;
-            -
            }.c-color-palette .iris-picker .iris-square-handle:after
-            -
            {
-            -
                position: absolute;top: 0;right: 0;bottom: 0;left: 0;border: 2px solid white;
-            -
            }.c-color-palette .iris-picker .iris-square-value
-            -
            {
-            -
                box-shadow: none !important;
-            -
            }.color .picker
-            -
            {cursor: pointer;transition: opacity .3s ease-in-out, border-color .3s ease-in-out;
-            -
-            -
                border: 2px solid transparent;
-            -
            }.color .picker i
-            -
            {
-            -
                transition: box-shadow .3s ease-in-out;
-            -
            }.color.inactive .picker
-            -
            {
-            -
                opacity: .2;
-            -
            }.color.active .picker
-            -
            {
-            -
                border-color: #73c5ee;
-            -
            }.colors .color.active i
-            -
            {
-            -
                box-shadow: inset 0 0 3px 0 transparent, inset 0 1px 3px 0 transparent;
-            -
            }.color.inactive .picker:hover
-            -
            {
                 opacity: 1;
-            -
            }.c-color-palette__tooltip
-            -
            {
-            -
                position: absolute;z-index: 300;bottom: 100%;left: 50%;margin-bottom: 5px;padding: 4px 14px;transition: opacity .2s ease-out;-webkit-transform: translateX(-50%);transform: translateX(-50%);opacity: 0;color: white;background-color: #606a72;box-shadow: 0 2px 5px 0 rgba(0,0,0,.15);
-            -
            }.c-color-palette__tooltip:after
-            -
            {position: absolute;top: 100%;left: 50%;display: block;
-            -
-            -
                content: '';-webkit-transform: translateX(-50%);transform: translateX(-50%);border: 5px solid transparent;border-top-color: #606a72;border-bottom-width: 0;
-            -
            }.c-color-palette__control:hover .c-color-palette__tooltip
-            -
            {
                 opacity: 1;
-            -
            }.c-color-palette__control
-            -
            {
-            -
                position: relative;cursor: pointer;
-            -
            }input.c-color-palette__input[class]
-            -
            {
-            -
                margin-top: 1em;
-            -
            }#customize-control-sm_toggle_advanced_settings_control
-            -
            {
-            -
                margin-bottom: 0;opacity: 0;
-            -
            }#customize-control-sm_toggle_advanced_settings_control button
-            -
            {
-            -
                width: 100%;
-            -
            }.sm_color_matrix
-            -
            {
-            -
                display: -ms-flexbox                                        ;display: flex;margin-top: -15px;margin-left: -15px;-ms-flex-wrap: wrap;flex-wrap: wrap;
-            -
            }.sm_color_matrix > *
-            -
            {
-            -
                display: -ms-flexbox                                                                        ;display: flex;padding-top: 15px;padding-left: 15px;-ms-flex-wrap: wrap;flex-wrap: wrap;-ms-flex-line-pack: start;align-content: flex-start;-ms-flex: 0 0 33.33333%;flex: 0 0 33.33333%;
-            -
            }.sm_color_matrix > * > *
-            -
            {-webkit-animation-name: bounceIn                                                                                                        ;animation-name: bounceIn;-webkit-animation-duration: .75s;animation-duration: .75s;border: 1px solid #ccc;border-radius: 50%;
-            -
                background-color: currentColor;
-            -
            }.sm_color_matrix > *
-            -
            {
-            -
                display: grid;grid-auto-rows: 2px;grid-auto-columns: 2px;
-            -
            }.sm_color_matrix > * > :nth-child(1)
-            -
            {
-            -
                grid-area: 16 / 12 / span 12 / span 12;
-            -
            }.sm_color_matrix > * > :nth-child(2)
-            -
            {
-            -
                grid-area: 26 / 24 / span 4 / span 4;
-            -
            }.sm_color_matrix > * > :nth-child(3)
-            -
            {
-            -
                grid-area: 13 / 24 / span 4 / span 4;
-            -
            }.sm_color_matrix > * > :nth-child(4)
-            -
            {
-            -
                grid-area: 8 / 8 / span 8 / span 8;
-            -
            }.sm_color_matrix > * > :nth-child(5)
-            -
            {
-            -
                grid-area: 32 / 8 / span 4 / span 4;
-            -
            }.sm_color_matrix > * > :nth-child(6)
-            -
            {
-            -
                grid-area: 30 / 16 / span 8 / span 8;
-            -
            }.sm_color_matrix > * > :nth-child(7)
-            -
            {
-            -
                grid-area: 4 / 20 / span 8 / span 8;
-            -
            }.sm_color_matrix > * > :nth-child(8)
-            -
            {
-            -
                grid-area: 17 / 26 / span 8 / span 8;
-            -
            }.sm_color_matrix > * > :nth-child(9)
-            -
            {
-            -
                grid-area: 22 / 2 / span 8 / span 8;
-            -
            }.sm_color_matrix > * > :nth-child(10)
-            -
            {
-            -
                grid-area: 28 / 11 / span 2 / span 2;
-            -
            }.sm_color_matrix > * > :nth-child(11)
-            -
            {
-            -
                grid-area: 9 / 31 / span 6 / span 6;
-            -
            }.sm_color_matrix > * > :nth-child(11)
-            -
            {
-            -
                grid-area: 26 / 30 / span 9 / span 9;
-            -
            }.sm_color_matrix > * > :nth-child(12)
-            -
            {
-            -
                grid-area: 17 / 7 / span 4 / span 4;
-            -
            }.sm_color_matrix > * > :nth-child(13)
-            -
            {
-            -
                grid-area: 19 / 36 / span 6 / span 6;
-            -
            }.sm_color_matrix > * > :nth-child(14)
-            -
            {
-            -
                grid-area: 12 / 18 / span 2 / span 2;
-            -
            }@-webkit-keyframes bounceIn
-            -
            {
-            -
                0%,
-            -
                20%,
-            -
                40%,
-            -
                60%,
-            -
                80%,
-            -
                100%
-            -
                {
-            -
                    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1)                                ;animation-timing-function: cubic-bezier(.215, .61, .355, 1);
-            -
                }0%
-            -
                {-webkit-transform: scale3d(.3, .3, .3)                                        ;transform: scale3d(.3, .3, .3);
-            -
-            -
                    opacity: 0;
-            -
                }20%
-            -
                {
-            -
                    -webkit-transform: scale3d(1.1, 1.1, 1.1)                                ;transform: scale3d(1.1, 1.1, 1.1);
-            -
                }40%
-            -
                {
-            -
                    -webkit-transform: scale3d(.9, .9, .9)                                ;transform: scale3d(.9, .9, .9);
-            -
                }60%
-            -
                {-webkit-transform: scale3d(1.03, 1.03, 1.03)                                        ;transform: scale3d(1.03, 1.03, 1.03);
-            -
-            -
                    opacity: 1;
-            -
                }80%
-            -
                {
-            -
                    -webkit-transform: scale3d(.97, .97, .97)                                ;transform: scale3d(.97, .97, .97);
-            -
                }100%
-            -
                {-webkit-transform: scale3d(1, 1, 1)                                        ;transform: scale3d(1, 1, 1);
-            -
-            -
                    opacity: 1;
-            -
                }
-            -
            }@keyframes bounceIn
-            -
            {
-            -
                0%,
-            -
                20%,
-            -
                40%,
-            -
                60%,
-            -
                80%,
-            -
                100%
-            -
                {
-            -
                    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1)                                ;animation-timing-function: cubic-bezier(.215, .61, .355, 1);
-            -
                }0%
-            -
                {-webkit-transform: scale3d(.3, .3, .3)                                        ;transform: scale3d(.3, .3, .3);
-            -
-            -
                    opacity: 0;
-            -
                }20%
-            -
                {
-            -
                    -webkit-transform: scale3d(1.1, 1.1, 1.1)                                ;transform: scale3d(1.1, 1.1, 1.1);
-            -
                }40%
-            -
                {
-            -
                    -webkit-transform: scale3d(.9, .9, .9)                                ;transform: scale3d(.9, .9, .9);
-            -
                }60%
-            -
                {-webkit-transform: scale3d(1.03, 1.03, 1.03)                                        ;transform: scale3d(1.03, 1.03, 1.03);
-            -
-            -
                    opacity: 1;
-            -
                }80%
-            -
                {
-            -
                    -webkit-transform: scale3d(.97, .97, .97)                                ;transform: scale3d(.97, .97, .97);
-            -
                }100%
-            -
                {-webkit-transform: scale3d(1, 1, 1)                                        ;transform: scale3d(1, 1, 1);
-            -
-            -
                    opacity: 1;
-            -
                }
-            -
            }#customize-theme-controls #sub-accordion-panel-style_manager_panel .customize-panel-description,
-            -
            #customize-theme-controls #sub-accordion-panel-theme_options_panel .customize-panel-description
-            -
            {
-            -
                display: block;
-            -
            }#customize-theme-controls li#accordion-panel-style_manager_panel h3.accordion-section-title:before
-            -
            {font-family: dashicons;font-size: 17px;
-            -
-            -
                position: relative;float: right;margin-right: 28px;padding: 1px;content: '';color: #aed2e5;-webkit-font-smoothing: antialiased;
-            -
            }#customize-theme-controls li#accordion-panel-style_manager_panel h3.accordion-section-title:before
-            -
            {
-            -
                font-size: 18px;color: #f8bc30;
-            -
            }#customize-theme-controls li#accordion-section-sm_color_palettes_section h3.accordion-section-title:before
-            -
            {font-family: dashicons;font-size: 17px;
-            -
-            -
                position: relative;float: right;margin-right: 28px;padding: 1px;content: '';color: #aed2e5;-webkit-font-smoothing: antialiased;
-            -
            }#customize-theme-controls li#accordion-section-sm_color_palettes_section h3.accordion-section-title
-            -
            {
-            -
                border-top: none;
-            -
            }#customize-theme-controls li#accordion-section-sm_font_palettes_section h3.accordion-section-title:before
-            -
            {font-family: dashicons;font-size: 17px;
-            -
-            -
                position: relative;float: right;margin-right: 28px;padding: 1px;content: '';color: #aed2e5;-webkit-font-smoothing: antialiased;
-            -
            }#customize-theme-controls li#accordion-section-sm_color_palettes_section h3.accordion-section-title:before,
-            -
            #customize-theme-controls li#accordion-section-sm_font_palettes_section h3.accordion-section-title:before
-            -
            {margin-top: -2px;margin-right: 5px;
-            -
                padding: 3px;
-            -
            }#customize-theme-controls li#accordion-panel-theme_options_panel h3.accordion-section-title:before
-            -
            {font-family: dashicons;font-size: 17px;
-            -
-            -
                position: relative;float: right;margin-right: 28px;padding: 1px;content: '';color: #aed2e5;-webkit-font-smoothing: antialiased;
-            -
            }#customize-theme-controls li#accordion-panel-theme_options_panel h3.accordion-section-title
-            -
            {margin: 0 0 15px 0;border-right: none;
-            -
                border-bottom: 1px solid #ddd;border-left: none;
-            -
            }#customize-theme-controls li[id$='[general]'],
-            -
            #customize-theme-controls li[id$='[footer_section]']
-            -
            {margin: 0 0 15px 0;border-right: none;
-            -
                border-bottom: 1px solid #ddd;border-left: none;
-            -
            }#customize-theme-controls li[id$='[general]'] h3.accordion-section-title
-            -
            {
-            -
                border-top: none;
+            }


1	+ @charset "UTF-8";
2	+ .wp-full-overlay-sidebar , .wp-full-overlay-sidebar :before, .wp-full-overlay-sidebar *:after {
3	+ box-sizing: border-box;
4	+ }
5	+
6	+ .iris-picker,
7	+ .iris-picker * {
8	+ box-sizing: content-box;
9	+ }
10	+
11	+ .wp-full-overlay-sidebar-content .accordion-section-content {
12	+ overflow: visible;
13	+ }
14	+
15	+ .control-section:not(.control-section-themes) .customize-control {
16	+ padding: 0;
17	+ width: 100%;
18	+ min-height: initial;
19	+ }
20	+
21	+ #customize-header-actions #customize-save-button-wrapper {
22	+ margin-top: 7px;
23	+ }
24	+
25	+ .wp-full-overlay-footer .devices button {
26	+ float: left;
27	+ border-radius: 0;
28	+ }
29	+
30	+ .customize-controls-close {
31	+ width: 48px;
32	+ height: 44px;
33	+ color: #7da9c3;
34	+ background: #ffffff;
35	+ border-top: none;
36	+ border-right-color: #e0e8ef;
37	+ }
38	+
39	+ .customize-controls-close:focus, .customize-controls-close:hover {
40	+ background: #f5fcff;
41	+ }
42	+
43	+ .customize-controls-close:before {
44	+ top: 0px;
45	+ }
46	+
47	+ #customize-controls .customize-info {
48	+ border-bottom-color: #e0e8ef;
49	+ }
50	+
51	+ .customize-panel-back, .customize-section-back {
52	+ height: 74px;
53	+ color: #7da9c3;
54	+ border-right-color: #e0e8ef;
55	+ }
56	+
57	+ .customize-panel-back:hover, .customize-panel-back:focus, .customize-section-back:hover, .customize-section-back:focus {
58	+ border-left-color: #f5fcff;
59	+ background: #f5fcff;
60	+ }
61	+
62	+ #customize-theme-controls .theme * {
63	+ box-sizing: content-box;
64	+ }
65	+
66	+ #customize-theme-controls .accordion-section-content {
67	+ padding: 17px;
68	+ }
69	+
70	+ #customize-theme-controls .customize-section-title {
71	+ margin-top: -17px;
72	+ margin-right: -17px;
73	+ }
74	+
75	+ #customize-theme-controls .control-panel-content .control-section:nth-child(2),
76	+ #customize-theme-controls .control-panel-content .control-section:nth-child(3) {
77	+ border-top: none;
78	+ }
79	+
80	+ #customize-theme-controls #accordion-section-add_menu {
81	+ border-bottom: none;
82	+ }
83	+
84	+ #customize-theme-controls #accordion-section-add_menu .add-menu-toggle {
85	+ float: none;
86	+ }
87	+
88	+ #customize-theme-controls .customize-pane-child.open {
89	+ height: 100%;
90	+ }
91	+
92	+ #customize-controls .description {
93	+ font-size: 12px;
94	+ font-weight: 300;
95	+ font-style: normal;
96	+ line-height: 1.6;
97	+ color: #4d7b90;
98	+ text-indent: 0;
99	+ }
100	+
101	+ .customize-control-description {
102	+ margin-top: 6px;
103	+ }
104	+
105	+ .customize-control {
106	+ margin-bottom: 24px;
107	+ }
108	+
109	+ #accordion-section-themes + .control-section {
110	+ border-top: none;
111	+ }
112	+
113	+ #customize-controls .panel-meta.customize-info .accordion-section-title {
114	+ border-top: none;
115	+ height: 74px;
116	+ }
117	+
118	+ .button-controls:after {
119	+ content: " ";
120	+ display: table;
121	+ clear: both;
122	+ }
123	+
124	+ .wp-core-ui .button:not(.theme-details):not(.collapse-sidebar):not(.wp-color-result),
125	.wp-core-ui .button-primary,
126	+ .wp-core-ui .button-secondary {
127	+ width: auto;
128	+ padding-left: 15px;
129	+ padding-right: 15px;
130	+ font-weight: 400;
131	+ color: #F5FCFF;
132	+ text-shadow: none;
133	+ border: none;
134	+ background: #AED2E5;
135	+ box-shadow: 0px 2px 0px 0px #8DBED7;
136	+ border-radius: 4px;
137	+ }
138
139	+ .wp-core-ui .button:not(.theme-details):not(.collapse-sidebar):not(.wp-color-result):hover,

140	.wp-core-ui .button-primary:hover,
141	+ .wp-core-ui .button-secondary:hover {
142	+ color: white;
143	+ text-shadow: none;
144	+ background: #98C6DD;
145	+ box-shadow: 0px 2px 0px 0px #74A7C2;
146	+ }
147	+
148	+ .wp-core-ui #customize-header-actions .button-primary {
149	+ background: #73C5EE;
150	+ box-shadow: 0px 2px 0px 0px #57ABD5;
151	+ }
152	+
153	+ .wp-core-ui #customize-header-actions .button-primary:hover {
154	+ background: #58B0DD;
155	+ box-shadow: 0px 2px 0px 0px #3F8AAF;
156	+ }
157	+
158	+ .wp-core-ui #customize-header-actions .button-primary.has-next-sibling {
159	+ border-right: 1px solid #57ABD5;
160	+ }
161	+
162	+ .wp-core-ui #customize-header-actions .button-primary:disabled {
163	+ color: white !important;
164	+ background: #AED2E5 !important;
165	+ opacity: 0.7;
166	+ box-shadow: 0px 2px 0px 0px #8db5ca !important;
167	+ }
168	+
169	+ .wp-core-ui #customize-header-actions .button-primary:disabled.has-next-sibling {
170	+ border-right: none;
171	+ }
172	+
173	+ .wp-core-ui .reset_section,
174	+ .wp-core-ui .reset_panel {
175	+ width: 100%;
176	+ height: 4em;
177	+ display: block;
178	+ margin: 0px 0 25px;
179	+ }
180	+
181	+ .wp-core-ui .reset_panel {
182	+ margin-top: 10px;
183	+ }
184	+
185	+ .separator.label {
186	+ display: block;
187	+ font-size: 14px;
188	+ line-height: 24px;
189	+ font-weight: 600;
190	+ }
191	+
192	+ .customize-control-title, .separator.label {
193	+ color: #416B7E;
194	+ }
195	+
196	+ .separator.section:before, .separator.sub-section:before {
197	+ content: "";
198	+ position: absolute;
199	+ top: 0;
200	+ bottom: 0;
201	+ left: -18px;
202	+ right: -18px;
203	+ z-index: -1;
204	+ }
205	+
206	+ .separator.label {
207	+ font-weight: 500;
208	+ }
209	+
210	+ .separator.large {
211	+ margin-top: 12px;
212	+ font-size: 16px;
213	+ color: #39474D;
214	+ }
215	+
216	+ .separator.section {
217	+ position: relative;
218	+ padding: 14px 0;
219	+ margin-bottom: 0;
220	+ background: none;
221	+ border: none;
222	+ }
223	+
224	+ .separator.section[id*="layout"] {
225	+ margin-top: 0;
226	+ }
227	+
228	+ .separator.section[id*="layout"]:before {
229	+ border: none;
230	+ }
231	+
232	+ .separator.section:before {
233	+ border: 1px solid #e0e8ef;
234	+ background-color: #ffffff;
235	+ box-shadow: 0px 1px 0px 0px #DFE8EF;
236	+ }
237	+
238	+ .separator.sub-section {
239	+ position: relative;
240	+ padding: 12px 0;
241	+ }
242	+
243	+ .separator.sub-section:before {
244	+ border-top: 1px solid #e0e8ef;
245	+ border-bottom: 1px solid #e0e8ef;
246	+ background-color: #f6fbff;
247	+ }
248	+
249	+ .separator.sub-section + span {
250	+ margin-top: 20px;
251	+ font-style: normal;
252	+ }
253	+
254	+ .section-navigation-wrapper {
255	+ position: relative;
256	+ height: 43px;
257	+ margin: -15px -12px 0 -12px;
258	+ margin-right: -17px;
259	+ margin-left: -17px;
260	+ }
261	+
262	+ .section-navigation {
263	+ display: -ms-flexbox;
264	+ display: flex;
265	+ margin-top: -1px;
266	+ clear: both;
267	+ border-top: 1px solid #e0e8ef;
268	+ }
269	+
270	+ .section-navigation a {
271	+ -ms-flex: 1 1 auto;
272	+ flex: 1 1 auto;
273	+ display: block;
274	+ padding: 12px 0;
275	+ color: #3b484e;
276	+ background-color: #ffffff;
277	+ border-bottom: 1px solid #e0e8ef;
278	+ border-right: 1px solid #e0e8ef;
279	+ text-align: center;
280	+ text-decoration: none;
281	+ transition: background-color .15s ease-in-out;
282	+ }
283	+
284	+ .section-navigation a:last-child {
285	+ border-right: 0;
286	+ }
287	+
288	+ #customize-controls .customize-info.is-sticky.is-sticky,
289	+ #customize-controls .customize-section-title.is-sticky.is-sticky {
290	+ top: 40px;
291	+ }
292	+
293	+ #customize-controls .customize-info.is-in-view.is-in-view,
294	+ #customize-controls .customize-section-title.is-in-view.is-in-view {
295	+ box-shadow: none;
296	+ }
297	+
298	+ #customize-controls .has-nav .customize-info,
299	+ #customize-controls .has-nav .customize-section-title {
300	+ margin-right: -12px;
301	+ }
302	+
303	+ #customize-controls .customize-section-title.customize-section-title {
304	+ border-bottom: 0;
305	+ }
306	+
307	+ .customize-section-description-container.section-meta.has-nav {
308	+ margin-bottom: 0;
309	+ }
310	+
311	+ .font-options__wrapper {
312	+ position: relative;
313	+ }
314	+
315	+ .font-options__wrapper:after {
316	+ content: "";
317	+ position: absolute;
318	+ top: 90%;
319	+ left: 0;
320	+ right: 0;
321	+ z-index: 0;
322	+ display: block;
323	+ height: 30px;
324	+ }
325	+
326	+ .font-options__head {
327	+ display: -ms-flexbox;
328	+ display: flex;
329	+ -ms-flex-pack: justify;
330	+ justify-content: space-between;
331	+ }
332	+
333	+ .font-options__head.font-options__head {
334	+ -webkit-appearance: none;
335	+ text-overflow: ellipsis;
336	+ white-space: nowrap;
337	+ }
338	+
339	+ .font-options__font-title {
340	+ margin-right: 26px;
341	+ margin-left: 10px;
342	+ font-size: 12px;
343	+ line-height: 20px;
344	+ font-weight: 300;
345	+ color: #98c6dd;
346	+ text-overflow: ellipsis;
347	+ overflow: hidden;
348	+ white-space: nowrap;
349	+ }
350	+
351	+ .font-options__options-list {
352	+ position: absolute;
353	+ top: calc(100% + 6px);
354	+ left: -6px;
355	+ right: -6px;
356	+ z-index: 2;
357	+ display: block;
358	+ padding: 10px;
359	+ border: 1px solid #dfe8ef;
360	+ border-radius: 5px;
361	+ background-color: #ffffff;
362	+ opacity: 0;
363	+ display: none;
364	+ transition: opacity .15s linear;
365	+ }
366	+
367	+ .font-options__options-list:last-child {
368	+ margin-bottom: 0;
369	+ }
370	+
371	+ .font-options__options-list:before, .font-options__options-list:after {
372	+ content: "";
373	+ position: absolute;
374	+ top: -20px;
375	+ right: 25px;
376	+ height: 0;
377	+ width: 0;
378	+ border: solid transparent;
379	+ z-index: 10;
380	+ }
381	+
382	+ .font-options__options-list:before {
383	+ border-bottom-color: white;
384	+ border-width: 10px;
385	+ z-index: 11;
386	+ }
387	+
388	+ .font-options__options-list:after {
389	+ border-bottom-color: rgba(0, 0, 0, 0.075);
390	+ border-width: 12px;
391	+ top: -24px;
392	+ right: 23px;
393	+ }
394	+
395	+ .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap:after {
396	+ content: "";
397	+ position: absolute;
398	+ bottom: 100%;
399	+ right: 12px;
400	+ border-collapse: separate;
401	+ width: 0;
402	+ height: 0;
403	+ border-width: 0 9px 9px 9px;
404	+ border-style: solid;
405	+ border-color: transparent transparent #fff transparent;
406	+ }
407	+
408	+ .font-options__head, .wp-full-overlay-sidebar-content .customize-control input[type=text]:not(#_customize-input-wpcom_custom_css_content_width_control):not(.wp-color-picker),
409	.wp-full-overlay-sidebar-content .customize-control input[type=checkbox],
410	.wp-full-overlay-sidebar-content .customize-control input[type=password],
411	.wp-full-overlay-sidebar-content .customize-control input[type=color],

423	.wp-full-overlay-sidebar-content .customize-control input[type=search],
424	.wp-full-overlay-sidebar-content .customize-control select,
425	.wp-full-overlay-sidebar-content .customize-control textarea,
426	+ .wp-full-overlay-sidebar-content .customize-control input[type="number"].range-value, ul.font-options__options-list .select2-container .select2-selection--single, #customize-theme-controls .select2-container .select2-selection--multiple {
427	+ width: 100%;
428	+ height: 44px;
429	+ padding: 10px 14px;
430	+ background: #FFFFFF;
431	+ border: 2px solid #B8DAEB;
432	+ border-radius: 4px;
433	+ font-size: 14px;
434	+ line-height: 1.5;
435	+ color: #416B7E;
436	+ outline: 0;
437	+ }
438	+
439	+ .font-options__head:focus, .wp-full-overlay-sidebar-content .customize-control input[type=text]:focus:not(#_customize-input-wpcom_custom_css_content_width_control):not(.wp-color-picker),
440	.wp-full-overlay-sidebar-content .customize-control input[type=checkbox]:focus,
441	.wp-full-overlay-sidebar-content .customize-control input[type=password]:focus,
442	.wp-full-overlay-sidebar-content .customize-control input[type=color]:focus,

454	.wp-full-overlay-sidebar-content .customize-control input[type=search]:focus,
455	.wp-full-overlay-sidebar-content .customize-control select:focus,
456	.wp-full-overlay-sidebar-content .customize-control textarea:focus,
457	+ .wp-full-overlay-sidebar-content .customize-control input[type="number"].range-value:focus, ul.font-options__options-list .select2-container .select2-selection--single:focus, #customize-theme-controls .select2-container .select2-selection--multiple:focus {
458	+ border-color: #73C5EE;
459	+ box-shadow: none;
460	+ }
461	+
462	+ .font-options__head, .wp-full-overlay-sidebar-content .customize-control select, ul.font-options__options-list .select2-container .select2-selection--single, #customize-theme-controls .select2-container .select2-selection--multiple {
463	+ width: 100%;
464	+ -webkit-appearance: button;
465	+ -moz-appearance: none;
466	+ font-weight: 600;
467	+ background: white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE1cHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTUgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjU2LjAwMDAwMCwgLTM4Ni4wMDAwMDApIiBmaWxsPSIjOThDNkRFIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iVGl0bGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjAwMDAwMCwgMjE5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1TZWxlY3QtQ29weSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iU2VsZWN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMjcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTI1NC40ODEyLDE4IEwyNTYsMTkuNTE0IEwyNDguNSwyNyBMMjQxLDE5LjUxNCBMMjQyLjUxODgsMTggTDI0OC41LDIzLjk2NzIgTDI1NC40ODEyLDE4IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;
468	+ background-position: right 16px top 16px;
469	+ }
470	+
471	+ [multiple].font-options__head, .wp-full-overlay-sidebar-content .customize-control select[multiple], ul.font-options__options-list .select2-container [multiple].select2-selection--single, #customize-theme-controls .select2-container [multiple].select2-selection--multiple {
472	+ background: white;
473	+ }
474	+
475	+ .wp-full-overlay-sidebar-content .customize-control input[type=text],
476	+ .wp-full-overlay-sidebar-content .customize-control textarea {
477	+ font-size: 13px;
478	+ }
479	+
480	+ .wp-full-overlay-sidebar-content .customize-control textarea {
481	+ height: auto;
482	+ }
483	+
484	+ .wp-full-overlay-sidebar-content .customize-control input[type=checkbox],
485	+ .wp-full-overlay-sidebar-content .customize-control input[type=radio] {
486	+ width: 22px;
487	+ height: 22px;
488	+ }
489	+
490	+ .wp-full-overlay-sidebar-content .customize-control input[type=checkbox]:checked,
491	+ .wp-full-overlay-sidebar-content .customize-control input[type=radio]:checked {
492	+ background: #73C5EE;
493	+ border-color: #5AB9E8;
494	+ }
495	+
496	+ .wp-full-overlay-sidebar-content .customize-control input[type=checkbox]:checked:before,
497	+ .wp-full-overlay-sidebar-content .customize-control input[type=radio]:checked:before {
498	+ color: white;
499	+ margin: -1px 0 0 -2px;
500	+ }
501	+
502	+ .wp-full-overlay-sidebar-content .customize-control .awesome_preset input[type=radio]:checked {
503	+ background: transparent;
504	+ }
505	+
506	+ .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control) label:not(:only-of-type),
507	+ .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control) > .customize-inside-control-row:not(:only-of-type), .wp-full-overlay-sidebar-content .customize-control.customize-control-radio label:not(:only-of-type),
508	+ .wp-full-overlay-sidebar-content .customize-control.customize-control-radio > .customize-inside-control-row:not(:only-of-type) {
509	+ margin-left: 30px;
510	+ padding-top: 0;
511	+ padding-bottom: 0;
512	+ display: inline-block;
513	+ width: calc(49% - 30px);
514	+ text-indent: -6px;
515	+ }
516	+
517	+ .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control) label, .wp-full-overlay-sidebar-content .customize-control.customize-control-radio label {
518	+ color: #416B7E;
519	+ }
520	+
521	+ [id="divider"] + .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control), [id="divider"] + .wp-full-overlay-sidebar-content .customize-control.customize-control-radio {
522	+ margin-top: 0;
523	+ }
524	+
525	+ .wp-full-overlay-sidebar-content .customize-control input[type=radio] {
526	+ border-radius: 50%;
527	+ }
528	+
529	+ .wp-full-overlay-sidebar-content .customize-control input[type=radio]:checked:before {
530	+ content: none;
531	+ }
532	+
533	+ .customize-control-html + .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox {
534	+ margin-top: -24px;
535	+ }
536	+
537	+ .wp-full-overlay-sidebar-content .customize-control.customize-control-radio label,
538	+ .wp-full-overlay-sidebar-content .customize-control.customize-control-radio .customize-inside-control-row {
539	+ margin-top: 12px;
540	+ }
541	+
542	+ .wp-full-overlay-sidebar-content .customize-control.customize-control-radio#customize-control-changeset_status .customize-inside-control-row {
543	+ margin-top: 0;
544	+ text-indent: 0;
545	+ }
546	+
547	+ .wp-full-overlay-sidebar-content .customize-control input[type="range"] {
548	+ width: 65%;
549	+ }
550	+
551	+ .wp-full-overlay-sidebar-content .customize-control input[type="range"] {
552	+ position: relative;
553	+ -webkit-appearance: none;
554	+ width: calc(100% - 55px);
555	+ height: 22px;
556	+ overflow: hidden;
557	+ outline: none;
558	+ background: none;
559	+ }
560	+
561	+ .wp-full-overlay-sidebar-content .customize-control input[type="range"]:before {
562	+ content: " ";
563	+ position: absolute;
564	+ top: 8px;
565	+ left: 0;
566	+ height: 6px;
567	+ width: 100%;
568	+ background: #DFE8EF;
569	+ box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
570	+ border-radius: 10px;
571	+ }
572	+
573	+ .wp-full-overlay-sidebar-content .customize-control input[type="range"]::-webkit-slider-thumb {
574	+ -webkit-appearance: none;
575	+ width: 22px;
576	+ height: 22px;
577	+ background: #27ae60;
578	+ position: relative;
579	+ z-index: 3;
580	+ background: #FFFFFF;
581	+ border: 2px solid #B8DAEB;
582	+ border-radius: 4px;
583	+ }
584	+
585	+ .wp-full-overlay-sidebar-content .customize-control input[type="range"]::-webkit-slider-thumb:before {
586	+ content: "..";
587	+ position: absolute;
588	+ left: 5px;
589	+ top: -5px;
590	+ color: #B8DAEB;
591	+ font-size: 1em;
592	+ letter-spacing: 1px;
593	+ }
594	+
595	+ .wp-full-overlay-sidebar-content .customize-control input[type="range"]::-webkit-slider-thumb:after {
596	+ content: " ";
597	+ width: calc(100% - 55px);
598	+ height: 6px;
599	+ position: absolute;
600	+ z-index: 1;
601	+ right: 20px;
602	+ top: 6px;
603	+ background: #73C5EE;
604	+ }
605	+
606	+ .wp-full-overlay-sidebar-content .customize-control input[type="number"].range-value {
607	+ min-width: 40px;
608	+ max-width: 80px;
609	+ width: auto;
610	+ height: 30px;
611	+ top: -5px;
612	+ float: right;
613	+ padding: 4px 0px 5px 0px;
614	+ margin-left: 10px;
615	+ font-size: 13px;
616	+ line-height: 1;
617	+ text-align: center;
618	+ }
619	+
620	+ .wp-full-overlay-sidebar-content .customize-control input[type=number]::-webkit-inner-spin-button,
621	+ .wp-full-overlay-sidebar-content .customize-control input[type=number]::-webkit-outer-spin-button {
622	+ -webkit-appearance: none;
623	+ margin: 0;
624	+ }
625	+
626	+ .customize-control-color {
627	+ display: block;
628	+ }
629	+
630	+ .customize-control-color .customize-control-title, .customize-control-color .separator.label {
631	+ float: left;
632	+ }
633	+
634	+ .customize-control-color .wp-picker-container {
635	+ position: relative;
636	+ float: right;
637	+ top: -3px;
638	+ }
639	+
640	+ .customize-control-color .wp-picker-container .wp-picker-holder {
641	+ position: relative;
642	+ }
643	+
644	+ .customize-control-color .wp-picker-container .wp-color-result,
645	+ .customize-control-color .wp-picker-container .wp-color-result.button {
646	+ top: 0;
647	+ height: 30px;
648	+ width: 40px;
649	+ margin: 0;
650	+ padding: 0;
651	+ border-radius: 4px;
652	+ background: #2ECC71;
653	+ border: 2px solid #B8DAEB;
654	+ box-shadow: none;
655	+ }
656	+
657	+ .customize-control-color .wp-picker-container .wp-color-result:after,
658	.customize-control-color .wp-picker-container .wp-color-result .wp-color-result-text,
659	.customize-control-color .wp-picker-container .wp-color-result.button:after,
660	+ .customize-control-color .wp-picker-container .wp-color-result.button .wp-color-result-text {
661	+ display: none;
662	+ }
663	+
664	+ .customize-control-color .wp-picker-container .iris-picker {
665	+ position: absolute;
666	+ top: 40px;
667	+ right: 0;
668	+ z-index: 1000;
669	+ width: 275px !important;
670	+ border-top: none;
671	+ border-color: #DFDFDE;
672	+ border-radius: 0 0 3px 3px;
673	+ border: none;
674	+ background: white;
675	+ }
676	+
677	+ .customize-control-color .wp-picker-container .iris-picker, .customize-control-color .wp-picker-container .iris-picker * {
678	+ box-sizing: content-box;
679	+ }
680	+
681	+ .customize-control-color .wp-picker-container .iris-picker .iris-square {
682	+ width: 215px !important;
683	+ height: 173px !important;
684	+ margin-right: 0;
685	+ }
686	+
687	+ .customize-control-color .wp-picker-container .iris-picker .iris-strip {
688	+ float: right;
689	+ box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px inset;
690	+ }
691	+
692	+ .customize-control-color .wp-picker-container .iris-picker .iris-strip .ui-slider-handle {
693	+ border-color: #aaa !important;
694	+ opacity: 1;
695	+ box-shadow: none;
696	+ }
697	+
698	+ .customize-control-color .wp-picker-container .iris-picker .iris-palette {
699	+ width: 24px !important;
700	+ height: 24px !important;
701	+ border-radius: 50px;
702	+ box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px inset;
703	+ }
704	+
705	+ .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap {
706	+ position: absolute;
707	+ z-index: 1000;
708	+ top: 35px;
709	+ right: 0;
710	+ width: 275px;
711	+ padding: 9px 12px;
712	+ background: white;
713	+ border: none;
714	+ border-radius: 3px 3px 0 0;
715	+ }
716	+
717	+ .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap input.wp-color-picker {
718	+ float: left;
719	+ width: 100px;
720	+ font-size: 13px;
721	+ text-align: left;
722	+ margin: 0;
723	+ padding: 6px 12px;
724	+ height: auto;
725	+ }
726	+
727	+ .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap input.button {
728	+ float: right;
729	+ padding: 4px 12px;
730	+ height: 30px;
731	+ }
732	+
733	+ .customize-control-font:last-child {
734	+ margin-bottom: 150px;
735	+ }
736	+
737	+ #accordion-section-live_css_edit_section .customize-section-title {
738	+ margin-top: -13px;
739	+ border-bottom: 1px solid #ddd;
740	+ }
741	+
742	+ #accordion-section-live_css_edit_section #css_editor {
743	+ top: 70px;
744	+ border-top: 10px solid white;
745	+ overflow: visible;
746	+ }
747	+
748	+ #accordion-section-live_css_edit_section #css_editor:before {
749	+ content: "";
750	+ width: 48px;
751	+ height: 10px;
752	+ display: block;
753	+ background: #e8e8e8;
754	+ top: -10px;
755	+ position: absolute;
756	+ z-index: 10000000;
757	+ left: 0;
758	+ }
759	+
760	+ #accordion-section-live_css_edit_section .ace_scroller {
761	+ padding-left: 10px;
762	+ }
763	+
764	+ .wp-full-overlay.editor_opened {
765	+ margin-left: 500px;
766	+ }
767	+
768	+ .wp-full-overlay.editor_opened #customize-controls {
769	+ width: 500px;
770	+ }
771	+
772	+ .wp-full-overlay.editor_opened.collapsed #customize-controls {
773	+ width: 300px;
774	+ }
775	+
776	+ .customize-control-media .current,
777	.customize-control-site_icon .current,
778	+ li#customize-control-site_logo .current {
779	+ margin-bottom: 10px;
780	+ min-height: 44px;
781	+ background: #F5FCFF;
782	+ border: 2px solid #B8DAEB;
783	+ border-radius: 4px;
784	+ }
785	+
786	+ .customize-control-media .current .container, .customize-control-media .current span,
787	.customize-control-site_icon .current .container,
788	.customize-control-site_icon .current span,
789	li#customize-control-site_logo .current .container,
790	+ li#customize-control-site_logo .current span {
791	+ border: none;
792	+ }
793	+
794	+ .customize-control-media .inner, .customize-control-media .current span,
795	.customize-control-site_icon .inner,
796	.customize-control-site_icon .current span,
797	li#customize-control-site_logo .inner,
798	+ li#customize-control-site_logo .current span {
799	+ font-size: 13px;
800	+ color: #98C6DD;
801	+ }
802	+
803	+ .customize-control-media .inner,
804	.customize-control-site_icon .inner,
805	+ li#customize-control-site_logo .inner {
806	+ line-height: 1.4;
807	+ }
808	+
809	+ .customize-control-media .thumbnail-image,
810	.customize-control-site_icon .thumbnail-image,
811	+ li#customize-control-site_logo .thumbnail-image {
812	+ padding: 14px;
813	+ text-align: center;
814	+ }
815	+
816	+ .customize-control-media .thumbnail-image img,
817	.customize-control-site_icon .thumbnail-image img,
818	+ li#customize-control-site_logo .thumbnail-image img {
819	+ width: auto;
820	+ }
821	+
822	+ .customize-control-media .actions,
823	.customize-control-site_icon .actions,
824	+ li#customize-control-site_logo .actions {
825	+ margin-bottom: 0;
826	+ }

























827
828	+ .customize-control-typography select, .customize-control-typography select {
829	+ margin-bottom: 10px;
830	+ }












































































































































































831
832	+ .customize-control-typography .description, .customize-control-typography .description {
833	+ margin-top: -3px;
834	+ }




















































835
836	+ .customize-control-typography ul li, .customize-control-typography ul li {
837	+ width: 100%;
838	+ margin: 0;
839	+ }
840
841	+ .default-preset-button {
842	+ background-color: #F5F6F6;
843	+ float: right;
844	+ padding: 1px 8px;
845	+ border-radius: 3px;
846	+ border: 1px solid #CBCBCB;
847	+ margin-right: 4px;
848	+ font-family: "Open Sans",sans-serif;
849	+ font-size: 13px;
850	+ }
851
852	+ .customize-control-preset .description {
853	+ margin-right: 5px;
854	+ font-style: normal;
855	+ }
856
857	+ .customify_preset.radio_buttons .customify_radio_button {
858	+ border: none;
859	+ display: inline-block;
860	+ padding: 2px;
861	+ margin: 3px;
862	+ position: relative;
863	+ overflow: hidden;
864	+ height: auto;
865	+ }
866	+
867	+ .customify_preset.radio_buttons .customify_radio_button input[type="radio"] {
868	+ opacity: 0;
869	+ width: 100%;
870	+ height: 100%;
871	+ position: absolute;
872	+ z-index: 9999;
873	+ }
874	+
875	+ .customify_preset.radio_buttons .customify_radio_button input[type="radio"]:checked + label {
876	+ background-color: #ebebeb;
877	+ }
878	+
879	+ .customify_preset.radio_buttons .customify_radio_button input[type="radio"]:checked + label:before {
880	+ content: '>';
881	+ color: inherit;
882	+ }
883	+
884	+ .customify_preset.radio_buttons .customify_radio_button input[type="radio"]:checked + label:after {
885	+ content: '<';
886	+ color: inherit;
887	+ }
888	+
889	+ .customify_preset.radio_buttons .customify_radio_button input[type="radio"]:checked:before {
890	+ opacity: 0;
891	+ }
892	+
893	+ .customify_preset.radio_buttons .customify_radio_button label {
894	+ position: relative;
895	+ z-index: 999;
896	+ border-left: 4px solid;
897	+ }
898	+
899	+ .customify_preset .awesome_preset {
900	+ width: 45%;
901	+ position: relative;
902	+ display: inline-block;
903	+ text-align: center;
904	+ color: white;
905	+ margin-top: 5px;
906	+ margin-bottom: 25px;
907	+ transition: all 0.2s;
908	+ }
909	+
910	+ .customify_preset .awesome_preset:hover {
911	+ opacity: 0.9;
912	+ }
913	+
914	+ .customify_preset .awesome_preset:before {
915	+ content: '';
916	+ position: absolute;
917	+ top: 1px;
918	+ left: 1px;
919	+ right: 1px;
920	+ bottom: 1px;
921	+ border: 1px solid #FFF;
922	+ background: transparent;
923	+ opacity: .5;
924	+ border-radius: 4px;
925	+ z-index: 5;
926	+ }
927	+
928	+ .customify_preset .awesome_preset .preset-wrap .preset-color {
929	+ height: 128px;
930	+ border-radius: 4px 4px 0 0;
931	+ padding: 17px 0 27px;
932	+ }
933	+
934	+ .customify_preset .awesome_preset .preset-wrap .preset-color .first-font {
935	+ display: inline-block;
936	+ width: 100%;
937	+ font-size: 55px;
938	+ line-height: 1;
939	+ }
940	+
941	+ .customify_preset .awesome_preset .preset-wrap .preset-color .secondary-font {
942	+ display: inline-block;
943	+ width: 100%;
944	+ font-size: 20px;
945	+ line-height: 1;
946	+ margin-top: 8px;
947	+ }
948	+
949	+ .customify_preset .awesome_preset .preset-wrap .preset-name {
950	+ position: relative;
951	+ font-size: 11px;
952	+ text-transform: UPPERCASE;
953	+ border-radius: 0 0 4px 4px;
954	+ padding: 1px;
955	+ }
956	+
957	+ .customify_preset .awesome_preset .preset-wrap .preset-name:before {
958	+ content: '';
959	+ position: absolute;
960	+ border-color: inherit;
961	+ border: 10px solid;
962	+ border-left-color: transparent;
963	+ border-right-color: transparent;
964	+ border-top: transparent;
965	+ top: -10px;
966	+ border-bottom-color: inherit;
967	+ left: 40%;
968	+ }
969	+
970	+ .customify_preset .awesome_preset:nth-child(odd) {
971	+ margin-right: 7%;
972	+ }
973	+
974	+ .customify_preset .awesome_preset input[type=radio] {
975	+ height: 100%;
976	+ width: 100%;
977	+ position: absolute;
978	+ border: 0;
979	+ box-shadow: none;
980	+ color: #006505;
981	+ background-color: transparent;
982	+ border-radius: 0;
983	+ margin: 0;
984	+ display: inline-block;
985	+ top: 0;
986	+ left: 0;
987	+ z-index: 10;
988	+ }
989	+
990	+ .customify_preset .awesome_preset input[type=radio]:checked:before {
991	+ position: absolute;
992	+ height: 25px;
993	+ width: 25px;
994	+ top: -13px;
995	+ right: -14px;
996	+ background: #FFF;
997	+ z-index: 1;
998	+ }
999	+
1000	+ .customify_preset .awesome_preset input[type=radio]:checked:after {
1001	+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
1002	+ filter: alpha(opacity=0);
1003	+ content: '';
1004	+ position: absolute;
1005	+ width: 26px;
1006	+ height: 26px;
1007	+ border-radius: 50%;
1008	+ top: -5px;
1009	+ right: -5px;
1010	+ z-index: 10;
1011	+ background: #73C5EE url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzcHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTMgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgLTQwOC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1DaGVja2JveC1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNy4wMDAwMDAsIDI0OS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IkNoZWNrYm94IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMzAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuMDM4NDk1LDE2IEwxNy4xMTYxMzc1LDguOTIxNDg3NiBMMTUuMTk0NjQ5OCw3IEwxMC4wMzg0OTUsMTIuMTU1MDY3NCBMNi45MjE0ODc2LDkuMDM4OTI5OTcgTDUsMTAuOTYwNDE3NiBMMTAuMDM4NDk1LDE2IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;
1012	+ background-position: center center;
1013	+ }
1014	+
1015	+ .customify_radio_image {
1016	+ display: inline-block;
1017	+ }
1018	+
1019	+ .customify_radio_image label {
1020	+ display: block;
1021	+ float: left;
1022	+ margin-right: 10px;
1023	+ position: relative;
1024	+ }
1025	+
1026	+ .customify_radio_image label input[type=radio] {
1027	+ position: absolute;
1028	+ top: 0;
1029	+ bottom: 0;
1030	+ left: 0;
1031	+ right: 0;
1032	+ width: 100%;
1033	+ height: 100%;
1034	+ visibility: hidden;
1035	+ }
1036	+
1037	+ .customify_radio_image label input[type=radio] img {
1038	+ cursor: pointer;
1039	+ border: 2px solid transparent;
1040	+ }
1041	+
1042	+ .customify_radio_image label input[type=radio]:checked + img {
1043	+ border: 3px solid #73C5EE;
1044	+ }
1045	+
1046	+ .customify_ace_editor {
1047	+ display: block;
1048	+ min-height: 200px;
1049	+ border: 1px solid #ddd;
1050	+ }
1051	+
1052	+ .customize-control-custom_background .hide {
1053	+ display: none;
1054	+ }
1055	+
1056	+ .customize-control-custom_background .upload_button_div {
1057	+ margin: 10px 0;
1058	+ }
1059	+
1060	+ .customize-control-custom_background .upload_button_div > * {
1061	+ margin-right: 10px;
1062	+ }
1063	+
1064	+ .customize-control-custom_background .preview_screenshot {
1065	+ text-align: center;
1066	+ margin: 10px 0;
1067	+ }
1068	+
1069	+ .customize-control-custom_background .preview_screenshot img {
1070	+ border: 2px solid #ccc;
1071	+ }
1072	+
1073	+ #customify_import_demo_data_button {
1074	+ width: 70%;
1075	+ text-align: center;
1076	+ padding: 10px;
1077	+ display: inline-block;
1078	+ height: auto;
1079	+ margin: 0 15% 10% 15%;
1080	+ }
1081	+
1082	+ .import_step_note {
1083	+ margin: 5px;
1084	+ width: 100%;
1085	+ display: inline-block;
1086	+ }
1087	+
1088	+ .import_step_note:before {
1089	+ content: "\1F449";
1090	+ }
1091	+
1092	+ .import_step_note.success:before {
1093	+ content: "\1F44D";
1094	+ }
1095	+
1096	+ .import_step_note.failed:before {
1097	+ content: "\274C";
1098	+ }
1099	+
1100	+ #customize-header-actions {
1101	+ background: #ffffff;
1102	+ border-color: #e0e8ef;
1103	+ }
1104	+
1105	+ .wp-full-overlay-sidebar,
1106	+ .customize-themes-panel,
1107	+ #customize-sidebar-outer-content {
1108	+ background: #eaf9fe;
1109	+ border-right: 1px solid #e0e8ef;
1110	+ }
1111	+
1112	+ .outer-section-open #customize-controls .wp-full-overlay-sidebar-content,
1113	+ .attachment-media-view, .media-widget-preview.media_audio, .media-widget-preview.media_image {
1114	+ background: #eaf9fe;
1115	+ }
1116	+
1117	+ #customize-theme-controls #accordion-section-menu_locations {
1118	+ border-bottom: 1px solid #e0e8ef;
1119	+ }
1120	+
1121	+ #customize-controls #accordion-section-themes > .accordion-section-title {
1122	+ font-weight: 600;
1123	+ border-bottom: 1px solid #e0e8ef;
1124	+ }
1125	+
1126	+ #customize-controls #accordion-section-themes > .accordion-section-title:hover {
1127	+ background: #fff;
1128	+ }
1129	+
1130	+ #customize-controls .panel-meta.customize-info {
1131	+ border-bottom-color: #e0e8ef;
1132	+ }
1133	+
1134	+ #customize-theme-controls .control-section .accordion-section-title {
1135	+ font-weight: 400;
1136	+ border-top: 1px solid #e0e8ef;
1137	+ border-bottom: none;
1138	+ }
1139	+
1140	+ #customize-theme-controls .control-section:last-of-type > .accordion-section-title {
1141	+ border-bottom: 1px solid #e0e8ef;
1142	+ }
1143	+
1144	+ #customize-theme-controls .customize-section-title {
1145	+ border-top: 1px solid #e0e8ef;
1146	+ border-bottom: 1px solid #e0e8ef;
1147	+ }
1148	+
1149	+ #customize-controls .control-section .accordion-section-title:focus, #customize-controls .control-section .accordion-section-title:hover, #customize-controls .control-section.open .accordion-section-title, #customize-controls .control-section:hover > .accordion-section-title {
1150	+ color: #056184;
1151	+ background: #f5fcff;
1152	+ border-left-color: #f5fcff;
1153	+ }
1154	+
1155	+ .wp-customizer {
1156	+ /* SECTION: NAV MENUS */
1157	+ }
1158	+
1159	+ .wp-customizer .menu-item-edit-active .menu-item-handle, .wp-customizer .section-open .menu-item-settings, .wp-customizer .menu-item-bar .menu-item-handle:hover {
1160	+ border-color: #e0e8ef;
1161	+ }
1162	+
1163	+ .wp-customizer .section-open .menu-item-settings {
1164	+ background: #f5fcff;
1165	+ }
1166	+
1167	+ .wp-customizer .control-section-nav_menu .menu-location-settings {
1168	+ border-top-color: #e0e8ef !important;
1169	+ }
1170	+
1171	+ [data-balloon] {
1172	+ position: relative;
1173	+ }
1174	+
1175	+ [data-balloon]::before {
1176	+ opacity: 0;
1177	+ pointer-events: none;
1178	+ transition: all .18s ease-out;
1179	+ background: rgba(17, 17, 17, 0.9);
1180	+ border-radius: 4px;
1181	+ color: #fff;
1182	+ content: attr(data-balloon);
1183	+ font-size: 12px;
1184	+ padding: .5em 1em;
1185	+ position: absolute;
1186	+ white-space: nowrap;
1187	+ z-index: 10;
1188	+ }
1189	+
1190	+ [data-balloon]::after {
1191	+ background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(0)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
1192	+ background-size: 100% auto;
1193	+ width: 18px;
1194	+ height: 6px;
1195	+ opacity: 0;
1196	+ pointer-events: none;
1197	+ transition: all .18s ease-out;
1198	+ content: '';
1199	+ position: absolute;
1200	+ z-index: 10;
1201	+ }
1202	+
1203	+ [data-balloon]:hover::before, [data-balloon]:hover::after {
1204	+ opacity: 1;
1205	+ pointer-events: auto;
1206	+ }
1207	+
1208	+ [data-balloon][data-balloon-pos="up"]::before {
1209	+ bottom: 100%;
1210	+ left: 50%;
1211	+ margin-bottom: 11px;
1212	+ -webkit-transform: translate3d(-50%, 10px, 0);
1213	+ transform: translate3d(-50%, 10px, 0);
1214	+ -webkit-transform-origin: top;
1215	+ transform-origin: top;
1216	+ }
1217	+
1218	+ [data-balloon][data-balloon-pos="up"]::after {
1219	+ bottom: 100%;
1220	+ left: 50%;
1221	+ margin-bottom: 5px;
1222	+ -webkit-transform: translate3d(-50%, 10px, 0);
1223	+ transform: translate3d(-50%, 10px, 0);
1224	+ -webkit-transform-origin: top;
1225	+ transform-origin: top;
1226	+ }
1227	+
1228	+ [data-balloon][data-balloon-pos="up"]:hover::before {
1229	+ -webkit-transform: translate3d(-50%, 0, 0);
1230	+ transform: translate3d(-50%, 0, 0);
1231	+ }
1232	+
1233	+ [data-balloon][data-balloon-pos="up"]:hover::after {
1234	+ -webkit-transform: translate3d(-50%, 0, 0);
1235	+ transform: translate3d(-50%, 0, 0);
1236	+ }
1237	+
1238	+ [data-balloon][data-balloon-pos='down']::before {
1239	+ left: 50%;
1240	+ margin-top: 11px;
1241	+ top: 100%;
1242	+ -webkit-transform: translate3d(-50%, -10px, 0);
1243	+ transform: translate3d(-50%, -10px, 0);
1244	+ }
1245	+
1246	+ [data-balloon][data-balloon-pos='down']::after {
1247	+ background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(180 18 6)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
1248	+ background-size: 100% auto;
1249	+ width: 18px;
1250	+ height: 6px;
1251	+ left: 50%;
1252	+ margin-top: 5px;
1253	+ top: 100%;
1254	+ -webkit-transform: translate3d(-50%, -10px, 0);
1255	+ transform: translate3d(-50%, -10px, 0);
1256	+ }
1257	+
1258	+ [data-balloon][data-balloon-pos='down']:hover::before {
1259	+ -webkit-transform: translate3d(-50%, 0, 0);
1260	+ transform: translate3d(-50%, 0, 0);
1261	+ }
1262	+
1263	+ [data-balloon][data-balloon-pos='down']:hover::after {
1264	+ -webkit-transform: translate3d(-50%, 0, 0);
1265	+ transform: translate3d(-50%, 0, 0);
1266	+ }
1267	+
1268	+ [data-balloon][data-balloon-pos='left']::before {
1269	+ margin-right: 11px;
1270	+ right: 100%;
1271	+ top: 50%;
1272	+ -webkit-transform: translate3d(10px, -50%, 0);
1273	+ transform: translate3d(10px, -50%, 0);
1274	+ }
1275	+
1276	+ [data-balloon][data-balloon-pos='left']::after {
1277	+ background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="36px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(-90 18 18)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
1278	+ background-size: 100% auto;
1279	+ width: 6px;
1280	+ height: 18px;
1281	+ margin-right: 5px;
1282	+ right: 100%;
1283	+ top: 50%;
1284	+ -webkit-transform: translate3d(10px, -50%, 0);
1285	+ transform: translate3d(10px, -50%, 0);
1286	+ }
1287	+
1288	+ [data-balloon][data-balloon-pos='left']:hover::before {
1289	+ -webkit-transform: translate3d(0, -50%, 0);
1290	+ transform: translate3d(0, -50%, 0);
1291	+ }
1292	+
1293	+ [data-balloon][data-balloon-pos='left']:hover::after {
1294	+ -webkit-transform: translate3d(0, -50%, 0);
1295	+ transform: translate3d(0, -50%, 0);
1296	+ }
1297	+
1298	+ [data-balloon][data-balloon-pos='right']::before {
1299	+ left: 100%;
1300	+ margin-left: 11px;
1301	+ top: 50%;
1302	+ -webkit-transform: translate3d(-10px, -50%, 0);
1303	+ transform: translate3d(-10px, -50%, 0);
1304	+ }
1305	+
1306	+ [data-balloon][data-balloon-pos='right']::after {
1307	+ background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="36px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(90 6 6)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
1308	+ background-size: 100% auto;
1309	+ width: 6px;
1310	+ height: 18px;
1311	+ left: 100%;
1312	+ margin-left: 5px;
1313	+ top: 50%;
1314	+ -webkit-transform: translate3d(-10px, -50%, 0);
1315	+ transform: translate3d(-10px, -50%, 0);
1316	+ }
1317	+
1318	+ [data-balloon][data-balloon-pos='right']:hover::before {
1319	+ -webkit-transform: translate3d(0, -50%, 0);
1320	+ transform: translate3d(0, -50%, 0);
1321	+ }
1322	+
1323	+ [data-balloon][data-balloon-pos='right']:hover::after {
1324	+ -webkit-transform: translate3d(0, -50%, 0);
1325	+ transform: translate3d(0, -50%, 0);
1326	+ }
1327	+
1328	+ [data-balloon][data-balloon-length='small']::before {
1329	+ white-space: normal;
1330	+ width: 80px;
1331	+ }
1332	+
1333	+ [data-balloon][data-balloon-length='medium']::before {
1334	+ white-space: normal;
1335	+ width: 150px;
1336	+ }
1337	+
1338	+ [data-balloon][data-balloon-length='large']::before {
1339	+ white-space: normal;
1340	+ width: 260px;
1341	+ }
1342	+
1343	+ [data-balloon][data-balloon-length='xlarge']::before {
1344	+ white-space: normal;
1345	+ width: 380px;
1346	+ }
1347	+
1348	+ @media screen and (max-width: 768px) {
1349	+ [data-balloon][data-balloon-length='xlarge']::before {
1350	white-space: normal;
1351	+ width: 90vw;
1352	+ }
1353	+ }
1354	+
1355	+ [data-balloon][data-balloon-length='fit']::before {
1356	+ white-space: normal;
1357	+ width: 100%;
1358	+ }
1359	+
1360	+ /* ==========================================================================
1361	+ #FEEDBACK MODAL
1362	+ ========================================================================== */
1363	+ body.modal-open {
1364	+ overflow: hidden;
1365	+ }
1366	+
1367	+ body.modal-open #style-manager-user-feedback-modal .modal {
1368	+ overflow-x: hidden;
1369	+ overflow-y: auto;
1370	+ visibility: visible;
1371	+ opacity: 1;
1372	+ -webkit-transform: translate(0, 0);
1373	+ transform: translate(0, 0);
1374	+ }
1375	+
1376	+ #style-manager-user-feedback-modal {
1377	+ height: 100%;
1378	+ }
1379	+
1380	+ #style-manager-user-feedback-modal .modal {
1381	+ position: relative;
1382	+ height: 100%;
1383	+ display: -ms-flexbox;
1384	+ display: flex;
1385	+ -ms-flex-align: center;
1386	+ align-items: center;
1387	+ top: 0;
1388	+ right: 0;
1389	+ bottom: 0;
1390	+ left: 0;
1391	+ z-index: 1050;
1392	+ opacity: 0;
1393	+ visibility: hidden;
1394	+ overflow: hidden;
1395	+ outline: 0;
1396	+ transition: all .3s ease;
1397	+ -webkit-transform: translate(0, -10%);
1398	+ transform: translate(0, -10%);
1399	+ font-family: 'Galano Grotesque Alt', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
1400	+ font-weight: 400;
1401	+ font-size: 16px;
1402	+ line-height: 1.7;
1403	+ }
1404	+
1405	+ #style-manager-user-feedback-modal .modal-dialog {
1406	+ position: relative;
1407	+ width: auto;
1408	+ margin: 10px;
1409	+ text-align: left;
1410	+ }
1411	+
1412	+ #style-manager-user-feedback-modal .modal-content {
1413	+ position: relative;
1414	+ display: -ms-flexbox;
1415	+ display: flex;
1416	+ -ms-flex-direction: column;
1417	+ flex-direction: column;
1418	+ background-color: #fff;
1419	+ background-clip: padding-box;
1420	+ border: none;
1421	+ border-radius: 4px;
1422	+ box-shadow: 0 4px 4px 0 rgba(42, 54, 52, 0.1), 0 8px 8px 0 rgba(42, 54, 52, 0.1), 0 16px 16px 0 rgba(42, 54, 52, 0.1), 0 16px 32px 0 rgba(42, 54, 52, 0.1), 0 32px 64px 0 rgba(42, 54, 52, 0.1), 0 64px 128px 0 rgba(42, 54, 52, 0.1);
1423	+ outline: 0;
1424	+ }
1425	+
1426	+ #style-manager-user-feedback-modal .modal-content p {
1427	+ color: #000;
1428	+ }
1429	+
1430	+ #style-manager-user-feedback-modal .modal-content p a {
1431	+ font-weight: 500;
1432	+ color: #9660C6;
1433	+ border-bottom: 1px solid #9660C6;
1434	+ }
1435	+
1436	+ #style-manager-user-feedback-modal .modal-content > form {
1437	+ margin-bottom: 20px;
1438	+ }
1439	+
1440	+ #style-manager-user-feedback-modal .modal-backdrop {
1441	+ position: fixed;
1442	+ top: 0;
1443	+ right: 0;
1444	+ bottom: 0;
1445	+ left: 0;
1446	+ z-index: 1040;
1447	+ background-color: #000;
1448	+ opacity: 0;
1449	+ visibility: hidden;
1450	+ transition: all 0.3s ease;
1451	+ }
1452	+
1453	+ .modal-open #style-manager-user-feedback-modal .modal-backdrop {
1454	+ opacity: 0.8;
1455	+ visibility: visible;
1456	+ }
1457	+
1458	+ #style-manager-user-feedback-modal .modal-header {
1459	+ display: -ms-flexbox;
1460	+ display: flex;
1461	+ -ms-flex-align: start;
1462	+ align-items: flex-start;
1463	+ -ms-flex-pack: justify;
1464	+ justify-content: space-between;
1465	+ padding: 30px 48px 10px 48px;
1466	+ }
1467	+
1468	+ #style-manager-user-feedback-modal .modal-header .close.button {
1469	+ top: -10px;
1470	+ }
1471	+
1472	+ #style-manager-user-feedback-modal .modal-header .close.icon {
1473	+ opacity: 0.5;
1474	+ }
1475	+
1476	+ #style-manager-user-feedback-modal .modal-header .close:hover {
1477	+ opacity: 1;
1478	+ }
1479	+
1480	+ #style-manager-user-feedback-modal .modal-title {
1481	+ margin-bottom: 10px;
1482	+ line-height: 1.5;
1483	+ }
1484	+
1485	+ #style-manager-user-feedback-modal .modal-title.modal-title--small {
1486	+ font-weight: 500;
1487	+ }
1488	+
1489	+ #style-manager-user-feedback-modal .modal-body {
1490	+ position: relative;
1491	+ -ms-flex: 1 1 auto;
1492	+ flex: 1 1 auto;
1493	+ padding: 30px 30px 0 30px;
1494	+ }
1495	+
1496	+ #style-manager-user-feedback-modal .modal-body.full {
1497	+ padding: 0;
1498	+ }
1499	+
1500	+ #style-manager-user-feedback-modal .modal-body.full .box {
1501	+ padding-top: 0;
1502	+ padding-bottom: 0;
1503	+ margin-top: 0;
1504	+ }
1505	+
1506	+ #style-manager-user-feedback-modal .modal-body.full + .modal-footer.full .box {
1507	+ padding-top: 18px;
1508	+ }
1509	+
1510	+ #style-manager-user-feedback-modal .modal-footer {
1511	+ padding: 30px;
1512	+ text-align: center;
1513	+ }
1514	+
1515	+ #style-manager-user-feedback-modal .modal-footer .box .button:last-child {
1516	+ margin-bottom: 0;
1517	+ }
1518	+
1519	+ #style-manager-user-feedback-modal .modal-footer.full {
1520	+ padding: 0;
1521	+ }
1522	+
1523	+ #style-manager-user-feedback-modal .modal-scrollbar-measure {
1524	+ position: absolute;
1525	+ top: -9999px;
1526	+ width: 50px;
1527	+ height: 50px;
1528	+ overflow: scroll;
1529	+ }
1530	+
1531	+ #style-manager-user-feedback-modal .modal-state {
1532	+ display: none;
1533	+ }
1534	+
1535	+ #style-manager-user-feedback-modal .modal-state:checked + .modal {
1536	+ opacity: 1;
1537	+ visibility: visible;
1538	+ }
1539	+
1540	+ #style-manager-user-feedback-modal .modal-state:checked + .modal .modal__inner {
1541	+ top: 0;
1542	+ }
1543	+
1544	+ @media (min-width: 576px) {
1545	+ #style-manager-user-feedback-modal .modal-dialog {
1546	+ max-width: 655px;
1547	+ margin: 30px auto;
1548	+ }
1549	+ #style-manager-user-feedback-modal .modal-sm {
1550	+ max-width: 300px;
1551	+ }
1552	+ }
1553	+
1554	+ @media (min-width: 576px) {
1555	+ #style-manager-user-feedback-modal .modal-lg {
1556	+ max-width: 800px;
1557	+ }
1558	+ }
1559	+
1560	+ #style-manager-user-feedback .modal-body .box {
1561	+ position: relative;
1562	+ -ms-flex-direction: column;
1563	+ flex-direction: column;
1564	+ display: -ms-flexbox;
1565	+ display: flex;
1566	+ -ms-flex-wrap: nowrap;
1567	+ flex-wrap: nowrap;
1568	+ -ms-flex-align: center;
1569	+ align-items: center;
1570	+ margin: 20px 0;
1571	+ padding: 16px 52px;
1572	+ border-radius: 4px;
1573	+ }
1574	+
1575	+ #style-manager-user-feedback .modal-body .box > * {
1576	+ width: 100%;
1577	+ }
1578	+
1579	+ #style-manager-user-feedback .modal-body p {
1580	+ font-size: 16px;
1581	+ margin-bottom: 20px;
1582	+ }
1583	+
1584	+ #style-manager-user-feedback .modal-body textarea {
1585	+ width: 100%;
1586	+ margin: 0;
1587	+ padding: 11px 18px;
1588	+ border: 1px solid #dddddd;
1589	+ border-radius: 4px;
1590	+ box-shadow: none;
1591	+ font-family: 'Galano Grotesque Alt', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
1592	+ font-size: 16px;
1593	+ line-height: 26px;
1594	+ color: #473850;
1595	+ }
1596	+
1597	+ #style-manager-user-feedback .modal-title {
1598	+ margin-top: 0;
1599	+ margin-bottom: 34px;
1600	+ font-family: 'Galano Classic', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
1601	+ font-weight: 600;
1602	+ font-size: 28px;
1603	+ line-height: 1.4;
1604	+ text-align: center;
1605	+ }
1606	+
1607	+ #style-manager-user-feedback .button {
1608	+ text-decoration: none;
1609	+ cursor: pointer;
1610	+ -webkit-font-smoothing: antialiased;
1611	+ position: relative;
1612	+ transition-duration: .2s;
1613	+ transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
1614	+ transition-property: -webkit-transform,background,background-color,color,box-shadow;
1615	+ transition-property: transform,background,background-color,color,box-shadow;
1616	+ display: inline-block;
1617	+ padding: 15px 50px;
1618	+ border-radius: 2px;
1619	+ font-family: "Galano Classic", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
1620	+ font-size: 16px;
1621	+ line-height: 23px;
1622	+ font-weight: 600;
1623	+ text-align: center;
1624	+ background-color: #9660c6;
1625	+ color: #ffffff;
1626	+ border-radius: 4px;
1627	+ box-shadow: none;
1628	+ height: auto;
1629	+ width: 100%;
1630	+ margin-top: 20px;
1631	+ }
1632	+
1633	+ #style-manager-user-feedback .button:hover {
1634	+ background-color: #9660c6;
1635	+ color: #ffffff;
1636	+ -webkit-transform: scale(1.05) translateY(-3px);
1637	+ transform: scale(1.05) translateY(-3px);
1638	+ box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.7);
1639	+ }
1640	+
1641	+ #style-manager-user-feedback .second-step {
1642	+ margin-top: 18px;
1643	+ }
1644	+
1645	+ #style-manager-user-feedback .thanks-step,
1646	+ #style-manager-user-feedback .error-step {
1647	+ text-align: center;
1648	+ }
1649	+
1650	+ #style-manager-user-feedback .thanks-step .modal-title,
1651	+ #style-manager-user-feedback .error-step .modal-title {
1652	+ margin-bottom: 0;
1653	+ }
1654	+
1655	+ #style-manager-user-feedback .thanks-step p:last-child,
1656	+ #style-manager-user-feedback .error-step p:last-child {
1657	+ margin-bottom: 10px;
1658	+ }
1659	+
1660	+ .scorecard {
1661	+ display: -ms-flexbox;
1662	+ display: flex;
1663	+ -ms-flex-align: baseline;
1664	+ align-items: baseline;
1665	+ -ms-flex-pack: space-evenly;
1666	+ justify-content: space-evenly;
1667	+ color: #9660C6;
1668	+ font-family: "Galano Classic", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
1669	+ font-size: 18px;
1670	+ font-weight: 600;
1671	+ text-align: center;
1672	+ }
1673	+
1674	+ .scorecard > label {
1675	+ font-size: 20px;
1676	+ }
1677	+
1678	+ .scorecard > label span {
1679	+ display: block;
1680	+ width: 46px;
1681	+ border: 2px solid #9660C6;
1682	+ line-height: 46px;
1683	+ border-radius: 100%;
1684	+ background: #FFF;
1685	+ transition: all 0.25s ease;
1686	+ }
1687	+
1688	+ .scorecard > label input[type="radio"] {
1689	+ display: none;
1690	+ }
1691	+
1692	+ .scorecard > label span:hover,
1693	+ .scorecard > label input[type="radio"]:checked ~ span {
1694	+ background: #9660C6;
1695	+ color: #FFF;
1696	+ }
1697	+
1698	+ .font-options__wrapper .font-options__options-list {
1699	+ border-color: #B8DAEB;
1700	+ box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
1701	+ }
1702	+
1703	+ .font-options__wrapper .font-options__option {
1704	+ margin-bottom: 12px;
1705	+ }
1706	+
1707	+ .font-options__wrapper .font-options__option label {
1708	+ display: block;
1709	+ margin-bottom: 6px;
1710	+ }
1711	+
1712	+ .font-options__wrapper [type=checkbox]:checked ~ .font-options__options-list {
1713	+ opacity: 1;
1714	+ display: block;
1715	+ }
1716	+
1717	+ input.customify_font_tooltip {
1718	+ display: none;
1719	+ }
1720	+
1721	+ ul.font-options__options-list .select2-container {
1722	+ width: 100% !important;
1723	+ }
1724	+
1725	+ ul.font-options__options-list .select2-container .select2-selection--single {
1726	+ -webkit-appearance: initial;
1727	+ }
1728	+
1729	+ ul.font-options__options-list .select2-container .select2-selection--single .select2-selection__arrow {
1730	+ display: none;
1731	+ }
1732	+
1733	+ ul.font-options__options-list .select2-container--default .select2-selection--single .select2-selection__rendered {
1734	+ color: inherit;
1735	+ line-height: initial;
1736	+ }
1737	+
1738	+ .select2-container.select2-container--open {
1739	+ z-index: 99999999;
1740	+ }
1741	+
1742	+ #customize-theme-controls .select2-container {
1743	+ width: 100% !important;
1744	+ }
1745	+
1746	+ #customize-theme-controls .select2-container .select2-selection--multiple {
1747	+ -webkit-appearance: initial;
1748	+ padding: 4px 8px 4px;
1749	+ height: auto;
1750	+ background: none;
1751	+ }
1752	+
1753	+ #customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__arrow {
1754	+ display: none;
1755	+ }
1756	+
1757	+ #customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered {
1758	+ padding: 0;
1759	+ display: -ms-flexbox;
1760	+ display: flex;
1761	+ }
1762	+
1763	+ #customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered .select2-search--inline {
1764	+ -ms-flex: 1;
1765	+ flex: 1;
1766	+ }
1767	+
1768	+ #customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered .select2-search--inline .select2-search__field[class] {
1769	+ min-width: 100%;
1770	+ border-width: 0;
1771	+ margin-top: 3px !important;
1772	+ }
1773	+
1774	+ #customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
1775	+ padding: 3px 7px;
1776	+ margin-right: 6px;
1777	+ margin-top: 0px;
1778	+ border-color: #e0e8ef;
1779	+ background-color: #f6fbff;
1780	+ }
1781	+
1782	+ #customize-theme-controls .select2-container .select2-search--inline .select2-search__field {
1783	+ height: 29px;
1784	+ min-width: 9em;
1785	+ margin-top: 0;
1786	+ }
1787	+
1788	+ .select2-container--default .select2-results__option[aria-selected=true][class] {
1789	+ background: transparent;
1790	+ opacity: 0.3;
1791	+ pointer-events: none;
1792	+ }
1793	+
1794	+ .select2-container .select2-dropdown {
1795	+ border-color: #e0e8ef;
1796	+ }
1797	+
1798	+ #customize-theme-controls .widget-content .accordion-container {
1799	+ margin-left: -10px;
1800	+ margin-right: -10px;
1801	+ margin-top: 20px;
1802	+ margin-bottom: 10px;
1803	+ }
1804	+
1805	+ #customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-content {
1806	+ position: relative;
1807	+ left: 0;
1808	+ max-height: 0;
1809	+ padding-top: 0;
1810	+ padding-bottom: 0;
1811	+ overflow: hidden;
1812	+ transition: all .4s ease;
1813	+ color: #416B7E;
1814	+ }
1815	+
1816	+ #customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-content p:first-child {
1817	+ margin-top: 0;
1818	+ }
1819	+
1820	+ #customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-content p:last-child {
1821	+ margin-bottom: 0;
1822	+ }
1823	+
1824	+ #customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-title {
1825	+ color: #39474D;
1826	+ }
1827	+
1828	+ #customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-title:after {
1829	+ content: "\f142";
1830	+ -webkit-transform: rotate(180deg);
1831	+ transform: rotate(180deg);
1832	+ }
1833	+
1834	+ #customize-theme-controls .widget-content .accordion-container .accordion-section.open {
1835	+ border-bottom: none;
1836	+ }
1837	+
1838	+ #customize-theme-controls .widget-content .accordion-container .accordion-section.open .accordion-section-content {
1839	+ max-height: 100%;
1840	+ padding-top: 17px;
1841	+ padding-bottom: 17px;
1842	+ }
1843	+
1844	+ #customize-theme-controls .widget-content .accordion-container .accordion-section.open .accordion-section-title {
1845	+ border-bottom: 1px solid;
1846	+ }
1847	+
1848	+ #customize-theme-controls .widget-content .accordion-container .accordion-section.open .accordion-section-title:after {
1849	+ -webkit-transform: rotate(0deg);
1850	+ transform: rotate(0deg);
1851	+ }
1852	+
1853	+ #customize-theme-controls .widget-content .accordion-container label.customize-control-title, #customize-theme-controls .widget-content .accordion-container label.separator.label {
1854	+ cursor: default;
1855	+ }
1856	+
1857	+ .widget .widget-content > p input[type=checkbox],
1858	+ .widget .widget-content > p input[type=radio] {
1859	+ margin-bottom: 3px;
1860	+ margin-top: 3px;
1861	+ }
1862	+
1863	+ .widget .widget-content small {
1864	+ margin-top: 5px;
1865	+ display: block;
1866	+ }
1867	+
1868	+ #available-widgets [class*=pixelgrade] .widget .widget-title:before,
1869	+ #available-widgets [class*=featured-posts] .widget .widget-title:before,
1870	+ #available-widgets [class*=categories-image-grid] .widget .widget-title:before {
1871	+ content: "\f538";
1872	+ color: #9660c6;
1873	+ }
1874	+
1875	+ #available-widgets [class*=pixelgrade-featured-posts-slideshow] .widget .widget-title:before {
1876	+ content: "\f233";
1877	+ }
1878	+
1879	+ #available-widgets [class*=pixelgrade-featured-posts-carousel] .widget .widget-title:before {
1880	+ content: "\f169";
1881	+ }
1882	+
1883	+ #available-widgets [class*=featured-posts-grid] .widget .widget-title:before {
1884	+ content: "\f180";
1885	+ }
1886	+
1887	+ #available-widgets [class*=featured-posts-list] .widget .widget-title:before {
1888	+ content: "\f164";
1889	+ }
1890	+
1891	+ #available-widgets [class*=categories-image-grid] .widget .widget-title:before {
1892	+ content: "\f163";
1893	+ }
1894	+
1895	+ #available-widgets [class*=pixelgrade-promo-box] .widget .widget-title:before {
1896	+ content: "\f488";
1897	+ }
1898	+
1899	+ .ui-tooltip {
1900	+ z-index: 999999;
1901	+ }
1902	+
1903	+ .wp-customizer .widget-conditional .condition-control:after {
1904	+ content: " ";
1905	+ display: table;
1906	+ clear: both;
1907	+ }
1908	+
1909	+ .wp-customizer .widget-conditional .selection {
1910	+ padding-right: 50px;
1911	+ padding-left: 28px;
1912	+ padding-bottom: 19px;
1913	+ margin-left: 0;
1914	+ margin-right: 0;
1915	+ margin-bottom: 10px;
1916	+ border-bottom: 1px solid #cbcfd4;
1917	+ }
1918	+
1919	+ .wp-customizer .widget-conditional .condition:last-child .selection {
1920	+ border: 0;
1921	+ }
1922	+
1923	+ .wp-customizer .widget-conditional select {
1924	+ max-width: 100%;
1925	+ width: 170px;
1926	+ }
1927	+
1928	+ .wp-customizer .widget-conditional .condition-top select {
1929	+ width: 130px;
1930	+ }
1931	+
1932	+ .pix_customizer_setting .customize-inside-control-row {
1933	+ position: relative;
1934	+ width: 100% !important;
1935	+ margin-left: 0 !important;
1936	+ text-indent: 0 !important;
1937	+ background-size: cover;
1938	+ background-position: 50% 50%;
1939	+ height: 64px;
1940	+ border-radius: 5px;
1941	+ overflow: hidden;
1942	+ }
1943	+
1944	+ .pix_customizer_setting .customize-inside-control-row:before {
1945	+ content: '';
1946	+ position: absolute;
1947	+ top: 0;
1948	+ bottom: 0;
1949	+ left: 0;
1950	+ right: 0;
1951	+ z-index: 10;
1952	+ pointer-events: none;
1953	+ box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15), inset 0 1px 3px 0 rgba(0, 0, 0, 0.15);
1954	+ }
1955	+
1956	+ .pix_customizer_setting .customize-inside-control-row:hover:before {
1957	+ box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.15), inset 0 0 3px 0 rgba(0, 0, 0, 0.15);
1958	+ }
1959	+
1960	+ .pix_customizer_setting .customize-inside-control-row:hover .palette__item {
1961	+ -webkit-transform: translateY(0%);
1962	+ transform: translateY(0%);
1963	+ }
1964	+
1965	+ .pix_customizer_setting .customize-inside-control-row:hover label {
1966	+ left: 10px;
1967	+ }
1968	+
1969	+ .pix_customizer_setting .customize-inside-control-row input {
1970	+ opacity: 0;
1971	+ }
1972	+
1973	+ .pix_customizer_setting .customize-inside-control-row input:checked + label .preview__letter--checked {
1974	+ display: inline-block;
1975	+ vertical-align: middle;
1976	+ }
1977	+
1978	+ .pix_customizer_setting .customize-inside-control-row input:checked + label .preview__letter {
1979	+ display: none;
1980	+ }
1981	+
1982	+ .pix_customizer_setting .customize-inside-control-row label {
1983	+ position: absolute;
1984	+ display: -ms-flexbox;
1985	+ display: flex;
1986	+ z-index: 2;
1987	+ width: 100%;
1988	+ height: 100%;
1989	+ top: 0;
1990	+ left: 0;
1991	+ padding: 0 10px;
1992	+ margin-top: 0 !important;
1993	+ -ms-flex-align: center;
1994	+ align-items: center;
1995	+ transition: all .3s ease;
1996	+ }
1997	+
1998	+ .pix_customizer_setting .customize-inside-control-row .palette {
1999	+ position: absolute;
2000	+ display: -ms-flexbox;
2001	+ display: flex;
2002	+ top: 0;
2003	+ left: 0;
2004	+ z-index: 1;
2005	+ width: 100%;
2006	+ height: 100%;
2007	+ transition: all .2s ease;
2008	+ }
2009	+
2010	+ .pix_customizer_setting .customize-inside-control-row .palette__item {
2011	+ -ms-flex: 1;
2012	+ flex: 1;
2013	+ -webkit-transform: translateY(100%);
2014	+ transform: translateY(100%);
2015	+ transition: all .3s ease;
2016	+ }
2017	+
2018	+ .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(1) {
2019	+ transition-delay: 0s;
2020	+ }
2021	+
2022	+ .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(2) {
2023	+ transition-delay: 0.05s;
2024	+ }
2025	+
2026	+ .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(3) {
2027	+ transition-delay: 0.1s;
2028	+ }
2029	+
2030	+ .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(4) {
2031	+ transition-delay: 0.15s;
2032	+ }
2033	+
2034	+ .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(5) {
2035	+ transition-delay: 0.2s;
2036	+ }
2037	+
2038	+ .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(6) {
2039	+ transition-delay: 0.25s;
2040	+ }
2041	+
2042	+ .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(7) {
2043	+ transition-delay: 0.3s;
2044	+ }
2045	+
2046	+ .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(8) {
2047	+ transition-delay: 0.35s;
2048	+ }
2049	+
2050	+ .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(9) {
2051	+ transition-delay: 0.4s;
2052	+ }
2053	+
2054	+ .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(10) {
2055	+ transition-delay: 0.45s;
2056	+ }
2057	+
2058	+ .pix_customizer_setting .customize-inside-control-row .preview__letter,
2059	+ .pix_customizer_setting .customize-inside-control-row .preview__letter--checked {
2060	+ display: inline-block;
2061	+ padding: 3px;
2062	+ border-radius: 2px;
2063	+ color: white;
2064	+ margin-right: 5px;
2065	+ min-height: 26px;
2066	+ min-width: 26px;
2067	+ text-align: center;
2068	+ background-position: center center;
2069	+ background-repeat: no-repeat;
2070	+ background-size: 15px 15px;
2071	+ font-style: normal;
2072	+ vertical-align: baseline;
2073	+ }
2074	+
2075	+ .pix_customizer_setting .customize-inside-control-row .preview__letter--checked {
2076	+ display: none;
2077	+ }
2078	+
2079	+ [id*="sm_current_color_palette_control"] .customize-inside-control-row .palette__item[class] {
2080	+ -webkit-transform: none;
2081	+ transform: none;
2082	+ }
2083	+
2084	+ [id*="sm_current_color_palette_control"] .variation-control {
2085	+ display: -ms-flexbox;
2086	+ display: flex;
2087	+ }
2088	+
2089	+ [id="customize-control-sm_color_primary_control"],
2090	+ [id="customize-control-sm_dark_primary_control"],
2091	+ [id="customize-control-sm_light_primary_control"],
2092	+ [id="customize-control-sm_color_secondary_control"],
2093	+ [id="customize-control-sm_dark_secondary_control"],
2094	+ [id="customize-control-sm_light_secondary_control"],
2095	+ [id="customize-control-sm_color_tertiary_control"],
2096	+ [id="customize-control-sm_dark_tertiary_control"],
2097	+ [id="customize-control-sm_light_tertiary_control"] {
2098	+ visibility: hidden;
2099	+ }
2100	+
2101	+ [id="customize-control-sm_color_primary_control"] > span,
2102	+ [id="customize-control-sm_dark_primary_control"] > span,
2103	+ [id="customize-control-sm_light_primary_control"] > span,
2104	+ [id="customize-control-sm_color_secondary_control"] > span,
2105	+ [id="customize-control-sm_dark_secondary_control"] > span,
2106	+ [id="customize-control-sm_light_secondary_control"] > span,
2107	+ [id="customize-control-sm_color_tertiary_control"] > span,
2108	+ [id="customize-control-sm_dark_tertiary_control"] > span,
2109	+ [id="customize-control-sm_light_tertiary_control"] > span {
2110	+ display: none;
2111	+ }
2112	+
2113	+ [id="customize-control-sm_color_primary_control"] .wp-picker-input-wrap,
2114	+ [id="customize-control-sm_color_primary_control"] .wp-picker-holder,
2115	+ [id="customize-control-sm_dark_primary_control"] .wp-picker-input-wrap,
2116	+ [id="customize-control-sm_dark_primary_control"] .wp-picker-holder,
2117	+ [id="customize-control-sm_light_primary_control"] .wp-picker-input-wrap,
2118	+ [id="customize-control-sm_light_primary_control"] .wp-picker-holder,
2119	+ [id="customize-control-sm_color_secondary_control"] .wp-picker-input-wrap,
2120	+ [id="customize-control-sm_color_secondary_control"] .wp-picker-holder,
2121	+ [id="customize-control-sm_dark_secondary_control"] .wp-picker-input-wrap,
2122	+ [id="customize-control-sm_dark_secondary_control"] .wp-picker-holder,
2123	+ [id="customize-control-sm_light_secondary_control"] .wp-picker-input-wrap,
2124	+ [id="customize-control-sm_light_secondary_control"] .wp-picker-holder,
2125	+ [id="customize-control-sm_color_tertiary_control"] .wp-picker-input-wrap,
2126	+ [id="customize-control-sm_color_tertiary_control"] .wp-picker-holder,
2127	+ [id="customize-control-sm_dark_tertiary_control"] .wp-picker-input-wrap,
2128	+ [id="customize-control-sm_dark_tertiary_control"] .wp-picker-holder,
2129	+ [id="customize-control-sm_light_tertiary_control"] .wp-picker-input-wrap,
2130	+ [id="customize-control-sm_light_tertiary_control"] .wp-picker-holder {
2131	+ visibility: visible;
2132	+ }
2133	+
2134	+ [id="customize-control-sm_color_primary_control"] .wp-picker-container,
2135	+ [id="customize-control-sm_dark_primary_control"] .wp-picker-container,
2136	+ [id="customize-control-sm_light_primary_control"] .wp-picker-container,
2137	+ [id="customize-control-sm_color_secondary_control"] .wp-picker-container,
2138	+ [id="customize-control-sm_dark_secondary_control"] .wp-picker-container,
2139	+ [id="customize-control-sm_light_secondary_control"] .wp-picker-container,
2140	+ [id="customize-control-sm_color_tertiary_control"] .wp-picker-container,
2141	+ [id="customize-control-sm_dark_tertiary_control"] .wp-picker-container,
2142	+ [id="customize-control-sm_light_tertiary_control"] .wp-picker-container {
2143	+ width: 100%;
2144	+ float: left;
2145	+ }
2146	+
2147	+ [id="customize-control-sm_color_primary_control"] .wp-picker-container button:before,
2148	+ [id="customize-control-sm_dark_primary_control"] .wp-picker-container button:before,
2149	+ [id="customize-control-sm_light_primary_control"] .wp-picker-container button:before,
2150	+ [id="customize-control-sm_color_secondary_control"] .wp-picker-container button:before,
2151	+ [id="customize-control-sm_dark_secondary_control"] .wp-picker-container button:before,
2152	+ [id="customize-control-sm_light_secondary_control"] .wp-picker-container button:before,
2153	+ [id="customize-control-sm_color_tertiary_control"] .wp-picker-container button:before,
2154	+ [id="customize-control-sm_dark_tertiary_control"] .wp-picker-container button:before,
2155	+ [id="customize-control-sm_light_tertiary_control"] .wp-picker-container button:before {
2156	+ content: "";
2157	+ position: relative;
2158	+ display: block;
2159	+ visibility: visible;
2160	+ background-color: inherit;
2161	+ width: 90px;
2162	+ height: 90px;
2163	+ border-radius: 50%;
2164	+ border: 3px solid #DDD;
2165	+ }
2166	+
2167	+ #customize-control-sm_color_palette_control ~ [id*="sm_color_secondary"] .wp-picker-container button:before {
2168	+ top: -54px;
2169	+ right: -70px;
2170	+ }
2171	+
2172	+ #customize-control-sm_color_palette_control ~ [id*="sm_color_tertiary"] .wp-picker-container button:before {
2173	+ top: -108px;
2174	+ right: -140px;
2175	+ }
2176	+
2177	+ #customize-control-sm_color_palette_control ~ [id*="sm_dark_primary"] .wp-picker-container button:before {
2178	+ top: -54px;
2179	+ }
2180	+
2181	+ #customize-control-sm_color_palette_control ~ [id*="sm_dark_secondary"] .wp-picker-container button:before {
2182	+ top: -108px;
2183	+ right: -70px;
2184	+ }
2185	+
2186	+ #customize-control-sm_color_palette_control ~ [id*="sm_dark_tertiary"] .wp-picker-container button:before {
2187	+ top: -162px;
2188	+ right: -140px;
2189	+ }
2190	+
2191	+ #customize-control-sm_color_palette_control ~ [id*="sm_light_primary"] .wp-picker-container button:before {
2192	+ top: -108px;
2193	+ }
2194	+
2195	+ #customize-control-sm_color_palette_control ~ [id*="sm_light_secondary"] .wp-picker-container button:before {
2196	+ top: -162px;
2197	+ right: -70px;
2198	+ }
2199	+
2200	+ #customize-control-sm_color_palette_control ~ [id*="sm_light_tertiary"] .wp-picker-container button:before {
2201	+ top: -216px;
2202	+ right: -140px;
2203	+ }
2204	+
2205	+ .c-color-palette {
2206	+ position: relative;
2207	+ }
2208	+
2209	+ .c-color-palette .c-color-palette__label {
2210	+ -ms-flex-positive: 1;
2211	+ flex-grow: 1;
2212	+ }
2213	+
2214	+ .c-color-palette:after {
2215	+ height: 64px;
2216	+ border-radius: 5px;
2217	+ }
2218	+
2219	+ .c-color-palette:after {
2220	+ content: "";
2221	+ display: block;
2222	+ position: absolute;
2223	+ top: 0;
2224	+ left: 0;
2225	+ right: 0;
2226	+ box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15), inset 0 1px 3px 0 rgba(0, 0, 0, 0.15);
2227	+ pointer-events: none;
2228	+ }
2229	+
2230	+ .label__inner {
2231	+ color: #000000;
2232	+ background: #F5F6F1;
2233	+ padding: 7px 12px 7px 7px;
2234	+ z-index: 2;
2235	+ border-radius: 3px;
2236	+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
2237	+ }
2238	+
2239	+ .c-color-palette__label {
2240	+ display: -ms-flexbox;
2241	+ display: flex;
2242	+ -ms-flex-align: center;
2243	+ align-items: center;
2244	+ height: 40px;
2245	+ padding: 12px;
2246	+ color: black;
2247	+ background: white;
2248	+ }
2249	+
2250	+ .colors {
2251	+ position: relative;
2252	+ display: -ms-flexbox;
2253	+ display: flex;
2254	+ -ms-flex-align: stretch;
2255	+ align-items: stretch;
2256	+ width: 100%;
2257	+ }
2258	+
2259	+ .fill {
2260	+ position: relative;
2261	+ height: 64px;
2262	+ margin-bottom: 1em;
2263	+ }
2264	+
2265	+ .c-color-palette__overlay {
2266	+ position: absolute;
2267	+ top: 0;
2268	+ left: 0;
2269	+ right: 0;
2270	+ height: 64px;
2271	+ display: -ms-flexbox;
2272	+ display: flex;
2273	+ -ms-flex-align: center;
2274	+ align-items: center;
2275	+ }
2276	+
2277	+ .fill:before {
2278	+ position: absolute;
2279	+ top: 0;
2280	+ left: 0;
2281	+ right: 0;
2282	+ bottom: 0;
2283	+ }
2284	+
2285	+ .fill:before {
2286	+ content: "";
2287	+ background: currentColor;
2288	+ }
2289
2290	+ .picker {
2291	+ position: relative;
2292	+ top: 0;
2293	+ left: 50%;
2294	+ width: 80%;
2295	+ max-width: 3em;
2296	+ margin-top: auto;
2297	+ margin-bottom: auto;
2298	+ border-radius: 50%;
2299	+ -webkit-transform: translate3d(-50%, 0, 0);
2300	+ transform: translate3d(-50%, 0, 0);
2301	+ }
2302
2303	+ .colors.next .picker > i {
2304	+ display: block;
2305	+ position: absolute;
2306	+ top: 0;
2307	+ right: 0;
2308	+ bottom: 0;
2309	+ left: 0;
2310	+ border-radius: 50%;
2311	+ box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15), inset 0 1px 3px 0 rgba(0, 0, 0, 0.15);
2312	+ pointer-events: none;
2313	+ z-index: 20;
2314	+ }








































































2315
2316	+ .picker:before,
2317	+ .picker:after {
2318	+ content: "";
2319	+ display: block;
2320	+ background: currentColor;
2321	+ border-radius: 50%;
2322	+ }















































































2323
2324	+ .picker:before {
2325	+ padding-top: 100%;
2326	+ }
2327	+
2328	+ .picker:after {
2329	+ position: absolute;
2330	+ top: 0;
2331	+ left: 0;
2332	+ width: 100%;
2333	+ height: 100%;
2334	+ }
2335	+
2336	+ .fill {
2337	+ overflow: hidden;
2338	+ }
2339	+
2340	+ .color:first-child .fill {
2341	+ border-top-left-radius: 5px;
2342	+ border-bottom-left-radius: 5px;
2343	+ }
2344	+
2345	+ .color:last-child .fill {
2346	+ border-top-right-radius: 5px;
2347	+ border-bottom-right-radius: 5px;
2348	+ }
2349	+
2350	+ .colors.next {
2351	+ position: absolute;
2352	+ top: 0;
2353	+ left: 0;
2354	+ }
2355	+
2356	+ .colors.next .fill:before {
2357	+ -webkit-transform: translateY(-100%);
2358	+ transform: translateY(-100%);
2359	+ }
2360	+
2361	+ .colors.next .picker:before {
2362	+ -webkit-transform: translateY(-100%);
2363	+ transform: translateY(-100%);
2364	+ opacity: 0;
2365	+ }
2366	+
2367	+ .colors.next .picker:after {
2368	+ opacity: 0;
2369	+ }
2370	+
2371	+ .c-color-palette.animate .next .fill:before {
2372	+ -webkit-animation: fill 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2373	+ animation: fill 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2374	+ }
2375	+
2376	+ .c-color-palette.animate .next .picker {
2377	+ -webkit-animation: picker-filter 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2378	+ animation: picker-filter 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2379	+ }
2380	+
2381	+ .c-color-palette.animate .next .picker:before {
2382	+ -webkit-animation: fill-picker-before 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2383	+ animation: fill-picker-before 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2384	+ }
2385	+
2386	+ .c-color-palette.animate .next .picker:after {
2387	+ -webkit-animation: fill-picker-after 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2388	+ animation: fill-picker-after 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2389	+ }
2390	+
2391	+ .c-color-palette.animate .current .fill,
2392	+ .c-color-palette.animate .current .picker {
2393	+ -webkit-animation: fade-out 1s forwards;
2394	+ animation: fade-out 1s forwards;
2395	+ }
2396	+
2397	+ .c-color-palette.animate .color:nth-child(1) .fill,





































































































































































































































































































































2398	.c-color-palette.animate .color:nth-child(1) .fill:before,
2399	.c-color-palette.animate .color:nth-child(1) .picker,
2400	.c-color-palette.animate .color:nth-child(1) .picker:after,
2401	+ .c-color-palette.animate .color:nth-child(1) .picker:before {
2402	+ -webkit-animation-delay: 0.1s;
2403	+ animation-delay: 0.1s;
2404	+ }
2405	+
2406	+ .c-color-palette.animate .color:nth-child(2) .fill,
2407	.c-color-palette.animate .color:nth-child(2) .fill:before,
2408	.c-color-palette.animate .color:nth-child(2) .picker,
2409	.c-color-palette.animate .color:nth-child(2) .picker:after,
2410	+ .c-color-palette.animate .color:nth-child(2) .picker:before {
2411	+ -webkit-animation-delay: 0.05s;
2412	+ animation-delay: 0.05s;
2413	+ }
2414	+
2415	+ .c-color-palette.animate .color:nth-child(3) .fill,
2416	.c-color-palette.animate .color:nth-child(3) .fill:before,
2417	.c-color-palette.animate .color:nth-child(3) .picker,
2418	.c-color-palette.animate .color:nth-child(3) .picker:after,
2419	+ .c-color-palette.animate .color:nth-child(3) .picker:before {
2420	+ -webkit-animation-delay: 0.25s;
2421	+ animation-delay: 0.25s;
2422	+ }
2423	+
2424	+ .c-color-palette.animate .color:nth-child(4) .fill,
2425	.c-color-palette.animate .color:nth-child(4) .fill:before,
2426	.c-color-palette.animate .color:nth-child(4) .picker,
2427	.c-color-palette.animate .color:nth-child(4) .picker:after,
2428	+ .c-color-palette.animate .color:nth-child(4) .picker:before {
2429	+ -webkit-animation-delay: 0.45s;
2430	+ animation-delay: 0.45s;
2431	+ }
2432	+
2433	+ .c-color-palette.animate .color:nth-child(5) .fill,
2434	.c-color-palette.animate .color:nth-child(5) .fill:before,
2435	.c-color-palette.animate .color:nth-child(5) .picker,
2436	.c-color-palette.animate .color:nth-child(5) .picker:after,
2437	+ .c-color-palette.animate .color:nth-child(5) .picker:before {
2438	+ -webkit-animation-delay: 0.2s;
2439	+ animation-delay: 0.2s;
2440	+ }
2441	+
2442	+ .c-color-palette.animate .color:nth-child(6) .fill,
2443	.c-color-palette.animate .color:nth-child(6) .fill:before,
2444	.c-color-palette.animate .color:nth-child(6) .picker,
2445	.c-color-palette.animate .color:nth-child(6) .picker:after,
2446	+ .c-color-palette.animate .color:nth-child(6) .picker:before {
2447	+ -webkit-animation-delay: 0.4s;
2448	+ animation-delay: 0.4s;
2449	+ }
2450	+
2451	+ .c-color-palette.animate .color:nth-child(7) .fill,
2452	.c-color-palette.animate .color:nth-child(7) .fill:before,
2453	.c-color-palette.animate .color:nth-child(7) .picker,
2454	.c-color-palette.animate .color:nth-child(7) .picker:after,
2455	+ .c-color-palette.animate .color:nth-child(7) .picker:before {
2456	+ -webkit-animation-delay: 0.35s;
2457	+ animation-delay: 0.35s;
2458	+ }
2459	+
2460	+ .c-color-palette.animate .color:nth-child(8) .fill,
2461	.c-color-palette.animate .color:nth-child(8) .fill:before,
2462	.c-color-palette.animate .color:nth-child(8) .picker,
2463	.c-color-palette.animate .color:nth-child(8) .picker:after,
2464	+ .c-color-palette.animate .color:nth-child(8) .picker:before {
2465	+ -webkit-animation-delay: 0.3s;
2466	+ animation-delay: 0.3s;
2467	+ }
2468	+
2469	+ .c-color-palette.animate .color:nth-child(9) .fill,
2470	.c-color-palette.animate .color:nth-child(9) .fill:before,
2471	.c-color-palette.animate .color:nth-child(9) .picker,
2472	.c-color-palette.animate .color:nth-child(9) .picker:after,
2473	+ .c-color-palette.animate .color:nth-child(9) .picker:before {
2474	+ -webkit-animation-delay: 0.15s;
2475	+ animation-delay: 0.15s;
2476	+ }
2477	+
2478	+ @-webkit-keyframes fill {
2479	+ 30% {
2480	+ -webkit-transform: translateY(0);
2481	+ transform: translateY(0);
2482	+ }
2483	+ 100% {
2484	+ -webkit-transform: translateY(0);
2485	+ transform: translateY(0);
2486	+ }
2487	+ }
2488	+
2489	+ @keyframes fill {
2490	+ 30% {
2491	+ -webkit-transform: translateY(0);
2492	+ transform: translateY(0);
2493	+ }
2494	+ 100% {
2495	+ -webkit-transform: translateY(0);
2496	+ transform: translateY(0);
2497	+ }
2498	+ }
2499	+
2500	+ @-webkit-keyframes picker-filter {
2501	+ 0% {
2502	+ -webkit-filter: none;
2503	+ filter: none;
2504	+ }
2505	+ 1% {
2506	+ -webkit-filter: url("#goo");
2507	+ filter: url("#goo");
2508	+ }
2509	+ 99% {
2510	+ -webkit-filter: url("#goo");
2511	+ filter: url("#goo");
2512	+ }
2513	+ 100% {
2514	+ -webkit-filter: none;
2515	+ filter: none;
2516	+ }
2517	+ }
2518	+
2519	+ @keyframes picker-filter {
2520	+ 0% {
2521	+ -webkit-filter: none;
2522	+ filter: none;
2523	+ }
2524	+ 1% {
2525	+ -webkit-filter: url("#goo");
2526	+ filter: url("#goo");
2527	+ }
2528	+ 99% {
2529	+ -webkit-filter: url("#goo");
2530	+ filter: url("#goo");
2531	+ }
2532	+ 100% {
2533	+ -webkit-filter: none;
2534	+ filter: none;
2535	+ }
2536	+ }
2537	+
2538	+ @-webkit-keyframes fill-picker-before {
2539	+ 24% {
2540	+ opacity: 0;
2541	+ -webkit-transform: translateY(-130%);
2542	+ transform: translateY(-130%);
2543	+ }
2544	+ 25% {
2545	+ opacity: 1;
2546	+ -webkit-transform: translateY(-130%);
2547	+ transform: translateY(-130%);
2548	+ }
2549	+ 32% {
2550	+ opacity: 1;
2551	+ -webkit-transform: translateY(-130%);
2552	+ transform: translateY(-130%);
2553	+ }
2554	+ 52% {
2555	+ opacity: 1;
2556	+ -webkit-transform: translateY(-130%);
2557	+ transform: translateY(-130%);
2558	+ }
2559	+ 99% {
2560	+ opacity: 1;
2561	+ -webkit-transform: translateY(-160%);
2562	+ transform: translateY(-160%);
2563	+ }
2564	+ 100% {
2565	+ opacity: 0;
2566	+ -webkit-transform: translateY(-160%);
2567	+ transform: translateY(-160%);
2568	+ }
2569	+ }
2570	+
2571	+ @keyframes fill-picker-before {
2572	+ 24% {
2573	+ opacity: 0;
2574	+ -webkit-transform: translateY(-130%);
2575	+ transform: translateY(-130%);
2576	+ }
2577	+ 25% {
2578	+ opacity: 1;
2579	+ -webkit-transform: translateY(-130%);
2580	+ transform: translateY(-130%);
2581	+ }
2582	+ 32% {
2583	+ opacity: 1;
2584	+ -webkit-transform: translateY(-130%);
2585	+ transform: translateY(-130%);
2586	+ }
2587	+ 52% {
2588	+ opacity: 1;
2589	+ -webkit-transform: translateY(-130%);
2590	+ transform: translateY(-130%);
2591	+ }
2592	+ 99% {
2593	+ opacity: 1;
2594	+ -webkit-transform: translateY(-160%);
2595	+ transform: translateY(-160%);
2596	+ }
2597	+ 100% {
2598	+ opacity: 0;
2599	+ -webkit-transform: translateY(-160%);
2600	+ transform: translateY(-160%);
2601	+ }
2602	+ }
2603	+
2604	+ @-webkit-keyframes fill-picker-after {
2605	+ 24% {
2606	+ opacity: 0;
2607	+ -webkit-transform: translateY(-160%);
2608	+ transform: translateY(-160%);
2609	+ }
2610	+ 25% {
2611	+ opacity: 1;
2612	+ -webkit-transform: translateY(-160%);
2613	+ transform: translateY(-160%);
2614	+ }
2615	+ 32% {
2616	+ opacity: 1;
2617	+ -webkit-transform: translateY(-120%);
2618	+ transform: translateY(-120%);
2619	+ }
2620	+ 100% {
2621	+ opacity: 1;
2622	+ -webkit-transform: translateY(0);
2623	+ transform: translateY(0);
2624	+ }
2625	+ }
2626	+
2627	+ @keyframes fill-picker-after {
2628	+ 24% {
2629	+ opacity: 0;
2630	+ -webkit-transform: translateY(-160%);
2631	+ transform: translateY(-160%);
2632	+ }
2633	+ 25% {
2634	+ opacity: 1;
2635	+ -webkit-transform: translateY(-160%);
2636	+ transform: translateY(-160%);
2637	+ }
2638	+ 32% {
2639	+ opacity: 1;
2640	+ -webkit-transform: translateY(-120%);
2641	+ transform: translateY(-120%);
2642	+ }
2643	+ 100% {
2644	+ opacity: 1;
2645	+ -webkit-transform: translateY(0);
2646	+ transform: translateY(0);
2647	+ }
2648	+ }
2649	+
2650	+ @-webkit-keyframes fade-out {
2651	+ 90% {
2652	+ opacity: 1;
2653	+ }
2654	+ 100% {
2655	+ opacity: 0;
2656	+ }
2657	+ }
2658	+
2659	+ @keyframes fade-out {
2660	+ 90% {
2661	+ opacity: 1;
2662	+ }
2663	+ 100% {
2664	+ opacity: 0;
2665	+ }
2666	+ }
2667	+
2668	+ .label {
2669	+ margin-right: auto;
2670	+ }
2671	+
2672	+ .c-color-palette__blur {
2673	+ display: none;
2674	+ }
2675	+
2676	+ #customize-theme-controls [id*="sm_current_color_palette_control"] {
2677	+ display: block;
2678	+ margin: -12px -12px 19px;
2679	+ width: auto;
2680	+ }
2681	+
2682	+ #customize-theme-controls [id*="sm_current_color_palette_control"] .color-palette-container {
2683	+ padding: 19px;
2684	+ background: white;
2685	+ }
2686	+
2687	+ #customize-theme-controls [id*="sm_current_color_palette_control"] .color-palette-container .description {
2688	+ margin-bottom: 15px;
2689	+ }
2690	+
2691	+ #customize-theme-controls [id*="sm_current_color_palette_control"] .description.c-color-palette__notification {
2692	+ padding-top: 19px;
2693	+ margin-bottom: 0;
2694	+ font-size: inherit;
2695	+ font-weight: bold;
2696	+ }
2697	+
2698	+ .c-color-palette__name {
2699	+ margin-right: auto;
2700	+ }
2701	+
2702	+ .c-color-palette__control {
2703	+ width: 2em;
2704	+ height: 2em;
2705	+ margin-left: 0.25em;
2706	+ display: -ms-flexbox;
2707	+ display: flex;
2708	+ -ms-flex-pack: center;
2709	+ justify-content: center;
2710	+ -ms-flex-align: center;
2711	+ align-items: center;
2712	+ border-radius: 50%;
2713	+ }
2714	+
2715	+ .c-color-palette__control, .c-color-palette__control span {
2716	+ transition: color .3s ease-in-out;
2717	+ }
2718	+
2719	+ .c-color-palette__control span {
2720	+ color: rgba(0, 0, 0, 0.25);
2721	+ -webkit-transform: scale(0.8);
2722	+ transform: scale(0.8);
2723	+ }
2724	+
2725	+ .c-color-palette__control.active {
2726	+ background: currentColor;
2727	+ }
2728	+
2729	+ .c-color-palette__control.active span {
2730	+ color: white;
2731	+ }
2732	+
2733	+ #sub-accordion-section-sm_color_palettes_section {
2734	+ display: -ms-flexbox !important;
2735	+ display: flex !important;
2736	+ -ms-flex-direction: column;
2737	+ flex-direction: column;
2738	+ padding: 12px 0 0 !important;
2739	+ overflow: hidden;
2740	+ }
2741	+
2742	+ #sub-accordion-section-sm_color_palettes_section > * {
2743	+ display: block !important;
2744	+ -ms-flex-positive: 0;
2745	+ flex-grow: 0;
2746	+ padding: 0 12px;
2747	+ }
2748	+
2749	+ #sub-accordion-section-sm_color_palettes_section #customize-control-sm_color_palette_control {
2750	+ -ms-flex-negative: 0;
2751	+ flex-shrink: 0;
2752	+ -ms-flex-positive: 1;
2753	+ flex-grow: 1;
2754	+ overflow-y: scroll;
2755	+ margin-top: -19px;
2756	+ padding-top: 19px;
2757	+ margin-bottom: 0;
2758	+ }
2759	+
2760	+ #sub-accordion-section-sm_color_palettes_section:not(.advanced) #customize-control-sm_color_palette_control ~ li:not([id="customize-control-sm_toggle_advanced_settings_control"]) {
2761	+ display: none !important;
2762	+ }
2763	+
2764	+ #sub-accordion-section-sm_color_palettes_section.advanced #customize-control-sm_color_palette_control {
2765	+ display: none !important;
2766	+ }
2767	+
2768	+ .c-color-palette .iris-picker {
2769	+ position: absolute;
2770	+ top: 100%;
2771	+ left: 0;
2772	+ z-index: 100;
2773	+ margin-top: 1em;
2774	+ border: 0;
2775	+ box-shadow: black 0 3px 12px -4px;
2776	+ }
2777	+
2778	+ .c-color-palette .iris-picker .iris-square-handle {
2779	+ border-color: transparent;
2780	+ left: -6px;
2781	+ top: -6px;
2782	+ }
2783	+
2784	+ .c-color-palette .iris-picker .iris-square-handle:after {
2785	+ position: absolute;
2786	+ bottom: 0;
2787	+ right: 0;
2788	+ left: 0;
2789	+ top: 0;
2790	+ border: 2px solid white;
2791	+ }
2792	+
2793	+ .c-color-palette .iris-picker .iris-square-value {
2794	+ box-shadow: none !important;
2795	+ }
2796	+
2797	+ .color {
2798	+ display: -ms-flexbox;
2799	+ display: flex;
2800	+ -ms-flex-direction: column;
2801	+ flex-direction: column;
2802	+ -ms-flex: 1 1 0;
2803	+ flex: 1 1 0;
2804	+ overflow: hidden;
2805	+ }
2806	+
2807	+ .c-color-palette.animate .color {
2808	+ transition: -ms-flex-positive 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
2809	+ transition: flex-grow 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
2810	+ }
2811	+
2812	+ .c-color-palette.animate .color.hidden {
2813	+ transition: -ms-flex-positive 0.3s cubic-bezier(0.6, -1, 0.74, 0.05);
2814	+ transition: flex-grow 0.3s cubic-bezier(0.6, -1, 0.74, 0.05);
2815	+ }
2816	+
2817	+ .color.hidden {
2818	+ display: -ms-flexbox;
2819	+ display: flex;
2820	+ -ms-flex-positive: 0;
2821	+ flex-grow: 0;
2822	+ }
2823	+
2824	+ .color.hidden .picker {
2825	+ opacity: 0;
2826	+ transition: opacity .2s ease-out;
2827	+ }
2828	+
2829	+ .color .picker {
2830	+ border: 2px solid transparent;
2831	+ transition: opacity .3s ease-in-out, border-color .3s ease-in-out;
2832	+ cursor: pointer;
2833	+ }
2834	+
2835	+ .color .picker i {
2836	+ transition: box-shadow .3s ease-in-out;
2837	+ }
2838	+
2839	+ .color.inactive .picker {
2840	+ opacity: 0.2;
2841	+ }
2842	+
2843	+ .color.active .picker {
2844	+ border-color: #73C5EE;
2845	+ }
2846	+
2847	+ .colors .color.active i {
2848	+ box-shadow: inset 0 0 3px 0 transparent, inset 0 1px 3px 0 transparent;
2849	+ }
2850	+
2851	+ .color.inactive .picker:hover {
2852	+ opacity: 1;
2853	+ }
2854	+
2855	+ .c-color-palette__tooltip {
2856	+ position: absolute;
2857	+ bottom: 100%;
2858	+ left: 50%;
2859	+ z-index: 300;
2860	+ margin-bottom: 5px;
2861	+ padding: 4px 14px;
2862	+ opacity: 0;
2863	+ -webkit-transform: translateX(-50%);
2864	+ transform: translateX(-50%);
2865	+ transition: opacity .2s ease-out;
2866	+ color: white;
2867	+ background-color: #606A72;
2868	+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
2869	+ }
2870	+
2871	+ .c-color-palette__tooltip:after {
2872	+ content: "";
2873	+ position: absolute;
2874	+ top: 100%;
2875	+ left: 50%;
2876	+ display: block;
2877	+ border: 5px solid transparent;
2878	+ border-bottom-width: 0;
2879	+ border-top-color: #606A72;
2880	+ -webkit-transform: translateX(-50%);
2881	+ transform: translateX(-50%);
2882	+ }
2883	+
2884	+ .c-color-palette__control:hover .c-color-palette__tooltip {
2885	+ opacity: 1;
2886	+ }
2887	+
2888	+ .c-color-palette__control {
2889	+ position: relative;
2890	+ cursor: pointer;
2891	+ }
2892	+
2893	+ input.c-color-palette__input[class] {
2894	+ margin-top: 1em;
2895	+ }
2896	+
2897	+ #customize-control-sm_toggle_advanced_settings_control {
2898	+ margin-bottom: 0;
2899	+ opacity: 0;
2900	+ }
2901	+
2902	+ #customize-control-sm_toggle_advanced_settings_control button {
2903	+ width: 100%;
2904	+ }
2905	+
2906	+ .sm_color_matrix {
2907	+ display: -ms-flexbox;
2908	+ display: flex;
2909	+ -ms-flex-wrap: wrap;
2910	+ flex-wrap: wrap;
2911	+ margin-top: -15px;
2912	+ margin-left: -15px;
2913	+ }
2914	+
2915	+ .sm_color_matrix > * {
2916	+ display: -ms-flexbox;
2917	+ display: flex;
2918	+ -ms-flex-wrap: wrap;
2919	+ flex-wrap: wrap;
2920	+ -ms-flex-line-pack: start;
2921	+ align-content: flex-start;
2922	+ -ms-flex: 0 0 33.33333%;
2923	+ flex: 0 0 33.33333%;
2924	+ padding-top: 15px;
2925	+ padding-left: 15px;
2926	+ }
2927	+
2928	+ .sm_color_matrix > * > * {
2929	+ background-color: currentColor;
2930	+ border-radius: 50%;
2931	+ border: 1px solid #ccc;
2932	+ -webkit-animation-duration: 0.75s;
2933	+ animation-duration: 0.75s;
2934	+ -webkit-animation-name: bounceIn;
2935	+ animation-name: bounceIn;
2936	+ }
2937	+
2938	+ .sm_color_matrix > * {
2939	+ display: grid;
2940	+ grid-auto-rows: 2px;
2941	+ grid-auto-columns: 2px;
2942	+ }
2943	+
2944	+ .sm_color_matrix > * > :nth-child(1) {
2945	+ grid-area: 16 / 12 / span 12 / span 12;
2946	+ }
2947	+
2948	+ .sm_color_matrix > * > :nth-child(2) {
2949	+ grid-area: 26 / 24 / span 4 / span 4;
2950	+ }
2951	+
2952	+ .sm_color_matrix > * > :nth-child(3) {
2953	+ grid-area: 13 / 24 / span 4 / span 4;
2954	+ }
2955	+
2956	+ .sm_color_matrix > * > :nth-child(4) {
2957	+ grid-area: 8 / 8 / span 8 / span 8;
2958	+ }
2959	+
2960	+ .sm_color_matrix > * > :nth-child(5) {
2961	+ grid-area: 32 / 8 / span 4 / span 4;
2962	+ }
2963	+
2964	+ .sm_color_matrix > * > :nth-child(6) {
2965	+ grid-area: 30 / 16 / span 8 / span 8;
2966	+ }
2967	+
2968	+ .sm_color_matrix > * > :nth-child(7) {
2969	+ grid-area: 4 / 20 / span 8 / span 8;
2970	+ }
2971	+
2972	+ .sm_color_matrix > * > :nth-child(8) {
2973	+ grid-area: 17 / 26 / span 8 / span 8;
2974	+ }
2975	+
2976	+ .sm_color_matrix > * > :nth-child(9) {
2977	+ grid-area: 22 / 2 / span 8 / span 8;
2978	+ }
2979	+
2980	+ .sm_color_matrix > * > :nth-child(10) {
2981	+ grid-area: 28 / 11 / span 2 / span 2;
2982	+ }
2983	+
2984	+ .sm_color_matrix > * > :nth-child(11) {
2985	+ grid-area: 9 / 31 / span 6 / span 6;
2986	+ }
2987	+
2988	+ .sm_color_matrix > * > :nth-child(11) {
2989	+ grid-area: 26 / 30 / span 9 / span 9;
2990	+ }
2991	+
2992	+ .sm_color_matrix > * > :nth-child(12) {
2993	+ grid-area: 17 / 7 / span 4 / span 4;
2994	+ }
2995	+
2996	+ .sm_color_matrix > * > :nth-child(13) {
2997	+ grid-area: 19 / 36 / span 6 / span 6;
2998	+ }
2999	+
3000	+ .sm_color_matrix > * > :nth-child(14) {
3001	+ grid-area: 12 / 18 / span 2 / span 2;
3002	+ }
3003	+
3004	+ @-webkit-keyframes bounceIn {
3005	+ 0%, 20%, 40%, 60%, 80%, 100% {
3006	+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
3007	+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
3008	+ }
3009	+ 0% {
3010	+ opacity: 0;
3011	+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
3012	+ transform: scale3d(0.3, 0.3, 0.3);
3013	+ }
3014	+ 20% {
3015	+ -webkit-transform: scale3d(1.1, 1.1, 1.1);
3016	+ transform: scale3d(1.1, 1.1, 1.1);
3017	+ }
3018	+ 40% {
3019	+ -webkit-transform: scale3d(0.9, 0.9, 0.9);
3020	+ transform: scale3d(0.9, 0.9, 0.9);
3021	+ }
3022	+ 60% {
3023	+ opacity: 1;
3024	+ -webkit-transform: scale3d(1.03, 1.03, 1.03);
3025	+ transform: scale3d(1.03, 1.03, 1.03);
3026	+ }
3027	+ 80% {
3028	+ -webkit-transform: scale3d(0.97, 0.97, 0.97);
3029	+ transform: scale3d(0.97, 0.97, 0.97);
3030	+ }
3031	+ 100% {
3032	+ opacity: 1;
3033	+ -webkit-transform: scale3d(1, 1, 1);
3034	+ transform: scale3d(1, 1, 1);
3035	+ }
3036	+ }
3037	+
3038	+ @keyframes bounceIn {
3039	+ 0%, 20%, 40%, 60%, 80%, 100% {
3040	+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
3041	+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
3042	+ }
3043	+ 0% {
3044	+ opacity: 0;
3045	+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
3046	+ transform: scale3d(0.3, 0.3, 0.3);
3047	+ }
3048	+ 20% {
3049	+ -webkit-transform: scale3d(1.1, 1.1, 1.1);
3050	+ transform: scale3d(1.1, 1.1, 1.1);
3051	+ }
3052	+ 40% {
3053	+ -webkit-transform: scale3d(0.9, 0.9, 0.9);
3054	+ transform: scale3d(0.9, 0.9, 0.9);
3055	+ }
3056	+ 60% {
3057	opacity: 1;
3058	+ -webkit-transform: scale3d(1.03, 1.03, 1.03);
3059	+ transform: scale3d(1.03, 1.03, 1.03);
3060	+ }
3061	+ 80% {
3062	+ -webkit-transform: scale3d(0.97, 0.97, 0.97);
3063	+ transform: scale3d(0.97, 0.97, 0.97);
3064	+ }
3065	+ 100% {

3066	opacity: 1;
3067	+ -webkit-transform: scale3d(1, 1, 1);
3068	+ transform: scale3d(1, 1, 1);
3069	+ }
3070	+ }
3071	+
3072	+ #customize-theme-controls #sub-accordion-panel-style_manager_panel .customize-panel-description,
3073	+ #customize-theme-controls #sub-accordion-panel-theme_options_panel .customize-panel-description {
3074	+ display: block;
3075	+ }
3076	+
3077	+ #customize-theme-controls li#accordion-panel-style_manager_panel h3.accordion-section-title:before {
3078	+ position: relative;
3079	+ float: right;
3080	+ content: "";
3081	+ color: #aed2e5;
3082	+ font-family: dashicons;
3083	+ padding: 1px;
3084	+ margin-right: 28px;
3085	+ font-size: 17px;
3086	+ -webkit-font-smoothing: antialiased;
3087	+ }
3088	+
3089	+ #customize-theme-controls li#accordion-panel-style_manager_panel h3.accordion-section-title:before {
3090	+ font-size: 18px;
3091	+ color: #f8bc30;
3092	+ }
3093	+
3094	+ #customize-theme-controls li#accordion-section-sm_color_palettes_section h3.accordion-section-title:before {
3095	+ position: relative;
3096	+ float: right;
3097	+ content: "";
3098	+ color: #aed2e5;
3099	+ font-family: dashicons;
3100	+ padding: 1px;
3101	+ margin-right: 28px;
3102	+ font-size: 17px;
3103	+ -webkit-font-smoothing: antialiased;
3104	+ }
3105	+
3106	+ #customize-theme-controls li#accordion-section-sm_color_palettes_section h3.accordion-section-title {
3107	+ border-top: none;
3108	+ }
3109	+
3110	+ #customize-theme-controls li#accordion-section-sm_font_palettes_section h3.accordion-section-title:before {
3111	+ position: relative;
3112	+ float: right;
3113	+ content: "";
3114	+ color: #aed2e5;
3115	+ font-family: dashicons;
3116	+ padding: 1px;
3117	+ margin-right: 28px;
3118	+ font-size: 17px;
3119	+ -webkit-font-smoothing: antialiased;
3120	+ }
3121	+
3122	+ #customize-theme-controls li#accordion-section-sm_color_palettes_section h3.accordion-section-title:before,
3123	+ #customize-theme-controls li#accordion-section-sm_font_palettes_section h3.accordion-section-title:before {
3124	+ padding: 3px;
3125	+ margin-right: 5px;
3126	+ margin-top: -2px;
3127	+ }
3128	+
3129	+ #customize-theme-controls li#accordion-panel-theme_options_panel h3.accordion-section-title:before {
3130	+ position: relative;
3131	+ float: right;
3132	+ content: "";
3133	+ color: #aed2e5;
3134	+ font-family: dashicons;
3135	+ padding: 1px;
3136	+ margin-right: 28px;
3137	+ font-size: 17px;
3138	+ -webkit-font-smoothing: antialiased;
3139	+ }
3140	+
3141	+ #customize-theme-controls li#accordion-panel-theme_options_panel h3.accordion-section-title {
3142	+ border-bottom: 1px solid #ddd;
3143	+ border-left: none;
3144	+ border-right: none;
3145	+ margin: 0 0 15px 0;
3146	+ }
3147	+
3148	+ #customize-theme-controls li[id$="[general]"],
3149	+ #customize-theme-controls li[id$="[footer_section]"] {
3150	+ border-bottom: 1px solid #ddd;
3151	+ border-left: none;
3152	+ border-right: none;
3153	+ margin: 0 0 15px 0;
3154	+ }
3155	+
3156	+ #customize-theme-controls li[id$="[general]"] h3.accordion-section-title {
3157	+ border-top: none;
3158	+ }
3159	+
3160	+ .color .disc {
3161	+ display: block;
3162	+ overflow: hidden;
3163	+ position: absolute;
3164	+ top: 0;
3165	+ right: 0;
3166	+ bottom: 0;
3167	+ left: 0;
3168	+ z-index: 15;
3169	+ border-radius: 50%;
3170	+ pointer-events: none;
3171	+ opacity: 0;
3172	+ transition: opacity .3s ease-in-out;
3173	+ }
3174	+
3175	+ .color .disc:after {
3176	+ content: "";
3177	+ -webkit-filter: blur(6px) saturate(0.7) brightness(1.1);
3178	+ filter: blur(6px) saturate(0.7) brightness(1.1);
3179	+ display: block;
3180	+ width: 200%;
3181	+ height: 200%;
3182	+ padding-top: 100%;
3183	+ position: absolute;
3184	+ top: -50%;
3185	+ left: -50%;
3186	+ -webkit-transform: scale(1);
3187	+ transform: scale(1);
3188	+ background-image: linear-gradient(330deg, transparent 50%, #ff8100 0), linear-gradient(300deg, transparent 50%, #ff5800 0), linear-gradient(270deg, transparent 50%, #c92323 0), linear-gradient(240deg, transparent 50%, #cc42a2 0), linear-gradient(210deg, transparent 50%, #9f49ac 0), linear-gradient(180deg, transparent 50%, #306cd3 0), linear-gradient(150deg, transparent 50%, #179067 0), linear-gradient(120deg, transparent 50%, #0eb5d6 0), linear-gradient(90deg, transparent 50%, #50b517 0), linear-gradient(60deg, transparent 50%, #ede604 0), linear-gradient(30deg, transparent 50%, #fc0 0), linear-gradient(0deg, transparent 50%, #feac00 0);
3189	+ background-clip: content-box,content-box,content-box,content-box,content-box,content-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box;
3190	+ }
3191	+
3192	+ .color.altered .disc {
3193	+ opacity: 1;
3194	+ }
3195	+
3196	+ .customize-control-color .wp-picker-container .iris-picker .iris-palette-container {
3197	+ display: -ms-flexbox;
3198	+ display: flex;
3199	+ width: 215px;
3200	+ }
3201	+
3202	+ .customize-control-color .wp-picker-container .iris-picker .iris-palette {
3203	+ width: auto !important;
3204	+ height: auto !important;
3205	+ -ms-flex: 1 1 0;
3206	+ flex: 1 1 0;
3207	+ float: none;
3208	+ }
3209	+
3210	+ .customize-control-color .wp-picker-container .iris-picker .iris-palette:after {
3211	+ content: "";
3212	+ display: block;
3213	+ padding-top: 100%;


























3214	}

customify.php CHANGED Viewed

	@@ -3,7 +3,7 @@
3	Plugin Name: Customify
4	Plugin URI: https://wordpress.org/plugins/customify/
5	Description: A Theme Customizer Booster
6	- Version: 1.7.4
7	Author: Pixelgrade
8	Author URI: https://pixelgrade.com
9	Author Email: contact@pixelgrade.com
	@@ -61,7 +61,7 @@ function PixCustomifyPlugin() {
61	*/
62	require_once plugin_dir_path( __FILE__ ) . 'class-pixcustomify.php';
63
64	- $instance = PixCustomifyPlugin::instance( __FILE__, '1.7.4' );
65
66	return $instance;
67	}


3	Plugin Name: Customify
4	Plugin URI: https://wordpress.org/plugins/customify/
5	Description: A Theme Customizer Booster
6	+ Version: 1.8.0
7	Author: Pixelgrade
8	Author URI: https://pixelgrade.com
9	Author Email: contact@pixelgrade.com

61	*/
62	require_once plugin_dir_path( __FILE__ ) . 'class-pixcustomify.php';
63
64	+ $instance = PixCustomifyPlugin::instance( __FILE__, '1.8.0' );
65
66	return $instance;
67	}

features/customizer/controls/class-Pix_Customize_Preset_Control.php CHANGED Viewed

	@@ -205,9 +205,7 @@ class Pix_Customize_Preset_Control extends Pix_Customize_Control {
205	<div class="palette">
206	<?php foreach ( $choice_config['options'] as $color_setting_id => $color_value ) {
207	$field_config = PixCustomifyPlugin()->get_option_customizer_config( $color_setting_id );
208	- if ( ! ~~empty~~( $~~field_config[~~'~~connected_fields~~'] ) ) {
209	- echo '<div class="palette__item ' . esc_attr( $color_setting_id ) . '" style="background: ' . esc_attr( $color_value ) . '"></div>' . PHP_EOL;
210	- }
211	} ?>
212	</div>
213	</span>


205	<div class="palette">
206	<?php foreach ( $choice_config['options'] as $color_setting_id => $color_value ) {
207	$field_config = PixCustomifyPlugin()->get_option_customizer_config( $color_setting_id );
208	+ echo '<div class="palette__item ' . esc_attr( $color_setting_id ) . '" style="background: ' . esc_attr( $color_value ) . '"></div>' . PHP_EOL;


209	} ?>
210	</div>
211	</span>

includes/class-customify-color-palettes.php CHANGED Viewed

	@@ -358,6 +358,7 @@ class Customify_Color_Palettes {
358	'<div class="color ' . $setting_id . '" data-setting="' . $setting_id . '">' . PHP_EOL .
359	'<div class="fill"></div>' . PHP_EOL .
360	'<div class="picker">' .

361	'<i></i>'.
362	'</div>' . PHP_EOL .
363	'</div>' . PHP_EOL;
	@@ -366,6 +367,9 @@ class Customify_Color_Palettes {
366	}
367
368	$current_palette .= '<div class="c-color-palette__fields">';



369	foreach ( $master_color_controls_ids as $setting_id ) {
370	$current_palette .= '<input id="current-palette-' . $setting_id . '" class="c-color-palette__input ' . $setting_id . '" type="text">';
371	}


358	'<div class="color ' . $setting_id . '" data-setting="' . $setting_id . '">' . PHP_EOL .
359	'<div class="fill"></div>' . PHP_EOL .
360	'<div class="picker">' .
361	+ '<div class="disc"></div>'.
362	'<i></i>'.
363	'</div>' . PHP_EOL .
364	'</div>' . PHP_EOL;

367	}
368
369	$current_palette .= '<div class="c-color-palette__fields">';
370	+ $current_palette .= '<div class="c-color-palette__notification description hidden js-altered-notification">' . PHP_EOL .
371	+ __( 'One or more colors connected to your color palette have been modified. By changing or altering the current palette you will lose changes made prior to this action.', '__theme_txtd' ) . PHP_EOL .
372	+ '</div>' . PHP_EOL;
373	foreach ( $master_color_controls_ids as $setting_id ) {
374	$current_palette .= '<input id="current-palette-' . $setting_id . '" class="c-color-palette__input ' . $setting_id . '" type="text">';
375	}

includes/customify_theme_root.php CHANGED Viewed

@@ -13,14 +13,510 @@ $config = [
             	'sections' => [],
             ];
             $config['sections'] = [
             	/**
             	 * COLORS - This section will handle all elements colors (eg. links, headings)
             	 */
             	'colors_section' => [
             		'title'    => __( 'Colors', 'customify' ),
-            -
            		'priority' => 2, // This will put this section right after Style Manager that has a priority of 1.
             		'options'  => [
             			/**
             			 * Header Section
@@ -731,6 +1227,7 @@ $config['sections'] = [
              */
             $config['sections']['style_manager_section'] = [
             	'options' => [
             		'sm_color_primary'   => [
             			'connected_fields' => [
             				'body_link_color',
@@ -785,6 +1282,32 @@ $config['sections']['style_manager_section'] = [
             		'sm_light_tertiary'  => [
             			'connected_fields' => [],
             		],
             	],
             ];


13	'sections' => [],
14	];
15
16	+ define( 'SM_HEADINGS_FONT', 'Source Sans Pro' );
17	+ define( 'SM_SECONDARY_FONT', 'Source Sans Pro' );
18	+ define( 'SM_ACCENT_FONT', 'Source Sans Pro' );
19	+ define( 'SM_BODY_FONT', 'Source Sans Pro' );
20	+ define( 'SM_LOGO_FONT', 'Source Sans Pro' );
21	+
22	+ // Recommended Fonts List - Headings
23	+ $recommended_fonts = array(
24	+ 'Oswald',
25	+ 'Roboto',
26	+ 'Playfair Display',
27	+ 'Lato',
28	+ 'Open Sans',
29	+ 'Exo',
30	+ 'PT Sans',
31	+ 'Ubuntu',
32	+ 'Vollkorn',
33	+ 'Lora',
34	+ 'Arvo',
35	+ 'Josefin Slab',
36	+ 'Crete Round',
37	+ 'Kreon',
38	+ 'Bubblegum Sans',
39	+ 'The Girl Next Door',
40	+ 'Pacifico',
41	+ 'Handlee',
42	+ 'Satify',
43	+ 'Pompiere'
44	+ );
45	+
46	+ // Body
47	+ $recommended_body_fonts = apply_filters(
48	+ 'customify_theme_recommended_body_fonts',
49	+ array(
50	+ 'Roboto',
51	+ 'Playfair Display',
52	+ 'Oswald',
53	+ 'Lato',
54	+ 'Open Sans',
55	+ 'Exo',
56	+ 'PT Sans',
57	+ 'Ubuntu',
58	+ 'Vollkorn',
59	+ 'Lora',
60	+ 'Arvo',
61	+ 'Josefin Slab',
62	+ 'Crete Round',
63	+ 'Kreon',
64	+ 'Bubblegum Sans',
65	+ 'The Girl Next Door',
66	+ 'Pacifico',
67	+ 'Handlee',
68	+ 'Satify',
69	+ 'Pompiere',
70	+ )
71	+ );
72	+
73	$config['sections'] = [
74
75	+ /**
76	+ * Fonts - This section will handle all elements fonts (eg. links, headings)
77	+ */
78	+ 'fonts_section' => [
79	+ 'title' => __( 'Fonts', 'customify' ),
80	+ 'priority' => 3, // This will put this section right after Colors section that has a priority of 2.
81	+ 'options' => [
82	+ /**
83	+ * Header Section
84	+ */
85	+ 'header_section' => [
86	+ 'type' => 'html',
87	+ 'html' => '<span id="section-title-blog-fonts" class="separator section label large">' . esc_html__( 'Header', 'customify' ) . '</span>',
88	+ ],
89	+ 'header_site_title_font' => array(
90	+ 'type' => 'font',
91	+ 'label' => esc_html__( 'Site Title Font', '__components_txtd' ),
92	+ 'selector' => '.page-template-template-homepage .entry-header h1',
93	+ 'callback' => 'typeline_font_cb',
94	+
95	+ 'default' => array(
96	+ 'font-family' => SM_HEADINGS_FONT,
97	+ 'font-weight' => '700',
98	+ 'font-size' => 32,
99	+ 'line-height' => 1.214,
100	+ 'letter-spacing' => -0.02,
101	+ 'text-transform' => 'none',
102	+ ),
103	+
104	+ // Sub Fields Configuration
105	+ 'fields' => array(
106	+ 'font-size' => array(
107	+ 'min' => 8,
108	+ 'max' => 90,
109	+ 'step' => 1,
110	+ 'unit' => 'px',
111	+ ),
112	+ 'line-height' => array( 0, 2, 0.1, '' ),
113	+ 'letter-spacing' => array( - 1, 2, 0.01, 'em' ),
114	+ 'text-align' => false,
115	+ 'text-transform' => true,
116	+ 'text-decoration' => false,
117	+ ),
118	+ ),
119	+ 'header_navigation_font' => array(
120	+ 'type' => 'font',
121	+ 'label' => esc_html__( 'Navigation Text', '__components_txtd' ),
122	+ 'selector' => '.storefront-primary-navigation',
123	+ 'callback' => 'typeline_font_cb',
124	+
125	+ 'default' => array(
126	+ 'font-family' => SM_HEADINGS_FONT,
127	+ 'font-weight' => '400',
128	+ 'font-size' => 16,
129	+ 'line-height' => 1.618,
130	+ 'letter-spacing' => 0,
131	+ 'text-transform' => 'none',
132	+ ),
133	+
134	+ // Sub Fields Configuration
135	+ 'fields' => array(
136	+ 'font-size' => array(
137	+ 'min' => 8,
138	+ 'max' => 90,
139	+ 'step' => 1,
140	+ 'unit' => 'px',
141	+ ),
142	+ 'line-height' => array( 0, 2, 0.1, '' ),
143	+ 'letter-spacing' => array( - 1, 2, 0.01, 'em' ),
144	+ 'text-align' => false,
145	+ 'text-transform' => true,
146	+ 'text-decoration' => false,
147	+ ),
148	+ ),
149	+
150	+ /**
151	+ * Main Content Section
152	+ */
153	+ 'main_content' => [
154	+ 'type' => 'html',
155	+ 'html' => '<span id="section-title-blog-fonts" class="separator section label large">' . esc_html__( 'Main Content', 'customify' ) . '</span>',
156	+ ],
157	+ 'main_content_page_title_font' => array(
158	+ 'type' => 'font',
159	+ 'label' => esc_html__( 'Page Title Font', '__components_txtd' ),
160	+ 'selector' => '.page-template-template-homepage .entry-header h1',
161	+ 'callback' => 'typeline_font_cb',
162	+
163	+ 'default' => array(
164	+ 'font-family' => SM_HEADINGS_FONT,
165	+ 'font-weight' => '300',
166	+ 'font-size' => 59,
167	+ 'line-height' => 1.214,
168	+ 'letter-spacing' => -0.02,
169	+ 'text-transform' => 'none',
170	+ ),
171	+
172	+ // Sub Fields Configuration
173	+ 'fields' => array(
174	+ 'font-size' => array(
175	+ 'min' => 8,
176	+ 'max' => 90,
177	+ 'step' => 1,
178	+ 'unit' => 'px',
179	+ ),
180	+ 'line-height' => array( 0, 2, 0.1, '' ),
181	+ 'letter-spacing' => array( - 1, 2, 0.01, 'em' ),
182	+ 'text-align' => false,
183	+ 'text-transform' => true,
184	+ 'text-decoration' => false,
185	+ ),
186	+ ),
187	+ 'main_content_body_text_font' => array(
188	+ 'type' => 'font',
189	+ 'label' => esc_html__( 'Body Text Font', '__components_txtd' ),
190	+ 'selector' => 'body',
191	+ 'callback' => 'typeline_body_font_cb',
192	+
193	+ 'default' => array(
194	+ 'font-family' => SM_BODY_FONT,
195	+ 'font-weight' => '400',
196	+ 'font-size' => 16,
197	+ 'line-height' => 1.618,
198	+ 'letter-spacing' => 0,
199	+ 'text-transform' => 'none',
200	+ ),
201	+
202	+ // Sub Fields Configuration
203	+ 'fields' => array(
204	+ 'font-size' => array(
205	+ 'min' => 8,
206	+ 'max' => 90,
207	+ 'step' => 1,
208	+ 'unit' => 'px',
209	+ ),
210	+ 'line-height' => array( 0, 2, 0.1, '' ),
211	+ 'letter-spacing' => array( - 1, 2, 0.01, 'em' ),
212	+ 'text-align' => false,
213	+ 'text-transform' => true,
214	+ 'text-decoration' => false,
215	+ ),
216	+ ),
217	+ 'main_content_quote_block_font' => array(
218	+ 'type' => 'font',
219	+ 'label' => esc_html__( 'Quote Block Font', '__components_txtd' ),
220	+ 'selector' => 'blockquote',
221	+ 'callback' => 'typeline_font_cb',
222	+ 'default' => array(
223	+ 'font-family' => SM_ACCENT_FONT,
224	+ 'font-weight' => 'italic',
225	+ 'font-size' => 18,
226	+ 'line-height' => 1.67,
227	+ 'letter-spacing' => 0,
228	+ 'text-transform' => 'none',
229	+ ),
230	+
231	+ // Sub Fields Configuration
232	+ 'fields' => array(
233	+ 'font-size' => array(
234	+ 'min' => 8,
235	+ 'max' => 90,
236	+ 'step' => 1,
237	+ 'unit' => 'px',
238	+ ),
239	+ 'line-height' => array( 0, 2, 0.1, '' ),
240	+ 'letter-spacing' => array( - 1, 2, 0.01, 'em' ),
241	+ 'text-align' => false,
242	+ 'text-transform' => true,
243	+ 'text-decoration' => false,
244	+ ),
245	+ ),
246	+
247	+ 'main_content_heading_1_font' => [
248	+ 'type' => 'font',
249	+ 'label' => esc_html__( 'Heading 1', 'customify' ),
250	+ 'desc' => esc_html__( '', 'customify' ),
251	+ 'selector' => '.alpha, h1',
252	+
253	+ 'default' => array(
254	+ 'font-family' => SM_HEADINGS_FONT,
255	+ 'font-weight' => '300',
256	+ 'font-size' => 42,
257	+ 'line-height' => 1.214,
258	+ 'letter-spacing' => -0.02,
259	+ 'text-transform' => 'none',
260	+ ),
261	+
262	+ // Sub Fields Configuration
263	+ 'fields' => array(
264	+ 'font-size' => array(
265	+ 'min' => 8,
266	+ 'max' => 90,
267	+ 'step' => 1,
268	+ 'unit' => 'px',
269	+ ),
270	+ 'line-height' => array( 0, 2, 0.1, '' ),
271	+ 'letter-spacing' => array( - 1, 2, 0.01, 'em' ),
272	+ 'text-align' => false,
273	+ 'text-transform' => true,
274	+ 'text-decoration' => false,
275	+ ),
276	+ ],
277	+
278	+ 'main_content_heading_2_font' => [
279	+ 'type' => 'font',
280	+ 'label' => esc_html__( 'Heading 2', 'customify' ),
281	+ 'desc' => esc_html__( '', 'customify' ),
282	+ 'selector' => '.beta, h2',
283	+
284	+ 'default' => array(
285	+ 'font-family' => SM_HEADINGS_FONT,
286	+ 'font-weight' => '300',
287	+ 'font-size' => 32,
288	+ 'line-height' => 1.214,
289	+ 'letter-spacing' => 0,
290	+ 'text-transform' => 'none',
291	+ ),
292	+
293	+ // Sub Fields Configuration
294	+ 'fields' => array(
295	+ 'font-size' => array(
296	+ 'min' => 8,
297	+ 'max' => 90,
298	+ 'step' => 1,
299	+ 'unit' => 'px',
300	+ ),
301	+ 'line-height' => array( 0, 2, 0.1, '' ),
302	+ 'letter-spacing' => array( - 1, 2, 0.01, 'em' ),
303	+ 'text-align' => false,
304	+ 'text-transform' => true,
305	+ 'text-decoration' => false,
306	+ ),
307	+ ],
308	+
309	+ 'main_content_heading_4_font' => [
310	+ 'type' => 'font',
311	+ 'label' => esc_html__( 'Heading 4', 'customify' ),
312	+ 'desc' => esc_html__( '', 'customify' ),
313	+ 'selector' => '.delta, h4',
314	+
315	+ 'default' => array(
316	+ 'font-family' => SM_HEADINGS_FONT,
317	+ 'font-weight' => '300',
318	+ 'font-size' => 23,
319	+ 'line-height' => 1.6,
320	+ 'letter-spacing' => 0,
321	+ 'text-transform' => 'none',
322	+ ),
323	+
324	+ // Sub Fields Configuration
325	+ 'fields' => array(
326	+ 'font-size' => array(
327	+ 'min' => 8,
328	+ 'max' => 90,
329	+ 'step' => 1,
330	+ 'unit' => 'px',
331	+ ),
332	+ 'line-height' => array( 0, 2, 0.1, '' ),
333	+ 'letter-spacing' => array( - 1, 2, 0.01, 'em' ),
334	+ 'text-align' => false,
335	+ 'text-transform' => true,
336	+ 'text-decoration' => false,
337	+ ),
338	+ ],
339	+
340	+ 'main_content_heading_5_font' => [
341	+ 'type' => 'font',
342	+ 'label' => esc_html__( 'Heading 5', 'customify' ),
343	+ 'desc' => esc_html__( '', 'customify' ),
344	+ 'selector' => 'h5',
345	+
346	+ 'default' => array(
347	+ 'font-family' => SM_HEADINGS_FONT,
348	+ 'font-weight' => '300',
349	+ 'font-size' => 14,
350	+ 'line-height' => 1.6,
351	+ 'letter-spacing' => 0,
352	+ 'text-transform' => 'none',
353	+ ),
354	+
355	+ // Sub Fields Configuration
356	+ 'fields' => array(
357	+ 'font-size' => array(
358	+ 'min' => 8,
359	+ 'max' => 90,
360	+ 'step' => 1,
361	+ 'unit' => 'px',
362	+ ),
363	+ 'line-height' => array( 0, 2, 0.1, '' ),
364	+ 'letter-spacing' => array( - 1, 2, 0.01, 'em' ),
365	+ 'text-align' => false,
366	+ 'text-transform' => true,
367	+ 'text-decoration' => false,
368	+ ),
369	+ ],
370	+
371	+ 'main_content_heading_6_font' => [
372	+ 'type' => 'font',
373	+ 'label' => esc_html__( 'Heading 6', 'customify' ),
374	+ 'desc' => esc_html__( '', 'customify' ),
375	+ 'selector' => 'h6',
376	+
377	+ 'default' => array(
378	+ 'font-family' => SM_HEADINGS_FONT,
379	+ 'font-weight' => '300',
380	+ 'font-size' => 11,
381	+ 'line-height' => 1.6,
382	+ 'letter-spacing' => 0,
383	+ 'text-transform' => 'none',
384	+ ),
385	+
386	+ // Sub Fields Configuration
387	+ 'fields' => array(
388	+ 'font-size' => array(
389	+ 'min' => 8,
390	+ 'max' => 90,
391	+ 'step' => 1,
392	+ 'unit' => 'px',
393	+ ),
394	+ 'line-height' => array( 0, 2, 0.1, '' ),
395	+ 'letter-spacing' => array( - 1, 2, 0.01, 'em' ),
396	+ 'text-align' => false,
397	+ 'text-transform' => true,
398	+ 'text-decoration' => false,
399	+ ),
400	+ ],
401	+
402	+ 'main_content_heading_3_font' => [
403	+ 'type' => 'font',
404	+ 'label' => esc_html__( 'Heading 3', 'customify' ),
405	+ 'desc' => esc_html__( '', 'customify' ),
406	+ 'selector' => '.gamma, h3',
407	+
408	+ 'default' => array(
409	+ 'font-family' => SM_HEADINGS_FONT,
410	+ 'font-weight' => '300',
411	+ 'font-size' => 26,
412	+ 'line-height' => 1.6,
413	+ 'letter-spacing' => 0,
414	+ 'text-transform' => 'none',
415	+ ),
416	+
417	+ // Sub Fields Configuration
418	+ 'fields' => array(
419	+ 'font-size' => array(
420	+ 'min' => 8,
421	+ 'max' => 90,
422	+ 'step' => 1,
423	+ 'unit' => 'px',
424	+ ),
425	+ 'line-height' => array( 0, 2, 0.1, '' ),
426	+ 'letter-spacing' => array( - 1, 2, 0.01, 'em' ),
427	+ 'text-align' => false,
428	+ 'text-transform' => true,
429	+ 'text-decoration' => false,
430	+ ),
431	+ ],
432	+
433	+ /**
434	+ * Buttons Section
435	+ */
436	+ 'buttons_content' => [
437	+ 'type' => 'html',
438	+ 'html' => '<span id="section-title-blog-fonts" class="separator section label large">' . esc_html__( 'Buttons', 'customify' ) . '</span>',
439	+ ],
440	+ 'buttons_font' => [
441	+ 'type' => 'font',
442	+ 'label' => esc_html__( 'Buttons', 'customify' ),
443	+ 'desc' => esc_html__( '', 'customify' ),
444	+ 'selector' => '.added_to_cart, .button, button, input[type=button], input[type=reset], input[type=submit]',
445	+
446	+ 'default' => array(
447	+ 'font-family' => SM_SECONDARY_FONT,
448	+ 'font-weight' => '600',
449	+ 'font-size' => 14,
450	+ 'line-height' => 1.618,
451	+ 'letter-spacing' => 0,
452	+ 'text-transform' => 'none',
453	+ ),
454	+
455	+ // Sub Fields Configuration
456	+ 'fields' => array(
457	+ 'font-size' => array(
458	+ 'min' => 8,
459	+ 'max' => 90,
460	+ 'step' => 1,
461	+ 'unit' => 'px',
462	+ ),
463	+ 'line-height' => array( 0, 2, 0.1, '' ),
464	+ 'letter-spacing' => array( - 1, 2, 0.01, 'em' ),
465	+ 'text-align' => false,
466	+ 'text-transform' => true,
467	+ 'text-decoration' => false,
468	+ ),
469	+ ],
470	+
471	+
472	+ /**
473	+ * Cards Section
474	+ */
475	+ 'cards_content' => [
476	+ 'type' => 'html',
477	+ 'html' => '<span id="section-title-blog-fonts" class="separator section label large">' . esc_html__( 'Cards', 'customify' ) . '</span>',
478	+ ],
479	+
480	+ 'cards_price_font' => [
481	+ 'type' => 'font',
482	+ 'label' => esc_html__( 'Price', 'customify' ),
483	+ 'desc' => esc_html__( '', 'customify' ),
484	+ 'selector' => 'ul.products li.product .price',
485	+
486	+ 'default' => array(
487	+ 'font-family' => SM_BODY_FONT,
488	+ 'font-weight' => '400',
489	+ 'font-size' => 14,
490	+ 'line-height' => 1.7,
491	+ 'letter-spacing' => 0,
492	+ 'text-transform' => 'none',
493	+ ),
494	+
495	+ // Sub Fields Configuration
496	+ 'fields' => array(
497	+ 'font-size' => array(
498	+ 'min' => 8,
499	+ 'max' => 90,
500	+ 'step' => 1,
501	+ 'unit' => 'px',
502	+ ),
503	+ 'line-height' => array( 0, 2, 0.1, '' ),
504	+ 'letter-spacing' => array( - 1, 2, 0.01, 'em' ),
505	+ 'text-align' => false,
506	+ 'text-transform' => true,
507	+ 'text-decoration' => false,
508	+ ),
509	+ ],
510	+
511	+ ],
512	+ ],
513	+
514	/**
515	* COLORS - This section will handle all elements colors (eg. links, headings)
516	*/
517	'colors_section' => [
518	'title' => __( 'Colors', 'customify' ),
519	+ 'priority' => 3, // This will put this section right after Style Manager that has a priority of 1.
520	'options' => [
521	/**
522	* Header Section

1227	*/
1228	$config['sections']['style_manager_section'] = [
1229	'options' => [
1230	+ // Colors connected fields.
1231	'sm_color_primary' => [
1232	'connected_fields' => [
1233	'body_link_color',

1282	'sm_light_tertiary' => [
1283	'connected_fields' => [],
1284	],
1285	+
1286	+ // Fonts connected fields.
1287	+ 'sm_font_primary' => [
1288	+ 'connected_fields' => [
1289	+ 'main_content_page_title_font',
1290	+ 'main_content_quote_block_font',
1291	+ 'main_content_heading_1_font',
1292	+ 'main_content_heading_2_font',
1293	+ 'main_content_heading_3_font',
1294	+ ],
1295	+ ],
1296	+ 'sm_font_secondary' => [
1297	+ 'connected_fields' => [
1298	+ 'main_content_heading_4_font',
1299	+ 'main_content_heading_5_font',
1300	+ 'main_content_heading_6_font',
1301	+ 'buttons_font',
1302	+ 'header_navigation_font'
1303	+ ],
1304	+ ],
1305	+ 'sm_font_body' => [
1306	+ 'connected_fields' => [
1307	+ 'main_content_body_text_font',
1308	+ 'cards_price_font'
1309	+ ],
1310	+ ],
1311	],
1312	];
1313

js/customizer/color-palettes.js CHANGED Viewed

	@@ -22,8 +22,14 @@ let ColorPalettes = ( function( $, exports, wp ) {
22	// const color_sliders_selector = primary_color_selector + ', ' + secondary_color_selector + ', ' + tertiary_color_selector;
23	// const all_sliders_selector = color_sliders_selector + ', ' + color_dispersion_selector + ', ' + color_focus_point_selector;
24







25
26	- const initializePalettes = () => {
27	// Cache initial settings configuration to be able to update connected fields on variation change.
28	if ( typeof window.settingsClone === "undefined" ) {
29	window.settingsClone = $.extend(true, {}, wp.customize.settings.settings);
	@@ -34,6 +40,8 @@ let ColorPalettes = ( function( $, exports, wp ) {
34	if ( typeof window.connectedFieldsCallbacks === "undefined" ) {
35	window.connectedFieldsCallbacks = {};
36	}


37	};
38
39	const hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
	@@ -47,7 +55,7 @@ let ColorPalettes = ( function( $, exports, wp ) {
47	return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
48	}
49
50	- const ~~updateCurrentPalette~~ = ( label ) => {
51	const $palette = $( '.c-color-palette' );
52
53	if ( ! $palette.length ) {
	@@ -80,16 +88,21 @@ let ColorPalettes = ( function( $, exports, wp ) {
80	}
81	});
82

83	// trigger transition to new color palette
84	setTimeout(function() {
85	$palette.addClass( 'animate' );
86	- ~~var color = $next.first~~( ~~':visible'~~ )~~.css( 'color' )~~;
87	- $palette.find( '.c-color-palette__control' ).css( 'color', color );
88	});
89	};
90
91	- const ~~resetSettings~~ = ~~settings~~ => {
92	- _.~~each~~( ~~settings,~~ ~~function~~( ~~setting_id~~ ) {





93	const setting = wp.customize( setting_id );
94
95	if ( typeof setting !== "undefined" ) {
	@@ -100,7 +113,7 @@ let ColorPalettes = ( function( $, exports, wp ) {
100	});
101	};
102
103	- const ~~getConnectedFieldsCallback~~ = function( parent_setting_data, parent_setting_id ) {
104	return function( new_value, old_value ) {
105	_.each( parent_setting_data.connected_fields, function( connected_field_data ) {
106	if ( _.isUndefined( connected_field_data ) \|\| _.isUndefined( connected_field_data.setting_id ) \|\| ! _.isString( connected_field_data.setting_id ) ) {
	@@ -121,26 +134,27 @@ let ColorPalettes = ( function( $, exports, wp ) {
121	let parent_setting_data = wp.customize.settings.settings[parent_setting_id];
122	let parent_setting = wp.customize(parent_setting_id);
123
124	- if (~~typeof~~ parent_setting_data.connected_fields ~~!==~~ ~~"undefined"~~) {
125	- connectedFieldsCallbacks[parent_setting_id] = ~~getConnectedFieldsCallback~~(parent_setting_data, parent_setting_id);
126	- parent_setting.bind(connectedFieldsCallbacks[parent_setting_id]);







127	}
128	}
129	} );
130	};
131
132	const unbindConnectedFields = function() {
133	- _.each( ~~masterSettingIds~~, function( ~~parent_setting_id~~ ) {
134	- if ( ~~typeof~~ wp.customize~~.settings.settings[parent_setting_id] !== "undefined"~~ ) {
135	- ~~let~~ ~~parent_setting_data~~ ~~= wp.customize.settings.settings[parent_setting_id]~~;
136	- let parent_setting = wp.customize(parent_setting_id);
137	-
138	- if (typeof parent_setting_data.connected_fields !== "undefined" && typeof connectedFieldsCallbacks[parent_setting_id] !== "undefined") {
139	- parent_setting.unbind(connectedFieldsCallbacks[parent_setting_id]);
140	- }
141	- delete connectedFieldsCallbacks[parent_setting_id];
142	- }
143	} );

144	};
145
146	// alter connected fields of the master colors controls depending on the selected palette variation
	@@ -160,6 +174,22 @@ let ColorPalettes = ( function( $, exports, wp ) {
160	return variation;
161	};
162
















163	const createCurrentPaletteControls = () => {
164	const $palette = $( '.c-color-palette' );
165	const $fields = $palette.find( '.c-color-palette__fields' ).find( 'input' );
	@@ -183,16 +213,19 @@ let ColorPalettes = ( function( $, exports, wp ) {
183	const lastColor = setting();
184	const currentColor = ui.color.toString();
185
186	- if ( ~~'sm_color_primary' === $obj.data( 'setting'~~ ) ~~) {~~
187	- $( ~~'.c-color-palette__control'~~ )~~.css( 'color', currentColor )~~;
188	- }
189
190	if ( lastColor !== currentColor ) {
191	$obj.css( 'color', currentColor );
192	setting.set( currentColor );
193	$palette.find( '.c-color-palette__name' ).text( 'Custom Style' );
194	}
195	- }




196	} );
197
198	$obj.find( '.iris-picker' ).on( 'click', function( e ) {
	@@ -200,6 +233,13 @@ let ColorPalettes = ( function( $, exports, wp ) {
200	e.preventDefault();
201	} );
202







203	$obj.on( 'click', ( e ) => {
204	e.stopPropagation();
205	e.preventDefault();
	@@ -209,10 +249,11 @@ let ColorPalettes = ( function( $, exports, wp ) {
209	$input.hide();
210	$colors.removeClass( 'active inactive' );
211	} else {
212	- ~~$colors.not~~( $obj ).~~each~~( ~~function(~~ i, ~~obj~~ ) {
213	- $( ~~obj~~ )~~.data( 'target' ).not( $input ).hide()~~;
214	- } );
215	- ~~$input.show~~()~~.focus()~~;

216	}
217	} );
218
	@@ -230,8 +271,8 @@ let ColorPalettes = ( function( $, exports, wp ) {
230	$colors.not( $obj ).addClass( 'inactive' ).removeClass( 'active' );
231	$obj.addClass( 'active' ).removeClass( 'inactive' );
232
233	- $colors.not( $obj ).each( function( i, ~~obj~~ ) {
234	- $( ~~obj~~ ).data( 'target' ).iris( 'hide' );
235	} );
236
237	const $iris = $input.next( '.iris-picker' );
	@@ -255,6 +296,8 @@ let ColorPalettes = ( function( $, exports, wp ) {
255	$input.hide();
256	} );
257	} );


258	};
259
260	const onPaletteChange = function() {
	@@ -266,10 +309,41 @@ let ColorPalettes = ( function( $, exports, wp ) {
266	$label.remove();
267
268	$( this ).trigger( 'customify:preset-change' );
269	- ~~updateCurrentPalette~~( label );



270	// buildColorMatrix();
271	};
272




























273	const buildColorMatrix = () => {
274	const $matrix = $( '.sm_color_matrix' );
275
	@@ -306,26 +380,76 @@ let ColorPalettes = ( function( $, exports, wp ) {
306	});
307	};
308
309	- const ~~toggleVisibleOptions~~ = ( ~~settings~~ ) => {
310	- let ~~optionsToShow~~ = [];












311
312	- _.~~each~~( ~~masterSettingIds,~~ ~~function(~~ ~~settingId~~ ) {
313	- ~~const~~ connectedFields = ~~settings[settingId]['connected_fields'];~~
314	- if ( ! _.~~isUndefined( connectedFields ) && connectedFields.length ) {~~
315	- ~~optionsToShow~~.~~push~~( ~~settingId~~ );
316	- }








317	} );
318
319	- if ( ~~optionsToShow~~.~~length~~ ) {
320	- ~~let optionsSelector = '.' + optionsToShow.join(', .');~~
321	- $( '.c-color-palette .color' ).~~addClass( 'hidden' ).filter( optionsSelector ).~~removeClass( '~~hidden~~' );




322	}
323	- };
324
325	- ~~const alterFields = ( settings~~, ~~swapMap~~ ) ~~=> {~~














326
327	- ~~var~~ ~~newSettings~~ = ~~JSON~~.~~parse~~(~~JSON~~.~~stringify~~(~~settings~~));
328	- ~~var~~ ~~oldSettings~~ = ~~JSON~~.~~parse~~(~~JSON~~.~~stringify~~(~~settings~~));













329
330	_.each( swapMap, function( fromArray, to ) {
331	if ( typeof newSettings[to] !== "undefined" ) {
	@@ -447,7 +571,6 @@ let ColorPalettes = ( function( $, exports, wp ) {
447	};
448
449	const reloadConnectedFields = () => {
450	- const variation = getCurrentVariation();
451	// const primaryRatio = $( primary_color_selector ).val() / 100;
452	// const secondaryRatio = $( secondary_color_selector ).val() / 100;
453	// const tertiaryRatio = $( tertiary_color_selector ).val() / 100;
	@@ -456,23 +579,40 @@ let ColorPalettes = ( function( $, exports, wp ) {
456
457	let tempSettings = JSON.parse(JSON.stringify(window.settingsClone));
458
459	- unbindConnectedFields();
460	-
461	// tempSettings = moveConnectedFields( tempSettings, 'sm_dark_primary', 'sm_color_primary', primaryRatio );
462	// tempSettings = moveConnectedFields( tempSettings, 'sm_dark_secondary', 'sm_color_secondary', secondaryRatio );
463	// tempSettings = moveConnectedFields( tempSettings, 'sm_dark_tertiary', 'sm_color_tertiary', tertiaryRatio );
464	// tempSettings = disperseColorConnectedFields( tempSettings, colorDispersion, focusPoint );
465
466	- tempSettings = ~~alterFields~~( tempSettings, ~~colorPalettesVariations[variation]~~ );










467
468	- ~~toggleVisibleOptions~~( ~~tempSettings~~ );



469
470	- wp.~~customize~~.~~settings~~.~~settings~~ ~~= tempSettings~~;










471
472	- bindConnectedFields();
473	- // buildColorMatrix();
474	- resetSettings( masterSettingIds );
475	- };
476
477	const bindEvents = () => {
478	const paletteControlSelector = '.c-color-palette__control';
	@@ -483,19 +623,23 @@ let ColorPalettes = ( function( $, exports, wp ) {
483	$paletteControl.filter( '.variation-' + variation ).addClass( 'active' );
484
485	$( 'body' ).on( 'click', paletteControlSelector, function() {
486	- ~~let~~ ~~$obj = $~~( ~~this~~ ),
487	- $~~target~~ = $( ~~$obj.data(~~ ~~'target'~~ ) );

488
489	- $obj.siblings( paletteControlSelector ).removeClass( 'active' );
490	- $obj.addClass( 'active' );
491	- $target.prop( 'checked', true ).trigger( 'change' );

492	} );
493
494	// when variation is changed reload connected fields from cached version of customizer settings config
495	- $( document ).on( 'change', '[name="_customize-radio-sm_color_palette_variation_control"]', ~~reloadConnectedFields~~ );
496
497	//
498	- $( document ).on( 'click', '.customify_preset.color_palette input', ~~onPaletteChange~~ );


499
500	// $( all_sliders_selector ).on( 'input', reloadConnectedFields );
501
	@@ -506,11 +650,15 @@ let ColorPalettes = ( function( $, exports, wp ) {
506	};
507
508	wp.customize.bind( 'ready', function() {
509	- ~~initializePalettes~~();
510	- ~~createCurrentPaletteControls();~~
511	- ~~updateCurrentPalette~~();
512	- ~~reloadConnectedFields();~~
513	// buildColorMatrix();




514	bindEvents();
515	} );
516


22	// const color_sliders_selector = primary_color_selector + ', ' + secondary_color_selector + ', ' + tertiary_color_selector;
23	// const all_sliders_selector = color_sliders_selector + ', ' + color_dispersion_selector + ', ' + color_focus_point_selector;
24
25	+ let setupGlobalsDone = false;
26	+
27	+ const setupGlobals = () => {
28	+
29	+ if ( setupGlobalsDone ) {
30	+ return;
31	+ }
32

33	// Cache initial settings configuration to be able to update connected fields on variation change.
34	if ( typeof window.settingsClone === "undefined" ) {
35	window.settingsClone = $.extend(true, {}, wp.customize.settings.settings);

40	if ( typeof window.connectedFieldsCallbacks === "undefined" ) {
41	window.connectedFieldsCallbacks = {};
42	}
43	+
44	+ setupGlobalsDone = true;
45	};
46
47	const hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];

55	return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
56	}
57
58	+ const setCurrentPalette = ( label ) => {
59	const $palette = $( '.c-color-palette' );
60
61	if ( ! $palette.length ) {

88	}
89	});
90
91	+ $palette.find( '.altered' ).removeClass( 'altered' );
92	// trigger transition to new color palette
93	setTimeout(function() {
94	$palette.addClass( 'animate' );
95	+ updateActiveVariationControlColor();

96	});
97	};
98
99	+ const updateActiveVariationControlColor = _.debounce( () => {
100	+ var color = $( '.colors.next .color' ).first( ':visible' ).css( 'color' );
101	+ $( '.c-color-palette__control' ).css( 'color', color );
102	+ }, 30 );
103	+
104	+ const resetSettings = () => {
105	+ _.each( masterSettingIds, function( setting_id ) {
106	const setting = wp.customize( setting_id );
107
108	if ( typeof setting !== "undefined" ) {

113	});
114	};
115
116	+ const getMasterFieldCallback = function( parent_setting_data, parent_setting_id ) {
117	return function( new_value, old_value ) {
118	_.each( parent_setting_data.connected_fields, function( connected_field_data ) {
119	if ( _.isUndefined( connected_field_data ) \|\| _.isUndefined( connected_field_data.setting_id ) \|\| ! _.isString( connected_field_data.setting_id ) ) {

134	let parent_setting_data = wp.customize.settings.settings[parent_setting_id];
135	let parent_setting = wp.customize(parent_setting_id);
136
137	+ if ( ! _.isUndefined( parent_setting_data.connected_fields ) ) {
138	+ window.connectedFieldsCallbacks[parent_setting_id] = getMasterFieldCallback(parent_setting_data, parent_setting_id);
139	+ parent_setting.bind(window.connectedFieldsCallbacks[parent_setting_id]);
140	+
141	+ _.each( parent_setting_data.connected_fields, function( connected_field_data ) {
142	+ let connected_setting_id = connected_field_data.setting_id;
143	+ let connected_setting = wp.customize(connected_setting_id);
144	+ window.connectedFieldsCallbacks[connected_setting_id] = toggleAlteredClassOnMasterControls;
145	+ connected_setting.bind(window.connectedFieldsCallbacks[connected_setting_id]);
146	+ } );
147	}
148	}
149	} );
150	};
151
152	const unbindConnectedFields = function() {
153	+ _.each( window.connectedFieldsCallbacks, function( callback, setting_id ) {
154	+ let setting = wp.customize(setting_id);
155	+ setting.unbind( callback );







156	} );
157	+ window.connectedFieldsCallbacks = {};
158	};
159
160	// alter connected fields of the master colors controls depending on the selected palette variation

174	return variation;
175	};
176
177	+ // return an array with the hex values of a certain color palette
178	+ const getPaletteColors = ( palette_id ) => {
179	+
180	+ }
181	+
182	+ // return an array with the hex values of the current palette
183	+ const getCurrentPaletteColors = () => {
184	+ const colors = [];
185	+ _.each( masterSettingIds, function( setting_id ) {
186	+ const setting = wp.customize( setting_id );
187	+ const color = setting();
188	+ colors.push( color );
189	+ } );
190	+ return colors;
191	+ }
192	+
193	const createCurrentPaletteControls = () => {
194	const $palette = $( '.c-color-palette' );
195	const $fields = $palette.find( '.c-color-palette__fields' ).find( 'input' );

213	const lastColor = setting();
214	const currentColor = ui.color.toString();
215
216	+ updateActiveVariationControlColor();
217	+ setPalettesOnConnectedFields();

218
219	if ( lastColor !== currentColor ) {
220	$obj.css( 'color', currentColor );
221	setting.set( currentColor );
222	$palette.find( '.c-color-palette__name' ).text( 'Custom Style' );
223	}
224	+
225	+ if ( event.originalEvent.type !== 'external' ) {
226	+ $palette.find( '.color.' + setting_id ).removeClass( 'altered' );
227	+ }
228	+ },
229	} );
230
231	$obj.find( '.iris-picker' ).on( 'click', function( e ) {

233	e.preventDefault();
234	} );
235
236	+ const showColorPicker = () => {
237	+ $colors.not( $obj ).each( function( i, obj ) {
238	+ $( obj ).data( 'target' ).not( $input ).hide();
239	+ } );
240	+ $input.show().focus();
241	+ }
242	+
243	$obj.on( 'click', ( e ) => {
244	e.stopPropagation();
245	e.preventDefault();

249	$input.hide();
250	$colors.removeClass( 'active inactive' );
251	} else {
252	+ if ( $obj.is( '.altered' ) ) {
253	+ confirmChanges( showColorPicker );
254	+ } else {
255	+ showColorPicker();
256	+ }
257	}
258	} );
259

271	$colors.not( $obj ).addClass( 'inactive' ).removeClass( 'active' );
272	$obj.addClass( 'active' ).removeClass( 'inactive' );
273
274	+ $colors.not( $obj ).each( function( i, other ) {
275	+ $( other ).data( 'target' ).iris( 'hide' );
276	} );
277
278	const $iris = $input.next( '.iris-picker' );

296	$input.hide();
297	} );
298	} );
299	+
300	+ setCurrentPalette();
301	};
302
303	const onPaletteChange = function() {

309	$label.remove();
310
311	$( this ).trigger( 'customify:preset-change' );
312	+ setCurrentPalette( label );
313	+
314	+ setPalettesOnConnectedFields();
315	+
316	// buildColorMatrix();
317	};
318
319	+ // this function goes through all the connected fields and adds swatches to the default color picker for all the colors in the current color palette
320	+ const setPalettesOnConnectedFields = _.debounce( () => {
321	+ let $targets = $();
322	+ // loop through the master settings
323	+ _.each( masterSettingIds, function( parent_setting_id ) {
324	+ if ( typeof wp.customize.settings.settings[parent_setting_id] !== "undefined" ) {
325	+ let parent_setting_data = wp.customize.settings.settings[parent_setting_id];
326	+ if ( ! _.isUndefined( parent_setting_data.connected_fields ) ) {
327	+ // loop through all the connected fields and search the element on which the iris plugin has been initialized
328	+ _.each( parent_setting_data.connected_fields, function( connected_field_data ) {
329	+ // the connected_setting_id is different than the actual id attribute of the element we're searching for
330	+ // so we have to do some regular expressions
331	+ let connected_setting_id = connected_field_data.setting_id;
332	+ let matches = connected_setting_id.match(/\[(.*?)\]/);
333	+
334	+ if ( matches ) {
335	+ let target_id = matches[1];
336	+ let $target = $( '.customize-control-color' ).filter( '[id*="' + target_id + '"]' ).find( '.wp-color-picker' );
337	+ $targets = $targets.add( $target );
338	+ }
339	+ });
340	+ }
341	+ }
342	+ });
343	+ // apply the current color palettes to all the elements found
344	+ $targets.iris({ palettes: getCurrentPaletteColors() });
345	+ }, 30 );
346	+
347	const buildColorMatrix = () => {
348	const $matrix = $( '.sm_color_matrix' );
349

380	});
381	};
382
383	+ const toggleAlteredClassOnMasterControls = _.debounce( () => {
384	+ let alteredSettings = [];
385	+ let alteredSettingsSelector;
386	+
387	+ _.each( masterSettingIds, function( masterSettingId ) {
388	+ let connectedFields = wp.customize.settings.settings[masterSettingId]['connected_fields'];
389	+ let masterSettingValue = wp.customize( masterSettingId )();
390	+ let connectedFieldsWereAltered = false;
391	+
392	+ if ( ! _.isUndefined( connectedFields ) && ! Array.isArray( connectedFields ) ) {
393	+ connectedFields = Object.keys( connectedFields ).map( function(key) {
394	+ return connectedFields[key];
395	+ });
396	+ }
397
398	+ if ( ! _.isUndefined( connectedFields ) && connectedFields.length ) {
399	+ _.each( connectedFields, function( connectedField ) {
400	+ let connectedSettingId = connectedField.setting_id;
401	+ let connectedFieldValue = wp.customize( connectedSettingId )();
402	+ if ( connectedFieldValue.toLowerCase() !== masterSettingValue.toLowerCase() ) {
403	+ connectedFieldsWereAltered = true;
404	+ }
405	+ } );
406	+
407	+ if ( connectedFieldsWereAltered ) {
408	+ alteredSettings.push( masterSettingId );
409	+ }
410	+ }
411	} );
412
413	+ alteredSettingsSelector = '.' + alteredSettings.join(', .');
414	+
415	+ $( '.c-color-palette .color' ).removeClass( 'altered' );
416	+ $( '.js-altered-notification' ).toggleClass( 'hidden', ! alteredSettings.length );
417	+
418	+ if ( alteredSettings.length ) {
419	+ $( '.c-color-palette .color' ).filter( alteredSettingsSelector ).addClass( 'altered' );
420	}

421
422	+ }, 30 );
423	+
424	+ const toggleHiddenClassOnMasterControls = _.debounce( () => {
425	+ let optionsToShow = [];
426	+ let optionsSelector;
427	+
428	+ _.each( masterSettingIds, function( masterSettingId ) {
429	+ let connectedFields = wp.customize.settings.settings[masterSettingId]['connected_fields'];
430	+
431	+ if ( ! _.isUndefined( connectedFields ) && ! _.isEmpty( connectedFields ) ) {
432	+ optionsToShow.push( masterSettingId );
433	+ }
434	+ } );
435	+
436	+ optionsSelector = '.' + optionsToShow.join(', .');
437
438	+ $( '.c-color-palette .color' ).addClass( 'hidden' ).filter( optionsSelector ).removeClass( 'hidden' )
439	+ $( '.customify_preset.color_palette .palette__item' ).addClass( 'hidden' ).filter( optionsSelector ).removeClass( 'hidden' );
440	+ }, 30 );
441	+
442	+ const refreshCurrentPaletteControl = () => {
443	+ toggleAlteredClassOnMasterControls();
444	+ toggleHiddenClassOnMasterControls();
445	+ updateActiveVariationControlColor();
446	+ }
447	+
448	+ const swapConnectedFields = ( settings ) => {
449	+ let variation = getCurrentVariation();
450	+ let swapMap = window.colorPalettesVariations[variation];
451	+ let newSettings = JSON.parse(JSON.stringify(settings));
452	+ let oldSettings = JSON.parse(JSON.stringify(settings));
453
454	_.each( swapMap, function( fromArray, to ) {
455	if ( typeof newSettings[to] !== "undefined" ) {

571	};
572
573	const reloadConnectedFields = () => {

574	// const primaryRatio = $( primary_color_selector ).val() / 100;
575	// const secondaryRatio = $( secondary_color_selector ).val() / 100;
576	// const tertiaryRatio = $( tertiary_color_selector ).val() / 100;

579
580	let tempSettings = JSON.parse(JSON.stringify(window.settingsClone));
581


582	// tempSettings = moveConnectedFields( tempSettings, 'sm_dark_primary', 'sm_color_primary', primaryRatio );
583	// tempSettings = moveConnectedFields( tempSettings, 'sm_dark_secondary', 'sm_color_secondary', secondaryRatio );
584	// tempSettings = moveConnectedFields( tempSettings, 'sm_dark_tertiary', 'sm_color_tertiary', tertiaryRatio );
585	// tempSettings = disperseColorConnectedFields( tempSettings, colorDispersion, focusPoint );
586
587	+ tempSettings = swapConnectedFields( tempSettings );
588	+ wp.customize.settings.settings = tempSettings;
589	+ };
590	+
591	+ const reinitializeConnectedFields = () => {
592	+ reloadConnectedFields();
593	+ unbindConnectedFields();
594	+ bindConnectedFields();
595	+ resetSettings();
596	+ refreshCurrentPaletteControl();
597	+ }
598
599	+ const confirmChanges = ( callback ) => {
600	+ if ( typeof callback !== 'function' ) {
601	+ return;
602	+ }
603
604	+ let altered = !! $( '.c-color-palette .color.altered' ).length;
605	+ let confirmed = true;
606	+
607	+ if ( altered ) {
608	+ confirmed = confirm( "One or more fields connected to the color palette have been modified. By changing the palette variation you will lose changes to any color made prior to this action." );
609	+ }
610	+
611	+ if ( ! altered \|\| confirmed ) {
612	+ callback();
613	+ }
614	+ }
615




616
617	const bindEvents = () => {
618	const paletteControlSelector = '.c-color-palette__control';

623	$paletteControl.filter( '.variation-' + variation ).addClass( 'active' );
624
625	$( 'body' ).on( 'click', paletteControlSelector, function() {
626	+ confirmChanges( () => {
627	+ let $obj = $( this ),
628	+ $target = $( $obj.data( 'target' ) );
629
630	+ $obj.siblings( paletteControlSelector ).removeClass( 'active' );
631	+ $obj.addClass( 'active' );
632	+ $target.prop( 'checked', true ).trigger( 'change' );
633	+ } );
634	} );
635
636	// when variation is changed reload connected fields from cached version of customizer settings config
637	+ $( document ).on( 'change', '[name="_customize-radio-sm_color_palette_variation_control"]', reinitializeConnectedFields );
638
639	//
640	+ $( document ).on( 'click', '.customify_preset.color_palette input', function () {
641	+ confirmChanges( onPaletteChange.bind( this ) );
642	+ } );
643
644	// $( all_sliders_selector ).on( 'input', reloadConnectedFields );
645

650	};
651
652	wp.customize.bind( 'ready', function() {
653	+ setupGlobals();
654	+
655	+ createCurrentPaletteControls();
656	+
657	// buildColorMatrix();
658	+ reloadConnectedFields();
659	+ bindConnectedFields();
660	+ refreshCurrentPaletteControl();
661	+ setPalettesOnConnectedFields();
662	bindEvents();
663	} );
664

js/customizer/customify-palette-variations.js DELETED Viewed

@@ -1,68 +0,0 @@
-            -
            window.variations = {
-            -
                'light': {
-            -
                    'sm_color_primary': 'sm_color_primary',
-            -
                    'sm_color_secondary': 'sm_color_secondary',
-            -
                    'sm_color_tertiary': 'sm_color_tertiary',
-            -
                    'sm_dark_primary': 'sm_dark_primary',
-            -
                    'sm_dark_secondary': 'sm_dark_secondary',
-            -
                    'sm_dark_tertiary': 'sm_dark_tertiary',
-            -
                    'sm_light_primary': 'sm_light_primary',
-            -
                    'sm_light_secondary': 'sm_light_secondary',
-            -
                    'sm_light_tertiary': 'sm_light_tertiary',
-            -
                },
-            -
                'dark': {
-            -
                    'sm_color_primary': 'sm_color_primary',
-            -
                    'sm_color_secondary': 'sm_color_secondary',
-            -
                    'sm_color_tertiary': 'sm_color_tertiary',
-            -
                    'sm_dark_primary': 'sm_light_primary',
-            -
                    'sm_dark_secondary': 'sm_light_secondary',
-            -
                    'sm_dark_tertiary': 'sm_light_tertiary',
-            -
                    'sm_light_primary': 'sm_dark_primary',
-            -
                    'sm_light_secondary': 'sm_dark_secondary',
-            -
                    'sm_light_tertiary': 'sm_dark_tertiary',
-            -
                },
-            -
                'colorful': {
-            -
                    'sm_color_primary': 'sm_light_primary',
-            -
                    'sm_color_secondary': 'sm_light_secondary',
-            -
                    'sm_color_tertiary': 'sm_light_tertiary',
-            -
                    'sm_dark_primary': [],
-            -
                    'sm_dark_secondary': [],
-            -
                    'sm_dark_tertiary': [],
-            -
                    'sm_light_primary': ['sm_color_primary', 'sm_dark_primary'],
-            -
                    'sm_light_secondary': ['sm_color_secondary', 'sm_dark_secondary'],
-            -
                    'sm_light_tertiary': ['sm_color_tertiary', 'sm_dark_tertiary'],
-            -
                },
-            -
                'dark_alt': {
-            -
                    'sm_color_primary': 'sm_light_primary',
-            -
                    'sm_color_secondary': 'sm_light_secondary',
-            -
                    'sm_color_tertiary': 'sm_light_tertiary',
-            -
                    'sm_dark_primary': 'sm_color_primary',
-            -
                    'sm_dark_secondary': 'sm_color_secondary',
-            -
                    'sm_dark_tertiary': 'sm_color_tertiary',
-            -
                    'sm_light_primary': 'sm_dark_primary',
-            -
                    'sm_light_secondary': 'sm_dark_secondary',
-            -
                    'sm_light_tertiary': 'sm_dark_tertiary',
-            -
                },
-            -
                'colorful_alt': {
-            -
                    'sm_color_primary': 'sm_dark_primary',
-            -
                    'sm_color_secondary': 'sm_dark_secondary',
-            -
                    'sm_color_tertiary': 'sm_dark_tertiary',
-            -
                    'sm_dark_primary': 'sm_light_primary',
-            -
                    'sm_dark_secondary': 'sm_light_secondary',
-            -
                    'sm_dark_tertiary': 'sm_light_tertiary',
-            -
                    'sm_light_primary': 'sm_color_primary',
-            -
                    'sm_light_secondary': 'sm_color_secondary',
-            -
                    'sm_light_tertiary': 'sm_color_tertiary',
-            -
                },
-            -
                'light_alt': {
-            -
                    'sm_color_primary': 'sm_dark_primary',
-            -
                    'sm_color_secondary': 'sm_dark_secondary',
-            -
                    'sm_color_tertiary': 'sm_dark_tertiary',
-            -
                    'sm_dark_primary': 'sm_color_primary',
-            -
                    'sm_dark_secondary': 'sm_color_secondary',
-            -
                    'sm_dark_tertiary': 'sm_color_tertiary',
-            -
                    'sm_light_primary': 'sm_light_primary',
-            -
                    'sm_light_secondary': 'sm_light_secondary',
-            -
                    'sm_light_tertiary': 'sm_light_tertiary',
-            -
                },
-            -
            };

js/customizer/customify-palettes.js DELETED Viewed

@@ -1,268 +0,0 @@
-            -
            ( function( $, exports, wp ) {
-            -
-            -
                const settings = [
-            -
                    "sm_color_primary",
-            -
                    "sm_color_secondary",
-            -
                    "sm_color_tertiary",
-            -
                    "sm_dark_primary",
-            -
                    "sm_dark_secondary",
-            -
                    "sm_dark_tertiary",
-            -
                    "sm_light_primary",
-            -
                    "sm_light_secondary",
-            -
                    "sm_light_tertiary"
-            -
                ];
-            -
-            -
                const initializeColorPalettes = () => {
-            -
                    // cache initial settings configuration to be able to update connected fields on variation change
-            -
                    window.settingsClone = $.extend(true, {}, wp.customize.settings.settings);
-            -
-            -
                    // create a stack of callbacks bound to parent settings to be able to unbind them
-            -
                    // when altering the connected_fields attribute
-            -
                    window.connectedFieldsCallbacks = {};
-            -
                };
-            -
-            -
                const updateCurrentPalette = ( label ) => {
-            -
                    const $palette = $( '.c-palette' );
-            -
-            -
                    if ( ! $palette.length ) {
-            -
                        return;
-            -
                    }
-            -
-            -
                    const $current = $palette.find( '.colors.current' );
-            -
                    const $next = $palette.find( '.colors.next' );
-            -
-            -
                    label = label || 'Custom Style';
-            -
                    $palette.find( '.c-palette__name' ).text( label );
-            -
-            -
                    // apply the last animate set of colors to the "current" color palette
-            -
                    _.each( settings, function( setting_id ) {
-            -
                        const color = $next.find( '.' + setting_id ).css( 'color' );
-            -
                        $current.find( '.' + setting_id ).css( 'color', color );
-            -
                    });
-            -
-            -
                    // removing the "animate" class will put the "next" color palette out view
-            -
                    // so we can update the colors in it
-            -
                    $palette.removeClass( 'animate' );
-            -
-            -
                    // update the colors in the "next" palette with the new values
-            -
                    _.each( settings, function( setting_id ) {
-            -
                        const setting = wp.customize( setting_id );
-            -
-            -
                        if ( typeof setting !== "undefined" ) {
-            -
                            $next.find( '.' + setting_id ).css( 'color', setting() );
-            -
                        }
-            -
                    });
-            -
-            -
                    // trigger transition to new color palette
-            -
                    setTimeout(function() {
-            -
                        $palette.addClass( 'animate' );
-            -
                        $palette.find( '.c-palette__control' ).css( 'color', wp.customize( 'sm_color_primary' )() );
-            -
                    });
-            -
                };
-            -
-            -
                const bindVariationChange = () => {
-            -
                    const paletteControlSelector = '.c-palette__control';
-            -
                    const $paletteControl = $( paletteControlSelector );
-            -
                    const variation = wp.customize( 'sm_color_palette_variation' )();
-            -
-            -
                    if ( _.isUndefined( variation ) || ! $paletteControl.length ) {
-            -
                        return;
-            -
                    }
-            -
-            -
                    $paletteControl.removeClass( 'active' );
-            -
                    $paletteControl.filter( '.variation-' + variation ).addClass( 'active' );
-            -
                    $( 'body' ).on( 'click', paletteControlSelector, function() {
-            -
                        let $obj = $( this ),
-            -
                            $target = $( $obj.data( 'target' ) );
-            -
-            -
                        $obj.siblings( paletteControlSelector ).removeClass( 'active' );
-            -
                        $obj.addClass( 'active' );
-            -
                        $target.prop( 'checked', true ).trigger( 'change' );
-            -
                    } );
-            -
                };
-            -
-            -
                const alterConnectedFields = swapMap => {
-            -
                    _.each( swapMap, function( fromArray, to ) {
-            -
                        if ( typeof wp.customize.settings.settings[to] !== "undefined" ) {
-            -
                            let newConnectedFields = [];
-            -
                            if ( fromArray instanceof Array ) {
-            -
                                _.each( fromArray, function( from ) {
-            -
                                    if ( typeof window.settingsClone[from] !== "undefined" ) {
-            -
                                        let oldConnectedFields;
-            -
                                        if ( ! _.isUndefined( window.settingsClone[from]['connected_fields'] ) ) {
-            -
            	                            oldConnectedFields = Object.values( window.settingsClone[from]['connected_fields'] );
-            -
                                            newConnectedFields = newConnectedFields.concat( oldConnectedFields );
-            -
                                        }
-            -
                                    }
-            -
                                } );
-            -
-            -
            	                newConnectedFields = Object.keys( newConnectedFields ).map( function(key) {
-            -
            		                return newConnectedFields[key];
-            -
            	                });
-            -
                            } else {
-            -
                                newConnectedFields = window.settingsClone[fromArray]['connected_fields'];
-            -
                            }
-            -
                            wp.customize.settings.settings[to]['connected_fields'] = newConnectedFields;
-            -
                        }
-            -
                    } );
-            -
                };
-            -
-            -
                const resetSettings = settings => {
-            -
                    _.each( settings, function( setting_id ) {
-            -
                        const setting = wp.customize( setting_id );
-            -
-            -
                        if ( typeof setting !== "undefined" ) {
-            -
                            let value = setting();
-            -
                            setting.set( value + "ff" );
-            -
                            setting.set( value );
-            -
                        }
-            -
                    });
-            -
                };
-            -
-            -
                const getConnectedFieldsCallback = function( parent_setting_data, parent_setting_id ) {
-            -
                    return function( new_value, old_value ) {
-            -
                        _.each( parent_setting_data.connected_fields, function( connected_field_data ) {
-            -
                            if ( _.isUndefined( connected_field_data ) || _.isUndefined( connected_field_data.setting_id ) || ! _.isString( connected_field_data.setting_id ) ) {
-            -
                                return;
-            -
                            }
-            -
                            const setting = wp.customize( connected_field_data.setting_id );
-            -
                            if ( _.isUndefined( setting ) ) {
-            -
                                return;
-            -
                            }
-            -
                            setting.set( new_value );
-            -
                        } );
-            -
                    }
-            -
                };
-            -
-            -
                const bindConnectedFields = function() {
-            -
                    _.each( wp.customize.settings.settings, function( parent_setting_data, parent_setting_id ) {
-            -
                        let parent_setting = wp.customize( parent_setting_id );
-            -
                        if ( typeof parent_setting_data.connected_fields !== "undefined" ) {
-            -
                            connectedFieldsCallbacks[parent_setting_id] = getConnectedFieldsCallback( parent_setting_data, parent_setting_id );
-            -
                            parent_setting.bind( connectedFieldsCallbacks[parent_setting_id] );
-            -
                        }
-            -
                    } );
-            -
                };
-            -
-            -
                const unbindConnectedFields = function() {
-            -
                    _.each( wp.customize.settings.settings, function( parent_setting_data, parent_setting_id ) {
-            -
                        let parent_setting = wp.customize( parent_setting_id );
-            -
                        if ( typeof parent_setting_data.connected_fields !== "undefined" && typeof connectedFieldsCallbacks[parent_setting_id] !== "undefined" ) {
-            -
                            parent_setting.unbind( connectedFieldsCallbacks[parent_setting_id] );
-            -
                        }
-            -
                        delete connectedFieldsCallbacks[parent_setting_id];
-            -
                    } );
-            -
                };
-            -
-            -
                // alter connected fields of the master colors controls depending on the selected palette variation
-            -
                const reloadConnectedFields = () => {
-            -
                    const setting = wp.customize( 'sm_color_palette_variation' );
-            -
-            -
                    if ( _.isUndefined( setting ) ) {
-            -
                        return;
-            -
                    }
-            -
-            -
                    const variation = setting();
-            -
-            -
                    if ( ! window.variations.hasOwnProperty( variation ) ) {
-            -
                        return;
-            -
                    }
-            -
-            -
                    unbindConnectedFields();
-            -
                    alterConnectedFields( variations[variation] );
-            -
                    bindConnectedFields();
-            -
                    resetSettings( settings );
-            -
                };
-            -
-            -
                const createCurrentPaletteControls = () => {
-            -
                    const $palette = $( '.c-palette' );
-            -
-            -
                    if ( ! $palette.length ) {
-            -
                        return;
-            -
                    }
-            -
-            -
                    const $colors = $palette.find( '.colors.next .color' );
-            -
-            -
                    $colors.each( ( i, obj ) => {
-            -
                        const $obj = $( obj );
-            -
                        const setting_id = $obj.data( 'setting' );
-            -
                        const setting = wp.customize( setting_id );
-            -
-            -
                        $obj.iris( {
-            -
                            change: ( event, ui ) => {
-            -
                                const lastColor = setting();
-            -
                                const currentColor = ui.color.toString();
-            -
-            -
                                if ( 'sm_color_primary' === $obj.data( 'setting' ) ) {
-            -
            	                    $( '.c-palette__control' ).css( 'color', currentColor );
-            -
                                }
-            -
-            -
                                if ( lastColor !== currentColor ) {
-            -
                                    $obj.css( 'color', currentColor );
-            -
            	                    setting.set( currentColor );
-            -
                                    $palette.find( '.c-palette__name' ).text( 'Custom Style' );
-            -
                                }
-            -
                            }
-            -
                        } );
-            -
-            -
            	        $obj.find( '.iris-picker' ).on( 'click', function( e ) {
-            -
            		        e.stopPropagation();
-            -
            		        e.preventDefault();
-            -
                        } );
-            -
-            -
                        $obj.on( 'click', ( e ) => {
-            -
                            e.stopPropagation();
-            -
                            e.preventDefault();
-            -
-            -
                            const hidden = ! $obj.find( '.iris-picker' ).is( ":visible" );
-            -
-            -
                            if ( hidden ) {
-            -
                                $colors.not( $obj ).addClass( 'inactive' ).iris( 'hide' );
-            -
                                $obj.removeClass( 'inactive' );
-            -
-            -
            	                const $iris = $obj.find( '.iris-picker' );
-            -
            	                const paletteWidth = $palette.outerWidth();
-            -
            	                const irisWidth = $iris.outerWidth();
-            -
-            -
            	                $iris.css( 'left', ( paletteWidth - irisWidth ) * i / ( $colors.length - 1 ) );
-            -
                            } else {
-            -
                                $colors.removeClass( 'inactive' );
-            -
                            }
-            -
-            -
                            $obj.iris( 'color', $obj.css( 'color' ) );
-            -
                            $obj.iris( 'toggle' );
-            -
                        } );
-            -
                    } );
-            -
-            -
                    $( 'body' ).on( 'click', function() {
-            -
                        $colors.removeClass( 'inactive' ).iris( 'hide' );
-            -
                    } );
-            -
                };
-            -
-            -
                const onPaletteChange = function() {
-            -
                    const $label = $( this ).next( 'label' ).clone();
-            -
                    let label;
-            -
-            -
                    $label.find( '.preview__letter' ).remove();
-            -
                    label = $label.text();
-            -
                    $label.remove();
-            -
-            -
                    $( this ).trigger( 'customify:preset-change' );
-            -
                    updateCurrentPalette( label );
-            -
                };
-            -
-            -
                const handleColorPalettes = () => {
-            -
                    initializeColorPalettes();
-            -
                    createCurrentPaletteControls();
-            -
                    reloadConnectedFields();
-            -
                    updateCurrentPalette();
-            -
                    bindVariationChange();
-            -
-            -
                    // when variation is changed reload connected fields from cached version of customizer settings config
-            -
                    $( document ).on( 'change', '[name="_customize-radio-sm_color_palette_variation_control"]', reloadConnectedFields );
-            -
                    $( document ).on( 'click', '.customify_preset.color_palette input', onPaletteChange );
-            -
                };
-            -
-            -
                wp.customize.bind( 'ready', handleColorPalettes );
-            -
-            -
            } )( jQuery, window, wp );

js/customizer/customify-scale.js DELETED Viewed

@@ -1,55 +0,0 @@
-            -
            ( function( $, exports, wp ) {
-            -
                const api = wp.customize;
-            -
                const $window = $( window );
-            -
                const $previewIframe = $( '.wp-full-overlay' );
-            -
-            -
                const scaleIframe = function() {
-            -
-            -
                    // remove CSS properties that may have been previously added
-            -
                    $previewIframe.find( 'iframe' ).css( {
-            -
                        width: '',
-            -
                        height: '',
-            -
                        transformOrigin: '',
-            -
                        transform: ''
-            -
                    } );
-            -
-            -
                    // scaling of the site preview should be done only in desktop preview mode
-            -
                    if ( api.previewedDevice.get() !== 'desktop' ) {
-            -
                        return;
-            -
                    }
-            -
-            -
                    const iframeWidth = $previewIframe.width();
-            -
                    const windowWidth = $window.width();
-            -
                    const windowHeight = $window.height();
-            -
-            -
                    // get the ratio between the site preview and actual browser width
-            -
                    const scale = windowWidth / iframeWidth;
-            -
-            -
                    // for an accurate preview at resolutions where media queries may intervene
-            -
                    // increase the width of the iframe and use CSS transforms to scale it back down
-            -
                    if ( iframeWidth > 720 && iframeWidth < 1100 ) {
-            -
                        $previewIframe.find( 'iframe' ).css( {
-            -
                            width: iframeWidth * scale,
-            -
                            height: windowHeight * scale,
-            -
                            transformOrigin: 'left top',
-            -
                            transform: 'scale(' + 1 / scale + ')'
-            -
                        } );
-            -
                    }
-            -
                };
-            -
-            -
                wp.customize.bind( 'ready', function() {
-            -
-            -
                    wp.customize.previewer.bind( 'synced', function() {
-            -
                        scaleIframe();
-            -
-            -
                        api.previewedDevice.bind( scaleIframe );
-            -
                        $window.on( 'resize', scaleIframe );
-            -
                    } );
-            -
-            -
                    $( '.collapse-sidebar' ).on( 'click', function() {
-            -
                        setTimeout( scaleIframe, 300 );
-            -
                    } );
-            -
-            -
                } );
-            -
-            -
            } )( jQuery, window, wp );

js/customizer/customify-swap-values.js DELETED Viewed

@@ -1,45 +0,0 @@
-            -
            ( function( $, exports, wp ) {
-            -
-            -
                function swap_values( setting_one, setting_two ) {
-            -
                    var color_primary = wp.customize( setting_one )();
-            -
                    var color_secondary = wp.customize( setting_two )();
-            -
-            -
            	    wp.customize( setting_one ).set( color_secondary );
-            -
            	    wp.customize( setting_two ).set( color_primary );
-            -
                }
-            -
-            -
                wp.customize.bind( 'ready', function() {
-            -
                    const $document = $( document );
-            -
-            -
                    $document.on( 'click', '[data-action="sm_swap_colors"]', function( e ) {
-            -
                        e.preventDefault();
-            -
                        swap_values( 'sm_color_primary', 'sm_color_secondary' );
-            -
                    } );
-            -
-            -
                    $document.on( 'click', '[data-action="sm_swap_dark_light"]', function( e ) {
-            -
                        e.preventDefault();
-            -
                        swap_values( 'sm_dark_primary', 'sm_light_primary' );
-            -
                        swap_values( 'sm_dark_secondary', 'sm_light_secondary' );
-            -
                        swap_values( 'sm_dark_tertiary', 'sm_light_tertiary' );
-            -
                    } );
-            -
-            -
                    $document.on( 'click', '[data-action="sm_swap_colors_dark"]', function( e ) {
-            -
                        e.preventDefault();
-            -
                        swap_values( 'sm_color_primary', 'sm_dark_primary' );
-            -
                        swap_values( 'sm_color_secondary', 'sm_dark_secondary' );
-            -
                        swap_values( 'sm_color_tertiary', 'sm_dark_tertiary' );
-            -
                    } );
-            -
-            -
                    $document.on( 'click', '[data-action="sm_swap_secondary_colors_dark"]', function( e ) {
-            -
                        e.preventDefault();
-            -
                        swap_values( 'sm_color_secondary', 'sm_dark_secondary' );
-            -
                    } );
-            -
-            -
                    $document.on( 'click', '[data-action="sm_toggle_advanced_settings"]', function( e ) {
-            -
                        e.preventDefault();
-            -
                        $( '#sub-accordion-section-style_manager_section' ).toggleClass( 'advanced' );
-            -
                    } );
-            -
-            -
                } );
-            -
-            -
            } )( jQuery, window, wp );

palettes.md CHANGED Viewed

@@ -1,6 +1,85 @@
             # Color Palettes Integration Guide
-            -
            ## 1. Add color controls for all elements on the page
             ```php
             function make_this_function_name_unique( $config ) {
@@ -43,9 +122,16 @@ function make_this_function_name_unique( $config ) {
+            }
             add_filter('customify_filter_fields', 'make_this_function_name_unique' );
             ```
-            -
            ## 2. Add Style Manager section with master controls
-            -
            ### 2.1. Add Style Manager support to the theme
             In your function.php file add the following line of code to add support for the Style Manager section.
             This is usually done
             ```php
@@ -59,7 +145,7 @@ endif;
             add_action( 'after_setup_theme', 'themename_setup' );
             ```
-            -
            ### 2.2. Add a function to filter the Style Manager config
             ```php
             /**
              * Add the Style Manager cross-theme Customizer section.
@@ -83,13 +169,13 @@ function pixelgrade_add_customify_style_manager_section( $options ) {
             add_filter( 'customify_filter_fields', 'pixelgrade_add_customify_style_manager_section', 12, 1 );
             ```
-            -
            ### 2.3. Extend Style Manager fields with proper defaults and connected fields
             ```php
             // The section might be already defined, thus we merge, not replace the entire section config.
             $options['sections']['style_manager_section'] = array_replace_recursive( $options['sections']['style_manager_section'], array(
                 'options' => array(
                     'sm_color_primary' => array(
-            -
                        'default' => '#FF0000',
                         'connected_fields' => array(
                             'accent_color',
                         ),
@@ -100,9 +186,9 @@ $options['sections']['style_manager_section'] = array_replace_recursive( $option
             ```
-            -
            ### 2.4. Create a default Color Palette for the current Theme
-            -
            #### 2.4.1 Upload an image to Pixelgrade Cloud in order to use it as a mood background image for this Palette
-            -
            #### 2.4.2 Write the proper configuration and use the `customify_get_color_palettes` hook to add it to the main list
             Color values listed in the options attribute should match the ones that we've just set for the options in the Style Manager section (or rather the other way around)
             ```php
             function themename_add_default_color_palette( $color_palettes ) {
@@ -135,3 +221,57 @@ darkest shades should go in dark_primary
             body text color should go in dark_secondary
             Pairs of options that control the foreground / background for the same element should not stay in the same group (color, dark or light). One should stay in one of the light groups, and the other one can stay either in the color or the dark groups.


1	# Color Palettes Integration Guide
2
3	+ Intro cu pasii mari pe care trebuie sa-i faca.
4	+
5	+ ## 1. Define your Color Palette
6	+
7	+ ### 1.1 Find all the Colors from Your Site
8	+ The first step is to scan your site and list all the colors that you can find.
9	+
10	+ Next you need to organize and reduce the number of all those colors to three groups:
11	+ - Color: accents elements that give personality to the composition (e.g., headlines)
12	+ - Dark: used for most of the foreground elements (e.g., body copy)
13	+ - Light: usually used for the element's background, as a contrasted version of the two above
14	+
15	+ From over 7-years experience of building sites, we find out that those three categories could fill up most of the decisions that a designer take in setting up their site’s elements.
16	+
17	+ ### 1.2 Define the Master Colors
18	+ Our current color palettes system supports at most 9 colors (3 accent colors, 3 dark shades and 3 light shades). To make things easier define those colors as constants in your `functions.php` file like so:
19	+
20	+ ```php
21	+ // Color
22	+ define( 'SM_COLOR_PRIMARY', '#FF0000' ); // Use it for Accent Elements
23	+ define( 'SM_COLOR_SECONDARY', '#00FF00' );
24	+ define( 'SM_COLOR_TERTIARY', '#0000FF' );
25	+
26	+ // Dark
27	+ define( 'SM_DARK_PRIMARY', '#111111' );
28	+ define( 'SM_DARK_SECONDARY', '#222222' ); // Use it for Body Text
29	+ define( 'SM_DARK_TERTIARY', '#333333' );
30	+
31	+ // Light
32	+ define( 'SM_LIGHT_PRIMARY', '#EEEEEE' );
33	+ define( 'SM_LIGHT_SECONDARY', '#DDDDDD' );
34	+ define( 'SM_LIGHT_TERTIARY', '#CCCCCC' );
35	+ ```
36	+
37	+ You may want to keep all nine definitions even if you don't need them. If you’re not using one constant in the config you can either copy-paste the value of another one in the same group or event alter it's value a little.
38	+
39	+ Having all these constants defined will come in handy when using palettes variations and also in defining the default palette for the theme.
40	+
41	+ Limit yourself to using as few colors as possible
42	+
43	+ Try to use as few colors as possible in your configuration.
44	+
45	+ ## 2. Create a Baseline for Color Customizations
46	+ To create a baseline for color customizations, we need to set up the system for being capable of changing any color from our website. We will do that by mapping each site element (e.g., page title) to a color option.
47	+
48	+
49	+
50	+ ### 2.1 Scan all Your Site Elements for Color Rules
51	+
52	+ The first step is to scan throughout all the stylesheet files (CSS) and list all the elements that have a color-based rule declaration(e.g., color, background, border).
53	+
54	+ Then we will group all those CSS rules and place them under a limited number of color fields. To keep things consistent we suggest to start with the following structure and adjust to the theme needs:
55	+
56	+ \| Section \| Fields \| Description \|
57	+ \|:--\|:--\|:--\|
58	+ \| Header \| Header Text Color \|
59	+ \| \| Navigation Links Color \|
60	+ \| \| Links Active Color \|
61	+ \| \| Header Background \|
62	+ \| Main Content \| Page Title Color \|
63	+ \| \| Body Text Color \|
64	+ \| \| Body Link Color \|
65	+ \| \| Body Link Active Color \|
66	+ \| ↳ Headings Color \| Heading 1 \|
67	+ \| \| Heading 2 \|
68	+ \| \| Heading 3 \|
69	+ \| \| Heading 4 \|
70	+ \| \| Heading 5 \|
71	+ \| \| Heading 6 \|
72	+ \| ↳ Backgrounds \| Content Background Color \|
73	+ \| Buttons \| Text Color \|
74	+ \| \| Background Color \|
75	+ \| Footer \| Footer Text Color \|
76	+ \| \| Footer Links Color \|
77	+ \| \| Footer Headings Color \|
78	+ \| \| Footer Background \|
79	+ \| Miscellaneous \| Other Fields \|
80	+
81	+ ### 2.2 The Structure Of a Color Field
82	+ Details:
83	```php
84	function make_this_function_name_unique( $config ) {
85

122	}
123	add_filter('customify_filter_fields', 'make_this_function_name_unique' );
124	```
125	+ ### 2.3 Add Color Controls to all Your Site Elements
126	+ Add the code snippet below to `functions.php` in order to..
127	+ [un snippet si cu sectiunile de mai sus in care doar sa completeze reguli de CSS?]
128	+ ```php
129	+
130	+ ```
131
132	+
133	+ ## 3. Add Style Manager section with master controls
134	+ ### 3.1. Add Style Manager support to the theme
135	In your function.php file add the following line of code to add support for the Style Manager section.
136	This is usually done
137	```php

145	add_action( 'after_setup_theme', 'themename_setup' );
146	```
147
148	+ ### 3.2. Add a function to filter the Style Manager config
149	```php
150	/**
151	* Add the Style Manager cross-theme Customizer section.

169	add_filter( 'customify_filter_fields', 'pixelgrade_add_customify_style_manager_section', 12, 1 );
170	```
171
172	+ ### 3.3. Extend Style Manager fields with proper defaults and connected fields
173	```php
174	// The section might be already defined, thus we merge, not replace the entire section config.
175	$options['sections']['style_manager_section'] = array_replace_recursive( $options['sections']['style_manager_section'], array(
176	'options' => array(
177	'sm_color_primary' => array(
178	+ 'default' => SM_COLOR_PRIMARY,
179	'connected_fields' => array(
180	'accent_color',
181	),

186
187	```
188
189	+ ### 3.4. Create a default Color Palette for the current Theme
190	+ #### 3.4.1 Upload an image to Pixelgrade Cloud in order to use it as a mood background image for this Palette
191	+ #### 3.4.2 Write the proper configuration and use the `customify_get_color_palettes` hook to add it to the main list
192	Color values listed in the options attribute should match the ones that we've just set for the options in the Style Manager section (or rather the other way around)
193	```php
194	function themename_add_default_color_palette( $color_palettes ) {

221	body text color should go in dark_secondary
222
223	Pairs of options that control the foreground / background for the same element should not stay in the same group (color, dark or light). One should stay in one of the light groups, and the other one can stay either in the color or the dark groups.
224	+
225	+ ---
226	+ ## Tips and Tricks / FAQs
227	+ ### What if I have more colors?
228	+ It happens a lot for developers to write unneeded code, or overly specific CSS selectors. This is a good time to give your code a health check.
229	+
230	+ Things that have a big chance of needed to be improved in your code.
231	+
232	+ 1. Use `opacity` instead of using a new color value when possible.
233	+ ```css
234	+ .container {
235	+ color: #222;
236	+ }
237	+
238	+ .container-child {
239	+ /* color: #444 */
240	+ opacity: 0.9;
241	+ }
242	+ ```
243	+
244	+ 2. Use the `currentColor` value for properties like `border`, `outline`, `box-shadow`, `placeholder` and other properties or pseudo-elements.
245	+ ```css
246	+ .element {
247	+ color: #222;
248	+ /* box-shadow: #222 0 1em 1em; */
249	+ box-shadow: currentColor 0 1em 1em;
250	+ }
251	+
252	+ .element::after {
253	+ content: "";
254	+ /* border: 2px solid #222; */
255	+ border: 2px solid;
256	+ }
257	+ ```
258	+ Use `color: inherit` when possible
259	+ ```
260	+ a {
261	+ color: #f00;
262	+ }
263	+
264	+ .container {
265	+ color: #222;
266	+ }
267	+
268	+ .container a {
269	+ /* color: #222; */
270	+ color: inherit;
271	+ text-decoration: underline;
272	+ }
273	+
274	+ ```
275	+
276	+ Make use of Customify's callback filters
277	+ If your theme uses more than 3 dark or white shades, you can always make use of the callback filters feature that Customify uses.

readme.txt CHANGED Viewed

	@@ -3,7 +3,7 @@ Contributors: pixelgrade, euthelup, babbardel, vlad.olaru, cristianfrumusanu, ra
3	Tags: customizer, css, editor, live, preview, customizer
4	Requires at least: 4.7.0
5	Tested up to: 4.9.7
6	- Stable tag: 1.7.4
7	License: GPLv2 or later
8	License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
	@@ -45,6 +45,12 @@ With [Customify](https://github.com/pixelgrade/customify), developers can easily
45
46	== Changelog ==
47






48	= 1.7.4 =
49	* Reorganized Customizer custom sections and grouped them into Theme Options, thus making the Style Manager panel stand out.
50	* Refactored parts for more performance and clarity.


3	Tags: customizer, css, editor, live, preview, customizer
4	Requires at least: 4.7.0
5	Tested up to: 4.9.7
6	+ Stable tag: 1.8.0
7	License: GPLv2 or later
8	License URI: http://www.gnu.org/licenses/gpl-2.0.html
9

45
46	== Changelog ==
47
48	+ = 1.8.0 =
49	+ * Added altered state for colors in the current color palette when any of the controls connected to the color has been modified
50	+ * Added the colors from the current palette to all the color pickers in the Theme Options section
51	+ * Fixed bug where default values were being forced in Customizer Preview at first load
52	+ * Fixed bug preventing CSS output for color controls in the Style Manager section of the Customizer
53	+
54	= 1.7.4 =
55	* Reorganized Customizer custom sections and grouped them into Theme Options, thus making the Style Manager panel stand out.
56	* Refactored parts for more performance and clarity.

scss/customizer.scss CHANGED Viewed

@@ -2127,17 +2127,10 @@ $palette_border-radius: 5px;
             	width: 100%;
+            }
-            -
            .color {
-            -
            	display: flex;
-            -
            	flex-direction: column;
-            -
-            -
            	flex-grow: 1;
-            -
            	overflow: hidden;
-            -
            }
-            -
             .fill {
             	position: relative;
             	height: $palette_height;
+            }
             .c-color-palette__overlay {
@@ -2171,10 +2164,11 @@ $palette_border-radius: 5px;
             	width: 80%;
             	max-width: 3em;
-            -
            	margin-top: 1em;
             	border-radius: 50%;
-            -
            	transform: translateX(-50%);
+            }
             .colors.next .picker > i {
@@ -2368,6 +2362,17 @@ $animation-duration: 1s;
             	.color-palette-container {
             		padding: 19px;
             		background: white;
+            	}
+            }
@@ -2465,6 +2470,29 @@ $animation-duration: 1s;
+            }
             .color {
             	.picker {
             		border: 2px solid transparent;
@@ -2665,7 +2693,7 @@ input.c-color-palette__input[class] {
+                }
             	// Style Manager Section
-            -
            	// ----------------------------------------
             	li#accordion-panel-style_manager_panel {
             		@include section_icon("\f155");
@@ -2714,7 +2742,7 @@ input.c-color-palette__input[class] {
+            	}
             		// Theme Options Spacing between Sections
-            -
            		li[id$="[general]"],
             		li[id$="[footer_section]"] {
             			border-bottom: 1px solid #ddd;
             			border-left: none;
@@ -2727,4 +2755,74 @@ input.c-color-palette__input[class] {
             				border-top: none;
+            			}
+            		}
-            -
            }


2127	width: 100%;
2128	}
2129








2130	.fill {
2131	position: relative;
2132	height: $palette_height;
2133	+ margin-bottom: 1em;
2134	}
2135
2136	.c-color-palette__overlay {

2164
2165	width: 80%;
2166	max-width: 3em;
2167	+ margin-top: auto;
2168	+ margin-bottom: auto;
2169
2170	border-radius: 50%;
2171	+ transform: translate3d(-50%,0,0);
2172	}
2173
2174	.colors.next .picker > i {

2362	.color-palette-container {
2363	padding: 19px;
2364	background: white;
2365	+
2366	+ .description {
2367	+ margin-bottom: 15px;
2368	+ }
2369	+ }
2370	+
2371	+ .description.c-color-palette__notification {
2372	+ padding-top: 19px;
2373	+ margin-bottom: 0;
2374	+ font-size: inherit;
2375	+ font-weight: bold;
2376	}
2377	}
2378

2470	}
2471
2472	.color {
2473	+ display: flex;
2474	+ flex-direction: column;
2475	+
2476	+ flex: 1 1 0;
2477	+ overflow: hidden;
2478	+
2479	+ .c-color-palette.animate & {
2480	+ transition: flex-grow .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
2481	+
2482	+ &.hidden {
2483	+ transition: flex-grow .3s cubic-bezier(0.6, -1.00, 0.74, 0.05); // easeBackInMega
2484	+ }
2485	+ }
2486	+
2487	+ &.hidden {
2488	+ display: flex;
2489	+ flex-grow: 0;
2490	+
2491	+ .picker {
2492	+ opacity: 0;
2493	+ transition: opacity .2s ease-out;
2494	+ }
2495	+ }
2496
2497	.picker {
2498	border: 2px solid transparent;

2693	}
2694
2695	// Style Manager Section
2696	+ // ----------------------------------------
2697	li#accordion-panel-style_manager_panel {
2698	@include section_icon("\f155");
2699

2742	}
2743
2744	// Theme Options Spacing between Sections
2745	+ li[id$="[general]"],
2746	li[id$="[footer_section]"] {
2747	border-bottom: 1px solid #ddd;
2748	border-left: none;

2755	border-top: none;
2756	}
2757	}
2758	+ }
2759	+
2760	+ .color .disc {
2761	+ display: block;
2762	+ overflow: hidden;
2763	+ position: absolute;
2764	+ top: 0;
2765	+ right: 0;
2766	+ bottom: 0;
2767	+ left: 0;
2768	+ z-index: 15;
2769	+ border-radius: 50%;
2770	+ pointer-events: none;
2771	+ opacity: 0;
2772	+ transition: opacity .3s ease-in-out;
2773	+
2774	+ &:after {
2775	+ content: "";
2776	+ filter: blur(6px) saturate(.7) brightness(1.1);
2777	+
2778	+ display: block;
2779	+ width: 200%;
2780	+ height: 200%;
2781	+ padding-top: 100%;
2782	+
2783	+ position: absolute;
2784	+ top: -50%;
2785	+ left: -50%;
2786	+ transform: scale(1);
2787	+ background-image:
2788	+ linear-gradient(330deg, transparent 50%, #ff8100 0),
2789	+ linear-gradient(300deg, transparent 50%, #ff5800 0),
2790	+ linear-gradient(270deg, transparent 50%, #c92323 0),
2791	+ linear-gradient(240deg, transparent 50%, #cc42a2 0),
2792	+ linear-gradient(210deg, transparent 50%, #9f49ac 0),
2793	+ linear-gradient(180deg, transparent 50%, #306cd3 0),
2794	+ linear-gradient(150deg, transparent 50%, #179067 0),
2795	+ linear-gradient(120deg, transparent 50%, #0eb5d6 0),
2796	+ linear-gradient(90deg, transparent 50%, #50b517 0),
2797	+ linear-gradient(60deg, transparent 50%, #ede604 0),
2798	+ linear-gradient(30deg, transparent 50%, #fc0 0),
2799	+ linear-gradient(0deg, transparent 50%, #feac00 0);
2800	+ background-clip: content-box,content-box,content-box,content-box,content-box,content-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box;
2801	+ }
2802	+ }
2803	+
2804	+ .color.altered .disc {
2805	+ opacity: 1;
2806	+ }
2807	+
2808	+ .customize-control-color .wp-picker-container .iris-picker {
2809	+
2810	+ .iris-palette-container {
2811	+ display: flex;
2812	+ width: 215px;
2813	+ }
2814	+
2815	+ .iris-palette {
2816	+ width: auto !important;
2817	+ height: auto !important;
2818	+ flex: 1 1 0;
2819	+ float: none;
2820	+
2821	+ &:after {
2822	+ content: "";
2823	+ display: block;
2824	+ padding-top: 100%;
2825	+ }
2826	+ }
2827	+ }
2828	+

Customify – A Theme Customizer Booster - Version 1.8.0

Version Description

Release Info

Code changes from version 1.7.4 to 1.8.0