<!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="parallax-titlebar fullwidth-element"  data-background="#000" data-opacity="0.45" data-height="160">

	<img src="images/titlebar_bg_02.jpg" alt="" />
	<div class="parallax-overlay"></div>

	<div class="parallax-content">
		<h2>Elements <span>Custom Parallax Header</span></h2>

		<nav id="breadcrumbs">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li>Elements</li>
			</ul>
		</nav>
	</div>
</section>


<div class="container">

	<!-- Tabs
	================================================= -->
	<div class="row justify-content-center">
		<div class="col-10 col-md-6">
			<h3 class="headline">Tabs</h3><span class="line margin-bottom-3-"></span><div class="clearfix"></div>

			<!-- Tabs Navigation -->
			<ul class="tabs-nav">
				<li class="active"><a href="#tab1">Tab #1</a></li>
				<li><a href="#tab2">Tab #2</a></li>
				<li><a href="#tab3">Tab #3</a></li>
			</ul>

			<!-- Tabs Content -->
			<div class="tabs-container">
				<div class="tab-content" id="tab1">Lorem ipsum pharetra lorem felis. Aliquam egestas consectetur elementum class aptentea taciti sociosqu ad litora torquent perea conubia nostra lorem consectetur adipiscing elit. Donec vestibulum justo a diam ultricies pellentesque.</div>
				<div class="tab-content" id="tab2">Aenean dolor mi, luctus et laoreet hendrerit, condimentum faucibus mi. Nam et sem eros. Sed sed eros nec massa pellentesque accumsan in nec magna. Donec sollicitudin enim nec justo mollis bibendum. Nulla eleifend mollis velit. Ut sed risus eget metus egestas sagittis. Etiam vestibulum interdum turpis.</div>
				<div class="tab-content" id="tab3">Suspendisse ut laoreet massa. Etiam vel dolor eu quam varius tempor eu eu mi. Duis auctor interdum ligula ut faucibus. Vivamus lorem ipsum dolor sit amet in tincidunt augue. Aenean at ligula justo, sed gravida metus. </div>
			</div>

		<br>
		</div>
	

		<!-- Accordion
		================================================== -->
		<div class="col-10 col-md-6">
			<h3 class="headline">Accordions</h3><span class="line margin-bottom-35"></span><div class="clearfix"></div>

				<!-- Accordion -->
				<div class="accordion">

					<!-- Section 1 -->
					<h3><span class="ui-accordion-header-icon ui-icon ui-accordion-icon"></span><i class="fa fa-life-saver"></i> Accordion #1</h3>
					<div>
						<p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate aliquam egestas litora torquent conubia.</p>
					</div>

					<!-- Section 2 -->
					<h3><span class="ui-accordion-header-icon ui-icon ui-accordion-icon"></span><i class="fa fa-user"></i> Accordion #2</h3>
					<div>
						<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. Nullam laoreet, velit ut taciti sociosqu condimentum feugiat.</p>
					</div>

					<!-- Section 3 -->
					<h3><span class="ui-accordion-header-icon ui-icon ui-accordion-icon"></span><i class="fa fa-trophy"></i> Accordion #3</h3>
					<div>
						<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper.</p>
					</div>

				</div>
				<!-- Accordion / End -->
		</div>
	</div>
<div class="clearfix"></div>
<br>


<!-- Content Boxes
================================================== -->
	<div class="row justify-content-center">
		<div class="col-10 col-md-12">
			<h3 class="headline">Content Boxes</h3><span class="line margin-bottom-35"></span><div class="clearfix"></div>
		</div>
	</div>

	<div class="row justify-content-center">
		<div class="col-10 col-md-3">
			<a href="#">
			<div class="content-box color-effect-1">
				<h3>Effect #1</h3>

					<div class="box-icon-wrap box-icon-effect-1 box-icon-effect-1a">
						<div class="box-icon"><i class="fa fa-bolt"></i></div>
					</div>

				<p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
			</div>
			</a>
		</div>
		
		<div class="col-10 col-md-3">
			<a href="#">
			<div class="content-box color-effect-2">
				<h3>Effect #2</h3>
					<div class="box-icon-wrap box-icon-effect-2 box-icon-effect-2a">
						<div class="box-icon"><i class="fa fa-globe"></i></div>
					</div>
				<p>Vestibulum non nibh porttitor, eleifend purus eu, pulvinar orci gravida lobortis magna.</p>
			</div>
			</a>
		</div>

		<div class="col-10 col-md-3">
			<a href="#">
			<div class="content-box color-effect-3">
				<h3>Effect #3</h3>
					<div class="box-icon-wrap box-icon-effect-3 box-icon-effect-3a">
						<div class="box-icon"><i class="fa fa-cogs"></i></div>
					</div>
				<p>Vestibulum non nibh porttitor, eleifend purus eu, pulvinar orci gravida lobortis magna.</p>
			</div>
			</a>
		</div>
		
		<div class="col-10 col-md-3">
			<a href="#">
			<div class="content-box color-effect-4">
				<h3>Effect #4</h3>
					<div class="box-icon-wrap box-icon-effect-4 box-icon-effect-4a">
						<div class="box-icon"><i class="fa fa-paw"></i></div>
					</div>
				<p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
			</div>
			</a>
		</div>
	</div>

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


<!-- Icon Headlines
================================================== -->
	<div class="row justify-content-center">
		<div class="col-10 col-md-12">
			<h3 class="headline">Icon Headlines</h3><span class="line margin-bottom-35"></span><div class="clearfix"></div>
		</div>
	</div>

	<div class="row justify-content-center">
		<div class="col-10 col-md-4">
			<!-- Service -->
			<div class="icon-box">
				<span><i class="fa fa-pencil"></i></span>
				<div class="icon-description">
					<h3>Illustration</h3>
					<p>Nam condimentum nec mi aliquam accumsan phasellus nulla lorem gravida.</p>
					<a href="#">More Info</a>
				</div>
			</div>
		</div>

		<div class="col-10 col-md-4">
			<!-- Service -->
			<div class="icon-box">
				<span><i class="fa fa-cogs"></i></span>
				<div class="icon-description">
					<h3>Development</h3>
					<p>Suspendisse sollicitudin diam eu leo rhoncus pharetra praesent turpis eget metus.</p>
					<a href="#">More Info</a>
				</div>
			</div>
		</div>

		<div class="col-10 col-md-4">
			<!-- Service -->
			<div class="icon-box">
				<span><i class="fa fa-lightbulb-o"></i></span>
				<div class="icon-description">
					<h3>User Experience</h3>
					<p>Morbi vitae augue vel nulla pharetra laoreet lorem vitae elit integer tortor justo.</p>
					<a href="#">More Info</a>
				</div>
			</div>
		</div>
	</div>
 
<div class="clearfix"></div>
<div class="margin-top-30"></div>


<!-- Social Icons
================================================== -->
	<div class="row justify-content-center">
		<div class="col-10 col-md-12">
			<h3 class="headline">Social Icons</h3><span class="line margin-bottom-35"></span><div class="clearfix"></div>
			<!-- Social Icons / Start -->
			<ul class="social-icons">
				<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="facebook" href="#"><i class="icon-facebook"></i></a></li>
				<li><a class="linkedin" href="#"><i class="icon-linkedin"></i></a></li>
				<li><a class="gplus" href="#"><i class="icon-gplus"></i></a></li>
				<li><a class="stumbleupon" href="#"><i class="icon-stumbleupon"></i></a></li>
				<li><a class="fivehundredpx" href="#"><i class="icon-fivehundredpx"></i></a></li>
				<li><a class="pinterest" href="#"><i class="icon-pinterest"></i></a></li>
				<li><a class="forrst" href="#"><i class="icon-forrst"></i></a></li>
				<li><a class="digg" href="#"><i class="icon-digg"></i></a></li>
				<li><a class="spotify" href="#"><i class="icon-spotify"></i></a></li>
				<li><a class="reddit" href="#"><i class="icon-reddit"></i></a></li>
				<li><a class="delicious" href="#"><i class="icon-delicious"></i></a></li>
				<li><a class="appstore" href="#"><i class="icon-appstore"></i></a></li>
				<li><a class="paypal" href="#"><i class="icon-paypal"></i></a></li>
				<li><a class="blogger" href="#"><i class="icon-blogger"></i></a></li>
				<li><a class="evernote" href="#"><i class="icon-evernote"></i></a></li>
				<li><a class="instagram" href="#"><i class="icon-instagram"></i></a></li>
				<li><a class="flickr" href="#"><i class="icon-flickr"></i></a></li>
				<li><a class="rss" href="#"><i class="icon-rss"></i></a></li>
				<li><a class="youtube" href="#"><i class="icon-youtube"></i></a></li>
				<li><a class="vimeo" href="#"><i class="icon-vimeo"></i></a></li>
				<li><a class="xing" href="#"><i class="icon-xing"></i></a></li>
				<li><a class="yahoo" href="#"><i class="icon-yahoo"></i></a></li>
				<li><a class="amazon" href="#"><i class="icon-amazon"></i></a></li>
				<li><a class="steam" href="#"><i class="icon-steam"></i></a></li>
				<li><a class="dropbox" href="#"><i class="icon-dropbox"></i></a></li>
				<li><a class="github" href="#"><i class="icon-github"></i></a></li>
				<li><a class="lastfm" href="#"><i class="icon-lastfm"></i></a></li>
				<li><a class="tumblr" href="#"><i class="icon-tumblr"></i></a></li>
			</ul>
			<!-- Social Icons / End -->
		</div>
	</div>

</div>

<br><br>

<!-- Parallax Banner
================================================== -->
<div class="parallax-banner fullwidth-element"  data-background="#000" data-opacity="0.45" data-height="200">
	<img src="images/parallax_02.jpg" alt="" />
	<div class="parallax-overlay"></div>
	<div class="parallax-title">Parallax Banner <span>With Headline Example</span></div>
</div>


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

<!-- Skill Bars
================================================== -->
	<div class="row justify-content-center">
		<div class="col-10 col-md-6">
		
			<h3 class="headline">Progress Bars</h3><span class="line margin-bottom-35"></span><div class="clearfix"></div>


			<div id="skillzz">

				<div class="skill-bar">
					<span class="skill-title">Photoshop <i>90%</i></span>
					<div class="skill-bar-value" style="width: 90%;"></div>
				</div>
		
				<div class="skill-bar">
					<span class="skill-title">JavaScript <i>80%</i></span>
					<div class="skill-bar-value" style="width: 80%;"></div>
				</div>


				<div class="skill-bar">
					<span class="skill-title">Usability <i>70%</i></span>
					<div class="skill-bar-value" style="width: 70%;"></div>
				</div>

				<div class="skill-bar">
					<span class="skill-title">Marketing <i>60%</i></span>
					<div class="skill-bar-value" style="width: 60%;"></div>
				</div>

			</div>

		</div>


	<!-- Alert Boxes
	================================================== -->

		<div class="col-10 col-md-6">
			<h3 class="headline">Alert Messages</h3><span class="line margin-bottom-35"></span><div class="clearfix"></div>
			
				<div class="notification error closeable">
					<p><span>Error!</span> Please fill in all the fields required.</p>
					<a class="close" href="#"></a>
				</div>

				<div class="notification success closeable">
					<p><span>Success!</span> You did it, now relax and enjoy it.</p>
					<a class="close" href="#"></a>
				</div>

				<div class="notification warning closeable">
					<p><span>Warning!</span> Change this and that and try again.</p>
					<a class="close" href="#"></a>
				</div>

				<div class="notification notice closeable">
					<p><span>Notice!</span> Please edit the information below.</p>
					<a class="close" href="#"></a>
				</div>
			
		</div>

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

<br>

<!-- Caption Hover Effect
================================================== -->
<div class="container" >
	<div class="col-10 col-md-12">
		<h3 class="headline">Caption Hover Effect</h3><span class="line margin-bottom-35"></span><div class="clearfix"></div></div>

	<div class="row justify-content-center">
		<div class="col-10 col-md-4">
			<a href="#" class="img-caption" >
				<figure>
					<img src="images/caption-hover-effect_01.jpg" alt="" />
					<figcaption>
						<h3>First Caption</h3>
						<span>Interdum fermentu</span>
					</figcaption>
				</figure>
			</a>
		</div>

		<div class="col-10 col-md-4">
			<a href="#" class="img-caption" >
				<figure>
					<img src="images/caption-hover-effect_02.jpg" alt="" />
					<figcaption>
						<h3>Second Caption</h3>
						<span>Turpis pulvinar</span>
					</figcaption>
				</figure>
			</a>
		</div>

		<div class="col-10 col-md-4">
			<a href="#" class="img-caption" >
				<figure>
					<img src="images/caption-hover-effect_03.jpg" alt="" />
					<figcaption>
						<h3>Third Caption</h3>
						<span>Ultrices posuere</span>
					</figcaption>
				</figure>
			</a>
		</div>
	</div>

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


<!-- Our Clients
================================================== -->

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

	<!-- Headline -->
	<div class="row justify-content-center">
		<div class="col-10 col-md-12">
			<h3 class="headline">Our Clients</h3>
			<span class="line margin-bottom-0"></span>
		</div>
	</div>

	<div class="row justify-content-center align-items-center">
		<div class="col">
		<!-- Navigation / Left -->
		<div class="carousel-li"><div id="showbiz_left_2" class="sb-navigation-left-2"><i class="fa fa-angle-left"></i></div></div>

		<!-- ShowBiz Carousel -->
		<div id="our-clients" class="showbiz-container carousel-li" style="margin-left: 10px;" >

			<!-- Portfolio Entries -->
			<div class="showbiz our-clients" data-left="#showbiz_left_2" data-right="#showbiz_right_2">
				<div class="overflowholder">

					<ul>
						<!-- Item -->
						<li><img src="images/logo-01.png" alt="" /></li>
						<li><img src="images/logo-02.png" alt="" /></li>
						<li><img src="images/logo-03.png" alt="" /></li>
						<li><img src="images/logo-04.png" alt="" /></li>
						<li><img src="images/logo-05.png" alt="" /></li>
						<li><img src="images/logo-06.png" alt="" /></li>
						<li><img src="images/logo-07.png" alt="" /></li>
					</ul>
					<div class="clearfix"></div>

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

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

	<!-- Navigation / Right -->
	<div class="carousel-li" style="margin-top: -75px;"><div id="showbiz_right_2" class="sb-navigation-right-2"><i class="fa fa-angle-right"></i></div></div>

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



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

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

	<div class="row justify-content-center">
		<div class="col-10 col-md-3">
			<div class="counter-box colored">
				<i class="fa fa-thumbs-o-up"></i>
				<span class="counter">2,147</span>
				<p>Happy Customers</p>
			</div>
		</div>

		<div class="col-10 col-md-3">
			<div class="counter-box">
				<i class="fa fa-group"></i>
				<span class="counter">3,275</span>
				<p>Registered Members</p>
			</div>
		</div>

		<div class="col-10 col-md-3">
			<div class="counter-box">
				<i class="fa  fa-shopping-cart"></i>
				<span class="counter">289</span>
				<p>Available Products</p>
			</div>
		</div>

		<div class="col-10 col-md-3">
			<div class="counter-box">
				<i class="fa  fa-tree"></i>
				<span class="counter">1,563</span>
				<p>Saved Trees</p>
			</div>
		</div>
	</div>

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


<br>
<br>


<!-- Happy Clients
================================================== -->

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

	<!-- Headline -->
	<div class="row justify-content-center">
		<div class="col-10 col-md-12">
			<h3 class="headline">Testimonials</h3>
			<span class="line margin-bottom-20"></span>
		</div>
	</div>

	<!-- Navigation / Left -->
	<div id="showbiz_left_3" class="sb-navigation-left-2 alt"><i class="fa fa-angle-left"></i></div>

	<!-- ShowBiz Carousel -->
	<div id="happy-clients" class="showbiz-container carousel-li " >

	<!-- Portfolio Entries -->
	<div class="showbiz our-clients" data-left="#showbiz_left_3" data-right="#showbiz_right_3">
		<div class="overflowholder">

			<ul>

				<li>
					<div class="happy-clients-photo"><img src="images/happy-clients-01.jpg" alt="" /></div>
					<div class="happy-clients-cite">Simple and clean - that's what people and me like the most! Beautifully crafted, well organized and thoroughly documented.</div>
					<div class="happy-clients-author">Jennie Wilson</div>
				</li>
				
				<li>
					<div class="happy-clients-photo"><img src="images/happy-clients-02.jpg" alt="" /></div>
					<div class="happy-clients-cite">Astrum is ridiculously powerful and easy to use, beginner or advanced. Always been on the hunt for handcrafted, clean themes.</div>
					<div class="happy-clients-author">Thomas Smith</div>
				</li>
				
				<li>
					<div class="happy-clients-photo"><img src="images/happy-clients-03.jpg" alt="" /></div>
					<div class="happy-clients-cite">What impressed me was the fast response to questions and helpful community conversation in the support forums.</div>
					<div class="happy-clients-author">Robert Lindstrom</div>
				</li>

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

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

	</div>
	</div>

	<!-- Navigation / Right -->
	<div id="showbiz_right_3" class="sb-navigation-right-2 alt"><i class="fa fa-angle-right"></i></div>

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


<!-- Info Banner
================================================== -->

<!-- Container -->
<div class="container">
	<div class="row justify-content-center">
		<div class="col-10 col-md-12">

			<div class="info-banner">
				<div class="info-content">
					<h3>Perfect Template for Showing Your Products</h3>
					<p>Trizzy is a premium template created for ecommerce and business websites</p>
				</div>
				<a href="#" class="button color">Get This Theme</a>
				<div class="clearfix"></div>
			</div>

		</div>
	</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>