<div class="whcom_main">
	<?php include WHCOM_PATH . '/shortcodes/icons.php'?>
</div>


<!--Buttons-->
<div class="whcom_main">
	<h2>Buttonst</h2>
	<div class="whcom_row whcom_margin_bottom_15">
		<div class="whcom_col_sm_3">
			<button class="whcom_button">Button</button>
		</div>
		<div class="whcom_col_sm_3">
			<button class="whcom_button whcom_button_secondary">Button Secondary</button>
		</div>
		<div class="whcom_col_sm_3">
			<button class="whcom_button_success">Button Success</button>
		</div>
		<div class="whcom_col_sm_3">
			<button class="whcom_button_info">Button Info</button>
		</div>
	</div>
	<div class="whcom_row whcom_margin_bottom_15">
		<div class="whcom_col_sm_3">
			<button class="whcom_button_warning">Button Warning</button>
		</div>
		<div class="whcom_col_sm_3">
			<button class="whcom_button_danger">Button Danger</button>
		</div>
		<div class="whcom_col_sm_3">
			<button class="whcom_button_tiny">Button Tiny</button>
		</div>
		<div class="whcom_col_sm_3">
			<button class="whcom_button_small">Button Small</button>
		</div>
	</div>
	<div class="whcom_row whcom_margin_bottom_15">
		<div class="whcom_col_sm_3">
			<button class="whcom_button_micro">Button Micro</button>
		</div>
		<div class="whcom_col_sm_3">
			<button class="whcom_button_big">Button Big</button>
		</div>
		<div class="whcom_col_sm_3">
			<button class="whcom_button_big">Button Large</button>
		</div>
		<div class="whcom_col_sm_3">
			<button class="whcom_button_block">Button Block</button>
		</div>
	</div>
	<div class="whcom_row whcom_margin_bottom_15">
		<div class="whcom_col_sm_12">
			<button class="whcom_button_block whcom_button_large">Button Big Block</button>
		</div>
	</div>
</div>

<!--Grid-->
<div class="whcom_main">
	<h2>Grid System</h2>
	<h3>Mobile (all screens)</h3>
	<div class="whcom_row">
		<div class="whcom_col_xs_6" style="background: green"></div>
		<div class="whcom_col_xs_6" style="background: blue"></div>
	</div>
	<h3>Tablet Portrait (576px and above)</h3>
	<div class="whcom_row">
		<div class="whcom_col_sm_6" style="background: green"></div>
		<div class="whcom_col_sm_6" style="background: blue"></div>
	</div>
	<h3>Tablet Landscape (768px and above)</h3>
	<div class="whcom_row">
		<div class="whcom_col_md_6" style="background: green"></div>
		<div class="whcom_col_md_6" style="background: blue"></div>
	</div>
	<h3>Desktop (992px and above)</h3>
	<div class="whcom_row">
		<div class="whcom_col_lg_6" style="background: green"></div>
		<div class="whcom_col_lg_6" style="background: blue"></div>
	</div>
	<h3>Large Desktops (1200px and above)</h3>
	<div class="whcom_row">
		<div class="whcom_col_xl_6" style="background: green"></div>
		<div class="whcom_col_xl_6" style="background: blue"></div>
	</div>


	<h3>Responsive Example</h3>
	<div class="whcom_row">
		<div class="whcom_col_xs_6 whcom_col_sm_4 whcom_col_md_3 whcom_col_lg_2 whcom_col_xl_1" style="background: green"></div>
		<div class="whcom_col_xs_6 whcom_col_sm_4 whcom_col_md_3 whcom_col_lg_2 whcom_col_xl_1" style="background: blue"></div>
		<div class="whcom_col_xs_6 whcom_col_sm_4 whcom_col_md_3 whcom_col_lg_2 whcom_col_xl_1" style="background: green"></div>
		<div class="whcom_col_xs_6 whcom_col_sm_4 whcom_col_md_3 whcom_col_lg_2 whcom_col_xl_1" style="background: blue"></div>
		<div class="whcom_col_xs_6 whcom_col_sm_4 whcom_col_md_3 whcom_col_lg_2 whcom_col_xl_1" style="background: green"></div>
		<div class="whcom_col_xs_6 whcom_col_sm_4 whcom_col_md_3 whcom_col_lg_2 whcom_col_xl_1" style="background: blue"></div>
		<div class="whcom_col_xs_6 whcom_col_sm_4 whcom_col_md_3 whcom_col_lg_2 whcom_col_xl_1" style="background: green"></div>
		<div class="whcom_col_xs_6 whcom_col_sm_4 whcom_col_md_3 whcom_col_lg_2 whcom_col_xl_1" style="background: blue"></div>
		<div class="whcom_col_xs_6 whcom_col_sm_4 whcom_col_md_3 whcom_col_lg_2 whcom_col_xl_1" style="background: green"></div>
		<div class="whcom_col_xs_6 whcom_col_sm_4 whcom_col_md_3 whcom_col_lg_2 whcom_col_xl_1" style="background: blue"></div>
		<div class="whcom_col_xs_6 whcom_col_sm_4 whcom_col_md_3 whcom_col_lg_2 whcom_col_xl_1" style="background: green"></div>
		<div class="whcom_col_xs_6 whcom_col_sm_4 whcom_col_md_3 whcom_col_lg_2 whcom_col_xl_1" style="background: blue"></div>
	</div>
</div>

<!--Alerts-->
<div class="whcom_main">
	<div class="whcom_row">
		<div class="whcom_col_sm_6">
			<h2>Alerts</h2>
			<div class="whcom_alert"><span>Default: This is Simple Alert</span></div>
			<div class="whcom_alert whcom_alert_success"><span>Success: This is Simple Alert</span></div>
			<div class="whcom_alert whcom_alert_info"><span>Info: This is Simple Alert</span></div>
			<div class="whcom_alert whcom_alert_warning"><span>Warning: This is Simple Alert</span></div>
			<div class="whcom_alert whcom_alert_danger"><span>Danger: This is Simple Alert</span></div>
		</div>
		<div class="whcom_col_sm_6">
			<h2>Alerts with Icons</h2>
			<div class="whcom_alert whcom_alert_with_icon"><span>Default: This is Simple Alert</span></div>
			<div class="whcom_alert whcom_alert_with_icon whcom_alert_success"><span>Success: This is Simple Alert</span></div>
			<div class="whcom_alert whcom_alert_with_icon whcom_alert_info"><span>Info: This is Simple Alert</span></div>
			<div class="whcom_alert whcom_alert_with_icon whcom_alert_warning"><span>Warning: This is Simple Alert</span></div>
			<div class="whcom_alert whcom_alert_with_icon whcom_alert_danger"><span>Danger: This is Simple Alert</span></div>
		</div>
	</div>
</div>

<span></span>

<!--Dropdowns-->
<div class="whcom_main">
	<h2>DropDowns</h2>
	<div class="whcom_row">
		<div class="whcom_col_sm_3">
			<div class="whcom_dropdown whcom_dropdown_full">
				<span class="whcom_dropdown_toggle">Dropdown Simple</span>
				<div class="whcom_dropdown_content whcom_has_list">
					<ul class="whcom_list_bordered whcom_list_padded whcom_list_hover whcom_list_fancy">
						<li>This is text</li>
						<li class="active">This is text</li>
						<li>This is text</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="whcom_col_sm_3">
			<div class="whcom_dropdown whcom_dropdown_hover">
				<span class="whcom_dropdown_toggle">Dropdown Hover</span>
				<div class="whcom_dropdown_content">
					Drop Down Content
				</div>
			</div>
		</div>
		<div class="whcom_col_sm_3">
			<div class="whcom_dropdown">
				<span class="whcom_dropdown_toggle whcom_button">Dropdown Button</span>
				<div class="whcom_dropdown_content">
					Drop Down Content
				</div>
			</div>
		</div>
	</div>
</div>

<!--Tabs-->
<div class="whcom_main">
	<h2>Tabs Simple</h2>
	<div class="whcom_tabs_container">
		<ul class="whcom_tab_links">
			<li class="whcom_tab_link active" data-tab="tab-1">Fist Tab</li>
			<li class="whcom_tab_link" data-tab="tab-2">Second Tab</li>
			<li class="whcom_tab_link" data-tab="tab-3">Third Tab</li>
		</ul>
		<div id="tab-1" class="whcom_tabs_content active">
			First Tab
		</div>
		<div id="tab-2" class="whcom_tabs_content">
			Second Tab
		</div>
		<div id="tab-3" class="whcom_tabs_content">
			<div class="whcom_tabs_container">
				<ul class="whcom_tab_links">
					<li class="whcom_tab_link whcom_current_tab_link" data-tab="tabq-1">Fist Tab</li>
					<li class="whcom_tab_link" data-tab="tabq-2">Second Tab</li>
					<li class="whcom_tab_link" data-tab="tabq-3">Third Tab</li>
				</ul>
				<div id="tabq-1" class="whcom_tabs_content  whcom_current_tab">
					First Tab
				</div>
				<div id="tabq-2" class="whcom_tabs_content">
					Second Tab
				</div>
				<div id="tabq-3" class="whcom_tabs_content">
					Third Tab
				</div>
			</div>
		</div>
	</div>
	
	<h2>Tabs Fancy</h2>
	<div class="whcom_tabs_container whcom_tabs_fancy">
		<ul class="whcom_tab_links">
			<li class="whcom_tab_link active" data-tab="tab-1">Fist Tab</li>
			<li class="whcom_tab_link" data-tab="tab-2">Second Tab</li>
			<li class="whcom_tab_link" data-tab="tab-3">Third Tab</li>
		</ul>
		<div id="tab-1" class="whcom_tabs_content active">
			First Tab
		</div>
		<div id="tab-2" class="whcom_tabs_content">
			Second Tab
		</div>
		<div id="tab-3" class="whcom_tabs_content">
			<div class="whcom_tabs_container">
				<ul class="whcom_tab_links">
					<li class="whcom_tab_link whcom_current_tab_link" data-tab="tabq-1">Fist Tab</li>
					<li class="whcom_tab_link" data-tab="tabq-2">Second Tab</li>
					<li class="whcom_tab_link" data-tab="tabq-3">Third Tab</li>
				</ul>
				<div id="tabq-1" class="whcom_tabs_content  whcom_current_tab">
					First Tab
				</div>
				<div id="tabq-2" class="whcom_tabs_content">
					Second Tab
				</div>
				<div id="tabq-3" class="whcom_tabs_content">
					Third Tab
				</div>
			</div>
		</div>
	</div>

	<h2>Tabs Vertical</h2>
	<div class="whcom_tabs_container whcom_tabs_vertical">
		<div class="whcom_row">
			<div class="whcom_col_sm_3">
				<ul class="whcom_tab_links whcom_list_fancy whcom_list_padded whcom_list_bordered">
					<li class="whcom_tab_link active" data-tab="tabv-1">Fist Tab</li>
					<li class="whcom_tab_link" data-tab="tabv-2">Second Tab</li>
					<li class="whcom_tab_link" data-tab="tabv-3">Third Tab</li>
				</ul>
				<div class="whcom_col_sm_9">
					<div id="tabv-1" class="whcom_tabs_content active">
						First Tab
					</div>
					<div id="tabv-2" class="whcom_tabs_content">
						Second Tab
					</div>
					<div id="tabv-3" class="whcom_tabs_content">
						<div class="whcom_tabs_container">
							<ul class="whcom_tab_links">
								<li class="whcom_tab_link whcom_current_tab_link" data-tab="tabqv-1">Fist Tab</li>
								<li class="whcom_tab_link" data-tab="tabqv-2">Second Tab</li>
								<li class="whcom_tab_link" data-tab="tabqv-3">Third Tab</li>
							</ul>
							<div id="tabqv-1" class="whcom_tabs_content  whcom_current_tab">
								First Tab
							</div>
							<div id="tabqv-2" class="whcom_tabs_content">
								Second Tab
							</div>
							<div id="tabqv-3" class="whcom_tabs_content">
								Third Tab
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<!--Modal-->
<div class="whcom_main">
	<h2>Modal example</h2>
	<a href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity data-lity-desc="Photo of a flower">Image</a>
	<a href="#inline" data-lity>Inline</a>
	<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>iFrame Youtube</a>
	<a href="//vimeo.com/1084537" data-lity>iFrame Vimeo</a>
	<a href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps</a>

	<div id="inline" style="background:#fff" class="lity-hide">
		Inline content
	</div>
</div>

<div class="whcom_main">
	<h2>Accordion Example</h2>
	<div class="whcom_accordion">
		<div class="whcom_accordion_toggle" data-accordion="acc-1">
			Accordion Toggle One
		</div>
		<div class="whcom_accordion_content" id="acc-1">
			Accordion Content One
		</div>
		<div class="whcom_accordion_toggle" data-accordion="acc-2">
			Accordion Toggle Two
		</div>
		<div class="whcom_accordion_content" id="acc-2">
			Accordion Content Two
		</div>
		<div class="whcom_accordion_toggle" data-accordion="acc-3">
			Accordion Toggle Three
		</div>
		<div class="whcom_accordion_content" id="acc-3">
			Accordion Content Three
		</div>
		<div class="whcom_accordion_toggle" data-accordion="acc-4">
			Accordion Toggle Four
		</div>
		<div class="whcom_accordion_content" id="acc-4">
			Accordion Content Four
		</div>
	</div>
</div>

<div class="whcom_main">
	<h2>Form Elements</h2>
	<div class="whcom_form_field">
		<label for="text">Text</label>
		<input type="text" name="text" id="text">
	</div>
	<div class="whcom_form_field whcom_form_field_horizontal">
		<label for="text2">Text Two</label>
		<input type="text" name="text" id="text2">
	</div>

	<div class="whcom_form_field whcom_form_field_horizontal">
		<label>Check Boxes</label>
		<div class="whcom_checkbox_container">

			<label for="check-1" class="whcom_checkbox"><input type="checkbox" id="check-1" value="1">Check Box 1</label>

			<label for="check-2" class="whcom_checkbox"><input type="checkbox" id="check-2" value="1">Check Box 2</label>

			<label for="check-3" class="whcom_checkbox"><input type="checkbox" id="check-3" value="1">Check Box 3</label>

			<label for="check-4" class="whcom_checkbox"><input type="checkbox" id="check-4" value="1">Check Box 4</label>
		</div>
	</div>

	<div class="whcom_form_field whcom_form_field_horizontal">
		<label>Radio Buttons</label>
		<div class="whcom_radio_container">

			<label for="radio-1" class="whcom_radio"><input type="radio" id="radio-1" value="1" name="radio">radio Box 1</label>

			<label for="radio-2" class="whcom_radio"><input type="radio" id="radio-2" value="1" name="radio">radio Box 2</label>

			<label for="radio-3" class="whcom_radio"><input type="radio" id="radio-3" value="1" name="radio">radio Box 3</label>

			<label for="radio-4" class="whcom_radio"><input type="radio" id="radio-4" value="1" name="radio">radio Box 4</label>
		</div>
	</div>
</div>

<div class="whcom_main">
	<h2>Panels</h2>
	<div class="whcom_row">
		<div class="whcom_col_lg_3">
			<div class="whcom_panel">
				<div class="whcom_panel_header">
					<span>Panel Simple</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
		<div class="whcom_col_lg_3">
			<div class="whcom_panel whcom_panel_primary">
				<div class="whcom_panel_header">
					<span>Panel Primary</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
		<div class="whcom_col_lg_3">
			<div class="whcom_panel whcom_panel_success">
				<div class="whcom_panel_header">
					<span>Panel Success</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
		<div class="whcom_col_lg_3">
			<div class="whcom_panel whcom_panel_info">
				<div class="whcom_panel_header">
					<span>Panel Info</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
		<div class="whcom_col_lg_3">
			<div class="whcom_panel whcom_panel_warning">
				<div class="whcom_panel_header">
					<span>Panel Warning</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
		<div class="whcom_col_lg_3">
			<div class="whcom_panel whcom_panel_danger">
				<div class="whcom_panel_header">
					<span>Panel Danger</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
	</div>
	<h2>Panels Fancy Style 1</h2>
	<div class="whcom_row">
		<div class="whcom_col_lg_3">
			<div class="whcom_panel whcom_panel_fancy_1">
				<div class="whcom_panel_header">
					<span>Panel Simple</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
		<div class="whcom_col_lg_3">
			<div class="whcom_panel whcom_panel_primary whcom_panel_fancy_1">
				<div class="whcom_panel_header">
					<span>Panel Primary</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
		<div class="whcom_col_lg_3">
			<div class="whcom_panel whcom_panel_success whcom_panel_fancy_1">
				<div class="whcom_panel_header">
					<span>Panel Success</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
		<div class="whcom_col_lg_3">
			<div class="whcom_panel whcom_panel_info whcom_panel_fancy_1">
				<div class="whcom_panel_header">
					<span>Panel Info</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
		<div class="whcom_col_lg_3">
			<div class="whcom_panel whcom_panel_warning whcom_panel_fancy_1">
				<div class="whcom_panel_header">
					<span>Panel Warning</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
		<div class="whcom_col_lg_3">
			<div class="whcom_panel whcom_panel_danger whcom_panel_fancy_1">
				<div class="whcom_panel_header">
					<span>Panel Danger</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
	</div>
	<h2>Panels Fancy Style 2</h2>
	<div class="whcom_row">
		<div class="whcom_col_lg_3">
			<div class="whcom_panel  whcom_panel_fancy_2">
				<div class="whcom_panel_header">
					<span>Panel Simple</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
		<div class="whcom_col_lg_3">
			<div class="whcom_panel whcom_panel_primary whcom_panel_fancy_2">
				<div class="whcom_panel_header">
					<span>Panel Primary</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
		<div class="whcom_col_lg_3">
			<div class="whcom_panel whcom_panel_success whcom_panel_fancy_2">
				<div class="whcom_panel_header">
					<span>Panel Success</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
		<div class="whcom_col_lg_3">
			<div class="whcom_panel whcom_panel_info whcom_panel_fancy_2">
				<div class="whcom_panel_header">
					<span>Panel Info</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
		<div class="whcom_col_lg_3">
			<div class="whcom_panel whcom_panel_warning whcom_panel_fancy_2">
				<div class="whcom_panel_header">
					<span>Panel Warning</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
		<div class="whcom_col_lg_3">
			<div class="whcom_panel whcom_panel_danger whcom_panel_fancy_2">
				<div class="whcom_panel_header">
					<span>Panel Danger</span>
				</div>
				<div class="whcom_panel_body">
					Panel Body Content
				</div>
			</div>
		</div>
	</div>


</div>

