<?php

// -----------------------------------------
// semplice
// admin/atts/styles.php
// -----------------------------------------

// vp button options
$vp_button_options = get_vp_button_options(false);

// blend modes
$blend_modes = array(
	'normal' 		=> 'Normal',
	'multiply'		=> 'Multiply',
	'screen'		=> 'Screen',
	'overlay' 		=> 'Overlay',
	'darken' 		=> 'Darken',
	'lighten' 		=> 'Lighten',
	'color-dodge' 	=> 'Color Dodge',
	'color-burn' 	=> 'Color Burn',
	'hard-light' 	=> 'Hard Light',
	'soft-light'	=> 'Soft Light',
	'difference' 	=> 'Difference',
	'exclusion'		=> 'Exclusion',
	'hue' 			=> 'Hue',
	'saturation' 	=> 'Saturation',
	'color'			=> 'Color',
	'luminosity' 	=> 'Luminosity',
);

$styles = array(

	// section styling
	'section' => array(
		'mobile-styles' => '',
		'mobile-options' => '',
		'options_notice' => array(
			'title'  	 => 'Notice',
			'break'		 => '1',
			'class'		 => 'section-options-notice',
			'show_options' => array(
				'data-input-type' => 'notice',
				'hide-title' => true,
				'size'		 => 'span4',
				'class'     	=> 'ep-notice',
				'default'    => 'To ensure the section module works as intended, the layout options for this section are locked.',
				'notice-type'=> 'warning',
			),
		),
		// padding
		'padding' => array(
			'title' => 'Spacing',
			'style-class' => 'bp-4',
			'padding-top' => array(
				'title'			=> 'Top',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.content-block',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-range-slider' => 'style',
			),
			'padding-right' => array(
				'title'			=> 'Right',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.content-block',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-range-slider' => 'style',
			),
			'padding-bottom' => array(
				'title'			=> 'Bottom',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.content-block',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-range-slider' => 'style',
			),
			'padding-left' => array(
				'title'			=> 'Left',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.content-block',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-range-slider' => 'style',
			),
		),
		// background
		'background-color' => array(
			'title' => 'Background Options',
			'break'	=> '1',
			'data-hide-mobile' => true,
			'style-class' => 'no-spacer bg-options',
			'background-color' => array(
				'title'			=> 'Color',
				'hide-title'	=> true,
				'size'			=> 'span4',
				'data-input-type'	=> 'color',
				'data-target'	=> '.content-block',
				'default'		=> 'transparent',
				'class'			=> 'color-picker admin-listen-handler',
				'data-picker'	=> 'style',
				'data-handler'  => 'colorPicker',
			),
		),
		'background-type' => array(
			'title' => 'Background Type',
			'break' => '1',
			'hide-title' => true,
			'style-class' => 'no-spacer bg-type-switch',
			'data-hide-mobile' => true,
			'background_type' => array(
				'data-input-type' 			=> 'switch',
				'switch-type'				=> 'twoway',
				'title'		 				=> 'Background Type',
				'hide-title'				=> true,
				'size'		 				=> 'span4',
				'data-visibility-switch' 	=> true,
				'data-visibility-values' 	=> 'img,vid',
				'data-visibility-prefix'	=> 'ov-bg-type',
				'default' 	 				=> 'img',
				'class'						=> 'editor-listen',
				'data-handler'  			=> 'backgroundVideo',
				'switch-values' => array(
					'img'  	=> 'Image',
					'vid'	=> 'Video',
				),
			),
		),
		'background-image' => array(
			'title'		   => 'Background Image',
			'hide-title'   => true,
			'break'		   => '2',
			'style-class'		=> 'ov-bg-type-img bg-img-upload',
			'data-hide-mobile' => true,
			'has-media'    => 'styles,background-image',
			'background-image' => array(
				'title'			=> 'Image',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'data-input-type'	=> 'editor-image-upload',
				'data-target'	=> '.content-block',
				'default'		=> '',
				'style-class'		=> 'ce-dropzone',
				'data-upload'	=> 'stylesBackground',
			),
			'background-size' => array(
				'title'			=> 'Options',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'stack'			=> 'vertical-start',
				'data-input-type'    => 'select-box',
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'data-target'	=> '.content-block',
				'default'		=> 'auto',
				'select-box-values' => array(
					'auto'		=> 'No Scale',
					'cover' 	=> 'Cover (full width)',
					'contain'	=> 'Contain'
				),
			),
			'background-position' => array(
				'title'			=> 'Position',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'stack'			=> 'vertical',
				'data-input-type'    => 'select-box',
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'data-target'	=> '.content-block',
				'default'		=> '0% 0%',
				'select-box-values' => array(
					'0% 0%' 	=> 'Top Left',
					'50% 0%' 	=> 'Top Center',
					'100% 0%' 	=> 'Top Right',
					'0% 50%' 	=> 'Middle Left',
					'50% 50%' 	=> 'Middle Center',
					'100% 50%' 	=> 'Middle Right',
					'0% 100%' 	=> 'Bottom Left',
					'50% 100%' 	=> 'Bottom Center',
					'100% 100%' => 'Bottom Right'
				),
			),
			'background-repeat' => array(
				'title'			=> 'Repeat',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'stack'			=> 'vertical-end',
				'data-input-type'    => 'select-box',
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'data-target'	=> '.content-block',
				'default'		=> 'repeat',
				'select-box-values' => array(
					'repeat' 	=> 'Repeat both',
					'repeat-x' 	=> 'Repeat horizontal',
					'repeat-y' 	=> 'Repeat vertical',
					'no-repeat' => 'No Repeat',
				),
			),
		),
		'background-video' => array(
			'title'		   => 'Background Video',
			'hide-title'   => true,
			'break'		   => '1,1,1,2',
			'style-class'	=> 'ov-bg-type-vid',
			'bg_video' => array(
				'title'			=> 'Video Upload',
				'hide-title'	=> true,
				'size'			=> 'span4',
				'data-input-type' => 'video-upload',
				'default'		=> '',
				'class'			=> 'editor-listen',
				'data-handler'  => 'backgroundVideo',
				'data-upload'	=> 'bgVideo',
				'help'			=> 'Please note that in order to make autoplay work, your video will be muted.',
			),
			'bg_video_url' => array(
				'data-input-type'	=> 'input-text',
				'title'		 	=> 'or use external video',
				'help'			=> 'If your video is too big to upload into the WordPress media library or you want to include a video from an external source (like a CDN), you can paste the link here. Please use .mp4 format.',
				'size'		 	=> 'span4',
				'placeholder'	=> 'http://my.cdn.com/video.mp4',
				'default'		=> '',
				'class'			=> 'editor-listen',
				'data-handler'  => 'backgroundVideo',
			),
			'bg_force_autoplay' => array(
				'data-input-type' 			=> 'switch',
				'switch-type'				=> 'twoway',
				'title'		 				=> 'Force Autoplay on Mobile',
				'help'						=> 'Enabling this option will force autoplay on mobile devices instead of displaying a fallback image. Please note that not all browsers support autoplay and there will be no fallback image for older browsers.',
				'size'		 				=> 'span4',
				'class'						=> 'editor-listen',
				'default' 	 				=> 'disabled',
				'data-handler'  			=> 'backgroundVideo',
				'switch-values' => array(
					'disabled'	=> 'Disabled',
					'enabled'  	=> 'Enabled',
				),
			),
			'bg_video_fallback' => array(
				'title'			=> 'Fallback Image',
				'help'			=> 'This fallback image will be displayed on mobile devices instead of your video and it will be a placeholder in the editor.',
				'size'			=> 'span2',
				'data-input-type'	=> 'admin-image-upload',
				'data-target'	=> '.background-video',
				'default'		=> '',
				'class'			=> 'editor-listen',
				'data-handler'  => 'backgroundVideo',
				'data-upload'	=> 'bgVideoFallback',
				'style-class'   => 'ce-upload-small hide-unsplash'
			),
			'bg_video_opacity' => array(
				'title'			=> 'Video Opacity',
				'size'			=> 'span2',
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.background-video',
				'default'		=> 100,
				'min'			=> 0,
				'max'			=> 100,
				'class'			=> 'editor-listen',
				'data-handler'  => 'backgroundVideo',
				'data-divider'  => 100,
				'data-range-slider' => 'bgVideoOpacity',
			),
		),
		'options' => array(
			'title'  => 'Layout',
			'break'  => '2,3,2',
			'data-hide-mobile' => true,
			'class'  => 'section-options',
			'layout' => array(
				'title'		 => 'Layout',
				'size'		 => 'span2',
				'data-input-type' => 'switch',
				'switch-type'=> 'twoway',
				'class' 	 => 'editor-listen',
				'data-handler' => 'layout',
				'default' 	 => 'grid',
				'data-core-option' => true,
				'switch-values' => array(
					'grid'	=> 'Grid',
					'fluid' => 'Fluid',
				),
			),
			'gutter' => array(
				'title'		 => 'Gutter',
				'data-input-type' => 'switch',
				'switch-type'=> 'twoway',
				'size'		 => 'span2',
				'class' 	 => 'editor-listen',
				'data-handler' => 'layout',
				'default' 	 => 'yes',
				'data-core-option' => true,
				'switch-values' => array(
					'yes'  => 'Keep',
					'no'   => 'Remove',
				),
			),
			'height' => array(
				'title'				=> 'height',
				'size'		 		=> 'span2',
				'data-input-type' 		=> 'select-box',
				'class' 	 => 'editor-listen',
				'data-handler' => 'layout',
				'default'		 	=> 'dynamic',
				'help'				=> '<b>Fullscreen</b> means that your section has a minimum height of 100% from your browser viewport. In order to keep the 100% height try not to add content that will exceed the height.',
				'data-visibility-switch' 	=> true,
				'data-visibility-values' 	=> 'dynamic,fullscreen,custom',
				'data-visibility-prefix'	=> 'ov-section-height',
				'data-core-option' => true,
				'select-box-values' => array(
					'dynamic'    => 'Dynamic',
					'fullscreen' => 'Fullscreen',
					'custom'	 => 'Custom'
				),
			),
			'valign' => array(
				'title'		 => 'V-Align',
				'size'		 => 'span1',
				'data-input-type' => 'switch',
				'switch-type'=> 'icon-select',
				'class' 	 		=> 'editor-listen',
				'data-handler' 		=> 'layout',
				'default'	 => 'stretch',
				'help'		 => 'To align content vertically please set the height of your section to \'Fullscreen\' or define a custom height which exceeds the height of your content.',
				'data-core-option' => true,
				'tooltips'	 => array(
					'stretch' => 'Stretch',
					'top'     => 'Align top',
					'bottom'  => 'Align bottom',
					'center'  => 'Align middle',
				),
				'switch-values' => array(
					'stretch' => 'Stretch',
					'top'     => 'Top',
					'bottom'  => 'Bottom',
					'center'  => 'Center',
				),
			),
			'justify' => array(
				'title'		 => 'H-Align',
				'help'		 => 'First three options only take effect if you have free space in your section. (that means your column sizes are combined < 12) For the last two options you need at least 2 columns and the size of your columns is < 12',
				'size'		 => 'span1',
				'data-input-type' => 'switch',
				'switch-type'=> 'icon-select',
				'class' 	 		=> 'editor-listen',
				'data-handler' 		=> 'layout',
				'default'	 => 'left',
				'data-core-option' => true,
				'tooltips'	 => array(
					'left'     		 => 'Align left',
					'right'  		 => 'Align right',
					'center' 		 => 'Align center',
					'space-between'  => 'Space Between',
					'space-around' 	 => 'Space Around'
				),
				'switch-values' => array(
					'left'     		 => 'Left',
					'right'  		 => 'Right',
					'center' 		 => 'center',
					'space-between'  => 'Space Between',
					'space-around' 	 => 'Space Around'
				),
			),
			// height
			'custom-height' => array(
				'title'				=> 'Custom Height',
				'size'		 		=> 'span2',
				'data-input-type' 		=> 'range-slider',
				'data-target'		=> '.container',
				'min'				=> 0,
				'max'				=> 9999,
				'default'			=> 0,
				'class' 	 		=> 'editor-listen',
				'data-handler' 		=> 'default',
				'responsive'		=> true,
				'data-has-unit'		=> true,
				'style-class'		=> 'ov-section-height-custom',
				'data-range-slider' => 'customHeight',
				'data-core-option' => true,
			),
			// height
			'height-unit' => array(
				'title'				=> 'Height Unit',
				'size'		 		=> 'span2',
				'data-input-type' 		=> 'select-box',
				'class' 	 		=> 'editor-listen',
				'data-handler' 		=> 'save',
				'default'		 	=> 'px',
				'style-class'		=> 'ov-section-height-custom',
				'help'				=> 'After changing the unit please click into input field where you defined your \'Custom\' height to apply the unit change.',
				'data-core-option' => true,
				'select-box-values' => array(
					'px' => 'px',
					'vh' => 'vh',
				),
			),
		),
		'margin' => array(
			'title' => 'Offset',
			'style-class' => 'ep-collapsed',
			'margin-top' => array(
				'title'			=> 'Top',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.content-block',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-negative' => true,
				'data-range-slider' => 'style',
			),
			'margin-right' => array(
				'title'			=> 'Right',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.content-block',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-negative' => true,
				'data-range-slider' => 'style',
			),
			'margin-bottom' => array(
				'title'			=> 'Bottom',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.content-block',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-negative' => true,
				'data-range-slider' => 'style',
			),
			'margin-left' => array(
				'title'			=> 'Left',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.content-block',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-negative' => true,
				'data-range-slider' => 'style',
			),
		),
		// border
		'border' => array(
			'title' => 'Border',
			'break'	=> false,
			'style-class' => 'ep-collapsed',
			'border-color' => array(
				'title'			=> 'Color',
				'size'			=> 'span1',
				'data-input-type' 	=> 'color',
				'data-target'	=> '.content-block',
				'default'		=> '#000000',
				'class'			=> 'color-picker admin-listen-handler',
				'data-handler'  => 'colorPicker',
				'data-picker'	=> 'style',
				'responsive'	=> true,
			),
			'border-width' => array(
				'title'			=> 'Width',
				'size'			=> 'span1',
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.content-block',
				'default'		=> '0',
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'=> true,	
				'data-range-slider' => 'style',
			),
			'border-style' => array(
				'title'		 => 'Style',
				'size'		 => 'span1',
				'data-input-type' => 'switch',
				'switch-type'=> 'icon-select',
				'class' 	 		=> 'editor-listen',
				'data-handler' 		=> 'default',
				'default'		=> 'solid',
				'data-target'   => '.content-block',
				'tooltips'	 => array(
					'solid'		=> 'Solid',
					'dashed' 	=> 'Dashed',
					'dotted'	=> 'Dotted',
				),
				'switch-values' => array(
					'solid'		=> 'Solid',
					'dashed' 	=> 'Dashed',
					'dotted'	=> 'Dotted',
				),
				'responsive'	=> true,
			),
			'border-radius' => array(
				'title'			=> 'Radius',
				'size'			=> 'span1',
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.content-block',
				'default'		=> '0',
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'=> true,	
				'data-range-slider' => 'style',
			),
		),
		'miscellaneous' => array(
			'title'			=> 'Miscellaneous',
			'break'			=> '2,2',
			'style-class' => 'ep-collapsed',
			'data-hide-mobile' => true,
			'mix-blend-mode' => array(
				'title'		 => 'Blend mode',
				'data-input-type' => 'select-box',
				'size'		 => 'span2',
				'class' 	 => 'editor-listen',
				'default' 	 => 'normal',
				'data-handler'  => 'default',
				'data-target'	=> '.content-block',
				'select-box-values' => $blend_modes,
			),
			'desktop_visibility' => array(
				'title'		 => 'Desktop Visibility',
				'data-input-type' => 'switch',
				'switch-type'=> 'twoway',
				'size'		 => 'span2',
				'class' 	 => 'editor-listen',
				'default' 	 => 'visible',
				'data-core-option' => true,
				'data-handler' => 'save',
				'switch-values' => array(
					'visible'  => 'Visible',
					'hidden'   => 'Hidden',
				),
			),
			'css_classes' => array(
				'data-input-type'	=> 'input-text',
				'title'		 	=> 'Classes',
				'help'			=> 'Add your custom CSS classes, separated by a space. Example: class1 class2 class3',
				'size'		 	=> 'span2',
				'placeholder'	=> 'my-class my-cass-2',
				'default'		=> '',
				'class'			=> 'editor-listen',
				'data-handler'  => 'saveCssClass',
			),
			'z-index' => array(
				'title'			=> 'Stack order',
				'help'			=> 'This setting defines the stack order of your elements. An element with greater stack order is always in front of an element with a lower stack order. You only need to define this if you, for example, give an element a negative margin and it gets hidden behind another element.',
				'size'			=> 'span2',
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.content-block',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 250,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'data-range-slider' => 'style',
			),
		),
	),

	// column options
	'column' => array(
		'mobile-styles' => '',
		// padding
		'padding' => array(
			'title' => 'Spacing',
			'padding-top' => array(
				'title'			=> 'Top',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.column',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-range-slider' => 'style',
			),
			'padding-bottom' => array(
				'title'			=> 'Bottom',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.column',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-range-slider' => 'style',
			),
			'valign' => array(
				'title'		 => 'V-Align',
				//'help'		 => 'This option only takes effect if you set the section height to either \'Fullscreen\' or enter a \'custom height\' thats taller than your content and set the section vertical align to stretch. (first option)',
				'size'		 => 'span1',
				'data-input-type' => 'switch',
				'switch-type'=> 'icon-select',
				'class' 	 		=> 'editor-listen',
				'data-handler' 		=> 'layout',
				'default'	 => 'stretch',
				'data-core-option' => true,
				'tooltips'	 => array(
					'stretch' => 'Stretch',
					'top'     => 'Align top',
					'bottom'  => 'Align bottom',
					'center'  => 'Align middle',
				),
				'switch-values' => array(
					'stretch' => 'Stretch',
					'top'     => 'Top',
					'bottom'  => 'Bottom',
					'center'  => 'Center',
				),
			),
		),
		// background
		'background-color' => array(
			'title' => 'Background Options',
			'break'	=> '1',
			'data-hide-mobile' => true,
			'style-class' => 'no-spacer bg-options',
			'background-color' => array(
				'title'			=> 'Color',
				'hide-title'	=> true,
				'size'			=> 'span4',
				'data-input-type'	=> 'color',
				'data-target'	=> '.content-block',
				'default'		=> 'transparent',
				'class'			=> 'color-picker admin-listen-handler',
				'data-picker'	=> 'style',
				'data-handler'  => 'colorPicker',
			),
		),
		'background-type' => array(
			'title' => 'Background Type',
			'break' => '1',
			'hide-title' => true,
			'style-class' => 'no-spacer bg-type-switch',
			'data-hide-mobile' => true,
			'background_type' => array(
				'data-input-type' 			=> 'switch',
				'switch-type'				=> 'twoway',
				'title'		 				=> 'Background Type',
				'hide-title'				=> true,
				'size'		 				=> 'span4',
				'data-visibility-switch' 	=> true,
				'data-visibility-values' 	=> 'img,vid',
				'data-visibility-prefix'	=> 'ov-bg-type',
				'default' 	 				=> 'img',
				'class'						=> 'editor-listen',
				'data-handler'  			=> 'backgroundVideo',
				'switch-values' => array(
					'img'  	=> 'Image',
					'vid'	=> 'Video',
				),
			),
		),
		'background-image' => array(
			'title'		   => 'Background Image',
			'hide-title'   => true,
			'break'		   => '2',
			'style-class'		=> 'ov-bg-type-img bg-img-upload',
			'has-media'    => 'styles,background-image',
			'data-hide-mobile' => true,
			'background-image' => array(
				'title'			=> 'Image',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'data-input-type'	=> 'editor-image-upload',
				'data-target'	=> '.content-block',
				'default'		=> '',
				'style-class'		=> 'ce-dropzone',
				'data-upload'	=> 'stylesBackground',
			),
			'background-size' => array(
				'title'			=> 'Options',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'stack'			=> 'vertical-start',
				'data-input-type'    => 'select-box',
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'data-target'	=> '.content-block',
				'default'		=> 'auto',
				'select-box-values' => array(
					'auto'		=> 'No Scale',
					'cover' 	=> 'Cover (full width)',
					'contain'	=> 'Contain'
				),
			),
			'background-position' => array(
				'title'			=> 'Position',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'stack'			=> 'vertical',
				'data-input-type'    => 'select-box',
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'data-target'	=> '.content-block',
				'default'		=> '0% 0%',
				'select-box-values' => array(
					'0% 0%' 	=> 'Top Left',
					'50% 0%' 	=> 'Top Center',
					'100% 0%' 	=> 'Top Right',
					'0% 50%' 	=> 'Middle Left',
					'50% 50%' 	=> 'Middle Center',
					'100% 50%' 	=> 'Middle Right',
					'0% 100%' 	=> 'Bottom Left',
					'50% 100%' 	=> 'Bottom Center',
					'100% 100%' => 'Bottom Right'
				),
			),
			'background-repeat' => array(
				'title'			=> 'Repeat',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'stack'			=> 'vertical-end',
				'data-input-type'    => 'select-box',
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'data-target'	=> '.content-block',
				'default'		=> 'repeat',
				'select-box-values' => array(
					'repeat' 	=> 'Repeat both',
					'repeat-x' 	=> 'Repeat horizontal',
					'repeat-y' 	=> 'Repeat vertical',
					'no-repeat' => 'No Repeat',
				),
			),
		),
		'background-video' => array(
			'title'		   => 'Background Video',
			'hide-title'   => true,
			'break'		   => '1,1,1,2',
			'style-class'	=> 'ov-bg-type-vid',
			'bg_video' => array(
				'title'			=> 'Video Upload',
				'hide-title'	=> true,
				'size'			=> 'span4',
				'data-input-type' => 'video-upload',
				'default'		=> '',
				'class'			=> 'editor-listen',
				'data-handler'  => 'backgroundVideo',
				'data-upload'	=> 'bgVideo',
				'help'			=> 'Please note that in order to make autoplay work, your video will be muted.',
			),
			'bg_video_url' => array(
				'data-input-type'	=> 'input-text',
				'title'		 	=> 'or use external video',
				'help'			=> 'If your video is too large to upload or you want to include a video from an external source (like a CDN), you can paste the link here. Please use .mp4 format.',
				'size'		 	=> 'span4',
				'placeholder'	=> 'http://my.cdn.com/video.mp4',
				'default'		=> '',
				'class'			=> 'editor-listen',
				'data-handler'  => 'backgroundVideo',
			),
			'bg_force_autoplay' => array(
				'data-input-type' 			=> 'switch',
				'switch-type'				=> 'twoway',
				'title'		 				=> 'Force Autoplay on Mobile',
				'help'						=> 'Enabling this option will force autoplay on mobile devices instead of displaying a fallback image. Please note that not all browsers support autoplay and there will be no fallback image for older browsers.',
				'size'		 				=> 'span4',
				'class'						=> 'editor-listen',
				'default' 	 				=> 'disabled',
				'data-handler'  			=> 'backgroundVideo',
				'switch-values' => array(
					'disabled'	=> 'Disabled',
					'enabled'  	=> 'Enabled',
				),
			),
			'bg_video_fallback' => array(
				'title'			=> 'Fallback Image',
				'help'			=> 'This fallback image will be displayed on mobile devices instead of your video and will be a placeholder in the editor.',
				'size'			=> 'span2',
				'data-input-type'	=> 'admin-image-upload',
				'data-target'	=> '.background-video',
				'default'		=> '',
				'class'			=> 'editor-listen',
				'data-handler'  => 'backgroundVideo',
				'data-upload'	=> 'bgVideoFallback',
				'style-class'   => 'ce-upload-small hide-unsplash'
			),
			'bg_video_opacity' => array(
				'title'			=> 'Video Opacity',
				'size'			=> 'span2',
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.background-video',
				'default'		=> 100,
				'min'			=> 0,
				'max'			=> 100,
				'class'			=> 'editor-listen',
				'data-handler'  => 'backgroundVideo',
				'data-divider'  => 100,
				'data-range-slider' => 'bgVideoOpacity',
			),
		),
		// border
		'border' => array(
			'title' => 'Border',
			'break'	=> false,
			'style-class' => 'ep-collapsed',
			'border-color' => array(
				'title'			=> 'Color',
				'size'			=> 'span1',
				'data-input-type' 	=> 'color',
				'data-target'	=> '.column',
				'default'		=> '#000000',
				'class'			=> 'color-picker admin-listen-handler',
				'data-handler'  => 'colorPicker',
				'responsive'	=> true,
				'data-picker'	=> 'style',
			),
			'border-width' => array(
				'title'			=> 'Width',
				'size'			=> 'span1',
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.column',
				'default'		=> '0',
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'=> true,	
				'data-range-slider' => 'style',
			),
			'border-style' => array(
				'title'		 => 'Style',
				'size'		 => 'span1',
				'data-input-type' => 'switch',
				'switch-type'=> 'icon-select',
				'class' 	 		=> 'editor-listen',
				'data-handler' 		=> 'default',
				'default'		=> 'solid',
				'data-target'	=> '.column',
				'tooltips'	 => array(
					'solid'		=> 'Solid',
					'dashed' 	=> 'Dashed',
					'dotted'	=> 'Dotted',
				),
				'switch-values' => array(
					'solid'		=> 'Solid',
					'dashed' 	=> 'Dashed',
					'dotted'	=> 'Dotted',
				),
				'responsive'	=> true,
			),
			'border-radius' => array(
				'title'			=> 'Radius',
				'size'			=> 'span1',
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.column',
				'default'		=> '0',
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'=> true,	
				'data-range-slider' => 'style',
			),
		),
		'column_order' => array(
			'title'			=> 'Column Order',
			'break'			=> '1',
			'style-class'	=> 'only-mobile',
			'help'			=> 'Use this option to change the order of your columns for mobile breakpoints.<br /><br />Per default the order is 0 so if you for example just want the left column to be on the right (in 2 column layouts) give the left column the value 1.',
			'order' => array(
				'title'			=> 'Column Order',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.column',
				'default'		=> '0',
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-range-slider' => 'style',
			),
		),
		'miscellaneous' => array(
			'title'			=> 'Miscellaneous',
			'break'			=> '1',
			'data-hide-mobile' => true,
			'style-class' => 'ep-collapsed',
			'css_classes' => array(
				'data-input-type'	=> 'input-text',
				'title'		 	=> 'Classes',
				'help'			=> 'Add your custom CSS classes, separated by a space. Example: class1 class2 class3',
				'size'		 	=> 'span4',
				'placeholder'	=> 'my-class my-cass-2',
				'default'		=> '',
				'class'			=> 'editor-listen',
				'data-handler'  => 'saveCssClass',
			),
		),
	),

	// content styles
	'content' => array(
		// padding
		'padding' => array(
			'title' => 'Spacing',
			'padding-top' => array(
				'title'			=> 'Top',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.column-content',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-range-slider' => 'style',
			),
			'padding-right' => array(
				'title'			=> 'Right',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.column-content',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-range-slider' => 'style',	
			),
			'padding-bottom' => array(
				'title'			=> 'Bottom',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.column-content',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-range-slider' => 'style',	
			),
			'padding-left' => array(
				'title'			=> 'Left',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.column-content',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-range-slider' => 'style',
			),
		),
		// background
		'background-color' => array(
			'title' => 'Background',
			'break'	=> '1',
			'data-hide-mobile' => true,
			'style-class' => 'no-spacer bg-options',
			'background-color' => array(
				'title'			=> 'Color',
				'hide-title'	=> true,
				'size'			=> 'span4',
				'data-input-type'	=> 'color',
				'data-target'	=> '.column-content',
				'default'		=> 'transparent',
				'class'			=> 'color-picker admin-listen-handler',
				'data-handler'  => 'colorPicker',
				'data-picker'	=> 'style',
			),
		),
		'background-image' => array(
			'title' => 'Background',
			'break'	=> '2',
			'hide-title'   => true,
			'style-class'	=> 'bg-img-upload',
			'has-media'    => 'styles,background-image',
			'data-hide-mobile' => true,
			'background-image' => array(
				'title'			=> 'Image',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'data-input-type'	=> 'editor-image-upload',
				'data-target'	=> '.column-content',
				'default'		=> '',
				'style-class'	=> 'ce-dropzone',
				'data-upload'	=> 'stylesBackground',
			),
			'background-size' => array(
				'title'			=> 'Options',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'stack'			=> 'vertical-start',
				'data-input-type'    => 'select-box',
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'data-target'	=> '.column-content',
				'default'		=> 'auto',
				'select-box-values' => array(
					'auto'		=> 'No Scale',
					'cover' 	=> 'Cover (full width)',
					'contain'	=> 'Contain'
				),
			),
			'background-position' => array(
				'title'			=> 'Position',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'stack'			=> 'vertical',
				'data-input-type'    => 'select-box',
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'data-target'	=> '.column-content',
				'default'		=> '0% 0%',
				'select-box-values' => array(
					'0% 0%' 	=> 'Top Left',
					'50% 0%' 	=> 'Top Center',
					'100% 0%' 	=> 'Top Right',
					'0% 50%' 	=> 'Middle Left',
					'50% 50%' 	=> 'Middle Center',
					'100% 50%' 	=> 'Middle Right',
					'0% 100%' 	=> 'Bottom Left',
					'50% 100%' 	=> 'Bottom Center',
					'100% 100%' => 'Bottom Right'
				),
				'responsive'	=> true,
				'style-class'	=> 'ov-bg-type-column-img',
			),
			'background-repeat' => array(
				'title'			=> 'Repeat',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'stack'			=> 'vertical-end',
				'data-input-type'    => 'select-box',
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'data-target'	=> '.column-content',
				'default'		=> 'repeat',
				'select-box-values' => array(
					'repeat' 	=> 'Repeat both',
					'repeat-x' 	=> 'Repeat horizontal',
					'repeat-y' 	=> 'Repeat vertical',
					'no-repeat' => 'No Repeat',
				),
			),
		),
		'margin' => array(
			'title' => 'Offset',
			'style-class' => 'ep-collapsed',
			'margin-top' => array(
				'title'			=> 'Top',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.column-content',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-negative' => true,
				'data-range-slider' => 'style',
			),
			'margin-right' => array(
				'title'			=> 'Right',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.column-content',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-negative' => true,
				'data-range-slider' => 'style',
			),
			'margin-bottom' => array(
				'title'			=> 'Bottom',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.column-content',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-negative' => true,
				'data-range-slider' => 'style',
			),
			'margin-left' => array(
				'title'			=> 'Left',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.column-content',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-negative' => true,
				'data-range-slider' => 'style',
			),
		),
		// box shadow
		'box-shadow' => array(
			'title' => 'Drop Shadow',
			'break'	=> '4,2',
			'class' => 'ep-styles-box-shadow',
			'style-class' => 'ep-collapsed',
			'box-shadow-color' => array(
				'title'			=> 'Color',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'color',
				'data-target'	=> '.is-content',
				'default'		=> '#000000',
				'class'			=> 'color-picker admin-listen-handler',
				'data-handler'  => 'colorPicker',
				'responsive'	=> true,
				'data-picker'	=> 'style',
			),
			'box-shadow-h-length' => array(
				'title'			=> 'H Length',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.is-content',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'boxShadow',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-range-slider' => 'boxShadow',
			),
			'box-shadow-v-length' => array(
				'title'			=> 'V Length',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.is-content',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'boxShadow',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-range-slider' => 'boxShadow',
			),
			'box-shadow-blur-radius' => array(
				'title'			=> 'Blur',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.is-content',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'boxShadow',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'data-range-slider' => 'boxShadow',
			),
			'box-shadow-spread-radius' => array(
				'title'			=> 'Spread',
				'size'			=> 'span1',
				'offset'		=> 'offset1',
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.is-content',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'boxShadow',
				'responsive'	=> true,
				'data-has-unit'	=> true,
				'help'  => 'This option only applies to box shadows, not text shadows.',
				'data-range-slider' => 'boxShadow',
			),
			'box-shadow-opacity' => array(
				'title'			=> 'Opacity',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.is-content',
				'min'			=> 0,
				'max'			=> 100,
				'default'		=> 100,
				'class'			=> 'editor-listen',
				'data-handler'  => 'boxShadow',
				'responsive'	=> true,
				'data-range-slider' => 'boxShadow',
			),
		),
		// border
		'border' => array(
			'title' => 'Border',
			'break'	=> false,
			'class' => 'ep-styles-border',
			'style-class' => 'ep-collapsed',
			'border-color' => array(
				'title'			=> 'Color',
				'size'			=> 'span1',
				'data-input-type' 	=> 'color',
				'data-target'	=> '.is-content',
				'default'		=> '#000000',
				'class'			=> 'color-picker admin-listen-handler',
				'data-handler'  => 'colorPicker',
				'responsive'	=> true,
				'data-picker'	=> 'style',
			),
			'border-width' => array(
				'title'			=> 'Width',
				'size'			=> 'span1',
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.is-content',
				'default'		=> '0',
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'=> true,
				'data-range-slider' => 'style',
			),
			'border-style' => array(
				'title'		 => 'Style',
				'size'		 => 'span1',
				'data-input-type' => 'switch',
				'switch-type'=> 'icon-select',
				'class' 	 		=> 'editor-listen',
				'data-handler' 		=> 'default',
				'default'		=> 'solid',
				'data-target'	=> '.is-content',
				'tooltips'	 => array(
					'solid'		=> 'Solid',
					'dashed' 	=> 'Dashed',
					'dotted'	=> 'Dotted',
				),
				'switch-values' => array(
					'solid'		=> 'Solid',
					'dashed' 	=> 'Dashed',
					'dotted'	=> 'Dotted',
				),
				'responsive'	=> true,
			),
			'border-radius' => array(
				'title'			=> 'Radius',
				'size'			=> 'span1',
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.is-content',
				'default'		=> '0',
				'min'			=> 0,
				'max'			=> 999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'responsive'	=> true,
				'data-has-unit'=> true,	
				'data-range-slider' => 'style',
			),
		),
		'miscellaneous' => array(
			'title'			=> 'Miscellaneous',
			'break'			=> '1,2',
			'data-hide-mobile' => true,
			'style-class' => 'ep-collapsed',
			'css_classes' => array(
				'data-input-type'	=> 'input-text',
				'title'		 	=> 'Classes',
				'help'			=> 'Add your custom CSS classes, separated by a space. Example: class1 class2 class3',
				'size'		 	=> 'span4',
				'placeholder'	=> 'my-class my-cass-2',
				'default'		=> '',
				'class'			=> 'editor-listen',
				'data-handler'  => 'saveCssClass',
			),
			'opacity' => array(
				'title'				=> 'Opacity',
				'help'				=> 'Please note this setting will be overwritten if you add \'Opacity\' to your Motion effects.',
				'size'				=> 'span2',
				'data-input-type' 	=> 'range-slider',
				'data-target'		=> '.column-content',
				'data-divider'		=> 100,
				'default'			=> 1,
				'min'				=> 0,
				'max'				=> 100,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'data-range-slider' => 'style',
			),
			'z-index' => array(
				'title'			=> 'Stack order',
				'help'			=> 'This setting defines the stack order of your elements. An element with greater stack order is always in front of an element with a lower stack order. You only need to define this if you, for example, add a negative margin to an element and it gets hidden behind another element.',
				'size'			=> 'span2',
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.column-content',
				'default'		=> 0,
				'min'			=> 0,
				'max'			=> 250,
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'data-range-slider' => 'style',
			),
		),
	),

	// cover styles
	'cover' => array(
		// background
		'background-color' => array(
			'title' => 'Cover Background',
			'break'	=> '1',
			'data-hide-mobile' => true,
			'style-class' => 'no-spacer bg-options',
			'background-color' => array(
				'title'			=> 'Color',
				'hide-title'	=> true,
				'size'			=> 'span4',
				'data-input-type'	=> 'color',
				'data-target'	=> '.content-block',
				'default'		=> 'transparent',
				'class'			=> 'color-picker admin-listen-handler',
				'data-picker'	=> 'style',
				'data-handler'  => 'colorPicker',
			),
		),
		'background-type' => array(
			'title' => 'Background Type',
			'break' => '1',
			'hide-title' => true,
			'style-class' => 'no-spacer bg-type-switch',
			'data-hide-mobile' => true,
			'background_type' => array(
				'data-input-type' 			=> 'switch',
				'switch-type'				=> 'twoway',
				'title'		 				=> 'Background Type',
				'hide-title'				=> true,
				'size'		 				=> 'span4',
				'data-visibility-switch' 	=> true,
				'data-visibility-values' 	=> 'img,vid',
				'data-visibility-prefix'	=> 'ov-bg-type',
				'default' 	 				=> 'img',
				'class'						=> 'editor-listen',
				'data-handler'  			=> 'backgroundVideo',
				'switch-values' => array(
					'img'  	=> 'Image',
					'vid'	=> 'Video',
				),
			),
		),
		'background-image' => array(
			'title'		   => 'Background Image',
			'hide-title'   => true,
			'break'		   => '2',
			'style-class'		=> 'ov-bg-type-img bg-img-upload',
			'has-media'    => 'styles,background-image',
			'data-hide-mobile' => true,
			'background-image' => array(
				'title'			=> 'Image',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'data-input-type'	=> 'editor-image-upload',
				'data-target'	=> '.content-block',
				'default'		=> '',
				'style-class'		=> 'ce-dropzone',
				'data-upload'	=> 'stylesBackground',
			),
			'background-size' => array(
				'title'			=> 'Options',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'stack'			=> 'vertical-start',
				'data-input-type'    => 'select-box',
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'data-target'	=> '.content-block',
				'default'		=> 'auto',
				'select-box-values' => array(
					'auto'		=> 'No Scale',
					'cover' 	=> 'Cover (full width)',
					'contain'	=> 'Contain'
				),
			),
			'background-position' => array(
				'title'			=> 'Position',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'stack'			=> 'vertical',
				'data-input-type'    => 'select-box',
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'data-target'	=> '.content-block',
				'default'		=> '0% 0%',
				'select-box-values' => array(
					'0% 0%' 	=> 'Top Left',
					'50% 0%' 	=> 'Top Center',
					'100% 0%' 	=> 'Top Right',
					'0% 50%' 	=> 'Middle Left',
					'50% 50%' 	=> 'Middle Center',
					'100% 50%' 	=> 'Middle Right',
					'0% 100%' 	=> 'Bottom Left',
					'50% 100%' 	=> 'Bottom Center',
					'100% 100%' => 'Bottom Right'
				),
			),
			'background-repeat' => array(
				'title'			=> 'Repeat',
				'hide-title'	=> true,
				'size'			=> 'span2',
				'stack'			=> 'vertical-end',
				'data-input-type'    => 'select-box',
				'class'			=> 'editor-listen',
				'data-handler'  => 'default',
				'data-target'	=> '.content-block',
				'default'		=> 'repeat',
				'select-box-values' => array(
					'repeat' 	=> 'Repeat both',
					'repeat-x' 	=> 'Repeat horizontal',
					'repeat-y' 	=> 'Repeat vertical',
					'no-repeat' => 'No Repeat',
				),
			),
		),
		'background-video' => array(
			'title'		   => 'Background Video',
			'hide-title'   => true,
			'break'		   => '1,1,1,2',
			'style-class'	=> 'ov-bg-type-vid',
			'bg_video' => array(
				'title'			=> 'Video Upload',
				'hide-title'	=> true,
				'size'			=> 'span4',
				'data-input-type' => 'video-upload',
				'default'		=> '',
				'class'			=> 'editor-listen',
				'data-handler'  => 'backgroundVideo',
				'data-upload'	=> 'bgVideo',
				'help'			=> 'Please note that in order to make autoplay work, your video will be muted.',
			),
			'bg_video_url' => array(
				'data-input-type'	=> 'input-text',
				'title'		 	=> 'or use external video',
				'help'			=> 'If your video is too big to upload into the WordPress media library or you want to include a video from an external source (like a CDN), you can paste the link here. Please use .mp4 format.',
				'size'		 	=> 'span4',
				'placeholder'	=> 'http://my.cdn.com/video.mp4',
				'default'		=> '',
				'class'			=> 'editor-listen',
				'data-handler'  => 'backgroundVideo',
			),
			'bg_force_autoplay' => array(
				'data-input-type' 			=> 'switch',
				'switch-type'				=> 'twoway',
				'title'		 				=> 'Force Autoplay on Mobile',
				'help'						=> 'Enabling this option will force autoplay on mobile devices instead of displaying a fallback image. Please note that not all browsers support autoplay and there will be no fallback image for older browsers.',
				'size'		 				=> 'span4',
				'class'						=> 'editor-listen',
				'default' 	 				=> 'disabled',
				'data-handler'  			=> 'backgroundVideo',
				'switch-values' => array(
					'disabled'	=> 'Disabled',
					'enabled'  	=> 'Enabled',
				),
			),
			'bg_video_fallback' => array(
				'title'			=> 'Fallback Image',
				'help'			=> 'This fallback image will be displayed on mobile devices instead of your video and it will be a placeholder in the editor.',
				'size'			=> 'span2',
				'data-input-type'	=> 'admin-image-upload',
				'data-target'	=> '.background-video',
				'default'		=> '',
				'class'			=> 'editor-listen',
				'data-handler'  => 'backgroundVideo',
				'data-upload'	=> 'bgVideoFallback',
				'style-class'   => 'ce-upload-small hide-unsplash'
			),
			'bg_video_opacity' => array(
				'title'			=> 'Video Opacity',
				'size'			=> 'span2',
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.background-video',
				'default'		=> 100,
				'min'			=> 0,
				'max'			=> 100,
				'class'			=> 'editor-listen',
				'data-handler'  => 'backgroundVideo',
				'data-divider'  => 100,
				'data-range-slider' => 'bgVideoOpacity',
			),
		),
		'cover-effects' => array(
			'title'		   => 'Cover Effects',
			'break'		   => '2',
			'data-hide-mobile' => true,
			'image_effect' => array(
				'title'				=> 'Image',
				'size'		 		=> 'span2',
				'data-input-type' 		=> 'select-box',
				'class' 	 => 'editor-listen',
				'data-handler' => 'default',
				'default'		 	=> 'none',
				'help'				=> 'For displacement maps, the background position will be fixed to \'Middle Center\', overriding any background position you set yourself. Please also make sure to set \'Background Scale\' to \'Cover\'.<br /><br />A repeated background image or a background video will not work for displacement maps.<br/><br />Parallax will not work with a background video.',
				'data-visibility-switch' 	=> true,
				'data-visibility-values' 	=> 'none,zoom,parallax,displacement',
				'data-visibility-prefix'	=> 'ov-cover-effect',
				'select-box-values' => array(
					'none'    			=> 'None',
					'zoom' 			=> 'Zoom',
					'parallax'	 	=> 'Parallax',
					'displacement'  => 'Displacement Map'
				),
			),
			'mousemove_effect' => array(
				'title'				=> 'Mousemove',
				'size'		 		=> 'span2',
				'data-input-type' 		=> 'select-box',
				'class' 	 => 'editor-listen',
				'data-handler' => 'default',
				'default'		 	=> 'none',
				'data-visibility-switch' 	=> true,
				'data-visibility-values' 	=> 'none,tilt',
				'data-visibility-prefix'	=> 'ov-mousemove',
				'help'						=> '3D Tilt will per default scale your cover content for a pop off effect just in case you have elements near the edges and you find them getting cut off.',
				'select-box-values' => array(
					'none'    		=> 'None',
					'tilt'			=> '3D Tilt',
				),
			),
		),
		'tilt-settings' => array(
			'title'		   => 'Tilt Settings',
			'break'		   => '3',
			'style-class'  => 'ep-collapsed ov-mousemove-tilt',
			'data-hide-mobile' => true,
			'tilt_scale' => array(
				'title'			=> 'Scale',
				'size'			=> 'span1',
				'data-input-type' 	=> 'range-slider',
				'default'		=> 120,
				'min'			=> 100,
				'max'			=> 500,
				'class'			=> 'editor-listen',
				'data-range-slider' => 'style',
				'data-handler' => 'default',
				'help'			=> 'This will overscale your background image so your background color isn\'t visible on tilt. You only need to adjust this if you change the tilt size.<br /><br />Example: 120 means that your background image will get scaled from 100 to 120%.',
			),
			'tilt_max' => array(
				'title'			=> 'Tilt',
				'size'			=> 'span1',
				'data-input-type' 	=> 'range-slider',
				'default'		=> 20,
				'min'			=> 0,
				'max'			=> 9999,
				'class'			=> 'editor-listen',
				'data-range-slider' => 'style',
				'data-handler' => 'default',
				'help'			=> 'This will change your maximum tilt size and speed. (higher means more tilt on mousemove)',
			),
			'tilt_perspective' => array(
				'title'			=> 'Perspective',
				'size'			=> 'span2',
				'data-input-type' 	=> 'range-slider',
				'default'		=> 2000,
				'min'			=> 0,
				'max'			=> 99999,
				'class'			=> 'editor-listen',
				'data-range-slider' => 'style',
				'data-handler' => 'default',
				'help'			=> 'The lower your perspective, the more extreme the tilt gets.',
			),
		),
		'displacement-settings' => array(
			'title'		   => 'Displacement Settings',
			'break'		   => '2,2,2,2,2',
			'style-class'  => 'ep-collapsed ov-cover-effect-displacement',
			'data-hide-mobile' => true,
			'displacement_map' => array(
				'title'			=> 'Displacement Map',
				'size'			=> 'span2',
				'data-input-type'	=> 'admin-image-upload',
				'default'		=> '',
				'class'			=> 'editor-listen',
				'data-upload'	=> 'displacementMap',
				'style-class'   => 'ce-upload-small hide-unsplash',
				'help'			=> 'If you want to replace our default map, take a look at our free <a href="https://labs.semplice.com/displacement-maps" class="help-link" target="_blank">displacement map presets.</a><br /><br />For best results: Square image, recommended dimensions: 2048x2048px',
			),
			'displacement_speed' => array(
				'title'			=> 'Move Speed',
				'size'			=> 'span2',
				'data-input-type' 	=> 'range-slider',
				'default'		=> 100,
				'min'			=> 0,
				'max'			=> 9999,
				'class'			=> 'editor-listen',
				'data-range-slider' => 'style',
				'data-handler' => 'default',
				'help'			=> 'Define the movement speed of your displacement map.',
			),
			'displacement_type' => array(
				'title'				=> 'Animation',
				'size'		 		=> 'span2',
				'data-input-type' 		=> 'select-box',
				'class' 	 => 'editor-listen',
				'data-handler' => 'default',
				'default'		 	=> 'left-to-right',
				'data-visibility-switch' 	=> true,
				'data-visibility-values' 	=> 'move,grow',
				'data-visibility-prefix'	=> 'ov-displacement-type',
				'help'			=> '<b>Move</b><br />This will move the displacement map in a loop horizontally or vertically.<br /><br /><b>Grow</b><br />This will scale the displacement map horizontally or vertically to get a grow effect.',
				'select-box-values' => array(
					'move' 		=> 'Move',
					'grow'		=> 'Grow',
				),
			),
			'displacement_dir' => array(
				'data-input-type' 			=> 'switch',
				'switch-type'				=> 'twoway',
				'title'		 				=> 'Direction',
				'size'		 				=> 'span2',
				'class'						=> 'editor-listen',
				'default' 	 				=> 'hor',
				'data-handler'  			=> 'default',
				'switch-values' => array(
					'hor'	=> 'Hor',
					'ver'  	=> 'Vert',
				),
			),
			'displacement_max_growth' => array(
				'title'			=> 'Max Growth',
				'size'			=> 'span2',
				'data-input-type' 	=> 'range-slider',
				'default'		=> 250,
				'min'			=> 0,
				'max'			=> 9999,
				'class'			=> 'editor-listen',
				'data-range-slider' => 'style',
				'data-handler' => 'default',
				'style-class'  => 'ov-displacement-type-grow',
				'help'		   => 'Example: 250 means that your displacement map will scale 250 times of its size. (in the direction you choosed)',
			),
			'displacement_grow_speed' => array(
				'title'			=> 'Grow Speed',
				'size'			=> 'span2',
				'data-input-type' 	=> 'range-slider',
				'default'		=> 10,
				'min'			=> 0,
				'max'			=> 9999,
				'class'			=> 'editor-listen',
				'data-range-slider' => 'style',
				'data-handler' => 'default',
				'style-class'  => 'ov-displacement-type-grow',
			),
			'displacement_sprite_x' => array(
				'title'			=> 'Map Scale X',
				'size'			=> 'span2',
				'data-input-type' 	=> 'range-slider',
				'default'		=> 1,
				'min'			=> 0,
				'max'			=> 9999,
				'class'			=> 'editor-listen',
				'data-range-slider' => 'style',
				'data-handler' => 'default',
			),
			'displacement_sprite_y' => array(
				'title'			=> 'Map Scale Y',
				'size'			=> 'span2',
				'data-input-type' 	=> 'range-slider',
				'default'		=> 1,
				'min'			=> 0,
				'max'			=> 9999,
				'class'			=> 'editor-listen',
				'data-range-slider' => 'style',
				'data-handler' => 'default',
			),
			'displacement_filter_x' => array(
				'title'			=> 'Filter Scale X',
				'size'			=> 'span2',
				'data-input-type' 	=> 'range-slider',
				'default'		=> 10,
				'min'			=> 0,
				'max'			=> 9999,
				'class'			=> 'editor-listen',
				'data-range-slider' => 'style',
				'data-handler' => 'default',
			),
			'displacement_filter_y' => array(
				'title'			=> 'Filter Scale Y',
				'size'			=> 'span2',
				'data-input-type' 	=> 'range-slider',
				'default'		=> 20,
				'min'			=> 0,
				'max'			=> 9999,
				'class'			=> 'editor-listen',
				'data-range-slider' => 'style',
				'data-handler' => 'default',
			),
		),
		'options' => array(
			'title'  => 'Layout',
			'break'  => '2,3',
			'data-hide-mobile' => true,
			'class'  => 'section-options',
			'style-class'  => 'ep-collapsed',
			'layout' => array(
				'title'		 => 'Layout',
				'size'		 => 'span2',
				'data-input-type' => 'switch',
				'switch-type'=> 'twoway',
				'class' 	 => 'editor-listen',
				'data-handler' => 'layout',
				'default' 	 => 'grid',
				'data-core-option' => true,
				'switch-values' => array(
					'grid'	=> 'Grid',
					'fluid' => 'Fluid',
				),
			),
			'gutter' => array(
				'title'		 => 'Gutter',
				'data-input-type' => 'switch',
				'switch-type'=> 'twoway',
				'size'		 => 'span2',
				'class' 	 => 'editor-listen',
				'data-handler' => 'layout',
				'default' 	 => 'yes',
				'data-core-option' => true,
				'switch-values' => array(
					'yes'  => 'Keep',
					'no'   => 'Remove',
				),
			),
			'height' => array(
				'title'				=> 'height',
				'size'		 		=> 'span2',
				'data-input-type' 		=> 'select-box',
				'class' 	 => 'editor-listen',
				'data-handler' => 'layout',
				'default'		 	=> 'dynamic',
				'help'				=> 'The \'Fullscreen\' option means your section has a minimum height of 100% from your browser viewport. To keep the 100% height, avoid content that exceeds the height.',
				'data-visibility-switch' 	=> true,
				'data-visibility-values' 	=> 'dynamic,fullscreen,custom',
				'data-visibility-prefix'	=> 'ov-section-height',
				'data-core-option' => true,
				'style-class' => 'option-unavailable',
				'select-box-values' => array(
					'dynamic'    => 'Dynamic',
					'fullscreen' => 'Fullscreen',
					'custom'	 => 'Custom'
				),
			),
			'valign' => array(
				'title'		 => 'V-Align',
				'size'		 => 'span1',
				'data-input-type' => 'switch',
				'switch-type'=> 'icon-select',
				'class' 	 		=> 'editor-listen',
				'data-handler' 		=> 'layout',
				'default'	 => 'stretch',
				'help'		 => 'To align content vertically, please set the height of your section to \'Fullscreen\' or define a custom height that exceeds the height of your content.',
				'data-core-option' => true,
				'tooltips'	 => array(
					'stretch' => 'Stretch',
					'top'     => 'Align top',
					'bottom'  => 'Align bottom',
					'center'  => 'Align middle',
				),
				'switch-values' => array(
					'stretch' => 'Stretch',
					'top'     => 'Top',
					'bottom'  => 'Bottom',
					'center'  => 'Center',
				),
			),
			'justify' => array(
				'title'		 => 'H-Align',
				'help'		 => 'The first three H-Align options only take effect if you have free space in your section (meaning your combined column sizes are < 12). For the last two options, you need at least 2 columns and the size of your columns must be < 12.',
				'size'		 => 'span1',
				'data-input-type' => 'switch',
				'switch-type'=> 'icon-select',
				'class' 	 		=> 'editor-listen',
				'data-handler' 		=> 'layout',
				'default'	 => 'left',
				'data-core-option' => true,
				'tooltips'	 => array(
					'left'     		 => 'Align left',
					'right'  		 => 'Align right',
					'center' 		 => 'Align center',
					'space-between'  => 'Space Between',
					'space-around' 	 => 'Space Around'
				),
				'switch-values' => array(
					'left'     		 => 'Left',
					'right'  		 => 'Right',
					'center' 		 => 'center',
					'space-between'  => 'Space Between',
					'space-around' 	 => 'Space Around'
				),
			),
		),
		'scroll-down-arrow' => array(
			'title'			=> 'Scroll down arrow',
			'break'			=> '1,3',
			'data-hide-mobile' => true,
			'style-class'  => 'ep-collapsed',
			'arrow_visibility' => array(
				'data-input-type' 			=> 'switch',
				'switch-type'				=> 'twoway',
				'title'		 				=> 'Visibility',
				'size'		 				=> 'span4',
				'data-visibility-switch' 	=> true,
				'data-visibility-values' 	=> 'visible,hidden',
				'data-visibility-prefix'	=> 'ov-cover-arrow',
				'default' 	 				=> 'visible',
				'class'						=> 'editor-listen',
				'data-handler'  			=> 'default',
				'switch-values' => array(
					'visible'  	=> 'Visible',
					'hidden'	=> 'Hidden',
				),
			),
			'arrow_cover' => array(
				'title'			=> 'Custom Arrow',
				'size'			=> 'span2',
				'data-input-type'	=> 'admin-image-upload',
				'data-target'	=> '.content-block',
				'default'		=> '',
				'style-class'	=> 'ce-upload-small hide-unsplash ov-cover-arrow-visible',
				'data-upload'	=> 'coverArrow',
				'help'			=> 'If you upload a custom arrow, the \'Color\' option will not be applied. For best quality, upload an SVG image.'
			),
			'arrow_width' => array(
				'title'			=> 'Width',
				'size'			=> 'span1',
				'offset'		=> false,
				'data-input-type' 	=> 'range-slider',
				'data-target'	=> '.show-more svg',
				'default'		=> 53,
				'min'			=> 0,
				'max'			=> 9999,
				'class'			=> 'editor-listen',
				'data-handler'  => 'coverArrowWidth',
				'style-class'	=> 'ov-cover-arrow-visible',
				'data-has-unit'	=> true,
				'data-range-slider' => 'coverArrowWidth',
			),
			'arrow_color' => array(
				'title'			=> 'Color',
				'size'			=> 'span1',
				'data-input-type'	=> 'color',
				'data-target'	=> '.content-block',
				'default'		=> 'transparent',
				'class'			=> 'color-picker admin-listen-handler',
				'data-handler'  => 'colorPicker',
				'style-class'	=> 'ov-cover-arrow-visible',
				'data-picker'	=> 'style',
			),
		),
		'vp-button-switch' => array(
			'title'  	 => 'View Project Button',
			'break'		 => '1,1',
			'help'		 => 'If you are using this cover in a coverslider, you can customize the \'View Project\' button here. If set to \'Default\', it will use the default button from the coverslider.',
			'data-hide-mobile' => true,
			'style-class'  => 'ep-collapsed',
			'vp_button_type' => array(
				'data-input-type' 			=> 'switch',
				'switch-type'				=> 'twoway',
				'title'		 				=> 'View Project Button',
				'hide-title'				=> true,
				'size'		 				=> 'span4',
				'data-visibility-switch' 	=> true,
				'data-visibility-values' 	=> 'default,custom',
				'data-visibility-prefix'	=> 'ov-vp-button',
				'default' 	 				=> 'default',
				'class'						=> 'editor-listen',
				'data-handler'  			=> 'default',
				'switch-values' => array(
					'default'  	=> 'Default',
					'custom'	=> 'Custom',
				),
			),
			'vp_button_visibility' => array(
				'data-input-type' 			=> 'switch',
				'switch-type'				=> 'twoway',
				'title'		 				=> 'Visibility',
				'size'		 				=> 'span4',
				'default' 	 				=> 'visible',
				'class'						=> 'editor-listen',
				'data-handler'  			=> 'default',
				'style-class'				=> 'ov-vp-button-custom',
				'switch-values' => array(
					'visible'  	=> 'Visible',
					'hidden'	=> 'Hidden',
				),
			),
		),
		// coverslider view project button
		'vp-button-general' => $vp_button_options['general'],
		'vp-button-link'	=> $vp_button_options['link'],
		'vp-button-hover'	=> $vp_button_options['hover'],
		'miscellaneous' => array(
			'title'			=> 'Miscellaneous',
			'break'			=> '1',
			'style-class' => 'ep-collapsed',
			'data-hide-mobile' => true,
			'mix-blend-mode' => array(
				'title'		 => 'Blend mode',
				'data-input-type' => 'select-box',
				'size'		 => 'span4',
				'class' 	 => 'editor-listen',
				'default' 	 => 'normal',
				'data-handler'  => 'default',
				'data-target'	=> '.content-block',
				'select-box-values' => $blend_modes,
			),
		),
	),

	// mobile column styles
	'responsive-column-sm' => get_responsive_column_styles('sm', 'Tablet Portrait'),
	'responsive-column-xs' => get_responsive_column_styles('xs', 'Phone'),

	// global responsive styles
	'responsive-bg-styles' => array(
		'title' => 'Background',
		'break'	=> '2',
		'background-image' => array(
			'title'			=> 'Image',
			'size'			=> 'span2',
			'data-input-type'	=> 'editor-image-upload',
			'data-target'	=> '.content-block',
			'default'		=> '',
			'style-class'		=> 'ce-dropzone ce-upload-small hide-unsplash',
			'data-upload'	=> 'stylesBackground',
			'responsive'    => true,
		),
		'background-position' => array(
			'title'			=> 'Position',
			'size'			=> 'span2',
			'data-input-type'    => 'select-box',
			'class'			=> 'editor-listen',
			'data-handler'  => 'default',
			'data-target'	=> '.column-content',
			'default'		=> '0% 0%',
			'select-box-values' => array(
				'0% 0%' 	=> 'Top Left',
				'50% 0%' 	=> 'Top Center',
				'100% 0%' 	=> 'Top Right',
				'0% 50%' 	=> 'Middle Left',
				'50% 50%' 	=> 'Middle Center',
				'100% 50%' 	=> 'Middle Right',
				'0% 100%' 	=> 'Bottom Left',
				'50% 100%' 	=> 'Bottom Center',
				'100% 100%' => 'Bottom Right'
			),
			'responsive'	=> true,
		),
	),
);

?>