tooltips.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><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 active"><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 class="active"><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">
													<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><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 dark-header bg-color-dark">
		
        	<div class="container">
            
				<div class="row">            	
                	<div class="col-sm-6 columns">                
                		<div class="page-title">
                    		<h2>Tooltips</h2>                    
                    	</div>                
                	</div>
            
            		<div class="col-sm-6 columns">					
                    	<div class="breadcrumbs-wrapper">               
							<ol class="breadcrumb">
  								<li><a href="#">Home</a></li>
                                <li><a href="#">Features</a></li>
								<li class="active">Tooltips</li>
							</ol>
                		</div>                    
                	</div>
            	</div>
                
            </div>

		</div>
		<!-- /Main Wrapper Header -->        

		<!-- Main Container -->
		<div class="main-wrapper">

        	<!-- Container -->
            <div class="container content-with-sidebar">
            
            	<div class="row">

                    <!-- Sidebar -->
                    <div class="col-sm-4 col-md-3 columns sidebar sidebar-left">
                    	<div class="white-space space-medium"></div>
                        
                        	<div class="sidebar-content">
                            
                            	<div class="sidebar-widget">
                            
                            		<h4 class="title-widget fancy-title"><span>Infographics &amp; Icons</span></h4>                            
									<ul class="nav nav-pills nav-stacked">
                                    	<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="sidebar-widget">
                            
                            		<h4 class="title-widget fancy-title"><span>Interactive Elements</span></h4>                            
									<ul class="nav nav-pills nav-stacked">
										<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 class="active"><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="sidebar-widget">
                            
                            		<h4 class="title-widget fancy-title"><span>Default Elements</span></h4>                            
									<ul class="nav nav-pills nav-stacked">
                                    	<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>
                            
                        <div class="white-space space-medium"></div>
                    </div>
                    <!-- /Sidebar -->

					<div class="col-sm-8 col-md-9 columns">                    
                    	<div class="white-space space-medium"></div>
                        
                    	<!-- /Content -->
                        <div class="row">                        
                            <div class="col-sm-12">
                            
								<h3 class="fancy-title text-center"><span>Tooltips</span></h3>   
                                <p class="lead text-center">Aliquam eu ante iaculis, ultricies orci ut, pellentesque elit. Curabitur placerat orci libero. Aliquam blandit sed eros quis scelerisque.</p>
                                
                                <div class="white-space space-medium"></div>
                                
                                <div class="row">
                                	<div class="col-md-4 columns">
                                		<h4 class="fancy-title text-center"><span>Simple Tooltip</span></h4>								
                                		<p class="text-center"><a href="#" class="ToolTip" data-opie-position="tc:bc" title="Simple Tooltip">Simple Tooltip</a></p>
                            		</div>
                                    <div class="col-md-4 columns">
                                		<h4 class="fancy-title text-center"><span>Button Tooltip</span></h4>								
                                		<p class="text-center"><a href="#" class="ToolTip btn btn-default btn-alt" data-opie-position="tc:bc" title="Ut in suscipit nibh. Suspendisse a ipsum sem.">Button Tooltip</a></p>
                            		</div>
                                    <div class="col-md-4 columns">
                                		<h4 class="fancy-title text-center"><span>Tooltip HTML Content</span></h4>								
                                        <!-- HTML Tooltip content-->										
                                        <div class="myToolTipTemlate" style="display:none">
											<h4 class="color-white">{title}</h4>
											<div class="text-center">{data-opie-content}</div>
											<img src="{data-opie-image}" class="img-responsive"/>
											<div class="clear"></div>
										</div>
                                        <!-- /HTML Tooltip content-->
										<p class="text-center"><a class="ToolTip btn btn-default btn-alt" href="http://www.opiescripts.com" data-opie-position="tc:bc" data-opie-template=".myToolTipTemlate" title="Tooltip HTML Content" data-opie-content="Fusce convallis adipiscing mi ut lobortis.<br/> Integer eu mauris mi. Aliquam erat volutpat.<br/> Maecenas velit dui, dapibus quis imperdiet at, tristique eu urna." data-opie-image="img/demo/content/tooltip.png">HTML Content</a></p>
                            		</div>
                                </div>

                                <div class="white-space space-medium"></div>
                                
                                <div class="row">
                                	<div class="col-md-12 columns">
                                		<h4 class="fancy-title text-center"><span>Tooltip Position</span></h4>								
                                		<p class="text-center">
                                        	<a href="#" class="ToolTip btn btn-default btn-alt" data-opie-position="tl:bl" title="Simple Tooltip">Top Left Tooltip</a>
                                            <a href="#" class="ToolTip btn btn-default btn-alt" data-opie-position="tc:bc" title="Simple Tooltip">Top Center Tooltip</a>
                                            <a href="#" class="ToolTip btn btn-default btn-alt" data-opie-position="tr:br" title="Simple Tooltip">Top Right Tooltip</a>
                                        </p>
                                        <div class="white-space space-small"></div>
                                		<p class="text-center">
                                        	<a href="#" class="ToolTip btn btn-default btn-alt" data-opie-position="bl:tl" title="Simple Tooltip">Bottom Left Tooltip</a>
                                            <a href="#" class="ToolTip btn btn-default btn-alt" data-opie-position="bc:tc" title="Simple Tooltip">Bottom Center Tooltip</a>
                                            <a href="#" class="ToolTip btn btn-default btn-alt" data-opie-position="br:tr" title="Simple Tooltip">Bottom Right Tooltip</a>
                                        </p>
                                        <div class="white-space space-small"></div>
                                		<p class="text-center">
                                        	<a href="#" class="ToolTip btn btn-default btn-alt" data-opie-position="ml:mr" title="Simple Tooltip">Middle Left Tooltip</a>
                                            <a href="#" class="ToolTip btn btn-default btn-alt" data-opie-position="mr:ml" title="Simple Tooltip">Middle Right Tooltip</a>
                                        </p>
                            		</div>
                                </div>

                                <div class="white-space space-medium"></div>
                                
                                <div class="row">
                                	<div class="col-md-12 columns">
                                		<h4 class="fancy-title text-center"><span>Content Tooltips</span></h4>								
                                		<p class="text-center">
                                        	Quisque eleifend ipsum est, eu luctus orci <a href="#" class="ToolTip" data-opie-position="tc:bc" title="Simple Tooltip">aliquet molestie</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas <a href="#" class="ToolTip" data-opie-position="tc:bc" title="Simple Tooltip">commodo</a> tristique eros quis adipiscing. Donec tristique <a href="#" class="ToolTip" data-opie-position="tc:bc" title="Simple Tooltip">ipsum neque</a>, vel congue nisi iaculis in. Integer id euismod odio. Sed et mollis lacus, ac tempus justo. Donec vel tempor dolor. Pellentesque <a href="#" class="ToolTip" data-opie-position="tc:bc" title="Simple Tooltip">euismod</a> turpis nec sem iaculis, nec iaculis nunc feugiat.
                                        </p>

                            		</div>
                                </div>
                                                              
                            </div>
                        </div>
                    	<!-- /Content -->
                        						
                        <div class="white-space space-small"></div>
                    </div>
                
                </div>          
            	
            </div>
			<!-- /Container -->
                                   
		</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>