<div class="mka-po-wrap">

	<!-- tab sidebar -->
	<div class="mka-po-sidebar">
		<ul class="mka-po-sidebar-list">
			<li class="mka-po-sidebar-list-items mka-is-active"><a class="mka-po-sidebar-tabs" href="#mk-po-pane-1">page settings</a></li>
			<li class="mka-po-sidebar-list-items"><a class="mka-po-sidebar-tabs" href="#mk-po-pane-2">logos</a></li>
			<li class="mka-po-sidebar-list-items"><a class="mka-po-sidebar-tabs" href="#mk-po-pane-3">background style</a></li>
			<li class="mka-po-sidebar-list-items"><a class="mka-po-sidebar-tabs" href="#mk-po-pane-4">header</a></li>
			<li class="mka-po-sidebar-list-items"><a class="mka-po-sidebar-tabs" href="#mk-po-pane-5">page title</a></li>
			<li class="mka-po-sidebar-list-items"><a class="mka-po-sidebar-tabs" href="#mk-po-pane-6">footer</a></li>
			<li class="mka-po-sidebar-list-items"><a class="mka-po-sidebar-tabs" href="#mk-po-pane-7">sidebar</a></li>
		</ul>
	</div>

	<!-- tab pane -->
	<div class="mka-po-pane">

		<!-- tab pane 1 -->
		<div class="mka-po-pane-box" id="mk-po-pane-1">
			<div class="mka-po-pane-box-header">
				<h3 class="mka-po-pane-box-heading">page settings</h3>
			</div>
			<div class="mka-po-pane-box-body">

				<!-- element wrapper section -->
				<div class="mka-po-pane-body-section">
					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<span class="mk-po-lbl">h1 Text Weight</span>
					    <div class="mka-wrap mka-options-wrap">
					        <div class="mka-options">
					            <div class="mka-options-item-wrap mka-options-item-wrap--active">
					                <span class="mka-options-item">
					                    Global
					                </span>
					                <span class="mka-options-item-ripple"></span>
					            </div>
					            <div class="mka-options-item-wrap">
					                <span class="mka-options-item">
					                    Custom
					                </span>
					                <span class="mka-options-item-ripple"></span>
					            </div>
					            <div class="mka-options-item-wrap">
					                <span class="mka-options-item">
					                    Yes
					                </span>
					                <span class="mka-options-item-ripple"></span>
					            </div>
					            <div class="mka-options-item-wrap">
					                <span class="mka-options-item">
					                    No
					                </span>
					                <span class="mka-options-item-ripple"></span>
					            </div>
					        </div>
					    </div>
					</div>

					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<span class="mk-po-lbl">Select Box</span>
					    <div class="mka-wrap mka-select-wrap">
					        <div class="mka-select">
					            <input type="hidden" class="mka-select-box-value">
					            <div class="mka-select-box">Primary navigation</div>
					            <div class="mka-select-box-list-wrap mka-select-list-wrap">
					                <div class="mka-select-list">
					                    <span data-value="some-value" class="mka-select-list-item">Droid Sans</span>
					                    <span data-value="some-value" class="mka-select-list-item">Wendy One</span>
					                    <span data-value="some-value" class="mka-select-list-item">Open Sans</span>
					                    <span data-value="some-value" class="mka-select-list-item">Droid Sans</span>
					                    <span data-value="some-value" class="mka-select-list-item">Wendy One</span>
					                    <span data-value="some-value" class="mka-select-list-item">Open Sans</span>
					                    <span data-value="some-value" class="mka-select-list-item">Droid Sans</span>
					                    <span data-value="some-value" class="mka-select-list-item">Wendy One</span>
					                    <span data-value="some-value" class="mka-select-list-item">Open Sans</span>
					                    <span data-value="some-value" class="mka-select-list-item">Droid Sans</span>
					                    <span data-value="some-value" class="mka-select-list-item">Wendy One</span>
					                    <span data-value="some-value" class="mka-select-list-item">Open Sans</span>
					                    <span data-value="some-value" class="mka-select-list-item">Droid Sans</span>
					                    <span data-value="some-value" class="mka-select-list-item">Wendy One</span>
					                    <span data-value="some-value" class="mka-select-list-item">Open Sans</span>
					                </div>
					            </div>
					        </div>
					    </div>
					</div>
				</div>

				<!-- element wrapper section -->
				<div class="mka-po-pane-body-section">

					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<span class="mk-po-lbl">responsive header height</span>
					    <div class="mka-wrap mka-range-wrap">
					        <div class="mka-range-bg">
					            <input type="text" class="mka-range-val">
					            <span class="mka-range-overlay-btn"></span>
					            <span class="mka-range-btn"></span>
					        </div>
					        <div class="mka-range">
					            <input type="range" class="mka-range-input" min="0" max="300" step="10" value="100"  >
					        </div>
					    </div>
					</div>

					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<span class="mk-po-lbl">responsive header width</span>
					    <div class="mka-wrap mka-range-wrap">
					        <div class="mka-range-bg">
					            <input type="text" class="mka-range-val">
					            <span class="mka-range-overlay-btn"></span>
					            <span class="mka-range-btn"></span>
					        </div>
					        <div class="mka-range">
					            <input type="range" class="mka-range-input" min="0" max="300" step="10" value="100"  >
					        </div>
					    </div>
					</div>
				</div>

				<!-- element wrapper section -->
				<div class="mka-po-pane-body-section">
					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<span class="mk-po-lbl">responsive header width</span>
					    <div class="mka-wrap mka-range-wrap">
					        <div class="mka-range-bg">
					            <input type="text" class="mka-range-val">
					            <span class="mka-range-overlay-btn"></span>
					            <span class="mka-range-btn"></span>
					        </div>
					        <div class="mka-range">
					            <input type="range" class="mka-range-input" min="0" max="300" step="10" value="100"  >
					        </div>
					    </div>
					</div>

					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<span class="mk-po-lbl">responsive header height</span>
					    <div class="mka-wrap mka-range-wrap">
					        <div class="mka-range-bg">
					            <input type="text" class="mka-range-val">
					            <span class="mka-range-overlay-btn"></span>
					            <span class="mka-range-btn"></span>
					        </div>
					        <div class="mka-range">
					            <input type="range" class="mka-range-input" min="0" max="300" step="10" value="100"  >
					        </div>
					    </div>
					</div>
				</div>
			</div>
		</div>

		<!-- tab pane 2 -->
		<div class="mka-po-pane-box" id="mk-po-pane-2">
			<div class="mka-po-pane-box-header">
				<h3 class="mka-po-pane-box-heading">logos</h3>
			</div>
			<div class="mka-po-pane-box-body">

				<!-- element wrapper section -->
				<div class="mka-po-pane-body-section">
					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<!-- Text Box -->
					    <span class="mk-po-lbl">Text Field</span>
					    <div class="mka-wrap">
					        <input class="mka-textfield" type="text" placeholder="Placeholder">
					    </div>
					</div>

					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
					    <!-- Image Upload -->
					    <span class="mk-po-lbl">Image Upload</span>
					    <div class="mka-wrap mka-image-upload-wrap">
					        <div class="mka-upload">
					            <input class="mka-textfield" type="text" value="http://demos.artbees1.netdna-cdn.com/jupiter/wp-content/uploads/2017/01/minos.jpg" >
					            <a href="#" class="mka-upload-btn">
					                <span class="mka-upload-btn-icon"></span>
					            </a>
					            <span class="mka-image-upload-view-btn"></span>
					        </div>
					        <div class="mka-image-upload-view">
					            <svg class="mka-spinner mka-image-upload-view-spinner" width="25px" height="25px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
					               <circle class="mka-spinner-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
					            </svg>
					        </div>
					    </div>
					</div>
				</div>
			</div>
		</div>

		<!-- tab pane 3 -->
		<div class="mka-po-pane-box" id="mk-po-pane-3">
			<div class="mka-po-pane-box-header">
				<h3 class="mka-po-pane-box-heading">background style</h3>
			</div>
			<div class="mka-po-pane-box-body">

				<!-- element wrapper section -->
				<div class="mka-po-pane-body-section">
					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<!-- Buttons -->
					    <span class="mk-po-lbl">Buttons</span>
					    <div class="mka-wrap">
					        <input type="button" class="mka-button mka-button--blue mka-button--medium" value="Primary navigation">
					    </div>
					</div>

					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<span class="mk-po-lbl">Buttons</span>
						<div class="mka-wrap">
					        <input type="button" class="mka-button mka-button--gray mka-button--small" value="Primary navigation">
					    </div>
					</div>
				</div>

				<!-- element wrapper section -->
				<div class="mka-po-pane-body-section">
					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<!-- Buttons -->
					    <span class="mk-po-lbl">Buttons</span>
					    <div class="mka-wrap">
					        <a href="#" class="mka-button mka-button--green mka-button--small mka-button--icon">Add New</a>
					    </div>
					</div>

					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<span class="mk-po-lbl">Buttons</span>
						<div class="mka-wrap">
					        <a href="#" class="mka-button mka-button--darkgray mka-button--small mka-button--float">
					            <svg width="10" height="10" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
					                <line style="fill:none;stroke:#ffffff;stroke-width:3;stroke-miterlimit:10;" x1="0.8" y1="0.8" x2="15.2" y2="15.3"/>
					                <line style="fill:none;stroke:#ffffff;stroke-width:3;stroke-miterlimit:10;" x1="15.2" y1="0.8" x2="0.8" y2="15.3"/>
					            </svg>
					        </a>
					    </div>
					</div>
				</div>
			</div>
		</div>

		<!-- tab pane 4 -->
		<div class="mka-po-pane-box" id="mk-po-pane-4">
			<div class="mka-po-pane-box-header">
				<h3 class="mka-po-pane-box-heading">header</h3>
			</div>
			<div class="mka-po-pane-box-body">

				<!-- element wrapper section -->
				<div class="mka-po-pane-body-section">
					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<span class="mk-po-lbl">Textarea</span>
						<div class="mka-wrap">
					    	<textarea class="mka-textarea" rows="8" placeholder="Placeholder"></textarea>
					    </div>
					</div>

					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<span class="mk-po-lbl">Error Field</span>
						<div class="mka-wrap">
					        <input class="mka-textfield mka-textfield--error" type="text" value="Error!">
					        <span class="mka-textfield-error-msg">Something is wrong here</span>
					    </div>
					</div>
				</div>
			</div>
		</div>

		<!-- tab pane 5 -->
		<div class="mka-po-pane-box" id="mk-po-pane-5">
			<div class="mka-po-pane-box-header">
				<h3 class="mka-po-pane-box-heading">page title</h3>
			</div>
			<div class="mka-po-pane-box-body">

				<!-- element wrapper section -->
				<div class="mka-po-pane-body-section">
					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<!-- Font Filed -->
					    <span class="mk-po-lbl">Font Field</span>
					    <div class="mka-wrap mka-font-wrap">
					        <div class="mka-font">
					            <input type="text" class="mka-font-field">
					            <span class="mka-font-icon-wrap">
					                <span class="mka-font-icon"></span>
					                <div class="mka-bubbling">
					                    <span id="mka-bubbling-1"></span>
					                    <span id="mka-bubbling-2"></span>
					                    <span id="mka-bubbling-3"></span>
					                </div>
					            </span>
					            <div class="mka-font-filter">
					                <span data-value="all" class="mka-font-filter-selected">All</span>
					                <div class="mka-font-filter-list">
					                    <span data-value="all" class="mka-font-filter-item mka-font-filter-item--selected">All</span>
					                    <span data-value="google-font" class="mka-font-filter-item mka-font-filter-item--google">Google Font</span>
					                    <span data-value="typekit" class="mka-font-filter-item mka-font-filter-item--typekit">Typekit</span>
					                    <span data-value="safe-fonts" class="mka-font-filter-item">Safe Fonts</span>
					                </div>
					            </div>
					        </div>
					        <div class="mka-font-list mka-select-list-wrap">
					            <div class="mka-select-list">
					                <span class="mka-select-list-item">Droid Sans</span>
					                <span class="mka-select-list-item">Wendy One</span>
					                <span class="mka-select-list-item">Open Sans</span>
					            </div>
					        </div>
					    </div>
					</div>

					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<!-- Search Box -->
					    <span class="mk-po-lbl">Search</span>
					    <div class="mka-wrap mka-search-wrap">
					        <div class="mka-search">
					            <input type="text" class="mka-search-box">
					            <span class="mka-search-icon-wrap">
					                <span class="mka-search-icon"></span>
					                <div class="mka-bubbling">
					                    <span id="mka-bubbling-1">
					                    </span>
					                    <span id="mka-bubbling-2">
					                    </span>
					                    <span id="mka-bubbling-3">
					                    </span>
					                </div>
					            </span>
					        </div>
					        <div class="mka-search-list mka-select-list-wrap">
					            <div class="mka-select-list">
					                <span class="mka-select-list-item">Droid Sans</span>
					                <span class="mka-select-list-item">Wendy One</span>
					                <span class="mka-select-list-item">Open Sans</span>
					            </div>
					        </div>
					    </div>
					</div>
				</div>
			</div>
		</div>

		<!-- tab pane 6 -->
		<div class="mka-po-pane-box" id="mk-po-pane-6">
			<div class="mka-po-pane-box-header">
				<h3 class="mka-po-pane-box-heading">footer</h3>
			</div>
			<div class="mka-po-pane-box-body">

				<!-- element wrapper section -->
				<div class="mka-po-pane-body-section">
					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<!-- Tip Info -->
					    <span class="mk-po-lbl">
					        Tip Info
					        <div class="mka-wrap mka-tip-wrap">
					            <a href="#" class="mka-tip">
					                <span class="mka-tip-icon">
					                	<span class="mka-tip-arrow"></span>
					                </span>
					                <span class="mka-tip-ripple"></span>
					            </a>
					            <div class="mka-tip-content">
					                This value defines when Main Navigation should viewed as Responsive Navigation. Default is 1140px but if your Navigation items fits in header in smaller widths you can change this value. For example if you wish to view your website in iPad and see Main Navigtion as you see in desktop, then you should change this value to any size below 1020px. <a href="#">Learn More</a>
					            </div>
					        </div>
					    </span>
					</div>

					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<!-- Check Box -->
					    <span class="mk-po-lbl">
					        Check Box
					        <div class="mka-wrap mka-tip-wrap">
					            <a href="#" class="mka-tip">
					                <span class="mka-tip-icon">
					                	<span class="mka-tip-arrow"></span>
					                </span>
					                <span class="mka-tip-ripple"></span>
					            </a>
					            <div class="mka-tip-content">
					                This value defines when Main Navigation should viewed as Responsive Navigation. Default is 1140px but if your Navigation items fits in header in smaller widths you can change this value. For example if you wish to view your website in iPad and see Main Navigtion as you see in desktop, then you should change this value to any size below 1020px. <a href="#">Learn More</a>
					            </div>
					        </div>
					    </span>
					    <div class="mka-wrap mka-checkbox-wrap">
					        <input class="mka-checkbox" type="checkbox" checked="checked">
					        <div class="mka-checkbox-skin">
					            <div class="mka-checkbox-bg"></div>
					            <div class="mka-checkbox-bullet"></div>
					            <div class="mka-checkbox-bullet-inactive"></div>
					            <div class="mka-checkbox-ripple"></div>
					        </div>
					    </div>
					</div>
				</div>

				<!-- element wrapper section -->
				<div class="mka-po-pane-body-section">
					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<!-- Toggle -->
					    <span class="mk-po-lbl">Toggle</span>
					    <div class="mka-wrap mka-toggle-wrap">
					        <div class="mka-toggle">
					            <span class="mka-toggle-bullet">
					                <span class="mka-toggle-bullet-inner"></span>
					                <span class="mka-toggle-bullet-ripple"></span>
					            </span>
					            <input class="mka-toggle-input" type="hidden" value="false">
					        </div>
					    </div>
					</div>

					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<!-- Toggle -->
					    <span class="mk-po-lbl">Toggle</span>
					    <div class="mka-wrap mka-toggle-wrap">
					        <div class="mka-toggle">
					            <span class="mka-toggle-bullet">
					                <span class="mka-toggle-bullet-inner"></span>
					                <span class="mka-toggle-bullet-ripple"></span>
					            </span>
					            <input class="mka-toggle-input" type="hidden" value="false">
					        </div>
					    </div>
					</div>
				</div>
			</div>
		</div>

		<!-- tab pane 7 -->
		<div class="mka-po-pane-box" id="mk-po-pane-7">
			<div class="mka-po-pane-box-header">
				<h3 class="mka-po-pane-box-heading">sidebar</h3>
			</div>
			<div class="mka-po-pane-box-body">

				<!-- element wrapper section -->
				<div class="mka-po-pane-body-section">
					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<!-- Tip Info -->
					    <span class="mk-po-lbl">
					        Tip Info
					        <div class="mka-wrap mka-tip-wrap">
					            <a href="#" class="mka-tip">
					                <span class="mka-tip-icon"></span>
					                <span class="mka-tip-ripple"></span>
					            </a>
					            <div class="mka-tip-content">
					                This value defines when Main Navigation should viewed as Responsive Navigation. Default is 1140px but if your Navigation items fits in header in smaller widths you can change this value. For example if you wish to view your website in iPad and see Main Navigtion as you see in desktop, then you should change this value to any size below 1020px. <a href="#">Learn More</a>
					            </div>
					        </div>
					    </span>
					</div>

					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<!-- Check Box -->
					    <span class="mk-po-lbl">Check Box</span>
					    <div class="mka-wrap mka-checkbox-wrap">
					        <input class="mka-checkbox" type="checkbox" checked="checked">
					        <div class="mka-checkbox-skin">
					            <div class="mka-checkbox-bg"></div>
					            <div class="mka-checkbox-bullet"></div>
					            <div class="mka-checkbox-bullet-inactive"></div>
					            <div class="mka-checkbox-ripple"></div>
					        </div>
					    </div>
					</div>
				</div>

				<!-- element wrapper section -->
				<div class="mka-po-pane-body-section">
					<!-- element wrapper -->
					<div class="mka-po-pane-grid mka-po-grid-half">
						<!-- Toggle -->
					    <span class="mk-po-lbl">Toggle</span>
					    <div class="mka-wrap mka-toggle-wrap">
					        <div class="mka-toggle">
					            <span class="mka-toggle-bullet">
					                <span class="mka-toggle-bullet-inner"></span>
					                <span class="mka-toggle-bullet-ripple"></span>
					            </span>
					            <input class="mka-toggle-input" type="hidden" value="false">
					        </div>
					    </div>
					</div>
				</div>

			</div>
		</div>
	</div>
</div>