<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Trizzy</title>

<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- BOOTSTRAP CSS
================================================== -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- BOOTSTRAP files
================================================== -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/colors/green.css" id="colors">
 
<!--[if lt IE 9]>
	<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body class="boxed">
<div id="wrapper">


<!-- Top Bar
================================================== -->
<div id="top-bar">
	<div class="container">

		<!-- Top Bar Menu -->
		<div class="row">
			<div class="col-md-6">
				<ul class="top-bar-menu">
					<li><i class="fa fa-phone"></i> (564) 123 4567</li>
					<li><i class="fa fa-envelope"></i> <a href="#">mail@example.com</a></li>
					<li>
						<div class="top-bar-dropdown">
							<span>English</span>
							<ul class="options">
								<li><div class="arrow"></div></li>
								<li><a href="#">English</a></li>
								<li><a href="#">Polish</a></li>
								<li><a href="#">Deutsch</a></li>
							</ul>
						</div>
					</li>
					<li>
						<div class="top-bar-dropdown">
							<span>USD</span>
							<ul class="options">
								<li><div class="arrow"></div></li>
								<li><a href="#">USD</a></li>
								<li><a href="#">PLN</a></li>
								<li><a href="#">EUR</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
			

			<!-- Social Icons -->
			<div class="col-6">
				<ul class="social-icons">
					<li><a class="facebook" href="#"><i class="icon-facebook"></i></a></li>
					<li><a class="twitter" href="#"><i class="icon-twitter"></i></a></li>
					<li><a class="dribbble" href="#"><i class="icon-dribbble"></i></a></li>
					<li><a class="gplus" href="#"><i class="icon-gplus"></i></a></li>
					<li><a class="pinterest" href="#"><i class="icon-pinterest"></i></a></li>
				</ul>
			</div>
		</div>
	</div>
</div>

<div class="clearfix"></div>


<!-- Header
================================================== -->
<div class="container">

	<div class="row justify-content-center"> <!--align-items-center-->
	<!-- Logo -->
	
		<div class="col-md-4 col-sm-10 col-12">
			<div id="logo">
				<h1><a href="index.html"><img src="images/logo.png" alt="Trizzy" /></a></h1>
			</div>
		</div>


		<div class="col-md-8 col-sm-10 col-12">
			<!-- Additional Menu -->
			<div class="row">
				<div class="col-12">
					<div id="additional-menu">
						<ul>
							<li><a href="shopping-cart.html">Shopping Cart</a></li>
							<li><a href="wishlist.html">WishList <span>(2)</span></a></li>
							<li><a href="checkout-billing-details.html">Checkout</a></li>
							<li><a href="my-account.html">My Account</a></li>
						</ul>
					</div>
				</div>
			</div>

			<!-- Shopping Cart -->
			<div class="row">
				<div class="col-12">

					<div id="cart">

						<!-- Button -->
						<div class="cart-btn">
							<a href="#" class="button adc">$178.00</a>
						</div>

						<div class="cart-list">

						<div class="arrow"></div>

							<div class="cart-amount">
								<span>2 items in the shopping cart</span>
							</div>

								<ul>
									<li>
										<a href="#"><img src="images/small_product_list_08.jpg" alt="" /></a>
										<a href="#">Converse All Star Trainers</a>
										<span>1 x $79.00</span>
										<div class="clearfix"></div>
									</li>

									<li>
										<a href="#"><img src="images/small_product_list_09.jpg" alt="" /></a>
										<a href="#">Tommy Hilfiger <br /> Shirt Beat</a>
										<span>1 x $99.00</span>
										<div class="clearfix"></div>
									</li>
								</ul>

							<div class="cart-buttons button">
								<a href="shopping-cart.html" class="view-cart" ><span data-hover="View Cart"><span>View Cart</span></span></a>
								<a href="checkout-billing-details.html" class="checkout"><span data-hover="Checkout">Checkout</span></a>
							</div>
							<div class="clearfix">

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

					<!-- Search -->
					<nav class="top-search">
						<form action="#" method="get">
							<button><i class="fa fa-search"></i></button>
							<input class="search-field" type="text" placeholder="Search" value=""/>
						</form>
					</nav>

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


<!-- Navigation
================================================== -->
<div class="container" style="padding:0;">
	<div class="">
		
		<div class="row justify-content-center">
			<div class="col-sm-10 col-12" style="padding: 0 27px 0 28px;">
				<a href="#menu" class="menu-trigger"><i class="fa fa-bars"></i> Menu</a>
			</div>
		</div>

		<nav id="navigation">
			<ul class="menu" id="responsive">

				<li><a href="index.html" class="current homepage" id="current">Home</a></li>

				<li class="dropdown">
					<a href="#">Shop</a>
					<ul>
						<li><a href="shop-with-sidebar.html">Shop With Sidebar</a></li>
						<li><a href="shop-with-adv-search.html">Shop With Adv. Search</a></li>
						<li><a href="shop-full-width.html">Shop Full Width</a></li>
						<li><a href="checkout-billing-details.html">Checkout Pages</a></li>
						<li><a href="shop-categories-grid.html">Categories Grid</a></li>
						<li><a href="single-product-page.html">Single Product Page</a></li>
						<li><a href="variable-product-page.html">Variable Product Page</a></li>
						<li><a href="wishlist.html">Wishlist Page</a></li>
						<li><a href="shopping-cart.html">Shopping Cart</a></li>
					</ul>
				</li>


				<li>
					<a href="#">Features</a>
					<div class="mega">
						<div class="mega-container">
							<div class="row">
								<div class="col-md-2">
									<ul>
										<li><span class="mega-headline">Example Pages</span></li>
										<li><a href="contact.html">Contact</a></li>
										<li><a href="about.html">About Us</a></li>
										<li><a href="services.html">Services</a></li>
										<li><a href="faq.html">FAQ</a></li>
										<li><a href="404-page.html">404 Page</a></li>
									</ul>
								</div>

								<div class="col-md-2">
									<ul>
										<li><span class="mega-headline">Featured Pages</span></li>
										<li><a href="index-2.html">Business Homepage</a></li>
										<li><a href="shop-with-sidebar.html">Default Shop</a></li>
										<li><a href="blog-masonry.html">Masonry Blog</a></li>
										<li><a href="variable-product-page.html">Variable Product</a></li>
										<li><a href="portfolio-dynamic-grid.html">Dynamic Grid</a></li>
									</ul>
								</div>

								<div class="col-md-2 hidden-on-mobile">
									<ul>
										<li><span class="mega-headline">Paragraph</span></li>
										<li><p>This <a href="#">Mega Menu</a> can handle everything. Lists, paragraphs, forms...</p></li>
									</ul>
								</div>

								<div class="col-md-3 hidden-on-mobile">
									<a href="#" class="img-caption margin-reset">
										<figure>
											<img src="images/menu-banner-01.jpg" alt="" />
											<figcaption>
												<h3>Jeans</h3>
												<span>Pack for Style</span>
											</figcaption>
										</figure>
									</a>
								</div>

								<div class="col-md-3 hidden-on-mobile">
									<a href="#" class="img-caption margin-reset">
										<figure>
											<img src="images/menu-banner-02.jpg" alt="" />
											<figcaption>
												<h3>Sunglasses</h3>
												<span>Nail the Basics</span>
											</figcaption>
										</figure>
									</a>
								</div>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				</li>


				<li class="dropdown">
					<a href="#">Shortcodes</a>
					<ul>
						<li><a href="elements.html">Elements</a></li>
						<li><a href="typography.html">Typography</a></li>
						<li><a href="pricing-tables.html">Pricing Tables</a></li>
						<li><a href="icons.html">Icons</a></li>
					</ul>
				</li>


				<li class="dropdown">
					<a href="#">Portfolio</a>
					<ul>
						<li><a href="portfolio-3-columns.html">3 Columns</a></li>
						<li><a href="portfolio-4-columns.html">4 Columns</a></li>
						<li><a href="portfolio-dynamic-grid.html">Dynamic Grid</a></li>
						<li><a href="single-project.html">Single Project</a></li>
					</ul>
				</li>
				

				<li class="dropdown">
					<a href="#">Blog</a>
					<ul>
						<li><a href="blog-standard.html">Blog Standard</a></li>
						<li><a href="blog-masonry.html">Blog Masonry</a></li>
						<li><a href="blog-single-post.html">Single Post</a></li>
					</ul>
				</li>


				<li class="demo-button">
				  <a href="#">Get This Theme</a>
				</li>

			</ul>
		</nav>
	</div>
</div>


<!-- Titlebar
================================================== -->
<section class="titlebar">
	<div class="container">
		<div class="row justify-content-center">
			<div class="col-10 col-md-12">
				<h2>Icons</h2>
				
				<nav id="breadcrumbs">
					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#">Shortcodes</a></li>
						<li>Icons</li>
					</ul>
				</nav>
			</div>
		</div>
	</div>
</section>


<!-- Content
================================================== -->

<!-- Container -->
<div class="container icons-example">

	<div class="row justify-content-center">
		<div class="col-10 col-md-12">
			<div class="notification success closeable margin-bottom-30">
				<p>Trizzy includes the popular Font Awesome set with over 400 Icons!</p>
				<a class="close" href="#"></a>
			</div>
		</div>
	</div>

	<div class="row justify-content-center">
		<div class="col-10 col-md-12">
			<h3 class="headline">Web Application Icons</h3><span class="line margin-bottom-25"></span><div class="clearfix"></div>
		</div>
	</div>

	<div class="row justify-content-center">
		<ul class="col-10 col-md-3">
			<li><i class="fa fa-adjust"></i>fa-adjust</li>
			
			<li><i class="fa fa-anchor"></i>fa-anchor</li>
			
			<li><i class="fa fa-archive"></i>fa-archive</li>
			
			<li><i class="fa fa-arrows"></i>fa-arrows</li>
			
			<li><i class="fa fa-arrows-h"></i>fa-arrows-h</li>
			
			<li><i class="fa fa-arrows-v"></i>fa-arrows-v</li>
			
			<li><i class="fa fa-asterisk"></i>fa-asterisk</li>
			
			<li><i class="fa fa-automobile"></i>fa-automobile </li>
			
			<li><i class="fa fa-ban"></i>fa-ban</li>
			
			<li><i class="fa fa-bank"></i>fa-bank </li>
			
			<li><i class="fa fa-bar-chart-o"></i>fa-bar-chart-o</li>
			
			<li><i class="fa fa-barcode"></i>fa-barcode</li>
			
			<li><i class="fa fa-bars"></i>fa-bars</li>
			
			<li><i class="fa fa-beer"></i>fa-beer</li>
			
			<li><i class="fa fa-bell"></i>fa-bell</li>
			
			<li><i class="fa fa-bell-o"></i>fa-bell-o</li>
			
			<li><i class="fa fa-bolt"></i>fa-bolt</li>
			
			<li><i class="fa fa-bomb"></i>fa-bomb</li>
			
			<li><i class="fa fa-book"></i>fa-book</li>
			
			<li><i class="fa fa-bookmark"></i>fa-bookmark</li>
			
			<li><i class="fa fa-bookmark-o"></i>fa-bookmark-o</li>
			
			<li><i class="fa fa-briefcase"></i>fa-briefcase</li>
			
			<li><i class="fa fa-bug"></i>fa-bug</li>
			
			<li><i class="fa fa-building"></i>fa-building</li>
			
			<li><i class="fa fa-building-o"></i>fa-building-o</li>
			
			<li><i class="fa fa-bullhorn"></i>fa-bullhorn</li>
			
			<li><i class="fa fa-bullseye"></i>fa-bullseye</li>
			
			<li><i class="fa fa-cab"></i>fa-cab </li>
			
			<li><i class="fa fa-calendar"></i>fa-calendar</li>
			
			<li><i class="fa fa-calendar-o"></i>fa-calendar-o</li>
			
			<li><i class="fa fa-camera"></i>fa-camera</li>
			
			<li><i class="fa fa-camera-retro"></i>fa-camera-retro</li>
			
			<li><i class="fa fa-car"></i>fa-car</li>
			
			<li><i class="fa fa-caret-square-o-down"></i>fa-caret-square-o-down</li>
			
			<li><i class="fa fa-caret-square-o-left"></i>fa-caret-square-o-left</li>
			
			<li><i class="fa fa-caret-square-o-right"></i>fa-caret-square-o-right</li>
			
			<li><i class="fa fa-caret-square-o-up"></i>fa-caret-square-o-up</li>
			
			<li><i class="fa fa-certificate"></i>fa-certificate</li>
			
			<li><i class="fa fa-check"></i>fa-check</li>
			
			<li><i class="fa fa-check-circle"></i>fa-check-circle</li>
			
			<li><i class="fa fa-check-circle-o"></i>fa-check-circle-o</li>
			
			<li><i class="fa fa-check-square"></i>fa-check-square</li>
			
			<li><i class="fa fa-check-square-o"></i>fa-check-square-o</li>
			
			<li><i class="fa fa-child"></i>fa-child</li>
			
			<li><i class="fa fa-circle"></i>fa-circle</li>
			
			<li><i class="fa fa-circle-o"></i>fa-circle-o</li>
			
			<li><i class="fa fa-circle-o-notch"></i>fa-circle-o-notch</li>
			
			<li><i class="fa fa-circle-thin"></i>fa-circle-thin</li>
			
			<li><i class="fa fa-clock-o"></i>fa-clock-o</li>
			
			<li><i class="fa fa-cloud"></i>fa-cloud</li>
			
			<li><i class="fa fa-cloud-download"></i>fa-cloud-download</li>
			
			<li><i class="fa fa-cloud-upload"></i>fa-cloud-upload</li>
			
			<li><i class="fa fa-code"></i>fa-code</li>
			
			<li><i class="fa fa-code-fork"></i>fa-code-fork</li>
			
			<li><i class="fa fa-coffee"></i>fa-coffee</li>
			
			<li><i class="fa fa-cog"></i>fa-cog</li>
			
			<li><i class="fa fa-cogs"></i>fa-cogs</li>
			
			<li><i class="fa fa-comment"></i>fa-comment</li>
			
			<li><i class="fa fa-comment-o"></i>fa-comment-o</li>
			
			<li><i class="fa fa-comments"></i>fa-comments</li>
			
			<li><i class="fa fa-comments-o"></i>fa-comments-o</li>
			
			<li><i class="fa fa-compass"></i>fa-compass</li>
			
			<li><i class="fa fa-credit-card"></i>fa-credit-card</li>
			
			<li><i class="fa fa-crop"></i>fa-crop</li>
			
			<li><i class="fa fa-crosshairs"></i>fa-crosshairs</li>
			
			<li><i class="fa fa-cube"></i>fa-cube</li>
			
			<li><i class="fa fa-cubes"></i>fa-cubes</li>
			
			<li><i class="fa fa-cutlery"></i>fa-cutlery</li>
			
			<li><i class="fa fa-dashboard"></i>fa-dashboard </li>
			
			<li><i class="fa fa-database"></i>fa-database</li>
			
			<li><i class="fa fa-desktop"></i>fa-desktop</li>

			<li><i class="fa fa-dot-circle-o"></i>fa-dot-circle-o</li>
			
			<li><i class="fa fa-download"></i>fa-download</li>
			
			<li><i class="fa fa-edit"></i>fa-edit </li>
		</ul>


		<ul class="col-10 col-md-3">

			<li><i class="fa fa-ellipsis-h"></i>fa-ellipsis-h</li>
			
			<li><i class="fa fa-ellipsis-v"></i>fa-ellipsis-v</li>
			
			<li><i class="fa fa-envelope"></i>fa-envelope</li>
			
			<li><i class="fa fa-envelope-o"></i>fa-envelope-o</li>
			
			<li><i class="fa fa-envelope-square"></i>fa-envelope-square</li>
			
			<li><i class="fa fa-eraser"></i>fa-eraser</li>
			
			<li><i class="fa fa-exchange"></i>fa-exchange</li>
			
			<li><i class="fa fa-exclamation"></i>fa-exclamation</li>
			
			<li><i class="fa fa-exclamation-circle"></i>fa-exclamation-circle</li>
			
			<li><i class="fa fa-exclamation-triangle"></i>fa-exclamation-triangle</li>
			
			<li><i class="fa fa-external-link"></i>fa-external-link</li>
			
			<li><i class="fa fa-external-link-square"></i>fa-external-link-square</li>
			
			<li><i class="fa fa-eye"></i>fa-eye</li>
			
			<li><i class="fa fa-eye-slash"></i>fa-eye-slash</li>
			
			<li><i class="fa fa-fax"></i>fa-fax</li>
			
			<li><i class="fa fa-female"></i>fa-female</li>
			
			<li><i class="fa fa-fighter-jet"></i>fa-fighter-jet</li>
			
			<li><i class="fa fa-file-archive-o"></i>fa-file-archive-o</li>
			
			<li><i class="fa fa-file-audio-o"></i>fa-file-audio-o</li>
			
			<li><i class="fa fa-file-code-o"></i>fa-file-code-o</li>
			
			<li><i class="fa fa-file-excel-o"></i>fa-file-excel-o</li>
			
			<li><i class="fa fa-file-image-o"></i>fa-file-image-o</li>
			
			<li><i class="fa fa-file-movie-o"></i>fa-file-movie-o </li>
			
			<li><i class="fa fa-file-pdf-o"></i>fa-file-pdf-o</li>
			
			<li><i class="fa fa-file-photo-o"></i>fa-file-photo-o </li>
			
			<li><i class="fa fa-file-picture-o"></i>fa-file-picture-o </li>
			
			<li><i class="fa fa-file-powerpoint-o"></i>fa-file-powerpoint-o</li>
			
			<li><i class="fa fa-file-sound-o"></i>fa-file-sound-o </li>
			
			<li><i class="fa fa-file-video-o"></i>fa-file-video-o</li>
			
			<li><i class="fa fa-file-word-o"></i>fa-file-word-o</li>
			
			<li><i class="fa fa-file-zip-o"></i>fa-file-zip-o </li>
			
			<li><i class="fa fa-film"></i>fa-film</li>
			
			<li><i class="fa fa-filter"></i>fa-filter</li>
			
			<li><i class="fa fa-fire"></i>fa-fire</li>
			
			<li><i class="fa fa-fire-extinguisher"></i>fa-fire-extinguisher</li>
			
			<li><i class="fa fa-flag"></i>fa-flag</li>
			
			<li><i class="fa fa-flag-checkered"></i>fa-flag-checkered</li>
			
			<li><i class="fa fa-flag-o"></i>fa-flag-o</li>
			
			<li><i class="fa fa-flash"></i>fa-flash </li>
			
			<li><i class="fa fa-flask"></i>fa-flask</li>
			
			<li><i class="fa fa-folder"></i>fa-folder</li>
			
			<li><i class="fa fa-folder-o"></i>fa-folder-o</li>
			
			<li><i class="fa fa-folder-open"></i>fa-folder-open</li>
			
			<li><i class="fa fa-folder-open-o"></i>fa-folder-open-o</li>
			
			<li><i class="fa fa-frown-o"></i>fa-frown-o</li>
			
			<li><i class="fa fa-gamepad"></i>fa-gamepad</li>
			
			<li><i class="fa fa-gavel"></i>fa-gavel</li>
			
			<li><i class="fa fa-gear"></i>fa-gear </li>
			
			<li><i class="fa fa-gears"></i>fa-gears </li>
			
			<li><i class="fa fa-gift"></i>fa-gift</li>
			
			<li><i class="fa fa-glass"></i>fa-glass</li>
			
			<li><i class="fa fa-globe"></i>fa-globe</li>
			
			<li><i class="fa fa-graduation-cap"></i>fa-graduation-cap</li>
			
			<li><i class="fa fa-group"></i>fa-group </li>
			
			<li><i class="fa fa-hdd-o"></i>fa-hdd-o</li>
			
			<li><i class="fa fa-headphones"></i>fa-headphones</li>
			
			<li><i class="fa fa-heart"></i>fa-heart</li>
			
			<li><i class="fa fa-heart-o"></i>fa-heart-o</li>
			
			<li><i class="fa fa-history"></i>fa-history</li>
			
			<li><i class="fa fa-home"></i>fa-home</li>
			
			<li><i class="fa fa-image"></i>fa-image </li>
			
			<li><i class="fa fa-inbox"></i>fa-inbox</li>
			
			<li><i class="fa fa-info"></i>fa-info</li>
			
			<li><i class="fa fa-info-circle"></i>fa-info-circle</li>
			
			<li><i class="fa fa-institution"></i>fa-institution </li>
			
			<li><i class="fa fa-key"></i>fa-key</li>
			
			<li><i class="fa fa-keyboard-o"></i>fa-keyboard-o</li>
			
			<li><i class="fa fa-language"></i>fa-language</li>
			
			<li><i class="fa fa-laptop"></i>fa-laptop</li>
			
			<li><i class="fa fa-leaf"></i>fa-leaf</li>
			
			<li><i class="fa fa-legal"></i>fa-legal </li>
			
			<li><i class="fa fa-lemon-o"></i>fa-lemon-o</li>
			
			<li><i class="fa fa-level-down"></i>fa-level-down</li>
			
			<li><i class="fa fa-level-up"></i>fa-level-up</li>

		</ul>


		<ul class="col-10 col-md-3">
			
			<li><i class="fa fa-life-bouy"></i>fa-life-bouy </li>
			
			<li><i class="fa fa-life-ring"></i>fa-life-ring</li>

			<li><i class="fa fa-life-saver"></i>fa-life-saver </li>
			
			<li><i class="fa fa-lightbulb-o"></i>fa-lightbulb-o</li>
			
			<li><i class="fa fa-location-arrow"></i>fa-location-arrow</li>
			
			<li><i class="fa fa-lock"></i>fa-lock</li>
			
			<li><i class="fa fa-magic"></i>fa-magic</li>
			
			<li><i class="fa fa-magnet"></i>fa-magnet</li>
			
			<li><i class="fa fa-mail-forward"></i>fa-mail-forward </li>
			
			<li><i class="fa fa-mail-reply"></i>fa-mail-reply </li>
			
			<li><i class="fa fa-mail-reply-all"></i>fa-mail-reply-all </li>
			
			<li><i class="fa fa-male"></i>fa-male</li>
			
			<li><i class="fa fa-map-marker"></i>fa-map-marker</li>
			
			<li><i class="fa fa-meh-o"></i>fa-meh-o</li>
			
			<li><i class="fa fa-microphone"></i>fa-microphone</li>
			
			<li><i class="fa fa-microphone-slash"></i>fa-microphone-slash</li>
			
			<li><i class="fa fa-minus"></i>fa-minus</li>
			
			<li><i class="fa fa-minus-circle"></i>fa-minus-circle</li>
			
			<li><i class="fa fa-minus-square"></i>fa-minus-square</li>
			
			<li><i class="fa fa-minus-square-o"></i>fa-minus-square-o</li>
			
			<li><i class="fa fa-mobile"></i>fa-mobile</li>
			
			<li><i class="fa fa-mobile-phone"></i>fa-mobile-phone </li>
			
			<li><i class="fa fa-money"></i>fa-money</li>
			
			<li><i class="fa fa-moon-o"></i>fa-moon-o</li>
			
			<li><i class="fa fa-mortar-board"></i>fa-mortar-board </li>
			
			<li><i class="fa fa-music"></i>fa-music</li>
			
			<li><i class="fa fa-navicon"></i>fa-navicon </li>
			
			<li><i class="fa fa-paper-plane"></i>fa-paper-plane</li>
			
			<li><i class="fa fa-paper-plane-o"></i>fa-paper-plane-o</li>
			
			<li><i class="fa fa-paw"></i>fa-paw</li>
			
			<li><i class="fa fa-pencil"></i>fa-pencil</li>
			
			<li><i class="fa fa-pencil-square"></i>fa-pencil-square</li>
			
			<li><i class="fa fa-pencil-square-o"></i>fa-pencil-square-o</li>
			
			<li><i class="fa fa-phone"></i>fa-phone</li>
			
			<li><i class="fa fa-phone-square"></i>fa-phone-square</li>
			
			<li><i class="fa fa-photo"></i>fa-photo </li>
			
			<li><i class="fa fa-picture-o"></i>fa-picture-o</li>
			
			<li><i class="fa fa-plane"></i>fa-plane</li>
			
			<li><i class="fa fa-plus"></i>fa-plus</li>
			
			<li><i class="fa fa-plus-circle"></i>fa-plus-circle</li>
			
			<li><i class="fa fa-plus-square"></i>fa-plus-square</li>
			
			<li><i class="fa fa-plus-square-o"></i>fa-plus-square-o</li>
			
			<li><i class="fa fa-power-off"></i>fa-power-off</li>
			
			<li><i class="fa fa-print"></i>fa-print</li>
			
			<li><i class="fa fa-puzzle-piece"></i>fa-puzzle-piece</li>
			
			<li><i class="fa fa-qrcode"></i>fa-qrcode</li>
			
			<li><i class="fa fa-question"></i>fa-question</li>
			
			<li><i class="fa fa-question-circle"></i>fa-question-circle</li>
			
			<li><i class="fa fa-quote-left"></i>fa-quote-left</li>
			
			<li><i class="fa fa-quote-right"></i>fa-quote-right</li>
			
			<li><i class="fa fa-random"></i>fa-random</li>
			
			<li><i class="fa fa-recycle"></i>fa-recycle</li>
			
			<li><i class="fa fa-refresh"></i>fa-refresh</li>
			
			<li><i class="fa fa-reorder"></i>fa-reorder </li>
			
			<li><i class="fa fa-reply"></i>fa-reply</li>
			
			<li><i class="fa fa-reply-all"></i>fa-reply-all</li>
			
			<li><i class="fa fa-retweet"></i>fa-retweet</li>
			
			<li><i class="fa fa-road"></i>fa-road</li>
			
			<li><i class="fa fa-rocket"></i>fa-rocket</li>
			
			<li><i class="fa fa-rss"></i>fa-rss</li>
			
			<li><i class="fa fa-rss-square"></i>fa-rss-square</li>
			
			<li><i class="fa fa-search"></i>fa-search</li>
			
			<li><i class="fa fa-search-minus"></i>fa-search-minus</li>
			
			<li><i class="fa fa-search-plus"></i>fa-search-plus</li>
			
			<li><i class="fa fa-send"></i>fa-send </li>
			
			<li><i class="fa fa-send-o"></i>fa-send-o </li>
			
			<li><i class="fa fa-share"></i>fa-share</li>
			
			<li><i class="fa fa-share-alt"></i>fa-share-alt</li>
			
			<li><i class="fa fa-share-alt-square"></i>fa-share-alt-square</li>

			<li><i class="fa fa-share-square"></i>fa-share-square</li>
			
			<li><i class="fa fa-share-square-o"></i>fa-share-square-o</li>
			<li><i class="fa fa-shield"></i>fa-shield</li>
			
			<li><i class="fa fa-shopping-cart"></i>fa-shopping-cart</li>
			
			<li><i class="fa fa-sign-in"></i>fa-sign-in</li>
		</ul>


		<ul class="col-10 col-md-3">
			
			<li><i class="fa fa-sign-out"></i>fa-sign-out</li>
			
			<li><i class="fa fa-signal"></i>fa-signal</li>
			
			<li><i class="fa fa-sitemap"></i>fa-sitemap</li>
			
			<li><i class="fa fa-sliders"></i>fa-sliders</li>
			
			<li><i class="fa fa-smile-o"></i>fa-smile-o</li>
			
			<li><i class="fa fa-sort"></i>fa-sort</li>
			
			<li><i class="fa fa-sort-alpha-asc"></i>fa-sort-alpha-asc</li>
			
			<li><i class="fa fa-sort-alpha-desc"></i>fa-sort-alpha-desc</li>
			
			<li><i class="fa fa-sort-amount-asc"></i>fa-sort-amount-asc</li>
			
			<li><i class="fa fa-sort-amount-desc"></i>fa-sort-amount-desc</li>
			
			<li><i class="fa fa-sort-asc"></i>fa-sort-asc</li>
			
			<li><i class="fa fa-sort-desc"></i>fa-sort-desc</li>
			
			<li><i class="fa fa-sort-down"></i>fa-sort-down </li>
			
			<li><i class="fa fa-sort-numeric-asc"></i>fa-sort-numeric-asc</li>
			
			<li><i class="fa fa-sort-numeric-desc"></i>fa-sort-numeric-desc</li>
			
			<li><i class="fa fa-sort-up"></i>fa-sort-up </li>
			
			<li><i class="fa fa-space-shuttle"></i>fa-space-shuttle</li>
			
			<li><i class="fa fa-spinner"></i>fa-spinner</li>
			
			<li><i class="fa fa-spoon"></i>fa-spoon</li>
			
			<li><i class="fa fa-square"></i>fa-square</li>
			
			<li><i class="fa fa-square-o"></i>fa-square-o</li>
			
			<li><i class="fa fa-star"></i>fa-star</li>
			
			<li><i class="fa fa-star-half"></i>fa-star-half</li>
			
			<li><i class="fa fa-star-half-empty"></i>fa-star-half-empty </li>
			
			<li><i class="fa fa-star-half-full"></i>fa-star-half-full </li>
			
			<li><i class="fa fa-star-half-o"></i>fa-star-half-o</li>
			
			<li><i class="fa fa-star-o"></i>fa-star-o</li>
			
			<li><i class="fa fa-suitcase"></i>fa-suitcase</li>
			
			<li><i class="fa fa-sun-o"></i>fa-sun-o</li>
			
			<li><i class="fa fa-support"></i>fa-support </li>
			
			<li><i class="fa fa-tablet"></i>fa-tablet</li>
			
			<li><i class="fa fa-tachometer"></i>fa-tachometer</li>
			
			<li><i class="fa fa-tag"></i>fa-tag</li>
			
			<li><i class="fa fa-tags"></i>fa-tags</li>
			
			<li><i class="fa fa-tasks"></i>fa-tasks</li>
			
			<li><i class="fa fa-taxi"></i>fa-taxi</li>
			
			<li><i class="fa fa-terminal"></i>fa-terminal</li>
			
			<li><i class="fa fa-thumb-tack"></i>fa-thumb-tack</li>
			
			<li><i class="fa fa-thumbs-down"></i>fa-thumbs-down</li>
			
			<li><i class="fa fa-thumbs-o-down"></i>fa-thumbs-o-down</li>
			
			<li><i class="fa fa-thumbs-o-up"></i>fa-thumbs-o-up</li>
			
			<li><i class="fa fa-thumbs-up"></i>fa-thumbs-up</li>
			
			<li><i class="fa fa-ticket"></i>fa-ticket</li>
			
			<li><i class="fa fa-times"></i>fa-times</li>
			
			<li><i class="fa fa-times-circle"></i>fa-times-circle</li>
			
			<li><i class="fa fa-times-circle-o"></i>fa-times-circle-o</li>
			
			<li><i class="fa fa-tint"></i>fa-tint</li>
			
			<li><i class="fa fa-toggle-down"></i>fa-toggle-down </li>
			
			<li><i class="fa fa-toggle-left"></i>fa-toggle-left </li>
			
			<li><i class="fa fa-toggle-right"></i>fa-toggle-right </li>
			
			<li><i class="fa fa-toggle-up"></i>fa-toggle-up </li>
			
			<li><i class="fa fa-trash-o"></i>fa-trash-o</li>
			
			<li><i class="fa fa-tree"></i>fa-tree</li>
			
			<li><i class="fa fa-trophy"></i>fa-trophy</li>
			
			<li><i class="fa fa-truck"></i>fa-truck</li>
			
			<li><i class="fa fa-umbrella"></i>fa-umbrella</li>
			
			<li><i class="fa fa-university"></i>fa-university</li>
			
			<li><i class="fa fa-unlock"></i>fa-unlock</li>
			
			<li><i class="fa fa-unlock-alt"></i>fa-unlock-alt</li>
			
			<li><i class="fa fa-unsorted"></i>fa-unsorted </li>
			
			<li><i class="fa fa-upload"></i>fa-upload</li>
			
			<li><i class="fa fa-user"></i>fa-user</li>
			
			<li><i class="fa fa-users"></i>fa-users</li>
			
			<li><i class="fa fa-video-camera"></i>fa-video-camera</li>
			
			<li><i class="fa fa-volume-down"></i>fa-volume-down</li>
			
			<li><i class="fa fa-volume-off"></i>fa-volume-off</li>
			
			<li><i class="fa fa-volume-up"></i>fa-volume-up</li>
			
			<li><i class="fa fa-warning"></i>fa-warning </li>
			
			<li><i class="fa fa-wheelchair"></i>fa-wheelchair</li>
			
			<li><i class="fa fa-wrench"></i>fa-wrench</li>
		</ul>
	</div>

<div class="clearfix"></div>

<br>

<div class="row justify-content-center">
	<div class="col-10 col-md-12">
		<h3 class="headline">File Type Icons</h3><span class="line margin-bottom-25"></span><div class="clearfix"></div>
	</div>
</div>

<div class="row justify-content-center">
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-file"></i>fa-file</li>
		
		<li><i class="fa fa-file-archive-o"></i>fa-file-archive-o</li>
		
		<li><i class="fa fa-file-audio-o"></i>fa-file-audio-o</li>
		
		<li><i class="fa fa-file-code-o"></i>fa-file-code-o</li>
		
		<li><i class="fa fa-file-excel-o"></i>fa-file-excel-o</li>


	</ul>
	<ul class="col-10 col-md-3">

		<li><i class="fa fa-file-image-o"></i>fa-file-image-o</li>
		
		<li><i class="fa fa-file-movie-o"></i>fa-file-movie-o </li>
		
		<li><i class="fa fa-file-o"></i>fa-file-o</li>
		
		<li><i class="fa fa-file-pdf-o"></i>fa-file-pdf-o</li>
		
		<li><i class="fa fa-file-photo-o"></i>fa-file-photo-o </li>

	</ul>
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-file-picture-o"></i>fa-file-picture-o </li>
		
		<li><i class="fa fa-file-powerpoint-o"></i>fa-file-powerpoint-o</li>
		
		<li><i class="fa fa-file-sound-o"></i>fa-file-sound-o </li>
		
		<li><i class="fa fa-file-text"></i>fa-file-text</li>

		<li><i class="fa fa-file-text-o"></i>fa-file-text-o</li>
		
	</ul>
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-file-video-o"></i>fa-file-video-o</li>
		
		<li><i class="fa fa-file-word-o"></i>fa-file-word-o</li>
		
		<li><i class="fa fa-file-zip-o"></i>fa-file-zip-o </li>
	</ul>
</div>
  
<div class="clearfix"></div>

<br>

<div class="row justify-content-center">
	<div class="col-10 col-md-12">
		<h3 class="headline">Form Control Icons</h3><span class="line margin-bottom-25"></span><div class="clearfix"></div>
	</div>
</div>

<div class="row justify-content-center">
	<ul class="col-10 col-md-3">
		<li><i class="fa fa-check-square"></i>fa-check-square</li>
		
		<li><i class="fa fa-check-square-o"></i>fa-check-square-o</li>
		
		<li><i class="fa fa-circle"></i>fa-circle</li>

	</ul>
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-circle-o"></i>fa-circle-o</li>
		
		<li><i class="fa fa-dot-circle-o"></i>fa-dot-circle-o</li>
		
		<li><i class="fa fa-minus-square"></i>fa-minus-square</li>

	</ul>
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-minus-square-o"></i>fa-minus-square-o</li>
		
		<li><i class="fa fa-plus-square"></i>fa-plus-square</li>
		
		<li><i class="fa fa-plus-square-o"></i>fa-plus-square-o</li>

	</ul>
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-square"></i>fa-square</li>
		
		<li><i class="fa fa-square-o"></i>fa-square-o</li>
	</ul>
</div>
 
<div class="clearfix"></div>
  
<br>

<div class="row justify-content-center">
	<div class="col-10 col-md-12">
		<h3 class="headline">Currency Icons</h3><span class="line margin-bottom-25"></span><div class="clearfix"></div>
	</div>
</div>

<div class="row justify-content-center">
	<ul class="col-10 col-md-3">
		<li><i class="fa fa-bitcoin"></i>fa-bitcoin </li>
		
		<li><i class="fa fa-btc"></i>fa-btc</li>
		
		<li><i class="fa fa-cny"></i>fa-cny </li>
		
		<li><i class="fa fa-dollar"></i>fa-dollar </li>
		
		<li><i class="fa fa-eur"></i>fa-eur</li>

	</ul>
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-euro"></i>fa-euro </li>
		
		<li><i class="fa fa-gbp"></i>fa-gbp</li>
		
		<li><i class="fa fa-inr"></i>fa-inr</li>
		
		<li><i class="fa fa-jpy"></i>fa-jpy</li>
		
		<li><i class="fa fa-krw"></i>fa-krw</li>

	</ul>
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-money"></i>fa-money</li>
		
		<li><i class="fa fa-rmb"></i>fa-rmb </li>
		
		<li><i class="fa fa-rouble"></i>fa-rouble </li>
		
		<li><i class="fa fa-rub"></i>fa-rub</li>
		
		<li><i class="fa fa-ruble"></i>fa-ruble </li>

	</ul>
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-rupee"></i>fa-rupee </li>
		
		<li><i class="fa fa-try"></i>fa-try</li>
		
		<li><i class="fa fa-turkish-lira"></i>fa-turkish-lira </li>
		
		<li><i class="fa fa-usd"></i>fa-usd</li>
		
		<li><i class="fa fa-won"></i>fa-won </li>

	</ul>
</div>

<div class="clearfix"></div>

<br>

<div class="row justify-content-center">
	<div class="col-10 col-md-12>
		<h3 class="headline">Text Editor Icons</h3><span class="line margin-bottom-25"></span><div class="clearfix"></div>
	</div>
</div>

<div class="row justify-content-center">
	<ul class="col-10 col-md-3">
		<li><i class="fa fa-align-center"></i>fa-align-center</li>
		
		<li><i class="fa fa-align-justify"></i>fa-align-justify</li>
		
		<li><i class="fa fa-align-left"></i>fa-align-left</li>
		
		<li><i class="fa fa-align-right"></i>fa-align-right</li>
		
		<li><i class="fa fa-bold"></i>fa-bold</li>
		
		<li><i class="fa fa-chain"></i>fa-chain </li>
		
		<li><i class="fa fa-chain-broken"></i>fa-chain-broken</li>
		
		<li><i class="fa fa-clipboard"></i>fa-clipboard</li>
		
		<li><i class="fa fa-columns"></i>fa-columns</li>
		
		<li><i class="fa fa-copy"></i>fa-copy </li>
		
		<li><i class="fa fa-cut"></i>fa-cut </li>
		
		<li><i class="fa fa-dedent"></i>fa-dedent </li>
		
		<li><i class="fa fa-eraser"></i>fa-eraser</li>

	</ul>
	<ul class="col-10 col-md-3">

		<li><i class="fa fa-file"></i>fa-file</li>
		
		<li><i class="fa fa-file-o"></i>fa-file-o</li>
		
		<li><i class="fa fa-file-text"></i>fa-file-text</li>
		
		<li><i class="fa fa-file-text-o"></i>fa-file-text-o</li>
		
		<li><i class="fa fa-files-o"></i>fa-files-o</li>
		
		<li><i class="fa fa-floppy-o"></i>fa-floppy-o</li>
		
		<li><i class="fa fa-font"></i>fa-font</li>
		
		<li><i class="fa fa-header"></i>fa-header</li>
		
		<li><i class="fa fa-indent"></i>fa-indent</li>
		
		<li><i class="fa fa-italic"></i>fa-italic</li>
		
		<li><i class="fa fa-link"></i>fa-link</li>
		
		<li><i class="fa fa-list"></i>fa-list</li>
		
		<li><i class="fa fa-list-alt"></i>fa-list-alt</li>

	</ul>
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-list-ol"></i>fa-list-ol</li>
		
		<li><i class="fa fa-list-ul"></i>fa-list-ul</li>
		
		<li><i class="fa fa-outdent"></i>fa-outdent</li>
		
		<li><i class="fa fa-paperclip"></i>fa-paperclip</li>
		
		<li><i class="fa fa-paragraph"></i>fa-paragraph</li>
		
		<li><i class="fa fa-paste"></i>fa-paste </li>
		
		<li><i class="fa fa-repeat"></i>fa-repeat</li>
		
		<li><i class="fa fa-rotate-left"></i>fa-rotate-left </li>
		
		<li><i class="fa fa-rotate-right"></i>fa-rotate-right </li>
		
		<li><i class="fa fa-save"></i>fa-save </li>
		
		<li><i class="fa fa-scissors"></i>fa-scissors</li>
		
		<li><i class="fa fa-strikethrough"></i>fa-strikethrough</li>
		
		<li><i class="fa fa-subscript"></i>fa-subscript</li>
	</ul>
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-superscript"></i>fa-superscript</li>
		
		<li><i class="fa fa-table"></i>fa-table</li>
		
		<li><i class="fa fa-text-height"></i>fa-text-height</li>
		
		<li><i class="fa fa-text-width"></i>fa-text-width</li>
		
		<li><i class="fa fa-th"></i>fa-th</li>
		
		<li><i class="fa fa-th-large"></i>fa-th-large</li>
		
		<li><i class="fa fa-th-list"></i>fa-th-list</li>
		
		<li><i class="fa fa-underline"></i>fa-underline</li>
		
		<li><i class="fa fa-undo"></i>fa-undo</li>
		
		<li><i class="fa fa-unlink"></i>fa-unlink </li>
	</ul>
</div>

<div class="clearfix"></div>

<br>

<div class="row justify-content-center">
	<div class="col-10 col-md-12>
		<h3 class="headline">Directional Icons</h3><span class="line margin-bottom-25"></span><div class="clearfix"></div>
	</div>
</div>
	
<div class="row justify-content-center">
	<ul class="col-10 col-md-3">
		<li><i class="fa fa-angle-double-down"></i>fa-angle-double-down</li>
		
		<li><i class="fa fa-angle-double-left"></i>fa-angle-double-left</li>
		
		<li><i class="fa fa-angle-double-right"></i>fa-angle-double-right</li>
		
		<li><i class="fa fa-angle-double-up"></i>fa-angle-double-up</li>
		
		<li><i class="fa fa-angle-down"></i>fa-angle-down</li>
		
		<li><i class="fa fa-angle-left"></i>fa-angle-left</li>
		
		<li><i class="fa fa-angle-right"></i>fa-angle-right</li>
		
		<li><i class="fa fa-angle-up"></i>fa-angle-up</li>
		
		<li><i class="fa fa-arrow-circle-down"></i>fa-arrow-circle-down</li>
		
		<li><i class="fa fa-arrow-circle-left"></i>fa-arrow-circle-left</li>
		
		<li><i class="fa fa-arrow-circle-o-down"></i>fa-arrow-circle-o-down</li>
		
		<li><i class="fa fa-arrow-circle-o-left"></i>fa-arrow-circle-o-left</li>
		
		<li><i class="fa fa-arrow-circle-o-right"></i>fa-arrow-circle-o-right</li>
		
		<li><i class="fa fa-arrow-circle-o-up"></i>fa-arrow-circle-o-up</li>


	</ul>
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-arrow-circle-right"></i>fa-arrow-circle-right</li>
		
		<li><i class="fa fa-arrow-circle-up"></i>fa-arrow-circle-up</li>
		
		<li><i class="fa fa-arrow-down"></i>fa-arrow-down</li>
		
		<li><i class="fa fa-arrow-left"></i>fa-arrow-left</li>
		
		<li><i class="fa fa-arrow-right"></i>fa-arrow-right</li>
		
		<li><i class="fa fa-arrow-up"></i>fa-arrow-up</li>
		
		<li><i class="fa fa-arrows"></i>fa-arrows</li>
		
		<li><i class="fa fa-arrows-alt"></i>fa-arrows-alt</li>
		
		<li><i class="fa fa-arrows-h"></i>fa-arrows-h</li>
		
		<li><i class="fa fa-arrows-v"></i>fa-arrows-v</li>
		
		<li><i class="fa fa-caret-down"></i>fa-caret-down</li>
		
		<li><i class="fa fa-caret-left"></i>fa-caret-left</li>
		
		<li><i class="fa fa-caret-right"></i>fa-caret-right</li>

		<li><i class="fa fa-caret-square-o-down"></i>fa-caret-square-o-down</li>

	</ul>
	<ul class="col-10 col-md-3">
		
		
		<li><i class="fa fa-caret-square-o-left"></i>fa-caret-square-o-left</li>
		
		<li><i class="fa fa-caret-square-o-right"></i>fa-caret-square-o-right</li>
		
		<li><i class="fa fa-caret-square-o-up"></i>fa-caret-square-o-up</li>
		
		<li><i class="fa fa-caret-up"></i>fa-caret-up</li>
		
		<li><i class="fa fa-chevron-circle-down"></i>fa-chevron-circle-down</li>
		
		<li><i class="fa fa-chevron-circle-left"></i>fa-chevron-circle-left</li>
		
		<li><i class="fa fa-chevron-circle-right"></i>fa-chevron-circle-right</li>
		
		<li><i class="fa fa-chevron-circle-up"></i>fa-chevron-circle-up</li>
		
		<li><i class="fa fa-chevron-down"></i>fa-chevron-down</li>
		
		<li><i class="fa fa-chevron-left"></i>fa-chevron-left</li>
		
		<li><i class="fa fa-chevron-right"></i>fa-chevron-right</li>
		
		<li><i class="fa fa-chevron-up"></i>fa-chevron-up</li>
		
		<li><i class="fa fa-hand-o-down"></i>fa-hand-o-down</li>
		
		<li><i class="fa fa-hand-o-left"></i>fa-hand-o-left</li>

	</ul>
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-hand-o-right"></i>fa-hand-o-right</li>
		
		<li><i class="fa fa-hand-o-up"></i>fa-hand-o-up</li>
		
		<li><i class="fa fa-long-arrow-down"></i>fa-long-arrow-down</li>
		
		<li><i class="fa fa-long-arrow-left"></i>fa-long-arrow-left</li>
		
		<li><i class="fa fa-long-arrow-right"></i>fa-long-arrow-right</li>
		
		<li><i class="fa fa-long-arrow-up"></i>fa-long-arrow-up</li>
		
		<li><i class="fa fa-toggle-down"></i>fa-toggle-down </li>
		
		<li><i class="fa fa-toggle-left"></i>fa-toggle-left </li>
		
		<li><i class="fa fa-toggle-right"></i>fa-toggle-right </li>
		
		<li><i class="fa fa-toggle-up"></i>fa-toggle-up </li>

	</ul>
</div>

<div class="clearfix"></div>

<br>

<div class="row justify-content-center">
	<div class="col-10 col-md-12">
		<h3 class="headline">Video Player Icons</h3><span class="line margin-bottom-25"></span><div class="clearfix"></div>
	</div>
</div>

<div class="row justify-content-center">
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-arrows-alt"></i>fa-arrows-alt</li>
		
		<li><i class="fa fa-backward"></i>fa-backward</li>
		
		<li><i class="fa fa-compress"></i>fa-compress</li>
		
		<li><i class="fa fa-eject"></i>fa-eject</li>

	</ul>
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-expand"></i>fa-expand</li>
		
		<li><i class="fa fa-fast-backward"></i>fa-fast-backward</li>
		
		<li><i class="fa fa-fast-forward"></i>fa-fast-forward</li>
		
		<li><i class="fa fa-forward"></i>fa-forward</li>
		
	</ul>
	<ul class="col-10 col-md-3">

		<li><i class="fa fa-pause"></i>fa-pause</li>
		
		<li><i class="fa fa-play"></i>fa-play</li>
		
		<li><i class="fa fa-play-circle"></i>fa-play-circle</li>
		
		<li><i class="fa fa-play-circle-o"></i>fa-play-circle-o</li>

	</ul>
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-step-backward"></i>fa-step-backward</li>
		
		<li><i class="fa fa-step-forward"></i>fa-step-forward</li>
		
		<li><i class="fa fa-stop"></i>fa-stop</li>
		
		<li><i class="fa fa-youtube-play"></i>fa-youtube-play</li>
	</ul>
</div>


<div class="clearfix"></div>

<br>
  
<div class="row justify-content-center">
	<div class="col-10 col-md-12">
		<h3 class="headline">Brand Icons</h3><span class="line margin-bottom-25"></span><div class="clearfix"></div>
	</div>
</div>

	
<div class="row justify-content-center">
	<ul class="col-10 col-md-3">
		<li><i class="fa fa-adn"></i>fa-adn</li>
		
		<li><i class="fa fa-android"></i>fa-android</li>
		
		<li><i class="fa fa-apple"></i>fa-apple</li>
		
		<li><i class="fa fa-behance"></i>fa-behance</li>
		
		<li><i class="fa fa-behance-square"></i>fa-behance-square</li>
		
		<li><i class="fa fa-bitbucket"></i>fa-bitbucket</li>
		
		<li><i class="fa fa-bitbucket-square"></i>fa-bitbucket-square</li>
		
		<li><i class="fa fa-bitcoin"></i>fa-bitcoin </li>
		
		<li><i class="fa fa-btc"></i>fa-btc</li>
		
		<li><i class="fa fa-codepen"></i>fa-codepen</li>
		
		<li><i class="fa fa-css3"></i>fa-css3</li>
		
		<li><i class="fa fa-delicious"></i>fa-delicious</li>
		
		<li><i class="fa fa-deviantart"></i>fa-deviantart</li>
		
		<li><i class="fa fa-digg"></i>fa-digg</li>
		
		<li><i class="fa fa-dribbble"></i>fa-dribbble</li>
		
		<li><i class="fa fa-dropbox"></i>fa-dropbox</li>
		
		<li><i class="fa fa-drupal"></i>fa-drupal</li>
		
		<li><i class="fa fa-empire"></i>fa-empire</li>
		
		<li><i class="fa fa-facebook"></i>fa-facebook</li>
		
		<li><i class="fa fa-facebook-square"></i>fa-facebook-square</li>
		
		<li><i class="fa fa-flickr"></i>fa-flickr</li>
		
		<li><i class="fa fa-foursquare"></i>fa-foursquare</li>

	</ul>
	<ul class="col-10 col-md-3">

		<li><i class="fa fa-ge"></i>fa-ge </li>
		
		<li><i class="fa fa-git"></i>fa-git</li>
		
		<li><i class="fa fa-git-square"></i>fa-git-square</li>
		
		<li><i class="fa fa-github"></i>fa-github</li>
		
		<li><i class="fa fa-github-alt"></i>fa-github-alt</li>
		
		<li><i class="fa fa-github-square"></i>fa-github-square</li>
		
		<li><i class="fa fa-gittip"></i>fa-gittip</li>
		
		<li><i class="fa fa-google"></i>fa-google</li>
		
		<li><i class="fa fa-google-plus"></i>fa-google-plus</li>
		
		<li><i class="fa fa-google-plus-square"></i>fa-google-plus-square</li>
		
		<li><i class="fa fa-hacker-news"></i>fa-hacker-news</li>
		
		<li><i class="fa fa-html5"></i>fa-html5</li>
		
		<li><i class="fa fa-instagram"></i>fa-instagram</li>
		
		<li><i class="fa fa-joomla"></i>fa-joomla</li>
		
		<li><i class="fa fa-jsfiddle"></i>fa-jsfiddle</li>
		
		<li><i class="fa fa-linkedin"></i>fa-linkedin</li>
		
		<li><i class="fa fa-linkedin-square"></i>fa-linkedin-square</li>
		
		<li><i class="fa fa-linux"></i>fa-linux</li>
		
		<li><i class="fa fa-maxcdn"></i>fa-maxcdn</li>
		
		<li><i class="fa fa-openid"></i>fa-openid</li>
		
		<li><i class="fa fa-pagelines"></i>fa-pagelines</li>

		<li><i class="fa fa-pied-piper"></i>fa-pied-piper</li>
		
	</ul>
	<ul class="col-10 col-md-3">
		<li><i class="fa fa-pied-piper-alt"></i>fa-pied-piper-alt</li>
		
		<li><i class="fa fa-pied-piper-square"></i>fa-pied-piper-square </li>

		
		<li><i class="fa fa-pinterest"></i>fa-pinterest</li>
		
		<li><i class="fa fa-pinterest-square"></i>fa-pinterest-square</li>
		
		<li><i class="fa fa-qq"></i>fa-qq</li>
		
		<li><i class="fa fa-ra"></i>fa-ra </li>
		
		<li><i class="fa fa-rebel"></i>fa-rebel</li>
		
		<li><i class="fa fa-reddit"></i>fa-reddit</li>
		
		<li><i class="fa fa-reddit-square"></i>fa-reddit-square</li>
		
		<li><i class="fa fa-renren"></i>fa-renren</li>
		
		<li><i class="fa fa-share-alt"></i>fa-share-alt</li>
		
		<li><i class="fa fa-share-alt-square"></i>fa-share-alt-square</li>
		
		<li><i class="fa fa-skype"></i>fa-skype</li>
		
		<li><i class="fa fa-slack"></i>fa-slack</li>
		
		<li><i class="fa fa-soundcloud"></i>fa-soundcloud</li>
		
		<li><i class="fa fa-spotify"></i>fa-spotify</li>
		
		<li><i class="fa fa-stack-exchange"></i>fa-stack-exchange</li>
		
		<li><i class="fa fa-stack-overflow"></i>fa-stack-overflow</li>
		
		<li><i class="fa fa-steam"></i>fa-steam</li>
		
		<li><i class="fa fa-steam-square"></i>fa-steam-square</li>
		
		<li><i class="fa fa-stumbleupon"></i>fa-stumbleupon</li>
		
		<li><i class="fa fa-stumbleupon-circle"></i>fa-stumbleupon-circle</li>
	</ul>
	<ul class="col-10 col-md-3">
		
		<li><i class="fa fa-tencent-weibo"></i>fa-tencent-weibo</li>
		
		<li><i class="fa fa-trello"></i>fa-trello</li>
		
		<li><i class="fa fa-tumblr"></i>fa-tumblr</li>
		
		<li><i class="fa fa-tumblr-square"></i>fa-tumblr-square</li>
		
		<li><i class="fa fa-twitter"></i>fa-twitter</li>
		
		<li><i class="fa fa-twitter-square"></i>fa-twitter-square</li>
		
		<li><i class="fa fa-vimeo-square"></i>fa-vimeo-square</li>
		
		<li><i class="fa fa-vine"></i>fa-vine</li>
		
		<li><i class="fa fa-vk"></i>fa-vk</li>
		
		<li><i class="fa fa-wechat"></i>fa-wechat </li>
		
		<li><i class="fa fa-weibo"></i>fa-weibo</li>
		
		<li><i class="fa fa-weixin"></i>fa-weixin</li>
		
		<li><i class="fa fa-windows"></i>fa-windows</li>
		
		<li><i class="fa fa-wordpress"></i>fa-wordpress</li>
		
		<li><i class="fa fa-xing"></i>fa-xing</li>
		
		<li><i class="fa fa-xing-square"></i>fa-xing-square</li>
		
		<li><i class="fa fa-yahoo"></i>fa-yahoo</li>
		
		<li><i class="fa fa-youtube"></i>fa-youtube</li>
		
		<li><i class="fa fa-youtube-play"></i>fa-youtube-play</li>
		
		<li><i class="fa fa-youtube-square"></i>fa-youtube-square</li>
	</ul>
</div>

<div class="clearfix"></div>

<br>

<div class="row justify-content-center">
	<div class="col-10 col-md-6">
		<h3 class="headline">Medical Icons</h3><span class="line margin-bottom-25"></span><div class="clearfix"></div>

		
		<div class="row justify-content-center">
			<ul class="col-10 col-md-6 alpha ">
			<li><i class="fa fa-ambulance"></i>fa-ambulance</li>
			
			<li><i class="fa fa-h-square"></i>fa-h-square</li>
			
			<li><i class="fa fa-hospital-o"></i>fa-hospital-o</li>
			
			<li><i class="fa fa-medkit"></i>fa-medkit</li>

			</ul>

			<ul class="col-10 col-md-6 omega">
			<li><i class="fa fa-plus-square"></i>fa-plus-square</li>
			
			<li><i class="fa fa-stethoscope"></i>fa-stethoscope</li>
			
			<li><i class="fa fa-user-md"></i>fa-user-md</li>
			
			<li><i class="fa fa-wheelchair"></i>fa-wheelchair</li>
			</ul>
		</div>
	</div>



	<div class="col-10 col-md-6">
		<h3 class="headline">Spinner Icons</h3><span class="line margin-bottom-25"></span><div class="clearfix"></div>

		<ul>
			<li><i class="fa fa-circle-o-notch"></i>fa-circle-o-notch</li>
			
			<li><i class="fa fa-cog"></i>fa-cog</li>
			
			<li><i class="fa fa-refresh"></i>fa-refresh</li>
			
			<li><i class="fa fa-spinner"></i>fa-spinner</li>
		</ul>
	</div>
</div>
<div class="clearfix"></div>


</div>
<!-- Container / End -->

<div class="margin-top-50"></div>

<!-- Footer
================================================== -->
<div id="footer">

	<!-- Container -->
	<div class="container justify-content-center">

		<div class="row">
			<div class="col-10 col-md-3">
				<img src="images/logo-footer.png" alt="" class="margin-top-10"/>
				<p class="margin-top-15">Nulla facilisis feugiat magna, ut molestie metus hendrerit vitae. Vivamus tristique lectus at varius rutrum. Integer lobortis mauris non consectetur eleifend.</p>
			</div>

			<div class="col-10 col-md-3">

				<!-- Headline -->
				<h3 class="headline footer">Customer Service</h3>
				<span class="line"></span>
				<div class="clearfix"></div>

				<ul class="footer-links">
					<li><a href="#">Order Status</a></li>
					<li><a href="#">Payment Methods</a></li>
					<li><a href="#">Delivery & Returns</a></li>
					<li><a href="#">Privacy Policy</a></li>
					<li><a href="#">Terms & Conditions</a></li>
				</ul>

			</div>

			<div class="col-10 col-md-3">

				<!-- Headline -->
				<h3 class="headline footer">My Account</h3>
				<span class="line"></span>
				<div class="clearfix"></div>

				<ul class="footer-links">
					<li><a href="#">My Account</a></li>
					<li><a href="#">Order History</a></li>
					<li><a href="#">Wish List</a></li>
				</ul>

			</div>

			<div class="col-10 col-md-3">

				<!-- Headline -->
				<h3 class="headline footer">Newsletter</h3>
				<span class="line"></span>
				<div class="clearfix"></div>
				<p>Sign up to receive email updates on new product announcements, gift ideas, special promotions, sales and more.</p>

				<form action="#" method="get">
					<button class="newsletter-btn" type="submit">Join</button>
					<input class="newsletter" type="text" placeholder="mail@example.com" value=""/>
				</form>
			</div>
		</div>

	</div>
	<!-- Container / End -->

</div>
<!-- Footer / End -->

<!-- Footer Bottom / Start -->
<div id="footer-bottom">

	<!-- Container -->
	<div class="container">

		<div class="row align-items-center">
			<div class="col-10 col-md-6">© Copyright 2014 by <a href="#">trizzy</a>. All Rights Reserved.</div>
			<div class="col-10 col-md-6">
				<ul class="payment-icons">
					<li><img src="images/visa.png" alt="" /></li>
					<li><img src="images/mastercard.png" alt="" /></li>
					<li><img src="images/skrill.png" alt="" /></li>
					<li><img src="images/moneybookers.png" alt="" /></li>
					<li><img src="images/paypal.png" alt="" /></li>
				</ul>
			</div>
		</div>

	</div>
	<!-- Container / End -->

</div>
<!-- Footer Bottom / End -->

<!-- Back To Top Button -->
<div id="backtotop"><a href="#"></a></div>

</div>


<!-- Java Script
================================================== -->
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="scripts/jquery.jpanelmenu.js"></script>
<script src="scripts/jquery.themepunch.plugins.min.js"></script>
<script src="scripts/jquery.themepunch.revolution.min.js"></script>
<script src="scripts/jquery.themepunch.showbizpro.min.js"></script>
<script src="scripts/jquery.magnific-popup.min.js"></script>
<script src="scripts/hoverIntent.js"></script>
<script src="scripts/superfish.js"></script>
<script src="scripts/jquery.pureparallax.js"></script>
<script src="scripts/jquery.pricefilter.js"></script>
<script src="scripts/jquery.selectric.min.js"></script>
<script src="scripts/jquery.royalslider.min.js"></script>
<script src="scripts/SelectBox.js"></script>
<script src="scripts/modernizr.custom.js"></script>
<script src="scripts/waypoints.min.js"></script>
<script src="scripts/jquery.flexslider-min.js"></script>
<script src="scripts/jquery.counterup.min.js"></script>
<script src="scripts/jquery.tooltips.min.js"></script>
<script src="scripts/jquery.isotope.min.js"></script>
<script src="scripts/puregrid.js"></script>
<script src="scripts/stacktable.js"></script>
<script src="scripts/custom.js"></script>


<!-- Style Switcher
================================================== -->
<script src="scripts/switcher.js"></script>

<div id="style-switcher">
	<h2>Style Switcher <a href="#"></a></h2>
	
	<div><h3>Predefined Colors</h3>
		<ul class="colors" id="color1">
			<li><a href="#" class="green" title="Green"></a></li>
			<li><a href="#" class="blue" title="Blue"></a></li>
			<li><a href="#" class="orange" title="Orange"></a></li>
			<li><a href="#" class="navy" title="Navy"></a></li>
			<li><a href="#" class="yellow" title="Yellow"></a></li>
			<li><a href="#" class="peach" title="Peach"></a></li>
			<li><a href="#" class="beige" title="Beige"></a></li>
			<li><a href="#" class="purple" title="Purple"></a></li>
			<li><a href="#" class="celadon" title="Celadon"></a></li>
			<li><a href="#" class="pink" title="Pink"></a></li>
			<li><a href="#" class="red" title="Red"></a></li>
			<li><a href="#" class="brown" title="Brown"></a></li>
			<li><a href="#" class="cherry" title="Cherry"></a></li>
			<li><a href="#" class="cyan" title="Cyan"></a></li>
			<li><a href="#" class="gray" title="Gray"></a></li>
			<li><a href="#" class="darkcol" title="Dark"></a></li>
		</ul>
		
		<h3>Layout Style</h3>
		<div class="layout-style">
			<select id="layout-style"> 
				<option value="1">Boxed</option>
				<option value="2">Wide</option>
			</select>
		</div>
	
	<h3>Background Image</h3>
		 <ul class="colors bg" id="bg">
			<li><a href="#" class="bg1"></a></li>
			<li><a href="#" class="bg2"></a></li>
			<li><a href="#" class="bg3"></a></li>
			<li><a href="#" class="bg4"></a></li>
			<li><a href="#" class="bg5"></a></li>
			<li><a href="#" class="bg6"></a></li>
			<li><a href="#" class="bg7"></a></li>
			<li><a href="#" class="bg8"></a></li>
			<li><a href="#" class="bg9"></a></li>
			<li><a href="#" class="bg10"></a></li>
			<li><a href="#" class="bg11"></a></li>
			<li><a href="#" class="bg12"></a></li>
			<li><a href="#" class="bg13"></a></li>
			<li><a href="#" class="bg14"></a></li>
			<li><a href="#" class="bg15"></a></li>
			<li><a href="#" class="bg16"></a></li>
		</ul>
		
	<h3>Background Color</h3>
		<ul class="colors bgsolid" id="bgsolid">
			<li><a href="#" class="green-bg" title="Green"></a></li>
			<li><a href="#" class="blue-bg" title="Blue"></a></li>
			<li><a href="#" class="orange-bg" title="Orange"></a></li>
			<li><a href="#" class="navy-bg" title="Navy"></a></li>
			<li><a href="#" class="yellow-bg" title="Yellow"></a></li>
			<li><a href="#" class="peach-bg" title="Peach"></a></li>
			<li><a href="#" class="beige-bg" title="Beige"></a></li>
			<li><a href="#" class="purple-bg" title="Purple"></a></li>
			<li><a href="#" class="red-bg" title="Red"></a></li>
			<li><a href="#" class="pink-bg" title="Pink"></a></li>
			<li><a href="#" class="celadon-bg" title="Celadon"></a></li>
			<li><a href="#" class="brown-bg" title="Brown"></a></li>
			<li><a href="#" class="cherry-bg" title="Cherry"></a></li>
			<li><a href="#" class="cyan-bg" title="Cyan"></a></li>
			<li><a href="#" class="gray-bg" title="Gray"></a></li>
			<li><a href="#" class="dark-bg" title="Dark"></a></li>
		</ul>
	</div>
	
	<div id="reset"><a href="#" class="button color">Reset</a></div>
		
</div>


</body>
</html>