bootstrap-v4.0_demo
/
icons-typicons.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="description" content="">
		<meta name="author" content="">

		<!-- Title -->
		<title>Neptune</title>

		<!-- Vendor CSS -->
		<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="vendor/themify-icons/themify-icons.css">
		<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="vendor/animate.css/animate.min.css">
		<link rel="stylesheet" href="vendor/jscrollpane/jquery.jscrollpane.css">
		<link rel="stylesheet" href="vendor/waves/waves.min.css">
		<link rel="stylesheet" href="vendor/chartist/chartist.min.css">
		<link rel="stylesheet" href="vendor/switchery/dist/switchery.min.css">
		<link rel="stylesheet" href="vendor/typicons/src/font/typicons.min.css">

		<!-- Neptune CSS -->
		<link rel="stylesheet" href="css/core.css">

		<!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body class="large-sidebar fixed-sidebar fixed-header">
		<div class="wrapper">

			<!-- Preloader -->
			<div class="preloader"></div>

			<!-- Sidebar -->
			<div class="site-sidebar-overlay"></div>
			<div class="site-sidebar">
				<a class="logo" href="index.html">
					<span class="l-text">Neptune</span>
					<span class="l-icon"></span>
				</a>
				<div class="custom-scroll custom-scroll-light">
					<ul class="sidebar-menu">
						<li class="menu-title m-t-0-5">Navigation</li>
						<li class="with-sub">
							<a href="#" class="waves-effect  waves-light">
								<span class="s-caret"><i class="fa fa-angle-down"></i></span>
								<span class="s-icon"><i class="ti-dashboard"></i></span>
								<span class="s-text">Dashboard</span>
							</a>
							<ul>
								<li><a href="index.html">Dashboard 1</a></li>
								<li><a href="index2.html">Dashboard 2</a></li>
								<li><a href="index3.html">Dashboard 3</a></li>
							</ul>
						</li>
						<li class="with-sub">
							<a href="#" class="waves-effect  waves-light">
								<span class="s-caret"><i class="fa fa-angle-down"></i></span>
								<span class="tag tag-danger">7</span>
								<span class="s-icon"><i class="ti-package"></i></span>
								<span class="s-text">Widgets</span>
							</a>
							<ul>
								<li><a href="widgets-blog.html">Blog</a></li>
								<li><a href="widgets-social.html">Social</a></li>
								<li><a href="widgets-ecommerce.html">Ecommerce</a></li>
								<li><a href="widgets-navigation.html">Navigation</a></li>
								<li><a href="widgets-headers.html">Headers</a></li>
								<li><a href="widgets-footers.html">Footers</a></li>
								<li><a href="widgets-tiles.html">Tiles</a></li>
								<li><a href="widgets-modals.html">Modals</a></li>
							</ul>
						</li>
						<li class="menu-title">Main</li>
						<li class="with-sub">
							<a href="#" class="waves-effect  waves-light">
								<span class="s-caret"><i class="fa fa-angle-down"></i></span>
								<span class="tag tag-purple">12</span>
								<span class="s-icon"><i class="ti-paint-bucket"></i></span>
								<span class="s-text">UI Kit</span>
							</a>
							<ul>
								<li><a href="ui-buttons.html">Buttons</a></li>
								<li><a href="ui-dropdowns.html">Dropdowns</a></li>
								<li><a href="ui-notifications.html">Notifications</a></li>
								<li><a href="ui-cards.html">Cards</a></li>
								<li><a href="ui-navs.html">Navs</a></li>
								<li><a href="ui-progress.html">Progress</a></li>
								<li><a href="ui-modal.html">Modal</a></li>
								<li><a href="ui-carousel.html">Carousel</a></li>
								<li><a href="ui-typography.html">Typography</a></li>
								<li><a href="ui-grid.html">Grid</a></li>
								<li><a href="ui-other.html">Other</a></li>
							</ul>
						</li>
						<li class="with-sub">
							<a href="#" class="waves-effect  waves-light">
								<span class="s-caret"><i class="fa fa-angle-down"></i></span>
								<span class="s-icon"><i class="ti-pencil-alt"></i></span>
								<span class="s-text">Forms</span>
							</a>
							<ul>
								<li><a href="forms-basic.html">Basic Elements</a></li>
								<li><a href="forms-editors.html">Editors</a></li>
								<li><a href="forms-plugins.html">Plugins</a></li>
								<li><a href="forms-pickers.html">Form Pickers</a></li>
								<li><a href="forms-masks.html">Form Masks</a></li>
								<li><a href="forms-wizard.html">Form Wizard</a></li>
								<li><a href="forms-xeditable.html">X-editable</a></li>
								<li><a href="forms-upload.html">File Upload</a></li>
								<li><a href="forms-typeahead.html">Typeahead</a></li>
								<li><a href="forms-range-slider.html">Range Slider</a></li>
							</ul>
						</li>
						<li class="with-sub">
							<a href="#" class="waves-effect  waves-light">
								<span class="s-caret"><i class="fa fa-angle-down"></i></span>
								<span class="s-icon"><i class="ti-menu-alt"></i></span>
								<span class="s-text">Tables</span>
							</a>
							<ul>
								<li><a href="tables-basic.html">Basic Tables</a></li>
								<li><a href="tables-datatable.html">Data Tables</a></li>
								<li><a href="tables-editable.html">Editable Tables</a></li>
								<li><a href="tables-responsive.html">Responsive Tables</a></li>
								<li><a href="tables-jsgrid.html">jsGrid Tables</a></li>
							</ul>
						</li>
						<li class="with-sub">
							<a href="#" class="waves-effect  waves-light">
								<span class="s-caret"><i class="fa fa-angle-down"></i></span>
								<span class="tag tag-success">3</span>
								<span class="s-icon"><i class="ti-gallery"></i></span>
								<span class="s-text">Pages</span>
							</a>
							<ul>
								<li><a href="pages-blank.html">Blank</a></li>
								<li><a href="pages-403.html">Error 403</a></li>
								<li><a href="pages-404.html">Error 404</a></li>
								<li><a href="pages-500.html">Error 500</a></li>
								<li><a href="pages-faq.html">FAQ</a></li>
								<li><a href="pages-invoice.html">Invoice</a></li>
								<li><a href="pages-profile.html">Profile</a></li>
								<li><a href="pages-sign-in.html">Sign In</a></li>
								<li><a href="pages-sign-in2.html">Sign In 2</a></li>
								<li><a href="pages-reset-password.html">Reset Password</a></li>
								<li><a href="pages-sign-up.html">Sign Up</a></li>
								<li><a href="pages-contactform.html">Contact Form</a></li>
							</ul>
						</li>
						<li class="with-sub">
							<a href="#" class="waves-effect  waves-light">
								<span class="s-caret"><i class="fa fa-angle-down"></i></span>
								<span class="s-icon"><i class="ti-view-grid"></i></span>
								<span class="s-text">Apps</span>
							</a>
							<ul>
								<li><a href="apps-inbox.html">Inbox</a></li>
								<li><a href="apps-chat.html">Chat</a></li>
								<li><a href="apps-contacts.html">Contacts</a></li>
							</ul>
						</li>
						<li class="with-sub">
							<a href="#" class="waves-effect  waves-light">
								<span class="s-caret"><i class="fa fa-angle-down"></i></span>
								<span class="s-icon"><i class="ti-star"></i></span>
								<span class="s-text">Icons</span>
							</a>
							<ul>
								<li><a href="icons-fontawesome.html">Font Awesome</a></li>
								<li><a href="icons-material.html">Material Design</a></li>
								<li><a href="icons-themify.html">Themify Icons</a></li>
								<li><a href="icons-weather.html">Weather Icons</a></li>
								<li><a href="icons-ionicons.html">Ionicons</a></li>
								<li><a href="icons-typicons.html">Typicons</a></li>
								<li><a href="icons-pe7.html">Pe7 Icons</a></li>
							</ul>
						</li>
						<li class="with-sub">
							<a href="#" class="waves-effect  waves-light">
								<span class="s-caret"><i class="fa fa-angle-down"></i></span>
								<span class="s-icon"><i class="ti-settings"></i></span>
								<span class="s-text">Utilities</span>
							</a>
							<ul>
								<li><a href="utilities-color.html">Color utilities</a></li>
								<li><a href="utilities-border.html">Border utilities</a></li>
								<li><a href="utilities-other.html">Other utilities</a></li>
							</ul>
						</li>
						<li class="menu-title">More</li>
						<li class="with-sub">
							<a href="#" class="waves-effect  waves-light">
								<span class="s-caret"><i class="fa fa-angle-down"></i></span>
								<span class="s-icon"><i class="ti-location-arrow"></i></span>
								<span class="s-text">Extra</span>
							</a>
							<ul>
								<li><a href="extra-animations.html">Animations</a></li>
								<li><a href="extra-comments.html">Comments</a></li>
								<li><a href="extra-lightbox.html">Lightbox</a></li>
								<li><a href="extra-nestable.html">Nestable</a></li>
								<li><a href="extra-crop.html">Image Crop</a></li>
								<li><a href="extra-loading-progress.html">Loading Progress</a></li>
								<li><a href="extra-prices.html">Prices</a></li>
								<li><a href="extra-timeline.html">Timeline</a></li>
								<li><a href="extra-search.html">Search</a></li>
								<li><a href="extra-scrollbar.html">Scroll Bar</a></li>
							</ul>
						</li>
						<li class="with-sub">
							<a href="#" class="waves-effect  waves-light">
								<span class="s-caret"><i class="fa fa-angle-down"></i></span>
								<span class="s-icon"><i class="ti-new-window"></i></span>
								<span class="s-text">Frontend</span>
							</a>
							<ul>
								<li><a href="frontend.html">Frontend 1</a></li>
								<li><a href="frontend2.html">Frontend 2</a></li>
							</ul>
						</li>
						<li class="with-sub">
							<a href="#" class="waves-effect  waves-light">
								<span class="s-caret"><i class="fa fa-angle-down"></i></span>
								<span class="tag tag-info">6</span>
								<span class="s-icon"><i class="ti-bar-chart-alt"></i></span>
								<span class="s-text">Charts</span>
							</a>
							<ul>
								<li><a href="charts-flot.html">Flot Chart</a></li>
								<li><a href="charts-morris.html">Morris Chart</a></li>
								<li><a href="charts-chartjs.html">Chart.js</a></li>
								<li><a href="charts-peity.html">Peity Chart</a></li>
								<li><a href="charts-sparkline.html">Sparkline Chart</a></li>
								<li><a href="charts-chartist.html">Chartist Chart</a></li>
								<li><a href="charts-easy.html">Easy Pie Chart</a></li>
							</ul>
						</li>
						<li class="with-sub">
							<a href="#" class="waves-effect  waves-light">
								<span class="s-caret"><i class="fa fa-angle-down"></i></span>
								<span class="s-icon"><i class="ti-email"></i></span>
								<span class="s-text">Email Templates</span>
							</a>
							<ul>
								<li><a href="email-basic.html">Basic</a></li>
								<li><a href="email-alert.html">Alert</a></li>
								<li><a href="email-ecommerce.html">Ecommerce</a></li>
							</ul>
						</li>
						<li class="with-sub">
							<a href="#" class="waves-effect  waves-light">
								<span class="s-caret"><i class="fa fa-angle-down"></i></span>
								<span class="s-icon"><i class="ti-location-pin"></i></span>
								<span class="s-text">Maps</span>
							</a>
							<ul>
								<li><a href="maps-vector.html">Vector Map</a></li>
								<li><a href="maps-google.html">Google Map</a></li>
							</ul>
						</li>
						<li>
							<a href="calendar.html" class="waves-effect  waves-light">
								<span class="s-icon"><i class="ti-calendar"></i></span>
								<span class="s-text">Calendar</span>
							</a>
						</li>
						<li class="with-sub compact-hide">
							<a href="javascript: void(0);" class="waves-effect  waves-light">
								<span class="s-caret"><i class="fa fa-angle-down"></i></span>
								<span class="s-icon"><i class="ti-menu"></i></span>
								<span class="s-text">Menu Levels</span>
							</a>
							<ul>
								<li class="with-sub">
									<a href="javascript: void(0);">
										<span class="s-caret"><i class="fa fa-angle-down"></i></span>
										<span class="s-text">Level 1</span>
									</a>
									<ul>
										<li class="with-sub">
											<a href="javascript: void(0);">
												<span class="s-caret"><i class="fa fa-angle-down"></i></span>
												<span class="s-text">Level 1.2</span>
											</a>
											<ul>
												<li class="with-sub">
													<a href="javascript: void(0);">
														<span class="s-caret"><i class="fa fa-angle-down"></i></span>
														<span class="s-text">Level 1.2.3</span>
													</a>
													<ul>
														<li><a href="javascript: void(0);">Level 1.2.3.4</a></li>
														<li><a href="javascript: void(0);">Level 1.2.3.4</a></li>
													</ul>
												</li>
												<li><a href="javascript: void(0);">Level 1.2.3</a></li>
											</ul>
										</li>
										<li><a href="javascript: void(0);">Level 1.2</a></li>
									</ul>
								</li>
								<li><a href="javascript: void(0);">Level 1</a></li>
							</ul>
						</li>
						<li class="menu-title compact-hide">Unique Visitors</li>
						<li class="compact-hide">
							<div id="sidebar-chart" class="chartist-animated chartist-light"></div>
						</li>
						<li class="menu-title compact-hide">Tags</li>
						<li class="compact-hide">
							<a href="javascript: void(0);" class="waves-effect  waves-light">
								<span class="s-icon"><i class="fa fa-circle-o text-danger"></i></span>
								<span class="s-text">Ideas</span>
							</a>
						</li>
						<li class="compact-hide">
							<a href="javascript: void(0);" class="waves-effect  waves-light">
								<span class="s-icon"><i class="fa fa-circle-o text-warning"></i></span>
								<span class="s-text">Projects</span>
							</a>
						</li>
						<li class="compact-hide">
							<a href="documentation.html" class="waves-effect  waves-light">
								<span class="s-icon"><i class="fa fa-circle-o text-primary"></i></span>
								<span class="s-text">Documentation</span>
							</a>
						</li>
					</ul>
				</div>
			</div>

			<!-- Sidebar second -->
			<div class="site-sidebar-second custom-scroll custom-scroll-dark">
				<ul class="nav nav-tabs" role="tablist">
					<li class="nav-item">
						<a class="nav-link active" data-toggle="tab" href="#tab-1" role="tab">Chat</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-toggle="tab" href="#tab-2" role="tab">Activity</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-toggle="tab" href="#tab-3" role="tab">Todo</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-toggle="tab" href="#tab-4" role="tab">Settings</a>
					</li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane active" id="tab-1" role="tabpanel">
						<div class="sidebar-chat animated fadeIn">
							<div class="sidebar-group">
								<h6>Favorites</h6>
								<a class="text-black" href="#">
									<span class="sc-status bg-success"></span>
									<span class="sc-name">John Doe</span>
									<span class="sc-writing"> typing...<i class="ti-pencil"></i></span>
								</a>
								<a class="text-black" href="#">
									<span class="sc-status bg-success"></span>
									<span class="sc-name">Vance Osborn</span>
								</a>
								<a class="text-black" href="#">
									<span class="sc-status bg-danger"></span>
									<span class="sc-name">Wolfe Stevie</span>
									<span class="tag tag-primary">7</span>
								</a>
								<a class="text-black" href="#">
									<span class="sc-status bg-warning"></span>
									<span class="sc-name">Jonathan Mel</span>
								</a>
								<a class="text-black" href="#">
									<span class="sc-status bg-secondary"></span>
									<span class="sc-name">Carleton Josiah</span>
								</a>
							</div>
							<div class="sidebar-group">
								<h6>Work</h6>
								<a class="text-black" href="#">
									<span class="sc-status bg-secondary"></span>
									<span class="sc-name">Larry Hal</span>
								</a>
								<a class="text-black" href="#">
									<span class="sc-status bg-success"></span>
									<span class="sc-name">Ron Carran</span>
									<span class="sc-writing"> typing...<i class="ti-pencil"></i></span>
								</a>
							</div>
							<div class="sidebar-group">
								<h6>Social</h6>
								<a class="text-black" href="#">
									<span class="sc-status bg-success"></span>
									<span class="sc-name">Lucius Skyler</span>
									<span class="tag tag-primary">3</span>
								</a>
								<a class="text-black" href="#">
									<span class="sc-status bg-danger"></span>
									<span class="sc-name">Landon Graham</span>
								</a>
							</div>
						</div>
						<div class="sidebar-chat-window animated fadeIn">
							<div class="scw-header clearfix">
								<a class="text-grey pull-xs-left" href="#"><i class="ti-angle-left"></i> Back</a>
								<div class="pull-xs-right">
									<strong>Jonathan Mel</strong>
									<div class="avatar box-32">
										<img src="img/avatars/5.jpg" alt="">
										<span class="status bg-success top right"></span>
									</div>
								</div>
							</div>
							<div class="scw-item">
								<span>Hello!</span>
							</div>
							<div class="scw-item self">
								<span>Meeting at 16:00 in the conference room. Remember?</span>
							</div>
							<div class="scw-item">
								<span>No problem. Thank's for reminder!</span>
							</div>
							<div class="scw-item self">
								<span>Prepare to be amazed.</span>
							</div>
							<div class="scw-item">
								<span>Good. Can't wait!</span>
							</div>
							<div class="scw-form">
								<form>
									<input class="form-control" type="text" placeholder="Type...">
									<button class="btn btn-secondary" type="button"><i class="ti-angle-right"></i></button>
								</form>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="tab-2" role="tabpanel">
						<div class="sidebar-activity animated fadeIn">
							<div class="notifications">
								<div class="n-item">
									<div class="media">
										<div class="media-left">
											<div class="avatar box-48">
												<img class="b-a-radius-circle" src="img/avatars/1.jpg" alt="">
												<span class="n-icon bg-danger"><i class="ti-pin-alt"></i></span>
											</div>
										</div>
										<div class="media-body">
											<div class="n-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">uploaded <a class="text-black" href="#">monthly report</a></div>
											<div class="text-muted font-90">12 minutes ago</div>
										</div>
									</div>
								</div>
								<div class="n-item">
									<div class="media">
										<div class="media-left">
											<div class="avatar box-48">
												<img class="b-a-radius-circle" src="img/avatars/3.jpg" alt="">
												<span class="n-icon bg-success"><i class="ti-comment"></i></span>
											</div>
										</div>
										<div class="media-body">
											<div class="n-text"><a class="text-black" href="#">Vance Osborn</a> <span class="text-muted">commented </span> <a class="text-black" href="#">Project</a></div>
											<div class="n-comment m-y-0-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
											<div class="text-muted font-90">3 hours ago</div>
										</div>
									</div>
								</div>
								<div class="n-item">
									<div class="media">
										<div class="media-left">
											<div class="avatar box-48">
												<img class="b-a-radius-circle" src="img/avatars/2.jpg" alt="">
												<span class="n-icon bg-danger"><i class="ti-email"></i></span>
											</div>
										</div>
										<div class="media-body">
											<div class="n-text"><a class="text-black" href="#">Ron Carran</a> <span class="text-muted">send you files</span></div>
											<div class="row row-sm m-y-0-5">
												<div class="col-xs-4">
													<img class="img-fluid" src="img/photos-1/1.jpg" alt="">
												</div>
												<div class="col-xs-4">
													<img class="img-fluid" src="img/photos-1/2.jpg" alt="">
												</div>
												<div class="col-xs-4">
													<img class="img-fluid" src="img/photos-1/3.jpg" alt="">
												</div>
											</div>
											<div class="text-muted font-90">30 minutes ago</div>
										</div>
									</div>
								</div>
								<div class="n-item">
									<div class="media">
										<div class="media-left">
											<div class="avatar box-48">
												<img class="b-a-radius-circle" src="img/avatars/4.jpg" alt="">
												<span class="n-icon bg-primary"><i class="ti-plus"></i></span>
											</div>
										</div>
										<div class="media-body">
											<div class="n-text"><a class="text-black" href="#">Larry Hal</a> <span class="text-muted">invited you to </span><a class="text-black" href="#">Project</a></div>
											<div class="text-muted font-90">10:58</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="tab-3" role="tabpanel">
						<div class="sidebar-todo animated fadeIn">
							<div class="sidebar-group">
								<h6>Important</h6>
								<div class="st-item">
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input">
										<span class="custom-control-indicator"></span>
										<span class="custom-control-description">Mock up</span>
									</label>
								</div>
								<div class="st-item">
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input" checked>
										<span class="custom-control-indicator"></span>
										<span class="custom-control-description">Prototype iPhone</span>
									</label>
								</div>
								<div class="st-item">
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input">
										<span class="custom-control-indicator"></span>
										<span class="custom-control-description">Build final version</span>
									</label>
								</div>
								<div class="st-item">
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input">
										<span class="custom-control-indicator"></span>
										<span class="custom-control-description">Approval docs</span>
									</label>
								</div>
							</div>
							<div class="sidebar-group">
								<h6>Secondary</h6>
								<div class="st-item">
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input" checked>
										<span class="custom-control-indicator"></span>
										<span class="custom-control-description">Website redesign</span>
									</label>
								</div>
								<div class="st-item">
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input" checked>
										<span class="custom-control-indicator"></span>
										<span class="custom-control-description">Skype call</span>
									</label>
								</div>
								<div class="st-item">
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input">
										<span class="custom-control-indicator"></span>
										<span class="custom-control-description">Blog post</span>
									</label>
								</div>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="tab-4" role="tabpanel">
						<div class="sidebar-settings animated fadeIn">
							<div class="sidebar-group">
								<h6>Main</h6>
								<div class="ss-item">
									<div class="text-truncate">Anyone can register</div>
									<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9" checked></div>
								</div>
								<div class="ss-item">
									<div class="text-truncate">Allow commenting</div>
									<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9"></div>
								</div>
								<div class="ss-item">
									<div class="text-truncate">Allow deleting</div>
									<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9"></div>
								</div>
							</div>
							<div class="sidebar-group">
								<h6>Notificatiоns</h6>
								<div class="ss-item">
									<div class="text-truncate">Commits</div>
									<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9"></div>
								</div>
								<div class="ss-item">
									<div class="text-truncate">Messages</div>
									<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9" checked></div>
								</div>
							</div>
							<div class="sidebar-group">
								<h6>Security</h6>
								<div class="ss-item">
									<div class="text-truncate">Daily backup</div>
									<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9" checked></div>
								</div>
								<div class="ss-item">
									<div class="text-truncate">API Access</div>
									<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9" checked></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Template options -->
			<div class="template-options custom-scroll custom-scroll-dark">
				<div class="to-toggle"><i class="ti-settings"></i></div>
				<div class="to-content">
					<h6>Layouts</h6>
					<div class="row m-b-2 text-xs-center">
						<div class="col-xs-6 m-b-2">
							<a href="index.html">
								<img src="img/layouts/1.png" class="img-fluid">
							</a>
							<div class="text-muted">Default</div>
						</div>
						<div class="col-xs-6 m-b-2">
							<label>
								<input name="compact-sidebar" type="checkbox">
								<div class="to-icon"><i class="ti-check"></i></div>
								<img src="img/layouts/2.png" class="img-fluid">
							</label>
							<div class="text-muted">Compact Sidebar</div>
						</div>
						<div class="col-xs-6 m-b-2">
							<label>
								<input name="fixed-header" type="checkbox" checked>
								<div class="to-icon"><i class="ti-check"></i></div>
								<img src="img/layouts/3.png" class="img-fluid">
							</label>
							<div class="text-muted">Fixed Header</div>
						</div>
						<div class="col-xs-6 m-b-2">
							<label>
								<input name="boxed-wrapper" type="checkbox">
								<div class="to-icon"><i class="ti-check"></i></div>
								<img src="img/layouts/4.png" class="img-fluid">
							</label>
							<div class="text-muted">Boxed Wrapper</div>
						</div>
					</div>
					<h6>Skins</h6>
					<div class="row">
						<div class="col-xs-3 m-b-2">
							<label>
								<input name="skin" value="skin-default" type="radio" checked>
								<div class="to-icon"><i class="ti-check"></i></div>
								<div class="to-skin">
									<span class="skin-first bg-white"></span>
									<span class="skin-second skin-dark-blue"></span>
									<span class="skin-third bg-info"></span>
								</div>
							</label>
						</div>
						<div class="col-xs-3 m-b-2">
							<label>
								<input name="skin" value="skin-1" type="radio">
								<div class="to-icon"><i class="ti-check"></i></div>
								<div class="to-skin">
									<span class="skin-first skin-dark-blue-2"></span>
									<span class="skin-second bg-white"></span>
									<span class="skin-third bg-danger"></span>
								</div>
							</label>
						</div>
						<div class="col-xs-3 m-b-2">
							<label>
								<input name="skin" value="skin-2" type="radio">
								<div class="to-icon"><i class="ti-check"></i></div>
								<div class="to-skin">
									<span class="skin-first bg-white"></span>
									<span class="skin-second bg-black"></span>
									<span class="skin-third bg-success"></span>
								</div>
							</label>
						</div>
						<div class="col-xs-3 m-b-2">
							<label>
								<input name="skin" value="skin-3" type="radio">
								<div class="to-icon"><i class="ti-check"></i></div>
								<div class="to-skin">
									<span class="skin-first bg-white"></span>
									<span class="skin-second skin-grey"></span>
									<span class="skin-third bg-purple"></span>
								</div>
							</label>
						</div>
						<div class="col-xs-3 m-b-2">
							<label>
								<input name="skin" value="skin-4" type="radio">
								<div class="to-icon"><i class="ti-check"></i></div>
								<div class="to-skin">
									<span class="skin-first skin-dark-blue"></span>
									<span class="skin-second skin-dark-blue-2"></span>
									<span class="skin-third bg-warning"></span>
								</div>
							</label>
						</div>
						<div class="col-xs-3 m-b-2">
							<label>
								<input name="skin" value="skin-5" type="radio">
								<div class="to-icon"><i class="ti-check"></i></div>
								<div class="to-skin">
									<span class="skin-first bg-primary"></span>
									<span class="skin-second bg-white"></span>
									<span class="skin-third bg-primary"></span>
								</div>
							</label>
						</div>
					</div>
				</div>
			</div>

			<!-- Header -->
			<div class="site-header">
				<nav class="navbar navbar-light">
					<ul class="nav navbar-nav">
						<li class="nav-item m-r-1 hidden-lg-up">
							<a class="nav-link collapse-button" href="#">
								<i class="ti-menu"></i>
							</a>
						</li>
					</ul>
					<ul class="nav navbar-nav pull-xs-right">
						<li class="nav-item dropdown">
							<a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
								<i class="ti-check"></i>
								<span class="tag tag-success top">3</span>
							</a>
							<div class="dropdown-tasks dropdown-menu dropdown-menu-right animated slideInUp">
								<div class="t-item">
									<div class="m-b-0-5">
										<a class="text-black" href="#">First Task</a>
										<span class="pull-xs-right text-muted">75%</span>
									</div>
									<progress class="progress progress-danger progress-sm" value="75" max="100">100%</progress>
									<span class="avatar box-32">
										<img src="img/avatars/2.jpg" alt="">
									</span>
									<a class="text-black" href="#">John Doe</a>, <span class="text-muted">5 min ago</span>
								</div>
								<div class="t-item">
									<div class="m-b-0-5">
										<a class="text-black" href="#">Second Task</a>
										<span class="pull-xs-right text-muted">40%</span>
									</div>
									<progress class="progress progress-purple progress-sm" value="40" max="100">100%</progress>
									<span class="avatar box-32">
										<img src="img/avatars/3.jpg" alt="">
									</span>
									<a class="text-black" href="#">John Doe</a>, <span class="text-muted">15:07</span>
								</div>
								<div class="t-item">
									<div class="m-b-0-5">
										<a class="text-black" href="#">Third Task</a>
										<span class="pull-xs-right text-muted">100%</span>
									</div>
									<progress class="progress progress-warning progress-sm" value="100" max="100">100%</progress>
									<span class="avatar box-32">
										<img src="img/avatars/4.jpg" alt="">
									</span>
									<a class="text-black" href="#">John Doe</a>, <span class="text-muted">yesterday</span>
								</div>
								<div class="t-item">
									<div class="m-b-0-5">
										<a class="text-black" href="#">Fourth Task</a>
										<span class="pull-xs-right text-muted">60%</span>
									</div>
									<progress class="progress progress-success progress-sm" value="60" max="100">100%</progress>
									<span class="avatar box-32">
										<img src="img/avatars/5.jpg" alt="">
									</span>
									<a class="text-black" href="#">John Doe</a>, <span class="text-muted">3 days ago</span>
								</div>
								<a class="t-item text-black text-xs-center" href="#">
									<strong>View all tasks</strong>
								</a>
							</div>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
								<i class="ti-bell"></i>
								<span class="tag tag-danger top">12</span>
							</a>
							<div class="dropdown-messages dropdown-tasks dropdown-menu dropdown-menu-right animated slideInUp">
								<div class="m-item">
									<div class="mi-icon bg-info"><i class="ti-comment"></i></div>
									<div class="mi-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">commented post</span> <a class="text-black" href="#">Lorem ipsum dolor</a></div>
									<div class="mi-time">5 min ago</div>
								</div>
								<div class="m-item">
									<div class="mi-icon bg-danger"><i class="ti-heart"></i></div>
									<div class="mi-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">liked post</span> <a class="text-black" href="#">Lorem ipsum dolor</a></div>
									<div class="mi-time">15:07</div>
								</div>
								<div class="m-item">
									<div class="mi-icon bg-purple"><i class="ti-user"></i></div>
									<div class="mi-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">followed</span> <a class="text-black" href="#">Kate Doe</a></div>
									<div class="mi-time">yesterday</div>
								</div>
								<div class="m-item">
									<div class="mi-icon bg-danger"><i class="ti-heart"></i></div>
									<div class="mi-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">liked post</span> <a class="text-black" href="#">Lorem ipsum dolor</a></div>
									<div class="mi-time">3 days ago</div>
								</div>
								<a class="t-item text-black text-xs-center" href="#">
									<strong>View all notifications</strong>
								</a>
							</div>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
								<div class="avatar box-32">
									<img src="img/avatars/1.jpg" alt="">
								</div>
							</a>
							<div class="dropdown-menu dropdown-menu-right animated flipInY">
								<a class="dropdown-item" href="#">
									<i class="ti-email m-r-0-5"></i> Inbox
								</a>
								<a class="dropdown-item" href="#">
									<i class="ti-user m-r-0-5"></i> Profile
								</a>
								<a class="dropdown-item" href="#">
									<i class="ti-settings m-r-0-5"></i> Settings
								</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#"><i class="ti-help m-r-0-5"></i> Help</a>
								<a class="dropdown-item" href="#"><i class="ti-power-off m-r-0-5"></i> Sign out</a>
							</div>
						</li>
						<li class="nav-item hidden-md-up">
							<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapse-1">
								<i class="ti-more"></i>
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link site-sidebar-second-toggle" href="#" data-toggle="collapse">
								<i class="ti-arrow-left"></i>
							</a>
						</li>
					</ul>
					<div class="navbar-toggleable-sm collapse" id="collapse-1">
						<div class="header-form pull-md-left m-md-r-1">
							<form>
								<input type="text" class="form-control b-a" placeholder="Search for...">
								<button type="submit" class="btn bg-white b-a-0">
									<i class="ti-search"></i>
								</button>
							</form>
						</div>
						<ul class="nav navbar-nav">
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
									Add
								</a>
								<div class="dropdown-menu animated flipInY">
									<a class="dropdown-item" href="#">
										Link
										<span class="tag tag-primary">3</span>
									</a>
									<a class="dropdown-item" href="#">Another link</a>
									<a class="dropdown-item" href="#">
										Something else here
										<span class="tag tag-success">7</span>
									</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="#">Separated link</a>
								</div>
							</li>
						</ul>
					</div>
				</nav>
			</div>

			<div class="site-content">
				<!-- Content -->
				<div class="content-area p-y-1">
					<div class="container-fluid">
						<h4>Typicons</h4>
						<ol class="breadcrumb no-bg m-b-1">
							<li class="breadcrumb-item"><a href="#">Home</a></li>
							<li class="breadcrumb-item"><a href="#">Icons</a></li>
							<li class="breadcrumb-item active">Typicons</li>
						</ol>
						<div class="box box-block bg-white">
							<div class="row icon-area">
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-chart-pie-outline"></i> typcn typcn-chart-pie-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-chart-pie"></i> typcn typcn-chart-pie
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-chevron-left-outline"></i> typcn typcn-chevron-left-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-chevron-left"></i> typcn typcn-chevron-left
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-chevron-right-outline"></i> typcn typcn-chevron-right-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-chevron-right"></i> typcn typcn-chevron-right
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-clipboard"></i> typcn typcn-clipboard
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-cloud-storage"></i> typcn typcn-cloud-storage
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-cloud-storage-outline"></i> typcn typcn-cloud-storage-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-code-outline"></i> typcn typcn-code-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-code"></i> typcn typcn-code
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-coffee"></i> typcn typcn-coffee
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-cog-outline"></i> typcn typcn-cog-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-cog"></i> typcn typcn-cog
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-compass"></i> typcn typcn-compass
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-contacts"></i> typcn typcn-contacts
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-credit-card"></i> typcn typcn-credit-card
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-css3"></i> typcn typcn-css3
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-database"></i> typcn typcn-database
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-delete-outline"></i> typcn typcn-delete-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-delete"></i> typcn typcn-delete
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-device-desktop"></i> typcn typcn-device-desktop
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-device-laptop"></i> typcn typcn-device-laptop
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-device-phone"></i> typcn typcn-device-phone
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-device-tablet"></i> typcn typcn-device-tablet
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-directions"></i> typcn typcn-directions
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-divide-outline"></i> typcn typcn-divide-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-divide"></i> typcn typcn-divide
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-document-add"></i> typcn typcn-document-add
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-document-delete"></i> typcn typcn-document-delete
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-document-text"></i> typcn typcn-document-text
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-document"></i> typcn typcn-document
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-download-outline"></i> typcn typcn-download-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-download"></i> typcn typcn-download
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-dropbox"></i> typcn typcn-dropbox
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-edit"></i> typcn typcn-edit
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-eject-outline"></i> typcn typcn-eject-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-eject"></i> typcn typcn-eject
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-equals-outline"></i> typcn typcn-equals-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-equals"></i> typcn typcn-equals
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-export-outline"></i> typcn typcn-export-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-export"></i> typcn typcn-export
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-eye-outline"></i> typcn typcn-eye-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-eye"></i> typcn typcn-eye
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-feather"></i> typcn typcn-feather
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-film"></i> typcn typcn-film
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-filter"></i> typcn typcn-filter
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-flag-outline"></i> typcn typcn-flag-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-flag"></i> typcn typcn-flag
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-flash-outline"></i> typcn typcn-flash-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-flash"></i> typcn typcn-flash
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-flow-children"></i> typcn typcn-flow-children
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-flow-merge"></i> typcn typcn-flow-merge
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-flow-parallel"></i> typcn typcn-flow-parallel
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-flow-switch"></i> typcn typcn-flow-switch
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-folder-add"></i> typcn typcn-folder-add
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-folder-delete"></i> typcn typcn-folder-delete
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-folder-open"></i> typcn typcn-folder-open
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-folder"></i> typcn typcn-folder
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-gift"></i> typcn typcn-gift
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-globe-outline"></i> typcn typcn-globe-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-globe"></i> typcn typcn-globe
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-group-outline"></i> typcn typcn-group-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-group"></i> typcn typcn-group
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-headphones"></i> typcn typcn-headphones
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-heart-full-outline"></i> typcn typcn-heart-full-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-heart-half-outline"></i> typcn typcn-heart-half-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-heart-outline"></i> typcn typcn-heart-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-heart"></i> typcn typcn-heart
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-home-outline"></i> typcn typcn-home-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-home"></i> typcn typcn-home
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-html5"></i> typcn typcn-html5
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-image-outline"></i> typcn typcn-image-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-image"></i> typcn typcn-image
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-infinity-outline"></i> typcn typcn-infinity-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-infinity"></i> typcn typcn-infinity
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-info-large-outline"></i> typcn typcn-info-large-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-info-large"></i> typcn typcn-info-large
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-info-outline"></i> typcn typcn-info-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-info"></i> typcn typcn-info
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-input-checked-outline"></i> typcn typcn-input-checked-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-input-checked"></i> typcn typcn-input-checked
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-key-outline"></i> typcn typcn-key-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-key"></i> typcn typcn-key
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-keyboard"></i> typcn typcn-keyboard
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-leaf"></i> typcn typcn-leaf
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-lightbulb"></i> typcn typcn-lightbulb
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-link-outline"></i> typcn typcn-link-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-link"></i> typcn typcn-link
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-location-arrow-outline"></i> typcn typcn-location-arrow-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-location-arrow"></i> typcn typcn-location-arrow
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-location-outline"></i> typcn typcn-location-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-location"></i> typcn typcn-location
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-lock-closed-outline"></i> typcn typcn-lock-closed-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-lock-closed"></i> typcn typcn-lock-closed
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-lock-open-outline"></i> typcn typcn-lock-open-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-lock-open"></i> typcn typcn-lock-open
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-mail"></i> typcn typcn-mail
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-map"></i> typcn typcn-map
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-media-eject-outline"></i> typcn typcn-media-eject-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-media-eject"></i> typcn typcn-media-eject
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-media-fast-forward-outline"></i> typcn typcn-media-fast-forward-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-media-fast-forward"></i> typcn typcn-media-fast-forward
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-media-pause-outline"></i> typcn typcn-media-pause-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-media-pause"></i> typcn typcn-media-pause
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-media-play-outline"></i> typcn typcn-media-play-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-media-play-reverse-outline"></i> typcn typcn-media-play-reverse-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-media-play-reverse"></i> typcn typcn-media-play-reverse
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-media-play"></i> typcn typcn-media-play
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-media-record-outline"></i> typcn typcn-media-record-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-media-record"></i> typcn typcn-media-record
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-media-rewind-outline"></i> typcn typcn-media-rewind-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-media-rewind"></i> typcn typcn-media-rewind
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-media-stop-outline"></i> typcn typcn-media-stop-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-media-stop"></i> typcn typcn-media-stop
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-message-typing"></i> typcn typcn-message-typing
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-message"></i> typcn typcn-message
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-messages"></i> typcn typcn-messages
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-microphone-outline"></i> typcn typcn-microphone-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-microphone"></i> typcn typcn-microphone
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-minus-outline"></i> typcn typcn-minus-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-minus"></i> typcn typcn-minus
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-mortar-board"></i> typcn typcn-mortar-board
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-news"></i> typcn typcn-news
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-notes-outline"></i> typcn typcn-notes-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-notes"></i> typcn typcn-notes
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-pen"></i> typcn typcn-pen
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-pencil"></i> typcn typcn-pencil
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-phone-outline"></i> typcn typcn-phone-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-phone"></i> typcn typcn-phone
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-pi-outline"></i> typcn typcn-pi-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-pi"></i> typcn typcn-pi
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-pin-outline"></i> typcn typcn-pin-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-pin"></i> typcn typcn-pin
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-pipette"></i> typcn typcn-pipette
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-plane-outline"></i> typcn typcn-plane-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-plane"></i> typcn typcn-plane
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-plug"></i> typcn typcn-plug
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-plus-outline"></i> typcn typcn-plus-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-plus"></i> typcn typcn-plus
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-point-of-interest-outline"></i> typcn typcn-point-of-interest-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-point-of-interest"></i> typcn typcn-point-of-interest
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-power-outline"></i> typcn typcn-power-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-power"></i> typcn typcn-power
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-printer"></i> typcn typcn-printer
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-puzzle-outline"></i> typcn typcn-puzzle-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-puzzle"></i> typcn typcn-puzzle
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-radar-outline"></i> typcn typcn-radar-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-radar"></i> typcn typcn-radar
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-refresh-outline"></i> typcn typcn-refresh-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-refresh"></i> typcn typcn-refresh
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-rss-outline"></i> typcn typcn-rss-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-rss"></i> typcn typcn-rss
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-scissors-outline"></i> typcn typcn-scissors-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-scissors"></i> typcn typcn-scissors
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-shopping-bag"></i> typcn typcn-shopping-bag
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-shopping-cart"></i> typcn typcn-shopping-cart
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-at-circular"></i> typcn typcn-social-at-circular
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-dribbble-circular"></i> typcn typcn-social-dribbble-circular
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-dribbble"></i> typcn typcn-social-dribbble
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-facebook-circular"></i> typcn typcn-social-facebook-circular
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-facebook"></i> typcn typcn-social-facebook
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-flickr-circular"></i> typcn typcn-social-flickr-circular
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-flickr"></i> typcn typcn-social-flickr
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-github-circular"></i> typcn typcn-social-github-circular
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-github"></i> typcn typcn-social-github
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-google-plus-circular"></i> typcn typcn-social-google-plus-circular
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-google-plus"></i> typcn typcn-social-google-plus
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-instagram-circular"></i> typcn typcn-social-instagram-circular
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-instagram"></i> typcn typcn-social-instagram
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-last-fm-circular"></i> typcn typcn-social-last-fm-circular
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-last-fm"></i> typcn typcn-social-last-fm
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-linkedin-circular"></i> typcn typcn-social-linkedin-circular
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-linkedin"></i> typcn typcn-social-linkedin
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-pinterest-circular"></i> typcn typcn-social-pinterest-circular
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-pinterest"></i> typcn typcn-social-pinterest
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-skype-outline"></i> typcn typcn-social-skype-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-skype"></i> typcn typcn-social-skype
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-tumbler-circular"></i> typcn typcn-social-tumbler-circular
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-tumbler"></i> typcn typcn-social-tumbler
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-twitter-circular"></i> typcn typcn-social-twitter-circular
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-twitter"></i> typcn typcn-social-twitter
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-vimeo-circular"></i> typcn typcn-social-vimeo-circular
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-vimeo"></i> typcn typcn-social-vimeo
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-youtube-circular"></i> typcn typcn-social-youtube-circular
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-social-youtube"></i> typcn typcn-social-youtube
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-sort-alphabetically-outline"></i> typcn typcn-sort-alphabetically-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-sort-alphabetically"></i> typcn typcn-sort-alphabetically
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-sort-numerically-outline"></i> typcn typcn-sort-numerically-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-sort-numerically"></i> typcn typcn-sort-numerically
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-spanner-outline"></i> typcn typcn-spanner-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-spanner"></i> typcn typcn-spanner
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-spiral"></i> typcn typcn-spiral
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-star-full-outline"></i> typcn typcn-star-full-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-star-half-outline"></i> typcn typcn-star-half-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-star-half"></i> typcn typcn-star-half
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-star-outline"></i> typcn typcn-star-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-star"></i> typcn typcn-star
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-starburst-outline"></i> typcn typcn-starburst-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-starburst"></i> typcn typcn-starburst
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-stopwatch"></i> typcn typcn-stopwatch
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-support"></i> typcn typcn-support
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-tabs-outline"></i> typcn typcn-tabs-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-tag"></i> typcn typcn-tag
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-tags"></i> typcn typcn-tags
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-th-large-outline"></i> typcn typcn-th-large-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-th-large"></i> typcn typcn-th-large
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-th-list-outline"></i> typcn typcn-th-list-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-th-list"></i> typcn typcn-th-list
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-th-menu-outline"></i> typcn typcn-th-menu-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-th-menu"></i> typcn typcn-th-menu
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-th-small-outline"></i> typcn typcn-th-small-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-th-small"></i> typcn typcn-th-small
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-thermometer"></i> typcn typcn-thermometer
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-thumbs-down"></i> typcn typcn-thumbs-down
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-thumbs-ok"></i> typcn typcn-thumbs-ok
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-thumbs-up"></i> typcn typcn-thumbs-up
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-tick-outline"></i> typcn typcn-tick-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-tick"></i> typcn typcn-tick
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-ticket"></i> typcn typcn-ticket
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-time"></i> typcn typcn-time
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-times-outline"></i> typcn typcn-times-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-times"></i> typcn typcn-times
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-trash"></i> typcn typcn-trash
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-tree"></i> typcn typcn-tree
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-upload-outline"></i> typcn typcn-upload-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-upload"></i> typcn typcn-upload
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-user-add-outline"></i> typcn typcn-user-add-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-user-add"></i> typcn typcn-user-add
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-user-delete-outline"></i> typcn typcn-user-delete-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-user-delete"></i> typcn typcn-user-delete
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-user-outline"></i> typcn typcn-user-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-user"></i> typcn typcn-user
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-vendor-android"></i> typcn typcn-vendor-android
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-vendor-apple"></i> typcn typcn-vendor-apple
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-vendor-microsoft"></i> typcn typcn-vendor-microsoft
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-video-outline"></i> typcn typcn-video-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-video"></i> typcn typcn-video
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-volume-down"></i> typcn typcn-volume-down
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-volume-mute"></i> typcn typcn-volume-mute
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-volume-up"></i> typcn typcn-volume-up
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-volume"></i> typcn typcn-volume
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-warning-outline"></i> typcn typcn-warning-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-warning"></i> typcn typcn-warning
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-watch"></i> typcn typcn-watch
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-waves-outline"></i> typcn typcn-waves-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-waves"></i> typcn typcn-waves
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-weather-cloudy"></i> typcn typcn-weather-cloudy
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-weather-downpour"></i> typcn typcn-weather-downpour
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-weather-night"></i> typcn typcn-weather-night
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-weather-partly-sunny"></i> typcn typcn-weather-partly-sunny
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-weather-shower"></i> typcn typcn-weather-shower
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-weather-snow"></i> typcn typcn-weather-snow
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-weather-stormy"></i> typcn typcn-weather-stormy
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-weather-sunny"></i> typcn typcn-weather-sunny
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-weather-windy-cloudy"></i> typcn typcn-weather-windy-cloudy
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-weather-windy"></i> typcn typcn-weather-windy
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-wi-fi-outline"></i> typcn typcn-wi-fi-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-wi-fi"></i> typcn typcn-wi-fi
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-wine"></i> typcn typcn-wine
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-world-outline"></i> typcn typcn-world-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-world"></i> typcn typcn-world
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-zoom-in-outline"></i> typcn typcn-zoom-in-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-zoom-in"></i> typcn typcn-zoom-in
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-zoom-out-outline"></i> typcn typcn-zoom-out-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-zoom-out"></i> typcn typcn-zoom-out
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-zoom-outline"></i> typcn typcn-zoom-outline
							    </div>
							    <div class="col-md-3 col-sm-4 col-xs-6">
							        <i class="typcn typcn-zoom"></i> typcn typcn-zoom
							    </div>
							</div>
						</div>
					</div>
				</div>
				<!-- Footer -->
				<footer class="footer">
					<div class="container-fluid">
						2016 © Neptune
					</div>
				</footer>
			</div>

		</div>

		<!-- Vendor JS -->
		<script type="text/javascript" src="vendor/jquery/jquery-1.12.3.min.js"></script>
		<script type="text/javascript" src="vendor/tether/js/tether.min.js"></script>
		<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="vendor/detectmobilebrowser/detectmobilebrowser.js"></script>
		<script type="text/javascript" src="vendor/jscrollpane/jquery.mousewheel.js"></script>
		<script type="text/javascript" src="vendor/jscrollpane/mwheelIntent.js"></script>
		<script type="text/javascript" src="vendor/jscrollpane/jquery.jscrollpane.min.js"></script>
		<script type="text/javascript" src="vendor/waves/waves.min.js"></script>
		<script type="text/javascript" src="vendor/chartist/chartist.min.js"></script>
		<script type="text/javascript" src="vendor/switchery/dist/switchery.min.js"></script>

		<!-- Neptune JS -->
		<script type="text/javascript" src="js/app.js"></script>
		<script type="text/javascript" src="js/demo.js"></script>
	</body>
</html>