<!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>FAQ</h2>
				
				<nav id="breadcrumbs">
					<ul>
						<li><a href="#">Home</a></li>
						<li>FAQ</li>
					</ul>
				</nav>
			</div>
		</div>
	</div>
</section>


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

<!-- Container -->
<div class="container">
	<div class="row justify-content-center">
		<div class="col-10 col-md-12">
			<h3 class="headline">Frequently Asked Questions</h3><span class="line margin-bottom-25"></span><div class="clearfix"></div>
		<p>Aliquam posuere erat et orci eleifend cursus. Nullam tempus odio sem, lacinia pellentesque neque mollis a. In ut tempor ligula. Vestibulum ultricies bibendum lorem, a sollicitudin tellus euismod vel. Nam suscipit, diam ut volutpat lobortis, nibh ipsum tempor nibh, a vehicula tellus justo id nibh. Nulla pretium mollis convallis. Phasellus a nibh aliquet, ullamcorper quam aliquam, faucibus nulla. Phasellus mollis tristique vehicula. Vivamus sagittis, sem sed posuere aliquet, massa odio lobortis.</p>
		</div>
	</div>
</div>
<!-- Container / End -->

<br />

<!-- Container -->
<div class="container margin-bottom-10">

	<div class="row justify-content-center">
		<!-- Toggles -->
		<div class="col-10 col-md-9">
		<div class="extra-padding">

			<!-- Toggle 1 -->
			<div class="toggle-wrap faq">
				<span class="trigger opened"><a href="#"><i class="toggle-icon"></i> What is a Premium Theme? </a></span>
				<div class="toggle-container">
					<p>Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Vivamus justo arcu, elementum a sollicitudin pellentesque, tincidunt ac enim. Proin id arcu ut ipsum vestibulum elementum.</p>
				</div>
			</div>

			<!-- Toggle 2 -->
			<div class="toggle-wrap faq">
				<span class="trigger"><a href="#"><i class="toggle-icon"></i> How much does it cost?</a></span>
				<div class="toggle-container">
					<p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
				</div>
			</div>

			<!-- Toggle 3 -->
			<div class="toggle-wrap faq">
				<span class="trigger"><a href="#"><i class="toggle-icon"></i> Why should I purchase a Premium Theme?</a></span>
				<div class="toggle-container">
					<p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
				</div>
			</div>

			<!-- Toggle 4 -->
			<div class="toggle-wrap faq">
				<span class="trigger"><a href="#"><i class="toggle-icon"></i> Where can I get support?</a></span>
				<div class="toggle-container">
					<p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
				</div>
			</div>

			<!-- Toggle 5 -->
			<div class="toggle-wrap faq">
				<span class="trigger"><a href="#"><i class="toggle-icon"></i> How important is branding in a website?</a></span>
				<div class="toggle-container">
					<p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
				</div>
			</div>

			<!-- Toggle 6 -->
			<div class="toggle-wrap faq">
				<span class="trigger"><a href="#"><i class="toggle-icon"></i> What is a User Interface?</a></span>
				<div class="toggle-container">
					<p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
				</div>
			</div>

			<!-- Toggle 7 -->
			<div class="toggle-wrap faq">
				<span class="trigger"><a href="#"><i class="toggle-icon"></i> Why should I use Premium Theme? </a></span>
				<div class="toggle-container">
					<p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
				</div>
			</div>

		</div>
		</div>
		
		<!-- Sidebar -->
		<div class="col-10 col-md-3">
			<a href="#">
			<div class="content-box color-effect-1">
				<h3>One More Question?</h3>

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

				<p>If you have more questions, send us a message and we will answer you as soon as possible.</p>
			</div>
			</a>
		</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>