<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="ThemeWagon" />
<meta name="Description" content="Responsive Multiporpuse HTML5 Website Template">
<meta name="keywords" content="Business, Agency, Corporate, Flat, Responsive, Website Template">

<title>caliFornia | Home - Multipage</title>


<!-- favicons
============================================= -->
<link rel="apple-touch-icon" sizes="57x57" href="assets/images/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="assets/images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/images/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/images/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/images/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/images/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
<link rel="manifest" href="assets/images/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="assets/images/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">


<!-- StyleSheets
============================================= -->

<!-- Twitter Bootstrap -->
<link rel="stylesheet" href="assets/lib/bootstrap/dist/css/bootstrap.min.css">

<!-- Library Stylesheets -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,700'>
<link rel="stylesheet" href="assets/lib/animsition/dist/css/animsition.min.css">
<link rel="stylesheet" href="assets/lib/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/lib/ionicons/css/ionicons.css">
<link rel="stylesheet" href="assets/lib/magnific-popup/dist/magnific-popup.css">

<link rel="stylesheet" type="text/css" href="assets/lib/flexslider/flexslider.css">
<link rel="stylesheet" type="text/css" href="assets/lib/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="assets/lib/owlcarousel/owl-carousel/owl.theme.css">
<link rel="stylesheet" type="text/css" href="assets/lib/owlcarousel/owl-carousel/owl.transitions.css">


<!-- Custom Template Styles -->
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/colors/red.css">
<link rel="stylesheet" href="assets/css/custom.css">

</head>

<body data-spy="scroll" data-target="#main-nav-collapse" data-offset="100">


<!-- Wrapper & Preloader
============================================= -->
<div id="zwrapper"
class="zwrapper animsition"
data-animsition-in-class="fade-in"
data-animsition-in-duration="1000"
data-animsition-out-class="fade-out"
data-animsition-out-duration="800"
data-page-loader-text="california">

 


<section id="topNavBar" class="nav-wrapper transparent red">
<div class="container-fluid">
<div id="menuzord" class="menuzord red">
<a href="index.html" class="menuzord-brand">
<img style="height: 50px;" src="assets/images/logos/1-w.png" alt="california">
</a>
<ul class="menuzord-menu">
<li class="active"><a href="#">Home</a>
<ul class="dropdown">
<li><a href="#">Landing</a>
<ul class="dropdown">
<li><a href="special_agency.html">Agency</a></li>
<li><a href="special_non_profit.html">Non-Profit</a></li>
<li><a href="special_portfolio.html">Portfolio</a></li>
<li><a href="special_restaurant.html">Restaurant</a></li>
<li><a href="special_shop.html">Fashion Shop</a></li>
<li><a href="special_startup.html">Startup</a></li>
</ul>
</li>

<li><a href="#">Multipage</a>
<ul class="dropdown">
<li><a href="index__mp__fullscreen_static.html">Fullscreen Static</a></li>
<li><a href="index__mp__flex_slider_fullscreen.html">Flex Slider Full Screen</a></li>
<li><a href="index__mp__flex_slider_classic.html">Flex Slider Classic</a></li>
<li><a href="index__mp__background_slider.html">Background Slider</a></li>
<li><a href="index__mp__slim_static.html">Slim Static</a></li>
<li><a href="index__mp__animated_cloud.html">Animated Cloud</a></li>
<li><a href="index__mp__owl_carousel.html">Owl Carousel</a></li>
<li><a href="index__mp__video_background_classic.html">Youtube Video Background</a></li>
<li><a href="index__mp__slim_text_rotator.html">Slim Text Rotator</a></li>
<li><a href="index__mp__text_rotator_wobble.html">Wobble Text Rotator</a></li>
<li><a href="index__mp__mask_text_rotator.html">Mask Text Rotator</a></li>
<li><a href="index__mp__video_player.html">Video Player</a></li>
<li><a href="index__mp__particle_background.html">Particle Background</a></li>
<li><a href="index__mp__particle_spider.html">Particle Spider</a></li>
<li><a href="index__mp__minimal.html">Minimal</a></li>
<li><a href="index__mp__ease_scroll.html">Ease Scroll</a></li>
</ul>
</li>
<li><a href="#">One Page</a>
<ul class="dropdown">
<li><a href="index__op__fullscreen_static.html">Full Screen Static</a></li>
<li><a href="index__op__exclusive_parallax.html">Exclucive Parallax</a></li>
<li><a href="index__op__text_rotator_clip.html">Text Rotator Clip</a></li>
<li><a href="index__op__exclusive_text_rotator.html">Exclusive Text Rotator</a></li>
<li><a href="index__op__video_background_HTML5.html">Video Background HTML5</a></li>
<li><a href="index__op__video_player.html">Video Player</a></li>
<li><a href="index__op__dot_nav.html">Dot Nav</a></li>
<li><a href="index__op__fullscreen_nav.html">Full Screen Nav</a></li>
<li><a href="index__op__color_overlay.html">Color Overlay</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Pages</a>
<ul class="dropdown">
<li><a href="blank_page.html">Blank Page</a></li>
<li><a href="RTL.html">RTL</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="#">Pricing</a>
<ul class="dropdown">
<li><a href="pricing__2_column.html">2 Columns</a></li>
<li><a href="pricing__3_column.html">3 Columns</a></li>
<li><a href="pricing__4_column.html">4 Columns</a></li>
</ul>
</li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="under_construction.html">Under Construction</a></li>
<li><a href="coming_soon.html">Coming Soon</a></li>
<li><a href="404.html">404</a></li>
<li><a href="#">Gallery</a>
<ul class="dropdown">
<li><a href="#">Full Width</a>
<ul class="dropdown">
<li><a href="gallery__full_width_3_column.html">3 Columns</a></li>
<li><a href="gallery__full_width_4_column.html">4 Columns</a></li>
<li><a href="gallery__full_width_5_column.html">5 Columns</a></li>
<li><a href="gallery__full_width_6_column.html">6 Columns</a></li>
<li><a href="gallery__full_width_7_column.html">7 Columns</a></li>
<li><a href="gallery__full_width_8_column.html">8 Columns</a></li>
</ul>
</li>
<li><a href="#">Full Width Gutter</a>
<ul class="dropdown">
<li><a href="gallery__full_width__gutter_3_column.html">3 Columns</a></li>
<li><a href="gallery__full_width__gutter_4_column.html">4 Columns</a></li>
<li><a href="gallery__full_width__gutter_5_column.html">5 Columns</a></li>
<li><a href="gallery__full_width__gutter_6_column.html">6 Columns</a></li>
<li><a href="gallery__full_width__gutter_7_column.html">7 Columns</a></li>
<li><a href="gallery__full_width__gutter_8_column.html">8 Columns</a></li>
</ul>
</li>
<li><a href="#">Boxed</a>
<ul class="dropdown">
<li><a href="gallery__boxed_1_column.html">1 Columns</a></li>
<li><a href="gallery__boxed_2_column.html">2 Columns</a></li>
<li><a href="gallery__boxed_3_column.html">3 Columns</a></li>
<li><a href="gallery__boxed_4_column.html">4 Columns</a></li>
<li><a href="gallery__boxed_5_column.html">5 Columns</a></li>
<li><a href="gallery__boxed_6_column.html">6 Columns</a></li>
</ul>
</li>
<li><a href="#">Boxed Gutter</a>
<ul class="dropdown">
<li><a href="gallery__boxed__gutter_2_column.html">2 Columns</a></li>
<li><a href="gallery__boxed__gutter_3_column.html">3 Columns</a></li>
<li><a href="gallery__boxed__gutter_4_column.html">4 Columns</a></li>
<li><a href="gallery__boxed__gutter_5_column.html">5 Columns</a></li>
<li><a href="gallery__boxed__gutter_6_column.html">6 Columns</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="sitemap.html">Sitemap</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<div class="megamenu">
<div class="megamenu-row row">
<div class="col-md-4 hidden-xs">
<img src="assets/images/others/nav_portfolio.png" alt="">
</div>

<div class="col-md-8">
<div class="row">
<div class="col-md-5th">
<h5>Full Width</h5>
<ul class="mega-sub-menu">
<li><a href="portfolio__full__width_2_column.html" title="">2 Columns</a></li>
<li><a href="portfolio__full__width_3_column.html" title="">3 Columns</a></li>
<li><a href="portfolio__full__width_4_column.html" title="">4 Columns</a></li>
<li><a href="portfolio__full__width_5_column.html" title="">5 Columns</a></li>
<li><a href="portfolio__full__width_6_column.html" title="">6 Columns</a></li>
</ul>
</div>
<div class="col-md-5th">
<h5>Bordered</h5>
<ul class="mega-sub-menu">
<li><a href="portfolio__bordered_2_column.html" title="">2 Columns</a></li>
<li><a href="portfolio__bordered_3_column.html" title="">3 Columns</a></li>
<li><a href="portfolio__bordered_4_column.html" title="">4 Columns</a></li>
<li><a href="portfolio__bordered_5_column.html" title="">5 Columns</a></li>
<li><a href="portfolio__bordered_6_column.html" title="">6 Columns</a></li>
</ul>
</div>
<div class="col-md-5th">
<h5>Boxed</h5>
<ul class="mega-sub-menu">
<li><a href="portfolio__boxed_2_column.html" title="">2 Columns</a></li>
<li><a href="portfolio__boxed_3_column.html" title="">3 Columns</a></li>
<li><a href="portfolio__boxed_4_column.html" title="">4 Columns</a></li>
<li><a href="portfolio__boxed_5_column.html" title="">5 Columns</a></li>
<li><a href="portfolio__boxed_6_column.html" title="">6 Columns</a></li>
</ul>
</div>
<div class="col-md-5th">
<h5>Standard</h5>
<ul class="mega-sub-menu">
<li><a href="portfolio__standard_2_column.html" title="">2 Columns</a></li>
<li><a href="portfolio__standard_3_column.html" title="">3 Columns</a></li>
<li><a href="portfolio__standard_4_column.html" title="">4 Columns</a></li>
<li><a href="portfolio__standard_5_column.html" title="">5 Columns</a></li>
<li><a href="portfolio__standard_6_column.html" title="">6 Columns</a></li>
</ul>
</div>
<div class="col-md-5th">
<h5>Single</h5>
<ul class="mega-sub-menu">
<li><a href="portfolio__single_featured_image.html" title="">Featured Image</a></li>
<li><a href="portfolio__single_featured_slider.html" title="">Featured Slider</a></li>
<li><a href="portfolio__single_featured_video.html" title="">Featured Video</a></li>
<li><a href="portfolio__single_featured_carousel.html" title="">Featured Carousel</a></li>
<li><a href="portfolio__single_with_sidebar.html" title="">With Sidebar</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li><a href="#">Blog</a>
<ul class="dropdown">
<li><a href="#">Classic</a>
<ul class="dropdown dropdown-left">
<li><a href="blog__classic_fullwidth.html">Full Width</a></li>
<li><a href="blog__classic_left_sidebar.html">Left Sidebar</a></li>
<li><a href="blog__classic_right_sidebar.html">Right Sidebar</a></li>
<li><a href="blog__classic_both_sidebar.html">Both Sidebar</a></li>
</ul>
</li>
<li><a href="#">Card</a>
<ul class="dropdown dropdown-left">
<li><a href="blog__card_fullwidth.html">Full Width</a></li>
<li><a href="blog__card_boxed.html">Boxed</a></li>
<li><a href="blog__card_left_sidebar.html">Left Sidebar</a></li>
<li><a href="blog__card_right_sidebar.html">Right Sidebar</a></li>
<li><a href="blog__card_both_sidebar.html">Both Sidebar</a></li>
</ul>
</li>
<li><a href="#">Single Blog Post</a>
<ul class="dropdown dropdown-left">
<li><a href="blog__single__fullwidth.html">Full Width</a></li>
<li><a href="blog__single__left_sidebar.html">Left Sidebar</a></li>
<li><a href="blog__single__right_sidebar.html">Right Sidebar</a></li>
<li><a href="blog__single__both_sidebar.html">Both Sidebar</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Shop</a>
<ul class="dropdown">
<li><a href="shop__home.html">Shop Home</a></li>
<li><a href="#">Product Archive</a>
<ul class="dropdown dropdown-left">
<li><a href="shop__product_archive_2_column.html">2 Column</a></li>
<li><a href="shop__product_archive_3_column.html">3 Column</a></li>
<li><a href="shop__product_archive_4_column.html">4 Column</a></li>
<li><a href="shop__product_archive_left_sidebar.html">Left Sidebar</a></li>
<li><a href="shop__product_archive_right_sidebar.html">Right Sidebar</a></li>
</ul>
</li>
<li><a href="#">Single Product</a>
<ul class="dropdown dropdown-left">
<li><a href="shop__single_product.html">Full Width</a></li>
<li><a href="shop__single_product__sidebar_left.html">Left Sidebar</a></li>
<li><a href="shop__single_product__sidebar_right.html">Right Sidebar</a></li>
</ul>
</li>
<li><a href="shop__cart.html">Cart</a></li>
</ul>
</li>
<li><a href="#">Components</a>
<ul class="dropdown">
<li><a href="icons.html"><i class="fa fa-heart"></i> &nbsp; Icons</a></li>
<li><a href="typography.html"><i class="fa fa-text-height"></i> &nbsp; Typography</a></li>
<li><a href="buttons.html"><i class="fa fa-plus-square"></i> &nbsp; Buttons</a></li>
<li><a href="forms.html"><i class="fa fa-toggle-on"></i> &nbsp; Forms</a></li>
<li><a href="tabs__accordions.html"><i class="fa fa-tasks"></i> &nbsp; Tabs &amp; Accordions</a></li>
<li><a href="alerts__wells.html"><i class="fa fa-exclamation-circle"></i> &nbsp; Alerts &amp; Wells</a></li>
<li><a href="call__to__action.html"><i class="fa fa-bell"></i> &nbsp; Call to Actions</a>
</ul>
</li>
<li class="item-icon hidden-xs">
<a id="toggelSearch" href="#">
<i class="ion-ios-search-strong"></i>
</a>
<form id="searchInput" class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="TYPE &amp; HIT ENTER...">
</div>
</form>
</li>

<li class="item-icon hidden-xs">
<a href="#">
<i class="ion-ios-cart"></i>
<span class="badge">2</span>
</a>

<div class="megamenu megamenu-quarter-width top-cart-content">
<div class="top-cart-title">Shopping Cart</div>
<div class="top-cart-items">
<div class="top-cart-item clearfix">
<div class="top-cart-item-image">
<a href="#"><img src="assets/images/shop/navbar_cart/cart_1.jpg" alt="Blue Round-Neck Tshirt"></a>
</div>
<div class="top-cart-item-desc">
<a href="#">Georgette &amp; Net Casual Top - Blue</a>
<span class="top-cart-item-price">$29.99</span>
<span class="top-cart-item-quantity">x 3</span>
</div>
</div>
<div class="top-cart-item clearfix">
<div class="top-cart-item-image">
<a href="#"><img src="assets/images/shop/navbar_cart/cart_2.jpg" alt="Light Blue Denim Dress"></a>
</div>
<div class="top-cart-item-desc">
<a href="#">Light Blue Denim Dress</a>
<span class="top-cart-item-price">$324.99</span>
<span class="top-cart-item-quantity">x 1</span>
</div>
</div>
</div>
<div class="top-cart-action clearfix">
<span class="pull-left top-checkout-price">$214.95</span>
<a class="btn btn-cal-default pull-right" href="shop__cart.html">View Cart</a>
</div>
</div>
</li>
<li style="height: 1px" class="scrollable-fix">

</li>
</ul>

</div>
</div>
</section><!--/nav-wrapper-->
<header id="site-header" class="site-header header-fullscreen wrapper-table">
<div class="overlay-01 parallax-hero bg-21" data-top="transform: translate3d(0px, 0px, 0px)" data-top-bottom="transform: translate3d(0px, -200px, 0px)" data-anchor-target="#site-header"></div>

<div id="particles" class="particles"></div>

<div class="valign-center">
<div class="container">
<div class="intro text-center video-player-big">
<div class="video-btn-big">
<a href="https://www.youtube.com/watch?v=aBYWGjIzvyw" class="popup-video">
<i class="icon-music_play_button"></i>
</a>
</div>
<h1>The Life</h1>
<h6>What Makes You Alive Is Your Feelings</h6>
</div>
</div>
</div>

<a href="#about" class="btn-arrow-down-round btn-o onPageNav">
<i class="ion-ios-arrow-down"></i>
</a>
</header>
<!-- ==================================
About Us
=================================== -->

<section id="about" class="section about-us bg white-bg">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<img src="assets/images/others/about_us_video.jpg" class="img-responsive center-block" alt="about-us image">
</div>
<div class="col-md-6 col-sm-12">
<div class="section-content">
<header class="section-heading mt-0">
<h6>Welcome to our</h6>
<h4>California</h4>
</header>
<div class="section-content-desc">
<p>
Quisque vel magna quis massa finibus facilisis. Aenean a lacinia erat, id venenatis turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus dignissim scelerisque auctor. Nulla facilisi. Suspendisse pulvinar lacinia erat.
</p>
</div>
<br/>
<a target="_blank" href="https://www.youtube.com/watch?v=aBYWGjIzvyw" class="btn btn-cal-default popup-video">
watch the film <i class="ion-play"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- =======================================
Our Services
========================================= -->

<section id="services-small" class="section mild-bg">

<div class="container">
<div class="row">

<div class="col-md-4">
<div class="service-item">
<div class="icon">
<i class="icon-paint_brush_wall_roller"></i>
</div>
<div class="service-desc">
<h5>graphics design</h5>
<p>Fringilla augue at maximus vestibulum. Nam pulvinar vitae neque et porttitor. Praesent sed nisi eleifend.</p>
</div>
</div>
</div>

<div class="col-md-4">
<div class="service-item">
<div class="icon">
<i class="icon-mobile"></i>
</div>
<div class="service-desc">
<h5>web design</h5>
<p>Fringilla augue at maximus vestibulum. Nam pulvinar vitae neque et porttitor. Praesent sed nisi eleifend.</p>
</div>
</div>
</div>

<div class="col-md-4">
<div class="service-item">
<div class="icon">
<i class="icon-computer_imac_thick"></i>
</div>
<div class="service-desc">
<h5>web development</h5>
<p>Fringilla augue at maximus vestibulum. Nam pulvinar vitae neque et porttitor. Praesent sed nisi eleifend.</p>
</div>
</div>
</div>

</div>
</div><!-- container -->

</section> <!-- /#services -->
<!-- ========================================
Responsive Design
========================================== -->


<section class="section responsive-design bg responsive-design-bg p-b-0 b-b-0 white-bg" id="responsiveDesign">
<header>
<h6>Optimized and Smart</h6>
<h4>responsive design</h4>
</header>

<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p class="text-center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
</p>
<p>&nbsp;<br/></p><!--space hack-->
</div>
<div class="col-md-12">
<img src="assets/images/others/responsive_design.jpg" class="img-responsive center-block" alt="about-us image">
</div>
</div>
</div>
</section> <!-- /.responsive-design -->
<!-- ============================================
Call to action - 2
============================================== -->

<section id="cta-8" class="section cta cta-8 base-bg">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="cta-content">
<h4>Made with <i class="ion-heart"></i> by <a href="#team" class="onPageNav">Californians</a></h4>
</div>
</div>
</div>
</div><!-- container -->
</section>
<!-- ========================================
Love Us
========================================== -->


<section class="section love-us white-bg" id="responsiveDesign">
<header>
<h6>clients are</h6>
<h4>loving us</h4>
</header>

<div class="section-content bg">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<img src="assets/images/others/choose_us_1.png" class="img-responsive center-block" alt="love-us image">
</div>
<div class="col-md-6 col-sm-12">

<div class="col-md-12 col-sm-6 cause-point">
<h5><i class="icon-basic_cards_diamonds hang"></i> we are professional</h5>
<p>Quisque vel magna quis massa finibus facilisis. Aenean a lacinia erat venenatis turpis. Pellentesque habitant morbi tristique senectus massa finibus facilisis.</p>
</div><!--/cause-point-->

<div class="col-md-12 col-sm-6 cause-point">
<h5><i class="icon-software_font_baseline_shift hang"></i> we are creative</h5>
<p>Quisque vel magna quis massa finibus facilisis. Aenean a lacinia erat venenatis turpis. Pellentesque habitant morbi tristique senectus massa finibus facilisis.</p>
</div><!--/cause-point-->

<div class="col-md-12 col-sm-12 cause-point">
<h5><i class="icon-basic_headset hang"></i> 24/7 great support</h5>
<p>Quisque vel magna quis massa finibus facilisis. Aenean a lacinia erat venenatis turpis. Pellentesque habitant morbi tristique senectus massa finibus facilisis.</p>
</div><!--/cause-point-->

</div>
</div>
</div>
</div>
</section> <!-- /.love-us -->
<!-- ========================================
Fun Facts
========================================== -->

<section id="funfacts" class="section overlay-01 funfacts"
data-vide-bg="assets/videos/video"
data-vide-options="loop: true,
muted: true,
position: 0% 100%">

<div class="container">
<div class="row">
<!-- Fact Item -->
<div class="col-sm-3 col-xs-6">
<div class="fact">
<div class="fact-icon">
<i class="icon-basic_headset"></i>
</div>

<h5 class="fact-number">30</h5>
<p class="fact-text">Support Officers</p>
</div>
</div>
<!--/ End Fact Item -->
<div class="col-sm-3 col-xs-6">
<div class="fact">
<div class="fact-icon">
<i class="icon-basic_keyboard"></i>
</div>

<h5 class="fact-number">50</h5>
<p class="fact-text">Web Developers</p>
</div>
</div>
<!--/ End Fact Item -->
<div class="col-sm-3 col-xs-6">
<div class="fact">
<div class="fact-icon">
<i class="icon-paint_brush_wall_roller"></i>
</div>

<h5 class="fact-number">30</h5>
<p class="fact-text">Web Designers</p>
</div>
</div>
<!--/ End Fact Item -->
<div class="col-sm-3 col-xs-6">
<div class="fact">
<div class="fact-icon">
<i class="icon-cap_hat"></i>
</div>

<h5 class="fact-number">10</h5>
<p class="fact-text">Project Managers</p>
</div>
</div>
<!--/ End Fact Item -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- =======================================
Our Services
========================================= -->

<section id="services" class="section white-bg">
<header>
<h6>check our best</h6>
<h4>Services</h4>
</header>

<div class="container">
<div class="row">

<div class="col-md-4 col-sm-6">
<div class="service-item">
<div class="icon">
<i class="icon-paint_brush_wall_roller"></i>
</div>
<div class="service-desc">
<h5>graphics design</h5>
<p>
Fringilla augue at maximus vestibulum. Nam pulvinar vitae neque et porttitor. Praesent sed nisi eleifend.
</p>
</div>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="service-item">
<div class="icon">
<i class="icon-mobile"></i>
</div>
<div class="service-desc">
<h5>web design</h5>
<p>
Fringilla augue at maximus vestibulum. Nam pulvinar vitae neque et porttitor. Praesent sed nisi eleifend.
</p>
</div>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="service-item">
<div class="icon">
<i class="icon-computer_imac_thick"></i>
</div>
<div class="service-desc">
<h5>Web Development</h5>
<p>
Fringilla augue at maximus vestibulum. Nam pulvinar vitae neque et porttitor. Praesent sed nisi eleifend.
</p>
</div>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="service-item">
<div class="icon">
<i class="icon-device_ipad"></i>
</div>
<div class="service-desc">
<h5>game development</h5>
<p>
Fringilla augue at maximus vestibulum. Nam pulvinar vitae neque et porttitor. Praesent sed nisi eleifend.
</p>
</div>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="service-item">
<div class="icon">
<i class="icon-bargraph"></i>
</div>
<div class="service-desc">
<h5>seo expert</h5>
<p>
Fringilla augue at maximus vestibulum. Nam pulvinar vitae neque et porttitor. Praesent sed nisi eleifend.
</p>
</div>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="service-item">
<div class="icon">
<i class="icon-genius"></i>
</div>
<div class="service-desc">
<h5>ux expert</h5>
<p>
Fringilla augue at maximus vestibulum. Nam pulvinar vitae neque et porttitor. Praesent sed nisi eleifend.
</p>
</div>
</div>
</div>

</div>
</div><!-- container -->

</section> <!-- /#services -->
<!-- ============================================
Call to action - 1
============================================== -->

<section id="cta-1" class="section cta-big">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="cta-content">
<h4>Thinking of your next project?</h4>
<div class="btn-cal-group">
<a href="#pricing" class="btn btn-cal-default onPageNav">see pricing</a>
<a href="#" class="btn btn-cal-default-o-color">get a free quote</a>
</div>
</div>
</div>
</div>
</div><!-- container -->
</section>
<!-- ========================================
Level
========================================== -->


<section class="section mild-bg level progressbars bg-27 " id="level">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="progress-box">
<header class="progress-heading">
Web design
</header>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="76" aria-valuemin="0"
aria-valuemax="100">
<span>76%</span>
</div>
</div>
</div>

<div class="progress-box">
<header class="progress-heading">
Graphics design
</header>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="98" aria-valuemin="0"
aria-valuemax="100">
<span>98%</span>
</div>
</div>
</div>

<div class="progress-box">
<header class="progress-heading">
Web application
</header>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="88" aria-valuemin="0"
aria-valuemax="100">
<span>88%</span>
</div>
</div>
</div>

<div class="progress-box">
<header class="progress-heading">
Game development
</header>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="59" aria-valuemin="0"
aria-valuemax="100">
<span>59%</span>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div id="video-small" class="video-info">

<a id="playVideoSmall" href="#" class="video-icon"><i class="ion-android-arrow-dropright-circle"></i></a>
<h6>Watch the reel</h6>

</div>

<div id="video-small-container">
<div id="ytPlayerSmall" class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" frameborder="0" title="YouTube video player" type="text/html" src="http://www.youtube.com/embed/w9j3-ghRjBs?enablejsapi=1"></iframe>
</div><!--ytPlayer-->
</div>
</div>
</div>
</div>
</div>
</section> <!-- /.level -->
<!-- ========================================
team
========================================== -->


<section id="team" class="section team p-b-0 white-bg">
<header>
<h6>Meet the</h6>
<h4>californians</h4>
</header>

<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="team-profile" style="background-image: url(assets/images/team/chairpersons_1.jpg)">
<ul class="team-social list-unstyled">
<li><a href="#" class="ion-social-facebook"></a></li>
<li><a href="#" class="ion-social-twitter"></a></li>
<li><a href="#" class="ion-social-pinterest"></a></li>
</ul>

<div class="team-intro">
<h5>Jenne Enna</h5>
<p>Chairperson of California Group</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="team-profile" style="background-image: url(assets/images/team/chairpersons_2.jpg)">
<ul class="team-social list-unstyled">
<li><a href="#" class="ion-social-facebook"></a></li>
<li><a href="#" class="ion-social-twitter"></a></li>
<li><a href="#" class="ion-social-linkedin"></a></li>
</ul>

<div class="team-intro">
<h5>Wlcot Smith</h5>
<p>Chairperson of California Group</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="team-profile" style="background-image: url(assets/images/team/chairpersons_3.jpg)">
<ul class="team-social list-unstyled">
<li><a href="#" class="ion-social-facebook"></a></li>
<li><a href="#" class="ion-social-twitter"></a></li>
<li><a href="#" class="ion-social-instagram"></a></li>
</ul>

<div class="team-intro">
<h5>Esha Gail</h5>
<p>Chairperson of California Group</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="team-profile" style="background-image: url(assets/images/team/chairpersons_4.jpg)">
<ul class="team-social list-unstyled">
<li><a href="#" class="ion-social-facebook"></a></li>
<li><a href="#" class="ion-social-twitter"></a></li>
<li><a href="#" class="ion-social-pinterest"></a></li>
</ul>

<div class="team-intro">
<h5>Jenne Enna</h5>
<p>Chairperson of California Group</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="team-profile" style="background-image: url(assets/images/team/chairpersons_5.jpg)">
<ul class="team-social list-unstyled">
<li><a href="#" class="ion-social-facebook"></a></li>
<li><a href="#" class="ion-social-twitter"></a></li>
<li><a href="#" class="ion-social-linkedin"></a></li>
</ul>

<div class="team-intro">
<h5>Wlcot Smith</h5>
<p>Chairperson of California Group</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="team-profile hiring">

<a href="#">
<i class="ion-android-add"></i>
</a>

<div class="team-intro">
<h5>We are Hiring</h5>
<p>Web Designer &amp; CSS Expert</p>
</div>
</div>
</div>
</div><!--/row-->
</div>
</div>
</section> <!-- /.team -->
<div class="cta7">
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-8">
<h5>
Call us today at <span>+123 2345 887</span> and get free support
</h5>
<p>We strive to provide Our Customers with Top Notch Support to make their Theme Experience Wonderful</p>
</div>
<div class="col-md-3 col-sm-4">
<a href="#" class="btn btn-cal-default-o-color">
get Live support
</a>
</div>
</div>
</div>
</div>
<!-- ========================================
Process
========================================== -->


<section class="section white-bg b-b-0" id="process">
<header>
<h6>Our World Class</h6>
<h4>Process</h4>
</header>

<div class="section-content">
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="card-process">
<header class="first">
<span class="icon-basic_pencil_ruler_pen"></span>
</header>
<div class="card-block">
<h5>Planning</h5>
<p>Quisque tellus ris, adipisci viverra bibendum urna.</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card-process">
<header>
<span class="icon-software_paintroller"></span>
</header>
<div class="card-block">
<h5>Design</h5>
<p>Quisque tellus ris, adipisci viverra bibendum urna.</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card-process">
<header>
<span class="icon-basic_keyboard"></span>
</header>
<div class="card-block">
<h5>Coding</h5>
<p>Quisque tellus ris, adipisci viverra bibendum urna.</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card-process">
<header class="last">
<span class="icon-printer"></span>
</header>
<div class="card-block">
<h5>Publish</h5>
<p>Quisque tellus ris, adipisci viverra bibendum urna.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section> <!-- /#process -->
<section id="portfolio" class="section works mild-bg">
<header>
<h6>Check Our Best</h6>
<h4>Works</h4>
</header>
<div class="container">

<div class="text-center" >
<ul class="portfolio-filter">
<li class="active"><a class="btn btn-sm" href="#" data-filter="*"> All</a></li>
<li><a class="btn btn-sm" href="#" data-filter=".photography">Photography</a></li>
<li><a class="btn btn-sm" href="#" data-filter=".webDesign">Web</a></li>
<li><a class="btn btn-sm" href="#" data-filter=".illustrations">illustration</a></li>
<li><a class="btn btn-sm" href="#" data-filter=".multiMedia">multiMedia</a></li>
<li><a class="btn btn-sm" href="#" data-filter=".apps">Apps</a></li>
</ul>
</div>

<div class="portfolio portfolio-masonry col-3 ">

<div class="portfolio-item webDesign multiMedia">
<div class="thumb">
<img src="assets/images/portfolio/masonry/col_3/1.jpg" alt="">
<div class="portfolio-hover">

<div class="vCenter">

<div class="action-btn">
<a href="assets/images/portfolio/masonry/col_3/1.jpg" class="popup-link" title="lightbox view">
<i class="icon-basic_magnifier"></i>
</a>
</div>
<div class="portfolio-description">
<h5>
<a href="assets/images/portfolio/masonry/col_3/1.jpg" class="popup-link" title="lightbox view">Lightbox View </a>
</h5>
<p><a href="#">Artworks</a></p>
</div> <!-- /.portfolio-description -->

</div><!--vCenter-->

</div> <!-- /.portfolio-hover -->
</div> <!-- /.thumb -->
</div> <!-- /.portfolio-item -->
<div class="portfolio-item photography illustrations">
<div class="thumb">

<div class="portfolio-slider">
<ul class="slides">
<li>
<a href="assets/images/portfolio/masonry/col_3/4_1.jpg">
<img src="assets/images/portfolio/masonry/col_3/4_1.jpg" alt="">
</a>
</li>
<li>
<a href="assets/images/portfolio/masonry/col_3/4_2.jpg" title="Awesome Lightbox">
<img src="assets/images/portfolio/masonry/col_3/4_2.jpg" alt="">
</a>
</li>
<li>
<a href="assets/images/portfolio/masonry/col_3/4_3.jpg">
<img src="assets/images/portfolio/masonry/col_3/4_3.jpg" alt="">
</a>
</li>
</ul>
</div>


<div class="portfolio-hover">

<div class="vCenter">
<div class="action-btn">
<a href="#"> <i class="icon-basic_picture_multiple"></i> </a>
</div>
<div class="portfolio-description">
<h5><a href="#">Gallary Lightbox</a></h5>
<p><a href="#">Photography</a></p>
</div> <!-- /.portfolio-description -->
</div><!--vCenter-->

</div> <!-- /.portfolio-hover -->
</div> <!-- /.thumb -->
</div> <!-- /.portfolio-item -->

<div class="portfolio-item webDesign apps">
<div class="thumb">
<img src="assets/images/portfolio/masonry/col_3/7.jpg" alt="">
<div class="portfolio-hover">

<div class="vCenter">
<div class="action-btn">
<a class="popup-video" href="https://www.youtube.com/watch?v=fTF-RadkIKo">
<i class="icon-arrows_keyboard_right"></i>
</a>
</div>
<div class="portfolio-description">
<h5><a class="popup-video" href="https://www.youtube.com/watch?v=fTF-RadkIKo" >Video lightbox</a></h5>
<p><a href="#">Videography</a></p>
</div> <!-- /.portfolio-description -->
</div><!--/vcenter-->

</div> <!-- /.portfolio-hover -->
</div> <!-- /.thumb -->
</div> <!-- /.portfolio-item -->

<div class="portfolio-item photography apps">
<div class="thumb">
<img src="assets/images/portfolio/masonry/col_3/2.jpg" alt="">
<div class="portfolio-hover">
<div class="vCenter">
<div class="action-btn">
<a href="portfolio__single_featured_carousel.html">
<i class="icon-basic_link"></i>
</a>
</div>
<div class="portfolio-description">
<h5><a href="portfolio__single_featured_carousel.html">External link</a></h5>
<p><a href="#">Webdesign</a> , <a href="#">Illustration</a> </p>
</div> <!-- /.portfolio-description -->
</div><!--/vcenter-->

</div> <!-- /.portfolio-hover -->
</div> <!-- /.thumb -->
</div> <!-- /.portfolio-item -->
<div class="portfolio-item webDesign illustrations">
<div class="thumb">
<img src="assets/images/portfolio/masonry/col_3/5.jpg" alt="">
<div class="portfolio-hover">
<div class="vCenter">
<div class="action-btn">
<a href="portfolio__single_featured_carousel.html">
<i class="icon-basic_link"></i>
</a>
</div>
<div class="portfolio-description">
<h5><a href="portfolio__single_featured_carousel.html">External link</a></h5>
<p><a href="#">Webdesign</a> , <a href="#">Illustration</a> </p>
</div> <!-- /.portfolio-description -->
</div><!--/vcenter-->

</div> <!-- /.portfolio-hover -->
</div> <!-- /.thumb -->
</div> <!-- /.portfolio-item -->
<div class="portfolio-item apps multiMedia">
<div class="thumb">
<img src="assets/images/portfolio/masonry/col_3/3.jpg" alt="">
<div class="portfolio-hover">
<div class="vCenter">
<div class="action-btn">
<a href="portfolio__single_featured_carousel.html">
<i class="icon-basic_link"></i>
</a>
</div>
<div class="portfolio-description">
<h5><a href="portfolio__single_featured_carousel.html">External link</a></h5>
<p><a href="#">Webdesign</a> , <a href="#">Illustration</a> </p>
</div> <!-- /.portfolio-description -->
</div><!--/vcenter-->

</div> <!-- /.portfolio-hover -->
</div> <!-- /.thumb -->
</div> <!-- /.portfolio-item -->
<div class="portfolio-item photography illustrations">
<div class="thumb">
<img src="assets/images/portfolio/masonry/col_3/8.jpg" alt="">
<div class="portfolio-hover">

<div class="vCenter">

<div class="action-btn">
<a href="assets/images/portfolio/masonry/col_3/8.jpg" class="popup-link" title="lightbox view">
<i class="icon-basic_magnifier"></i>
</a>
</div>
<div class="portfolio-description">
<h5>
<a href="assets/images/portfolio/masonry/col_3/8.jpg" class="popup-link" title="lightbox view">Lightbox View </a>
</h5>
<p><a href="#">Artworks</a></p>
</div> <!-- /.portfolio-description -->

</div><!--vCenter-->

</div> <!-- /.portfolio-hover -->
</div> <!-- /.thumb -->
</div> <!-- /.portfolio-item -->

<div class="portfolio-item webDesign illustrations">
<div class="thumb">
<img src="assets/images/portfolio/masonry/col_3/9.jpg" alt="">
<div class="portfolio-hover">

<div class="vCenter">

<div class="action-btn">
<a href="assets/images/portfolio/masonry/col_3/9.jpg" class="popup-link" title="lightbox view">
<i class="icon-basic_magnifier"></i>
</a>
</div>
<div class="portfolio-description">
<h5>
<a href="assets/images/portfolio/masonry/col_3/9.jpg" class="popup-link" title="lightbox view">Lightbox View </a>
</h5>
<p><a href="#">Artworks</a></p>
</div> <!-- /.portfolio-description -->

</div><!--vCenter-->

</div> <!-- /.portfolio-hover -->
</div> <!-- /.thumb -->
</div> <!-- /.portfolio-item -->
<div class="portfolio-item webDesign multiMedia">
<div class="thumb">
<img src="assets/images/portfolio/masonry/col_3/6.jpg" alt="">
<div class="portfolio-hover">

<div class="vCenter">

<div class="action-btn">
<a href="assets/images/portfolio/masonry/col_3/6.jpg" class="popup-link" title="lightbox view">
<i class="icon-basic_magnifier"></i>
</a>
</div>
<div class="portfolio-description">
<h5>
<a href="assets/images/portfolio/masonry/col_3/6.jpg" class="popup-link" title="lightbox view">Lightbox View </a>
</h5>
<p><a href="#">Artworks</a></p>
</div> <!-- /.portfolio-description -->

</div><!--vCenter-->

</div> <!-- /.portfolio-hover -->
</div> <!-- /.thumb -->
</div> <!-- /.portfolio-item -->

</div>
</div>
</section> <!-- /#portfolio -->

<div class="cta6">
<a href="#">
<div class="container-fluid">
<h5>20+ Handcrafted Masonry Grid Layouts. <span>See More <i class="ion-play"></i></span></h5>
</div>
</a>
</div>
<!-- ========================================
Pricing 3 column
========================================== -->

<section id="pricing" class="section pricing white-bg">
<header>
<h6>check our</h6>
<h4>price plan</h4>
</header>

<div class="container">
<div class="row">

<div class="col-sm-4">
<div class="price-box ">
<h5>Basic</h5>
<div class="price-info">
<div class="price"><span><i>$</i>25</span>/mo</div>
<ul>
<li>Up to 5 pages</li>
<li>1 year hosting</li>
<li>3 months support</li>
<li class="disabled">SEO</li>
<li class="disabled">Secrity &amp; Backup</li>
<li class="disabled">24/7 Support</li>
</ul>
</div>

<a href="#" class="btn btn-cal-dark">Get Started</a>
</div> <!-- /.price-box -->
</div>

<div class="col-sm-4">
<div class="price-box featured">
<h5>Standard</h5>
<div class="price-info">
<div class="price"><span><i>$</i>75</span>/mo</div>
<ul>
<li>Up to 5 pages</li>
<li>1 year hosting</li>
<li>3 months support</li>
<li class="">SEO</li>
<li class="disabled">Secrity &amp; Backup</li>
<li class="disabled">24/7 Support</li>
</ul>
</div>

<a href="#" class="btn btn-cal-default">Get Started</a>
</div> <!-- /.price-box -->
</div>

<div class="col-sm-4">
<div class="price-box ">
<h5>Premium</h5>
<div class="price-info">
<div class="price"><span><i>$</i>125</span>/mo</div>
<ul>
<li>Up to 5 pages</li>
<li>1 year hosting</li>
<li>3 months support</li>
<li class="">SEO</li>
<li class="">Secrity &amp; Backup</li>
<li class="">24/7 Support</li>
</ul>
</div>

<a href="#" class="btn btn-cal-dark">Get Started</a>
</div> <!-- /.price-box -->
</div>

</div> <!-- /.row -->
</div> <!-- /.container -->
</section> <!-- /.pricing-->
<!-- ========================================
Client Logo
========================================== -->


<section id="clients" class="section client mild-bg p-a-0">
<div class="container">
<div class="row">

<div class="col-md-4 col-sm-6 p-a-0">
<div class="client-img">
<img src="assets/images/clients_logo/1.png" class="img-responsive center-block" alt="Client 1">
</div>
</div>

<div class="col-md-4 col-sm-6 p-a-0">
<div class="client-img">
<img src="assets/images/clients_logo/2.png" class="img-responsive center-block" alt="Client 2">
</div>
</div>

<div class="col-md-4 col-sm-6 p-a-0">
<div class="client-img">
<img src="assets/images/clients_logo/3.png" class="img-responsive center-block" alt="Client 3">
</div>
</div>

<div class="col-md-4 col-sm-6 p-a-0">
<div class="client-img">
<img src="assets/images/clients_logo/4.png" class="img-responsive center-block" alt="Client 4">
</div>
</div>

<div class="col-md-4 col-sm-6 p-a-0">
<div class="client-img">
<img src="assets/images/clients_logo/5.png" class="img-responsive center-block" alt="Client 5">
</div>
</div>

<div class="col-md-4 col-sm-6 p-a-0">
<div class="client-img">
<img src="assets/images/clients_logo/6.png" class="img-responsive center-block" alt="Client 6">
</div>
</div>

</div>
</div>
</section> <!-- /.client -->
<section class="section bg-color-deep testimonials" id="testimonials">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div id="owl-testimonial" class="owl-carousel">
<div>
<div class="row">
<div class="col-md-4">
<figure>
<img alt="" class="img-responsive" src="assets/images/testimonial/testimonial_1p.jpg">
</figure>
</div>
<div class="col-md-7">
<p class="testimonial-content">Thank you very much for your kindness, understanding and support. Truly appreciate your patience with all the questions that I've asked It is a relief knowing.</p>
<div class="client-info">
<h5>Laisa N</h5>
<p>Founder, <a href="#">St James WA</a></p>
</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-md-4">
<figure>
<img alt="" class="img-responsive" src="assets/images/testimonial/testimonial_2p.jpg">
</figure>
</div>
<div class="col-md-7">
<p class="testimonial-content">Lorem ipsum dolor sit amet, consectuteret adipiscing elit. Vestibulum egetvel lactux pretium runcus is equys nisly Ut vehicula gravida dui in.</p>
<div class="client-info">
<h5>Jasmin Khalifa</h5>
<p>CEO, <a href="#">Tesla Motors</a></p>
</div>
</div>
</div>
</div>
</div><!-- .owl-carousel -->
</div>
</div><!-- .row -->
</div><!-- .container -->
</div>
</section>
<!-- ========================================
blog (3 Column)
========================================== -->


<section id="blog" class="section blog mild-bg">
<header>
<h6>check our</h6>
<h4>latest news</h4>
</header>

<div class="container">
<div class="row">

<div class="col-md-4 col-sm-6">
<div class="blog-post ">
<img class="img-responsive center-block" src="assets/images/blog/card/blog_1.jpg" alt="Latest News 1">
<div class="blog-content">
<h5>
<a href="blog__single__right_sidebar.html">
Design Trends That We Will See Taking Over Web Design
</a>
</h5>
<div class="post-meta">
<span class="blog-catagory"><a href="#">Article</a></span>
<span>01 Oct</span>
</div>
</div>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="blog-post ">
<img class="img-responsive center-block" src="assets/images/blog/card/blog_2.jpg" alt="Latest News 1">
<div class="blog-content">
<h5>
<a href="blog__single__right_sidebar.html">
How to Use Clipping Mask in Photoshop Successfully
</a>
</h5>
<div class="post-meta">
<span class="blog-catagory"><a href="#">Video Tutorial</a></span>
<span>28 Sep</span>
</div>
</div>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="blog-post ">
<img class="img-responsive center-block" src="assets/images/blog/card/blog_3.jpg" alt="Latest News 1">
<div class="blog-content">
<h5>
<a href="blog__single__right_sidebar.html">
Why Gadgets are Absolutely Necessary for All Designers
</a>
</h5>
<div class="post-meta">
<span class="blog-catagory"><a href="#">Interview</a></span>
<span>26 Sep</span>
</div>
</div>
</div>
</div>

</div> <!-- /.row -->
</div> <!-- /.container -->
</section> <!-- /.blog -->
<!-- ==================================
Subscribe
=================================== -->

<section id="subscribe" class="section p-y-0 subscribe white-bg">
<div class="container">
<div class="row">
<div class="col-sm-6">
<figure class="subscribe-image">
<img alt="" class="img-responsive center-block" src="assets/images/others/subscribe_2.png">
</figure>
</div>
<div class="col-sm-6">
<div class="subscribe-box">
<header>
<h4 class="m-a-0">Subscribe</h4>
<p>Get updates directly to your inbox</p>
</header>
<form class="subscribe-form" id="subscription-form">
<div class="form-group">
<label class="sr-only" for="subscriber-email">Email address</label>
<input name="email" type="email" id="subscriber-email" class="form-control" placeholder="Enter your email address" required>
<p><small>* We will never spam you</small></p>
</div><!--/input-grpup-->

<button type="submit" id="subscribe-button" type="submit" class="btn btn-cal-default"><i class="ion-heart"></i> Get it</button>
</form>

<!-- SUCCESS OR ERROR MESSAGES -->
<div id="subscription-response"></div>
</div>
</div>
</div>
</div>
</section> <!-- /.subscribe -->
<!-- ========================================
Contact
========================================== -->


<section id="contact" class="section p-a-0 contact">

<div id="map" class="bg-map"></div>

<div class="section-content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-sm-offset-6">
<div class="contact-box">

<div class="row">
<div class="col-md-6">
<p class="info-address">
<span class="icon-basic_geolocalize-05 pull-left info-icon"></span>
<strong>221b Baker Street</strong> <br>London NW1 6XE,United Kingdom
</p>
</div>
<div class="col-md-6">
<p class="info-contact">
<span class="icon-ecommerce_megaphone pull-left info-icon"></span>
<a href="tell:01012233456"><strong>+00 123 4567 123</strong></a> <br>email@california.com
</p>
</div>
</div>

<form action="php/contact-form.php" class="contact-form" id="contactForm" method="post" name="contactform" role="form">

<div class="form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" required placeholder="Name">
</div>

<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" required placeholder="Email">
</div>

<div class="form-group">
<textarea class="form-control" id="message" name="massage" placeholder="Type your message here" rows="5" required></textarea>
</div>

<div id="contactFormResponse"></div>

<button id="cfsubmit" type="submit" class="btn btn-cal-default contact-submit">Send</button>

</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer widgets -->
<section id="footer-widgets" class="section footer-widgets dark-bg">
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4 hidden-xs">
<div class="footer-title">
<div class="text-uppercase">
<h4><img class="img-responsive footer-logo" src="assets/images/logos/1-w.png" alt="California"></h4>
</div>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="content-wrap widget-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores dolorum eius libero nihil. Fugiat ipsum officia reprehenderit rerum saepe. Assumenda distinctio, voluptatibus. At consectetur cumque enim error laudantium mollitia obcaecati!</p>
</div>
<ul class="list-inline social-icon">
<li><a href="#"><span class="ion-social-facebook"></span></a></li>
<li><a href="#"><span class="ion-social-twitter"></span></a></li>
<li><a href="#"><span class="ion-social-googleplus"></span></a></li>
<li><a href="#"><span class="ion-social-linkedin"></span></a></li>
</ul>
</div>

<div class="col-md-2 col-sm-4">
<div class="content-wrap widget-contact">
<ul class="list-unstyled list-arrows-right">
<li>
<a href="#faq.html">FAQ</a>
</li>
<li>
<a href="#about_us.html">About Us</a>
</li>
<li>
<a href="">We're Hiring</a>
</li>
<li>
<a href="">Investors</a>
</li>
<li>
<a href="">Export</a>
</li>
<li>
<a href="">Events</a>
</li>
<li>
<a href="">Legal</a>
</li>
<li>
<a href="">Technext</a>
</li>
</ul>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="content-wrap widget-gallery">
<div class="lightbox-gallery">
<a target="_blank" href="assets/images/gallery/big/big_1.jpg">
<img class="img-responsive" src="assets/images/gallery/thumbnail/full_8/1.jpg" alt=""/>
</a>
<a target="_blank" href="assets/images/gallery/big/big_3.jpg">
<img class="img-responsive" src="assets/images/gallery/thumbnail/full_8/3.jpg" alt=""/>
</a>
<a target="_blank" href="assets/images/gallery/big/big_8.jpg">
<img class="img-responsive" src="assets/images/gallery/thumbnail/full_8/8.jpg" alt=""/>
</a>
<a target="_blank" href="assets/images/gallery/big/big_9.jpg">
<img class="img-responsive" src="assets/images/gallery/thumbnail/full_8/9.jpg" alt=""/>
</a>
</div>
</div>
</div>
</div>
</div>
</section> <!-- /.Footer widgets -->
<footer id="footer" class="section footer">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="copyright">&copy; 2015 Your company name</p>
</div>
<div class="col-md-6 col-sm-6">
<p class="footer-menu">
<a href="">Terms &amp; Conditions</a> | <a href="#">Privacy Policy</a>
</p>
</div>
</div>
</div>
</footer> <!-- /.footer -->

 


</div><!--/#zwrapper-->

 

<!-- Offcanvas Elements
============================================= -->

 

 


<!-- Javascripts
============================================= -->

<script src="assets/lib/components-modernizr/modernizr.js"></script>
<script src="assets/lib/jquery/dist/jquery.js"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="assets/lib/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="assets/lib/animsition/dist/js/animsition.min.js"></script>
<script src="assets/lib/magnific-popup/dist/jquery.magnific-popup.js"></script>


<script src="assets/lib/flexslider/jquery.flexslider.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCOGzkMnhdOSa_M1ZOiZbiPNgvgzQJp4Hw&callback=initMap" type="text/javascript"></script>
<script src="assets/lib/jquery.mb.ytplayer/dist/jquery.mb.YTPlayer.js"></script>

<script src="assets/lib/waypoints/lib/jquery.waypoints.min.js"></script>
<script src="assets/lib/waypoints/lib/shortcuts/inview.min.js"></script>

<script src="assets/lib/isotope/dist/isotope.pkgd.min.js"></script>

<script src="assets/lib/owlcarousel/owl-carousel/owl.carousel.js"></script>
<script src="assets/lib/countdown/dest/jquery.countdown.min.js"></script>
<script src="assets/lib/vide/dist/jquery.vide.js"></script>

 

<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>


</body>
</html>