projects-classic-4.html

<!DOCTYPE html>
<html lang="en" >
<head>
	<meta charset="utf-8">	
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<!-- Meta -->
	<meta name="description" content="SmartOn is a complete responsive, retina-ready and multipurpose theme." />
	<meta name="keywords" content="boostrap, responsive, html5, css3, jquery, theme, multicolor, parallax, retina, business" />
	<meta name="author" content="FourGrafx">
	<meta name="robots" content="index, follow" />
	<meta name="revisit-after" content="3 days" />
	<title>Avendor - Premium Multipurpose HTML5/CSS3 Theme - FourGrafx</title>

    <!-- Styles -->
           
		<!-- Bootstrap core CSS -->
  		<link rel="stylesheet" href="css/bootstrap.css">        

		<!-- Bootstrap RTL 
  		<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.2.0-rc2/css/bootstrap-rtl.css"> -->

		<!-- Font Awesome 4.1.0 -->
		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

		<!-- Avendor Icons Font -->
		<link href="css/avendor-font-styles.css" rel="stylesheet">

		<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
		<link rel="stylesheet" type="text/css" href="css/revolutionslider/settings.css" media="screen" />
    	
    	<!-- Animate CSS -->       
    	<link href="css/themecss/animate.css" rel="stylesheet">

    	<!-- Lightbox CSS -->       
    	<link href="css/themecss/lightbox.css" rel="stylesheet">
              
    	<!-- OWL Carousel -->       
    	<link href="css/owl-carousel/owl.carousel.css" rel="stylesheet">
        <link href="css/owl-carousel/owl.transitions.css" rel="stylesheet">

		<!-- Theme CSS -->
  		<link href="css/avendor-dark.css" rel="stylesheet">
        
		<!-- Color CSS -->
		<link href="css/colors/color-default.css" rel="stylesheet" title="style1">
   
	    <!-- Google Fonts -->
	    <link href='http://fonts.googleapis.com/css?family=Raleway:400,200,300,100,500,600,700,800,900' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>

	    <!-- Fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
	    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
    	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
    	<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
    	<link rel="shortcut icon" href="ico/favicon.png">
    
</head>

<body class="bg-pattern1" data-spy="scroll" data-target=".navbar">
<div id="preloader"></div>
    
	<!-- Page Main Wrapper -->
	<div class="page-wrapper" id="page-top">

		<!-- Header Container -->
		<div class="header-wrapper">

			<!-- Header Top Container -->
   			<div class="header-top">

                <!-- Container -->
                <div class="container">
                    
                    	<div class="row">
                        	
                            <!-- Left -->
                        	<div class="col-md-6 col-sm-6 columns">
                            	<div class="header-top-left">
                            	<ul class="social-top">
                                	<li><a href="" class="ToolTip" title="Facebook"><span class="fa fa-facebook"></span></a></li>
                                    <li><a href="" class="ToolTip" title="Twitter"><span class="fa fa-twitter"></span></a></li>
                                    <li><a href="" class="ToolTip" title="Google+"><span class="fa fa-google-plus"></span></a></li>
                                    <li><a href="" class="ToolTip" title="Linkedin"><span class="fa fa-linkedin"></span></a></li>
                                    <li><a href="" class="ToolTip" title="Pinterest"><span class="fa fa-pinterest"></span></a></li>
                                </ul>
                                </div>
                            </div>
                            <!-- /Left -->
                            
                            <!-- Right -->
                            <div class="col-md-6 col-sm-6 columns">
                            	<div class="header-top-right">
								<!-- Right Menu -->
									<ul class="top-menu">
										<li><a href="#"><i class="fa fa-shopping-cart"></i>0 item(s) - $0.00</a></li>
										<li>
											<div class="dropdown">
												<a href="#" data-toggle="dropdown" class="dropdown-toggle"><i class="fa fa-globe"></i>English <b class="caret"></b></a>
												<ul class="dropdown-menu dropdown-menu-right">
													<li class="active"><a href="#">English</a></li>
													<li><a href="#">French</a></li>
													<li><a href="#">German</a></li>
												</ul>
											</div>
										</li>
									</ul>
								<!-- /Right Menu -->
                                </div>
                            </div>
                            <!-- /right -->
                        
                        </div>
                
                </div>
				<!-- /Container -->
   
		    </div>   
			<!-- /Header Top Container -->

			<!-- Header Main Container -->
   			<div class="header-main">

                <!-- Container -->
                <div class="container">
                    
                	<!-- Main Navigation & Logo -->                    
					<div class="main-navigation">
                    
                    	<div class="row">
                            
                            <!-- Main Navigation -->
                            <div class="col-md-12 columns">

								<nav class="navbar navbar-default gfx-mega nav-left" role="navigation">									
                                    	
										<!-- Brand and toggle get grouped for better mobile display -->
										<div class="navbar-header">
											<a class="navbar-toggle" data-toggle="collapse" data-target="#gfx-collapse"></a>
                            				<div class="logo">
                           	    				<a href="index.html"><img src="img/theme/logo.png" alt="Logo"></a>
                                			</div>
										</div>

										<!-- Collect the nav links, forms, and other content for toggling -->
										<div class="collapse navbar-collapse" id="gfx-collapse">
											<ul class="nav navbar-nav gfx-nav">
												<li class="dropdown">
													<a href="#" class="dropdown-toggle" data-toggle="dropdown">Home <b class="caret"></b></a>
													<ul class="dropdown-menu">
														<li><a href="index.html">Home Default</a></li>
														<li><a href="shop-front.html">Home Shop</a></li>
                                                        <li><a href="index-style1.html">Home Style 1</a></li>
														<li><a href="index-style2.html">Home Style 2</a></li>
                                                        <li><a href="index-style3.html">Home Style 3</a></li>
													</ul>
												</li>
												<li class="dropdown gfx-mega-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Pages <b class="caret"></b></a>
													<ul class="dropdown-menu">
														<li>
															<div class="gfx-mega-content">
																<div class="row">
																	<div class="col-lg-3 col-sm-3">
                                                                    	<ul class="mega-menu-list">
                                                                            <li><a href="about-us.html">About Us Default</a></li>
																			<li><a href="about-us-alt.html">About Us Alt</a></li>
																			<li><a href="about-us-alt2.html">About Us Alt 2</a></li>
                                                                            <li><a href="services.html">Services Default</a></li>
                                                                            <li><a href="services-alt.html">Services Alt</a></li>
																			<li><a href="services-alt2.html">Services Alt 2</a></li>
																		</ul>
                                                                    </div>                                                          	
																	<div class="col-lg-3 col-sm-3">
                                                                    	<ul class="mega-menu-list">
																			<li><a href="our-team.html">Our Team</a></li>
																			<li><a href="our-team-alt.html">Our Team Alt</a></li>
																			<li><a href="process.html">Our Process</a></li>
																			<li><a href="process-alt.html">Our Process Alt</a></li>
                                                                            <li><a href="contact-alt.html">Contact Alt</a></li>
																			<li><a href="contact-alt2.html">Contact Alt 2</a></li>
																		</ul>
                                                                    </div>
																	<div class="col-lg-3 col-sm-3">
                                                                    	<ul class="mega-menu-list">
																			<li><a href="landing.html">Landing Page</a></li>
																			<li><a href="parallax-presentation.html">Parallax Presentation</a></li>
																			<li class="active"><a href="404.html">Page 404</a></li>
																			<li><a href="testimonials.html">Testimonials</a></li>
                                                                            <li><a href="pricing.html">Pricing</a></li>
                                                                        	<li><a href="custom-footer.html#custom-footer">Custom Footer</a></li>
																		</ul>
                                                                    </div>
																	<div class="col-lg-3 col-sm-3">
                                                                    	<ul class="mega-menu-list">
                                                                            <li><a href="under.html">Under Construction</a></li>
                                                                            <li><a href="faq.html">F.A.Q.</a></li>
                                                                            <li><a href="search.html">Search Results</a></li>
                                                                            <li><a href="full-width.html">Full Width</a></li>
                                                                            <li><a href="sidebar-left.html">Sidebar Left</a></li>
                                                                            <li><a href="sidebar-right.html">Sidebar Right</a></li>
																		</ul>
                                                                    </div>
																</div>
															</div>
														</li>
													</ul>
												</li>
												<li class="dropdown gfx-mega-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Features <b class="caret"></b></a>
													<ul class="dropdown-menu">
														<li>
															<div class="gfx-mega-content">
																<div class="row">
																	<div class="col-lg-3 col-sm-3">
                                                                    	<ul class="mega-menu-list">
                                                                        	<li class="title-header">Infographics &amp; Icons</li>
                                                                            <li><a href="font-avendor-icons.html">Avendor Custom Icons</a></li>
																			<li><a href="font-awesome.html">Font Awesome Icons</a></li>
																			<li><a href="animated-icons.html">Animated Icons / LivIcons</a></li>
                                                                            <li><a href="icon-boxes.html">Icon Boxes</a></li>
                                                                            <li><a href="icon-lists.html">Icon Lists</a></li>
																			<li><a href="counters.html">Counters</a></li>
																			<li><a href="progress-bars.html">Progress Bars</a></li>
																			<li><a href="pie-charts.html">Pie Charts</a></li>
																		</ul>
                                                                    </div>                                                          	
																	<div class="col-lg-3 col-sm-3">
                                                                    	<ul class="mega-menu-list">
                                                                        	<li class="title-header">Interactive Elements</li>
																			<li><a href="members.html">Team Member Blocks</a></li>
																			<li><a href="parallax.html">Parallax</a></li>
                                                                            <li><a href="carousel-sliders.html">Carousel &amp; Sliders</a></li>
                                                                            <li><a href="lightbox.html">Lightbox &amp; Images</a></li>
																			<li><a href="image-effects.html">Hover Image Effects</a></li>
																			<li><a href="tooltips.html">Tooltips</a></li>
																			<li><a href="creative-links.html">Creative Links</a></li>
																			<li><a href="animation.html">Animation On View</a></li>
																		</ul>
                                                                    </div>
																	<div class="col-lg-3 col-sm-3">
                                                                    	<ul class="mega-menu-list">
                                                                        	<li class="title-header">Default Elements</li>
                                                                            <li><a href="typography.html">Typography</a></li>
                                                                            <li><a href="buttons.html">Buttons</a></li>
                                                                            <li><a href="lists.html">Lists</a></li>
																			<li><a href="alerts.html">Alerts</a></li>
																			<li><a href="tabs.html">Tabs</a></li>
																			<li><a href="pricing-tables.html">Pricing Tables</a></li>
																			<li><a href="accordions.html">Accordions &amp; Toggles</a></li>
                                                                            <li><a href="dividers.html">Dividers</a></li>
																		</ul>
                                                                    </div>                                                                     
																	<div class="col-lg-3 col-sm-3">
                                                                    	<h4>AVENDOR Features</h4>
                                                                        <img src="img/demo/content/features.jpg" class="img-responsive" alt="AVENDOR Features">
                                                                    	<p>You can view all the shortcodes and features just by clicking the button bellow!</p>
                                                                        <a href="font-avendor-icons.html" class="btn btn-default btn-xs btn-alt">View All Features</a>
                                                                    </div> 
																</div>
															</div>
														</li>
													</ul>
												</li>
												<li class="dropdown">
													<a href="#" class="dropdown-toggle" data-toggle="dropdown">Shop <b class="caret"></b></a>
													<ul class="dropdown-menu">
														<li><a href="shop-front.html">Front Shop Page</a></li>
                                                        <li><a href="shop-page.html">Shop Page - Sidebar</a></li>
														<li><a href="shop-page-full.html">Shop Page - Full Width</a></li>
                                                        <li><a href="shop-product.html">Single Product Page</a></li>
													</ul>
												</li>
												<li class="dropdown active">
													<a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects <b class="caret"></b></a>
													<ul class="dropdown-menu">
														<li><a href="projects-grid-full.html">Grid Ful Width</a></li>
                                                        <li><a href="projects-grid-boxed.html">Grid Boxed</a></li>
														<li><a href="projects-grid-expand.html">Grid Expand</a></li>
                                                        <li><a href="projects-grid-mix.html">Grid Mixed</a></li>
                                                        <li><a href="projects-classic-2.html">Classic 2 Columns</a></li>
														<li><a href="projects-classic-3.html">Classic 3 Columns</a></li>
														<li class="active"><a href="projects-classic-4.html">Classic 4 Columns</a></li>
                                                        <li><a href="projects-classic-expand.html">Classic Expand</a></li>
                                                        <li><a href="projects-item-style.html">Classic Item Alt Style</a></li>
														<li><a href="projects-single.html">Single Project Page</a></li>
													</ul>
												</li>
												<li class="dropdown">
													<a href="blog-default.html" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
													<ul class="dropdown-menu">
														<li><a href="blog-default.html">Blog Classic</a></li>
                                                        <li><a href="blog-full.html">Blog Full Width</a></li>
														<li><a href="blog-masonry.html">Blog Masonry</a></li>
                                                        <li><a href="blog-single-post.html">Blog Single Post</a></li>
                                                        <li><a href="blog-single-post-full.html">Blog Single Full Width</a></li>
													</ul>
												</li>
                                                <li><a href="contact.html">Contact</a></li>
											</ul>
										</div><!-- /.navbar-collapse -->
									
								</nav>

                            </div>
                            <!-- /Main Navigation -->
                        
                        </div>              
                    
					</div>
                    <!-- /Main Navigation & Logo -->
                
                </div>
				<!-- /Container -->
   
		    </div>   
			<!-- /Header Main Container -->

		</div>
		<!-- /Header Container -->        

		<!-- Main Wrapper Header -->
        <div class="main-wrapper-header fancy-header dark-header parallax parallax-portfolio" data-stellar-background-ratio="0.4">
			
            <div class="bg-overlay bg-overlay-dark"></div>

 			<div class="container">
            
				<div class="row">
                	<div class="col-sm-12 columns">
                		<div class="page-title">
                    		<h2>Classic 4 Columns</h2>                    
                    	</div>
                    	<div class="breadcrumbs-wrapper">               
							<ol class="breadcrumb">
  								<li><a href="#">Home</a></li>
                                <li><a href="#">Projects</a></li>
								<li class="active">Classic 4 Columns</li>
							</ol>
                		</div>
					</div>
				</div>
                
			</div>
 
        </div>       
		<!-- /Main Wrapper Header -->

		<!-- Main Container -->
		<div class="main-wrapper">
            
			<div class="container">
            
				<div class="white-space space-big"></div>

				<div class="row">
					<div class="col-md-8 col-md-offset-2">
						<h3 class="fancy-title text-center"><span>Our Projects</span></h3>
                	</div>
				</div>

				<div class="row">
                	<div class="col-md-12">
										
                    <!-- PORTFOLIO -->
					<div class="portfolio clearfix">
							
						<ul id="filters" class="option-set">
							<li><a href="" class="filter selected" data-filter="*">All</a></li>
							<li><a href="" class="filter" data-filter=".branding">Branding</a></li>
                            <li><a href="" class="filter" data-filter=".print">Print</a></li>
							<li><a href="" class="filter" data-filter=".design">Web Design</a></li>
						</ul>                    
                        
						<!-- Portfolio Grid -->
						<div class="portfolio-grid portfolio-4-cols portfolio-classic">

							<!-- Portfolio Element -->
                            <div class="element isotope-item branding" data-content="./portfolio/portfolio2.html">
								<div class="element-inner animation fadeInLeft delay1">

                                	<div class="overlay-wrapper">
										<img src="img/demo/portfolio/branding/branding-1.jpg" width="1200" height="900" alt="Portfolio 1">                                  
                                    	<div class="overlay-wrapper-content">
                                    		<div class="overlay-title"><h3>Nulla porta lectus</h3></div>
                                        	<div class="overlay-details">
                                        		<a class="color-white" href="img/demo/portfolio/branding/branding-1.jpg" data-lightbox="image"><span class="livicon" data-n="plus"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>
                                        		<a class="color-white" href="projects-single.html"><span class="livicon" data-n="more"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>                                    	
                                    		</div>
                                        	<div class="overlay-bg"></div>
                                    	</div>
                                    </div>										

								</div>
							</div>
							<!-- /Portfolio Element -->

							<!-- Portfolio Element -->
                            <div class="element isotope-item print" data-content="./portfolio/portfolio2.html">
								<div class="element-inner animation fadeInLeft">

                                	<div class="overlay-wrapper">
										<img src="img/demo/portfolio/print/print-1.jpg" width="1200" height="900" alt="Portfolio 1">                                  
                                    	<div class="overlay-wrapper-content">
                                    		<div class="overlay-title"><h3>Aenean congue facilisis</h3></div>
                                        	<div class="overlay-details">
                                        		<a class="color-white" href="img/demo/portfolio/print/print-1.jpg" data-lightbox="image"><span class="livicon" data-n="plus"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>
                                        		<a class="color-white" href="projects-single.html"><span class="livicon" data-n="more"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>                                    	
                                    		</div>
                                        	<div class="overlay-bg"></div>
                                    	</div>
                                    </div>										

								</div>
							</div>
							<!-- /Portfolio Element -->

							<!-- Portfolio Element -->
                            <div class="element isotope-item design" data-content="./portfolio/portfolio2.html">
								<div class="element-inner animation fadeInRight">

                                	<div class="overlay-wrapper">
										<img src="img/demo/portfolio/webdesign/web-4.jpg" width="1200" height="900" alt="Portfolio 1">                                  
                                    	<div class="overlay-wrapper-content">
                                    		<div class="overlay-title"><h3>Sed sollicitudin vehicula</h3></div>
                                        	<div class="overlay-details">
                                        		<a class="color-white" href="img/demo/portfolio/webdesign/web-4.jpg" data-lightbox="image"><span class="livicon" data-n="plus"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>
                                        		<a class="color-white" href="projects-single.html"><span class="livicon" data-n="more"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>                                    	
                                    		</div>
                                        	<div class="overlay-bg"></div>
                                    	</div>
                                    </div>										

								</div>
							</div>
							<!-- /Portfolio Element -->

							<!-- Portfolio Element -->
                            <div class="element isotope-item branding" data-content="./portfolio/portfolio2.html">
								<div class="element-inner animation fadeInRight delay1">

                                	<div class="overlay-wrapper">
										<img src="img/demo/portfolio/branding/branding-2.jpg" width="1200" height="900" alt="Portfolio 1">                                  
                                    	<div class="overlay-wrapper-content">
                                    		<div class="overlay-title"><h3>Nam rhoncus massa</h3></div>
                                        	<div class="overlay-details">
                                        		<a class="color-white" href="img/demo/portfolio/branding/branding-2.jpg" data-lightbox="image"><span class="livicon" data-n="plus"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>
                                        		<a class="color-white" href="projects-single.html"><span class="livicon" data-n="more"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>                                    	
                                    		</div>
                                        	<div class="overlay-bg"></div>
                                    	</div>
                                    </div>										

								</div>
							</div>
							<!-- /Portfolio Element -->

							<!-- Portfolio Element -->
                            <div class="element isotope-item print" data-content="./portfolio/portfolio2.html">
								<div class="element-inner animation fadeInLeft delay1">

                                	<div class="overlay-wrapper">
										<img src="img/demo/portfolio/print/print-2.jpg" width="1200" height="900" alt="Portfolio 1">                                  
                                    	<div class="overlay-wrapper-content">
                                    		<div class="overlay-title"><h3>Duis ut ultricies ipsum</h3></div>
                                        	<div class="overlay-details">
                                        		<a class="color-white" href="img/demo/portfolio/print/print-2.jpg" data-lightbox="image"><span class="livicon" data-n="plus"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>
                                        		<a class="color-white" href="projects-single.html"><span class="livicon" data-n="more"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>                                    	
                                    		</div>
                                        	<div class="overlay-bg"></div>
                                    	</div>
                                    </div>										

								</div>
							</div>
							<!-- /Portfolio Element -->

							<!-- Portfolio Element -->
                            <div class="element isotope-item design" data-content="./portfolio/portfolio2.html">
								<div class="element-inner animation fadeInLeft">

                                	<div class="overlay-wrapper">
										<img src="img/demo/portfolio/webdesign/web-3.jpg" width="1200" height="900" alt="Portfolio 1">                                  
                                    	<div class="overlay-wrapper-content">
                                    		<div class="overlay-title"><h3>Ut sagittis ultrices urna</h3></div>
                                        	<div class="overlay-details">
                                        		<a class="color-white" href="img/demo/portfolio/webdesign/web-3.jpg" data-lightbox="image"><span class="livicon" data-n="plus"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>
                                        		<a class="color-white" href="projects-single.html"><span class="livicon" data-n="more"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>                                    	
                                    		</div>
                                        	<div class="overlay-bg"></div>
                                    	</div>
                                    </div>										

								</div>
							</div>
							<!-- /Portfolio Element -->

							<!-- Portfolio Element -->
                            <div class="element isotope-item branding" data-content="./portfolio/portfolio2.html">
								<div class="element-inner animation fadeInRight">

                                	<div class="overlay-wrapper">
										<img src="img/demo/portfolio/branding/branding-3.jpg" width="1200" height="900" alt="Portfolio 1">                                  
                                    	<div class="overlay-wrapper-content">
                                    		<div class="overlay-title"><h3>Aenean rhoncus</h3></div>
                                        	<div class="overlay-details">
                                        		<a class="color-white" href="img/demo/portfolio/branding/branding-3.jpg" data-lightbox="image"><span class="livicon" data-n="plus"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>
                                        		<a class="color-white" href="projects-single.html"><span class="livicon" data-n="more"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>                                    	
                                    		</div>
                                        	<div class="overlay-bg"></div>
                                    	</div>
                                    </div>										

								</div>
							</div>
							<!-- /Portfolio Element -->

							<!-- Portfolio Element -->
                            <div class="element isotope-item print" data-content="./portfolio/portfolio2.html">
								<div class="element-inner animation fadeInRight delay1">

                                	<div class="overlay-wrapper">
										<img src="img/demo/portfolio/print/print-3.jpg" width="1200" height="900" alt="Portfolio 1">                                  
                                    	<div class="overlay-wrapper-content">
                                    		<div class="overlay-title"><h3>Curabitur in lectus est</h3></div>
                                        	<div class="overlay-details">
                                        		<a class="color-white" href="img/demo/portfolio/print/print-3.jpg" data-lightbox="image"><span class="livicon" data-n="plus"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>
                                        		<a class="color-white" href="projects-single.html"><span class="livicon" data-n="more"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>                                    	
                                    		</div>
                                        	<div class="overlay-bg"></div>
                                    	</div>
                                    </div>										

								</div>
							</div>
							<!-- /Portfolio Element -->

							<!-- Portfolio Element -->
                            <div class="element isotope-item design" data-content="./portfolio/portfolio2.html">
								<div class="element-inner animation fadeInLeft delay1">

                                	<div class="overlay-wrapper">
										<img src="img/demo/portfolio/webdesign/web-2.jpg" width="1200" height="900" alt="Portfolio 1">                                  
                                    	<div class="overlay-wrapper-content">
                                    		<div class="overlay-title"><h3>Nullam diam eros</h3></div>
                                        	<div class="overlay-details">
                                        		<a class="color-white" href="img/demo/portfolio/webdesign/web-2.jpg" data-lightbox="image"><span class="livicon" data-n="plus"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>
                                        		<a class="color-white" href="projects-single.html"><span class="livicon" data-n="more"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>                                    	
                                    		</div>
                                        	<div class="overlay-bg"></div>
                                    	</div>
                                    </div>										

								</div>
							</div>
							<!-- /Portfolio Element -->

							<!-- Portfolio Element -->
                            <div class="element isotope-item branding" data-content="./portfolio/portfolio2.html">
								<div class="element-inner animation fadeInLeft">

                                	<div class="overlay-wrapper">
										<img src="img/demo/portfolio/branding/branding-4.jpg" width="1200" height="900" alt="Portfolio 1">                                  
                                    	<div class="overlay-wrapper-content">
                                    		<div class="overlay-title"><h3>Phasellus at felis lorem</h3></div>
                                        	<div class="overlay-details">
                                        		<a class="color-white" href="img/demo/portfolio/branding/branding-4.jpg" data-lightbox="image"><span class="livicon" data-n="plus"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>
                                        		<a class="color-white" href="projects-single.html"><span class="livicon" data-n="more"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>                                    	
                                    		</div>
                                        	<div class="overlay-bg"></div>
                                    	</div>
                                    </div>										

								</div>
							</div>
							<!-- /Portfolio Element -->

							<!-- Portfolio Element -->
                            <div class="element isotope-item print" data-content="./portfolio/portfolio2.html">
								<div class="element-inner animation fadeInRight">

                                	<div class="overlay-wrapper">
										<img src="img/demo/portfolio/print/print-4.jpg" width="1200" height="900" alt="Portfolio 1">                                  
                                    	<div class="overlay-wrapper-content">
                                    		<div class="overlay-title"><h3>Sed sollicitudin vehicula</h3></div>
                                        	<div class="overlay-details">
                                        		<a class="color-white" href="img/demo/portfolio/print/print-4.jpg" data-lightbox="image"><span class="livicon" data-n="plus"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>
                                        		<a class="color-white" href="projects-single.html"><span class="livicon" data-n="more"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>                                    	
                                    		</div>
                                        	<div class="overlay-bg"></div>
                                    	</div>
                                    </div>										

								</div>
							</div>
							<!-- /Portfolio Element -->

							<!-- Portfolio Element -->
                            <div class="element isotope-item design" data-content="./portfolio/portfolio2.html">
								<div class="element-inner animation fadeInRight delay1">

                                	<div class="overlay-wrapper">
										<img src="img/demo/portfolio/webdesign/web-1.jpg" width="1200" height="900" alt="Portfolio 1">                                  
                                    	<div class="overlay-wrapper-content">
                                    		<div class="overlay-title"><h3>Fusce orci nunc</h3></div>
                                        	<div class="overlay-details">
                                        		<a class="color-white" href="img/demo/portfolio/webdesign/web-1.jpg" data-lightbox="image"><span class="livicon" data-n="plus"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>
                                        		<a class="color-white" href="projects-single.html"><span class="livicon" data-n="more"  data-color="#ffffff" data-hovercolor="#ffffff" data-op="1" data-onparent="true"></span></a>                                    	
                                    		</div>
                                        	<div class="overlay-bg"></div>
                                    	</div>
                                    </div>										

								</div>
							</div>
							<!-- /Portfolio Element -->

                        </div>
                        <!-- /Portfolio Grid -->
                        					
                    </div>
					<!-- /PORTFOLIO-->
                    </div>
				</div>

				<div class="row">
					<div class="col-md-8 col-md-offset-2">
                       	<div class="white-space space-medium"></div>
						<div class="text-center"><a class="btn btn-primary btn-lg">View All Projects</a></div>
                    </div>
				</div>

				<div class="white-space space-medium"></div>
                
			</div>                                               

		</div>
		<!-- /Main Container -->      

		<!-- Footer Container -->
		<div class="footer-wrapper">

			<!-- Footer Top Container -->
    		<div class="footer-top">            
                 
                <!-- Google Map -->      	
				<a class="gmap-button">Locate us on map</a>
                <div class="gmap-wrapper">
                	<div id="google-map-footer"></div>
                </div>
				<!-- /Google Map --> 
                
			</div>
			<!-- /Footer Top Container -->

			<!-- Footer Bottom Container -->
			<div class="footer-bottom">

                <!-- Container -->
                <div class="container">
                
                	<div class="row">
                        <!-- Footer Menu -->
  						<div class="col-md-12 col-sm-12 columns">
                        	<div class="menu-footer">
                            	<ul class="list-inline">
                                	<li><a href="">Home</a></li>
                                    <li><a href="">About Us</a></li>
                                    <li><a href="">Shop</a></li>
                                    <li><a href="">Blog</a></li>
                                    <li><a href="">Portfolio</a></li>                                                                        
                                    <li><a href="">Contact</a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- /Footer Menu -->
                    	<!-- Copyright -->
  						<div class="col-md-12 col-sm-12 columns">
                        	<div class="copyright">
                        		<p>Copyright © 2014 - Avendor | All Rights Reserved</p>
                            </div>
                        </div>
                        <!-- /Copyright -->
                        <!-- Footer Social -->
  						<div class="col-md-12 col-sm-12 columns">
                        	<div class="social-footer">
                            	<ul class="list-inline social-list">
                                	<li><a href="" class="ToolTip" title="Facebook"><span class="fa fa-facebook"></span></a></li>
                                    <li><a href="" class="ToolTip" title="Twitter"><span class="fa fa-twitter"></span></a></li>
                                    <li><a href="" class="ToolTip" title="Google+"><span class="fa fa-google-plus"></span></a></li>
                                    <li><a href="" class="ToolTip" title="Pinterest"><span class="fa fa-pinterest"></span></a></li>
                                    <li><a href="" class="ToolTip" title="Linkedin"><span class="fa fa-linkedin"></span></a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- /Footer Social -->
					</div>
                
                </div>
				<!-- /Container -->

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

		</div>
		<!-- /Footer Container -->

	</div>	

	<!-- Back To Top -->
	<a href="#page-top" class="scrollup smooth-scroll" ><span class="fa fa-angle-up"></span></a>
	<!-- /Back To Top -->

 
    <!-- Javascripts
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

	<script type="text/javascript" src="js/themejs/jquery.countdown.js"></script>

	<!-- Preloader -->
	<script src="js/themejs/jquery.queryloader2.min.js" type="text/javascript"></script>

	<!-- Smooth Scroll -->
	<script src="js/themejs/SmoothScroll.js" type="text/javascript"></script>

	<!-- Stick On Scroll -->
	<script src="js/themejs/jquery.stickOnScroll.js" type="text/javascript"></script>
    
    <!-- Scrolling Smooth to section - requires jQuery Easing plugin -->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
    <script src="js/revolutionslider/jquery.themepunch.plugins.min.js"></script>
    <script src="js/revolutionslider/jquery.themepunch.revolution.min.js"></script>          

	<!-- LivIcons -->
	<script src="js/livicons/livicons-1.3.min.js" type="text/javascript"></script>
    <script src="js/livicons/raphael-min.js" type="text/javascript"></script>
    
	<!-- Portfolio -->
	<script src="js/themejs/jquery.isotope.min.js" type="text/javascript"></script>
    <script src="js/themejs/jquery.colio.min.js" type="text/javascript"></script>

	<!-- Parallax -->
	<script src="js/themejs/jquery.stellar.min.js" type="text/javascript"></script>

	<!-- Carousel -->
	<script src="js/owl-carousel/owl.carousel.js" type="text/javascript"></script>

	<!-- Counters -->
	<script src="js/themejs/jquery.countTo.js" type="text/javascript"></script>

	<!-- Lightbox -->
	<script src="js/themejs/jquery.magnific-popup.min.js" type="text/javascript"></script>

	<!-- Tooltips -->
	<script src="js/themejs/jQuery.Opie.Tooltip.min.js" type="text/javascript"></script>

	<!-- Animation Viewport -->
	<script src="js/themejs/jquery.waypoints.min.js" type="text/javascript"></script>
    
	<!-- Pie Chart -->
	<script src="js/themejs/jquery.easypiechart.min.js" type="text/javascript"></script>
 
 	<!-- Twitter -->
	<script src="twitter/jquery.tweet.js" type="text/javascript"></script>
    
    <!-- Google Maps -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false"></script>
   
    <!-- Load Scripts -->
	<script src="js/themejs/application.js"></script>

  </body>
</html>