index-bgvideo.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>REVEAL | Flat Creative Portfolio One Page Theme - Responsive HTML5</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Highly unique creative theme built with Bootstrap">
<meta name="author" content="Designova">

<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/extension.css" rel="stylesheet">
<link href="assets/css/typography.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="stylesheets/jquery.fancybox.css" rel="stylesheet" type="text/css" media="screen" />
<link href="stylesheets/soundcloud/sc-player-minimal.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/jquery.tweet.css" rel="stylesheet"/>
<link href="stylesheets/responsive-nav.css" rel="stylesheet">
<link href="stylesheets/styles.css" rel="stylesheet" type="text/css" media="screen" />

<style>
.container{
  margin-top: 0px !important;
}
#master-video-wrap{
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}
</style>

<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <link href="stylesheets/ie8.css" rel="stylesheet">
<![endif]-->
</head>


<body>
<div id="master-video-wrap">

<!-- Preloader -->
<div id="preloader">
  <div id="status">&nbsp;</div>
</div>


<!-- Mobile Only Navigation - 2 types each for (480px to 640px) and (640px to 960px) wide device screens -->
<header id="mobile-header" class="clearfix hidden-desktop">
    <div id="nav">
      <ul>
        <li><a href="#filter=.home" class="selected">Home</a></li>
        <li><a href="#filter=.about">About</a></li>
        <li><a href="#filter=.services">Services</a></li>
        <li><a href="#filter=.media">Media</a></li>
        <li><a href="#filter=.portfolio">Portfolio</a></li>
        <li><a href="#filter=.blog">Blog</a></li>
        <li><a href="#filter=.contact">Contact</a></li>
        <li><a href="single.html">Single</a></li>
      </ul>
    </div>
</header>


<header id="wrapper">
    

    <a href="#"><img alt="reveal" title="reveal" class="visible-desktop" src="images/logo.png"/></a>
    
    <div id="options" class="clearfix visible-desktop">
      <ul id="filters" class="option-set clearfix" data-option-key="filter">
        <li><a class="reveal-bg-one selected" href="#filter=.home">Home</a></li>
        <li><a class="reveal-bg-two" href="#filter=.about">About</a></li>
        <li><a class="reveal-bg-three" href="#filter=.services">Services</a></li>
        <li><a class="reveal-bg-four" href="#filter=.media">Media</a></li>
        <li><a class="reveal-bg-seven" href="#filter=.portfolio">Portfolio</a></li>
        <li><a class="reveal-bg-six" href="#filter=.blog">Blog</a></li>
        <li><a class="reveal-bg-five" href="#filter=.contact">Contact</a></li>
        <li><a class="reveal-bg-eight" href="single.html">Single-Page</a></li>
      </ul>
    </div>
    <!-- end nav -->

</header>
<!-- end wrapper -->


<section class="container">
  <section id="container" class="clearfix">


    <article class="element  clearfix one-full home">
      <div class="one-third reveal-bg-one">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/home.png"/></div>
        <h2 class="welcome-heading pad pad-top-minus pad-bottom-minus"><span>Hi,</span>This is Reveal</h2>
        <p class="pad pad-top-minus pad-bottom-minus">A flat &amp; Metro style portfolio with responsive masonry layout. </p>
        <div class="pad pad-top-minus">
        <a class="btn btn-reveal add-top-half" href="#filter=.blog">Visit my blog now</a>
        </div>
      </div>
      <div class="two-third overflow">
        <div class="images"><img src="images/content/01.jpg" alt="" /></div>
      </div>
    </article>


    <article class="element fx-slide-up home clearfix one-full about">
      <div class="reveal-bg-nine">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/home.png"/></div>
        <h2 class="pad pad-top-minus pad-bottom-minus">Welcome Text</h2>
        <p class="pad pad-top-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo porttitor aliquam eget at diam. Duis consequat malesuada orci, eget convallis augue bibendum at. Nam nunc justo, fringilla et consectetur ut, sollicitudin nec enim. Nam vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo porttitor aliquam eget at diam. Duis consequat malesuada orci, eget convallis augue bibendum at. Nam nunc justo, fringilla et consectetur ut, sollicitudin nec enim. Nam vulputate. </p>
      </div>
    </article>


    <article class="element fx-slide-up clearfix one-third services">
      <div class="images"><img src="images/content/07.jpg" alt="" /></div>
      <div class="content-bottom content-bottom-alt reveal-bg-one">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/services/01.png"/></div>
        <h2 class="pad pad-top-minus pad-bottom-minus">Service One</h2>
        <p class="pad pad-top-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo porttitor aliquam eget at diam. <br/><br/>Duis consequat malesuada orci, eget convallis augue bibendum at. Nam nunc justo, fringilla et consectetur ut, sollicitudin nec enim. Nam vulputate. </p>
      </div>
    </article>

    <article class="element fx-slide-up clearfix one-third services">
      <div class="images"><img src="images/content/08.jpg" alt="" /></div>
      <div class="content-bottom content-bottom-alt reveal-bg-two">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/services/02.png"/></div>
        <h2 class="pad pad-top-minus pad-bottom-minus">Service Two</h2>
        <p class="pad pad-top-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo porttitor aliquam eget at diam. <br/><br/>Duis consequat malesuada orci, eget convallis augue bibendum at. Nam nunc justo, fringilla et consectetur ut, sollicitudin nec enim. Nam vulputate. </p>
      </div>
    </article>


    <article class="element fx-slide-up clearfix one-third services">
      <div class="images"><img src="images/content/03.jpg" alt="" /></div>
      <div class="content-bottom content-bottom-alt reveal-bg-three">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/services/03.png"/></div>
        <h2 class="pad pad-top-minus pad-bottom-minus">Service Three</h2>
        <p class="pad pad-top-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo porttitor aliquam eget at diam. <br/><br/>Duis consequat malesuada orci, eget convallis augue bibendum at. Nam nunc justo, fringilla et consectetur ut, sollicitudin nec enim. Nam vulputate. </p>
      </div>
    </article>

    <article class="element fx-slide-up clearfix one-third services">
      <div class="images"><img src="images/content/07.jpg" alt="" /></div>
      <div class="content-bottom content-bottom-alt reveal-bg-four">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/services/04.png"/></div>
        <h2 class="pad pad-top-minus pad-bottom-minus">Service Four</h2>
        <p class="pad pad-top-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo porttitor aliquam eget at diam. <br/><br/>Duis consequat malesuada orci, eget convallis augue bibendum at. Nam nunc justo, fringilla et consectetur ut, sollicitudin nec enim. Nam vulputate. </p>
      </div>
    </article>

    <article class="element fx-slide-up clearfix one-third services">
      <div class="images"><img src="images/content/03.jpg" alt="" /></div>
      <div class="content-bottom content-bottom-alt reveal-bg-seven">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/services/05.png"/></div>
        <h2 class="pad pad-top-minus pad-bottom-minus">Service Five</h2>
        <p class="pad pad-top-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo porttitor aliquam eget at diam. <br/><br/>Duis consequat malesuada orci, eget convallis augue bibendum at. Nam nunc justo, fringilla et consectetur ut, sollicitudin nec enim. Nam vulputate. </p>
      </div>
    </article>

    <article class="element fx-slide-up clearfix one-third services">
      <div class="images"><img src="images/content/08.jpg" alt="" /></div>
      <div class="content-bottom content-bottom-alt reveal-bg-six">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/services/06.png"/></div>
        <h2 class="pad pad-top-minus pad-bottom-minus">Service Six</h2>
        <p class="pad pad-top-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo porttitor aliquam eget at diam. <br/><br/>Duis consequat malesuada orci, eget convallis augue bibendum at. Nam nunc justo, fringilla et consectetur ut, sollicitudin nec enim. Nam vulputate. </p>
      </div>
    </article>


    <article class="element fx-slide-out clearfix one-third portfolio overflow"> 
      <a href="images/content/01.jpg" title="" class="popup">
      <div class="images"><img src="images/content/05.jpg" alt="" /></div>
      <div class="inner-panel reveal-bg-one">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/image.png"/></div>
        <h2 class="pad pad-top-minus">Image Lightbox</h2>
      </div>
      </a> 
    </article>


    <article class="element fx-slide-out clearfix one-third portfolio overflow portfolioexpand2"> 
      <a href="#filter=.portfolio%3Anot(.portfolioexpand2),+.portfoliodetails2" title="" class="popup">
      <div class="images"><img src="images/content/09.jpg" alt="" /></div>
      <div class="inner-panel reveal-bg-six">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/info.png"/></div>
        <h2 class="pad pad-top-minus">Project Info View</h2>
      </div>
      </a> 
    </article>


    <article class="element fx-slide-out clearfix two-third overflow portfoliodetails2"> 
      <div class="reveal-bg-six">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/info.png"/></div>
        <h2 class="pad pad-top-minus">Project's more info here</h2>
        <p class="pad pad-top-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie accumsan arcu, a ultricies ligula gravida non. Pellentesque rutrum quis nisi a adipiscing. Maecenas pretium laoreet gravida. Curabitur eu sapien non quam tempor cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque rutrum quis nisi a adipiscing. Maecenas pretium laoreet gravida.</p>
        <div class="pad pad-top-minus">
          <span class="btn btn-reveal project-url-btn" data-reveal-project-url="#">View Project</span>
        </div>
      </div>
    </article>


    <article class="element fx-slide-out clearfix one-third portfolio overflow"> 
      
      
      <!-- Carousel starts -->
      <div id="carousel-01" class="carousel remove-bottom slide point-left">
            <!-- Carousel items -->
            <div class="carousel-inner">
              <div class="active item">
                <a href="images/content/04.jpg" title="" class="popup">
                  <img src="images/content/04.jpg" alt="" />
                </a> 
              </div>
              <div class="item">
                <a href="images/content/06.jpg" title="" class="popup">
                  <img src="images/content/06.jpg" alt="" />
                </a> 
              </div>
              <div class="item">
                <a href="images/content/09.jpg" title="" class="popup">
                  <img src="images/content/09.jpg" alt="" />
                </a> 
              </div>
            </div>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#carousel-01" data-slide="prev">
              <img title="proxim" alt="proxim" src="images/left.png"/>
            </a>
            <a class="carousel-control right" href="#carousel-01" data-slide="next">
              <img title="proxim" alt="proxim" src="images/right.png"/>
            </a>
      </div>
      <!-- Carousel ends -->
      
      <div class="inner-panel reveal-bg-two">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/slider.png"/></div>
        <h2 class="pad pad-top-minus">Slider + Lightbox</h2>
      </div>
    </article>

    <article class="element fx-slide-out clearfix one-third portfolio overflow"> 
      <a href="images/content/06.jpg" title="" class="popup">
      <div class="images"><img src="images/content/06.jpg" alt="" /></div>
      <div class="inner-panel reveal-bg-three">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/image.png"/></div>
        <h2 class="pad pad-top-minus">Image Lightbox</h2>
      </div>
      </a> 
    </article>


    <article class="element fx-slide-out clearfix one-third portfolio overflow"> 
       <!-- Carousel starts -->
      <div id="carousel-02" class="carousel remove-bottom slide point-left">
            <!-- Carousel items -->
            <div class="carousel-inner">
              <div class="active item">
                <a href="images/content/04.jpg" title="" class="popup">
                  <img src="images/content/04.jpg" alt="" />
                </a> 
              </div>
              <div class="item">
                <a href="images/content/06.jpg" title="" class="popup">
                  <img src="images/content/06.jpg" alt="" />
                </a> 
              </div>
              <div class="item">
                <a href="images/content/09.jpg" title="" class="popup">
                  <img src="images/content/09.jpg" alt="" />
                </a> 
              </div>
            </div>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#carousel-02" data-slide="prev">
              <img title="proxim" alt="proxim" src="images/left.png"/>
            </a>
            <a class="carousel-control right" href="#carousel-02" data-slide="next">
              <img title="proxim" alt="proxim" src="images/right.png"/>
            </a>
      </div>
      <!-- Carousel ends -->
      <div class="inner-panel reveal-bg-four">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/slider.png"/></div>
        <h2 class="pad pad-top-minus">Slider + Lightbox</h2>
      </div>
    </article>


    <article class="element fx-slide-out clearfix one-third portfolio overflow portfolioexpand1"> 
      <a href="#filter=.portfolio%3Anot(.portfolioexpand1),+.portfoliodetails1" title="" class="popup">
      <div class="images"><img src="images/content/06.jpg" alt="" /></div>
      <div class="inner-panel reveal-bg-five">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/info.png"/></div>
        <h2 class="pad pad-top-minus">Project Info View</h2>
      </div>
      </a> 
    </article>


    <article class="element fx-slide-out clearfix two-third overflow portfoliodetails1"> 
      
      <div class="reveal-bg-five">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/info.png"/></div>
        <h2 class="pad pad-top-minus">Project's more info here</h2>
        <p class="pad pad-top-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie accumsan arcu, a ultricies ligula gravida non. Pellentesque rutrum quis nisi a adipiscing. Maecenas pretium laoreet gravida. Curabitur eu sapien non quam tempor cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque rutrum quis nisi a adipiscing. Maecenas pretium laoreet gravida.</p>
        <div class="pad pad-top-minus">
          <span class="btn btn-reveal project-url-btn" data-reveal-project-url="#">View Project</span>
        </div>
      </div>
      
    </article>


    <article class="element fx-slide-out clearfix one-third portfolio overflow"> 
      <!-- Carousel starts -->
      <div id="carousel-03" class="carousel remove-bottom slide point-left">
            <!-- Carousel items -->
            <div class="carousel-inner">
              <div class="active item">
                <a href="images/content/04.jpg" title="" class="popup">
                  <img src="images/content/04.jpg" alt="" />
                </a> 
              </div>
              <div class="item">
                <a href="images/content/06.jpg" title="" class="popup">
                  <img src="images/content/06.jpg" alt="" />
                </a> 
              </div>
              <div class="item">
                <a href="images/content/09.jpg" title="" class="popup">
                  <img src="images/content/09.jpg" alt="" />
                </a> 
              </div>
            </div>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#carousel-03" data-slide="prev">
              <img title="proxim" alt="proxim" src="images/left.png"/>
            </a>
            <a class="carousel-control right" href="#carousel-03" data-slide="next">
              <img title="proxim" alt="proxim" src="images/right.png"/>
            </a>
      </div>
      <!-- Carousel ends -->
      <div class="inner-panel reveal-bg-seven">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/image.png"/></div>
        <h2 class="pad pad-top-minus">Image Lightbox</h2>
      </div>
    </article>


    <article class="element fx-slide-up home clearfix one-third about">
      <div class="images"><img src="images/content/07.jpg" alt="" /></div>
      <div class="content-bottom content-bottom-alt reveal-bg-four">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/home.png"/></div>
        <h2 class="pad pad-top-minus pad-bottom-minus">About Me</h2>
        <p class="pad pad-top-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo porttitor aliquam eget at diam. <br/><br/>Duis consequat malesuada orci, eget convallis augue bibendum at. Nam nunc justo, fringilla et consectetur ut, sollicitudin nec enim. Nam vulputate. </p>
      </div>
    </article>


    <article class="element fx-slide-up home clearfix one-third about">
      <div class="images"><img src="images/content/08.jpg" alt="" /></div>
      <div class="content-bottom content-bottom-alt reveal-bg-five">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/testimonial.png"/></div>
        <h2 class="pad pad-top-minus pad-bottom-minus">Testimonial 1</h2>
        <p class="pad pad-top-minus pad-bottom-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo porttitor aliquam eget at diam. <br/><br/>
          <span class="testimonial-user">John Doe</span>
          <span class="testimonial-firm">Anonymus Inc</span>
        </p>
      </div>
    </article>


    <article class="element fx-slide-up clearfix one-third about">
      <div class="images"><img src="images/content/03.jpg" alt="" /></div>
      <div class="content-bottom content-bottom-alt reveal-bg-seven">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/testimonial.png"/></div>
        <h2 class="pad pad-top-minus pad-bottom-minus">Testimonial 2</h2>
        <p class="pad pad-top-minus pad-bottom-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo porttitor aliquam eget at diam. <br/><br/>
          <span class="testimonial-user">Laura Doe</span>
          <span class="testimonial-firm">Anonymus Inc</span>
        </p>
      </div>
    </article>


    <article class="element fx-fade-out media clearfix two-third"> 
      <a class="video-popup tippy" href="http://player.vimeo.com/video/25708134?title=0&amp;byline=0&amp;portrait=0">
      <div class="images"><img src="images/content/10.jpg" alt="" /></div>
      <div class="inner-panel reveal-bg-one">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/video.png"/></div>
        <h2 class="pad pad-top-minus">Vimeo Video on Lightbox</h2>
      </div>
      </a> 
    </article>


    <article class="element fx-slide-out clearfix one-third media overflow"> 
      <a href="images/content/04.jpg" title="" class="popup">
      <div class="images"><img src="images/content/04.jpg" alt="" /></div>
      <div class="inner-panel reveal-bg-four">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/image.png"/></div>
        <h2 class="pad pad-top-minus">Image Lightbox</h2>
      </div>
      </a> 
    </article>


    <article class="element fx-fade-out media clearfix one-half vimeo-custom-height"> 
      
      <div class="vendor">
          <iframe src="http://player.vimeo.com/video/25708134?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" ></iframe>
        </div>
      <div class="inner-panel reveal-bg-two">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/vimeo.png"/></div>
        <h2 class="pad pad-top-minus">Vimeo Video Inline</h2>
      </div>
    </article>


    <article class="element fx-fade-out media clearfix one-half"> 
      <div class="reveal-bg-seven">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/sound.png"/></div>
        <h2 class="pad pad-top-minus">SoundCloud Integration</h2>
      </div>
      <div class="post pad reveal-bg-nine">
        <a href="http://soundcloud.com/nanopop/pure-bliss-memories-1" class="sc-player">Track 01</a>
        <a href="http://soundcloud.com/eugene-dmitrov/dmitrodon-atmo" class="sc-player">Track 02</a>
        <a href="http://soundcloud.com/nanopop/summertime-original-mix" class="sc-player">Track 03</a>
      </div>
    </article>


    <article class="element fx-slide-up clearfix one-third home contact">
      <div class="images"><img src="images/content/03.jpg" alt="" /></div>
      <div class="content-bottom content-bottom-alt reveal-bg-two">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/tweets.png"/></div>
        <h2 class="pad pad-top-minus pad-bottom-minus">@username</h2>
        <div class="pad pad-top-minus">
            <article id="ticker" class="query"></article>
        </div>
      </div>
    </article>


    <article class="element fx-slide-up home clearfix one-third blog blog1"> 
      <a href="#filter=.blog%3Anot(.blog1),+.post1">
      <div class="images"><img src="images/content/08.jpg" alt="" /></div>

      <div class="content-bottom blog-full-post reveal-bg-seven">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/post.png"/></div>
        <h2 class="pad pad-top-minus pad-bottom-minus">Blog Post One</h2>
        <p class="pad pad-top-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo consec tetur adipiscing.</p>
        <div class="pad pad-top-minus">
        <span class="btn btn-reveal">Read Full Story</span>
        </div>
      </div>

      </a> 
    </article>


    <article class="element  clearfix two-third post post1">
      <div class="images"><img src="images/content/full-post.jpg" alt="" />
        <a href="#filter=.blog">
        <div class="icons close"></div>
        </a>
      </div>
      <div class="content-bottom reveal-bg-seven">
        <h2 class="pad pad-bottom-minus">Blog Post Heading</h2>
        <p class="pad pad-top-minus pad-bottom-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie accumsan arcu, a ultricies ligula gravida non. Pellentesque rutrum quis nisi a adipiscing. Maecenas pretium laoreet gravida. Curabitur eu sapien non quam tempor cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum sed libero eu diam convallis venenatis a viverra massa.</p>
        <div class="comments pad pad-top-minus pad-bottom-minus">


                <h3 class="comment-count ">03 Comments</h3>

                <ul class="commentlists">
                      <li>
                        <div class="comment-author image-polaroid">
                          <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                        </div>
                        <div class="comment-body">
                          <div class="comment-meta">
                            <span class="meta-name"><a href="#">John Doe</a></span>
                            <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                            <div class="reply">
                              <a href="#">reply</a>
                            </div>
                          </div>
                          <p>
                            Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                          </p>
                        </div>
                        <ul class="comment-children">
                          <li>
                            <div class="comment-author image-polaroid">
                              <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                            </div>
                            <div class="comment-body">
                              <div class="comment-meta">
                                <span class="meta-name"><a href="#">John Doe</a></span>
                                <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                                <div class="reply">
                                  <a href="#">reply</a>
                                </div>
                              </div>
                              <p>
                                Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                              </p>
                            </div>
                          </li>
                          
                        </ul>
                      </li>
                      
                      <li>
                        <div class="comment-author image-polaroid">
                          <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                        </div>
                        <div class="comment-body">
                          <div class="comment-meta">
                            <span class="meta-name"><a href="#">John Doe</a></span>
                            <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                            <div class="reply">
                              <a href="#">reply</a>
                            </div>
                          </div>
                          
                          <p>
                            Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                          </p>
                        </div>
                      </li>
                    </ul>
            </div>
          </div>  
            
    </article>


    <article class="element fx-slide-up clearfix one-third blog blog2"> 
      <a href="#filter=.blog%3Anot(.blog2),+.post2">
      <div class="images"><img src="images/content/03.jpg" alt="" /></div>

      <div class="content-bottom blog-full-post reveal-bg-eight">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/post.png"/></div>
        <h2 class="pad pad-top-minus pad-bottom-minus">Blog Post Two</h2>
        <p class="pad pad-top-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo consec tetur adipiscing.</p>
        <div class="pad pad-top-minus">
        <span class="btn btn-reveal">Read Full Story</span>
        </div>
      </div>
      
      </a> 
    </article>


    <article class="element  clearfix two-third post post2">
      <div class="images"><img src="images/content/full-post.jpg" alt="" />
        <a href="#filter=.blog">
        <div class="icons close"></div>
        </a>
      </div>
      <div class="content-bottom reveal-bg-eight">
        <h2 class="pad pad-bottom-minus">Blog Post Heading</h2>
        <p class="pad pad-top-minus pad-bottom-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie accumsan arcu, a ultricies ligula gravida non. Pellentesque rutrum quis nisi a adipiscing. Maecenas pretium laoreet gravida. Curabitur eu sapien non quam tempor cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum sed libero eu diam convallis venenatis a viverra massa.</p>
        <div class="comments pad pad-top-minus pad-bottom-minus">


                <h3 class="comment-count ">03 Comments</h3>

                <ul class="commentlists">
                      <li>
                        <div class="comment-author image-polaroid">
                          <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                        </div>
                        <div class="comment-body">
                          <div class="comment-meta">
                            <span class="meta-name"><a href="#">John Doe</a></span>
                            <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                            <div class="reply">
                              <a href="#">reply</a>
                            </div>
                          </div>
                          <p>
                            Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                          </p>
                        </div>
                        <ul class="comment-children">
                          <li>
                            <div class="comment-author image-polaroid">
                              <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                            </div>
                            <div class="comment-body">
                              <div class="comment-meta">
                                <span class="meta-name"><a href="#">John Doe</a></span>
                                <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                                <div class="reply">
                                  <a href="#">reply</a>
                                </div>
                              </div>
                              <p>
                                Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                              </p>
                            </div>
                          </li>
                          
                        </ul>
                      </li>
                      
                      <li>
                        <div class="comment-author image-polaroid">
                          <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                        </div>
                        <div class="comment-body">
                          <div class="comment-meta">
                            <span class="meta-name"><a href="#">John Doe</a></span>
                            <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                            <div class="reply">
                              <a href="#">reply</a>
                            </div>
                          </div>
                          
                          <p>
                            Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                          </p>
                        </div>
                      </li>
                    </ul>
            </div>
          </div>  
            
    </article>


    <article class="element fx-slide-up clearfix one-third blog blog3"> 
      <a href="#filter=.blog%3Anot(.blog3),+.post3">
        <div class="images"><img src="images/content/07.jpg" alt="" /></div>

        <div class="content-bottom blog-full-post reveal-bg-nine">
          <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/post.png"/></div>
          <h2 class="pad pad-top-minus pad-bottom-minus">Blog Post Three</h2>
          <p class="pad pad-top-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo consec tetur adipiscing.</p>
          <div class="pad pad-top-minus">
          <span class="btn btn-reveal">Read Full Story</span>
          </div>
        </div>
        
      </a> 
    </article>


    <article class="element  clearfix two-third post post3">
      <div class="images"><img src="images/content/full-post.jpg" alt="" />
        <a href="#filter=.blog">
        <div class="icons close"></div>
        </a>
      </div>
      <div class="content-bottom reveal-bg-nine">
        <h2 class="pad pad-bottom-minus">Blog Post Heading</h2>
        <p class="pad pad-top-minus pad-bottom-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie accumsan arcu, a ultricies ligula gravida non. Pellentesque rutrum quis nisi a adipiscing. Maecenas pretium laoreet gravida. Curabitur eu sapien non quam tempor cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum sed libero eu diam convallis venenatis a viverra massa.</p>
        <div class="comments pad pad-top-minus pad-bottom-minus">


                <h3 class="comment-count ">03 Comments</h3>

                <ul class="commentlists">
                      <li>
                        <div class="comment-author image-polaroid">
                          <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                        </div>
                        <div class="comment-body">
                          <div class="comment-meta">
                            <span class="meta-name"><a href="#">John Doe</a></span>
                            <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                            <div class="reply">
                              <a href="#">reply</a>
                            </div>
                          </div>
                          <p>
                            Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                          </p>
                        </div>
                        <ul class="comment-children">
                          <li>
                            <div class="comment-author image-polaroid">
                              <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                            </div>
                            <div class="comment-body">
                              <div class="comment-meta">
                                <span class="meta-name"><a href="#">John Doe</a></span>
                                <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                                <div class="reply">
                                  <a href="#">reply</a>
                                </div>
                              </div>
                              <p>
                                Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                              </p>
                            </div>
                          </li>
                          
                        </ul>
                      </li>
                      
                      <li>
                        <div class="comment-author image-polaroid">
                          <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                        </div>
                        <div class="comment-body">
                          <div class="comment-meta">
                            <span class="meta-name"><a href="#">John Doe</a></span>
                            <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                            <div class="reply">
                              <a href="#">reply</a>
                            </div>
                          </div>
                          
                          <p>
                            Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                          </p>
                        </div>
                      </li>
                    </ul>
            </div>
          </div>  
            
    </article>


    <article class="element fx-slide-up clearfix one-third blog blog4"> 
      <a href="#filter=.blog%3Anot(.blog4),+.post4">
        <div class="images"><img src="images/content/03.jpg" alt="" /></div>

        <div class="content-bottom blog-full-post reveal-bg-ten">
          <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/post.png"/></div>
          <h2 class="pad pad-top-minus pad-bottom-minus">Blog Post Four</h2>
          <p class="pad pad-top-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo consec tetur adipiscing.</p>
          <div class="pad pad-top-minus">
          <span class="btn btn-reveal">Read Full Story</span>
          </div>
        </div>
        
      </a> 
    </article>


    <article class="element  clearfix two-third post post4">
      <div class="images"><img src="images/content/full-post.jpg" alt="" />
        <a href="#filter=.blog">
        <div class="icons close"></div>
        </a>
      </div>
      <div class="content-bottom reveal-bg-ten">
        <h2 class="pad pad-bottom-minus">Blog Post Heading</h2>
        <p class="pad pad-top-minus pad-bottom-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie accumsan arcu, a ultricies ligula gravida non. Pellentesque rutrum quis nisi a adipiscing. Maecenas pretium laoreet gravida. Curabitur eu sapien non quam tempor cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum sed libero eu diam convallis venenatis a viverra massa.</p>
        <div class="comments pad pad-top-minus pad-bottom-minus">


                <h3 class="comment-count ">03 Comments</h3>

                <ul class="commentlists">
                      <li>
                        <div class="comment-author image-polaroid">
                          <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                        </div>
                        <div class="comment-body">
                          <div class="comment-meta">
                            <span class="meta-name"><a href="#">John Doe</a></span>
                            <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                            <div class="reply">
                              <a href="#">reply</a>
                            </div>
                          </div>
                          <p>
                            Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                          </p>
                        </div>
                        <ul class="comment-children">
                          <li>
                            <div class="comment-author image-polaroid">
                              <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                            </div>
                            <div class="comment-body">
                              <div class="comment-meta">
                                <span class="meta-name"><a href="#">John Doe</a></span>
                                <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                                <div class="reply">
                                  <a href="#">reply</a>
                                </div>
                              </div>
                              <p>
                                Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                              </p>
                            </div>
                          </li>
                          
                        </ul>
                      </li>
                      
                      <li>
                        <div class="comment-author image-polaroid">
                          <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                        </div>
                        <div class="comment-body">
                          <div class="comment-meta">
                            <span class="meta-name"><a href="#">John Doe</a></span>
                            <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                            <div class="reply">
                              <a href="#">reply</a>
                            </div>
                          </div>
                          
                          <p>
                            Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                          </p>
                        </div>
                      </li>
                    </ul>
            </div>
          </div>  
            
    </article>


    <article class="element fx-slide-up clearfix one-third blog blog5"> 
      <a href="#filter=.blog%3Anot(.blog5),+.post5">
        <div class="images"><img src="images/content/07.jpg" alt="" /></div>

        <div class="content-bottom blog-full-post reveal-bg-one">
          <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/post.png"/></div>
          <h2 class="pad pad-top-minus pad-bottom-minus">Blog Post Five</h2>
          <p class="pad pad-top-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo consec tetur adipiscing.</p>
          <div class="pad pad-top-minus">
          <span class="btn btn-reveal">Read Full Story</span>
          </div>
        </div>
        
      </a> 
    </article>


    <article class="element  clearfix two-third post post5">
      <div class="images"><img src="images/content/full-post.jpg" alt="" />
        <a href="#filter=.blog">
        <div class="icons close"></div>
        </a>
      </div>
      <div class="content-bottom reveal-bg-one">
        <h2 class="pad pad-bottom-minus">Blog Post Heading</h2>
        <p class="pad pad-top-minus pad-bottom-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie accumsan arcu, a ultricies ligula gravida non. Pellentesque rutrum quis nisi a adipiscing. Maecenas pretium laoreet gravida. Curabitur eu sapien non quam tempor cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum sed libero eu diam convallis venenatis a viverra massa.</p>
        <div class="comments pad pad-top-minus pad-bottom-minus">


                <h3 class="comment-count ">03 Comments</h3>

                <ul class="commentlists">
                      <li>
                        <div class="comment-author image-polaroid">
                          <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                        </div>
                        <div class="comment-body">
                          <div class="comment-meta">
                            <span class="meta-name"><a href="#">John Doe</a></span>
                            <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                            <div class="reply">
                              <a href="#">reply</a>
                            </div>
                          </div>
                          <p>
                            Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                          </p>
                        </div>
                        <ul class="comment-children">
                          <li>
                            <div class="comment-author image-polaroid">
                              <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                            </div>
                            <div class="comment-body">
                              <div class="comment-meta">
                                <span class="meta-name"><a href="#">John Doe</a></span>
                                <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                                <div class="reply">
                                  <a href="#">reply</a>
                                </div>
                              </div>
                              <p>
                                Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                              </p>
                            </div>
                          </li>
                          
                        </ul>
                      </li>
                      
                      <li>
                        <div class="comment-author image-polaroid">
                          <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                        </div>
                        <div class="comment-body">
                          <div class="comment-meta">
                            <span class="meta-name"><a href="#">John Doe</a></span>
                            <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                            <div class="reply">
                              <a href="#">reply</a>
                            </div>
                          </div>
                          
                          <p>
                            Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                          </p>
                        </div>
                      </li>
                    </ul>
            </div>
          </div>  
            
    </article>


    <article class="element fx-slide-up  clearfix one-third blog blog6"> 
      <a href="#filter=.blog%3Anot(.blog6),+.post6">
        <div class="images"><img src="images/content/08.jpg" alt="" /></div>

        <div class="content-bottom blog-full-post reveal-bg-two">
          <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/post.png"/></div>
          <h2 class="pad pad-top-minus pad-bottom-minus">Blog Post Six</h2>
          <p class="pad pad-top-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut tortor id leo consec tetur adipiscing.</p>
          <div class="pad pad-top-minus">
          <span class="btn btn-reveal">Read Full Story</span>
          </div>
        </div>
        
      </a> 
    </article>


    <article class="element  clearfix two-third post post6">
      <div class="images"><img src="images/content/full-post.jpg" alt="" />
        <a href="#filter=.blog">
        <div class="icons close"></div>
        </a>
      </div>
      <div class="content-bottom reveal-bg-two">
        <h2 class="pad pad-bottom-minus">Blog Post Heading</h2>
        <p class="pad pad-top-minus pad-bottom-minus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie accumsan arcu, a ultricies ligula gravida non. Pellentesque rutrum quis nisi a adipiscing. Maecenas pretium laoreet gravida. Curabitur eu sapien non quam tempor cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum sed libero eu diam convallis venenatis a viverra massa.</p>
        <div class="comments pad pad-top-minus pad-bottom-minus">


                <h3 class="comment-count ">03 Comments</h3>

                <ul class="commentlists">
                      <li>
                        <div class="comment-author image-polaroid">
                          <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                        </div>
                        <div class="comment-body">
                          <div class="comment-meta">
                            <span class="meta-name"><a href="#">John Doe</a></span>
                            <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                            <div class="reply">
                              <a href="#">reply</a>
                            </div>
                          </div>
                          <p>
                            Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                          </p>
                        </div>
                        <ul class="comment-children">
                          <li>
                            <div class="comment-author image-polaroid">
                              <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                            </div>
                            <div class="comment-body">
                              <div class="comment-meta">
                                <span class="meta-name"><a href="#">John Doe</a></span>
                                <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                                <div class="reply">
                                  <a href="#">reply</a>
                                </div>
                              </div>
                              <p>
                                Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                              </p>
                            </div>
                          </li>
                          
                        </ul>
                      </li>
                      
                      <li>
                        <div class="comment-author image-polaroid">
                          <img class="avatar-thumbnail" src="images/avatar.png" alt="proxim" title="proxim">
                        </div>
                        <div class="comment-body">
                          <div class="comment-meta">
                            <span class="meta-name"><a href="#">John Doe</a></span>
                            <span class="meta-date">December 31, 2012 at 11:00 AM</span>
                            <div class="reply">
                              <a href="#">reply</a>
                            </div>
                          </div>
                          
                          <p>
                            Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                          </p>
                        </div>
                      </li>
                    </ul>
            </div>
          </div>  
            
    </article>


    <article class="element fx-fade-out home clearfix two-third portfolio about"> 
      <a class="video-popup tippy" href="http://player.vimeo.com/video/38370036?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff">
      <div class="images"><img src="images/content/10.jpg" alt="" /></div>
      <div class="inner-panel reveal-bg-eight">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/video.png"/></div>
        <h2 class="pad pad-top-minus">Watch my video</h2>
      </div>
      </a> 
    </article>


    <article class="element fx-slide-up home clearfix one-third contact">
      <div class="images"><img src="images/content/08.jpg" alt="" /></div>
      <div class="content-bottom content-bottom-alt reveal-bg-three">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/contact.png"/></div>
        <h2 class="pad pad-top-minus pad-bottom-minus">Get In Touch</h2>
        <div class="pad pad-top-minus address-lines">
          <p>#025 Lahm Enclave<br/>
            Peter Sherington<br/>
            Dublin - 3, Ireland</p>
            <img class="add-top" src="images/contact/02.png" alt="reveal" title="reveal" />
            <p class="add-top-half">012-345-567 / 890</p>
        </div>
      </div>
    </article>


    <article class="element  clearfix two-third contact">
      
      <div class="one-third white-right2 reveal-bg-one">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/mail.png"/></div>
        <h2 class="pad pad-top-minus pad-bottom-minus">Send Message</h2>
        <div class="pad pad-top-minus">
          <form name="myform" id="contactForm" action="sendcontact.php" enctype="multipart/form-data" method="post"> 
                <div class="row-fluid">
                  <article>
                            <div id="fname"  class="alert alert-error error">
                            Name must not be empty
                            </div>
                            <div id="fmail" class="alert alert-error  error">
                            Please provide a valid email
                            </div>
                            <div id="fmsg" class="alert alert-error  error">
                            Message should not be empty
                            </div>
                    <input size="100" type="text" name="name" id="name" placeholder="Name">
                            <input type="text"  size="30" id="email" name="email" placeholder="email">
                            <textarea  id="msg" rows="3" cols="40" name="message" placeholder="Message">Message</textarea>
                            <button type="submit" name="submit" id="submit" class="btn btn-reveal add-top-half">Send Message</button>
                  </article>
                </div>
              </form>
        </div>
      </div>
      <div class="one-third contact">
        <div class="images"><img src="images/content/11.jpg" alt="" /></div>
      </div>
    </article>


    <article class="element fx-slide-up clearfix one-third home contact">
      <div class="images"><img src="images/content/03.jpg" alt="" /></div>
      <div class="content-bottom content-bottom-alt reveal-bg-nine">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/facebook.png"/></div>
        <p class="pad pad-top-minus pad-bottom-minus"><a href="#">profile page url</a></p>
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/dribbble.png"/></div>
        <p class="pad pad-top-minus pad-bottom-minus"><a href="#">profile page url</a></p>
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/linkedin.png"/></div>
        <p class="pad pad-top-minus pad-bottom-minus"><a href="#">profile page url</a></p>
      </div>
    </article>


    <article class="element fx-slide-up clearfix one-third home contact">
      <div class="images"><img src="images/content/08.jpg" alt="" /></div>
      <div class="content-bottom content-bottom-alt reveal-bg-five">
        <div class="thumb pad pad-bottom-minus"><img alt="reveal" title="reveal" src="images/email.png"/></div>
        <p class="pad pad-top pad-bottom-minus"><a class="email-link" href="#">info@domain.tld</a></p>
      </div>
    </article>


  </section>

  <footer id="mastfoot">
  <section class="container-fluid">
    <div class="row-fluid">
          <article class="span6 mob-center">
            <img id="footlogo" src="images/logo.png" alt="reveal" title="reveal" />
            <p class="slogan">An awesome creative portfolio theme</p>
          </article>
          <article class="span6 text-right">
            <ul id="foot-icons" class="clearfix">
              <li><a href="#"><img title="proxim" alt="proxim" src="images/social/footer_dribbble.png"/></a></li>
              <li><a href="#"><img title="proxim" alt="proxim" src="images/social/footer_facebook.png"/></a></li>
              <li><a href="#"><img title="proxim" alt="proxim" src="images/social/footer_twitter.png"/></a></li>
            </ul>
            <p class="copyright">Copyright &copy; 2013 Designova</p>
          </article>
    </div>
  </section>
</footer>
<!-- end footer -->


</section>
<!-- end container -->


<!-- BACK TO TOP BUTTON -->
<div id="backtotop"><a id="toTop" href="#" onClick="return false"></a>
</div>


</div>  
<!-- master-video-wrap : ends -->

<script src="javascripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="javascripts/modernizr.js" type="text/javascript"></script>
<script src="assets/js/bootstrap-transition.js" ></script> 
<script src="assets/js/bootstrap-alert.js" ></script> 
<script src="assets/js/bootstrap-modal.js" ></script> 
<script src="assets/js/bootstrap-dropdown.js" ></script> 
<script src="assets/js/bootstrap-scrollspy.js" ></script> 
<script src="assets/js/bootstrap-tab.js" ></script> 
<script src="assets/js/bootstrap-tooltip.js" ></script> 
<script src="assets/js/bootstrap-popover.js" ></script> 
<script src="assets/js/bootstrap-button.js" ></script> 
<script src="assets/js/bootstrap-collapse.js" ></script> 
<script src="assets/js/bootstrap-carousel.js" ></script> 
<script src="assets/js/bootstrap-typeahead.js" ></script> 
<script src="assets/js/bootstrap-affix.js" ></script> 

<script src="javascripts/jquery.ba-bbq.min.js" type="text/javascript"></script>
<script defer src="javascripts/jquery.flexslider.js"></script>
<script src="javascripts/jquery.isotope.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.isotope.loader.js" type="text/javascript"></script>
<script src="javascripts/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="javascripts/scrollup.js" type="text/javascript"></script>
<script src="javascripts/responsive-nav.js" type="text/javascript"></script>
<script src="javascripts/preloader.js" type="text/javascript"></script>
<script src="javascripts/jquery.tweet.js" type="text/javascript"></script>
<script src="javascripts/form-validation.js"></script>   
<script src="javascripts/jquery.fitvids.js"></script>
<script src="javascripts/soundcloud.player.api.js"></script>
<script src="javascripts/sc-player.js"></script>
<script src="javascripts/responsive-nav.js" type="text/javascript" ></script>
<script type="text/javascript" charset="utf-8" src="javascripts/jquery.tubular.1.0.js"></script>
<script src="javascripts/script.js" type="text/javascript"></script>

<script>
        var navigation = responsiveNav("#nav", { // Selector: The ID of the wrapper
          animate: true, // Boolean: Use CSS3 transitions, true or false
          transition: 400, // Integer: Speed of the transition, in milliseconds
          label: "Menu", // String: Label for the navigation toggle
          insert: "after", // String: Insert the toggle before or after the navigation
          customToggle: "", // Selector: Specify the ID of a custom toggle
          openPos: "relative", // String: Position of the opened nav, relative or static
          jsClass: "js", // String: 'JS enabled' class which is added to <html> el
          init: function(){}, // Function: Init callback
          open: function(){}, // Function: Open callback
          close: function(){} // Function: Close callback
        });
    </script>

    <script>
    $('document').ready(function() {

      //Setting Intro height = viewport height
      var viewportHeight = $(window).height();
        $('#top').height(viewportHeight);

      //Setting BG Youtube Video
      var options = { videoId: 'G_G8SdXktHg', start: 3 };
      $('#master-video-wrap').tubular(options);
      // f-UGhWj1xww cool sepia hd
      // 49SKbS7Xwf4 beautiful barn sepia
      });
    </script> 
  
</body>
</html>